html {
  scroll-behavior: smooth;
}
#navbarNav ul li a{ font-weight: bold; }
.float-container{ width: 560px; position: relative; top: 0; left: 20%; z-index: 9999; }
.float-container h2{ width: 77%; }
.float-container p{ font-size: 1.3rem; }
.medicos-banner{ border-bottom-left-radius: 15px; }
#cerrar-results i{ position: relative;  top: 4px; }
.fundador{ padding: 20px; }
#servicios .modal-header { border:0; }
.dr{ padding: 10px; }
.br-15{ border-radius: 15px; }
#modalOvulos ul, #modalEsperma ul{ padding-left: 25px; }
.carta{ box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);  transition: 0.3s; border-radius: 15px;}
.tarjeta img, .tarjeta-dr img{ border-top-left-radius: 15px; border-top-right-radius: 15px; }
.tarjeta p{ width: 90%; margin: 10px auto; }
.tarjeta-dr p{ margin: 10px auto; font-size: .9rem; }
.tarjeta-dr{ min-height: 470px; } 
.tarjeta-dr .btn-container{ position: absolute; bottom: .8rem; }
.btn-green{ background-color: #64bfb0; color: white; border-radius: 8px; border: none; padding: 5px 15px; }
.btn-purple{ background-color: #b38bc1; color: white; border-radius: 8px; border: none; padding: 5px 15px; }
.btn-blue{ background-color: #30366a; color: white; border-radius: 8px; border: none; padding: 5px 15px; }
.btn-aqua{ background-color: #008e9e; color: white; border: none; padding: 5px 15px; }
.tarjeta, .tarjeta-dr, .blog-post{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 15px;
}
.tarjeta:hover, .tarjeta-dr:hover, .blog-post:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#videos iframe{ width: 100%; height: 380px; }
.thumb-video{ transition: all .3s ease; }
.thumb-video:hover{ background: #f3f3f3; }
#sucursales-banner p { font-size: 1.3rem; }
.espacio-blanco{ height: 350px; } 
#blog-feed, #servicios, #s2{ background: #f7f7f7; }
#blog-feed .container{ position:relative; top: -9rem; }
.blog-post img{ border-top-right-radius: 15px; border-top-left-radius: 15px; }
.blog-post img.postimg{ border-radius: 15px; }
.postdata p{ font-size: .75rem; }
.postdata hr{ border-color: black; }
.etiqueta{ background: #e4d9e8; padding: 0 7px; border-radius: 5px; display: inline-block; margin: 10px auto; }
header{ background-color: #f3f3f3; }
.blue{ color:#30366a; }
.aqua{ color: #008e9e; }
.black{ color: black; }
.bg-gris{ background: #f3f3f3; }
.dropdown-item { padding: 5px 17px; transition: all .2s ease; }
.dropdown-item:hover { color: white; background: #38c1af; }
#wpadminbar{ display: none; }
.ol-button{ border-radius: 15px; color: white !important; border: 2px solid white; font-weight:bold; background: transparent; padding: 10px; margin: auto; }
#banner{ height: 500px; background-size: cover; }
#banner h2{ font-size: 3rem; line-height: 1; color: #30366a;}
#banner p{ font-size: 1.1rem; margin-top:10px; color: black;}
#banner .carousel-caption{ width: 40%; bottom: 90px; left: 10%; }
#sobre-nosotros hr{ border-top: 3px solid rgba(0,0,0,.1); }
#sobre-nosotros h2{ color: #008e9e; }
#sobre-nosotros p{ font-size:1.25rem; }
#probabilidades .container{ background: #e4d9e8; border-radius: 15px; padding: 15px; }
#probabilidades h2{ color: #30366a; }
#probs-tiles{ width: 75%; margin: auto; }
.prob-tile{ background: white; border-radius: 15px; }
.prob-tile p{ margin-bottom: 5px; }
.prob-tile h2{ font-size: 4rem; color: #008e9e !important; } 
.comillas{ width: 50px !important; position: absolute; top: 10px; left: 4rem;  }
.whiteblock{ padding: 40px; background: white; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }
#carousel-test p{ font-size: 1.1rem; }
#carousel-test .whiteblock-title img{ width: 80px; }
#financiamiento{ background-color: #f7f7f7; height: 380px; }
#financiamiento h2{ color: #30366a; }
#financiamiento p{ margin-bottom: 0; font-size: 1.2rem; }
#oferta-banorte{ position: absolute; left: 35%; top: 2rem; background: #e4d9e8; padding: 40px; border-radius: 25px; z-index: 9; }
.linea{ width: 1px; height: 110px; position: absolute; top: 15px; background: gray; }
#donador{ background-color: #b38bc1; height:115px; }
#reservartulugar{ background-color: #008e9e; }
#donador h2, #reservartulugar h2{ letter-spacing: 6px; color: white; }
.mapa p{ width: 100%; margin: auto; }
#sucursales{ height: 400px; }
#pregs #accordion{ background: #faf0ff ; position: initial; }
#pregs .card-header{background: white; padding: 0;}
#pregs .card button{ color: black; font-weight: bold; }
#pregs #suc-container{ background: #faf0ff ; position: initial; }
#pregs #preguntas-cats button{ border: none; background: none; padding: 10px; font-size: 1.3rem; }
#pregs #preguntas-cats button.active{ font-weight: bold; color: #008e9e;  }
#suc-container{ background: #f3f3f3; padding: 35px 60px; border-radius: 25px; margin-top: 30px; position: absolute; right: 6rem; }
#suc-container p, #suc-container li a:not(.nav-link){ color: black; margin-bottom:0; font-size: 1.3rem; }
#suc-container .nav-pills .nav-link {  font-size: 1.8rem; font-weight: bold; color: black; }
#suc-container .nav-pills .nav-link.active { color: #30366a; background: transparent; }
#suc-container .border-right { border-right: 2px solid gray; }
#prefooter{ height: 370px; background: #008e9e; }
#subfooter{ height: 70px; background: #30366a; color:white; }
.controles{ width: fit-content; position: absolute; right: 1rem; bottom: 2rem; }
.controles img{ width: 30px; }
#sobre-nosotros .owl-nav, #carousel-alianzas .owl-nav{ position: absolute; width: 100%; top: 33%; z-index: 9999; }
#sobre-nosotros .owl-nav .owl-prev, #carousel-alianzas .owl-nav .owl-prev{ position: absolute; left: -3rem; }
#sobre-nosotros .owl-nav .owl-next, #carousel-alianzas .owl-nav .owl-next{ position: absolute; right: -3rem; }
#sobre-nosotros .owl-dots .owl-dot span{ width: 20px; height: 20px; }
#carousel-alianzas .owl-dots{ display: none; }
#sobre-nosotros .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {  background: #e4d9e8; }
.L{ color: #ff0000; }
.G{ color: #ff8200; }
.B{ color: #ffd100; }
.T{ color: #009700; }
.I{ color: #005eb2; }
.Q{ color: #c5008d; }
.mas{ color: #ff00ff; }
#filosofia p{ font-size: 1.2rem; }
.val{ padding: 20px; background: #e4d9e8; border-radius: 20px; height: 220px;}
.float-icon{     position: absolute;
    width: 80px;
    top: -2rem;
    left: 2rem; }
#misionvision{ height: 500px; display: flex; }
.capsule{ background: rgb(255 255 255 / 60%); height: 220px; padding: 1rem; border-radius: 15px;}
.green-button{ background: #38c1af; padding: 10px; color: white; border-radius: 15px; font-size: 1.2rem;}
#servicios-banner, #sucursales-banner{ background-size: cover !important; height: 450px; }
#sucursales-banner h1{ font-size: 4rem; line-height: 1; color: #30366a; }
.burbuja-banner-servicios{ padding: 20px; background: #ffffff82; border-radius: 15px; }
.burbuja-banner-servicios p{ font-size: 1.3rem; }
.formar-familia h2{ color: #30366a; font-weight:bold; }
#sucursales.sucursales-page { height: auto; }
#sucursales.sucursales-page #suc-container{ position: initial; }
#formulario-morado{ background-color:#e4d9e8; padding-top: 25px; height: 700px;}
#burbuja-form{ position: absolute; background: white; padding: 25px; border-radius: 15px; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%); }
#burbuja-form-modal{ background: #e4d9e8; padding: 25px; border-radius: 15px; box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%); }
#burbuja-form input, #burbuja-form select{ height: 45px; border-radius: 0px; }
#burbuja-form-modal input, #burbuja-form-modal select{ height: 45px; border-radius: 0px; }
#burbuja-form .dropdown button, #burbuja-form-modal .dropdown button{ background: white; border: 1px solid #ced4da; border-radius: 0; padding: 10px; }
#burbuja-form .dropdown-item.active, .dropdown-item:active, #burbuja-form .dropdown-menu > li > a:hover, #burbuja-form .dropdown-menu > li > a:focus,
#burbuja-form-modal .dropdown-item.active, .dropdown-item:active, #burbuja-form-modal .dropdown-menu > li > a:hover, #burbuja-form-modal .dropdown-menu > li > a:focus {
    text-decoration: none;
    color: #ffffff;
    background-color: #008e9e;
}
.card2 {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  	border-radius: 10px;
}
.sombra{box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); border-radius: 10px;}
/* On mouse-over, add a deeper shadow */
.card2:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#burbuja-form textarea, #burbuja-form-modal textarea{ border-radius: 0px; height:120px; }
#burbuja-form label, #burbuja-form-modal label{ font-weight: bold; }
#servicios{ padding-top: 8rem; }
.servicio{ padding: 20px 5px; min-height: 250px; background: white;}
.servicio.s2{ min-height: 200px; background: white;}
.servicio p{ font-size: 1.3rem; }
.servicio .foto{  position: absolute; top: -2rem; left: 3rem; }
.s2 .foto{  position: absolute; top: -2rem; left: 2rem; }
.servicio .icono{ height: fit-content; margin: auto; margin-right: 0; }
.modal-panel{
	background: white;
    margin: 0 40px;
    padding: 20px;
    border-radius: 25px;
}
.foto-modal{
	position: absolute;
    z-index: 9;
    right: 5rem;
    top: -6rem;
}
.modal-serv .modal-body{
	padding-top: 9rem;
}
section#title{ height: 160px; background-color: #d4f4ee; }
section#single-img{ margin-top: -1rem; }
#barra .form-control{ height: 45px; }
#post_content h2{ color: #008e9e;}
.page{ display: none; }
.page.active { display: flex; }
#pags-list li {
    margin: 0;
}
button.pag-btn {
    background: none;
    padding: 5px 10px;
    color: black;
    font-size: 1.3rem;
	border: none;
}
button.pag-btn.active {
	color: #008e9e;
    font-weight: bold;
}
.lgbttxt p{font-size: 1.3rem;}
.lgbttxt a{font-size: 1.3rem;}
.lgbttxt li{font-size: 1.3rem; color: #008e9e; font-weight: bold;}

@media screen and (max-width:600px) { 
#float-nums{ right: 2rem !important; }
.float-container{ margin-top: 15px; }
.float-container p{ font-size: 1rem; }
#sobre-nosotros .owl-nav .owl-next, #carousel-alianzas .owl-nav .owl-next{ display: none; }
#suc-container{ right:0; }
#sucursales {
    height: 1000px;
}
.servicio h3{ font-size: 1.50rem; }
#prefooter{ display: none; }
#financiamiento{ background-color: #f7f7f7; height: 550px; }
#donador {
    background-color: #b38bc1;
    height: 250px;
}
#donador .row{ text-align: center; }
#oferta-banorte {
    position: absolute;
    top: 2rem;
    background: #e4d9e8;
    padding: 40px;
    border-radius: 25px;
    z-index: 9;
    width: 275px;
    left: 3rem;
}
#oferta-banorte .linea{ display: none; }
#banner {
    height: 150px;
    background-size: cover;
}
.modal-panel {
    background: white;
    margin: 0px 0px;
    padding: 10px;
    border-radius: 25px;
}
.foto-modal {
    position: absolute;
    z-index: 9;
    right: 2rem;
    top: -7rem;
    width: 130px;
}
.servicio .foto{ width:100px; }
.float-container {
    width: 100%;
    position: initial;
	margin-bottom: 30px;
}
.tarjeta img, .tarjeta-dr img{ width: 100%; }
.tarjeta-dr {
    min-height: 550px;
}
.float-container h2 {
    width: 100%;
	margin-bottom: 20px;
}
#sucursales-banner p {
    font-size: 1rem;
}
 .h2, h2, h1{ font-size: 1.7rem; }
 .burbuja-banner-servicios p { 
    font-size: .8rem;
}
.green-button {
    font-size: .8rem;
}
#servicios {
    padding-top: 3rem;
}
 #suc-container { padding: 35px 15px; }
 .val img{ width: 50px; }
 .capsule { height: 320px; }
 .capsuleS { height: 240px; }
 #misionvision{ height: auto; }
 .float-icon{ top: 10px; }
 header ul li { margin: 5px 0px !important;}
 #sucursales-banner h1 { font-size: 2.5rem; }
 #servicios-banner, #sucursales-banner{ height: 280px; }
 #suc-container p, #suc-container li a:not(.nav-link) { color: black; margin-bottom: 0; font-size: 1rem; }
 #suc-container .linea{ display: none; }
 #formulario-morado{ height: 800px; }
}


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

}