/*GENERAL*/

html {
  scroll-behavior: smooth;
}

body, p, h1, h2, h3, h4, img, section, nav {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'Montserrat', sans-serif;
  font-size: 15px;
}

img {
	max-width: 100%;
}

h2 {
  font-weight: 400;
  font-size: 32px;
  text-transform: uppercase;
}

a,
a:hover {
	color: inherit;
	text-decoration: none;
}

.hidden-lg {
    display:none;
}

.close {
  font-size: 3.5rem;
  color: white;
  opacity: 1 !important;
}

.close:hover {
  opacity: 1 !important;
  color: white;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  /*display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0; 
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.modal-backdrop.show {
  opacity: .8;
}

/*HEADER*/

header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 11;
}

header .bg-light {
	background: #56004c !important;
	color: white !important;
}

header .navbar .contacto {
	font-size: 13px;
  text-align: right;
}

header .menu {
	background: rgba(255, 255, 255, 0.9);
  position: relative;
  z-index: 111;
  padding: 0;
}

header .menu .navbar-nav {
	margin: 0 auto;
}

header .menu .navbar-nav .nav-item a {
	color: #560c4c;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
}

header .menu .navbar-nav .nav-item a:hover {
  background: linear-gradient(45deg, rgba(255, 255, 255, 0),white,rgba(255, 255, 255, 0));
}

.menu .navbar-nav > li::before {     
  content: "";
  position: absolute;
  top: 11px;
  height: 16px;
  border-left: 1px solid #560c4c; 
}    

.menu .navbar-nav > li:first-child::before {     
  content: "";     
  position: absolute;    
  top: 32px;    
  height: 35px;  
  right: 0;  
  border-left: 0px;     
}

.space-top {
  margin-top: 118px;
}

/*FOOTER*/

footer {
	background: #212121;
	color: white;
  padding: 30px 10px;
}

footer p {
  font-size: 12px;
  text-align: center;
}

/*INICIO*/

/*
.carousel-indicators,
.carousel-control-prev,
.carousel-control-next {
    display: none;
}

.carousel {
    z-index: -1;
}
*/

.carousel-inner img {
  width: 100%;
  height: 100%;
}

.carousel-caption {
	bottom: 50px;
  position: absolute;
  right: 10%;
  left: 10%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
}

.carousel-caption .text1 {
  letter-spacing: 8px;
}

.carousel-caption .text2 {
}

.carousel-caption .text3 {
  letter-spacing: 8px;
}

.carousel-caption p {
  margin: 0 auto;
  font-size: 40px;
  line-height: 43px;
  text-transform: uppercase;
  text-shadow: 0px 0px 19px rgba(0, 0, 0, 0.66);
  top: 50%;
  left: 50%;
  transform: translate(0%, -80%);
}

.carousel-item {
  height: 500px;
}

.carousel-item1 {
  background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url("img/inicio/slide3.jpg");
  background-size: cover;
  background-position: center center;
}

.carousel-item2 {
  background: linear-gradient(rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.2)), url("img/inicio/slide2.jpg");
  background-size: cover;
  background-position: center center;
}

.certificada {
  margin: 0 auto;
  display: block;
  text-align: center;
  position: inherit;
  font-weight: 300;
  color: white;
  background: #212121;
  padding: 30px 10px;
}

.universidades {
	padding: 15px 50px;
}

.universidades img {
  margin: 0 auto;
  display: block;
  padding: 5px 50px;
}

#doctora {
  padding: 80px 0;
  background: rgb(232, 232, 232);
}

#doctora h1 {
  font-size: 22px;
  color: #570c4c;
}

#doctora .modal h1 {
  color: white;
}

#doctora h2 {
  color: #aa769c;
}

#doctora .svg-inline--fa {
  color: #570c4c !important;
}

#doctora ul {
  padding-left: 0;
  padding-top: 20px;
}

#doctora ul li {
  list-style: none;
}

#doctora .contact {
  font-size: 13px;
  line-height: 20px;
}

#doctora .btn-secondary {
  background: transparent;
  border: none;
  color: black;
  font-size: 15px;
  padding: 0 10px 0 0;
  margin-top: 10px;
  display: block;
}

.tooltip-custom .tooltip-inner {
  background-color: rgba(0,0,0,1) !important;
  padding: 20px;
  text-align: left;
  min-width: 400px;  
  position: relative;
}

.tooltip-arrow {
  background: rgba(0,0,0,1);
  width: 20px;
  height: 20px;
  transform: rotate(45deg) translateY(-40%);
  -ms-transform: rotate(45deg) translateY(-40%);
  border-radius: 2px;
  position: absolute;
  left:-4px;
  top: 50%;
}

#doctora .btn-primary {
  background: #570c4c;
  border: none;
  font-size: 14px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/*QUIEN SOY*/

#quien-soy h1 {
  color: white;
  font-size: 20px;
  font-weight: 700;
  margin-top: 20px;
}

.doctora {
  background: linear-gradient(rgba(87, 12, 76, 0.7), rgba(87, 12, 76, 0.7)), url(img/inicio/bg1.jpg) fixed;
  background-size: cover;
  padding: 30px 20px;
}

.doctora p {
  color: white;
  font-size: 13px;
  margin: 10px 0;
}

.doctor {
  position: absolute;
  box-shadow: 10px 10px 0px rgba(86, 0, 76, 0.6);
}

.cv {
  padding: 20px 0;
  font-size: 14px;
}

.cv p {
  margin: 10px 0;
}

/*QUE HACE UN OTORRINO*/


#que-hace-un-otorrino.otorrino {
  padding: 60px 0;
  background: linear-gradient(rgba(87, 12, 76, 0.7), rgba(87, 12, 76, 0.7)), url(img/inicio/bg1.jpg) fixed;
  background-size: cover;
  background-position: center bottom;
  color: white;
}

#que-hace-un-otorrino.otorrino h2 {
    color: #ffffff;
}

#que-hace-un-otorrino.otorrino h3 {
    color: #ffffff;
    font-size: 19px;
}

#que-hace-un-otorrino.otorrino p {
    font-size: 14px;
    margin: 15px 0;
}

#que-hace-un-otorrino img {
  height: 60px;
}

#que-hace-un-otorrino .descripcion {
  font-size: 16px;
  padding: 20px;
  margin: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 30px !important;
}

#que-hace-un-otorrino .procedimiento p {
  font-size: 13px;
}

/*PADECIMIENTOS FRECUENTES*/

#padecimientos-frecuentes.padecimientos {
    padding: 50px 30px 90px;
}

#padecimientos-frecuentes.padecimientos h2 {
  color: #56004c;
  padding: 30px 10px 30px;
}

#padecimientos-frecuentes.padecimientos .oido,
#padecimientos-frecuentes.padecimientos .nariz,
#padecimientos-frecuentes.padecimientos .faringe,
#padecimientos-frecuentes.padecimientos .cuello,
#padecimientos-frecuentes.padecimientos .facial,
#padecimientos-frecuentes.padecimientos .pediatrica,
#padecimientos-frecuentes.padecimientos .trastornos,
#padecimientos-frecuentes.padecimientos .endoscopia {
    height: 230px;
    border: 1px solid white;
}

#padecimientos-frecuentes.padecimientos .oido {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/oido.jpg);
    background-size: cover;
    background-position: center right;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .nariz {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/nariz.jpg);
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .faringe {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/faringe.jpg);
    background-size: cover;
    background-position: center left;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .cuello {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/cuello.jpg);
    background-size: cover;
    background-position: top center;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .facial {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/facial.jpg);
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .pediatrica {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/pediatrica.jpg);
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .trastornos {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/pediatrica.jpg);
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .endoscopia {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/endoscopia.jpg);
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .trastornos {
    background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)), url(img/padecimientos-frecuentes/trastornos.jpg);
    background-size: cover;
    background-position: center center;
    cursor: pointer;
}

#padecimientos-frecuentes.padecimientos .oido:hover,
#padecimientos-frecuentes.padecimientos .nariz:hover,
#padecimientos-frecuentes.padecimientos .faringe:hover,
#padecimientos-frecuentes.padecimientos .cuello:hover,
#padecimientos-frecuentes.padecimientos .oido:hover,
#padecimientos-frecuentes.padecimientos .facial:hover,
#padecimientos-frecuentes.padecimientos .pediatrica:hover,
#padecimientos-frecuentes.padecimientos .trastornos:hover,
#padecimientos-frecuentes.padecimientos .endoscopia:hover {
    filter: brightness(140%);
}

#padecimientos-frecuentes.padecimientos h3 {
  color: white;
  mix-blend-mode: hard-light;
  position: absolute;
  left: 0;
  transform-origin: top left;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 15px;
  padding: 11px 10px 0px;
  line-height: 20px;
}

#padecimientos-frecuentes .modal-body {
    padding: 2rem;
}

#padecimientos-frecuentes .modal-body p {
    font-size: 13px;
    margin: 7px 0;
}

#padecimientos-frecuentes #modal-oidos .modal-content {
    background: url("img/padecimientos-frecuentes/oido-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes #modal-nariz .modal-content {
    background: url("img/padecimientos-frecuentes/nariz-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes #modal-faringe .modal-content {
    background: url("img/padecimientos-frecuentes/faringe-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes #modal-cuello .modal-content {
    background: url("img/padecimientos-frecuentes/cuello-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes #modal-facial .modal-content {
    background: url("img/padecimientos-frecuentes/facial-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes #modal-pediatrica .modal-content {
    background: url("img/padecimientos-frecuentes/pediatrica-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes #modal-trastornos .modal-content {
    background: url("img/padecimientos-frecuentes/trastornos-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes #modal-endoscopia .modal-content {
    background: url("img/padecimientos-frecuentes/endoscopia-bg.jpg");
    background-size: cover;
}

#padecimientos-frecuentes .close {
    position: absolute;
    right: 10px;
    top: 0;
    color: white;
    height: 50px;
    width: 50px;
    z-index: 1111111;
    font-size: 65px;
    opacity: 1;
}

/*CONTACTO*/

#contacto {
  background: #640e4c;
  padding: 60px 10px;
}

#contacto h2 {
  color: white;
}

#contacto p {
  font-size: 14px;
  margin-bottom: 20px;
  color: white;
}

#contacto input,
#contacto textarea {
  width: 100%;
  border-radius: 2px;
  border: none;
  margin: 7px 0;
  padding: 7px 15px;
  font-size: 13px;
  color: #000000;
  background: #ffffff;
}

#contacto input[type=submit] {
    background: #9c7599;
    color: white;
    width: auto;
    float: right;
    padding: 5px 25px;
    cursor: pointer;
}

form a,
form a:hover {
    color: white;
    text-decoration: none;
}

.gmnoprint {
    display: none;
}

.footer-contacto {
    bottom: 0;
    position: absolute;
    width: 100%;
}


@media screen and (max-width: 991px) {
	
    .hidden-lg {
        display: inline-block;
    }

    .hidden-xs {
		display: none;
	}

    header {
        position: initial;
    }
    
    .carousel-caption {
        right: 10%;
        left: 10%;
        top: 0px;
    }

    .carousel-caption .text1 {
        letter-spacing: 1px;
    }

    .carousel-caption .text2 {
        letter-spacing: 1px;
    }

    .carousel-caption .text3 {
        letter-spacing: 1px;
    }

    .carousel-caption p {
        font-size: 20px;
        line-height: 28px;
        margin: 10px;
        width: auto;
        margin-top: 240px;
    }

    .navbar-brand {
        max-width: 70%;
    }

    .space-top {
        margin-top: 0;
    }
    
    .doctora {
        padding: 30px 10px;
    }

    .doctor {
        position: inherit;
    }

    .cv {
        padding: 30px 10px;
    }

    #padecimientos-frecuentes .padecimientos {
        padding: 10px 20px;
    }

    #padecimientos-frecuentes .padecimientos .oido,
    #padecimientos-frecuentes .padecimientos .nariz,
    #padecimientos-frecuentes .padecimientos .faringe,
    #padecimientos-frecuentes .padecimientos .cuello,
    #padecimientos-frecuentes .padecimientos .oido,
    #padecimientos-frecuentes .padecimientos .facial,
    #padecimientos-frecuentes .padecimientos .pediatrica {
        height: 200px;
        margin-bottom: 6px;
    }

    #padecimientos-frecuentes .padecimientos h2 {
        transform: rotate(0deg) translateX(0);
        left: 0;
        bottom: 0;
        width: 100%;
        line-height: 21px;
    }

    .modal-dialog {
        padding-top: 60px;
    }

    #contactform {
        margin: 0 auto;
        display: block;
        position: relative;
        float: none;
        right: 0;
        border-radius: 0;
        top: 0;
        max-width: 100%;
        font-size: 18px;
    }

    .footer-contacto {
        bottom: auto;
    }

    #contacto .overlay {
        display: none;
    }

    #googlemaps {
        display: none;
    }
}