/*ROOT RULES*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,200;9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root{
    --prmary-bg: #fff;
    --scndry-bg: #e9eef1;
    
    --prmary-txt: #000;
    --scndry-txt: #272b33;
    --tertry-txt: #758691;

    --mono-x-lgt: #efefef;
    --mono-lgt: #f3f6f8;
    --mono-mid: #b1c5d1;
    --mono-lgt-mid: #e4e9ee;
    
    --theme-acc: #259FED;
    --theme-lgt: #b4ecff;
    --theme-mid: #042048;
    --theme-drk: #021127;

    --sd-drk-out: 1.5rem 1.5rem 4rem rgba(0,0,0,.1), -1.5rem -1.5rem 4rem #ffffff;
    --sd-faint: 0 0 1rem 0 rgba(0,0,0,.02);
    --sd-drk: 0 1rem 4rem 0 rgba(0,0,0,.1);
    --cl-red: #E31C22;
    --cl-grn: #88BD32;
    --cl-ylw: #FDBE4B;
    --cl-org: #F76600;

    --title-font: 'Mulish', Arial, Helvetica, sans-serif;

    --fl-theme-acc: invert(53%) sepia(81%) saturate(1731%) hue-rotate(176deg) brightness(94%) contrast(97%);
    /* --fl-blu-lgt: invert(57%) sepia(62%) saturate(3250%) hue-rotate(177deg) brightness(97%) contrast(91%);
    --fl-blu-x-x-lgt: invert(96%) sepia(49%) saturate(1738%) hue-rotate(170deg) brightness(101%) contrast(102%);
    --fl-mono-mid: invert(71%) sepia(16%) saturate(298%) hue-rotate(161deg) brightness(91%) contrast(90%); */
}
.purple-tint{
    --theme-acc: #aa69ff;
    --theme-lgt: #E0C8FF;
    --theme-drk: #0f0227;
}


body.dark{
    --prmary-bg: #111720;
    --scndry-bg: #1a2230;

    --prmary-txt: #fff;
    --scndry-txt: #eff4f7;
    --tertry-txt: #9db6c3;

    --mono-x-lgt: #efefef;
    --mono-lgt: #161d28;
    --mono-lgt-mid: #1b2331;
    --mono-mid: #5d6c8c;
    
    --theme-drk: #000814;

    --sd-drk-out: 1.5rem 1.5rem 4rem rgba(0, 0, 0, 0.1), -1.5rem -1.5rem 4rem #141b1f;
    --sd-faint: 0 0 1rem 0 rgba(0, 0, 0, .15);

    --fl-blu-lgt: invert(57%) sepia(62%) saturate(3250%) hue-rotate(177deg) brightness(97%) contrast(91%);
    --fl-blu-x-x-lgt: invert(20%) sepia(13%) saturate(6171%) hue-rotate(162deg) brightness(93%) contrast(105%);
    --fl-mono-mid: invert(44%) sepia(11%) saturate(1191%) hue-rotate(183deg) brightness(91%) contrast(87%);
}

body.dark .purple-tint{
    --theme-drk: #070014;
}

html{
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}


*,
*::before,
*::after{
    transition: background-color .3s, border-color .3s;
}

html{
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-size: 11px;
    scroll-behavior: smooth;
}



@media (orientation: portrait) and (max-width: 1200px){
    html{
        font-size: 8px;
    }
}


body{
    margin: 0;
    background-image: linear-gradient(var(--prmary-bg) 0 10rem, var(--theme-drk) 10rem);
    background-color: var(--prmary-bg);
    width: 100vw;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--prmary-bg);
}
::-webkit-scrollbar-thumb {
    background: var(--theme-acc);
}


body.noscroll{
    height: 100vh;
    overflow: hidden;
}

/*GLOBAL NO CLASS*/
a,
button,
input[type="submit"]{
    cursor: pointer;
    text-decoration: none;
}
button,
input{
    background-color: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--prmary-txt);
}
h1, h2, h3, h4, h5, p{
    margin: 0;
}
p, a{
    font-size: .9rem;
    color: var(--scndry-txt);
    font-weight: 400;
}
a{
    color: inherit;
    font-weight: 500;
}
h1, h2, h3, h4, h5{
    font-family: var(--title-font);
    font-weight: 700;
}
h2{
    font-size: 2rem;
}
body{
    color: var(--prmary-txt);
    -ms-overflow-style: none;
    scrollbar-width: none;
}
select {
    -moz-appearance: none;
    -webkit-appearance: none;
}
select::-ms-expand {
    display: none;
}


/*GLOBAL CLASS*/
.column-flex,
.row-flex{
    display: flex;
    flex-direction: row;
}
.column-flex{
    flex-direction: column;
}
.pseudo{
    position: relative;
}
.pseudo::before,
.pseudo::after{
    content: "";
    display: block;
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.spread{
    width: 100%;
    justify-content: space-between;
    align-items: center;
    max-width: 1800px;
}
.spread.w-95{
    width: 95%;
}
.section{
    position: relative;
    padding: 8rem 10%;
    background-color: var(--prmary-bg);
    align-items: center;
    z-index: 1;
    box-shadow: var(--sd-faint);
}
.section.intro{
    padding: 6rem 10% 8rem;
}
.section.alt{
    background-color: var(--scndry-bg);
    z-index: 0;
    box-shadow: none;
}
.section.drk{
    padding: 24rem 10% 20rem;
    background-color: var(--theme-drk);
    color: #fff;
    box-shadow: none;
}
.section.drk p{
    color: rgba(255, 255, 255, .6);
}
.section.drk::before,
.section.drk::after{
    width: 100%;
    height: 14rem;
    background-color: var(--scndry-bg);
    top: -1px;
    left: 0;
    transform: none;
    clip-path: polygon(100% 0, 0% 100%, 0 0);
}
.section.drk::after{
    top: auto;
    bottom: -1px;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.section.drk .divider{
    margin: 8rem 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    opacity: .1;
    background-color: var(--theme-lgt);
}
.align-center{
    align-items: center;
    text-align: center;
}
.align-end{
    align-items: flex-end;
}
.align-start{
    align-items: flex-start;
    text-align: left;
}
.mob-only{
    display: none;
}


/*--------------------------*/
/*        COMPONENTS        */
/*--------------------------*/

.card, .widget{
    position: relative;
    padding: 3rem 4rem;
    background-color: var(--prmary-bg);
    box-shadow: var(--sd-faint);
    border-radius: 2rem;
    box-sizing: border-box;
}
.widget{
    padding: 2rem 3rem;
}
.card h1{
    font-size: 2rem;
}
.card .subtitle{
    margin-bottom: 1.5rem;
}
.info-column h4,
.card h4{
    font-size: 1.8rem;
    line-height: 2rem;
    margin-bottom: 1rem;
    white-space: nowrap;
}
.card h4 sup{
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--theme-acc);
}
.card .sttl{
    font-size: 1.2rem;
    color: var(--prmary-txt);
    font-weight: 700;
    margin-bottom: 1rem;
    font-family: 'Mulish', Arial, Helvetica, sans-serif;
}
.card .divider{
    background-color: var(--mono-lgt-mid);
    height: 1px;
    width: 100%;
    margin: 2rem 0;
}
.info-column .link,
.card .link{
    margin-top: 1rem;
    font-size: 1.1rem;
    color: var(--theme-acc);
    font-weight: 700;
}
.info-column{
    width: 20%;
    margin: 2rem 5% 2rem 0;
    margin-right: 5%;
}
.info-column.w-half{
    width: 40%;
    margin: 0 5%;
}
.info-column p{
    font-size: .9rem;
}
.info-column h4{
    font-weight: 800;
}
.info-column .link{
    font-size: 1.2rem;
}
.info-column .link.inactive{
    color: var(--mono-mid);
    pointer-events: none;
}
.info-column .link.inactive::before{
    width: 100%;
    height: 2px;
    top: 55%;
    background-color: var(--mono-mid);
}
#faq-section .question button::after,
.info-column .link::after{
    padding: .18rem;
    border: var(--theme-acc) solid;
    border-width: 0 .3rem .3rem 0;
    right: -1.2rem;
    left: auto;
    transform: translateY(-45%) rotate(-45deg);
}
.info-column .link.inactive::after{
    border-color: var(--mono-mid);
}


.btn-solid{
    font-size: .9rem;
    line-height: 1.5rem;
    padding: .8rem 2.4rem;
    background-color: var(--theme-acc);
    font-weight: 700;
    color: #fff;
    border-radius: .5rem;
    text-align: center;
    border: 3px var(--theme-acc) solid;
    transition: background-color .3s, color .3s;
}
.btn-solid.org{
    border-color: var(--cl-org);
    background-color: var(--cl-org);
}
.btn-solid.round{
    border-radius: 2rem;
}
.btn-solid:hover{
    background-color: transparent;
    color: var(--theme-acc);
}
.btn-solid.org:hover{
    color: var(--cl-org);
}



.checkbox{
    min-width: 16px;
    height: 16px;
    border: 2px var(--mono-mid) solid;
    box-sizing: border-box;
    border-radius: .4rem;
    margin-top: -1px;
    transition: border-color .3s, background-color .3s;
}
.switch-label.active .checkbox,
.input-label.active .checkbox,
.table-row.active .checkbox{
    border-color: var(--theme-acc);
    background-color: var(--theme-acc);
}
.checkbox::after{
    width: 100%;
    height: 100%;
    background-image: url(media/global/icons/wht_tick.svg);
    background-size: 80%;
    opacity: 0;
    transition: opacity .3s;
}
.switch-label.active .checkbox::after,
.input-label.active .checkbox::after,
.table-row.active .checkbox::after{
    opacity: 1;
}


.error{
    width: 100%;
    text-align: center;
    color: var(--cl-red);
    font-weight: 500;
    margin-top: -1.2rem;
    opacity: 0;
    transition: margin-top .2s, opacity .3s;
}
.error.active{
    margin-top: .5rem;
    opacity: 1;
}

.input-label{
    position: relative;
    width: 100%;
    text-align: left;
    font-size: .9rem;
    margin: .5rem 0;
    color: var(--tertry-txt);
}
.input-label.with-icon::after{
    width: 1.2rem;
    height: 1.2rem;
    bottom: 1rem;
    left: 1rem;
    transform: none;
}
.input-label.with-icon.user::after{
    background-image: url(media/global/icons/blu_user.svg);
    background-size: 85%;
}
.input-label.with-icon.key::after{
    background-image: url(media/global/icons/blu_key.svg);
}
.input-label.with-icon.email::after{
    background-image: url(media/global/icons/blu_email.svg);
}
.input-label.with-icon.phone::after{
    background-image: url(media/global/icons/blu_phone.svg);
}
.input-field{
    margin-top: 1px;
    font-size: .9rem !important;
    padding: .8rem 1.2rem;
    border-radius: .6rem;
    width: 100%;
    background-color: var(--mono-lgt);
    font-family: inherit;
    box-sizing: border-box;
    color: var(--prmary-txt);
    border: 1px var(--mono-lgt-mid) solid;
}
.input-field::placeholder{
    color: var(--mono-mid);
    font-weight: 600;
}
.input-label.with-icon .input-field{
    padding-left: 3rem;
}

.req{
    font-size: inherit;
    color: var(--cl-red);
    vertical-align: middle;
}
.input-label .save-changes{
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--theme-acc);
    right: .9rem;
    bottom: .85rem;
    border-radius: 50%;
    transition: opacity .3s;
}
.input-label .save-changes.active{
    opacity: 1;
    pointer-events: all;
}
.input-label .save-changes::after{
    width: 50%;
    height: 50%;
    background-image: url(media/global/icons/wht_tick.svg);
}
.input-label .save-changes span{
    position: absolute;
    left: 50%;
    font-size: .9rem;
    line-height: 1rem;
    font-weight: 500;
    transform: translateX(-50%);
    top: 0;
    opacity: 0;
    pointer-events: none;
    transition: padding-top .3s, opacity .3s;
}
.input-label .save-changes:hover span{
    padding-top: 1.8rem;
    pointer-events: all;
    opacity: 1;
}



.table-container{
    position: relative;
    overflow-y: hidden;
    height: 0;
    transition: height .3s;
}
.table-container .table{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow-x: hidden;
    transition: top .3s;
}
.table-row.headers{
    color: var(--tertry-txt);
}
.table-row{
    padding: 1rem 2rem;
    box-sizing: border-box;
    font-weight: 400;
    position: relative;
    font-family: inherit;
    font-size: .9rem;
    text-align: left;
}
.table-row span{
    white-space: nowrap;
}
.table-row sup{
    vertical-align: bottom;
    color: var(--tertry-txt);
    font-weight: 500;
    font-size: .85rem;
}
.table-row .med{
    min-width: 8rem;
    max-width: 8rem;
}
.table-row .sml{
    min-width: 4rem;
    max-width: 4rem;
    text-align: center;
}
.table-row .big{
    min-width: 12rem;
    max-width: 12rem;
}
.table-row .full{
    width: 100%;
}
.table-row .flag,
.bar .flag{
    display: inline-block;
    margin: -.2rem .5rem 0 0;
    width: 1.2rem;
    height: .9rem;
    vertical-align: middle;
}
.table-row .checkbox{
    position: absolute;
    left: auto;
    right: 1.5rem;
}
.table .table-row:nth-child(even){
    border-top: 1px var(--prmary-bg) solid;
    border-bottom: 1px var(--prmary-bg) solid;
}
.table .table-row:nth-child(odd){
    background-color: var(--mono-lgt);
    border-top: 1px var(--mono-lgt-mid) solid;
    border-bottom: 1px var(--mono-lgt-mid) solid;
}
.table-row span.align-left{
    text-align: left;
}
.table-controls{
    width: 100%;
    justify-content: flex-end;
}
.table-controls .page-btn{
    font-family: 'JetBrains Mono', Arial, Helvetica, sans-serif;
    padding: .5rem .7rem;
    margin: 0 .15rem;
    border-radius: .5rem;
    font-weight: 800;
    transition: background-color .3s, color .3s;
}
.table-controls .page-btn:hover{
    background-color: var(--mono-lgt-mid);
}
.table-controls .page-btn.active{
    background-color: var(--theme-acc);
    color: #fff;
}


#auth .input-field{
    width: 28rem;
}
#auth .error{
    width: 28rem;
}
#auth .btn-solid{
    margin: 1.5rem 0 0;
    width: 100%;
}

.mob-only{
    display: none;
}


.flag{
    background-color: var(--mono-lgt-mid);
    background-size: cover;
    background-position: center;
}
.flag.us{
    background-image: url(media/global/flags/us.svg);
}
.flag.de{
    background-image: url(media/global/flags/de.svg);
}



.popup{
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(87, 87, 87, 0.6);
    top: 0;
    left: 0;
    display: none;
    overflow-y: scroll;
    padding: 10% 0 5%;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}
.popup::-webkit-scrollbar {
    display: none;
}
.dark .popup{
    background-color: rgba(3, 5, 10, 0.6);
}
.popup.active{
    display: flex;
}
.popup .card{
    margin: 0 auto;
}
.popup .card .close{
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    position: absolute;
    right: 4rem;
    top: 3rem;
    border: 3px var(--mono-mid) solid;
    transition: border-color .3s, background-color .3s;
}
.popup .card .close:hover{
    background-color: var(--cl-red);
    border-color: var(--cl-red);
}
.popup .card .close::before{
    width: 55%;
    height: 55%;
    background-image: url(media/global/icons/blk_cross.svg);
    filter: invert(.6);
    transition: filter .3s;
}
.popup .card .close:hover::before{
    filter: invert(1);
}



.w-67{
    width: 67%;
}
.w-30{
    width: 30%;
}

.w-57{
    width: 60%;
}
.w-40{
    width: 34%;
}



.w-third{
    width: 31.33%;
}
.w-half{
    width: 48%;
}
.w-quarter{
    width: 23%;
}



.title h3{
    color: var(--theme-acc);
    font-size: 1.5rem;
    font-weight: 800;
}
.title h1,
.title h2{
    font-weight: 700;
    font-size: 3.8rem;
    /* white-space: nowrap; */
    margin: 1.5rem 0 3rem;
}
.title h1{
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    white-space: nowrap;
}
#index-intro .title h1{
    margin-bottom: 3rem;
}
.title h1 span,
.title h2 span{
    font-weight: 900;
    color: var(--theme-acc);
    text-transform: uppercase;
}
.title h1 span::after,
.title h2 span::after{
    width: calc(100% + 1rem);
    height: 2rem;
    top: auto;
    bottom: -.8rem;
    background-color: var(--theme-lgt);
    opacity: .4;
}
.title p{
    font-size: 1rem;
}
.title .btn-solid{
    margin-top: 3rem;
    font-size: 1.1rem;
    padding: 1.5rem 0;
    border-radius: 3rem;
    width: 60%;
    font-weight: 800;
    border-width: .3rem;
}

.features{
    margin-top: 1.5rem;
    padding-inline-start: 0;
}
.features li{
    list-style: none;
    padding: .3rem 0 .3rem 3rem;
}
.features li::before{
    width: 1.6rem;
    height: 1.6rem;
    background-color: var(--theme-acc);
    left: 0;
    transform: translateY(-50%);
    background-image: url(media/global/icons/wht_tick.svg);
    background-size: 50%;
    border-radius: 50%;
}


.section .graphic{
    width: 57%;
    height: 28rem;
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
}
.section .graphic.w-50{
    width: 50%;
    height: 20rem;
}

.banner{
    box-sizing: border-box;
    padding: 3rem 0;
    width: 100%;
    margin: 8rem 0;
    justify-content: center;
}
.banner::before,
.banner::after{
    width: 100%;
    height: 2px;
    background-color: var(--mono-mid);
    transform: translateX(-50%);
    top: 0;
    opacity: .2;
}
.banner::after{
    top: auto;
    bottom: 0;
}
.banner .logo{
    height: 2.5rem;
    opacity: .2;
    margin: 0 4rem;
    transition: opacity 1s;
}
.banner .logo.taller{
    height: 2.2rem;
}
.banner .logo:hover{
    opacity: 1;
}
.dark .banner .logo{
    filter: invert(1);
}

.product{
    margin: 1rem 0;
}
.product .price{
    display: inline-block;
    padding-top: .5rem;
    font-size: 1.4rem;
    color: var(--theme-acc);
}
.product .price span{
    font-size: 1.8rem;
    font-weight: 900;
}
.product .banner{
    width: calc(100% + 4rem);
    background-color: var(--mono-lgt-mid);
    margin: -1.5rem -2rem 1.5rem;
    border-radius: 1rem 1rem 0 0;
    padding: 0;
    height: 8rem;
    background-size: cover;
    background-position: center;
}
.product.coming-soon::after,
.product.popular::after,
.product.oos::after{
    content: "POPULAR!";
    padding: .8rem 2.4rem;
    background-color: var(--cl-org);
    transform: none;
    top: -1rem;
    left: auto;
    right: 3rem;
    border-radius: 2rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
.product.coming-soon::after{
    content: "COMING SOON";
}
.product.oos::after{
    content: "OUT OF STOCK";
    background-color: var(--tertry-txt);
}
.product.coming-soon *{
    pointer-events: none;
    opacity: .6;
}
.product .pair{
    width: 100%;
    margin: .15rem 0;
    text-align: left;
}
.product .pair .key{
    width: 8rem;
    font-size: .9rem;
    color: var(--tertry-txt);
    font-weight: 500;
}
.product .pair .val{
    color: var(--prmary-txt);
    font-size: 1rem;
}

#index-intro{
    margin-top: -6.5rem;
    padding: 16.5rem 10% 10rem;
    background-image: url(media/auth-0/index/backer.svg);
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
}
#index-intro .graphic{
    height: 48rem;
    margin: -10rem 0;
}
#index-intro .btn-solid{
    font-size: 1.2rem;
    padding: 1.8rem 0;
    width: 70%
}



#products-section .banner::before{
    display: none;
}
#products-section .card{
    width: 30.5%;
    margin: 1rem 0;
}
.info-column .icon,
#products-section .card .icon{
    width: 5rem;
    height: 5rem;
    margin-bottom: 1rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.info-column .icon{
    margin-bottom: 1.5rem;
}
#products-section .card p{
    height: 8rem;
}


#reviews-wrap{
    height: 23.5rem;
}
#reviews-section .card{
    padding-top: 4.5rem;
    width: 33.5%;
    position: absolute;
    left: 33.5%;
    transition: left .3s, opacity .3s, width .3s;
}
#reviews-section .card.from-lft,
#reviews-section .card.lft,
#reviews-section .card.from-rgt,
#reviews-section .card.rgt{
    width: 27.5%;
    opacity: 1;
}
#reviews-section .card.lft{
    left: 3%;
}
#reviews-section .card.rgt{
    left: 70%;
}
#reviews-section .card.from-lft{
    left: -27.5%;
    opacity: 0;
    pointer-events: none;
}
#reviews-section .card.from-rgt{
    left: 100%;
    opacity: 0;
    pointer-events: none;
}
#reviews-section .card h4{
    white-space: nowrap;
    font-size: 1.8rem;
}
#reviews-section .card.from-lft h4,
#reviews-section .card.lft h4,
#reviews-section .card.from-rgt h4,
#reviews-section .card.rgt h4{
    margin: 0;
}
#reviews-section .card p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    height: 5.5rem;
    width: 120%;
    opacity: 1;
    transition: height .3s, opacity .3s .3s;
}
#reviews-section .card.from-lft p,
#reviews-section .card.lft p,
#reviews-section .card.from-rgt p,
#reviews-section .card.rgt p{
    height: 0;
    opacity: 0;
    transition: height .3s, opacity .3s;
}
#reviews-section .card .icon{
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    background-color: var(--theme-lgt);
    top: -4rem;
    border-radius: 50%;
    background-image: url(media/global/icons/blu_user.svg);
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
}
#reviews-section .card .stars{
    width: 100%;
    height: 2rem;
    margin-top: 1rem;
    background-image: url(media/global/icons/stars.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#reviews-section .card .link{
    height: 1.6rem;
    opacity: 1;
    margin-top: 1rem;
    transition: height .3s, opacity .3s .3s, margin-top .3s;
}
#reviews-section .card.from-lft .link,
#reviews-section .card.lft .link,
#reviews-section .card.from-rgt .link,
#reviews-section .card.rgt .link{
    height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    transition: height .3s, opacity .3s, margin-top .3s;
}

#reviews-section .arrw{
    z-index: 2;
    position: absolute;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    left: -4rem;
    background-color: var(--theme-acc);
    border: 3px var(--theme-acc) solid;
    transition: transform .3s, background-color .3s;
}
#reviews-section .arrw.rgt{
    left: auto;
    right: -4rem;
}
#reviews-section .arrw:hover{
    background-color: var(--scndry-bg);
    transform: translateX(-.5rem);
}
#reviews-section .arrw.rgt:hover{
    transform: translateX(.5rem);
}
#reviews-section .arrw::after{
    padding: 2px;
    border: #fff solid;
    border-width: 0 3px 3px 0;
    transform: translate(-40%, -50%) rotate(135deg);
}
#reviews-section .arrw.rgt::after{
    transform: translate(-60%, -50%) rotate(-45deg);
}
#reviews-section .arrw:hover::after{
    border-color: var(--theme-acc);
}


#locations-map{
    width: 80rem;
    height: 46rem;
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(media/global/map.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.dark #locations-map{
    background-image: url(media/global/map-drk.svg);
}
#locations-map .tag{
    position: absolute;
}
#locations-map .tag .flag{
    width: 1.6rem;
    height: 1.4rem;
    border-radius: .5rem;
    border: 3px #fff solid;
    margin-bottom: .3rem;
}
#locations-map .tag .pin{
    z-index: -1;
}
#locations-map .tag .pin,
#locations-map .tag .pin::after{
    width: .8rem;
    height: .8rem;
    background-color: var(--theme-acc);
    border-radius: 50%;
}
#locations-map .tag .pin::after{
    animation: pulse 2s infinite;
}
#locations-map .tag p{
    font-size: .9rem;
    font-weight: 900;
    text-align: center;
    line-height: .9rem;
    color: var(--theme-acc);
}
#tag-lon{
    top: 9.6rem;
    left: 35.2rem;
}
#tag-fra{
    top: 10.5rem;
    left: 37.5rem;
}
#tag-mia{
    z-index: 1;
    top: 18.5rem;
    left: 18.8rem;
}
#tag-ash{
    top: 15rem;
    left: 20rem;
}



.title.mini{
    width: 100%;
}
.title.mini h2{
    font-size: 3rem;
    margin-bottom: 1rem;
}
.title.mini h2 span::after{
    height: 1.75rem;
}
.title.mini p{
    max-width: 50%;
    font-size: 1rem;
    margin-bottom: 4rem;
}
#faq-section .title p a{
    color: var(--theme-acc);
    font-weight: 700;
}
#faq-section .question{
    margin: .15rem;
    border-bottom: 2px var(--mono-lgt-mid) solid;
}
/* #faq-section.section.alt .question{
    border-color: var(--mono-mid);
} */
#faq-section .question button{
    padding: 1.5rem 3rem;
    text-align: left;
    font-size: 1.1rem;
}
#faq-section .question button::after{
    transform: translateY(-45%) rotate(45deg);
    right: 3rem;
    border-color: var(--mono-mid);
}


.card.feature{
    margin: 1rem 0;
}
.card.feature .icon{
    width: 8rem;
    height: 8rem;
    margin: 1rem 0 1.5rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.card.feature p{
    min-height: 10rem;
}


#minecraft-wizard .slide-title,
#configure-cloud-body .slide-title,
#colocation-configure-column .slide-title{
    padding-left: 4.5rem;
    margin-bottom: 3rem;
}
#minecraft-wizard .slide-title h4 span,
#configure-cloud-body .slide-title h4 span,
#colocation-configure-column .slide-title h4 span{
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--theme-acc);
    border-radius: 50%;
    text-align: center;
    font-weight: 1000;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    line-height: 3.5rem;
    color: #fff;
    font-size: 1.5rem;
    left: -5rem;
    top: .3rem;
}
#minecraft-wizard .slide-title h4 span sup,
#configure-cloud-body .slide-title h4 span sup,
#colocation-configure-column .slide-title h4 span sup{
    color: #fff;
    font-size: 1.2rem;
    display: inline-block;
    margin-right: -.3rem;
    vertical-align: middle;
}



#configure-cloud-body .slide .widget{
    padding: 0;
    width: 23%;
}
#configure-cloud-body .slide .widget p::before,
#dashboard-widgets .widget h4::before{
    width: 4rem !important;
    height: 4rem !important;
    bottom: .6rem !important;
    transform: none;
    left: 0;
    top: auto;
}
#configure-cloud-body .slide .widget p,
#dashboard.panel #dashboard-widgets .widget h4{
    font-family: 'Mulish', Arial, Helvetica, sans-serif;
    padding-left: 5.5rem;
    line-height: 2.2rem;
}

#configure-cloud-body .slide .widget p span,
#dashboard.panel #dashboard-widgets .widget h4 span{
    font-size: 2rem;
    padding: 0;
    font-weight: 1000;
}
#configure-cloud-body .slide .widget p span sup,
#dashboard.panel #dashboard-widgets .widget h4 span sup{
    vertical-align: bottom;
    color: var(--prmary-txt);
    display: inline-block;
    margin: 0 0 -.3rem .3rem;
    font-weight: 1000;
}
#configure-cloud-body .slide .widget p sup,
#dashboard.panel #dashboard-widgets .widget h4 sup{
    color: var(--theme-acc);
    font-size: 1.1rem;
    font-weight: 700;
}
#configure-cloud-body .slide .widget.cpu p::before,
#dashboard-widgets .widget.cpu h4::before {
    background-image: url(media/panel/cloud/cpu.svg);
}
#configure-cloud-body .slide .widget.ram p::before,
#dashboard-widgets .widget.ram h4::before {
    background-image: url(media/panel/cloud/ram.svg);
}
#configure-cloud-body .slide .widget.storage p::before,
#dashboard-widgets .widget.storage h4::before {
    background-image: url(media/panel/cloud/storage.svg);
}
#configure-cloud-body .slide .network p::before,
#dashboard-widgets .widget.network h4::before {
    background-image: url(media/panel/cloud/network.svg);
}


#gaming-intro .tagline,
#cloud-intro .tagline{
    font-weight: 500;
    color: var(--tertry-txt);
    font-style: italic;
}
#gaming-intro .tagline a,
#cloud-intro .tagline a{
    font-weight: 700;
    color: var(--theme-acc);
}
#configure-cloud-slider-wrap{
    position: relative;
    margin-bottom: 5rem;
}
#configure-cloud-slider-wrap .slider{
    width: 96%;
    margin: 1.5rem 2% 0;
    height: .4rem;
    background-color: var(--mono-lgt-mid);
    border-radius: .2rem;
}
#configure-cloud-slider-wrap .slider .inner{
    width: 0;
    height: 100%;
    background-color: var(--theme-acc);
    border-radius: .4rem;
    transition: width .3s;
}
#configure-cloud-slider-wrap .labels .point{
    font-size: 1rem;
    font-weight: 500;
    padding-top: 2rem;
    margin-top: -.8rem;
    width: 3rem;
    text-align: center;
}
#configure-cloud-slider-wrap .labels .point::before{
    width: .4rem;
    height: 1.2rem;
    background-color: var(--mono-lgt-mid);
    top: 0;
    border-radius: .2rem;
    transform: translateX(-50%);
}
#configure-cloud-slider-wrap .labels .point.active::before{
    background-color: var(--theme-acc);
}
#configure-cloud-slider-wrap input{
    position: absolute;
    width: 100%;
    opacity: 0;
    height: 100%;
    top: 0;
    z-index: 999;
    cursor: pointer;
}


#cloud-map{
    width: 52rem;
    height: 28rem;
    align-self: center;
    background-image: url(media/global/map.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.dark #cloud-map{
    background-image: url(media/global/map-drk.svg);
}
#cloud-map .tag::before,
#cloud-map .tag{
    width: .8rem;
    height: .8rem;
    background-color: var(--theme-acc);
    border-radius: 50%;
    position: absolute;
}
#cloud-map .tag::before{
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%{
        width: .8rem;
        height: .8rem;
        opacity: 1;
    }
    50%{
        width: 2.4rem;
        height: 2.4rem;
        opacity: 0;
    }
    100%{
        width: 1rem;
        height: 1rem;
        opacity: 0;
    }
}

#cloud-map .tag.inactive{
    background-color: var(--tertry-txt);
}

.select button{
    width: 16rem;
    margin: .3rem 0;
    font-size: 1rem !important;
    font-weight: 500;
    text-align: left;
    transition: color .3s, background-color .3s, border-color .3s;
}
.select button.inactive{
    opacity: .4;
    pointer-events: none;
}
.select button.active{
    background-color: var(--theme-acc);
    border-color: var(--theme-acc);
    color: #fff;
    font-weight: 600;
}
.select button .flag{
    margin-right: 1rem;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    vertical-align: middle;
    border: 2px #fff solid;
}


#configure-game-body-egg .egg,
#configure-cloud-body-os .os{
    width: 23.5%;
    font-size: .9rem !important;
    padding: 1.6rem 1.2rem 1.2rem;
    border-radius: 1rem;
    background-color: var(--mono-lgt);
    font-family: inherit;
    box-sizing: border-box;
    margin: .65rem 0;
    border: 1px var(--mono-lgt-mid) solid;
}
#configure-game-body-egg .egg p,
#configure-cloud-body-os .os p{
    font-size: 1rem !important;
    font-weight: 500;
}
#configure-game-body-egg .egg p sup{
    font-weight: 400;
    color: var(--tertry-txt)
}
#configure-cloud-body-os .os .os-icon{
    width: 2.8rem;
    height: 2.8rem;
    margin: 0 1rem 0 .5rem;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
}
#configure-game-body-egg .egg .input-field,
#configure-cloud-body-os .os .input-field{
    background-color: var(--prmary-bg);
    margin-top: 1rem;
    text-overflow: ellipsis;
    line-height: 1.2rem;
}
#configure-game-body-egg .egg.active .input-field,
#configure-cloud-body-os .os.active .input-field{
    background-color: var(--theme-acc);
    color: #fff;
    font-weight: 600;
}

.btn-solid.inactive{
    background-color: var(--mono-mid);
    border-color: var(--mono-mid);
    pointer-events: none;
}


/* @media (max-width: 1200px) {
    .mob-col{
        flex-direction: column;
    }
    .mob-col-rev{
        flex-direction: column-reverse;
    }
    .mob-col .w-40,
    .mob-col .w-57,
    .mob-col-rev .w-40,
    .mob-col-rev .w-57{
        width: 100%;
        margin: 3rem 0;
    }
    .mob-hidden{
        display: none;
    }
    #faq-section .question{
        width: 100%;
    }
} */


#gaming-body .banner::after{
    display: none;
}
#gaming-body .card.coming-soon{
    opacity: .4;
}
#gaming-body .card.coming-soon *{
    opacity: 1;
}
#gaming-body .card.coming-soon::after{
    display: none;
}
#gaming-features .widget{
    width: 24.5%;
    box-shadow: none;
    margin: .5rem 0;
    border: 2px var(--scndry-bg) solid;
    border-radius: 5rem;
    padding: 1.2rem 2.4rem;
}
#gaming-features .widget p{
    font-size: 1rem;
}
#gaming-features .widget:hover{
    border-color: var(--theme-acc);
}
#gaming-features .widget .icon{
    width: 2rem;
    height: 2rem;
    margin-right: 1.5rem;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
#gaming-features .divider{
    margin: 8rem 0;
    width: 100%;
    height: 2px;
    background-color: var(--mono-mid);
    opacity: .2;
}
.title.mini.w-40{
    width: 47%;
}




.product .ram{
    position: absolute;
    top: 7.5rem;
    right: 4rem;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--theme-acc);
}

.turned{
    position: fixed;
    width: 100vh;
    height: 100vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
    pointer-events: none;
    overflow: hidden;
}
.turned.rgt{
    transform: translate(-50%, -50%) rotate(90deg);
}
.turned p{
    font-size: 14rem;
    font-weight: 1000;
    position: absolute;
    top: 0;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
    line-height: 14rem;
    color: var(--theme-acc);
    opacity: .4;
}
.turned p span{
    margin: 0 3rem;
}


#about-us-body .typography{
    width: 100%;
}
#about-us-body .typography .font-preview{
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-right: 5rem;
    width: 50%;
}
#about-us-body .typography .font-preview span{
    font-size: 4rem;
    line-height: 5rem;
}
#about-us-body .typography .font-preview sup{
    font-size: 1rem;
    color: var(--tertry-txt);
}
#about-us-body .mulish{
    font-family: 'Mulish', Arial, Helvetica, sans-serif;
    font-weight: 800;
}
#about-us-body .poppins{
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: 500;
}
#about-us-body .dm-sans{
    font-family: 'DM Sans', Arial, Helvetica, sans-serif;
    font-weight: 500;
}
#about-us-body .para{
    margin-top: 2rem;
}
#about-us-body .para .ttl{
    font-size: 2rem;
    line-height: 2.8rem;
    margin-bottom: .5rem;
}
#about-us-body .para .txt{
    font-style: 1rem;
    line-height: 1.4rem;
}
#about-us-body #brand-profile .logo{
    height: 4rem;
    align-self: flex-start;
    margin-right: 1.5rem;
}
#about-us-body #brand-profile .card{
    width: 45%;
}
#about-us-body #brand-profile .color{
    position: relative;
    width: 4rem;
    height: 4rem;
    background-color: var(--theme-acc);
    margin: 0 0 0 2rem;
    border-radius: 1rem;
    font-family: 'JetBrains Mono';
}
#about-us-body #brand-profile .color span{
    position: absolute;
    font-size: 1rem;
    width: 5rem;
    top: 50%;
    font-weight: 900;
    left: -3.2rem;
    color: var(--tertry-txt);
    transform: translateY(-50%) rotate(-90deg);
}
#about-us-body #brand-profile .color span sup{
    vertical-align: bottom;
}


#company-reg .pair{
    margin: 0 0 .5rem;
    align-items: center;
}
#company-reg .pair .icon{
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
#company-reg .pair .key{
    color: var(--tertry-txt);
    display: inline-block;
    width: 8rem;
    font-size: .9rem;
}
#company-reg .pair .val{
    font-weight: 500;
    font-size: 1rem;
}




#support-body .card h4{
    margin-bottom: 0;
}
#support-body .icon{
    width: 5rem;
    height: 5rem;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 2.5rem;
    right: 4rem;
}
#support-contact .card{
    padding: 0;
    text-align: left;
    width: 45%;
}
#support-contact .card .icon{
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    background-color: var(--theme-lgt);
    margin-right: 2rem;
    background-image: url(media/global/icons/blu_email.svg);
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
}



#dedicated-cloud-body .product{
    margin-bottom: 2rem;
}
#dedicated-cloud-body .product .logo{
    min-width: 2rem;
    height: 6rem;
    margin-right: 3rem;
    background-image: url(media/auth-0/dedicated-cloud/amd.png);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    opacity: .4;
}
#dedicated-cloud-body .product .logo.intel{
    background-image: url(media/auth-0/dedicated-cloud/intel.png);
}
.dark #dedicated-cloud-body .product .logo{
    filter: invert(1);
}
#dedicated-cloud-body .product h4{
    text-align: left;
    margin: 0;
}
#dedicated-cloud-body .product .btn-solid{
    padding: .8rem 4rem;
}
#select-tier-cards .pair,
#dedicated-cloud-body .pair{
    margin: 0;
}
#select-tier-cards .pair .key,
#dedicated-cloud-body .pair .key{
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 1rem;
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
}
#dedicated-cloud-body .product .location{
    margin-top: .8rem;
    font-size: 1.3rem;
    display: inline-block;
    font-weight: 700;
    color: var(--tertry-txt);
}
#dedicated-cloud-body .product .location .flag{
    display: inline-block;
    width: 1.6rem;
    height: 1.2rem;
    margin: -.3rem 1rem 0 0;
    vertical-align: middle;
    border-radius: .3rem;
    border: 2px #fff solid;
}
#dedicated-cloud-body .product .price{
    margin-bottom: 1rem;
}
#dedicated-cloud-body .product .rgt p{
    margin-top: .3rem;
    color: var(--mono-mid);
    font-weight: 600;
    font-size: .9rem;
}
#dedicated-cloud-body .filters .checkbox{
    margin-right: 1rem;
}
#dedicated-cloud-body .filters .switch-label{
    margin: .15rem 0;
    font-size: 1rem;
    cursor: pointer;
}
#dedicated-cloud-body .filters .switch-label .flag{
    display: inline-block;
    width: 1.5rem;
    height: 1.1rem;
    margin-right: .5rem;
    vertical-align: middle;
    border: 2px #fff solid;
    border-radius: .3rem;
}
#dedicated-cloud-body .filters .switch-label sup{
    font-size: .9rem;
    font-weight: 500;
    color: var(--tertry-txt);
    vertical-align: middle;
    display: inline-block;
    margin-left: .5rem;
}
#dedicated-cloud-body .filters .cpu-model{
    width: 48%;
    height: 3rem;
    background-color: var(--mono-lgt);
    border: 1px var(--mono-lgt-mid) solid;
    border-radius: .8rem;
}
#dedicated-cloud-body .filters .cpu-model.active{
    background-color: var(--theme-acc);
    border-color: var(--theme-acc);
}
#dedicated-cloud-body .filters .cpu-model::after{
    width: 100%;
    height: 100%;
    background-image: url(media/auth-0/partner-banner/intel.png);
    background-size: 28%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .4;
    transition: filter .3s, opacity .3s;
}
#dedicated-cloud-body .filters .cpu-model.amd::after{
    background-image: url(media/auth-0/partner-banner/amd.png);
    background-size: 36%;
}
#dedicated-cloud-body .filters .cpu-model.active::after,
.dark #dedicated-cloud-body .filters .cpu-model::after{
    filter: invert(1);
}
#dedicated-cloud-body .filters .cpu-model.active::after{
    opacity: 1;
}
#dedicated-cloud-body .filters .slider-range{
    margin-top: 1rem;
}
#dedicated-cloud-body .filters .slider-wrap .labels{
    font-weight: 600;
    font-size: 1rem;
    align-self: flex-end;
    margin-top: -2rem;
}
#dedicated-cloud-body .filters .slider-wrap .labels sup{
    vertical-align: middle;
    display: inline-block;
    margin: 0 .5rem;
    font-size: .8rem;
    color: var(--tertry-txt);
}
#dedicated-cloud-body .filters .ui-widget.ui-widget-content{
    border-color: var(--mono-lgt-mid);
}
#dedicated-cloud-body .filters .ui-widget-header{
    background-color: var(--theme-acc);
}
#dedicated-cloud-body .filters .ui-widget-content{
    background-color: var(--mono-lgt);
}
#dedicated-cloud-body .ui-state-default,
#dedicated-cloud-body .ui-widget-content .ui-state-default,
#dedicated-cloud-body .ui-widget-header .ui-state-default,
#dedicated-cloud-body .ui-button,
#dedicated-cloud-body .ui-button.ui-state-disabled:hover, 
#dedicated-cloud-body .ui-button.ui-state-disabled:active{
    border-color: var(--theme-acc);
    background-color: var(--theme-acc);
}
#dedicated-cloud-body .filters .price .input-field{
    padding-left: 2.2rem;
}
#dedicated-cloud-body .filters .price .curr{
    position: absolute;
    bottom: .9rem;
    left: 1.2rem;
    color: var(--prmary-txt);
}

#sort-by-btn{
    font-size: 1rem;
    top: 2.5rem;
    right: 10%;
    padding: 1.2rem 3rem;
    position: absolute;
    margin-right: 3rem;
    text-align: left;
    width: 11.5rem;
    color: var(--tertry-txt);
    font-weight: 700;
}
#sort-by-btn::after{
    width: 0.75rem;
    height: 0.5rem;
    background-color: var(--tertry-txt);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    top: auto;
    right: 2.6rem;
    left: auto;
    bottom: 1.65rem;
    transform: rotate(180deg);
}





.mc-card{
    width: 40%;
    margin: 0 2rem;
}
.mc-card .w-half{
    width: 54%;
    margin-left: 46%;
}
.mc-card .btn-solid{
    margin-top: 2rem;
}
.mc-card .title{
    width: 100%;
}
.mc-card .title h2{
    font-size: 2.4rem;
}
.mc-card .title h2 span::after{
    height: 1.5rem;
}
.villager, .pillager{
    position: absolute;
    width: 35%;
    height: 20rem;
    background-image: url(media/auth-0/gaming/minecraft-server-hosting/villager.png);
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    bottom: 3rem;
    left: 2rem;
}
.pillager{
    transform: scaleX(-1);
    left: 4rem;
    background-image: url(media/auth-0/gaming/minecraft-server-hosting/pillager.png);
}
#select-tier-buttons{
    margin: 1rem 0 5rem;
}
#select-tier-buttons .btn-solid{
    width: 24rem;
    margin: 0 .5rem;
}
#game-page-template .plans .card,
#minecraft-plans .card{
    margin: 2rem 0 1.5rem;
}
#minecraft-server-hosting-body .product .icon{
    position: absolute;
    width: 7rem;
    height: 7rem;
    top: -1.5rem;
    right: 3.5rem;
    border-radius: 1rem;
    border: 4px var(--mono-lgt-mid) solid;
    background-size: cover;
    background-position: center;
}
#minecraft-plans{
    width: 100%;
    margin-top: 0;
}
#game-page-template .plans,
#minecraft-plans .plans{
    display: none;
}
#game-page-template .plans.active,
#minecraft-plans .plans.active{
    display: flex;
}
#game-configure-popup{
    position: absolute;
    width: 100%;
    height: 100%;
}
#game-configure-popup .sticky-column{
    height: 90%;
    position: relative;
}
#game-configure-popup .card{
    position: sticky;
    width: 40rem;
    top: 20%;
}
#game-configure-popup .select-btn{
    margin: -.4rem 0 .5rem;
    padding: .8rem;
    width: 32%;
    background-color: var(--mono-lgt);
    border-radius: .6rem;
    border: 1px var(--mono-lgt-mid) solid;
    font-size: .9rem;
    font-weight: 700;
    color: var(--tertry-txt);
}
#game-configure-popup .select-btn.active{
    background-color: var(--theme-acc);
    color: #fff;
}
#game-configure-popup .flag{
    position: absolute;
    bottom: .8rem;
    left: 1.1rem;
    display: inline-block;
    width: 1.5rem;
    height: 1.1rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    border: 2px #fff solid;
    border-radius: 0.3rem;
}
#game-configure-popup .server-template{
    display: none;
}
#game-configure-popup .server-template.active{
    display: inline-block;
}

#minecraft-plans{
    display: none;
}
#minecraft-plans.active{
    display: block;
}
#minecraft-wizard{
    position: absolute;
    width: 100%;
    align-items: center;
    visibility: hidden;
}
#minecraft-wizard.active{
    position: relative;
    visibility: visible;
}
#minecraft-wizard .slide{
    width: 65%;
    opacity: 0;
    pointer-events: none;
    transition: margin-top .3s, opacity .3s .3s;
}
#minecraft-wizard .slide.active{
    opacity: 1;
    pointer-events: all;
    margin-top: 3rem !important;
}
#minecraft-wizard .game-version .widget{
    background-color: var(--mono-lgt);
    box-shadow: none;
    border: 1px var(--mono-lgt-mid) solid;
    border-radius: 1rem;
    padding: 1.2rem;
    width: 100%;
}
#minecraft-wizard .game-version.active .widget{
    background-color: var(--theme-acc);
    border-color: var(--theme-acc);
}
#minecraft-wizard .game-version .icon{
    position: relative;
    margin: 0 0 1rem;
    width: 6rem;
    height: 6rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#minecraft-wizard .game-version p{
    font-size: 1.1rem;
    font-weight: 500;
}
#minecraft-wizard .game-version.active p{
    color: #fff;
}
#minecraft-wizard .game-version p sup{
    font-weight: 400;
    font-size: .9rem;
    color: var(--tertry-txt);
}
#minecraft-wizard .game-version.active p sup{
    color: rgba(255, 255, 255, .8);
}

#randomize-btn{
    border-radius: 0 2rem 2rem 0;
    line-height: normal;
    margin-left: 1rem;
    padding: 1rem 1.8rem 1rem 3rem;
}
#randomize-btn::before,
#randomize-btn::after{
    width: 1.3rem;
    height: 1.3rem;
    left: 1.2rem;
    transform: translateY(-50%);
    background-image: url(media/global/icons/blk_dice.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: invert(1);
    transition: opacity .3s;
}
#randomize-btn::after{
    opacity: 0;
    filter: var(--fl-theme-acc);
}
#randomize-btn:hover::after{
    opacity: 1;
}
#nametag-icon{
    position: absolute;
    width: 2.4rem;
    height: 2.4rem;
    left: 1.2rem;
    bottom: .9rem;
    background-image: url(media/auth-0/gaming/minecraft-server-hosting/nametag.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#minecraft-wizard-name{
    font-size: 1rem;
    padding-left: 4.5rem;
    border-radius: 1rem 0 0 1rem;
}
#minecraft-wizard-name::placeholder{
    font-weight: 500;
    font-size: 1rem;
}
#configure-game-body-egg .eggs-wrap{
    display: none;
    height: 0;
    overflow: hidden;
}
#configure-game-body-egg .eggs-wrap.active{
    display: flex;
}
#configure-game-body-egg.active .eggs-wrap{
    height: auto;
    overflow: visible;
}
#configure-game-body-egg .egg{
    width: 31%;
    margin: 0 0 2.4rem;
    padding-top: 2rem;
}
#configure-game-body-egg .egg .icon{
    min-width: 5rem;
    height: 5rem;
    position: absolute;
    top: -2rem;
    right: 2rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#configure-game-body-egg .egg p{
    padding-left: 1.2rem;
    font-size: 1.2rem !important;
}
#configure-game-body-egg .egg p sup{
    display: inline-block;
    padding-top: 1rem;
    font-size: .8rem !important;
}
#configure-game-body-egg .egg .input-field{
    margin-top: 1.5rem;
}
#configure-game-body-egg .egg .input-field::placeholder{
    font-weight: 500;
}
#configure-game-body-players .slider-wrap{
    position: relative;
}
#configure-game-body-players .slider-wrap input{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    opacity: 0;
}
#configure-game-body-players .slider-wrap .slider{
    position: relative;
    width: calc(100% - 1rem);
    margin: 1.5rem .5rem .5rem;
    height: .8rem;
    border-radius: .4rem;
    background-color: var(--mono-lgt);
    border: 1px var(--mono-lgt-mid) solid;
}
#configure-game-body-players .slider-wrap .inner{
    position: absolute;
    width: 10%;
    height: 100%;
    top: -1px;
    left: -.5rem;
    background-color: var(--theme-acc);
    border: 1px var(--theme-acc) solid;
    border-radius: .4rem;
}
#configure-game-body-players .slider-wrap .inner::after{
    width: 1.4rem;
    height: 1.4rem;
    border-radius: .3rem;
    background-color: var(--theme-acc);
    transform: translateY(-50%);
    left: auto;
    right: -.5rem;
}
#configure-game-body-players .slider-wrap .inner .val{
    position: absolute;
    right: -.5rem;
    bottom: -1.9rem;
    width: 1.4rem;
    background-color: var(--prmary-bg);
    text-align: center;
    color: var(--theme-acc) !important;
}
#configure-game-body-players .slider-wrap .keys p,
#configure-game-body-players .slider-wrap .inner .val{
    font-family: 'JetBrains Mono', monospace;
    font-weight: 900;
    font-size: 1rem;
    color: var(--mono-mid);
}
#minecraft-server-hosting-body .next-step-btn{
    align-self: flex-end;
    margin-top: 2rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--theme-acc);
    margin-right: 2rem;
    padding-right: 1rem;
    transition: color .3s;
}
#minecraft-server-hosting-body .next-step-btn.inactive{
    color: var(--mono-mid);
    pointer-events: none;
}
#minecraft-server-hosting-body .next-step-btn::after{
    padding: 2px;
    border: var(--theme-acc) solid;
    border-width: 0 3px 3px 0;
    transform: translateY(-50%) rotate(-45deg);
    left: auto;
    right: 0;
    transition: border-color .3s;
}
#minecraft-server-hosting-body .next-step-btn.inactive::after{
    border-color: var(--mono-mid);
}


#minecraft-wizard #we-recommend-slide{
    width: 95%;
}
#minecraft-wizard #we-recommend-slide .product{
    margin: 3rem 1.5rem 0;
}


#gaming-intro .nav{
    position: absolute;
    right: 12%;
    bottom: -2rem;
    flex-direction: row-reverse;
    padding-right: 3rem;
}
#gaming-intro .nav .btn-solid{
    width: 16rem;
    margin: 0 0 0 1.5rem;
}
#gaming-intro .nav .btn-solid.active,
#gaming-intro .nav .btn-solid:hover{
    color: var(--theme-acc);
    background-color: var(--prmary-bg);
}
#gaming-intro #intro-graphic{
    width: 40rem;
    height: 26rem;
    position: absolute;
    right: 12%;
    bottom: 0;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
}




#game-page-template .product.discord .icon{
    width: 7.5rem;
    position: absolute;
    top: -3rem;
    right: 4rem;
}
#discord-softwares button{
    padding: .4rem 1rem .4rem .8rem;
    margin: .15rem;
    box-sizing: border-box;
    background-color: var(--mono-lgt);
    border: 1px var(--mono-lgt-mid) solid;
    border-radius: .5rem;
    font-size: .9rem;
    color: var(--tertry-txt);
    font-weight: 500;
}
#discord-softwares button.active{
    background-color: var(--theme-acc);
    border-color: var(--theme-acc);
    color: #fff;
}
#discord-softwares button .icon{
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .5rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#discord-softwares button.active .icon{
    filter: brightness(0) invert(1);
}



.captcha-wrap{
    position: relative;
    width: 100%;
    height: 5rem;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    margin-top: -6rem;
    opacity: 0;
    pointer-events: none;
    transition: margin .3s, opacity .3s .3s, border-color .3s;
}
.captcha-wrap.active{
    margin-top: 0;
    opacity: 1;
    pointer-events: all;
}
.captcha-wrap .cover{
    position: absolute;
    background-color: var(--prmary-bg);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    opacity: 1;
    border: 2px var(--mono-lgt-mid) solid;
    pointer-events: none;
}
.captcha-wrap .cover p{
    font-weight: 500;
    font-size: .9rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1.5rem;
    padding-left: 2.8rem;
}
.captcha-wrap .cover p::after,
.captcha-wrap .cover p::before{
    height: 1.6rem;
    width: 1.6rem;
    border-radius: .5rem;
    background-image: none;
    transform: translateY(-50%);
    left: 0;
    box-sizing: border-box;
    transition: none;
}
.captcha-wrap .cover p::before{
    border: 2px var(--mono-mid) solid;
}
.captcha-wrap .cover p::after{
    opacity: 0;
    background-color: transparent;
    background-image: url(media/global/icons/wht_tick.svg);
    background-size: 60%;
}
.captcha-wrap.loading .cover p::before{
    width: 2rem;
    height: 2rem;
    background-image: url(media/global/spinner_double.svg);
    transform: translateY(-50%);
    left: 0;
    border: none;
}
.captcha-wrap.complete .cover p::after{
    opacity: 1;
}
.captcha-wrap.complete .cover p::before{
    background-color: var(--cl-grn);
    border-color: var(--cl-grn);
}
.captcha-wrap .cover .icon{
    position: absolute;
    width: 2.5rem;
    height: 2.5rem;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(media/global/captcha_logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#auth-captcha{
    position: absolute;
    top: 0;
    left: 0;
    width: 98%;
    height: 98%;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: none;
}
.captcha-wrap.active #auth-captcha{
    pointer-events: all;
}
#auth-captcha div{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}



#configure-cloud-ssh-keys,
#configure-cloud-hostname .input-field{
    padding: 1.2rem 1.2rem 1.2rem 4.2rem;
    border-radius: 1rem;
}

#configure-cloud-ssh-keys{
    pointer-events: none;
    text-align: left;
    font-weight: 500;
}
#configure-cloud-ssh-keys::before{
    width: 2rem;
    height: 2rem;
    background-image: url(media/global/icons/blu_key.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
    transform: translateY(-50%);
    left: 1.5rem;
}
#configure-cloud-ssh-keys::after{
    content: "COMING SOON";
    padding: .3rem 1rem;
    background-color: var(--theme-acc);
    color: #fff;
    border-radius: 1rem;
    font-weight: 600;
    font-size: .8rem;
    left: auto;
    transform: translateY(-50%);
    right: 1.5rem;
}
#configure-cloud-ssh-keys sup{
    color: var(--tertry-txt);
}


#configure-cloud-hostname::before{
    width: 2rem;
    height: 2rem;
    transform: none;
    left: 1.2rem;
    bottom: 1rem;
    top: auto;
    background-image: url(media/global/icons/blu_paperclip.svg);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: center;
}
#configure-cloud-hostname .input-field::placeholder{
    font-weight: 500;
}




#colocation-configure-column .card{
    width: 100%;
}
#colocation-configure-space .input-field,
#colocation-configure-power .input-field{
    width: 23%;
    margin-right: 1%;
}
#colocation-configure-power .slider-wrap{
    position: relative;
    padding: 1rem 2rem 2rem;
}
#colocation-configure-power .slider-wrap input{
    width: calc(100% - 4rem);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
    height: 100%;
    opacity: 0;
}
#colocation-configure-power .slider{
    position: relative;
    width: 100%;
    height: 10px;
    background-color: var(--mono-lgt);
    border: 1px var(--mono-lgt-mid) solid;
    border-radius: 5px;
}
#colocation-configure-power .slider .inner{
    width: 40%;
    background-color: var(--theme-acc);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
}
#colocation-configure-power .slider .inner::after{
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--theme-acc);
    border-radius: .5rem;
    left: auto;
    right: -.75rem;
    transform: translateY(-50%);
}



#colocation-order-summary .price{
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 1.5rem;
    font-family: 'Mulish', Arial, Helvetica, sans-serif;
}
#colocation-order-summary .price sup{
    font-size: 1rem;
    font-weight: 500;
    color: var(--tertry-txt);
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}
#colocation-order-summary .price sup.dollar{
    font-size: 2rem;
    vertical-align: middle;
    font-weight: 800;
    color: var(--prmary-txt);
}
#colocation-order-summary .tagline{
    color: var(--tertry-txt);
    font-size: 1rem;
    font-weight: 500;
    align-self: center;
}




@media (orientation: portrait) and (max-width: 1200px){
    .mob-hidden{
        display: none;
    }
    
    .w-30,
    .w-67,
    .w-third,
    .w-57,
    .w-40{
        width: 100%;
    }

    .spread{
        flex-wrap: wrap;
    }

    .break-mob{
        flex-direction: column;
    }
    .break-mob-rev{
        flex-direction: column-reverse;
    }
    .mob-top{
        margin-bottom: 6rem;
    }


    .section .graphic{
        width: 100%;
        height: 16rem;
        background-position: center;
    }
    .section .graphic.w-50{
        width: 100%;
        height: 16rem;
        background-position: center;
    }


    .popup{
        padding: 12rem 0 0 0;
    }


    .info-column{
        width: 45%;
    }
    .info-column h4, .card h4{
        white-space: wrap;
    }



    .banner .logo{
        max-height: 2rem !important;
        margin: 2.5%;
    }




    #index-intro{
        background-image: none;
    }
    .title h1{
        font-size: 3.8rem;
    }
    #index-intro .graphic{
        display: none;
    }

    #products-section .card{
        width: 48%;
    }


    #locations-section{
        overflow: hidden;
        width: 100vw;
        box-sizing: border-box;
        padding-bottom: 50rem;
    }
    #locations-map{
        left: 50%;
        transform: translateX(-50%);
    }



    #configure-cloud-body .slide .widget{
        width: 50%;
        margin-bottom: 3rem;
    }
    #configure-cloud-body .select{
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    #configure-cloud-body .select button{
        width: 49%;
    }
    #configure-cloud-body-os .os{
        width: 49%;
    }
    #configure-cloud-body-credentials .w-half{
        width: 100%;
    }
    #configure-cloud-hostname{
        margin-bottom: 1.5rem;
    }


    #reviews-wrap{
        display: none;
    }


    #gaming-body .spread .card{
        width: 100%;
    }
    #gaming-body .spread{
        margin-bottom: 0 !important;
    }
    .turned p{
        opacity: .1;
    }
    #minecraft-server-hosting-body .mc-card{
        width: 100%;
        margin: 0 0 3rem;
    }
    #minecraft-server-hosting-body .pillager{
        bottom: 15%;
        height: 16rem;
        left: 3rem;
    }
    #minecraft-server-hosting-body .villager{
        height: 16rem;
    }
    #minecraft-server-hosting-body .title.mini{
        width: 100%;
    }
    #minecraft-server-hosting-body .graphic{
        background-size: contain !important;
    }
    #gaming-features .widget{
        width: 48%;
    }
    #gaming-features .title.mini{
        width: 100%;
    }
    #gaming-features .title.mini p{
        max-width: 100%;
    }
    #gaming-features .graphic{
        margin-bottom: 3rem;
    }
    #gaming-features-allay{
        position: absolute;
        right: 2rem;
        top: 8rem;
    }
}