body {
  margin: 0;
  background-color:#000;
}

/* SOCIAL MEDIA CONTAINER */
.share_box{
  position:fixed;
  padding:15px;
  z-index: 1;
  width:50px;
  bottom:1px;
}

/* PARALLAX SETTINGS HERE */
.parallax-container {
  position: fixed;
  overflow: visible;
  width: 100%;
  box-sizing:border-box;
}

@media screen and (max-width: 401px) {
  .parallax-layer {
    display:none;
  }
}

.parallax-layer {
  width: 100%;
  padding-top:56.25%;
  box-sizing:border-box;
  position: fixed;
  left: 0;
  top: 0;
  background-position:;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* PARALLAX LAYER STYLES */
.layer-0 {
  top: 0;
  z-index: 5;
  background: url('../images/parallax/sky.png') no-repeat center;
  background-size: cover;
}

.layer-1 {
  z-index: 5;
  background-image: url('../images/parallax/backgroundRoundTower.png');
  margin-top:8%;
}

.layer-2 {
  z-index: 10;
  background-image: url('../images/parallax/backgroundWatchTower.png');
  margin-top:13%;
}

.layer-9 {
  z-index: 15;
  background-image: url('../images/parallax/leaningTower.png');
  margin-top:calc(100% / 7.5);
}

.layer-4 {
  z-index: 20;
  background-image: url('../images/parallax/mainSection.png');
  margin-top:calc(100% / 7.5);
  padding-top:80%;
}

.release {
    z-index: 50;
    background-image: url('../images/parallax/logo.png');
    margin-top:calc(100% / 20);
}

@media screen and (max-width: 700px) {
  .release {
    width:120%;
    height:120%;
    left: -10%;
    top:-5%;
  }
}

.layer-6 {
    z-index: 30;
    background-image: url('../images/parallax/leftForeground.png');
    margin-top:calc(100% / 5.1);
}

/* END PARALLAX SETTINGS */

/* CONTENT CONTAINS EVERYTHING AND HAS NO MAX WIDTH */

.content:before {
    background-image: url('../images/parallax/rightForeground.png');
    background-size: cover;
    content: "";
    display: block;
    width: 100%;
    margin-top: -50%;
    padding-top: 56.25%;
    position: absolute;
    z-index:-1;
    pointer-events:none;
}

.content {
  position: relative;
  margin-top:calc(56.25% + 300px);
  background: #000;
  width: 100%;
  min-height: 1500px;
  box-sizing: border-box;
  z-index:90;
}
/* These media queries are for the content - they make sure the ::After element covers the water of the parallax image */
@media screen and (min-width: 100px ) and (max-width: 320px) {
  .content {
  margin-top:calc(56.25% + 240px);
  }
} 

@media screen and (min-width: 320px ) and (max-width: 450px) {
  .content {
  margin-top:calc(56.25% + 280px);
  }
} 

@media screen and (min-width: 450px ) and (max-width: 550px) {
  .content {
  margin-top:calc(56.25% + 300px);
  }
} 

@media screen and (min-width: 550px ) and (max-width: 665px) {
  .content {
  margin-top:calc(56.25% + 330px);
  }
} 

@media screen and (min-width: 665px ) and (max-width: 850px) {
  .content {
  margin-top:calc(56.25% + 370px);
  }
} 

@media screen and (min-width: 850px ) and (max-width: 960px) {
  .content {
  margin-top:calc(56.25% + 415px);
  }
}

@media screen and (min-width: 960px ) and (max-width: 1100px) {
  .content {
  margin-top:calc(56.25% + 445px);
  }
}

@media screen and (min-width: 1100px ) and (max-width: 1400px) {
  .content {
  margin-top:calc(56.25% + 481px);
  }
}

@media screen and (min-width: 1400px ) {
  .content {
  margin-top: calc(100% - 140px);
  }
}

.container {
  width:100%;
  max-width:960px;
  display:flex;
  justify-content:center;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  flex-wrap: wrap;
  margin-top: -200px;
}

.youtubeContainer {
  position:relative;
  margin: 20px 0px 20px 0px;
  overflow:hidden;
  width:100%;
  padding-bottom: 56.25%;
  box-sizing: border-box;
  display:table;
}

.clicker {
    margin: 0 auto;
    position: absolute;
    display:inline-block;
}

.iframer {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.humbleFrame {
  margin: 0 auto;
  display:block;
  margin-bottom:20px;
}

.reviewText {
  font-family: 'Source Sans Pro', sans-serif;
  color:#f2f2f2;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  margin: 10px 10px 10px 10px;
}

@media screen and (min-width: 100px ) and (max-width: 320px) {
  .reviewText h2 {
    font-size: 1.2em;
  }
  .reviewText h1 {
    font-size: 1.7em;
  }
} 

.writeUp {
  width: 100%;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color:#ddba5a;
  padding: 20px;
  margin: 0px 0px -20px 0px;
}

.writeUp h3 {
  color: #ddba5a;
}

.writeup p {
  color: #ddba5a;
}

footer {
  margin-top:40px;
  width:100%;
  box-sizing: border-box;
  display:flex;
  justify-content:center;
  margin: 0 auto;
  padding: 10px;
  flex-wrap: wrap;
  flex-direction: column;
  color:#f2f2f2;
}

.steam { 
  background-size: 100%;
  height:60px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0);
  margin: 0 auto;
  margin-bottom:10px;
  background-repeat: no-repeat;
}

.buttons {
  box-sizing: border-box;
  display:flex;
  justify-content:space-around;
  flex-wrap: wrap;
  width: 100%;
}

.stonesLogo {
  width: 250px;
  height:94px;
  margin: 0 auto;
  display: block;
  margin-top:-5px;
  margin-bottom: 20px;
}

footer p {
  display: block;
  margin: 0 auto;
  text-align: center;
}

footer iframe {
  display: block;
  margin: 0 auto;
}

.share_box{
  position:fixed;
  padding:15px;
  z-index: 99;
}

h1.trailerButton {
  text-transform:uppercase;
  margin: 0 auto;
  display: block;
  margin-bottom: 20px;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 1);
  color: #ffffff;
}

.single_2 {
  width: calc(100% / 3);
  display: inline-block;
  box-sizing:border-box;
  padding:0px 10px;
}

@media screen and (max-width: 700px) {
  .single_2 {
    width: calc(100% / 2);
  }
}

@media screen and (max-width: 700px) {
  .single_2 {
    width: 50%;
  }
}

.single_1 {
  width: 100%;
  box-sizing:border-box;
  margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

/* Form */

form {
  font: 16px/20px'Helvetica', Arial, sans-serif;
  display: block;
  padding: 6px 0 10px 0;
  width:100%;
  max-width:500px;
  margin: 0 auto;
  margin-bottom: 10px;
}

label {
  clear: both;
  display: block;
  margin: 8px 0;
  font-weight: bold;
  position: relative;
  line-height: 150%;
  font-family: Helvetica;
  font-size: 14px;
  color: #333333;
}

.email-group input {
  display: block;
  float: left;
  width: 60%;
  padding: 12px 10px 11px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-shadow: none;
}

.email-group .button {
  height:45px;
  margin: 0;
  width:30%;
  background-color: #dbb146;
}

.error, .errorText {
  margin: 5px 0 0 0;
  padding: 10px;
  font-size: 14px;
  color: #6b0505;
  background-color: #f4bfbf;
}

.formstatus {
  margin-bottom: 10px;
}

.success {
  background: #e4f3d4;
  font-size: 14px;
  color: #5ca000;
  margin: 10px 0;
  padding: 10px;
  font-family: 'Helvetica Neue', Helvetica, Arial, Sans-serif;
}

.success a {
  color: #5ca000;
  text-decoration: underline;
}

.rounded {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.button, .button-small {
  display: inline-block;
  white-space: nowrap;
  height: 40px;
  line-height: 42px;
  margin: 0 5px 0 0;
  padding: 0 22px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  font-style: normal;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.button:hover, .button-small:hover {
  color: white;
  background-color: #f9dc93;
}


@media screen and (max-width: 460px) {
  .email-group button {
    width: 25%;
    min-width: 20px;
    font-size:0.81em;
    padding:2px;
  }
}

@media screen and (max-width: 760px) {
  h3 {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 585px) {
  h3 {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 494px) {
  h3 {
    font-size: 1em;
  }
}

.buy p {
  font-size:2em;
  margin: 0;
  font-weight:bold;
  margin-top:7px;
  margin-bottom:7px;
  box-sizing: border-box;
}

.high {
  margin-bottom:100px;
  margin: 0 auto;
  display:block;
}

.button, .button:visited {
  background-repeat: no-repeat;
  display: inline-block; 
  padding: 5px 10px 6px; 
  text-decoration: none;
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(0,0,0,0.25);
  position: relative;
  cursor: pointer;
  color:#f2f2f2;
  margin-bottom:20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.round {
  -moz-border-radius: 6px; 
  -webkit-border-radius: 6px;
}

a.button  {
  text-align:right;
  vertical-align: middle;
  line-height: 40px;
}

.button:active { 
  top: 1px; 
}

.small.button, .small.button:visited { 
  font-size: 11px
}

.button, .button:visited, .medium.button, .medium.button:visited { 
  font-size: 13px; 
  font-weight: bold; 
  line-height: 1; 
  text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
}

.green.button, .green.button:visited { 
  background-image: url('../images/steam.png');
  width: 40%;
  height:0px; 
  background-size: 100%;
  padding-top: 89px;
}

.red.button, .red.button:visited { 
  background-image: url('../images/HumbleStore.png');
  width: 40%;
  height:89px;
  background-size: 100%;
}

.humbleButton, .steamButton, .iosButton {
  width: 300px;
  height: 96px;
  position: relative;
  box-sizing: border-box;
  margin: 0px 0px 0px 0px;
}


@media screen and (max-width: 675px) {
  .humbleButton, .steamButton, .iosButton  {
    width: 200px;
    height:50px;
  }
}

@media screen and (min-width:200px) and (max-width: 475px) {
  .humbleButton, .steamButton, .iosButton  {
    width: 300px;
    height:96px;
    margin: 0px;
  }

  .reviewText {
    margin:0px;
    padding-bottom:0px;
  }
}

.humbleButton:hover{
  background-image: url('../images/highlight.png');
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center center;
}

.steamButton:hover {
  background-image: url('../images/highlight.png');
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center center;
}

.iosButton:hover{
  background-image: url('../images/highlight.png');
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center center;
}

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

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

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

.divider {
  width: 100%;
  max-width:594px;
  max-height:32px;
  display:block;
  margin: 0 auto;
  padding: 40px 0px 40px 0px;
}

.widget-theme-light .widget {
  background: rgba(0,0,0,0) !important;
}

.smaller {
  max-height: 15px;
  height:100%;
  max-width:493px;
  padding: 20px 0px 20px 0px;
}

.writeUp h1 {
  text-align: center;
}

.reviewText footer {
}

.reviewText h2 {
  color: #ab8e41;
}

.awards {

  box-sizing: border-box;
  display:flex;
  justify-content:space-around;
  flex-wrap: wrap;
  width: 100%;
  margin: 0px 0px 40px 0px;
}

.awardImg {
  width: 300px;
  height: 96px;
  position: relative;
  box-sizing: border-box;
  margin: 20px 0px 20px 0px;
}

@media screen and (min-width: 741px) and(max-width: 872px) {
  .reviewText h1, .writeUp h1 {
    font-size:2.8em;
  }
}

@media screen and (min-width: 401px) and (max-width: 740px) {
  .reviewText h1, .writeUp h1 {
    font-size:2.8em;
  }
  h1 {
    font-size: 2.8em;
  }
}

@media screen and (min-width: 200px) and (max-width: 401px) {
  .reviewText h1, .writeUp h1 {
    font-size:2em;
  }
  h1 {
    font-size: 2em;
  }
}

.space {
  margin-bottom: 60px;
}

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
    position: fixed;
    /* left: 0px; */
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 49;
    background: url(../images/loading.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.twitterFrame {
  width: 126px; 
  height: 46px;
  border:none;
  overflow:hidden; 
  border:none;
  background-color:transparent;
}

.humbleFrame {
  width: 546px;
  height: 353px;
  border:none;
  overflow:hidden;
  margin-top: 20px;
  margin-bottom:-20px;
  width: 1px;
  min-width: 100%;
  box-sizing:border-box;
}

@media screen and (max-width: 490px) {
  .humbleFrame {
    height: 160px;
    width: 95%;
    overflow: hidden;
    webkit-overflow-scrolling:touch;
  }
  #subscribe-form {
    margin:20px 0px 0px 0px;
  }
}

.mobile {
  background: url(../images/mobile.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position:absolute;
  top: 0px;
  z-index: 1;
  display:none;
  width:100%;
  height:50%;
}

.copyright {
  font-size: 0.7em;
  margin-bottom:10px;
}

@media screen and (max-width: 401px) {
  .mobile {
  display: inline-block;
  }
}

@media screen and (min-width: 200px) and (max-width: 400px) {
  .single_2 {
    width:50%;
  }
  .writeUp {
    margin:0px 0px 0px 0px;
    padding-bottom: 0px;
  }
  .divider.space {
    margin-bottom: 0px;
  }
  .humbleButton, .steamButton {
  width: 200px;
  height: 49px;
}
.iframeWrapper {
  width: 100%;
  height:auto;
  box-sizing:border-box;
}
}

@media screen and (min-width: 200px) and (max-width: 320px) {
  .humbleFrame {
    width: 100%;
}
}
.iframeWrapper {
  width: 100%;
  max-width
  height:auto;
  box-sizing:border-box;
    width: 546px;
}