@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		4;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

/* Mobile Layout: 480px and below. */
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}
.controls { display: none;}
.ver { display: block; width: 100px; border: 2px solid #692771; border-radius: 50px; font-family: 'Lexend', sans-serif; font-weight: 300; padding: 12px 30px; background: #692771; font-size: 20px; color: #fff; transition: 0.5s ease; margin: 5% auto 0; text-align: center;}
.ver:hover { transition: 0.5s ease; color: #692771; background: #fff;  border: 2px solid #fff; font-size: 22px; cursor: pointer;}
header {
	clear: both;
	float: left;
	width: 100%;
	display: block;
}
#header {
	clear: both;
	float: left;
	width: 90%;
	display: block;
    padding: 10% 5% 9%;
    background: #fff;
}
#slide {
	clear: both;
	float: left;
	width: 100%;
	text-align: center;
	display: block;
    z-index: 1;
}
#slide-txt {
    clear: both;
	float: left;
	width: 90%;
	display: block;
    position: absolute;
    margin: 15% 5% 0;
}
#logo {
	clear: both;
	float: left;
	width: 100%;
	text-align:center;
	display: block;
    z-index: 100;
    position: relative;
    margin-bottom: 4%;
}
#menu {
	clear: both;
	float: left;
	width: 100%;
	text-align:center;
	display: block;
    z-index: 100;
    position: relative;
}
#title {
	clear: both;
	float: left;
	width: 100%;
    display: block;
    margin-bottom: 15%;
}
#sec-name {
    clear: both;
	float: left;
	width: 100%;
    display: block;
    text-align: center;
    padding: 10% 0 8%;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,1) 11%, rgba(243,233,250,1) 100%);
}
.serv #title {
    text-align: center;
}
hr { border-top: 2px #a67bb7 solid;  width: 100%; margin-top: 12%; margin-bottom: 8%;}
hr.foot { border-top: 2px #fff solid;  width: 100%; margin: 12% 0 8%;}
hr.name { height: 4px; width: 20%; margin: 0.5% 40% 8%; border-radius: 100px; background: #a67bb7; border: none;}
.tab { display: block;}
.sma { display: block;}
.pant { display: none;}
section {
	clear: both;
	float: left;
    padding: 18% 0 8% 15%;
	width: 85%;
	display: block;
}
section.serv {
	clear: both;
	float: left;
	padding: 14% 15% 15%;
	width: 70%;
	display: block;
}
section.tec {
	clear: both;
	float: left;
	padding: 16% 15% 18% 0;
	width: 85%;
	display: block;
    background: #692771;
}
section.trata {
	clear: both;
	float: left;
	padding: 17% 15% 6%;
	width: 70%;
	display: block;
    background: rgb(249,207,224);
background: linear-gradient(0deg, rgba(249,207,224,1) 0%, rgba(255,255,255,1) 40%);
}
section.trata #title {
    width: 100%;
    margin-right: 0%;
    margin-bottom: 3%;
}
#col1, #col2, #col3 {
    clear: both;
	float: left;
	width: 100%;
    display: block;
}
#ser-1, #ser-2, #ser-3, #ser-4, #ser-5 {
    clear: both;
	float: left;
	width: 80%;
    display: block;
    text-align: center;
    margin: 0 10% 16%;
}
#ser-1 img, #ser-2 img, #ser-3 img, #ser-4 img, #ser-5 img { width: 170px; margin-bottom: 25px; transition: 0.6s ease;}

#col1 img:hover {
    width: 102%;
}
#ver {
    clear: none;
	float: left;
	width: 100%;
    display: block;
    margin-bottom: 5%;
}
#mod1 {
    clear: both;
	float: left;
	width: 85%;
    display: block;
    margin: 0 15% 0 0;
}
#img {
    clear: both;
	float: left;
    display: block;
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-01.jpg");
    width: 100%;
    background-size: 100% auto;
    border-radius: 200px 0 0 200px;
    padding: 35% 0;
    margin: 14% 0 0;
}
#mod2 #title {
    width: 85%;
    margin: 0 0 14% 15%;
}
#mod2 {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    margin-bottom: 15%;
}
#mod2 #img {
	width: 100%;
    clear: both;
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-02.jpg");
    padding: 40% 0;
    background-size: auto 100%;
    background-position: right center;
    border-radius: 0 200px 200px 0;
    border-top: 2px #f5a9c7 solid;
    border-bottom: 2px #f5a9c7 solid;
    border-right: 2px #f5a9c7 solid;
    margin: 0;
}
#mod3 {
    clear: both;
	float: left;
    display: block;
    width: 85%;
    margin-left: 15%;
}

/*SERVICIOS*/
#servicio-1 #ser-1 img, #servicio-2 #ser-1 img { width: 150px; margin-bottom: 15px; transition: 0.6s ease;}
section.subsec-1 {
    clear: both;
	float: left;
    padding: 24% 10% 25%;
	width: 80%;
	display: block;
    text-align: center;
}
section.subsec-2 {
    clear: both;
	float: left;
    padding: 0 10%;
	width: 80%;
	display: block;
}
#servicio-1 {
    clear: both;
	float: left;
    display: block;
	width: 76%;
    border-radius: 50px;
    padding: 0 12% 14%;
}
#servicio-1.proced {
    background-image: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-05.jpg");
    background-size: 120% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 86%;
}
#servicio-2 {
    clear: both;
	float: left;
    display: block;
	width: 100%;
    margin-bottom: 25%;
}
#servicio-1 #ser-1 {
	width: 100%;
    margin: -15% 0 0;
    text-align: center;
}
#servicio-2 #ser-1 {
    clear: none;
	width: 90%;
    margin: -15% 5% 0;
}
#servicio-2 #img {
    clear: both;
	float: left;
    display: block;
    width: 100%;
    padding: 0;
    background: none;
}
#servicio-2 #img img {
    border-radius: 50px;
}

/*TRATAMIENTOS*/
#trata-1, #trata-2, #trata-3, #trata-4, #trata-5, #trata-6 {
    clear: both;
	float: left;
	width: 90%;
    display: block;
    margin: 0 5% 6%;
    text-align: center;
}
#trata-1 #img {
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-06.jpg");
}
#trata-2 #img {
    width: 100%;
    padding: 50% 0;
    margin-bottom: 8%;
    border-radius: 50px;
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-07.jpg");
    background-position: center;
    background-size: 100% auto;
}
#trata-3 #img {
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-08.jpg");
}
#trata-4 #img {
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-08.jpg");
}
#trata-5 #img {
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-10.jpg");
}
#trata-6 #img {
    background: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-11.jpg");
}
#trata-1 #img, #trata-3 #img, #trata-4 #img, #trata-5 #img, #trata-6 #img {
    width: 100%;
    padding: 50% 0;
    margin-bottom: 8%;
    border-radius: 50px;
    background-position: center;
    background-size: auto 100%;
}

/*CONTACTO*/
#servicio-3 {
    clear: both;
	float: left;
    display: block;
    border-radius: 50px;
    padding: 12%;
    border: 2px solid #a67ab7;
    width: 96%;
    padding: 11% 2% 2%;
}
#servicio-3 #col1 {
    border-radius: 50px;
    width: 80%;
    padding: 0 10%;
    margin: 0 0 9%;
}
#servicio-3 #col2 {
    background: #fff2f7;
    border-radius: 40px;
    width: 80%;
    padding: 10%;
}

#copy {
    clear: both;
	float: left;
	width: 100%;
	text-align:center;
}
footer {
	clear: both;
	float: left;
	width: 100%;
	display: block;
    text-align: center;
    margin-top: 60%;
}
footer img {
    width: 85px;
    margin-bottom: 6%;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 581px) {
.gridContainer {
	width: 100%;
}
hr { margin-top: 8%; margin-bottom: 6%;}
hr.foot { border-top: 2px #fff solid;  width: 100%; margin: 5% 0 3%;}
hr.name { height: 5px; width: 10%; margin: 0.5% 45% 8%;}

.sma { display: none;}
.pant { display: block;}
#slide-txt {
	width: 50%;
    margin: 24% 0 0 45%;
    display: block;
    text-align: left;
}
.ver { font-size: 16px; margin: 5% 0 0; padding: 10px 20px;}
.ver:hover { font-size: 18px;}
#header {
	width: 90%;
    margin: 4% 5% 0;
    position: absolute;
    padding: 0;
    background: none;
}
#logo {
	width: 30%;
    position: absolute;
}
#menu {
	width: 73%;
    margin-left: 27%;
    margin-top: 2%;
    text-align: right;
}
#title {
	width: 100%;
    margin-bottom: 10%;
}
#sec-name {
    padding: 25% 0 3%;
}
section {
    padding: 12% 0 0 14%;
    width: 86%;
}
section.serv #title {
    text-align: left;
}
section.serv {
	padding: 15%;
	width: 70%;
}
section.trata {
    padding: 13% 14% 2%;
    width: 72%;
}
section.trata #title {
    width: 100%;
    margin-right: 0%;
    margin-bottom: 3%;
}
section.tec {
    padding: 12% 0 15%;
    width: 100%;
}
#img {
    width: 80%;
    background-size: 100% auto;
    border-radius: 200px 0 0 200px;
    padding: 24% 0;
    margin: 8% 0 0 20%;
}
#col1, #col3 { width: 100%;}
#col2 { clear: none; width: 100%; margin-right: 10%;}
#ser-1 img, #ser-2 img, #ser-3 img, #ser-4 img, #ser-5 img { width: 160px; margin-bottom: 15px; transition: 0.6s ease;}
#ser-1 img:hover, #ser-2 img:hover, #ser-3 img:hover, #ser-4 img:hover, #ser-5 img:hover { width: 175px; transition: 0.6s ease; cursor: pointer;}
    
#ser-1, #ser-3, #ser-5 { width: 45%; margin: 0 10% 9% 0;}
#ser-2, #ser-4 { clear: none; width: 45%; margin: 0;}
   
#mod1 {
	width: 70%;
    margin-bottom: 3%;
}
#mod2 {
	width: 85%;
    margin-bottom: 8%;
}
#mod2 #title {
    width: 72%;
    margin: 0 14% 8%;
}
#mod2 #img {
	width: 100%;
    clear: both;
    padding: 25% 0;
    background-size: 100% auto;
    background-position: right center;
    border-radius: 0 200px 200px 0;
    border-top: 2px #f5a9c7 solid;
    border-bottom: 2px #f5a9c7 solid;
    border-right: 2px #f5a9c7 solid;
    margin: 0;
}
#mod3 {
    width: 72%;
    margin-left: 14%;
}
#ver {
	width: 100%;
    margin-top: 0;
    text-align: left;
    margin-bottom: 5%;
}
    
/*SERVICIOS*/
#servicio-1 #ser-1 img, #servicio-2 #ser-1 img { width: 160px; margin-bottom: 25px; transition: 0.6s ease;}
#servicio-1 #ser-1 img:hover, #servicio-2 #ser-1 img:hover { width: 160px; cursor: auto; transition: 0s ease;}
section.subsec-1 {
    padding: 18% 12% 16%;
	width: 76%;
}
section.subsec-2 {
    padding: 0 12%;
	width: 76%;
}
#servicio-1 {
	width: 76%;
    padding: 0 12% 12%;
    margin-bottom: 12%;
}
#servicio-2 {
	width: 100%;
    padding: 0;
    margin-bottom: 16%;
}
#servicio-1 #ser-1 {
	width: 85%;
    margin: -10% 0 0;
    text-align: left;
}
#servicio-2 #ser-1 {
    clear: none;
	width: 74%;
    margin: -13% 12% 0;
    text-align: left;
}  
#servicio-2 #img {
    width: 100%;
    margin: 0 10% 0 0;
}
#servicio-1.proced {
    background-image: none;
    padding-bottom: 12%;
}

/*TRATAMIENTOS*/
#trata-1, #trata-2, #trata-3, #trata-4, #trata-5 {
    clear: none;
	width: 100%;
    margin: 0 0 10%;
    text-align: left;
}
#trata-6 {
    clear: none;
	width: 100%;
    margin: 0;
    text-align: left;
}
#trata-1 #img, #trata-2 #img {
    width: 100%;
    padding: 35% 0;
    margin: 0 0 5%;
    background-size: 100% auto;
}
#trata-3 #img, #trata-4 #img, #trata-5 #img, #trata-6 #img {
    width: 100%;
    padding: 35% 0;
    margin: 0 0 5%;
    background-size: auto 100%;
}
    
/*CONTACTO*/
#servicio-3 {
	width: 96%;
    padding: 11% 2% 2%;
}
#servicio-3 #col1 {
    width: 80%;
    padding: 0 10%;
    margin: 0 0 9%;
}
#servicio-3 #col2 {
    width: 80%;
    padding: 10%;
}
    
#copy {
	width: 100%;
}
footer {
    margin: 40% 0% 0%;
}
footer img {
    width: 75px;
    margin-bottom: 4%;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 800px) {
.gridContainer {
	width: 100%;
	max-width: 1920px;
	margin: auto;
}
.tab { display: none;}
hr { border-top: 2px #a67bb7 solid;  width: 100%; margin-top: 12%; margin-bottom: 8%;}
#slide-txt { width: 43%;  margin: 20% 0 0 50%;}
.ver { padding: 12px 30px; font-size: 20px; margin: 5% 0 0;}
.ver:hover { font-size: 22px;} 
header {
	width: 100%;
}
#header {
    width: 90%;
    margin: 4% 5% 0;
}
#logo {
	clear: both;
	width: 17%;
}
#menu {
	clear: none;
	width: 73%;
    margin-left: 27%;
    margin-top: 1.5%;
}
#title {
	width: 30%;
    margin-right: 8.6%;
    clear: none;
    margin-bottom: 7%;
}
section.trata #title {
    width: 50%;
    margin-right: 20%;
    
}
#mod2 #title {
    width: 84%;
    margin: 0 0 15% 16%;
}
#ver {
    clear: none;
	width: 30%;
    margin-top: 1.3%;
    text-align: right;
    margin-bottom: 0;
}
#sec-name {
    padding: 20% 0 4%;
}
section {
    padding: 17% 0 13% 8%;
    width: 92%;
}
section.serv {
    padding: 0 8% 8%;
    width: 84%;
}
section.tec {
    padding: 11% 0;
    width: 100%;
}
section.trata {
    padding: 10% 8% 3%;
    width: 84%;
}
section.subsec-1 {
    padding: 15%;
	width: 70%;
}
section.subsec-2 {
    padding: 0 8%;
	width: 84%;
}
#ser-1 img, #ser-2 img, #ser-3 img, #ser-4 img, #ser-5 img { width: 160px; margin-bottom: 15px; transition: 0.6s ease;}
#ser-1 img:hover, #ser-2 img:hover, #ser-3 img:hover, #ser-4 img:hover, #ser-5 img:hover { width: 175px; transition: 0.6s ease; cursor: pointer;}
    
#ser-1, #ser-3, #ser-4 {
	width: 22.66%;
    margin-right: 16%;
    clear: none;
    margin-bottom: 7%;
}
#ser-2, #ser-5 {
	width: 22.66%;
    clear: none;
    margin-bottom: 7%;
    margin-right: 0;
}
/*SERVICIOS*/
#servicio-1 {
	width: 84%;
    padding: 0 8% 9%;
    margin-bottom: 10%;
}
#servicio-2 {
	width: 100%;
    padding: 0;
    margin-bottom: 12%;
}
#servicio-1 #ser-1 {
	width: 50%;
    margin: -8% 0 0;
}
#servicio-2 #ser-1 {
	width: 45%;
    margin: 0;
    text-align: left;
}  
#servicio-2 #img {
    width: 45%;
    margin: 0 10% 0 0;
}
#servicio-1.proced {
    background-image: url("../img/lesa-ginecologia-laser-co2-estetica-salud-femenina-hifu-vaginoplastia-rejuvenecimiento-vaginal-vacunacion-vph-lesiones-genitales-consulta-img-05.jpg");
    background-size: auto 90%;
    background-position: center right;
    padding-bottom: 9%;
}
    
/*TRATAMIENTOS*/
#trata-1, #trata-2 {
    clear: none;
	width: 28.66%;
    margin: 0 7% 8% 0;
}
#trata-3 {
    clear: none;
	width: 28.66%;
    margin-bottom: 8%;
}
#trata-4, #trata-5 {
    clear: both;
	width: 28.66%;
    margin: 0 7% 0 0;
}
#trata-5 {
    clear: none;
	width: 28.66%;
    margin: 0 7% 0 0;
}
#trata-6 {
    clear: none;
	width: 28.66%;
    margin-bottom: 0;
}
#trata-1 #img, #trata-3 #img, #trata-4 #img, #trata-5 #img, #trata-6 #img {
    width: 100%;
    padding: 50% 0;
    margin-bottom: 10%;
    background-size: auto 100%;
}
#trata-2 #img {
    width: 100%;
    padding: 50% 0;
    margin-bottom: 10%;
    background-size: 100% auto;
}
    
/*CONTACTO*/
#servicio-3 {
	width: 98%;
    padding: 1%;
}
#servicio-3 #col1 {
    width: 37%;
    padding: 5%;
    margin: 0 6% 0 0;
}
#servicio-3 #col2 {
    width: 37%;
    margin: 0%;
    padding: 4% 5%;
}
    
#col1 {
    width: 30%;
    margin-right: 5%;
    margin-bottom: 1%;
}
#col2 {
    width: 30%;
    margin-right: 5%;
    margin-bottom: 1%;
    clear: none;
}
#col3 {
    width: 30%;
    margin-bottom: 1%;
    margin-right: 0;
    clear: none;
}
#mod1 {
	width: 42%;
    margin: 0 11% 0 0;
}
#img {
	width: 47%;
    clear: none;
    background-size: 100% auto;
    border-radius: 200px 0 0 200px;
    padding: 18% 0;
    margin: 0;
}
#mod2 {
    width: 50%;
    clear: both;
    margin-bottom: 0;
}
#mod2 #img {
	width: 80%;
    clear: both;
    padding: 25% 0;
    background-size: 100% auto;
    background-position: right center;
    border-radius:0 200px 200px 0;
    border-top: 2px #f5a9c7 solid;
    border-bottom: 2px #f5a9c7 solid;
    border-right: 2px #f5a9c7 solid;
}
#mod3 {
    width: 38%;
    clear: none;
    margin: 5% 0 0 0;
}
footer {
	width: 100%;
    margin: 20% 0% 0%;
}
footer img {
    width: 75px;
    margin-bottom: 3%;
}
}