.tetraside-container{
  position: relative;
  margin: 0 auto;
  width: 1200px;
  height:700px;
}

.tetraside{
  position: absolute;
  margin:auto;
  top:150px;
  left:0;
  right:0;
  width: 290px;
  z-index: 20;
}

#tetra-left{
  left:-800px;
  top:350px;
  opacity: 1;
}
#tetra-right{
  left:800px;
  top:350px;
  opacity: 1;
}
#tetra-back{
  opacity: 0;
  top:350px;
}



.line{
  position: absolute;
}
.line-mid{
  margin:auto;
  width: 1px;
  height: 80px;
  border-right: 1px solid #ffffff;
  top:450px;
  left:0;
  right:0;
}
.line-left{
  width: 150px;
  height: 5px;
  border-bottom: 1px solid #ffffff;
  top:560px;
  left:300px;
}
.line-right{
  width: 150px;
  height: 5px;
  border-bottom: 1px solid #ffffff;
  top:560px;
  right:300px;
}


.connecting{
  width: 100%;
  max-width: 300px;
  position: absolute;
  margin:auto;
  top:550px;
  left:0px;
  right:0;
}

.blockchain-container{
  width: 100%;
  max-width: 450px;
  position: absolute;
  margin:auto;
  top:0px;
  left:0;
  right:0;
}

.casualgaming-container{
  width: 100%;
  max-width: 350px;
  position: absolute;
  top:180px;
  left:0px;

}

.winningprize-container{
  width: 100%;
  max-width: 350px;
  position: absolute;
  top:180px;
  right:0px;

}

.quizcom-container{
  width: 100%;
  max-width:650px;
  position: absolute;
  margin:auto;
  top: 500px;
  left:0;
  right:0;
  opacity: 0;
}


.tetrastill{
  opacity: 0;
  position: absolute;
  margin:auto;
  top:377px;
  left:0;
  right: 0;
  max-width: 305px;
}
    
.polyhedron-container{
  opacity: 0;
  position: absolute;
  margin:auto;
  left:0;
  right:0;
  top:350px;
}

.polyhedron {
  /*position: relative;*/
  margin:9.8em auto 0;
  padding: 0;
  /*width: 16em; height: 16em;*/
  width: 25em; 
  height: 25em;
  perspective: 750em;
  transform-style: preserve-3d;
  /*animation: rot 20s infinite linear; */
}

@keyframes rot {
  from { transform: rotateZ(-15deg) rotateX(45deg) rotateY(0deg); }
  to { transform: rotateZ(345deg) rotateX(-315deg) rotateY(360deg); }
}

.side, .side:after {
  overflow: hidden;
  position: absolute;
  width: inherit; height: inherit;
  backface-visibility: hidden;
}
.triangle:after {
  transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-50%);
  content: '';
}
.tetrahedron .side.triangle:first-child {
  transform: translateZ(7.2em) 
    rotateX(19.47deg) 
    rotate(30deg) skewY(30deg) scaleX(.866);
}
.tetrahedron .side.triangle:first-child:after {
  background: palevioletred 
    /*url(../img/img-mid.svg);*/
    /*url("../img/img-back.svg");*/
    url("../img/img-right.svg");
    background-size: 100%;
}
.tetrahedron .side.triangle:nth-child(2) {
  transform: rotateY(120deg) translateZ(7.2em) 
    rotateX(19.47deg) 
    rotate(30deg) skewY(30deg) scaleX(.866);
}
.tetrahedron .side.triangle:nth-child(2):after {
  background: hotpink 
    url("../img/img-left.svg");
    background-size: 100%;
}
.tetrahedron .side.triangle:nth-child(3) {
  transform: rotateY(-120deg) translateZ(7.2em) 
    rotateX(19.47deg) 
    rotate(30deg) skewY(30deg) scaleX(.866);
}
.tetrahedron .side.triangle:nth-child(3):after {
  background: mediumvioletred 
    /*url("../img/img-right.svg");*/
    url("../img/img-back.svg");
    background-size: 100%;
}
.tetrahedron .side.triangle:last-child {
  transform: translateZ(7.2em) 
    rotateX(90deg) rotateY(180deg)
    rotate(30deg) skewY(30deg) scaleX(.866);
}
.tetrahedron .side.triangle:last-child:after {
  background: orchid 
    /*url("../img/img-back2.svg");*/
    url(../img/img-mid.svg);
    background-size: 100%;
}





/*@media screen and (max-width: 1169px) {
  .polyhedron {
    width: 16em; height: 16em;
  }
.tetrahedron .side.triangle:first-child {
  transform: translateZ(4.6188em) 
    rotateX(19.47deg) 
    rotate(30deg) skewY(30deg) scaleX(.866);
}
.tetrahedron .side.triangle:nth-child(2) {
  transform: rotateY(120deg) translateZ(4.6188em) 
    rotateX(19.47deg) 
    rotate(30deg) skewY(30deg) scaleX(.866);
}
.tetrahedron .side.triangle:nth-child(3) {
  transform: rotateY(-120deg) translateZ(4.6188em) 
    rotateX(19.47deg) 
    rotate(30deg) skewY(30deg) scaleX(.866);
}
.tetrahedron .side.triangle:last-child {
  transform: translateZ(4.6188em) 
    rotateX(90deg) rotateY(180deg)
    rotate(30deg) skewY(30deg) scaleX(.866);
}

.tetraside-container{
  position: relative;
  margin: 0 auto;
  height: 1px;
  width: 320px;
  margin-top: 0px;
  overflow: hidden;
  opacity: 0;
}

.tetraside{
  position: absolute;
  margin:auto;
  top:0;
  left:0;
  right:0;
  width:200px;
}


}*/