* {
	margin: 0;
	padding: 0;
}

body {
	/* background: url(../images/texture_subtle_grunge.jpg); */
	background-color: #0f101b;
	font-family: 'Helvetica Neue', arial, sans-serif;
	font-weight: 0;
	padding: 0;
}

.everything {
	position: absolute;
}


/* ---------------------------------------------------------PARALLAX CODE ---*/
.parallax {
  	perspective: 1px;
  	height: 100vh;
  	overflow-x: hidden;
  	overflow-y: auto;
  	}

.parallax__layer {
	position: relative;
	/* relative removes the bug in safari but moves the bg to the wrong spot */
	/* absolute is definitely part of the bug */
	top: -3000%;
	left: 0;
	right: 0;
	bottom: 0;
	}

.parallax__layer--back {

	position: relative;
	top: -1500%;
	-webkit-transform: translateZ(-30px) scale(31);
	transform: translateZ(-30px) scale(31);
	z-index: -20;
	}
	
.parallax__layer--deep {

	transform: translateZ(-60px) scale(61);
	z-index: -20;
}

/* void */
/* The problem is here - the max-width was fucking it up */

.void_center{
	text-align: center;
	margin: auto;
	width:100%;
	/* max-height: 720px; */
	padding: 0px 0;
	}

.void_center img{

	margin: auto;
	/* height: 100vh; */
	width:100%;
	max-width: 1600px;
	}

.center-screen{
	position: fixed;
	/* top and bottom disable the x-repeating bg
	top: 0;
	bottom: 0;
	*/
	right: 0;
	left: 0;
	margin: auto;
	width: 100%;
	height: auto;
	text-align: center;
	/* max-width: 2000px; */
	/* max-height: 720px; */
	background-image: url(../images/repeater.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	padding: 0px 0;
	}

.center-screen iframe{
	width:100%;
	}

.center-screen img{
	display: block;
	margin: auto;
	width:90%;
	max-width: 1600px;
	}
	
/*  background image MOBILE TEST */
.center-screen-mob {
	/* visibility: hidden; */
	position: fixed;
	/* top: 0;
	bottom: 0;
	*/
	right: 0;
	left: 0;
	margin: auto;
	width: 100%;
	max-width: 1600px;
	/* max-height: 720px; */
	/* background-color: #0f101b; */
	background-image: url(../images/repeater.png);
	background-repeat: repeat-x;
	background-size: auto 100%;
	padding: 0px 0;
	z-index: -10;
	} 
	
.center-screen-mob iframe{
	width:100%;
	}
	
.center-screen-mob img{
	margin: auto;
	width:100%;
	max-width: 1600px;
	}
	
/*  PORTRAIT PHONE IMAGE */
.center-screen-port {
	visibility: hidden;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width:100%;
	/* max-width: 600px; */
	/* max-height: 720px; */
	background-color:#0f101b;
	z-index: -10;
	} 
	
.center-screen-port iframe{
	width:100%;
	}
	
.center-screen-port img{
	margin: auto;
	width:100%;
	/* max-width: 600px; */
	}
	
/*  PORTRAIT PHONE IMAGE // SHORTER PHONES LIKE IPHONE 8 */
.center-screen-port-short {
	visibility: hidden;
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width:100%;
	/* max-width: 600px; */
	/* max-height: 720px; */
	background-color:#0f101b;
	z-index: -10;
	} 
	
.center-screen-port-short iframe{
	width:100%;
	}
	
.center-screen-port-short img{
	margin: auto;
	width:100%;
	/* max-width: 600px; */
	}		
		

/* including a repeating BG breaks the multiple parallax effect */

.megaWrapper {
	position: absolute;
/*	top: 100%;  */
	margin: 0 auto;
	width: 100%;
	padding: 10px 0;

}

.wrapper {
	margin: 0 auto;
	width: 100%;
	padding: 10px 0;
	background-color: #0f101b;
	background: rgba(15, 16, 27, .9);
}

.wrapperGrad {
	margin: 0 auto;
	width: 100%;
	background: url(../images/wrap_gradient3.png);
	background-size: auto 100%;
	background-repeat: repeat-x;
	padding: 0px 0;
}

.featureWrap {
	margin: auto;
	width: 100%;
	background: url(../images/gradient_tall_90.png);
	background-size: auto 100%;
	background-repeat: repeat-x;
	padding: 0px 0;
}

.feature {
	margin: auto;
}

.headline{
	margin: auto;
	width: 100%;
	max-width: 1600px;
	background-size: auto 100%;
	background-repeat: repeat-x;
	padding: 0px 0;
}

.container {
	max-width: 1600px;
	margin: 0 auto;
}


/* ---------- Zoom container ---------- */
.image-zoom-container {
	list-style: none;
	font-size: 0px;

}
.zoom-container {
	/* background-image: url(../images/tb/tb_bg.png); */
	position: relative;
	/* overflow: hidden; */
	display: inline-block;
	width: 33.33%; /* this value + 2 should = 33% */
	font-size: 16px;
	font-size: 1rem;
	border: 15px solid transparent;
	vertical-align: top;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.zoom-container img {
	/* opacity: .6; */
	display: block;
	width: 100%;
	height: auto;
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

.zoom-container .zoom-caption {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 10;
	background: rgba(0, 0, 0, 0);
	-webkit-transition: all .5s ease; /* Safari and Chrome */
    -moz-transition: all .5s ease; /* Firefox */
    -ms-transition: all .5s ease; /* IE 9 */
    -o-transition: all .5s ease; /* Opera */
    transition: all .5s ease;
}

.zoom-container:hover img {
	opacity: 1;
	-webkit-transform:translateY(0px); /* Safari and Chrome */
    -moz-transform:translateY(-10px); /* Firefox */
    -ms-transform:translateY(-10px); /* IE 9 */
    -o-transform:translateY(-10px); /* Opera */ 
     transform:translateY(-1%);
}

/* try to modify for Safari */
.zoom-container:hover .zoom-caption {
	background: none;	
}

.zoom-container .zoom-caption img {
	opacity: 0;
	background: none;
}

.zoom-container:hover .zoom-caption img {
	opacity: 1;
	background: none;
}



	
/* NEWER BETTERER MEDIA QUEURIES */

 
/* iPads (landscape or portrait) ----------- */
@media only screen  and (max-width : 1024px) {
  	.parallax__layer--back {
  		visibility: hidden;
		}
	.parallax__layer--deep {
		visibility: hidden;
		}
	.zoom-container {
		border: 5px solid transparent;
		}
}
 
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 414px) {
	.zoom-container {
		width: 100%;
		}
  	.parallax__layer--back {
  		visibility: hidden;
		}
	.parallax__layer--deep {
		visibility: hidden;
		}
	.center-screen-port {
		visibility: visible;
		}
	.center-screen-mob {
		visibility: hidden;
		}
	.void_center{
		height: 100vh;
	}	
}