/* VARIABLES*/

:root {
    --gw-red-color: #E62227;
    --gw-blue-color: #2153A1;
    --gw-dark-blue-color: #161435;
    --gw-success-stroke: #00B040;
    --gw-success-fill: #F0FFF0;
    --gw-error-stroke: #E62227;
    --gw-error-fill: #FFE4E4;
    --gw-light-blue-color: #D9EDFF7A;
}

/* COLORS*/
    
/* text */
.gw-red{ color: var(--gw-red-color)}
.gw-blue{ color: var(--gw-blue-color)}
.gw-dark-blue{ color: var(--gw-dark-blue-color)}
.gw-error{ color: var(--gw-error-fill)}
.gw-success { color: var(--gw-success-fill)}

/* background*/
.gw-bg-red{ background-color: var(--gw-red-color)}
.gw-bg-blue{ background-color: var(--gw-blue-color)}
.gw-bg-dark-blue { background-color: var(--gw-dark-blue-color)}
.gw-bg-error { background-color: var(--gw-error-fill)}
.gw-bg-success { background-color: var(--gw-success-fill)}
.gw-bg-light-blue { background-color: var(--gw-light-blue-color) }

/* borders */
.gw-border-error { border-color: var(--gw-error-stroke)}
.gw-border-success { border-color: var(--gw-success-stroke)}

/* Override de theme.css y bootstrap*/
.navbar-light .navbar-nav .nav-link {
    color: #000000;
    font-size: 0.9rem;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active {
    color: var(--gw-red-color)
}
.form-control.is-invalid, .was-validated .form-control:invalid {
    border-color: var(--gw-error-stroke);
    background-color: var(--gw-error-fill);
}
.form-control.is-valid, .was-validated .form-control:valid {
    border-color: var(--gw-success-stroke);
    background-color: var(--gw-success-fill);
}

/* font family */
:root { --bs-font-sans-serif: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }

/* buttons */
.btn-gw-red {
    color: #fff;
    background-color: var(--gw-red-color);
    border-color: var(--gw-red-color);
}

    .btn-gw-red:focus, .btn-gw-red:hover {
        color: #fff;
        background-color: var(--gw-blue-color);
        border-color: var(--gw-blue-color);
    }

.btn-gw-outline-red {
    color: var(--gw-red-color);
    background-color: transparent;
    border-color: var(--gw-red-color);
}

    .btn-gw-outline-red:focus, .btn-gw-outline-red:hover, .btn-gw-outline-red.active {
        color: #fff;
        background-color: var(--gw-red-color);
        border-color: var(--gw-red-color);
    }

.gw-brand {
    width: 10rem;
    display: block;
    position: relative;
}

.gw-arrow-size {
    width: 3.5rem;
    height: 3.5rem

}

/* tooltips */
/* Override de theme.css */
.tooltip .tooltip-inner {
    background-color: var(--gw-red-color);
    padding: 15px;
    max-width: 300px;
}
    .tooltip .tooltip-arrow::before {
        border-top-color: var(--gw-red-color);
    }

/* Map Markets*/
.gw-map {
position: relative;
display: inline-block;
}

    .map img {
        max-width: 100%;
        display: block;
    }
    
    .box-img {
        width: 1.4%;
        height: auto;
        position: absolute
    }

    .map-references {
        margin-top: 0;
    }

        @media (min-width: 992px) {
            .map-references {
                margin-top: -30px;
            }
        }



/* thumbnais de carousel */
.swiper-thumbnails .swiper-slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.swiper-slide.swiper-slide-thumb-active .gw-thumb.primary { display: block; }
.swiper-slide.swiper-slide-thumb-active .gw-thumb.secondary { display: none; }

.swiper-slide:not(swiper-slide-thumb-active) .gw-thumb.primary { display: none; }
.swiper-slide:not(swiper-slide-thumb-active) .gw-thumb.secondary { display: block; }

/* swiper buttons */
.swiper-button-next, .swiper-button-prev {
    width: 3rem;
    height: 3rem;
}
    .swiper-button-next::before, .swiper-button-prev::before{
        width: 11px;
        height:11px;
    }
    .swiper-button-next::after, .swiper-button-prev::after {
        width: 15px;
        
    }

/**/
.card-product:hover {
    background-color: var(--gw-red-color);
    color: white
}

.flags-img {
    width: auto;
    height: 85%;
    position: absolute;
    top: 11%;
    left: 27%;
    -webkit-animation: spin 4s linear infinite;
    -moz-animation: spin 4s linear infinite;
    animation: spin 12s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.bg-textured {
    background: url("../img/images/hitos/about-us-background.jpg") #d4eeff;
}

.gw-container-fluid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}