/* http://keithclark.co.uk/articles/pure-css-parallax-websites/ 
Adaptation by Alexandra Saunders and Pam Van Londen 2015*/

body {/* page */
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:400; 
	font-size:1.5em; 
	color:#ffffff;
	margin:0; padding:0;
}

/* typography and media*/
h1 {
	font-family: 'paytone one', sans-serif; 
	font-weight:normal;
  color:lightgreen;
	position:sticky; 
	top:0;
	font-size:100%;
	margin-left:30px;
}
h2 {
	font-size:150%;	
	letter-spacing:1.5px; 
	font-family: 'paytone one', sans-serif; 
	font-weight:normal;
}
h2, p, table, iframe, figcaption {
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


h2, .title {top:30%;}
p {top: 40%;}
table {top:75%; border-collapse:collapse;}
tr, td, th, caption {border-bottom:1px solid white; padding:1%;}
th {text-align:right; }
td {text-align:left; }
.oval {background-color:teal; border-radius:50%; padding:5%; top:50%;}
iframe {
	width:320px; height:200px;  top:75%; left:70%; 
	padding:2%; background-color:rgba(113, 41, 113, 0.75);
	border-radius:7px;
}
figcaption {top:90%; left:70%; font-size:50%; width:320px; font-weight:400;}
figure {margin:0; padding:0;}


.parallax {/* prepare the viewport */ 
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
  perspective: 300px;
}

.parallax__group { /* position groups relatively */
	position: relative;
	height:100vh;
	transform-style: preserve-3d;
}

.parallax__layer {/*expand each group's layer to the edges of the viewport */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax__layer--fore { /* furthest layer */
	transform: translateZ(90px) scale(0.7);
	z-index:1;
}

.parallax__layer--deep { /* back middle layer */
	transform: translateZ(-600px) scale(3);
	z-index: 2;
}


.parallax__layer--back { /* front middle layer */
	transform: translateZ(-300px) scale(2);
	z-index:3;
}

.parallax__layer--base { /* top layer */
	transform: translateZ(0);
	z-index:4;
}

/* screen one */
#group1 {z-index: 5;}
#group1 .parallax__layer--base {background:rgba(170, 3, 87, .8);}

#group2 {z-index:3;}
#group2 .parallax__layer--back {
		background: 
		url(../animation/characters/valley-morning-13-bg1.jpg) 0 50px repeat-x, 
		url(../animation/characters/cloud.png) no-repeat;
}

#group3 {z-index:4;} 
#group3 .parallax__layer--base {background:rgba(170, 114, 3, .8);}

#group4 {z-index:2;}
#group4 .parallax__layer--back {
		background: 
		url(../animation/characters/valley-morning-bg.jpg) 0 50px repeat-x, 
		url(../animation/characters/cloud2.png) no-repeat;
}

#group5 {z-index:3;} 
#group5 .parallax__layer--base {background:rgba(112, 170, 3, .8);}



/* character positions */
.bush {
	position:absolute;
	bottom:-5px;
}
.bush2 {
	position:absolute;
	bottom:-40px;
	right:0;
	transform: scale(0.8);
}
.crowspeakshermind {
	position:absolute;
	bottom:0;
}

.bushes-butterflies {
	position:absolute;
	top:-7%; 
	right:-8%;
	transform:scale(0.8) scaleY(-1);
}
.firtree2 {
	position:absolute;
	bottom:-30px;
	right:0;
}
.butterfly1 {
	position:absolute;
	top:200px;
	left:200px;
}
.cloud2 {
	position:absolute;
	top:10%;
	left:-30%;
}
.loralee-grandma {
	position:absolute;
	bottom:-12%;
	left:60%;
	transform:scale(0.6);
}
.martinvideotaping {
	position:absolute;
	left:0;
	bottom:0; 
}
.maya-husky {
	position:absolute;
	top:-10%; 
	left:0%;
	transform:scaleX(-1);
}


@media all and (min-width: 600px) { /* TABLET ========================*/

iframe {width:400px; height:200px; left:50%;}
figcaption {top:90%; left:50%; width:400px;}
.shape {
	-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
	
}


@media all and (min-width: 600px) { /* TABLET ========================*/

iframe {width:500px; height:300px; }
figcaption {width:500px;}
.cloud2 {left:-1%;}
}