/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

.fnt-fix{
    font-weight:100!important;
}

.fnt-fix-footer{
    font-weight:normal;
}

.share-bt{
    color:#888;
}


.header {
    width: 100%;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
}

.header img.img-banner{
    object-fit: contain;
    width:40%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.header .content-box-animated {
    position: relative; /* Cambiado a relative */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header .box-animated {
    position: absolute; /* Cambiado a absolute */
    width: 16vw;
    height: 16vw;
    transition: transform 0.2s ease-in-out;
}

.header .box-animated img{
    object-fit: cover;
    width:100%;
    height:100%;
}

.header .box-1 {
    background-color: #fff;
    top: 30%;
    left: 2%;
}

.header .box-2 {
    background-color: #fff;
    top: 10%;
    left: 5%;
    transform: rotate(-12deg);
}

.header .box-3 {
    background-color: #fff;
    top: 16%;
    left: 12%;
    transform: rotate(-12deg);
}

.header .box-4 {
    background-color: #fff;
    top: 56%;
    left: 10%;
}

.header .box-5 {
    background-color: #fff;
    top: 5%;
    left: 20%;
}

.header .box-6 {
    background-color: #fff;
    top: 30%;
    left: 23%;
    transform: rotate(-12deg);
}

.header .box-7 {
    background-color: brown;
    top: 41%;
    left: 10%;
    transform: rotate(12deg);
}

.box-content{
    width:100%;
    float:left;
    height: auto;
}

.box-content .box img{
    object-fit: cover;
    width:100%;
    height:100%;
}

.box-content .box-content-1{
    width:60%;
    height: auto;
    float:left;
}

.box-content .box-content-2{
    width:40%;
    height: auto;
    float:left;
}

.box-content .box-content-1 .box{
    width:32%;
    margin-right:.5%;
    margin-left:.5%;
    height:17vw;
    margin-bottom:.5vw;
    float:left;
    visibility: hidden;
}

.box-content .box-content-2 .box{
    width:100%;
    height:34.5vw;
    float:left;
    visibility: hidden;
}

.box-content .box-1 {
    background-color: #fff;
}

.box-content .box-2 {
    background-color: #fff;
}

.box-content .box-3 {
    background-color: #fff;
}

.box-content .box-4 {
    background-color: #fff;
}

.box-content .box-5 {
    background-color: #fff;
}

.box-content .box-6 {
    background-color: #fff;
}

.box-content .box-7 {
    background-color: brown;
}


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


    .header .box-animated {
        width: 80vw;
        height: 80vw;
    }

    .box-content-1, .box-content-2{
        width:100%!important;;
    }

    .box-content .box-1, .box-content .box-2, .box-content .box-3, .box-content .box-4, .box-content .box-5, .box-content .box-6 {
        width:49%!important;
        margin-right:.5%!important;
        margin-left:.5%!important;
        height:45vw!important;
    }

    .box-content .box-7 {
        width:99%!important;
        margin-right:.5%!important;
        margin-left:.5%!important;
        height:90vw!important;
    }

    .fnt-fix{
        font-weight:100!important;
    }

}

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


    .header .box-animated {
        width: 40vw;
        height: 40vw;
    }

    .box-content-1, .box-content-2{
        width:100%!important;;
    }

    .box-content .box-1, .box-content .box-2, .box-content .box-3, .box-content .box-4, .box-content .box-5, .box-content .box-6,.box-content .box-7 {
        width: 99%!important;
        margin-right:.5%!important;;
        margin-left:.5%!important;;
        height:90vw!important;
    }


    .fnt-fix{
        font-weight:normal!important;
    }

}


.polo-share-link{
    box-shadow: 0 2px 0 0 currentColor; /* Ajusta el valor '2px' para la separación */
}

/* Definición de la animación de oscilación de opacidad */
@keyframes opacityOscillate1 {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

@keyframes opacityOscillate2 {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Aplicación de la animación a cada capa */
#polo-backpower {
    animation: opacityOscillate1 1s ease-in-out infinite;
}

#polo-flechas {
    animation: opacityOscillate2 2s ease-in-out infinite;
}


.custom-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #162A25;
    z-index: 9999;
    display: flex;
   /* align-items: center;
  /*  justify-content: center;*/
    opacity: 1;
}
.custom-preloader.fade-out {
    opacity: 0; /* Cambia a transparente */
    transition: opacity 1s ease;
    pointer-events: none; /* Evita la interacción durante el fade-out */
}


.menu--alt {
    background-color: rgba(255,255,255,0.95)!important
}