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

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


        /*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /*jssor slider bullet skin 032 css*/
        .jssorb032 {position:absolute;}
        .jssorb032 .i {position:absolute;cursor:pointer;}
        .jssorb032 .i .b {fill:#fff;fill-opacity:0.7;stroke:#000;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.25;}
        .jssorb032 .i:hover .b {fill:#000;fill-opacity:.6;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .iav .b {fill:#000;fill-opacity:1;stroke:#fff;stroke-opacity:.35;}
        .jssorb032 .i.idn {opacity:.3;}
        
        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#fff;stroke-width:360;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}
 

/*MENU RESPONSIVO TRATAMIENTOS*/
.topnav {
  overflow: hidden;
  background-color: rgba(101, 99, 99, 0.6);
}
.topnav a {
  float: left;
    color: #fff;
  text-align: center;
  padding: 0px 15px;
  text-decoration: none;
  font-size:1.2em;
  font-weight:700;
  line-height: 90px;
}

.active {
  display:none;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 19px;    
  border: none;
  outline: none;
  color: #fff;
  padding: 0px 15px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-weight:700;
  line-height: 90px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #666;
  min-width: 160px;
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #00b0ae;
  padding: 0 10px!important;
  text-decoration: none;
  display: block;
  text-align: left;
  line-height:50px;
  font-size: 16px;
  border-top: 1px solid hsla(0,0%,100%,.1);
}

.topnav a:hover, .dropdown:hover .dropbtn {
  /*background-color: #555;*/
  color: #00BEB7;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}


@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
/*NO TOPE CON MENU FIJO*/
.ancla:before {       
  display: block;       
  content: " "      
  margin-top: -100px;       
  height: 120px;       
  visibility: hidden; 
} 
body{
width:100%;
height:100%;
padding: 0; 
margin: 0;
overflow-x: hidden;
font-family: 'Quicksand', cursive;
background:url(../img/pattern.png) repeat;
}
#borde{
background:#00BEB7;
height:5px;
width: 100%;
display: block;
float: left;
position: relative;
z-index:1000;
}

/*-----------MARCA--------------*/
#marca{
width:210px;
height: 70px;
top:20px;
left:10%;
display:block;
float: left;
position: relative;
z-index: 999999;
}

/*MARCA TRATAMIENTOS*/
#marca_1{
width:210px;
height: 90px;
position: relative;
display:inline-block;
float:left;
padding-left:10%;
padding-right: 3%;
background-color: rgba(101, 99, 99, 0.6);
z-index: 999999;
}
.logo1{
background:url(../img/logo1.png) no-repeat;
width: 70px;
height: 70px;
float: left;
-webkit-animation: spinAround 70s linear infinite;
-moz-animation: spinAround 70s linear infinite;
animation: spinAround 70s linear infinite;
}
.logo2{
background:url(../img/logo2.png) no-repeat;
width: 133px;
height: 70px;
float: left;
}

/*-----------------menu 1-------------------*/
.cabecera {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color:rgba(101, 99, 99, 0.6);
z-index: 99999;
height:120px;
}
.cabecera .cabecera_inner {
max-width: 69em;
margin: 0 auto;
padding: 0 1.875em;
float: right;
margin-right: 15%;
display:inline-block;
}
#menu_1 ul {
 list-style:none;
 margin:0;
 padding:0;
}

/* items del menu */

#menu_1 ul li {
}

/* enlaces del menu */

#menu_1 ul a {
display:block;
color:#00BEB7;
text-decoration:none;
font-weight:700;
font-size:1.2em;
 padding:10px;
 line-height: 100px;
}

/* items del menu */

#menu_1 ul li {
 position:relative;
 float:left;
 margin:0;
 padding:0;
}

/* efecto al pasar el ratón por los items del menu */

#menu_1 ul li a:hover {
color: #999;
}

/* menu desplegable */

#menu_1 ul ul {
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:#eee;
 padding:0;
}

/* items del menu desplegable */

#menu_1 ul ul li {
 float:none;
 width:150px
}

/* enlaces de los items del menu desplegable */

#menu_1 ul ul a {
 line-height:120%;
 padding:10px 15px;
 font-size: 1em;
}

/* items del menu desplegable al pasar el ratón */

#menu_1 ul li:hover > ul {
 display:block;
}
#menu_1 ul ul li a:hover {
background:#8cd2d2;
}


/*-------------------MENU 2------------------*/
#marca_2{
display:none;
width:210px;
height: 70px;
left:3%;
float: left;
position:fixed;
z-index: 999999;
}
.logo1_a{
background:url(../img/logo1.png) no-repeat;
width: 60px;
height: 60px;
float: left;
-webkit-animation: spinAround 70s linear infinite;
-moz-animation: spinAround 70s linear infinite;
animation: spinAround 70s linear infinite;
o-background-size: cover;
moz-background-size: cover;
background-size: cover;
}
.logo2_a{
background:url(../img/logo2.png) no-repeat;
width: 113px;
height: 60px;
display: block;
float: left;
o-background-size: cover;
moz-background-size: cover;
background-size: cover;
}

.menu_bar {
display:none;

}

.menu_2 nav{
width:100%;
height:100%;
}
.menu_2{
display:none;
list-style: none;
position: fixed;
float: left;
left: 0px;
width: 100%;
clear:both;
z-index:9999;
}

.menu_2 li{
margin: 0;
text-align:left;
font-family: 'PoiretOne-Regular', cursive;
font-weight:900;
font-size:1.4em;
text-decoration:none;
line-height:1.8em;
list-style:none;
padding-left: 30px;
}
.menu_2 li a{
color: #fff;
text-decoration:none;  
cursor: pointer;
}
.menu_2 a:hover{  
color:#00BEB7;/*#f36f91*/
cursor: pointer;
}
.menu_2 a:focus{
color:#68377B;/*#3EB5B0*/
}
.menu_2 li ul {
    display: none;
}
/*Make dropdown links vertical*/
.menu_2 li ul li {
    display: block;
    float: none;
}
/*Prevent text wrapping*/
.menu_2 li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}
/*Display the dropdown on hover*/
.menu_2 ul li a:hover + .hidden, .hidden:hover {
    display: block;
}
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    .menu_2 ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
   .menu_2 li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    .menu_2 ul li, .menu_2 li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    }
/*-------------SEPARADOR----------------------*/
#grafica{
width:100%;
height:100px;
margin: auto;
background:url(../img/graficabn.png) repeat-x;
opacity:.5;
display:block;
float:left;
background-size: contain;
}
#grafica_2{
width:100%;
height:100px;
}

/*TITULOS SECCIONES*/
#titulos{
width:100%;
height:100px;
margin: auto;
display:block;
float:left;
}
#titulos h1{
font-family: 'Quicksand';
font-size:60px;
color:#00BEB7;
text-align:center;
font-weight:600;
}
h2{
font-family: 'Quicksand', cursive;
font-size:20px;
color:#333;
text-align:center;
font-weight:600;}

h3{
font-family: 'Quicksand', cursive;
font-size:24px;
color:#00B0AE;
text-align:center;
font-weight:600;}

h4{
font-family: 'Quicksand', cursive;
font-size:18px;
color:#00B0AE;
text-align:left;
font-weight:600;
}
/*CONTENIDOS*/
#contenidos{
width:100%;
color:#CCC;
height:auto;
margin: auto;
display:block;
position: relative;
float: left;
}
#contenidos a{
text-decoration:none;
color:#00B0AE;}

#contenidos > section{
font-family: 'Quicksand', sans-serif;
width:70%;
height:auto;
margin: auto;
display:block;
}
#contenidos p{
font-family: 'Quicksand', sans-serif;
font-size:17px;
color:#999;
text-align: justify;

}

#contenidos  ul li {
 font-family: 'Quicksand', sans-serif;
 font-size: 17px;
 color: #999;
 text-align: justify;
 margin-left: 25px;
}
.marco_staff{
width: 80%;
height: auto;
margin: auto;
padding: 5% 0 10% 0;
}

.marco {
width:80%;
height: auto;
margin: auto;
padding: 5% 0 ;
}
.texto {
margin-top:20px;
}
.texto p {
text-align: center !important;
}
.texto_descriptivo{
padding: 0 10px 0 20px;
}

.texto_descriptivo p{
font-family: 'Muli-Light', sans-serif;
font-size:14px !important;
color:#fff;
line-height: 1.4em !important;
text-align: center!important;
}
.cuadrado_slide{
width: 100%;
display:inline-block;
/*float:left;*/
margin:auto;
/*margin-bottom:100px;*/
}

.cuadrado1{
width:100%;
display:inline-block;
float: left;
margin:auto;

}
.cuadrado1 p{
text-align:center !important;}

.cuadrado2{
width: 90%;
display:block;
/*float:left;*/
margin:auto;
margin-bottom:100px;
}

.cuadrado{
width: 33.3%;
height: 450px;
display: inline-block;
float:left;
margin:auto;
}
.cuadrado img{
border-radius: 200px;
border:#00BEB7 solid 2px;
box-shadow: #86818166 3px 3px 10px;
width: 60%;
height:auto;
}
 

.cuadrado5{
/*background:url(../img/Maria-Paz-Alamo-Malebran.png) no-repeat;
background-size:contain;*/
}
.cuadrado6{
/*background:url(../img/Luz-Gatica-Bahamonde.png)no-repeat;
background-size:contain;*/

}
.cuadrado7{
/*background:url(../img/Dominique-Harz-Fresno.png)no-repeat;
background-size:contain;*/
}
.cuadrado8{
/*background:url(../img/Fernanda-Dowling-Schilling.png)no-repeat;
background-size:contain;*/
}

.centro {
    margin-left: auto;
    margin-right: auto;
    display: block;
}
/*FOOTER*/

/*DISTANCIA ICONOS*/
i{ 
padding-left: 20px;
padding-right: 5px;
}

#navfooter, #navfooter2{
display:block;
position:fixed;
bottom:0;
width:100%;
background: #00BEB7;/*rgba(0,188,181,1)*/
-webkit-box-shadow: 3px -4px 5px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 3px -4px 5px 0px rgba(0,0,0,0.21);
box-shadow: 3px -4px 5px 0px rgba(0,0,0,0.21);
height:40px;
z-index:999;
font-family: 'Quicksand', sans-serif;
font-size:12px;
color:#fff;
text-align: center;
font-weight:400;
/*line-height: 30px;*/
}
#navfooter a, #navfooter2 a{
font-family: 'Quicksand', sans-serif;
font-size:12px;
text-decoration:none;
color:#FFF;
}
#navfooter2{
display:none;
}
#footer{
width:100%;
background-color:rgba(145,185,185,1);
-webkit-box-shadow: 3px -4px 5px 0px rgba(0,0,0,0.21);
-moz-box-shadow: 3px -4px 5px 0px rgba(0,0,0,0.21);
box-shadow: 3px -4px 5px 0px rgba(0,0,0,0.21);
height: auto;
margin: auto;
display:block;
position: relative;
float: left;

}
#footer >section{
width:70%;
margin: auto;
padding:50px;
}

#footer p{
font-family: 'Quicksand', sans-serif;
font-size:16px;
color:#fff;
text-align: center;
font-weight:400;
/*line-height: 30px;*/
}
#footer a{
font-family: 'Quicksand', sans-serif;
font-size:16px;
text-decoration:none;
font-weight:400;
color:#FFF;
}
/*MAPA*/
.mapa{
width:100%;
height:736px;
background: url(../img/mapa_.jpg) no-repeat center center;
padding: 0; 
margin: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow-x: hidden;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color:#8DB4B3;
  font-family: 'Quicksand', sans-serif;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 30px;
}

#myBtn:hover {
  background-color: #555;
}
#myBtn i {
padding: 0;
}
/*EFECTO MARCA*/
@-webkit-keyframes spinAround {
	from {
		-webkit-transform: rotate(0deg)
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes spinAround {
	from {
		-moz-transform: rotate(0deg)
	}
	to {
		-moz-transform: rotate(360deg);
	}
}
@keyframes spinAround {
	from {
		transform: rotate(0deg)
	}
	to {
		transform: rotate(360deg);
	}
}
/*ESPECIALIDADES*/
.marco_especialidades {
width:100%;
height: auto;
margin-top: 5%;
display:block;
float:left;
background:#00BEB7CC;
}
.marco_especialidades a {
color: #FFF !important;

}
.uno{
background:url(../img/odontopediatria.jpg);
background-size:cover;
}
.uno:hover{
background:url(../img/odontopediatria.jpg);
background-size:cover;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}
.dos{
background:url(../img/ortodoncia.jpg);
background-size:cover;

}
.dos:hover{
background:url(../img/ortodoncia.jpg);
background-size:cover;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}
.tres{
background:url(../img/periodoncia.jpg);
background-size:cover;

}
.tres:hover{
background:url(../img/periodoncia.jpg);
background-size:cover;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}

.cuatro{
background:url(../img/endodoncia.jpg);
background-size:cover;

}
.cuatro:hover{
background:url(../img/endodoncia.jpg);
background-size:cover;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}
.cinco{
background:url(../img/rehabilitacion_oral.jpg);
background-size:cover;

}
.cinco:hover{
background:url(../img/rehabilitacion_oral.jpg);
background-size:cover;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}
.seis{
background:url(../img/procedimientos_esteticos.jpg);
background-size:cover;

}
.seis:hover{
background:url(../img/procedimientos_esteticos.jpg);
background-size:cover;
-webkit-transform: scale(0.75);
-ms-transform: scale(0.75);
transform: scale(0.75);
}


.uno, .dos, .tres, .cuatro, .cinco, .seis {
width:33.15%;
height:300px;
display:table;
float:left;
background-color: #00BEB7;
color: #fff;
transition: all 500ms ease-in-out;
margin-left: 1px;
margin-bottom: 1px;
}
.texto_2{
display: table-cell;
vertical-align: middle;
text-align:center;
}
.parrafo{
margin:10%;
font-size:28px;
}
/*-------------------FORMULARIO DE CONTACTO-----------------------*/

label {
display:block;
margin-top:20px;
letter-spacing:1px;
}
.formulario {
margin: auto;
height: 700px;
width: 70%;
}
input, textarea {
width:95%;
height:30px;
background:rgba(0, 0, 0, 0.1);
border: 1px solid #c0d7d8;
padding:10px 10px 10px 10px;
font-family: 'Open Sans Condensed', sans-serif;
font-size:16px;
}
input:hover{
background-color:#8DB4B3;
box-shadow:0px 0px 6px #ccc;
}
input[type=checkbox]{
width:10%;
margin:auto;
height:20px;
background:none;
}
input[type=checkbox]:hover{
box-shadow: 0 0 0 #fff;
}

input[type=checkbox]:checked{
border-left-color:#06F;
border-right-color:#06F;
}

textarea:hover{
background-color:#8DB4B3;
width:100%;
box-shadow:0px 0px 6px #000;
}

.transition{
  -webkit-transition: background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
  -moz-transition:background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
  -o-transition: background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
  -ms-transition:background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
  transition: background-color 2s ease-out, width 1s ease, box-shadow 1s linear;
} 
textarea {
height:150px;
}
#submit {
Background-color:#8DB4B3;
width:25%;
height:40px;
border:none;
margin-top:15px;
float: left;
cursor:pointer;
color: #fff;
}
label required{
border: #FF00FF 1px solid;
}
/*---------------------especialidades--------------------*/

.prof{
width:100%;
height: auto;
display:block;
padding-top:70px;
}
.prof_centro{
width: 66.6%;
margin:auto;

}
.cuadro {
width: 33.3%;
height: auto;
margin: auto;
}
.cuadro img{
border-radius: 200px;
border:#00BEB7 solid 2px;
box-shadow: #86818166 3px 3px 10px;
width: 50%;
height:auto;
}
.cuadro_2{
width: 49.6%;
height:auto;
margin: auto;
display:inline-block;
}
.cuadro_2 img{
border-radius: 200px;
border:#00BEB7 solid 2px;
box-shadow: #86818166 3px 3px 10px;
width: 50%;
height:auto;
}
.play {
display: inline-block;
width: 25px;
height: 25px;
background: url(../img/next.png) no-repeat center center;
background-size: cover;
}
.insta{
width: 25px;
height: 25px;
background-image:url(../img/instagram-logo.png);
background-size:cover;
display:inline-block;
vertical-align: middle;
}

/*--------------RESPONSIVE-------------------------*/

@media screen and (max-width:1280px){
.uno, .dos, .tres, .cuatro, .cinco, .seis {
width:49.8%;
}
.cabecera .cabecera_inner {
margin-right: 5%;
}
}
@media screen and (max-width: 1200px) {
#grafica_2 {
height: 30px;
}
.active{
display:block;}
.iconlogo1{
display:block !important;}
#marca_1{
display:none !important;
}
.topnav a{
line-height:55px;
}
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative; line-height:40px;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
	  }
	  
.topnav.responsive a:hover {
color: #00b0ae !important;
  }
  .topnav.responsive a {
    float: none;
    display: block !important;
    text-align: left;
	line-height:50px;
	border-top: 1px solid hsla(0,0%,100%,.1);
	color:#FFF !important;
	background-color: rgba(146, 142, 142, 0.9);
  }
  .topnav.responsive .dropdown {float: none; line-height:20px;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
  background-color: rgba(146, 142, 142, 0.9);
    display: block;
    width: 100%;
    text-align: left;
	line-height:50px;
	color:#FFF;
	border-top: 1px solid hsla(0,0%,100%,.1);
  }
   .topnav.responsive .dropdown .dropbtn:hover{
  color:#00b0ae !important;
}
#marca{
left:5%;}
.cabecera .cabecera_inner{
margin-right:5%;}

.cabecera{display:none;}
#marca_2{
display:block!important;
}
.menu_bar {
display:block!important;
position:fixed;
width:100%;
z-index:9999;
}

.menu_bar .bt-menu {
height: 70px;
display:block;
padding:10px;
line-height: 2.3em;
background:rgba(101, 99, 99, 0.6);
color:#00BEB7;
text-decoration:none;
font-size:20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;

}

.menu_bar i {
float:right;
font-size:30px;
line-height: 1.8em;

}
.menu_2{
display:block!important;
width:100%;
left:-100%;
height:auto;
background:rgba(146, 142, 142, 0.9);
position:fixed;
top: 54px;
z-index:99999;
}
ul.menu_2{
padding-left:0;
}

ul.menu_2 li {
float:none;
display: block;
border-top: 1px solid hsla(0,0%,100%,.1);
}

}	
@media screen and (max-width:1024px){
.cuadrado{
width:50%;
}
.cuadro_2 {
width: 48%;
}
}

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

}
@media screen and (max-width:800px){
.cuadrado{
width:100%;
height: auto;
padding-bottom: 5%;
}
.cuadrado img{
width:50%;
}

.formulario{
width:100%;
}
.prof {
width: 60%;
margin:auto;
}
.cuadro {
width: 100%;
}
.cuadro_2 {
width: 100%;
padding-bottom:50px;
}
.prof_centro {
width: 100%;
}
}
@media screen and (max-width:640px){
.uno, .dos, .tres, .cuatro, .cinco, .seis {
width:99.9%;
height:250px;
}}
@media screen and (max-width:600px){
.marco{
display:block;
margin:auto;
}
#navfooter2{
display:block;
}
.mapa{
width:100%;
height:600px;
}
}
@media screen and (max-width:480px){
#titulos h1 {
font-size: 40px;}

#submit {
width: 50%;
}
}