html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  background-color: #000;
  cursor: pointer;
  font-family: "corbert";
}

  .content{
  margin: 0;
	position: absolute;
	top: 56%;
	left: 53%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
  max-width: 150px;
  margin: 20px;
  }



.logo{
  max-width: 200px;
  margin: 0;
	/*position: absolute;*/
	/*top: 45%;*/
	/*left: 50%;*/
	margin-right: -50%;
	transform: translate(-50%, -50%);
  margin-left: 30px;
}


@font-face {
    font-family: "corbert";
    src: url('../fonts/corbert-bold.woff') format('woff');
}


h1{
  /*padding-top: 40px;*/
  font-size: 4.5em;
  font-family: "corbert";
}



.arcade-title{
	margin: 0;
	/*position: absolute;*/
	/*top: 49%;*/
	/*left: 50%;*/
	margin-right: -50%;
	transform: translate(-50%, -50%);
	color: #fff;
  margin-top: 35px;

}



.play-button{
  margin: 0;
	/*position: absolute;*/
	/*top: 59%;*/
	/*left: 50%;*/
	margin-right: -50%;
	transform: translate(-50%, -50%);
	color: #fff;
  margin-left: 30px;

}

.play-button:hover{
  color: #b55e5d;
}


.dream-button{
  margin: 0;
	/*position: absolute;*/
	/*top: 59%;*/
	/*left: 50%;*/
	margin-right: -50%;
	transform: translate(-50%, -50%);
	color: #fff;
  margin-left: 30px;
  width: 210px;
}


.dream-button:hover{
  color: #54b7d2;
}


.btn{
  padding: 0.375em 3.75em;
  border: solid 2px;
  border-radius: 0;
}

.studio-title{
	margin: 0;
	/*position: absolute;*/
	/*top: 49%;*/
	/*left: 50%;*/
	margin-right: -50%;
	transform: translate(-50%, -50%);
	color: #fff;
  margin-top: 35px;
}

.row{
	margin: 0;
}

div#arcade {
	background: url('../imgs/male-arcade.png') no-repeat 38%;
	background-size:100% 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100vh;
	/*width:1060px;*/
	-webkit-transition: background .5s, transform .5s;
  transition: background .5s, transform .5s;
	transition-timing-function: ease-in;
	transition-timing-function: ease-out;

}

#arcade:hover{
	background: url('../imgs/male-overlay.png') no-repeat 35%;
	background-size:100% 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	-ms-transform: scale(1.1);
	-webkit-transform: scale(1.1); 
	transform: scale(1.1); 

}

div#studio {
	background: url('../imgs/saija-test.png') no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 100vh;
	-webkit-transition: background .5s, transform .5s;
  transition: background .5s, transform .5s;
	transition-timing-function: ease-in;
	transition-timing-function: ease-out;
	

}

#studio:hover{
	background: url('../imgs/saija-overlay.png') no-repeat center center;
	/*background-size:100% 100%;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transform: scale(1.1); 
	-ms-transform: scale(1.1); 
	-webkit-transform: scale(1.1); 
	z-index: 100;
	
}


/**/
/*@media only screen and (max-width: 420px) {*/
/**/
/*  .content{*/
/*    left: 68%;*/
/*  }*/
/*}*/
/**/


@media only screen and (max-width: 420px) {
    
  .studio-title{
    margin-left: 14px;
    margin-top: 25px;
    }  
    
    
  h1{
    font-size: 3.5em;
  }
    
  .content{
    left: 62%;
  }
    
  div#studio {
    max-height: 420px;
  }
  
  div#arcade {
    max-height: 420px;
}
  .dream-button{
    top: 69%;
    margin-left: 18px;
  }
  
  .logo{
    margin-left: 18px;
  }
  
  .play-button{
    top: 69%;
    margin-left: 18px;
  }

  .arcade-title{
    margin-left: 10px;
  }
  
}




@media only screen and (max-height: 760px) and (min-width: 1400px) {
  
  .dream-button{
    top: 62%;
  }
  
  .play-button{
    top: 62%;
  }
  
}



@media only screen and (max-width: 411px) and (min-width: 312px) {
  
  .content{
    left: 60%;
      margin: 20px;

  }
  

}


@media only screen and (max-width: 574px) and (min-width: 412px){

  .content{
    left:  59% !important;
  }

}

@media only screen and (max-width: 750px) and (min-width: 601px){
  h1{
    font-size: 3.5em;
  }
  
  .content{
    left: 59%;
  }
  
  .studio-title{
    margin-left: 20px;
    margin-top: 25px;
  }
  
  .arcade-title{
    margin-left: 13px;
    margin-top: 25px;
  }
  
}

@media only screen and (max-width: 600px) and (min-width: 421px){
  div#studio  {
    max-height: 500px;
  }
  
  div#arcade  {
    max-height: 500px;
  }
  
  .arcade-title{
	top: 51%;
      margin-top: 25px;
  }
  
  h1{
    font-size: 3.5em;
  }
  
  .studio-title{
    top: 51%;
    margin-left: 10px;
    margin-top: 25px;
  }
  
  .play-button{
	position: absolute;
	top: 68%;

  }
  
  .logo{
    margin-left: 10px;
  }
    
  .dream-button{
    position: absolute;
    top: 68%;
    top: 93%;
    margin-left: 10px;

  }
  
  .play-button{
    position: absolute;
    top: 68%;
    top: 93%;
    margin-left: 10px;
  }

  .content{
    left: 66%;
  }
}