* {
	margin: 0;
	padding: 0;	
	font-family: foa;
}

a {
		text-decoration: none;
	}

body {
	margin-bottom:10px;
}
	
:root {
	--margins:min(5.1vw, 46px);
	--scal:min(1, 2);
}

button {
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;	
}
	
@font-face {
	font-family: fon;
	src: url(/fonts/PixelOperatorSC-Bold.ttf);
}

@font-face {
  font-family: foa;
  src: url(/fonts/PixelOperatorSC.ttf);
}
	
	
.textBlock, .faqBlock {
	font-family: foa;
	font-size:30px;
	color:hsl(0, 0%, 40%);
	margin-top:12px;
	max-width:720px;
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
}


#firstDiv {

	font-size:calc(min(96px,11.222vw));
	
}


.block {
	text-align: center;
	margin-top:32px;
	margin-bottom:32px;
	width:93px;
	
	margin-left:auto;
	margin-right:auto;
}

.textBlock p {
		margin-bottom:12px;
		text-align: left;
	}
	
.textBlock a {
	color:hsl(0, 0%, 40%); font-weight:bold;
}	

.logo {
	text-align: center;
	margin-top:max(46px, calc(64px - 14vw));
	color:hsl(0, 0%, 20%);
}

#logoA {
	font-size:min(180px, 40vw); font-family:fon;
}
#logoB {
	display:block; font-size:min(90px, 20vw); margin-top:calc(-1*min(46px,10.222vw)); font-family:fon;
}
#logoC {
	display:block; font-size:min(78px, 17.333vw); margin-top:calc(-1*min(24.5px,5.444vw)); font-family:fon;
}

#subtitle {
	text-align: center; margin-top:12px; max-width:720px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px;
}
h2
{
	font-weight: normal;	
	font-size:26px;
	color:hsl(0, 0%, 40%);
}


/* Artifacts */

#artifactsLogo {
	text-align: center;
	margin-top:max(62px, calc(86px - 19vw));
	color:hsl(0, 0%, 20%);
}
#artifactsLogoA {
	font-size:min(120px, 26.667vw);
	font-family:fon;
}
#artifactsLogoB {
	display:block;
	font-size:min(52px, 11.5vw);
	margin-top:calc(-1*min(26px,5.75vw));
	font-family:fon;
}

#artifactsChapterLine {
	max-width:720px;
	width:100%;
	height:10px;
	margin: 0 auto;
	background-color:hsl(0, 0%, 94%);
	margin-top:56px;
}
#artifactsChapterHolder {
	width:100%;
	text-align:center;
	margin-top:-24px;	
}	
#artifactsChapterBox {
	 display: inline-block;
	 margin: 0 auto;
	 text-align:center;
	 height:30px;
	 background-color: hsl(0, 0%, 20%, 100%);
	 color:white;
	 font-size:30px;
	 font-family:foa;
	 padding:4px 14px 4px 14px;
}	

#artifactsChapterTitleHolder {
	display:flex;
	align-items: center;
	justify-content: space-between;
	max-width:720px;
	width:calc(100% - 40px);
	margin-left:auto;
	margin-right:auto;
	margin-top:8px;
}
#artifactsChapterTitle {
	font-size:min(70px, 10.0vw);
	font-family:fon;
	color:hsl(0, 0%, 20%);
	text-transform:uppercase;
	padding-left:8px;
	padding-right:8px;
	text-align:center;
    order: 2;
}

.artifactsArrow {
	background-color: hsl(0, 100%, 0%, 80%);
	width:18px;
	top:14px;
	padding:10px;
	padding-left:16px;
	padding-right:16px;
	box-shadow: 0px 3px hsl(0, 0%, 80%);
}
.artifactsArrow:disabled {
	opacity:0.5;
}
#artifactsArrowLeft {
}
#artifactsArrowRight {
    order:3;
}
@media all and (max-width: 400px) {
  #artifactsChapterTitleHolder{
  	flex-wrap:wrap;
  	justify-content: center;
  }
  #artifactsChapterTitle {
  	width:100%;
    order:3;
  }
  #artifactsArrowLeft{
  	order:2;
  	margin-right:4px;
  }
  #artifactsArrowRight{
  	order:2;
  	margin-left:4px;
  }
}

#artifactsBox {
	max-width:720px;
	width:calc(100% - 40px);
	height:350px;
	background-color:hsl(0, 0%, 94%);
	margin: 16px auto;
	position: relative;
	text-align:center;
}
#artifactsImage {
	height:350px;
	width:100%;
}
#artifactsName {
	position:absolute;
	bottom:5px;
	right:9px;
	color:#868686;
	font-size:23px;
	text-transform:uppercase;
	text-align:left;
}
#artifactsBuy {
	width:45px;
}

#artifactsTooltip:hover .artifactsTooltipText {
  visibility: visible;
}
#artifactsTooltip {
	position:absolute;
	bottom:11px;
	left:10px;
}
.artifactsTooltipText {
	visibility: hidden;
	width: 120px;
	background-color: black;
	color: #fff;
	text-align: center;
	padding: 5px 0;
	position: absolute;
	margin-left:-40px;
	font-family:fon;
	z-index: 1;
}
	
#artifactsLoreText::first-letter {
	font-size: 50px;
	line-height: 0px;
	text-transform:uppercase;
}
#artifactsLoreText {
	margin-top:35px;
	text-transform:lowercase;
}
#artifactsLoreText pre {
	 white-space: pre-wrap;
	 word-wrap: break-word;
}




/* Avatars */

#avatarsLogo {
	text-align: center;
	margin-top:max(62px, calc(86px - 19vw));
	color:hsl(0, 0%, 20%);
}
#avatarsLogoA {
	font-size:min(120px, 26.667vw);
	font-family:fon;
}
#avatarsLogoB {
	display:block;
	font-size:min(66px, 14.66vw);
	margin-top:calc(-1*min(30px,6.66vw));
	font-family:fon;
}

#avatarsExampleParent {
	width:calc(100% - 20px);
	margin:0 auto;
	justify-content:center;
	margin-top:28px;
	display:flex;
	flex-wrap:wrap;
}
#avatarsExampleParent > div {
	margin-left:10px;
	margin-right:10px;	
}

.avatarsExampleHolder {
	width:100px;
	height:100px;
	text-align:center;	
}

.avatarsExample {
	width:200px;
	height:200px;
	margin-left:-100px;
	margin-top:-50px;
	position:absolute;
}

.avatarsColorButton {
	width:100px;
	height:70px;
	background-color: hsl(0, 100%, 0%, 80%);
	box-shadow: 0px 3px hsl(0, 0%, 80%);
	margin-top:-20px;
}
.avatarsColorButtonText {
	color:white;
	font-family:fon;
	font-size:26px;
	width:100px;
	margin-top:42px;
	text-align:center;
	position:absolute;
}
.avatarsColorButtonColor {
	width:80px;
	height:32px;
	position:absolute;
	margin-top:8px;
	margin-left:8px;
	margin-right:10px;
	background-color:hsl(0,0%,78%);
	border:2px solid hsl(0,0%,30%);
}

.athingy {
	width:9%; height:9%; background-color:hsl(0,0%,78%);
	border:1px solid white;
}

.colorPicker {
	opacity:0;
	width:100%;
	height:100%;
}

#avatarsCanvasHolder {
	width:100%;
	margin-top:6px;
	display: inline-block;
	position: relative;	
}

#avatarsCanvas {
	margin:0 auto;
	display:flex;
	width:min(500px, 98vw);
	height:min(500px, 98vw);
	justify-content:center;
	flex-wrap: wrap; 
	align-content: flex-start;
}

#avatarsTabsHolder {
	width:100%;
	text-align:center;
	margin-top:36px;	
}	
.avatarsTab {
	display: inline-block;
	margin: 0 auto;
	text-align:center;
	height:48px;
	background-color: hsl(0, 100%, 0%, 80%);
	color:white;
	font-size:30px;
	font-family:fon;
	padding:4px 22px 6px 22px; 
	box-shadow: 0px 3px hsl(0, 0%, 80%);
}	
.avatarsTab:enabled {
	 opacity:0.5;
}	

#avatarsGuideIntro {
	margin: 0px auto;
	max-width:720px;
	font-size:24px;
	color:hsl(0, 0%, 40%);
	margin-top:40px;
	padding-left:20px;
	padding-right:20px;	
}

#avatarsCollectionBox {
	max-width:720px;
	width:calc(100% - 40px);
	height:340px;
	background-color:hsl(0, 0%, 96%);
	margin: 0px auto;
	margin-top:32px;
	position: relative;
	text-align:center;
}
#avatarsBuy {
	width:50px;
}
#avatarsTooltip:hover .artifactsTooltipText {
  visibility: visible;
}
#avatarsTooltip {
	position:absolute;
	bottom:0px;
	left:0px;
	background-color: hsl(0, 100%, 0%, 80%);
	padding:12px;
}


/* Art */

#artLogo {
	text-align: center;
	margin-top:max(62px, calc(86px - 19vw));
	color:hsl(0, 0%, 20%);
}
#artLogoA {
	font-size:min(95px, 21.11vw);
	font-family:fon;
}
#artLogoB {
	display:block;
	font-size:min(130px, 28.88vw);
	margin-top:calc(-1*min(40px,8.88vw));
	font-family:fon;
}

#artSubtitle {
	text-align: center; margin-top:2px; max-width:720px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px;
}


/* Team */

#teamLogo {
	text-align: center;
	margin-top:70px;
	color:hsl(0, 0%, 20%);
}
#teamLogoA {
	font-size:60px;
	font-family:fon;
}
#teamLogoB {
	display:block;
	font-size:min(130px, 28.88vw);
	margin-top:calc(-1*min(40px,8.88vw));
	font-family:fon;
}

.teamAvatar {
	width:400px;
	height:400px;
	margin-top:-100px;
	position:absolute;
}

.teamName {
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
	text-align:center;
	font-family:fon; font-size:48px; margin-bottom:-3px; color:hsl(0, 0%, 30%);	
}

.teamRole {
	margin-left:auto;
	margin-right:auto;
	padding-left:20px;
	padding-right:20px;
	text-align:center;
	font-family:foa; font-size:30px; margin-bottom:-3px; color:hsl(0, 0%, 40%);	
}

.teamBox {
	max-width:720px;
	width:calc(100% - 40px);
	margin:0 auto;
	margin-top:20px;
	background-color:hsl(0, 0%, 96%);
	padding-bottom:20px;
	position:relative;
}


/* Roadmap */

.roadmapEntry {
	background-color:hsl(0, 0%, 94%);
	width:150px;
	height:150px;
	margin:0 auto;
}

.roadmapChild {
	margin-left:-200px;
}

.roadmapText {
	position:absolute; margin-left:166px; margin-top:0px; text-align:left; display:flex; align-items:center; height:150px;
	width:200px;
}

.roadmapName {
	color:hsl(0, 0%, 30%);
	/*border-bottom: 2px solid hsl(0, 0%, 70%);*/
	font-family:fon;
	font-size:26px;
	text-transform:uppercase;
}

.roadmapDate {
	
	font-family:foa;
	color:hsl(0, 0%, 40%);
	font-size:24px;
	text-transform:uppercase;
}

.roadmapLine {
	margin:12px auto; background-color:hsl(0, 0%, 30%); height:100px; width:10px;
	}


.background-image {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      /*background-image: url('thing.png');*/
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -1; /* Keep it behind other content */
      background-color: rgba(255,255,255,0);
    background-blend-mode: lighten;
    }



.scanlines {
    position: fixed;
    width:100%;
    height:100%;
}
.scanlines:before,
.scanlines:after {
    display: block;
    pointer-events: none;
    content: "";
    position: fixed;
}
.scanlines:before {
    width: 100%;
    height: 2px;
    z-index: 2147483649;
    background: hsla(0, 0%, 100%, 0.2);
    opacity: 0.8;
    animation: scanline 4s linear infinite;
}
.scanlines:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483648;
     background: repeating-linear-gradient(
        to bottom,
        hsla(0, 10%, 100%, 0.15) 0px,
        hsla(0, 10%, 100%, 0.15) 4px,
        hsla(200, 10%, 75%, 0.15) 4px,
        hsla(200, 10%, 75%, 0.15) 8px,
        hsla(96, 10%, 100%, 0.15) 8px,
        hsla(96, 10%, 100%, 0.15) 12px,
        hsla(50, 10%, 80%, 0.15) 12px,
        hsla(50, 10%, 80%, 0.15) 16px,
        hsla(290, 6%, 100%, 0.15) 16px,
        hsla(290, 6%, 100%, 0.15) 20px,
        hsla(18, 10%, 75%, 0.15) 20px,
        hsla(18, 10%, 75%, 0.15) 24px,
        hsla(174, 6%, 100%, 0.15) 24px,
        hsla(174, 6%, 100%, 0.15) 28px,
        hsla(10, 10%, 70%, 0.15) 28px,
        hsla(10, 10%, 70%, 0.15) 32px,
        hsla(250, 8%, 100%, 0.15) 32px,
        hsla(250, 8%, 100%, 0.15) 36px,
        hsla(54, 8%, 70%, 0.15) 36px,
        hsla(54, 8%, 70%, 0.15) 40px
    );
    background-size: 100% 40px;
    animation: scanlines 0s steps(120) infinite, opacity 1s linear infinite;
}

/* ANIMATE UNIQUE SCANLINE */
@keyframes scanline {
    0% {
        transform: translate3d(0, 200000%, 0);
    }
}
@keyframes scanlines {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 -40px;
    }
}

@-webkit-keyframes opacity {
  0% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.15;
  }
  35% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.8;
  }
  60% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.6;
  }
}
@keyframes opacity {
  0% {
    opacity: 0.3;
  }
  20% {
    opacity: 0.15;
  }
  35% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.4;
  }
  60% {
    opacity: 0.2;
  }
  80% {
    opacity: 0.35;
  }
  100% {
    opacity: 0.3;
  }
}

div.scanlines {
    position: absolute;
}




.textfirst:after, .textfirst:before {
  content: attr(data-text);
  position: absolute;
  mix-blend-mode: screen;

  bottom: 40px;
  left: 40px;  display: flex;
  height: 100%;
  align-items: flex-end; /* Aligns vertically to bottom */
  justify-content: center;
}





.text {
  top: 0;
  color: hsla(0, 20%, 10%, 80%);
  mix-blend-mode: screen;
  position: relative;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
  -webkit-animation: skew 9s infinite, flash .04s infinite;
  -moz-animation: skew 9s infinite, flash .04s infinite;
  -o-animation: skew 9s infinite, flash .04s infinite;
  animation: skew 9s infinite, flash .04s infinite;
  animation-delay: -1.3s;
}
.text:after, .text:before {
  content: attr(data-text);
  position: absolute;
  mix-blend-mode: screen;

  width: 100%;
  height: 100%;
}
.text:after {
  top: 0;
  left: 6px;
  color: hsla(243, 50%, 20%, 100%);
  /*-webkit-animation: move 11.5s infinite;
  -moz-animation: move 11.5s infinite;
  -o-animation: move 11.5s infinite;
  animation: move 11.5s infinite;*/
}
.text:before {
  top: -2.4px;
  left: 3.6px;
  color: hsla(90, 50%, 20%, 100%);
}

.textsmall {
  top: 0;
  color: hsla(0, 20%, 20%, 80%);
  mix-blend-mode: screen;
  position: relative;
  -webkit-filter: blur(0.75px);
  -moz-filter: blur(0.75px);
  filter: blur(0.75px);
  -webkit-animation: skew 9s infinite, flashextreme .04s infinite;
  -moz-animation: skew 9s infinite, flashextreme .04s infinite;
  -o-animation: skew 9s infinite, flashextreme .04s infinite;
  animation: skew 9s infinite, flashextreme .04s infinite;
  animation-delay: -1.3s;
}
.textsmall:after, .textsmall:before {
  content: attr(data-text);
  position: absolute;
  mix-blend-mode: screen;
  padding-left:20px;
  padding-right:20px;
  max-width:720px;
  font-style: italic;
}
.textsmall:after {
  top: 1px;
  left: 0;
  color: hsla(243, 80%, 20%, 70%);
  /*-webkit-animation: move 11.5s infinite;
  -moz-animation: move 11.5s infinite;
  -o-animation: move 11.5s infinite;
  animation: move 11.5s infinite;*/
}
.textsmall:before {
  top: -0.48px;
  left: 0;
  color: hsla(90, 80%, 20%, 70%);
}


.textextrasmall {
  top: 0;
  color: hsla(0, 20%, 20%, 80%);
  mix-blend-mode: screen;
  position: relative;
  -webkit-filter: blur(0.75px);
  -moz-filter: blur(0.75px);
  filter: blur(0.75px);
  -webkit-animation: skew 9s infinite, flashextreme .04s infinite;
  -moz-animation: skew 9s infinite, flashextreme .04s infinite;
  -o-animation: skew 9s infinite, flashextreme .04s infinite;
  animation: skew 9s infinite, flashextreme .04s infinite;
  animation-delay: -1.3s;
}
.textextrasmall:after, .textextrasmall:before {
  content: attr(data-text);
  position: absolute;
  mix-blend-mode: screen;
  padding-left:20px;
  padding-right:20px;
  max-width:720px;
  font-style: italic;
}
.textextrasmall:after {
  top: 1px;
  left: 0;
  color: hsla(243, 80%, 20%, 70%);
  /*-webkit-animation: move 11.5s infinite;
  -moz-animation: move 11.5s infinite;
  -o-animation: move 11.5s infinite;
  animation: move 11.5s infinite;*/
}
.textextrasmall:before {
  top: -0.48px;
  left: 0;
  color: hsla(90, 80%, 20%, 70%);
}




.im {
  top: 0;
  color: hsla(0, 20%, 10%, 80%);
  mix-blend-mode: screen;
  position: relative;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
  -webkit-animation: skew 9s infinite, flashsubtle .04s infinite;
  -moz-animation: skew 9s infinite, flashsubtle .04s infinite;
  -o-animation: skew 9s infinite, flashsubtle .04s infinite;
  animation: skew 9s infinite, flashsubtle .04s infinite;
  animation-delay: -1.3s;
}
.im:after, .im:before {
  content: attr(data-text);
  position: absolute;
  mix-blend-mode: screen;

  width: 100%;
  height: 100%;
}
.im:after {
  top: 0;
  left: 6px;
  color: hsla(243, 50%, 20%, 100%);
  /*-webkit-animation: move 11.5s infinite;
  -moz-animation: move 11.5s infinite;
  -o-animation: move 11.5s infinite;
  animation: move 11.5s infinite;*/
}
.im:before {
  top: -2.4px;
  left: 3.6px;
  color: hsla(90, 50%, 20%, 100%);
}


.line {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background: blue;
  mix-blend-mode: screen;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}
.line:after, .line:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  mix-blend-mode: screen;
}
.line:after {
  top: 2px;
  background: red;
}
.line:before {
  top: -2px;
  background: limegreen;
}

@-webkit-keyframes skew {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30.02% {
    -webkit-transform: skewX(50deg);
    -moz-transform: skewX(50deg);
    -ms-transform: skewX(50deg);
    -o-transform: skewX(50deg);
    transform: skewX(50deg);
  }
  30.04% {
    -webkit-transform: skewX(-50deg);
    -moz-transform: skewX(-50deg);
    -ms-transform: skewX(-50deg);
    -o-transform: skewX(-50deg);
    transform: skewX(-50deg);
  }
  30.1% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
@-moz-keyframes skew {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30.02% {
    -webkit-transform: skewX(50deg);
    -moz-transform: skewX(50deg);
    -ms-transform: skewX(50deg);
    -o-transform: skewX(50deg);
    transform: skewX(50deg);
  }
  30.04% {
    -webkit-transform: skewX(-50deg);
    -moz-transform: skewX(-50deg);
    -ms-transform: skewX(-50deg);
    -o-transform: skewX(-50deg);
    transform: skewX(-50deg);
  }
  30.1% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
@-o-keyframes skew {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30.02% {
    -webkit-transform: skewX(50deg);
    -moz-transform: skewX(50deg);
    -ms-transform: skewX(50deg);
    -o-transform: skewX(50deg);
    transform: skewX(50deg);
  }
  30.04% {
    -webkit-transform: skewX(-50deg);
    -moz-transform: skewX(-50deg);
    -ms-transform: skewX(-50deg);
    -o-transform: skewX(-50deg);
    transform: skewX(-50deg);
  }
  30.1% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
@keyframes skew {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30.02% {
    -webkit-transform: skewX(50deg);
    -moz-transform: skewX(50deg);
    -ms-transform: skewX(50deg);
    -o-transform: skewX(50deg);
    transform: skewX(50deg);
  }
  30.04% {
    -webkit-transform: skewX(-50deg);
    -moz-transform: skewX(-50deg);
    -ms-transform: skewX(-50deg);
    -o-transform: skewX(-50deg);
    transform: skewX(-50deg);
  }
  30.1% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
}
@-webkit-keyframes move {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30.1% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -o-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  30.3% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  99.8% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  100% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    -o-transform: translateX(6px);
    transform: translateX(6px);
  }
}
@-moz-keyframes move {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  31% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -o-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  33% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  99.8% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  100% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    -o-transform: translateX(6px);
    transform: translateX(6px);
  }
}
@-o-keyframes move {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  31% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -o-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  33% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  99.8% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  100% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    -o-transform: translateX(6px);
    transform: translateX(6px);
  }
}
@keyframes move {
  0% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  30% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  31% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -o-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  33% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  99.8% {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
  }
  100% {
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    -ms-transform: translateX(6px);
    -o-transform: translateX(6px);
    transform: translateX(6px);
  }
}
@-webkit-keyframes flash {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes flash {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@-o-keyframes flash {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@keyframes flash {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}


@-webkit-keyframes flashextreme {
  0% {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes flashextreme {
  0% {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@-o-keyframes flashextreme {
  0% {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@keyframes flashextreme {
  0% {
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}




@-webkit-keyframes flashsubtle {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@-moz-keyframes flashsubtle {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@-o-keyframes flashsubtle {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}
@keyframes flashsubtle {
  0% {
    opacity: 0.9;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
  }
  50% {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
  }
}





/* Elements */

#elementsLogo {
	text-align: center;
	margin-top:max(46px, calc(64px - 14vw));
	color:hsl(0, 0%, 20%);
}
#elementsLogoA {
	font-size:min(120px, 26.667vw);
	font-family:fon;
}
#elementsLogoB {
	display:block;
	font-size:min(56px, 12.44vw);
	margin-top:calc(-1*min(28px,6.22vw));
	font-family:fon;
}

#elementsTabsHolder {
	width:100%;
	text-align:center;
	margin-top:40px;	
}	
.elementsTab {
	display: inline-block;
	margin: 0 auto;
	text-align:center;
	height:48px;
	background-color: hsl(0, 100%, 0%, 80%);
	color:white;
	font-size:30px;
	font-family:fon;
	padding:4px 22px 6px 22px; 
	box-shadow: 0px 3px hsl(0, 0%, 80%);
}	
.elementsTab:enabled {
	 opacity:0.5;
}	

#elementsGuideIntro {
	margin: 0px auto;
	max-width:720px;
	font-size:24px;
	color:hsl(0, 0%, 40%);
	margin-top:40px;
	padding-left:20px;
	padding-right:20px;	
}

#elementsBox {
	max-width:720px;
	width:calc(100% - 40px);
	height:300px;
	margin: 0px auto;
	margin-top:16px;
	position: relative;
	text-align:center;
	background-color:hsl(0, 0%, 96%);
}
#elementsImage {
	height:280px;
	width:100%;
	margin-top:10px;
}
#elementsPurity {
	position:absolute;
	bottom:5px;
	right:4px;
	color:#868686;
	font-size:33px;
	text-transform:uppercase;
	text-align:left;
	padding-left:10px;
	padding-right:10px;
	/*background-color:hsl(0, 0%, 96%);*/
}

#elementsType {
	position:absolute;
	top:5px;
	left:4px;
	color:#414141;
	font-size:44px;
	text-transform:uppercase;
	text-align:left;
	padding-left:10px;
	padding-right:10px;
	/*background-color:hsl(0, 0%, 96%);*/
}

#elementsTypeHolder {
	display:flex;
	align-items: center;
	justify-content: space-between;
	max-width:720px;
	width:calc(100% - 40px);
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	/*padding-top:10px;
	padding-bottom:10px;*/
	/*background-color:hsl(0, 0%, 92%);*/
}

.elementsArrow {
	/*position:absolute;*/
	background-color: hsl(0, 100%, 0%, 80%);
	width:18px;
	top:14px;
	padding:10px;
	padding-left:16px;
	padding-right:16px;
	box-shadow: 0px 3px hsl(0, 0%, 80%);
}
.elementsArrow:disabled {
	opacity:0.2;
		box-shadow: none;
}
/*#elementsArrowLeft {
	margin-left:-14px;
}
#elementsArrowRight {
	margin-right:-14px;
}*/

#elementsDescription {
	text-transform:lowercase;
	max-width:720px;
	margin: 16px auto;
	position: relative;
	padding-left:20px;
	padding-right:20px;
	/*background-color:hsl(0, 0%, 96%); */
}
#elementsDescription pre {
	 white-space: pre-wrap;
	 word-wrap: break-word;
}

#elementsStatsHolder {
	max-width:720px;
	margin:0px auto;	
	margin-top:26px;
	padding-left:20px;
	padding-right:20px;
	text-align:center;
	font-size:36px;
	font-family:fon;
	color:hsl(0, 0%, 30%);
	/*background-color:hsl(0, 0%, 96%);*/
	padding-top:0px;
	padding-bottom:40px;
}
#elementsStats {
	width:100%;
	display:flex;
	margin-left:auto;
	margin-right:auto;
	justify-content:center;
	flex-wrap: wrap;	
}
#elementsStats > div {
	margin-left:14px;
	margin-right:14px;
}
.elementsStatCategory
{
	text-align:center;
	font-size:28px;
	color:hsl(0, 0%, 30%);
	margin-top:16px;
	background-color: hsl(0, 0%, 90%);
	/*border-bottom: 2px solid hsl(0, 0%, 70%);*/
	font-family:fon;
	height:28px;
	margin-bottom:4px;
	width:210px;
	text-transform:uppercase;
	padding-bottom:1px;
}	
.elementsStat
{
	display:flex;
	justify-content:flex-end;
}
.elementsStatName
{
	width:176px;
	text-align:left;
	font-size:24px;
	color:hsl(0, 0%, 40%);
	text-transform:lowercase;
}
.elementsStatValue
{
	font-size:22px;
	width:78px;
	color:hsl(0, 0%, 40%);
	text-align:left;
	font-family:fon;
	margin-left:12px;
	padding-top:2px;
}

.elementsStatValue0
{
	font-size:22px;
	width:34px;
	color:hsl(0, 0%, 40%);
	text-align:right;
	font-family:fon;
	padding-top:2px;
}
.elementsStatValue1
{
	font-size:22px;
	width:18px;
	color:hsl(0, 0%, 40%);
	text-align:center;
	font-family:fon;
	padding-top:2px;
}
.elementsStatValue2
{
	font-size:22px;
	width:35px;
	color:hsl(0, 0%, 40%);
	text-align:left;
	font-family:fon;
	padding-top:2px;
}

#elementsRandomize {
	position:absolute;
	top:0px;
	left:0px;
	width:50px;
	height:50px;
	background-color: hsl(0, 100%, 0%, 80%);
	box-shadow: 0px 3px hsl(0, 0%, 80%);
}
#elementsRandomize img {
	width:36px;
}

#elementsCollectionBox {
	max-width:720px;
	width:calc(100% - 40px);
	height:340px;
	background-color:hsl(0, 0%, 96%);
	margin: 0px auto;
	margin-top:32px;
	position: relative;
	text-align:center;
}
#elementsCollectionImage {
	height:280px;
	width:100%;
	margin-top:30px;
}
#elementsBuy {
	width:50px;
}
#elementsTooltip:hover .artifactsTooltipText {
  visibility: visible;
}
#elementsTooltip {
	position:absolute;
	bottom:0px;
	left:0px;
	background-color: hsl(0, 100%, 0%, 80%);
	padding:12px;
}

#elementsComingSoon {
	margin-top:30px;
	text-align:center;
	font-family:fon;
	font-size:50px;
	color:hsl(0, 0%, 20%);
}
#elementsPlaceholder {
	margin-top:24px;
	text-transform:lowercase;
}

#elementsLine {
	width:720px;
	height:10px;
	margin: 0 auto;
	background-color:hsl(0, 0%, 94%);
	margin-top:16px;	
}