body {
  padding: 0;
  margin: 0;
}

#hero {
  height: 800px;
  overflow: hidden;
  position: relative;
}

#content {
  background-color: #ffffff;
}

.layer {
  background-position: bottom center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 100%;
  height: 800px;
  position: fixed;
  z-index: -1;
}

#hero-mobile {
  display: none;
  background: url("../img/mountain-mobile.jpg");
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:cover;
	height: 500px;
	width:100%;
}

.first-section {
  padding: 50px 0 20px 0;
}



#hero, .layer {
  height:120vh;
}

.layer-bg {
  background-image: url("../img/mountain-back.jpg");
}

.layer-1 {
  background-image: url("../img/mountain-middle.png");
  background-position: left bottom;
}

.layer-2 {
  background-image: url("../img/mountain-middle1.png");
}

.layer-3 {
  background-image: url("../img/mountain-front.png");
  background-position: right bottom;
}

.layer-4 {
  background-image: url("../img/mountain-guy.png");
  background-position: right bottom;
  background-size:600px;
  bottom:0%;
  right:-3%;
}

.layer-5 {
  background-image: url("../img/w-text-logo.png");
  background-position: top left;
  background-size:250px;
	top:30px;
	left:40px;
}

.layer-6 {
  background-image: url("../img/lensflare.png");
  background-position: center top;
  background-blend-mode:overlay;

}

.layer-overlay {
  background-image: url("../img/mountain-overlay.png");
  background-position: center bottom;
	bottom:-140px;
}




@media only screen and (max-width: 1024px) {
	.layer-4 {
	  bottom:0%;
	  right:-14%;
	  background-size:540px;
	}
}
@media only screen and (min-width: 1024px) and (orientation : landscape) {
	.layer-4 {
    background-size: 95vh;
}
}
@media only screen and (min-width: 768px) and (orientation : portrait) {
	.layer-4 {
    background-size: 95vw;
}
}

@media only screen and (max-width: 640px) {
	.layer-4 {
    bottom: 4%;
    right: 0;
    background-size: 120vw;
    left: 30px;
    width: 120vw;
}
}

@media only screen and (max-width: 768px) {
	.layer-5{
	background-size: 170px;
    top: 20px;
    left: 20px;
	}
}


@media only screen and (max-width: 768px) and (orientation : landscape) {
	.layer-4 {
    bottom: -15px;
    background-size: 55vw;
    left: -21vw;
}
.layer-overlay {
	bottom:-170px;
}	
	.layer {
		height:730px;
		min-height:500px;
	}

}

@media only screen and (max-width:640px) and (orientation: landscape) {
	
	.top-shift {
    margin-bottom: -300px;
    top: -100px;
}
}

@media only screen and (max-width:480px) and (orientation: portrait) {
	#hero, .layer {
  height:110vh;
}
}


@media only screen and (-webkit-device-pixel-ratio: 2) and (min-width:740px) {
#hero, .layer {
  height:110vh;
}
	
	.layer-bg {
		background-size:cover;
	}


}



@media only screen and (max-width:568px) and (orientation: landscape) {
	.layer-4 {
  background-size:80vh;
}
}

/* LARGE SCREENS */

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

	.layer-4 {
	  background-size:800px;
	  bottom:0;
	  right:-3%;
	}
	
	.layer-5 {
	top:50px;
	left:70px;
	}
	
	.layer-overlay {
	bottom:-9%;
	}
	
}

@media only screen and (min-width:1900px) {
	
	
	
#hero, .layer {
  height:120vh;
  background-size:cover;
	background-position:right bottom;
}


.layer-1 {
  background-position: left bottom;
}


.layer-3 {
  background-position: right bottom;
}

.layer-4 {
  background-position: right bottom;
  background-size:75vh;
  bottom:0%;
  right:-3%;
}

.layer-5 {
  background-image: url("../img/w-text-logo.png");
  background-position: top left;
  background-size:250px;
	top:30px;
	left:40px;
}

.layer-overlay {
  background-image: url("../img/mountain-overlay.png");
  background-position: center bottom;
	bottom:0px;
}
}


/* iPad Pro Special class */