html, body {
	margin: 0;
	font-size: 3em;
  overflow: hidden;
  background-color: black;
  font-family:"Ginto-Light";

}
a {text-decoration: none;}

@font-face {
    font-family: "Ginto-Regular";
    src: url(font/Ginto-Regular.woff);
}

@font-face {
    font-family: "Ginto-Medium";
    src: url(font/Ginto-Medium.woff);
}


@font-face {
    font-family:"Ginto-Light";
    src: url(font/Ginto-Light.woff);
}

@font-face {
    font-family:"Ginto-Thin";
    src: url(font/Ginto-Thin.woff);
}

::-webkit-scrollbar { 
    display: none; 
}

/*INTRO*/

.panel {
  z-index: 200;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  transition: transform 0.9s ease-in-out;
  width: 100%;
  height: 100vh;
  background-color: black;
}


h2#intro {
   font-family:"Ginto-Light";
  color:white;
  font-weight: 5;
  opacity: 1;
  font-size:6vw;
  padding-top: 70%;
  line-height: 5.5vw;
  padding-bottom: 20%;
  max-width: 100%;
  margin: 0 auto;
  text-transform: uppercase;
  text-align: left;
  position: absolute;
  left: 37%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);}


@media screen and (max-width: 700px) {
  h2#intro {
     top: 30%;
     font-size: 8vw;
     line-height: 7.5vw;}
}

#ira {
  position: absolute;
  left: 90%;
  bottom: 10%;
  font-size: 0.1em;
  color: white;
  transform: translateX(-50%);
  font-family: sans-serif;
  text-align: center;
  font-weight: 10;
  font-family:"Ginto-Light";
  text-transform: uppercase;
  letter-spacing: 2px;
}

.panel.panel--hide {
  transform: translate(0, -100%);
}


/*CUBE*/
.scene {
	width: 100%;
	height: 100vh;
	border: 1px solid #CCC;
	perspective: 200vh;
}

.cube {
  width: 100%;
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube__face {
  position: absolute;
  width: 100%;
  height: 100vh;
  border: 2px solid black;
  line-height: 100vh;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front { background-color: #efeef3;
                     opacity: 1; }
.cube__face--back  { background-color: #efeef3;
                     opacity: 1; }
.cube__face--top   { background-color: #efeef3;
                     opacity: 1; }  
.cube__face--bottom  { background-color: #efeef3;
                     opacity: 1; }                                                         

.cube__face--front  { transform: rotateY(  0deg) translateZ(50vh); }
.cube__face--back   { transform: rotateY(180deg) rotateZ(180deg) translateZ(50vh); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(50vh); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(50vh); }


/*INSIDE-CUBE*/

#flow3 {
  position: absolute;
  left: 50%;
  top: 10px;
   font-size: 0.4em;
  text-align:center;
  transform: translateX(-50%);
  font-family: sans-serif;
  font-weight: 10;
  line-height: 1em;
  color: black;
  text-transform: uppercase;
  letter-spacing: 2px;
}

span{color:black;
      font-family:"Ginto";
      font-weight: 1;
     font-size: 210%;
    padding: 50px;
    bottom: 80px;
    border: solid 1px black;
    padding-left: 50px;
    padding-right: 40px;
    padding-top: 10px;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-radius: 50px; 
    text-align: center;
  }

  @media screen and (max-width: 900px) {
  
  span {  font-family:"Ginto";
      font-weight: 1;
     font-size: 50%;
    padding: 50px;
    bottom: 80px;
    border: solid 1px black;
    padding-left: 50px;
    padding-right: 40px;
    padding-top: 10px;
    letter-spacing: 2px;
    padding-bottom: 10px;
    border-radius: 50px; 
    text-align: center;
  }
}

#flow2 {
  position: absolute;
  color:black;
  left: 50%;
  bottom: 10px;
  font-size: 0.4em;
  text-align:center;
  transform: translateX(-50%);
  font-family: sans-serif;
  font-weight: 10;
  line-height: 1em;
  text-transform: uppercase;
}

#about {
      color: black;
      left: 30%;
      right: 30%;
      text-align: center;
      top: 40%;
      text-align: center;
      font-size: 0.4em;
      line-height: 1em;
      position: absolute;
       font-family:"Ginto-Light";

}