497 lines
9.7 KiB
HTML
497 lines
9.7 KiB
HTML
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: Montserrat, sans-serif;
|
|
overflow-x: hidden;
|
|
}
|
|
:root {
|
|
--color-dark-blue: rgb(10, 29, 59)
|
|
}
|
|
|
|
|
|
.text-subnormal{
|
|
font-size: .825rem;
|
|
}
|
|
|
|
.box-servicio{
|
|
background-color:none !important;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cuadrado-azul-seccion{
|
|
width: fit-content; font-weight:bold;
|
|
}
|
|
|
|
.menu-links, .menu-links a{
|
|
/*color: rgb(55, 65, 97) !important;*/
|
|
color: rgb(255, 255, 255) !important;
|
|
text-decoration:none ;
|
|
}
|
|
|
|
.menu-links .withline a:hover{
|
|
text-decoration:underline !important;
|
|
}
|
|
|
|
|
|
.menu-links .sinline a:hover {
|
|
text-decoration: none !important;
|
|
}
|
|
|
|
.box-servicio:hover{
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
transform: translateY(-5px);
|
|
border: 1px solid #0d6efd;
|
|
background-color: rgb(219, 239, 255) !important;
|
|
}
|
|
|
|
|
|
.justificado {
|
|
text-align: justify;
|
|
}
|
|
.orange-item {
|
|
background-color: rgb(255, 102, 0) ;
|
|
color: black;
|
|
}
|
|
|
|
.orange-item:hover {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
.punto-cuadrado-naranja{
|
|
background-color: rgb(255, 158, 23) ; width: 5px; height: 5px;display: inline-block;
|
|
}
|
|
.text-card-servicios{
|
|
font-size: 18px;
|
|
}
|
|
|
|
#menu-desktop {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 1030;
|
|
background-color: #00f;
|
|
}
|
|
|
|
#imagenFirts {
|
|
top: 60px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 60vh;
|
|
}
|
|
|
|
.nav-ajuste {
|
|
padding: 22px;
|
|
}
|
|
|
|
|
|
|
|
.navbar {
|
|
|
|
background-color: var(--color-dark-blue) !important;
|
|
height: 0;
|
|
opacity: 0;
|
|
transition: opacity .3s ease, top .3s ease, box-shadow .3s ease;
|
|
position: fixed;
|
|
width: 100%;
|
|
box-shadow: 0 8px 8px rgba(0, 0, 0, .2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.navbar.active {
|
|
opacity: 1;
|
|
height: 80px;
|
|
z-index: 1030;
|
|
}
|
|
|
|
.navbar .navbar-toggler {
|
|
border: none;
|
|
}
|
|
|
|
.navbar-toggler:focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.logo-menu-desktop {
|
|
margin-top: 23px;
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.menu-desktop-item {
|
|
display: inline-block;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.logo-menu-size {
|
|
height: 50px;
|
|
}
|
|
|
|
|
|
.text-blue-soft{
|
|
color: rgb(17, 134, 204);
|
|
}
|
|
|
|
.text-blue-dark{
|
|
color: rgb(0, 8, 120);
|
|
}
|
|
|
|
.bg-color-blue-dark {
|
|
background-color: var(--color-dark-blue) !important;
|
|
}
|
|
.bg-color-blue-sky {
|
|
background-color: rgb(239, 248, 255) !important;
|
|
}
|
|
.bg-color-blue-sky-medium {
|
|
background-color: rgb(194, 227, 252) !important;
|
|
}
|
|
.bg-color-blue-soft{
|
|
background-color: rgb(31, 144, 255) !important;
|
|
}
|
|
.bg-color-blue-medium{
|
|
background-color: rgb(14, 85, 187) !important;
|
|
}
|
|
|
|
.btn.bg-color-blue-medium:hover{
|
|
background-color: rgb(14, 85, 187) !important;
|
|
}
|
|
|
|
.btn-close {
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3e%3c/svg%3e") !important;
|
|
opacity: 1 !important; /* Asegúrate de que el fondo sea visible */
|
|
}
|
|
|
|
.col-derecha-imagen-back {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
|
|
.col-derecha-titulo-servicio {
|
|
font-size: 3.2rem;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
margin: .65em 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.col-derecha-titulo-servicio::after {
|
|
content: '';
|
|
width: 0;
|
|
height: 2px;
|
|
background: #166def;
|
|
display: block;
|
|
position: relative;
|
|
margin: 15px 0;
|
|
transition: width .2s cubic-bezier(.17, .67, .83, .67);
|
|
}
|
|
|
|
.col-derecha-titulo-servicio.show-line::after {
|
|
width: 150px;
|
|
}
|
|
|
|
.col-derecha-espacio {
|
|
padding: 26px !important;
|
|
}
|
|
|
|
.col-derecha-texto {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.footer {
|
|
|
|
background-color: var(--color-dark-blue);
|
|
}
|
|
|
|
.footer-logo {
|
|
height: 100px;
|
|
width: 100px;
|
|
}
|
|
|
|
.texto-little {
|
|
font-size: .725rem;
|
|
}
|
|
|
|
.texto-footer-title {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.texto-footer-normal {
|
|
color: #ccc;
|
|
}
|
|
.texto-sombra {
|
|
text-shadow: 2px 2px 2px #000;
|
|
}
|
|
|
|
.texto-bread {
|
|
font-size: .725rem;
|
|
}
|
|
|
|
.lineabajo {
|
|
position: relative;
|
|
}
|
|
|
|
.lineabajo::before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background-color: #00f;
|
|
animation: growLine 2s forwards;
|
|
}
|
|
|
|
.divcontacto {
|
|
background-color: rgb(31, 144, 255);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
|
|
.fijosticky {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
display: none;
|
|
/* Inicialmente oculto */
|
|
z-index: 999;
|
|
/* Asegura que esté por encima de otros elementos */
|
|
}
|
|
|
|
|
|
.contacto-btn-stick, .contacto-btn {
|
|
background-color: rgb(255, 102, 0);
|
|
color: white;
|
|
}
|
|
|
|
|
|
.contacto-btn-stick:hover, .contacto-btn:hover {
|
|
background-color: rgb(0, 0, 0);
|
|
color: white;
|
|
}
|
|
|
|
|
|
.menu-links, .menu-links a{
|
|
color: rgb(255, 255, 255) !important;
|
|
text-decoration:none !important;
|
|
}
|
|
|
|
.menu-links a:hover{
|
|
text-decoration:underline !important;
|
|
}
|
|
|
|
.texto-mediano{
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
div#divFirst{
|
|
/*top:80px;*/
|
|
margin-top: 80px;
|
|
}
|
|
|
|
/*hero*/
|
|
|
|
.video-hero {
|
|
position: relative;
|
|
height: 350px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.video-hero video {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
transform: translate(-50%, -50%);
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hero-overlay-box {
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 80%;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
background-color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.hero-img-top-left,
|
|
.hero-img-bottom-right {
|
|
position: absolute;
|
|
width: 50px;
|
|
height: 50px;
|
|
z-index: 3;
|
|
text-shadow: black 0.1em 0.1em 0.3em;
|
|
|
|
}
|
|
|
|
.hero-img-top-left {
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
.hero-img-bottom-right {
|
|
bottom: 15px;
|
|
right: 15px;
|
|
}
|
|
.text-titulo{
|
|
font-size: 1.7rem;
|
|
/*text-shadow: black 0.1em 0.1em 0.3em;*/
|
|
color:rgb(34, 43, 89);
|
|
}
|
|
|
|
.hero-img-top-left img , .hero-img-bottom-right img {
|
|
|
|
height: 45px;
|
|
}
|
|
|
|
|
|
.whatsapp {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
/* Ajusta el valor según sea necesario para que esté por encima de otros elementos */
|
|
background: black;
|
|
color: white;
|
|
}
|
|
.whatsapp:hover{
|
|
|
|
background-color: limegreen;
|
|
}
|
|
|
|
.whatsapp img {
|
|
width: 40px
|
|
}
|
|
|
|
/*hero end*/
|
|
|
|
.fade-in {
|
|
animation: fadeIn 2s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
.fade-in-zoom {
|
|
opacity: 0;
|
|
transform: scale(0.8);
|
|
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
|
|
}
|
|
|
|
.visible {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
.text-servicios{
|
|
font-size: 0.825rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (min-width:768px) {
|
|
.col-derecha-espacio {
|
|
padding: 32px !important;
|
|
}
|
|
|
|
#imagenFirts {
|
|
/* position: sticky;*/
|
|
overflow: hidden;
|
|
height: 130vh;
|
|
top: 0;
|
|
}
|
|
|
|
.col-derecha-texto {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.text-servicios{
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.text-titulo{
|
|
font-size: 2.3rem;
|
|
|
|
}
|
|
|
|
.hero-img-top-left img , .hero-img-bottom-right img {
|
|
|
|
height: 45px;
|
|
}
|
|
.hero-img-top-left {
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
.hero-img-bottom-right {
|
|
bottom: 25px;
|
|
right: 25px;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
@media (min-width:992px) {
|
|
.col-derecha-espacio {
|
|
padding: 100px 120px !important;
|
|
}
|
|
|
|
.col-derecha-texto {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.text-titulo{
|
|
font-size: 3.3rem;
|
|
}
|
|
|
|
.hero-img-top-left img, .hero-img-bottom-right img {
|
|
height: 70px;
|
|
}
|
|
|
|
.hero-img-top-left {
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
.hero-img-bottom-right {
|
|
bottom: 35px;
|
|
right: 35px;
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes growLine {
|
|
from {
|
|
width: 0;
|
|
}
|
|
|
|
to {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
|
}
|
|
</style> |