body {
	background-color: #000;
	font-family: 'Neue Helvetica W08','Helvetica Neue', Helvetica, Arial;
	font-size: 16px;
	color: #DDD;
	margin: 0;
	padding: 0;
}

h2 {
	font-family: 'Neue Helvetica W08','Helvetica Neue',Helvetica, Arial;
	font-size: 2em;
	font-weight: 300;
	margin-top: 44px;
	margin-bottom: 2px;
	text-transform: uppercase;
	color: #DDD;
	padding: 0;
}

h3 {
	font-family: 'Helvetica Neue', Helvetica, Arial;
	font-size: 0.875em;
	text-transform: uppercase;
	margin-bottom: 2px;
	margin-top: 0;
}

.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	z-index: 99999;
}

.loader p {
	padding-top: 35%;
	font-size: 1em;
	letter-spacing: .5em;
	width: 100%;
	text-transform: uppercase;
	text-align: center;
}

.no-touch .loader {
    display: none;
}

section {
	width: 100%; 
	position: relative;
	margin-bottom: 10%;
}

section#water {
	margin-bottom: 0;
}

section#ingredients .header {
	margin-top: 80px;
}

section#distOasis {
	margin-bottom: 15%;
}


.img-responsive img {
  display: block;
  height: auto;
  width: 100%;
  font-size: 2em;
  padding: 0;
}


section .header {
	padding: 0 20px;
	letter-spacing: 0.5px;
	z-index: 5001;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 250px;
	/* Usage @include transition(max-height,0.5s,ease-out); */
    -webkit-transition: font-size 0.5s ease-out;
    -moz-transition: font-size 0.5s ease-out;
    -ms-transition: font-size 0.5s ease-out;
    -o-transition: font-size 0.5s ease-out;
    transition: font-size 0.5s ease-out;
	
	/* Usage @include transition(max-height,0.5s,ease-out); */
    -webkit-transition: width 0.5s ease-out;
    -moz-transition: width 0.5s ease-out;
    -ms-transition: width 0.5s ease-out;
    -o-transition: width 0.5s ease-out;
    transition: width 0.5s ease-out;
}

.video-play-icon {
	z-index: 9999;
	position: absolute;
	top: -115%;
	left: 0;
    min-height: 768px;
	height: 100%;
    min-width: 1024px;
	width: 100%;
	opacity: 0;
	background-color: rgba(255,255,255,0.25);
}

/* End NavDots */
.iosBtn
{
	position:fixed;
	top:0%;
	background-color:purple;
	width:100%;
	height:100%;
	opacity:0;
}

.no-touch .video-play-icon {
	display: none;
}

.scroll-icon, .back-to-top-icon {
	min-width: 85px;
	width: 10%;
	display: block;
	margin: 0 auto;
}

.back-to-top-icon {
	cursor: pointer;
}

.scroll-down {
	position: absolute;
	bottom: 11%;
	width: 100%;
	z-index: 9999;
}

.back-to-top {
	position: absolute;
	bottom: 35px;
	width: 100%;
	z-index: 9999;
}

#water .header {
	width: 250px;
	margin-top: -80px;
}

section #wedge {
	margin-bottom: 5%;
}

section .header p {
	margin: 0;
	font-size: 1em;
	line-height: 1.5;
}

.disclaimer {
	text-transform: uppercase;
	color: #777;
	font-size: 0.6875em !important;
	margin-top: 15px !important;
}

section picture {
	margin: 0 auto;
}

.video-holder, .picture-holder {
	position: relative;
}

#credits {
	width: 326px;
	height: auto;
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	bottom: 30px;
	left: 35px;
	font: 8px/14px "Helvetica Neue";
	color: #ccc;
	letter-spacing: .05em;
	padding: 3px 15px;
	z-index: 9999;
}

.label-svg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5000;
	width: 100%;
	height: 100%;
}


.label-svg img {
	width: 100%;
	height: auto;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

@media screen (max-width: 1024px){
    .touch #allcomments {
        min-height: 400px;
    }    
}



#parallax {
	overflow: hidden;
	margin-bottom: 0;
}

#parallax .header {
	top: auto;
	padding-top: 30px;
	visibility: visible !important;
	z-index: 999;
}

#surface {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
}
#surface2 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 100%;
}
#surface3 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
}

#jupiter {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 100%;
}
#stars {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
}

#geyser {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	width: 100%;
}


footer {
	background-color: #FFF;
}

.footer-main p {
	margin: 7px auto 6% 35px;
}


@media (min-width: 1525px){
	section .header {
		font-size: 1.5em;
	}
}

@media (min-width: 1300px){
	section .header {
		font-size: 1.25em;
	}
}

@media (min-width: 1100px){
	section .header {
		width: 24%;
	}
	
}

@media (max-width: 1024px){
	#distOasis {
		margin-top: 80px;
	}
	#water .header {
		margin-top: 20px;
	}
	#water {
		margin-top: -120px;
	}
	#water .img-responsive img {
		margin-top: -120px;
	}
	#ingredients .img-responsive img {
		margin-top: -50px;
	}
	section#water {
	margin-bottom: 120px;
	}
}


@media (max-width: 960px){

	#distOasis .img-responsive img {
		padding-top: 20px;
	}
	#ingredients .img-responsive img {
		padding-top: 40px !important;
	}
	#water .img-responsive img {
		padding-top: 0 !important;
	}
}

@media (max-width: 900px){
	#distOasis .img-responsive img {
		padding-top: 60px;
	}
	#ingredients .img-responsive img {
	padding-top: 20px !important;
	}
}

@media (max-width: 768px){
	section#distOasis {
		margin-bottom: 0 !important;
		margin-top: 140px;
	}
	#distOasis .img-responsive img {
		padding-top: 0px;
		margin-top: -120px;
	}
	.video-holder {
		margin-top: 25px;
	}
	#sulfur .header, #radiation .header, #gravity .header, #wedge .header {
		top: 100px;
	}
	
	#water {
		margin-top: 120px !important;
	}
	section#water {
		margin-bottom: 0;
	}
	section .header {
		position: relative;
		top: 0;
		left: 0;
	}	
	#parallax .header {
		padding-top: 0px;
	}

	.footer-main p {
		margin: 7px auto 6% 20px;
	}
	#credits {
		left: 20px;
	}
	.touch .video-holder .label-svg {
	top: 6%;
	}
}

@media (max-width: 580px){
	#parallax #surface, #parallax #jupiter, #parallax #stars, #parallax #geyser {
		top: 200px !important;
	}
	section .header {
		width: 85% !important;
	}
	#distOasis .img-responsive img {
		margin-top: -50px;
	}
	#parallax {
		margin-bottom: 175px;
		overflow: visible;
	}
	
	#credits {
		bottom: -95px;
		left: 10px;
		width: 90%;
	}
	.back-to-top {
		bottom: -150px;
	}
	#sulfur .header, #radiation .header, #gravity .header, #wedge .header {
		top: 20px;
	}
	#water .header {
		top: -30px;
	}
}

@media (min-width: 580px){

	#parallax .header {
		top: 10%;
		width: 325px;
		padding-top: 0;
	}

	#credits {
		width: 25%;
	}
}

@media (orientation:portrait) {
	section {
		margin-top: 50px;
	}
	
	section:first-child{
		margin-top: 0;
	}
}

@media (orientation:portrait) and (max-width: 1024px){
    section:first-child {
        margin-top: 7%;
    }
}

@media (orientation:portrait) and (max-width: 768px){
    section:first-child {
        margin-top: 17%;
    }
}