/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/

.whiteBg { background: #fff; padding: 12px 0; }
.navyBlueBg { background: #315B92; }
.softPurpleBg { background: #E4D6F5; }
.lightPurpleBg { background: #D0C0E8; }
.mediumPurpleBg { background: #9F6AB5; }
.purpleBg {   background: rgba(113, 50, 130, .85); /* Fondo morado */ }
.slightPurpleBg { background: #7e158208; }
.bg-purple { background: #713282; }
.bg-blue { background: #315B92; }
.blue-card { background: #315B92; margin: 16px 0; padding: 0; border-radius: 16px;}
.text-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important; }
.section-spacing { padding: 64px 0; }
.logo-dental-arts { width: 168px; margin: 8px 0; padding: 0; }

.no-select {
    user-select: none; /* Para navegadores modernos */
    -webkit-user-select: none; /* Para Safari */
    -moz-user-select: none; /* Para Firefox */
    -ms-user-select: none; /* Para IE/Edge */
}

footer div .flex-column { padding: 8px 0; }
footer h1 { font-size: 18px; letter-spacing: -0.8px }
footer h2 { font-size: 18px; }


.hero-banner {
  display: flex;
  flex-direction: column; /* Apilamiento vertical */
  justify-content: flex-start; /* Alinea los elementos desde el principio */
  align-items: center; /* Centra el contenido horizontalmente */
  height: calc(100vh - 98px); /* Altura de la pantalla menos el header */
  margin-top: 98px; /* Esto ajusta el margen superior si tienes un header fijo */
  padding: 0; /* Elimina márgenes adicionales */
  min-height: 500px;
}


.hero-banner .text-column,
.hero-banner .image-column {
  width: 100%; /* Ambas columnas ocupan el 100% del ancho */
  height: 50vh; /* Cada columna ocupa el 50% del alto */
  box-sizing: border-box;
}

.hero-banner .text-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  height: 40vh; /* La columna de texto ocupa la mitad del alto */
}

.hero-banner .text-column h1 {
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-banner .text-column h2 {
  color: white;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

.hero-banner .text-column .btn {
  margin-top: 24px; /* Espacio de 36px encima del botón */
  width: 100%;
}

.hero-banner .image-column {
  display: flex;
  justify-content: left;
  align-items: left;
  padding: 0;
  height: 50vh; /* La imagen ocupa la mitad del alto */
  overflow: hidden;
}



.model-info {
  text-align: center;
  margin-top: 20px;
}

.model-info a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}



/* Media Query para dispositivos de escritorio */
@media (min-width: 1024px) {
  .hero-banner {
    flex-direction: row; /* Apilamiento horizontal para pantallas grandes */
    height: calc(100vh - 91px); /* Mantiene la altura de pantalla completa menos el espacio del header */
    margin-top: 96px;
    justify-content: space-between; /* Separa el texto y la imagen */
  }

  .hero-banner .text-column {
    width: 33%; /* El texto ocupa un tercio de la pantalla */
    padding: 0;
    text-align: left; /* Alinea el texto a la izquierda */
    flex: 1;
  }

  .hero-banner .image-column {
    width: 67%;
    padding: 0;
    margin: 0;
    height:calc(100vh - 92px);

    display: grid;
  }

  .hero-banner .image-column img {
    height: 100%; /* La imagen ocupa el 100% del alto del contenedor */
  }
  .hero-banner .text-column .btn {
    margin-top: 36px; /* Espacio de 36px encima del botón */
    width: auto;
  }
  
  .model-info {
    position: absolute; /* Cambia a posición absoluta */
    bottom: 16px; /* Coloca el badge en el centro vertical */
    right: 6%; /* Se ajusta el badge a la derecha */
    left: unset !important;
    transform: translateY(-50%); /* Asegura que el badge quede centrado verticalmente */
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    padding: 10px 20px; /* Espaciado del badge */
    border-radius: 5px; /* Bordes redondeados */
    max-width: 260px;
  }

  .model-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
}






.model-info {
  border: 1px solid #fff;
  position: absolute;
  bottom: 12px;
  background-color: #713282;
  text-align: center;
  z-index: 2;
  padding: 4px 16px;
  border-radius: 32px;
  display: block;
  left:18px;
}
 
.model-info p {
  font-size: 1.4rem;  color: #fff; margin: 0;
}

.model-info a {
  font-size: 1.4rem; /* Tamaño del texto del enlace */
  color: #fff; /* Color blanco para el enlace */
  font-weight: 600;
}

.model-info a:hover {
  color: #ddd; /* Color más claro en hover */
}


/*--------------------------------------------------------------
# carillas
--------------------------------------------------------------*/

.twentyCard {border: none; border-radius: 0; max-height: 0px; overflow: hidden;}
.hero-img {
  height: auto;
  object-fit: cover; /* Asegura que la imagen cubra el área */
  object-position: center; /* Centra la imagen dentro del contenedor */
  min-width: initial; /* Asegura que la imagen no exceda el alto del contenedor */
  overflow: hidden; /* Elimina cualquier contenido que sobresalga */
}
/* Estilos para desktop */
@media only screen and (min-width: 769px) {
  .twentyCard {
    max-height: 640px;
    height: 640px;
  }
  .hero-img {
    min-width: 720px;
    display: block;
    position: absolute;
    bottom:0;
  }
}

.benefits-list {
  list-style: none;
  padding: 24px 0 0 0;
  margin: 0;
  counter-reset: item;
}

.benefits-list li {
  counter-increment: item;
  margin-bottom: 24px;
  display: flex;

}

.benefits-list li:before {
  content: counter(item);
  font-size: 26px;
  color: #FFFFFF; /* color blanco */
  background-color: #713282; /* color morado */
  border-radius: 50%; /* forma circular */
  width: 48px; /* ancho del envolvente */
  height: 48px; /* alto del envolvente */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
  flex-shrink: 0;
}

#carillas-porcelana-video {
  object-fit: cover; /* Ajusta el video para cubrir completamente el contenedor sin deformarlo */
  width: 100%;
  height: 100%;
}

/* Estilos para el icono de play */
#play-icon {
  position: absolute; /* Lo posicionamos de forma absoluta dentro del contenedor */
  top: 50%; /* Colocamos el icono al 50% desde la parte superior */
  left: 50%; /* Colocamos el icono al 50% desde la parte izquierda */
  transform: translate(-50%, -50%); /* Ajustamos el icono para que se centre tanto horizontal como verticalmente */
  font-size: 5rem; /* Tamaño grande para el icono */
  opacity: 0.5; /* Opacidad para el icono */
  transition: opacity 0.3s ease, transform 0.3s ease; /* Transición suave para efectos */
}
#play-icon:hover {
  opacity: 1; /* Aumenta la opacidad al pasar el mouse */
  transform: translate(-50%, -50%) scale(1.2); /* Aumenta el tamaño del icono al pasar el mouse */
}




/*--------------------------------------------------------------
# general
--------------------------------------------------------------*/
/* Modal dialog */
.modal { z-index: 10000 }
.modal-dialog {
    margin: 2% auto;
}
.close {
    font-size: 3.6rem;
    font-weight: 600;
}
.modal-header { padding: 1rem 2rem; }
.modal-backdrop {
    z-index: 5000 !important;
}
/* End Modal Dialog */

/* Sonrisas famosas */
.project {
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  z-index: 0; }
  .project:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: #713282;
    opacity: 0;
    z-index: 1;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  .project img {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    z-index: -1;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease; }
  .project .text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3em;
    opacity: 0;
    z-index: 2;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease; }
    .project .text span {
      font-size: 14px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: rgba(255, 255, 255, 0.8); 
      bottom: 8px;
      position: absolute;
      left: 16px;}
    .project .text h3 {
      color: #fff;
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
      -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      text-orientation: sideways;
      text-align: center;
      text-orientation: sideways;
      margin: 0rem;
      position: absolute;
      top: 0;
      left: 20px;
      height: 100%;
      text-transform: uppercase;
      font-weight: 600;
      letter-spacing: 2px;
      font-size: 24px;
      z-index: 1;
      color: black;
      font-family: 'Nunito Sans', sans-serif; }
      .project .text h3 a {
        color: #fff; }
    @media (max-width: 991.98px) {
      
      .project .text {
        opacity: 1;
        bottom: 0; } }
  .project .icon {
    position: absolute;
    top: -50px;
    right: 2em;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease;
    opacity: 0;
    z-index: 2; }
    .project .icon span {
      color: #fff;
      font-size: 20px; }
    @media (max-width: 991.98px) {
      .project .icon {
        opacity: 1;
        top: 50px; } }
  .project:hover:after, .project:focus:after {
    opacity: .8; }
  .project:hover .text, .project:focus .text {
    opacity: 1;
    bottom: 0; }
  .project:hover .icon, .project:focus .icon {
    top: 50px;
    opacity: 1; }
  .project:hover img, .project:focus img {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.3);
    -o-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3); }
.ftco-animate {
  opacity: 0;
  visibility: hidden; }
.ftco-no-pt {
  padding-top: 0 !important; }
.ftco-no-pb {
  padding-bottom: 0 !important; }
.image-popup {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }
#ftco-loader {
  position: fixed;
  width: 96px;
  height: 96px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  box-shadow: 0px 24px 64px rgba(0, 0, 0, 0.24);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity .2s ease-out, visibility 0s linear .2s;
  -o-transition: opacity .2s ease-out, visibility 0s linear .2s;
  transition: opacity .2s ease-out, visibility 0s linear .2s;
  z-index: 1000; }
#ftco-loader.fullscreen {
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
  background-color: #fff;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none; }

#ftco-loader.show {
  -webkit-transition: opacity .4s ease-out, visibility 0s linear 0s;
  -o-transition: opacity .4s ease-out, visibility 0s linear 0s;
  transition: opacity .4s ease-out, visibility 0s linear 0s;
  visibility: visible;
  opacity: 1; }

#ftco-loader .circular {
  -webkit-animation: loader-rotate 2s linear infinite;
  animation: loader-rotate 2s linear infinite;
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  display: block;
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg); }

#ftco-loader .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: loader-dash 1.5s ease-in-out infinite;
  animation: loader-dash 1.5s ease-in-out infinite;
  stroke-linecap: round; }

@-webkit-keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes loader-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

/* End Sonrisas famosas */




/* Toggler hamburger-close */
.animated-icon2 {
  width: 24px;
  height: 24px;
  position: relative;
  margin: 0;
  transform: rotate(0deg);
  transition: transform 0.5s ease-in-out;
  cursor: pointer;
  display: inline-block;  /* Ensure it stays in-line for the button */
}

.animated-icon2 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  border-radius: 9px;
  background: #fff;
  left: 0;
  transform: rotate(0deg);
  transition: transform 0.25s ease-in-out, top 0.25s ease-in-out;
}

/* Positioning the spans */
.animated-icon2 span:nth-child(1) {
  top: 0px;
}

.animated-icon2 span:nth-child(2), .animated-icon2 span:nth-child(3) {
  top: 10px;
}

.animated-icon2 span:nth-child(4) {
  top: 20px;
}

/* When the "open" class is added (for "X" effect) */
.animated-icon2.open span:nth-child(1) {
  top: 11px;
  width: 0%;
  left: 50%;
}

.animated-icon2.open span:nth-child(2) {
  transform: rotate(45deg);
}

.animated-icon2.open span:nth-child(3) {
  transform: rotate(-45deg);
}

.animated-icon2.open span:nth-child(4) {
  top: 11px;
  width: 0%;
  left: 50%;
}


.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}


.pageBanner {
  height: 100vh;
  min-height: 460px;
  background: no-repeat;
  background-size: cover;
  background-position: center!important;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}




* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/


strong { font-weight: 700; }
h1 {
    font-size: 3.6rem;
}
h2 {
    font-size: 2.8rem;
    color: #713282;
}
h3 {
    font-size: 2.4rem;


}
h4 {
    font-size: 2rem;
}
h5 {
    font-size: 1.8rem ;
}
h6 {
    font-size: 1.6rem;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: .5rem;
}
.hero-planes-pago {
  background-image: url('../images/planes-pago/mb-hero-planes-pago.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-sucursales {
  background-image: url('../images/mb-hero-image-6.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-diseno-sonrisa {
  background-image: url('../images/mb-hero-image-5.jpg');
  height: 100vh;
  min-height: 667px;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-sonrisas {
  background-image: url('../images/sonrisas-famosas/mb-hero-sonrisas-famosas.jpg');
  height: 100vh;
  min-height: 667px;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-blanqueamiento {
  background-image: url('../images/blanqueamiento/mb-hero-blanqueamiento.jpg');
  height: 100vh;
  min-height: 667px;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-ortodoncia {
  background-image: url('../images/ortodoncia/mb-hero-ortodoncia.jpg');
  height: 100vh;
  min-height: 667px;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-implantes {
  background-image: url('../images/implantes-dentales/mb-hero-implantes.jpg');
  height: 100vh;
  min-height: 667px;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}


.navbar-nav {
    padding-left: 20px;
    margin-bottom: 30px;}

.floatMenu { color: #713282 !important; }
.floatNavBarLink, .dropdown-toggle { color:#fff; text-decoration: none; margin: 6px 0 }
.dropdown-menu.show { font-size: 1.8rem; border: none; }
.show > .dropdown-menu {
  max-height: 800px;
  visibility: visible;
  border: none;
}
  
.dropdown-menu {
  /*display: block;*/
  max-height: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  border:  none;
}

.dropdown-toggle { margin: 0; }
#navbarSupportedContent23 > ul > li.dropdown.nav-link.show > a:hover { text-decoration: none; color: #fff }
.navbar {
    background: #713282;
    padding: 8px 18px;
}
.navbar .nav-link { color: #fff; text-decoration: none; font-weight: 400; padding: 1rem 0; font-size: 2rem}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #fff;
    text-decoration: none;
}

.navbar .navbar-brand {
    color: #fff;
}
/* Change navbar styling on scroll */
.navbar.active {
    background: #713282;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar.active .nav-link {
    color: #fff!important;
}
.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: #555;
    text-decoration: underline;
}
.navbar.active .navbar-brand {
    color: #555;
}


.navbar-toggler {
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    background-color: transparent;
    border-radius: .25rem;
    color: #fff;
}

/*HOME BANNER*/

/*.carousel-caption { text-align: center; padding: 16px 24px 0; width:100%; height:100%;}*/
#homeCarousel {margin-top: 66px;}
.carousel-caption { bottom: 6%; }
.display-1 { font-size: 3.2rem; font-weight: 600; color:#fff;}
.display-text { font-size: 2rem; font-weight: 400; color:#fff;}
.hero-banner-1 { background-image: url('../images/mb-hero-image-1.jpg'); }
.hero-banner-2 { background-image: url('../images/mb-hero-image-2.jpg'); }
.hero-banner-3 { background-image: url('../images/mb-hero-image-3.jpg'); }
.hero-banner-4 { background-image: url('../images/mb-hero-image-4.jpg'); }
.hero-banner-1, .hero-banner-2, .hero-banner-3, .hero-banner-4 {
  /*height: calc(100vh - 96px);*/
  height: calc(100vh - 96px);
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;}
/*Testimonios*/
.testimonial { height: 75vh }

/*Jumbotron*/
.jumbotron { margin-bottom: 0; color: #3d3d3d; padding: 24px 0; border-radius: 0; }
.adBanner { margin: 0px 0px 12px 0; } 


.btn-primary { text-decoration: none; background: #713282; border: 1px solid #fff; border-radius: 42px; padding: 12px 36px; font-size: 1.8rem; text-shadow: none; font-weight: 600; }
.btn-primary:hover { background: white; border: 1px solid #713282; border-radius: 42px; padding: 12px 36px; color: #713282; }



.btn-secondary { color: #713282;text-decoration: none; background: #fff; border: 1px solid #713282; border-radius: 42px; padding: 12px 36px; font-size: 1.8rem; text-shadow: none; font-weight: 600; }
.btn-secondary:hover, .btn-secondary:active { background: #713282; border: 1px solid #fff; border-radius: 42px; padding: 12px 36px; color: #fff; }
.carousel-control-prev, .carousel-control-next { z-index: 2000 }

.rounded-top { border-top-left-radius: 1.2rem!important; border-top-right-radius: 1.2rem!important; }
.rounded-bottom { border-bottom-left-radius: 1.2rem!important; border-bottom-right-radius: 1.2rem!important; }
.img-bck-720 { min-height: 415px; display: block; background-size: cover; background-position: center; }

.copyright {
   line-height: 24px;
    padding: 16px 0;
    font-size: 1.3rem;
    overflow: auto;
}
.page-title { padding-top: 15vh; }
.fixed-top { z-index: 5000; }
.footer-spacing { padding: 24px 0; }
footer { padding: 0!important; }
footer .tagline {font-weight: 700;}
footer p,
.copyright p {
    font-size: 1.6rem;
    margin: 0;
}
footer a { text-decoration: none; font-size: inherit;}
footer a:hover { text-decoration: underline; }
}
.certificado { text-align: left; }
.certificate2 { width: 50%; }
.certificate1 { width: 44%; }



.socialContainer {
    background: #713282;
    padding: 2%;
    overflow: auto;
}
.nopadding { padding: 0 }
.equal {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}
.green {color: #13843A;}
.float{
  position:fixed;
  width:64px;
  height:64px;
  bottom:16px;
  right:16px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px rgba(72, 17, 92, 0.5);
  z-index:100;
}
.float:hover { color: #fff; }
.my-float{ margin-top:16px; }

.containerHome {
    padding-top: 0;
}
.legal-text { color: rgba(255, 255, 255, 0.9); font-size: 70%; line-height: 125%}
.smaller { font-size: 50%; }
.herosup { font-size: 40%; margin-top: 0; vertical-align: super;}
.carousel-control.left, .carousel-control.right { top: 100px; }
hr { margin: 6% 0; }

.caption { color: #666666; padding-bottom: 24px; display: block}
.light-grey {
    background: #f8f8f8;
    padding: 16% 0;
}
.casePhoto {
    padding: 12px 0;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family: 'Nunito Sans', sans-serif; font-weight: 600;
}
.telNum { padding-left: 32px; }
.whiteRow{ padding: 154px 0 0px!important; }
    .fondoHeroBanner {
    background: linear-gradient(43deg, #8e5b9c, #7799c5, #c383bd, #71c6c6, #315B92, #7e438e, #54b8b9, #c320cc);
    background-size: 1600% 1600%;
    -webkit-animation: herobannerBck 41s ease infinite;
    -moz-animation: herobannerBck 41s ease infinite;
    animation: herobannerBck 41s ease infinite;
    @-webkit-keyframes herobannerBck  {
    
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
            @-moz-keyframes herobannerBck  {
    
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
            @keyframes herobannerBck  {
     
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
;
}
}
.inputGroupContainer {
    padding: 0;
}

#myCarousel > div > a.left.carousel-control > span.glyphicon.glyphicon-chevron-left, #myCarousel > div > a.right.carousel-control > span.glyphicon.glyphicon-chevron-right { color:#fff; }
#contacto > fieldset > div:nth-child(9) > div > button > span {color:#fff;}

.telefono { color: #713282!important; font-weight: 600;}

.panel-title i {
  color: white;
  font-size: 2.4rem;
  font-weight: 400;
}
.contactIcons>ul>li>a, .cta {
    text-decoration: none;
}
.hide {
    display: none;
}
.cta, i {
    cursor: pointer;
}
.cta {
    text-align: center;
    width: initial;
    background: #713282;
    color: #fff;
    margin: 32px 16px 24px;
    border: 1px solid #fff;
    padding: 12px 0;
    border-radius: 32px;
    font-size: 2rem;
    display: block;
    float: initial;    
}
.cta:hover, .cta:focus {
    background: #582a69;
    color: #fff;
    border: 1px solid #582a69;
    text-decoration: none;    
}
.herobanner { width: 100%}

.quote {
    text-align: right;
    margin-bottom: 80px;
    padding: 0 16px;
}

.text-center, .text-right {
    text-align: center;
    padding: 0;
}
blockquote {
    padding: 0 16px;
    margin: 0;
    border: none;
}
.purple-text { color:#713282; }
.white-text { color: #fff; }
.blue-text { color: #315B92; }


.phoneIcon {
    color: #713282;
    margin-right: -6px;
    font-size: 1.6rem;
}
.container {
    padding-right: 0;
    padding-left: 0;
}

.footer-info-single {
    margin-left: 0;
}

.input-group-addon {
    background-color: #713282;
    border: 1px solid #713282;
    padding: 10px 16px;
    color: #fff;
    border-top-left-radius:  10px;
    border-bottom-left-radius: 10px;
}
.inputGroupContainer { padding:  0 !important }
.sendBtn { float: right; margin-top: 36px!important; border: 1px solid #fff; border-radius: 32px; padding: 12px 36px; font-size: 1.8rem; text-shadow: none; font-weight: 600; width:96%;}
.panel-default {
    border: none;
}
.form-control {
    border-radius: 10px;
    border: 1px solid #fff;
    height: 48px;
    font-size: 1.6rem;
}
.footerTitle2 {
    margin-top: 0;
}
.redes {      
    list-style: none;
    overflow: auto;
    display: block;
    margin: 0 auto;
    padding: 0;
}
.redes a {
    font-size: 2.6rem;
}
.redes li {
    float: left;
    padding: 0 4px;
}
.redes li:first-child {
    padding-left: 0;
}
.contactoBg h1 {
    margin-top: 0;
    padding: 12px 0;
}
.contactoBg h2 {
    padding: 64px 0 0;
}
.contactoBg {
    background-image: url(../images/sonrisa-perfecta-dental-arts-bg.jpg);
    background-repeat: no-repeat;
    padding: 40px 24px 60px!important;
}
.contactoBg::after {
    content: "";
    background-image: url(../images/sonrisa-perfecta-dental-arts-bg.jpg);
    opacity: 0.5;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;  
}



/*.carousel-caption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    width: 100%
}*/
.whiteTxt { color: #fff; }
.purpleTxt { color: #713282; }
.purpleBtn { color: #713282; }
.purpleBtn:hover { color:#582a69; }
.telIcon { font-size: 2rem; }
.item>img {
    margin: 0;
    position: absolute;
}
iframe {
    border: none;
}
.fila {
    padding: 40px 0!important;
}
.purple { background: #713282; }
.menuActive {
    background: #713282!important;
    color: #fff!important;
}
.video-container {
        margin: 0;
}
.form-group {
    margin-bottom: 1.8rem;
}
#myCarousel>div>div.item {
    min-height: 519px;
    margin: 98px 0 0;
}

div.modal-body>ol>li {
    padding: 16px 0;
}
div.modal-body>ol>li>a>i {
    font-size: 1.6rem;
}
.reference {
    color: #713282;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    padding-right: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%}
.noolvidar {
    font-size: 30px;
    color: red;
}
a, h1, h2, h3, h4, h5 {
    color: #713282;
}

html {
    font-size: 62.5%}
body {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    font-size: 1.8rem;
    line-height: 2.7rem;
    color: #3d3d3d;
}
p { font-size: 18px; }
.responsiveDisplay {
    display: none;
}

.carousel-control.right {
    background: 0 0;
}

.purpleBck {
    background: #713282;
}


li.dropdown.nav-link.show > ul > li > a { text-decoration: none; } 

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    line-height: 2;
    white-space: nowrap;
}
.dropdown-menu>li>a:hover { background: #713282; color:#fff } 

.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
    padding: 14px 24px;
}
li.dropdown.open>ul>li {
    border-bottom: 1px dotted #ddd;
    text-align: left;
    font-size: 1.6rem;
}
li.dropdown.open>ul>li:last-child {
    border-bottom: none;
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: initial;
}
nav {
    z-index: 999;
}
.contactIcons {
    font-size: 1.6rem;
    text-align: right;
    background: #315B92;
    padding: .6rem 1.5rem;
    font-size: 1.3rem;
    color: #fff;
}
.contactIcons li { list-style: none; }
.btn-default:hover, .contactBar, .purple {
    background: #713282;
}


.contactIcons>ul {
    margin: 0;
    padding: 0;
}
.contactIcons a {
    color: #fff;
    font-size: 1.3rem;
}


.btn-default {
    color: #713282;
}
.btn-default:hover {
    color: #fff;
}
.navbar-brand {
    padding: 0;
}
.nav>li>a {
    padding: 16px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    display: inline-block;
}
.navbar-default .navbar-nav>li>a {
    color: #713282;
}
.navbar-toggle {
    padding: 10px;
}
.intro {
    padding: 16px 15px 8px;
}
.intro h5 {
    margin-bottom: 3.2rem;
}
.intro p:first-child {
    padding-top: 2.4rem;
}
.caret {
    color: #315B92;
}
.white-txt {
    color: #fff;
}
.imgTratamiento {
    min-width: 100%;
    max-width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 6px;
}
.img-circle {
    border-radius: 50%;
    display: block;
    margin: 48px auto 24px;
    width: 66%;
}
.glyphicon-search {
    padding: 3px 0;
}
.contactBar {
    padding: 4px 1.5rem;
    font-size: 1.15rem;
}
.contactbar .list-inline {
    vertical-align: middle;
    text-align: center;
    margin-bottom: 0;
}
ul.list-inline {
    margin: 0;
}
div.row.no-gutter.contactBar>div>ul {
    margin-bottom: 0;
}
div.row.no-gutter.contactBar>div>ul>li {
    text-align: center;
    vertical-align: middle;
    padding: 0 5px;
    border-right: 1px solid #fff;
}
div.row.no-gutter.contactBar>div>ul>li:first-child, div.row.no-gutter.contactBar>div>ul>li:last-child {
    border-right: none;
}
.colored-block {
    width: 100%;
    padding: 30px 0;
    color: #fff;
}
.purple-txt {
    color: #713282;
}
.blue-txt {
    color: #315B92;
}
.blue {
    background: #315B92;
}
.tratamientos img {
    border-radius: 12px;
}
.fondo1 {
    background-image: -ms-linear-gradient(bottom left, #D4ABE0 0, #713282 100%);
    background-image: -moz-linear-gradient(bottom left, #D4ABE0 0, #713282 100%);
    background-image: -o-linear-gradient(bottom left, #D4ABE0 0, #713282 100%);
    background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0, #D4ABE0), color-stop(100, #713282));
    background-image: -webkit-linear-gradient(bottom left, #D4ABE0 0, #713282 100%);
    background-image: linear-gradient(to top right, #D4ABE0 0, #713282 100%);
}
.fondo2, .fondo3 {
    background-image: -ms-linear-gradient(top right, #D4ABE0 0, #315B92 100%);
    background-image: -moz-linear-gradient(top right, #D4ABE0 0, #315B92 100%);
    background-image: -o-linear-gradient(top right, #D4ABE0 0, #315B92 100%);
    background-image: -webkit-gradient(linear, right top, left bottom, color-stop(0, #D4ABE0), color-stop(100, #315B92));
    background-image: -webkit-linear-gradient(top right, #D4ABE0 0, #315B92 100%);
    background-image: linear-gradient(to bottom left, #D4ABE0 0, #315B92 100%);
}
.sucursal {
    padding: 48px 16px;
}
.sucursal1, .sucursal2 {
    min-height: 240px;
    padding: 16px 0 40px;
    color: #fff;
}
.sucursal1 {
    background: #38618e;
}
.sucursal2 {
    background: #713282;
}
.sucursal h2, .sucursal1 h2, .sucursal2 h2 {
    color: #fff;
    font-weight: 400;
}
.sucursal p, .sucursal1 p, .sucursal2 p {
    color: #fff;
}
.sucursal button, .sucursal1 button, .sucursal2 button {
    color: #fff;
    font-size: 20px;
    background: 0 0;
    border: 1px solid #fff;
    border-radius: 6px;
    height: 43px;
    line-height: 0;
    display: block;
    margin: 0 auto;
}
.sucursal button:hover, .sucursal1 button:hover, .sucursal2 button:hover {
    color: #fff;
}
.sucursal a, .sucursal1 a, .sucursal2 a {
    color: #fff;
    display: inline-block;
    padding: 0;
    text-decoration: none;
}
.sucursal1 a:hover, .sucursal2 a:hover {
    text-decoration: none;
    color: #fff;
}
.pur1 {
    background: #b8a1c3;
}
.pur2 {
    background: #9e7dac;
}
.pur3 {
    background: #875d99;
}
.pur4 {
    background: #713282;
}
.mainTitle h1 {
    margin: 12px 0 0;
}
.maintTitle h5 {
    margin: 0 0 16px;
}
#success_message {
    display: none;
}
.artistName {
    position: absolute;
    bottom: -3.3rem;
    font-size: 2.2rem;
    font-weight: 600;
    font-variant: all-small-caps;
    width: 100%;
}
.item h1 {
    color: #fff;
    font-size: 3rem;
    font-weight: 600;
    line-height: 3.8rem;
    margin: 4% 10% 0;
}
.heroconditions{ font-size: 1.1rem;
    line-height: 1.6rem;
    padding: 20px;}


/*.offer {
    padding: 24px;
}
.offer a, .offer h2 {
    color: #fff;
    text-decoration: none;
}
.offer h2 {
    margin-bottom: 2.4rem;
}
.offerLink {
    padding: 32px 16px;
    display: block;
    font-size: 1.6rem;
}*/
.offerLink p {
    margin: 0;
}
.offerLink h2 {
    margin: 12px 0 0;
}
.offerLink:hover {
    background: rgba(255, 255, 255, .2);
    color: #713282;
}
.copyright a, .copyright p, .legal, .purple1 h2, .purple1 p, .purple2 h2, .purple2 p, .purple3 h2, .purple3 p, .socialContainer, .socialContainer ul li a, footer, footer a:hover, footer h2 {
    color: #fff;
}

.purple2mobile {
    background: #713282;
}
.purple3 {
    background: #38618e;
    padding: 24px;
}
footer .legal p {
    font-size: 0.8em}
.sucursales {
    text-align: center;
    letter-spacing: -.5px;
}
.tratamientos a {
    text-align: center;
    font-size: 2rem;
    display: block;
}
.iFrameVid {
    width: 100%;
    min-height: 520px;
}
>
#map, .wrap { width: 100% }
.wrap {
    max-width: 75em;
    min-height: 40em;
    height: 100%;
    margin: 0 auto;
}
#map {
    height: 400px;
    margin-top: 40px;
    margin-bottom: 40px;
}
.info-window {
    font-family: 'Nunito Sans', sans-serif;
}
.info-content {
    color: #999;
}
#galeriaSonrisasFamosas {
    padding: 0!important;
}
footer h6 {
    padding-top: 32px;
}
footer li {
    padding: 10px 0;
}
footer li a {
    text-decoration: none;
    padding: 0 6px;
}
.item>img {
    margin: 0;
    position: absolute;
    bottom: 0;
}
.videoDA { margin-bottom:80px }

.cardTitle { text-align: center;}
.cardText { text-align: center; }

/*=============== TABLETS ======*/
@media only screen and (min-width :768px) {
.infoSuc { margin-top: 18%;
display: table-cell; vertical-align: bottom;}
.videoDA {
    margin-top: 4px;
}

.tratamiento {  min-height: 380px;  margin: 22px 0;
}

.activePage { color: #713282!important; font-weight: 600!important; }


#myCarousel>div>div.item {
    min-height: 600px;
    margin: 98px 0 0;
}

.contactoBg {
    background-image: url(../images/dental-arts-sonrisa-perfecta-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40px 0 60px!important;
    background-position: -80px 0;
    width: 100%;
    height: 680px;
}

    .carousel-control.left, .carousel-control.right { height: 100% }
    .imgTratamiento {
    min-width: 100%!important;
    max-width: 100%!important;
    margin: 0 auto;
    display: block;
    border-radius: 6px;
}

    .img-circle {
    border-radius: 50%;
    display: block;
    margin: 48px auto 24px;
    width: 64%;
}

    .ctaBanner {
    background: #315B92;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 80px;
    border-radius: 24px;
    font-size: 1.8rem;
    font-weight: 600;
    }
.ctaBanner:hover {
    border: 1px solid #fff;
    background: #713282;
}
    .menuicon { top: 4px; }
    .nav>li {
    position: relative;
    display: block;
}
    .nav>li>a {
    padding: 16px;
    text-decoration: none; font-weight: 400;
}

.contactIcons li {
    display: inline;
    list-style: none;
    padding: 0 .7rem;
}


#myCarousel>div>div.item { margin: 117px 0; }
.cta { width: 100%; margin: 0; padding: 12px 16px; text-decoration: none; }
#myCarousel>div>div.item { margin: 0; }
    .sucursal1, .sucursal2 {
    min-height: 240px;
    padding: 16px 0 40px;
    color: #fff;
}
.carousel-caption, .text-center {
    text-align: center;
}
.navbar-nav {
    font-size: 1.4rem;
    float: left;
}
.sucursal1 {
    background: #38618e;
}
.sucursal2 {
    background: #713282;
}
.sucursal h2, .sucursal1 h2, .sucursal2 h2 {
    color: #fff;
    font-weight: 400;
    font-size: 30px;
}
.sucursal p, .sucursal1 p, .sucursal2 p {
    color: #fff;
    font-size: 20px;
}
.sucursal button, .sucursal1 button, .sucursal2 button {
    color: #fff;
    font-size: 20px;
    background: 0 0;
    border: 1px solid #fff;
    border-radius: 6px;
    height: 43px;
    line-height: 0;
    display: block;
    margin: 0 auto;
}
.sucursal button:hover, .sucursal1 button:hover, .sucursal2 button:hover {
    color: #fff;
}
.sucursal a, .sucursal1 a, .sucursal2 a {
    color: #fff;
    display: inline-block;
    padding: 12px 0 40px;
}
#myCarousel{
   display: block;
    line-height: 4rem;
    height: auto;
    margin: 106px 0 0;
}
.sucursal1 a:hover, .sucursal2 a:hover {
    text-decoration: none;
    color: #fff;
}
.sucursal {
    color: #fff;
    padding: 48px 0;
}
.footerTitle2 {
    margin-top: 3.2rem;
}
.titulo {
    padding: 64px 12px 0;
    letter-spacing: -.5px;
}
footer h6 {
    padding-top: 0;
}
footer li {
    padding: 6px 0;
}
footer li a {
    text-decoration: none;
    margin-left: 0;
}
.copyright {
    line-height: 22px;
}
.footer-info-single {
    margin-left: 0;
}
.carousel-caption {
    position: absolute;
    z-index: 10;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.img-circle {
    width: 40%;
}
.artistName {
    position: absolute;
    left: 20%;
    bottom: -23px;
    font-size: 2.4rem;
    font-weight: 600;
    font-variant: all-small-caps;
    text-align: left;
}
.offer {
    margin: 24px 0;
}
img {
    margin: 16px 0;
}
.ctaBanner {
    position: relative;
    right: 0;
    bottom: 0;
    width: 480px;
}

.container {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header, .form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
    background-color: transparent;
}
.carousel-control.left, .carousel-control.right { top: 0; }
}
/*DESKTOP STYLES*/
@media only screen and (min-width :1174px) {

/*HOME BANNER*/
.display-1 { font-size: 4.8rem; }
.hero-banner-1 { background-image: url('../images/hero-image-1.jpg'); }
.hero-banner-2 { background-image: url('../images/hero-image-2.jpg'); }
.hero-banner-3 { background-image: url('../images/hero-image-3.jpg'); }
.hero-banner-4 { background-image: url('../images/hero-image-4.jpg'); }




.hero-banner-1, .hero-banner-2, .hero-banner-3, .hero-banner-4 {
  height: calc(100vh - 100px);
  min-height: 500px;
  background-size: cover;
  background-position: cover !important; /* Aligns the background image to the top */
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
}

/*Promociones*/
.page-title { padding-top: 9vh; }

/*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/

h1 {
    font-size: 3.6rem;
}
h2 {
    font-size: 2.8rem;
    color: #713282;
}
h3 {
    font-size: 2.2rem;


}
h4 {
    font-size: 2rem;
}
h5 {
    font-size: 1.8rem ;
}
h6 {
    font-size: 1.6rem;
}


h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: .5rem;
}
p { font-size: 18px; }

.btn-primary, .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:focus { text-decoration: none; background: #713282; border: 1px solid #fff; border-radius: 32px; padding: 12px 36px; font-size: 1.8rem; text-shadow: none; }


.whiteBg { background: #fff; padding: 100px 0; }

.lightGreyBg { background: #f8f8f8; padding: 100px 0; }   


.navbar {
    background: #733C87;
    padding: 0;
    margin: 0;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.35);
    height: 96px;
  }

.img-bck-720 { min-height: 76vh; background-size: cover; background-position: center center; }
.floatMenu { color: #713282 !important; }

.navbar .nav-link:hover, .navbar .nav-link:focus { text-decoration: underline; }
.nav>li { display: inline-block; }
.nav-item { padding: 0 1.8rem; }

/* Change navbar styling on scroll */
.navbar.active { background: #733C87; box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .active { text-decoration: underline; font-weight: 600; }


.navbar .dropdown-toggle { color: inherit; text-decoration: none; font-size: inherit;}

.nav-link {
    color: #fff; font-size: 1.8rem; text-decoration: none;
}
.navbar.active {
    color: #713282;
}

.
/* Change navbar styling on small viewports */
@media (max-width: 991.98px) {
    .navbar {
        background: #ffffffcc;
    }
    .navbar .navbar-brand, .navbar .nav-link, .dropdown-toggle  {
        color: #315B92;
    }
}
.navbar-nav {
    margin-bottom: 0;
}
.navbar-expand-lg .navbar-nav .dropdown-menu { box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1) }


/**Delete when fonished*/
.pageBanner {
  height: 75vh;
  min-height: 600px;
  background: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
/*End delete*/
.hero-planes-pago {
  background-image: url('../images/planes-pago/hero-alex-kaffie.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-sucursales {
  background-image: url('../images/hero-image-6.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-sucursal-aguascalientes {
  background-image: url('../aguascalientes/dental-arts-diseno-de-sonrisa-aguascalientes.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-diseno-sonrisa {
  background-image: url('../images/hero-image-5.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-sonrisas {
  background-image: url('../images/sonrisas-famosas/hero-sonrisas-famosas.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-blanqueamiento {
  background-image: url('../images/blanqueamiento/hero-blanqueamiento.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-ortodoncia {
  background-image: url('../images/ortodoncia/hero-ortodoncia.jpg');

  height: calc(100vh);
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}
.hero-implantes {
  background-image: url('../images/implantes-dentales/hero-implantes.jpg');
  height: 100vh;
  background-position: 50% 50%;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}



.row.equal {
  display: flex;
  flex-wrap: wrap;
}

footer li a {
    text-decoration: none;
    padding: 0 2px;
}
.socialContainer {
    background: #713282;
    padding: 0 80px;
    overflow: auto;
}
.logo-dental-arts {
    width: 190px;
    margin: 16px;
    padding: 0;
}
.img-circle {
    width: 64%;
}    


.whiteRow{    padding: 80px 6% 4%!important; }

.fecha, blockquote {
    font-style: italic;
}

.card, footer {
    overflow: auto;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #fff;
    text-decoration: none;
}

.contactIcons {
    text-align: right;
    background: rgba(92, 126, 171, 1);
}
blockquote {
    font-size: 1.6rem;
}
.responsiveDisplay {
    display: inline-table;
}
.contactBar {
    font-size: 1.8rem;
}
.fecha {
    font-weight: 400;
}
.quote {
    text-align: right;
    margin-top: 0;
    font-variant: all-petite-caps;
    font-size: 2.2rem;
    margin-right: 40px;
}

.artistName, .caption {
    font-variant: all-small-caps;
}
.caption { color: #666666; }
.tratamiento {
    min-height: inherit;
    position: relative;
    padding: inherit;
}
.item h1 {
    color: #fff;
    font-size: 4.2rem;
    font-weight: 400;
    line-height: 5rem;
    margin: 0;
}
.card {
    border-radius: 6px;
    -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .25);
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .25);
}
.card-body p {
 padding: 0 20px; 
 text-align: center;   
}
.cardTitle { padding-top: 24px!important; text-align: center; }
.card .cta {
    margin: 9% 0 0%;
    font-size: 1.8rem!important;
    width: auto;
}
.hero-video-caption {
    z-index: 10;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
    bottom: 5%;
    transform: translateY(-50%);
}
header.herovideo {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header.hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}



header.herovideo .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.25;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
 
  header.herovideo video {
    display: none;
  }
}





.carousel-caption {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -25%);
  text-align: center;
  z-index: 2;
  bottom:0;
}

.carousel-control {
    display: block;
    width: 2%}


    
.item>img {
    margin: 0;
    position: absolute;
    bottom: initial;
}
.contactoBg {
    background-image: url(../images/sonrisa-perfecta-dental-arts-bg.jpg);
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: inherit;
    height: 100vh;
}
.contactoBg:after {
    opacity: .8;
}

.caption {
    font-size: 2rem;
    line-height: 2rem;
    display: block;
    font-weight: 400;
    color: #666;
}
.container-fluid>.navbar-collapse, .container-fluid>.navbar-header, .container>.navbar-collapse, .container>.navbar-header, .form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}
img {
    margin: 0;
}
.containerSonrisas {
    margin-top: 4rem;
}
.form-group .cta {
    position: initial;
    margin-bottom: 0;
}
.navbar-nav {
    float: right;
    margin-top: 0;
    margin-right: 0;
}
.add-on .input-group-btn>.btn {
    border-left-width: 0;
    left: -2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.add-on .form-control:focus {
    box-shadow: none;
    -webkit-box-shadow: none;
    border-color: #ccc;
}
.form-control {
    width: 20%
  }


.modal-body {
    padding: 24px 32px;
}
.navbar-nav .open .dropdown-menu>li>a {
    line-height: 32px;
}
.modal-content {
    border: none;
}
5.panel-default>.panel-heading {
    color: #fff;
    background-color: #713282;
    padding: 20px 2%;
    cursor: pointer;
}
.panel-default>.panel-heading a {
    color: #fff;
    font-size: 22px;
    text-decoration: none;
}
.herohead { font-size: 8rem !important}
.herooffer { margin-left: -80px;}
.herosup { font-size: 25%; margin-top: 0; vertical-align: super;}
.heroconditions {
    position: absolute;
    font-size: 1.3rem;
    font-weight: 400;
    text-align: right;
    bottom: 20px;
    font-family: 'Nunito Sans', sans-serif;
    letter-spacing: -0.5px;
}
.artistName {
        position: absolute;
    left: -50%;
    font-size: 2.3rem;
    font-weight: 600;
    text-align: left;
    bottom: 0;
    font-family: 'Nunito Sans', sans-serif;
}
.contactoBg h1 {
    margin-top: 0;
    padding: 40px 0 0;
    color: #fff;
}
.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, .h4 .small, .h4 small, .h5 .small, .h5 small, .h6 .small, .h6 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, h5 small, h6 .small, h6 small {
    font-weight: 400;
    line-height: 1;
    color: #315B92;
}

.contactIcons {
    padding: 6px 80px;
    color: #fff;
    font-weight: 600;
}
.contactIcons>ul>li>span {
    margin-right: 4px;

}
.ctaBanner {
    background: #fff;
    color: #713282;
    margin-top: 24px;
    border: 1px solid #fff;
    border-radius: 18px;
    font-size: 2.2rem;
    font-weight: 600;
    -webkit-box-shadow: 10px 10px 24px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 10px 10px 24px 0px rgba(0,0,0,0.2);
box-shadow: 10px 10px 24px 0px rgba(0,0,0,0.2);
}
.ctaBanner:hover {
    border: 1px solid #fff;
    background: #713282;
    color: #fff;
}
.contactIcons a {
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration: none;
}
.contactIcons li:last-child {
    padding: 0;
}
a {
    font-size: 1.8rem;
}

.list-unstyled { list-style: none;
    text-indent: 0px;
    margin-left: 0px;}

.redes > li >a >i {
    font-size: 2.4rem;
}



.copyright { font-size: 1.2rem; }
footer i {
    font-size: 1.6rem;
    margin-right: 6px;
}
footer>ul>li {
    padding: 4px 0;
}
.navbar-default .navbar-nav>li>a {
    padding: 36px 24px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
}
.activePage { color: #713282!important; font-weight: 600!important; }


.purple1, .purple2 {
    padding: 80px 24px!important!;
}

.fondoHeroBanner {
    background: linear-gradient(43deg, #8e5b9c, #7799c5, #c383bd, #71c6c6, #315B92, #7e438e, #54b8b9, #c320cc);
    background-size: 1600% 1600%;
    -webkit-animation: herobannerBck 41s ease infinite;
    -moz-animation: herobannerBck 41s ease infinite;
    animation: herobannerBck 41s ease infinite;
    @-webkit-keyframes herobannerBck  {
    
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
            @-moz-keyframes herobannerBck  {
    
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
            @keyframes herobannerBck  {
     
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
;
}
}


.fondoHeroBanner_odd {
    background: linear-gradient(90deg, #713282, #315B92);
    background-size: 400% 400%;

    -webkit-animation: fondoHeroBanner_odd 6s ease infinite;
    -moz-animation: fondoHeroBanner_odd 6s ease infinite;
    animation: fondoHeroBanner_odd 6s ease infinite;
}

@-webkit-keyframes fondoHeroBanner_odd {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes fondoHeroBanner_odd {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes fondoHeroBanner_odd { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.fondoHeroBanner_even {
    background: linear-gradient(270deg, #713282, #315B92);
    background-size: 400% 400%;
/*
    -webkit-animation: fondoHeroBanner_even 6s ease infinite;
    -moz-animation: fondoHeroBanner_even 6s ease infinite;
    animation: fondoHeroBanner_even 6s ease infinite;*/
}
@-webkit-keyframes fondoHeroBanner_even {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes fondoHeroBanner_even {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes fondoHeroBanner_even { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.fondoHeroBanner_bck {
    background: linear-gradient(43deg, #8e5b9c, #7799c5, #c383bd, #71c6c6, #315B92, #7e438e, #54b8b9, #c320cc);
    background-size: 1600% 1600%;
    -webkit-animation: herobannerBck 41s ease infinite;
    -moz-animation: herobannerBck 41s ease infinite;
    animation: herobannerBck 41s ease infinite;
    @-webkit-keyframes herobannerBck  {
    
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
            @-moz-keyframes herobannerBck  {
    
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
            @keyframes herobannerBck  {
     
                    0% {
    background-position: 79% 0%}
                    50% {
    background-position: 22% 100%}
                    100% {
    background-position: 79% 0%}
            }
;
}
}