/* Google Fonts*/

@import url(https://fonts.googleapis.com/css?family=Roboto:300,700|PT+Sans+Caption:700,400|Roboto+Slab);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);



/* GENERAL */

html{
	background-image: url("../img/fondo.gif");
	background-size: auto;
    background-attachment: inherit;   
}
.full-height { height: 100%; }

.content-height { height: 100%; }

#pagina {display: block; width: 100%; margin: 0 0 0 0;}


/* ENCABEZADO */


header {display: block;
        width: auto;
        margin: 1rem 0rem 1rem 0rem;
        padding: 1rem 1rem 0.5rem 1rem;
        }

.ifadunav{
        margin: -0.5rem 1rem -0.5rem -0.2rem;
}

.imglogo {
        margin: 0;
        border: 0.0625rem solid rgba(255, 255, 255, 0);
        border-radius: 0.5rem;
        width: 100%;
        vertical-align: middle;
}

/*Menu comun*/

#menu{
    list-style-type: none;
    text-align: left;
    object-fit: fill;
    margin: 0;
    padding: 0;
}

#navegador {background-image: url("../img/barra.gif");
	        background-size: auto;
            box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
            border: 0.0625rem solid rgba(255, 255, 255, 0);
            border-radius: 0.5rem;
            }

#navegador li{
    display: inline-block;
    text-align: center;
    padding: 0;
    object-position: center;
    width: 16%;
    vertical-align: middle;
}

#navegador li a { 
   font-family: "Titillium Web", sans-serif;
   font-size: 1.5rem;
   color: #dddddd;
   background-color: rgba(238, 238, 238, 0);
   text-decoration: none;
}
#navegador li:hover{
   background-color: #333333;
   color: #ffffff;
}

.clear{clear:both}

/* menu desplegable*/

nav{display: none; width: 100%;
    background-image: url("../img/barra.gif");
    background-size: auto; box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;}
nav ul{ padding: 0; margin: 0}
nav ul li{list-style-type: none; }
nav ul li a{background: #333; border-bottom: solid; border-bottom-width: thin; border-bottom-style: ridge;text-decoration: none; font-family: "Titillium Web", sans-serif; font-size: 1.2rem; color: #fff; display: block; padding: 1rem}
nav .botones{ display: none; position: relative; height: 5rem;}
nav .cruz{ position: absolute; top: 10px; right: 10px;}
nav .hamb{ position: absolute; top: 10px; right: 10px;}
nav .imglogo2{ position: absolute;
    top: -0.3rem;
    left: -0.3rem;
    width: 11rem;
    height: 110%;}
.vinculo{ text-align: center; color: #fff; display: block;}




.img-wrapper{ max-width: 300px; margin: 0 auto;}
.img-wrapper img{ width: 100%;}




/* CUERPO */

/* IMG PRINCIPAL, SLOGAN, DESCARGA*/

#principal {margin: 1rem 1rem 1rem 1rem;
    display: block; width: auto;  
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
    background-image: url("../img/FADU1.jpg");
	background-size: cover; 
    background-attachment: inherit;
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;}

#principal > article {display: block;
                 background: rgba(214, 214, 214, 0);
                 width: 30%; 
                 margin: 1rem 1rem 1rem -1rem;
                 padding:  0 1rem 0 1rem;
                 -webkit-flex: 3 1 30%;
                 flex: 1 1 30%;
                 -webkit-order: 1;
                 order: 1;
                 border: 0.0625rem solid rgba(255, 255, 255, 0);
                 border-radius: 0.5rem;
                vertical-align: text-bottom;}

#principal > article img {width: 100%}



#principal > aside {width: 65%;
    margin: 1rem 1rem 1rem 0rem;
    background: rgba(214, 214, 214, 0);
    -webkit-flex: 1 6 20%;
    flex: 2 6 20%;
    -webkit-order: 2;
    order: 2;
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
    
}

#principal > aside h1 {
    margin left: 1rem;
    font-family: 'PT Sans Caption', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#principal > aside p {
    margin left: 1rem;
    margin-right: 1.5rem;
    font-family: 'PT Sans Caption', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#principal > aside ul li {
    list-style: none; 
}

#principal > aside ul li a img {
    width: 18rem; 
    margin: 0.8rem 0 0rem 0;
}


.links{
    padding-left: 0;
}


/* DATOS DEL MEDIO */


#datos {margin: 1rem 1rem 1rem 1rem;
    overflow: hidden;
    display: block; 
    width: auto;  
    background: #eee;
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
    padding: 0 1rem;
}


#datos > aside {
    /*max-width: 18rem;*/
    overflow: hidden;
    float: left;
    margin: 1rem 1rem 1rem 1rem;
    background: rgba(255, 65, 65, 0);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
    text-align: center;
    width: 21.5%;
}

#datos > aside h1 {
    margin left: 0.5rem; 
    margin-right: 0.5rem; 
    font-family: 'Roboto', sans-serif; 
    font-size: 1.8rem; 
    font-weight: 700; 
    color: #7895a0;
    margin-bottom: 1rem;
}

#datos > aside p {
    font-family: 'Roboto', sans-serif; 
    font-size: 0.9rem; 
    font-weight: 300; 
    color: #000000;
}

#simbol{
    width: 54%;
}


/* template pantallas */


#main { margin: 1rem 1rem 1rem 1rem;
    display: block; width: auto;  
    overflow: hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    flex-flow: row;
    background-image: url("../img/fondoazul.jpg");
    background-size: auto;
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;}



#main > article {display: block;
                 background: rgba(214, 214, 214, 0);
                 width: 35%; 
                 margin: 1rem 1rem 1rem 1rem;
                 padding:  0 1rem 0 1rem;
                 -webkit-flex: 3 1 35%;
                 flex: 1 1 35%;
                 -webkit-order: 1;
                 order: 1;
                 border: 0.0625rem solid rgba(255, 255, 255, 0);
                 border-radius: 0.5rem;
                 text-align: right;
                 }

#main > aside {width: 60%;
    margin: 1rem 1rem 1rem 0rem;
    background: rgba(214, 214, 214, 0);
    -webkit-flex: 1 6 60%;
    flex: 2 6 60%;
    -webkit-order: 2;
    order: 2;
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
}

#main > aside img {width: 75%;}

#main > article h1 {
    margin left: 1rem; 
    margin-top: 1rem; 
    margin-bottom: 0rem; 
    font-family: 'PT Sans Caption', sans-serif; 
    font-size: 2.4rem; 
    font-weight: 400; 
    color: #ffffff; 
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#main > article p {
    margin left: 1rem; 
    margin-top: 1rem; 
    margin-bottom: 1rem; 
    font-family: 'PT Sans Caption', sans-serif; 
    font-size: 3.4rem; 
    font-weight: 700; 
    color: #ffef94; 
    text-shadow: 2px 2px 22px rgba(7, 7, 7, 0.94);
}




/* descarga*/ 


#descarga { margin: 1rem 1rem 1rem 1rem;
    display: block; width: auto;  
    overflow: hidden;
    background: #646464;
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
    text-align: center;}


#descarga h1 {
    margin left: 0.5rem; 
    margin-right: 0.5rem; 
    margin top: 1rem; margin-bottom: 1rem; 
    font-family: 'Roboto', sans-serif; 
    font-size: 3rem; 
    font-weight: 700; 
    color: #ffffff;
}

#descarga p {
    margin left: 0.5rem; 
    margin-right: 0.5rem; 
    margin top: 1rem; 
    margin-bottom: 1rem; 
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 400; 
    color: #ffffff;
}

#descarga a img {
    width: 20rem; 
    margin: 0rem 4rem 0rem 4rem;
}



/*mapa ciudad universitaria*/

#mapa { margin: 1rem 1rem 1rem 1rem;
        width: auto;  
        overflow: hidden;
        background: rgba(100, 100, 100, 0);
        box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
        border: 0.0625rem solid rgba(255, 255, 255, 0);
        border-radius: 0.5rem;
        text-align: center;}

#mapa img {width: 100%; margin-bottom: -1rem;}

#mapa img {width: 100%; margin-bottom: -1rem;}

.mapa {display: block;}

.mapa2 {display: none;}
    
.formulario {display: none;}





/*FOOTER*/

footer {display: block;
        margin: 1rem 1rem 1rem 1rem;
        padding: 1rem 3rem 1rem 3rem;
        overflow: hidden;
        background: rgba(150, 143, 143, 0);
        color: #020202;
        font-family: 'Roboto', sans-serif; font-weight: 400;
        font-size: 0.8rem;
        text-align: center;
        border: 0.0625rem solid rgba(255, 255, 255, 0);
        border-radius: 0.5rem;}














/* Cambios por pantalla angosta*/


@media screen and (max-width: 1053px) {
    
    
    header {margin: 0.5rem 0.1rem 0.5rem 0.1rem;
    padding: 1rem 0rem 0.5rem 0rem;}
    
    nav {display: block;}
    nav .botones{ display: block;}
    #navegador{display: none;}
  
    #main { width: auto; margin: 0rem 0rem 0rem 0rem;
           box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
           -webkit-flex-flow: column;
           flex-flow: column;
   }

    #main > article, #main > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
            margin: 0; 
            padding: 0;
   }
    
  #main > article { text-align: center;
    width: 100%; 
    margin: 0.5rem 0rem 0.5rem 0rem;;
    box-shadow: none;  
   }  
    
  #main > aside { overflow: hidden; text-align: center;
    width: 100%; 
    margin: 0.5rem 0rem 0.5rem 0rem;;
    box-shadow: none;  
   }  
    
    #main > aside img {width: 50%;}
  
   #main > nav, #main > aside, header, footer {
    /*min-height: 32rem;*/
        max-height: 32rem;
   }
    
  #main > article h1 {
      margin left: 1rem; 
      margin-top: 1rem; 
      margin-bottom: 0rem; 
      margin-right: 1rem; 
      margin-left: 1rem; 
      font-family: sans-serif; 
      font-size: 1.2rem; 
      font-weight: 300; 
      color: #ffffff; 
      text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94); 
      text-align: left;
    }
    
  #main > article p {
      margin left: 1rem; 
      margin-top: 1rem;
      margin-bottom: 1rem;
      margin-right: 1rem; 
      margin-left: 1rem; 
      font-family: sans-serif; 
      font-size: 2rem; 
      font-weight: 100; 
      color: #ffef94; 
      text-shadow: 2px 2px 22px rgba(7, 7, 7, 0.94); 
      text-align: left;
    }      
    
    
    .imglogo2 {
        margin: 0;
        border: 0.0625rem solid rgba(255, 255, 255, 0);
        border-radius: 0.5rem;
        width: 10%;
        vertical-align: middle;
}
    
    .ifadunav2{
        margin: -0.5rem 1rem -0.5rem -0.2rem;
}
    
   
    
    
    #datos {margin: 0.5rem 0rem 0.5rem 0rem;}   
    
    #datos > aside {
        width: 46%;
        min-height: 29rem;
    }
    
    #principal { width: auto; margin: 0rem 0rem 0rem 0rem;
           box-shadow: none;
           -webkit-flex-flow: column;
           flex-flow: column;
   }

    #principal > article, #principal > nav, #main > aside {
    /* Return them to document order */
    -webkit-order: 0;
            order: 0;
            margin: 0; 
            padding: 0;
   }
    
    #principal > article {
        width: 100%; 
        margin: 0.5rem 0rem 0.5rem 0rem; order: 2;  
   }  
  
    #principal > article img {width: 75%}
    
    #principal > aside { 
        order: 1;
        width: 95%; 
        margin: 0.5rem 1rem 0.5rem 1rem;
   }  
  
    #principal > nav, #principal > aside, header, footer {
    /*min-height: 32rem;*/
    }
    
    #principal > aside h1 {
        margin left: 0;
        margin-right: 0;
        font-size: 2rem;
        color: #ffffff;
        text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
        width: 100%;
    }

    #principal > aside p {
        margin left: 0; 
        margin-right: 0;
        margin-bottom: 3rem;
        font-size: 1rem; 
        color: #ffffff; 
        text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
        width: 100%;
    }
    
    #principal > aside ul li {
        margin left: 0rem;
        width: 50%;
        text-align: center;
    }
    
    #principal > aside ul li a img {
        width: 93%; 
        margin: 0;
    }  
    
    .links{
        display: flex;
        display: -webkit-flex;
        width: 51%;
        padding: 0 23% 0 23%;
    }
    
    
    
    #descarga { margin: 0.5rem 0rem 0.5rem 0rem;
    display: block; width: auto;  
    overflow: hidden;
    background: #646464;
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    border-radius: 0.5rem;
    text-align: center;}


    #descarga h1 {margin left: 1rem; margin-right: 1rem; margin top: 1rem; margin-bottom: 1rem; font-size: 1.8rem; color: #ffffff;}
    #descarga p {margin left: 1rem; margin-right: 1rem; margin top: 1rem; margin-bottom: 1rem; font-size: 1rem; color: #ffffff;}

    #descarga a img {width: 20rem; margin: 0rem 0rem 0rem 0rem;}
    
   
    
    #mapa { margin: 0rem 0rem 0rem 0rem;}
    .mapa {display: none;}
    .mapa2 {display: block;}    
    .formulario {display: none;}
    
    
    
    footer {margin: 1rem 0rem 0rem 0rem;}
        
  }










@media screen and (max-width: 900px) {
    
    
    #principal > aside h1 {margin left: 1rem; font-size: 2.2rem; color: #ffffff; text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);}
    #principal > aside p {margin left: 1rem; margin-right: 1.5rem; font-size: 0.9rem; color: #ffffff; text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);}
    
    #simbol{width: 40%;}
    
    
    #datos{padding: 0}
    #datos > aside h1 {margin left: 0.5rem; margin-right: 0.5rem; font-size: 1.4rem; color: #7895a0;}
    #datos > aside p {margin left: 0.5rem; margin-right: 0.5rem; font-size: 0.8rem; color: #000000;}
    #datos > aside { max-width: none; min-height: 8rem; overflow: hidden;width: 96%}
    
    #principal > aside ul li a img {
        width: 93%; 
        margin: 0;
    }  
    
    .links{
        display: flex;
        display: -webkit-flex;
        width: 90%;
        padding: 0 5% 0 5%;
    }
    
    
    #descarga h1 {font-size: 1.5rem;}
    #descarga a img {width: 12rem; margin: 0rem 0rem 0rem 0rem;}
    
    .mapa2 {display: none;}    
    .formulario {display: block;}
    
    
    
    
}