/* Define la animación para el preloader */ @keyframes seq-preloader { 50% { opacity: 1; /* A mitad de la animación, el elemento es completamente visible. */ } 100% { opacity: 0; /* Al final de la animación, el elemento se vuelve completamente transparente. */ } } /* Estilos para el preloader */ .seq-preloader { background: white; /* Fondo blanco para el preloader. */ visibility: visible; /* Asegura que el preloader sea visible inicialmente. */ opacity: 1; /* Comienza completamente opaco. */ position: absolute; /* Posicionamiento absoluto para sobreponerse sobre otros elementos. */ z-index: 9999; /* Asegura que el preloader esté en la parte superior de otros elementos. */ height: 100%; /* Ocupa el 100% de la altura de su contenedor. */ width: 100%; /* Ocupa el 100% del ancho de su contenedor. */ top: 0; /* Alinea el preloader en la parte superior del contenedor. */ left: 0; /* Alinea el preloader a la izquierda del contenedor. */ right: 0; /* Alinea el preloader a la derecha del contenedor. */ bottom: 0; /* Alinea el preloader en la parte inferior del contenedor. */ } /* Estilos para el preloader una vez que ha terminado de cargar */ .seq-preloader.seq-preloaded { opacity: 0; /* Hace el preloader completamente transparente. */ visibility: hidden; /* Oculta el preloader para que no interfiera con el contenido. */ transition: visibility 0s .5s, opacity .5s; /* Transición suave para opacidad y visibilidad. */ } /* Indicador de carga dentro del preloader */ .seq-preload-indicator { overflow: visible; /* Permite que los hijos sobresalgan del tamaño del padre. */ position: relative; /* Posicionamiento relativo para alinearlo dentro de su contenedor. */ top: 50%; /* Centra el indicador verticalmente. */ left: 50%; /* Centra el indicador horizontalmente. */ transform: translate(-50%, -50%); /* Ajuste fino para centrar exactamente el indicador. */ } /* Círculos individuales dentro del indicador de carga */ .seq-preload-circle { display: inline-block; /* Se muestra en línea, permitiendo múltiples círculos en una fila. */ height: 12px; /* Altura del círculo. */ width: 12px; /* Ancho del círculo. */ fill: #7a7a7a; /* Color de relleno de los círculos. */ opacity: 0; /* Inicia transparente para crear efecto en la animación. */ animation: seq-preloader 1.25s infinite; /* Aplica la animación definida arriba infinitamente. */ } /* Delays para los círculos, creando un efecto secuencial */ .seq-preload-circle-2 { animation-delay: .15s; /* Inicia la animación del segundo círculo un poco después. */ } .seq-preload-circle-3 { animation-delay: .3s; /* Inicia la animación del tercer círculo aún más tarde. */ } /* Indicador de carga alternativo para navegadores que no soporten SVG */ .seq-preload-indicator-fallback { width: 42px; /* Ancho fijo para el indicador de carga fallback. */ overflow: visible; /* Permite que los círculos se extiendan fuera del indicador. */ } /* Estilos para los círculos dentro del indicador de carga fallback */ .seq-preload-indicator-fallback .seq-preload-circle { width: 8px; /* Ancho del círculo. */ height:8px; /* Altura del círculo. */ background-color: #f4f4f4; /* Color de fondo de los círculos. */ border-radius: 100%; /* Hace los círculos completamente redondos. */ opacity: 1; /* Los círculos son completamente opacos. */ display: inline-block; /* Se muestran en línea para alinear múltiples círculos. */ vertical-align: middle; /* Alinea los círculos verticalmente. */ } .seq-preload-indicator-fallback .seq-preload-circle-2 { margin-left: 3px; /* Margen izquierdo para el segundo círculo. */ margin-right: 3px; /* Margen derecho para el segundo círculo. */ width: 12px; /* Ancho del segundo círculo. */ height: 12px; /* Altura del segundo círculo. */ } .seq-preload-indicator-fallback .seq-preload-circle-3 { width: 16px; /* Ancho del tercer círculo. */ height: 16px; /* Altura del tercer círculo. */ } /* MAIN CSS */ /* Define una animación para llenar elementos con color de fondo */ @-webkit-keyframes fill { 0% { width: 0%; /* Inicia sin ancho. */ height: 1px; /* Altura mínima para ser visible. */ } 50% { width: 100%; /* Se expande para llenar el ancho disponible. */ height: 1px; /* Mantiene la altura mínima. */ } 100% { width: 100%; /* Mantiene el ancho lleno. */ height: 100%; /* Expande la altura para llenar el espacio disponible. */ background: #fff; /* Aplica un color de fondo blanco. */ } } @keyframes fill { /* Repite la misma animación sin prefijo para compatibilidad con otros navegadores. */ 0% { width: 0%; height: 1px; } 50% { width: 100%; height: 1px; } 100% { width: 100%; height: 100%; background: #fff; } } @-webkit-keyframes fillColour { 0% { color: #fff; } 50% { color: #fff; } 100% { color: #333; } } @keyframes fillColour { 0% { color: #fff;/* Inicia con color blanco. */ } 50% { color: #fff;/* Mantiene el color blanco a la mitad. */ } 100% { color: #333; /* Cambia a un color gris oscuro al completar. */ } } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Open Sans", sans-serif; } html { overflow: hidden; } body { overflow: hidden; font-size: 100%; } nav { top: 10vh; bottom: 10vh; text-align: center; background: rgba(0, 0, 0, 0.5); position: fixed; z-index: 100; height: 80vh; left: 0; width: 20%; font-weight: 300; font-size: 1rem; } nav em { font-style: normal; margin-left: 5px; font-size: 14px; } nav ul li i { width: 25px; } nav ul li a { font-size: 18px; } nav .mini-logo { display: none; } nav .logo { margin-top: 45px; padding: 0px 20px; } nav .logo img { max-width: 100%; overflow-y: hidden; } nav ul { margin-top: 60px; text-align: left; margin-left: 40px; list-style-type: none; height: 48vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; } nav ul li { margin: 25px 0px; } nav a, nav a:visited, nav a:active { color: #fff; } nav a { text-decoration: none!important; font-size: 14px; letter-spacing: 0.5px; -webkit-transition: color 2s, background 1s; transition: color 2s, background 1s; padding: 20px 30px; position: relative; z-index: 0; } nav a.active { background-color: #fff; color: #232323; } nav a::before { content: ""; position: absolute; height: 0%; width: 0%; bottom: 0; left: 0; opacity: 1; z-index: -1; } nav a:hover { text-decoration: none; -webkit-animation: fillColour 0.7s forwards ease-in-out; animation: fillColour 0.7s forwards ease-in-out; } nav a:hover::before { -webkit-animation: fill 0.7s forwards ease-in-out; animation: fill 0.7s forwards ease-in-out; opacity: 1; } .boton-espaciado { margin-bottom: 10px; /* Ajusta esto según tus necesidades */ } .slides { width: 600vw; height: 100vh; -webkit-transition: -webkit-transform 0.8s ease; transition: -webkit-transform 0.8s ease; transition: transform 0.8s ease; transition: transform 0.8s ease, -webkit-transform 0.8s ease; } .slides .slide { height: 100vh; width: 100vw; float: left; text-align: center; background-size: cover; } .slides .slide .content { overflow-y: scroll; position: relative; width: 70%; height: 80%; left: 30%; top: 10%; bottom: 10%; background: rgba(0, 0, 0, 0.5); } .content::-webkit-scrollbar { width: 5px; height: 8px; background-color: rgba(0, 0, 0, 0.5); } /* Add a thumb */ .content::-webkit-scrollbar-thumb { background: rgba(250, 250, 250, 0.5); } .slides .slide:nth-child(1) { background-image: url(../img/first_bg.jpg); } .slides .slide:nth-child(2) { background-image: url(../img/second_bg.jpg); } .slides .slide:nth-child(3) { background-image: url(../img/third_bg.jpg); } .slides .slide:nth-child(4) { background-image: url(../img/fourth_bg.jpg); } .slides .slide:nth-child(5) { background-image: url(../img/fifth_bg.jpg); } .slides .slide:nth-child(6) { background-image: url(../img/fourth_bg.jpg); } .slides .slide img { width: 100%; } .main-btn a:hover { background-color: #fff; color: #232323!important; } .first-content { padding: 100px; text-align: left; padding-top: 13%; } .first-content .author-image img { margin-top: 15px; border-radius: 30px; max-width: 100%; overflow: hidden; float: left; margin-right: 35px; } .first-content h2 { font-size: 36px; text-transform: uppercase; font-weight: 700; color: #fff; letter-spacing: 0.5px; border-bottom: 2px solid #fff; display: inline-block; padding-bottom: 10px; margin-bottom: 20px; margin-top: 0px; } .first-content p { color: #fff; font-size: 13px; text-transform: uppercase; font-weight: 300; letter-spacing: 2px; line-height: 26px; margin-bottom: 20px; } .first-content em { font-style: normal; font-weight: 600; } .first-content .main-btn { display: inline-block; margin-right: 15px; } .first-content .main-btn a { display: inline-block; border: 2px solid #fff; padding: 8px 15px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #fff; text-decoration: none; transition: all 0.5s; transition: all 0.5s; } .first-content .fb-btn { display: inline-block; } .first-content .fb-btn a { display: inline-block; background-color: #fff; border: 2px solid #fff; padding: 8px 15px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #232323; text-decoration: none; transition: all 0.5s; } .first-content .fb-btn a:hover { color: #fff; background-color: transparent; } .second-content .container-fluid { /* Elimina el padding a los lados para usar todo el ancho disponible, útil en diseños responsivos. */ padding-right: 0px; padding-left: 0px; } .second-content .container-fluid .col-md-6 {/* Aplica lo mismo a las columnas dentro, permitiendo un control más fino del espaciado interno. */ padding-right: 0px; padding-left: 0px; } .second-content .right-image img { max-width: 100%; /* Asegura que la imagen no sobrepase el ancho del contenedor. */ min-width: 100%; /* Mantiene la imagen extendida para cubrir todo el ancho. */ overflow: hidden; /* Oculta cualquier parte de la imagen que exceda el tamaño del contenedor. */ float: right; /* Posiciona la imagen a la derecha del contenedor. */ } .second-content .left-content { padding: 60px; /* Proporciona un generoso espacio alrededor del contenido para mejorar la legibilidad. */ text-align: left; /* Alinea el texto a la izquierda. */ } /*Los títulos (h2), párrafos (p), enlaces (a), y botones dentro de .second-content se estilizan para mejorar la visibilidad y legibilidad, usando transformaciones de texto, tamaño de fuente, color, y espaciado.*/ .second-content h2 { font-size: 36px; /* Tamaño de fuente grande para mayor impacto visual. */ text-transform: uppercase; /* Convierte el texto a mayúsculas para un estilo más declarativo. */ font-weight: 700; /* Hace que el texto sea bold para destacarlo. */ color: #fff; /* Color de texto blanco para contraste con el fondo oscuro. */ letter-spacing: 0.5px; /* Espacio adicional entre letras para mejorar la legibilidad. */ border-bottom: 2px solid #fff; /* Línea inferior para subrayar y destacar el encabezado. */ display: inline-block; /* Permite al elemento tener un ancho que se ajusta a su contenido, permitiendo también el uso de margen y padding. */ padding-bottom: 10px; /* Espacio debajo del texto, aumentando la separación de la línea inferior. */ margin-bottom: 50px; /* Margen debajo del encabezado para separarlo de contenido subsiguiente. */ margin-top: 0px; /* Asegura que no haya espacio adicional arriba del encabezado. */ } .second-content p { font-size: 13px; /* Tamaño de fuente estándar para texto de cuerpo. */ color: #fff; /* Texto blanco para legibilidad contra fondos oscuros. */ letter-spacing: 0.5px; /* Espacio adicional entre letras mejora la legibilidad. */ font-weight: 300; /* Fuente más ligera para el texto del cuerpo, contrastando con los encabezados. */ line-height: 24px; /* Altura de línea para mejorar la legibilidad del texto de párrafo. */ margin-bottom: 30px; /* Espacio debajo de cada párrafo para evitar que el texto se vea apretado. */ } .second-content a { color: #fff;/* Mantiene el color blanco para los enlaces, asegurando consistencia y legibilidad. */ text-decoration: underline;/* Subraya los enlaces para diferenciarlos del texto de párrafo. */ } .second-content .main-btn a { display: inline-block; /* Permite al botón ajustar su tamaño al contenido y usar margen y padding. */ border: 2px solid #fff; /* Borde blanco sólido para destacar el botón contra el fondo. */ padding: 8px 15px; /* Padding interno para hacer el botón más grande y fácil de interactuar. */ font-size: 13px; /* Tamaño de fuente coherente con el texto del cuerpo. */ text-transform: uppercase; /* Texto en mayúsculas para un aspecto más enfocado y estilizado. */ letter-spacing: 1px; /* Espacio extra entre letras para mejorar la estética y legibilidad del botón. */ color: #fff; /* Color de texto blanco para mantener la coherencia visual con otros elementos. */ text-decoration: none; /* Remueve el subrayado por defecto de los enlaces para un look más limpio. */ transition: all 0.5s; /* Transición suave para efectos de hover o foco, mejorando la interacción visual. */ } /*Similar a .second-content, pero con sus propios ajustes de margen, padding, y estilos de texto para diferenciar esta sección del resto. Los márgenes y paddings ajustados ayudan a posicionar correctamente el contenido y las imágenes, mientras que los estilos de texto aseguran la coherencia visual y la legibilidad.*/ .third-content .container-fluid { /* Elimina el padding a los lados para usar todo el ancho disponible, útil en diseños responsivos. */ padding-right: 0px; padding-left: 0px; } .third-content .container-fluid .col-md-6 {/* Aplica lo mismo a las columnas dentro, permitiendo un control más fino del espaciado interno. */ padding-right: 0px; padding-left: 0px; } .third-content .right-image img { max-width: 100%; /* Asegura que la imagen no sobrepase el ancho del contenedor. */ min-width: 100%; /* Mantiene la imagen extendida para cubrir todo el ancho. */ overflow: hidden; /* Oculta cualquier parte de la imagen que exceda el tamaño del contenedor. */ float: right; /* Posiciona la imagen a la derecha del contenedor. */ } .third-content .left-content { padding: 60px; /* Proporciona un generoso espacio alrededor del contenido para mejorar la legibilidad. */ text-align: left; /* Alinea el texto a la izquierda. */ } /*Los títulos (h2), párrafos (p), enlaces (a), y botones dentro de .second-content se estilizan para mejorar la visibilidad y legibilidad, usando transformaciones de texto, tamaño de fuente, color, y espaciado.*/ .third-content h2 { font-size: 36px; /* Tamaño de fuente grande para mayor impacto visual. */ text-transform: uppercase; /* Convierte el texto a mayúsculas para un estilo más declarativo. */ font-weight: 700; /* Hace que el texto sea bold para destacarlo. */ color: #fff; /* Color de texto blanco para contraste con el fondo oscuro. */ letter-spacing: 0.5px; /* Espacio adicional entre letras para mejorar la legibilidad. */ border-bottom: 2px solid #fff; /* Línea inferior para subrayar y destacar el encabezado. */ display: inline-block; /* Permite al elemento tener un ancho que se ajusta a su contenido, permitiendo también el uso de margen y padding. */ padding-bottom: 10px; /* Espacio debajo del texto, aumentando la separación de la línea inferior. */ margin-bottom: 50px; /* Margen debajo del encabezado para separarlo de contenido subsiguiente. */ margin-top: 0px; /* Asegura que no haya espacio adicional arriba del encabezado. */ } .third-content p { font-size: 13px; /* Tamaño de fuente estándar para texto de cuerpo. */ color: #fff; /* Texto blanco para legibilidad contra fondos oscuros. */ letter-spacing: 0.5px; /* Espacio adicional entre letras mejora la legibilidad. */ font-weight: 300; /* Fuente más ligera para el texto del cuerpo, contrastando con los encabezados. */ line-height: 24px; /* Altura de línea para mejorar la legibilidad del texto de párrafo. */ margin-bottom: 30px; /* Espacio debajo de cada párrafo para evitar que el texto se vea apretado. */ } .third-content a { color: #fff;/* Mantiene el color blanco para los enlaces, asegurando consistencia y legibilidad. */ text-decoration: underline;/* Subraya los enlaces para diferenciarlos del texto de párrafo. */ } .third-content .main-btn a { display: inline-block; /* Permite al botón ajustar su tamaño al contenido y usar margen y padding. */ border: 2px solid #fff; /* Borde blanco sólido para destacar el botón contra el fondo. */ padding: 8px 15px; /* Padding interno para hacer el botón más grande y fácil de interactuar. */ font-size: 13px; /* Tamaño de fuente coherente con el texto del cuerpo. */ text-transform: uppercase; /* Texto en mayúsculas para un aspecto más enfocado y estilizado. */ letter-spacing: 1px; /* Espacio extra entre letras para mejorar la estética y legibilidad del botón. */ color: #fff; /* Color de texto blanco para mantener la coherencia visual con otros elementos. */ text-decoration: none; /* Remueve el subrayado por defecto de los enlaces para un look más limpio. */ transition: all 0.5s; /* Transición suave para efectos de hover o foco, mejorando la interacción visual. */ } .fourth-content { padding: 5px; } .fourth-content .container-fluid { padding-right: 15px; padding-left: 15px; } .fourth-content .container-fluid .col-md-4 { padding-right: 0px; padding-left: 0px; } .fourth-content .item { margin: 10px; } .fourth-content .item img { max-width: 100%; overflow: hidden; } .fourth-content .item .thumb { position: relative; } .fourth-content .item .hover-effect {/* Configura un efecto de "hover" oscureciendo la imagen y mostrando contenido adicional cuando el usuario pasa el mouse sobre el ítem. */ text-align: left; position: absolute; color: #fff; background-color: rgba(0,0,0,0.95); bottom: 0; top: 0; left: 0; right: 0; opacity: 0; visibility: hidden; transition: all 0.8s; } .fourth-content .item:hover .hover-effect { opacity: 1; /* Hace el efecto de hover completamente visible al pasar el mouse. */ visibility: visible; /* Cambia la visibilidad al pasar el mouse para mostrar el contenido del hover. */ } .fourth-content .item .hover-effect .hover-content {/* Centra el contenido del efecto de hover verticalmente y lo posiciona para una óptima legibilidad. */ transform: translateY(-50%); position: absolute; text-align: left; width: 100%; top: 50%; left: 0; padding: 30px; } .fourth-content .item .hover-effect h2 { font-size: 18px; /* Tamaño de la fuente de los títulos h2 dentro del efecto de hover. */ text-transform: uppercase; /* Transforma el texto a mayúsculas para un aspecto uniforme. */ font-weight: 700; /* Hace que el texto sea más grueso (bold). */ color: #fff; /* Establece el color del texto a blanco. */ letter-spacing: 0.5px; /* Aumenta el espacio entre letras para mejorar la legibilidad. */ border-bottom: 1px solid #fff; /* Añade una línea inferior para destacar visualmente el título. */ display: inline-block; /* Permite que el elemento tenga dimensiones y se muestre en línea con otros elementos. */ padding-bottom: 10px; /* Añade espacio debajo del texto para separarlo de contenido adyacente. */ margin-bottom: 10px; /* Añade un margen adicional debajo para más espacio. */ margin-top: 0px; /* Asegura que no haya margen extra en la parte superior. */ } .fourth-content .item .hover-effect p { font-size: 13px; /* Tamaño de la fuente para el texto de los párrafos dentro del efecto de hover. */ /* Resto de propiedades similares al h2 para uniformidad en el diseño. */ text-transform: uppercase; letter-spacing: 0.5px; line-height: 22px; padding-bottom: 0px; margin-bottom: 0px; } .fifth-content .container-fluid { padding-left: 0px; padding-right: 0px;/* Elimina el padding izquierdo y derecho para maximizar el espacio de contenido. */ } .fifth-content .container-fluid .col-md-6 { padding-left: 0px; padding-right: 0px; /* Similar al .container-fluid para manejar el padding en columnas específicas. */ } .fifth-content #map { padding: 50px 0px 50px 50px;/* Ajusta el padding para el mapa y el formulario de contacto para una mejor visualización y espaciado. */ } .fifth-content #contact { padding: 50px 50px 50px 50px;/* Ajusta el padding para el mapa y el formulario de contacto para una mejor visualización y espaciado. */ } .fifth-content input { border-radius: 0px; /* Estilo de bordes cuadrados para inputs y textareas. */ padding-left: 15px; /* Padding interior izquierdo para el texto. */ font-size: 13px; /* Tamaño de fuente para texto dentro de inputs y textareas. */ font-weight: 300; color: #fff; /* Color del texto. */ background-color: rgba(250, 250, 250, 0.15); /* Color de fondo semi-transparente. */ outline: none; /* Elimina el contorno que aparece al enfocar el elemento. */ border: none; /* Elimina el borde predeterminado. */ box-shadow: none; line-height: 40px; /* Altura de línea para centrar verticalmente el texto dentro del input/textarea. */ height: 40px; width: 100%; /* Asegura que los inputs y textareas ocupen todo el ancho disponible. */ margin-bottom: 25px; /* Margen inferior para separar de otros elementos. */ } .fifth-content textarea { border-radius: 0px; padding-left: 15px; padding-top: 10px; font-size: 13px; font-weight: 300; color: #fff; background-color: rgba(250, 250, 250, 0.15); outline: none; border: none; box-shadow: none; height: 165px; max-height: 220px; width: 100%; max-width: 100%; margin-bottom: 25px; } .fifth-content button {/* Estilos para botones, incluyendo bordes, padding, y efectos de transición. */ max-width: 100%; width: 100%; display: inline-block; border: 2px solid #fff; padding: 8px 15px; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: #fff; text-decoration: none; background-color: transparent; border-radius: 0px; transition: all 0.5s; } .fifth-content button:hover { color: #232323;/* Cambia el color del texto al pasar el mouse. */ background-color: #fff;/* Cambia el color de fondo al pasar el mouse para un contraste alto. */ } .footer .content { left: 15%; /* Posiciona el contenido del footer empezando desde el 30% del lado izquierdo del contenedor padre */ width: 70%; /* El ancho del contenido del footer es el 70% del contenedor padre */ max-width: 70%; /* El ancho máximo del contenido del footer es también el 70% */ position: absolute; /* Posicionamiento absoluto, lo saca del flujo normal del documento y se posiciona en relación a su contenedor relativo más cercano */ bottom: 0; /* Alinea el contenido del footer en la parte inferior del contenedor padre */ right: 0; /* Alinea el contenido del footer hacia el lado derecho del contenedor padre */ display: inline-block; /* El contenido se muestra en línea pero permite establecer dimensiones */ } .footer .content p { text-align: center; /* Centra el texto de los párrafos dentro del contenido del footer */ font-size: 13px; /* Tamaño de fuente de 13 píxeles para el texto dentro del contenido del footer */ color: #fff; /* Color del texto blanco */ margin-bottom: 20px; /* Margen inferior de 20 píxeles para separar este elemento de otros debajo */ } .footer .content p a { color: #aaa; /* Color gris claro para los enlaces dentro de los párrafos del contenido del footer */ text-decoration: none; /* Elimina el subrayado de los enlaces */ } /* REPONSIVE */ @media (max-width: 996px) { /* Ajustes generales que se aplican cuando el viewport es menor a 991px */ nav ul { margin-left: 25px; /* Añade un margen izquierdo a la lista dentro del elemento