@charset "utf-8";
/* CSS Document */

.textos {border-style: solid; margin: 15px; padding: 5px; background-color: yellow; width: 100%; height:250px;}

.textosp{
	width: 80%;
float:left; text-align: justify; margin:15px;position:absolute;
}

.textosimg{
	width: 20%;
	margin:10px; float:right;position:absolute;
	}
	
	

 .main-lf {
   width:100%;
   height:auto;
   vertical-align:top;
 }



 .main-lf h2{
	text-align: left;
	font-size:1.8em;
	color: #000;
	font-weight: bold;
   vertical-align:top;
   margin-top:0px;
  }


 .left-float {
   width:20%;
   float:right;
   padding-left: 5px;
   vertical-align:top;
 }
 
@media handheld, only screen and (max-width: 767px) {
.left-float {
display:none;
	}
} 

 .leer{
	font-size: 0.8rem;	
	text-transform: uppercase;
	color: #807E7E;
	float: left;
	font-family: tahoma;
	font-weight:normal;
}


 
/* CONTAINER */
.containerA {
	display: grid;
	padding: 0px;
	margin: 0px auto;	
	grid-gap: 15px;
  	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	align-items: center;
	justify-content: center;
	text-align: center;
	
}

.containerA div{
	background-color: #FFF;
	height: 250px;
	text-transform: uppercase;
	border-bottom: 1px solid #B2B0B0;
	color: #000;
	display: grid;
	align-items: center;
	justify-content: center;
	
	
	font-family: tahoma;
	font-weight:bold;
	
  border-radius: 18px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.9);	
}

.containerA img{
  box-shadow: none;	

 	margin-top: 25px;

  border-radius: 100px;
  width: 150px;
  height: 150px;
  
  align-items: center;
}

.containerA div a{
 	margin: 10px;
  display:block;
  	font-size: 1rem;	
	color: #000;
	padding: 0.7rem;

	display: flex;
	align-items: center;
	justify-content: center;
	
	  display:block;
}

.containerA div a{
	color: #000;
}






/* CONTAINER ID */
#container {
margin: 0 auto;
  background-color:#70B6DA;

/*border-radius: 30px 30px 0px 0px;
background:#fff;
box-shadow: 0px -4px 5px 0 #EBEAEA;*/
}

#container2 {
margin: 0 auto;
/*  background-color:#A6D3ED;

border-radius: 30px 30px 0px 0px;
background:#fff;
box-shadow: 0px -4px 5px 0 #EBEAEA;*/
}


/* Start: Video Responsive */
.video-containerOK {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.videoOK {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* End: Video Responsive */


.carousel{
  max-width: 720px;
  margin: auto;
  padding: 0 30px;
}
.carousel .card{
height: 250px;
  color: #000;
  text-align: center;
  margin: 20px 0;
  font-size: 20px;
  border-radius: 20px;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
  padding-top:80px;
  font-family: 'Trebuchet MS', sans-serif;
}
.carousel .card-1{
  background: url(../img/alimentos.png) no-repeat center center fixed;
}
.carousel .card-2{
  background: url(../img/hijo.png) no-repeat center center fixed;
}
.carousel .card-3{
  background: url(../img/embarazada.png) no-repeat center center fixed;
}
.carousel .card-4{
  background: url(../img/noticias.png) no-repeat center center fixed;
}
.carousel .card-5{
  background: url(../img/tabla.png) no-repeat center center fixed;
}
.owl-dots{
  text-align: center;
  margin-top: 40px;
}
.owl-dot{
  height: 15px;
  width: 45px;
  margin: 0 5px;
  outline: none;
  border-radius: 14px;
  border: 2px solid #5dbc91!important;
  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}
.owl-dot.active,
.owl-dot:hover{
  background: #c6e6d6!important;
}


* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
/*
.active, .dot:hover {
  background-color: #717171;
}
*/
/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

.ingresar{
	margin: 20px auto;
	
	width:300px;
	height:40px;
	
	display:block;
	
	background:#225ba2;
	border-radius: 5px 5px 5px 5px;
	text-align:center;
}

.ingresar .boton{
	margin:auto;
	font-size:0.8em;
	color:#fff;
	line-height:330%;
	text-align: center;
}

/* BODY */
body {
margin:0;
padding:0;
height:100%;
font-family: verdana,arial,helvética, sans-serif;
background-color:#dfefc5;/*E9E3D5#c6e6d6 #f0f5f9 #fcc4a9 #f0f5f9 #f96123*/
}

/* HEADER */
header{
margin: 0;
height:250px;
width:100%;
padding: 10px 0px 10px 0px;
background-position: center center;
background-image: url(../img/banner.png);
background-size: cover;
/*border-radius: 0px 0px 30px 30px;*/
}

header h1{
padding-top:70px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
}


@media screen and (max-width: 64em) {
header h1 {
    font-size: 2em;
  }
}

@media screen and (max-width: 50em) {
header h1 {
    font-size: 1.4em;
  }
}

@media screen and (max-width: 30em){
header h1 {
    font-sitze: 0.1em;
  }
}

/* bloque */
.bloque{
	width:100%;
	padding:18px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.bloque p{
	color:#fff;
}

.bloque p2{
	color:#000;
}

/* NOVEDADES*/
.novedad{
	vertical-align:top;
	width:100%;
	position:relative;
	padding:18px;
	box-sizing:border-box;
	margin: 0 auto;
	max-width: 720px;
}

.novedad .tit{
	font-size:1.3em;
	/*color:#00a9a2;*/
	padding:15px 15px;
	border-left:1px solid #cacaca;
	border-right:1px solid #cacaca;
}

.novedad .tit {
	color:#225ba2;
}

.novedad .fecha {
	background:#FFFFFF;
	color:#225ba2;
	padding:10px;
	text-align:center;
	position:absolute;
	left:10px; top:10px;
	z-index:3;
	transition:all 0.4s;
}

.novedad .fecha .num {
	display:block;
	font-size:2.5em;
	font-weight:700;
	line-height:1em;
}

.novedad .fecha .mes {
	display:block;
	font-size:2em;
	text-transform:uppercase;
	font-weight:300;
	line-height:1em;
}

.novedad .foto{
	display:block;
	height:175px;
	/*display:block;*/
	overflow:hidden;
	background:#3e444c;
	border-radius: 10px 10px 0px 0px;
	background-position: center center;
	background-image: url(../img/MEDICO2.png);
	background-size: cover;
	
}

.novedad .compartir{
	display:block;
	height:30px;
	overflow:hidden;
	background:#225ba2;
	border-radius: 0px 0px 10px 10px;
}

.novedad .compartir .nov{
	font-size:0.8em;
	color:#FFF;
	line-height:250%;
	margin-left: 20px;
}


/* CLEARFIX */
.clearfix{
clear:both;
height:10px;
}

/* ARTICLE CLASS */
.article{
margin: 0 auto;
max-width: 720px;
padding: 10px 30px 10px 30px;
background-color:#FFF;

}

/* ARTICLE CLASS */
.article2{
margin: 0 auto;
max-width: 720px;
padding: 10px 30px 10px 30px;
background-color:#f0f8e3;
}

/* CLEARFIX */

.clearfix4{
	clear:both;
	height:50px;
	}

	
.clearfix2{
	clear:both;
	height:130px;
	}

.clearfix3{
	clear:both;
	height:100px;
	}



  

/* MENU */
.box {
	margin: 10px;
	display: flex;
	
}

.texto{
	font-size:0.8em;
	text-align: center;
	font-weight:600;
  	font-family: Verdana, sans-serif;
	
    position: absolute;
    top: 50%;	
    left: 50%;
    transform: translate(-50%, -50%);
	
	text-shadow: #fff 10px 0 10px;
}

    .one:hover img{
	opacity: 0.5;
      }

    .one {
    flex: 1;
	position: relative;
    display: inline-block;
    text-align: center;
      }

      .two {
        flex: 1;
		    position: relative;
    display: inline-block;
    text-align: center;
      }
	  
	    .two:hover img{
	opacity: 0.5;
      }

      .three {
        flex: 1;
		    position: relative;
    display: inline-block;
    text-align: center;
      }
	  
	      .three:hover img{
	opacity: 0.5;
      }
	  
	  .four {
        flex: 1;
		    position: relative;
    display: inline-block;
    text-align: center;
      }

    .four:hover img{
	opacity: 0.5;
      }
	  
/* BOTON VOLVER */
.flotante {
cursor:pointer;
position:absolute;
top:30px;
left:10px;
background:none;
border: 0px solid #C00;
}

.flotante a{
}

.flotanteTOP {
padding: 15px 25px;
background:#024959;
color:#fff;
cursor:pointer;
position: fixed;
bottom:20px;
right:20px;
}

.flotanteTOP a{
font-size:1em;
color:#fff;
font-weight: bold;
}


	
/* H1 H2*/
h1 {
	text-align: center;
	display: block;
	font-size: 2em;
	margin-top: 0.67em;
	margin-bottom: 0.67em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	color: #00509f;
	font-family: verdana,arial,helvética, sans-serif;
	text-transform: uppercase;
}

h2{
	text-align: left;
	font-size:1.8em;
	width:90%;
	color: #000;
	font-weight: bold;
}

h3{
    font-size:1.3em;
    text-align:left;
	line-height:0%;
	color: #5dbc91;
	font-family: verdana,arial,helvética, sans-serif;
	margin-top: 50px;
}

h4{
    font-size:1.4em;
    text-align:center;
    margin-bottom:0.5em;
    margin-top:1.5em;
	font-family: verdana,arial,helvética, sans-serif;
	line-height:170%;
}

h4 span{
       padding-bottom:0.2em;
}

a{
	outline: none;
	text-decoration: none;
	color:#1f1f1f;
}

img {
	max-width:100%;
	width:auto;
	height:auto;
	padding:0px;
}


p {
	hyphens: none;
	line-height: 25px;
	font-size: 16px;
	text-align: left;
	font-family: verdana,arial,helvética, sans-serif;
	color:#1f1f1f;
}

p > img {
	max-width:100%;
	width:auto;
	height:auto;
}

i {
	display: block;
	font-style: italic;
	font-family: verdana,arial,helvética, sans-serif;
	text-align: right;
}

b {
	font-family: verdana,arial,helvética, sans-serif;
}
	

hr {
	height: 2px;
	width: 80%;
	color: #807E7E;
}

/* RECURSOS */
.recursos{
width:90%;
height:70px;	
border-radius: 10px 10px 10px 10px;
margin: 0 auto;
max-width: 690px;
}
	
.recursos h2 {
padding-top:20px;
padding-left:20px;
font-size:1.2em;
font-weight: normal;
font-family: verdana,arial,helvética, sans-serif;
text-align: center;
line-height:20px;
list-style: none;
color:#000;
}



/* FOOTER */	
footer {
	background:#01592d;
	padding: 20 0 0 0px;
	width: 100%;
	margin: 0 auto;
	display: block;
	position: relative;
	margin-bottom: -15px;
		}

footer > img{
align:center;
	max-width:80px;
	width:auto;
	height:auto;
		}

footer p{
		padding: 10 0 10 0px;
		font-size:.5em;
		color:#FFF;
		text-align: center;
		font-style: normal;
		}
		
footer p a{
	color:#FFF;
}


/* BARRA MENU*/

#menu
{
background-color:#00477c;
top:0;
margin-bottom: 0px;
color:#fff;
height: 40px;
border-bottom: 1px solid #OOO; /* borde inferior de la barra*/
width:100%;
position:relative;
z-index:101;
}
	
#menu ul,#menu li
{
margin:0 auto;
padding:0 0;
list-style:none;
}

#menu ul
{
height:45px;
width:100%; /* ancho del menú, ajustar para centrarlo*/
}
	
#menu li
{
float:left;
display:inline;
position:relative;
font: 14px tahoma, sans-serif;/*tamaño y fuente del texto */
}
	
#menu a
{
display: block;
line-height: 40px;
padding: 0 14px;
text-decoration: uppercase;
color: #FFF;/*color del texto*/
text-transform: uppercase;/*letras mayúsculas*/
letter-spacing: 1.5px;/*espacio entre letras*/
}

#menu li a:hover
{
color: #fff;/*color del texto al pasar el ratón*/
text-decoration: none;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background: #5dbc91;/*color del fondo de la categoria al pasar el ratón*/
}

#menu input
{
display:none;
margin:0 0;
padding:0 0;
width:200px;
height:30px;
opacity:0;
cursor:pointer
}

#menu label
{
font: 25px  Arial, sans-serif ;
font-weight: bold;
display:none;
width:35px;
height:35px;
line-height:43px;
text-align:center;
}

#menu label span
{
width:150px;
font: 14px  Arial, sans-serif; /*tamaño y fuente del texto "menu" */
position:absolute;
left:35px;
font-weight: bold;
line-height: 40px;
letter-spacing:0.5px;
}

#menu ul.menus
{
height: auto;
overflow: hidden;
width: 170px;
background: #F1F1F1;/*color del fondo del submenu*/
position: absolute;
z-index: 99;
display: none;
border: 1px solid #E9E9E9;
}

#menu ul.menus li
{
display: block;
width: 100%;
font: 14px  Arial, sans-serif;/*tamaño y fuente del  texto del submenu*/
text-transform: uppercase;
border-bottom: 1px solid #E9E9E9;
}

#menu ul.menus li:last-child
{
border-bottom:none;
}

#menu ul.menus a
{
color: #333;/*color del  texto del submenu*/
line-height: 35px;
}

#menu li:hover ul.menus
{
display:block
}

#menu ul.menus a:hover
{
background: #E9E9E9;/*color del  fondo del submenu al pasar el ratón*/
color: #000;/*color del  texto del submenu al pasar el ratón*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}

/* Too narrow to support three columns */
@media all and (max-width: 1100px) {
	  
#menu{
	position:relative; 
	z-index: 120;
	top:0;
	margin-bottom: 0px;
}
	  
#menu ul{
background:#00477c;/*043726 color del desplegable del menu movil*/
position:absolute;
top:100%;
right:0;
left:0;
z-index:3;
height:auto;
display:none
}
	  
#menu ul.menus{
width:100%;
position:static;
padding-left:20px
}
	  
#menu li{
display:block;
float:none;
width:auto;
font-family: 14px  verdana,arial,helvética, sans-serif;
font-weight: bolder;

 }
#menu a{
 display: block;
 line-height: 40px;
 padding: 0 14px;/*tamaño y fuente del  menu movil*/
}
	  
#menu input,#menu label{
position:absolute;
top:0;
left:0;
display:block;
}
	  
#menu input{
z-index:4;
}
	  
#menu input:checked + label{
color:#fff;/*color de las tres barritas una vez se clica*/
}
	  
#menu input:checked ~ ul{
display:block;
}
	      
}