/**************************************************
Css base para web adaptativa
**************************************************/

/*_____________________________
 / Estructuración de la pagina \_______________________________________*/
html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
.container_main {
    width: 100%;
}

.center {
    max-width: 100%;
    margin: 0 auto;
}

.ImgAdaptativa {
    width: 100%;
    max-width:100% !important;
}

.ClearFloat { clear: both; }

/*__________________________
 / Estructura básica: Lista \_______________________________________*/
.List {
    width: auto; /*Con esto es amolda a la pantalla.*/
}
.ElementOfList {
    height: 100%;
}
.SubElement {
    width: auto;
    height: auto;
    float: left;
}
.ContainerSubElementsContent {
    width: auto;
    height: auto;
    float: left;
}
.SubElementContent {
    width: auto;
    height: auto;
}

/*___________________________
 / Estructura básica: Matriz \______________________________________*/
.Matrix {
    width: auto; /*Con esto se amolda a la pantalla.*/
}
.ElementOfMatrix {
    width: auto;
    height: auto;
    float: left;
}
.ElementOfFloatMatrix {
    /*width: 200px;
    height: 200px;
    margin:  50px;*/
    float: left;
}
.SubElementOfMatix {
    /*width: 100px;
    height: 100px;
    margin-top: 25%;
    margin-bottom: 3%;*/
    margin-right: auto;
    margin-left: auto;
}

/*_________________________
 / Estructura básica: Menú \________________________________________*/
.MainMenu {
    position: fixed;
    z-index: 100;
    width: 100%;
}
.Menu {
    max-width: 95%;
    margin: 0 auto;
}
.Logo {
    float: left;
    margin: 5px 15px 5px 10px;
}
.MenuElements {
    float: right;
}
.ElementOfMenu{
    float: left;
    margin: 5px 15px 5px 0px;
}
#IconList {
    float: left;
    margin: 15px 15px 5px 0px;
    display: none;
}
.SubMenu{
    margin: 0 auto;
    display: none;
}
.ElementOfSubMenu {
    text-align: center;
    border-top: solid 1px gray;
}

@media screen and (max-width: 800px) {
    /* Aquí van las reglas CSS necesarias - modifica las prodiedades*/
    .ElementOfMenu { display: none; }
    #IconList { display: inline; }
}

/*________________________
 / Visualizar estructuras \_________________________________________*/
.borderBlack { border: solid 1px black; }
.borderBlue { border: solid 1px blue; }
.borderRed { border: solid 1px red; }
.borderGreen { border: solid 1px green; }
.borderPink { border: solid 1px pink; }
.borderGray { border: solid 1px gray; }