﻿@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?m2iy5g');
  src:  url('../fonts/icomoon.eot?m2iy5g#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?m2iy5g') format('truetype'),
    url('../fonts/icomoon.woff?m2iy5g') format('woff'),
    url('../fonts/icomoon.svg?m2iy5g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-click:before {
  content: "\e904";
}
.icon-palomita:before {
  content: "\e902";
}
.icon-internet:before {
  content: "\e905";
}
.icon-email:before {
  content: "\e900";
}
.icon-instagram:before {
  content: "\e901";
}
.icon-reloj:before {
  content: "\e903";
}
.icon-carrr:before {
  content: "\e93a";
}
.icon-telefono:before {
  content: "\e942";
}
.icon-ubicacion:before {
  content: "\e947";
}
.icon-celular:before {
  content: "\e958";
}
.icon-estrella:before {
  content: "\e9d9";
}
.icon-facebook:before {
  content: "\ea90";
}
.icon-twitter:before {
  content: "\ea96";
}





body{
	background: url(../images/fondo.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
	font-family: 'M PLUS 1p', sans-serif;
	font-family: 'century gothic';
}


.chat{
    position: fixed;
    bottom: 100px;
    right: 50px;
	z-index: 1000;
    width: 60px;
}
.chat img{
    width: 100%;
}
.chat span{
    position: absolute;
    top: 15px;
    left: -310%;
    border: 0px solid red;
    background: white;
    font-weight: bold;
    color: gray;
    padding: 4px 10px;

    border-radius: 10px;

    box-shadow: 2px 0px 10px gray;
}



#cabecera{
	border: 0px solid red;
	background: white;
	width: 100%;
	float: left;
}

#cabecera-conten{
	width: 1200px;
	margin: 0 auto;
}

#logotipo{
	width: 15%;
	float: left;
}

#logotipo img{
	width: 100%;
}


#leyenda{
	width: 85%;
	text-align: center;
	color: #7ec524;
	font-size: 24px;
	float: left;
	padding: 12px 0;
}

#leyenda span{
	width: 50%;
	text-align: center;
	float: left;
}

.whatsapp{
	background: #269e20;
	width: 40%;
	color: white;
	float: left;
	margin: 5px 0 0 70px;
	padding:0 10px 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.whatsapp img{
	width: 25px !important;
}


#redes{
	border: 0px solid blue;
	width: 100%;
	float: left;
	padding: 9px 0;
}

#redes img{
	width: 35px;
	margin: 12px 12px 0;
}



#efecto{
	position: relative;
	width: 100%;
	float: left;
}

.fondo{
	width: 100%;
	float: left;
}

#menu{
	background: rgba(71,71,73,0.7);
	background: -moz-linear-gradient(top, rgba(71,71,73,0.7) 0%, rgba(71,71,73,0.4) 44%, rgba(71,71,73,0.2) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,71,73,0.7)), color-stop(44%,rgba(71,71,73,0.4)), color-stop(100%,rgba(71,71,73,0.2)));
	background: -webkit-linear-gradient(top, rgba(71,71,73,0.7) 0%,rgba(71,71,73,0.4) 44%,rgba(71,71,73,0.2) 100%);
	background: -o-linear-gradient(top, rgba(71,71,73,0.7) 0%,rgba(71,71,73,0.4) 44%,rgba(71,71,73,0.2) 100%);
	background: -ms-linear-gradient(top, rgba(71,71,73,0.7) 0%,rgba(71,71,73,0.4) 44%,rgba(71,71,73,0.2) 100%);
	background: linear-gradient(top, rgba(71,71,73,0.7) 0%,rgba(71,71,73,0.4) 44%,rgba(71,71,73,0.2) 100%);

	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	float: left;
}

#menu-conten{
	width: 1200px;
	margin: 0 auto;
}

#menu-r{
	width: 100%;
	color: white;
	text-shadow: 1px 1px 1px #60a21e;
	font-weight: bold;
	text-align: center;
	font-size: 19px;
	float: left;
	padding: 20px 0;
	cursor: pointer;
	display: none;
}
#menu-r:hover{
	background: rgba(126, 197, 36, 0.4);
}

#menu-conten ul{
	width: 100%;
	float: left;
}

#menu-conten ul li{
	position: relative;
	width: 20%;
	float: left;
}

.menu{
	border: 0px solid red;
	width: 100%;
	color: white;
	text-shadow: 1px 1px 1px #60a21e;
	font-weight: bold;
	text-align: center;
	font-size: 19px;
	float: left;
	padding: 20px 0;
}

.menu:hover, .activo{
	background: rgba(126, 197, 36, 0.4);
}

#menu-conten ul li:hover #menu-secundario{
	display: block;
}

#menu-secundario{
	position: absolute;
	top: 58px;
	left: 0;
	z-index: 9000000000;
	border: 0px solid red;
	background: rgba(71,71,73,0.9);
	width: 100%;
	display: none;
}

#menu-secundario ul{
	width: 100%;
	float: left;
}

#menu-secundario ul li{
	width: 100%;
	float: left;
}

.menu-secundario{
	width: 100%;
	text-shadow: 1px 1px 1px #60a21e;
	font-weight: bold;
	color: white;
	text-align: center;
	font-size: 19px;
	line-height: 24px;
	float: left;
	padding: 12px 0;
}

.menu-secundario:hover{
	background: rgba(126, 197, 36, 0.4);
}




#consultorios{
	position: absolute;
	top: 58px;
	z-index: 2;
	background: #60a21e;
	width: 100%;
	float: left;
}

#consultorios-conten{
	width: 1200px;
	margin: 0 auto;
}

#consultorios-conten span{
	border: 0px solid red;
	width: 50%;
	font-size: 18px;
	line-height: 23px;
	text-align: center;
	color: white;
	float: left;
	padding: 5px 20px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


#consultorios-gris{
	background: #808080;
	width: 100%;
	float: left;
}

#consultorios-gris-conten{
	width: 1200px;
	margin: 0 auto;
}

#consultorios-gris-conten span{
	width: 33.33%;
	font-size: 18px;
	line-height: 23px;
	text-align: center;
	color: white;
	float: left;
	padding:5px 30px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



#contenido{
	width: 100%;
	float: left;
	padding: 50px 0;
}

#contenido-conten{
	width: 1200px;
	margin: 0 auto;
}

.imagen-importante{
	width: 35%;
	float: right;
	margin: 20px 0 0 0;
}
.imagen-importante img{
	width: 100%;
}

.texto-importante{
	border: 0px solid red;
	width: 64%;
	text-align: center;
	font-size: 23px;
	line-height: 33px;
	float: left;
	margin: 20px 0 30px 0;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.span-uno{
	color: #808080;
	font-size: 30px;
	font-weight: bold;
}

.span-dos{
	color: #99c34f;
	font-size: 30px;
	font-weight: bold;
}



#cuadros{
	width: 90%;
	float: left;
	margin: 0 5%;
}

#titulo-cuadros{
	width: 100%;
	text-align: center;
	font-size: 40px !important;
	float: left;
	padding: 10px 0;
}

.linea{
	width: 100%;
	float: left;
}

.cuadro{
	width: 50%;
	float: left;
}

.texto{
	width: 50%;
	font-size: 23px;
	text-align: center;
	color: white;
	float: left;
	padding: 53px 20px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.padding-dos{
	padding: 65px 0 64px;
}
.padding-uno{
	padding: 76px 0;
}

.imagen{
	border: 0px solid red;
	width: 50%;
	height: 175px;
	float: left;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.imagen img{
	width: 100%;
}

.gris{
	background: #808080;
}
.verde{
	background: #99c34f;
}


.uno{
	background: url(../images/fondo-nutricion-en-diferentes-etapas-de-la-vida.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}
.dos{
	background: url(../images/fondo-nutricion-en-diferentes-enfermedades.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}
.tres{
	background: url(../images/fondo-deteccion-de-pie-diabetico.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}
.cuatro{
	background: url(../images/fondo-educador-de-diabetes.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}
.seis{
	background: url(../images/fondo-blog-nutricional.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
}



#enlaces{
	width: 100%;
	float: left;
	margin: 20px 0;
}

.enlace{
	border: 1px solid #ddd;
	background: white;
	width: 31.33%;
	color: #808080;
	font-size: 19px;
	text-align: center;
	float: left;
	padding:12px 30px;
	margin: 0 1% 20px 1%;
	cursor: pointer;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.enlace:hover{
	background: #99c34f;
	color: white;
	font-weight: bold;
}



.parte{
	width: 100%;
	float: left;
	margin: 0 0 100px 0;
}

.titulo{
	background: #ddd;
	width: 100%;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	float: left;
	padding:10px 0;
}

.t{
	width: 65%;
	font-size: 16px;
	line-height: 21px;
	float: left;
	padding: 12px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.i{
	width: 35%;
	float: left;
}
.i img{
	width: 100%;
}




.titulo-gris{
	background: #808080;
	width: 70%;
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 22px;
	float: left;
	padding: 7px 0;
	margin:0 15%;
}



#formulario{
	border: 0px solid red;
	width: 1150px;
	margin: 0 auto;
}

#formulario-conten{
	width: 100%;
	float: left;
	margin: 20px 0;
}

#formularioi{
	background: #99c34f;
	width: 50%;
	float: left;
}

#titulo-formulario{
	background: #808080;
	width: 100%;
	text-align: center;
	color: white;
	font-size: 18px;
	font-weight: bold;
	float: left;
	padding: 12px 0;
}

#contenido-formulario{
	width: 100%;
	color: white;
	float: left;
	padding:10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#formulariod{
	width: 50%;
	float: left;
}

#formulariod img{
	width: 100%;
}

#formulariod strong{
	width: 100%;
	float: left;
	padding: 0 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}



.promocion{
	width: 70%;
	margin: 0 15%;
}
.promocion img{
	width: 100%;
}


.entrada{
	width: 100%;
	float: left;
	margin: 0 0 35px 0;
}

.imagen-entrada{
	width: 25%;
	float: left;
}

.imagen-entrada img{
	width: 100%;
}

.texto-entrada{
	border: 0px solid red;
	width: 75%;
	float: left;
	padding: 0 0 0 10px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.texto-entrada strong{
	background: transparent;
	width: 100%;
	font-size: 22px;
	color: #555963;
	float: left;
}

.texto-entrada span{
	width: 100%;
	font-weight: normal;
	color: #555963;
	font-size: 14px;
	margin: 10px 0;
	float: left;
}

.texto-entrada p{
	width: 100%;
	height: 120px;
	line-height: 20px;
	font-weight: normal;
	float: left;
	overflow: hidden;
}



.titulo-e{
	width: 100%;
	font-size: 22px;
	font-weight: bold;
	float: left;
	margin: 0 0 30px 0;
}

.e{
	width: 100%;
	float: left;
}

.texto-e{
	border: 0px solid red;
	width: 100%;
	font-weight: normal;
	font-size: 18px;
	line-height: 23px;
}

.texto-e img{
	width: 30%;
	vertical-align: text-top;  
	float: left;
	margin: 0 20px 20px 0;
}


.titulo2{
	font-size: 35px;
	font-weight: bold;
	color: #269e1f;
}
.texto-importante b{
	font-size: 27px;
}
.texto-importante p{
	margin-bottom: 22px;
}


#footer{
	background: url(../images/fondo-footer.jpg) no-repeat center center;
	-webkit-background-size: cover;
	background-size: cover;
	width: 100%;
	float: left;
}

#footer-conten{
	width: 1300px;
	margin: 0 auto;
}

.seccion-footer{
	border: 0px solid blue;
	height: 550px;
	line-height: 18px;
	color: white;
	padding: 20px 8px;
	float: left;
	overflow-x:scroll;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.seccion-footer a{
	color: white;
}

.seccion-footer strong{
	font-size: 30px;
}

.mitad{
	width: 100%;
	float: left;
}



@media screen and (max-width: 1300px){
	#footer-conten{
		width: 100%;
	}
}

@media screen and (max-width: 1200px){
	#cabecera-conten, #menu-conten, #consultorios-conten, #efecto, #contenido-conten, #consultorios-gris-conten{
		width: 100%;
	}
	#menu, #consultorios{
		position: relative !important;
		top: 0;
	}
	#efecto .slider2{
		float: left;
	}

	.e, .titulo-e{
		padding: 0 10px;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1150px){
	#formulario{
		width: 100%;
		padding: 0 10px;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 900px){
	#logotipo{
		width: 100%;
		text-align: center;
	}
	#logotipo img{
		width: 30%;
	}
	#leyenda{
		width: 100%;
		float: left;
	}
	.whatsapp{
		display: none;
	}
}

@media screen and (max-width: 750px){
	#leyenda span{
		width: 100%;
	}

	#consultorios-conten span{
		width: 100%;
	}

	#consultorios-gris-conten{
		display: none;
	}
}

@media screen and (max-width: 700px){
	.texto-importante{
		width: 100%;
		padding: 0 10px;
	}
	.imagen-importante{
		width: 100%;
		text-align: center;
		margin: 30px 0;
	}
	.imagen-importante img{
		width: 60%;
	}

	.cuadro{
		width: 100%;
		margin: 0 !important;
	}

	#formularioi, #formulariod{
		width: 100%;
	}

	.seccion-footer{
		width: 50% !important;
		height: auto;
		padding: 30px 10px;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.titulo-gris{
		width: 90%;
		margin: 0 5%;
	}
	.imagen-contacto{
		width: 90% !important;
		margin: 0 5% !important;
	}
}

@media screen and (max-width: 600px){
	.chat{
		right: 0;
	}
	#logotipo img{
		width: 50%;
	}

	#menu-r{
		display: block;
	}
	#menu-conten ul{
		display: none;
	}
	#menu-conten ul li{
		width: 100%;
	}

	.enlace{
		width: 98% !important;
	}

	.t{
		width: 100%;
	}
	.i{
		width: 100%;
		text-align: center;
	}
	.i img{
		width: 70%;
	}

	.promocion{
		width: 95%;
		margin: 0 2.5%;
	}

	.entrada{
		width: 90%;
		margin: 0 5% 30px;
	}

	.imagen-entrada{
		width: 100%;
		text-align: center;
	}
	.imagen-entrada img{
		width: 70%;
	}
	.texto-entrada{
		width: 100%;
	}

	.texto-e img{
		width: 100%;
	}

	.seccion-footer{
		width: 100% !important;
	}
}











