/*
azul: #0586BC;

sextimental: #9F0C66;
adicciones: #E30910;
alcohol: #EE6022;
convivencia: #C9CB00;
participación: #FFB600;


*/


body, html {
/*background: #662382 url(../img/fondo-3.jpg) center center no-repeat;

  -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;*/
     /*   background-size: 100hv;*/
		
		/*background-attachment:fixed;*/


 margin: 0 0 0 0;
 height:100%;

}

.fondo_anis {
	background: #662382 url(../img/fondo-3.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}

.fondo_menu_1 {
/*background: url(../img/personajes.png) center center no-repeat,
#0a9fe1 url(../img/fondo.jpg) center center;*/
background: #0a9fe1 url(../img/fondo.jpg) center center;

	
}

.fondo_menu_2 { 
background: url(../img/personajes.png) center bottom no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
/*background-size: 100hv;*/ }


.fondo_anis_1 {
	background: #009ee3 url(../img/fondo-mano.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}
.fondo_anis_2 {
	background: #f39200 url(../img/fondo-alpie.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}
.fondo_anis_3 {
	background: #e6332a url(../img/fondo-mejor.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}
.fondo_anis_4 {
	background: #95c11e url(../img/fondo-barrita.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}

.fondo_anis_5 {
	background: #e7d200 url(../img/fondo-contar.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}

.fondo_anis_6 {
	background: #dddc00 url(../img/fondo-digan.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}

.fondo_anis_7 {
	background: #b6ce3e url(../img/fondo-auto.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}

.fondo_anis_8 {
	background: #e5007d url(../img/fondo-bano.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}

.fondo_anis_9 {
	background: #36a9e0 url(../img/fondo-familia.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}

.fondo_anis_10 {
	background: #951b81 url(../img/fondo-corre.jpg) center center no-repeat fixed;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
	
}




h1 { font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 28px; font-weight:300; color:#FFF;
text-align:center; padding-bottom:10px; /*border-bottom:#FFF solid 1px;*/ max-width:220px;
position:relative; margin:25px auto;
}
 
#boton { margin:35px auto; }
 
 .boton { font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 19px; font-weight:300; color:#FFF;
text-align:center;  border-radius:20px; padding:7px 14px;
position:relative; margin:25px auto; background:rgba(0,0,0,0.7);
}

 .boton i { font-size:26px; margin-right:5px; font-weight:400; }
 
  .boton:hover { background:#FFF; color:rgba(0,0,0,0.7); }
  
.ani1 { background:#009ee3; }   
.ani2 { background:#f39200; }  
.ani3 { background:#e6332a; } 
.ani4 { background:#95c11e; } 
.ani5 { background:#e7d200; } 
.ani6 { background:#dddc00; } 
.ani7 { background:#b6ce3e; } 
.ani8 { background:#e5007d; } 
.ani9 { background:#36a9e0; } 
.ani10 { background:#951b81; } 

.ani1:hover { color:#009ee3; } 
.ani2:hover { color:#f39200; }  
.ani3:hover { color:#e6332a; } 
.ani4:hover { color:#95c11e; } 
.ani5:hover { color:#e7d200; } 
.ani6:hover { color:#dddc00; } 
.ani7:hover { color:#b6ce3e; } 
.ani8:hover { color:#e5007d; } 
.ani9:hover { color:#36a9e0; } 
.ani10:hover { color:#951b81; }

.atras, .atras:visited { background:#fff; color:rgba(0,0,0,0.7); }
.atras:hover { background:rgba(0,0,0,0.7); color:#fff; } 
 
 a, a:visited, a:active { color:#FFF; }
 
 a:hover { color:rgba(0,0,0,0.7); border-color:rgba(0,0,0,0.7); }

.tx:before { content:"Una barrita con..."; }

.tx2:before { content:"Una familia muy..."; }

.tx3:before { content:"Los automóviles..."; }

p {
  margin: 10px;
   font: 14px/20px Helvetica, Arial, sans-serif;
   text-align: left;
}

#section { display:table; width:100%; height:100%; }

#login { margin:0; text-align:center; position:relative;  display:table-cell; vertical-align:middle; }

.caja { background:#0a9fe1; width:300px; margin:auto; border-radius:15px; padding:35px 15px 15px 15px;
-webkit-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);
box-shadow: 0px 0px 20px -5px rgba(0,0,0,0.75);

}

input { background:#FFF; padding:10px; font-size:14px; border:none; width:200px;

border-radius: 25px; 
-webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
margin:0px 0; text-align:center; color:#666; }

input:focus{
	outline:0px;
}

label { text-align:center; color:#FFF; 
font: 14px/20px Helvetica, Arial, sans-serif;
 letter-spacing:1px;
 display:none;
   }
    

input[type=submit]{
	margin-top:30px;
 background-color:#ec7e21;
 height:50px;
 width:220px;
 border:none;
 font-weight:400;
 letter-spacing:1px;
 color:#fff;
  -webkit-appearance: none;
 -moz-appearance: none;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #009ee2;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #009ee2;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #009ee2;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #009ee2;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #009ee2;
}


#div_mensaje_acceso{
	
	max-width:200px;
	
	
	margin: 25px auto 0 auto;
	background: #cd0067;
/*	position: absolute;
	top: 50%;
	left: 50%; */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #fff;
	font-size:12px;
	border-radius:5px;
	-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
}

#div_mensaje_acceso p{
	text-align:center;
		padding: 15px;
		margin: 0 !important;
	}
	

#footer {
/*
background-image:url(img/sombrita.gif);
	background-repeat:repeat-x;

background:#8cb11d url(../img/sombrita.gif) top repeat-x;*/

display:block;
max-width:220px;
position:relative;

margin:0px auto;
text-align:center;
border-top: rgba(0,0,0,0.6) solid 1px;
padding-top:20px;



}

#footer_index { margin-top:20px; }

.footer_logo { width:85px; height:auto; text-align:center; margin:15px 0 10px -10px;  }

.footer_logo_2 { /*max-width:175px;*/ max-width:340px; height:auto; text-align:center; margin:15px auto 10px; position:relative;  }

.footer_tex {
  margin-bottom: 10px;
 /* margin-left: 20px;*/
   font: 11px Helvetica, Arial, sans-serif;
   color:#333;
   text-align:center;
   padding:0;
   margin:0;

}

.footer_tex_neg {
  margin-bottom: 10px;
 /* margin-left: 20px;*/
   font: 11px Helvetica, Arial, sans-serif;
   color:rgba(255,255,255,0.7);
   text-align:center;
   padding:0;
   margin:0;

}

.footer_tex2 {
  margin-bottom: 10px;
  margin-left: 10px;
   font: 11px Helvetica, Arial, sans-serif;
   color:#38470c;
}

.footer_ani { max-width:875px !important; width:70% !important; margin:60px auto 30px auto !important; border-top:rgba(255,255,255,0.6) solid 1px !important; }

.filete_der {
	color:#38470c;
	border-right: solid #38470c 1px;
}

a { text-decoration:none; }


#menu {  display:table; width:100%; height:100%;  }

#menu_child { margin:0; text-align:center; position:relative;  display:table-cell; vertical-align:middle; }

.centro { position:relative; margin:0 auto; max-width:1250px;}

.container { position:relative; margin:0 auto; width:70%; max-width:960px;}

#menu h1 { max-width:1250px; text-align:center; margin:25px 25px; position:relative;  }

i { position:relative; font-size:39px; bottom:-5px; }

/*#menu h2 { font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 19px; font-weight:300; color:#FFF;
text-align:center; padding-bottom:10px; border-bottom:#FFF solid 1px; max-width:220px;
position:relative; margin:25px auto; }*/

#menu h2 {  
font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 19px; font-weight:400;
text-align:center; max-width:220px;
position:relative; margin:25px auto;

border-bottom:#444 solid 3px; color:#3584a2; text-decoration:none; background:#FFF; padding:7px 20px; border-radius: 25px; 
-webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  display:block;
  
}

#menu a h2 {  border-bottom:#444 solid 3px; color:#3584a2; text-decoration:none; background:#FFF; padding:7px 20px; border-radius: 25px; 
-webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  display:block;
  
}

#menu a h2:hover { background:#cd0067; color:#FFF; }

.grid1, .grid2, .grid3, .grid4 { display:inline-block; vertical-align:top;  width:220px; margin:0 20px 50px; }

.grid5 { display:inline-block; vertical-align:top;  width:100%; max-width:440px; margin:0 10px 50px; }

.grid1 h1, .grid2 h1, .grid3 h1, .grid4 h1, .grid5 h1 { padding:15px 10px; display:inline-block; box-sizing:border-box;
 width:220px;
 border:none;
 font-size:21px;
 font-weight:300;
 
border-radius: 35px; 
-webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  -o-border-radius: 35px;
  
margin:30px 0;
text-align:center;

 }

.sextimental { background:#9F0C66; }
.adicciones { background:#E30910; }
.alcohol { background:#EE6022; }
.convivencia { background:#C9CB00; }
.participacion { background:#FFB600; }

.flecha-down {
    width:0px;
    height:0px;
    border-left:10px solid transparent; /* izquierda flecha */
    border-right:10px solid transparent; /* derecha flecha */
    font-size:0px;
    line-height:0px;
	margin:-30px auto 20px;
	text-align:center;
}

.flecha-sextimental {  border-top:10px solid #9F0C66; /* base flecha y color*/ }
.flecha-adicciones {  border-top:10px solid #E30910; /* base flecha y color*/ }
.flecha-alcohol {  border-top:10px solid #EE6022; /* base flecha y color*/ }
.flecha-convivencia {  border-top:10px solid #C9CB00; /* base flecha y color*/ }
.flecha-participacion {  border-top:10px solid #FFB600; /* base flecha y color*/ }

ul { color:#FFF; font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size:14px; font-weight:300; list-style:none; text-align:left; margin:0; padding:0; }

li { margin:0 0 10px 0; padding:0 0 10px 10px; border-bottom:rgba(255,255,255,0.5) solid 1px; }

li a { color:#FFF; padding:5px 10px; 
border-radius: 4px; 
-webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  display: block;
  
  }
  
li a:hover { color:#fff; background:#444;  }

   
 #menu #footer { max-width:1250px; margin:0 25px 25px;  } 
 
  #section #footer { max-width:1250px; margin:0 autox 25px; padding:0px 0px; box-sizing:border-box;  } 
 
  .foto-responsive img {
	 width:100%;
	 max-width:100%;
	 height:auto;
 }
 
 

 
 .video-responsive {
    position: relative;
    margin-bottom: 20px;
    /*padding-top: 56.25%;*/ /* para vídeos 16:9*/
	/*padding-top: 75%;*/ /* para vídeos 3:4*/
	padding-top: 80%; /* para vídeos 1920x1536*/
	margin-right:0px;
	margin-left:0px;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	
	outline:#fff solid 5px;
	
-webkit-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.3);
box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.3);
}

.mancheta_videos_fs {
	float:right; position:relative; margin-bottom:-150px;
}


/* MENÚ RECURSOS */


.boton_menu {
	display: inline-block;
	
 background-color:#0586BC;
/* height:50px;*/
 width:220px;
 border:none;

 /*letter-spacing:1px;*/
 
border-radius: 35px; 
-webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  -o-border-radius: 35px;
  
margin:15px 0 0 0;
text-align:center;



font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 19px; font-weight:300; color:#fff !important;
text-align:center; padding:10px 0px 12px;


}

.boton_menu:hover {
	color:#0586BC !important;  font-weight:300; background:#fff;
}


.boton_menu i { font-size:24px; margin-right:10px; color:#fff;
bottom:-3px;

  transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */

}
.boton_menu:hover > i { font-size:24px; margin-right:10px; color:#0586BC;}



.lapiz { width:100%; max-width:550px; height:auto; margin:-120px 0px -75px 0px;
     transform: rotate(-10deg);
	  }






/* EXTRAS */

header,nav, a, li{
  transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */
}

nav img, footer img {
	  transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */
}

  /*@media only screen and (max-width: 1200px) { .fondo_menu_2 { background-attachment:fixed; background-size: cover; } }*/
 
/* @media only screen and (max-width: 979px) { .grid1, .grid2, .grid3, .grid4 { width:45%; } body, html, .fondo_anis, .fondo_menu_1, .fondo_menu_2 { background-attachment:fixed; background-size: cover; }
 .tx:before { content:"Una barrita con un puntito"; } .tx2:before { content:"Una familia muy normal"; } .tx3:before { content:"Los automóviles engordan"; } }*/
 
  @media only screen and (max-width: 979px) { .grid1, .grid2, .grid3, .grid4 { width:45%; } body, html, /*.fondo_anis, .fondo_menu_1, .fondo_menu_2 { background-attachment:fixed; background-size: cover; }*/
 .tx:before { content:"Una barrita con un puntito"; } .tx2:before { content:"Una familia muy normal"; } .tx3:before { content:"Los automóviles engordan"; } }
 
  @media only screen and (max-width: 768px) { .grid1, .grid2, .grid3, .grid4 { width:90%; } .mancheta_videos_fs { width:125px; height:auto; } .mancheta { max-width:250px; height:auto; } .footer_ani { width:100% !important; } }
  

.izq { float:left; margin:5px 0px; 25px }
.der { float:right; margin:0px 0px 25px; }  

 @media only screen and (max-width: 660px) {
.izq { float:none; margin:5px 0px 50px; }
.der { float:none; margin:50px 0px 25px; }   
.lapiz {width:950px; height:auto; margin:-130px 0px -75px -170px;
     transform: rotate(-10deg);
	  }
 }
 
  @media only screen and (max-width: 1250px) { 
	#section #footer { padding:0px 25px; }
 }