@font-face {
  font-family: "norms"; font-display: swap; src: url('../fonts/RobotoVarFont.woff2');
  }

@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');


h1, h2, h3, h4, h5, h6, #menu>a, a, p, li, .counter {
  font-family: 'norms', Fallback, sans-serif;
  }

a {
  color:rgb(80,80,80);
  letter-spacing:0.12em;
  transition:color 0.5s;
  font-size:14px;
  text-decoration:none;
  cursor:pointer;
  }

#menu>a {
  padding-left:calc(1vw + 5px);
  font-variation-settings: 'wght' 400;
  color:white;
  }

#menu>a:hover {
  color:var(--brandcolorhl);
  }

:root {
  --brandcolor:#00D186;
  --brandcolorhl:#13E79B;
  --textcolor: #717294;
  }

body {
  max-width:100%;
  margin:0px;
  background:#151C30;
  }

main {
  z-index:0;
  width:100%;
  will-change:transform;
  }

img[data-srcset], [data-srcset] {
  opacity:0;
  }

img, [srcset] {
  opacity:1;
  transition:opacity 1.25s,
  transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
  }

body::-webkit-scrollbar {
  width: 10px;
  }

body, html {
  scrollbar-width:thin;
  scrollbar-color: #475894 #060d25;
  }

body::-webkit-scrollbar-track {
  background: #060d25;
  }

body::-webkit-scrollbar-thumb {
  background-color: #475894;
  }

::-moz-selection {
  color: white;
  background: var(--brandcolor);
  }

::selection {
  color: white;
  background: var(--brandcolor);
}



h1 {font-size: 30px; color:white; line-height:110%; letter-spacing:-0.005em; font-variation-settings: 'wght' 700;} 
@media screen and (min-width: 320px) { h1 {font-size: calc(36px + 15 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { h1 {font-size: 100px;}}
h2 {font-size: 25px; color:white; line-height:110%; letter-spacing:-0.005em; font-variation-settings: 'wght' 600;} 
@media screen and (min-width: 320px) { h2 {font-size: calc(25px + 15 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { h2 {font-size: 70px;}}
h3 {font-size: 14px; color:white; line-height:130%; letter-spacing:-0.005em; font-variation-settings: 'wght' 500;} 
@media screen and (min-width: 320px) { h3 {font-size: calc(14px + 6 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { h3 {font-size: 40px;}}
h4 {font-size: 12px; color:white; line-height:130%; letter-spacing:-0.005em; font-variation-settings: 'wght' 500;} 
@media screen and (min-width: 320px) { h4 {font-size: calc(12px + 6 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { h4 {font-size: 34px;}}
h5 {font-size: 12px; color:var(--textcolor); line-height:130%; letter-spacing:-0.005em; font-variation-settings: 'wght' 450;} 
@media screen and (min-width: 320px) { h5 {font-size: calc(12px + 2 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { h5 {font-size: 26px;}}
h6 {font-size: 12px; color:var(--textcolor); line-height:130%; letter-spacing:0.05em; text-transform: uppercase; font-variation-settings: 'wght' 600; margin:  20px 0 20px 0;} 
@media screen and (min-width: 320px) { h6 {font-size: calc(12px + 2 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { h6 {font-size: 26px;}}
p { line-height:150%; font-size: 11px; color:var(--textcolor);} 
@media screen and (min-width: 320px) { p {  font-size: calc(11px + 3 * ((100vw - 320px) / 680)); } } 
@media screen and (min-width: 2000px) { p {  font-size: 14px; } }
.anchor { text-align:right; padding:0px 0px 0px 2vw; margin:0px;}    
@media screen and (max-width: 930px) { #logoslogan {display:none;} #signup {display:none;}}

  .cta {
    background-color:var(--brandcolor);
    border-color:var(--brandcolor);
    text-shadow: 0 1px 3px #0000004b;
    border-radius:5px;
    display:inline-block;
    text-align:center;
    cursor:pointer;
    font-variation-settings: 'wght' 600 !important;
    letter-spacing:-0.00em;
    color:white;
    font-family:'norms';
    font-size:14px;
    padding:16px 29px !important;
    text-decoration:none;
    transition: background-color 0.3s;
    }

  .cta:hover {
    background-color:var(--brandcolorhl);
    color:white !important;cursor:pointer;
    }

  .cta2:hover {
    background-color:rgba(255,255,255,0.12) !important;
    cursor:pointer;
    }

  a:hover {
    color:var(--brandcolorhl);
    cursor:pointer;
    }

  span.accent-color {
    color:var(--brandcolor);
  }

  /* Use this to stack columns in mobile */
  @media screen and (max-width:1150px) { .stack {flex-direction:column;} }

   
/* ############################################################################################# */

/* ######### WELCOME ######### */

  .layerbg {
    position:relative;
    top:-4vw;
    right:-10vw;
    width:auto;
    height:55vw;
    }

  .layerwrap {
    position:relative;
    width:100%;
    display:flex;
    justify-content:flex-end;
    overflow:hidden;
    max-height:85vh;
    }

  #welcome {
      position:absolute;
      top:12vw;
      left:calc(7vw + 3vh);
    }

  .contractwrap {    
      padding: 5px 20px;
      background: rgba(0,0,0,.2);
      display: flex;
      width: max-content;
      border: 1px solid #20253A;
      box-sizing: border-box;
      border-radius: 5px;
      align-items: center;
      margin:0;
  }

  .contractwrap label {  
        color: var(--brandcolor);
        font-family: norms;
        text-transform: uppercase;
        font-size: 11px;
        padding: 0 20px 0 0;
        border-right: 1px solid #20253A;
  }

  .contractwrap input {
    background: transparent;
    border: 0px;
    color: #FFFFFF;
    font-family: monospace;
    font-size: 14px;
    width: 360px;
    padding: 10px 20px;
  }

  .contractwrap input:focus {
    outline: none;
  }

  .contractwrap .btn {
    background-color:  transparent;
    border:  0px;
    transition: all 0.3s ease;
    cursor:  pointer;
  }

   .contractwrap .btn svg {
    fill: #FFFFFF;
    margin-top:  0px;
    transition: all 0.1s ease;
   }

  .contractwrap .btn:active svg,   .contractwrap .btn:focus svg {
    fill:  var(--brandcolor);
    margin-top:  -15px;
    transition: all 0.1s ease;
  }


  @media screen and (max-width:1150px) {
    .layerbg {position:relative;height:50vh;top:0px;left:auto;right:auto;margin: auto;} 
    .layerimage {position:absolute;height:50vh;left: 50%;margin-left: -40vh;} 
    .layerwrap {position:relative;display:flex;justify-content:center;align-items:center;overflow:hidden;}
    .content {margin:  auto; text-align:  center;}
    .content__container__list {text-align: center;}
    .contractwrap {margin: 0 auto!important; padding: 5px 10px 5px 5px!important;}
    .contractwrap label {padding:  5px 10px;}
    .contractwrap input {width: 50vw!important; padding: 5px 10px!important;} 
    #welcome {position:relative;top:0px;left:0px;text-align:center;padding-bottom:calc(7vw + 3vh);}

    @media screen and (hover: none) and (pointer: coarse) and (orientation: landscape) {.layerbg {height:90vh;}}
  }


/* ######### FEATURES ######### */

  #features {
    display:flex;
    flex-flow: row wrap;
    align-items:stretch;
    justify-content:center;
    box-sizing:border-box;
    padding:0px calc(7vw + 3vh);
    opacity:0;
    transition:opacity 1s ease;
    transition-delay:0.5s;
  }

  .feature {
    padding:  40px 40px 30px 40px;
    background: rgb(34,39,60);
    background: linear-gradient(90deg, rgba(34,39,60,1) 0%, rgba(34,39,60,0) 100%);
    border-radius: 10px;
    position: relative;
    width:  430px;
    margin: calc(1vw + 1vh) calc(1vw + 1vh);
    box-sizing:  border-box;
  }

  .feature img {
    position: absolute;
    top:  -35px;
    left:  10px;
    height:  25px;
    width:  25px;
    padding: 25px;
    background-image:  url('../img/feature-icon-bg.svg');
    background-size:  cover;
    background-repeat:  no-repeat;
  }

  .feature h3 {
    font-variation-settings: 'wght' 500;
  }

  @media screen and (min-width: 320px) { .feature h3 {font-size: calc(12px + 6 * ((100vw - 320px) / 680));}}
  @media screen and (max-width: 750px) { .feature img {top:  -15px;height:  20px;width:  20px;padding: 15px;}}


  .feature p {
    color:#717294;
  }



/* ######### STAKING ######### */

  #staking h2 {font-size: 25px; color:white; line-height:130%; letter-spacing:-0.005em; font-variation-settings: 'wght' 600;} 
  @media screen and (min-width: 320px) {#staking h2 {font-size: calc(25px + 10 * ((100vw - 320px) / 680));}}
  @media screen and (min-width: 2000px) { #staking h2 {font-size: 60px;}}

  #staking .cta {margin: 20px 0;}


/* ######### TOKENOMICS ######### */

  #tokenomics .block1 {
    display:flex;
    align-items:flex-start;
    justify-content:space-between; 
    flex-wrap:  wrap;
    box-sizing:border-box;
    background: rgb(34,39,60);
    background: linear-gradient(90deg, rgba(34,39,60,0) 0%, rgba(34,39,60,1) 100%);
    width:100%;
    border-radius:7px;
    border:1px solid #20253A;
    padding:calc(2vw + 2vh) calc(4vw + 3vh);
  }

  #tokenomics .tokenomic {
    box-sizing: border-box;
    width: 300px;
  }

  #tokenomics .tokenomic p {
    font-variation-settings: 'wght' 600;
    margin: 0 0 30px 0;
    color: white;
    line-height:150%; font-size: 14px;}

@media screen and (min-width: 320px) { #tokenomics .tokenomic p {  font-size: calc(12px + 6 * ((100vw - 320px) / 680)); } } 
@media screen and (min-width: 2000px) { #tokenomics .tokenomic p {  font-size: 16px; } }

  #tokenomics .block2 {
    display:flex; 
    margin:  50px 0;
    align-items:center;
    justify-content:space-between;
    flex-wrap:  wrap;
    box-sizing:border-box;
    background: rgb(34,39,60);
    background: linear-gradient(90deg, rgba(34,39,60,1) 0%, rgba(34,39,60,0) 100%);
    width:100%;
    border-radius:7px;
    border:1px solid #20253A;
    padding:calc(2vw + 2vh) calc(4vw + 3vh);
  }

  #tokenomics .block2 .col {
    width:  100%;
    max-width:  300px;
  }

  #tokenomics .block2 .col p {
    color: white;
  }

  #tokenomics .block2 .trustpilot {
    text-align: center;

  }

    @media screen and (min-width:1150px) {
      #tokenomics .block2 .col:nth-child(1) {order:  2;}
    }

    @media screen and (max-width:1150px) {
      #tokenomics .block2 .trustpilot img {width: 35vw!important; max-width: 200px;}
    }

  .checklist {
    list-style-type: none;
    padding:  0 0 0 0px;
  }

  .checklist li {
    margin: 30px 0;
    line-height:120%;
    font-size: 18px;
    color:white;
    font-variation-settings: 'wght' 450;
    font-size: 11px;} 
@media screen and (min-width: 320px) {  .checklist li {  font-size: calc(11px + 3 * ((100vw - 320px) / 680)); } } 
@media screen and (min-width: 2000px) {  .checklist li {  font-size: 14px; } }

  .checklist li:before {
    content: "";
    background-image: url("../img/list-check.svg");
    background-size: 20px 20px;
    display: inline-block;
    margin-right: 20px;
    width:  20px;
    height:  20px;
    vertical-align:  middle;
  }


/* ######### ABOUT CBET.GG ######### */

#about {background-image:url(../img/hand_bg.jpg);background-size: contain;background-position:right top;background-repeat: no-repeat;}

  #about .block1 {
    display:flex; 
    margin:  50px 0 20px 0;
    align-items: flex-start;
    justify-content:space-between;
    box-sizing: border-box;
    background: rgb(34,39,60);
    background: linear-gradient(90deg, rgba(34,39,60,1) 0%, rgba(34,39,60,0) 100%);
    width:100%;
    border-radius:7px;
    border:1px solid #20253A;
    padding:calc(2vw + 2vh) calc(4vw + 3vh);
    }

  #about .about-text {
    width:  45%;
  }

  #about .about-img {
    width:  50%;
    height: 40vw;
  }

  @media screen and (max-width:1150px) {
    #about .about-text {width: 100%;}
    #about .about-img {width: 100%; margin-bottom:  calc(6vw + 10vh); margin-top:  -5%;}
    #about .about-img .gems {margin-left: -100%!important; margin-top:  45%;}
    #about .splitdiv {flex-direction:  column-reverse;}
    #about .about-img .gems, #about .about-img .phones {display: none;}
    #about .about-img .full {display:  block!important;}
  }

  #about .block2 {
    display:flex; 
    margin:  20px 0;
    align-items: flex-start;
    justify-content:space-evenly;
    flex-flow:  row wrap;
    box-sizing:border-box;
    width:100%;
    padding: 0 calc(4vw + 3vh);
  }

  @media screen and (max-width:1150px) {#about .block2 {margin: 25px 0 0 0;}}

  #about h5 {
    color:  white;
    font-size:  20px;
    line-height:130%;
    letter-spacing:-0.005em;
    font-variation-settings: 'wght' 600;
  }

  #about p {
    color:#717294;
    line-height:150%;
  }

#about .counter {font-size: 30px; color:white; line-height:110%; letter-spacing:-0.005em; font-variation-settings: 'wght' 800;} 
@media screen and (min-width: 320px) { #about .counter {font-size: calc(36px + 15 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { #about .counter {font-size: 100px;}}



/* ######### INFOGRAPHIC ######### */

#infographic {
      width:100%;
      display:flex;
      justify-content:center;
      align-items:center;
      background-image:url(../img/clouds.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position:center center;
      height:80vh; 
}

  #infographic h2 {
    line-height: 100%;
    line-height: unset;
    box-sizing:border-box;
    text-align:right;
    margin: 40px auto 0;
  }

  .line1 {
    font-size: 15px;
    padding: 0px 130px 0px 0px;
    font-size: 20px; color:white; line-height:130%; letter-spacing:-0.005em; font-variation-settings: 'wght' 500;} 
    @media screen and (min-width: 320px) { .line1 {font-size: calc(20px + 6 * ((100vw - 320px) / 680));}}
    @media screen and (min-width: 2000px) { .line1 {font-size: 40px;}}

  .line2 {
    padding: 0px;
    color:  transparent;
     -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: white;
    line-height: 90%;
    font-size: 55px;
    letter-spacing:-0.005em;
    font-variation-settings: 'wght' 800;} 
@media screen and (min-width: 320px) { #infographic h2 {margin: 20px calc(2vw + 6vh) calc(5vw + 2vh);} .line2 {font-size: calc(65px + 15 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { .line2 {font-size: 100px;}}

  .line3 {
    font-size: 15px;
    padding: 0px 0px 0px 0px;
    font-size: 20px; color:white; line-height:130%; letter-spacing:-0.005em; font-variation-settings: 'wght' 500; text-align: right;} 
    @media screen and (min-width: 320px) { .line3 {font-size: calc(20px + 6 * ((100vw - 320px) / 680));}}
    @media screen and (min-width: 2000px) { .line3{font-size: 40px;}}

  @media screen and (max-width:1150px) {
    #infographic {height:  50vh}
    #infographic .infographic-img {margin:  0!important;}
    #infographic .infographic-img img {max-width:  70vw!important;}
    #infographic {margin-bottom: 5vh;}
  }



/* ######### WHERE TO BUY ######### */

  #wheretobuy {}

  #wheretobuy .col {
    width: 38%;
    padding:  40px 40px 30px 40px;
    border-radius: 10px;
    position: relative;
    margin: calc(1vw + 1vh) calc(1vw + 1vh);
    box-sizing:  border-box;
    text-align:  center;
  }

  #wheretobuy .cbet {
    background:#22273C;
    border:  1px solid #22273C;
    background-image: radial-gradient(farthest-corner at 0px 0px,#1D545A 2%, #22273C 30%);
  }

  #wheretobuy .cbet .popular {
    width: 130px;
    position: absolute;
    top: -12px;
    left: -10px;
  }

  #wheretobuy .pancakeswap {
    background:#161B30;
    border:  1px solid #20253A;
  }

  #wheretobuy .cbet h3 {
    margin-bottom:  10px;
  }

 #wheretobuy .cbet h3.neonText {
  color: #fff;
  text-transform: uppercase;
  text-shadow:
      0 0 1px #fff,
      0 0 3px rgba(255,255,255,.8),
      0 0 15px rgba(255,255,255,.5);
      margin:  10px auto 30px;
}


  #wheretobuy .cta {
    margin-bottom:  30px;
  }

  #wheretobuy .pancakeswap .cta {
    background-color: #39C9D2;
  }

    #wheretobuy .pancakeswap .cta:hover {
      background-color: #4DDDE5;
    }

  #wheretobuy h6 {line-height: 175%;}

  #wheretobuy h6 span {
    font-variation-settings: 'wght' 300;
  }


  #wheretobuy .payment-methods {
    display:  block;
    flex-wrap:  wrap;
    align-items: center;
    justify-content:  center;
    flex-direction:  row;
    margin-bottom:  20px;
  }


  #wheretobuy .payment-methods img { margin:  10px 15px; vertical-align: middle;}

  #referral {
    width: 80%;
    margin: calc(1vw + 1vh) calc(1vw + 1vh);
  }

  #referral .block {
    padding:  40px 40px 30px 40px;
    background:#22273C;
    border:  1px solid #22273C;
    background: rgb(26,58,89);
    background: linear-gradient(90deg, rgba(26,58,89,1) 0%, rgba(34,39,60,1) 23%, rgba(34,39,60,0) 100%);
    border-radius: 10px;
    position: relative;
    box-sizing:  border-box;
    display:  flex;
    flex-flow:  wrap;
    align-items: center;
    justify-content:space-between;
  }

  #referral .block h3 {
    margin:  10px 0;
  }

  #referral .block .cta {
    background-color:  #0088CC;
    padding:  10px 29px 10px 23px!important;
    margin: 0;
  }

  /* Mobile devices */

  @media screen and (max-width:1150px) {
    #wheretobuy .col {width: 100%;}
    #referral {width:  100%;}
    #referral .block {text-align: center; justify-content: center;}
    #referral p img {width: 16px;}
    .cta {padding:  12px 20px!important;}
    #wheretobuy .cta {padding:  12px 20px!important; margin:  20px 0!important;}
    .cta img {width:  25px!important; margin: 0px 5px 0 0!important;}
    #payment-methods img {}
  }

/* ######### REFERRAL PROGRAM ######### */

 

  b {font-variation-settings: 'wght' 600;}

/* ######### ROADMAP ######### */
  
  #roadmap {}

  #roadmap .timeline {
    display:  flex;
    flex-direction: column;
    padding: 80px 60px;
  }


  #roadmap .timeline .step {
      text-align: left;
      width:  100%;
      margin: 0 auto;
      display: flex;
      align-content: stretch;
  }

  #roadmap .timeline .step:nth-child(even) {
    text-align: right;
  }

  #roadmap .timeline .step .pointer {
    width: 30px;
    height: 100%;
    display: block;
    position:  absolute;
  }

  #roadmap .timeline .step h4 span {
    color:  var(--brandcolor);
    font-variation-settings: 'wght' 300;
    padding-right: 10px;
  }

  #roadmap .timeline .step h4 {margin:  0 0 20px 0;}

  #roadmap .timeline .step .pointer .line {
    width: 1px;
    margin-left: calc(50% - 2px);
    border-right: 2px dashed #373856;
    height:  100%;
  }

  #roadmap .timeline .step.checked .pointer .line {
    border-right: 2px solid var(--brandcolor);
  }
  #roadmap .timeline .step.checked .pointer .bubble {
    background-color: var(--brandcolor);
  }

  #roadmap .timeline .step.checked .pointer .bubble {
    content: url('../img/check-dark.svg');
    padding: 5px;
    left: calc(50% - 20px);
    margin:  0px;
  }

  #roadmap .timeline .step.checked h4 {
    text-decoration: line-through;
  }

  #roadmap .timeline .step .pointer .bubble {
    width:  20px;
    height: 20px;
    background: white;
    border-radius: 20px;
    position: absolute;margin:  5px;
    border: 5px solid #151C30;
    left: calc(50% - 20px);
    top: -5px;
  }



  #roadmap .timeline .step .wrap {
    padding-left: calc(50% + 40px);
    position:  relative;
    width: 100%;
  }

  #roadmap .timeline .step:nth-child(even) .wrap {
    padding-right: calc(50% + 40px);
    padding-left: 0;
  }

  #roadmap .timeline .step:nth-child(odd) .pointer {
    left: calc(50% - 15px);
  }

  #roadmap .timeline .step:nth-child(even) .pointer {
    right: calc(50% - 15px);
  }

  @media screen and (max-width:1150px) {
      #roadmap .timeline .step:nth-child(even) {text-align: left;}
      #roadmap .timeline .step .wrap, #roadmap .timeline .step:nth-child(even) .wrap {padding:  10px 0px 30px 10px;}
      #roadmap .timeline .step:nth-child(odd) .pointer, #roadmap .timeline .step:nth-child(even) .pointer {left: -30px;}
      #roadmap .timeline .step.checked h4 {}
      #roadmap .timeline .step .pointer .bubble {width:  10px;height: 10px; left: calc(50% - 15px);}
      #roadmap .timeline .step.checked .pointer .bubble {left: calc(50% - 15px);}
  }

/* ######### PARTNERS ######### */
  
  #partners {}
  #partners p {text-align: center; padding: 20px; color:  #FFF;}
  #partners .partners {display: flex; justify-content: space-evenly; flex-flow:  row wrap; align-items: center; padding: 50px 20px;}
  #partners .partners .partner-logo {margin: 20px;}

/* ######### COMMUNITY ######### */

#community {
  background-image:url(../img/stones_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
  }

  #community .col {
    width: 50%;
  }

  #community .col h2 {
    margin: 0;}

  #community .col h2 .outline {
    display: block;
    padding:  20px 0 0 40px;
    z-index:  1;
    font-family: 'norms', Fallback, sans-serif;
    color:  transparent;
     -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--brandcolor);
    font-size: 26px;
    line-height:110%;
    letter-spacing:-0.005em;
    font-variation-settings: 'wght' 700;
  } 
@media screen and (min-width: 320px) { #community .col h2 .outline {font-size: calc(30px + 15 * ((100vw - 320px) / 680));}}
@media screen and (min-width: 2000px) { #community .col h2 .outline {font-size: 100px;}
  }

  #community .col:first-child p {
    padding:  0 0 0 80px;
    width:  80%;
    box-sizing: border-box;
    color:  white;
  }

  #community .col:last-child {
    width: 30%;
  }

  @media screen and (max-width:1150px) {
    #community .col:first-child p, 
    #community .col h2 .outline {padding: 0px;}
    #community .col {width: 90%;} #community .col:last-child {width: 80%;}
    #community .col .socialmedia img {width:  20px!important; left: -20px; top:  25px;}
  }

  #community .socialmedia {
    position:  relative;
    padding:  10px 20px;
    display: block;
    letter-spacing:-0.005em;
    border-radius: 5px;
  }

  #community .socialmedia:hover h3 {
    color:  var(--brandcolor);
    transition: color 0.5s;
  }

  #community .socialmedia img {
    position: absolute;
    left:  -40px;
    top:  35px;
    transition: fill 0.5s;
  }

  #community .socialmedia:hover img {
    fill:  var(--brandcolor)!important;
    transition: fill 0.5s;
  }

/* ######### FAQ ######### */


#faq {background: rgb(21,28,48);
background: linear-gradient(180deg, rgba(21,28,48,1) 0%, rgba(13,16,28,1) 100%);}

.accordion { border: 0px; margin:0px; padding:0px calc(7vw + 3vh) calc(7vw + 3vh) calc(7vw + 3vh); box-sizing:border-box; background:transparent; width:100%;} .accordion:hover { background:transparent;}
.accordion * { outline: none; background:transparent;}
.accordion .accordion__item { border: 0px; margin:0px; background:transparent;}
.accordion input[type="radio"] { position: absolute; pointer-events: none; opacity: 0; height: 0px; width: 0px; border: 0px; padding: 0px; }
.accordion input[type="radio"]:checked ~ label > div > .accordionarrow { transform: scaleY(-1); } 
.accordion input[type="radio"]:checked ~ section { max-height: 150px;}
.accordion label { cursor: pointer; display: block;}
.accordion section { overflow: hidden; max-height: 0px; transition: max-height 0.5s ease-in-out;}
.accordiontext {color: #727194; width:600px; max-width:70vw; line-height:170%;}
.accordionquestion {font-variation-settings: 'wght' 100; margin:0px; padding:30px 0px;}

/* ######### MISC. ######### */



.flags {text-align: right;}
@media screen and (max-width:1150px) {.flags {text-align: center;}}

  /* Outline titles */
  .outline-title-left,
  .outline-title-right,
  .outline-title-center {position:  relative; width: 100%; text-align: center;}

  .outline-title-left h2,
  .outline-title-right h2,
  .outline-title-center h2 {
    display:  block;
    margin-top:  -50px;
    margin-bottom:  20px;
    font-size: 25px;
    color:white;
    line-height:130%;
    letter-spacing:-0.005em;
    font-variation-settings: 'wght' 600;
  }

  .outline-title-left span.outline,
  .outline-title-right span.outline,
  .outline-title-center span.outline {
    display:  block;
    font-size: 50px;
    z-index:  1;
    font-family: 'norms', Fallback, sans-serif;
    font-variation-settings: 'wght' 600;
    color:  transparent;
     -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #2D3245;

    /* Disable select */
    pointer-events:none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }



  @media screen and (min-width: 320px) {.outline-title-left h2, .outline-title-right h2, .outline-title-center h2 {font-size: calc(25px + 10 * ((100vw - 320px) / 680));} .outline-title-left span.outline, .outline-title-right span.outline, .outline-title-center span.outline {font-size: calc(40px + 10 * ((100vw - 320px) / 680));}}
  @media screen and (min-width: 2000px) {.outline-title-left h2, .outline-title-right h2, .outline-title-center h2 {font-size: 60px;}  .outline-title-left span.outline, .outline-title-right span.outline, .outline-title-center span.outline {font-size: 120px;}}


  /* Split */
  .splitdiv {flex-direction:row;}
  @media screen and (max-width:1150px) {
    .splitter {margin:40px 0px !important; width:100% !important; height:1px !important;}
    .splitdiv{flex-direction:column; padding:calc(4vw + 3vh) !important; justify-content:center !important; height:auto !important;}
    .splittext{text-align:center !important;}
    .splittextwrap > h2, .splittextwrap > p {width:100%;}
    .splittextwrap > a {align-self:center;}
    .splittextwrap {padding:40px;}
  }


  /* Various shit */
  @media screen and (min-width:655px) {
  #menuicon {display:none !important;}
  .outline-title-left {text-align: left;}
  .outline-title-left span.outline {margin-left: -30px;}
  .outline-title-right {text-align: right;}
  .outline-title-right span.outline {margin-right: -30px;}
  .outline-title-center {text-align: center;}
  .outline-title-center span.outline {}
}  

  @media screen and (max-width:655px) { #menu .fade {display:none !important;} }
  @media screen and (max-width:340px) { h2.numera {font-size:20px;}  #logotext {display:none;}}
  @media screen and (max-width:930px) { #boxcontainer {flex-wrap:wrap;} }

  .wrapper1 {padding:calc(2vw + 3vh) calc(10vw + 4vh); box-sizing: border-box;}
  .wrapper2 {padding: 0 calc(16vw + 8vh);  box-sizing: border-box;}
  @media screen and (max-width: 655px) {.wrapper1, .wrapper2 {padding:calc(4vw + 3vh) calc(4vw + 2vh);}}


/* Lang menu */

.nav-wrapper {
  text-align: center;
  margin-left:calc(2vw + 4px);
  margin-right:calc(2vw + 4px);
}
  .sl-nav {
  display: inline;
}
.sl-nav ul {
  margin:0;
  padding:0;
  list-style: none;
  position: relative;
  display: inline-block;
}
.sl-nav li {
  cursor: pointer;
  padding:  13px 0;
}
.sl-nav li ul {
  display: none;
}

.sl-nav li .lang-icon {
  width:18px;
  vertical-align: middle;
  fill:#FFFFFF;
  margin-right: 5px;
}

.sl-nav li .current-lang {
  width:22px;
  vertical-align: middle;
}

.sl-nav li .down-icon {
  width:10px;
  vertical-align: middle;
  margin-left: 5px;
}

.sl-nav li:hover ul {
  position: absolute;
  top:46px;
  right:-15px;
  display: block;
  background: rgba(0, 0, 0, 0.75);
  width: 80px;
  padding-top: 0px;
  z-index: 1;
  border-radius:3px;
}
.sl-nav li:hover .triangle {
  position: absolute;
  top: 32px;
  right: -10px;
  z-index:10;
  height: 14px;
  overflow:hidden;
  width: 30px;
  background: transparent;
}
.sl-nav li:hover .triangle:after {
  content: '';
  display: block;
  z-index: 20;
  width: 15px;
  transform: rotate(45deg) translateY(0px) translatex(10px);
  height: 15px;
  background: rgba(0, 0, 0, 0.75);
  border-radius:2px 0px 0px 0px;
}
.sl-nav li ul li {
  position: relative;
  text-align: left;
  background: transparent;
  padding: 15px 15px;
  padding-bottom:0;
  z-index: 2;
  font-size: 15px;
  color: #fff;
}

.sl-nav li ul li a {
  color:  white;
}

.sl-nav li ul li a img {
  width:20px;
  vertical-align: middle;
}

.sl-nav li ul li a span {
  vertical-align: middle;
}

.sl-nav li ul li:last-of-type {
  padding-bottom: 15px;
}
.sl-nav li ul li span {
  padding-left: 5px;
}
.sl-nav li ul li span:hover, .sl-nav li ul li span.active {
  color: var(--brandcolor);
}



/** CONVERTER **/

  #converter {
    box-sizing:border-box;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-around;
  }


  #converter .converter-text {
    padding: calc(3vw + 2vh);
    box-sizing: border-box;
  }

  @media screen and (min-width:1400px) {
    #converter .converter-text, #converter .converter-widget {
    width: 50%;
  }
}

  #converter .converter-widget {
    border:solid 1px #4B4F6D;
    flex-direction: row;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: calc(3vw + 2vh);
    border-radius: 7px;
    background: #151C30;
  }

  #converter .converter-widget .widget-row {
    width: 100%;
  }

  #converter .converter-widget .widget-row input {
    width: 100%;
    margin-bottom: 15px;
    color:white;
    font-variation-settings: 'wght' 500;
    cursor:text !important;
    display: inline-block;
  }

  #converter .converter-widget .widget-row .select {
    width:  100%;
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
  }

  #preview_currency_in, #preview_currency_out, #preview_currency_in_2, #preview_currency_out_2 {
    width: 44px;
    margin-top: 12px;
    margin-left: 10px;
    display: inline-block;
    position: absolute;
    z-index: 999;
  }

  #preview_currency_in img, #preview_currency_out img, #preview_currency_in_2 img, #preview_currency_out_2 img {
    width: 100%;
  }


  #converter .converter-widget .widget-row .select select,
  #converter .converter-widget .widget-row input {
    transition:all 0.5s ease;
    font-family: "norms";
    font-size:17px;
    letter-spacing:0.02em;
    display: inline-block;
    cursor: pointer;
    padding: 25px 25px;
    outline: 0px;
    border: 0px solid #ff0000;
    border-radius: 7px;
    background: #293258;
    color: #ffffff;
    box-sizing: border-box;
    appearance: none;
    -moz-appearance: none!important;
    -webkit-appearance: none!important;
  }

 #converter input[type=text], #converter input[type=button], #converter input[type=submit], #converter select {
-webkit-appearance: none!important;
}

  #converter .converter-widget .widget-row .select select {
    width: 100%;      
    font-variation-settings: 'wght' 100;
    padding: 25px 25px 25px 70px;
  }

  ::placeholder { color: white; opacity:1;}   
  .select select::-ms-expand {display: none;}
  .select select:disabled { opacity: 0.5; pointer-events: none;}

  .select_arrow {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 5px;
    height: 5px;
    border: solid #ffffff;
    border-width: 0px 1.5px 1.5px 0px;
    display: inline-block;
    padding: 2px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

  .select select:hover ~ .select_arrow, .select select:focus ~ .select_arrow { border-color: #ffffff;}
  .select select:disabled ~ .select_arrow { border-top-color: #667c99;}

  @media screen and (min-width:1400px) {
    #converter .converter-widget .widget-row .select {width:  49%;}
    #converter .converter-widget .widget-row input {width: 50%;}
    #converter .timemachine-logo {margin: 0 0 30px 0;}
  }

  #converter .timemachine-logo {
    margin: 0 auto 30px auto;
    width: 80%;
    display: block;
    max-width: 350px;
  }

 @media screen and (min-width:1400px) {
    #converter .timemachine-logo {margin: 0 0 30px 0;}
  }

  #converter .timemachine {
    padding: calc(3vw + 2vh);
    background: rgb(34,39,60);
    background: linear-gradient(90deg, rgba(34,39,60,0) 0%, rgba(34,39,60,1) 100%);
    border: 1px solid #20253A;
  }

  #converter .converter-widget.timemachine .widget-row .select select,
  #converter .converter-widget.timemachine .widget-row input {
    background: rgba(0,0,0,.4);
    border: 1px solid #20253A;
    color: #ffffff;
  }

  .timemachine-result {
    background: rgba(0,0,0,.4);
    padding: 20px;
    border-radius:10px;
    border: 1px solid #20253A;
  }

  .timemachine-result-label {
    margin: 0;
  }

  .timemachine-result-cbet {
    color: #FFFFFF;
    margin: 0 0 10px 0;
    font-family: 'Inconsolata', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .timemachine-result-currency {
    color: var(--brandcolor);
    margin: 0;
    font-family: 'Inconsolata', monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
    
    @media screen and (min-width:655px) { #menuicon {display:none !important;} }  
    @media screen and (max-width:930px) { #boxcontainer {flex-wrap:wrap;} h1.boxos {font-size:60px; } 
}