@font-face {
    font-family: proxima;
    src: url("../fonts/proxima_nova_light-webfont.ttf");
    font-weight: 100;
}
@font-face {
    font-family: proxima;
    src: url("../fonts/proxima_nova_reg-webfont.ttf");
    font-weight: 300;
}
/*@font-face {
    font-family: proxima;
    src: url("../fonts/proxima_nova_bold-webfont.ttf");
    font-weight: 600;
}*/

/*
@font-face {
    font-family: Rift;
    src: url("../fonts/Rift-Light.otf");
    font-weight: 100;
}

@font-face {
    font-family: Rift;
    src: url("../fonts/Rift-Regular.otf");
    font-weight: 300;
}
@font-face {
    font-family: Rift;
    src: url("../fonts/Rift-Medium.otf");
    font-weight: 400;
}
@font-face {
    font-family: Rift;
    src: url("../fonts/Rift-Demi.otf");
    font-weight: 500;
}
@font-face {
    font-family: Rift;
    src: url("../fonts/Rift-Bold.otf");
    font-weight: 600;
}
*/


/*@font-face {
    font-family: Rift Soft;
    src: url("../fonts/RiftSoft-Light.otf");
    font-weight: 100;
}
*/
/*@font-face {
    font-family: Rift Soft;
    src: url("../fonts/RiftSoft-Regular.otf");
    font-weight: 300;
}*/
/*@font-face {
    font-family: Rift Soft;
    src: url("../fonts/RiftSoft-Medium.otf");
    font-weight: 400;
}*/
/*@font-face {
    font-family: Rift Soft;
    src: url("../fonts/RiftSoft-Demi.otf");
    font-weight: 500;
}*/
@font-face {
    font-family: Rift Soft;
    src: url("../fonts/RiftSoft-Bold.otf");
    font-weight: 600;
}



img {
    opacity:0;
}
img[src] {
   opacity:unset;
 }



*{
    box-sizing: border-box;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none; 
    -webkit-user-select: none;   
    -khtml-user-select: none;    
    -moz-user-select: none;      
    -ms-user-select: none;       
    user-select: none;  
    touch-action: manipulation;
    border:none; 
    outline: none; 
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -ms-overflow-style: none;  
    overflow: -moz-scrollbars-none;  
    scrollbar-width: none;
}




body,html{
    font-size: 12px;
    padding:0px;
    margin:0px;
    width:100%;
    /*height:100%;*/
    position:fixed;
    top:0px;
    left:0px;
    font-family: proxima;
    font-weight: 300;
    color:var(--mainClr);
    height: 100vh;
    background-color:var(--mainBg);
}

input[type=text] {   
    -webkit-appearance: none;
    -moz-appearance: none;
}

:root {
    /*--headerHeight:4rem;  
    --headerBtmMar: 1rem;
    --menuTopNavHeight: 0rem;
    --headerPadding: calc(var(--headerHeight) + var(--menuTopNavHeight));
    --cardPadding:2rem;
    --cardFooterHeight:10rem;
    --cardImageHeight: 58.6%;
    --menuWidth:18%;
    --menuItemWidth:33.3%;  /* 3 columns */
    /*--menuItemWidth:50%;  */  /* 2 columns */
    /*--footerHeight:0rem;*/

    /*Colors*/
    --ratioblue: #32b1bb;
    --darkblue: #187d86;
    --darkestblue: #0b1d26;
    
    --inputDark:#0b1d2660;
    --inputLight:#187d8660;

    /*items color (LIGHT version)*/
    --logoColorFilter : none;
    --titles: var(--darkblue);
    --strongestBody: #000;
    --strongBody: #333;
    --weakBody: #717171;
    --neutralItem: #ccc;
    --optionBtn: #f8f8f8;    
    --btnTxt: #fff;    

    --mainBg: #000;
    /*--mainBg: #0b1d26;*/
    --mainClr: #ccc;
    --mainClrStrong: #fff;

    --mainBgInv: #FFF;
    --mainClrInv: #333;
    --mainClrStrongInv: #000;

    --headerHeight: 50px;

    --menuWidth: 50vw;
    --mobileBtmPad: 8rem;
    
    --gridSize: 80px;
    --cenmargin: calc(2 * var(--gridSize));
    
    --darkLight: #eaeaea;
    --lightDark: #181c21;
    --edgeCtrlBg: var(--darkestblue);
    --edgeCtrlBgAlpha: rgba(51, 139, 183, 0);
    --edgeCtrlBgShadow: rgba(0, 0, 0, 0.45);
    --alphaBg:rgba(255, 255, 255, 0.97);
    --coverAlphaBg: rgba(0, 0, 0, 0.97);
    --alertColor: #efbb46;
    --green: #3fa73f;

    --transitionDuration: 0.2s;
    --transitionFast: calc(var(--transitionDuration) / 2);
    --app-height: 100%;
    --currencySymbol: "$";
    --roundCorner:2rem;
    --mainCartBtnGrpSize: 3.5rem;
    --pers: 1000px;;
}

*::-webkit-scrollbar { /* WebKit */
    width: 0 !important;
    height: 0 !important;
    display: none !important; 
}
.inverse{
    --mainBg: var(--mainBgInv);
    --mainClr: var(--mainClrInv);
    --mainClrStrong: var(--mainClrStrongInv);

}

.loading #loader{
    display:block !important;
}

#loader{
    display:none;
}
.isMobile #loader img{
    transform: translatey(calc(-50% - 4rem)) !important;
}
#loader img{
    margin: 50vh auto;
    width: 3rem;
    transform: translatey(-50%);
    animation: blink 0.2s infinite;
    -webkit-animation: blink 0.2s infinite;

}



@keyframes blink{
    0% {
        opacity:0;
    }   
    100% {    
        opacity:1;;
    }
}




.zscrollarea{
    /*overflow: auto;*/
    /*overflow: scroll;*/
    -ms-overflow-style: none;  
    overflow: -moz-scrollbars-none;  
    scrollbar-width: none;
    /*-webkit-overflow-scrolling: touch;*/
}

.zscrollarea::-webkit-scrollbar, 
{ /* WebKit */
    width: 0 !important;
    height: 0 !important;
    display: none !important; 
}

/*div#headerbar:after,
.mainNav.pdtsGrp,
.main-sec-products,
#bottomBar .metaGrp[aria-label="Products"],
#bottomBar .metaGrp[aria-label="Meta"]
{
    display:none !important;

}*/
.main-sec-feed{
    display:none;

}

.mobile{
    display:none;
}
.desktop{
    display:block;
}
.main-sec-digital .scramTxtDigital1{
    margin-top: 2rem;
        height: calc(0px - ((var(--rate) * 2) * 1px));
    text-align: center;
    opacity: calc( (0 - (var(--rate)/50) ) + 0.2);
    overflow: visible;
}
.main-sec-digital .body{
    width:100%;
}

.digital-chd-1 > .btn{
    /*opacity: calc( 0 - var(--rate));*/
    margin-top: 1rem !important;
}



@media only screen and (min-width: 1000px) {
    html,body {
        font-size:16px;
        }
}

@media only screen and (max-width: 380px) {
    
    .thumbSection .logogrp {
        justify-content: space-between !important;
    }
/*    .thumbSection .logogrp > div{
        width: 6rem !important;
    }*/
    .main-sec-footprint .columnSetter{
        --cols: 2 !important;
    }
    .main-sec-clients .columnSetter{
        --cols: 4;
    }
/*    .contSection > .grp > div:last-child{
        margin: 2rem auto;
    }*/
    .columnSetter[data-pad='2'] {
        --attrPad: 1rem !important;
    }
    .carousel{
        padding: 1rem !important ;
    }

    :root{
        --menuWidth: 90vw;
    }

    #mainNavGrp{

        /*width: 100vw !important;*/
        padding: 6rem 0% 0 2rem;
    }
    /*.menu-open .contentContainer{
        transform: rotateY(80deg) translateZ(55vw) translateX(70%) !important;
    }*/




}

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

    .ytvid > iframe{
            height: 400px !important;
    }


    .navBigBtnGrp li {
        --h: 7rem !important;
    }


    .pdtVideo{
            height: 400px !important;
        overflow: hidden !important;
        align-items: flex-start !important;
        margin-bottom: 14rem !important;
    }
    .pdtList .header {
        --pad: 20vh !important;
    }
    .progressBar {
        --pad: var(--mobileBtmPad) !important;
    }
    .pdtList .body, .pdtList .header, .main-sec-products .products-chd-1 .grp{
        padding-bottom: var(--mobileBtmPad) !important;
    }
    .pdtVideo > blockquote, 
    .pdtVideo > .instagram-media{
        max-width: 60vw !important;
        min-width: 60vw !important;
    }    

     .pdtList > .grp{
        --imgw: 95vw !important;
    }
    .pdtList .body.specs{
        --w: 95vw !important;
    }

.pdtList .body, .largeTitle .body, .digital-chd-2 .chd{
    font-weight: 300 !important;
    /*color: red !important;*/
}

.progressBar{
    /*display:none;*/
}
#headerbar{
    background-color: unset !important;
}



    .pad-center {
        padding: 0 var(--cenmargin) !important;
    }

    .pl {
        padding-left: calc((var(--gridSize)/2) ) !important;
        padding-right: calc((var(--gridSize)/2) - 1rem) !important;
        --w: calc(100vw - (var(--gridSize)/2) - (var(--gridSize)/2)) !important;
    }
    .largeTitle .title {
        font-size: 180% !important;
    }
    /*.contSection >.grp .body{
        font-size: 90%;
    }*/
    .main-sec-clients .columnSetter{
        --cols: 4;
    }
    .carousel{
        margin-bottom: 1rem !important;
    }


    .mobile{
        display:block !important;
    }
    .desktop{
        display:none !important;
    }

 
    .p20 {
        padding: 0 15vw;
    }

    /*.main-sec-digital .bgimggrp,
    .main-sec-digital .bgimggrp .mobile{
        width: 100% !important;
            height: auto !important;
    }*/


/*.bg-1 {
    --bg: url(../img/bg-1m.jpg) !important;
}

.bg-2 {
    --bg: url(../img/bg-2m.jpg) !important;
}
.bg-3 {
    --bg: url(../img/bg-3m.jpg) !important;
}
.bg-4 {
    --bg: url(../img/bg-4m.jpg) !important;
}

*/


}




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



    .bgimggrp, .bgimggrp img,
    .cover .imggrp img
    {
        height:100%;
        width:auto;

    }
    .cover .imggrp
    {
        height:100%;
        /*width:auto !important;*/
    }
    .carousel .body{
        background-color: #0000006e  !important;
        backdrop-filter: blur(7px)  !important;
    }
    .carousel .name{
        font-weight: 300  !important;
        font-size: 45%  !important;
    }
    .carousel .loc{
        display:none  !important;
    }
    
    .digital-chd-1{
        position: relative !important;
        width: 100% !important;
        padding: 0 15vw var(--mobileBtmPad) 15vw !important;
        opacity: calc(1 - (var(--rate) / 50));
    }

    .digital-chd-1 > .title{
        padding: 0 5vw;
        margin-left: -15vw !important;
        width: calc(100% + 30vw) !important;
        max-width: 120vw !important;
    }

    .main-sec-digital .body{
        height: auto !important;
        opacity: 1 !important;
    }
    .digital-logoGrp .icons-grp{
        width: 100% !important;
        transform: unset !important;
        height: unset !important;
    }
    .main-sec-digital img{
        transform: unset !important;
    }    
    .main-sec-digital > .spacer{
        display: none;
        height: 0px !important;
    }
    .digital-chd-2{
        width: 100% !important;
        margin: 0 !important;
        background-size: 105% !important;
    }
    .digital-chd-2 > .spacer{
        /*display: none;
        height: 0px !important;*/
            height: 38vh !important;
    }
    .digital-chd-2 > div{
        height:unset !important;
    }
    .main-sec-clients{
            margin: 12vh 0 !important;
        height: unset !important;
    }

    #mainNavGrp{
        
        /*width: 75vw;*/
        padding: 6rem 0% 0 2rem;
    }
    .footprint-chd-2-1{
        padding: 0 3rem !important;
    }
    .progressBar{
        --w: 90vw !important;
    }
}

@media only screen and (min-width: 381px) and (max-width: 700px) {
    /*.menu-open .contentContainer{
        transform: rotateY(60deg) translateZ(22vw) translateX(75%) !important;
    }*/
    :root{
        --menuWidth: 75vw;
    }

    #mainNavGrp{
        width: 75vw !important;
    }

}




@media only screen and (max-width: 800px) {
    /*.contSection > .grp .body:not(.smtxt),
    .largeTitle .title, 
    .largeTitle .body{
            max-width: 100% !important;
    }*/
    body, html{
        --cenmargin: calc(0.5 * var(--gridSize)) !important;
    }

    .main-sec-footprint .columnSetter{
        --cols: 3;
    }
    #headerbar .mainPdtsGrp{
        display:none !important
    }


}

@media only screen and (min-width: 451px) and ( max-width: 800px) {


     .pdtList > .grp{
        --imgw: 75vw !important;
    }
    .pdtList .body.specs{
        --w: 75vw !important;
    }


    .pl {
        --w: calc(100vw - (var(--gridSize)/2) - var(--ex) - (var(--gridSize)/2) - var(--ex));
        padding-left: calc((var(--gridSize)/2) + var(--ex)) !important;
        padding-right: calc((var(--gridSize)/2) + var(--ex) - 1rem) !important;
    }
        .main-sec-clients .columnSetter{
        --cols: 5;
    }
        .p20 {
        padding: 0 20vw;
    }
    .digital-chd-1{
        padding: 0 max(min(20vw, var( --pad)), 2.5vw) 0 max(min(20vw, var(--pad)), 5vw);
    }
}



@media only screen and (min-width: 801px) and (max-width: 1200px) {
    .pad-center {
        padding: 0 calc((var(--cenmargin)/2) + var(--ex)) !important;
    }
    
    .main-sec-footprint .columnSetter{
        --cols: 4;
    }
    .main-sec-clients .columnSetter{
        --cols: calc(var(--attrCols)/1.4);
    }
    .p20 {
        padding: 0 20vw;
    }
    .digital-chd-1{
        padding: 0 max(min(20vw, var( --pad)), 2.5vw) 0 max(min(20vw, var(--pad)), 5vw);
    }
}



@media only screen and (min-width: 1201px) {
    .p20 {
        padding: 0 20vw;
    }
/*    .contSection > .grp .body:not(.smtxt),
    .largeTitle .title,
    .largeTitle .body {
                padding: 0 5%;
        }*/


        .main-sec-digital{
            --min: 0.25 !important;
        } 
            .digital-chd-1{
        padding: 0 max(min(20vw, var( --pad)), 2.5vw) 0 max(min(20vw, var(--pad)), 5vw);
    }


}
@media only screen and (min-width: 1401px) {
/*    .contSection > .grp .body:not(.smtxt),
    .largeTitle .title {
            padding: 0 10vw;
        }*/
}

/*.contSection > .grp .body:not(.smtxt),
    .largeTitle .title {
            padding: 0 10%;
        }
*/

/*@media only screen and (min-width: 1200px) {
    html,body {
        font-size:16px;
        }
}*/
.logo-sm img{
    height:100%;
}

.logo-sm{
    height: 100%;
    padding: 6px;
    /*padding: 0.3rem;*/
    /*width: 100%;*/
    transition-duration: 0.8s;
    overflow: hidden;
}

.scrolled #topLogo{
        width: 57px;

    padding-right: 13px !important;
    
}

/*.scrolled .logo-sm{
    width: 2.3rem;
}*/


.bg-darkblue{
    background-color:var(--darkblue);
    color:#fff;
}
.bg-darkestblue{
    background-color:var(--darkestblue);
}

.blur > img{
filter: blur(4px);
    transform: scale(1.03);
}
#headerbar{
    background-color: rgb(36 36 36 / 50%);
    /*backdrop-filter: blur(6px);*/
    --h: var(--headerHeight);
    height: var(--h);
    /*backdrop-filter: blur(10px);*/
    width: 100%;
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    /*background-color: rgb(36 36 36 / 30%);*/
    /*border-bottom: 1px solid #333;*/
}

#maintile{
    background-image: url(../img/grid-dark.png);
    position: absolute;
    z-index: 200;
    top: 0;
    left: -40px;
    width: calc(100vw + 40px);
    height: 100%;
}

#topLogo{
    justify-content: flex-start !important;
    transition-duration: 0.6s;
    /*background: rgb(36 36 36 / 69%);*/
    width: 110px;
    /*background: rgb(36 36 36 / 50%);*/
    margin-left: 1px;
    padding: 9px 8px;
    overflow: hidden;
    transition-delay: 0.5s;

}
#headerbar .maingrp > div:not(.menu-trigger){
    /*padding: 9px;*/
    /*justify-content: center;*/
    height:100%;
    display:inline-flex;
    /*align-items: center;*/

    /*padding:calc(((var(--h) - 4.5rem)/2) + 1rem) 1rem;*/
        /*flex-basis: 10%;*/
    /*min-width: 10rem;*/
}

.investors{
     background: rgb(36 36 36 / 50%);
    top: 0;
    width: 110px;
    justify-content: center;
}

.investors > .btn{
    border-radius: 0 !important;
    background-color: transparent !important;
    box-shadow: unset !important;
    
}

#headerbar .maingrp > div:last-child{
    /*justify-content: flex-end;*/
    position: absolute;
    right: 0;
}
#headerbar .maingrp > div:first-child{
    justify-content: flex-start;
}
.menu-trigger{
    transition-duration: 0.6s;
    overflow: hidden;
}
/*.pdtsGrp:after {
        box-shadow: 0rem 0.3rem 0.8rem -0.1rem rgb(0 0 0 / 65%);
border-radius: 2rem;
    background-color: var(--ratioblue);
    width: var(--h);
    height: var(--h);
    --h: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(50%) translateX(-50%);
    color: #fff;
    font-size: 100%;
    content: "\e64b";
    font-family: 'themify';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    align-self: center;
    justify-self: center;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    opacity:0;
    transition-duration: 0.3s;
}
*/

.opendownarrow{
    border-radius: 2rem;
    background-color: var(--ratioblue);
    width: var(--h);
    height: var(--h);
    --h: 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(50%);
    margin-top: -50%;
    font-weight: 600;
    color: #fff;
    font-size: 80%;
    padding-top: 0.3rem;
}

.scrolled .pdtsGrp:after{
    opacity: 1 !important;
}

/*#headerbar > div:first-child{
    padding-left:0 !important;
}*/
/*#headerbar > div:last-child{*/
    /*background-color: var(--darkblue);*/
        /*padding-right:0;*/
/*}*/
#headerbar .investors .btn{
        background-color: #fff;
    /*color: var(--ratioblue);*/
        box-shadow: 0rem 0.6rem 1rem -0.3rem rgb(0 0 0 / 65%);
    transition-duration: 0.3s;
        margin: 0;
    /*margin-right: 0;*/
    /*border-radius: 2rem 0 0 2rem;*/
    /*background-color: #187e85;*/
}

html:not(.isMobile) #headerbar .investors .btn:hover{
        box-shadow: 0rem 0rem 0rem -0.3rem rgb(0 0 0 / 65%);
    transform: scale(0.97);
    transform-origin: center;
}



#headerbar .maingrp{
/*--h: 4.5rem;*/
    height: var(--h);
    width: 100%;
    display: inline-flex;
    /*justify-content: space-between;*/
    align-items: center;
}
.mainNav{
    display:inline-flex;

}

.btn{
    cursor:pointer;
}

.inverse .btn{
    /*background-color: #fff !important;
    color:var(--ratioblue) !important;*/
    font-weight:600 !important;
}

.menu-trigger{
        cursor: pointer;
    /*transition-delay: 1s;*/
/*    -webkit-transition: -webkit-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -moz-transition: -moz-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition: -o-transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: transform .6s cubic-bezier(0.165, 0.84, 0.44, 1);*/
    display: block;
    /*width: 23px;
    height: 18px;*/
    padding: 16px;
    /*position: fixed;*/
    /*top: 0;
    left: 0;
    z-index: 8;*/
    /*background: #000;*/
    /*background: rgba(0,0,0,0.5);*/
    background: rgb(36 36 36 / 50%);
    /*border-right: 1px solid #fff;*/
    height: 100%;

    width: 55px;


}
.menu-trigger span {
    width: 23px;
    display: block;
    height: 3px;
    position: relative;
    background: #fff;
    margin-bottom: 4px;
    -moz-transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1),opacity .3s linear;
    -o-transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1),opacity .3s linear;
    -webkit-transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1),opacity .3s linear;
    transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1),opacity .3s linear;
    overflow: hidden;
    text-indent: 100%;
}
.menu-trigger span:last-child {
    margin-bottom: 0px !important;
    }
.menu-open .menu-trigger-1{
    -moz-transform: translate3d(0, 7px, 0) rotate(45deg);
    -ms-transform: translate3d(0, 7px, 0) rotate(45deg);
    -webkit-transform: translate3d(0, 7px, 0) rotate(45deg);
    transform: translate3d(0, 7px, 0) rotate(45deg)
}

.menu-open .menu-trigger-2{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    -moz-transform: scaleX(0.1);
    -ms-transform: scaleX(0.1);
    -webkit-transform: scaleX(0.1);
    transform: scaleX(0.1);
}

.menu-open .menu-trigger-3{
    -moz-transform: translate3d(0, -7px, 0) rotate(-45deg);
    -ms-transform: translate3d(0, -7px, 0) rotate(-45deg);
    -webkit-transform: translate3d(0, -7px, 0) rotate(-45deg);
    transform: translate3d(0, -7px, 0) rotate(-45deg)
}

/*hover*/

html:not(.menu-open):not(.isMobile) .menu-trigger:hover .menu-trigger-1 {
    -moz-transform: translate3d(0, -2px, 0);
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
    background: var(--ratioblue);
}
html:not(.menu-open):not(.isMobile) .menu-trigger:hover .menu-trigger-2 {
    background: var(--ratioblue);
}
html:not(.menu-open):not(.isMobile) .menu-trigger:hover .menu-trigger-3 {
    -moz-transform: translate3d(0, 2px, 0);
    -webkit-transform: translate3d(0, 2px, 0);
    transform: translate3d(0, 2px, 0);
    background: var(--ratioblue);
}

html.menu-open:not(.isMobile) .menu-trigger:hover .menu-trigger-1 {
    -moz-transform: translate3d(0, 7px, 0) rotate(135deg);
    -ms-transform: translate3d(0, 7px, 0) rotate(135deg);
    -webkit-transform: translate3d(0, 7px, 0) rotate(135deg);
    transform: translate3d(0, 7px, 0) rotate(135deg);
    background: var(--ratioblue);
}
html.menu-open:not(.isMobile) .menu-trigger:hover .menu-trigger-2 {
    background: var(--ratioblue);
}
html.menu-open:not(.isMobile) .menu-trigger:hover .menu-trigger-3 {
    -moz-transform: translate3d(0, -7px, 0) rotate(45deg);
    -ms-transform: translate3d(0, -7px, 0) rotate(45deg);
    -webkit-transform: translate3d(0, -7px, 0) rotate(45deg);
    transform: translate3d(0, -7px, 0) rotate(45deg);
    background: var(--ratioblue);
}








#headerbar .menu{
    height: 100%;
    /*background-color: #fff;*/
    padding: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    border-radius: 0.2rem;
    background-color: var(--darkblue);
}

#headerbar .menu img{
    height: 100%;
}

.mainNav > .btn > .label{
        font-size: 80%;
    color: #ccc;
    font-weight: 300;
        /*font-style: italic;*/
}

html:not(.isMobile) .pdtsGrp .btn:hover,
.pdtsGrp .btn.hover {
    color: var(--ratioblue) !important;
    background: rgb(36 36 36 / 90%);
    /*background: rgb(36 36 36 / 50%);*/
}

.mainNav > .btn{
        /*white-space: nowrap;*/
    height: 100%;
    padding: 0 1rem;
    font-size: 1rem;
    /*margin: 0 0.5rem;*/
    /*border-radius: 2rem;*/
    color: #fff;
    font-weight: 300;
    align-items: center;
    display: inline-flex;
    /*background-color: #187e85;*/
    min-width: 5rem;
    text-align: center;
    justify-content: center;
        display: flex;
    flex-direction: column;
    transition-duration: 0.3s;
}

.stretch{
    width: 100%;
    /*height: 100%;*/
}



#mainContainer{
        background-color: #000;
    --ex: 0px;
        height: 100%;
    overflow: hidden;
        perspective: var(--pers);
}

.menu-open .contentContainer {

    transform: translateX(var(--menuWidth) );
    filter: blur(0px) brightness(0.3);
    pointer-events: none;

    /*transform: rotateY( 40deg) translateZ(12vw) translateX(45%);*/
    /*transform: rotateY( -70deg) translateZ(-50vw) translateX(-35%);*/
    /*transform: rotateY( -70deg) translateZ(-390px) translateX(0%);*/
    /* transform: rotateY( -30deg) translateZ(-100px) translateX(0px); */
    /* transform: rotateY( 50deg) translateZ(650px) translateX(10%); */
    /* transform-origin: left;
    /*transform: rotateY( -30deg) translateZ(-100px) translateX(0px);*/
        /*border-radius: 4rem;*/
    /*overflow: hidden;*/
}

.contentContainer {
    overflow: hidden;
    position: relative;
    perspective: var(--pers);
    transition-duration: 0.2s;
    /*margin-left: calc(var(--ex)/2);*/
}


.stickyGrp{
   position: -webkit-sticky !important;
    position: sticky !important;
    top: 0px !important;
}

.fs{
    --w: 100vw;
    width:100vw !important;
    height:100vh !important;
    /*overflow: hidden !important;*/
}

.nosnap{
    scroll-snap-align: none !important;
}

.loading #headerbar {
    opacity: 0;
}

.loading .pageContainer{
    overflow:hidden !important;
}
.pageContainer{
    background-color: #000;
    overflow-x: hidden;
    height: 100vh;
    /*scroll-snap-type: y mandatory;*/
    /*scroll-snap-type: y proximity;*/
    /*overflow: scroll;*/
    perspective: var(--pers);
}

.s-footprint .title{
    margin-bottom: 0;
}



/*.pageContainer{
    background-color:red;
}*/
.contSection{
    
    /*perspective: var(--pers);*/
    /*  width:100vw !important;
    height:100vh !important;
    overflow: auto;*/
    width: 100%;
    /*padding: var(--gridSize) 0%;*/
    font-size: 160%;
    position: relative;
    /*overflow: hidden;*/
    /*background-color: #111;*/
    scroll-snap-align: start;
}

.pl{
/*.contSection:not(.cover):not(.coverBg) > div{*/
    /*padding-left: var(--x);*/
    padding-left: calc(var(--gridSize) + var(--ex));
    padding-right: calc(var(--gridSize) + var(--ex) - 1rem);
}



html:not(.isMobile) .mainNav.pdtsGrp:hover {
    margin-top: 0 !important;
}

html:not(.isMobile) .mainNav.pdtsGrp:hover:after {
    opacity:0 !important;
}


/*.contSection:after {
        opacity: 0.4;
    background-image: url(../img/grid-dark.png);
    position: absolute;
    z-index: 1;
    top: 0;
    left: calc(-40px + var(--ex));
    width: calc(100vw + 40px);
    height: 100%;
    content: "";
    display: block;
}*/

.pad-center{
    /*margin: 0 var(--cenmargin);*/
        padding: 0 calc(var(--cenmargin) + var(--ex));
}

.mainPdtsGrp{
    position: absolute;
    /*left: 50%;*/
    top: 0;
    /*transform: translateX(-50%);*/
    /*padding: -1rem 1rem calc(((var(--h) - 4.5rem)/2) + 1rem) !important;*/
    /*flex-basis: 80% !important;*/
}
.mainNav.pdtsGrp{

        /*width: 80%;*/
    /*flex-basis: 80% !important;*/
    /*background-color: rgb(0 0 0 / 95%);
    backdrop-filter: blur(6px);
    border-radius: 0 0 1rem 1rem;
    padding: 1rem 2rem !important;*/
    height: 100% !important;
    color: #FFF;        
    font-size: 0.9rem;
    font-weight: 300;
    transition-duration: 0.3s;
}

/*.scrolled .mainNav.pdtsGrp {
    margin-top: calc(var(--h) * -1);
}
*/

.columnSetter .btn-arrow{
    margin: 0rem auto 0.5rem;
}

.columnSetter .label{
    font-size: 0.8rem;
    color: #fff;
    text-align: center;
}

.loading .pdtsGrp .btn{
    opacity:0;
}
.loading #topLogo{
    width:0;
    opacity:0;
    padding:9px 0px !important;
}

.loading .menu-trigger{
    margin-left: -55px;
}


.loading .menu-trigger .menu-trigger-1{
    -moz-transform: translate3d(0, 7px, 0);
    -ms-transform: translate3d(0, 7px, 0);
    -webkit-transform: translate3d(0, 7px, 0);
    transform: translate3d(0, 7px, 0);
}

.loading .menu-trigger .menu-trigger-3{
    -moz-transform: translate3d(0, -7px, 0);
    -ms-transform: translate3d(0, -7px, 0);
    -webkit-transform: translate3d(0, -7px, 0);
    transform: translate3d(0, -7px, 0);
}


/*.ms-2, .ms-3, .ms-4, .ms-5{
    display:none !important;

}*/


.pdtsGrp .btn:nth-child(5){
    transition-delay: 0.3s;
}
.pdtsGrp .btn:nth-child(4){
    transition-delay: 0.4s;
}
.pdtsGrp .btn:nth-child(3){
    transition-delay: 0.6s;
}
.pdtsGrp .btn:nth-child(2){
    transition-delay: 0.9s;
}
.pdtsGrp .btn:nth-child(1){
    transition-delay: 1.2s;
}



html[data-sec="1"] div[data-tar="main-sec-key"],
html[data-sec="1"] li[data-tar="main-sec-key"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="2"] div[data-tar="main-sec-mission"],
html[data-sec="2"] li[data-tar="main-sec-mission"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;    
}
html[data-sec="3"] div[data-tar="main-sec-footprint"],
html[data-sec="3"] li[data-tar="main-sec-footprint"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="4"] div[data-tar="main-sec-products"],
html[data-sec="4"] li[data-tar="main-sec-products"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="5"] div[data-tar="main-sec-digital"],
html[data-sec="5"] li[data-tar="main-sec-digital"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="6"] div[data-tar="main-sec-clients"],
html[data-sec="6"] li[data-tar="main-sec-clients"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="7"] div[data-tar="main-sec-company"],
html[data-sec="7"] li[data-tar="main-sec-company"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}





html[data-sec="4"][data-sub-sec="1"] div[data-tar="products-chd-2-1"],
html[data-sec="4"][data-sub-sec="1"]  li[data-tar="products-chd-2-1"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="4"][data-sub-sec="2"] div[data-tar="products-chd-2-2"],
html[data-sec="4"][data-sub-sec="2"]  li[data-tar="products-chd-2-2"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="4"][data-sub-sec="3"] div[data-tar="products-chd-2-3"],
html[data-sec="4"][data-sub-sec="3"]  li[data-tar="products-chd-2-3"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="4"][data-sub-sec="4"] div[data-tar="products-chd-2-4"],
html[data-sec="4"][data-sub-sec="4"]  li[data-tar="products-chd-2-4"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}
html[data-sec="4"][data-sub-sec="5"] div[data-tar="products-chd-2-5"],
html[data-sec="4"][data-sub-sec="5"]  li[data-tar="products-chd-2-5"]{
    color: var(--ratioblue) !important;
    font-weight: 600 !important;
    pointer-events: none;
}











.pdtsGrp .btn{
    transition: opacity 1s ease-in;
    /*transition-timing-function: ease-in;*/
    /*opacity:0;*/
    
    cursor:pointer;
    /*width: 20%;*/
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.pdtsGrp > .btn > div:first-child{
    white-space: nowrap;
    overflow: hidden;
    height: 1rem;
}

/*.cover, */
/*.cover img,  */
/*.cover .bgimggrp{
    background-color: #000;
    width: 100%;
    display: block;
    height: 100vh;
    padding: 0;
    opacity: 0.5;
}*/

.cover img{
    /*height: 100%;*/
    width: auto !important;
}





.bgimggrp.blur{

}

.bgimggrp.cover{
    height: 100% !important;
     width: 100%;
       object-fit: cover;
}

/*.bgimggrp.cover video{
    height: 100% !important;
}*/
.bgimggrp video{
        height: 100%;
    width: 100%;
    object-fit: cover;
}


/*.coverBg .bgimggrp,
.fixed-bcoverg .bgimggrp{
    width: 100% !important;
    display: block;
    height: 100%;
    padding: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    opacity: 0.6;
}*/
/*.cover .grp{
    position: absolute !important;
    transform: translateY(-50%);
    top: 60%;
    padding: 4rem 0;
    font-size: 200%;
    color: #fff;
    z-index: 1;
}*/

.title {
        font-size: 150%;
    font-weight: 600;
    /*margin-bottom: 2rem;*/
    line-height: 170%;

        font-family: 'Rift Soft';
    color:var(--mainClrStrong)
}

.largeTitle .title{
    margin-bottom: 2rem;
    font-size: 220%;
    line-height: 90% !important;
    color:var(--mainClrStrong) !important;
    font-weight: 600;
    font-family: Rift Soft;
    font-kerning: none;
    letter-spacing: 1px;
    text-shadow: 0px 1px 4px #11383a;

}
.largeTitle .body{
    /*text-shadow: 0px 1px 4px #11383a;*/
    color:var(--mainClrStrong) !important;
    font-weight: 100;
 }   
/*.cover .grp .head, .main-sec-mission .title{
    font-size: 200%;
    color:var(--mainClrStrong)
}*/

/*.p20{
    padding: 0 20vw;
}*/


.cover .imggrp{
    background-color: #000;
        overflow: hidden;
}
/*.cover img{
    opacity: 0.7;
}*/

/*.cover .grp div {
    line-height: 130%;
}*/

/*.cover .grp > div:last-child{
    display: inline-block
} */
.cover .grp > div:last-child > .btn {
    padding-bottom: 1.3rem;
    background-color: #fff;
    border-radius: 3rem;
    padding: 1rem 2rem;
    font-weight: 600;
    color: #000;
    text-transform: UPPERCASE;
    font-size: 80%;
}

.contSection .grp .body{
        /*margin-top: 5%;*/
    /*max-width: 100% !important;*/
    line-height: 125%;
    /*margin-top: 2rem;*/
    color: var(--mainClr);
}

/*.contSection > .grp > div:last-child{
  margin-bottom:var(--gridSize);
} */

/*.contSection  .title,
.contSection  .body,
.contSection  .btn
{
    margin-left:calc(var(--gridSize)/4);
}
*/
.fixed-bg {
    background-image: var(--bg);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

    /*transform: scale(0.2) rotate3d(calc(var(--mY)/-100), calc(var(--mX)/100), 0, calc(var(--deg) * var(--max) ) );
    --max: 280deg;*/


/*.player-1{
    --pl:1;
}
.player-2{
    --pl:2;
}
.player-3{
    --pl:3;
}*/


.main-sec-key .btn{
        opacity:0;
}
.mainNav .pdtsGrp{

}
.main-sec-products{

    --xover:calc( var(--mainScr) - var(--c2ypos));
    /*background-image: url(../img/tile-2.png);*/
    background-color: #000;
    --scrpercent: calc( ((var(--xover) / (var(--pw) - var(--ww)) )*100) )
}

.main-sec-key .bgimggrp{
        background-color: #000;
/*        animation: glowBreathe 3s infinite;
    -webkit-animation: glowBreathe 3s infinite;*/
}



.bg-11.player-1{
        filter: brightness(1.3);
}

.player-1{
/*.floatFx.layers > div:nth-child(1){*/
    --pl:1;
    /*mix-blend-mode: screen;*/
}
.player-1-2{
    --pl:1.2;
}
.player-1-3{
    --pl:1.3;
}
.player-2{
    --pl:2;
}
.player-3{
    --pl:3;
}
.player-4{
    --pl:4;
}
.player-5{
    --pl:5;
}


.player-6{
    --pl:6;
}
.player-7{
    --pl:7;
}
.player-8{
    --pl:8;
}
.player-9{
    --pl:9;
}
.player-10{
    --pl:10;
}

.player-11{
    --pl:11;
}
.player-12{
    --pl:12;
}
.player-13{
    --pl:13;
}
.player-14{
    --pl:14;
}
.player-15{
    --pl:15;
}

.player-16{
    --pl:16;
}
.player-17{
    --pl:17;
}
.player-18{
    --pl:18;
}
.player-19{
    --pl:19;
}
.player-20{
    --pl:20;
}



.floatFx > div{
        transition-duration: 0.8s;
/*    z-index: 4;
    transform: translateZ(0);*/
    z-index: calc(1000 - var(--pl));
    transform: translateZ(calc((1 - var(--pl)) * var(--pers))) scale(var(--pl));
}

.bg-10{
    --bg: url(../img/bg-10.png);
}
/*.bg-11{
    --bg: url(../img/bg-11.png);
}
.bg-12 {
    --bg: url(../img/bg-12.png);
}
.bg-13 {
    --bg: url(../img/bg-13.png);
}*/


/*.bg-1 {
    --bg: url(../img/bg-1-1.jpeg);
}*/

/*.bg-2 {
    --bg: url(../img/bg-2.jpeg);*/
    /*background-image: url(../img/bg-2.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;*/
/*}*/
/*.bg-3 {*/
    /*--bg: url(../img/bg-32.jpeg);*/
    /*background-image: url(../img/bg-3.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;*/
/*}*/
.bg-4 {
    --bg: url(../img/bg-4.jpeg);
    /*background-image: url(../img/bg-4.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;*/
}


/*.footprint-chd-2{
    mix-blend-mode: color-dodge;
    overflow: scroll;
}
*/


.footprint-chd-2-1{
    mix-blend-mode: color-dodge;
    margin-top: -30vh;
    font-size: 30vw;
    font-family: 'Rift Soft';
    font-weight: 600;
    line-height: 25vw;
    padding: 0 7rem;
}
/*.footprint-chd-2-2 > div{
    background-color: #000;
    width: 50%;
    display: block;
    margin-left: 50%;
    height: 100vh;
}*/

.main-sec-footprint .bgimggrp{
    --rate:0.7;
    opacity: calc( 
        1 - ((var(--mainScr) + var(--wh) - var(--bgout) ) / (var(--wh) * var(--rate)) )
    );
    transition-duration:unset !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0px !important;
}


.main-sec-products .products-chd-1{
    --rate:0.85;
    opacity:calc( 
        1 - ((var(--mainScr) - (var(--bgout) ) ) / (var(--wh) * var(--rate)) )
    );
    /*opacity: calc( 
        1 - ((var(--mainScr) + var(--wh) - var(--bgout) ) / (var(--wh) * var(--rate)) )
    );*/
    transition-duration:unset !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0px !important;
}

.main-sec-products .products-chd-1:before{
    content: "";
    display: block;
    width: 102vw;
    height: 102vh;
    background-color: #000000c9;
    position: absolute;
    top: 0;
    left: 0px;
    opacity: 0.5;
}

.main-sec-products .products-chd-1 .grp{
    --rate: 1;
    --offset: calc(var(--wh) * 2);
    --o: calc( 1 - ((var(--mainScr) - (var(--bgout) + var(--offset)) ) / ((var(--wh) + var(--offset)) * var(--rate)) ) );
    --p: calc(var(--o)/-2);

    transform: scale(calc(0 - var(--p)));
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;

}







.coverBg{

    /*background: var(--bg) no-repeat fixed center center #000000;*/

/*min-height:100%;*/
    /*background-image: var(--bg);*/

    /*background-image: url(../img/bg-1.jpeg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;*/



    /*position: relative;*/
    /*background-image: var(--bg);*/
    /*background: var(--bg);
    background-repeat: no-repeat;
    background-attachment: fixed;*/

/*    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;*/

    /*background-position: center;*/
    /*background-color: #000;    */

}





div[data-chaffle='en']{
    overflow: hidden;
    white-space: nowrap;
}

.carousel{
    /*margin-bottom: var(--gridSize);*/
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    z-index: 2;
    margin-bottom: var(--gridSize);
    padding: 0 calc(var(--attrPad) * 2);
    /*padding-left: calc(var(--gridSize));*/
    /*padding: 0 calc(var(--gridSize) - 1rem);*/
    border-radius: 0.5rem;
}


.started .carousel > div{
    transform: scale(0);
}

.carousel > div{
        background-color: #111;

    /*width: calc( (var(--w)) /4);*/
    /*height: calc(var(--col4)/3*2);*/
    /*height: calc((var(--iw) - var(--pad))/3*2);*/
    position: relative;
    /*opacity: 0.3;*/
    transition-duration: 0.5s;
    /*overflow: hidden;*/
    border-radius: 0.5rem;
    /*filter: brightness(0);*/
    
    /*transform: scale(0);*/

}



.started .carousel > div{
    /*filter: brightness(1);*/
    /*transition-delay: calc(var(--nchild) * 0.1s);*/
    animation: flashIn 0.3s ease-out calc(var(--nchild) * 0.1s) 1 forwards;
}



.carousel > div:nth-child(1){--nchild:1}
.carousel > div:nth-child(2){--nchild:2}
.carousel > div:nth-child(3){--nchild:3}
.carousel > div:nth-child(4){--nchild:4}
.carousel > div:nth-child(5){--nchild:5}
.carousel > div:nth-child(6){--nchild:1}
.carousel > div:nth-child(7){--nchild:2}
.carousel > div:nth-child(8){--nchild:3}
.carousel > div:nth-child(9){--nchild:4}
.carousel > div:nth-child(10){--nchild:5}
.carousel > div:nth-child(11){--nchild:1}
.carousel > div:nth-child(12){--nchild:2}
.carousel > div:nth-child(13){--nchild:3}
.carousel > div:nth-child(14){--nchild:4}
.carousel > div:nth-child(15){--nchild:5}
.carousel > div:nth-child(16){--nchild:1}
.carousel > div:nth-child(17){--nchild:2}
.carousel > div:nth-child(18){--nchild:3}
.carousel > div:nth-child(19){--nchild:4}
.carousel > div:nth-child(20){--nchild:5}
.carousel > div:nth-child(21){--nchild:1}
.carousel > div:nth-child(22){--nchild:2}
.carousel > div:nth-child(23){--nchild:3}
.carousel > div:nth-child(24){--nchild:4}


/*.carousel > div:nth-child(1){--nchild:1}
.carousel > div:nth-child(2){--nchild:2}
.carousel > div:nth-child(3){--nchild:3}
.carousel > div:nth-child(4){--nchild:4}
.carousel > div:nth-child(5){--nchild:5}
.carousel > div:nth-child(6){--nchild:6}
.carousel > div:nth-child(7){--nchild:7}
.carousel > div:nth-child(8){--nchild:8}
.carousel > div:nth-child(9){--nchild:9}
.carousel > div:nth-child(10){--nchild:10}
.carousel > div:nth-child(11){--nchild:11}
.carousel > div:nth-child(12){--nchild:12}
.carousel > div:nth-child(13){--nchild:12}
.carousel > div:nth-child(14){--nchild:11}
.carousel > div:nth-child(15){--nchild:10}
.carousel > div:nth-child(16){--nchild:9}
.carousel > div:nth-child(17){--nchild:8}
.carousel > div:nth-child(18){--nchild:7}
.carousel > div:nth-child(19){--nchild:6}
.carousel > div:nth-child(20){--nchild:5}
.carousel > div:nth-child(21){--nchild:4}
.carousel > div:nth-child(22){--nchild:3}
.carousel > div:nth-child(23){--nchild:2}
.carousel > div:nth-child(24){--nchild:1}*/

/*
.carousel > div:nth-child(13){--nchild:13}
.carousel > div:nth-child(14){--nchild:14}
.carousel > div:nth-child(15){--nchild:15}
.carousel > div:nth-child(16){--nchild:16}
.carousel > div:nth-child(17){--nchild:17}
.carousel > div:nth-child(18){--nchild:18}
.carousel > div:nth-child(19){--nchild:19}
.carousel > div:nth-child(20){--nchild:20}
.carousel > div:nth-child(21){--nchild:21}
.carousel > div:nth-child(22){--nchild:22}
.carousel > div:nth-child(23){--nchild:23}
.carousel > div:nth-child(24){--nchild:24}*/


.carousel > div:nth-child(25){--nchild:25}
.carousel > div:nth-child(26){--nchild:26}
.carousel > div:nth-child(27){--nchild:27}
.carousel > div:nth-child(28){--nchild:28}
.carousel > div:nth-child(29){--nchild:29}
.carousel > div:nth-child(30){--nchild:30}

@keyframes flashIn{
    0% {
        filter: brightness(0);
        transform: scale(0);
    } 
    40% {    
        filter: brightness(5);
        transform: scale(1.2);
    }
    100% {    
        filter: brightness(1);
        transform: scale(1);
    }
}





.rotXfx{
    --rate: 1;
    --percent: calc(( ((var(--mainScr) + var(--wh) - var(--bgout) ) / (var(--wh) * var(--rate)) ) ) / 0.0162);
    --angleRange: 60;
    transform-origin: center;
    /*transform: rotatex(calc((((var(--percent) / 100) * var(--angleRange)) - (var(--angleRange) / 2)) * 1deg));*/
    /*--attrPad: calc(3rem - (var(--percent) * 0.02rem)) !important;*/
}


.rotXfx > div{
    transition-duration: 0s !important;
    margin: calc( var(--pad) / 2) !important;
    margin-bottom: calc(( var(--pad) / 2 ) + 2rem) !important;
}



.expandWidth{
    width: calc(var(--percent) * 1px);
}







html:not(.isMobile)  .carousel > div:hover{
    opacity: 1;
    }
/*
.carousel > div:first-child{
    margin-left: 2rem;
}
.carousel > div:last-child{
    margin-right: 2rem;
}*/

html:not(.isMobile)  .c-img img:hover{
    transform: scale(1.1);
    opacity: 1;
}
.carousel .body{
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    /*line-height: 100%;*/
    margin-left: 0;
    align-items: center;
    position: absolute;
    /*transform: translateY(-100%);*/
    /*background-color: #0000001c;*/
    padding: 0.5rem 0;
    /*backdrop-filter: blur(4px);*/

}


.carousel img{
    opacity: 0;
    min-height: 4rem;
    border-radius: 0.5rem;
    width: 100%;
    height: 100%;
    transition-duration: 0.3s;
    z-index: 5;
    position: relative;
    box-shadow: 0rem 1rem 1rem -1rem rgb(0 0 0);    
}
.carousel .loc{
    border-radius: 0.2rem;
    padding: 0.4rem 0.8rem;
    color: #fff;
    background-color: #333;
    font-size: 40%;
    height: 1.5rem;
    display: flex;
    align-items: center;
}

.carousel .name{
    line-height: 110%;
    font-size: 50%;
    color: #fff;
   font-weight: 300;
       /*padding: 0 0.5rem;*/
}


.carousel .titlegrp{
    color: #fff;
    align-items: center;
    justify-content: center;
    display: flex;
    font-weight: 600;
    text-align: right;
}
    /*.cover .grp .body {
        font-size: 200%;
    }*/



/*.bgcover1{
    background-image: url(../img/bg-1.jpg);
    background-size: cover;
}*/

.patents{
text-align: center;
    font-size: 80%;
    padding: 2rem;
    border-radius: 0.5rem;
    font-style: italic;
    /*margin-bottom: var(--gridSize);*/
    /* background-color: #000; */
    backdrop-filter: blur(56px);
    z-index: 1;
    position: relative;
}

/*.pdtList .grp:first-child {
    margin-left: 15vw;
}*/
.pdtList .grp:last-child {
    /*margin-right: 15vw;*/
    margin-right: 0;
}




.pdtList > .grp {
       
    --h: 100vh;
    --imgw: 50vw;
    --pad: 10vh; 
    /* box-shadow: 0rem 0rem 2.5rem 0rem rgb(0 0 0); */
    /* width: 100vw; */
    height: var(--h);
    display: inline-flex;
    margin: calc((100vh - var(--h))/2) calc( var(--pad) * 2) calc((100vh - var(--h))/2) 0;
    padding: 0;
    flex-wrap: nowrap;
    background-color: #000;
    position: relative;
    z-index: 2;
    
}


/*.pdtList > .grp > div{
    margin-right: 5rem;
}*/

.pdtList > .grp > div:last-child {
    padding:0;
    min-width: 40vw;
}
.pdtList > .grp > .chdContGrp {
    align-items: center;
    display: inline-flex;
    flex-flow: nowrap;

    margin-left: -30vh;
    --d: calc(var(--xover) - var(--xpos));
    --percent: calc( (var(--d) / (var(--ww) * 1.5 )) * 1);
    --xf: calc((((-25 + (var(--percent) * 50) - 50))) * 1%);
    /*inverse
    --xf: calc((50 + (((var(--percent) * 50) - 25))) * 1%);  */

    /*calc(((((var(--percent) * 50) - 25))) * 1%)*/
    /*opacity: var(--percent);*/
}
.pdtList .pic{
    /*box-shadow: 0rem 1.5rem 1.5rem -1rem rgb(0 0 0);*/
    /*border-radius: 0.5rem;*/
    overflow: hidden;
    height: 100%;
    z-index: 0;
    width: var(--imgw);
    min-width: var(--imgw);

    /*margin-left: calc(var(--percent) * 20vh);*/
}

.pdtList .pic img{
    /*opacity:0;*/
    height: 100%;
    transform: translateX(var(--xf));
    /*inverse
    transform: translateX(calc(0% - var(--xf) - 100%))*/
    /* object-fit: cover; */
    width: auto;
    /*transform: translateX(-50%);*/
    margin-left: 50%;
}


img{
    display: block;
}

.pdtList .header{
    --rate: 0.65;        
    --h: calc(100vh - var(--pad) - var(--pad));
    --fs: calc(var(--h) * 0.39);
    font-size: var(--fs);
    --lh: calc(var(--fs) * var(--rate));
    font-weight: 600;
    color: #fff;
    line-height: var(--lh);
    display: flex;
    align-content: center;
    align-items: center;
    font-family: 'Rift Soft';
    --offset: calc(var(--lh) / 13);
    margin-top: calc(var(--offset) * -1);
    padding-left: var(--pad);
    z-index: 1;
    text-shadow: 0 0 2rem black;
}

.pdtList .body{
    height: calc(100vh - var(--headerHeight) - var(--headerHeight) );
    width: 80vh;
    margin: calc(var(--mar) + var(--headerHeight)) var(--mar) !important;
    --mar: 2rem;
    width: calc((var(--imgw) * 0.9) - var(--mar) - var(--mar) );
    min-width: calc((var(--imgw) * 0.9) - var(--mar) - var(--mar) );
    /*font-size: 130%;*/
    font-weight: 100;
    top: 0;
    background-color: #0000009c;
    z-index: 2;
    padding: var(--mar);
    /*border-radius: 0.5rem;*/
    color: #fff;
    display: flex;
    align-items: center;
    align-content: center;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
}
.pdtList .body > div:first-child{
    overflow: scroll;
}

.pdtList .body.specs header {
    font-weight: 600;
    color: var(--ratioblue);
    font-family: 'Rift Soft';
    font-size: 130%;
    margin-bottom: 1rem;
}

.pdtList .body.specs {
    margin-left: 0 !important;
    padding: 0 2rem 0 0;
    --w : 30vw;
    width: var(--w) !important;
    max-width: 30rem;
    min-width: var(--w) !important;
    /*min-width: unset !important;*/
    font-size: 70%;
    height: 80vh;
}

.pdtList .body.specs > div{
        width: 100%;
    /*height: 50vh;*/
    display: flex;
    flex-direction: column;
    background-color: #121212;
    margin: 1px;
    padding: 2rem;
}

.pdtList .btn{
    align-self: baseline;
    margin: 2rem 0 0rem !important;
}
/*.pdtList .grp {
    --h:70vh;
    text-align: center;
    width: 80vw;
    height: var(--h);
    display: block;
    margin: calc((100vh - var(--h))/2) 2vw;
    background-color: #111;
    padding: 0;
    border-radius: 1rem;
    overflow: auto;
    box-shadow: 0rem 1.5rem 1.5rem -1rem rgb(0 0 0);
}
*/



.main-sec-products > .grp{
    /*min-height: unset !important;
    overflow: hidden;*/
    display: block !important;
    transform: translate3d(calc(1px - (var(--xover)*1px) + 100vw), 0px, 0px);
    /*margin-top: -100vh;*/
        /*margin-top: -100vh;*/
    width: auto !important;

}

.main-sec-products > .spacer{
    --offset: 100vh;
    width:100vw;
    display:block;
    height:calc(var(--h) + var(--offset));
    position: relative;
    z-index: 0;
    transform: translate3d(0px, 0px, 0px);

}
.bg-tile-1.spacer{
    background-image: url(../img/tile-1.png);
}

.progressBar{
    padding-bottom: var(--pad);
    --h: 0.5rem;
    --pad: 1rem;
    --w: 60vw;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: calc(100vh - var(--h) - var(--pad));
        z-index: 10;
    /*opacity: calc((var(--xover) - (var(--ww)/2) ) / (var(--ww)/2));*/
    
}

.progressBar .mask{
    border: 2px solid #111;
    width: var(--w);
    height: var(--h);
    margin: auto;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #111;
    opacity: calc((var(--xover) - (var(--ww)/2) ) / (var(--ww)/2));

}
.progressBar .grp{
    width: var(--w);
    font-size: 0.7rem;
    position: absolute;
    bottom: calc(var(--pad) + 1rem);
    margin-left: calc((100vw - var(--w))/2);
    display: inline-flex;
    /*height: 4rem;*/    
    color: #ccc;

}
.progressBar .grp .subbtn{
    padding: 0.5rem;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    height: 100%;
    /*padding: 0 1rem;*/
    align-items: center;
    min-width: 7rem;
    text-align: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    max-width: calc(((var(--w) - 4rem) / 5));
    min-width: calc(((var(--w) - 4rem) / 5));
    margin-right: 1rem;
    align-self: center;
    height: 3rem;
}




.progressBar .grp .subbtn.active{
    color: var(--ratioblue) !important;
    background: #000;
}


.progressBar .grp .subbtn .label{
    color: #ccc;
    font-weight: 100;
}

html:not(.isMobile) .progressBar .grp .subbtn:hover{
    color: var(--ratioblue) !important;
    background: rgb(36 36 36 / 80%);
}

/*.progressBar .grp .subbtn:first-child{
    padding-left:0;
}
.progressBar .grp .subbtn:last-child{
    padding-right:0;
}
*/

.progressBar .bar{
    background-color: var(--ratioblue);
    height: 100%;
    width: calc(100% / 5);
    margin-left: calc( var(--scrpercent) * 1%);
    border-radius: 1rem;
    transform: translatex(-100%);
}

.pdtList {
    flex-wrap: nowrap;
    margin-bottom: 0 !important;
    display: inline-flex;
    z-index: 2;
    position: relative;
    transform: translate3d(0px, 0px, 0px);
}

.grad-top:before {
    content: "";
    width: 100vw;
    position: absolute;
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
    height: 50vh;
    display: block;
    left: 0px;
    top: -2px;
    z-index: 3;
}

.grad-btm:after {
    content: "";
    width: 100vw;
    position: absolute;
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,1) 90%, rgba(0,0,0,1) 100%);
    height: 50vh;
    display: block;
    left: 0px;
    bottom: 0;
    z-index: 3;
}

.columnSetter{
        --w: calc( 100vw - var(--gridSize) - var(--ex) - var(--gridSize) - var(--ex));
    --cols: var(--attrCols);
    --pad: var(--attrPad);
    /*--iw: calc( ( var(--w) + var(--pad)) / var(--cols));*/
        --iw: calc( ( var(--w) + 0rem ) / var(--cols));
}


.columnSetter > div{
    --w: calc( (100% - var(--pads) ) / var(--cols));
    margin: 0 var(--pad) var(--pad) 0;
    width: var(--w);
    --pads: calc((var(--cols) - 0 ) * var(--pad));
    /*overflow: hidden;*/
    /*margin: 0 var(--pad) var(--pad) 0;
    width: calc(var(--iw) - var(--pad));
    overflow: hidden;*/
}

.columnSetter.hori{
width: 100vw;
    overflow: scroll !important;
    flex-wrap: nowrap !important;
    display: -webkit-inline-box !important;
    /*transform: rotateY(30deg);*/
    /*transform-origin: top;*/
}



.columnSetter[data-cols='1'] {
    --attrCols: 1;
}
.columnSetter[data-cols='2'] {
    --attrCols: 2;
}
.columnSetter[data-cols='3'] {
    --attrCols: 3;
}
.columnSetter[data-cols='4'] {
    --attrCols: 4;
}
.columnSetter[data-cols='5'] {
    --attrCols: 5;
}
.columnSetter[data-cols='6'] {
    --attrCols: 6;
}
.columnSetter[data-cols='7'] {
    --attrCols: 7;
}
.columnSetter[data-cols='8'] {
    --attrCols: 8;
}
.columnSetter[data-cols='9'] {
    --attrCols: 9;
}
.columnSetter[data-cols='10'] {
    --attrCols: 10;
}
.columnSetter[data-cols='11'] {
    --attrCols: 11;
}
.columnSetter[data-cols='12'] {
    --attrCols: 12;
}
.columnSetter[data-cols='13'] {
    --attrCols: 13;
}

.columnSetter[data-cols='14'] {
    --attrCols: 14;
}


.columnSetter[data-pad='0'] {
    --attrPad: 0rem;
}
.columnSetter[data-pad='1'] {
    --attrPad: 1rem;
}
.columnSetter[data-pad='2'] {
    --attrPad: 2rem;
}
.columnSetter[data-pad='3'] {
    --attrPad: 3rem;
}




[class^="ti-"], [class*=" ti-"]{
    font-family: 'themify';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    align-self: center;
    justify-self: center;
    text-align: center;
}

.ti-arrow-right:before {
    content: "\e628";
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: flex;
    flex-direction: column;
    padding-left: 1rem;
    position: relative;
    margin-bottom: 0.2rem;
    }
li:before{
content: "\e649";
    font-family: 'themify';
    color: var(--ratioblue);
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size: 0.7rem;
    margin: 0.3rem 0.5rem auto 0;
    position: absolute;
    left: 0;
}


.btn-arrow{
    cursor: pointer;
    --s: 3rem;
    font-size: 60%;
    border-radius: var(--s);
    height: var(--s);
    width: var(--s);
    background-color: var(--ratioblue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem auto;
    box-shadow: 0rem 0.6rem 1rem -0.3rem rgb(0 0 0 / 65%);
    transition-duration: 0.3s;
}
html:not(.isMobile)  .btn-arrow:hover{
    box-shadow: 0rem 0.5rem 0.9rem -0.3rem rgb(0 0 0 / 60%);
    transform: scale(0.97);
    transform-origin: center;
}

.main-sec-digital{
    width: 100%;  
    background-color: #fff;  
        /*background-image: url(../img/bg-1.jpg);*/
}

.main-sec-key .title{
    margin-bottom: 2rem;
    text-shadow: 0rem 0rem 0.2rem #020209, 0rem 0rem 0.6rem #020209;
}
.main-sec-key .body{
    text-shadow: 0rem 0.2rem 0.15rem #020209;
}
.isMobile .main-sec-key > .grp.fs.p20 > .floatFx{
    padding-bottom: var(--mobileBtmPad);
}
    

.bg-1 .bgimggrp{
    background-color: transparent;
    opacity: 1;
    /*backdrop-filter: brightness(0.6);*/
    animation: glowBreathe 3s infinite;
    -webkit-animation: glowBreathe 3s infinite;
}

.breath{
    animation: glowBreathe 3s infinite;
    -webkit-animation: glowBreathe 3s infinite;
}
    
@keyframes glowBreathe{
    0% {
        /*backdrop-filter: brightness(0.8);*/
        filter: brightness(0.8) contrast(1);
        background-color: #1a1a1a36;
        /*background-color: #0e1c2a;*/
    }
    50% {
        filter: brightness(1.4) contrast(1);
        /*backdrop-filter: brightness(1.3);*/
        background-color: #1a1a1a36;
        /*background-color: red;*/
    }    
    100% {    
        filter: brightness(0.8) contrast(1);
        /*backdrop-filter: brightness(0.8);*/
        background-color: #1a1a1a36;
        /*background-color: #0e1c2a;*/
    }
}


.digital-logoGrp{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.digital-logoGrp .logo{
    
    padding: 3rem 0 1rem;
    justify-content: center;
    align-items: center;
    padding-bottom: 2rem;
    width: 100%;
    display: flex;
    width: max(80%, min(var(--w), 100%));
    --w: calc((var(--rate) * 0.9) * -1%);
    --pn: calc(2rem + (var(--rate) * -1rem) );
    padding-bottom: max(2rem, min(var(--pn), 3rem));
}
.digital-logoGrp .icons-grp{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    --rot: calc((var(--rate) * 0.9) * 1deg);
    transform: rotate(max(0deg, min(var(--rot), 90deg)));
    transform-origin: center;
    --ml: calc((var(--rate) * 0.5) * 1%);
    margin-left: max(0%, min(var( --ml), 50%));
    --nw: calc(var(--w) - 10vw);
    --rate: calc(((var(--xover) / var(--wh)) * 100));
    --h: calc(var(--rate) * 0.4vh);
    --mt: calc(var(--rate) * 1%);
    height: max(min(65vh, (var(--h)*2)), (var(--min) * 70vh));
    width: max(min(700px, var(--w)), 60vh);
    padding: 0;
    margin: 0;
    /*background-color: red;*/
    }
.digital-logoGrp img{
    cursor: pointer;
    width: 100%;    
    max-width: 30vh;
    border-radius: 0 !important;

}

.digital-logoGrp .icons-grp img{
    min-width: 25% !important;
}


.main-sec-digital .icons-grp[data-focus="0"] img{
    transition-duration: unset !important;
}





.bg-2 .bgimggrp{
    background-color: #45b5c3;
    opacity: 0.7;
}

.bg-4 .bgimggrp{
    background-color: #111;
}


.main-sec-digital img{
    width: 100%;    
    transition-duration: 0.3s;
        transform: rotate(max(-90deg, min((var(--rot) * -1), 0deg)));

}

.digital-chd-1{
    /*--min: 0.4;*/
    --mw: calc(var(--min) * 100vw);
    --rate: calc(((var(--xover) / var(--wh)) * 100));
    --w: calc((100 - (var(--rate) * ( 1 - var(--min )))) * 1%);
    --pad: calc((20 - ( (var(--rate) / 100) * 20 )) * 1vw);
    width: max(min(100vw, var( --w)), var(--mw));
    /*padding: 0 max(min(20vw, var( --pad)), 2.5vw) 0 max(min(20vw, var(--pad)), 5vw);*/
    --fs: calc((100 - var(--rate)) * 10%);
    font-size: max(min(100%, var( --fs)), 80%) !important;
    height: 100vh;
    /*background-color: yellow;*/
}

.digital-chd-2{
        width: calc(( 1 - var(--min)) * 100vw);
    margin-left: calc(var(--min) * 100vw);
    line-height: 125%;
    /*font-size: 130%;*/
    font-weight: 100;
    color: #111;
    /*padding: 0 5vw;*/

   z-index: 1;
    /*height:200vh;*/

    /*background-image: url(../img/digital/bg4.png);
    background-size: 100%;*/
}



    .bgtile3{
        background-image: url(../img/digital/bg3.png);
        background-size: 104%;
        background-position-y: bottom;
        background-repeat: no-repeat;
    }

    .bgtile4{
        padding-bottom: 25vh;
        background-image: url(../img/digital/bg4.png);
        background-size: 104%;
    }

    .digital-chd-2 .chd{
        margin-bottom: 25vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 4vw;

    }

    .digital-chd-2 .chd:last-child{
        margin-bottom: 0 !important;
    }




.digital-chd-2 .grp {
    padding: 2rem;
        /*color: #000;*/
    /*background-color: #ffffff6b;*/
 
    /*color: #fff;*/
    /*background-color: #35cfff;*/

    background-color: #020c0d;
    color: var(--mainClr);
}

.digital-chd-2 .chd .header {
    font-weight: 600;
    font-size: 130%;
    font-family: 'Rift Soft';
    color: #fff;
    /*color: var(--ratioblue);*/
    margin-bottom: 2rem;
}


.digital-bg1{
    height: 100vh !important;
    width: 50% !important;
    margin-top: 100vh;
    margin-left: 50%;
    background-image: url(../img/digital/bg2.png);
    background-size: 100%;

}
/*.main-sec-digital .body{
    line-height: 130%;
    font-size: 60% !important;
}*/

.main-sec-mission > .grp > .grp{
    justify-content: center;
    display: flex;
    flex-direction: column;
        /*background-image: url("../img/tile-1.png");*/

}
.main-sec-mission > .grp > .bgimggrp{
    z-index: -1;
    --rate: ((((var(--mainScr) + var(--wh)) - var(--bgout) ) / var(--wh) )/var(--spacer)) * 100;
    --negr: calc(( -1 + ( var(--rate)) / 10) * 2px);
    filter: blur(var(--negr));
}


/*.thumbSection .title{
    margin-bottom:0rem;
}*/
.thumbSection .logogrp{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.thumbSection .logogrp > div{
    border-radius: 0.5rem;
/*    margin: 0 var(--pad) var(--pad) 0;
    width: calc(var(--iw) - var(--pad));
    overflow: hidden;*/
        background-color: #111;
    min-height: 2rem;
}

.thumbSection img{
        opacity: 0;
    transition-duration: 0.3s;
    width:100%;     
}

.pb-0{
    padding-bottom: 0;
}


.chdContGrp {
    /*background-color: #111;*/
    /*backdrop-filter: blur(10px) brightness(2.5);*/
        padding: 2rem 0rem;
}



#bottomBar{
    padding-top: 4rem;
        background-color: #0e0e0e;
    overflow: hidden;
    /*background-color: #222;*/
    /*padding: 2rem 0;*/
    font-size: 50%;
        z-index: 2;
    position: relative;
}

#linksGrp{
    display: inline-flex;
    width: 100%;
    /*width: calc(100% - var(--cenmargin) - var(--cenmargin));*/
    justify-content: space-between;
    display:none;
}


.metaGrp{
    list-style: none;
    color: #ccc;
    font-size: 1rem;
    font-weight: 100;
}

#footer > div:only-child {
    width: 100% !important;
    text-align: left !important;
}

#linksGrp > ul:only-child {
    width: 100% !important;
    flex-basis: 100% !important;
}

.metaGrp li {
    margin: 1rem 0rem;
        cursor: pointer;
}
html:not(.isMobile)  #linksGrp li:hover{
    color:#fff;
}


.rowCarousel{
    scroll-snap-type: x mandatory;
    width: 100%;
    overflow-x: auto;
    height: calc(70vh + 2rem)
}

.rowCarousel>div{
    scroll-snap-align: center;
}


/*
ul:before{
    content:attr(aria-label);
    font-weight: 600;
    margin-bottom: 3rem;
}

*/

#linksGrp > ul{
    width: 25%;
    flex-basis: 25%;
    padding: 0 1rem 0 0;
}


#linksGrp > ul > li > div{
    font-color:#ccc;
    font-size:80%;
}

.main-sec-feed:after {
    content: unset;
}


.main-sec-feed{
    /*background-color: yellow;*/
    /*overflow:auto;*/
    overflow-x:auto;
}
.main-sec-feed > .grp{
    display: -webkit-inline-box !important;
    width: auto;
    /*background-color: red;*/
    max-height: 400px;
    min-height: 100px !important;
    overflow: hidden;
    margin-bottom: var(--gridSize);

}
.main-sec-feed{
    padding-bottom: 0px;
}

.main-sec-digital .pic,
.main-sec-digital .pic video,
.main-sec-digital .pic img{
    width:100%;
    /*border-radius:2rem;*/
    /*overflow:hidden;*/
}


.insta{

    max-width: 550px;
        height: 600px;
    overflow: hidden;
    border-radius: 5px;
    max-height: 620px;
    transform: scale(0.7);
    --p: calc((362px * -0.15 ) + 1.5rem);
    /*margin: calc(var(--gridSize) * -1) var(--p);*/
    margin: 0 var(--p) calc(var(--gridSize) * -2);
    transform-origin: top;

}

.pdtVideo{
    max-width: 550px;
    height: 600px;
    overflow: hidden;
    max-height: 620px;
    width: unset !important;
    min-width: 300px;
    padding-right: var(--mar);
    --mar: 2rem;
    margin: calc(var(--mar) + var(--headerHeight)) var(--mar) calc(var(--mar) + var(--headerHeight)) 0;
    display: flex;
    align-items: center;
}



.isembed.pdtVideo{
    min-width: calc((var(--imgw) * 0.9) - var(--mar) - var(--mar) );
}

.pdtVideo video{
    height: 100%;
    width: 100%;
}


#footer{
    font-size: 0.8rem;
    color: #fff;
    font-weight: 100;
    width: 100%;
    text-align: center;
    /*padding-top: 2rem;
    padding-bottom: 2rem;*/
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}

#footer > div{
    /*width:33.33%;*/
    text-align: center;
}

#footer > div:first-child{
    text-align: left;
}
#footer > div:last-child{
    text-align: right;
}

#footer .logo-sm{
    height: 2rem;
}
#footer .logoGrp{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /*align-items: center;*/
}
#linksGrp > ul > li > div {
color: #888;
    font-size: 80%;
    font-weight: 300;
    margin: 0.3rem 0 1.5rem;

}

html:not(.isMobile) .contSection .btn:not(.btn-arrow):not(.subbtn):hover{
    background-color: #2dd0dd !important;
    box-shadow: 0rem 0rem 0rem -0.3rem rgb(17 56 58) !important;
    transform: scale(0.97);
    transform-origin: center;
        /*color: #fff !important;*/
}
.contSection .btn:not(.btn-arrow):not(.subbtn) {
    /*background-color: var(--ratioblue);*/
    color: #000;
    font-size: 1.2rem;
     background-color: #fff; 
    /* padding: 1rem 4.5rem 1rem 1.5rem; */
    border-radius: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: inline-flex;
    font-weight: 600;
    position: relative;
    text-align: left;
    text-transform: uppercase;
    /* border: 1px solid #666; */
    width: calc( 3 * var(--gridSize));
    box-shadow: 0rem 1.2rem 1.2rem -0.8rem rgb(0 0 0);
    transition-duration: 0.3s;
    align-content: center;
    line-height: 160%;
    padding: 1rem 1.4rem 0.8rem;
    justify-content: space-between;

}

.contSection .btn:not(.btn-arrow) [class^="ti-"],
.contSection .btn:not(.btn-arrow) [class*=" ti-"]{

 

    /*    margin-left: auto;
    position: absolute;
    right: 0;
    padding: 1rem 1.2rem 1rem 1rem;*/
    font-size: 120%;

}


.main-sec-key .imgBg{
    opacity:0;
}


.loading .main-sec-key > .bgimggrp > .floatFx{
    transition-duration: 3s;
    transform: rotate3d(1, 0, 0, 5deg) !important;
}




.scramTxtMission2{
        font-weight: 300;
    color: var(--ratioblue);
}

.main-sec-company{
        align-items: center;
    justify-content: center;
    display: flex;
    position: relative;
    overflow: hidden;
    background-color:#060606;
}
.bgimggrp{
    overflow: visible;
    /*transform: translateX(-50%);
    margin-left: 50%;
    overflow: hidden;
    width: 100%;
    position: absolute;*/
    /*z-index: -1;*/
    /*top: 0;*/
    /*opacity: 0.7;*/
    /*transform: translateY(-25%);*/
    background-color: #000;
    width: 100%;
    display: block;
    padding: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    height: 100vh;
    perspective: var(--pers);
}

#mainNavGrp{
height: 100%;
    background-color: #040404;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -200;
    padding: 6rem 2rem 0 2rem;
    overflow: scroll;
    width: var(--menuWidth);
}

#mainNavGrp ul {
    margin-bottom: 2rem;
}
.isMobile #mainNavGrp ul li {
    font-weight: 300 !important;
}

#mainNavGrp ul li {
    font-weight: 300;
    margin: calc(var(--p)/2);
    font-weight: 100;
        overflow: hidden;
}
#mainNavGrp li{
    cursor: pointer;
}

html:not(.isMobile) #mainNavGrp li:hover{
    color: #fff;
    /*font-weight: 300;*/
}

html:not(.isMobile) .navBigBtnGrp li:hover .pic img{
    transform: scale(1.2);
}


.navBigBtnGrp .pic{
    background-color: #000;
    height: 75%;
}

.navBigBtnGrp .pic img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    max-width: 100%;

    /*width: 100%;
    margin: auto;
    object-fit: cover;
    transform: translatey(-25%);
    margin-left: 50%;*/
    transition-duration: 0.3s;
}
.navBigBtnGrp .header{
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    margin-top: auto;
    background-color: #000;
    height: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    /*font-weight: 300;*/
    font-size: 90%;
}

.navBigBtnGrp{
    --w: 50%;
    --p: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.navBtnGrp.col2{
    --w: 50%;
    --p: 1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.navBtnGrp.col2 li{
    width: calc(var(--w) - var(--p));
    margin: 0 1rem 1rem 0;
}

.navBigBtnGrp li {

    --h: 10rem;
    
    height: var(--h);
    padding: 0;
    width: calc(var(--w) - var(--p));
    
    margin: 0 1rem 1rem 0;
    background-color: #222;
}

.navBigBtnGrp li:before{
    content:unset;
}

.bgimggrp .img{
    height: 100%;
    width: 100%;
    transform-origin: center;
}

.bgimggrp .img .imgBg{
    position: absolute;
    /*transform: scale(1.1);*/
    height: 100%;
    width: 100% !important;
    /*transform-origin: center;
    background-image: var(--bg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;*/
}

.bgimggrp .img .imgBg img{
    opacity: 0;
    transition-duration:0.3s;
    object-fit: cover;
    height: 100%;
    width: 100% !important;
}





.floatFx.layers{
    --max: 1deg;
    transform: scale(1) rotate3d(calc(var(--mY)/-100), calc(var(--mX)/100), 0, calc(var(--deg) * var(--max) ));
        /*transform: scale(1.03) rotate3d(calc(var(--mY)/-100), calc(var(--mX)/100), 0, calc(var(--deg) * var(--max) ));*/
}
.floatFx{
    transform-style: preserve-3d;
    transition-timing-function: ease-in-out;
}

.main-sec-digital{
    --xover: calc(var(--mainScr) - var(--c2ypos) + var(--wh));
    background-color: #060606;
        flex-direction: column;
    display: flex;
    justify-content: center;
        --min: 0.3;
}
.main-sec-digital{


}
.main-sec-digital > .spacer {
    --h : 200vh;
    --offset: 100vh;
    width: 100vw;
    display: block;
    height: calc(var(--h) + var(--offset));
    position: relative;
    z-index: 0;
    transform: translate3d(0px, 0px, 0px);
}



.main-sec-clients{
    padding: 4rem 0;
    background-color: #060606;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.main-sec-clients .title{
    color:#fff;
}


.main-sec-clients:after{
    content:unset;
}
.main-sec-clients .btn{
    margin-bottom:var(--gridSize) !important
}

.icons-grp[data-focus="1"] > .chd1{
        min-width: 35% !important;
        width: 150%;
}
.icons-grp[data-focus="2"] > .chd2{
        min-width: 35% !important;
        width: 150%;
}
.icons-grp[data-focus="3"] > .chd3{
        min-width: 35% !important;
        width: 150%;
}
.icons-grp[data-focus="4"] > .chd4{
        min-width: 35% !important;
        width: 150%;
}


.main-sec-digital .bgimggrp{
        opacity: 0.6;
    filter: brightness(0.8) contrast(1.5);
    margin-top: -100vh;
}


.main-sec-key > .grp {
    --max: 10deg;
    /*padding-bottom: 9%;*/
    align-items: center;
    text-align: center;
}

.main-sec-footprint{
    /*margin-top: -20vh;    */
    display:flex;
    /*flex-direction: column;*/
    perspective: var(--pers);
    display: block;
    position: relative;
    scroll-snap-align: unset !important;
    background-color: #000;
}

.main-sec-footprint .grp > .grp{
    margin-top: 50vh;
    margin-bottom: 2rem;
}

.mb2grid{
    margin-bottom:var(--gridSize);
}

.contSection > .grp{
    perspective: calc(var(--pers)*1);
        display: flex;
    --mh: 80vh;
    z-index: 2;
    position: relative;
    min-height: calc(var(--mh) - var(--gridSize) - var(--gridSize));
    justify-content: center;
    
    flex-direction: column;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

}



/*company*/
.company-key .scramTxtKey1{
    font-family: 'proxima';
    font-size: 460%;
    font-weight:600;
    text-shadow: 0rem 0.4rem 0.8rem black;

}
.company-key .bgimggrp .img .imgBg{
    filter: contrast(0.8) saturate(0.5) brightness(0.6)
}