* { border: 0; margin: 0; padding: 0; }

img, a, *:focus { outline: none; }

a { text-decoration: none; }

.c { text-align: center; }
.l { text-align: left; }
.r { text-align: right; }
.j { text-align: justify; }
.b { font-weight: bold; }
.i { font-style: italic; }
.fl { float: left;}
.fr { float: right; }

.active, .active:hover, .active *, .active *:hover { cursor: default; }
.clear, form br { display: block; clear: both; float: none; line-height: 0px; font-size: 0px; }
.notext { line-height: 0px; font-size: 0px; }
.noheight { height: 0px; line-height: 0px; font-size: 0px; overflow: hidden; }
.hidden { display: none; }
.forcew { display: inline-block; }
.page { position: relative; width: 900px; margin: 0px auto 50px auto; padding: 5px; }
.bg { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: white; }
.inner { position: relative; padding: 45px 45px 85px 45px; box-shadow: 0px 0px 100px #f1f1f1 inset; background: white; }

/* Navigation Bar */
.ls-bottom-nav-wrapper { display: none; background: url(../img/ui/pattern.png); background-color: rgba(0,0,0,0.5); height: 60px !important; margin-top: -60px !important; position: absolute; bottom: 0; width: 100%; text-align: center; }

.ls-bottom-slidebuttons { display: inline-block; text-align: center; overflow: hidden; width: 100%; margin-top: 15px;}
.ls-bottom-slidebuttons a { width: 15px; height: 15px; border: 2px solid #CCC; display: inline-block; text-align: center;  border-radius: 100px; -webkit-border-radius: 100px; margin: 10px; padding: 0; }
.ls-bottom-slidebuttons a.ls-nav-active { background-color: #00CCFF; border: none; }

.ls-nav-start { 
	display: none;
	position: absolute; z-index: 1000; margin-left: 60px; margin-top: 10px; width: 40px; height: 40px;  
	background: url(../img/icons/icon-play.png) no-repeat center; background-size: 100%;
	opacity: 0.5; -webkit-opacity: 0.5;
}
.ls-nav-start:hover { opacity: 1; -webkit-opacity: 1; }

.ls-nav-stop {
	display: none;
	position: absolute; z-index: 1000; right: 60px; margin-top: 10px; width: 40px; height: 40px;  
	background: url(../img/icons/icon-pause.png) no-repeat center; background-size: 100%;
	opacity: 0.5; -webkit-opacity: 0.5;
}
.ls-nav-stop:hover { opacity: 1; -webkit-opacity: 1; }

/* New Next and Prev Buttons */

.ls-nav-prev, .ls-nav-next {
  position: absolute; z-index: 3000; display: block; top: auto; bottom: 10px;
  border-radius: 50%; -webkit-border-radius: 50%;
  width: 30px; height: 30px; padding: 5px;
  -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}

.ls-nav-prev { left: 10px; background: url(../img/ui/arrow-prev.svg) no-repeat center center; background-size: 50%; background-color: rgba(0,0,0,0.3); }
.ls-nav-next  { right: 10px; background: url(../img/ui/arrow-next.svg) no-repeat center center;  background-size: 50%; background-color: rgba(0,0,0,0.3); }

.ls-nav-prev:hover, .ls-nav-next:hover { cursor: pointer; background-color: rgba(0,0,0,0.7); }

/* LayerSlider Custom Styles */

#layerslider { width: 100%; height: 200px; margin: 0px auto; overflow: hidden; }

/* Date */

.date { width: 100px; position: absolute; margin: -70px 0 0 -10px; }
.date.wide { width: 200px; }
   
/* Text Box */

.text { position: absolute; width: 250px; top: 70px; left: auto; right: 0; padding: 10px 20px 10px 10px; background-color: rgba(0,0,0,0.5); font-size: 12px; line-height: 18px; color: #CCC; }
.text h5 { color: #FFF; margin-bottom: 0px; font-size: 18px; font-family: 'Slabo 27px', 'helvetica-neue', helvetica, sans-serif; }
.text p { display: none; font-size: 14px; line-height: 20px; color: #CCC; margin: 0; padding: 0; }
.text a {color: #33BFFC !important; margin-top: 10px; display: block; }

.text span { 
	position: absolute; z-index: 1000; 
	margin: -45px 0 0 -10px; 
	color: #fff; font-size: 30px; line-height: 30px; font-weight: 100;
	font-family: 'Helvetica Neue', 'helvetica', arial, sans-serif; 
}

/* Overlayed Images */

.slide-img { bottom: 0; }

.old-ships { left: 0px; width:100%; }
.clouds { left: -100px; top: -100px; }
.earth { left: 850px; top: -67px; }
                 
.jutland1 { top: 70px; left: 70px; }
.jutland2 { top: 0px; left: 0px; }
.stern-ship { top: 60%; left: 0; width: 35%; }
.depth-charge {left: 125px; top: 20px; } 

.explosion {left: 20%; top: 13%; }
.explosion2 {left: 25%; top: 14%; }
.explosion3 {left: 35%; top: 13%; }

.sinking { left: 5%; top: 15%; width: 55%; bottom: 0; }
.water {left: 0px; top: 330px; }
.cox {left: 0px; bottom: 0px; width: 50%; } 
.periscope { width: 1700px; height: 300px; left: -150%;}




/* //////////////////////////////// START OF RESPONSIVE STYLES //////////////////////////////// */

@media screen and (orientation: landscape) and (max-width: 768px) {

}

@media screen and (orientation: portrait) {

}



/* ////////////////////////////////  bigger than mobile version //////////////////////////////// */

@media screen and (min-width: 480px) {


	
}

/* //////////////////////////////// ipad mini or galaxy note version //////////////////////////////// */  

@media screen and (min-width: 480px) and (max-width: 768px) {

	#layerslider { height: 300px; }

	.date { width: 130px; margin: -80px 0 0 -10px; }
	.date.wide { width: 260px; }
	.text { width: 300px; top: 100px; padding: 20px 30px 20px 20px; }
	.text span { margin: -55px 0 0 -10px; }

	.periscope { width: 2500px; height: 400px; left: -170%;}

}

/* //////////////////////////////// iPad landscape //////////////////////////////// */

@media screen and (min-width: 768px) {

	#layerslider { height: 500px; }

	.ls-bottom-nav-wrapper { display: block; }

	.date { width: 150px; margin: -100px 0 0 -10px; }
	.date.wide { width: 300px; }

	.text { width: 460px; top: 120px; right: 0; padding: 30px 40px 30px 30px; font-size: 14px; line-height: 20px; }
	.text span { margin: -75px 0 0 -10px; font-size: 40px; }

	.text h5 { margin-bottom: 20px; font-size: 30px; }
	.text p { display: block; }

	.stern-ship { top: 60%; left: 0; width: 60%; }
	.explosion {left: 30%; top: 40%; }
	.explosion2 {left: 35%; top: 40%; }
	.explosion3 {left: 40%; top: 40%; }
	.sinking { left: 5%; top: 15%; width: 50%; } 
	.periscope { width: 3500px; height: 600px; left: -170%;}
}

/* //////////////////////////////// wide version //////////////////////////////// */ 

@media screen and (min-width: 960px) {

	#layerslider { height: 600px; }

	.date { width: 150px; margin: -110px 0 0 -10px;  }
	.date.wide { width: 300px; }

	.text { width: 500px; top: 150px; right: 0; padding: 40px 60px 40px 40px; font-size: 16px; line-height: 25px; }
	.text h5 { margin-bottom: 20px; font-size: 35px; }
	.text span { margin: -90px 0 0 -10px; font-size: 50px; }

	.sinking { left: 5%; top: 1%; width: 50%; } 
	.cox { width: 40%; } 
	.periscope { width: 5000px; height: 800px; left: -180%;}

	.ls-nav-prev { left: 40%; }
	.ls-nav-next { right: 40%; }

}

/* //////////////////////////////// full wide version //////////////////////////////// */ 

@media screen and (min-width: 1400px) {

	#layerslider { height: 700px; }

	.cox { width: 35%; } 

	.periscope { width: 5000px; height: 800px; left: -100%;}

	.ls-nav-prev { left: 40%; }
	.ls-nav-next { right: 40%; }

}