html, body { height: 100%; margin: 0; }
.hs_cos_wrapper { height: 100%; }

.stacks_header { max-width:350px; position:relative; margin:0 auto; }
.stepnp { cursor:pointer; position:absolute; left:0; top:50%; width: 40px; height: 40px; margin: 20px 0 0; border-left: #34495e solid 1px; border-top: #34495e solid 1px; transform: rotate(-45deg) translateY(-50%); }
.stepnp.next { left:auto; transform: rotate(135deg) translateY(-50%); transform-origin: left top; right: -40px; margin-top:15px; }

.dark h1, 
.dark p { z-index: 100000; color: #fff; }

.stacks_header .welcome p, .stacks_header .guide h1{color:#333}

.hidden {display: none !important;}

.stacks_wrapper { overflow: hidden; }
.stacks_header_wrapper { position: relative; }

.side_view_wrapper .stacks_header,
.stacks_header_wrapper .stacks_header {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 60%;
  left:50%;
  transform:translateX(-50%);
  max-width: 1080px;
}

.stacks_header {
  text-align: center;
  padding: 40px 40px 0 40px;
}

.deck_view_viewport > p.crew-only{font-size: 12px; color: #080808;font-style: normal;bottom: -17px;}
.deck_view_viewport > p.shared-purchase-notice{bottom: -2px;}

.nav {
  position: absolute;
  width: 100%;
}
.nav .number {
  float: right;
  padding: 20px;
}




#listing-details .action-bar {  }

.side_view_wrapper { 
  position: relative; 
  height: 600px; 
  z-index: 5000;
}
.side_view_wrapper .ocean_bottom {
  position: absolute;
  background: #015871;
  top: 80%;
  bottom: 0;
  width: 100%;
  display: block;
  z-index: 5;
}
.ocean_bottom h1 {
    height: 100%;
    line-height: 3.5em;
    vertical-align: middle;
    text-align: center;
}
.stacks_header h1 {
    line-height: 60px;
}

/* SHIP Side View */
.side_view {
  position: relative;
  z-index:100;
  top: 80%;
  transform: translateY(-90%);
}

.ship {
  margin: 0 auto;
  width: 80%;
  max-width: 1760px;
  padding-bottom: 15px; 
}

.deck_view {
  display: block;
  position: relative;
  z-index: 50;
  background: #FFF;
  height: 100%;
}

.deck_view_inner {
  /*
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  */
}

.deck_view_viewport{
  position: relative;
}

.deck_view_viewport p{
  position: absolute;
  z-index: 999;
  font-style: italic;
  font-weight: 400;
  color: #000000;
  opacity: 0.8;
  text-align: center;
  width: 100vw;
}

@media only screen and (min-width: 800px) {
  .deck_view_inner{
    padding-bottom: 15px;
  }
  
  .deck_view_viewport p{
    bottom: -20px;
    font-size: 16px;
  }
}

@media only screen and (min-width: 1200px) {
  .deck_view_inner{
    padding-bottom: 10px;
  }
  
  .deck_view_viewport p{
    bottom: -10px;
    font-size: 16px;
  }
}

@media only screen and (max-width: 799px) {
  .deck_view_inner{
    padding-bottom: 15px;
  }
  
  .deck_view_viewport p{
    bottom: -20px;
    font-size: 12px;
  }
}

.viewport svg { position: absolute; z-index: 100; }

img.ship_reference { position: relative; width:100%;  }



rect,
path,
polygon { fill: #D8D8D8; opacity: 0.3; cursor: pointer; }

rect:hover,
path:hover { fill: #00A7E1; }



.sold { fill: #FF0000; opacity: 0.8; }
.selected { fill: #00A7E1; opacity: 0.8; }


/* SIDE VIEW */
.side_view rect,
.side_view path,
.side_view polygon { opacity: 0; fill: #000; }

.side_view rect:hover,
.side_view path:hover,
.side_view polygon:hover { fill: #00A7E1; opacity: 1; }











/* WAVES */
/* best seen at 1500px or less */


body {
  background:radial-gradient(ellipse at center, rgba(255,254,234,1) 0%, rgba(255,254,234,1) 35%, #B7E8EB 100%);
}

.ocean { 
  height: 5%;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background: #015871;
}

.wave {
  background: url(https://cdn2.hubspot.net/hubfs/5873592/wave-1.svg) repeat-x; 
  position: absolute;
  top: -25px;
  width: 6400px;
  height: 20px;
  animation: wave 21s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);

}

.wave:nth-of-type(2) {
  top: -20px;
  animation: wave 21s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@media only screen and (max-width: 640px) {
  
  .filter.filter-price,
  .explain { 
    width: 90% !important;
    margin: auto;
  }
  .side_view { 
    top: 70%;
  }
  .ship {
    width: 100%;
  }
  .wave {
    background-size: 360px;
    top: -5px;
    width: 1280px;
    height: 40px;
    animation: wavesmall 14s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;

  }
  .wave:nth-of-type(2) {
    top: 0px;
    animation: wavesmall 14s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swelltiny 14s ease -1.25s infinite;
    opacity: 1;

  }
  .ocean {
    height: 10%;
  }
  
  .side_view_wrapper .ocean_bottom {
    top: 70%; 
  }
}

@media only screen and (max-width: 768px) {
  .nav .number {display: none;}
  .nav .logo { 
    max-width: 300px;
    margin: 0 auto;
    float: none;
  }
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes wavesmall {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -320px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-10px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}

@keyframes swellsmall {
  0%, 100% {
    transform: translate3d(0,-5px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}


@keyframes swelltiny {
  0%, 100% {
    transform: translate3d(0,-3px,0);
  }
  50% {
    transform: translate3d(0,3px,0);
  }
}















/* ============================================================================================== 
SKY & Clouds
================================================================================================= */



@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:-10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:-10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:-10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:-10000px 0;}
}

/* .stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds{
    background:transparent url(http://www.script-tutorials.com/demos/360/images/clouds2.png) repeat-x top center;
    z-index:3;

  -moz-animation:move-clouds-back 400s linear infinite;
  -ms-animation:move-clouds-back 400s linear infinite;
  -o-animation:move-clouds-back 400s linear infinite;
  -webkit-animation:move-clouds-back 400s linear infinite;
  animation:move-clouds-back 400s linear infinite;
} */












@keyframes fadeIn { 
  from { opacity: 0; } 
}

/* .animate-fade {
    animation: fadeIn 20s infinite alternate;
} */
.night {opacity: 1;}








/* Arrow */
svg{display:inline-block;overflow:hidden;width:100%}
.arrow-target { cursor:pointer; width: 80px; height: 80px; position: absolute; bottom: 5%; z-index: 100; left: 50%; transform: translateX(-50%); }
.arrow{height:28px;margin:auto;margin-top:50px;width:35px}
.arrow svg{height:21px;overflow:visible;width:35px;fill:#0083c4}


/* Arrow bounce */
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s 5s infinite;
}

.seasonal-ownership-unit{
  outline-color: #1a396e;
  outline-style: solid;
  outline-width: 5px;
  outline-offset: -5px;
}

.seasonal-ownership-unit:hover {
  outline-color: #1a396e;
  outline-width: 10px;
  outline-offset: -10px;
}





.rulers { display: none; }
.rulers div { height: 2px; position: absolute; width: 100%; }
.rulers .half { background: red; top: 50%; }
.rulers .third { 
  background: yellow;
  top: 80%;
  z-index: 999999;
}


.below-fold .ocean,
.below-fold .night { display: none; }

body select {font-size:15px !; height:37px}

#listings .logo { display: none; }

@media (max-width: 560px) { 
  .stepnp.next { right: -10px; }
  .stepnp.prev { left: 30px; }
}