/* JAVI AGENCY*/
/* Version: 2.0 */
/* 03-04-2024*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*FONTS */
/*-------------------------------------------------------------------------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Catamaran:700,400,900,800);
@import url(https://fonts.googleapis.com/css?family=PT+Serif);
@import url("https://use.typekit.net/gpa2dtg.css");




#blog-list li {
    margin-bottom: 20px; /* Espacio entre cada elemento <li> */
    display: block; /* Asegura que los <li> ocupen toda la línea */
}





























.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    grid-gap: 0px;
    padding: 0px;
}

.grid-item {
    position: relative;
    overflow: hidden;
	background-color: #0B171F;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.grid-item:hover img {
    transform: scale(1.05); /* Slight zoom on hover */
}

.text-overlay {
    position: absolute;
    bottom: 0;
    color: white;
    width: 100%;
    text-align: center;
    font-size: 24px;
    padding: 10px 0;
    transition: background 0.3s ease;
}

.h1-item .text-overlay {
    font-size: 36px; /* Bigger text for h1 */
    font-weight: bold;
}

.grid-item:hover .text-overlay {
    background: rgba(0, 0, 0, 0.7); /* Darker background on hover */
}

/* Responsive Design */
@media (max-width: 800px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on smaller screens */
    }
}

@media (max-width: 500px) {
    .grid-container {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}








/* Style for the slider container */
.slider-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
}

/* Hide all images by default */
.image-slides {
    display: none;
}

.image-slides img {
    vertical-align: middle;
}

/* Navigation buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Fade animation for the slides */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from { opacity: .4; }
    to { opacity: 1; }
}

/* Dots/Indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}










/* Style for the Previous/Next buttons */
.slide-button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white; /* Color of the arrow */
  font-weight: bold;
  font-size: 24px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  transition: 0.3s;
  z-index: 10;
}

.slide-button.prev {
  left: 0;
  border-radius: 3px 0 0 3px;
}

.slide-button.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Add a hover effect for the buttons */
.slide-button:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darker background when hovering */
}

/* Dots (Indicators) */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Container for the dots */
.slider-dots {
  text-align: center;
  padding: 10px;
  position: relative;
  top: 20px;
}

/* Positioning for the slider container */
.slider-container {
  position: relative;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
}

.testimonial {
  display: none;
  text-align: center;
  color: white;
  padding: 20px;
}

.testimonial.active {
  display: block;
}









.step-block {
    width: 16%;
    text-align: center;
}

.circle-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
	text-align: justify;
    align-items: center;
    margin: 0 auto;
}

.icon-container {
    margin-bottom: 20px;
}


@media (max-width: 768px) {
    .step-block {
        width: 100%;
        margin-bottom: 30px;
    }
}


 .image-container {
            width: 100%;
            height: 100vh; /* Full height on the viewport */
            background-size: cover;
            background-position: center;
            cursor: pointer; /* Show that it's clickable */
        }

        /* Remove padding or margins on mobile for full-width effect */
        @media (max-width: 768px) {
            .contenedor {
                padding: 0;
                margin: 0;
            }

            .image-container {
                height: 100vh; /* Full height of the viewport */
                background-size: cover; /* Ensure image covers entire container */
            }
        }




/* Form container */
#contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: ;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Form groups */
.form-group {
    margin-bottom: 15px;
}

/* Form labels */
.form-group label {
    display: block;
    font-weight: 100;
    margin-bottom: 5px;
    color: #333;
}

/* Form inputs */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #585858;
	color: #0B171F;
	font-weight: 100;
    border-radius: 5px;
    box-sizing: border-box;
	font-family: 'Helvetica'sans-serif;
}

/* Dropdown menu */
.form-group select {
	font-family: 'Helvetica'sans-serif;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
	font-weight: 100;
    background:#0B171F;
	color: #C5C5C5
}

/* Textarea */
.form-group textarea {
	
    resize: vertical;
}





.phone-icon {
    position: fixed;
    bottom: 20px; /* Distance from the bottom */
    right: 20px;  /* Distance from the right */
    z-index: 1000; /* Ensures it stays on top of other content */
    background-color: #8CC860; /* Background color of the icon */
    color: white; /* Color of the icon */
    border-radius: 50%; /* Makes the icon round */
    padding: 15px; /* Adds some padding around the icon */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Adds a shadow for a floating effect */
    text-decoration: none; /* Removes underline from the link */
    display: flex; /* Centers the icon inside the button */
    align-items: center; /* Centers the icon vertically */
    justify-content: center; /* Centers the icon horizontally */
}

.phone-icon i {
    font-size: 25px; /* Size of the FontAwesome icon */
}






/* Initial styles for the background slider */
#background-slider {
    position: relative;
    overflow: hidden;
    transition: opacity 3s ease-in-out; /* Default transition for fade-out effect */
}

/* Apply the background image using a pseudo-element for zoom effect */
#background-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Use the background image of the parent */
    background-size: cover;
    background-position: center;
    z-index: -1; /* Ensures the background is behind the content */
    transition: transform 10s ease-in-out; /* Smooth transition for zoom effect */
    transform-origin: center; /* Ensure zoom starts from the center */
    will-change: transform; /* Hint to browsers to optimize animations */
}

/* Animation for zoom effect */
.zoom-animation::before {
    animation: zoomEffect 6s forwards; /* Apply zoom effect when class is added */
}

@keyframes zoomEffect {
    0% {
        transform: scale(1); /* Start at normal size */
        transform-origin: center; /* Start zooming from the center */
    }
    100% {
        transform: scale(1.2); /* Zoom in */
        transform-origin: center; /* Ensure it stays centered */
    }
}

/* Fade-out effect for the background image */
#background-slider.fade-out {
    opacity: 0; /* Fade out to transparent */
}








#main-home {background-attachment: fixed}
.social-icon {
    color: #00145C; /* Establece color base para los íconos */
    transition: color 0.3s ease; /* Suaviza la transición del color */
}

.social-icon:hover {
    color: blue!important; /* Establece el color en hover con mayor fuerza */
}

#changing-text {
            filter: blur(19px); /* Inicia desenfocado */
            transition: filter 2s ease-in, opacity 1s ease-in; /* Transición suave de desenfoque y opacidad */
            opacity: 0; /* Inicia invisible */
        }

        #changing-text.show {
            filter: blur(0); /* Se vuelve nítido */
            opacity: 1; /* Se vuelve visible */
        }

.hidden {
    opacity: 0;  /* Completamente transparente */
}



.hidden-menu {
    top: -100%; /* Cambia este valor según la altura del menú */
}


#contact{width: 800px}


#main {
	display: flex;
    position: relative;
    text-align: center;
    padding: 0px 20px;
    max-width: 800px;
	max-height: 850px;
    margin: auto;
    overflow: hidden;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.4), rgba(230, 242, 255, 0.05));
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
	border-radius:15px;
    z-index: 1; /* Asegura que se muestre encima del fondo desenfocado */
	box-shadow: 0 2px .5px rgba(0,0,0,0.05);
}

#main2 {
    position: relative;
    text-align: center;
    padding: 0px 20px;
    max-width: 1000px;
    margin: auto;
    overflow: hidden;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(230, 242, 255, 0.1));
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
	border-radius:8px;
    z-index: 1; /* Asegura que se muestre encima del fondo desenfocado */
	box-shadow: 0 2px .5px rgba(0,0,0,0.05);
}



.glow-on-hover-dark2 {
    /* Estilos para el botón, asegúrate de que están correctamente definidos */
}


.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.row {
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.col-md-12, .col-sm-12, .col-xs-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.sorting-menu {
    margin-bottom: 20px;
}

.sorting-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.sorting-item {
    border: solid #fff;
    display: block;
    overflow: hidden;
}

.img-link img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .2s;
}

.img-link:hover img {
    transform: scale(1.1);
}


@keyframes slideDownDesktop {
  0% {
    transform: translateY(-20px);
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Clase para iniciar la animación en la versión de escritorio */
.submenu-active-desktop {
  animation: slideDownDesktop 0.5s ease-out;
}


@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.menu-animate-in {
  animation: slideDown 1s forwards; /* Reducido de 0.5s a 0.25s */
}

@keyframes fadeInBlur {
  from {
    opacity: 0;
    filter: blur(15px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

#menu-links {
  /* Asegúrate de que la animación 'fadeInBlur' también se acelere */
  animation: fadeInBlur .8s ease forwards;
  /* Puedes ajustar el animation-delay según sea necesario */
}

.submenu li {
  /* Asegúrate de que la animación 'fadeInBlur' también se acelere */
  animation: fadeInBlur .8s ease forwards;
  /* Puedes ajustar el animation-delay según sea necesario */
}

@keyframes slideInFromRight {
  from {
    transform: translateX(100%); /* Comienza fuera de la pantalla, a la derecha */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* Termina en su posición final, en pantalla */
    opacity: 1;
  }
}

.submenu.animate-in {
  animation: slideInFromRight 0.4s ease forwards;
}

.container-submenu {
		padding-left: 9%}
#testimonial-p{
font-style: italic; font-size: 20px; color:#ADACAC;font-weight: 200;
}
#testimonial-autor{
font-size: 14px; color:#ADACAC;font-weight: bold;
}
#testimonial-company{
font-style: normal; font-size: 14px; color:#ADACAC;font-weight: 200;
}


/* Testimonial Slider Styles */
.slider-container {
  position: relative;
  width: 100%; /* Full width */
  max-width: 1200px; /* Max width can be adjusted */
  margin: auto; /* Center the slider */
  overflow: hidden;
}

.testimonial-slide {
  display: flex;
  transition: transform 0.5s ease;
}


/* CSS for the Testimonials section */
.slider-dots {
  text-align: center;
  position: relative;
  bottom: 0px; /* Adjust as needed */
  left: 50%;
	bottom: 4%;
  transform: translateX(-50%);
}


.testimonial {
  padding: 0 0%; /* Adjust the padding as needed */
  flex: 0 0 100%; /* Each testimonial takes full width */
  opacity: 0.8; /* Adjust opacity if needed */
  box-sizing: border-box;
  color: #fff; /* Text color */
  font-size: 1rem; /* Adjust font size */
  text-align: center; /* Center text */
}

/* Navigation Buttons */
.slide-button {
  position: absolute;
  top: 85%;
  transform: translateY(-50%);
  background-color: transparent;
  color: #676767;
  border: none;
  cursor: pointer;
  font-size: 2rem; /* Adjust size */
  font-weight: 100;	
}

.prev {
  left: -3rem;
}

.next {
  right: -3rem;
}


.dot {
  cursor: pointer;	
  display: inline-block;
  width: 11px; /* Size of dots */
  height: 11px;
  margin: 0 5px;
  background-color: #D0D0D0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: #8CC860; /* Active dot color */
}


.gradient-text {
            background: linear-gradient(45deg, #9991f3, #e6e6e6, #fff); 
            -webkit-background-clip: text;
            color: transparent;
            display: inline-block;
            padding: 0px;
        }

.two-columns {
    column-count: 2;
    column-gap: 2px;
}
.one-column {
    column-count: 1;
}

ul a {color:#CACACA}

ul a.white-hover:hover {
    color: white;
}

ul a.white-hover:hover,
ul a.white-hover:hover i {
    color: gray;
}


/*Clock*/
#clock .hidden-colon {
    color: transparent; /* o el color de fondo donde está el reloj, si no es transparente */
    visibility: visible; /* para asegurarte de que ocupa espacio */
}







ul.main-menu li a {
    position: relative;  /* Necesario para posicionar correctamente el pseudo-elemento */
    transition: all 0.3s;  /* Suavizar la transición */
    font-weight: 100;
    font-size: 12px;
}

ul.main-menu li a::after {
    content: '';  /* Contenido vacío para el pseudo-elemento */
    position: absolute;  
    bottom: 0;  /* Posicionado en la parte inferior del enlace */
    left: 50%;  /* Centrado horizontalmente */
    transform: translateX(-50%);  /* Centrado preciso */
    width: 0%;  /* Iniciar con un ancho de 0 */
    height: 4px;  /* Grosor de la línea */
    background-color: currentColor;  /* Color de la línea igual al color del texto */
    transition: width 0.3s;  /* Suavizar la transición del ancho */
    border-radius: 1px; 
	top: 30px;
}

ul.main-menu li a:hover::after {
    width: 50%;  /* Extender la línea al 50% del ancho del enlace en hover */
}


#bg-wrap {
    position: relative;
    overflow: hidden; 
}
    
#bg-wrap svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
    
.small-container {
    position: relative;
    z-index: 2;
}



.hover-link:hover {
  color: #fbb416;
}
.hover-link-white:hover {
  color: white;
}

/* MAIN MENU */
.main-menu {
  list-style-type: none;
  overflow: hidden;
  justify-content: space-evenly;
  display: flex; 
  list-style: none;
  margin: 0 auto;   
  display: flex;
  max-width: 4000px;
  padding: 20px 0px;         
}

.main-menu li {
  float: left;
	padding-top: 4px;
}

.main-menu li a {
  display:flex;
  color: white;
  text-align: center;
  font-weight: normal;
  font-size: 16px;
  padding: 0px 16px;
  text-decoration: none;    
}

.main-menu li a:hover {
    color:white;
}

.container-submenu {
  padding-top: 0px;
  display: none;
}
.container-submenu a {
  padding-left: 70px;
  line-height: 2;
  font-size: 22px;    
  color:white;
}


@media (max-width: 1209px) {
    .col-small {
        padding-right: 5px;
        padding-left: 5px;
        box-sizing: border-box;
    }
}

/* ANIMATION EFFECTS */

/* ----------------------------------------------
BUTTON GLOW DARK
*/
.glow-on-hover-dark3 {
    width: 280px;
    height: 25px;
    border: none;
    outline: none;
    background:none;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 165px;
  }

  .glow-on-hover-dark3:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(40px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1; /* change the opacity to 1 */
    transition: opacity .1s ease-in-out;
    border-radius: 15px;
  }

  .glow-on-hover-dark3:active {
    color: #;
  }

  .glow-on-hover-dark3:active:after {
    background: ;
  }

  .glow-on-hover-dark3:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: ;
    left: 0;
    top: 0;
    border-radius: 15px;
  }




.glow-on-hover-dark {
    width: 200px;
    height: 25px;
    border: none;
    outline: none;
    color: ;
    background:none;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 165px;
  }

  .glow-on-hover-dark:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(40px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1; /* change the opacity to 1 */
    transition: opacity .1s ease-in-out;
    border-radius: 15px;
  }

  .glow-on-hover-dark:active {
    color: #;
  }

  .glow-on-hover-dark:active:after {
    background: ;
  }

  .glow-on-hover-dark:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: ;
    left: 0;
    top: 0;
    border-radius: 15px;
  }


  @keyframes glowing {
    0% {
      background-position: 0 0;
    }
    50% {
      background-position: 400% 0;
    }
    100% {
      background-position: 0 0;
    }
  }




@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.texto-animado {
  animation-name: fadeIn;
  animation-duration: 6s; /* Puedes ajustar la duración de la animación aquí */
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
.rounded-border-btn {
    border: 2px solid #4F4F4F; 
    border-radius: 15px;     
    padding: 10px 20px;      
    background-color: transparent; 
    cursor: pointer;        
    transition: 0.3s;       
    font-size: 16px; 
    height: 50px;
    color:rgba(14, 23, 30, 1);; 
    align-self: center;
}
.rounded-border-btn-dark {
    border: 2px solid #878787; 
    border-radius: 15px;     
    padding: 10px 20px;      
    background-color: transparent; 
    cursor: pointer;        
    transition: 0.3s;       
    font-size: 16px; 
    height: 50px;
    align-self: center;
}
.zoom-button {
    transition: transform 0.3s; 
    display: inline-block; 
}

.zoom-button:hover {
    transform: scale(1.1); 
}


.hover-text-black{color: #4F4F4F}
.hover-text-black:hover{color: white}

.hover-text-white{color: #4F4F4F}
.hover-text-white:hover{color: white}

.hover-text-blue{color: #4F4F4F}
.hover-text-blue:hover{color: #021b79}

.glow-on-hover-dark2 {
    width: 200px;
    height: 50px;
    border: none;
    outline: none;
    color: ;
    background:#99C66D;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 15px;
  }

  .glow-on-hover-dark2:before {
    content: '';
    background: linear-gradient(45deg, #8CC860);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 100%;
    z-index: -1;
    filter: blur(0px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 1; /* change the opacity to 1 */
    transition: opacity .1s ease-in-out;
    border-radius: 10px;
  }

  .glow-on-hover-dark2:active {
    color: #;
  }

  .glow-on-hover-dark2:active:after {
    background: #99C66D;
  }

  .glow-on-hover-dark2:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: ;
    left: 0;
    top: 0;
    border-radius: 15px;
  }

 .glow-on-hover-text {
    font-size: 30px; /* Ajusta según sea necesario */
    background: linear-gradient(45deg, #242424, #0606B2, #0606B2, #242424);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Esto hará que el texto sea transparente, permitiendo que se vea el fondo */
    background-size: 200%;
    animation: glowing 25s linear infinite;
    border-radius: 15px;
}

.glow-on-hover-text2 {
    font-size: 30px; /* Ajusta según sea necesario */
    background: linear-gradient(45deg, #ffd89b, #19547b, #ffd89b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Esto hará que el texto sea transparente, permitiendo que se vea el fondo */
    background-size: 400%;
    animation: glowing 60s linear infinite;
    border-radius: 15px;
}

@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}


@keyframes gradient-background {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes gradient-background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-background {
  background: linear-gradient(45deg, #ffd89b, #19547b, #ffd89b);
  background-size: 300% 300%;
  animation: gradient-background 10s ease infinite;
  -webkit-animation: gradient-background 10s ease infinite; /* Para Safari y Chrome */
  -moz-animation: gradient-background 10s ease infinite; /* Para Firefox */
  -o-animation: gradient-background 10s ease infinite; /* Para Opera */
}

@keyframes gradient-background2 {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-background2 {
  background: linear-gradient(45deg, #ffd89b, #19547b, #ffd89b);
  background-size: 200% 200%;
  animation: gradient-background 10s ease infinite;
  -webkit-animation: gradient-background 10s ease infinite; /* Para Safari y Chrome */
  -moz-animation: gradient-background 10s ease infinite; /* Para Firefox */
  -o-animation: gradient-background 10s ease infinite; /* Para Opera */
}


.texto-animado {
  animation-name: fadeIn;
  animation-duration: 6s; /* Puedes ajustar la duración de la animación aquí */
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}



/*-------------------------------------------------------------------------------------------------------------------------------*/
/*LOADER */
/*-------------------------------------------------------------------------------------------------------------------------------*/

.loader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}


/* Full-screen loader */
#loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white; /* Or any other background color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Ensuring the image fits within the mobile screen */
#loader img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* This will scale the image while maintaining aspect ratio */
}


/*BUTTONS */
.colorfull-btn {
    display: inline-block;
    font-family: 'Roboto', sans-serif; /* Esta es una suposición, tendrás que ajustar la fuente según tus necesidades */
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    border: none;
    background: linear-gradient(45deg, #b92b27, #1565c0);
    padding: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 10px rgba(0,0,0,0.2);
    text-decoration: none;
    line-height: 1;
}

.colorfull-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.subscribe-btn {
    display: inline-block;
    font-family: 'Roboto', sans-serif; /* Esta es una suposición, tendrás que ajustar la fuente según tus necesidades */
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(45deg, #8CC860,#8CC860);
    padding: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    line-height: 1;
	border-style: solid;
	border-color: #8CC860;
}

.subscribe-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 15px rgba(0,0,0,0.0);
}

.subscribe-btn2{
    display: inline-block;
    font-family: 'Roboto', sans-serif; /* Esta es una suposición, tendrás que ajustar la fuente según tus necesidades */
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(0,0,0,0.0);
    text-decoration: none;
    line-height: 1;
	border-style: solid;
	border-color: white;
	background: none;
}

.subscribe-btn2:hover {
    transform: scale(1.05);
}






.subscribe-btn3{
    display: inline-block;
    font-family: 'Roboto', sans-serif; /* Esta es una suposición, tendrás que ajustar la fuente según tus necesidades */
    font-weight: bold;
    text-transform: uppercase;
    padding: 15px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 10px rgba(0,0,0,0.0);
    text-decoration: none;
    line-height: 1;
	border-style: solid;
	border-color: #8CC860;
	background: none;
}

.subscribe-btn3:hover {
    transform: scale(1.05);
}


.glow-on-hover {
    width: 220px;
    height: 60px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

.glow-on-hover:before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: -1;
    border: 3px solid;
    border-image-slice: 1;
    width: calc(100%);
    height: calc(100% + 8px);
    animation: glowing-border 7s linear infinite;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    
}


.glow-on-hover:hover:before {
    opacity: 1;
}


@keyframes glowing-border {
    0% { border-image-source: linear-gradient(-45deg, rgba(255,0,0,0), #00ffd5, rgba(255,0,0,0)); }
    14% { border-image-source: linear-gradient(-45deg, rgba(255,0,0,0), #ff7300, rgba(255,0,0,0)); }
    28% { border-image-source: linear-gradient(45deg, rgba(255,0,0,0), #fffb00, rgba(255,0,0,0)); }
    42% { border-image-source: linear-gradient(-45deg, rgba(255,0,0,0), #48ff00, rgba(255,0,0,0)); }
    57% { border-image-source: linear-gradient(45deg, rgba(255,0,0,0), #00ffd5, rgba(255,0,0,0)); }
    71% { border-image-source: linear-gradient(-45deg, rgba(255,0,0,0), #002bff, rgba(255,0,0,0)); }
    85% { border-image-source: linear-gradient(45deg, rgba(255,0,0,0), #7a00ff, rgba(255,0,0,0)); }
    100% { border-image-source: linear-gradient(-45deg, rgba(255,0,0,0), #ff00c8, rgba(255,0,0,0)); }
}



.scale-in-bl3 {
	-webkit-animation: scale-in-bl 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-bl 8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-12-14 12:59:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-bl
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-bl3 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-bl3 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}


.scale-in-bl2 {
	-webkit-animation: scale-in-bl 23s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-bl 23s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-12-14 12:59:27
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-bl
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-bl2 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-bl2 {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}


.col-md-12 #contact {font-size: 50px;padding-top: 0px}
.contact {padding-right: 5px;padding-left: 5px}
.bg-pan-left {
	-webkit-animation: bg-pan-left 8s both;
	        animation: bg-pan-left 8s both;
}
/**
 * ----------------------------------------
 * animation bg-pan-left
 * ----------------------------------------
 */
@-webkit-keyframes bg-pan-left {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes bg-pan-left {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/**
 * ----------------------------------------
 * animation image zoom out 
 * ----------------------------------------
 */

.bg-zoom-out {
    border-radius: 10px;
  background-size: 200%;
  transform: scale(1);
}


.zoom-out-active {
  -webkit-animation: bg-zoom-out 2s both;
          animation: bg-zoom-out 2s both;
}


@-webkit-keyframes bg-zoom-out {
  0% {
    background-size: 400%;
    background-position: center center;
  }
  50% {
    background-size: 300%;
    background-position: center center;
  }   
  100% {
    background-size: cover; /* Puedes ajustar el porcentaje para controlar el nivel de zoom out */
    background-position: center center;
  }
}

@keyframes bg-zoom-out {
  0% {
    background-size: 400%;
    background-position: center center;
  }
  50% {
    background-size: 200%;
    background-position: center center;
  }   
  100% {
    background-size: cover; /* Puedes ajustar el porcentaje para controlar el nivel de zoom out */
    background-position: center center;
  }
}





.bg-zoom-out2 {
    border-radius: 0px;
  background-size: 100%;
  transform: scale(1);
}


.zoom-out-active {
  -webkit-animation: bg-zoom-out2 2s both;
          animation: bg-zoom-out2 2s both;
}


@-webkit-keyframes bg-zoom-out2 {
  0% {
    background-size: 400%;
    background-position: center center;
  }
  50% {
    background-size: 300%;
    background-position: center center;
  }   
  100% {
    background-size: cover; /* Puedes ajustar el porcentaje para controlar el nivel de zoom out */
    background-position: center center;
  }
}

@keyframes bg-zoom-out2 {
  0% {
    background-size: 400%;
    background-position: center center;
  }
  50% {
    background-size: 200%;
    background-position: center center;
  }   
  100% {
    background-size: cover; /* Puedes ajustar el porcentaje para controlar el nivel de zoom out */
    background-position: center center;
  }
}


.scale-in-bl {
	-webkit-animation: scale-in-bl 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: scale-in-bl 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

/**
 * ----------------------------------------
 * animation scale-in-bl
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-bl {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}
@keyframes scale-in-bl {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 0% 100%;
            transform-origin: 0% 100%;
    opacity: 1;
  }
}

.text-flicker-in-glow {
	-webkit-animation: text-flicker-in-glow 1s linear both;
	        animation: text-flicker-in-glow 1s linear both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-12-14 1:35:18
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-flicker-in-glow
 * ----------------------------------------
 */
@-webkit-keyframes text-flicker-in-glow {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    text-shadow: none;
  }
  10.1% {
    opacity: 1;
    text-shadow: none;
  }
  10.2% {
    opacity: 0;
    text-shadow: none;
  }
  20% {
    opacity: 0;
    text-shadow: none;
  }
  20.1% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
  }
  20.6% {
    opacity: 0;
    text-shadow: none;
  }
  30% {
    opacity: 0;
    text-shadow: none;
  }
  30.1% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.5% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.6% {
    opacity: 0;
    text-shadow: none;
  }
  45% {
    opacity: 0;
    text-shadow: none;
  }
  45.1% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55.1% {
    opacity: 0;
    text-shadow: none;
  }
  57% {
    opacity: 0;
    text-shadow: none;
  }
  57.1% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60.1% {
    opacity: 0;
    text-shadow: none;
  }
  65% {
    opacity: 0;
    text-shadow: none;
  }
  65.1% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75.1% {
    opacity: 0;
    text-shadow: none;
  }
  77% {
    opacity: 0;
    text-shadow: none;
  }
  77.1% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85.1% {
    opacity: 0;
    text-shadow: none;
  }
  86% {
    opacity: 0;
    text-shadow: none;
  }
  86.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
}
@keyframes text-flicker-in-glow {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
    text-shadow: none;
  }
  10.1% {
    opacity: 1;
    text-shadow: none;
  }
  10.2% {
    opacity: 0;
    text-shadow: none;
  }
  20% {
    opacity: 0;
    text-shadow: none;
  }
  20.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
  }
  20.6% {
    opacity: 0;
    text-shadow: none;
  }
  30% {
    opacity: 0;
    text-shadow: none;
  }
  30.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.5% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  30.6% {
    opacity: 0;
    text-shadow: none;
  }
  45% {
    opacity: 0;
    text-shadow: none;
  }
  45.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
  }
  55.1% {
    opacity: 0;
    text-shadow: none;
  }
  57% {
    opacity: 0;
    text-shadow: none;
  }
  57.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
  }
  60.1% {
    opacity: 0;
    text-shadow: none;
  }
  65% {
    opacity: 0;
    text-shadow: none;
  }
  65.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  75.1% {
    opacity: 0;
    text-shadow: none;
  }
  77% {
    opacity: 0;
    text-shadow: none;
  }
  77.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  85.1% {
    opacity: 0;
    text-shadow: none;
  }
  86% {
    opacity: 0;
    text-shadow: none;
  }
  86.1% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
  }
}

.text-flicker-in-glow2 {
	-webkit-animation: text-flicker-in-glow 1s linear both;
	        animation: text-flicker-in-glow 1s linear both;
}


.bg-pan-bottom {
	-webkit-animation: bg-pan-bottom 3s;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-12-14 1:18:58
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bg-pan-bottom
 * ----------------------------------------
 */
@keyframes bg-pan-bottom {
  0% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 50% 0%;
  }
}
/* ----------------------------------------------
 * Generated by Animista on 2021-4-6 18:46:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */





/**
 * ----------------------------------------
 * animation bg-pan-right
 * ----------------------------------------
 */
@-webkit-keyframes bg-pan-right {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes bg-pan-right {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.bg-pan-right {
	-webkit-animation: bg-pan-right 2s infinite alternate forwards;
	        animation: bg-pan-right 2s infinite alternate forwards;
	 $first-color: #996699;
  $second-color:  #B39500;
  $third-color:  #009980;
  $fourth-color: #006699;
  $angle: 75deg;
}



.tilt-in-bottom-1 {
	-webkit-animation: tilt-in-bottom-1 20s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: tilt-in-bottom-1 20s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-12-14 1:13:45
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation tilt-in-bottom-1
 * ----------------------------------------
 */
@-webkit-keyframes tilt-in-bottom-1 {
  0% {
    -webkit-transform: rotateY(30deg) translateY(300px) skewY(-30deg);
            transform: rotateY(30deg) translateY(300px) skewY(-30deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
            transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}
@keyframes tilt-in-bottom-1 {
  0% {
    -webkit-transform: rotateY(30deg) translateY(300px) skewY(-30deg);
            transform: rotateY(30deg) translateY(300px) skewY(-30deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
            transform: rotateY(0deg) translateY(0) skewY(0deg);
    opacity: 1;
  }
}


.bg-pan-right {
	-webkit-animation: bg-pan-right 5s;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-12-14 0:42:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bg-pan-right
 * ----------------------------------------
 */
@-webkit-keyframes bg-pan-right {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@keyframes bg-pan-right {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

.text-pop-up-top {
	-webkit-animation: text-pop-up-top 20s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: text-pop-up-top 20s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2020-12-14 0:30:39
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-pop-up-top
 * ----------------------------------------
 */
@-webkit-keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 0px 20px rgba(0, 0, 0, 0.3);
  }
}
@keyframes text-pop-up-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: none;
  }
  100% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc, 0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc, 0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.5);
  }
}



.subheader a{font-family: "helvetica", sans-serif;font-size: 12px;color: #D5D5D5}
.subheader a:hover{color: #fdb940}
#clock { font-family:'helvetica-Regular''sans-serif'}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 350px);
  justify-content: center;
  align-content: center;
  grid-gap: 20px;
  height: 100vh;
}

.grid img {
  cursor: pointer;
}

#lightbox {
  position: fixed;
  z-index: 1000;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,253,253,1);
  display: none;
}

#lightbox.active {
  display: flex;
  justify-content: center;
  align-items: center;
}

#lightbox img {
  max-width: 90%;
  max-height: 80%;
  padding: 4px;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/* RESET STYLES */
/*-------------------------------------------------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
body *{font-family: helvetica, sans-serif; -webkit-text-size-adjust: none;}
.clear{clear: both; overflow: hidden; height:0px; font-size:0px; display: block;}
input, textarea, select{border: 1px solid transparent; font-family: 'helvetica', sans-serif; font-weight: 700; -webkit-appearance: none !important; border-radius: 0;}
input[type="submit"] {border: none; background: none; position: absolute; top: 50%; right: 0; width: 30px; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}
select:focus, button:focus, input:focus, textarea:focus {outline: none; }
input[type="text"], textarea{padding: 0 15px;}
textarea{resize: none;}
a, a:link, a:visited, a:active, a:hover{cursor: pointer; text-decoration: none; outline: none;}
body{font-family: 'Helvetica'sans-serif; font-weight: normal; font-size: 18px; color: #edeaea;}
input.active, textarea.active, form [type="text"].active{border-bottom: 1px solid #fdb940;}
input:focus, textarea:focus{border-bottom: 1px solid #fdb940 !important;}
.clearfix{clear: both;}
/*-------------------------------------------------------------------------------------------------------------------------------*/
/* GLOBAL SETTINGS */
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*table*/
.drop-shadow img {
        filter: drop-shadow(2px 2px 2px #18181A);
        -webkit-filter: drop-shadow(2px 2px 2px #18181A);
      }
hr {
    margin-top: 20px;
	text-align: center;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #b1b1b1;
}
.table-view{height: 100%; width: 100%; display: table;}
.row-view{display: table-row;}
.cell-view{display: table-cell; vertical-align: middle; height: inherit;}
.height-100{height: 100vh;}
.border .height-100{height: calc(100vh - 25px);}
.border .height-100 .swiper-slide .clip{height: calc(100vh - 25px); width: calc(100vw + 25px);}
.height-80{height: 80vh;}


.small-container{
    width: 100%;
}





/* Slow-motion Zoom Container */
.img-hover-zoom--slowmo img {
  transition: transform 3s, filter .5s;
}
/* The Transformation */
.img-hover-zoom--slowmo:hover img {
  transform: scale(1.5);
}
/* Blur-zoom Container */
.img-hover-zoom--blur img {
  transition: transform 1s, filter 2s ease-in-out;
  filter: blur(2px);
  transform: scale(1);
}
/* The Transformation */
.img-hover-zoom--blur:hover img {
  filter: blur(0);
  transform: scale(1.5);
}
/* Colorize-zoom Container */
.img-hover-zoom--colorize img {
  transition: transform .5s, filter 1.5s ease-in-out;
  filter: grayscale(100%);
}
/* The Transformation */
.img-hover-zoom--colorize:hover img {
  filter: grayscale(0);
  transform: scale(1.1);
}
/* Zoom-n-rotate Container */
.img-hover-zoom--zoom-n-rotate img {
  transition: transform .5s ease-in-out;
}
/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover img {
  transform: scale(2) rotate(25deg);
}
/* Point-zoom Container */
.img-hover-zoom--point-zoom img {
  transform-origin: 65% 75%;
  transition: transform 1s, filter .5s ease-out;
}
/* The Transformation */
.img-hover-zoom--point-zoom:hover img {
  transform: scale(5);
}
@media (max-width: 991px){
	.height-100, .border .height-100, .border .height-100 .swiper-slide .clip{height: 991px;}
	.height-80{height: auto;}
}
.invalid{border-bottom-color: red!important;}
.scrollfix-map{overflow: hidden;}
/*content wrapper*/
#content-wrapper{position: relative; overflow: hidden; width: 100%; z-index: 1}
#content-wrapper.style-1{padding-top: 0;}
#content-wrapper.style-3 .blocks-container{margin-left: 100px; margin-right: 100px; width: calc(100% - 200px);} 

@media (min-width: 1400px){
	#content-wrapper.style-3 .container{width: 970px;}
	#content-wrapper.style-3 footer .container{widows: 1170px;}
}
@media (min-width: 1200px){
	#content-wrapper.style-3 .container{width: 970px;}
	#content-wrapper.style-3 footer .container{widows: 1170px;}
}
#content-wrapper.style-4{padding: 0px 8%;}
#content-wrapper.style-5{padding-top: 171px;}
#content-wrapper.style-6{padding-top: 143px;}
#content-wrapper.border{padding: 25px;}
#content-wrapper.border .top-line{position: fixed; top: 0; left: 0; width: 100%; height: 25px; background: #ededed; z-index: 1000;}
#content-wrapper.border .right-line{position: fixed; top: 0; right: 0; width: 25px; height: 100%; background: #ededed; z-index: 1001;}
#content-wrapper.border .bottom-line{position: absolute; bottom: 0; left: 0; width: 100%; height: 25px; background: #ededed; z-index: 1000;}
.without-border-default #content-wrapper.border .bottom-line.style-2{bottom: -25px;}
#content-wrapper.border .left-line{position: fixed; top: 0; left: 0; width: 25px; height: 100%; background: #ededed; z-index: 1001;}
.blocks-container{position: relative; margin-top: 69px; background: transparent;}
.blocks-container.style-2{margin-top: 0;}
.blocks-container.style-3{margin-top: 152px;}
.blocks-container.style-4{margin-top: 95px;}
.blocks-container.style-3.portfolio-container{margin-top: 69px; height: calc(100vh - 69px - 65px);}
#content-wrapper.border .blocks-container.style-3.portfolio-container{margin-top: 69px; height: calc(100vh - 69px - 65px - 50px);}
/*.without-border-default #content-wrapper.style-3.border .top-line{margin-left: 100px; width: calc(100% - 200px);}*/
@media (max-width: 1270px){
	.blocks-container.style-3.portfolio-container{min-height: 600px;}
}

@media (max-width: 1215px){
	.blocks-container.style-3.portfolio-container{min-height: 700px;}
}
.Row {
    display: table;
    width: 100%; /*Optional*/
    table-layout: fixed; /*Optional*/
    border-spacing: 0px; /*Optional*/
}
.Column {
    display: table-cell;
}

@media (max-width: 991px){
	.blocks-container.style-3.portfolio-container{min-height: auto;}
	#content-wrapper.style-1{padding-right: 0; padding-left: 0;}
	#content-wrapper.style-3{padding-top: 0px; margin-right: 0; margin-left: 0; width: 100%;}
	#content-wrapper.style-4{padding-right: 0; padding-left: 0;}
	#content-wrapper.style-5{padding-right: 0; padding-left: 0; padding-top: 76px;}
	#content-wrapper.style-6{padding-top: 76px;}
	/*.blocks-container, */.blocks-container.style-3{margin-top: 60px;}
	.blocks-container.style-4, .blocks-container.style-3{margin-top: 71px;}
	#content-wrapper.style-3 .blocks-container{margin-left: 0px; margin-right: 0px; width: 100%;} 
}
@media (max-width: 480px){
	#content-wrapper.border{padding: 50;}
	#content-wrapper.border .right-line, #content-wrapper.border .left-line{display: none;}
	#content-wrapper.border .top-line{display: none;}
	#content-wrapper.border .bottom-line{display: none;}
	.container{padding-left: 10px; padding-right: 10px;padding-top: 0px; line-height: ;}
	.content {line-height: 64px;}
}
@media (min-width: 992px){
	.contains-main.col-md-4.col-md-offset-4 .h1{white-space: nowrap;}
}
@media (min-width: 992px) and ( max-width: 1600px){
	.contains-main.col-md-4.col-md-offset-4{width: 60%; margin-left: 20%; }
}
/*container width with borders*/
@media (min-width: 768px){
	#content-wrapper.border .container{width: 700px;}
	#content-wrapper.border .block .container.main-article{width: 100%;}
}
@media (min-width: 992px){
	#content-wrapper.border .container{width: 920px;}
}
@media (min-width: 1200px){
	#content-wrapper.border .container{width: 1120px;}
	#content-wrapper.border .block .container.main-article{width: 1120px;}
}
.block{position: relative; width: 100%;}
.block-bg{background-color: #fdb940;}
/*typography*/
.title{display: inline-block; position: relative;}
.title .bg{position: absolute; left: 0px; bottom: -5px; width: 0; height: 25px; z-index: -1; background: url("../img/main/title-bg.png");}
.title.activated .bg{width: 100%;align: center;}
.title span{display: inline-block;}
.loaded .title span:first-of-type:before{width: calc(100%); align: center;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; padding: 0; margin: 0;}
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a, .h6-14 a{color: #333;} 
.h1.white a, .h2.white a, .h3.white a, .h4.white a, .h5.white a, .h6.white a, .h6-14.white a{color: #fff;} 
.h1{font-size: 56px; line-height: normal; font-weight: 900;}
.h2-36{font-size: 36px; line-height: 38px; font-weight: 800;}
.h3{font-size: 22px; line-height: 28px; font-weight: 700;}
article{position: relative; width: 100%;}
.main{text-align: left;}
.main .h1{display: inline-block; position: relative; padding: 0 10px 0 5px;}
.bg-title{text-transform: ; white-space: nowrap;}
.main .h1.capitalized span{padding: 0 6px;}
.additional .subheading{text-transform: ; color: rgba(255, 255, 255, 0.5);}
.capitalized{text-transform: capitalize;}
.d{text-transform: ;}
.lowercase{text-transform: lowercase;}
.main .subheading{text-transform: ; position: relative;}
.white.main .subheading{color: rgba(255, 255, 255, 0.7);}
.main .subheading.style-2{text-transform: ; color: rgba(255, 255, 255, 0.5); display: inline-block;}
.main .subheading.style-2:after{z-index: -1; content: ""; position: absolute; left: 15px; top: -3px; width: calc(100% - 5px); height: 30px;}
.main.on-bg{text-align: left;}
.main p{font-size: 20px; line-height: 26px; font-weight: 100; color: #555;}
.main.white p{color: #fff;}
article ul:last-child { padding-bottom: 0;}
.block ul li{position: relative; line-height: 20px; padding-bottom: 10px;}
ul{list-style: none;}
ul.decorated li{padding-left: 28px; padding-bottom: 12px; font-weight: 400; position: relative;}
ul.decorated li:before{position: absolute; width: 9px; height: 9px; top: 5px; left: 0; border: 1px solid #fdb940; content: "";}
ul.decorated li:last-child{padding-bottom:0;}
.white, .white li, .white .title span{color: #fff;}
.yellow{color: #fdb940;}
.grei-919191{color: black;}
.grei-6e6e6e{color: #6e6e6e;}
.dark-555555, .dark-555555 a{color: #555555;}
.grei-adadad{color: #adadad;}
.black-222222{color: #fdb940;}
.align-center{text-align: center;}
.align-left{text-align: left;}
.align-right{text-align: right;}
.nopadding{padding: 0px;}
.floating{position: relative; float: left;}
.block .container .col-md-4.col-md-offset-4:nth-child(1){padding: 0;}

@media (max-width: 1400px){
	.xx-large{font-size: 90px; line-height: 90px; font-weight: 900;}
}


@media (min-width: 1210px){
.col-small {
    padding-right: 60px;
    padding-left: 5px;
}
}	
	
@media (max-width: 991px){
	.main .offset-12{height: 0;}
	.title .bg{width: 100%;}
	.h1 .inline-content{display: inline; position: relative; line-height: 60px;}
	.block .col-md-10.col-md-offset-1{padding: 0;}
	.h1.xx-large, .h1.xxx-large{font-size: 70px;}
	/*.main .h1{white-space: nowrap;}*/
}
@media (max-width: 768px){
	.h1 .content{display: inline; position: relative; line-height: 60px;padding-top: 30px;}
	.h1.xx-large, .h1.xxx-large{font-size: 52px;}
	.main .h1{white-space: normal; display: inline; padding-left: 0;}
	.main .h1 .bg{display: none;}
}
@media (max-width: 480px){
	.h1-border{padding: 0px 5px;}
	.main .h1{font-size: 30px;}
	.h1 .content{font-size: 50px; line-height: 54px;}
}
/*background*/
.bg-nofixed{position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden; background-repeat: no-repeat; background-position: 50% 0px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; -ms-background-size: cover; background-attachment:scroll;}
.bg{position:fixed;}
.bg img{position:absolute;}
.bg video{position:absolute;}
.bg-span{position:absolute; left:0px; top:0px; width:100%; height:100%; background:rgba(0,0,0,0.45); z-index: 2;}
.bg-span.light10{background:rgba(0, 0, 0, 0.1);}
.bg-span.light20{background:rgba(46, 32, 32, 0.2);}
.bg-span.extra-light{background:rgba(31,29,27,0.14);}
.bg-span.lighter{background:rgba(0,0,0,0.2);}
.bg-span.middle50{background:rgba(0, 0, 0, 0.5);}
.bg-span.light{background:rgba(0,0,0,0.35);}
.bg-span.banner-overlay{background:rgba(0, 0, 0, 0.6); z-index: 2;}
.bg-span.hover-bg{background: rgba(0, 0, 0, 0);}
.clip{clip: rect(auto, auto, auto, auto); height: 100%; width: 100%; left: 0px; top: 0px;}
.pull-clip{left:-100%;}
/*buttons*/
.button-wrap{position:relative; width: 100%; text-align:center; display:inline-block;}
.button{position:relative; display:inline-block; font-weight: 700; color:#333333; font-size:16px; line-height: 14px; padding: 14px 24px 12px; text-transform: ; background: transparent; font-family: "helvetica", sans-serif; width: auto !important;}
.button:before{z-index: 100; position: absolute; left: -19px; top: 50%; width: 0px; height: 1px; background: #fdb940; box-sizing:border-box; -webkit-box-sizing:border-box; content: ""; }
.button:after{z-index: 100; position: absolute; right: -19px; top: 50%; width: 0px; height: 1px; background: #fdb940; box-sizing:border-box; -webkit-box-sizing:border-box; content: ""; }
.button.colored:before{content: none; }
.button.colored:after{content: none; }
.button.activated:before{width: 40px;}
.button.activated:after{width: 40px;}
.button span{background: #333333;}
.button.white span{background: #fff;}
.button .content{opacity: 0; position: relative; background: transparent !important; white-space: nowrap;}
.button.activated .content{opacity: 1;}
.button .top{position: absolute; left: 0px; top: 0px; width: 0%; height: 1px;  z-index: -1;}
.button .right{position: absolute; right: 0px; top: 0px; width: 1px; height: 0%; z-index: -1;}
.button .bottom{position: absolute; right: 0px; bottom: 0px; width: 0%; height: 1px; z-index: -1;}
.button .left{position: absolute; left: 0px; bottom: 0px; width: 1px; height: 0%; z-index: -1;}
.button.activated .top, .button.activated .bottom{width: 100%;}
.button.activated .left, .button.activated .right{height: 100%;}
.big-button{padding: 22px 0 20px; width: 301px !important; line-height: 14px;}
.big-button .top, .big-button .bottom{height: 1px; background: #fdb940;}
.big-button .left, .big-button .right{width: 1px; background: #fdb940;}
.big-button:before{background: #333333 !important; z-index: 1;}
.big-button:after{background: #333333 !important; z-index: 1;}
.small-button{padding: 9px 10px; font-size: 11px; line-height: 10px;}
.button.banner-button{margin-top: 40px;}
.white{color: #fff; }
.white .top, .white .right, .white .bottom, .white .left{background: #fff;}
.button.small-button.activated:after{content: none;}
.button.colored{transition: all 150ms ease-out; -webkit-transition: all 150ms ease-out; background: #fdb940; font-size: 12px; font-family: 'helvetica'; display: inline-block; overflow: hidden;}
.button.colored.small-13{font-size: 13px; padding: 10px 26px;}
.button .top-row, .button .bottom-row{background: transparent; display: block;}
.button .top-row{display: block; white-space: nowrap; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); opacity: 0;}
.button.colored {transition: all 150ms ease-out; -webkit-transition: all 150ms ease-out; background: #fdb940; font-size: 11px; font-family: 'helvetica'; display: inline-block; overflow: hidden;}
.button.colored span{background: transparent;}
article span.button.colored{font-size: 13px;}
form [type="submit"]{width: 100%; font-size: 20px; border: none; margin-top: 0; font-family: "helvetica", sans-serif; font-weight: 700; color: #333; text-transform: ;}
.submit-wrap:hover input[type="submit"]{background-color:transparent; color:#fdb940;}
.submit-wrap{position: relative; height: 38px;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:#919191; font-size: 14px; font-weight: 300;}
textarea:-moz-placeholder, input:-moz-placeholder{color:#919191; font-size: 15px; font-weight: 300;}
textarea::-moz-placeholder, input::-moz-placeholder {color:#919191; font-size: 15px; font-weight: 300;}
textarea:-ms-input-placeholder, input:-ms-input-placeholder{color:#919191; font-size: 15px; font-weight: 300;}
.icon-wrapper img{position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) scale(0.45); -webkit-transform: translateX(-50%) translateY(-50%)  scale(0.45); -moz-transform: translateX(-50%) translateY(-50%) scale(0.45); -ms-transform: translateX(-50%) translateY(-50%) scale(0.45); -o-transform: translateX(-50%) translateY(-50%) scale(0.45);}
/*line-decorations*/
div.before-decoration:before{content: ""; position: relative; float: left; margin-top: 11px; width: 15px; height: 1px; margin-right: 10px; background: #fdb940;}
.left-decoration{position: absolute; left: -12px; top: -12px; width: 15px; height: 15px;}
.left-decoration:before{position: absolute; bottom: 0px; left: 0px; width: 1px; height: 0px; background: #fdb940; content: "";}
.left-decoration:after{position: absolute; top: 0px; left: 0px; width: 0px; height: 1px; background: #fdb940; content: "";}
.right-decoration{position: absolute; right: -15px; top: -12px; width: 15px; height: 15px;}
.right-decoration:before{position: absolute; bottom: 0px; right: 0px; width: 1px; height: 0px; background: #fdb940; content: "";}
.right-decoration:after{position: absolute; top: 0px; right: 0px; width: 0px; height: 1px; background: #fdb940; content: "";}
.left-decoration.activated:before{height: 15px;}
.left-decoration.activated:after{ width: 15px;}
.right-decoration.activated:before{height: 15px;}
.right-decoration.activated:after{width: 15px;}
.decoration-top{position: absolute; top: -12px; left: -17px; width: calc(100% + 38px); height: 25px;}
.decoration-bottom{position: absolute; bottom: -8px; left: -17px; width: calc(100% + 38px); height: 25px;}
.decoration-top.narrow, .decoration-bottom.narrow{width: 136px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.h1.with-narrow-decoration{padding: 19px 0 17px;}
.white .decoration-top .left{position: absolute; left: 0; top: 0; width: 1px; height: 0px; background: #fdb940;}
.white .decoration-top .right{position: absolute; right: 0; top: 0; width: 1px; height: 0px; background: #fdb940;}
.white .decoration-bottom .left{position: absolute; left: 0; bottom: 0; width: 1px; height: 0px; background: #fdb940;}
.white .decoration-bottom .right{position: absolute; right: 0; bottom: 0; width: 1px; height: 0px; background: #fdb940;}
.white .decoration-top .top{position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); top: 0; width: 0px; height: 1px; background: #fdb940;}
.white .decoration-bottom .bottom{position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); bottom: 0; width: 0px; height: 1px; background: #fdb940;}
.round-decoration .h1{white-space: normal;}
.white .decoration-top.activated .top, .white .decoration-bottom.activated .bottom{width: 100%;}
.white .decoration-top.activated .left, .white .decoration-top.activated .right, .white .decoration-bottom.activated .left, .white .decoration-bottom.activated .right{height: 25px;}
.white .decoration-top.activated.narrow .left, .white .decoration-top.activated.narrow .right, .white .decoration-bottom.activated.narrow .left, .white .decoration-bottom.activated.narrow .right{height: 21px;}
.line-decoration{position: relative;}
.line-decoration:before{content: ""; position: absolute; bottom: -24px; left: 0; width: 0px; height: 1px; background: #fdb940;}
.line-decoration.activated:before{width: 30px;}
.line-decoration.centered:before{left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.line-decoration.top-right:before{bottom: auto; top: 7px; left: auto; right: -150px;}
.line-decoration.activated.top-right:before{width: 40px;}
.decoration-vertical{position: relative; width: 1px; height: 30px; margin: 24px auto 27px;}
.decoration-vertical:after{background: #fdb940; position: absolute; top: 0; left: 0; height: 0px; width: 1px; content: '';}
.decoration-vertical.activated:after{height: 30px; }
.decoration-vertical.middle, .decoration-vertical.middle.activated:after{height: 50px; margin-bottom: 90px;}
.decoration-vertical.long, .decoration-vertical.long.activated:after{height: 80px;}
.circle-decoration{position: absolute; width: 450px;  height: 450px; left: calc(50% - 225px); top: calc(50% - 225px); border-radius: 50%; z-index: -1;}
.circle-decoration.larger{width: 475px; height: 475px; left: calc(50% - 237.5px); top: calc(50% - 237.5px); }
.transparent-bg svg path{fill: transparent !important; stroke-width: 0.15;}
.circle-decoration.thin svg path{fill: transparent !important; stroke-width: 0.2;}
.c-decoration{z-index: -1; position: relative; display: block; width: 136px; height: 136px; position: absolute; left: -40px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);}
.c-decoration .right-top{display: block; position: absolute; top: 0px; right: 0; width: 1px; height: 21px;}
.c-decoration .right-top:before, .c-decoration .right-bottom:before{content: ""; display: block; background: #fdb940; height: 0px; width: 1px; position: absolute; top: 0; left: 0;}
.c-decoration .right-bottom{display: block; position: absolute; bottom: 0px; right: 0; width: 1px; height: 21px;}
.c-decoration.activated .right-top:before, .c-decoration.activated .right-bottom:before{height: 100%;}
.c-decoration .bottom{position: absolute; right: 0; bottom: 0; width: 0px; height: 1px; background: #fdb940;}
.c-decoration .left{position: absolute; left: 0; bottom: 0; width: 1px; height: 0px; background: #fdb940;}
.c-decoration .top{position: absolute; left: 0; top: 0; width: 0px; height: 1px; background: #fdb940;}
.c-decoration.activated .bottom, .c-decoration.activated .top{width: 100%;}
.c-decoration.activated .left{height: 100%;}
.c-decoration.activated:before, .c-decoration.activated:after{height: 100%}
.little-decor-bottom{position: absolute; bottom: 0; left: 30px; width: calc(100% - 60px); height: 15px;}
.little-decor-bottom .left{position: absolute; left: 0; top: 0; width: 1px; height: 0; background: #fdb940; }
.little-decor-bottom .bottom-left{position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: #fdb940; }
.little-decor-bottom .right{position: absolute; right: 0; top: 0; width: 1px; height: 0; background: #fdb940; }
.little-decor-bottom .bottom-right{position: absolute; right: 0; bottom: 0; width: 0; height: 1px; background: #fdb940; }
.little-decor-bottom.activated .left, .little-decor-bottom.activated .right{height: 15px;}
.little-decor-bottom.activated .bottom-left, .little-decor-bottom.activated .bottom-right{width: 15px;}
.separator{position: relative; float: left; width: 100%; height: 1px; background: #ededed;}
@media (min-width: 1200px){
	.button:hover:before, .button:hover:after{width: 100px;}
	.big-button:hover:before, .big-button:hover:after{width: 170px;}
	.button.button-style-2:hover{background-color:transparent; color:#fdb940;}
	.button.button-style-2:hover:after{border:5px solid #fdb940;}
	.button.button-style-3:hover{background: transparent; color: #fff;}
	.button.button-style-3:hover:after{border-color: #fff;}
	.button.button-style-4:hover:after{border-color: #fff;}
	.animated-block:hover .line-decoration.wide:before{width: 60px;}
	.button.colored:hover .bottom-row {transform: translateY(200%); -webkit-transform: translateY(200%); -moz-transform: translateY(200%); -ms-transform: translateY(200%); -o-transform: translateY(200%); opacity: 1;}
	.button.colored:hover .top-row {opacity: 1; top: 50%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%);}
}
@media (max-width: 991px){
	.button span.top, .button span.bottom{width: 100%;}
	.button span.left, .button span.right{height: 100%;}
	.h1 .content .left-decoration, .h1 .content .right-decoration{top: 0;}
	.decoration-top{top: 3px;}
	.decoration-bottom{bottom: 6px;}
	.line-decoration:before, .button:before, .button:after{width: 30px;}
	.line-decoration.wide:before{width: 60px;}
	.button span.content{opacity: ;}
	.decoration-vertical{margin: 14px auto 15px;}
	.decoration-vertical:after{height: 30px;}
	.decoration-vertical.middle:after{height: 50px;}
	.block-type-9.with-slider .swiper-slide-active .table-view .decoration-vertical:after, .decoration-vertical.long, .decoration-vertical.long:after{height: 30px !important;}
	.line-decoration:before{bottom: -14px;}
	.circle-decoration{border: 1px solid #fdb940;}
	.decoration-vertical.middle, .decoration-vertical.middle.activated:after{margin-bottom: 40px;}
	.little-decor-bottom .left, .little-decor-bottom .right{height: 15px;}
	.little-decor-bottom .bottom-left, .little-decor-bottom .bottom-right{width: 15px;}
}
@media (max-width: 767px){
	.circle-decoration{width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 200px);}
	.c-decoration{left: -18px;}
	.little-decor-bottom{display: none;}
}
@media (max-width: 480px){
	.big-button{width: 200px !important;}
	.circle-decoration{display: none;}
}
/*spacers*/
.offset-5{height: 5px; clear: both; display: block;}
.offset-10{height: 10px; clear: both; display: block;}
.offset-12{height: 12px; clear: both; display: block;}
.offset-15{height: 15px; clear: both; display: block;}
.offset-20{height: 20px; clear: both; display: block;}
.offset-25{height: 25px; clear: both; display: block;}
.offset-30{height: 30px; clear: both; display: block;}
.offset-35{height: 35px; clear: both; display: block;}
.offset-40{height: 40px; clear: both; display: block;}
.offset-45{height: 45px; clear: both; display: block;}
.offset-50{height: 50px; clear: both; display: block;}
.offset-55{height: 55px; clear: both; display: block;}
.offset-60{height: 60px; clear: both; display: block;}
.offset-65{height: 65px; clear: both; display: block;}
.offset-70{height: 70px; clear: both; display: block;}
.offset-75{height: 75px; clear: both; display: block;}
.offset-80{height: 80px; clear: both; display: block;}
.offset-85{height: 85px; clear: both; display: block;}
.offset-90{height: 90px; clear: both; display: block;}
.offset-95{height: 95px; clear: both; display: block;}
.offset-100{height: 100px; clear: both; display: block;}
.offset-105{height: 105px; clear: both; display: block;}
.offset-110{height: 110px; clear: both; display: block;}
.offset-115{height: 115px; clear: both; display: block;}
.offset-120{height: 120px; clear: both; display: block;}
.offset-125{height: 125px; clear: both; display: block;}
.offset-130{height: 130px; clear: both; display: block;}
.offset-135{height: 135px; clear: both; display: block;}
.offset-140{height: 140px; clear: both; display: block;}
.offset-145{height: 145px; clear: both; display: block;}
.offset-150{height: 150px; clear: both; display: block;}
.offset-155{height: 155px; clear: both; display: block;}
.offset-160{height: 160px; clear: both; display: block;}
.offset-165{height: 165px; clear: both; display: block;}
.offset-170{height: 170px; clear: both; display: block;}
.offset-175{height: 175px; clear: both; display: block;}
.offset-180{height: 180px; clear: both; display: block;}
.offset-185{height: 185px; clear: both; display: block;}
.offset-220{height: 220px; clear: both; display: block;}
.offset-235{height: 235px; clear: both; display: block;}
@media (max-width: 991px) {
	.md-offset-0{height: 0px; clear: both; display: block;}
	.md-offset-7-5{height: 7.5px; clear: both; display: block;}
	.md-offset-5{height: 5px; clear: both; display: block;}
	.md-offset-10{height: 10px; clear: both; display: block;}
	.md-offset-15{height: 15px; clear: both; display: block;}
	.md-offset-20{height: 20px; clear: both; display: block;}
	.md-offset-25{height: 25px; clear: both; display: block;}
	.md-offset-30{height: 30px; clear: both; display: block;}
	.md-offset-35{height: 35px; clear: both; display: block;}
	.md-offset-40{height: 40px; clear: both; display: block;}
	.md-offset-45{height: 45px; clear: both; display: block;}
	.md-offset-50{height: 50px; clear: both; display: block;}
	.md-offset-55{height: 55px; clear: both; display: block;}
	.md-offset-60{height: 60px; clear: both; display: block;}
	.md-offset-65{height: 65px; clear: both; display: block;}
	.md-offset-70{height: 70px; clear: both; display: block;}
	.md-offset-75{height: 75px; clear: both; display: block;}
	.md-offset-80{height: 60px; clear: both; display: block;}
	.md-offset-85{height: 85px; clear: both; display: block;}
	.md-offset-90{height: 90px; clear: both; display: block;}
	.md-offset-95{height: 95px; clear: both; display: block;}
	.md-offset-100{height: 100px; clear: both; display: block;}
	.md-offset-105{height: 105px; clear: both; display: block;}
	.md-offset-110{height: 110px; clear: both; display: block;}
	.md-offset-115{height: 115px; clear: both; display: block;}
	.md-offset-120{height: 120px; clear: both; display: block;}
	.md-offset-125{height: 125px; clear: both; display: block;}
	.md-offset-130{height: 130px; clear: both; display: block;}
	.md-offset-160{height: 160px; clear: both; display: block;}
	.md-offset-150{height: 150px; clear: both; display: block;}
}
@media (max-width: 767px){
	.sm-offset-0{height: 0px; clear: both; display: block;}
	.sm-offset-5{height: 5px; clear: both; display: block;}
	.sm-offset-7-5{height: 7.5px; clear: both; display: block;}
	.sm-offset-10{height: 10px; clear: both; display: block;}
	.sm-offset-15{height: 15px; clear: both; display: block;}
	.sm-offset-20{height: 20px; clear: both; display: block;}
	.sm-offset-25{height: 25px; clear: both; display: block;}
	.sm-offset-30{height: 30px; clear: both; display: block;}
	.sm-offset-35{height: 35px; clear: both; display: block;}
	.sm-offset-40{height: 40px; clear: both; display: block;}
	.sm-offset-45{height: 45px; clear: both; display: block;}
	.sm-offset-50{height: 50px; clear: both; display: block;}
	.sm-offset-55{height: 55px; clear: both; display: block;}
	.sm-offset-60{height: 60px; clear: both; display: block;}
	.sm-offset-65{height: 65px; clear: both; display: block;}
	.sm-offset-70{height: 70px; clear: both; display: block;}
	.sm-offset-75{height: 75px; clear: both; display: block;}
	.sm-offset-80{height: 80px; clear: both; display: block;}
	.sm-offset-85{height: 85px; clear: both; display: block;}
	.sm-offset-90{height: 90px; clear: both; display: block;}
	.sm-offset-95{height: 95px; clear: both; display: block;}
	.sm-offset-100{height: 100px; clear: both; display: block;}
	.sm-offset-105{height: 105px; clear: both; display: block;}
	.sm-offset-110{height: 110px; clear: both; display: block;}
	.sm-offset-115{height: 115px; clear: both; display: block;}
	.sm-offset-120{height: 120px; clear: both; display: block;}
	.sm-offset-125{height: 125px; clear: both; display: block;}
	.sm-offset-130{height: 130px; clear: both; display: block;}
}
@media (max-width: 480px){
	.xs-offset-0{height: 0px; clear: both; display: block;}
	.xs-offset-5{height: 5px; clear: both; display: block;}
	.xs-offset-7-5{height: 7.5px; clear: both; display: block;}
	.xs-offset-10{height: 10px; clear: both; display: block;}
	.xs-offset-15{height: 15px; clear: both; display: block;}
	.xs-offset-20{height: 20px; clear: both; display: block;}
	.xs-offset-25{height: 25px; clear: both; display: block;}
	.xs-offset-30{height: 30px; clear: both; display: block;}
	.xs-offset-35{height: 35px; clear: both; display: block;}
	.xs-offset-40{height: 40px; clear: both; display: block;}
	.xs-offset-45{height: 45px; clear: both; display: block;}
	.xs-offset-50{height: 50px; clear: both; display: block;}
	.xs-offset-55{height: 55px; clear: both; display: block;}
	.xs-offset-60{height: 60px; clear: both; display: block;}
	.xs-offset-65{height: 65px; clear: both; display: block;}
	.xs-offset-70{height: 70px; clear: both; display: block;}
	.xs-offset-75{height: 75px; clear: both; display: block;}
	.xs-offset-80{height: 80px; clear: both; display: block;}
	.xs-offset-85{height: 85px; clear: both; display: block;}
	.xs-offset-90{height: 90px; clear: both; display: block;}
	.xs-offset-95{height: 95px; clear: both; display: block;}
	.xs-offset-100{height: 100px; clear: both; display: block;}
	.xs-offset-105{height: 105px; clear: both; display: block;}
	.xs-offset-110{height: 110px; clear: both; display: block;}
	.xs-offset-115{height: 115px; clear: both; display: block;}
	.xs-offset-120{height: 120px; clear: both; display: block;}
	.xs-offset-125{height: 125px; clear: both; display: block;}
	.xs-offset-130{height: 130px; clear: both; display: block;}
}
/*pagination*/
.pagination span{width:10px; height:10px; background:transparent; margin-right:5px; margin-left:0;}
.pagination .swiper-pagination-switch:after{width:8px; height:8px; border:none; position:absolute; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); -moz-transform:translateX(-50%) translateY(-50%); -ms-transform:translateX(-50%) translateY(-50%); -o-transform:translateX(-50%) translateY(-50%); color:#fff;}
.swiper-pagination-switch:before{border-color: rgba(255, 255, 255, 0.3);}
.pagination .swiper-active-switch{width:10px; height:10px; background-color:; border:none; }
.swiper-active-switch:before/*, .swiper-visible-switch:before*/{width:10px; height:10px; border-color:;}
/*style 2*/
.pagination.style-2 .swiper-pagination-switch:after{color:;}
.pagination.style-2 .swiper-pagination-switch:before{border-color: #cdcdcd;}
.pagination.style-2 .swiper-active-switch{background-color:;}
.pagination.style-2 .swiper-active-switch:before/*, .pagination.style-2 .swiper-visible-switch:before*/{border-color:; background-color:;}
.pagination.none{display: none;}
/*swiper-arrow*/
.swiper-arrow{position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); width: 50px; height: 50px; cursor: pointer;}
.swiper-arrow.left{left: 30px;}
.swiper-arrow.right{right: 30px;}
/*style 3*/
.swiper-arrow.left.style-3{left: 15px;}
.swiper-arrow.right.style-3{right: 15px;}
.swiper-arrow span{line-height: 50px; display: block; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 14px;}
.swiper-arrow span.fa{color: ;}
.swiper-arrow b:first-of-type:before{position: absolute; z-index: 1; top: 0; left: 0; width: 0; height: 1px; content: ''; background: rgba(255, 255, 255, 0.2);}
.swiper-arrow b:first-of-type:after{position: absolute; z-index: 1; top: 0; right: 0; width: 1px; height: 0; content: '';  background: rgba(255, 255, 255, 0.2);}
.swiper-arrow b:last-of-type:before{position: absolute; z-index: 1; bottom: 0; right: 0; width: 0; height: 1px; content: ''; background: rgba(255, 255, 255, 0.2);}
.swiper-arrow b:last-of-type:after{position: absolute; z-index: 1; bottom: 0; left: 0; width: 1px; height: 0; content: '';  background: rgba(255, 255, 255, 0.2);}
.swiper-arrow b.activated:first-of-type:before, .swiper-arrow b.activated:last-of-type:before{width: 100%;}
.swiper-arrow b.activated:first-of-type:after, .swiper-arrow b.activated:last-of-type:after{height: 100%;}
.swiper-arrow .bg-nofixed{position: absolute !important;}
/*rotated arrow*/
.block-on-background .swiper-arrow.left.rotated, .block-on-background .swiper-arrow.right.rotated{z-index: 1; top: 52%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%); -moz-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); -o-transform: translateY(-50%) translateX(-50%); background: #fff;}
.block-on-background .swiper-arrow.rotated:before{z-index: -1; content: ''; position: absolute; left: 0px; top: 0; width: 100%; height: 100%; background: #fff; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}
.block-on-background .swiper-arrow.rotated.right:before{left: -1px;}
.block-on-background .swiper-arrow.left.rotated{left: -11px;}
.block-on-background .swiper-arrow.right.rotated{right: -9px;}
.block-on-background .swiper-arrow.rotated span.fa{color: #333;}
.block-on-background .swiper-arrow.left.rotated .hover-decor.top{position: absolute; top: 0; right: 0; width: 1px; height: 30px; background: #fdb940; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);}
/*yellow-border*/
.swiper-arrow.yellow-border.activated span b:before{width: 100%; background: #fdb940;}
.swiper-arrow.yellow-border.activated span b:after{height: 100%;  background: #fdb940;}
.swiper-arrow.yellow-border span.fa{color: #333;}
.swiper-arrow.yellow-border{transition-delay: 0ms; -webkit-transition-delay: 0ms;}
/*light-border*/
.swiper-arrow.light-border span b:first-of-type:before{width: 100%; background: rgba(255, 255, 255, 0.4);}
.swiper-arrow.light-border span b:first-of-type:after{height: 100%; background: rgba(255, 255, 255, 0.4);}
.swiper-arrow.light-border span b:last-of-type:before{width: 100%; background: rgba(255, 255, 255, 0.4);}
.swiper-arrow.light-border span b:last-of-type:after{height: 100%; background: rgba(255, 255, 255, 0.4);}
.swiper-arrow.light-border{transition-delay: 0ms; -webkit-transition-delay: 0ms;}
.swiper-arrow .clip{width: 50px !important; height: 50px !important; opacity: 0; float: none !important; position: absolute !important;}
.swiper-arrow .clip .bg-nofixed{top: 50% !important; margin-top: -2px; left: 50% !important; margin-left: -12px;}
.block-type-9 .swiper-arrow .bg-nofixed{margin-left: -12px;}
.block-type-24.style-2 .swiper-arrow .clip .bg-nofixed{margin-left: -12px;}
@media (min-width: 1200px){
	.swiper-arrow:hover span b:before{width: 100%;}
	.swiper-arrow:hover span b:after{height: 100%;}
	/*style 2*/
	.swiper-arrow.style-2:hover{background: rgba(28, 24, 20, 0.54);}
	.block-on-background .swiper-arrow.rotated:hover{background: #fdb940;}
	.swiper-arrow.yellow-border:hover{background: #fdb940;}
	.swiper-arrow.light-border:hover{background: #fdb940;}
	.swiper-arrow.light-border:hover span.fa{color: #333;}
}
@media (max-width: 991px){
	.swiper-arrow.left{left: -4px;}
	.swiper-arrow.right{right: -4px;}
	/*style 3*/
	.swiper-arrow.left.style-3{left: -4px;}
	.swiper-arrow.right.style-3{right: -4px;}
	/*style 4*/
	.swiper-arrow.left.style-4{left: 0px;}
	.swiper-arrow.right.style-4{right: 0px;}
	.swiper-arrow.light-border.left{left: 15px;}
	.swiper-arrow.light-border.right{right: 15px;}
}
@media (max-width: 480px){
	/*light-border*/
	.swiper-arrow.light-border span b:first-of-type:before{display: none;}
	.swiper-arrow.light-border span b:first-of-type:after{display: none;}
	.swiper-arrow.light-border span b:last-of-type:before{display: none;}
	.swiper-arrow.light-border span b:last-of-type:after{display: none;}
	.block-type-24.style-2.narrow .swiper-arrow.left{left: 2px;}
	.block-type-24.style-2.narrow .swiper-arrow.right{right: 2px;}
}
/*hover-effect*/
.hover-effect-thin, .hover-effect-bold{position: relative; padding: 0 10px;}
.hover-effect-thin:after{position:absolute; left: 0px; top: 11px; backface-visibility: hidden; height: 1px; width: 0%; background-color:#fdb940; content:""; z-index: -1;}
.hover-effect-bold:after{content: ""; position: absolute; top: 0px; /*transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);*/ left: 0px; width: 0px; height: 3px; background: #fdb940; z-index: -1;}
.hover-effect-extra-bold:after{content: ""; position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); left: -10px; width: 0; height: 15px; background: #fdb940; z-index: -1;}
.hover-effect-extra-bold{padding-right: 10px;}
.hover-content{position: absolute; bottom: 0%; left: 0; width: 100%; height: 100%; color: rgba(51, 51, 51, 0.6);}
.hover-content .animated-right{text-align: center; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%);}
.hover-content .animated-left{text-align: center; transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -o-transform: translateX(-100%); -ms-transform: translateX(-100%);}
.animated-block{position:relative; float:left; width:100%; }
.animated-block.hover-animated span.top{position: absolute; left: 0px; top: -10px; width: 0px; height: 0px; background: #fdb940;}
.animated-block.hover-animated span.right{position: absolute; right: 0px; top: 0px; width: 10px; height: 0px; background: #fdb940;}
.animated-block.hover-animated span.bottom{position: absolute; right: 0px; bottom: -10px; width: 0px; height: 0px; background: #fdb940;}
.animated-block.hover-animated span.left{position: absolute; left: 0px; bottom: 0px; width: 10px; height: 0px; background: #fdb940;}
.animated-block.hover-animated.thin span.top, .animated-block.hover-animated.thin span.bottom{height: 1px;}
.animated-block.hover-animated.thin span.right, .animated-block.hover-animated.thin span.left{width: 1px;}
.animated-block.hover-animated.thin span.top{top: 0;}
.animated-block.hover-animated.thin span.right{right: 0;}
.animated-block.hover-animated.thin span.bottom{bottom: 0;}
.animated-block.hover-animated.thin span.left{left: 0;}
.animated-block.scroll-animation span.top{position: absolute; left: -20px; top: -20px; width: 0; height: 1px; background: #fdb940; z-index: 1;}
.animated-block.scroll-animation span.right{position: absolute; right: -20px; top: -20px; width: 1px; height: 0; background: #fdb940; z-index: -1;}
.animated-block.scroll-animation span.bottom{position: absolute; right: -20px; bottom: -20px; width: 0; height: 1px; background: #fdb940; z-index: 1;}
.animated-block.scroll-animation span.left{position: absolute; left: -20px; bottom: -20px; width: 1px; height: 0; background: #fdb940; z-index: 1;}
.animated-block.scroll-animation span.top.activated, .animated-block.scroll-animation span.bottom.activated{width: calc(100% + 40px);}
.animated-block.scroll-animation span.right.activated, .animated-block.scroll-animation span.left.activated{height: calc(100% + 40px);}
.animated-block.scroll-animation.square{position: absolute; width: 475px; height: 475px; left: calc(50% - 237.5px); top: calc(50% - 237.5px);}
.animated-block.scroll-animation.square span.top{top: 0; left: 0;}
.animated-block.scroll-animation.square span.right{right: 0; top: 0;}
.animated-block.scroll-animation.square span.bottom{bottom: 0; right: 0;}
.animated-block.scroll-animation.square span.left{left: 0; bottom: 0;}
.animated-block.scroll-animation.square.rotated{top: 50%; left: 50%; margin-top: -4px; width: 405px; height: 405px; transform: translateX(-50%) translateY(-50%) rotate(45deg); -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg); -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg); -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg); -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);}
.animated-block.scroll-animation.square span.top, .animated-block.scroll-animation.square span.bottom{transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px);}
.animated-block.scroll-animation.square span.right, .animated-block.scroll-animation.square span.left{transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px);}
.animated-block.scroll-animation.square span.top.activated, .animated-block.scroll-animation.square span.bottom.activated{width: 100%;}
.animated-block.scroll-animation.square span.right.activated, .animated-block.scroll-animation.square span.left.activated{height: 100%;}
.animated-block.scroll-animated.hexagon .top-left{position: absolute; width: 75%; height: 1px; background: #fdb940; transform: rotate(65deg) translateX(0%); -webkit-transform: rotate(65deg) translateX(0%); -moz-transform: rotate(65deg) translateX(0%); -ms-transform: rotate(65deg) translateX(0%); -o-transform: rotate(65deg) translateX(0%); top: -52px; left: 79px;}
.animated-block.scroll-animated.hexagon .top-left{position: absolute; width: 75%; height: 1px; background: #fdb940; transform: rotate(65deg) translateX(0%); -webkit-transform: rotate(65deg) translateX(0%); -moz-transform: rotate(65deg) translateX(0%); -ms-transform: rotate(65deg) translateX(0%); -o-transform: rotate(65deg) translateX(0%); top: -52px; left: 79px;}
.animated-block.scroll-animation.normal-square span.top.activated, .animated-block.scroll-animation.normal-square span.bottom.activated{width: 100%;}
.animated-block.scroll-animation.normal-square span.left.activated, .animated-block.scroll-animation.normal-square span.right.activated{height: 100%;}
.animated-block.scroll-animation.normal-square span.top{left: 0; top: 0; transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%);}
.animated-block.scroll-animation.normal-square span.bottom{right: 0; bottom: 0; transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%);}
.animated-block.scroll-animation.normal-square span.left{left: 0; bottom: 0; transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%);}
.animated-block.scroll-animation.normal-square span.right{right: 0; top: 0; transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%);}
.clip .hover-content{opacity: 0; visibility: hidden;}
/*2 lines*/
.hover-effect-2lines{background: url(../img/main/hover-bg.png) repeat-y; background-size: 100000px 25px; background-position: -100000px 5px; -webkit-transition: all 0.5s ease-out !important; transition: all 0.5s ease-out !important;}
@media (min-width: 1200px){
	.hover-effect-thin:hover:after{width: 100%;}
	.hover-effect-bold:hover:after{width: 100%;}
	.hover-effect-extra-bold:hover:after{width: 100%;}
	.clip:hover .hover-content{opacity: 1; visibility: visible;}
	.clip:hover .hover-content .animated-right{transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%);}
	.clip:hover .hover-content .animated-left{transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%);}
	.animated-block:hover span.top{width: 100%;}
	.animated-block:hover span.right{height: 100%;}
	.animated-block:hover span.bottom{width: 100%;}
	.animated-block:hover span.left{height: 100%;}
	.animated-block.hover-animated.thin:hover span.top, .animated-block.hover-animated.thin:hover span.bottom{width: 100%}
	.animated-block.hover-animated.thin:hover span.right, .animated-block.hover-animated.thin:hover span.left{height: 100%;}
	.animated-block.scroll-animation .button span.top, .animated-block.scroll-animation .button span.right, .animated-block.scroll-animation .button span.bottom, .animated-block.scroll-animation .button span.left{background: #333;}
	/*2lines*/
	.hover-effect-2lines:hover{background-position: 0 5px; -webkit-transition: all 100s ease-out !important; transition: all 100s ease-out !important;}
}
@media (max-width: 991px){
	.animated-block.scroll-animation span.top, .animated-block.scroll-animation span.bottom{width: calc(100% + 40px);}
	.animated-block.scroll-animation span.right, .animated-block.scroll-animation span.left{height: calc(100% + 40px);}
	.animated-block.scroll-animation.square span.top, .animated-block.scroll-animation.square span.bottom{width: 100%;}
	.animated-block.scroll-animation.square span.right, .animated-block.scroll-animation.square span.left{height: 100%;}
}
@media (max-width: 525px){
	.circle-decoration.larger, .animated-block.scroll-animation.square{width: 350px; height: 350px; left: calc(50% - 175px); top: calc(50% - 175px); display: block;}
}
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*  GLOBAL HEADER */
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}

.banner {
  background-color: #0B171F; 
  color: #0A1479; 
  padding: 10px 20px; 
  text-align: center; 
  font-size: 14px; 
  line-height: 1.5; 
  position: sticky;
  top: 0;
  z-index: 100;
}
.custom-equals {
  display: inline-block;
  width: 28px;
  height: 1.5px;
  right: 5px;    
  background-color: #D7D7D7;
  position: relative;
  vertical-align: middle;
  transition: all 0.3s ease;
	
}

.custom-equals::before {
  content: "";
  position: absolute;
  top: -6px;
  width: 100%;
  height: 1.5px;
  background-color: #D7D7D7;
  transition: all 0.3s ease;
}

.custom-equals.open {
  transform: rotate(45deg);
}

.custom-equals.open::before {
  top: 0;
  transform: rotate(-90deg);
}

nav .mobile-menu{display: none}
.menu-list {
    text-align: center;
}

.logo-img {
    width: 110px;
    opacity: 1;
    alignment-baseline: bottom;
    padding-top: 60px;
}

.submenu {
    padding-top: 30px;
}
ul .submenu {display: none}

.submenu li {
    padding-top: 20px;
}

.submenu-title {
    color: #7B7B7B;
    font-size: 14px;
}

.menu-item a {
    font-size: 24px;
}



header .move{display: none}
header {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

header nav ul li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: 100%;
  padding: 10px 0;
}

header nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  display: none;
}
header nav ul {
  display: flex; 
  list-style: none;
  margin: 0 auto;    
  padding: 0;
  display: flex;
  justify-content: space-between;
  max-width: 4000px;
  align-items: baseline;
  padding: 0 80px;     
}

header nav ul li a {
  display: block;
  padding-top: 20px;
  font-family: Helvetica,sans-serif;
  font-size: 12px;
  color: #3A3A3A;
  text-decoration: none;
}

header nav ul li:hover a {
  color: #black;
}

header nav ul li:hover > ul {
  display:contents;
  top: 40px;
  bottom: 50%;
  left: 0;
  width: 100%;
  overflow-y: auto;
  margin: 0;
}



header nav ul li > ul li {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
}

header nav ul li > ul li a {
  display:inline;
  padding: 12px 0px;
  color: #3A3A3A;
  text-decoration: none;
  font-size: 20px;
  line-height: 20px;
}

header nav ul li > ul li:hover > a {
  color:black;  
}
.fa-envelope:before {font-size: 20px}
.fa-phone:before {font-size: 16px}
.white-hover{font-size: 20px}
#logoFHR{width: 140px; }
header #social:hover{color: white}
header #logoFHR:hover{opacity: 1;}


#mobile-menu {display: none}
header nav .menu-toggle{
    display: none;
}

nav #main-menu{display: block;text-align:center;}

#submenu-titles {color:#898989; font-size: 12px}

.contenedor {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .8rem;
  padding: .4rem;
  background-color:#F2F2F2;
}

.contenedor-contact {
  display: contents;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) ;
  gap: .0rem;
  padding: .0rem;
  background-color:;
}

.columna {
  padding: 2rem;
  background-color: #f0f0f0;
}

.c-right{
  height: 100%;    
  background-color: #d0d0d0;
}
.c-left{
  height: 100%;    
  background-color: white;
}

/*-------------------------------------------------------------------------------------------------------------------------------*/
/*  COLUMNS & Articles */
/*-------------------------------------------------------------------------------------------------------------------------------*/
.column-main{
    text-align: center;
    padding: 5% 20% 10% 20%;   
}
.column-block{
    text-align: center;
    padding: 5% 10% 0% 10%;
	
}

.block {
    position: inherit;
}

#main-background {height: 800px; padding-top: 180px}

.text-flicker-in-glow {
    line-height: normal;
    font-weight: bold;
    text-align: center;
}    
.main-p {
    margin-right: 20%;
    margin-left: 20%;
    line-height: normal;
    texxt text-align: justify;
}

/* BLOCK-TYPE-9 */
/*-------------------------------------------------------------------------------------------------------------------------------*/
.block-type-9 .bg-nofixed{-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: fixed; background-attachment: scroll; z-index: 2;}
.block-type-9 .col-md-8{text-align: center;}
.block-type-9 .col-md-6.col-md-offset-3{text-align: center;}
.block-type-9 .banner-logo{position:relative;}
.block-type-9 .banner-logo:after{position:absolute; right: -17px; top: -48px; content:""; width: 73px; height: 73px; background: #fdb940; z-index:-1;}
.block-type-9 .wide-letter-spacing{letter-spacing: 1px;}
.block-type-9 .letter-spacing-5{letter-spacing: 1px;}
.block-type-9 .table-view{padding: 163px 0 100px; position: relative; z-index: 2;}
.block-type-9 .table-view.style-2{padding: 207px 0;}
.block-type-9 .table-view.style-3{padding: 160px 0;}
.block-type-9 .table-view.style-3 .cell-view{height: 475px;}
.block-type-9 .block-type-24.style-4 .blog-info .small-13, .block-type-9 .block-type-24.style-4 .blog-info a, .block-type-9 .block-type-24.style-4 .blog-info i{color: #fff;}
.block-type-9 .block-type-24.style-4 .blog-info .small-13 i{color: #fff;}
.block-type-9 video{position: absolute; left: 0; top: 0; width: 100%; background: url(../img/block-9/banner-slider-1/banner-image2.jpg) no-repeat;}
.block-type-9 .block-type-1.style-2 .animated-block.activated:before{content: none;}
.block-type-9 .block-type-1.style-2 .animated-block.activated:after{content: none;}
/* ----- with-slider ----- */
.block-type-9.with-slider .bg-nofixed{position: absolute; top: 0; left: 0; background-attachment: scroll; z-index: 2; height: 100%; width: 100%;}
#content-wrapper:not(.border) .block-type-9.with-slider .bg-nofixed{width: 101%;}
.block-type-9.with-slider .swiper-wrapper, .block-type-9.with-slider .swiper-slide{position:relative; height: 100vh;}
#content-wrapper.border .block-type-9.with-slider .swiper-wrapper, #content-wrapper.border .block-type-9.with-slider .swiper-slide{position:relative; height: calc(100vh - 25px);}
#content-wrapper.border .block-type-9.with-slider.with-decor .swiper-wrapper, #content-wrapper.border .block-type-9.with-slider.with-decor .swiper-slide{height: auto;}
.block-type-9.with-slider .swiper-wrapper.style-2, .block-type-9.with-slider .swiper-wrapper.style-2 .swiper-slide{height: auto;}
.block-type-9.with-slider .pagination, .border .block-type-9.with-slider .pagination{position:absolute; bottom:40px;}
.block-type-9.with-slider .swiper-slide .table-view .slide-scale-animation{opacity: 0; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform:  scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1);}
.block-type-9.with-slider .swiper-slide .table-view .animated-slide p{opacity: 0; transform: translateX(-20%); -webkit-transform: translateX(-20%); -moz-transform: translateX(-20%); -o-transform: translateX(-20%); -ms-transform: translateX(-20%);}
.block-type-9.with-slider .swiper-slide .table-view .slide-right-animation{opacity: 0; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%);}
.block-type-9.with-slider .swiper-slide .table-view .slide-right-animation.c-decoration{transform: translateX(0%) translateY(-50%); -webkit-transform: translateX(0%) translateY(-50%); -moz-transform: translateX(0%) translateY(-50%); -o-transform: translateX(0%) translateY(-50%); -ms-transform: translateX(0%) translateY(-50%);}
.block-type-9.with-slider .swiper-slide .table-view .animated-slide .subheading{opacity: 0; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); -ms-transform: translateX(100%);}
.block-type-9.with-slider .swiper-slide-active .table-view .animated-slide p{opacity: 1; transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%);}
.block-type-9.with-slider .swiper-slide-active .table-view .slide-right-animation{opacity: 1; transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%);} 
.block-type-9.with-slider .swiper-slide-active .table-view .animated-slide .subheading{opacity: 1; transform: translateX(0%); -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -o-transform: translateX(0%); -ms-transform: translateX(0%);}
.block-type-9.with-slider .swiper-slide .table-view .h1{opacity: 0;}
.block-type-9.with-slider .swiper-slide .table-view.style-3 .h1{opacity: 1;}
.animated-body .block-type-9.with-slider .swiper-slide .table-view.style-3 .h1, .animated-body .block-type-9.with-slider .swiper-slide .table-view.style-3 p{transition-delay: 0ms; -moz-transition-delay: 0ms; -webkit-transition-delay: 0ms; -ms-transition-delay: 0ms;}
.block-type-9.with-slider .swiper-slide-active .table-view .h1{opacity: 1;}
.block-type-9.with-slider .swiper-slide .table-view .decoration-vertical:after{height: 0px;}
.block-type-9.with-slider .swiper-slide-active .table-view .decoration-vertical:after{height: 80px;}
/* -----with-slider style 2 ----- */
.block-type-9.with-slider.style-2 .col-md-6, .block-type-9.with-slider.style-2 .col-md-8, .block-type-9.with-slider.style-2 .button-wrap{text-align: left;}
.block-type-9.with-slider.style-2 .cell-view{vertical-align: bottom;}
.block-type-9.with-slider.style-2 .table-view{padding: 155px 0 145px;}
/*style-3*/
.block-type-9.style-3 .block-type-24.style-2 .h5.heading{color: #fff;}
.block-type-9.style-3 .category, .block-type-9.style-3 .client, .block-type-9.style-3 .job{color: rgba(255, 255, 255, 0.9);}
.block-type-9.style-3 .block-type-24.style-2 .h1:first-child{text-transform: ;}



h1 {font-size: 60px}
h3 {font-size: 20px; color: white}
 .main-title {
    text-align: center;
    font-size: 100px;    
    }    
 .main-p {
    margin-right: 15%;
    margin-left: 15%;    
    line-height: 68px;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    } 
article {
    display: center;
    flex-direction: column;
    justify-content: center;
}
.column-block {
    text-align: center;
    padding: 0% 20% 0% 20%;
	
}    
/* WEB & MOBILE VERSIONS */
/*Mobile version*/	
@media only screen and (max-width: 320px) { 
	#main2{max-width: 390px; height: auto}
	#privacy{padding-top: 1300px}
	header nav .menu-toggle{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    padding: 18px;
    color: #BBBBBB;
    }   
	header nav ul{display: none}    
	#mobile-menu {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
	}
	ul.submenu{
	display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        margin: 0;
	top: 0;
	background-color: white;
	}	
.submenu li {
    padding: 0px 0; 
}

.submenu li a {
    display: block; 
	line-height: 1.8;
}

.back-button {
}

	#mobile-menu.menu-active {
    transition: height 0.5s ease;
    height: auto; 
    overflow: visible;
    }
	header{background-color: white;}
    .submenu {text-align: right}
    
	header nav .logo {
    display: block;
    position: absolute;
    height: 30px; 
    top: 20px;
    left: 20px;
    }
    nav .main-menu{display: none}
	
	header nav ul li:hover > ul{top: 0}
	
	header nav.menu-active a {
        margin-top: 0px;
        text-align: right;
        padding-right: 20%;
        font-size: 22px;
    }
    header nav.menu-active .logo{display: none}
	header nav.menu-active p {
        margin-top: 0px;
        text-align: right;
        padding-right: 0px;
        font-size: 44px;
    }
	
	header nav.menu-active ul {
        display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        padding: 0 0px;
		padding-top: 80px;
        margin: 0;
    }
    header nav.menu-active ul ul {
        display: none;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
	
    h1{font-size: 30px; line-height: 1.5}
    p{font-size: 20px; line-height: 1.8; text-align: justify}
    a{font-size: 20px; line-height: 1.8}
	h2{font-size: 22px; text-align: justify}
    .custom-equals {
    display: inline-block;
    width: 20px;
    height: 1px;
    background-color: #C6C6C6;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s ease;
    top: 5px;
	}
	.custom-equals::before {
    content: "";
    position: absolute;
    top: -7px;
    width: 100%;
    height: 1px;
    background-color: #C6C6C6;
    transition: all 0.3s ease;
    }
/*End Mobile menu*/		
/*Article mobile*/	
    article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    }
	 #main{
    display: block;
    flex-direction: column;
    height: 50vh;
    padding-top: 100px
    }
    #newsletter {height: 600px}    
.column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
	
		height: auto;
}    
.contenedor {
    grid-template-columns: 1fr;
    padding: 0.2rem;
    gap: 0.2rem;
}.text-flicker-in-glow {
    font-size: 53px;
    font-weight: 900;
}    
.main-p {
    margin-right: 5%;
    margin-left: 5%;
    line-height: normal;
    text-align: center;
}        
    
.banner {
    display: none;
  }    

    

	.fa-envelope:before {font-size: 18px;text-align: center}
    .fa-phone:before {font-size: 18px;text-align: center}
    #logoFHR {display: none
	}
	
	
	#icons {
        padding-right: 0px;
		color: white;
    }
	#copy {
        padding-right: 0px;
		font-size: 10px;
    }

	 #main-background {height: 300px} 
	 .main-title {
    text-align: center;
    font-size: 40px;	
    }    
	.clip{height: 110vh}
	/*End Article mobile*/
}
/* iphone iphone 14*/
@media only screen and (min-width: 321px) and (max-width: 480px){ 
	.slide-button {top:85%}
	.contenedor{display: grid}
	#image{height: 40vh}
	#privacy{height: auto;vertical-align: middle}
	#services{height: auto;vertical-align: middle}
	#404 {padding-top: 100px}
	.contact {height: 850px}
	.testimonial-slide {
    transition: transform 0.5s ease;
}
	
	article{height:auto;        padding-top: 40px;
        padding-bottom: 40px;}
	#main-home{background-attachment: local}
	#main{max-width: 390px; height: 50vh}
	#main2{max-width: 390px; height: 95vh}
	
	
	#identity{max-width: 390px; height: 100vh}
	#contact{width: 100%}
/*Mobile menu*/	
	.marquee {
        display: none;
    }
	#social-menu {padding-top: 30%}	
a #logo{width: 120px}
#menu-links .logo-item {
    margin-top: 60px; /* Ajustar según sea necesario */
    align-self: ; /* Centrar el logo si es necesario, o cambiar a 'flex-end' para alinear a la derecha */
}
	    #testimonial-p {
        padding-right: 20px;
        padding-left: 20px;
			padding-top: 40px;}
	#testimonial-autor{text-align: right;padding-right: 40px}
	#testimonial-company{text-align: right;padding-right: 40px}
	header nav .menu-toggle{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    padding: 18px;
    color: #BBBBBB;
    }   
	header nav ul{display: none}    
	#mobile-menu {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
	}
	ul.submenu{
	display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        margin: 0;
	top: 0;
	background-color: white;
	}	
.submenu li {
    padding: 0px 0; 
}

.submenu li a {
    display: block; 
	line-height: 1.8;
}

.back-button {
	padding-top;0px;
}

	#mobile-menu.menu-active {
    transition: height 0.5s ease;
    height: auto; 
    overflow: visible;
	background-color: rgba(255, 255, 255, 0.5);;
    }
	header{background-color: white;}
    .submenu {text-align: right}
    
	header nav .logo {
    display: block;
    position: absolute;
    height: 60px; 
    top: 20px;
    left: 20px;
    }
    nav .main-menu{display: none}
	
	header nav ul li:hover > ul{top: 0}
	
	header nav.menu-active a {
        margin-top: 0px;
        text-align: right;
        padding-right: 18%;
		line-height: 1;
        font-size: 24px;
		color: #545252;
    }
    header nav.menu-active .logo{display: none}
	header nav.menu-active p {
        margin-top: 0px;
        text-align: right;
        padding-right: 0px;
        font-size: 44px;
    }
	
	header nav.menu-active ul {
        display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        padding: 0 0px;
		padding-top: 0px;
        margin: 0;
    }
    header nav.menu-active ul ul {
        display: none;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
		padding-top: 5%;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
	
    h1{font-size: 60px; line-height: 1.3}
    p{font-size: 20px; line-height: 1.8; text-align: justify}
    a{font-size: 20px; line-height: 1.8}
	h2{font-size: 22px; text-align: justify}
    .custom-equals {
    display: inline-block;
    width: 35px;
    height: 4px;
    background-color: #D7D7D7;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s ease;
    top: 25px;
	}
	.custom-equals::before {
    content: "";
    position: absolute;
    top: -7px;
    width: 35px;
    height: 4px;
    background-color: #D7D7D7;
    transition: all 0.3s ease;
    }
/*End Mobile menu*/		
/*Article mobile*/	
    #newsletter {height: 600px}    
.column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
	
}    
.contenedor {
    grid-template-columns: 1fr;
    padding: 0.2rem;
    gap: 0.2rem;padding-top: 10px;
        height: auto;
}
.main-p {
    margin-right: 5%;
    margin-left: 5%;
    line-height: normal;
    text-align: center;
}        
.banner {
    display: none;
  }    
	
	header nav.menu-active #back {top: 0;text-align: left; padding-left: 4%}
	header nav.menu-active #logo {text-align: center;padding: 0px;padding-top: 10%}
	header nav.menu-active li #login {font-size: 90%; line-height: 1.8; text-align: center;padding: 0px;}
	.fa-envelope:before {font-size: 18px}
	
	#icons {
		font-size: 22px;
		text-align: center;
        padding: 4%;
		color: #0B171F;
    }
	#copy {
        padding-right: 0px;
		font-size: 12.5px;
    }

	 #main-background {height: 300px;padding-top: 1 40px} 
	 .main-title {
    text-align: center;
    font-size: 40px;	
    }    
	.clip{height: 70vh}
	/*End Article mobile*/
}
/* MOBILE VERSION */
@media only screen and (min-width: 481px) and (max-width: 600px) { 
	.contenedor{display: grid}
	#main2{max-width: 390px; height: auto}
	#contact{width: 100%}
/*Mobile menu*/	
	#social-menu {padding-top: 29%}	
a #logo{width: 120px}
#menu-links .logo-item {
    margin-top: 60px; /* Ajustar según sea necesario */
    align-self: ; /* Centrar el logo si es necesario, o cambiar a 'flex-end' para alinear a la derecha */
}

	
	header nav .menu-toggle{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    padding: 30px;
    color: #3A3A3A;
    }    
	#mobile-menu {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
	}
	ul.submenu{
	display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        margin: 0;
	top: 0;
	background-color: white;
	}	
.submenu li {
    padding: 0px 0; 
}

.submenu li a {
    display: block; 
	line-height: 1.8;
}

.back-button {
	padding-top;0px;
}

	#mobile-menu.menu-active {
    transition: height 0.5s ease;
    height: auto; 
    overflow: visible;
    }
	header{background-color: white}
    .submenu {text-align: right}
    
	header nav .logo {
    display: block;
    position: absolute;
    height: 60px; 
    top: 20px;
    left: 20px;
    }
.main-menu{display: none}
	
	header nav ul li:hover > ul{top: 0}
	
	header nav.menu-active a {
        margin-top: 0px;
        text-align: right;
        padding-right: 18%;
		line-height: 1;
        font-size: 24px;
		color:#0B171F;
    }
    header nav.menu-active .logo{display: none}
	header nav.menu-active p {
        margin-top: 0px;
        text-align: right;
        padding-right: 0px;
        font-size: 44px;
    }
	
	header nav.menu-active ul {
        display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        padding: 0 0px;
		padding-top: 0px;
        margin: 0;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
	
    h1{font-size: 30px; line-height: 1.5}
    p{font-size: 20px; line-height: 1.8; text-align: justify}
    a{font-size: 20px; line-height: 1.8}
	h2{font-size: 22px; text-align: justify}
    .custom-equals {
    display: inline-block;
    width: 40px;
    height: 4px;
    background-color: #80b847;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s ease;
    top: 5px;
	}
	.custom-equals::before {
    content: "";
    position: absolute;
    top: -7px;
    width: 40px;
    height: 4px;
    background-color: #80b847;
    transition: all 0.3s ease;
    }
/*End Mobile menu*/		
/*Article mobile*/	
    article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 60vh;        padding-top: 40px;
        padding-bottom: 40px;
    }
	 #main{
    display: block;
    flex-direction: column;
    height: 50vh;
    padding-top: 310px
    }
    #newsletter {height: 600px}    
.column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
	
}    
.contenedor {
    grid-template-columns: 1fr;
    padding: 0.2rem;
    gap: 0.2rem;
}.text-flicker-in-glow {
    font-size: 53px;
    font-weight: 900;
}    
.main-p {
    margin-right: 5%;
    margin-left: 5%;
    line-height: normal;
    text-align: center;
}        
.banner {
    display: none;
  }    
	
	header nav.menu-active #back {top: 0;text-align: left; padding-left: 4%}
	header nav.menu-active #logo {text-align: center;padding: 0px;padding-top: 10%}
	header nav.menu-active li #login {font-size: 90%; line-height: 1.8; text-align: center;padding: 0px;}
	.fa-envelope:before {font-size: 18px}
	
	#icons {
		font-size: 24px;
		text-align: center;
        padding: 3%;
		color: #0B171F;
    }
	#copy {
        padding-right: 0px;
		font-size: 14px;
    }

	 #main-background {height: 300px} 
	 .main-title {
    text-align: center;
    font-size: 70px;	
    }    
	.clip{height: 110vh}
	/*End Article mobile*/
}

@media only screen and (min-width: 601px) and (max-width: 760px) { 
	.contenedor{display: grid}
	#contact{width: 100%}
	.marquee {
        display: none;
    }
/*Mobile menu*/	
	#social-menu {padding-top: 20%; padding-bottom: 10%}
	
a #logo{width: 140px}
#menu-links .logo-item {
    margin-top: 60px; /* Ajustar según sea necesario */
    align-self: ; /* Centrar el logo si es necesario, o cambiar a 'flex-end' para alinear a la derecha */
}

	
	header nav .menu-toggle{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    padding: 28px;
    color: #BBBBBB;
	padding-top: 50px;
    }   
	header nav ul{display: none}    
	#mobile-menu {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
	}
	ul.submenu{
	display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        margin: 0;
	top: 0;
	}	
.submenu li {
    padding: 0px 0; 
}

.submenu li a {
    display: block; 
	line-height: 1.8;
}

.back-button {
	padding-top;0px;
}

	#mobile-menu.menu-active {
    transition: height 0.5s ease;
    height: auto; 
    overflow: visible;
    }
	header{background-color: white}
    .submenu {text-align: right}
    
	header nav .logo {
    display: block;
    position: absolute;
    height: 80px; 
    top: 20px;
    left: 20px;
    }
    nav .main-menu{display: none}
	
	header nav ul li:hover > ul{top: 0}
	
	header nav.menu-active a {
        margin-top: 3%;
        text-align: right;
        padding-right: 18%;
		line-height: 1;
        font-size: 24px;
		color: #0B171F;
    }
    header nav.menu-active .logo{display: none; padding-top: 15%}
	header nav.menu-active p {
        margin-top: 0px;
        text-align: right;
        padding-right: 0px;
        font-size: 44px;
    }
	
	header nav.menu-active ul {
        display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        padding: 0 0px;
		padding-top: 0px;
        margin: 0;
    }
    header nav.menu-active ul ul {
        display: none;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
	
    h1{font-size: 40px; line-height: 1.5}
    p{font-size: 24px; line-height: 1.8}
    a{font-size: 24px; line-height: 1.8}
	h2{font-size: 40px}
    .custom-equals {
    display: inline-block;
    width: 40px;
    height: 4px;
    background-color: #80b847;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s ease;
    top: 5px;
	}
	.custom-equals::before {
    content: "";
    position: absolute;
    top: -7px;
    width: 100%;
    height: 4px;
    background-color: #80b847;
    transition: all 0.3s ease;
    }
/*End Mobile menu*/		
/*Article mobile*/	
    article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    }
	 #main{
    display: block;
    flex-direction: column;
    height: 50vh;
    padding-top: 200px
    }
    #newsletter {height: 600px}    
.column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
	
}    
.contenedor {
    grid-template-columns: 1fr;
    padding: 0.2rem;
    gap: 0.2rem;
}.text-flicker-in-glow {
    font-size: 53px;
    font-weight: 900;
}    
.main-p {
    margin-right: 5%;
    margin-left: 5%;
    line-height: normal;
    text-align: center;
}        
.banner {
    display: none;
  }    
	
	header nav.menu-active #back {top: 0;text-align: left; padding-left: 4%}
	header nav.menu-active #logo {text-align: center;padding: 0px;padding-top: 10%}
	header nav.menu-active li #login {font-size: 90%; line-height: 1.8; text-align: center;padding: 0px;}
	.fa-envelope:before {font-size: 18px}
	
	#icons {
		font-size: 24px;
		text-align: center;
        padding: 2%;
		color:#0B171F;
    }
	#copy {
        padding-right: 0px;
		font-size: 14px;
		padding-top: 1%;
    }

	 #main-background {height: 300px} 
	 .main-title {
    text-align: center;
    font-size: 90px;	
    }    
	.clip{height: 110vh}
	/*End Article mobile*/
}

/* iPad VERSION */
@media only screen and (min-width: 761px) and (max-width: 1119px) {
	.column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
}
	.contenedor{display: grid}
	#privacy{height: auto;vertical-align: middle}
	#main-menu {display: none;    display: inline-flex;}
	header nav ul{display: none}    
	#mobile-menu {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.5s ease;
	}
	ul.submenu{
	display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        margin: 0;
	top: 0;
	background-color: white;
	}	
	
	
	
	a #logo{text-align: center;width: 120px}
	#line-login {display: none}
	#social-menu {padding-top: 35%}
	#copy {font-size: 12px; padding-left: 0%; padding-right: 0%}
	#marquee p {font-size: 18px}
	#marquee p a{font-size: 18px}
    header.move {top:0%; left: 10px; position:fixed; transition: top 0.3s ease;}
    nav .main-menu{display: none}
    #newsletter {height: 400px}  
    p{font-size: 22px; line-height: 1.8; padding-left: 20px; padding-right: 20px; text-align: justify}
    a{font-size: 16px; line-height: 1.8; text-align: justify}
	h1{font-size: 40px; line-height: 1.3}
	h2{font-size: 20px}
    .custom-equals {
    display: inline-block;
    width: 48px;
    height: 4.5px;
    background-color: #D7D7D7;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s ease;
    top: 5px;
	}
	.custom-equals::before {
    content: "";
    position: absolute;
    top: -10px;
    width: 100%;
    height: 4.5px;
    background-color: #D7D7D7;
    transition: all 0.3s ease;
    }
	header nav .logo {
    display: block;
    position: absolute;
    height: 55px; 
    top: 25px;
    left: 45px;
    }
    .submenu {text-align: center}
  
	.main-menu{display: none}
    .contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1rem;
  padding: .5rem;
  background-color:#F4F4F4;
}
    article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 70vh;        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .main-title {
    text-align: center;
    padding-top: 5%;
    font-size: 60px;    
    }    
     .main-p {
    margin-right: 15%;
    margin-left: 15%;    
    line-height: 68px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
} 
    #main-background {height: 600px}    
    
.banner {
    display: block;
  }    

    
header nav .menu-toggle{
    display: block;
    position: absolute;
    top: 5px;
    right: 0px;
    z-index: 10000;
    padding: 30px;
    color: #80b847;
    }   
    .custom-equals {width: 40px; height: 3.5px}
    .custom-equals:before {width: 40px; height: 3.5px}
header nav .logo {
    display: block;
    position: absolute;
    height: 40px; 
    top: 20px;
    left: -290px;
    }
       
header nav ul{display: none}    
#mobile-menu{
	display:block;
	background-color: white;
	color:#0B171F}
#mobile-menu.menu-active {
    transition: height 0.5s ease;
    height: auto; 
    overflow: visible;
    }
	header{background-color: white;}
    .submenu {text-align: right}
    
	header nav .logo {
    display: block;
    position: absolute;
    height: 60px; 
    top: 20px;
    left: 20px;
    }
    nav .main-menu{display: none}
	
	header nav ul li:hover > ul{top: 0}
	
	header nav.menu-active a {
        margin-top: 0px;
        text-align: right;
        padding-right: 18%;
		line-height: 1;
        font-size: 24px;
		color: #545252;
    }
    header nav.menu-active .logo{display: none}
	header nav.menu-active p {
        margin-top: 0px;
        text-align: right;
        padding-right: 0px;
        font-size: 44px;
    }
	
	header nav.menu-active ul {
        display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        padding: 0 0px;
		padding-top: 0px;
        margin: 0;
    }
    header nav.menu-active ul ul {
        display: none;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
		padding-top: 5%;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
	
header nav.menu-active .logo{display: none}
   
	
	
header nav.menu-active a {
    margin-top: 0px;
    text-align: right;
    padding-right: 18%;
    line-height: 1;
    font-size: 24px;
    color: #0B171F;
}
	
#icons {
    font-size: 26px;
    text-align: center;
    padding: 4%;
    color: #0B171F;
}
	
.fa-envelope:before {font-size: 24px}	
	
	
#menu-links {
    overflow-y: auto;
    scroll-behavior: smooth;
	padding-top: 80px;
}    
    
    header nav.menu-active ul {
        display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        padding: 0 0px;
        margin: 0;
    }


    header nav.menu-active ul ul {
        display: none;
        position: static;
        padding: 0;
        margin-top: 0;
        margin-left: 20px;
        width: 100%;
        height: 1000vh;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
}
/* iPad Pro */
@media only screen and (min-width: 1120px) and (max-width: 1209px) {
	
.main-menu {
    list-style-type: none;
    overflow: hidden;
    justify-content: space-evenly;
    display: flex;
    list-style: none;
    margin: 0 auto;
    display: flex;
    max-width: 4000px;
    padding: 10px 0px;
}
    #privacy{height: auto;vertical-align: middle}
	.column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
		height: auto;
	}
	#line-login {display: none}
	a #logo{width: 160px}
	#social-menu {padding-top: 20%}
	#copy {font-size: 12px; padding-left: 0%; padding-right: 0%}
	#marquee p {font-size: 18px}
	#marquee p a{font-size: 18px}
    header {width: 100%; position:fixed; background-color: rgba(14, 23, 30, 1)}
    header.move {top:0%; position:fixed; transition: top 0.3s ease;}
    #newsletter {height: 400px}  
    p{font-size: 22px; line-height: 1.8; padding-left: 20px; padding-right: 20px}
    a{font-size: 16px; line-height: 1.8}
	h1{font-size: 70px; line-height: 1.3}
	h2{font-size: 20px}
    .custom-equals {
    display: inline-block;
    width: 48px;
    height: 4.5px;
    background-color: #C6C6C6;
    position: relative;
    vertical-align: middle;
    transition: all 0.3s ease;
    top: 5px;
	}
	.custom-equals::before {
    content: "";
    position: absolute;
    top: -10px;
    width: 100%;
    height: 4.5px;
    background-color: #C6C6C6;
    transition: all 0.3s ease;
    }
	header nav .logo {
    display: block;
    position: absolute;
    height: 55px; 
    top: 25px;
    left: 45px;
    }
    .submenu {text-align: center}
  
    .contenedor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1rem;
  padding: .5rem;
  background-color:#F4F4F4;
}
	#main-background {
        height: 400px;
        padding-top: 340px;
    }
	#main{height: 40vh;display: flex;}
    article {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: auto;        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .main-title {
    text-align: center;
    padding-top: 35%;
    font-size: 110px;    
    }    
     .main-p {
    margin-right: 15%;
    margin-left: 15%;    
    line-height: 68px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
}  
    
.banner {
    display: block;
  }    

    
header nav .logo {
    display: block;
    position: absolute;
    height: 60px; 
    top: 20px;
    left: -420px;
    }
       
   
	
	
	
	
	
	
header nav.menu-active a {
    margin-top: 20px;
    text-align: right;
    padding-right: 18%;
    line-height: 1;
    font-size: 24px;
    color: white;
}
	
#icons {
    font-size: 30px;
    text-align: center;
    padding: 4%;
    color: white;
}
	
.fa-envelope:before {font-size: 30px}	
	
	
#menu-links {
    overflow-y: auto;
    scroll-behavior: smooth;
	padding-top: 80px;
}    
    
    header nav.menu-active ul {
        display: block;
        overflow: auto;
        height: 100vh;
        width: 100%;
        padding: 0 0px;
        margin: 0;
    }

    header nav.menu-active ul ul {
        position: static;
        padding: 0;
        margin-top: 0;
        margin-left: 20px;
        width: 100%;
        height: 1000vh;
		text-align: right;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
}
/* STANDARD WEB VERSION */
@media only screen and (min-width: 1210px)and (max-width: 1299px){
	#main{   display:flex;}
	.container-submenu {
		padding-left: 0%}
	.container-submenu a {font-size: 20px}
    .main-menu {padding: 0 40px}
    #marquee p {font-size: 12px}
	#marquee p a{font-size: 12px}
    #mobile-menu{display:none}
    p{font-size: 18px; line-height: 1.8}
    a{font-size: 18px; line-height: 1.8}
	h2{font-size: 30px}
    #newsletter {height: 400px}  
    article {
    flex-direction: column;
    justify-content: center;
    height: ;
    }
    
    .contenedor-contact {display: flex}
    .contenedor-contact #left {
        width: 100%
    }
    .contenedor-contact #right {
        width: 35%
    }
    
     .main-title {
    text-align: center;
    font-size: 80px;
    }    
    
    .main-p { 
    line-height: normal;
    text-align: center;
    font-size: 25px;
    font-weight: 100;
} 
#main-background {height: 600px;padding-top: 240px}    
    
.banner {
    display: block;
  }    

header.move {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: top 0.3s ease;
}
           
    
header nav .menu-toggle{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10000;
    padding: 20px;
    color: #BBBBBB;
    }   

header nav .logo {
    display: block;
    position: absolute;
    height: 20px; 
    top: 20px;
    left: 25px;
    }
       
header nav ul{display: none}    

    header nav.menu-active .logo{display: none}
   

    header nav.menu-active ul {
        display: block;
        width: 100%;
        padding: 0 0px;
        height: 100vh;
        margin: 0;
    }

    header nav.menu-active a {
        margin-top: 0px;
        text-align: center;
        font-size: 18px;
    }

    header nav.menu-active ul ul {
        display: none;
        position: static;
        padding: 0;
        margin-top: 0;
        margin-left: 20px;
        width: 100%;
        height: 100%;
    }

    header nav.menu-active ul ul li {
        display: block;
        margin: 0;
    }

    header nav.menu-active ul ul ul li {
        margin-left: 20px;
    }
	#main-home{height: 600px}
}
@media only screen and (min-width: 1300px){
	#main{height: 50vh;    display:flex;}
	.container-submenu {
		padding-left: 0%}
	.container-submenu a {font-size: 20px}
	#marquee p {font-size: 12px}
	#marquee p a{font-size: 12px}
    .main-menu {padding: 0 0px}
    #newsletter {height: 500px}  
    article {
    display:inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    }
	
	#testimonial{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 55vh;
    }
   h1{font-size: 60px; line-height: 1.2}
    p{font-size: 24px; line-height: 1.8}
    a{font-size: 24px; line-height: 1.8}
    h3 {font-size: 30px}
	h2{font-size: 30px}
    .column-block {
    text-align: center;
		height: 250vh;
    padding: 0% 10% 0% 10%;
}    
    .contenedor-contact {display: flex}
    .contenedor-contact #left {
        width: 100%
    }
    .contenedor-contact #right {
        width: 35%
    }
    .main-title {
    text-align: center;
    font-size: 80px;}
	#main-home{height: 600px}
} 
/* Web Macbook*/
@media only screen and (min-width: 1500px){
	
.small-container{
    width: 100%;
	padding-top: 10px;
}
	a{font-size: 18px}
	#main {height: 50vh}
	#main2 {height: 55vh}
	.container-submenu {
		padding-left: 10%}
	.container-submenu a {font-size: 20px}
	#marquee p {font-size: 12px}
	#marquee p a{font-size: 12px}
    .main-menu {padding: 0 220px;padding-bottom: 10px;padding-top: 10px}
    #newsletter {height: 500px}  
    article {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: ;
    }
	#policy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: auto;
    }
	#testimonial{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 75vh;
    }
   h1{font-size: 65px; line-height: 1.2}
    p{font-size: 18px; line-height: 1.8}
    a{font-size: 18px; line-height: 1.8}
    h3 {font-size: 24px}
	h2{font-size: 30px}
    .column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
		        height: 120vh;
}    
    .contenedor-contact {display: flex}
    .contenedor-contact #left {
        width: 100%
    }
    .contenedor-contact #right {
        width: 35%
    }
    .main-title {
    text-align: center;
    font-size: 80px;
	vertical-align: middle;
	padding-top: 160px}
	.contenedor {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .6rem;
  padding: .4rem;
  background-color:#F4F4F4;}
	.clip{
		height: 80vh;
	}
	#main-home{height: 700px}
}

	
@media only screen and (min-width: 1700px){
	#main {height: 50vh}
	#submenu-titles {color:#898989; font-size: 14px}
	.container-submenu {
		padding-left: 15%}
	.container-submenu a {font-size: 20px}
    .main-menu {padding: 0 320px; padding-bottom: 5px}
    #newsletter {height: 500px} 
    article {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: ;
    }
	#testimonial{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 95vh;
    }
   h1{font-size: 65px; line-height: 1.3}
    p{font-size: 24px; line-height: 1.8}
    a{font-size: 18px; line-height: 1.8}
    .column-block {
    text-align: center;
    padding: 0% 5% 0% 5%;
		        height: 200vh;
		
}    
    .contenedor-contact {display: flex}
    .contenedor-contact #left {
        width: 100%
    }
    .contenedor-contact #right {
        width: 35%
    }
    .main-title {
    text-align: center;
    font-size: 100px;}
	.clip{
		height: 50vh;
	}
	#main-home{height: 600px}
}    

@media only screen and (min-width: 2100px){
	#main {height: 50vh}
	#submenu-titles {color:#898989; font-size: 16px}
	.container-submenu {
		padding-left: 16%}
	.container-submenu a {font-size: 26px}
	ul.main-menu li a {font-size: 18px}
    .main-menu {padding: 0 380px}
    #newsletter {height: 600px}  
    article {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: ;
    }
	#testimonial{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 95vh;
    }
   h1{font-size: 80px; line-height: 1.3}
	h2{font-size: 30px; line-height: 1.8}
    p{font-size: 32px; line-height: 1.8}
    a{font-size: 30px; line-height: 1.8}
	.column-block {
    text-align: center;
    padding: 0% 10% 0% 10%;
		
}    
    .contenedor-contact {display: flex}
    .contenedor-contact #left {
        width: 100%
    }
    .contenedor-contact #right {
        width: 35%
    }
    .main-title {
    text-align: center;
    font-size: 150px;
	
	}
	.clip{
		height: 50vh;
	}
	#main-home{height: 900px}
}    

@media only screen and (min-width: 2300px){
	#submenu-titles {color:#898989; font-size: 20px}
	.container-submenu {
		padding-left: 20%}
	.container-submenu a {font-size: 28px}
	#testimonial-p{font-size: 38px}
	.rounded-border-btn-dark {
    border: 2px solid #C3C3C3;
    border-radius: 15px;
    padding: 0px 32px;
    font-size: 16px;
    height: 90px;
    }
	.banner {padding-top: 80px}
	#marquee p {font-size: 18px}
	#marquee p a{font-size: 18px}
    .main-menu {padding: 0 220px}
    #newsletter {height: 500px}  
    article {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    height: 140vh;
    }
	#testimonial{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 125vh;
    }
   h1{font-size: 110px; line-height: 1.5}
    p{font-size: 40px; line-height: 1.8}
    a{font-size: 40px; line-height: 1.8}
    h3 {font-size: 38px}
	h2{font-size: 38px}
	.column-block {
    text-align: center;
		
		height: auto;
    padding: 0% 10% 0% 10%;
}    
    .glow-on-hover-dark2 {
    width: 200px;
    height: 90px;
    border: none;
    outline: none;
    color: ;
    background: white;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 25px;
    }
    .contenedor-contact {display: flex}
    .contenedor-contact #left {
        width: 100%
    }
    .contenedor-contact #right {
        width: 35%
    }
    .main-title {
    text-align: center;
    font-size: 140px;}
	.contenedor {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .6rem;
  padding: .4rem;
  background-color:#F4F4F4;}
	.clip{
		height: 120vh;
	}
	#main-home{height: 1400px}
	ul.main-menu li a {
    position: relative;
    padding-bottom: 15px;
    transition: all 0.3s;
    font-weight: 100;
		font-size: 22px;}
	.main-menu {
    padding: 0 190px;
    }
	.fa-envelope:before {font-size: 22px}
	.fa-phone:before {font-size: 22px}
	.white-hover{font-size: 22px}
	
}
 

/* Footer*/
footer
{
text-align: center
}
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*  - INTERNET EXPLORER, SAFARI SETTINGS*/
/*-------------------------------------------------------------------------------------------------------------------------------*/
/*ie*/
/*_:-ms-input-placeholder, :root body .bg, body .bg-nofixed{position: absolute !important;}*/

/*safari*/
body.safari .bg, body.safari .bg-nofixed{position: absolute !important;}
body.safari .block-type-9 video{top: 50% !important; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}
@media all and (-ms-high-contrast:none){
	.block-type-10 .block-type-7 .thumb .circle-decoration.big-circle{height: 506px;} /* IE10 */
	*::-ms-backdrop,.block-type-10 .block-type-7 .thumb .circle-decoration.big-circle{height: 506px;} /* IE11 */
	.block-type-20.style-2 .bg-nofixed{position: absolute !important; }
	*::-ms-backdrop,.block-type-20.style-2 .bg-nofixed{position: absolute !important; }

}

/* === Indexia Digital 2026-10-12: pulida responsiva === */
/* Menu de escritorio: en monitores grandes los enlaces se agrupan al centro
   en vez de repartirse por todo el ancho. */
#main-menu .main-menu{justify-content:center; gap:clamp(34px, 4.2vw, 110px); padding-left:24px; padding-right:24px}
#main-menu .main-menu li{float:none}
/* Fila superior (logo, redes, correo, telefono): mismo ancho maximo que el contenido. */
.marquee .main-menu{max-width:1600px}

/* Hero: el boton crece con su texto y nunca se desborda. */
.gdm-cta{display:inline-block; margin:8px auto 0; padding:16px 36px; border:2px solid #fff; border-radius:10px;
  color:#fff; font-family:'Roboto', Helvetica, Arial, sans-serif; font-size:16px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; text-decoration:none; line-height:1.2; white-space:nowrap; transition:transform .3s ease, background .3s ease}
.gdm-cta:hover, .gdm-cta:focus-visible{transform:scale(1.05); background:rgba(255,255,255,.12); color:#fff; text-decoration:none; outline:none}
.gdm-cta:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.6)}
#main .gdm-cta{align-self:center}
@media (max-width: 480px){ .gdm-cta{padding:14px 22px; font-size:14px; white-space:normal; max-width:100%} }

/* Speaking Engagements: dos columnas iguales, foto sin repetir, lista legible. */
.gdm-split{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; padding:.4rem; background:#F2F2F2; align-items:stretch}
.gdm-split-media{min-height:560px; border-radius:15px; background-size:cover; background-position:center top; background-repeat:no-repeat}
.gdm-split-text{background:#0B171F; border-radius:15px; padding:clamp(40px, 6vw, 90px) clamp(24px, 6vw, 90px); display:flex; flex-direction:column; justify-content:center}
.gdm-split-text h2{color:#fff; font-size:clamp(30px, 3.2vw, 45px); font-weight:700; letter-spacing:-.3px; line-height:1.15; margin:0 0 28px; text-align:left}
.gdm-list{list-style:none; margin:0; padding:0}
.gdm-list li{position:relative; padding-left:18px; margin:0 0 18px; color:#D6D6D6; font-size:clamp(15px, .9vw, 19px); line-height:1.65; font-weight:300; text-align:left; overflow-wrap:anywhere}
.gdm-list li::before{content:'\2022'; position:absolute; left:0; top:0; color:#6F86FF}
.gdm-list a{color:#8FA2FF; text-decoration:none; font-size:inherit; font-weight:400; overflow-wrap:anywhere; word-break:break-word}
.gdm-list a:hover{color:#fff; text-decoration:underline}
@media (max-width: 900px){
  .gdm-split{grid-template-columns:1fr; padding:0; gap:0; background:#0B171F}
  .gdm-split-media{min-height:min(70vw, 480px); border-radius:0; background-position:center 20%}
  .gdm-split-text{border-radius:0; padding:48px 24px 56px}
}

/* Contacto: texto alineado a la derecha en un bloque fijo; nada se sale en ningun ancho. */
.gdm-contact{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; padding:.4rem; background:#F2F2F2; width:auto !important; max-width:none !important}  /* la regla vieja #contact{width:800px} ya no aplica */
.gdm-contact-text{position:relative; min-height:560px; border-radius:15px; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#0B1D4A;
  display:flex; align-items:center; justify-content:flex-end; overflow:hidden}
.gdm-contact-text::before{content:''; position:absolute; inset:0; background:rgba(8,22,70,.62)}
.gdm-contact-inner{position:relative; z-index:1; width:100%; max-width:600px; padding:clamp(48px, 7vw, 110px) clamp(24px, 6vw, 80px) clamp(48px, 7vw, 110px) 24px; text-align:right; color:#fff}
.gdm-contact-inner h2{color:#fff; font-size:clamp(34px, 4.2vw, 64px); font-weight:700; line-height:1.1; margin:0 0 14px; letter-spacing:-.5px}
.gdm-contact-sub{color:#fff; font-size:clamp(17px, 1.6vw, 24px); font-weight:600; line-height:1.4; margin:0 0 30px}
.gdm-contact-tel{display:block; color:#fff; font-size:clamp(28px, 3.4vw, 52px); font-weight:700; line-height:1.15; text-decoration:none; margin:0 0 10px; white-space:nowrap}
.gdm-contact-mail{display:block; color:#fff; font-size:clamp(17px, 1.5vw, 22px); font-weight:400; text-decoration:none; margin:0 0 40px; overflow-wrap:anywhere}
.gdm-contact-addr{display:block; color:#fff; font-size:clamp(15px, 1.2vw, 18px); font-weight:300; line-height:1.5; text-decoration:none}
.gdm-contact-inner a:hover{color:#fff; text-decoration:underline}
.gdm-contact-media{min-height:560px; border-radius:15px; background-size:cover; background-position:center top; background-repeat:no-repeat}
@media (max-width: 900px){
  .gdm-contact{grid-template-columns:1fr; padding:0; gap:0}
  .gdm-contact-text{border-radius:0; min-height:0; justify-content:center}
  .gdm-contact-inner{max-width:none; padding:56px 24px}
  .gdm-contact-media{border-radius:0; min-height:min(90vw, 520px)}
}
@media (max-width: 360px){ .gdm-contact-tel{white-space:normal} }

/* Footer */
.gdm-foot-sep{display:inline-block; margin:0 10px; color:#9A9A9A}
footer .copywrite p{line-height:1.8}
footer .copywrite p a{color:#4F4F4F}
footer .copywrite p a:hover{color:#001c50; text-decoration:underline}

/* Accessibility statement (2026-10-12) */
.gdm-statement{background:#0B171F; color:#D6D6D6; padding:clamp(140px, 16vw, 220px) 24px clamp(60px, 8vw, 110px)}
.gdm-statement-inner{max-width:860px; margin:0 auto; text-align:left}
.gdm-statement-kicker{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#8FA2FF; margin:0 0 12px; font-weight:600}
.gdm-statement h1{color:#fff; font-size:clamp(32px, 4vw, 48px); font-weight:700; line-height:1.15; letter-spacing:-.3px; margin:0 0 8px}
.gdm-statement-updated{font-size:14px; color:#8E96A8; margin:0 0 34px}
.gdm-statement h2{color:#fff; font-size:clamp(20px, 2vw, 26px); font-weight:700; margin:36px 0 12px; line-height:1.25}
.gdm-statement p{font-size:17px; line-height:1.7; font-weight:300; margin:0 0 16px; color:#D6D6D6}
.gdm-statement ul{margin:0 0 16px; padding-left:22px}
.gdm-statement li{font-size:17px; line-height:1.7; font-weight:300; margin:0 0 10px; color:#D6D6D6}
.gdm-statement strong{color:#fff; font-weight:600}
.gdm-statement a{color:#8FA2FF; text-decoration:none}
.gdm-statement a:hover{color:#fff; text-decoration:underline}
.gdm-statement-contact{list-style:none; padding:0}
.gdm-statement-foot{margin-top:40px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:14px; color:#8E96A8}