body, html {
background: #36719b url(../img/fondo.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%;

}

.h1 { margin-bottom:60px !important; margin-left:-25px !important; }
.nave { margin-bottom:-30px; margin-right:-25px; margin-top:25px; width:275px; height:auto; }
.mancheta { margin-bottom:-35px; width:295px; height:auto; }

.fondo_menu_1 {   -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
		  background-size: cover;
		   }

.fondo_menu_2 { background-size: 100hv; }

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 { margin:25px 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:#f78d1e;
}

 .boton i { font-size:26px; margin-right:5px; font-weight:400; }
 
  .boton:hover { background:#FFF; color:rgba(0,0,0,0.7); }
 
 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..."; }

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;
   }

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:#f78d1e;
 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:    #f78d1e;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #f78d1e;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #f78d1e;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #f78d1e;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color:    #f78d1e;
}


#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_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; }	
	

#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:40px auto;
text-align:center;
border-top:#fff solid 1px;



}

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

.footer_tex {
  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;
}

.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 10px 10px; }



   
 #menu #footer { max-width:1250px; margin:0 25px 25px;  } 
 

 
 .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;
}

/* 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 */
}

hr { border:0; border-bottom:#fff solid 1px; max-width:1250px; margin:0 25px; }

.pag li { display:inline-block; list-style:none; }

.pag li a {
	
	font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif;
	position: relative;
	display:inline-block;
		
	text-decoration: none;

	margin-right: 20px;
	color: #fff;
	font-size: 24px;
	font-weight: 300;
	background: #0088cc;
	
   border-radius: 3em;
  -moz-border-radius: 3em;
  -webkit-border-radius: 3em;

 line-height: 1.7em;
  text-align: center;
  width: 1.75em;

    transition: all .3s ease-out;
}

.pag li:hover a {
    transform: rotate(360deg); 
}

.pag li.active a { color:#0088cc; background:#FFF; }


.topico {
	  font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; font-size: 13px; font-weight:400; color:#FFF;
text-align:center;  border-radius:5px; padding:7px 14px;
position:relative; background:rgba(255,255,255,0.9); color:#333;
display:inline-block; margin-top:-5px !important;
 }




 
 @media only screen and (max-width: 979px) { .grid1, .grid2, .grid3, .grid4 { width:45%; } body, html { background-attachment:fixed; background-size: cover; }
 .tx:before { content:"Una barrita con un puntito"; } .tx2:before { content:"Una familia muy normal"; } }
 
 @media only screen and (max-width: 768px) { .grid1, .grid2, .grid3, .grid4 { width:90%; } .mancheta_videos_fs { width:125px; height:auto; }  .footer_ani { width:100% !important; }
 .h1 { margin-bottom:60px !important; margin-left: 25px !important; }
 .nave { margin-bottom:10px; margin-left:auto; margin-right:auto; margin-top:25px; width:275px; height:auto; display:block; position:relative; }
.mancheta { margin-bottom:-35px; width:275px; height:auto; }
 
 }
  

.pnsd025 { width: 100% !important; max-width: 300px !important; height: auto !important; }