:root {
    --light-2: #e5e5e5;
}

.header-image-height {
    height: 100px !important;
}

.home-carousel-height {
    height: auto !important;
}

.page-top-image {
    height: 200px !important;
}

.page-middle-image {
    height: 300px !important;
}

.light-2-c {
    color: var(--light-2);
}

.light-2-bg {
    background-color: var(--light-2);
}


.light-2-brdr {
    border-color: var(--light-2);
}

.twitter-bg {
    background-color: #08a0e9;
}

.facebook-bg {
    background-color: #3b5998;
}

.whatsapp-bg {
    background-color: #25d366;
}

.instagram-bg {
    background-color: #dd2a7b;
}

.youtube-bg {
    background-color: #c4302b;
}

.telegram-bg {
    background-color: #0088cc;
}

.linkedin-bg {
    background-color: #0077b5;
}


.custom-list {
    padding-inline-start: 30px;
}

.cfs-1 {
    font-size: calc(1rem * 1);
}

.cfs-2 {
    font-size: calc(1rem * 1.25);
}

.cfs-3 {
    font-size: calc(1rem * 1.5);
}

.cfs-4 {
    font-size: calc(1rem * 1.75);
}

.cfs-5 {
    font-size: calc(1rem * 2);
}

.cfs-6 {
    font-size: calc(1rem * 2.25);
}

.cfs-7 {
    font-size: calc(1rem * 2.5);
}


.cfs-8 {
    font-size: calc(1rem * 2.75);
}


.cfs-9 {
    font-size: calc(1rem * 3);
}

/*=======================================*/
.section.fill {
    position: relative;
    width: 100%;
    height: 80vh;
}

/*=======================================*/
@media (min-width: 576px) {
    .home-carousel-height {
        height: 600px !important;
    }

    .page-top-image {
        height: 400px !important;
    }

    .page-middle-image {
        height: 500px !important;

    }

}

@media (min-width: 768px) {}

@media (min-width: 992px) {
    .header-image-height {
        height: 160px !important;
    }
}

@media (min-width: 1200px) {}

.w3-container {
    position: absolute;
    left: 31px;
    bottom: 35px;
}

.text-shadow-drop-bottom {
    -webkit-animation: text-shadow-drop-bottom 0.6s both;
    animation: text-shadow-drop-bottom 0.6s both;
}

@-webkit-keyframes text-shadow-drop-bottom {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }
}

@keyframes text-shadow-drop-bottom {
    0% {
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    }
}



.flag {
    position: relative;
    overflow: hidden;
    border-radius: 0.5vw;
    padding: 0;
}

.flag::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.5vw;
    box-shadow: inset 0 0 1vw 0 rgba(0, 0, 0, 1);
}

.flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.events-none {
    pointer-events: none;
}

.events-auto {
    pointer-events: auto;
}

.text-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
}



div .mode-text {
    margin: 0;
    font-size: 10vw;
    text-transform: uppercase;
    line-height: 1.9;
    height: 80vh;
}


.light .mode-text {
    color: #000;
    font-size: 7vh;
    height: 100%;
}

div .mode {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.light {
    background: transparent;
}

.light .mode {
    mix-blend-mode: lighten;
}