body {
  background-color: #000;
  color: #fff;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  margin: 0px;
  overflow: hidden;
}

.palette {
  width: 100%;
  height: 20px;
  padding: 0;
  margin-top: 0px;
  position: relative;
  top: 0px;
  z-index: 2;
  margin-bottom: -20px;
}

.palette li {
  display: block;
  float: left;
  width: 20%;
  height: 100%;
}

canvas {
  display: block;
  width: 120%;
  margin-left: -10%;
  position: relative;
  /*z-index: -1;*/
}

.ov-hidden {
  display: block;
  overflow: hidden;
}

.item {
  background-color: #000;
  /* border: solid 1px #000; */
}

.sub-item-trb {
  /* border-top: solid 1px #000;
      border-bottom: solid 1px #000;
      border-right: solid 1px #000; */
}
.sub-item-tb {
  /* border-bottom: solid 1px #000;
      border-top: solid 1px #000; */
}
.sub-item-rb {
  /* border-bottom: solid 1px #000;
      border-right: solid 1px #000; */
}
.sub-item-r {
  /* border-right: solid 1px #000; */
}
.sub-item-b {
  /* border-bottom: solid 1px #000; */
}
.item-no {
  /* border: none; */
  border: 1px solid #fff;
}
.item-no_bottom {
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}
.item-no_top {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
}

.height33 {
  height: 33vh;
}
.height34 {
  height: 33.6vh;
}

.height16 {
  height: 16.5vh;
}

.dataPalette {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.sbox {
  display: inline-block;
}
/** 3d btn **/
.button {
  cursor: pointer;
  min-height: 39px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}
.button a {
  color: white;
  text-decoration: none;
}

/** description  **/
#descriptionBlock {
  position: relative;
  top: 0%;
  height: 100vh;
}
#videoBlock {
  display: block;
  height: 50vh;
  margin-top: 16.5vh;
}
#video {
  position: relative;
  width: 76%;
  height: 50vh;
  display: none;
  margin-left: auto;
  margin-right: auto;
}
#snap {
  position: relative;
  width: 16vw;
  color: #fff;
  background-color: #000;
  top: -16vh; /*-30vh*/
  left: 50%;
  transform: translate(-50%, -50%);
}
#description {
  position: relative;
  display: block;
  width: 38vw;
  mix-blend-mode: difference;
  color: #fff;
  letter-spacing: 0.6px;
  font-weight: lighter;
  margin-left: auto;
  margin-right: auto;
  margin-top: -13vh;
  text-align: justify;
}
.italic {
  font-style: italic;
  font-weight: bold;
}
#firstcol,
#thirdcol {
  z-index: 10;
  /* border: 1px solid #fff; */
}
/*** pop up related ***/
.closebtn {
  position: absolute;
  top: 5px;
  right: 12px;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  z-index: 999;
  mix-blend-mode: difference;
  border: 1px solid #fff;
}
#pop1 {
  display: block;
  width: 25%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 998;
  animation-name: mymove;
  animation-duration: 1s;
  /* animation-delay: 2s; */
  /* animation-timing-function:linear;
  animation-fill-mode: backwards; */
}
@keyframes mymove {
  from {left: -300px;}
  to {left: 0px;}
}
#pop1_img {
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}
#pop2 {
  display: block;
  width: 50%;
  height: 200px;
  position: absolute;
  left: calc(50% - 25%);
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 998;
  animation-name: mymoveTop;
  animation-duration: 1s;
  /* animation-delay: 2s; */
  /* animation-timing-function:linear;
  animation-fill-mode: backwards; */
}
@keyframes mymoveTop {
  from {top: -300px;}
  to {top: 0px;}
}
#pop2_img {
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}
#pop3 {
  display: block;
  width: 50%;
  height: 200px;
  position: absolute;
  left: calc(50% - 25%);
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 998;
  animation-name: mymoveBottom;
  animation-duration: 1s;
  /* animation-delay: 2s; */
  /* animation-timing-function:linear;
  animation-fill-mode: backwards; */
}
@keyframes mymoveBottom {
  from {bottom: -300px;}
  to {bottom: 0px;}
}
#pop3_img {
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}
#pop4 {
  display: block;
  width: 25%;
  height: 100vh;
  position: absolute;
  right: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 998;
  animation-name: mymoveRight;
  animation-duration: 1s;
  /* animation-delay: 2s; */
  /* animation-timing-function:linear;
  animation-fill-mode: backwards; */
}
@keyframes mymoveRight {
  from {right: -300px;}
  to {right: 0px;}
}
#pop4_img {
  display: block;
  width: 200px;
  height: 200px;
  position: absolute;
  left: calc(50% - 100px);
  top: calc(50% - 100px);
}

#canvas2_container {
  display: none;
}
.tb-grid {
  /* border: 1px solid #fff; */
}
.ad_text {
  position: absolute;
  z-index: -1;
}
#thirdcol {
  padding-right: 1px;
}
#bs{
  font-size: 12px;
}

@media (max-width: 768px) {
  body {
    font-size: 10px;
  }
  #videoBlock {
    margin-top: 6vh;
  }
  .button {
    font-size: 10px;
  }
  #snap {
    top: -13vh;
  }
  #description {
    margin-top: -10vh;
  }
  canvas {
    top: 40%;
  }
  #bs{
    font-size: 8px;
  }
}