:root{

    --ch-main: #0B979C;
    --cr-main: 11,151,156;

    --ch-main-darker: #112121;
    --cr-main-darker: 17,33,33;

    --ch-main-lighter: #CAE1E9;
    --cr-main-lighter: 202,225,233;

    --ch-pos: #00425A;
    --cr-pos: 0,66,98;

    --ch-neg: #EB6440;
    --cr-neg: 235,100,64;

    /*--ch-offwhite: #F5EEDC;*/
    /*--cr-offwhite: 245,238,220;*/

    --ch-offwhite: #CAE1E9;
    --cr-offwhite: 202,225,233;

    --ch-offblack: #000000;
    --cr-offblack: 0,0,0;

    --mblur: 0px;
    --mshadow: .7;
    --bs: 1vw;

}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:middle;
    background:transparent;
    color: var(--ch-offblack);
    box-sizing: border-box;
    transition: .3s;
}

input{
    font-family: "Poppins",sans-serif;
}

html{
    scroll-behavior: smooth;
    scrollbar-width: none;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: inherit;
}

body{
    margin: 0;
    /*font-family: "Rubik", sans-serif;*/
    /*font-family: "Aretino", serif;*/
    font-family: "Poppins", sans-serif;
    background: var(--ch-offwhite);
    color: var(--ch-offblack);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

body::-webkit-scrollbar{
    display: none;
}

nav{
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-size: 2vw;
    /*font-family: "Aretino", serif;*/
    font-weight: bold;
    padding: 2vw;
    backdrop-filter: blur(var(--mblur));
    -webkit-backdrop-filter: blur(var(--mblur));
}

#menu{
    visibility: hidden;
}

.nav{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /*color: var(--ch-offblack);*/
    color: var(--ch-offwhite);
    /*font-weight: bold;*/
    margin: .5vw;
    padding: .5vw 1vw;
    opacity: .9;
    background: rgba(255,255,255,0);
    text-shadow: rgba(0, 0, 0, var(--mshadow)) 0 0 .5vw;
    /*text-shadow: 0 13.36px 8.896px #c4b59d,0 -2px 1px #fff;*/
}

.nav:hover{
    transform: scale(1.1);
    opacity: 1;
}

.ncta{
    background: var(--ch-main);
    /*background: var(--ch-neg);*/
    border-radius: .7vw;
    color: white;
    opacity: .9;
    box-shadow: rgba(0,0,0, .1) 0 -.16vw 0 inset;
    text-shadow: unset;
    /*box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;*/
}

#nlogo{
    cursor:pointer;
    position: absolute;
    left: 2vw;
    height: 60%;
    opacity: 1;
}



#all{
    visibility: visible;
}



#hero{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: var(--ch-main-lighter);
    /*filter: brightness(1.6);*/
    /*filter: contrast(1) brightness(1.6);*/
}

#heropic, #herovid{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    transform: scaleY(-1);
    /*mix-blend-mode: multiply;*/
    /*mix-blend-mode: hard-light;*/
}

#heroover{
    display: flex;
    /*display: none;*/
    visibility: visible;
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#herot{
    z-index: -2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ch-offwhite);
}

#herotxt{
    /*color: var(--ch-offwhite);*/
    color: #FF9500;
    font-size: 3.4vw;
    font-weight: bold;
}

#herotxtmini{
    color: var(--ch-offwhite);
    opacity: .7;
    font-size: 1.6vw;
}

#voverlay{
    width: 100vw;
    height: 100vh;
    background: var(--ch-pos);
    background: linear-gradient(52.29075769859156deg, rgba(11, 151, 156,1) 2.6361846923828125%,rgba(10, 150, 155,1) 2.6361846923828125%,rgba(0, 66, 90,1) 62.002029418945305%);
    /*background: var(--ch-main);*/
    opacity: .9;
    filter: saturate(0%) brightness(70%) contrast(150%);
}

#tanim{
    color: white;
    position: absolute;
    right: 0;
    bottom: 4vw;
    width: 49vw;
    height: 25vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 3.4vw;
    text-transform: uppercase;
    opacity: 0;
    /*background: deeppink;*/
}

#qr{
    width: 50vw;
    height: 50vh;
    object-fit: contain;
    object-position: center center;
}

.taf{
    color: white;
}

.tad{
    color: white;
    opacity: .9;

}

#heromock{
    position: absolute;
    left: 2vw;
    bottom: 0;
    width:50vw;
    height: 50vh;
    object-position: left bottom;
    object-fit: contain;
}

#herobar{
    width: 100vw;
    height: 4vw;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba( var(--cr-main), .9);
    /*background: rgba( var(--cr-pos), .9);*/
}



#intro{
    z-index: 30;
    height: 50vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    padding: 10vw;
    position: relative;
    overflow: visible;
    background: transparent;
}

.iltext{
    z-index: 3;
    padding-right: 40vw;
    text-align: center;
    /*border: solid 1px yellow;*/
}

.irtext{
    z-index: 3;
    padding-left: 40vw;
    text-align: center;
    /*border: solid 1px yellow;*/
}



.rtitle{
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: 40vw;
    transform: translateX(-50%);
    /*border: solid 1px forestgreen;*/
}

.rtg{
    font-size: 3vw;
    text-align: right;
    font-weight: bold;
    margin-right: 1vw;

    background: linear-gradient(90deg, rgba(var(--cr-main),1) 16%, rgba(var(--cr-pos),1) 84%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    fill-color: transparent;
}

.rts{
    font-size: 3vw;
    text-align: right;
    font-weight: bold;

    color: var(--ch-pos);
}

.rti{
    transform: translateX(50%);
}

.trev:before{
    left: unset;
    right: 0;
}

.features{
    display: flex;
    align-items: center;
    justify-content: center;
    /*background: deeppink;*/
    position: absolute;
    right: 0;
    width: 50vw;
    height: 50vh;
    flex-wrap: wrap;
    margin: 5vw;
    z-index: 3000;
    /*border: solid 1px deeppink;*/
}


.frev{
    right: unset;
    left: 0;
}

.feature{
    z-index: 50;
    position: relative;
    margin: -3vw 3vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 12vw;
    height: 12vw;
    padding: 1vw;
    /*transform: translateY(-3vw) scale(.7);*/
    border-radius: 3vw;
    /*border: solid 1px deeppink;*/
    background: rgba(var(--cr-offwhite),1);
    transition: .7s;
    overflow: hidden;
    /*border: solid 1px #EB6440;*/
}

.feature:hover{
    z-index: 100;
    background: rgba(var(--cr-offwhite),0);
    transform: scale(1.1);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    transition: .7s;

}

.feature:hover .isvg{
    stroke-width: .07vw;
    width: 3vw;
    height: 3vw;
    margin-top: -3vw;
    margin-bottom: 0;
    /*stroke: var(--ch-pos);*/
    opacity: 1;
    transition: .7s;
}

.feature:after{
    color: var(--ch-main);
    content: attr(data-title);
    font-weight: bold;
    font-size: 1.2vw;
    transition: .7s;
    background: var(--ch-offwhite);
    text-align: center;
    width: 100%;

}

.feature:before{
    z-index: 0;
    position: absolute;
    content: attr(data-desc);
    font-weight: normal;
    font-size: .7vw;
    text-align: center;
    opacity: 1;
    padding: 1vw;
    bottom: 0;
    transition: .7s;
}

.isvg{
    top: 1vw;
    width: 7vw;
    height: 7vw;
    stroke: var(--ch-main);
    fill: none;
    stroke-width: .02vw;
    opacity: .8;
    transition: .7s;
}

.idesc{
    position: absolute;
    font-weight: normal;
    font-size: .7vw;
    text-align: center;
    opacity: 0;
    padding: 1vw;
    bottom: 0;
    transition: .7s;
}

.feature:hover .idesc{
    opacity: .7;
    transition: .7s;
}

.dback{
    background: rgba(var(--cr-main-lighter),.3);
}

.dinv{
    background: var(--ch-main);
    color: white;
}

#introf{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2vw;
    padding: 10vw;
}



#wcapp{
    /*display: flex;*/
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    /*background: forestgreen;*/
    /*background: var(--ch-main);*/
    background: var(--ch-offwhite);
    color: white;
    font-size: 5vw;
    font-weight: bold;
    overflow: hidden;
    /*overflow-y: scroll;*/
}

.app{
    /*max-width: calc(90vh/2);*/
    /*max-height: 90vh;*/
    position: fixed;
    background: var(--ch-main-lighter);

    width: 100vw;
    height: 100vh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow-y: scroll;
    padding: 10vw 0;
    margin-top: 10vw;
}

.appinput{
    margin: 1vw;
    padding: 3vw 7vw;
    width: 85vw;
    height: 7vw;
    font-size: 4vw;
    background: rgba(255,255,255,.9);
    border-radius: 1.2vw;
    text-align: center;
}

.sbinput{
    margin: 1vw;
    padding: 3vw;
    width: 85vw;
    height: 7vw;
    font-size: 4vw;
    background: rgba(255,255,255,.9);
    border-radius: 1.2vw;
    text-align: left;
}

.loca{
    margin: 2vw;
}

.sbdate{
    background: var(--ch-main);
    width: 85vw;
    margin-left: 2.5vw;
    height: 10vw;
    font-size: 4vw;
    color: var(--ch-pos);
    text-align: center;
    background: transparent;
    border: solid .5vw var(--ch-main);
}

.sbilabel{
    margin-top: 1vw;
    margin-bottom: -1vw;
    padding-left: 3vw;
    width: 85vw;
    font-size: 3vw;
    color: var(--ch-pos);
    opacity: .7;
    text-align: left;
}


.appbutton{
    cursor: pointer;
    margin: 2vw;
    width: 90vw;
    height: 10vw;
    /*background: rgba(0,0,0,.5);*/
    background: rgba(var(--cr-main),.9);
    /*background: rgba(var(--cr-pos),.9);*/
    border-radius: 1.2vw;
    color: rgba(255,255,255,.7);
    /*color: rgba(0,0,0,.7);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 4vw;
    padding-bottom: var(--bs);
    box-shadow: rgba(0,0,0, .2) 0 calc(var(--bs) * -1) 0 inset;
}

.sbbutton{
    cursor: pointer;
    margin: 2vw;
    width: 85vw;
    height: 10vw;
    /*background: rgba(0,0,0,.5);*/
    background: var(--ch-pos);
    /*background: rgba(var(--cr-pos),.9);*/
    border-radius: 1.2vw;
    color: rgba(255,255,255,.7);
    /*color: rgba(0,0,0,.7);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 4vw;
    padding-bottom: var(--bs);
    box-shadow: rgba(0,0,0, .2) 0 calc(var(--bs) * -1) 0 inset;
}

.sbbutton:hover{
    transform: scale(1.1);
}

.sbbb{
    position: absolute;
    bottom: 2vw;
}

.sbbb2{
    position: absolute;
    bottom: 14vw;
}

.appbutton:hover{
    transform: scale(1.05);
}

#logapp{
    width: 85vw;
}




.asvp{
    position: fixed;
    top: 0;
    left: 100vw;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: rgba(var(--cr-main-lighter),.3);
    transition: unset;
    /*filter: ;*/
}

.appseq{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    flex-direction: row;
    height: 100vh;
}

.appsecx{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    padding: calc(10vw + 50px) 10vw 10vw;
    /*overflow-y: scroll;*/
    /*border: solid 1px #EB6440;*/
}

#as-buyer{

}

#rfqs{
    position: fixed;
    top: calc(50px + 20vw);
    left: 0;
    height: calc(100vh - 50px - 20vw - 20vw);
    width: 100vw;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    border-top: solid 1px rgba(var(--cr-pos),.3);
    border-bottom: solid 1px rgba(var(--cr-pos),.3);
    background: rgba(var(--cr-pos),.1);
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 3vw;
}

#rfqt{
    position: absolute;
    left: 3vw;
    top: calc(50px + 18vw - 5vw);
    color: var(--ch-pos);
    font-weight: bold;
}

.svgb{
    cursor: pointer;
    padding: 0;
    width: 5vw;
    height: 5vw;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#brefresh{
    position: absolute;
    top: calc(50px + 20vw - 5vw);
    right: 3vw;
}

.rfqi{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin: 1vw;
    background: rgba(var(--cr-main),.1);
    border-radius: .5vw;
}

.rnum{
    width: 12vw;
    height: 6vw;
    background: var(--ch-main);
    border-radius: .5vw;
    padding: .5vw;
    color: black;
    font-weight: bold;
    font-size: 2.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rstatus{
    font-size: 2.5vw;
    font-weight: bold;
    color: var(--ch-pos);
    padding: 1vw;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30vw;
}

.rdates{
    position: relative;
    font-size: 1.6vw;
    font-weight: normal;
    color: black;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 10vw;
    height: 6vw;
    margin-left: 5vw;
    margin-right: 0;
}

.rdfat{
    width: 21vw;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    margin-left: 0;
    margin-right: 0;
    opacity: .7;
}

.rdinv{
    justify-content: flex-end;
    margin-left: 0;
    margin-right: 5vw;
}

.rdates:before{
    position: absolute;
    top: .5vw;
    content: attr(data-req);
}

.rdates:after{
    position: absolute;
    bottom: .5vw;
    content: attr(data-exp);
}


.appititle{
    font-weight: bold;
    font-size: 4vw;
    white-space: nowrap;
    color: var(--ch-pos);
    opacity: 1;
    margin-bottom: 5vw;
    text-align: center;
}

.appititlein{
    font-weight: bold;
    font-size: 4vw;
    white-space: nowrap;
    /*color: var(--ch-pos);*/
    color: var(--ch-main);
    opacity: 1;
    margin-top: 1vw;
    text-align: center;
}

.appititlein:before{
    content: 'FOR';
    margin-right: 1vw;
}

.appblurb{
    font-weight: normal;
    font-size: 4vw;
    color: var(--ch-pos);
    opacity: .7;
    text-align: center;
}



.bulighter{
    height: 20vw;
    font-size: 6vw;
    /*color: rgba(0,0,0,.7);*/
    color: rgba(255,255,255,.9);
    /*background: rgba(var(--cr-offwhite),.9);*/
    background: rgba(var(--cr-pos),.9);
}

.apptbutton{
    cursor: pointer;
    margin: 2vw;
    width: 70vw;
    /*height: 20vw;*/
    border-radius: 1.2vw;
    /*color: rgba(0,0,0,.3);*/
    color: rgba(var(--cr-pos),.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    font-size: 4vw;
}

.apptbutton:hover{
    cursor: pointer;
    color: rgba(var(--cr-pos),.7);
    transform: scale(1.1);
}

.apptext{
    display: flex;
    flex-direction: column;
    color: var(--ch-main-darker);
    font-weight: normal;
    font-size: 4vw;
    width: 100vw;
    padding: 10vw;
    text-align: center;
    opacity: .7;
}

#applogin{
    /*background: var(--ch-pos);*/
    /*background: var(--ch-main);*/
    background: var(--ch-offwhite);
}

#applogged{
    background: var(--ch-offwhite);
    display: none;
    opacity: 0;
}

#logout{
    cursor: pointer;
    position: absolute;
    right: 3vw;
    top: calc(50px + 3vw);
    color: var(--ch-pos);
    font-size: 3vw;
    font-weight: normal;
    opacity: .5;
}

#web{
    cursor: pointer;
    position: absolute;
    left: 3vw;
    top: calc(50px + 3vw);
    color: var(--ch-pos);
    font-size: 3vw;
    font-weight: normal;
    opacity: .5;
}

#userpad{
    cursor: pointer;
    opacity: 0;
    position: absolute;
    height: 50px;
    right: 3vw;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

#upadn{
    color: #ffffff;
    text-align: right;
    font-size: 2vw;
    font-weight: normal;
}

#upadc{
    color: #ffffff;
    text-align: right;
    font-size: 2vw;
    font-weight: bold;
}

#upadk{
    font-size: 2vw;
    color: #ffffff;
    text-align: right;
    font-weight: normal;
    opacity: .3;
}

#loginbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 0;
    margin-bottom: 10vw;
}

#appbuyer{
    visibility: hidden;
    background: var(--ch-offwhite);
}

#appbuyer_upload{
    visibility: hidden;
    background: var(--ch-offwhite);
}

#bupload{
    background: var(--ch-main);
}

#applogo{
    z-index: 99999999999999999;
    position: absolute;
    top: 0;
    width: 100vw;
    height: 34vw;
    padding: 4vw;
    min-height: 50px;
    /*background: var(--ch-main);*/
    background: linear-gradient(16deg, rgba(11, 151, 156,.99) 2.5%,rgba(10, 150, 155,.99) 2.5%,rgba(0, 66, 90,.99) 60%);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#more{
    position: absolute;
    top: 30vw;
}

.svgl{
    width: 5vw;
    height: 5vw;
    fill: none;
    stroke-width: 2px;
    stroke: var(--ch-main);
    object-fit: contain;
    object-position: center center;
    opacity: .5;
}

#svglu{
    position: absolute;
    left: 3vw;
    bottom: 35vw;
}

#svglp{
    position: absolute;
    left: 3vw;
    bottom: 26vw;
}

#alogo{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: .7;
    /*background: var(--ch-main);*/
}

.sep{
    height: 30vh;
}

#clients{
    width: 100vw;
    background: var(--ch-main);
    /*overflow-x: scroll;*/
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}

#clientslide{
    filter: grayscale(1) contrast(300%) brightness(80%);
    mix-blend-mode: multiply;
    display: flex;
    padding: 3vw;
    margin-left: 7vw;
    flex-direction: row;
}

.clientbox{
    opacity: .7;
    height: 6vw;
    width: 12vw;
    object-position: center center;
    object-fit: contain;
    margin-left: 5vw;
}

#v3box{
    top: 0;
    visibility: hidden;
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90vw;
    max-height: 60vh;
    /*border: solid 3px var(--cr-main);*/
    border-radius: 1vw;
    overflow-y: scroll;
    overflow-x: hidden;
}

#v3box:empty{
    visibility: visible;
    height: 20vw;
    background: transparent;
    border: dashed 3px var(--ch-main);
    opacity: .3;
}

#v3bb{
    display: none;
    z-index: 900000000000;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ch-offwhite);
}

#v3big{
    z-index: 900;
    position: fixed;
    width: 100vw;
    height: 100vw;
    top: 0;
    left: 0;
    background: var(--ch-offwhite);
    display: flex;
    /*display: none;*/
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#v3bigpic{
    z-index: 900;
    position: absolute;
    width: 100vw;
    height: 100vw;
    background: var(--ch-offwhite);
    /*display: none;*/
    object-fit: contain;
    padding: 2vw;
}

.zoombu{
    cursor: pointer;
    opacity: .7;
    position: absolute;
    left: 0;
    top: 0;
    width: 25vw;
    height: 100%;
}

.v3card{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 90vw;
    height: 22vw;
    background: rgba(var(--cr-main),.25);
    border-radius: 2vw;
    padding: 1vw;
    margin-top: 1vw;
}

#v3close{
    cursor: pointer;
    position: absolute;
    bottom: 3vw;
    width: 100vw;
    height: 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cb3{
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-width: .5vw;
    stroke: var(--ch-main);
    height: 50%;
    object-position: center center;
    object-fit: contain;
    opacity: .7;
    position: absolute;
}

.cb3:hover{
    opacity: 1;
    transform: scale(1.1);
}

.ifa{
    width: 20vw;
    height: 20vw;
}

.v3{
    cursor: pointer;
    position: absolute;
    left: 1vw;
    width: 20vw;
    height: 20vw;
    border-radius: 1vw;
    /*background: #F5EEDC;*/
    /*border: solid .5vw var(--ch-pos);*/
    overflow: hidden;
    /*background: #EB6440;*/

}

.v3pic{
    width: 100%;
    height: 100%;
    object-position: center center;
    object-fit: contain;
    transform: scale(.7);
}

/*.v3name{*/
/*    position: absolute;*/
/*    text-align: right;*/
/*    right: 2vw;*/
/*    bottom: .5vw;*/
/*    width: 60vw;*/
/*    color: var(--ch-pos);*/
/*    font-weight: normal;*/
/*    font-size: 4vw;*/
/*    max-lines: 1;*/
/*    overflow: hidden;*/
/*    white-space: nowrap;*/
/*    !*background: deeppink;*!*/
/*}*/

.v3name{
    pointer-events: none;
    z-index: -1;
    position: absolute;
    width: 100%;
    text-align: center;
    color: var(--ch-pos);
    font-weight: normal;
    font-size: 3vw;
    max-lines: 1;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 20vw;
}

.numco{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 15vw;
}

.v3qty{
    user-select: none;
    font-weight: bold;
    color: var(--ch-pos);
    font-size: 14vw;
    line-height: 1;
}

.mmbu{
    user-select: none;
    cursor: pointer;
    font-size: 15vw;
    line-height: 1;
    font-weight: bold;
    color: var(--ch-main);
    padding: 2vw;
    height: 14vw;
    width: 14vw;
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: solid 1px deeppink;*/
}

.mmbu:hover{
    transform: scale(1.1);
}

.numdel{
    position: absolute;
    right: 0;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    width: 14vw;
    height: 14vw;
    padding: 2vw;
    opacity: .7;
    /*border: solid 1px deeppink;*/
}

.numdel:hover{
    transform: scale(1.1);
    opacity: 1;
}

.numdelsvg{
    width: 7vw;
    height: 7vw;
    stroke-width: .3vw;
    stroke: var(--ch-neg);
    fill: none;
}

#buyeroptions{
    margin-top: 12vw;
    display: none;
    width: 90vw;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nsbtitle{
    font-weight: bold;
    font-size: 5vw;
    color: var(--ch-pos);
    opacity: 1;
}

.aititle{
    font-weight: bold;
    font-size: 5vw;
    color: var(--ch-main);
    opacity: .9;
}

.aitext{
    font-weight: normal;
    font-size: 3vw;
    color: var(--ch-pos);
    opacity: .7;
}

.aitoggler{
    margin-top: 5vw;
    width: 90vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.stoggler{
    margin-top: 1vw;
    width: 90vw;
    /*height: 70vh;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.aitoption{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    width: 20vw;
    height: 10vw;
    border-radius: 2vw;
    font-size: 4vw;
    color: var(--ch-pos);
    opacity: .3;
    border: solid .5vw var(--ch-pos);
}

.soption{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    width: 100%;
    margin-bottom: 1vw;
    height: 8vw;
    border-radius: 2vw;
    font-size: 4vw;
    color: var(--ch-pos);
    opacity: .7;
    border: solid .5vw var(--ch-pos);
}

.soption[data-sel="1"]{
    font-weight: bold;
    background: var(--ch-main);
    color: white;
    border: unset;
    opacity: 1;
}

.aitsel{
    font-weight: bold;
    background: var(--ch-main);
    color: white;
    border: unset;
    opacity: 1;
}

.ssel{
    font-weight: bold;
    background: var(--ch-main);
    color: white;
    border: unset;
    opacity: 1;
}

.aitoggle{
    cursor: pointer;
    margin-top: 5vw;
    width: 90vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

/*.aitlabel{*/
/*    font-weight: bold;*/
/*    font-size: 5vw;*/
/*    color: var(--ch-main);*/
/*    opacity: .9;*/
/*}*/

.aitlabel{
    margin-top: 1vw;
    margin-bottom: -1vw;
    padding-left: 3vw;
    width: 85vw;
    font-size: 3vw;
    color: var(--ch-pos);
    opacity: .7;
    text-align: left;
}

.qqt{
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    width: 100%;
    text-align: center;
}

.sbilabel_DEL{
    margin-top: 1vw;
    margin-bottom: -1vw;
    padding-left: 3vw;
    width: 85vw;
    font-size: 3vw;
    color: var(--ch-pos);
    opacity: .7;
    text-align: left;
}

.fixdatelabel{
    background: deeppink;
    width: 100%;
}


.aitbut{
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    width: 30vw;
    height: 10vw;
    border-radius: 2vw;
    font-size: 3vw;
    color: var(--ch-pos);
    opacity: .3;
    border: solid .5vw var(--ch-pos);
    padding: 0 3vw;
}

.aitbsel{
    font-weight: bold;
    background: var(--ch-main);
    color: white;
    border: unset;
    opacity: 1;
}

.ainotes{
    margin-top: 5vw;
    width: 90vw;
    display: flex;
    flex-direction: column;
    align-items: normal;
    justify-content: center;
}

#srfq{
    margin-top: 20vw;
}

/*.aintext {*/
/*    width: 90vw;*/
/*    border: solid .5vw var(--ch-main);*/
/*    border-radius: 2vw;*/
/*    font-weight: normal;*/
/*    font-size: 3vw;*/
/*    padding: 2vw;*/
/*    max-height: 30vh;*/
/*    overflow-y: scroll;*/
/*}*/

.aintext {
    width: 85vw;
    /*border: solid .5vw var(--ch-main);*/
    border-radius: 1.2vw;
    font-weight: normal;
    font-size: 4vw;
    padding: 1vw;
    max-height: 25vh;
    margin-top: 1vw;
    margin-left: 2.5vw;
    overflow-y: scroll;
    background: rgba(255,255,255,.9);
}

.sbinput_DEL{
    margin: 1vw;
    padding: 3vw;
    width: 85vw;
    height: 7vw;
    font-size: 4vw;
    background: rgba(255,255,255,.9);
    border-radius: 1.2vw;
    text-align: left;
}

#modal{
    z-index: 99999999999999999999999999;
    overflow: hidden;
    display: none;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 10vw;
    /*background: linear-gradient(16deg, rgba(11, 151, 156,1) 2.5%,rgba(10, 150, 155,1) 2.5%,rgba(0, 66, 90,1) 60%);*/
    background: linear-gradient(16deg, rgba(11, 151, 156,1) 2.5%,rgba(10, 150, 155,1) 2.5%,rgba(0, 66, 90,1) 60%);
    background: var(--ch-pos);
}

#mmtitle{
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 7vw;
    margin-bottom: 5vw;
}

#mmtxt{
    color: white;
    text-align: center;
    font-weight: normal;
    font-size: 5vw;
    opacity: .7;
}



#locpicker{
    display: none;
    width: 100vw;
    height: 100vh;
    background: var(--ch-offwhite);
    position: fixed;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 16vh 0 18vw;
}

#locs{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    background: rgba(var(--cr-pos),.1);
    border-top: solid 3px var(--ch-pos);
    border-bottom: solid 3px var(--ch-pos);
    /*background: deeppink;*/
}

.location{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 3vw;
    font-weight: bold;
    width: 85vw;
    margin-top: 1vw;
    margin-left: 7.5vw;
    height: 8vw;
    border-radius: 2vw;
    font-size: 4vw;
    color: var(--ch-pos);
    opacity: .7;
    border: solid .5vw var(--ch-pos);
    white-space: nowrap;
    overflow: hidden;
}

.location[data-sel="1"]{
    font-weight: bold;
    background: var(--ch-main);
    color: white;
    border: unset;
    opacity: 1;
}

.lhide{
    display: none;
}

.locationlabel{
    text-transform: uppercase;
}

.locationflag{
    height: 50%;
    object-fit: contain;
    object-position: left center;
    margin-right: 4vw;
    border-radius: 1vw;
}



.bbox{
    cursor: pointer;
    position: absolute;
    top: 16vw;
    left: 0;
    width: 100vw;
    height: 10vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /*background: deeppink;*/
}

.bbox:before{
    content: attr(data-label);
    position: absolute;
    text-align: right;
    right: 7.5vw;
    font-size: 6vw;
    font-weight: normal;
    opacity: 1;
    color: var(--ch-pos);
}

.bsv{
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-width: .2vw;
    stroke: var(--ch-pos);
    height: 12vw;
    width: 12vw;
    opacity: .3;
    position: absolute;
    left: 3px;
}




.bbloc:before{

}

#turn{
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 9999999999999999999999999999999;
    display: none;
    background: var(--ch-pos);
    color: #CAE1E9;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    text-align: center;
    opacity: 1;
    visibility: hidden;
}

.iturn{
    height: 12vw;
    width: 12vw;
    margin-bottom: 3vw;
    object-fit: contain;
    object-position: center center;
    opacity: .3;
    transform: rotate(90deg);
}

#TPT{
    display: none;
}

/*#sqr{*/
/*    display: none;*/
/*    width: 25vw;*/
/*    height: 25vw;*/
/*    bottom: 5vh;*/
/*}*/



@font-face {
    font-family: 'Aretino';
    src: url('./fonts/aretino/aretino_regular-webfont.eot');
    src: url('./fonts/aretino/aretino_regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/aretino/aretino_regular-webfont.woff2') format('woff2'),
    url('./fonts/aretino/aretino_regular-webfont.woff') format('woff'),
    url('./fonts/aretino/aretino_regular-webfont.svg#aretinoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'Aretino';
    src: url('./fonts/aretino/aretino_extrabold-webfont.eot');
    src: url('./fonts/aretino/aretino_extrabold-webfont.eot?#iefix') format('embedded-opentype'),
    url('./fonts/aretino/aretino_extrabold-webfont.woff2') format('woff2'),
    url('./fonts/aretino/aretino_extrabold-webfont.woff') format('woff'),
    url('./fonts/aretino/aretino_extrabold-webfont.svg#aretinoextrabold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    /*font-display: swap;*/
    font-family: 'Poppins';
    font-style: normal;
    font-weight: normal;
    src: url('./fonts/poppins/poppins-v20-latin-200.eot'); /* IE9 Compat Modes */
    src: url('./fonts/poppins/poppins-v20-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/poppins/poppins-v20-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/poppins/poppins-v20-latin-200.woff') format('woff'), /* Modern Browsers */
    url('./fonts/poppins/poppins-v20-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/poppins/poppins-v20-latin-200.svg#Poppins') format('svg'); /* Legacy iOS */
}

@font-face {
    /*font-display: swap;*/
    font-family: 'Poppins';
    font-style: normal;
    font-weight: bold;
    src: url('./fonts/poppins/poppins-v20-latin-600.eot'); /* IE9 Compat Modes */
    src: url('./fonts/poppins/poppins-v20-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('./fonts/poppins/poppins-v20-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('./fonts/poppins/poppins-v20-latin-600.woff') format('woff'), /* Modern Browsers */
    url('./fonts/poppins/poppins-v20-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('./fonts/poppins/poppins-v20-latin-600.svg#Poppins') format('svg'); /* Legacy iOS */
}


/*@font-face {*/
/*    font-family: 'Ghandi';*/
/*    src:url('./fonts/ghandi/GandhiSerif-Regular.ttf.woff') format('woff'),*/
/*    url('./fonts/ghandi/GandhiSerif-Regular.ttf.svg#GandhiSerif-Regular') format('svg'),*/
/*    url('./fonts/ghandi/GandhiSerif-Regular.ttf.eot'),*/
/*    url('./fonts/ghandi/GandhiSerif-Regular.ttf.eot?#iefix') format('embedded-opentype');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/


/*@font-face {*/
/*    font-family: 'Rubik';*/
/*    src: url('./fonts/rubik/rubik-v8-latin-300.woff2');*/
/*    src: url('./fonts/rubik/rubik-v8-latin-300.woff2') format('woff2'),*/
/*    url('./fonts/rubik/rubik-v8-latin-300.woff') format('woff'),*/
/*    url('./fonts/rubik/rubik-v8-latin-300.eot') format('embedded-opentype'),*/
/*    url('./fonts/rubik/rubik-v8-latin-300.svg') format('svg');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Rubik';*/
/*    src: url('./fonts/rubik/rubik-v8-latin-700.woff2');*/
/*    src: url('./fonts/rubik/rubik-v8-latin-700.woff2') format('woff2'),*/
/*    url('./fonts/rubik/rubik-v8-latin-700.woff') format('woff'),*/
/*    url('./fonts/rubik/rubik-v8-latin-700.eot') format('embedded-opentype'),*/
/*    url('./fonts/rubik/rubik-v8-latin-700.svg') format('svg');*/
/*    font-weight: bold;*/
/*    font-style: normal;*/
/*}*/

/*#sqr,#stx{*/
/*    display: flex;*/
/*}*/



/*#mqr {*/
/*    display: none;*/
/*}*/

/*#mtx{*/
/*    display: none;*/
/*}*/

@media (max-width: 700px), screen and (orientation: landscape) {
    #stx{
        display: flex;
    }

    #sqr{
        display: flex;
        opacity: 1;
        transform: rotate(0);
    }

    #mqr,#mtx{
        display:none;
    }
}

@media (min-width: 700px), screen and (orientation: landscape) {
    #sqr,#stx{
        display: none;
    }

    #mqr,#mtx{
        display:flex;
    }
}


@media (orientation: landscape) {

    #turn{
        display: flex;
    }


}

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

    /*#sqr,#stx{*/
    /*    display: none;*/
    /*}*/

    /*#mqr,#mtx{*/
    /*    display:flex;*/
    /*}*/

    #sqr{
        display: unset;
    }


    :root{



    }

    nav{

        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        font-size: 6vw;
        /*font-weight: bold;*/
        padding: 40vw 0 0;
    }

    .nav{
        pointer-events: none;
        opacity: 0;

        align-items: center;
        justify-content: center;
        margin: 3vw;
        padding: 2vw 3vw;

    }

    #nlogo{
        left: unset;
        top: 0;
        cursor:pointer;
        position: absolute;
        height: 20vw;
        width: 90vw;
    }


    .ncta{

        /*display: none;*/

        pointer-events: all;

        position: absolute;
        bottom: -30vh;

        border-radius: 1vw;
        opacity: 1;
        box-shadow: rgba(0,0,0, .1) 0 -.7vw 0 inset;
    }

    #heromock{
        left: 1vw;
        bottom: 2vw;
        width: 93vw;
        height: 50vh;
    }

    #herobar{
        height: 10vw;
    }

    #herot{
        transform: scale(2);
    }

}