@charset "UTF-8";
/* CSS Document */

body {
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #fbfbfb;
  line-height: 1.5;
  font-family: "Noto Sans", sans-serif;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
  color: #fef0ca;
}

a:hover {
  color: #eee;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #fef0ca;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 30px 0;
}

.center-box {
	width: 50%;
	min-width: 250px;
	margin: 0 auto;
}

.center {
	text-align: center;
}

.not-on-mobile {
	display: none;
}

.imgframe {
	border: 3px #fef0ca solid;
	width: 95%;
	margin: 0 auto;
}

.language {
	text-align: right;
	font-size: 1.2em;
}

/*parallax styles*/

.box {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-perspective: 10px;
          perspective: 10px;
}

header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  z-index: -1;
}

.layer0 {
	position: absolute;
  	height: 100vh;
	width: 100%;
  	z-index: -2;
  	-o-object-fit: cover;
  	   object-fit: cover;
	display: block;
}

.layer1,
.layer2,
.layer3,
.layer4,
.layer5,
.layer6,
.layer7,
.layer8 {
	position: absolute;
  	height: 100vh;
	width: 100%;
  	z-index: -1;
  	-o-object-fit: cover;
  	   object-fit: cover;
	display: none;
}

/*header styles - mobile*/

.bottom {
  position: relative;
  background: #000;
  min-height: 100vh;
  z-index: 1;
  background-image: url("coins-bg.png");
  background-position: center bottom; 
  background-repeat: no-repeat;
}

.inner-wide {
  z-index: 3;
  padding: 30px 0;
}

.inner {
  z-index: 3;
  padding: 50px 0;
}

.column-3 {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
  -webkit-column-width: 250px;
     -moz-column-width: 250px;
          column-width: 250px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

.column-2 {
  -webkit-column-count: 2;
     -moz-column-count: 2;
          column-count: 2;
  -webkit-column-width: 350px;
     -moz-column-width: 350px;
          column-width: 350px;
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

.divider {
  width: 200px;
  max-width: 100%;
  margin: 0 auto;
}

/*youtube video*/

.video-container {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.video-container::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*socials*/

svg {
	width: 24px;
	height: 24px;
	fill: #fff;
	padding-right: 10px;
}

svg:hover {
	fill: #fef0ca;
}

.social {
	height: 24px;
	-webkit-transition: .3s ease-in-out;
	-o-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

.social:hover {
	-webkit-transform: rotate(15deg) scale(1.5);
	    -ms-transform: rotate(15deg) scale(1.5);
	        transform: rotate(15deg) scale(1.5);
}

.button {
	display: inline-block;
	outline: 0;
	cursor: pointer;
	border: none;
	padding: 0 56px;
	height: 45px;
	line-height: 45px;
	border-radius: 7px;
	font-weight: 400;
	font-size: 16px;
	background: #FFD814;
	color: #0F1111;
	box-shadow: 0 4px 14px 0 rgb(0 0 0 / 10%);
	transition: background 0.2s ease,color 0.2s ease,box-shadow 0.2s ease;
}
.button:hover{
	background: rgba(255,255,255,0.9);
	box-shadow: 0 6px 20px rgb(93 93 93 / 23%);
}
}

/*animations*/

@-webkit-keyframes fadein {
  0% {
    opacity: 0.1;
    -webkit-transform: translate(0px, 50px);
            transform: translate(0px, 50px);
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadein {
  0% {
    opacity: 0.1;
    -webkit-transform: translate(0px, 50px);
            transform: translate(0px, 50px);
  }
  100% {
    opacity: 1;
  }
}

.delay-fast {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.delay-medium {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.delay-slow {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.fadein {
  opacity: 0;
  -webkit-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}

/*press kit*/

.promocontainer {
  column-count: 2;
  column-gap: 20px;
  @media (min-width: 1199px) {
    column-count: 3;
  }
  .promoimg {
    box-sizing: border-box;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    counter-increment: brick-counter;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*portrait styling*/

@media screen and (max-width: 1024px) and (orientation:portrait) {
	.layer0 {
	position: absolute;
  	height: 100vh;
	width: 100%;
  	z-index: -1;
  	-o-object-fit: cover;
  	   object-fit: cover;
}
	.layer1,
	.layer2,
	.layer3,
	.layer4,
	.layer5,
	.layer6,
	.layer7,
	.layer8 {
	display: none;
}
	
}

/*desktop styling*/

@media screen and (min-width: 1024px) {
	
	.imgframe {
		width: 100%;
	}	

  /*header styles - desktop*/
	.layer0 {
		display: none;
	}

  .layer1 {
    -webkit-transform: translateZ(-10px) scale(2);
            transform: translateZ(-10px) scale(2);
  }

  .layer2 {
    -webkit-transform: translateZ(-9px) scale(1.95);
            transform: translateZ(-9px) scale(1.95);
  }

  .layer3 {
    -webkit-transform: translateZ(-8px) scale(1.85);
            transform: translateZ(-8px) scale(1.85);
  }

  .layer4 {
    -webkit-transform: translateZ(-7px) scale(1.8);
            transform: translateZ(-7px) scale(1.8);
  }

  .layer5 {
    -webkit-transform: translateZ(-6px) scale(1.65);
            transform: translateZ(-6px) scale(1.65);
  }

  .layer6 {
    -webkit-transform: translateZ(-5px) scale(1.55);
            transform: translateZ(-5px) scale(1.55);
  }

  .layer7 {
    -webkit-transform: translateZ(-3px) scale(1.35);
            transform: translateZ(-3px) scale(1.35);
  }

  .layer8 {
    -webkit-transform: translateZ(0px) scale(1.05);
            transform: translateZ(0px) scale(1.05);
  }

  .layer1,
  .layer2,
  .layer3,
  .layer4,
  .layer5,
  .layer6,
  .layer7,
  .layer8 {
    position: absolute;
    height: 100vh;
    -o-object-fit: cover;
       object-fit: cover;
	display: block;
    z-index: -1;
  }

  /*content styles*/

  .inner-wide {
    width: 80%;
    margin: 0 auto;
  }

  .inner {
    width: 60%;
    margin: 0 auto;
  }
	
  .language {
	 width: 80%;
}
	
	.not-on-mobile {
	display: initial;
}

  /*popup images*/

  .divider {
    z-index: 1;
    width: 18%;
    position: absolute;
  }

  .right {
    right: 0;
  }

  .left {
    left: 0;
  }
}