body {
  background           : #212121;
  background-image     : url(img/bg.jpg);
  background-size      : cover;
  color                : #dad9d9;
  text-align           : center;
  overflow-x           : hidden;
  background-attachment: fixed;
  font-family          : "Helvetica Neue",Helvetica,Arial,sans-serif;
}

a {
  color: #ededed;
}
a:hover {
  color: white;
}

.content-center {
  min-width: 700px;
  margin   : auto;
  padding  : 0 5rem;
}
#logo {
  position   : relative;
  margin-left: 25%;
  width      : 50%;
}
.logo-wood-bg {
  background-image: url(img/wood.jpg);
  position        : absolute;
  top             : 0;
  left            : -80%;
  right           : -80%;
  height          : 79%;
  background-size : contain;
  border-bottom   : 1rem solid #563213;
}
.logo-band {
  position     : absolute;
  top          : 42%;
  height       : 20%;
  width        : 120%;
  background   : #563213;
  left         : 50%;
  margin-left  : -60%;
  border-radius: 1rem;
  z-index      : 0;
}
#logo .logo-txt {
  width   : 100%;
  z-index : 100;
  position: relative;
}
.logo-sg {
  right: 25%;
  top  : 13%;
  width: 38%;
}
.logo-g1 {
  right: 55%;
  top  : 51%;
  width: 14%;
}
.logo-g2 {
  right: 64%;
  top  : 46%;
  width: 10%;
}
.logo-g3 {
  top  : 54%;
  width: 9%;
  right: 72%;
}

.gear {
  position: absolute;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-animation-name: spin;
  -moz-animation-duration: 4000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  -ms-animation-name: spin;
  -ms-animation-duration: 4000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.gear-i  {
  -webkit-animation-name: spinInv;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;

  -moz-animation-name: spinInv;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;

  -ms-animation-name: spinInv;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;

  animation-name: spinInv;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.gear.t1 {
  -webkit-animation-duration: 1500ms;
  -moz-animation-duration   : 1500ms;
  -ms-animation-duration    : 1500ms;
  animation-duration        : 1500ms;  
}
.gear.t2 {
  -webkit-animation-duration: 3000ms;
  -moz-animation-duration   : 3000ms;
  -ms-animation-duration    : 3000ms;
  animation-duration        : 3000ms;  
}
.gear.t3 {
  -webkit-animation-duration: 4500ms;
  -moz-animation-duration   : 4500ms;
  -ms-animation-duration    : 4500ms;
  animation-duration        : 4500ms;  
}
.gear.t4 {
  -webkit-animation-duration: 6000ms;
  -moz-animation-duration   : 6000ms;
  -ms-animation-duration    : 6000ms;
  animation-duration        : 6000ms;  
}
.gear.t5 {
  -webkit-animation-duration: 7500ms;
  -moz-animation-duration   : 7500ms;
  -ms-animation-duration    : 7500ms;
  animation-duration        : 7500ms;  
}
.gear.t6 {
  -webkit-animation-duration: 9000ms;
  -moz-animation-duration   : 9000ms;
  -ms-animation-duration    : 9000ms;
  animation-duration        : 9000ms;  
}
.gear.t7 {
  -webkit-animation-duration: 20000ms;
  -moz-animation-duration   : 20000ms;
  -ms-animation-duration    : 20000ms;
  animation-duration        : 20000ms;  
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

@-moz-keyframes spinInv { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spinInv { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spinInv { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

.social {
  background-color: #563213;
  width           : 50%;
  left            : 50%;
  margin-left     : -26%;
  position        : relative;
  border-radius   : 15px;
  padding         : 0.5% 1%;
  margin-top      : -2%;
}
.social a {
  text-decoration: none;
  color: white;
}
.social a:hover {
  opacity: 0.6;
}
.social img {
  width    : 30%;
  max-width: 120px;
  min-width: 30px;
}

.first-pres {
  background-image   : url(img/cards-back-empty.png);
  background-repeat  : no-repeat;
  background-position: 50%;
  background-size    : 100%;
  height             : 370px;
  width              : 370px;
  text-align         : center;
  padding            : 130px;
  left               : 50%;
  position           : relative;
  margin-left        : -315px;
  margin-top         : 2rem;
}
.first-pres h2 {
  line-height:2rem;
  margin-top: 70px;
}

.signup {
  position        : relative;
  min-height      : 10rem;
  text-align      : center;
  pointer-events  : all;
  background-image: url(img/wood.jpg);
  border-radius   : 0;
  border          : 1rem solid #563213;
  padding         : 2rem;
  margin          : 2rem 0;
  max-width       : 42rem;
  margin-left     : -24rem;
  left            : 50%;
}
.signup .btn, .signup button {
  font-size  : 3rem;
  height     : 6rem;
}
button, .btn {
  font-family    : fantasy;
  color          : white;
  background     : #aa4823;
  border         : 1px solid #ff9900;
  padding        : 1rem;
  cursor         : pointer;
  text-decoration: none;
}
.btn:hover, .btn:focus,
button:hover, button:focus {
  background  : #953f1f;
  border-color: #e68a00;
}
.btn:active,
button:active {
  background-color: #80361a;
  border-color: #cc7a00;
}
.btn:active:hover,
button:active:hover {
  background: #6b2d16;
  border-color: #b36b00;
  outline-color: beige;
}
.btn:focus,
button:focus {
  outline-color: orange;
}

input {
  padding   : 0.3rem;
  text-align: center;
  border    : 1px solid gold;
  background: #fff3eb;
  font-size : 0.8rem;
  cursor    : pointer;
}
label {
  cursor    : pointer;
}
input#email {
  font-size : 1.7rem;
  height    : 3rem;
  width     : 19rem;
}
input[type="checkbox"],
input[type="radio"] {
  margin-right: 0.3rem;
}

.form-title {
  display: block;
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

.form-sign-2, .form-sign-3 {
  background: rgba(0,0,0,0.7);
  padding   : 1rem;
  color     : rgb(189, 189, 189);
}
.left-align-form {
  text-align: left;
  display: inline-block;
}
.left-align-form label {
  display: block;
  margin-bottom: 0.3rem;
}

.form-sign-2>div {
  margin-bottom: 1rem;
}

.form-sign-2, .form-sign-3 {
  display: none;
}

.signup.p2 .form-sign-1, .signup.p2 .form-sign-3 {
  display: none;
}
.signup.p2 .form-sign-2 {
  display: block;
}
.signup.p3 .form-sign-1, .signup.p3 .form-sign-2 {
  display: none;
}
.signup.p3 .form-sign-3 {
  display: block;
}

.preview {
  color        : #cecece;
  background   : rgba(33, 23, 15, 0.74);
  padding      : 1rem;
  border-radius: 1rem;
}
.preview img {
  width: 100%;
  max-width: 1200px;
}

footer {
  background: black;
  bottom    : 0;
  padding   : 0.5rem 2rem;
  margin-top: 4rem;
  text-align: center;
}

.error-span {
  display: none;
  color: rgb(240,50,50);
}
.error-span.visible {
  display: block;
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (max-width: 699px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (max-width: 699px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (max-width: 699px),
only screen and (        min-device-pixel-ratio: 2)      and (max-width: 699px),
only screen and (                min-resolution: 192dpi) and (max-width: 699px),
only screen and (                min-resolution: 2dppx)  and (max-width: 699px) { 
  .content-center {
    min-width: auto;
    padding: 0;
  }
  
  #logo {
    margin-left: 0;
    width: 100%;
  }
  
  .social {
    width      : 100%;
    margin-left: 0;
    left       : 0;
  }
  
  .first-pres {
    height     : 250px;
    width      : 250px;
    padding    : 70px;
    left       : 50%;
    margin-left: -195px;
    font-size  : 0.65rem;
  }
  .first-pres h2 {
    line-height: 1.2rem;
    margin-top : 50px;
  }
  
  .signup {
    max-width  : 22rem;
    margin-left: -13rem;
  }
  
  input#email {
    font-size: 1rem;
    height   : 2rem;
    width    : 18.5rem;
  }
  
  .signup button {
    font-size: 2rem;
    height   : 4rem;
    padding  : 0 2rem;
  }
  
  .preview {
    width: auto;
  }
}

/* beta page specific stuff */
.sub-title {
  position  : absolute;
  left      : 0;
  top       : 60%;
  z-index   : 200000;
  background: rgba(0, 0, 0, 0.55);
  padding   : 0.5rem;
  font-size : 2rem;
  right     : 0;
  text-align: center;
}
.beta-page {
  text-align: left;
}
.marginer {
  margin: 4%;
}