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

@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700'); /* font-family: 'Roboto Slab', serif; */

/* Import */
@import url('reset.css');
@import url('menu.css');
@import url(comun.css);

/****************************************************/
/**************** PAGINA - CLINICA ******************/
/****************************************************/
#clinicas {padding: 0;}
#clinica h1 {text-align: center;} 
#clinica img {float: right;padding: 2%;padding-top: 0;padding-bottom: 0;padding-right: 0;}

#clinicas ul {text-align: center;}
#clinicas li {display: inline-block;vertical-align: top;padding: 1%;margin: 2%;position: relative;width: 45%;font-weight: 200;font-size: 20px;}
#clinicas img {padding: 5% 0;}

.galeria_clinicas {text-align: center;width: 100%;padding: 5% 0;}
.galeria_clinicas img{width: 32%;padding: 0 !important;cursor: pointer;}

.galeria_clinicas2 {text-align: center;width: 100%;padding: 5% 0;}
.galeria_clinicas2 img{width: 32%;padding: 0 !important; cursor: pointer;}

.clinica_desc p {font-size: 19px;}
.box_clinica {width: 100%;display: inline-block; padding: 0.5%;margin: 0.5%;border:1px solid #373736;vertical-align: top;}
.box_clinica figure {float: left;}
.box_clinica img {padding: 0;}
.box_clinica p {float: right; width: 65%; line-height: 1.3em; padding-top: 5%; color:#e96e4a;}

.btn_clinica {font-size: 25px;color: #fff;background-color: #e96e4a;padding: 1%;display: inline-block;cursor: pointer;width: 100%;}

/*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************VIEWPORT MENOR 200PX****************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************/
@media screen and (min-width: 200px) and (max-width: 639px){

#clinica {padding-top: 20%;}
#clinica img {float: none;width: 100%; padding: 3% 0;}
#clinicas li { width: 95%; }
.clinica_desc p {font-size: 15px;}
.box_clinica figure { float: none; }
.box_clinica p {float: none;width: 100%; text-align: center;padding-top: 0; padding-bottom: 5%;}

}


/*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************VIEWPORT MENOR 640PX****************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************/



@media screen and (min-width: 640px) and (max-width: 979px){

#clinica {padding-top: 10%;}	
.box_clinica figure { float: none; }
.box_clinica p {float: none;width: 100%; text-align: center;padding-top: 0; padding-bottom: 5%;}	

}


/*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************VIEWPORT 980PX**********************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************/



@media screen and (min-width: 980px) and (max-width: 1199px){


	


}


/*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************VIEWPORT 1200PX**********************************************************************
*********************************************************************************************************
*********************************************************************************************************
*********************************************************************************************************/

@media screen and (min-width: 1200px){
  


}


/* GALERÍA OCULTA (lightbox)
------------------------------------------*/

.whiteTrans, .wrapBigGallery, .btnCloseLightbox {position: fixed; display: none;}
.whiteTrans, .wrapBigGallery {top:0; left:0; right:0; bottom:0; margin:auto;}
.whiteTrans {width:100%; height:100%;z-index: 9999999; border:1px solid #333; background: rgba(0,0,0,.95);}
.wrapBigGallery {height:80%; width:60%;z-index: 999999999;}
.btnCloseLightbox {right:1.5%; top:2%; background: #fff; padding:5px 9px; color:#000;}

.wrapBigGallery {font-size:0;}
.wrapBigGallery > * {display: inline-block;vertical-align: middle;}
.wrapBigGallery > section {height:auto; width:80%; overflow:hidden; padding-top: 7.5%; text-align:center; }
.wrapBigGallery > section figure {width:100%; height:100%; position:relative;}
.wrapBigGallery figure img {height:100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.wrapBigGallery div {height:80px; background-repeat: no-repeat; background-position: top center;}
.wrapBigGallery > div {width:10%;}
.wrapBigGallery div > div {left:0; top:0; width:100%;}
.izqda {background-image:url(../images/comun/para-izqda-trans.png);}
.palaIzqda {background-image:url(../images/comun/para-izqda.png);}
.dcha {background-image:url(../images/comun/para-dcha-trans.png);}
.palaDcha {background-image:url(../images/comun/para-dcha.png);}

.palaIzqda, .palaDcha, /*.whiteTrans,*/ .btnCloseLightbox, .rowGaleriaIndex figure img {cursor:pointer;}

.palaIzqda, .palaDcha, .izqda, .dcha{ /*visibility:hidden; opacity:0;*/ }

@media screen and (min-width: 200px) and (max-width: 640px) {
	.wrapBigGallery { width:96%; }
	.wrapBigGallery > section { width:84%;  padding-top: 7.5%; }
	.wrapBigGallery figure img { width:96% !important; height:auto !important; }
	.wrapBigGallery .izqda{ width:8%; }
	.wrapBigGallery .dcha{ width:8%; }
	.wrapBigGallery #imgEnCaja{ position:relative; overflow:hidden; }
	.wrapBigGallery #imgEnCaja img{ width: 90%; }
}

@media screen and (min-width: 640px) and (max-width: 980px) {
	.wrapBigGallery { width:96%; }
	.wrapBigGallery > section { width:90%; padding-top: 7.5%; }
	.wrapBigGallery figure img { width:96% !important; height:auto !important; }
	.wrapBigGallery .izqda{ width:5%; }
	.wrapBigGallery .dcha{ width:5%; }
}

@media screen and (min-width: 980px) {
	
}


/* GALERÍA OCULTA (lightbox) --- 2
------------------------------------------*/

.whiteTrans2, .wrapBigGallery2, .btnCloseLightbox2 {position: fixed; display: none;}
.whiteTrans2, .wrapBigGallery2 {top:0; left:0; right:0; bottom:0; margin:auto;}
.whiteTrans2 {width:100%; height:100%;z-index: 9999999; border:1px solid #333; background: rgba(0,0,0,.95);}
.wrapBigGallery2 {height:80%; width:60%;z-index: 999999999;}
.btnCloseLightbox2 {right:1.5%; top:2%; background: #fff; padding:5px 9px; color:#000;}

.wrapBigGallery2 {font-size:0;}
.wrapBigGallery2 > * {display: inline-block;vertical-align: middle;}
.wrapBigGallery2 > section {height:auto; width:80%; overflow:hidden; padding-top: 7.5%; text-align:center; }
.wrapBigGallery2 > section figure {width:100%; height:100%; position:relative;}
.wrapBigGallery2 figure img {height:100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
.wrapBigGallery2 div {height:80px; background-repeat: no-repeat; background-position: top center;}
.wrapBigGallery2 > div {width:10%;}
.wrapBigGallery2 div > div {left:0; top:0; width:100%;}
.izqda2 {background-image:url(../images/comun/para-izqda-trans.png);}
.palaIzqda2 {background-image:url(../images/comun/para-izqda.png);}
.dcha2 {background-image:url(../images/comun/para-dcha-trans.png);}
.palaDcha2 {background-image:url(../images/comun/para-dcha.png);}

.palaIzqda2, .palaDcha2, /*.whiteTrans,*/ .btnCloseLightbox2, .rowGaleriaIndex2 figure img {cursor:pointer;}

.palaIzqda2, .palaDcha2, .izqda2, .dcha2 { /*visibility:hidden; opacity:0;*/ }

@media screen and (min-width: 200px) and (max-width: 640px) {
	.wrapBigGallery2 { width:96%; }
	.wrapBigGallery2 > section { width:84%;  padding-top: 7.5%; }
	.wrapBigGallery2 figure img { width:96% !important; height:auto !important; }
	.wrapBigGallery2 .izqda2{ width:8%; }
	.wrapBigGallery2 .dcha2{ width:8%; }
	.wrapBigGallery2 #imgEnCaja2{ position:relative; overflow:hidden; }
	.wrapBigGallery2 #imgEnCaja2 img{ width: 90%; }
}

@media screen and (min-width: 640px) and (max-width: 980px) {
	.wrapBigGallery2 { width:96%; }
	.wrapBigGallery2 > section { width:90%; padding-top: 7.5%; }
	.wrapBigGallery2 figure img { width:96% !important; height:auto !important; }
	.wrapBigGallery2 .izqda2{ width:5%; }
	.wrapBigGallery2 .dcha2{ width:5%; }
}

@media screen and (min-width: 980px) {
	
}