html{
  color:#2c2b47;
  background:#000519;
  font-family:"GeoSans";
  margin:0px;
  background-repeat:no-repeat;
 // cursor: url(cursorWhite.png), auto;
 // cursor: vertical-text;

}

body{
  color:#2c2b47;
  background:#000519;
  margin: 0px;
  overflow: hidden;
}




#container{

 width      : 100%;
 height     : 100%;
 position   : absolute;
 top        : 0px;
 left       : 0px;
 //background : #000;

}

#curious{
  text-align: center;
  color: #2c2b47;
  font-size: 20px;
  padding: 100px;
  display: none;

}


#hookInfo{

  position:absolute;
 display:block;
// width:100px;
 //height:100px;
 z-index:999;
 opacity:.8;
 font-size:30px;

}

#hookCount{

  display:none;

}

.hookRow{

  height :30px;
 // width: 10000px;
  display :block;

}

.hookCounter{

  width: 18px;
  height: 18px;
  margin:5px;
  border: 1px solid black;
  position:relative;
  display: inline-block;
}

@font-face {
  font-family: "GeoSans";
  src: url("../AlteHaasGroteskBold.ttf");
}

a{

  color: #2c2b47;
  text-decoration: none;
  underline: none;

}

a:hover{
  color: #ffffff;

}

.scroll{
  overflow:auto;
}

.fullHeight{
  height:100%;
}

.absolute{
  position:absolute;
}
#curtain{

  position      : absolute;
  z-index       : 99;
  top           : 0px;
  left          : 0px;
  width         : 100%;
  height        : 100%;
  
  background:#000519;

}

#failureDialog{

  z-index: 999;
  width:100%;
  height:100%;
  overflow:auto;
  position: absolute;
  left:0px;
  background: #000;
  color:#2c2b47

 text-align:center;

}


#failureList{

  padding:0px;
  margin:0px;
  text-align: center;
  list-style:none;

  display:block-inline;
}
#failureImg{

  width:10%;

}


#loadBar{

  position      : absolute;
  top           : 50%;
  height        : 10px;
  width         : 0px;
  background    : #2c2b47;

}

#loadingGif{

  position      : absolute;
  top           : 50%;
  left          : 50%;
  z-index       : -1;

  background:#aec5d4;

}

#loadInfo{

  position      : absolute;
  top           : 50%;
  font-size     : 20px;

  height        : 50px;
  width         : 100%;
  margin-top    : 5px;
  text-align    : center;
  //background    : #fff;


}

#informationSection{

display:none;

  padding:20px;
  position:absolute;
  z-index:500px;
  right:0px;
  bottom:0px;
  color:#2c2b47;
  background: #000;
  opacity:.5;
  //border: 1px solid white;

}

#informationSection h1{
  font-size:20px;
}
#renderingContainer{

  position    : absolute;
  top         : 0px;
  left        : 0px;
  width       : 100%;
  height      : 100%;
  //background  : #000;

}

#interface{

  position        : absolute;
  top             : 0px;
  left            : 0px;
  width           : 100%;
  height          : 100%;
  z-index         : 999;
  pointer-events  : none;

}


#info{

  position:absolute;
  top:0px;
  padding-left: 20px;

}

#title{

  pointer-events  : auto;

}

#summary{

  font-size:16px;

}


#social{

  pointer-events  : auto;

  position:absolute;
  right:0px;
  bottom:5px;

  //width:100%;

}


.social{

  width:50px;
  height:50px;
  display: block;

  opacity:.3;
  padding:5px;
  float:right;
}
.social:hover{

  opacity: .7;

}

/*#facebook{

  margin: 5px;
  width:25px;
  height:25px;
  display: block;

  opacity:.3;
  background: url("../lib/img/icons/facebook_1.png");
  background-size: 100%;

}

#facebook:hover{
  opacity:1;
}*/

#titleEP{
  position: absolute;
  right: 5px;
  font-size: 23px;
  bottom: 65px;
  opacity: .6;
  color: #2c2b47;
}

#GUI{

  //position:absolute;
  right           : 0px;
  top             : 0px;
  pointer-events  : auto;

}



#stats{

  position:absolute;
  left:0px;
  bottom:0px;
  z-index:999;
  //display:none;

}

#startInfo{

    /* padding: 30px; */
    color: #aec5d4;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
    margin-left: -100px;
    margin-top: 30px;
    text-align: center;
    display: none;
    background: #000519;

}

#p1Curtain{
    top: 50%;
    height: 7%;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-600%);
    -webkit-filter: hue-rotate(0deg) saturate(35%) brightness(150%);
  filter: hue-rotate(0deg) saturate(35%) brightness(150%);

}



#p2Curtain{
    top: 50%;
    height: 7%;
    display: block;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-450%);
    -webkit-filter: hue-rotate(0deg) saturate(35%) brightness(150%);
  filter: hue-rotate(0deg) saturate(35%) brightness(150%);
}

#baseTitle{

  top:50%;
  left: 50%;
  transform: translate(-50%,500%);
  position:absolute;
  text-align: center;
}

#PreOrder{
      color: #fff;
    z-index: 99;
    position: fixed;
    width: 150px;
    height: 150px;
    background: none;
    border-radius: 50%;
    top: 40px;
    left: 40px;
    display:none;
}
#PreOrder:hover{
    color: #fff;
    z-index: 99;
    position: fixed;
    width: 160px;
    height: 160px;
    background: rgba(255,255,255,.3);
    border-radius: 50%;
    top: 35px;
    left: 35px;
}

#PreOrder a{
    color: #000;
    z-index: 99;
    position: absolute;
    width: 140px;
    height: 20px;
    vertical-align: middle;
    top: 50%;
    left: 50%;
    margin-left: -70;
    margin-top: -10;
    text-align: center
    opacity:.5;
}

#PreOrder a:hover{
  opacity: 1;
}

#PreOrder img{
  width: 150px;
  margin-top: -65;
  margin-left: -5;
  opacity:.5;
}

#PreOrder img:hover{
  opacity:1;
}


#startButton{

  color:#aec5d4;
  position:absolute;
  top:-80px;
  height:80px;
  background:#000519;
  width:100%;
  margin-left:-150px;
  font-size:75px;

}



#startButton:hover{
  color: #ddd;
}

#title {
    pointer-events: none;
    font-size: 20;
    z-index: 10;
    position: fixed;
    bottom: 0px;
    right: 40px;
    //width:100%;
    color:rgba(44,43,71, .8);
   // text-align:center;
    display:none;
}


#SHARE{
  position:absolute;
  bottom:0px;
  right:0px;
  z-index: 9;
  display:none;
}

#SHARE a{
opacity: .3;
}

#SHARE a:hover{
opacity: 1;
}

#SHARE img{
width:50px;
height:50px;
padding:5px;
}

#GUI{

  position:fixed;
  right:0px;
  top:0px;
  z-index:999;
  display: none;

}


.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin-top: 100px;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/*.vid-offset{margin-top: -250px}*/



#MailChimp{
    position: fixed;
    z-index: 1000;
    width: 300px;
    font-size: 20px;
    left: 50%;
    margin-left: -170px;
    background: rgba(255,255,255,.5);
    padding: 20px;
    top: 50%;
    margin-top: -180px;
    display:none;

}


#mc_embed_signup{
  margin: 20px 0 0 0;
}

.mc-field-group{
  display: block; 
//  padding:10px;
  width: 100%;
}

.mc-field-group input{
  display: block; 
//  padding:10px;
  width: 100%;
}

#subscribeField{
  color: black; 
  cursor: text; 
  font-size: 20px; 
  font-family: 'GeoSans', serif;
  font-weight: 100; 
  /*background-color: red; */
  border: none;
  border: 1px solid  #2c2b47;
  height: 30px; 
  /*padding: 5px 32px 5px 10px; */
  margin-right: 0px; 
  width: 100%;
  display: block;
  padding:10px;
}



#subscribeField:hover{
  color: black; 
  cursor: text; 
  font-size: 20px; 
  font-family: 'GeoSans', serif;
  font-weight: 100; 
  /*background-color: red; */
  border: none;
  border: 2px solid  #2c2b47;
  height: 30px; 
  /*padding: 5px 32px 5px 10px; */
  margin-right: 0px; 
  width: 100%;
  display: block;
  padding:10px;
  background:#fff;
}

.inline-label { 
    white-space: nowrap;
    max-width: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    float:left;     
}

input{
  border:3px solid  #2c2b47;
    font-size: 20px; 
  font-family: 'GeoSans', serif;
}

input:hover{
  border:3px solid white;
  color:white;
  background: #2c2b47;

}

#addUp{
  font-size:25px;
  padding-top: 10px;
  margin-bottom: 3px;
  margin-top:6px;
}

#checkbox1{
  -webkit-appearance: none;
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  padding: 10px;
  margin:10px;
  margin-top: 2px;
  margin-left: 0px;
  margin-right:15px;
  border-radius: 3px;
  display: inline-block;
  position: relative;
}

#checkbox1:active, #checkbox1:checked:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

#checkbox1:checked {
  background-color: #e9ecee;
  border: 1px solid #adb8c0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
  color: #99a1a7;
  background: #2c2b47;
}

#checkbox1:checked:after {
  content: '\2714';
  font-size: 15px;
  position: absolute;
  top: 0px;
  left: 3px;
  color: #99a1a7;
  background: #2c2b47;
}

#checkbox2{
  font-size:18px;
  margin-top: -50px;
}


#mc-embedded-subscribe{
  font-size:45px;
  width:80%;
  position:absolute;
  margin-top:-30px;
  left:50%;
  transform:translate(-50%);
}

.clear{

  text-align: center;
  display:inline-block;
  padding: 20px;
  padding-top: 40px;
}

#xtraSub{
  padding-bottom:40px;
}

#subscribeField:focus {
    outline: none;
}

#subscribeBtn{
  /*font-weight: 900; */
  line-height: 5px; 
  color: black; 
  width: 32px; 
  height: 32px; 
  cursor: pointer; 
  font-family: 'Open Sans', sans-serif; 
  font-size: 20px;
  /*background-color: #555555; */
  background-color: transparent;
  border: none;
  /*margin-top: 3px; */
  /*opacity: .5;*/
  transform: rotate(0deg);
  transition: transform 0.1s linear; 
}
#subscribeBtn:hover{
  cursor: pointer; 
/*  background-color: white; 
  color: black;*/
  /*margin-left: 3px;*/
  transform: rotate(90deg);
  transition: transform 0.1s linear; 
}


#email-signup-text{
  font-size: 25px;
  color: #2c2b47;
  width: 75%;
  display: block;
}

#Close{
  font-size:45px;
  position:relative;
  float:right;
  top:-5px;
  padding-right:10px;
  margin-bottom: -160px;
  color:#2c2b47;
}

#Close:hover{
  color:#eee;
}