@font-face {
    font-family: 'nexaheavy';
    src: url('fuentes/Nexa-Heavy-webfont.eot');
    src: url('fuentes/Nexa-Heavy-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/Nexa-Heavy-webfont.woff2') format('woff2'),
         url('fuentes/Nexa-Heavy-webfont.woff') format('woff'),
         url('fuentes/Nexa-Heavy-webfont.ttf') format('truetype'),
         url('fuentes/Nexa-Heavy-webfont.svg#nexa_heavyregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexabold';
    src: url('fuentes/Nexa-Bold-webfont.eot');
    src: url('fuentes/Nexa-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/Nexa-Bold-webfont.woff2') format('woff2'),
         url('fuentes/Nexa-Bold-webfont.woff') format('woff'),
         url('fuentes/Nexa-Bold-webfont.ttf') format('truetype'),
         url('fuentes/Nexa-Bold-webfont.svg#nexa_boldregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexabook';
    src: url('fuentes/Nexa-Book-webfont.eot');
    src: url('fuentes/Nexa-Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/Nexa-Book-webfont.woff2') format('woff2'),
         url('fuentes/Nexa-Book-webfont.woff') format('woff'),
         url('fuentes/Nexa-Book-webfont.ttf') format('truetype'),
         url('fuentes/Nexa-Book-webfont.svg#nexa_bookregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexaregular';
    src: url('fuentes/Nexa-Regular-webfont.eot');
    src: url('fuentes/Nexa-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/Nexa-Regular-webfont.woff2') format('woff2'),
         url('fuentes/Nexa-Regular-webfont.woff') format('woff'),
         url('fuentes/Nexa-Regular-webfont.ttf') format('truetype'),
         url('fuentes/Nexa-Regular-webfont.svg#nexa_regularregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexalight';
    src: url('fuentes/Nexa-Light-webfont.eot');
    src: url('fuentes/Nexa-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/Nexa-Light-webfont.woff2') format('woff2'),
         url('fuentes/Nexa-Light-webfont.woff') format('woff'),
         url('fuentes/Nexa-Light-webfont.ttf') format('truetype'),
         url('fuentes/Nexa-Light-webfont.svg#nexa_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nexathin';
    src: url('fuentes/Nexa-Thin-webfont.eot');
    src: url('fuentes/Nexa-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fuentes/Nexa-Thin-webfont.woff2') format('woff2'),
         url('fuentes/Nexa-Thin-webfont.woff') format('woff'),
         url('fuentes/Nexa-Thin-webfont.ttf') format('truetype'),
         url('fuentes/Nexa-Thin-webfont.svg#nexa_thinregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*====ICONOS====*/

  @font-face {
    font-family: 'iconos';
    src: url('fuentes/iconos/iconos.eot');
    src: url('fuentes/iconos/iconos.eot') format('embedded-opentype'),
         url('fuentes/iconos/iconos.woff') format('woff'),
         url('fuentes/iconos/iconos.ttf') format('truetype'),
         url('fuentes/iconos/iconos.svg') format('svg');
    font-weight: normal;
    font-style: normal;
  }


/*====GLOBAL====*/

* {
  margin: 0 auto;
  padding: 0;
  font-family: nexaregular, Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: rgba(100,100,100,1);
  text-decoration: none;
  list-style: none;
}

html {
  scroll-behavior: smooth;
}

/*====CABECERA====*/

header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(255,255,255,1);
  z-index: 5;
}

#logo {
  float: left;
  margin: 10px 0 10px 3%;
  height: 50px;
}

.selectores ul {
  float: right;
  margin: 25px 3% 0 0;
}

.selectores li {
  padding-left: 20px;
  display: inline-block;
}

.selectores a {
  color: rgba(220,220,220,1);
}

.seleccion {
  color: rgba(170,170,170,1) !important;
}

#llamar {
  float: right;
  margin: 23px 3% 0 0;
  cursor: default;
}

#llamar span {
  font-family: nexaheavy, Arial, Helvetica, sans-serif;
  color: rgba(167,220,222,1);
}

#llamar img {
  position: relative;
  top: 2px;
  left: -8px;
}

.hamburger {
  display: none;
}

@media screen and (max-width: 720px) {
  .selectores {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255,255,255,1);
    z-index: 5;
    height: 40px;
    border-bottom: 1px solid rgba(167,220,222,1);
  }

  header {
    top: 40px;
    box-shadow: 0px 3px 3px rgba(0,0,0,.3);
  }

  .selectores ul {
    margin: 12px 3% 0 0;
  }

  #llamar {
    margin: 10px 3% 0 0;
  }

  .hamburger {
    float: right;
    display: block;
    width: 20px;
    position: relative;
    top: 25px;
  }
}

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

  #llamar span {
    display: none;
  }
}


/*====NAVEGADOR====*/

nav ul {
  position: fixed;
  top: 70px;
  background: rgba(255,255,255,.9);
  border-top: 1px solid rgba(167,220,222,1);
  box-shadow: 0px 3px 3px rgba(0,0,0,.3);
  width: 100%;
  font-size: 1.1em;
  list-style-type: none;
  text-align: center;
  z-index: 3;
}

nav li {
  display: inline-block;
  padding: 0 13px 0 13px;
}

nav a {
  display: block;
  text-decoration: none;
  padding: 6px 2px 10px 2px;
  font-family: nexalight, Arial, Helvetica, sans-serif;
  color: rgba(170,170,170,1);
  border-top: 4px solid rgba(255,255,255,.0);
}

.visitado, nav a:hover {
  color: rgba(167,220,222,1);
  border-top: 4px solid rgba(167,220,222,1);
}

/* Intervalo de iconos: de "\e800" a "\e807" */

li.icon-clinica > a:before {
  content: "\e806";
  font-family: iconos;
  padding-right: 7px;
  font-size: 1.1em;
  font-weight: bold;
}

li.icon-servicios > a:before {
  content: "\e804";
  font-family: iconos;
  padding-right: 7px;
  font-size: 1.1em;
  font-weight: bold;
}

li.icon-equipo > a:before {
  content: "\e802";
  font-family: iconos;
  padding-right: 8px;
  font-size: 1.1em;
  font-weight: bold;
}

li.icon-contacto > a:before {
  content: "\e800";
  font-family: iconos;
  padding-right: 5px;
  font-size: 1.1em;
  font-weight: bold;
}

@media screen and (max-width: 720px) {
 
  nav {
    display: none;
  }

  nav ul {
    top: 110px;
    border-top: 1px solid rgba(240,240,240,1);
    box-shadow: none;
    box-shadow: 0px 3px 3px rgba(0,0,0,.3);
  }

  nav li {
    display: block;
    text-align: left;
    border-bottom: 1px solid rgba(240,240,240,1);
    padding: 0;
  }

  nav a {
    padding: 10px 0 10px 5%;
    color: rgba(170,170,170,1);
    border-top: none;
    border-right: 4px solid rgba(220,220,220,1);
  }

  .visitado, nav a:hover {
    color: rgba(167,220,222,1);
    border-top: none;
    border-right: 4px solid rgba(167,220,222,1);
  }
}

/*====CUERPO====*/

/*.filtro-slider {
  background: rgba(167,220,222,.6) fixed; 
  position: absolute;
  top: 70px;
  width:100%;
  height:300px;
  z-index: 1;
}

@media screen and (max-width: 720px) {
  .filtro-slider {
    top: 40px !important;
  }
}*/

h2 {
  font-size: 2.2em;
  width: 80%;
  max-width:820px;
  font-family: nexathin, Arial, Helvetica, sans-serif;
  font-weight: normal;
}

.linea-titulo {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: 30px auto;
  width: 80%;
  max-width:820px;
}

p {
  font-size: .9em;
  padding-bottom: 8px;
  width: 80%;
  max-width:820px;
  text-align: justify;
  line-height: 1.5em;
}

h3 {
  font-size: 1.2em;
  padding: 0px 5% 0px 5%;
  max-width:820px;
  font-family: nexabook, Arial, Helvetica, sans-serif;
  margin: 30px auto 15px auto;
  width: 80%;
  text-transform: uppercase;
}

.arrow-top {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  margin: -60px auto 40px auto;
  border-top: 20px solid rgba(230,230,230,1);
}

.arrow-center {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  margin: 0 auto;
  border-top: 20px solid rgba(245,245,245,1);
}

.arrow-bottom {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  margin: 0 auto;
  border-top: 20px solid rgba(35,35,35,1);
}

@media screen and (max-width: 600px) {
  p {
    text-align: left;
  }
}


/*====PIE====*/

footer {
  width: 100%;
  position: relative;
  bottom: 0;
}

.pie-up {
  background: rgba(35,35,35,1);
}

.pie-down {
  background: rgba(30,30,30,1);
}

footer p {
  font-size: .7em;
  padding: 60px 0;
  color: rgba(100,100,100,1);
  text-align: center;
}

footer img {
  width: 100px;
  position: relative;
  left: 50%;
  margin-left: -50px;
  padding: 50px 0;
}

footer a {
  text-align: right;
  display: block;
  padding: 10px 20px;
  font-size: .7em;
  border-top: 1px solid rgba(40,40,40,1);
}


/*====INTRO====*/

#clinica .slider {
  background: url(imagenes/bg-01.jpg) no-repeat fixed center top 70px; 
  position: relative;
  top: 70px;
  width:100%;
  height:300px;
}

#intro {
  background: rgba(245,245,245,1);
  width: 100%;
  border-top: 10px solid rgba(230,230,230,1);
  padding: 60px 0px 60px 0px;
  margin-top: 70px;
}

@media screen and (max-width: 720px) {
  #intro {
    margin-top: 40px;
  }

  #clinica .slider {
    top: 40px !important;
    background: url(imagenes/bg-small-01.jpg) no-repeat fixed center top 40px; 
  }
}


/*====VENTAJAS====*/

.ventajas-movil {
  display: none;
}

.ventajas-desk {
  max-width: 820px;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
  padding: 50px 0 70px 0;
}

.caja-ventajas-desk {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px;
  position: relative;
}

.linea-punteada-desk {
  position: absolute;
  width: 65%;
  top: 48%; 
  left: 50%;
  transform: translate(-50%, -50%);
  height: 1px;
  z-index: -1;
}

.linea-punteada-desk hr, .linea-punteada-movil hr {
  border-style: dashed;
  border-top: 0px;
  color: rgba(200,200,200,1);
  height: 2px;
}

.ventajas-img {
  float: left;
  width: 20%;
  max-width: 245px;
  height: auto;
  margin: 0 6.66%;
  border: solid 1px rgba(200,200,200,1);
  box-sizing: border-box;
  border-radius: 100%; 
  line-height: 0;
  background: rgba(255,255,255,1);
  overflow: hidden;
}

.ventajas-img:hover img {
  transform:scale(1.2,1.2);
}

.ventajas-img img {
  width: 100%;
  transition:1s;
}

.ventajas-text {
  display: inline-block;
  width: 27%;
  height: auto;
  margin: 0 3.16%;
  text-align: center;
  vertical-align: top;
}

.ventajas-text hr {
  width: 15%;
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin: 10px auto 10px auto;
}

.ventajas-desk h4, .ventajas-movil h4 {
  font-family: nexalight, Arial, Helvetica, sans-serif;
  font-size: 1.1em;
  font-weight: normal;
}

.ventajas-desk p, .ventajas-movil p {
  font-size: .8em;
  text-align: center;
  width: 100%;
}

@media screen and (max-width: 720px) {
  
  .ventajas-desk {
    display: none;
  }

  .ventajas-movil {
     width: 100%;
     display: block;
     margin: 0 auto;
     overflow: hidden;
     padding: 75px 0 50px 0;
  }

  .caja-ventajas-movil {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
  }

  .linea-punteada-movil {
    position: absolute;
    width: 100%;
    top: 48%; 
    transform: translateY(-50%);
    height: 1px;
    z-index: -1;
  }

  .pack-img {
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
  }

  .ventajas-img {
    float: none;
    width: 40%;
    max-width: 180px;
    min-width: 140px;
    height: auto;
    border: solid 1px rgba(200,200,200,1);
    box-sizing: border-box;
    border-radius: 100%; 
    line-height: 0;
    background: rgba(255,255,255,1);
    overflow: hidden;
    margin: 0 auto;
  }

  .ventajas-text {
    display: block;
    width: 35%;
    min-width: 150px;
    margin: 0 auto;
    margin-bottom: 30px;
  }

}


/*====TRATAMIENTOS====*/

#servicios .slider {
  background: url(imagenes/bg-02.jpg) no-repeat fixed center top 70px; 
  position: relative;
  top: 70px;
  width:100%;
  height:300px;
}

#tratamientos {
  background: rgba(245,245,245,1);
  width: 100%;
  border-top: 10px solid rgba(230,230,230,1);
  padding: 60px 0px 75px 0px;
  margin-top: 70px;
}

.list-container {
  margin-top: 30px; 
}

.list h3, .hide {
  padding: 12px 20px;
  box-sizing: border-box;
}
.list h3 {
  background: rgba(240,240,240,1);
  margin: 0px auto 12px auto;
  cursor: pointer;
}

.list p {
  margin: 0px auto 20px auto; 
}

@media screen and (max-width: 720px) {
  #tratamientos {
    margin-top: 40px;
  }

  #servicios .slider {
    top: 40px !important;
    background: url(imagenes/bg-small-02.jpg) no-repeat fixed center top 40px; 
  }
}

/*====EQUIPO====*/

#equipo .slider {
  background: url(imagenes/bg-03.jpg) no-repeat fixed center top 70px; 
  position: relative;
  top: 70px;
  width:100%;
  height:300px;
}

#personal {
  background: rgba(245,245,245,1);
  width: 100%;
  border-top: 10px solid rgba(230,230,230,1);
  padding: 60px 0px 60px 0px;
  margin-top: 70px;
}

@media screen and (max-width: 720px) {
  #personal {
    margin-top: 40px;
  }

  #equipo .slider {
    top: 40px !important;
    background: url(imagenes/bg-small-03.jpg) no-repeat fixed center top 40px; 
  }
}

/*----GALERIA----*/

.galeria {
  margin: auto auto;
  padding: 50px 0 70px 0;
  width: 80%;
  max-width: 820px;
  overflow: hidden;
}

.galeria .medico {
  background: rgba(167, 220, 222, 1);
  text-decoration: none;
  text-align: center;
  width: 30%;
  margin: 1.66%;
  display: block;
  position: relative;
  line-height: 0;
  float: left;
  color: #fff;
  overflow: hidden;
}

.galeria .medico:hover img{
  opacity: 0.2;
  transform:scale(1.2,1.2);
}

.galeria .medico:hover div{
  opacity: 1;
}

.galeria .medico img{
  transition:1s;
  width: 100%;
}

.galeria .medico div{
  opacity: 0;
  transition:1s;
  z-index: 1;
  text-align: center; 
}

.galeria .medico div h4{
  display: block;
  width: 100%;
  position: absolute;
  margin-top: -75%;
  font-size: 1.2em;
  line-height: 1.3em;
  text-transform: uppercase;
  padding: 10%;
  font-family: nexabold, arial, sans-serif;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  transform: translateY(-100px);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.galeria .medico div p{
  display: block;
  width: 100%;
  position: absolute;
  margin-top: -50%;
  padding: 10%;
  font-family: nexabook, arial, sans-serif;
  line-height: 1.1em;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  transform: translateY(100px);
  opacity: 0;
  transition: all .2s linear;
}

.galeria .medico:hover h4, .galeria .medico:hover p {
  opacity: 1;
  transform: translateY(0px);
}

@media screen and (max-width: 720px) {
  .galeria .medico {
    width: 45%;
    margin: 2.5%;
  }
}

@media screen and (max-width: 500px) {
  .galeria .medico {
    width: 80%;
    margin: 10%;
  }
}

/*====CONTACTO====*/

#contacto .slider {
  background: url(imagenes/bg-04.jpg) no-repeat fixed center top 70px; 
  position: relative;
  top: 70px;
  width:100%;
  height:300px;
}

#ubicacion {
  background: rgba(245,245,245,1);
  width: 100%;
  border-top: 10px solid rgba(230,230,230,1);
  padding: 60px 0px 60px 0px;
  margin-top: 70px;
}

#caja-ubicacion {
  text-align: center;
  width: 80%;
  max-width: 820px;
}

#ubicacion-izq, #ubicacion-der {
  width: 45%;
  display: inline-block;
  text-align: left;
  vertical-align: top;
}

#ubicacion-izq {
  margin-right: 5%;
}

#ubicacion-der {
  margin-left: 5%;
  padding-top: 4px;
}

#ubicacion-izq p {
  margin: 0 0;
  width: 100%
}

.direccion {
  color: rgba(167, 220, 222, 1);
  padding-left: 35px;
  margin-top: 30px;
  display: inline-block;
}

.dir {
  font-family: nexabold, Arial, Helvetica, sans-serif;
  color: rgba(167,220,222,1);
  font-size: 1.1em;
  line-height: 1.4em;
  text-align: left;
  padding: 0;
}

.direccion img {
  position: absolute;
  margin-left: -35px;
  margin-top: 5px;
}

.tel {
  font-family: nexathin, Arial, Helvetica, sans-serif;
  font-size: 1.9em;
  color: rgba(167,220,222,1);
  text-align: left;
  padding-top: 5px;
}

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

  #ubicacion-izq, #ubicacion-der {
    width: 100%;
    display: inline-block;
    text-align: left;
    vertical-align: top;
  }

  #ubicacion-izq {
    margin-right: 0;
  }

  #ubicacion-der {
    margin-left: 0;
    padding-top: 30px;
  }

  .direccion-uno {
    margin-right: 20px;
  }

  #ubicacion {
    margin-top: 40px;
  }

  #contacto .slider {
    top: 40px !important;
    background: url(imagenes/bg-small-04.jpg) no-repeat fixed center top 40px; 
  }
}

/*====FORM====*/

.contact_form ul {
  width: 100%;
  list-style-type:none;
}

.contact_form li{
  padding-bottom: 15px; 
}

.contact_form textarea {
  height: 150px;
}

input[type=text], input[type=email], textarea { 
  font-size: .8em;
  border:1px solid rgba(210,210,210,0);
  border-radius:0px;
  width:92%; 
  max-width: 92%;
  min-width: 92%;
  padding: 4% 4%;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
  position: absolute;
  margin-left: 5px;
  background: #fff;
}

#condiciones-texto {
  font-size: .7em;
  padding: 2px 0 0 35px;
}

#condiciones a {
  text-decoration: underline;
}

button.submit {
  padding: 10px 36px;
  color: rgba(200,200,200,1);
  border: none;
  background-color: rgba(120,120,120,1);
  border-radius: 0px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
  margin-top: 10px;
}

button.submit:hover {
  opacity: .8;
  cursor: pointer; 
}


/*====MAPA====*/

#map-canvas {
  width:100%;
  height:400px;
  border-top: 10px solid rgba(230,230,230,1);
  background: rgba(167,220,222,1);
}


/*====LEGAL====*/

#clausulas {
  background: rgba(245,245,245,1);
  width: 100%;
  border-top: 10px solid rgba(230,230,230,1);
  padding: 60px 0px 60px 0px;
}

#clausulas span {
  text-decoration: underline;
}


/*----COOKIES----*/

#barraaceptacion {
  display:none;
  position:fixed;
  bottom:0px;
  width:100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.inner {
    font-size: .75em; 
}

.inner p, .inner a {
  padding:5px;
  text-align:center;
  color: rgba(255, 255, 255, 1);
  max-width: 100%;
}

.ok {
  font-weight: bold;
}


/*====ERROR 404====*/

#error-fondo {
    background: rgba(240,240,240,1);
}

#pagina-error {
  width: 100%;
  height: 100%;
  text-align: center;
}

#pagina-error .centrada {
  width: 100%;
  height: 480px;
  position: absolute;
  top: 50%;
  margin-top: -240px;
}

.img-error {
  width: 30%;
  max-width: 250px;
  min-width: 150px;
  margin: 0 auto;
}

.text-error {
  width: 80%;
  max-width: 700px;
  margin-bottom: 60px;
}

#pagina-error h2 {
  margin-top: 50px;
  text-align: center;
  text-transform: uppercase;
  font-size: 3em;
}

#pagina-error p {
  width: 90%;
  text-align: center;
}

#pagina-error a {
  text-decoration: underline;
  margin: 0 auto;
  font-size: .9em;
}