/* 
Funtes
font-family: 'Patua One', cursive; - font-family: 'Roboto', sans-serif;*/


@import url(http://fonts.googleapis.com/css?family=Patua+One);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,900);


* {margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;}

.blanco{color: #fff; }
.gris{color: #5d5d5d;}
.verde{color: #6bc59f;}
.violeta{color:#821796; }
.naranja{color: #e06045;}
.rojo{color:#9b0606;}
.cian{color: #52bcd5;}
.amarillo{color: #f8b72c;}


body { background-color: #f3f3f5;
       font-family: 'Roboto', sans-serif;}
button{ border: none;
    background-color: rgba(255, 255, 255, 0);}

.celeste{color:  #91c6e8;}
.gris{color: #94959a;}

.pagina { max-width:960px;
    margin: 0 auto 0 auto;}


header {background-color: #94959a; 
        width: 100%;
        height: 120px;}

h1 {font-family: 'Patua One', cursive;
    font-size: 3rem;-webkit-font-smoothing: antialiased; /* Mac bold issue */
	-moz-font-smoothing: antialiased; /* Mac bold issue */
	-o-font-smoothing: antialiased; /* Mac bold issue */
	-chrome-font-smoothing: antialiased;/* Mac bold issue */
	font-smoothing: antialiased; /* Mac bold issue */font-weight: 100;}
h2 {font-family: 'Patua One', cursive;
    font-size: 1.8rem;-webkit-font-smoothing: antialiased; /* Mac bold issue */
	-moz-font-smoothing: antialiased; /* Mac bold issue */
	-o-font-smoothing: antialiased; /* Mac bold issue */
	-chrome-font-smoothing: antialiased;/* Mac bold issue */
	font-smoothing: antialiased; /* Mac bold issue */font-weight: 100;}

h3 {font-family: 'Patua One', cursive;
    font-size: 1.5rem;-webkit-font-smoothing: antialiased; /* Mac bold issue */
	-moz-font-smoothing: antialiased; /* Mac bold issue */
	-o-font-smoothing: antialiased; /* Mac bold issue */
	-chrome-font-smoothing: antialiased;/* Mac bold issue */
	font-smoothing: antialiased; /* Mac bold issue */font-weight: 100;}
h4 {font-family: 'Patua One', cursive;
    font-size: 1rem;-webkit-font-smoothing: antialiased; /* Mac bold issue */
	-moz-font-smoothing: antialiased; /* Mac bold issue */
	-o-font-smoothing: antialiased; /* Mac bold issue */
	-chrome-font-smoothing: antialiased;/* Mac bold issue */
	font-smoothing: antialiased; /* Mac bold issue */font-weight: 100;}

.titulos{font-family:  'Roboto', sans-serif;
    font-weight: 700;}


header h1 { color: #91c6e8;
    padding: 2%;}

.logo {width: 50%;
    position: relative;
    float: left;
}

nav { background: #94959a;
    width: 58%;
    float: right;
    
    }

nav ul { list-style-type: none;}

nav ul li { display: inline;}

nav ul li a:hover {  color: #000; }



nav ul li a {  color: #f3f3f5;
    font-weight: bold;
    text-decoration: none;
    margin: 2%;
    padding: 2%;}


main{ width: 100%;
    min-height: 800px;
    background: #f3f3f5;}



.proceso { padding: 9px;}
    
.principal {position: relative;
    width: 74%;
    margin-top: 1.5rem;
    margin-right: 1px;
    min-height: 342px;
    background: #f3f3f5;
    float: left;}

.txt{margin: 0.8rem;
}

.foto { position: relative;
    width: 23%;
    height: 330px;
    float: left;
    margin: 1%;
    margin-top: 3rem;
    box-sizing: border-box; 
    overflow: hidden;
    padding: 1%;
    border:#969393 2px solid; }

#flavia{ background-image:url(imagenes/flavia.jpg);
        image-orientation: bottom;
        background-size:contain;
        background-repeat: no-repeat;
        background-position: bottom;}

#julieta{ background-image:url(imagenes/julieta.jpg);
        image-orientation: bottom;
        background-size:contain;
        background-repeat: no-repeat;
        background-position: bottom;}

#leandro{ background-image:url(imagenes/leandro.jpg);
        image-orientation: bottom;
        background-size:contain;
        background-repeat: no-repeat;
        background-position: bottom;}

#lucas{ background-image:url(imagenes/lucas.jpg);
        image-orientation: bottom;
        background-size:contain;
        background-repeat: no-repeat;
        background-position: bottom;}

.foto a {color:#969393;
   font-family: 'Patua One', cursive;
    font-size: 1rem;}

.foto a:hover {color: rgb(167, 187, 198) ;
    font-family: 'Patua One', cursive;
    font-size: 1rem;}


.info { width: 100%;
    padding:16px;
    float: left;
    position: relative;}

.tema b {font-family: 'Patua One', cursive;}

.tema article { margin: 3%;
    padding: 3%;}
    
.info article {padding: 2%;}

.side {background: #f3f3f5;
    width: 23%;
    padding: 0.8rem 0 0 0.8rem;
    position: relative;
    margin-top: 1.5rem;
    float:left;}

aside p {font-size: 11px; color: #3b3a3a;}
aside b {font-size: 12px;color: #3b3a3a;}

aside article {padding: 2%;}

.separador { width: 100%;
    clear: both;
    height: 3rem;}


footer {text-align: center;
        font-size: 12px;
    padding-top: 3%;
    border-top: #969393 1px solid;
    background-color: #ffffff;}

footer img {margin-top: 3%;}

/* arbol*/

.quinto{position: relative;
    text-align: center;
float: left;
width: 18%;
min-height: 50px;
margin: 1%;
box-sizing: border-box;}

#center{text-align: center;}

.todo{position: relative;
float: left;
width: 100%;
min-height: 50px;
margin: 1%;}

#mapa p{ margin-bottom: 0.5rem;}
#mapa h3{ margin-bottom: 0.8rem;}

.link {position: relative;float: left; min-height: 20px; }



/* Responsive */

@media screen and (max-width:500px){
    h1{ font-size: 2rem;}
    h2{font-size: 1.25rem;}
    img{width: 100%; height: auto;}
    .nav{ font-size: 0.8rem;} 
    .foto { width: 100%; box-sizing: border-box; padding: 1%; margin: inherit; margin-top: 1rem;}  
    .info {width: 100%; padding: inherit; padding-top: 2rem; padding-left: 2px;}
    .side{ width: 100%; margin-left: 0; padding: inherit; padding-top: 2rem; padding-bottom: 1.5rem;}
    .principal{width: 100%; margin-right: 0; padding:inherit;}
    .no-small{ display: none;}
    .logo{ width: 50px; height: auto;}
    .article{width: 100%;}
   video{width: 100%;height: auto; }


}