@charset "utf-8";
/* Google Fonts
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Fjalla One', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Francois One', sans-serif;
font-family: 'Archivo Narrow', sans-serif;
 */
@font-face{
	font-family:'Rubik Black';
	src:url(../tipografias/Rubik-Black.ttf) format('opentype');	
}
@font-face{
	font-family:'Rubik Bold';
	src:url(../tipografias/Rubik-Bold.ttf) format('opentype');	
}
@font-face{
	font-family:'Rubik';
	src:url(../tipografias/Rubik-Regular.ttf) format('opentype');	
}
@font-face{
	font-family:'Rubik Light';
	src:url(../tipografias/Rubik-Light.ttf) format('opentype');	
}
@font-face{
	font-family:'Baskerville Old Face';
	src:url(../tipografias/BASKVILL.TTF) format('Truetype');	
}
/* Selectores Basicos */
header, section, article, nav, footer, aside, figure, form, div{
	display:block;
	margin:0;
	padding:0;	
}
html, body{
	margin:0;
	background:#fff;
	height:100%;
}
*{	
	box-sizing:border-box;
}
h1{
	font-family: 'Oswald SemiBold', sans-serif;
	text-align:center;
	font-size:65px;
	margin:0;
	font-weight:normal;
}
h2, h3, h4, h5{
	font-family: 'Oswald SemiBold', sans-serif;
	margin:0;
	font-weight:normal;
}
p{
	font-family: 'Roboto Medium', sans-serif;
	font-size:22px;
	line-height:30px;
	color:#fff;
	text-align:justify;
	font-weight:normal;
	margin:0;
}
a{	
	font-family: 'Oswald', sans-serif;
	font-style:italic;
	text-decoration:none;
	color:#fff;
	margin:0 ;
}
a:hover{
	text-decoration:none;	
}
a img{
	border:none;
}
img{
	display:block;
	width:100%;
	height:auto;	
}
ul, ol{
	list-style:none;
	padding:0;
	margin:0;
	font-size:14px;
	color:#fff;
}
.salto-linea{
	display:none;	
}
/**********************************************************************/
/*************************** CABECERA *********************************/
/**********************************************************************/
#cabecera{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	padding:1% 7%;	
	background:#f0f0f0;
	border-bottom:8px solid #40b4bc;
}
.logo{
	width:13%;	
}
.datos-cabecera{
	width:510px;	
}
.datos-cabecera p{
	font-family: 'Oswald SemiBold', sans-serif;
	font-size:30px;
	color:#09265c;	
}
.datos-cabecera p a{
	font-family: 'Oswald SemiBold', sans-serif;
	font-size:30px;
	color:#09265c;	
}
.telefono-sociales{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.sociales{
	width:95px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.sociales li a{
	display:block;
	width:25px;
	height:25px;	
	border-radius:5px;
	font-size:18px;
}
.sociales li .whatsapp{		
	line-height:22px;
	background:#419845;	
}
.sociales li .whatsapp{
	text-align:center;	
}
.sociales li .facebook{		
	background:#364f8e;
	padding-left:3px;		
}
.sociales li .instagram{	
	line-height:22px;
	background: rgba(249,212,2,1);
	background: -moz-linear-gradient(45deg, rgba(249,212,2,1) 0%, rgba(211,33,86,1) 50%, rgba(123,55,171,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(249,212,2,1)), color-stop(50%, rgba(211,33,86,1)), color-stop(100%, rgba(123,55,171,1)));
	background: -webkit-linear-gradient(45deg, rgba(249,212,2,1) 0%, rgba(211,33,86,1) 50%, rgba(123,55,171,1) 100%);
	background: -o-linear-gradient(45deg, rgba(249,212,2,1) 0%, rgba(211,33,86,1) 50%, rgba(123,55,171,1) 100%);
	background: -ms-linear-gradient(45deg, rgba(249,212,2,1) 0%, rgba(211,33,86,1) 50%, rgba(123,55,171,1) 100%);
	background: linear-gradient(45deg, rgba(249,212,2,1) 0%, rgba(211,33,86,1) 50%, rgba(123,55,171,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9d402', endColorstr='#7b37ab', GradientType=1 );	
}
/**********************************************************************/
/****************************** PORTADA *******************************/
/**********************************************************************/
#portada{
	background:url(../imagenes/portada.jpg) no-repeat;
	background-size:100%;
	height:790px;	
	display:flex;
	align-items:center;
	position:relative;
}
.imagen-doctor{
	width:30%;
	position:absolute;
	right:0;
	bottom:0;	
}
.caja-texto-portada{
	width:100%;
	background:#40b4bc;
	display:flex;
	justify-content:flex-start;
	padding:2% 0 2% 8%;
}
.texto-portada h1{
	font-size:70px;
	line-height:75px;
	color:#fff;
}
.titulo-portada{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:stretch;	
}
.titulo-portada span{
	font-size:30px;	
}
.texto-portada h2{
	font-size:50px;
	text-align:center;
	color:#00215e;
}
.texto-portada a{
	font-size:30px;
	text-align:center;
	display:block;
	margin:3% auto 0 auto;	
}
/**********************************************************************/
/************************** TRATAMIENTO *******************************/
/**********************************************************************/
#tratamiento{
	background:#5693b0;	
	padding:5% 7%; 
}
#tratamiento h1{	
	color:#fff;	
	margin-bottom:5%;
}
.colum-tratamiento{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.texto-tratamiento{
	width:50%;	
}
.caja-imagen-tratamiento{
	width:40%;
}
/**********************************************************************/
/****************************** EQUIPO ********************************/
/**********************************************************************/
#nuestro-equipo{
	background:#f8f8f7;
	padding:5% 12%; 	
}
#nuestro-equipo h1{
	color:#00458a;
	margin-bottom:5%;	
}
.caja-equipo{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
}
.equipo{
	width:30%;
	background:#00458a;	
	padding:14% 2%;	
	transition:all 0.5s;
	cursor:default;
	position:relative;	
}
.nom-equipo{
	width:92%;
	position:absolute;
	top:42%;
	left:4%;	
	opacity:1;
	transition:all 0.5s;
}
.nom-equipo h2{
	text-align:center;
	color:#fff;	
}
.texto-oculto-dr1{
	width:80%;
	position:absolute;
	top:10%;
	left:10%;
	opacity:0;
	transition:all 0.5s;
}
.texto-oculto-dr2{
	width:80%;
	position:absolute;
	top:40%;
	left:10%;
	opacity:0;
	transition:all 0.5s;
}
.texto-oculto-dr3{
	width:80%;
	position:absolute;
	top:45%;
	left:10%;
	opacity:0;
	transition:all 0.5s;
}
.texto-oculto-dr1 p,.texto-oculto-dr2 p, .texto-oculto-dr3 p{
	font-size:17px;
	line-height:20px;
}
.texto-oculto-dr1 ul,.texto-oculto-dr2 ul, .texto-oculto-dr3 ul{
	list-style:outside;
}
.texto-oculto-dr1 ul li,.texto-oculto-dr2 ul li, .texto-oculto-dr3 ul li{
	font-size:17px;
}
.equipo:hover .nom-equipo, .equipo:focus .nom-equipo{
	opacity:0;
}
.equipo:hover .texto-oculto-dr1, .equipo:focus .texto-oculto-dr1{
	opacity:1;
}
.equipo:hover .texto-oculto-dr2, .equipo:focus .texto-oculto-dr2{
	opacity:1;
}
.equipo:hover .texto-oculto-dr3, .equipo:focus .texto-oculto-dr3{
	opacity:1;
}
/**********************************************************************/
/************************* PROCEDIMIENTOS *****************************/
/**********************************************************************/
#procedimientos{
	padding:5% 9%; 	
}
#procedimientos h1{
	color:#00458a;
	margin-bottom:5%;	
}
.caja-procedimientos{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between;
}
.item-procemiento{
	width:27%;	
	margin:0 0 4% 0;
}
.item-procemiento h2{
	font-family: 'Oswald SemiBold', sans-serif;
	font-size:40px;	
	line-height:45px;
	text-align:center;
	margin-top:13%;
	color:#00458a;
}
.caja-imagen-procedimiento{
	position:relative;	
}
.caja-imagen-procedimiento img{
	width:90%;	
	 -webkit-box-shadow: 30px 30px 1px 4px rgba(0, 69, 138, 1.0);
    -moz-box-shadow: 30px 30px 1px 4px rgba(0, 69, 138, 1.0);
    box-shadow: 30px 30px 1px 4px rgba(0, 69, 138, 1.0);
}
.procedimiento-oculto{
	width:90%;
	height:100%;
	padding:40% 5%;
	background-color:rgba(0,0,0,0.4);
	position:absolute;
	top:0;
	left:0;	
	opacity:0;
	transition:all 0.5s;
}
.procedimiento-oculto p{
	text-align:center;	
}
.caja-imagen-procedimiento:hover .procedimiento-oculto, .caja-imagen-procedimiento:focus .procedimiento-oculto{
	opacity:1;	
}
.boton-videos{
	display:block;
	width:280px;
	margin:2% auto 0 auto;
	padding:1% 0;
	border:5px solid #00458a;
	background:#00458a;
	font-size:40px;
	text-align:center;
	transition:all 0.3s;
}
.boton-videos:hover{
	color:#00458a;
	background:#fff;	
}
/**********************************************************************/
/************************** RESERVAR CITA *****************************/
/**********************************************************************/
#reservar{
	background:#5693b0;	
	padding:5% 12%; 
}
.caja-reservar{
	display:flex;
	flex-direction:row;
	justify-content:space-between;	
	align-items:center;
}
.imagen-reservar{
	width:50%;
}
.formulario{
	width:40%;
	padding:2%;
	background:#00458a;	
}
.formulario h1{
	font-size:50px;
	color:#fff;	
}
#fcontacto p {
	margin:15px 0;	
}
.campos{
	width:100%;
	line-height:25px;
	padding:3%;
	border:none;
	color:#666666;
}
.ccomentarios{
	width:100%;
	height:300px;
	line-height:25px;
	padding:3%;
	border:none;
	color:#666666;
}
#benviar{
	display:block;
	font-family: 'Oswald', sans-serif;
	font-size:32px;
	text-align:center;
	font-style:italic;
	color:#00458a;
	margin:10% auto;
	padding:5% 16%;
	background:#d8dade;	
	border:none;
	cursor:pointer;
	transition:all 0.3s;
}
#benviar:hover{
	color:#00458a;	
	background:#d8dade;		
}
/**********************************************************************/
/************************** PIE DE PAGINA *****************************/
/**********************************************************************/
#pie-pagina{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	padding:1.5% 8%;
	background:#001947;	
}
.enlace-tactika p{
	margin:10px 0 0 0;
}
.sociales-pie{
	display:flex;
	flex-direction:row;
	justify-content:space-between;	
	align-items:center;
}
.sociales-pie p{
	margin-right:10px;	
}
.sociales-pie ul{
	display:flex;
	flex-direction:row;
	justify-content:space-between;	
	align-items:center;
}
.sociales-pie ul li a{
	font-size:32px;	
}
/************************************************************************************/
/*******************************ESTILOS PARA 1366 ***********************************/
/************************************************************************************/
@media only screen and (max-width:1440px){
	h1{
		font-size:45px;
	}
	p{
		font-size:17px;
		line-height:22px;
	}
	/**********************************************************************/
	/*************************** CABECERA *********************************/
	/**********************************************************************/
	.datos-cabecera{
		width:380px;	
	}
	.datos-cabecera p{
		font-size:22px;	
	}
	.datos-cabecera p a{
		font-size:22px;		
	}
	.sociales li a{
		width:25px;
		height:25px;
		border-radius:5px;
		font-size:18px;
	}	
	/**********************************************************************/
	/****************************** PORTADA *******************************/
	/**********************************************************************/
	#portada{
		height:540px;	
	}
	.caja-texto-portada{
		padding:2% 0 2% 8%;
	}
	.texto-portada h1{
		font-size:45px;
		line-height:50px;
	}
	.titulo-portada span{
		font-size:25px;	
	}
	.texto-portada h2{
		font-size:35px;
	}
	.texto-portada a{
		font-size:27px;
		margin:3% auto 0 auto;	
	}
	/**********************************************************************/
	/************************** TRATAMIENTO *******************************/
	/**********************************************************************/
	#tratamiento{
		padding:5% 7% 6% 7%; 
	}
	.caja-imagen-tratamiento{
		width:42%;
	}
	/**********************************************************************/
	/****************************** EQUIPO ********************************/
	/**********************************************************************/
	.nom-equipo{
		top:38%;
		left:4%;	
	}
	.texto-oculto-dr1{
		top:8%;
	}
	.texto-oculto-dr2{
		top:40%;
	}
	.texto-oculto-dr3{		
		top:45%;	
	}
	.texto-oculto-dr1 p,.texto-oculto-dr2 p, .texto-oculto-dr3 p{
		font-size:13px;
		line-height:16px;
	}
	.texto-oculto-dr1 ul li,.texto-oculto-dr2 ul li, .texto-oculto-dr3 ul li{
		font-size:13px;
	}	
	/**********************************************************************/
	/************************* PROCEDIMIENTOS *****************************/
	/**********************************************************************/
	.item-procemiento h2{
		font-size:30px;	
		line-height:35px;
	}
	.caja-imagen-procedimiento img{		
		 -webkit-box-shadow: 20px 20px 1px 4px rgba(0, 69, 138, 1.0);
		-moz-box-shadow: 20px 20px 1px 4px rgba(0, 69, 138, 1.0);
		box-shadow: 20px 20px 1px 4px rgba(0, 69, 138, 1.0);
	}
	/*
	.procedimiento-oculto{
		padding:10% 5%;
	}
	*/	
	.boton-videos{		
		width:240px;
		border:4px solid #00458a;		
		font-size:30px;	
	}
	/**********************************************************************/
	/************************** RESERVAR CITA *****************************/
	/**********************************************************************/
	.formulario h1{
		font-size:40px;
	}
	.ccomentarios{
		height:200px;
	}
	#benviar{
		font-size:25px;
	}
}
/************************************************************************************/
/*******************************ESTILOS PARA 1280 ***********************************/
/************************************************************************************/
@media only screen and (max-width:1280px){
	
}
/****************************************************/
/****************    Estilos para 1024     **********/
/****************************************************/
@media only screen and (max-width:1024px){	
	
}
/****************************************************/
/****************    Estilos para 800      **********/
/****************************************************/
@media only screen and (max-width:800px){
	h1{
		font-size:45px;
	}
	p{
		font-size:17px;
		line-height:22px;
	}
	/**********************************************************************/
	/*************************** CABECERA *********************************/
	/**********************************************************************/
	#cabecera{
		flex-direction:column;
		padding:3% 5%;	
		border-bottom:4px solid #40b4bc;
	}
	.logo{
		width:40%;	
		order:2;
	}
	.datos-cabecera{
		width:250px;	
		order:1;
		margin-bottom:20px;
	}
	.datos-cabecera p{
		font-size:14px;
	}
	.datos-cabecera p a{
		font-size:14px;	
	}	
	/**********************************************************************/
	/****************************** PORTADA *******************************/
	/**********************************************************************/
	#portada{
		background-size:cover;
		height:400px;		
	}
	.imagen-doctor{
		width:30%;		
	}
	.caja-texto-portada{
		padding:2% 0 2% 4%;
	}
	.texto-portada h1{
		font-size:35px;
		line-height:40px;	
	}
	.texto-portada h2{
		font-size:25px;		
	}
	.texto-portada a{
		font-size:20px;		
	}
	/**********************************************************************/
	/************************** TRATAMIENTO *******************************/
	/**********************************************************************/
	#tratamiento{
		padding:10% 7% 8% 7%; 
	}
	#tratamiento h1{	
		margin-bottom:8%;
	}
	.colum-tratamiento{
		flex-direction:column;
	}
	.texto-tratamiento{
		width:100%;	
	}
	.caja-imagen-tratamiento{
		width:100%;
		margin:8% 0;
	}
	/**********************************************************************/
	/****************************** EQUIPO ********************************/
	/**********************************************************************/
	#nuestro-equipo{
		padding:10% 8%; 	
	}
	#nuestro-equipo h1{
		margin-bottom:8%;	
	}
	.caja-equipo{
		flex-direction:column;
	}
	.equipo{
		width:100%;
		margin:5% 0;
		padding:48% 2%;			
	}
	.texto-oculto-dr1 p,.texto-oculto-dr2 p, .texto-oculto-dr3 p{
		font-size:14px;
		line-height:17px;
	}
	.texto-oculto-dr1 ul li,.texto-oculto-dr2 ul li, .texto-oculto-dr3 ul li{
		font-size:14px;
	}	
	/**********************************************************************/
	/************************* PROCEDIMIENTOS *****************************/
	/**********************************************************************/
	#procedimientos{
		padding:12% 8%; 	
	}
	#procedimientos h1{
		margin-bottom:8%;	
	}
	.caja-procedimientos{
		flex-direction:column;		
	}
	.item-procemiento{
		width:100%;	
		margin:2% 0 8% 0;
	}
	.item-procemiento h2{		
		font-size:35px;	
		line-height:40px;
		margin-top:13%;		
	}
	/**********************************************************************/
	/************************** RESERVAR CITA *****************************/
	/**********************************************************************/
	#reservar{
		padding:12% 5%; 
	}
	.caja-reservar{
		flex-direction:column;
	}
	.imagen-reservar{
		width:100%;
	}
	.formulario{
		width:100%;
		padding:5%;
		margin:10% 0 5% 0;
	}
	.formulario h1{
		font-size:35px;
	}
	.ccomentarios{
		height:200px;	
	}
	#benviar{
		font-size:25px;
		margin:10% auto;
		padding:5% 16%;
	}
	/**********************************************************************/
	/************************** RESERVAR CITA *****************************/
	/**********************************************************************/
	#pie-pagina{
		flex-direction:column;
		padding:2% 5%;
	}
	.enlace-tactika{
		width:247px;
		margin:10px auto;
		order:2;
	}
	.sociales-pie{
		width:200px;
		margin:auto;
		order:1;	
	}
}

/****************************************************/
/****************    Estilos para 480      **********/
/****************************************************/
@media only screen and (max-width:480px){
	h1{
		font-size:35px;
		line-height:40px;
	}
	p{
		font-size:15px;
		line-height:18px;
	}
	/**********************************************************************/
	/****************************** PORTADA *******************************/
	/**********************************************************************/
	#portada{
		background-size:cover;
		height:400px;		
	}
	.imagen-doctor{
		width:42%;		
	}
	.caja-texto-portada{
		padding:2% 0 2% 4%;
	}
	.texto-portada h1{
		font-size:30px;
		line-height:35px;	
	}
	.titulo-portada span{
		font-size:20px;	
	}
	.texto-portada h2{
		font-size:18px;		
	}
	.texto-portada a{
		font-size:18px;		
	}
	/**********************************************************************/
	/************************* PROCEDIMIENTOS *****************************/
	/**********************************************************************/
	.item-procemiento h2{		
		font-size:25px;	
		line-height:30px;
		margin-top:10%;		
	}	
	.caja-imagen-procedimiento img{
		-webkit-box-shadow: 20px 20px 1px 4px rgba(0, 69, 138, 1.0);
		-moz-box-shadow: 20px 20px 1px 4px rgba(0, 69, 138, 1.0);
		box-shadow: 20px 20px 1px 4px rgba(0, 69, 138, 1.0);
	}		
	.boton-videos{
		width:180px;
		margin:4% auto 0 auto;
		padding:1.5% 0;
		border:4px solid #00458a;
		font-size:20px;		
	}
	/**********************************************************************/
	/************************** RESERVAR CITA *****************************/
	/**********************************************************************/	
	.enlace-tactika{
		width:215px;
	}
	.sociales-pie{
		width:190px;
	}
	.sociales-pie ul li a{
		font-size:27px;	
	}	

}

/****************************************************/
/****************    Estilos para 375      **********/
/****************************************************/
@media only screen and (max-width:375px){
	.salto-linea{
		display:block;	
	}
	/**********************************************************************/
	/****************************** PORTADA *******************************/
	/**********************************************************************/
	#portada{
		height:400px;		
	}
	.imagen-doctor{
		width:58%;		
	}
	.texto-portada h1{
		font-size:20px;
		line-height:25px;	
	}
	.titulo-portada span{
		font-size:17px;	
	}
	.texto-portada h2{
		font-size:17px;	
		line-height:21px;	
		margin-top:10%;
	}
	.texto-portada a{
		font-size:17px;	
		margin:8% auto 0 auto;	
	}
	/**********************************************************************/
	/****************************** EQUIPO ********************************/
	/**********************************************************************/
	.nom-equipo{
		top:39%;
	}	
	.nom-equipo h2{
		font-size:20px;
	}	
	.texto-oculto-dr1{
		top:8%;
	}
	.texto-oculto-dr1 p,.texto-oculto-dr2 p, .texto-oculto-dr3 p{
		font-size:12px;
		line-height:15px;
	}
	.texto-oculto-dr1 ul li,.texto-oculto-dr2 ul li, .texto-oculto-dr3 ul li{
		font-size:12px;
	}	
	/**********************************************************************/
	/************************** RESERVAR CITA *****************************/
	/**********************************************************************/
	.formulario{
		padding:10% 5%;
	}
	.formulario h1{
		font-size:28px;
	}
	.campos{
		line-height:20px;	
	}
	.ccomentarios{
		height:150px;
		line-height:20px;
	}
	#benviar{
		font-size:20px;
	}
}
/****************************************************/
/****************    Estilos para 320      **********/
/****************************************************/
@media only screen and (max-width:320px){
	/**********************************************************************/
	/****************************** PORTADA *******************************/
	/**********************************************************************/
	#portada{
		height:400px;		
	}
	.imagen-doctor{
		width:62%;		
	}
	.caja-texto-portada{
		padding:2% 0 2% 4%;
	}
	.texto-portada h1{
		font-size:18px;
		line-height:23px;	
	}
	.titulo-portada span{
		font-size:17px;	
	}
	.texto-portada h2{
		font-size:15px;	
		line-height:20px;	
		margin-top:10%;
	}
	.texto-portada a{
		font-size:15px;	
		margin:8% auto 0 auto;	
	}
	/**********************************************************************/
	/****************************** EQUIPO ********************************/
	/**********************************************************************/
	#nuestro-equipo{
		padding:10% 11%; 	
	}
	.equipo{
		padding:50% 2%;			
	}
	.nom-equipo{
		top:38%;
	}	
	.nom-equipo h2{
		font-size:20px;
	}	
	.texto-oculto-dr1{
		top:5%;
	}
	
	.texto-oculto-dr2{		
		top:37%;	
	}
	.texto-oculto-dr3{			
		top:45%;
	}	

	.texto-oculto-dr1 p,.texto-oculto-dr2 p, .texto-oculto-dr3 p{
		font-size:12px;
		line-height:15px;
	}
	.texto-oculto-dr1 ul li,.texto-oculto-dr2 ul li, .texto-oculto-dr3 ul li{
		font-size:12px;
	}	
	/**********************************************************************/
	/************************* PROCEDIMIENTOS *****************************/
	/**********************************************************************/
	/*
	.item-procemiento{
		margin:2% 0 8% 0;
	}
	*/
	.item-procemiento h2{		
		font-size:22px;	
		line-height:27px;
	}	
	.caja-imagen-procedimiento img{
		-webkit-box-shadow: 12px 12px 1px 4px rgba(0, 69, 138, 1.0);
		-moz-box-shadow: 12px 12px 1px 4px rgba(0, 69, 138, 1.0);
		box-shadow: 12px 12px 1px 4px rgba(0, 69, 138, 1.0);
	}
	/*
	.procedimiento-oculto{
		padding:10% 5%;
	}
	*/	

}