/* font-size: calc([minimum p size] + ([maximum p size] - [minimum p size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
 */
/* :root {
     --blue: #235789;
     --red: #C1292E;
     --yellow: #FFC857;
     --grey: #A4A2A2;
     --white: #f9f9f9;
     --black: #000;
     --aqua: #1eeded;
     var(--grey);
}
 */
 #main{
     position: relative;
     overflow: hidden;
}
 #letters_view_1_h, #letters_view_2_h , #letters_view_3_h, #letters_view_4_h , #letters_view_5_h , #letters_view_6_h ,#letters_view_7_h, #letters_view_8_h , #letters_view_9_h{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     z-index: -100;
}
 #letters_view_1_h{
    z-index:1;
}

/*************************** header ******************************/
 #header {
     height: 100vh;
     background-position: center;
    /* Center the image */
     background-repeat: no-repeat;
    /* Do not repeat the image */
     position: relative;
}
 .logo_c_header, #header_path_logo .path , .letters_view_1 , #letters_view_1_h .scroll-downs , .letters_view_2 , .letters_view_3 , .letters_view_9 , .bg_effects{
     opacity:0;
}
/*LOGO SVG PATH*/
 #header_path_logo{
     z-index: -101;
     position: relative;
     transform: translate(-50%, -50%);
     top: 50vh;
     left: 50vw;
     width:80%;
}
/* READY SET GO */
 #letters_view_1_h {
    width: 0vw;
     height: 5vw;
     background: var(--red);
}
 .letters_view_1{
     position: absolute;
     display: block;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     transform-origin: left top;
}
 #letters_view_1_1{
     font-size : calc(50px + (150 - 50) * ((100vw - 300px) / (1600 - 300)));
}
 #letters_view_1_2{
     font-size : calc(90px + (400 - 90) * ((100vw - 300px) / (1600 - 300)));
}
 #letters_view_1_3{
     font-size : calc(150px + (900 - 150) * ((100vw - 300px) / (1600 - 300)));
}
 .scroll-downs {
     position: relative;
     top: 2%;
     right: 0;
     bottom: 0;
     left: 0;
     margin: auto;
     width :34px;
     height: 55px;
     z-index:2;
     cursor: pointer;
}
 .mousey {
     width: 3px;
     padding: 10px 15px;
     height: 35px;
     border: 2px solid #fff;
     border-radius: 25px;
     opacity: 0.75;
     box-sizing: content-box;
}
 .scroller {
     width: 3px;
     height: 10px;
     border-radius: 25%;
     background-color: var(--white);
     animation-name: scroll;
     animation-duration: 2.2s;
     animation-timing-function: cubic-bezier(.15,.41,.69,.94);
     animation-iteration-count: infinite;
}
 @keyframes scroll {
     0% {
         opacity: 0;
    }
     10% {
         transform: translateY(0);
         opacity: 1;
    }
     100% {
         transform: translateY(15px);
         opacity: 0;
    }
}
/* DIGITAL ART IDEAS */
 #letters_view_2_h {
     white-space: nowrap;
     word-spacing: calc(5px + (30 - 5) * ((100vw - 300px) / (1600 - 300)));
}
 .letters_view_2{
     position: relative;
     display: inline-block;
     font-size: calc(30px + (100 - 30) * ((100vw - 300px) / (1600 - 300)));
}
/* GET A TASTE */
 #letters_view_3_h {
    word-spacing: calc(15px + (100 - 15) * ((100vw - 300px)/(1600 - 300)));
}
 .letters_view_3 {
    position: relative;
     display: inline-block;
     font-size:calc(85px + (350 - 85) * ((100vw - 300px)/(1600 - 300)));
     line-height: calc(120px + (350 - 120) * ((100vw - 300px)/(1600 - 300)));
}
/*CONCEPTUAL THINKING ...*/
 .letters_view_8_1{
    font-size: 20vw;
}
 #letters_view_8_h {
    z-index:100;
     opacity: 0;
}
/*myappollo*/
 .letters_view_9{
     position: absolute;
     white-space: nowrap;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size:calc(30px + (50 - 30) * ((100vw - 300px)/(1600 - 300)))
}
 @media screen and (max-width: 500px) {
     .mousey {
         padding: 10px 2vw;
         border: none;
    }
}

/*************************** intro ******************************/
 #intro{
    min-height: 50vw;
}
 #intro_flex_col_title{
    order: 2
}
 #intro_flex_col_txt{
    order: 1
}
 #intro_txt_wrapper{
    align-self: center;
}
 #intro_title{
    font-size:10vw;
}
 #intro_txt{
    font-size:2vw;
    text-align: center;
     height: 5vw;
     line-height: 5vw;
}
 #intro_sub_1{
    font-size:8vw;
}
 #intro_sub_2{
    font-size:8vw;
}
 @media screen and (max-width: 1000px) {
     #intro_flex_col_title{
        order: 1
    }
     #intro_flex_col_txt{
        order: 2;
         height: calc(70vw * .1 + 1px);
    }
     #intro_flex_col_title .flex_box_inner_row{
        align-self: flex-end;
    }
     #intro_flex_col_txt .flex_box_inner_row{
        align-self: flex-start;
    }
     #intro_title{
        font-size:15vw;
    }
     #intro_sub_1{
        font-size:12vw;
    }
     #intro_sub_2{
        font-size:12vw;
    }
    /*#intro_txt{
        width: 100%;
        font-size:4vw;
    }
    */
     #intro_txt{
        font-size:4vw;
    }
}

/*************************** key_facts ******************************/
 #key_facts{
    min-height: 50vw;
    padding-left: 10%;
    padding-right: 10%;
}
 #key_facts .flex_box_inner_row{
     row-gap: 5vh;
}
 #key_facts .flex_box_inner_row>div{
    align-self: flex-end;
}
 #key_facts .block_reveal_container{
    width: 100%;
}
 #key_facts .block_title{
    padding-top:15px;
     padding-bottom:15px;
     font-size: 2.2vw;
}
 #key_facts .key_facts_txts{
    font-size: 1.3vw;
}
 #key_facts .block_overlay {
    background-color: var(--black);
}
 #key_facts .bottom_border{
    border-bottom: 1px solid var(--black);
}
 #key_facts .key_num{
     z-index: -1;
     position: absolute;
     right: 0;
     border-radius: 50%;
     width: 100px;
     height: 100px;
     background: #c5c5c5;
     color: #fff;
     text-align: right;
     font-size: 120px;
     display: flex;
     align-content: stretch;
     justify-content: flex-end;
     align-items: center;
}
 @media screen and (max-width: 1000px) {
     #key_facts .flex_box_inner_row {
        row-gap: 15px;
    }
     #key_facts .block_title{
        font-size: 3vw;
    }
     #key_facts .key_facts_txts{
        font-size: 2.6vw;
    }
}
 @media screen and (max-width: 500px) {
     #key_facts .block_title{
        font-size: 7vw;
    }
     #key_facts .key_facts_txts{
        font-size: 5vw;
    }
}
/*************************** branding_section ******************************/
 #branding_section {
     min-height: 50vw;
     background-position: center;
    /* Center the image */
     background-repeat: no-repeat;
    /* Do not repeat the image */
     position: relative;
    /*overflow: hidden;
    */
}


#branding_flex_col_points .reveal-sentence-wrapper{
     background: rgb(0 0 0 / 35%);
     box-shadow: 0 8px 32px 0 rgb(31 38 135 / 49%);
     backdrop-filter: blur( 4px );
     -webkit-backdrop-filter: blur( 4px );
     margin-bottom: 15px;
}
      
 #branding_flex_col_title .flex_box_inner_row{
    z-index:1
}
 #row_of_branding_points_header{
    align-content: center;
     justify-content: center;
}
 #row_of_branding_points{
    align-content: flex-end;
     background: var(--black);
     color: var(--white);
}
 .branding_points {
    padding-right: 5vw;
     padding-left: 5vw;
}
 .logo_branding{
    padding-right: 5vw;
}
 #img1_branding{
    position: absolute;
     display: block;
     left: 25%;
     top: 25%;
     transform: translate(25%,25%);
     width: 50vw;
}
 #branding_logo_path{
    position: absolute;
     padding-right: 5vw;
     width: 100%;
     height: 95vh;
     mix-blend-mode: multiply;
}
 #branding_logo_path .branding_logo_path_line {
    fill: none;
     stroke: var(--grey);
     stroke-width: 0.5px;
}
 #branding_logo_path .branding_logo_path_fill {
    fill: var(--red);
     stroke: none;
}
/*BRANDING TITLE*/
 #letters_view_7_h {
     position: relative;
     left: 25%;
     top: 50%;
     transform: translate(-25%, -50%);
}
 .letters_view_7 {
    display: block;
     word-wrap: normal;
     font-size: calc(25px + (40 - 25) * ((100vw - 300px) / (1600 - 300)));
}
 #letters_view_7_title span {
    display: inline-block;
     font-size: calc(55px + (200 - 55) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(45px + (180 - 45) * ((100vw - 300px) / (1600 - 300)))
}
 #letters_view_7_2 {
    background: var(--blue);
     color: var(--white);
}
 #letters_view_7_3 {
    background: var(--red);
     color: var(--white);
}
 #letters_view_7_4 {
    background: var(--yellow);
     color: var(--black);
}
 @media screen and (max-width: 500px) {
     #branding_logo_path{
         width: 50%;
         left: 25%;
         top: -5%;
         transform: translate(50%,50%);
         padding-right: 0px;
         height: 20vh;
    }
     #img1_branding {
         left: -10%;
         top: 20%;
         transform: translate(25%,25%);
         width: 100%;
    }
}

/*************************** web_section ******************************/
 #web_section {
     min-height: 55vw;
     background-position: center;
    /* Center the image */
     background-repeat: no-repeat;
    /* Do not repeat the image */
     position: relative;
    /*overflow: hidden;
    */
}
 #web_section .flex_box_row {
    align-self: stretch;
}
 #web_flex_col_title .flex_box_inner_row{
    z-index:1;
}
 #web_flex_col_title {
    align-self: stretch;
}
 #web_flex_col_points {
    align-self: center;
}
 .web_points{
    padding-right: 5vw;
    padding-left: 6vw;
}
 #web_section .words .word{
    position: relative;
}
/* WEB ...*/
 #letters_view_4_h {
    flex-grow: 0;
     align-self: stretch;
     position: relative;
    width: 20vw;
     height: fit-content;
    margin-right: -20vh;
     white-space: nowrap;
     transform-origin: bottom left;
     left: 0;
     transform: rotate(-90deg) translateX(0%) translateY(100%);
}
 #letters_view_4_title {
    display: block;
     font-size: calc(50px + (300 - 50) * ((100vw - 300px) / (1600 - 300)));
     color:var(--blue);
     padding-left: calc(20px + (30 - 20) * ((100vw - 300px)/(1600 - 300)));
}
 #letters_view_4_2 {
    padding-left:50%;
}
 .letters_view_4 {
    position: relative;
     color:var(--red);
     display: inline-block;
     padding: 15px 0px 15px 0px;
     font-size: calc(20px + (40 - 20) * ((100vw - 300px) / (1600 - 300)));
}
      
#letters_view_4_3,
#letters_view_4_5 {
    color: var(--blue);
}




      
 @media screen and (max-width: 500px) {
     #web_flex_col_title{
        flex-basis: 2%;
    }
     #web_flex_col_points{
        flex-basis: 35%;
    }
     #letters_view_4_h {
        margin-bottom: -35%;
        transform: rotate(-90deg) translateX(-50%) translateY(90%);
    }
     .letters_view_4{
        padding:0px
    }
     #wraper_web_swiper{
         position: relative;
         left: 25%;
         top: 0%;
         transform: translate(-50%,0%);
        padding-right: 0px;
    }
}
 #web_section .swiper {
     width: 150px;
     height: 70px;
     flex-grow: 0;
}
 #web_section .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 18px;
     font-size: 22px;
     font-weight: bold;
     color: var(--black);
     background: var(--white);
     border: 1px solid var(--black);
}
 #wraper_web_swiper{
    padding-right: 5vw;
}
 #web_slider_pagination{
     bottom: -12px;
}
 #web_slider_pagination span{
     background: var(--blue);
}

/*************************** social_section ******************************/
 #social_section {
     min-height: 70vh;
     background-position: center;
    /* Center the image */
     background-repeat: no-repeat;
    /* Do not repeat the image */
     position: relative;
     align-items: flex-end;
    /*overflow: hidden;
    */
}
/* SOCIAL ...*/
 #letters_view_5_h {
    white-space: nowrap;
     height: 9vw;
     background: var(--yellow);
}
 #letters_view_5_title {
    display: block;
     position: absolute;
     font-size: calc(60px + (300 - 60) * ((100vw - 300px) / (1600 - 300)));
}
 #letters_view_5_title_clip {
    display: block;
     position: absolute;
     clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
     color: var(--blue);
     font-size: calc(60px + (300 - 60) * ((100vw - 300px) / (1600 - 300)));
}
 #letters_view_5_title span {
    position: relative;
     display: inline-block;
}
 #letters_view_5_title_clip span {
    position: relative;
     display: inline-block;
}
 .letters_view_5 {
    position: relative;
     top: 100%;
     display:block;
    font-size: calc(25px + (80 - 25) * ((100vw - 300px) / (1600 - 300)));
}
 #social_section .swiper {
     width: 100%;
}
 #social_section .swiper-slide {
     background-position: center;
     background-size: cover;
     width: 200px;
     height: 100%;
}
 #social_section .swiper-slide img {
     display: block;
     width: 100%;
    height: 100%;
     object-fit: cover;
}
 #swiper_pagination_social span{
     background: var(--blue);
}
 @media screen and (max-width: 500px) {
     #social_section .swiper{
        padding-left: 40%;
         padding-top: 65%;
    }
}

/*************************** media_section ******************************/
 #media_section {
     height: 100vh;
     background-position: center;
    /* Center the image */
     background-repeat: no-repeat;
    /* Do not repeat the image */
     position: relative;
    /*overflow: hidden;
    */
}
/*MEDIA*/
 #letters_view_6_title {
    display: block;
     mix-blend-mode: difference;
     font-size: calc(80px + (350 - 80) * ((100vw - 300px) / (1600 - 300)));
}
 .letters_view_6 {
    position: absolute;
     mix-blend-mode: difference;
     font-size: calc(20px + (70 - 20) * ((100vw - 300px) / (1600 - 300)));
}
 #letters_view_6_2 {
    left: 92%;
     top: 80%;
     color: var(--red);
}
 #letters_view_6_3 {
    left: 10.6%;
     top: 20%;
     color: var(--blue);
}
 #letters_view_6_4 {
    left: 50%;
     top: 50%;
     color: var(--yellow);
}
 #media_section .figure_ovrflow{
     overflow: hidden;
     position: absolute;
     width: 100vw;
     height:100vh;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}
 #media_section figure{
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) scale(1.2);
}
 #media_section figure img{
     object-fit: cover;
     object-position: 50% 50%;
     width: 100vw;
     height:100vh;
}
 #img1_media {
     transform-origin: top left;
}
 #img2_media {
     transform-origin: bottom right;
}
 #img3_media {
     transform-origin: center center ;
}

/*************************** quote ******************************/
 #quote{
    /* height: calc(100vw * .35);
    */
     height:20vw;
     position: relative;
     justify-content: flex-start;
    /*overflow: hidden;
    */
     padding-left: 0px 
}
 #quote_title{
     color: var(--blue);
     font-size:20vw;
     line-height: 20vw;
     white-space: nowrap;
     position: absolute;
     top: 0;
}
 #quote_title_over{
     z-index: 1000;
     font-size:20vw;
     line-height: 20vw;
     white-space: nowrap;
     position: absolute;
     top: 0;
    /*50%*/
     background-color: var(--red);
     color: var(--white);
     clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 50%, 100% 0%, 100% 75%, 0 85%, 0 100%, 100% 100%, 100% 0%);
}

/*************************** info ******************************/
 #info{
    min-height: 50vw;
}
 #info .info_txt_img{
    flex-basis: 100%;
}
 #info .flex_box_inner_row{
    align-content: center;
}
 #info .info_txts {
    font-size: 2vw;
}
 #info .quote{
     font-size: 4vw;
}
 #info .in_quote{
}
 #info_2_el{
    text-align: center;
}
 #info_3_el{
    text-align: right;
}
 #info_firt_img{
    width:90%;
     transform-origin: 50% 0%;
}
 #info_sec_img{
    width:90%;
     transform-origin: 50% 0%;
}
 @media screen and (max-width: 1000px) {
     #info .flex_box_row{
        row-gap: 35px;
    }
     #info_1_el{
        flex-basis: 59%!important;
        align-self: center;
    }
     #info_1_2_el{
        flex-basis: 39%!important;
    }
     #info_3_1_el{
        flex-basis: 39%!important;
    }
     #info_3_2_el{
        flex-basis: 59%!important;
        align-self: center;
    }
     #info .info_txts {
        font-size: 3vw;
    }
}
 @media screen and (max-width: 500px) {
     #info .info_txts {
        font-size: 4vw;
    }
}

/*************************** cases ******************************/
 #cases{
     height: 100vh;
     padding-top: 10vh;
}
 #cases_slides{
    position: relative;
     top: 50%;
     transform: translateY(-50%);
}
 #cases .text-containers-wrappers{
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
     width: 50%;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     align-items: flex-end;
     justify-content: space-between;
     align-content: stretch;
}
 #cases .reveal-text-wrapper {
    mix-blend-mode: lighten;
     background: var(--white);
}
 #cases .swiper-zoom-container img{
    transition-duration: 1300ms!important;
}
 #cases #swiper-1 .swiper-pagination {
     bottom: 2rem;
}
 #cases #swiper-1 .swiper-pagination-bullet {
     margin: 0 .5rem;
     opacity: 1;
     background-color: rgba(21, 21, 21, .75);
     width: .75rem;
     height: .75rem;
}
 #cases #swiper-1 .swiper-pagination-bullet-active {
     background-color: #E36262;
}
 #cases .swiper-custom-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 0;
     z-index: 10;
     display: flex;
     justify-content: space-between;
     width: 100%;
}
 #cases .swiper-custom-nav svg {
     cursor: pointer;
     opacity: .6;
     transition: all .3s ease-in-out;
}
 #cases .swiper-custom-nav svg:hover {
     opacity: 1;
}
 #cases .swiper-custom-pagination {
     display: flex;
     width: 100%;
     padding-top: 2rem;
     justify-content: center;
     gap: 1rem;
     font-size: 17px;
     line-height: 29px;
     font-weight: 500;
     color:var(--red);
}
 #cases .swiper-custom-pagination .swiper-pagination-bullet {
     width: auto;
     height: auto;
     border-radius: 0;
     background-color: transparent;
     opacity: 1;
     text-align: center;
}
 #cases .swiper-custom-pagination .number {
     opacity: 0;
     transition: all .3s ease-in-out;
}
 #cases .swiper-custom-pagination .line {
     opacity: .3;
     height: .25rem;
     width: .75rem;
     background-color: var(--red);
     display: block;
     border-radius: 4px;
     transition: all .3s ease-in-out;
}
 #cases .swiper-custom-pagination .swiper-pagination-bullet-active .number, #cases .swiper-custom-pagination .swiper-pagination-bullet-active .line {
     opacity: 1;
}
 #cases .swiper-custom-pagination .swiper-pagination-bullet-active .line {
     width: 2rem;
}
 @media screen and (max-width: 500px) {
     #cases .cases_imgs img {
         object-fit: cover;
         object-position: 50% 50%;
         width: 100vw;
         height: 100vh;
    }
}

/*************************** footer ******************************/
#footer{
    padding-top: 50px;
}
 #footer .tab {
     overflow: hidden;
}
 #footer button:hover {
}
 #footer button.active {
     background-color: var(--black);
     color:var(--white);
}
 #footer .tabcontent{
     display: none;
     padding-top: 85px;
}
 #footer .tabcontent.active {
     display: block;
}
 #footer button {
     background-color: var(--white);
     float: left;
     border: none;
     outline: none;
     cursor: pointer;
     padding: 14px 16px;
     transition: 0.3s;
     font-size: 17px;
     width: 33.33%;
}
 #footer .tabcontent {
     box-shadow: rgb(0 0 0) 5px 5px 115px 5px;
     padding: 6px 12px;
     padding-top: 85px;
     border-top: 1px solid #000000;
}
 @media screen and (max-width: 500px) {
     #footer button {
         font-size: 12px;
    }
     #footer .tabcontent {
         padding-top: 65px;
    }
}
/*************************** three **************************/