.dropdown-toggle{ background: white !important; } /*------------ informacion superior ---------------*/ .superior{ background: #064D8C;} .superior .superior-info p{ color:white; font-size: 12px; font-weight: bolder;font-family: 'Muli', sans-serif; margin: 3px 0px; padding:5px 5px 5px 10px; float: left;} .superior .superior-info span{font-weight: bolder;} .superior .superior-info img{width: 13px; margin: 0px 2px} @media screen and (max-width: 337px){ .superior .superior-info p{font-size: 11px;} } /*------------ informacion superior ---------------*/ /*-- menu normal --*/ .menu-main span{padding-top: 3px;font-size: 12px;} .menu-main .dropdown-item a:hover{background: #5f5e5e!important; transition: all 0.3s; color:white;} nav.compu { background: rgba(6,77,140,0.0); height: 90px; position: fixed; width: 100%; z-index: 3; transition: all 0.3s; padding: 5px 0;} nav .logo-prin{ position: relative; width: 100%; height: 120px; padding-top: 5px; } nav .logo-prin img{ position: absolute; width: 160px; left: 80px; } nav .menu-main ul{ list-style: none; padding:0; margin: 0;width: 100%;} nav .menu-main .no{ text-decoration: none; text-align: center; display: inline-block; padding:10px 25px; margin:20px 20px; color: #5F5E5E; font-size: 18px; float: left; position: relative; overflow: hidden; font-family: 'Muli', sans-serif; transition: all 0.4s; cursor: pointer; background: transparent !important;} nav .menu-main .no:before{ content: ""; position: absolute; bottom: 0; height: 3px; background: #F9B606; width: 0; left: 50%; right: 50%; transition: all 0.4s; border-radius: 5px; transition: all 0.3s;} nav .menu-main .no:hover{ color:black; transition: all 0.4s; font-weight: bolder; } nav .menu-main .no:hover:before{ width: 100%; left: 0; right: 0; transition: all 0.4s; } nav .menu-main .marcado:before{ content: ""; position: absolute; bottom: 0; height: 3px; background: #F9B606; width: 100%;left: 0; right: 0; transition: all 0.4s; border-radius: 5px; transition: all 0.3s;}/*padding:10px 15px ;margin:20px 3px; */ nav .menu-main .marcado{ text-decoration: none; text-align: center; display: inline-block; padding:10px 25px; margin:20px 20px; color:black; font-size: 18px; float: left; font-weight: bolder; background: transparent !important; position: relative; overflow: hidden; font-family: 'Muli', sans-serif; cursor: pointer;} /*-- menu normal --*/ /* desplegable */ .dropdown-toggle:hover .open>.dropdown-menu { display: block; } .dropdown-menu{ left: 22%; font-family: 'Muli', sans-serif;} .dropdown-submenu {position: relative;} .dropdown-submenu>.dropdown-menu { top: 0; left: 100%!important; margin-top: -6px; margin-left: -1px!important;} .dropdown-submenu:hover>.dropdown-menu { display: block;} .dropdown-submenu:hover>.dropdown-menu { display: block;} /*flechita*/ .dropdown-submenu>a:after {display: block; content: " "; float: right; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 5px 0 5px 5px; border-left-color:#064D8C; margin-top: 5px!important; margin-right: -2px!important;} .dropdown-submenu:hover>a:after {border-left-color:#064D8C;} /*flechita*/ .dropdown-menu > li > a { padding: 5px 5px !important; border-bottom:solid 1px rgba(95,94,94,0.2); padding-left: 5px!important;} .dropdown-submenu.pull-left { float: none;} .dropdown-submenu.pull-left>.dropdown-menu { left: -100%!important; margin-left: 10px!important; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px;} .dropdown-menu a:hover{background: #064D8C!important; color:white !important;} .dropdown-submenu>a:hover:after{border-left-color:white;} /* desplegable */ /*-- menu celular --*/ .mov{position: fixed; width: 100%;z-index: 99;} .menu-celular{ background:rgba(254,254,255); position: fixed; width: 100%; height: 60px; padding:8px; z-index: 99; -webkit-box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); -moz-box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); box-shadow: 0px 1px 5px 0px rgba(95,94,94,1);} .menu-celular .hamburger p{ font-family: 'Muli', sans-serif; font-size: 20px; font-weight: bolder; color: #5F5E5E;} .menu-celular .hamburger span{ font-size: 25px; color: #064D8C; padding:10px 7px 7px 7px; cursor: pointer; } .menu-celular .datos span{ font-size: 25px; color:#064D8C; padding:10px 7px 7px 7px; float: right; cursor: pointer; } .menu-enlaces{ background:rgba(6,77,140,0.9);width: 100%; height: 300000px; position: absolute; z-index:-1000000; top:-100%; left: 0; } .menu-enlaces .logo-celular{width: 100%; min-height: 130px; position: relative; overflow: hidden;} .menu-enlaces .logo-celular span{ position: absolute; right: 0; top: 0; font-size: 25px; font-weight: bold; color: white; cursor: pointer; } .menu-enlaces .logo-celular img{width:200px; cursor: pointer;} .menu-enlaces .enlaces ul{list-style:none; padding:0; margin:0;} .menu-enlaces .enlaces .no{ text-decoration: none; display: block; padding:5px; margin: 5px; text-align: center; font-family: 'Muli', sans-serif; font-size: 20px; color: white; transition: all 0.3s;} .menu-enlaces .enlaces .no:hover{ color: #F9B606; font-weight: bold; transition: all 0.3s;} .menu-enlaces .enlaces .marcado{ text-decoration: none; display: block; padding:5px; margin: 5px; text-align: center; font-family: 'Muli', sans-serif; font-size: 20px; color: #F9B606; font-weight: bold; transition: all 0.3s;} .comunicacion { background:rgba(95,94,94,0.9);width: 100%; height: 300000px; position: absolute;z-index:-1000000; top:-100%; left: 0;text-align: center;} .comunicacion .cerrar-info{ position: relative; overflow: hidden; width: 100%; height: 50px; } .comunicacion .cerrar-info span{position: absolute; right: 0; top: 0; color: white; font-size: 30px; cursor:pointer;} .comunicacion .celular span{ color: white; padding: 10px; background:rgba(6,77,140,1); border-radius: 50%; font-size: 30px; margin-bottom: 15px;} .comunicacion p{ color: white; font-size: 14px; font-family: 'Muli', sans-serif;} .comunicacion .cita a{ text-decoration: none; font-size: 14px; font-family: 'Muli', sans-serif; color: white; background:rgba(6,77,140,1); padding: 10px 15px; border-radius: 12px; font-weight: bold;} /*-- menu celular --*/ /*-- foto principal --*/ .foto-principal{ background-image: url(../imagenes/jpg/foto-principal.png); background-attachment: fixed; background-repeat: no-repeat; background-position:right 35px; background-size:cover; width: 100%; height: 90vh;} .foto-principal .contenedor{height: 90vh; position: relative; overflow: hidden;} .foto-principal .text-principal { min-height: 150px; text-align: center; position:absolute; bottom: 30%; width: 100%; left: 0;} .foto-principal .text-principal h2{text-align: center;font-weight: bolder;font-size: 60px; font-family: 'Muli', sans-serif; padding: 5px;color:#064D8C; margin: 0;} .foto-principal .text-principal p{font-size: 30px; font-family:'Muli', sans-serif; color: #5F5E5E; text-align: center; margin: 0;} .foto-principal .text-principal a{ text-decoration: none; font-family: 'Muli', sans-serif; padding:10px 15px; border-radius:20px; background: #F9B606; color: white; font-size: 18px; transition: all 0.3s;} .foto-principal .text-principal a:hover{padding:15px 20px; transition: all 0.3s; color: #064D8C;} @media (min-width: 1200px) and (max-width:1260px){ .foto-principal .text-principal h2{font-size: 70px;} .foto-principal .text-principal { bottom: 20%;} } @media (min-width: 1027px) and (max-width:1199px){ .foto-principal .text-principal h2{font-size: 70px;} .foto-principal .text-principal { bottom: 15%;} } @media (min-width: 992px) and (max-width:1026px){ .foto-principal .text-principal h2{font-size: 50px;} .foto-principal .text-principal { bottom: 20%;} } @media (min-width: 540px) and (max-width:991px){ .foto-principal .text-principal h2{font-size: 70px;} .foto-principal .text-principal { bottom: 8%; background: rgba(254,254,255,0.5); padding: 20px 0;} } @media (min-width: 394px) and (max-width:539px){ .foto-principal .text-principal h2{font-size: 50px;} .foto-principal .text-principal p{color:black;} .foto-principal .text-principal { bottom: 0%;background: rgba(254,254,255,0.8); padding: 180px 0; height: 100%;} } @media (min-width: 354px) and (max-width:393px){ .foto-principal .text-principal h2{font-size: 50px;} .foto-principal .text-principal p{color:black;} .foto-principal .text-principal { bottom: 0%;background: rgba(254,254,255,0.8); padding: 160px 0; height: 100%;} } @media (min-width: 341px) and (max-width: 354px){ .foto-principal .text-principal h2{font-size: 48px;} .foto-principal .text-principal p{color:black;} .foto-principal .text-principal { bottom: 0%;background: rgba(254,254,255,0.8); padding: 160px 0; height: 100%;} } @media screen and (max-width: 341px){ .foto-principal .text-principal h2{font-size: 40px;} .foto-principal .text-principal p{color:black;} .foto-principal .text-principal { bottom: 0%;background: rgba(254,254,255,0.8); padding: 180px 0; height: 100%;} } /*-- foto principal --*/ /*-- nosotros --*/ .nosotros .doc-foto{ position: relative; overflow: hidden; width: 100%; height: 350px;} .nosotros .doc-foto img{ position: absolute; width: 100%; height: 100%; object-fit: contain;} .nosotros .nos1{ position: relative; overflow: hidden; width: 100%; height: 180px; } .nosotros .nos1 img{ border-radius: 50%; position: absolute; width: 100%; height: 100%; object-fit: cover;} .nosotros .historia h2{ font-family: 'Muli', sans-serif; font-size: 26px; text-align: center; color: #064D8C; font-weight: bold; } .nosotros .historia h6{ font-family: 'Muli', sans-serif; font-size: 18px; color:#5F5E5E; text-align: center;} .nosotros .historia p{ font-family: 'Muli', sans-serif; font-size: 14px; color:#5F5E5E; text-align: justify;} .nosotros .historia a{ text-decoration: none; font-family: 'Muli', sans-serif; padding:10px 15px; border-radius: 0px; background: #064D8C; color: white; font-size: 14px; transition: all 0.3s;} .nosotros .historia a:hover{padding:10px 20px; transition: all 0.3s; border-radius:20px;} /*-- nosotros --*/ /*-- promesa de la empresa --*/ .promesa{ background: #064D8C; min-height: 400px; transition: all 0.3s;} .promesa .titulo-prom h2{ color:white; text-align: center; font-family:'Muli', sans-serif; font-weight: bold; font-size: 40px; padding-bottom: 5px;} .promesa .titulo-prom p{ font-size: 16px; font-family:'Muli', sans-serif; color: white; text-align: center;} .promesa .promesa1{ background: white; padding:10px; transition: all 0.3s; } .promesa .promesa1:hover{ background: #064D8C; border:solid 1px white; transition: all 0.3s; } .promesa .promesa1 .icono span{ color: #064D8C; font-size: 50px; padding:15px 15px 10px 15px; background: #DDDEDF; border-radius: 50%; margin:10px; transition: all 0.3s;} .promesa .promesa1:hover .icono span{ color: #5F5E5E; transition: all 0.3s; background: white;} .promesa .promesa1 .cont-prom h2{ text-align: center; font-family:'Muli', sans-serif; font-weight: bold; color: #064D8C; font-weight: bold; font-size: 18px; transition: all 0.3s;} .promesa .promesa1:hover h2{ color: white; transition: all 0.3s;} .promesa .promesa1 .cont-prom p{ text-align: center; font-family:'Muli', sans-serif; font-size: 16px; padding-bottom: 20px; border-bottom: 3px solid #F9B606; transition: all 0.3s;} .promesa .promesa1:hover p{ color: white; transition: all 0.3s;} /*-- promesa de la empresa --*/ /*-- servicios --*/ .servicios .tit-ser-prin{ text-align: center; font-family:'Muli', sans-serif; color: #064D8C; font-weight: bold; font-size: 45px; position: relative; overflow: hidden; margin: 0; padding-bottom: 10px;text-align:center;} .servicios .tit-ser-prin-re{ text-align: center; font-family:'Muli', sans-serif; color: #064D8C; font-weight: bold; font-size: 45px; position: relative; overflow: hidden; margin: 0; padding-bottom: 10px;text-align:center;} @media screen and (max-width:425px){.servicios .tit-ser-prin-re{font-size: 30px;}} .servicios .titulo h2{ text-align: center; font-family:'Muli', sans-serif; color: #064D8C; font-weight: bold; font-size: 45px;max-width: 300px; margin:auto;} .servicios .titulo p{ text-align: center; font-family:'Muli', sans-serif; color: #5F5E5E; padding:5px 5px 15px 5px; font-size: 16px; position: relative; overflow: hidden; max-width: 300px;margin:auto;} .servicios .titulo p:before{ content: ""; position: absolute; height: 5px; background: #5F5E5E; width: 15%; bottom: 0; border-radius: 5px; left: 42%; } .servicios .servicio1{ position: relative; width: 100%; height: 100%; height: 320px; overflow: hidden;} .servicios .servicio1 img{ position: absolute; width: 100%; height: 100%; object-fit: cover; left: 0;cursor: pointer;} .servicios .servicio1 p{ position: absolute; background:rgba(10,11,11,0.8); bottom: -100%; width: 100%; margin:0; padding:8px; color: white; font-family:'Muli', sans-serif; font-size: 12px; text-align: justify; transition: all 0.3s;} .servicios .servicio1:hover p{ bottom: 0px; transition: all 0.3s;} .servicios .titulo-service h2{ font-family:'Muli', sans-serif; font-size: 20px; color:white; text-align: center; margin-top: 0; font-weight: bold; background:#5F5E5E; padding:10px; transition: all 0.3s;} .servicios .titulo-service h2:hover{ background:#064D8C; transition: all 0.3s;} .servicios .titulo-service a{text-decoration: none;} .servicios .boton-services a{ text-decoration: none; font-family: 'Muli', sans-serif; padding:10px 15px; border-radius: 20px; background: #064D8C; color: white; font-size: 14px; transition: all 0.3s;} .servicios .boton-services a:hover{padding:10px 20px; transition: all 0.3s; border-radius:0px;} .servicios .boton-services span{transition: all 0.3s;} .servicios .boton-services a:hover span{padding-left: 8px; transition: all 0.3s; color:#F9B606;} @media screen and (max-width: 320px){ .servicios .titulo h2{ font-size: 35px;} .servicios .titulo p{font-size: 14px;}} /*-- servicios --*/ /*-- frase --*/ .frase{ background: rgba(220,221,223,0.3); min-height: 200px;} .frase .frase-text h2{ font-family:'Muli', sans-serif; font-size: 45px; color:#5F5E5E; text-align: center; font-weight: bold;} .frase .frase-text p{ font-family:'Muli', sans-serif; color:#064D8C; font-size: 20px; text-align: center; } @media screen and (max-width: 320px){ .frase .frase-text h2{ font-size: 35px;}} /*-- frase --*/ /*--blog--*/ .blog .titulo h2{ text-align: center; font-family:'Muli', sans-serif; color: #064D8C; font-weight: bold; font-size: 45px; position: relative; overflow: hidden; max-width: 300px; margin:auto;} .blog .titulo p{ text-align: center; font-family:'Muli', sans-serif; color: #5F5E5E; padding:5px 5px 15px 5px; font-size: 16px; position: relative; overflow: hidden; max-width: 300px;margin:auto;} .blog .titulo p:before{ content: ""; position: absolute; height: 5px; background: #5F5E5E; width: 15%; bottom: 0; border-radius: 5px; left: 42%; } .imagen-blog{ position: relative; width: 100%; height: 100%; height: 280px; overflow: hidden; border:solid 2px #DDDFDE; } .imagen-blog img{ position: absolute; width: 100%; height: 100%; object-fit: cover; left: 0;} .descripcion-blog p{text-align: justify;font-family:'Muli', sans-serif;font-size: 14px; color:#5F5E5E;} .descripcion-blog h1{ font-family:'Muli', sans-serif; font-size: 18px; color:#064D8C; text-align: center; margin-top: 0; font-weight: bold;} .blog .boton-mas p{ padding: 8px;border-radius: 5px;background:#064D8C; color: white;font-size: 14px; font-family:'Muli', sans-serif; width: 100%;max-width: 100px;cursor: pointer;transition: all 0.3s;} .blog .boton-mas p:hover{max-width: 110px; transition: all 0.3s;} .blog .boton-mas span{padding-left: 5px; transition: all 0.3s;} .blog .boton-mas p:hover span{padding-left: 10px; transition: all 0.3s;color:#EFCB18 ;} .blog .boton-blogs a{ text-decoration: none; font-family: 'Muli', sans-serif; padding:10px 15px; border-radius: 20px; background: #5F5E5E; color: white; font-size: 14px; transition: all 0.3s;} .blog .boton-blogs a:hover{padding:10px 20px; transition: all 0.3s; border-radius:0px;} .blog .boton-blogs span{transition: all 0.3s;} .blog .boton-blogs a:hover span{padding-left: 8px; transition: all 0.3s; color:#F9B606;} /*--blog--*/ /*-- banner --*/ .banner{ background-image: url(../imagenes/jpg/banner.jpg); background-position: center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; min-height: 350px;} /*.banner .fondo{ background: #064D8C; opacity:0.1; width: 100%; min-height: 350px;}*/ .text-banner{ margin-top: 70px; margin-bottom: 70px;} .banner p{ font-family:'Muli', sans-serif; font-size: 20px; color: black;} .banner h2{ font-family:'Muli', sans-serif; font-size: 40px; color: #064D8C; font-weight: bolder;} .banner .text-banner a{ text-decoration: none; font-size: 14px; font-family:'Muli', sans-serif; text-align: center; background:#064D8C; color: white; padding:10px 15px 10px 15px; border-radius: 20px; transition: all 0.3s;} .banner .text-banner a:hover{ padding:10px 25px 10px 15px; transition: all 0.3s;} .banner .text-banner span{ transition: all 0.3s;} .banner .text-banner a:hover span{ padding-left: 10px; transition: all 0.3s;} /*-- banner --*/ /*--footer--*/ footer{ background:#064D8C;} footer .logo{width: 100%;position: relative;overflow: hidden;height: 200px; text-align: center;} footer .logo img{position: absolute;width: 100%;height: 100%;object-fit: contain;left: 0;} footer .redes img{ background:#E8E5E5; border-radius: 50%; padding: 8px;margin:5px;width: 36px; transition: all 0.3s; cursor: pointer;} footer .redes img:hover{background:#064D8C; transition: all 0.3s; border:solid 2px white;} footer .contactanos-footer h2{font-family:'Muli', sans-serif; font-size: 24px; color: white; font-weight: bolder;padding-bottom: 8px; position: relative; overflow: hidden;} footer .contactanos-footer h2:before{ content: ""; position: absolute; height: 3px; width: 15%; background: #DFA20A;bottom: 0; left: 0; border-radius: 5px;} footer .contactanos-footer p{ font-family:'Muli', sans-serif; font-size: 14px; color: white; } footer .contactanos-footer span{ border-radius: 50%; padding:8px; background: #5F5E5E; color: white; font-size: 18px;} /*--footer--*/ /*derechos*/ .derechos{background:#5F5E5E;} .derechos p{text-align:center; color:white; padding: 10px; font-family:'Muli', sans-serif;font-size: 16px;margin-bottom: 0px;} /*derechos*/ /*------------------------------* BLOG *----------------------------*/ .B-portada-blog{ background-image: url(../imagenes/jpg/blog-portada.jpg); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; left: 0; width: 100%;} .titulo-general-blog{ position: absolute; width: 100%; max-width: 580px; left: -50px; bottom: 5%; background: white; transform: skew(-30deg); padding-left: 100px;} .titulo-general-blog h2{ transform: skew(30deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder; font-family: 'Muli', sans-serif; font-size: 40px; color: #064D8C;} /*articulos*/ .articulo .imagen-articulo img{ margin: auto;} .articulo .info-articulo h2{ text-align: center; color: #064D8C; font-family:'Muli', sans-serif; font-size: 35px; font-weight: bolder; padding: 5px; } .articulo .info-articulo p{ text-align: justify; font-size: 14px; color: #5F5E5E; font-family:'Muli', sans-serif;} .articulo .info-articulo text{ color:#064D8C; font-family: 'Muli', sans-serif; font-style: italic; } .articulo .otros h2{ text-align: center; color: #5F5E5E; font-weight: bolder; font-family: 'Muli', sans-serif; font-size: 20px; padding-bottom: 10px; border-bottom: solid 2px #DFA20A; } .articulo .otros .titulo-articulos p{ text-align: center; font-family: 'Muli', sans-serif; color: #064D8C; font-size: 14px; font-weight: bolder;} .articulo .otros .titulo-articulos text{ font-size: 12px; color: #5F5E5E; text-align: justify;} .articulo .otros .col-lg-6 {min-height: 130px; } .relacionados-blog h1{ font-size: 24px; color: #5F5E5E; font-family:'Muli', sans-serif; font-weight: bolder; text-align: center; padding-top: 30px; border-top: solid 2px #DFA20A; margin-bottom: 0; padding-bottom: 0;} .relacionados-blog .rel-img{ position: relative; overflow: hidden;width: 100%;height: 150px;} .relacionados-blog .rel-img img{ position: absolute; object-fit: cover; width: 100%; height: 100%;} .relacionados-blog .tit-des-rel h2{color: #064D8C; font-family:'Muli', sans-serif; font-weight: bolder; text-align: center; font-size: 16px;} .relacionados-blog .tit-des-rel p{color: #5F5E5E; font-family:'Muli', sans-serif; text-align: justify; font-size: 13px;} /*articulos*/ @media (min-width: 432px) and (max-width: 570px){ .titulo-general-blog h2{font-size: 30px;} .titulo-general-blog{padding-left: 70px;}} @media screen and (max-width: 431px){ .titulo-general-blog h2{font-size: 30px;transform: skew(0deg); width: 100%; text-align: center;} .titulo-general-blog{padding-left: 0px;transform: skew(0deg); width: 100%;left:0px}} /*------------------------------* BLOG *----------------------------*/ /*----------------------------* SERVICIOS CADA UNO *-------------------------------*/ .contenido-servicio .desc-serv p{color: #5F5E5E; font-family:'Muli', sans-serif; text-align: justify; font-size: 16px; } .contenido-servicio .desc-serv a{ text-decoration: none; font-size: 14px; font-family:'Muli', sans-serif; text-align: center; background:#064D8C; color: white; padding:10px 15px 10px 15px; border-radius: 20px; transition: all 0.3s;} .contenido-servicio .desc-serv a:hover{ padding:10px 17px 10px 15px; transition: all 0.3s;} .contenido-servicio .desc-serv span{ transition: all 0.3s;} .contenido-servicio .desc-serv a:hover span{ padding-left: 10px; transition: all 0.3s;} .detalles{background: rgba(95,94,94,0.2);} .detalles .linea{border-right: solid 3px #5F5E5E;} @media screen and (max-width: 767px){ .detalles .linea{border-right: solid 0px #5F5E5E;} } .detalles .detalles-medicos,.detalles .detalles-info {padding:10px;} .detalles .detalles-medicos h2, .detalles-info h2{ color:#064D8C; font-family:'Muli', sans-serif; font-size: 18px; font-weight: bolder;} .detalles .detalles-info .detalle1 p{ color: rgba(95,94,94,1); text-align: justify; font-family:'Muli', sans-serif; font-size: 14px;} .detalles .detalles-medicos .detalles-medicos-inf h2{ color:#064D8C; font-family:'Muli', sans-serif; font-size: 14px; font-weight: bolder;margin: 10px 3px;} .detalles .detalles-medicos .detalles-medicos-inf p{ color:#5F5E5E; font-family:'Muli', sans-serif; font-size: 14px;} .frase-servicios h2{text-align: center;color:#064D8C; font-family:'Muli', sans-serif; font-size: 50px; font-weight: bolder;} @media screen and (max-width:312px){ .frase-servicios h2{font-size: 40px;} } .beneficios{background-image: url(../imagenes/jpg/servicios/rinonplastia/fondo.jpg); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: right;} .beneficios .fondo .ben-deta{ background: white; margin:80px 0; padding:10px; border-radius: 5px;} .beneficios .fondo .ben-deta h2 {color:#064D8C; font-family:'Muli', sans-serif; font-size: 24px; padding: 10px; font-weight: bolder; text-align: center; border-bottom: solid 2px #DFA20A;} .beneficios .fondo .ben-deta p{color:#5F5E5E; font-family:'Muli', sans-serif; font-size: 18px; padding-left: 3px; } .beneficios .fondo .ben-deta span{ padding-right: 5px; color: #064D8C; font-weight: bolder; } .preguntas h2{color: #064D8C; font-family:'Muli', sans-serif; font-weight: bolder; text-align: center; font-size: 30px; padding: 10px;} .preguntas h3{ color: #064D8C; font-family:'Muli', sans-serif; font-weight: bolder; text-align: center; font-size: 16px; padding: 10px; background: rgba(95,94,94,0.1);} .preguntas p{ color: rgba(95,94,94,1); font-family:'Muli', sans-serif; font-size: 14px; text-align: justify;} .testimonios h2{color: white; font-family:'Muli', sans-serif; font-weight: bolder; text-align: center; font-size: 30px; padding: 10px;} .testimonios{background: #064D8C;} .testimonios .testimonio1{ position: relative; min-height: 300px; background: white; width: 100%; padding:15px; border-radius: 5px} .testimonios .testimonio1 img{ position: absolute; top: -60px; border-radius: 50%; width: 120px; border:solid white 2px; padding:3px; } .testimonios .testimonio1 h1{ font-size: 18px; font-weight: bolder; text-align: center; color:#064D8C; font-family:'Muli', sans-serif; margin-bottom: 0; } .testimonios .testimonio1 .estrellas span{ color: #DFA20A; font-size: 14px; font-weight: bolder; } .testimonios .testimonio1{ font-family:'Muli', sans-serif; text-align: justify; color: rgba(95,94,94,1); font-size: 14px; } .testimonios .testimonio1 text{ font-family:'Muli', sans-serif; color: rgba(95,94,94,1); font-size: 12px; font-style: italic; font-weight: bolder;} /*----------------------------* SERVICIOS CADA UNO *-------------------------------*/ /*-----------------------------* Imagenes de portada de cada uno de los SERVICIOS *-------------------------*/ .B-portada-servicios{ background-image: url(../imagenes/jpg/servicios/portada-servicios.jpg); background-position:0px 50px; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width: 100%} @media screen and (max-width: 500px){ .B-portada-servicios{ background-position:center 60px;} } .B-portada-servicios .titulo-servicios{ position: absolute; width: 100%; max-width: 600px; left: -50px; bottom: 5%; background: white; transform: skew(-30deg); padding-left: 60px;} .B-portada-servicios .titulo-servicios h2{ transform: skew(30deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder;font-family: 'Muli', sans-serif; font-size: 40px; color: #064D8C;} @media (min-width:370px) and (max-width: 570px){ .B-portada-servicios .titulo-servicios{max-width: 400px;} .B-portada-servicios .titulo-servicios h2{font-size: 24px;}} @media screen and (max-width: 370px){ .B-portada-servicios .titulo-servicios{position: absolute; width: 100%; width:100%; left:0px; bottom: 5%; background: white;transform: skew(0deg); padding-left:0px;} .B-portada-servicios .titulo-servicios h2{transform: skew(0deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder;font-family: 'Muli', sans-serif; font-size: 22px; color: #064D8C;} } /*-----------------------------* Imagenes de portada de cada uno de los SERVICIOS *-------------------------*/ /*----------------------------* NOSOTROS*-------------------------------*/ .B-portada-Nosotros{ background-image: url(../imagenes/jpg/nosotros-portada.jpg); background-position:0px -50px!important; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width: 100%;} @media (min-width: 650px)and (max-width: 800px){ .B-portada-Nosotros{ background-position:-100px -50px!important;} } @media (min-width: 500px)and (max-width: 650px){ .B-portada-Nosotros{ background-position:center!important;} } @media screen and (max-width: 500px){ .B-portada-Nosotros{ background-position:center!important;} } .biografia h2{ font-family: 'Muli', sans-serif; font-size: 30px; text-align: center; color: #064D8C; font-weight: bold;} .biografia h6{ font-family: 'Muli', sans-serif; font-size: 18px; color:#5F5E5E; text-align: center;} .biografia p{ font-family: 'Muli', sans-serif; font-size: 14px; color:#5F5E5E; text-align: justify;} .biografia .fotos-adicionales{ position: relative; overflow: hidden; width: 100%; height: 250px; } .biografia .fotos-adicionales img{ border-radius: 50%; position: absolute; width: 100%; height: 100%; object-fit: cover;} /*----------------------------* NOSOTROS*-------------------------------*/ /*------------------------------* CONTACTANOS -----------------------------*/ .B-portada-contact{ background-image: url(../imagenes/jpg/doctor-contactanos.png); background-position:0px 70px!important; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden;} @media screen and (max-width: 1024px){ .B-portada-contact{ background-position:0px 70px!important;} } @media screen and (max-width: 500px){ .B-portada-contact{ background-position:-250px 70px!important;} } .form h2{font-family: 'Muli', sans-serif; font-size: 30px; text-align: center; color: #064D8C; font-weight: bold; padding-bottom: 10px;position: relative;overflow:hidden;} .formulario .form-contacto{ border: solid 2px rgba(95,94,94,0.1);} .formulario .campo p{font-family: 'Muli', sans-serif; font-size: 14px; color:#5F5E5E;font-weight: bolder; margin-bottom: 0;} .formulario .campo input{ padding: 5px 5px 5px 10px; width: 100%; margin: 5px 0 20px 0; font-family: 'Muli', sans-serif;} .formulario .campo select{ padding:5px; width: 100%; margin: 5px 0 20px 0; font-family: 'Muli', sans-serif;} .formulario .campo select .negrita{font-weight: bolder !important; color:#064D8C !important;} .formulario .campo select > option {color:#5F5E5E;font-family: 'Muli', sans-serif;} .formulario .campo select > option:hover{background:#064D8C!important; } input[type=checkbox]{ display: none; } input[type=checkbox] + label { cursor: pointer; } label:before{ content:""; background:transparent; border: solid #5F5E5E 2px; border-radius:5px; display:inline-block;height:20px;margin-right:10px;text-align:center;vertical-align: middle;width: 20px; margin-top: -5px;} input[type=checkbox]:checked + label:before{content:"✔";font-size:13px;color:#064D8C;} .formulario .campo textarea{ width: 100%; height: 150px; margin: 5px 0 20px 0; font-family: 'Muli', sans-serif;} .formulario .boton input{ background: #064D8C; color: white; font-family: 'Muli', sans-serif; font-size: 16px; padding:5px 10px; border:solid 2px #064D8C; transition: all 0.3s;} .formulario .boton input:hover{border-radius: 8px; transition: all 0.3s;} .contacto-datos .icono{ text-align: center;} .contacto-datos .icono span{ color: #5F5E5E; padding: 20px; border-radius: 50%; background: rgba(95,94,94,0.1); font-weight: bolder; font-size: 28px;} .contacto-datos .inf-icono h2,.contacto-datos .inf-icono-sedes h2{ font-family: 'Muli', sans-serif; font-size: 16px; text-align: center; color: #5F5E5E; font-weight: bold;} .contacto-datos .inf-icono p{ font-family: 'Muli', sans-serif; font-size: 14px; text-align: center; color: #5F5E5E;} .contacto-datos .inf-icono-sedes p{ font-family: 'Muli', sans-serif; font-size: 14px; text-align:justify; color: #5F5E5E;} /*privacidad de datos*/ .politica-contenido p{ background:rgba(95,94,94,0.15);font-family: 'Muli', sans-serif; font-size: 14px;padding: 10px; margin-top: -15px!important; } /*------------------------------* CONTACTANOS -----------------------------*/ /*--------------------------------* CASOS CLINICOS *----------------------------*/ .casos .imagen-caso{ width: 100%; height: 100%; min-height: 250px; position: relative; overflow: hidden;} .casos .imagen-caso img{ position: absolute; width: 100%; height: 100%; object-fit: cover;left: 0; transition: all 0.3s; } .casos .imagen-caso:hover img{transform: scale(1.1); transition: all 0.3s;} .casos .titulo-caso a{text-decoration: none;} .casos .titulo-caso h2{font-family: 'Muli', sans-serif; font-size: 16px; text-align: center; color: #5F5E5E; font-weight: bold; padding-bottom: 10px;position: relative;overflow:hidden; cursor:pointer; background: rgba(95,94,94,0.2);padding: 10px; margin-top: 0; transition: all 0.3s;} .casos .titulo-caso h2:hover{background: rgba(95,94,94,1); color: white; transition: all 0.3s;} .casos .tit-ser-prin{ text-align: center; font-family:'Muli', sans-serif; color: #064D8C; font-weight: bold; font-size: 45px; position: relative; overflow: hidden; margin: 0; padding-bottom: 10px;text-align:center;} .casos .tit-ser-prin-re{ text-align: center; font-family:'Muli', sans-serif; color: #064D8C; font-weight: bold; font-size: 45px; position: relative; overflow: hidden; margin: 0; padding-bottom: 10px;text-align:center;} @media screen and (max-width:425px){.casos .tit-ser-prin-re{font-size: 30px;}} /*--------------------------------* CASOS CLINICOS *----------------------------*/ /*-----------------------------* Imagenes de portada de cada uno de los casos *-------------------------*/ .B-portada-casos{ background-image: url(../imagenes/jpg/Casos/portada-principal.JPG); background-position:center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat;height: 60vh; position: relative; overflow: hidden; width: 100%;} .B-portada-casos .titulo-casos{ position: absolute; width: 100%; max-width: 600px; left: -50px; bottom: 5%; background: white; transform: skew(-30deg); padding-left: 60px;} .B-portada-casos .titulo-casos h2{ transform: skew(30deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder;font-family: 'Muli', sans-serif; font-size: 40px; color: #064D8C;} @media (min-width:370px) and (max-width: 570px){ .B-portada-casos .titulo-casos{max-width: 400px;} .B-portada-casos .titulo-casos h2{font-size: 24px;}} @media screen and (max-width: 370px){ .B-portada-casos .titulo-casos{position: absolute; width: 100%; width:100%; left:0px; bottom: 5%; background: white;transform: skew(0deg); padding-left:0px;} .B-portada-casos .titulo-casos h2{transform: skew(0deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder;font-family: 'Muli', sans-serif; font-size: 22px; color: #064D8C;} } .B-portada-Oto{ background-image: url(../imagenes/jpg/Casos/otoplastia/otoplastia.jpg); background-position:center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat;height: 60vh; position: relative; overflow: hidden; width:100%;} .B-portada-Lipo{ background-image: url(../imagenes/jpg/Casos/lipoescultura/lipoescultura.jpg); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width:100%;} .B-portada-Abdom{ background-image: url(../imagenes/jpg/Casos/Abdominoplastía/abdominoplastia.jpg); background-position: bottom!important; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh !important; position: relative; overflow: hidden; width:100%;} .B-portada-Rino{ background-image: url(../imagenes/jpg/Casos/Rinoplastía/rinoplastia.jpg); background-position: bottom; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width:100%;} .B-portada-Mento{ background-image: url(../imagenes/jpg/Casos/Mentoplastía/Mentoplastia.jpg); background-position: bottom; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width:100%;} .B-portada-Gine{ background-image: url(../imagenes/jpg/Casos/Ginecomastia/ginecomastia.jpg); background-position: bottom; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width:100%;} @media screen and (max-width: 1024px){ .B-portada-Gine{ background-position: -350px -270px!important;} } .B-portada-Mamo{ background-image: url(../imagenes/jpg/Casos/Mamoplastía/mamoplastia.jpg); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width:100%;} .B-portada-Reju{ background-image: url(../imagenes/jpg/Casos/RejuvenecimientoFacial/RejuvenecimientoFacial.png); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width: 100%} .B-portada-Blefa{ background-image: url(../imagenes/jpg/Casos/blefaroplastia/blefaroplastia.jpg); background-position: top; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 60vh; position: relative; overflow: hidden; width:100%;} .B-portada-Reconst{ background-image: url(../imagenes/jpg/Casos/recontruccion-mamaria/reconstruccion-mamaria.jpg); background-position: center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 70vh; position: relative; overflow: hidden; width:100%;} .B-portada-Implan{ background-image: url(../imagenes/jpg/Casos/implante-senos/implante-senos.jpg); background-position: left; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 70vh; position: relative; overflow: hidden; width:100%;} .B-portada-Gluteos{ background-image: url(../imagenes/jpg/Casos/gluteos/gluteos.jpg); background-position:center; background-attachment: fixed; background-size: cover; background-repeat: no-repeat; height: 70vh; position: relative; overflow: hidden; width:100%;} @media screen and (max-width: 600px){ .B-portada-Gluteos{ background-position:-100px 0px;height: 75vh;} } .titulo-general{ position: absolute; width: 100%; max-width: 480px; left: -50px; bottom: 5%; background: white; transform: skew(-30deg); padding-left: 100px;} .titulo-general h2{ transform: skew(30deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder; font-family: 'Muli', sans-serif; font-size: 40px; color: #064D8C;} @media screen and (max-width: 470px){ .titulo-general{ position: absolute; width: 100%; max-width: 480px; left: 0px; bottom: 5%; background: white; transform: skew(0deg); padding-left:0px;} .titulo-general h2{ transform: skew(0deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder; font-family: 'Muli', sans-serif; font-size: 28px; color: #064D8C;} } .titulo-general-Reju{ position: absolute; width: 100%; max-width: 620px; left: -50px; bottom: 5%; background: white; transform: skew(-30deg); padding-left: 100px;} .titulo-general-Reju h2{ transform: skew(30deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder; font-family: 'Muli', sans-serif; font-size: 40px; color: #064D8C;} @media screen and (max-width:610px){ .titulo-general-Reju{ left:0px; transform: skew(0deg);padding-left: 0px;} .titulo-general-Reju h2{transform: skew(0deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder; font-family: 'Muli', sans-serif; font-size: 30px; color: #064D8C;}} @media screen and (max-width:312px){ .titulo-general-Reju{ position: absolute; width: 100%; max-width: 620px; left:0px; bottom: 5%; background: white; transform: skew(0deg); padding-left: 0px;} .titulo-general-Reju h2{ transform: skew(0deg); margin:0; padding: 10px 0; text-align: center; font-weight: bolder; font-family: 'Muli', sans-serif; font-size: 28px; color: #064D8C;}} .caso-junto h2{color:#064D8C; text-align: center; font-size: 40px; font-weight: bolder; font-family: 'Muli', sans-serif;} @media screen and (max-width:312px){ .caso-junto h2{font-size: 28px;} } .caso1 .caso-imagen {position: relative; overflow: hidden; width: 100%; height: 340px;} .caso1 .caso-imagen img{ position: absolute; width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .caso1 .caso-imagen h2{ background: #064D8C; position: absolute; width: 80px; padding: 8px; font-size: 18px; font-weight: bolder; color: white;left: 0; bottom: 0; margin: 0; font-family: 'Muli', sans-serif;} .caso1 .caso-imagen h1{ background: #d60a0a; position: absolute; width: 80px; padding: 8px; font-size: 18px; font-weight: bolder; color: white;left: 0; bottom: 0; margin: 0; font-family: 'Muli', sans-serif; } .caso1 .descripcion-caso h2{color:#064D8C; text-align: center; font-size: 24px; font-weight: bolder; font-family: 'Muli', sans-serif;background: rgba(95,94,94,0.1);padding: 3px;} .caso1 .descripcion-caso p{font-family: 'Muli', sans-serif; font-size: 14px; text-align: justify; color: #5F5E5E; padding: 5px;} .caso1 .caso-imagen .grande{ position: absolute;width: 100%;height: 100%;background: rgba(243,247,249,0.7); text-align: center; border: solid 1px rgba(95,94,94,0.2);z-index: -20;transition: all 0.3s;} .caso1 .caso-imagen .grande span{color: #5F5E5E;font-weight: bolder;font-size: 50px;cursor: pointer; margin-top: 150px;} .caso1 .caso-imagen:hover .grande{z-index:0; transition: all 0.1s;} .caso-junto .caso-imagen{position: relative; overflow: hidden; width: 100%; height: 400px;} .caso-junto .caso-imagen img {position: absolute; width: 100%; height: 100%; object-fit: contain; cursor: pointer;} .caso-junto .descripcion-caso h2 {color:#064D8C; text-align: center; font-size: 24px; font-weight: bolder; font-family: 'Muli', sans-serif;background: rgba(95,94,94,0.1);padding: 3px;} .caso-junto .descripcion-caso p{ont-family: 'Muli', sans-serif; font-size: 14px; text-align: justify; color: #5F5E5E; padding: 5px;} .caso-junto .caso-imagen .grande{ position: absolute;width: 100%;height: 100%;background: rgba(243,247,249,0.7); text-align: center;z-index: -20;transition: all 0.3s;} .caso-junto .caso-imagen .grande span{color: #5F5E5E;font-weight: bolder;font-size: 50px;cursor: pointer; margin-top: 150px;} .caso-junto .caso-imagen:hover .grande{z-index:0; transition: all 0.1s;} /*-----------------------------* Imagenes de portada de cada uno de los casos *-------------------------*/ /*------------------------------* Relacionados en Casos Reales *----------------------------------------*/ .relacionados{background: rgba(95,94,94,0.1);} .relacionados h2{font-family: 'Muli', sans-serif; font-size: 30px; text-align: center; color: #064D8C; font-weight: bold; padding-bottom: 10px;position: relative;overflow:hidden;} @media screen and (max-width: 312px){ .relacionados h2{font-size: 24px;}} .relacionados .imagen-rela { width: 100%; height: 200px; overflow: hidden; position: relative;} .relacionados .imagen-rela img{ position: absolute; object-fit: cover; width: 100%;height: 100%;cursor: pointer; transition: all 0.3s;} .relacionados .imagen-rela h2{ position: absolute; background: rgba(95,94,94,0.8); color: white; width: 100%; bottom: 0; left: 0; font-size: 15px; margin:0; text-align: center; padding: 5px; font-weight: bolder; font-family: 'Muli', sans-serif; transition: all 0.3s; } .relacionados .imagen-rela:hover h2{background: #064D8C; transition: all 0.3s;} .relacionados .imagen-rela:hover img{transform: scale(1.1); transition: all 0.3s;} /*------------------------------* Relacionados en Casos Reales *----------------------------------------*/ /*------------------------------- complementos -----------------------------*/ /*boton-arriba*/ #toTop{ position: fixed;bottom: 15px;right: 15px;cursor: pointer;display: none;background: #064D8C;border-radius:50%; border:solid 2px #5F5E5E;font-size: 20px;} /*boton-arriba*/ /*cambio de color del menu al moverse*/ .menu-mov { background: rgba(254,254,255); height: 85px; position:fixed; width: 100%; z-index: 9999; transition: all 0.3s; -webkit-box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); -moz-box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); top:0;} /*cambio de color del menu al moverse*/ /* para que aparezca el menu en el celular */ .menu-enlaces2{position: fixed; z-index: 9999; top:0;} /* para que aparezca el menu en el celular */ /* para que aparezca el lado informativo en el celular */ .comunicacion2{position: fixed; z-index: 9999; top:0;} /* para que aparezca el lado informativo en el celular */ /*para que el menu tenga color en computadora*/ nav.compu-resto{background: rgba(254,254,255,1); height: 85px; position: sticky; width: 100%; z-index: 3; transition: all 0.3s; -webkit-box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); -moz-box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); box-shadow: 0px 1px 5px 0px rgba(95,94,94,1); top:0px;} /*para que el menu tenga color en computadora*/ /*------------------------------- complementos -----------------------------*/ /*---------------------* medias queries *----------------*/ /*LOGO*/ @media (min-width:992px) and (max-width: 1200px){ } /*LOGO*/ /*---------------------* medias queries *----------------*/ /*MENU FOOTER*/ .menu-footer{ padding:0px; margin: 0px; list-style:none; } .menu-footer a{ margin:3px; padding: 5px; text-decoration:none!important; display: block; background:rgba(95,94,94,0.1); text-align: center; font-size:16px; color:black!important; transition: all 0.3s; } .menu-footer a:hover{ background:#064D8C; color:white!important; transition: all 0.3s; }