/* GoogleFont */
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Amatic+SC:400,700);

/* Mi @font-face */
@font-face
{
    font-family: 'Serendity';
    src: url('fuentes/Serendity.woff');
    font-family: 'raleway';
    src: url('fuentes/Raleway-Regular.ttf');
    
}


*{ margin: 0; padding: 0;font-weight: normal;transition: 1s;}
.contenedor{ max-width: 960px; height: auto; margin: 0 auto;}

/* Estilos generales */
html{ font-size:  100%}
body{ font-family: Arial; font-size: 10px;}
header{ width: 100%; min-height: 100px;}

.vn04 { position: relative;float: center; margin-top: 0.3%;margin-bottom: 0.3%;font-size: 6rem; text-align:center;background: #D38D08 ;color:rgba(255, 222, 162, 0.98);font-family: 'Amatic SC', cursive;font-weight: 700;}

·fotos{position: relative;float: left; width: 100%; height: auto; display:inline;}
.mariano {width: 237.5px; height: auto; display:inline;}
.ariel {width: 237px; height: auto; display:inline;}
.flor {width: 237.5px; height: auto; display:inline;}
.sofia {width: 238px; height: auto; display:inline;}
.separador{ clear: both;}





section{height: auto; width: 960px; position: relative;}
video{margin: 10px 0 10px 110px; border: 3px solid; border-color: black;}
article{width: 74.5%; position: relative; float: left; background: rgba(212, 182, 126, 0.74); min-height: 400px;}


h1{font-family: 'Amatic SC', cursive;font-weight: 700;font-size: 3rem;margin-left:25px;margin-top: 10px;margin-right:25px;text-align: justify;margin-top: 10px;padding: 5px;}
p {font-size: 1.5rem; font-family: 'Oswald'; font-weight: 300;color:#fff;margin-left:25px;margin-top: 10px;margin-right:25px; text-align: justify;}



aside{ width: 25%; position: relative; float: right; background: rgba(252, 235, 203, 0.74); min-height: 400px;}
.autoridades {font-size: 1.1rem; font-family: 'Oswald'; font-weight: 400;text-align: left;margin:10px;}
h2{font-size: 1.5rem; font-family: 'Oswald'; font-weight: 300; margin: 5px;text-align: center;}
h3{font-size: 1rem; font-family: 'Oswald'; font-weight: 300; text-align: justify;margin:10px;}



/* Menú */

header nav{margin-top: 5px; margin-bottom: 5px; background:#D38D08 ;}
header nav ul{ list-style-type: none;}
header nav ul li{ display: inline;}
header nav ul li a {font-size: 2rem; text-decoration: none; color: #121212;font-family: 'Oswald', sans-serif; font-weight: 300;text-align;align-items:left;margin-left: 30px; margin-right: 85px;}
header nav ul li a:hover{background: #ffffff; color: #64935b;width: 100%;}


header nav ul li a2{ margin-left: 70px; margin-right:0px; font-size: 2rem; text-decoration: none; color: #121212;font-family: 'Oswald', sans-serif; font-weight: 300;text-align;align-items:left;}

header nav ul li a3{ margin-left: 80px; margin-right:0px; font-size: 2rem; text-decoration: none; color: #121212;font-family: 'Oswald', sans-serif; font-weight: 300;text-align;align-items:left;}



footer h4 {font-size: 1rem; font-family: 'Oswald'; font-weight: 300;text-align: left; text-align: justify;margin-top:10px;}

/* Responsive */



@media screen and (max-width:500px){
    h1{ font-size: 1.75rem}
    h2{ font-size: 1rem}
    h4{ font-size: 0.5rem}
    article{ width: 100%;}
    section { width:100%;}
    aside { width: 100%;}
    .fotos{ width: 100%; height: auto;}
    .vn04 { width: 100%; height: auto;}
   
    
}