/* Google Fonts*/

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900|Quicksand:400,300);

/*
font-family: 'Playfair Display', serif;
font-family: 'Quicksand', sans-serif;
*/




/* GENERAL */

html{
	background-image: url("../img/wallbackgr.jpg");
	background-size: cover;
    background-attachment: fixed;    
   
}
.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: rgba(214, 214, 214, 0.48);
        margin: 0 1rem;
        position: relative;
        
        
}

#titulo{
        font-family: 'Quicksand', sans-serif;
        font-weight: 300;
        font-size: 5rem;
        color: #672f2f;
        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: rgba(214, 214, 214, 0.48);
	        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: 18%;
    vertical-align: middle;
}

#navegador a li{ padding-top: 0.6rem; padding-bottom: 0.6rem;
   font-family: 'Quicksand', sans-serif;
        font-weight: 300;   
   font-size: 1.5rem;
   color: #ffffff;
   background-color: rgba(238, 238, 238, 0);
   text-decoration: none;
}



#navegador li:hover{
   background-color: #b53b3b;
   color: #000000;
}



.clear{clear:both}

/* menu desplegable*/

nav{display: none; width: 100%;
    background: rgba(214, 214, 214, 0.48);
    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: #b53b3b; border-bottom: solid; border-bottom-width: thin; border-bottom-style: ridge;text-decoration: none; font-family: 'Quicksand', sans-serif;
        font-weight: 300;   
   font-size: 1.5rem; 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: center;
                 max-width: 20rem; 
                 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);
                 object-position: right;}

.fotoj {width: 100%;}
.botonazo {width: 60%;}



#principal > aside {width: 65%;
    margin: 0rem 0rem 0rem 0rem;
    padding-left: 3rem;
    -webkit-flex: 1 6 65%;
    flex: 1 6 65%;
    -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: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 3rem;
    color: #b53b3b;
    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: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 2.1rem;
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}


#principal > aside h3 {
    margin left: 1rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.5rem;
    color: #ffffff;
    text-decoration: underline; text-decoration-color: white;
    text-shadow: 1px 1px 1px rgba(7, 7, 7, 0.94);
}

#principal > aside p {margin-top: 0; margin-bottom: 0;
    margin left: 1rem;
    margin-right: 1.5rem;
    font-family: 'Quicksand', 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;
}









/*FOOTER*/

footer {display: block;
        margin: 1rem 1rem 1rem 1rem;
        padding: 1rem 3rem 1rem 3rem;
        overflow: hidden;
        background: rgba(150, 143, 143, 0);
        color: #ffffff;
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        font-size: 0.65rem;
        text-align: center;
        border: 0.0625rem solid rgba(255, 255, 255, 0);
        }











.captions {display: block; text-align: center;}
.captions ul {list-style-type: none; padding: 20px 5px 30px 0px;}
.captions ul li {position: relative; float: left;}
.captions ul li a{ text-decoration: none; font-weight: 300; color: #1c1a1a; background: rgba(214, 214, 214, 0); margin: 5px; padding: 5px;}





















/* 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;
        margin: 0 0rem 0rem 0rem;
        position: relative;
        box-shadow: -5px 5px 11px -5px rgba(0,0,0,0.82);
        
}

#titulo{ width: 7rem;
        font-size: 5rem;
        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);
        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 { 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;*/
    }
    
        
    
    
    
    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%;
    }
    
    
      
    
    
}


@media screen and (max-width: 510px) {
    
    #imgs1 {display: none;}
    
    nav .cruz{ right: 1rem;}
    nav .hamb{ right: 1rem;}
    
   
    
    
    
    
    }