body{
	margin:0;
	padding:0;
	font-family: 'Lato', sans-serif;
}

h1,p{
	margin:0;
}

h1{
	font-size:10vh;
	margin-top:2vh;
	margin-bottom:2vh;
}

p{
	opacity:0;
	transition: 2300ms;
	-webkit-transition: 2300ms;
	font-weight:300;
	font-size:2.1vh;
}

#caterpillar, #cocoon, #butterfly, #wrapper{
	width:100%;
	height:100vh;
	position:absolute;
	overflow:hidden;
	transition: 2000ms;
	-webkit-transition: 2000ms;
}

h1 span{
	opacity:0;
	transition: 1300ms;
	-webkit-transition: 1300ms;
}

h1 span:nth-child(1)  { transition-delay:  200ms; -webkit-transition-delay:  200ms;}
h1 span:nth-child(2)  { transition-delay: 1200ms; -webkit-transition-delay: 1200ms;}
h1 span:nth-child(3)  { transition-delay:  800ms; -webkit-transition-delay:  800ms;}
h1 span:nth-child(4)  { transition-delay:  300ms; -webkit-transition-delay:  300ms;}
h1 span:nth-child(5)  { transition-delay:  700ms; -webkit-transition-delay:  700ms;}
h1 span:nth-child(6)  { transition-delay:  600ms; -webkit-transition-delay:  600ms;}
h1 span:nth-child(7)  { transition-delay:  400ms; -webkit-transition-delay:  400ms;}
h1 span:nth-child(8)  { transition-delay:  900ms; -webkit-transition-delay:  900ms;}
h1 span:nth-child(9)  { transition-delay:  700ms; -webkit-transition-delay:  700ms;}
h1 span:nth-child(10) { transition-delay:   50ms; -webkit-transition-delay:   50ms;}
h1 span:nth-child(11) { transition-delay:  550ms; -webkit-transition-delay:  550ms;}


nav{
	position:absolute;
	z-index:500;
	opacity:.8;
	height:26%;
	background-color:black;
	top:38%;
	right:30px;
}

.nav-wrapper{
	position:relative;
	height:100%;
}

.circle{
	background-color:white;
	width:20px;
	height:20px;
	border-radius: 10px;
	position:absolute;

}

#nav-cocoon{
	top:calc(50% - 10px);
}

#nav-butterfly{
	bottom:0;
}


/** CATERPILLAR STYLE **/

#caterpillar{
	background: rgb(144, 238, 144);
	background: -moz-linear-gradient(30deg, rgb(144, 238, 144) 24%, rgb(202, 255, 184) 90%);
	background: -webkit-linear-gradient(30deg, rgb(144, 238, 144) 24%, rgb(202, 255, 184) 90%);
	background: -o-linear-gradient(30deg, rgb(144, 238, 144) 24%, rgb(202, 255, 184) 90%);
	background: -ms-linear-gradient(30deg, rgb(144, 238, 144) 24%, rgb(202, 255, 184) 90%);
	background: linear-gradient(120deg, rgb(144, 238, 144) 24%, rgb(202, 255, 184) 90%);
}

#caterpillar-content{
	margin: 0 5%;
	width:90%;
	position:absolute;
	height:100vh;
	text-align:center;
}

#caterpillar-text h1{
	font-weight: 100;
}

#caterpillar-leaf{
	height:70vh;
	margin-top:5vh;
	position:relative;
	opacity:0;
	transition: opacity 1300ms;
	-webkit-transition: opacity 1300ms;
	
}

#caterpillar-leaf h2{
	width:100%;
	position:absolute;
	top:40%;
	color:lightgreen;
	font-size:1.25em;
	font-weight:400;
}

#caterpillar-leaf img{
	max-height:100%;
	cursor: pointer;
}

#caterpillar-caterpillar{
	background-image: url('../img/leaf/caterpillar1.png');
	background-size:contain;
	background-position:right;
	background-repeat: no-repeat;
	position:absolute;
	width:100%;
	height:36%;
	bottom:0;
	left:100%;
	transition:2500ms;
	-webkit-transition:2500ms;
}



/** COCOON STYLE **/

#cocoon{
	background: rgb(115, 101, 100);
	background: -moz-linear-gradient(30deg, rgb(115, 101, 100) 31%, rgb(137, 126, 125) 92%);
	background: -webkit-linear-gradient(30deg, rgb(115, 101, 100) 31%, rgb(137, 126, 125) 92%);
	background: -o-linear-gradient(30deg, rgb(115, 101, 100) 31%, rgb(137, 126, 125) 92%);
	background: -ms-linear-gradient(30deg, rgb(115, 101, 100) 31%, rgb(137, 126, 125) 92%);
	background: linear-gradient(120deg, rgb(115, 101, 100) 31%, rgb(137, 126, 125) 92%);
	top:100%;
}

#cocoon-content{
	margin: 0 5%;
	width:90%;
	position:absolute;
	height:100vh;
	text-align:center;
}

#cocoon-text h1{
	font-weight: 300;
}

#cocoon-text p{
	max-width:400px;
	margin:0 auto;
}

#cocoon-sequence{
	height:70vh;
	margin-top:5vh;
	position:relative;
	opacity:0;
	transition: opacity 1300ms;
	-webkit-transition: opacity 1300ms;
	
}

#cocoon-sequence h2{
	width:100%;
	position:absolute;
	top:65%;
	color:#bcb1af;
	font-weight:400;
}

#cocoon-sequence img{
	max-height:100%;
	border-top:3px solid black;
	cursor: pointer;
}


/** BUTTERFLY STYLE **/

#butterfly{
	top:200%;
	background: rgb(251, 192, 88);
	background: -moz-linear-gradient(30deg, rgb(251, 192, 88) 31%, rgb(247, 198, 119) 92%);
	background: -webkit-linear-gradient(30deg, rgb(251, 192, 88) 31%, rgb(247, 198, 119) 92%);
	background: -o-linear-gradient(30deg, rgb(251, 192, 88) 31%, rgb(247, 198, 119) 92%);
	background: -ms-linear-gradient(30deg, rgb(251, 192, 88) 31%, rgb(247, 198, 119) 92%);
	background: linear-gradient(120deg, rgb(251, 192, 88) 31%, rgb(247, 198, 119) 92%);

}

#butterfly-content{
	margin: 0 5%;
	width:90%;
	position:absolute;
	height:100vh;
	text-align:center;
}

#butterfly-text h1{
	font-weight: 500;
}

#butterfly-text p{
	max-width:450px;
	margin:0 auto;
}

#butterfly-wings{
	height:55vh;
	margin:5vh auto 0 auto;
	max-width:800px;
	position:relative;
	opacity:0;
	transition: opacity 1300ms;
	-webkit-transition: opacity 1300ms;
	font-size:0;
	
}

#butterfly-wings h2{
	width:100%;
	position:absolute;
	top:103%;
	color:#f9e9d7;
	font-weight:400;
	font-size:initial;
}

#butterfly-wings img{
	height:100%;
	width:50%;
	transition:1000ms;
	-webkit-transition:1000ms;
	cursor: pointer;
}

#butterfly-wings img.wings-flap{
	height:100%;
	width:10%;
	transition:1000ms;
	-webkit-transition:1000ms;
}