:root {
  --swiper-theme-color: rgb(226 1 27);
  --swiper-theme-color-light: rgb(226, 1, 27, 0.9);

  
  --swiper-client-theme-color: #023e6c;
  
  --swiper-navigation-size: 44px;
  --swiper-navigation-sides-offset: 0;
}
html { 
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-size:100%;
    -webkit-text-size-adjust: 100%;
 }
 *, *::before, *::after {
    box-sizing: inherit;
}

*, ::after, ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body{
    padding:0;
    margin:0;
    font-family:Arial;
    background:#e9e9e9;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    position: relative;
    min-height: 100%;
    height: 100vh;
}
.clearfix:after {
    clear: both;
}
.clearfix:after, .clearfix:before {
    content: " ";
    display: table;
}

.swiper {
    padding: 4rem;
    overflow: hidden;

    .swiper-wrapper {
        max-height: 100% !important;
    }
}

.swiper-slide img{
    height:100%;
    width:auto;
    object-fit:cover;
        /* max-width: 100%;
    max-height: 100%; */
}

.swiper-slide {
    display: flex;
    justify-content: center;
}

.swiper-slide:not(.swiper-slide-visible) {
    opacity: 0 !important;
}


.pages {
    display: flex;
    float: left;
    position: relative;

    &.page-left {
        max-width: 50%;
        height: 100%;
        /* height: fit-content;
    width: fit-content; */
    }
    &.page-right {
        max-width: 50%;
        height: 100%;
        /* height: fit-content;
    width: fit-content; */
    }
}


.swiper-button-prev,
.swiper-button-next {
    background-color: transparent;
}
.swiper-button-prev {
    /* left: -4rem !important; */
}
.swiper-button-next {
    /* right: -4rem !important; */
}


.inline-video {
    background-color: transparent;
    background-color: var(--swiper-client-theme-color);
    position: absolute;
    /* z-index: 999; */
    height: auto;
    right: auto;
    left: auto;
    /* object-fit: cover; */

    video {
        width: 100%;
        height: 100%;
        top: 0;
        left:0;
        position: absolute;
        z-index: 0;
            object-fit: cover;
    }

}
#inline-video-12345 {
    width:64.3%;
    top:37.4%;
    left: 0;
    height: 23%;
}

#inline-video-12346 {
    width: 64.3%;
    top: 44.1%;
    right: 0;
    
    height: 27.4%;
}

.poverlay {
    position: absolute;
    top: 0;
    bottom: auto;
    left: 0;
    width: 50%;
    height: 20%;
    /* background: linear-gradient(180deg, #052345, #00477b); */
}
.x123 {
    right:0;
    left: auto;
    top: 38%;
    width: 34%;
    height: 23%;
    background: linear-gradient(180deg, #033663, #004175);
}
.x124 {
    right: auto;
    left: 4%;
    top: auto;
    bottom: 5%;
    width: 94%;
    height: 33%;
    background: linear-gradient(180deg, #025b9e, #044e86);
    background: linear-gradient(180deg, #004375, #00467a);
}

.r11 {
    right: auto;
    left: 4%;
    top: 34%;
    bottom: auto;
    width: 92%;
    height: 8.2%;
    background: linear-gradient(180deg, #02345d, #003966);
}
.r12 {
    right: auto;
    left: 4%;
    top: 44%;
    bottom: auto;
    width: 30%;
    height: 18%;
    background: linear-gradient(180deg, #003e6f, #034478);
}
.r13 {
    right: auto;
    left: 35%;
    top: 44%;
    bottom: auto;
    width: 30%;
    height: 18%;
    background: linear-gradient(180deg, #003e6f, #034478);
}
.r14 {
    right: auto;
    left: 67%;
    top: 44%;
    bottom: auto;
    width: 30%;
    height: 18%;
    background: linear-gradient(180deg, #003e6f, #034478);
}
.r15 {
    right: auto;
    left: 4%;
    top: 64%;
    bottom: auto;
    width: 30%;
    height: 33%;
    background: linear-gradient(180deg, #01477b, #034478);
}

.r16 {
    right: 4%;
    left: auto;
    top: 64%;
    bottom: auto;
    width: 61%;
    height: 33%;
    background: linear-gradient(18deg, #01477b, #034478);

    /* &::before {
        opacity: 0 !important;
        background: linear-gradient(180deg, #01477b, #034478);
    } */
}






.r17 {
    right: auto;
    left: 4%;
    top: 34%;
    bottom: auto;
    width: 92%;
    height: 8.2%;
    background: linear-gradient(180deg, #02345d, #003966);
}
.r18 {
    right: auto;
    left: 4%;
    top: 44%;
    bottom: auto;
    width: 30%;
    height: 28%;
    background: linear-gradient(180deg, #003e6f, #034478);
}
.r19 {
    right: auto;
    left: 4%;
    top: 73%;
    bottom: auto;
    width: 30%;
    height: 24%;
    background: linear-gradient(180deg, #01477b, #034478);
}
.r20 {
    right: auto;
    left: 35%;
    top: 73%;
    bottom: auto;
    width: 30%;
    height: 7%;
    background: linear-gradient(180deg, #014579, #014579);
}
.r21 {
    right: auto;
    left: 35%;
    top: 82%;
    bottom: auto;
    width: 30%;
    height: 15%;
    background: linear-gradient(180deg, #01477b, #034478);
}
.r22 {
    right: auto;
    left: 67%;
    top: 73%;
    bottom: auto;
    width: 30%;
    height: 7%;
    background: linear-gradient(180deg, #01477b, #034478);
}





.r23 {
    right: auto;
    left: 4%;
    top: 23%;
    bottom: auto;
    width: 30%;
    height: 9%;
    background: linear-gradient(180deg, #052649, #033059);
}
.r24 {
    right: auto;
    left: 4%;
    top: 32%;
    bottom: auto;
    width: 30%;
    height: 40%;
    background: linear-gradient(180deg,  #04315a 0%,  #004377 50%,  #003c6b 100%);
}
.r25 {
    right: auto;
    left: 35%;
    top: 23%;
    bottom: auto;
    width: 30%;
    height:21%;
    background: linear-gradient(180deg, #042649, #003d6c);
}
.r26 {
    right: auto;
    left: 67%;
    top: 23%;
    bottom: auto;
    width: 30%;
    height: 21%;
    background: linear-gradient(180deg,#042649, #003d6c);
}



.fx-media, .fx-lanfer, .fx-surface {
    position: absolute!important;
}




/**/