/* Google Fonts*/

@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700,400italic|Trochut:400,700);

/*
font-family: 'Quattrocento Sans', sans-serif;
font-family: 'Trochut', cursive;
*/




/* GENERAL */

html{
	background-image: url("../img/background.png");
	background-size: contain;
    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-top: 0;
        margin: 0rem 0rem 1rem 0rem;
        padding: 0rem 1rem 0rem 1rem;
        }

.titulovn14 {
        padding: 0.8em 0.5em 0.5em 0.5em;
        background: #363545;
        margin: 0 1rem;
        position: relative;
        box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
        
}

#titulo{
        font-family: 'Trochut', cursive;
        font-weight: 700;
        font-size: 5rem;
        text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
        color: #e8e8e8;
        vertical-align: middle;
        text-align: center;
        
    }

.clear{clear: both}

.aside1 {position: relative;
        }

#imgs1{float: right; position: absolute;width: 300px; right: 1rem; top:-3rem;
     
}




/*Menu comun*/

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

#navegador {background-color: antiquewhite;
	        background-size: auto;
            box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
            border: 0.0625rem solid rgba(255, 255, 255, 0);
            min-height: 3rem;
            overflow: hidden;}

#navegador ul {object-position: center; vertical-align: middle;}

#navegador li{margin-top: 1rem; margin-bottom: 1rem;
    display: inline-block;
    text-align: center;
    padding: 0;
    object-position: center;
    width: 13%;
    vertical-align: middle;
}

#navegador a li{ 
   font-family: 'Quattrocento Sans', sans-serif;
   font-weight: 700;    
   font-size: 1rem;
   color: #000000;
   background-color: rgba(238, 238, 238, 0);
   text-decoration: none;
}



#navegador li:hover{
   background-color: #333333;
   color: #ffffff;
}


#navegador2 {background-color: antiquewhite;
	        background-size: auto;
            box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
            border: 0.0625rem solid rgba(255, 255, 255, 0);
            min-height: 3rem;
            overflow: hidden;}

#navegador2 ul {object-position: center; vertical-align: middle;}

#navegador2 li{margin-top: 1rem; margin-bottom: 1rem;
    display: inline-block;
    text-align: center;
    padding: 0;
    object-position: center;
    width: 24%;
    vertical-align: middle;
}

#navegador2 a li{ 
   font-family: 'Quattrocento Sans', sans-serif;
   font-weight: 700;    
   font-size: 1rem;
   color: #000000;
   background-color: rgba(238, 238, 238, 0);
   text-decoration: none;
}



#navegador2 li:hover{
   background-color: #333333;
   color: #ffffff;
}

.clear{clear:both}

/* menu desplegable*/

nav{display: none; width: 100%;
    background-color: antiquewhite;
    background-size: auto; box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);}
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: 'Quattrocento Sans', sans-serif;
   font-weight: 400; 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: 3rem;}
nav .hamb{ position: absolute; top: 10px; right: 3rem;}
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 */

/* Principal*/

#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: rgba(0, 0, 0, 0.7);
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    }

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

#principal > article img {height: 33rem;}



#principal > aside {width: 65%;
    margin: 0rem 0rem 0rem 0rem;
    padding-left: 3rem;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 1;
    order: 1;
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    }

#principal > aside h1 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#principal > aside h2 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}

#principal > aside p {
    margin left: 1rem;
    margin-right: 1.5rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 2rem;
    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;
}


/*FADU RESP*/

#fotoresp {display: none;}



/* Desarrollo*/ 


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


#descarga h1 {
    margin left: 0.5rem; 
    margin-right: 0.5rem; 
    margin top: 1rem; margin-bottom: 1rem; 
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700; 
    font-size: 1.9rem; 
    color: #070707;
}

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

#descarga a {margin-bottom: 1rem;}

#descarga a img { margin-bottom: 1rem;
    width: 13rem; 
    margin: 0rem 4rem 0rem 4rem;
}






/*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: 'Quattrocento Sans', sans-serif;
        font-weight: 400;
        font-size: 0.75rem;
        text-align: center;
        border: 0.0625rem solid rgba(255, 255, 255, 0);
        }





/*pagina de analisis*/

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

#preguntas > article {
    margin: 0rem 0rem 0rem 0rem;
    padding-left: 3rem;
    padding-right: 3rem;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 1;
    order: 1;
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    }

#preguntas > article h1 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#preguntas > article h2 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}


#preguntas > article h3 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 3.2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}


#preguntas > article h4 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #f1f595;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}

#preguntas > article h5 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 400;
    font-size: 1.7rem;
    color: #fff8d2;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}

#preguntas > article p { margin-top: 0.4rem;
    margin left: 1rem;
    margin-right: 0rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #ffffff;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#preguntas > article ul li {
    list-style: none; 
}

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


.links{
    padding-left: 0;
}


#botonpics {width: 99%; padding: 0 0rem 0 0rem; text-align: center;}

#botonpics a {margin-bottom: 1rem;}

#botonpics a img { margin-bottom: 1rem;
    width: 13rem; 
    margin: 0rem 0rem 0rem 0rem;
}

/*Mapa de navegacion*/
#cuadronav {margin: 1rem 1rem 1rem 1rem;
    display: block; width: auto;  
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    }














/*mapa navegacion*/

#mapanav { margin: 1rem 1rem 1rem 1rem;
    padding-top: 2rem;
    display: block; width: auto;  
    overflow: hidden;
    background: rgb(234, 234, 234);
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    text-align: center;}


#mapanav > article { width: 98%; text-align: center;
    margin: 0rem 0rem 0rem 0rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    }

#mapanav > article img { width: 98%; }

#mapanav h1 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#mapanav h2 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 2rem;
     font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: #020202;
    
}


#mapanav > article h3 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 3.2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}


#mapanav h4 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #f1f595;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}

#mapanav p { margin-top: 0.4rem;
    margin left: 1rem;
    margin-right: 0rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #000000;
    
}


















/*mockups de cada uno*/


#pics { margin: 1rem 1rem 1rem 1rem;
    padding-top: 2rem;
    display: block; width: auto;  
    overflow: hidden;
    background: rgb(255, 248, 213);
    box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    text-align: center;}


#pics ul{
    list-style-type: none;
    padding: 0 2.5em;
    margin: 0.5rem 0;
}

#pics li{
    float: left;
    width: 25%;
    text-align: center;
}

#scrin{
    resize: horizontal;
    width: 96%;
}


#pics > article {
    margin: 0rem 0rem 0rem 0rem;
    padding-left: 3rem;
    padding-right: 3rem;
    -webkit-flex: 1 6 20%;
    flex: 1 6 20%;
    -webkit-order: 1;
    order: 1;
    border: 0.0625rem solid rgba(255, 255, 255, 0);
    }

#pics h1 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}

#pics h2 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 2rem;
     font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    font-size: 2.2rem;
    color: #020202;
    
}


#pics > article h3 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 3.2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}


#pics h4 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 700;
    font-size: 1.45rem;
    color: #f1f595;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}

#pics p { margin-top: 0.4rem;
    margin left: 1rem;
    margin-right: 0rem;
    font-family: 'Quattrocento Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.6rem;
    color: #000000;
    
}


#pedidos { margin-right: -3.1rem; margin-bottom: -0.2rem;
    text-align: right;
}








/*PICS VIEJAS*/

#preguntas ul { list-style-type: none;
    padding: 0 2.5em;
    margin: 0.5rem 0;
    
}


#preguntas ul li { float: left;
    width: 25%;
    text-align: center;
    
}

#scrin{
    resize: horizontal;
    width: 96%;
}






/* Cambios por pantalla angosta*/

@media screen and (max-width: 1000px) {
    
    nav {display: block;}
    nav .botones{ display: block;}
    #navegador{display: none;}
    #navegador2 {display: none;}  
    
    
    
}











@media screen and (max-width: 840px) {
    
    
    
    
    .titulovn14 {
        padding: 0.8em 0.5em 0.5em 0.5em;
        background: #363545;
        margin: 0 0rem 0rem 0rem;
        position: relative;
        box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
        
}

#titulo{ width: 7rem;
        font-family: 'Trochut', cursive;
        font-weight: 700;
        font-size: 5rem;
        color: #e8e8e8;
        vertical-align: middle;
        text-align: left;
        
    }

.clear{clear: both}

.aside1 {position: relative;
        }

#imgs1{float: right; position: absolute;width: 300px; right: 1rem; top:-3rem;
     
}
    
    
    
    
    
    header {margin: 0rem 0.1rem 0.5rem 0.1rem;
    padding: 0rem 0rem 0.5rem 0rem;}
    
    nav {display: block;}
    nav .botones{ display: block;}
    #navegador{display: none;}
  
   
    
    
    .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;
}
    
   
    
    
        #principal { width: auto; margin: 0rem 0rem 0rem 0rem;
           -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 { display: none; text-align: left;
        width: 100%; 
        margin: 0.5rem 0rem 0.5rem 0rem; order: 2; padding: 0;  
   }  
  
    #principal > article img {height: 20 rem;}
    
    #principal > aside { 
        order: 1;
        width: 95%; 
        margin: 0.5rem 1rem 0.5rem 1rem; padding: 0;
   }  
  
    #principal > nav, #principal > aside, header, footer {
    /*min-height: 32rem;*/
    }
    
    #principal > aside h1 {
        margin left: 0;
        margin-right: 0;
        font-size: 2rem;
        width: 100%;
    }

    #principal > aside p {
        margin left: 0; 
        margin-right: 0;
        margin-bottom: 3rem;
        font-size: 1rem; 
        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%;
    }
    
    
    #preguntas {margin: 0rem 0.1rem 0.5rem 0.1rem;
    padding: 0rem 0rem 0.5rem 0rem;
    display: block; width: auto;  
    overflow: hidden;
       }
    
    
    
    
    #fotoresp {width: 100%;
               display: block;
               overflow: hidden;
               margin-top: 1rem;
               }
    #fotoresp img {width: inherit; box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);}
    
    
    
    
    
    
     #cuadronav {width: 100%;
               display: block;
               overflow: hidden;
               margin-top: 1rem;
               margin: 0rem 0.1rem 0.5rem 0.1rem;
                       }
    #cuadronav img {width: inherit; box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);}
    
    
    
    
    
    
    
    #descarga { margin: 0.5rem 0rem 0.5rem 0rem;  padding: 0rem 0rem 0.5rem 0rem;
    display: block; width: auto;  
    overflow: hidden;
    text-align: center;}


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

    #descarga a img {width: 20rem; margin: 0rem 0rem 0rem 0rem;}
    
    
    #pics { margin: 1rem 0.1rem 1rem 0.1rem;
    padding-top: 2rem;
    width: auto;  
   }
    
   
    
    #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; }
    #principal > aside p {margin left: 1rem; margin-right: 1.5rem; font-size: 0.9rem; text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);}
    
    #simbol{width: 40%;}
    
    
    #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;}
    
 
    #preguntas > article h3 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 2rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}
    
    
    
}


@media screen and (max-width: 510px) {
    
    #imgs1 {display: none;}
    
    nav .cruz{ right: 1rem;}
    nav .hamb{ right: 1rem;}
    
    #preguntas > article h3 {
    margin-bottom: 0.4rem;
    margin left: 1rem;
    font-family: 'Trochut', cursive;
    font-weight: 400;
    font-size: 1.5rem;
    color: #fff09f;
    text-shadow: 2px 2px 8px rgba(7, 7, 7, 0.94);
}
    
    
    
    
    }