@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap');	  

html {  scroll-behavior: smooth; }

:root {
  --main-bg-color: #00B5D1; 
  --main-color: #00B5D1;
}


*{
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  font-family: 'Lato', sans-serif;
  box-sizing: border-box;
  }


ul,
li,
div{ overflow: hidden; box-sizing: border-box}
  
a:hover, a:hover img, .btn{ cursor:pointer;}


::selection {
    background: rgba(255, 225, 35,.8);
    color:#000;  
}


body{ font-family: 'Lato', sans-serif;}


img{ width: 100%;}
/*
.aula:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0px;
  right: 0;
  background: rgba(22,55,88, .3);
  }
  */

/* For mobile phones: */
/*[class*="col-"]*/


div{box-sizing: border-box; overflow: hidden;}

.row,
.rw,
.boxed,
.box,
.bx{ overflow: hidden;}

.row, .fw, .fullwidth,
.box, .bx { display: block; }

.row, .fw, .fullwidth{ clear:both; width:100%;}

.box, .bx{max-width: 750px;margin: 0 auto;clear: both;/* padding: 6px; */}

.box p, .bx p, .bx h3{padding: 0 4px 0 6px;}


.row{margin: 0px auto 0px auto;}


.col-m1, .col-m2, .col-m3, .col-m4, .col-m5, .col-m6, .col-m7, .col-m8, .col-m9, .col-m10, .col-m11, .col-m12,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-50, .col-20, .col-100, .col-50, .col-75{
    width: 100%;
    box-sizing: border-box;
    float: left;
  
    
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-m1 {width: 8.33%;}
    .col-m2 {width: 16.66%;}
    .col-m3 {width: 25%;}
    .col-m4 {width: 33.33%;}
    .col-m5 {width: 41.66%;}
    .col-m6 {width: 50%;}
    .col-m7 {width: 58.33%;}
    .col-m8 {width: 66.66%;}
    .col-m9 {width: 75%;}
    .col-m10 {width: 83.33%;}
    .col-m11 {width: 91.66%;}
    .col-m12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-20 {width: 20%;}
    .col-3,
    .col25 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6,
    .col50 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9,
    .col-75 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12,
    .col-100 {width: 100%;}
}





a{ text-decoration: none; color:var(--main-bg-color); }
p{margin-bottom: 8px;}
p:last-child{ margin-bottom:0;}

h1{color: var(--main-color);margin-bottom:30px;font-size: 6.5vw;font-weight: normal;padding: 25px 20px 25px 5px;line-height: 1;text-align: right;border-right: solid 3px var(--main-color);max-width: 290px;float: right;}
h2{ }
h3{ font-size:16px; margin-top: 18px; letter-spacing: 6px; color: var(--main-color);}


h4{ text-transform: uppercase; padding:0 0 30px 38px; font-size: 20px;}

h6{ font-size: 30px;}
main{}


.bg-grey, footer{ background: #EAEAEA;}
.bg-dark{ background: #2E3035; color: #EEE;}



#reconocimientos{  }
#reconocimientos dl{column-count: 2;}


/* QUIENES SOMOS ---------------------------------------------------------------------------*/
#quienessomos #content{ overflow: hidden; padding:20px;;}

#quienessomos .equipo{}
#quienessomos .equipo img{ clear:both; border-radius: 50%; width:200px; height:200px;}
#quienessomos .equipo{ margin-bottom: 40px;}

/* DESTACADO ---------------------------------------------------------------------------*/

#destacado{
	background: url('../img/bher-fondo.jpg') center center;
	background-size: cover;
	}

#destacado-texto{
  float:right;
  background: rgba(0,0,0,.7);
  color: #FFF;
  padding: 40px;
  text-align: center;
  font-size: 22px;
  font-weight: 100;
}



#destacado .bx,
#destacado-texto .bx,
#destacado-texto p{ padding: 0 !important;}




input.btn,
.btn-form,
.btn{
	-webkit-appearance: none;
	display:block;
	padding: 10px;
	width: 84%;
	max-width: 210px;
	margin: 30px auto;
	text-align: center;
	color: var(--main-color);
	font-size: 15px;
	font-weight: normal;
	letter-spacing:1px;
	border-radius:120px;
	border: solid 2px var(--main-color);
	background: white;
	}
	
.btn:hover{ letter-spacing: 1px; background:var(--main-color); color:white; }




.boton-llamar{ margin-top: 50px !important; }

.anim,
.btn,
.galleria img,
.txt-quienesomos .equipo
{transform: uppercase; transition: all ease-in-out 0.4s;}

.anim:hover,
.btn:hover,
.txt-quienesomos .equipo:hover
{	transform: scale(1.05); }



/* RECONOCIMIENTOS ---------------------------------------------------------------------------*/

#reconocimientos{  }
#reconocimientos dt{ float:left; width:50px; font-weight:bold;}
#reconocimientos dd p{ margin:0; padding:0; font-size:16px; color: black;  }
#reconocimientos dd{ padding:0 0 30px 50px; font-size:10px; color:grey;}



/* FILOSOFÍA ---------------------------------------------------------------------------*/
#filosofia{
  padding: 35px 10px;
  text-align: center;
  margin: 40px 0;
  font-size: 22px;
}


/* SERVICIOS ---------------------------------------------------------------------------*/

#servicios{ }
#servicios .imgFondo{ height: 300px; background: url('../img/bloque3.jpg')top center; background-size: cover;}

#servicios .fichas{ list-style: none; margin-top:-40px;}
#servicios .fichas li{
	float: left; width: 30%; height: 200px; margin: 1.6%;
	box-sizing: border-box;
	padding: 5px; background: #FFF; box-shadow: 3px 3px 4px grey;
	text-align: center;}
	
	
/* LOCALIZACIÓN ---------------------------------------------------------------------------*/

#destacado,
#servicios,
#reconocimientos,
#localizacion{  margin-bottom: 10px;}
	
/* FORMULARIO ---------------------------------------------------------------------------*/

form{ font-size: 18px;}	
.formulario{max-width: 550px;margin: 10px auto 50px auto; !importantpadding:;}
.formulario input[type="text"],
.formulario input[type="email"],
 .formulario textarea{width: calc(100% - 15px); padding: 5px;margin: 2px;font-size: 18px;}

.aceptance p{font-size: 12px;line-height: 14px;max-width: 314px;text-align: left;}


#mainlogo, #footerlogo{ display: block; width: 130px; height: 130px;  }
#mainlogo { position: relative; top:0; float: left;}



i svg{width: 15px;height: 15px;display: inline-block;padding: 5px 0 0;}





@keyframes animacion1 {
  0% {    transform: translateY(-10%) scale(0.8); opacity: 0;  }
  100% {    transform: translateY(0) scale(1); opacity: 1; }
}

.destacado-texto,
a, p, img {  
  animation: 1s ease-out 0s 1 animacion1;
}



.galleria img{ margin:0 5px;  }

.galleria img:hover{
	transform: scale(1.2); box-shadow:3px 3px 8px rgba(0,0,0,.3); position:relative;}



.fichas{}
.fichas img{ height:85px; width: auto; margin-top:20px;}
.fichas h5{ text-transform: uppercase; padding: 10px 0; letter-spacing: 4px; font-size:16px;}
.ficha li{ padding: 10px;}




.txt-quienesomos p{ font-size: 20px; padding: 20px 0;}

.txt-quienesomos img{ text-align:center !important; }
.txt-quienesomos img:hover{ transform:scale(1.5;) }

.txt-quienesomos h3{ letter-spacing:0; }
.txt-quienesomos{text-align: center;}


.btn-contacta a{font-size: 18px; max-width: 600px !important;}


.formulario h6{ padding:20px 0;}






footer .copyright{ text-align: center; padding-top:50px;}

footer .copyright a{ color: #000; font-weight: bold; }
footer .copyright p{ margin-bottom: 0;}



@media only screen and (max-width: 600px) {
	#reconocimientos dl{ column-count: 1; padding: 0 20px;}
	
	#mainlogo{ top: 0; left: 35%; margin: 30px 0 30px 0;}
	#footerlogo{ margin: 22px auto !important; width: 100px; margin: 20px;}
	
	footer col-6{ text-align: center;}
	
	
	.fichas h5{  font-size:12px; letter-spacing:0; height:30px;}
	.fichas img{ width:auto; height:50px;}
	.fichas p{ font-size:14px;}
	.fichas li{ height:180px !important; padding: 0;}	
}



a.ring{
	animation: ring 4s .7s ease-in-out infinite;

	}


.ring{
  display:block;
  animation: ring 4s .7s ease-in-out infinite;
}



@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}



.alert{/* background: #FFCB00; */max-width: 750px;margin: 0px auto;padding: 40;}
.alert p{ text-align: center; margin: 20px }
.alert a{ color: #666 !important;}

.alert h3, .alert p{ max-width:350px; margin:0 auto 20px auto; text-align:center;}



p{color: #666;line-height:20px;}


div#sup{background: #00809C;color: rgba(255,255,255,.8);text-align: center;padding: 4px;font-weight: 100;letter-spacing: 2.3px;font-size: 14px; font-weight:400;}


h2{background: var( --main-bg-color);color:#FFF;text-align: center;font-weight: normal;letter-spacing: 2px;line-height: 26px;padding: 22px;margin: 0 0 20px 0;font-weight: 100;}

/* superior main */
#b1{background: url('../img/main.jpg') top center no-repeat;background-size: contain;padding-top: 40vw;/* max-width: 1100px; */}

.textodestacado{background: #FFF;padding: 20px;box-shadow: 0px -8px 5px rgba(0,0,0,0.3);border-radius: 20px 20px 0 0;margin: 10px auto;width: 92vw;max-width: 650px;position: relative;bottom: -20px;}

.textodestacado p{font-weight: 100;line-height: 1.5;font-size: 14px;/* border-left: solid 3px var(--main-color); */}




header a{ display: block;}
header a img{ transition: transform .3s ease-in-out;}
header a:hover img{ transform: : scale(1.2);}



/*medicos otorrinos especialistas*/
#b2{ margin-top:36px}

#b2 ul{/* list-style: none; *//* margin: 0 auto; *//* padding: 0; */}
#b2 li{float: left;margin: 1% !important; width: 47%;}


/*cuadro médico*/
#b3{}
#b3 img{ opacity:.9;}
#b3 img:hover{ opacity:1;}

p.txtteam{
	text-align: center;
	font-size: 26px;
	max-width: 750px;
	margin: 0 auto 30px auto;
	font-size: 14px;
	}

#b3 ul{ list-style: none; margin: 0 auto; padding: 0;}
#b3 li{ float: left; margin:0; padding: 10px; width: 50%}




/*pruebas médicas*/
#b4{
	background: url(../img/puntitos_anim.gif) center bottom repeat-x;
	background-filter: grayscale(30%);
	background-size: 332px auto;
	margin-bottom: -35px;
	padding-bottom: 150px;
	}

#b4 ul{ list-style: none; margin: 0 auto; padding: 0 8%;}
#b4 li{float: left;margin:0;padding: 0 1%;width: 50%;text-align: center;}


#b4 ul li{}
#b4 ul li h4{color: var(--main-color);padding: 0 !important;text-align: center;font-weight: 200;letter-spacing: 2px;}

#b4 ul li img{width: 96px;margin: 20px auto;}

#b4 ul li p{font-size: 14px;margin: 20px 0;text-align: center;font-weight: 100;line-height: 16px;color: #333;}

#b4 ul li:hover,
#b3 ul li:hover {transform: scale(1.1);}

#b4 ul:hover li:not(:hover) {
        filter: grayscale(1);
}

/*mejor valoradas*/
#b5{}
.logolist{}

#b5 ul.logolist{list-style: none;margin: 22px auto;padding: 0;max-width: 670px;}
#b5 li{float: left;margin:0;padding: 4%;width: 33%;width: 3;}


/*formulario*/
#b6{
	margin-bottom:0px;
	}

#b6 .bx{
	background: url(../img/form.jpg) left center no-repeat;
	background-size: auto 100%;
	background-position: 0px 0px;
	margin-bottom:0px;
	max-width: 750px;
	}


#b6 h2{ margin:0;}


#b6 form{float: right;width: 46%;padding: 10px;background: rgba(255, 255, 255, 1);}

#b6 form input[type=text]{border: solid 1px grey;padding: 6px 10px;border-radius: 80px;font-size: 13px;margin: 6px 12px 4px 13px;width: 80%;color: grey;outline: none;}
#b6 form label.aceptance{font-size: 12px;line-height: 12px !important;width: 70%;}
#b6 .aceptance .candando{ color: var(--main-color); display: block; margin: 10px 0; font-weight: bold;}

#b6 .horario{/* margin-top:20px; */text-align: left;}
#b6 .horario span{ color: grey; font-size:14px}

#b6 form .btn{max-width: 80%;margin: 20px auto;background: var(--main-bg-color);color: white;font-size: 18px;}
#b6 form input[type="text"]{max-width: 80% !important;margin: 10px auto !important;display: block;padding: 10px 10px 10px 20px;font-size: 16px;}

#formtext{ width:80%; margin: 0 auto;}






/*seguros mécidos*/
#b7{}
#b7 p,
#b3 p{text-align: center;font-size: 28px;font-weight: 200;line-height: 1.2;color: grey;}



#logolist{overflow: hidden;max-width: 610px;margin: 0 auto;}
#logolist li{ border: solid 1px var(--main-color); border-radius:50%; width:130px; height:130px; float: left; margin:10px; list-style:none; background: url(../img/s01.jpg) center center no-repeat; background-size: contain; text-indent: -999px;}
#logolist li:hover{ transform: scale(1.075);}
#logolist:hover li:not(:hover) {
		transform: scale(.8);
        filter: grayscale(1)  blur(1px);
}

li#img{ background-image: url(../img/s01.jpg)}
li#dkv{ background-image: url(../img/s02.jpg)}
li#sanitas{ background-image: url(../img/s03.jpg)}
li#lagunAro{ background-image: url(../img/s04.jpg)}







footer{
	border-bottom: #00809C solid 5px;
	background: #00B5D1;
	color:#FFF;
	text-align: center !important;
	font-size: 14px;
	padding: 18px;
	box-sizing: border-box;
}



.col-50{ float:left; width:50%;}


.col-6{ box-sizing: border-box;}
header .col-6{width: 30%;float: left;padding: 10px 10px 0 10px;margin: 1% 0 0 0;}
header #telefonoscio{ width:45%;}



.fleft{ float: left !important}
.fright{float: right !important}


p input{margin-right: 6px;}





.candando{
	background: url(../img/candado.png) left center no-repeat;
	padding:4px 4px 4px 24px ;
	background-size: 20px;
	line-height: 12px;}



h1 span.subrayado{background: url(../img/subrayado.jpg) center center no-repeat;background-size: 100% 100%;width: 100%;display: block;height: 57px;padding: 0 5px;}

span.subrayado{background: url(../img/subrayado.jpg) center bottom no-repeat;background-size: 100% 100%;}


.alert h3 {
	background: url(../img/subrayado.jpg) center center no-repeat;
	background-size: 100% 100%;
	}


/* tamaño muy pequeño */
@media  screen and (max-width: 350px) {

  #b4 li{ float: none; clear: both; width:100%}

}





/* tamaño pequeño */
@media  screen and (max-width: 450px) {
h1{ font-size:36px;}
  .col-50{clear:both; width:100%;}
  
  .btn{letter-spacing: 0;/* color:red; *//* margin: 2px; */width: 85%;font-size: 16px;}

  #b4 li{ float: none; clear: both; width:100%}
  #b5 li{ float: none; width:65%; margin: 20px auto;}
  #b6 form{ width:100%; background: rgba(255,255,255,.85);}

 

}


body{min-width: 320px;margin-top: 141px;}



@media  screen and (max-width: 624px) {
	
	#b1{ background-size:contain; background-size:125%;}
	#b2 ul{ width: 310px;  }
	#b2 ul li{float: none; margin:20px 0 !important; }
	#b7 ul li{ float:none; margin: 20px auto;}



}

/* tamaño grande */
@media  screen and (min-width: 625px) {

	h1{ font-size:50px}

	

h2{font-size: 32px;line-height: 34px;padding: 20px calc(60% - 520px);}




#b1{padding-top: 320px !important;}

/* HEADER tamaño grande*/
header.small .fleft{	width: 120px !important;}

header.small .fright{	width: 460px !important;}
header.small .fright a{ float:left; width:45% !important; margin:10px 7px;}



  
}


/* HEADER */
header{position:absolute; top: 0;background: rgba(255,255,255,.85);width:100%;z-index: 6;}
header .bx{ max-width: 650px !important;}


header a{ display: block;}

header #logo:hover,
header #tel1:hover,
header #tel2:hover{
	filter: grayscale(100%);
	transform: scale(1.05);
}



/* animation */
#logolist li,
header #logo,
header #tel1,
header #tel2,
#b4 ul li,
#b3 ul li,
#b3 img,
ul.cartas li,
ul.cartas li .trazo
{
	transition: all .3s ease-in-out;
}






ul#cuadromedico{ padding:8px; max-width: 550px;}
ul#cuadromedico li img{
	border-radius: 200px;
	border: solid 8px var(--main-color);
	width: 120px;
	height: 120px;
	margin:10px;
	}

ul#cuadromedico h4{ margin:0; padding:0; font-size:14px; color: var(--main-color);}
ul#cuadromedico li{ margin-bottom:20px; text-align: center; width: 50%;}

ul#cuadromedico li p{padding:0 !important; margin:0; color:grey; font-size:12px; line-height:14px; margin:10px}





#cartas{}
ul.cartas li{
	border-radius:10px;
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	margin:20px;
	background:url(../img/cart1.jpg) left center no-repeat;
	background-size:auto 100%;
	background-position:-40px;

	height:160px;
	}

ul.cartas li:hover{
	box-shadow: 2px 2px 10px rgba(0,0,0,.45);
	background:url(../img/cart1.jpg) left center no-repeat;
	background-size:auto 100%;
	background-position:-20px
	}



ul.cartas li p{ font-size:14px; line-height:18px;}

ul.cartas li h3{ margin-bottom:10px; letter-spacing:1px;}

ul.cartas{width: 630px;margin: 20px auto;}

ul.cartas li{width: 300px !important;}


ul.cartas #carta1{ background-image: url(../img/cart1.jpg);}
ul.cartas #carta2{ background-image: url(../img/cart2.jpg);}
ul.cartas #carta3{ background-image: url(../img/cart3.jpg);}
ul.cartas #carta4{ background-image: url(../img/cart4.jpg);}



ul.cartas li .trazo{
	background: url(../img/trazovertical.jpg) center right repeat-y;
	padding: 0px 20px 10px 90px;
	height: 210px;
	background-position: 285px;
	background-size: auto 200%;
}

ul.cartas li:hover .trazo{
	padding:0px 5px 10px 105px;
	background-position: 280px;

}




.mxwidth{max-width: 656px;margin: 6px auto;}





header.large{top:0;}
header.small{
	
	position:fixed;
	top:-11px;
	

}

header.small #sup{ display: block; height: 0;}


header, header.small #sup, header{transition: all .3s ease-in-out;}


header.small,
header.large,

header.small .fleft,
header.large .fleft,
header.small .fright,
header.large .fright
header.small .fright a
header.large .fright a{transition: width .3s ease-in-out;}