/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* top-level stuff */

* {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;    
}

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

body {
  background-color: #040b1a;
  color: #E4DCAD;  
  -ms-overflow-style: none;
}

#wrapper {
  min-width: 585px;
  max-width: 100%;
  height: 30000px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.noscroll {
    overflow: hidden !important;
}

section {
  overflow: hidden;
  position: relative;
  width: 100%;
}
.island-block { 
  background-color: #8A9AA1;
  height: 592px; 
}
.water-block { 
  height: 950px; 
  margin-bottom: 102px;
}
.tentacles { height: 2150px; padding-top: 300px; }

/* wide images */

.wide-image-container {
  position:relative;
  width: 100%;
}

.wide-image-container img {
  margin-left: -1080px;
  position: absolute;
  left: 50%;
}
.wide-image-container div {
  background-position: center top;
  background-repeat: repeat-x;
  width: 100%;  
}

/* island + water */

.island { position: absolute; top: 270px; }
.island div {
  height: 322px;  
  z-index: 13;
  position: relative;
  background-image: url("images/island/top2.png");
  background-repeat: no-repeat;
  background-size: 859px 322px;  
  margin-left: -30px;
}

.below-logo { position: absolute; top: 50px; }
.below-logo div {
  height: 191px;
  z-index: 13;
  position: relative;
  background-image: url("images/island/below_logo.png");
  background-repeat: no-repeat;
  background-size: 255px 191px;
}

.island-clouds { height: 0px; }
.island-clouds div {
  position: absolute;
  top: 50px;
  width: 6032px;
  margin-left: -3016px;
  left: 50%;
  height: 442px;
  background-image: url("images/island/clouds1.png");
  background-size: 3016px 442px;

  z-index: 12;
}

.animation-fast {
  -webkit-animation: clouds-scroll 100s linear infinite;
          animation: clouds-scroll 100s linear infinite;
}
.animation-slow {
  -webkit-animation: clouds-scroll 200s linear infinite;
          animation: clouds-scroll 200s linear infinite;
}

@-webkit-keyframes clouds-scroll {
  from { transform: translate3D(-1508px, 0px, 0px); }
  to { transform: translate3D(1508px, 0px, 0px); }
}
 
@keyframes clouds-scroll {
  from { transform: translate3D(-1508px, 0px, 0px); }
  to { transform: translate3D(1508px, 0px, 0px); }
}

.island-background { position: absolute; top: 0px; width: 100%; }
.island-background div {
  background-image: linear-gradient(to top,  #D4D7D3 0%, #8A9AA1 100%);
  height: 592px;
  position: relative;
  z-index: 11;
}

.island-underwater { position: absolute; top: 0px; width: 100%; }
.island-underwater div {
  height: 811px;
  width: 100%;
  position: relative;
  z-index: 1;
  background-image: url("images/island/island_bottom.png");
  background-repeat: no-repeat;
  background-size: 2160px 811px;  
}

.water-1-body { position: absolute; top: 0px; width: 100%; }
.water-1-body div {
  height: 10px;
  position: relative;
  z-index: 5;
  background-color: #697A82;
}

.water-2-body { position: absolute; top: 10px; width: 100%; }
.water-2-body div {
  height: 19px;
  position: relative;
  z-index: 4;
  background-image: url("images/island/water2.png");
  background-size: 2160px 19px;
}

.water-3-body { position: absolute; top: calc(10px + 19px); width: 100%; }
.water-3-body div { 
  height: 54px;
  position: relative;
  z-index: 3;
  background-image: url("images/island/water3.gif");
  background-size: 2160px 54px;  
}

.water-4-body { position: absolute; top: calc(10px + 19px + 54px); width: 100%; }
.water-4-body div { 
  height: 162px;
  position: relative;  
  z-index: 2;
  background-image: url("images/island/water4.gif");
  background-size: 2160px 162px;    
}

.surface-line { position: absolute; top: calc(10px + 19px + 54px + 161px); width: 100%; }
.surface-line div {
  width: 100%;
  height: 9px;
  position: relative;
  z-index: 10;
  background-color: #AEC1BD;
}

.sea-gradient { height: 0px; }
.sea-gradient div {
  position: absolute;
  top: calc(10px + 19px + 54px + 161px + 9px);
  background-image: linear-gradient(to top,  #040b1a 25%,#3f565f 80%,#507077 100%);
  height: 1900px;
  z-index: 0;
}

.sealines-2 { height: 0px; }
.sealines-2 div {
  position: absolute;
  top: 250px;
  height: 86px;
  width: 6032px;
  margin-left: -3016px;
  left: 50%;
  background-image: url("images/island/sealines2.png");
  background-size: 3016px 86px;
  z-index: 2;
  -webkit-animation: clouds-scroll 200s linear infinite;
          animation: clouds-scroll 200s linear infinite;
}

#separator {
  height: 1645px;
}

/* screenshots */

.eye {
  position: relative;
  width: 73px;
  height: 0px;
  margin: 0 auto;
}
.eye div {
  position: absolute;
  width: 73px;
  height: 38px;
  background-image: url("images/eye.png");
  background-size: 73px 38px;
}

#eye-1 div { left: -600px; top: 600px; }
#eye-2 div { left: 600px; top: 150px; }
#eye-3 div { left: -500px; top: -400px; }
#eye-4 div { left: 500px; top: 0px; }

.vignette {
  position: relative;
  width: 717px;
  height: 406px;
  margin: 0 auto;
}

.vignette img {
  position: absolute;
  left: 0;
  height: 606px;
}

.vignette img.full {
  opacity: 0;
  z-index: 2;

  -webkit-transition: opacity 1.0s cubic-bezier(0,0,0.25,1);
     -moz-transition: opacity 1.0s cubic-bezier(0,0,0.25,1);
      -ms-transition: opacity 1.0s cubic-bezier(0,0,0.25,1);
       -o-transition: opacity 1.0s cubic-bezier(0,0,0.25,1);
          transition: opacity 1.0s cubic-bezier(0,0,0.25,1);           
}
.vignette img.full:hover {
  opacity: 1;
}

.vignette { transition: left 1.5s; }
.vignette:first-child  { transition-delay: 0s; }
.vignette:nth-child(2) { transition-delay: 0.15s; }
.vignette:last-child   { transition-delay: 0.3s; }

.triad .vignette:first-child  { left: -350px; }
.triad .vignette:nth-child(2) { left: 350px;  }
.triad .vignette:last-child   { left: -350px; }

@media screen and (max-width: 1280px) {
  .triad .vignette:first-child  { left: -250px; }
  .triad .vignette:nth-child(2) { left: 250px;  }
  .triad .vignette:last-child   { left: -250px; }
}

.triad-inv .vignette:first-child  { left: 350px; }
.triad-inv .vignette:nth-child(2) { left: -350px; }
.triad-inv .vignette:last-child   { left: 350px; }

@media screen and (max-width: 1280px) {
  .triad-inv .vignette:first-child  { left: 250px; }
  .triad-inv .vignette:nth-child(2) { left: -250px; }
  .triad-inv .vignette:last-child   { left: 250px; }
}

.triad, .triad-inv {
  margin-bottom: 300px;
}
#last-triad { margin-bottom: 0px;}

/* text */

h1 {
  font-size: 4em;
  text-align: center;
  z-index: 1;
  position: relative;
  margin-top: 125px;
  margin-bottom: 125px;
  height: 53px;
}

h1.wide-image-container div {
  background-repeat: no-repeat;
  height: 53px;
}

#survive {
  background-image: url("images/text/survive.png");  
  background-size: 1311px 53px;
}
#discover {
  background-image: url("images/text/discover.png");  
  background-size: 1369px 53px;
}
#explore {
  background-image: url("images/text/explore.png");  
  background-size: 1323px 53px;
}

/* lightbox */

#lightbox-overlay {
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: 30000px;
  background: rgba(0,0,0,0.8);
  visibility: hidden;
  z-index: 999;
  opacity: 0;

  transition: opacity 0.5s cubic-bezier(0,0,0.25,1);  
}
.overlay-enabled {
  opacity: 1 !important;
  visibility: visible !important;
}

.shown-lightbox {
  visibility: visible !important;
}

.lightbox {
  opacity: 0;
  position: absolute;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: table;
  visibility: hidden;
  text-align: center;
  top: 0;
  left: 0;
  transition: none;
}

.lightbox .valign {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.lightbox img {
  max-width: 95vw;
  max-height: 95vh;
}

.lightbox:target {
  opacity: 1;
  outline: none;
  transition: opacity 0.5s cubic-bezier(0,0,0.25,1);
}

/* tentacles */

#tentacles-1 { height: 0px; }
#tentacles-1 div {
  background-image: url("images/darktop.svg");  
  background-size: 2160px 1669px;  
  height: 1669px;  
  z-index: 3;
}

#tentacles-2 { height: 0px; margin-top: 1250px; }
#tentacles-2 div {
  background-image: url("images/darkmiddle.svg");  
  background-size: 2160px 1997px;  
  height: 1997px; 
  z-index: 2;
}

#tentacles-3 { height: 0px; }
#tentacles-3 div {
  background-image: url("images/darkback.svg");  
  background-size: 2160px 1738px;
  height: 1738px;
  z-index: 1;
}

#black-pudding div {
  margin-top: 1663px;
  height: 1100px;
  background-color: black;
  position: relative;
  z-index: 3;
}

/* trailer */

#trailer-box {
  background-color: black;
  padding-top: 150px;
  padding-bottom: 200px;
  z-index: 4;
}

#trailer {
  margin-left: auto;
  margin-right: auto; 
  display: block;
  z-index: 4;
}

@media screen {
  #trailer {
    width: 1920px;
    height: 1080px;
  }
}
@media screen and (max-width: 1920px) {
  #trailer {
    width: 1280px;
    height: 720px;
  }
}
@media screen and (max-width: 1280px) {
  #trailer {
    width: 960px;
    height: 540px;
  }
}
@media screen and (max-width: 960px) {
  #trailer {
    width: 720px;
    height: 405px;
  }
}
@media screen and (max-width: 720px) {
  #trailer {
    width: 540px;
    height: 303px;
  }
}

/* logo pyramid */

#logos {
  padding-bottom: 100px;
  background-color: black;
  z-index: 2;
}

#team, #platform, #social, #crest-container, #wallpaper-container {
  margin-bottom: 60px;
  font-size: 0;
  letter-spacing: -1px;
  white-space-collapsing: discard;
  text-align: center;
}

#wallpaper-container {
  padding-bottom: 200px;
  margin-bottom: 0;
  background-color: black; 
  text-align: center;
  z-index: 1;
  position: relative;
}

#wallpaper { 
  background-image: url("images/wallpaper.png");
  background-repeat: no-repeat;
  height: 29px;
  background-size: 919px 29px;   
}
#wallpaper:hover { 
  background-image: url("images/wallpaper_hover.png");
  background-repeat: no-repeat;
  height: 29px;
  background-size: 919px 29px;   
}
#wallpaper-hover-preload {
  width: 0px;
  height: 0px;
  display: inline;  
  background-image: url("images/wallpaper_hover.png");
}

#team div, #platform div, #social div, #crest {
  margin-left: 35px;
  margin-right: 35px;
  display: inline-block;
  vertical-align: middle;
}

#social div {
  margin-left: 15px;
  margin-right: 15px;
  width: 54px; height: 54px;
  background-size: 54px 54px;  
}

#capy { 
  background-image: url("images/capy.png");
  width: 96px; height: 159px;
  background-size: 96px 159px; 
}
#jim {
  background-image: url("images/jim.png"); 
  width: 218px; height: 60px;
  background-size: 218px 60px; 
}
#xboxone {
  background-image: url("images/xb1.png"); 
  width: 270px; height: 54px;
  background-size: 270px 54px;   
}
#steam {
  background-image: url("images/steamLogo2.png"); 
  width: 174px; height: 123px;
  background-size: 174px 123px;
}
#crest {
  background-image: url("images/capyCrest.png"); 
  width: 106px; height: 87px;
  background-size: 106px 87px;
}
#twitter { background-image: url("images/twitter.png"); }
#tumblr { background-image: url("images/tumblr.png"); }
#facebook { background-image: url("images/facebook.png"); }
#youtube { background-image: url("images/youtube.png"); }

/* skulls */

#skulls-1 { height: 1500px; }
#skulls-1 div {
  background-image: url("images/skulls_01.png");  
  background-size: 300px 300px;
  background-repeat: repeat;
  height: 1500px;
}

#skulls-2 { height: 300px; }
#skulls-2 div {
  background-image: url("images/skulls_02.png");  
  background-size: 300px 300px;
  background-repeat: repeat;
  height: 300px;
}

#skulls-3 { height: 300px; }
#skulls-3 div {
  background-image: url("images/skulls_03.png");  
  background-size: 300px 300px;
  background-repeat: repeat;
  height: 300px;
}

#skulls-4 { height: 0px; }
#skulls-4 div {
  background-image: url("images/skulls_04.png");  
  background-size: 300px 300px;
  background-repeat: repeat;
  height: 300px;
}

#skulls-5 { height: 0px; }
#skulls-5 div {
  transform: translateY(300px);
  background-image: url("images/skulls_05.png");  
  background-size: 300px 300px;
  background-repeat: repeat;
  height: 300px;
}

#skulls-6 { height: 0px; }
#skulls-6 div {
  transform: translateY(600px);
  background-image: url("images/skulls_06.png");  
  background-size: 300px 300px;
  background-repeat: repeat;
  height: 300px;
}

#skulls-7 { height: 0px; }
#skulls-7 div {
  transform: translateY(900px);
  background-image: url("images/skulls_07.png");  
  background-size: 300px 300px;
  background-repeat: repeat;
  height: 300px;
}

#skulls-bg { 
  height: 2100px; 
  background-color: black; 
}

#skulls-top-gradient-overlay {
  margin-top: -2100px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  /*background-image: radial-gradient(ellipse farthest-side at 50% 100%, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));*/
  height: 2100px;
  width: 100%;
  position: relative;
  z-index: 1;  
}

/* dark to sky */

#dark-to-sky {
  background-image: linear-gradient(to bottom,  #000000 70%,#20303e 80%,#5c7181 92%,#8A9AA1 100%); /* W3C */
  height: 4500px;
  width: 100%;
  z-index: 1;
}

#dark-to-sky .wide-image-container { height: 0px; }
#stars-back div {
  top: 400px;
  background-image: url("images/starsback.png");
  background-size: 1024px 2048px;
  background-repeat: repeat;
  height: 3351px;
  position: relative;
  z-index: 2;
}
#stars-middle div {
  margin-top: 400px;
  background-image: url("images/starsmiddle.png");
  background-size: 1024px 2048px;
  background-repeat: repeat;
  height: 2900px;    
  position: relative;
  z-index: 2;
}
#stars-top div {
  margin-top: 300px;
  background-image: url("images/starstop.png");
  background-size: 1280px 2048px;
  background-repeat: repeat;
  height: 2048px;
  position: relative;
  z-index: 2;
}

/* shooting star */

#shooting-star {
  left: 250px;
  top: 2070px;
  position: relative;
  width: 744px;
  height: 0px;
  margin: 0 auto;
}
#shooting-star div {
  position: absolute;
  width: 744px;
  height: 423px;
  background-image: none;
  background-size: 744px 423px;
  z-index: 2;
}


/* clouds */

/*
#clouds-faded {
  margin-top: 4450px;
  background-image: url("images/island/clouds2.png");  
  background-size: 3016px 378px;
  width: 6032px;
  height: 268px;
  margin-left: -1508px;
}
*/

/* mobile */

@media 
(-webkit-max-device-pixel-ratio: 0.5), 
(-o-max-device-pixel-ratio: 1/2),
(max-resolution: 56dpi) {

  .island div {
    background-image: url("images/mobile/island/top2.png");
  }
  .island-underwater div {
    background-image: url("images/mobile/island/island_bottom.png");
  }
  .island-clouds div {
    background-image: url("images/mobile/island/clouds1.png");
  }

/*
  #tentacles-1 div {
    background-image: url("images/mobile/darktop.png");  
  }
  #tentacles-2 div {
    background-image: url("images/mobile/darkmiddle.png");  
  }
  #tentacles-3 div {
    background-image: url("images/mobile/darkback.png");  
  }
*/

  #stars-back div {
    background-image: url("images/mobile/starsback.png");
  }  
  #stars-middle div {
    background-image: url("images/mobile/starsmiddle.png");
  }  
  #stars-top div {
    background-image: url("images/mobile/starstop.png");
  }  

  #skulls-1 div {
    background-image: url("images/mobile/skulls_01.png");  
  }  
  #skulls-2 div {
    background-image: url("images/mobile/skulls_02.png");  
  }  
  #skulls-3 div {
    background-image: url("images/mobile/skulls_03.png");  
  }  
  #skulls-4 div {
    background-image: url("images/mobile/skulls_04.png");  
  }  
  #skulls-5 div {
    background-image: url("images/mobile/skulls_05.png");  
  }     
  #skulls-6 div {
    background-image: url("images/mobile/skulls_06.png");  
  }                
  #skulls-7 div {
    background-image: url("images/mobile/skulls_07.png");  
  }           


}

/* retina */

@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(-o-min-device-pixel-ratio: 13/10),
(min-resolution: 120dpi) {

  .island div {
    background-image: url("images/retina/island/top2.png");
  }

  .below-logo div {
    background-image: url("images/retina/island/below_logo.png");
  }

  .island-underwater div {
    background-image: url("images/retina/island/island_bottom.png");
  }

  .eye div {
    background-image: url("images/retina/eye.png");
  }

  .island-clouds div {
    background-image: url("images/retina/island/clouds1.png");
  }
  .water-2-body div {
    background-image: url("images/retina/island/water2.png");
  }
  .water-3-body div {
    background-image: url("images/retina/island/water3.gif");
  }
  .water-4-body div {
    background-image: url("images/retina/island/water4.gif");
  }

  .sealines-2 div {
    background-image: url("images/retina/island/sealines2.png");
  }

  #survive {
    background-image: url("images/retina/text/survive.png");
  }
  #discover {
    background-image: url("images/retina/text/discover.png");
  }
  #explore {
    background-image: url("images/retina/text/explore.png");
  }  

/*
  #tentacles-1 div {
    background-image: url("images/retina/darktop.png");  
  }
  #tentacles-2 div {
    background-image: url("images/retina/darkmiddle.png");  
  }
  #tentacles-3 div {
    background-image: url("images/retina/darkback.png");  
  }
*/

  #skulls-1 div {
    background-image: url("images/retina/skulls_01.png");  
  }
  #skulls-2 div {
    background-image: url("images/retina/skulls_02.png");  
  }
  #skulls-3 div {
    background-image: url("images/retina/skulls_03.png");  
  }
  #skulls-4 div {
    background-image: url("images/retina/skulls_04.png");  
  }
  #skulls-5 div {
    background-image: url("images/retina/skulls_05.png");  
  }
  #skulls-6 div {
    background-image: url("images/retina/skulls_06.png");  
  }        
  #skulls-7 div {
    background-image: url("images/retina/skulls_07.png");  
  }    

  #wallpaper { 
    background-image: url("images/retina/wallpaper.png");
  }
  #wallpaper:hover { 
    background-image: url("images/retina/wallpaper_hover.png");
  }  

  #capy { 
    background-image: url("images/retina/capy.png");
  }
  #jim {
    background-image: url("images/retina/jim.png"); 
  }
  #xboxone {
    background-image: url("images/retina/xb1.png"); 
  }
  #steam {
    background-image: url("images/retina/steamLogo2.png"); 
  }
  #crest {
    background-image: url("images/retina/capyCrest.png"); 
  }
  #twitter { background-image: url("images/retina/twitter.png"); }
  #tumblr { background-image: url("images/retina/tumblr.png"); }
  #facebook { background-image: url("images/retina/facebook.png"); }  
  #youtube { background-image: url("images/retina/youtube.png"); }  

  #stars-back div {
    background-image: url("images/retina/starsback.png");
  }  
  #stars-middle div {
    background-image: url("images/retina/starsmiddle.png");
  }  
  #stars-top div {
    background-image: url("images/retina/starstop.png");
  }  

  #clouds-faded {
    background-image: url("images/retina/island/clouds2.png");  
  }

}