/*font-family: 'Passion One', cursive;*/

@import url('https://fonts.googleapis.com/css?family=Passion+One:400,700');

html {
	font-size: 20px;
}


body {
    background-color: grey;
    padding: 0;
    margin: 0;
  }

p {
  color: white;
  font-family: sans-serif;
  font-size: 30px;
}

h1 {
	display: inline-block;
	font-family: 'Passion One', cursive;
	font-size: 9rem;
	margin-left: -2rem;
	color: #8facd6;
  margin-top: 10vw;
}

  .wrapper {
    perspective: 1px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .front {
    transform: translateZ(0);
    width: 100%;
    display: block;
    height: 660vw;
    /*background-image: url(blueMountain.png);*/
    background-size: 100% 100%;
    z-index: 50;
  }

  .back-img {
  	display: block;
  	width: 100%;
  	float: left;
  	height: 220vw;
  }

  #sec1 {
  	background-image: url(sec3.png);
  	background-size: 100% 100%;
  	background-position: 0.2rem 0rem;
  }

  #sec2 {
  	background-image: url(sec2.png);
  	background-size: 100% 100%;
  }

  #sec3 {
  	background-image: url(sec1.png);
  	background-size: 100% 100%;
  }

  .back {
    transform: translateZ(-2px) scale(3);
    width: 100%;
    display: block;
    height: 660vw;
    background-image: url(darkBackground.png);
    background-size: 100% 100%;
    z-index: 10;
  }

 .sections {
	display: block;
	width: inherit;
	height: 66vw;
	float: left;
	border-style: solid;
	border-width: 0px 0px 2px 0px;
	border-color: black;
	box-sizing: border-box;
	z-index: 100;
	text-align: center;
	padding-top: 11%;
}

.mountain-background {
	position: absolute;
	width: 100%;
	height: 660vw;
	opacity:1;
	z-index: 200;
}

.txt-box {
  display: inline-block;
  width: 20rem;
  height: 12rem;
  padding: 0;
  font-weight: lighter;
  font-size: 8px;
}

.txt-box p {
  font-size: 25px;
}

.txt-box h2 {
  display: block;
  width: 20rem;
  float: left;
  height: 4rem;
  color: white;
  font-size: 3rem;
  margin-bottom: -5px;
}

#tb2 {
  margin-left: -250px;
}

#tb3 {
  margin-right: -200px;
}



#p1 {
  margin-top: -100px;
}

.arrow {
  position: absolute;
  margin-left: 42%;
  font-weight: lighter;
  margin-top: -10px;
}

/*.boulder1 {
	position: absolute;
	width: 57vw;
	height: 49vw;
	margin-left: 18.5vw;
	margin-top: 25vw;
	background-color: #9b9da8;
	clip-path: polygon(13.1% 52.4%, 8.4% 70.4%, 13.7% 80.4%, 36.5% 93.4%, 64.3% 88.1%, 73% 77.7%, 69.4% 73%, 57.9% 70.4%, 58.1% 59.1%, 50.6% 56.5%, 42.4% 43.7%, 28.7% 40.8%, 21% 32%);
}

.boulder2 {
	position: absolute;
	width: 57vw;
	height: 49vw;
	margin-left: 18.5vw;
	margin-top: 25vw;
	background-color: #9b9da8;
	clip-path: polygon(57.7% 8.8%, 91.2% 42.2%, 81.3% 67.3%, 73.1% 77.4%, 69.5% 72.6%, 58.2% 70%, 58.3% 58.8%, 50.8% 56.2%, 42.5% 43.4%, 28.9% 40.5%, 21.4% 31.8%);
}

.boulder3 {
	position: absolute;
	width: 62vw;
	height: 52vw;
	margin-left: 16vw;
	margin-top: 10.5vw;
	background-color: #9b9da8;
	clip-path: polygon(34.7% 20.1%, 44.8% 34.5%, 44.5% 46.8%, 46.7% 47.3%, 47.3% 51.5%, 56.7% 70%, 46.8% 82%, 52.1% 96.5%, 25% 93.9%, 14.6% 60.9%, 22% 37.9%);
}

.boulder4 {
	position: absolute;
	width: 62vw;
	height: 52vw;
	margin-left: 16vw;
	margin-top: 10.5vw;
	background-color: #9b9da8;
	clip-path: polygon(45.1% 34.2%, 44.9% 46.5%, 47% 47%, 47.6% 51.1%, 57.2% 70.4%, 47.3% 82.2%, 52.3% 96.1%, 55.5% 96.5%, 77.9% 83.4%, 86.7% 53.6%, 72.6% 16.8%, 48.6% 1.5%, 35.2% 20.1%);
}*/