/* trying to merge to stage */
* {
    margin: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
input, textarea {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
html,body,.screen_container, .top-content, .section_1, .section_2{
  height :100%;
  scroll-behavior: smooth;
}
body {
  background: #000;
  font-family: sans-serif;
  transition: all .5s ease-in;
}

.overflowHide{
  overflow-x: hidden;
}

@keyframes electric {
  0% {opacity: 1;}
  4% {opacity: 1;}
  5% {opacity: 0;}
  14% {opacity: 0;}
  15% {opacity: 1;}
  19% {opacity: 1;}
  20% {opacity: 0;}
  24% {opacity: 0;}
  25% {opacity: 1;}
  29% {opacity: 1;}
  30% {opacity: 0;}
  29% {opacity: 1;}
  30% {opacity: 1;}
  31% {opacity: 0;}

  64% {opacity: 0;}
  65% {opacity: 1;}
  69% {opacity: 1;}
  70% {opacity: 0;}
  74% {opacity: 0;}
  75% {opacity: 1;}
  79% {opacity: 1;}
  80% {opacity: 0;}
  84% {opacity: 0;}
  85% {opacity: 1;}
  89% {opacity: 1;}
  90% {opacity: 0;}
  94% {opacity: 0;}
  95% {opacity: 1;}
  96% {opacity: 0;}
  99%{opacity: 0;}
  100%{opacity: 1;}
}

.title h1{
  font-size: 36px;
  color:white;
  text-align: center;
  font-family: burnaby-stencil,sans-serif;
  font-weight: 400;
  font-style: normal;
}
.screen_container{
  background: #000;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.screen_1 .title, .screen_2 .title, .screen_3 .title {
  padding-bottom: 10px;
}

#name-form{
  display: flex;
  flex-direction: column;
}
.inputs{
  padding-top: 55%;
}
.screen_1 input{
  font-size: 18px;
  padding: 7px 10%;
  margin: 20px auto;
  border-radius: 40px;
  width: 60%;
  display: block;
  transition: all .3s ease-in;
  color: black;
}

.screen_1 input[type=text].entry{
  box-shadow: 0 0 10px #fff57b;
  border: 5px solid #fff57b;
  outline: none;
  padding: 4px 10%;
}
audio, embed {
    position: absolute;
    z-index: -9999;
}
.controlers{
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 0;
  width: 250px;
  margin-left: 50%;
  z-index: 30;
  left: calc(-250px/2);
  cursor: pointer;
}
.button.green{
  background-color: green;
}

.button{
  width: 100%;
  display: block;
  background-color: red;
  color: yellow;
  font-size: 24px;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
  margin-bottom: 20px;
  cursor: pointer;
  transition: all .5s ease-in;
}
.button:hover{
  text-decoration: none;
}
.screen_1 input[type=submit]{
  border: none;
  border-radius: 0;
  text-align: center;
  display: block;
  background-color: transparent;
  background-size: cover;
  max-width: 100px;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  z-index: 20;
  color: transparent;
  cursor: pointer;
}

@keyframes fadeInThis {
  from {opacity: 0;}
  to {opacity: 1;}
}
.screen_1 .content.animate{
  animation: fadeInThis 1s linear 2.5s 1 forwards;
}

.screen_1 .content{
  opacity: 0;
}

.screen_1 .controlers, .section_2 .controlers{
  width: 100px;
  height: 100px;
  position: relative;
  margin: auto;
  left: auto;
}
.section_2 .controlers{
  padding-top: 10px !important;
  position: absolute;
  z-index: 10;
  margin-left: 50%;
  left: -50px;
  /* bottom: 10px; */
  top: 50px;
}

.section_1, .section_2{
  float: left;
  position: absolute;
  overflow: hidden;
}

.section_1.nonImage{
  float: left;
  margin: auto;
  width: 100%;
  position: relative;
}

.screen_1{
  z-index: 10;
}
.section_2 .back{
  color: red;
  font-size: 12px;
  position: absolute;
  /* bottom: 140px; */
  text-align: center;
  width: 100%;
  z-index: 30;
  top:550px;
}
.loading_text {
  color: red;
  font-size: 12px;
  text-align: center;
  margin: -24px auto 12px auto;
  display: block;
}
button{
  -webkit-appearance: none;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  border: none;
  cursor: pointer;
}
button:focus, input:focus{
  outline: none;
}
.screen_container .screen.loading{
  z-index: 50;
  background-color: black;
  background-image: url('imgs/home_mob_cropB_darksm.jpg');
}

.screen_container .screen.loading.rev{
  animation: fadeInThis .5s linear 0s 1 forwards;
}
.screen.loading .control .pwrbtn_off, .screen.loading .control .pwrbtn_on{
  position: absolute;
  z-index: 5;
}

.screen.loading .control .pwrbtn_on{
  z-index: 10;
}

.loading .control{
  position: absolute;
  bottom: 100px;
  width: 148px;
  height: 148px;
  margin-left: 50%;
  left: -74px;
  cursor: pointer;
}

.pwrbtn.loading{
  animation: electric 2s linear 0s infinite;
}

.btn_sizzle{
  z-index: 15;
}
.btn_on, .pwrbtn{
  z-index: 10;
}
.btn_off, .pwrbtn_off{
  z-index: 5;
}

.btn_sizzle img, .btn_on img, .btn_off img, .pwrbtn img, .pwrbtn_off img, .section_2 .controlers img,  .section_3 .controlers img{
  width: 100px;
  height: 100px;
}
.pwrbtn img, .pwrbtn_off img,  .section_3 .controlers img{
  padding-left: 25px;
}
.btn_on, .btn_off, .pwrbtn, .pwrbtn_off{
  transition: all .5s ease-in;
}

.btn_sizzle, .btn_on, .btn_off, .pwrbtn, .pwrbtn_off{
  position: absolute;
}

.btn_sizzle, .btn_on, .pwrbtn{
  opacity: 0;
}

.controlers .button{
  max-width: 250px;
  margin: 30px auto;
}

.image_of_initials{
  width: 285px;
  height: 285px;
  margin: auto;
  background-color: black;
  opacity: 0;
  animation: fadeInThis 1s linear 1s 1 forwards;
}

.image_of_initials img{
  width: 100%;
  height: 100%;
}
.social{
  display: flex;
  max-width: 285px;
  margin: auto;
  flex-direction: row;
  padding: 60px 0;
  justify-content: space-between;
  align-items: center;
}
.social img{
  width: 35px;
}
.social .more{
  position: relative;
  flex-basis: 10%;
  display: flex;
  flex-direction: row-reverse;
}
.social .more img{
  width: 55px;
  height: 55px;
}
@keyframes glow {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
.social .more img:first-of-type{
  position: absolute;
  z-index: 10;
  animation: glow 3s linear infinite;
}
.social .more img:last-of-type{
  position: relative;
  z-index: 0;
}
.error{
  transition: all .5s ease-in;
  color: red;
  font-size: 16px;
  padding: 0;
  margin: -30px auto 0 auto;
  text-align: center;
  position: absolute;
  width: 100%;
  left: 0;
  padding-top: 30px;
}

.error div{
  padding: 5px 0;
}

.img_error{
  max-width: 800px;
  color: white;
  font-size: 24px;
  text-align: center;
  margin: 20px auto;
  border: 1px solid red;
  padding: 20px;
}

.img_error a{
  text-decoration: none;
  color: red;
}

.top-content{
  position: relative;
  margin:0;
  z-index: 10;
  transition: all 1s ease;
}

#smokeVideo {
  position: fixed;
  left: -5px;
  top: -25%;
  min-width: 100%;
  min-height: 100%;
}


.background-smoke{
  position: fixed;
  width: 100%;
  height: 100%;
  margin:auto;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.screen{
  height: 100%;
  width: 100%;
  position: relative;
  margin: auto;
}

.screen .content{
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.screen_1 .background{
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.screen_1 .background div, .screen.loading{
  position: absolute;
  z-index: 0;
  top: 0;
  width:100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
}

.screen_1 .background div.shadow{
  -webkit-box-shadow: inset 0px 0px 104px 39px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px 0px 104px 39px rgba(0,0,0,1);
  box-shadow: inset 0px 0px 104px 39px rgba(0,0,0,1);
  z-index: 20;
}

.screen_1 .background div.flux.animate{
  animation: electric 2s linear 0s 1 forwards;
}
.screen_1 .background div.flux{
  opacity: 0;
  z-index: 10;
  background-image: url('imgs/home_mob_cropBsm.jpg')
}
.screen_1 .background div.bg{
  background-image: url('imgs/home_mob_cropB_darksm.jpg')
}

@keyframes rotateFull {
  0% {transform: rotateY(45deg);}
  40% {transform: rotateY(338deg);}
  70% {transform: rotateY(377deg);}
  100% {transform: rotateY(405deg);}
}

.image_of_album {
  width: 2000px;
  height: 2000px;
  perspective: 6000px;
  transform: rotateX(-14deg);
  transform-style: preserve-3d;
  margin: auto;
  position: relative;
  z-index: 0;
  top: -15px;
}

.box {
  width: 300px;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(45deg);
  transform-origin: center;
  animation: rotateFull 5s linear 2.5s infinite;
  /* margin-left: 207px; calculated via js, width of browser */
  left: -150px;
}

.box__face {
  position: absolute;
}

.box__face img{
  width: 100%;
  height: 100%;
}

.box__face--front,
.box__face--back {
  width: 300px;
  height: 300px;
}

.box__face--right,
.box__face--left {
  width: 90px;
  height: 300px;
}

.box__face--top {
  width: 300px;
  height: 90px;
  top: 25px;
}

.box__face--front .front-on{
  position: absolute;
  z-index: 10;
}

.legal-policy.sme-privacy-exclude{
  z-index: 1000;
  bottom: -100px;
  position: absolute;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  color: #ffffff;
  z-index: 10;
  padding: 20px 0px;
  background-color: #000000;
  height: auto;
  color: red;
}

.legal-policy.sme-privacy-exclude a{
  color: red;
}

.desktop.sme-privacy-exclude{
  display: none;
}
.mobile.sme-privacy-exclude{
  display: none;
}

@keyframes flickerBox {
  0%  {z-index: 20;}
  35% {z-index: 0;}
  35.5% {z-index: 20;}
  40% {z-index: 0;}
  40.5% {z-index: 20;}
  41% {z-index: 0;}
  41.5% {z-index: 20;}
  42% {z-index: 0;}
  42.5% {z-index: 20;}
  43% {z-index: 20;}
  43.5% {z-index: 0;}
  44% {z-index: 20;}
  44.5% {z-index: 0;}
  44.8% {z-index: 20;}
  45% {z-index: 0;}

  77.999% {z-index: 0;}
  78% {z-index: 20;}
  79% {z-index: 0;}
  79.5% {z-index: 20;}
  80% {z-index: 20;}
  80.5% {z-index: 0;}
  81% {z-index: 20;}
  81.5% {z-index: 0;}
  82% {z-index: 20;}

  83% {z-index: 20;}
  83.5% {z-index: 0;}
  84% {z-index: 20;}
  84.5% {z-index: 0;}
  85% {z-index: 20;}

  100% {z-index: 20;}
}

.box__face--front .front-off{
  position: relative;
  z-index: 20;
  animation: flickerBox 5s linear 2.5s infinite;
}

.box__face--front .front-on{
  position: absolute;
  z-index: 10;
}

.box__face--front  { transform: rotateY(  0deg) translateZ( 44px); }
.box__face--back   { transform: rotateY(180deg) translateZ( 44px); }

.box__face--right  { transform: rotateY( 90deg) translateZ(251px); }
.box__face--left   { transform: rotateY(-90deg) translateZ(43px); }

.box__face--top    { transform: rotateX( 90deg) translateZ(71px); }

.hide{
    display: none;
}
.show{
    display: block;
}

.hide-fade{
    opacity: 0;
}
.show-fade{
    opacity: 1;
}

@media only screen and (min-width: 768px) {
  .title{
    padding-top: 3%;
  }
  .screen_1 .title, .screen_2 .title, .screen_3 .title {
    padding-bottom: 2%;
  }
  .title h1{
    font-size: 72px;
  }
  .controlers{
    width: 700px;
    left: calc(-700px/2);
    padding-bottom: 30px;
  }
  .screen_2{
    min-height: 800px;
  }
  .screen_3 .title{
    padding: 30px 0;
  }
  .image_of_initials{
    width: 500px;
    height: 500px;
  }
  .social {
    max-width: 500px;
  }
  .social img{
    width: 45px;
  }
  .social .more{
    position: relative;
    flex-basis: 10%;
    display: flex;
    flex-direction: row-reverse;
    cursor: pointer;
  }
  .social .more img{
    width: 75px;
    height: 75px;
    cursor: pointer;
  }
  #name-form{
    max-width: 1000px;
    margin: auto;
  }
  .inputs{
    display: flex;
    flex-direction: row;
    padding-top: 33%;
    max-width: 620px;
    width: 100%;
    margin: auto;
  }
  .screen.screen_1{
    min-height: 800px;
  }
  .screen_1 input {
    font-size: 18px;
    padding: 7px 5%;
    margin: 20px auto;
    border-radius: 40px;
    width: 35%;
}
.screen_1 .controlers, .section_2 .controlers, .section_3 .controlers {
    width: 148px;
    height: 148px;
    padding: 30px 0 0 0;
    position: relative;
    bottom: 0;
    top: 0;
  }
  .screen_1 input[type=submit], .btn_sizzle img, .btn_on img, .btn_off img, .pwrbtn img, .pwrbtn_off img, .section_2 .controlers img,  .section_3 .controlers img{
    width: 148px;
    height: 148px;
    max-width: 148px;
    padding-left: 0;
  }
  .screen_1 input[type=text].entry{
    padding: 4px 4.8%;
  }
  .screen_1 .background div.flux{
    background-image: url('imgs/home_web_crop.jpg')
  }
  .screen_1 .background div.bg{
    background-image: url('imgs/home_web_crop_dark.jpg')
  }
  .screen_container .screen.loading{
    background-image: url('imgs/home_web_crop_dark.jpg')
  }
  #smokeVideo {
    left: -5px;
    top: 0;
  }

  .image_of_album {
    width: 400px;
    height: 470px;
    perspective: 2000px;
    transform: rotateX(-14deg);
    top: auto;
  }

  .box {
    width: 400px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    left:auto;
  }

  .box__face--front,
  .box__face--back {
    width: 400px;
    height: 400px;
  }

  .box__face--right,
  .box__face--left {
    width: 120px;
    height: 400px;
  }

  .box__face--top {
    width: 400px;
    height: 120px;
    top: 25px;
  }

  .box__face--front  { transform: rotateY(  0deg) translateZ( 60px); }
  .box__face--back   { transform: rotateY(180deg) translateZ( 63px); }

  .box__face--right  { transform: rotateY( 90deg) translateZ(340px); }
  .box__face--left   { transform: rotateY(-90deg) translateZ(58px); }

  .box__face--top    { transform: rotateX( 90deg) translateZ(85px); }

  .section_2 .back {
    bottom: auto;
    top: calc(50% - 12px);
    left: 20px;
    text-align: left;
  }

  .desktop.sme-privacy-exclude{
    display: inline-block;
  }
  .mobile.sme-privacy-exclude{
    display: none;
  }

  .legal-policy.sme-privacy-exclude{
    bottom: -100px;
  }

}

@media only screen
and (max-device-width : 768px){
  .section_2 .controlers {
    /* bottom: 140px;
    top: 0; */
    bottom: 0;
    top: 240px;
  }
}

@media only screen
  and (device-width : 375px)
  and (device-height : 812px)
  and (-webkit-device-pixel-ratio : 3) {
    .section_2 .back {
      top: 600px;
  }
}

@media only screen
and (max-device-width : 320px){
  .section_2 .controlers {
    /* bottom: 140px;
    top: 0; */
    bottom: 0;
    top: 320px;
  }
}


/* ipad ---check this works */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
  .inputs{
      padding-top: 50%;
  }
  .screen_1 .title, .social{
    padding: 10.5% 0;
  }
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  .screen_1 .title, .social{
    padding: 3% 0;
  }
}

/* @media only screen
and (max-device-height : 815px){
  .section_2 {
    height: 100%;
  }
}*/

/* ie11  doesnt support 3d nested transforms */
@media all and (-ms-high-contrast:none){

}