/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/*http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela*/
/**:not(html) {
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}*/

body {
	/*background-color: #fbf2df;*/
	background-color:#faf3e5;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}

/*fonts applied via typekit, or by adding this class: .tk-ff-more-web-pro*/

h1, h2, h3, p {
	font-family: "ff-more-web-pro",serif;
}

/*.wwzbackground {
	background-color: green;
	background: url('../img/World_War_Z.png') no-repeat center center fixed;
	  -webkit-background-size: cover;
	  -moz-background-size: cover;
	  -o-background-size: cover;
	  background-size: cover;
	  width: 100%;
	  height: 326px;
}*/

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

.picture img {
	width: 100%;
	height: auto;
	margin-top: 0px;
}

.picture {
	position: relative;
	background-color: black;
	z-index: 10;
	max-width: 1500px;
	background-color: transparent;
	display:block;
    margin: 0 auto;
    overflow: visible;
}


.picture.masthead {
	margin: 0 auto;
}




.video1 video {
	width: 100%;
	height: auto;
	margin-top: 0px;
	margin-bottom: 25px;
}

.picture_holder {
	background-color: #000;
	text-align: center;
}

.title {
	position: relative;
	z-index: 0;
	/*background-image: url('../img/texture_black.jpg');*/
	background-color:#000;
	overflow: hidden;
	/*margin-bottom:25px;*/
}
.title .container {
	position: relative;
	overflow: hidden;
	z-index: 10;
}
.title img.after {
	position: absolute;
	top:0;
	left:50%;
	width: 100%;
	max-width: 1500px;
	min-height: 106px;
	z-index: 0;
	-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.title h1, .title h2{
	color: rgb(242, 242, 195);
	/*font-family: Arial;*/
	font-weight: bold;
}

.title h1 {
	font-size: 38px;
	margin: 17px 0px 0px 0px;
}

.title h2 {
	margin: 7px 0px 17px 0px;
	font-size: 22px;
}


.content h2 {
	color: rgb(203, 76, 0);
	/*font-family: Arial;*/
	font-weight: bold;
	font-size: 28px;
	margin-bottom: 25px;
	margin-top:0;
}
.content h3 {
	color: rgb(203, 76, 0);
	/*font-family: Arial;*/
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 25px;
	margin-top:0;
}

.content p {
	font-family: "aktiv-grotesk", Arial, Helvetica, sans-serif;
	/*margin-bottom: 25px;*/
}

.btn {
	border-radius: none;
	padding: 8px 17px;
}

.btn-default {
	text-shadow: none;
	box-shadow: none;
	border: none;
	border-radius: none;
	background-image: url('../img/texture_red.jpg');
	font-size: 21px;
	font-family: "aktiv-grotesk", Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: rgb(251, 242, 223);
	-webkit-filter: grayscale(0%);
	-webkit-transition: .3s ease-in-out;
	-moz-filter: grayscale(100%); 
	-moz-transition: .3s ease-in-out;
	-o-filter: grayscale(100%); 
	-o-transition: .3s ease-in-out;
}

.btn-default:hover {
	text-shadow: none;
	background-image: url('../img/texture_red.jpg');
	box-shadow: none;
	color: #fff;	
	-webkit-filter: grayscale(100%);
}




.bridge {
	height:400px;
	width:100%;
	margin:0 auto;
}

.bridge1 {
	background:url('../img/bridge1.jpg') no-repeat center;
	background-size:cover;
}

.bridge2 {
	background:url('../img/bridge2.jpg') no-repeat center;
	background-size:cover;
}

.vidholder {
	margin:0 auto;
	border:1px solid red;
}

.container.overlap {
	margin-top:-24px;
}

.top-buffer { 
	margin-top:24px; 
}
.bot-buffer { 
	margin-bottom:24px; 
}


.bridge.top-buffer {
	margin-top:196px; 
}

/*.vidbridgetopbuffer {
	margin-top:250px;
}*/

.shadow {
	-webkit-box-shadow: 0px 0px 14px 1px rgba(0,0,0,0.35);
	-moz-box-shadow: 0px 0px 14px 1px rgba(0,0,0,0.35);
	box-shadow: 0px 0px 14px 1px rgba(0,0,0,0.35);
}
.shadow-inner {
	-webkit-box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.35);
	-moz-box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.35);
	box-shadow: inset 0px 0px 14px 1px rgba(0,0,0,0.35);
}

.wider {
	max-width:100%;
	padding:0 24px;
}

footer {
	background-image: url(../img/texture_red.jpg);
	width:100%;
	height:60px;
	border:1px solid red;
	margin:0;
	padding:0;
}

body {
	padding-bottom:0;
}

.endspecial {
	height:750px;
	padding:0;
}

.endpicture {
    bottom: 300px;
    position: absolute;
    background:transparent;
}

.endpicture h3 {
	margin-bottom:12px;
}

.aspectratio-container {
	position:relative;
	width: 100%;
	padding-bottom: 100%;
	background:gold;
}

.aspectratio-container iframe {
	position: absolute;
	left:0;right:0;top:0;bottom:0;
	width:100%;
	height:100%;
}

@media (max-width: 749px) { 

	.content {
		margin-top:24px;
	}

	.overlap .overlapfix {
		margin-top:0;
	}

	.title img.after {
		visibility:hidden;
	}

	.vidTopBuffer {
		margin-top:24px;
	}

	.endpicture {
	    margin: 0 24px;
	}


	.endspecial {
		height:500px;
	}
	.endpicture {
	    bottom: 175px;
	}
	.bridge.top-buffer {
		margin-top:24px; 
	}

}

@media (max-width: 991px) { 

	.vidTopBuffer {
		margin-top:24px;
	}

	.endpicture {
	    margin: 0 24px;
	}



}

@media (min-width: 992px) {

	.btn_correction {
		padding:0;
	}
}

/* Preloader */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
  /*pointer-events: none;*/
}

#status {
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  margin: -20px 0 0 -25px;
  /* is width and height divided by two */
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/*js will remove this class from rest of page*/
.loading {
  overflow: hidden;
  height: 100vh;
}