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

/*active has-sub*/
/* class='has-sub'*/
@font-face {
  font-family: 'flexslider-icon';
  src:url('../fonts/flexslider-icon.eot');
  src:url('../fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'),
    url('../fonts/flexslider-icon.woff') format('woff'),
    url('../fonts/flexslider-icon.ttf') format('truetype'),
    url('../fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}

body { margin:0; padding:0; font-family: 'Ubuntu', sans-serif;}


/*=======================================================
================= INICIO ESTILOS DEL MENU =================
========================================================*/

nav,
nav ul,
nav ul li,
nav ul li a,
nav .menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 2;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
nav ul li{padding: 0px 2%;}
nav ul li a{cursor: pointer;}
nav:after, nav > ul:after {content: "."; display: block; visibility: hidden; line-height: 0; height: 0;}

nav .menu-button {display: none;}

nav {width: auto; line-height: 1;}

.menu-line {display: block;}

nav > ul > li {float: left;}

nav.align-center > ul {font-size: 0;text-align: center;}

nav.align-center > ul > li {display: inline-block;float: none;}

nav.align-center ul ul {text-align: left;}

nav.align-right > ul > li {float: right;}

nav.align-right ul ul {text-align: right;}

nav > ul > li > a {padding: 26px 13px;font-size: 14px;text-decoration: none;text-transform: uppercase;color: #989798;-webkit-transition: color .2s ease;-moz-transition: color .2s ease;-ms-transition: color .2s ease;-o-transition: color .2s ease;transition: color .2s ease;
}
nav > ul > li:hover > a,

nav > ul > li.active > a {color: #2e1863; text-decoration: none; font-weight: 400;}


nav > ul > li.has-sub:hover > a::after {border-color: #989798;}

nav ul ul {position: absolute;left: -9999px;}

nav li:hover > ul {left: auto;}
nav.align-right li:hover > ul {right: 0;}

nav ul ul ul {margin-left: 100%;top: 0;}

nav.align-right ul ul ul {margin-left: 0;margin-right: 100%;
}
nav ul ul li {height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}
nav ul li:hover > ul > li {height: 32px;}

nav ul ul li a {padding: 10px 10px;width: 190px;font-size: 14px;background: #FFF;text-decoration: none;color: #989798;

  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
nav ul ul li:hover > a,
nav ul ul li a:hover {color: #2e1863;text-decoration: none;}

nav ul ul li.has-sub > a::after {position: absolute;top: 13px;right: 10px;width: 4px;height: 4px;border-bottom: 1px solid #DDD;border-right: 1px solid #DDD;content: "";

  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
nav.align-right ul ul li.has-sub > a::after {right: auto;left: 10px;border-bottom: 0;border-right: 0;border-top: 1px solid #DDD;border-left: 1px solid #DDD;}

nav ul ul li.has-sub:hover > a::after {border-color: #FFF;}


/*=======================================================
================= FIN ESTILOS DEL MENU ===================
========================================================*/

/*=======================================================
======================== SLIDER 1 =========================
========================================================*/
.flip-container {
  margin:0 auto;
  text-align: center;
  -webkit-perspective:1200;
  -moz-perspective:1200;
  perspective:1200;
}
.flip-container:hover .creation {
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
}
.creation {
  margin: 0 auto;
  text-align: center;
  width:132px;
  height:132px;
  -webkit-transition:all 0.6s;
  -moz-transition:all 0.6s;
  transition:all 0.6s;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
.front, .back {
  position:absolute;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
}
.back {
  z-index:800;
  -webkit-transform:rotateY(-180deg);
  -moz-transform:rotateY(-180deg);
  transform:rotateY(-180deg);
}

.cont {
  border-radius:50%;
  display:inline-block;
}
.flexslider .slides > li{display: inline-table !important;}
.flex-direction-nav a {margin: 0px;top:16%;}
.flex-control-nav{border-top: 4px solid #5d3e98;
padding-top: 10px;height: auto;}
/*=======================================================
======================== FIN SLIDER 1 =========================
========================================================*/

/*=======================================================
======================== SLIDER 2 =========================
========================================================*/

.slider-container {position: relative;overflow: hidden;width: 100%;margin: 0 auto;}
.slider {position: relative;width: 9999px;}
.slider:before,.slider:after {display: table;content: ' ';}
.slider:after {clear: both;}
.slider div {position: relative;float: left;margin: 0;padding: 0;}
.slider div img {display: block;max-width: 100%;height: auto;}
#next > span,#prev > span {display: block; }
/* Arrows */
#next,#prev {position: absolute;top: 40%;margin-top: -1%;cursor: pointer;

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */
       -o-user-select: none;
}
#prev {left: .1%; background: url(../img/iconos/flacha_izq.png); height: 60px; width:60px;}
#next {right: .1%; background: url(../img/iconos/flacha_der.png); height: 60px; width:60px;}
.caption {position: absolute;bottom: 0;display: block;width: 100%;padding: 0 10px 30px;color: #fff;background: rgba(0, 0, 0, .39);

  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#99000000', endColorstr='#99000000'); /* ie8 */
}
.caption a {display: block;color: #fff;}
.slider-nav {line-height: 30px;position: absolute;bottom: 0;left: 0;width: 100%;height: 30px;margin: 0;padding: 0;text-align: center;
  filter: alpha(opacity=90); /* ie8 */
}
.slider-nav a {display: inline-block;width: 12px;height: 12px;margin: 0 3px; border: 2px solid #fff; border-radius: 50%; background: transparent;

  -webkit-transition: background .5s ease;
     -moz-transition: background .5s ease;
       -o-transition: background .5s ease;
          transition: background .5s ease;

}
.slider-nav .active {width: 12px;height: 12px;background: #fff;}
@media (max-width: 580px) {
  .caption {
    display: none;
  }
}

/*=======================================================
======================== FIN SLIDER 2 =====================
========================================================*/

/*=======================================================
========== INICIO  ESTILOS CIRCULOS DOS GENERALES   ==============
========================================================*/

.ch-grid2{padding: 0px; margin: 0 auto; text-align: center;}
.ch-grid2::after,
.ch-item2::before {
  content: '';
    display: table;
}

.ch-grid2::after {clear: both;width: 100%;text-align: center;}

.ch-grid2 li {width: 220px;height: 220px;display: inline-block;margin: 20px;}

.ch-item2 {width: 100%;height: 100%;border-radius: 4%; position: relative;cursor: default; box-shadow: inset 0 0 0 0px rgba(93, 62, 152, 1), 0 1px 2px rgba(0,0,0,0.6);

  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.ch-imagen-1 {background-image: url(../img/casos_clinicos/Carillas/Carillas.jpg);}
.ch-imagen-2 {background-image: url(../img/casos_clinicos/Carillas_Ceramicas/Carillas_Ceramicas.jpg);}
.ch-imagen-3 {background-image: url(../img/casos_clinicos/Implantes/Implantes.jpg);}
.ch-imagen-4 {background-image: url(../img/casos_clinicos/Periodoncia/Periodoncia.jpg);}
.ch-imagen-5 {background-image: url(../img/casos_clinicos/Rehabilitacion/Rehabilitacion.jpg);}
.ch-imagen-6 {background-image: url(../img/casos_clinicos/Implantes_complejos/Implantes_complejos.jpg);}
.ch-imagen-7 {background-image: url(../img/casos_clinicos/diente_central/diente_central.jpg);}

.ch-info2 {position: absolute;background: rgba(238,237,237, 0.8);width: inherit;height: inherit;border-radius: 4%;opacity: 0;cursor: pointer;

  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;

  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);

  -webkit-backface-visibility: hidden;

}

.ch-info2 h3 {
  color: #5d3e98;text-align: center;letter-spacing: 0px;font-size: 21px;margin: 0 14px;padding: 85px 0 0 0;height: 112px;text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3);}

.ch-info2 p {color: #666;text-align: center;padding: 5px;margin: 0 30px;font-size: 18px;border-top: 1px solid rgba(128,130,132,0.8);opacity: 0;
  -webkit-transition: all .4s ease-in-out 0.4s;
  -moz-transition: all .4s ease-in-out 0.4s;
  -o-transition: all .4s ease-in-out 0.4s;
  -ms-transition: all .4s ease-in-out 0.4s;
  transition: all .4s ease-in-out 0.4s;
}

.ch-info2 p a{display: block;color: #666;text-decoration: none;font-weight: 700;text-transform: uppercase;font-size: 12px;letter-spacing: 1px;padding-top: 4px;}

.ch-item2:hover {box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 2px rgba(0,0,0,0.1);}
.ch-item2:hover .ch-info2 {opacity: 1;
  -webkit-transform: scale(1.06);
  -moz-transform: scale(1.06);
  -o-transform: scale(1.06);
  -ms-transform: scale(1.06);
  transform: scale(1.06);
}

.ch-item2:hover .ch-info2 p {opacity: 1;}
.blanco{color: #FFF !important;}
/*=======================================================
========== FIN  ESTILOS CIRCULOS DOS GENERALES   ==============
========================================================*/

/*=======================================================
==================== INICIO GENERALES   ==================
========================================================*/
.center{text-align: center;}
.top{margin-top: 60px;}
.right{float: right;}
.left{float: left;}
.reg1 { width:100%; float:left; background:#FFF; position:fixed; z-index:1000;box-shadow: 1px 0px 7px #777;}
.reg1cont {width:80%; margin:0 auto;}
.logo { width:30%; float:left; z-index: 999;position: relative;}
.logo img { min-width: 40%; padding: 2% 0;}
header { width:70%; float:left;}
p{font-size: 15px; text-align: justify;}
p b{font-size: 16px; font-weight: 500;}
.vacio2{height: 76px; width: 100%;}
.c_blanco{color: #FFF;}
.c_morado{color: #5d3e98;}
.morado {background-color:#5d3e98;}
.gris{background-color: #d1d2d4;}
input, textarea {width: 100%; margin-top: 15px;}
textarea{height: 75px;}
h2{font-size: 30px; font-family: "Ubuntu",sans-serif;}
h3{font-size:28px; font-family: "Ubuntu",sans-serif; font-weight: 600px;}
h4{font-weight: 300; font-size: 16px;padding-top:10px; font-family: "Ubuntu",sans-serif;}
.pad{padding: 0 !important;}
.pad_con{padding:30px 0px;}
.formulario input{background: #eeeded; border:none; padding: 10px 5px; color: #5d3e98; font-weight: 600;}
.formulario textarea{background: #eeeded; border:none; padding: 5px 5px; color: #5d3e98; font-weight: 600; height: 83px;}

.ccbtn{width: 71px; float: right; background: #75b242 !important; color: #FFF !important; border:none; border-radius: 5px; margin-bottom: 10px; height: 35px; font-weight: 400;line-height: .1; font-size: 16px;}

::-webkit-input-placeholder {color:#5d3e98 !important; text-overflow: ellipsis;}
:-moz-placeholder {color: #5d3e98 !important; text-overflow: ellipsis;}
::-moz-placeholder {color: #5d3e98 !important; text-overflow: ellipsis;}
:-ms-input-placeholder {color: #5d3e98 !important; text-overflow: ellipsis;}

.lista li {list-style: none;}

/*=======================================================
==================== FIN GENERALES   ==================
========================================================*/
.read-more-state {
  display: none;
}

.read-more-target {
  list-style: none;
  opacity: 0;
  max-height: 0;
  -webkit-transition: all .8s ease-in-out 0s;
  -moz-transition: all .8s ease-in-out 0s;
  -o-transition: all .8s ease-in-out 0s;
  -ms-transition: all .8s ease-in-out 0s;
  transition: all .8s ease-in-out 0s;
}
.read-more-wrap{padding: 0;}
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Leer más';
  background-color: #75b242;
  padding: 5px 10px;
  border-radius: 5px;
  color: #FFF;
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Leer menos';
  background-color: #5d3e98;
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  position: relative;
  z-index: 999;
}

.btn{background: #75b242; color: #FFF; font-size: 15px;
}
/*=======================================================
==================== RESPONSIVE DESING   ==================
========================================================*/


@media all and (max-width: 1059px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

  nav {width: 100%;}
  nav ul {width: 170%;display: none; margin-left:-56%;}
  nav.align-center > ul,
  nav.align-right ul ul {text-align: left;}
  nav ul li,
  nav ul ul li,
  nav ul li:hover > ul > li {width: 100%;height: auto;border-top: 1px solid rgba(100, 100, 100, 0.15);}
  nav ul li a,
  nav ul ul li a {width: 100%;}
  nav > ul > li,
  nav.align-center > ul > li,
  nav.align-right > ul > li {float: none;display: block;}
  nav > ul > li > a{padding: 9px 13px;}
  nav ul ul li a {padding: 4px 0px 4px 12px;font-size: 12px;color: #5d3e98;background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.13);-webkit-transition: all .7s ease;-moz-transition: all .7s ease;-ms-transition: all .7s ease;-o-transition: all .7s ease;transition: all .7s ease;}
  nav ul ul li:hover > a,
  nav ul ul li a:hover {color: #000000;text-transform: uppercase;}
  nav ul ul ul li a {padding-left: 40px;}
  nav ul ul,
  nav ul ul ul {position: relative;left: 0;right: auto;width: 100%;margin: 0;}
  nav > ul > li.has-sub > a::after,
  nav ul ul li.has-sub > a::after {display: none;}
  .menu-line {display: none;}
  nav .menu-button {display: block;padding: 25px;color: #000000;cursor: pointer;font-size: 12px;text-transform: uppercase;}
  nav .menu-button::after {content: '';position: absolute;top: 16px;right: 20px;display: block;width: 28px;height: 4px;background: #5d3e98;}
  nav .menu-button::before {content: '';position: absolute;top: 26px;right: 20px;display: block;width: 28px;height: 14px;border-top: 4px solid #5d3e98;border-bottom: 4px solid #5d3e98;}
  nav .submenu-button {position: absolute;z-index: 10;right: 0;top: 0;display: block;height: 47px;width: 100%;cursor: pointer; line-height: 1.8;}
  nav .submenu-button::after {content: '▾';position: absolute;top: 0px;font-size:19px;right: 8px;display: block; z-index: 99;
        transform:rotate(0deg);
}

  nav .submenu-button.submenu-opened::after {
    display: block;transform:rotate(180deg);
  }

  .campo{background: #999; border-radius: 5px; padding: 4px; margin:0 auto;width: 100%; max-width: 80%; text-align: center; float: none; margin-bottom: 10px;}
}

video {
  position: relative;
  top: 6px;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: -100;
 background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
  background-size: cover;
  transition: 1s opacity;
  border: 9px solid #CCC;
  border-radius: 33px;
}
.stopfade {
   opacity: .5;
}

#polina {
  font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
  font-weight:100;
  background: rgba(0,0,0,0.3);
  color: white;
  padding: 2rem;
  position: absolute;
  width: 33%;
  margin:2rem;
  float: right;
  font-size: 1.2rem;
  z-index: 999;
}

#polina button {
  display: block;
  width: 80%;
  padding: .4rem;
  border: none;
  margin: 1rem auto;
  font-size: 1.3rem;
  background: rgba(255,255,255,0.23);
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  transition: .3s background;
}
#polina button:hover {
   background: rgba(0,0,0,0.5);
}
.ermac{box-shadow: none;}
.list_cir{list-style-type: circle;}
h1{
  color: #333;
  font-size: 20px;
  margin: 0 0 15px 0;
}
.correo{float: right; margin-top:-15px;}
@media screen and (max-width: 500px;) {

}
@media screen and (max-device-width: 800px) {
  html { background: url(../video/Ubicacion.png) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}

@media screen and (max-width: 1280px){
  nav > ul > li > a {padding: 23px 3px;}
  .vacio3 {height: 80px;}
}

@media screen and (max-width: 1061px){
  nav > ul > li > a {padding: 3px 3px;}
  nav .menu-button{padding: 35px;}
  #next,#prev{background-color: rgba(0,0,0,.0);}
}

@media screen and (max-width: 480px){
  nav .menu-button {
    padding: 25px;
}
.flex-control-nav {
    height: 33px;
}
  .vacio2 {height: 50px;}
.logo img { max-width: 120px; padding-top:7px;}
.ccbtn{width: 100%;}
}