html {padding: 0; margin: 0; height: 100%;}
body {margin: 0 auto; font-family: "Open Sans", sans-serif; font-size:14px; color:#666666; overflow-x:hidden; height: 100%; background-color: #fff;}			

* {box-sizing: border-box;}
img {border: 0; }
ul, ol, li, dl, dt, dd {list-style-type: none; margin: 0; padding:0;}
a {text-decoration: none;}
a:hover {text-decoration: none;}
input:focus, textarea:focus, button:focus {outline: none;}
h1,h2,h3,h4,h5,h6 {padding: 0; margin: 0; }
form,fieldset,label,input {padding: 0;margin: 0; }
fieldset {border: 0;}
p {margin: 0 0; }
*:focus {outline: 0 none;}

.whatsappFijo { display:block; position:fixed; z-index: 999; bottom:9vw; right:0; font-size:25px; width:17vw;  }
.whatsappFijo img { display:block; width:100%; height:auto; }

.wrapper {position: relative; display: block; overflow: hidden; width: 90%; margin:0 auto; max-width:670px;}
#ortomolecular:not(.concepto) .wrapper {float: right; width: 95%; max-width: 730px; padding-right: 10%;}

.atencion { display: block; position: fixed; bottom: 0; background: #ccc; z-index: 9999; padding: 10px 20px; border-radius: 6px; width: 80%; text-align: center; margin: 0 auto; left: 10%; font-size: 14px; color: #000; }
.atencion .cerrar { display:block; position:absolute; top:9px; right:5px; cursor:pointer; }

/* --- top ---- */

#top {position: relative; display: block; width: 100%; background-color: #fff; padding: 15px 0; border-top: solid 10px #006699;}

	#top .logo {position: relative; display: block; margin:0 auto; width: 529px; max-width: 95%;}
		.logo img {width: 100%; display: block;}


/* --- Menu ---- */

#menu {position: relative; display: block; width: 100%; background-color: #009bba; z-index: 10; text-align: center; padding: 10px 0; color: #d61b27; font-size: 30px;}
	#menu #click-menu {position: relative; display: block; float: left; width: 32px; height: 25px; cursor: pointer;}
		#click-menu span {position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #fff; transition: all .3s;}
		#click-menu span:nth-child(2) {top: 10px;}
		#click-menu span:nth-child(3) {top: 20px;}
		#click-menu.active span:nth-child(1) {top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); }
		#click-menu.active span:nth-child(2) {opacity: 0; left: -60px;}
		#click-menu.active span:nth-child(3) {top: 10px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); }

	#menu .redes {position: relative; float: right; display: block; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 700;}
		.redes a {width: 25px; height: 25px; vertical-align: middle; background-color: #fff; display: inline-block; border-radius: 4px; color: #009bba; font-size: 20px; text-align: center; margin: 0 1px;}
		.redes span {margin-right: 5px; vertical-align: middle; }

	#menu ul {position: absolute; top: 100%; left: 0; text-align: right; width: 100%; padding: 20px 0; display: none; background-color: #004c73;}
		#menu ul li {position: relative; display: block; width: 90%; margin:0 auto; max-width:670px; border-bottom: solid 2px #80a6b9;}
		#menu ul li:last-child {border: none;}
			#menu ul a {display: block;color: #fff; font-size: 24px; font-weight: 700; padding: 10px 0;}
			#menu ul .selec a {color: #01cdff;}
				#menu ul i {color: #fff; vertical-align: middle; margin-right: -12px; opacity: 0;}
				#menu ul .selec i {opacity: 1;}


/* --- Ortomolecular ---- */

#ortomolecular {position: relative; display: block; width: 100%; overflow: hidden; max-width: 768px; margin:0 auto; padding-bottom: 100px;}
	#ortomolecular .img {width: 95%; margin-bottom: 20px; float: right;}

	#texto {display: block; position: relative; overflow: hidden; color: #666666; font-weight: 300; line-height: 24px; text-align: left;}
	#texto h4 {display: block; position: relative; font-size: 24px; font-weight: 600; color: #004c73; text-align: left; margin-bottom: 10px; }
	#texto p, #articulos li p {display: block; margin: 0 0 20px 0; font-size: 20px;}
	#texto h5 {display: block; font-family: "Open Sans",sans-serif; font-size: 26px; line-height: 30px; font-weight: normal; color: #fff; padding: 20px 70px; margin: 10px 0; margin-bottom: 20px; background: #9aa0a6; font-style: italic; text-align: center;}

	a.concepto {display: block; margin-top: 40px; text-align: left; margin-bottom: 25px;}
	.links {text-align: left;}
		.links span {display: block; font-size: 46px; font-weight: 300; color: #009bba; margin-bottom: 15px; line-height: 35px; margin-top: 10px;}
		.links ul {display: block; position: relative; overflow: hidden; margin-left: 7px; margin-top: 10px;}
			.links ul li {display: block; font-size: 20px; font-weight: 300; padding-left: 14px; background: url(../img/bullet-texto.png) no-repeat 0 6px;}
				.links ul li a {color: #009bba;}

	.img-concepto {display: block; width: 100%; overflow: hidden;}
		.img-concepto img {width: 58.2%; vertical-align: middle; display: inline-block; margin-right: -4px;}
		.img-concepto .sub-concepto {width: 41.8%; font-size: 20px; display: inline-block; color: #003b59; font-weight: 700; padding-right: 30px; vertical-align: middle;}


/* --- Instituto ---- */

#instituto {position: relative; display: block; width: 100%; padding: 30px 0;}
	h2 {font-size: 50px; display: block; color: #009bba; font-weight: normal;}
	h2:not(:first-child) {margin-top: 40px;}


/* --- Tratamientos ---- */

#tratamientos .wrapper {padding: 20px 0;}
#tratamientos img {width: 100%;}


/* --- Donde estamos ---- */

#donde-estamos {padding-bottom: 50px;}
	#donde-estamos iframe {width: 100%; margin-bottom: 20px;}


/* --- ARtículos ---- */

.paginador { display:block; clear:both; position:relative; overflow:hidden; font-size:18px; color:#fff; margin-bottom: 25px; text-align:center;  background:#ccc; height:30px; padding-top:3px; }
	.paginador .flechas {float: right;  }
	.paginador a { display:inline; margin-right:5px; color:#fff; }
	.paginador a:hover { color:#004C73; }
	.paginador .selec {color: #004C73; text-align:center; display:inline; margin-right:5px;  width:16px; height:16px;  }
	.paginador .n {color: #fff; text-align:center;  display:inline;  width:16px; height:16px; }
	.paginador .numeros a {  }

	.paginador .anterior {padding-left: 6px; margin-right:5px; font-weight:bold; margin-top:4px;  height:14px;  cursor:pointer;  color:#fff; }

	.paginador .siguiente {padding-right: 6px; margin-left:5px;  margin-top:4px; height:14px; cursor:pointer; color:#fff; }


ul#articulos { display:block; position:relative; overflow:hidden; }
	#articulos li { display:block; position:relative; overflow:hidden; margin-bottom:25px; }
		#articulos li h3 { display:block; font-size:30px; font-weight:600; color:#004c73; }
			#articulos li h3 a { color:#004c73; }
		.leer-mas { width:88px; height:21px; display:block; text-indent:-9000px; background:url(../img/leer-mas.png) no-repeat; }
		.volver {width: 88px; height: 21px; display: block; text-indent: -9000px; background: url(../img/volver.png) no-repeat; margin-top: 20px; }

#articulos.interna {padding: 50px 0;}


/* --- Contacto ---- */

#contacto {padding: 30px 0; }
#form_contacto { display:block; position:relative; overflow:hidden; margin:20px 0;width: 100%;}
	#form_contacto input { display:block;width: 49.5%;background: #f2f2f2; padding:5px; font-size:13px;font-weight: normal; color:#b2b2b2; border:0;margin-bottom: 1%;padding: 10px;font-family: 'Open Sans';}
		#form_contacto .izq { clear:left; float:left;margin-right: 1%;}
		#form_contacto .der { float:left; }
	#form_contacto textarea { display:block;width: 100%;height: 100px; background:#f2f2f2; padding:5px; font-size:13px;font-weight: normal; color:#b2b2b2; border:0; margin-bottom:10px;padding: 10px;font-family: 'Open Sans';}
	#form_contacto button { width:130px; height:35px; display:block; float:right; border:0; cursor:pointer; text-indent:-9000px; background:url(../img/bot-enviar.png) no-repeat;}

#chica-contacto {display: block; margin:0 auto; margin-top: 20px; max-width: 90%}



/* --- Pie ---- */

#pie {position: relative; display: block; width: 100%; overflow: hidden; padding: 60px 0; background-color: #009bba; text-align: right;}
	#pie #datos {display: block; width: 100%; color: #fff; margin-bottom: 70px;}
		#pie #datos h3 {font-size: 26px; font-weight: 700;}
		#pie #datos h4 {font-size: 26px; font-weight: normal;}
		#pie #datos h5 {font-size: 18px; font-weight: normal;}
		#pie #datos a {font-size: 20px; font-weight: 700; color: #fff;}
		#pie .wrapper > a {color: #fff; font-size: 19px;}
			#pie .wrapper > a span {font-size: 20px; text-transform: uppercase; font-weight: 700;}








@media screen and (max-width: 480px){

	#ortomolecular:not(.concepto) .wrapper {padding-right: 5%;}
	.img-concepto img {width: 100%;}
	.img-concepto .sub-concepto {width: 100%; padding: 10px 20px; margin-bottom: 20px; }
	#texto h5 {padding: 20px;}

	#menu ul a {font-size: 20px; padding: 7px 0;}

	.links span {font-size: 35px;}
	h2 {font-size: 40px; margin-bottom: 10px;}
	#texto {line-height: 20px;}
		#texto p, #articulos li p {font-size: 16px; margin-bottom: 10px;}
		#texto h4 {font-size: 20px; margin-bottom: 5px;}

	#form_contacto input {width: 100%;}

	#pie {position: relative; display: block; width: 100%; overflow: hidden;padding: 40px 0; background-color: #009bba; text-align: right;}
	#pie #datos {display: block; width: 100%; color: #fff;margin-bottom: 40px;}
		#pie #datos h3 {font-size: 22px; font-weight: 700;}
		#pie #datos h4 {font-size: 20px; font-weight: normal;}
		#pie #datos h5 {font-size: 14px; font-weight: normal;}
		#pie #datos a {font-size: 16px; font-weight: 700; color: #fff;}
		#pie .wrapper > a {color: #fff;font-size: 15px;}
			#pie .wrapper > a span {font-size: 16px; text-transform: uppercase; font-weight: 700;}



}

@media screen and (max-width: 360px){

	#form_contacto button {margin-top: 10px;}
	h2 {line-height: 40px;}

}