.container{
	margin-left:auto;
	margin-right:auto;
}

@font-face {
    font-family: 'IntroRust';
    src: url('../fonts/IntroRust.otf');   
}

@font-face {
    font-family: 'FuzzyBubblesRegular';
    src: url('../fonts/FuzzyBubbles-Reg.ttf');   
}

@font-face {
    font-family: 'FuzzyBubblesBold';
    src: url('../fonts/FuzzyBubbles-Bold.ttf');   
}

@font-face {
    font-family: 'Noteworthy';
    src: url('../fonts/Noteworthy.ttf');   
}

@font-face {
    font-family: 'NoteworthyBold';
    src: url('../fonts/Noteworthy-Bold.ttf');   
}

@font-face {
    font-family: 'TTRound';
    src: url('../fonts/TTRound.otf');   
}

	header{
		width: 100%;
		height: 7%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 500;
	}


	button + button {
	 margin-left: 5rem
	}

	i {
	 position: absolute;
	 display: block;
	 left: 50%;
	 top: 50%;
	 width: 6px;
	 height: 18px;
	 opacity: 0;
	 animation: bang 1.5s ease-out forwards;
	 pointer-events: none;
	}

	@keyframes bang {
	  from {
	    transform: translate3d(0,0,0);
	    opacity: 1;
	  }
	}



/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 667px){
	.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */
	}


	nav{
		position: absolute;
		width: 100%;
		height: 100vh;
		top: 0;
		right: -100%;
		background-color: rgba(0,0,0,.25);
		background-color: hotpink;
		transition: right 1000ms;
	}

	nav a{
		display: block;
		line-height: 12vw;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-family: FuzzyBubblesRegular;
		font-size: 8vw;
		width: 30%;
		margin-left: auto;
		margin-right: auto;
	}

	nav a:nth-of-type(1){
		margin-top: 40%;
	}

	nav a:hover{
		color: #000;
	}

	.navButton{
		display: block;
		width: 6.5%;
		position: absolute;
		right: 3%;
		top: 30%;
		z-index: 10;
	}

	.lineTop{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		margin-bottom: 12%;
		border-radius: 10px;
	}

	.lineMiddle{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		margin-bottom: 12%;
		border-radius: 10px;
	}

	.lineBottom{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		border-radius: 10px;
	}

	.homeButton{
		background-image: url(../images/eggWhite.png);
		width: 13%;
		height: 15%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: 0%;
		left: -.8%;
		z-index: 100;
	}

	#heroSection{
		width: 100%;
		height: 100vh;
		background-color: #EDFBFF;
		position: relative;
	}

	.revealed{
		right:0;
		transition: right 500ms;
	}

	body{
		background-color: #fff;
	}

	.heroSectionContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.heroText{
		width: 60.714285714285714%;
		height: 30%;
		position: absolute;
		top: 21%;
		left: 50%;
	
		margin-left: -30.357142857142855%;
		margin-top: -15%;
	}

	.smallTitle{
		font-family: FuzzyBubblesBold;
		font-size: 6vw;
		color: #000;
		text-align: center;
	}

	.largeTitle{
		margin-bottom: 2.5%;
		font-family: FuzzyBubblesBold;
		font-size: 15vw;
		color: #000;
		text-align: center;
	}

	.subtitle{
		display: none;
	}

	.Box{
		width: 100%;
		height: 100%;
		background-color: #000;
		border-radius: 60px;
		position: fixed;
		top: 100%;
		left: 0%;
		z-index: 300;
		display: none;
		transition: top 500ms;
	}

	.completedBox{
		width: 70%;
		padding-top: 10%;
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 5%;
		background-color: hotpink;
		border-radius: 60px;
		position: fixed;
		top: 100%;
		left: 50%;
		margin-left: -35%;
		z-index: 500;
		display: none;
	}

	.boxMoveUp{
		top: 20%;
		transition: top 600ms;
	}

	.guide{
		width: 80%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.Box h1{
		font-family: IntroRust;
		font-size: 12vw;
		color: #fff;
		margin-top: 10%;
	}

	.Box h2{
		font-family: FuzzyBubblesRegular;
		font-size: 12w;
		color: #fff;
		margin-top: 5%;
	}

	.Box p{
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		color: #fff;
		margin-top: 10%;
	}

	.Ex1{
		width: 10%;
		padding-top: 10%;
		margin-left: auto;
	}

	.Ex2{
		width: 10%;
		padding-top: 10%;
		margin-left: auto;
	}

	.Ex3{
		width: 10%;
		padding-top: 10%;
		margin-left: auto;
	}

	.Ex4{
		width: 10%;
		padding-top: 10%;
		margin-left: auto;
	}

	.Ex5{
		width: 10%;
		padding-top: 10%;
		margin-left: auto;
	}

	.stick1{
		width: 10%;
		padding-top: 90%;
		rotate: -45deg;
		background-color: #fff;
		margin-left: auto;
		transition: background-color 300ms;
	}

	.stick2{
		width: 10%;
		padding-top: 90%;
		rotate: 45deg;
		background-color: #fff;
		margin-left: auto;
		margin-top: -90%;
		transition: background-color 300ms;
	}

	.ExHoverState{
		background-color: #F3B13D;
		transition: background-color 300ms;
	}

	.grass{
		background-image: url(../images/grassMobile.png);
		width: 100%;
		padding-top: 55%;
		background-size: cover;
		position: absolute;
		bottom: 0%;
		left: 0;
		z-index: 1;
	}

	.heroSectionImages{
		display: flex;
	}

	.chicks{
		background-image: url(../images/chicks_HP.png);
		width: 90.9375%;
		padding-top: 40.3125%;
		background-size: 100%;
		margin-right: 27.607361963190184%;
		z-index: 2;
		position: absolute;
		bottom: 16%;
		left: 0%;
/*		background-color: yellow;*/
	}

	#FindTheEggsSection{
		width: 100%;
		background-color: #5B8BCB;
		position: relative;
	}


	@keyframes bob{
    from { 
    	transform: translate(0,  0px); 	
    	
    	}

    65%  { 
    	transform: translate(10px, 10px);
    	
    	}

    to   { 
    	transform: translate(0, 0px);
   
		}		
	}

	.star{
		background-image: url(../images/star.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 3.5%;
		padding-top: 4.5%;
		position: absolute;
	}

	.star:nth-of-type(1){
		width: 2%;
		padding-top: 3%;
		top: 62%;
		left: 19%;
	}

	.star:nth-of-type(2){
		width: 4%;
		padding-top: 5%;
		top: 55%;
		left: 82%;
	}

	.star:nth-of-type(3){
		width: 4%;
		padding-top: 5%;
		top: 10%;
		left: 10%;
	}

	.star:nth-of-type(4){
		width: 3%;
		padding-top: 4%;
		top: 45%;
		left: 7%;
	}

	.star:nth-of-type(5){
		width: 2.75%;
		padding-top: 3.75%;
		top: 25%;
		left: 89%;
	}

	.dot{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 85%;
		left: 6%;
	}

	.dot2{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 22%;
		left: 6%;
	}

	.dot3{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 12%;
		left: 8%;
	}

	.dot4{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 8%;
		left: 90%;
	}

	.dot5{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		right: 8%;
		bottom: 10%;
	}

	.dot6{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		right: 5%;
		bottom: 18%;
	}

	.EggSectionContainer{
		width: 87.5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.eggText{
		padding-top: 18%;
		margin-bottom: -10%;
	}

	.EggTitle{
		font-family: NoteworthyBold;
		font-size: 16vw;
		margin-bottom: 15%;
		width: 75%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		color: #FDFAED;
	}

	.EggSubtitle{
		font-family: FuzzyBubblesRegular;
		font-size: 5.5vw;
		width: 65%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		color: #fff;
	}

	.EggImageMobile{
		background-image: url(../images/threeEggs.png);
		background-size: 100%;
		width: 100%;
		padding-top: 50.278125%;
		margin-top: 8%;
		background-repeat: no-repeat;
	}

	.EggImage{
		display: none;
	}

	#springSection{
		width: 100%;
		background-color: #EAF7E3;
		position: relative;
	}

	.springImage{
		background-image: url(../images/springGrass.png);
		width: 100%;
		padding-top: 31.319444444444444%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.springContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.springTitle{
		width: 100%;
		height: 10%;
		font-family: IntroRust;
		font-size: 12vw;
		color: #427648;
		text-align: center;
		z-index: 2;
		padding-top: 60%;
		padding-bottom: 65%;
		margin-bottom: 0%;
	}

	.mirrorSection{
		width: 100%;
		background-color: #FFFAEF;
	}

	.mirrorContainer{
		width: 87.5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		padding-top: 5%;
	}

	.mirrorImage{
		background-image: url(../images/mirror.png);
		width: 90%;
		padding-top: 88.314285714285714%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-bottom: 10%;
		margin-top: 5%;
		margin-left: 4%;
		position: relative;
		pointer-events: none;
	}

	.EggOne{
		width: 7%;
		padding-top: 10.5%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 35%;
		left: 48%;
		rotate: 10deg;
		transition: top 400ms, left 400ms;
	}

	.EggOne:hover{
		top: 34%;
		left: 49%;
		transition: top 400ms, left 400ms;
	}

	.mirrorInfo{
		width: 100%;
		padding-bottom: 10%;
		padding-left: 1.533742331288344%;

	}

	.mirorTitle{
		font-family: IntroRust;
		font-size: 10vw;
		color: #000;
		margin-bottom: 3.5%;
	}

	.mirrorBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		color: #000;
		width: 80%;
		padding-bottom: 5%;
		margin-left: 15.053763440860215%;
	}

	.mirrorNext{
		display: none;
	}

	#swingSection{
		width: 100%;
		background-color: #93CC72;
		position: relative;
		overflow: hidden;
	}

	.swingContainer{
		width: 87.5%;

		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.swingImage{
		background-image: url(../images/swingFinal.png);
		width: 91%;
		padding-top: 101.5625%;
		background-size: 100%;
		background-repeat: no-repeat;
		pointer-events: none;
		margin-top: -6%;
		margin-bottom: 10%;
	}	

	.EggTwo{
		width:10%;
		padding-top: 10%;
		background-image: url(../images/swingEgg.png);
		background-size: 100%;
		background-color: rgba(0, 0, 0, 0);
		border: none;
		transition: all 400ms;
		position: absolute;
		top: 27%;
		left: 22.4%;
		transition: all 400ms;
	}

	.EggTwo:hover{
		width: 11%;
		padding-top: 11%;
		transition: all 400ms;

	}

	.swingInfo{
		width: 100%;
		padding-bottom: 10%;
		margin-left: 1.3%;
	}

	.swingTitle{
		font-family: IntroRust;
		font-size: 10vw;
		color: #000;
		margin-bottom: 3.5%;
	}

	.swingBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		color: #000;
		width: 80%;
		margin-left: 15.053763440860215%;
	}

	.swingNext{
		display: none;
	}

	#summerSection{
/*		width: 100vw;*/
		background-color: #DBF3FF;	
		position: relative;
		overflow: hidden;
	}

	.summerTitle{
		width: 100%;
		height: 16%;
		font-family: IntroRust;
		font-size: 12vw;
		color: #FF5396;
		padding-top: 50%;
		text-align: center;
		margin-bottom: 0%;
	}

	.summerBlurb{
		width: 40.147239263803681%;
		position: relative;
		top: 0%;
		left: 50%;
		margin-left: -20.07361963190184%;
		padding-top: 5%;
		padding-bottom: 45%;
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		color: #FF5396;
		text-align: center;
	}

	.summerImageBirds{
		background-image: url(../images/birds.png);
		width: 30%;
		padding-top: 30%;
		background-size: 100%;
		position: absolute;
		top: 2%;
		left: 2%;
		transform: rotateY(180deg);
	}

	.summerImageCloud{
		background-image: url(../images/cloud.png);
		width: 40%;
		padding-top: 40%;
		background-size: 100%;
		position: absolute;
		bottom: 0%;
		right: -7%;
	}

	#frozenTreatsSection{
		width: 100%;
		background-color: #FF5396;
		position: relative;
		overflow: hidden;
	}

	.frozenTreatsContainer{
		width: 87.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.frozenTreatsGrassImage{
		width: 100%;
		padding-top: 40%;
		background-image: url(../images/frozenTreatsGrass.png);
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.frozenTreatsImageHolder{
		position: relative;
	}

	.frozenTreatsImage{
		background-image: url(../images/frozenTreats.png);
		width: 90%;
		padding-top: 128%;
		margin-bottom: -21%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-left: 52%;
		position: relative;
		pointer-events: none;
	}

	.EggThree{
		width:8%;
		padding-top: 12%;
		border-radius: 50%;
		background-color: #fff;
		border:.2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 39%;
		left: 92%;
		rotate: 15deg;
		transition: all 400ms;
	}

	.EggThree:hover{
		top: 38%;
		transition: all 400ms;
	}


	.frozenTreatsInfo{
		width: 50%;
		padding-top: 15%;
		margin-bottom: -30%;
		margin-left: 1.3%;
	}

	.frozenTreatsTitle{
		font-family: IntroRust;
		font-size: 10vw;
		color: #000;
		margin-bottom: 8%;
	}

	.frozenTreatsBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		color: #fff;
		width: 100%;
		margin-left: 1%;
	}

	.frozenTreatsNext{
		display: none;
	}


	#spaSection{
		width: 100%;
		background-color: #FFFAEF;
	}

	.spaContainer{
		width: 87.5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		padding-top: 5%;
		padding-bottom: 10%;
	}

	.spaImage2{
		background-image: url(../images/spa.png);
		width: 100%;
		padding-top: 103%;
		background-size: 100%;
		background-repeat: no-repeat;
	}	

	.spaInfo{
		width: 100%;
		padding-top: 15%;
		padding-bottom: 10%;
		padding-left: 1.533742331288344%;
	}

	.spaTitle{
		font-family: IntroRust;
		font-size: 10vw;
		color: #000;
		margin-bottom: 3.5%;
		color: #E87AA5;
	}

	.spaBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		color: #000;
		width: 80%;
		margin-left: 15.053763440860215%;
	}

	.spaNext{
		display: none;
	}

	#winterSection{
		width: 100%;
		background-color: #5B8BCB;
		overflow: hidden;
		position: relative;
	}

	.winterBackgroundPattern{
		background-image: url(../images/winterPatternMobile.png);
		position: absolute;
		top: 0;
		left: 0%;
		background-size: 100%;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.winterTitle{
		width: 100%;
		font-family: IntroRust;
		font-size: 12vw;
		color: #fff;;
		text-align: center;
		z-index: 10;
		position: relative;
		top: 0%;
		left: 0;
		padding-top: 47%;
		margin-bottom: 5%;
	}

	.winterBlurb{
		width: 50%;
		font-family: FuzzyBubblesRegular;
		font-size: 4vw;
		color: #fff;
		text-align: center;
		z-index: 10;
		position: relative;
		top: 55%;
		left: 50%;
		margin-left: -25%;
		padding-bottom: 47%;
	}

	#musicSection{
		width: 100%;
		background-color: #82ADE6;
		position: relative;
		overflow: hidden;
	}

	.musicContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.musicImageSnow{
		width: 100%;
		padding-top: 35%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: url(../images/snow.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.musicImageChicken2{
		background-image: url(../images/music.png);
		width: 105%;
		padding-top: 125%;
		background-size: 100%;
		margin-top: 7%;
		margin-left: -40%;
		margin-bottom: 17%;
	}

	.musicInfo{
		width: 100%;
		padding-top: 15%;
		padding-bottom: 10%;
		margin-bottom: -60%;
	}

	.musicTitle{
		font-family: IntroRust;
		font-size: 10vw;
		color: #fff;
		margin-bottom: 3.5%;
		width: 50%;
		margin-left: 50%;
	}

	.musicBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		color: #fff;
		width: 50%;
		margin-left: 50%;
	}

	.musicNext{
		display: none;
	}

	#fallSection{
		width: 100%;
		background-color: #F4B449;
		position: relative;
	}

	.fallBackgroundPattern{
		background-image: url(../images/fallPattern.png);
		position: absolute;
		top: 0;
		left: -.5%;
		background-size: 100%;
		width: 100%;
		height: 100%;
		background-size: cover;
	}


	.fallTitle{
		width: 100%;
		font-family: IntroRust;
		font-size: 12vw;
		color: #000;
		text-align: center;
		z-index: 10;
		position: relative;
		padding-top: 60%;
		padding-bottom: 60%;
		top: 50%;
		left: 0;
		margin-top: -5%;
		margin-bottom: 0%;
	}

	#wormSection{
		width: 100%;
		background-color: #FFFAEF;
		overflow: hidden;
		position: relative;
	}

	.wormContainer{
		width: 87.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.wormImage{
		background-image: url(../images/wormMobile.png);
		width: 134.125%;
		padding-top: 103.1875%;
		background-size: 100%;
		background-repeat: no-repeat;
		pointer-events: none;
		position: relative;
		margin-top: 5%;
	}

	.EggFour{
		width: 7%;
		padding-top: 10.5%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 75.25%;
		left: 10%;
		rotate: 15deg;
		transition: top 400ms, left 400ms;
	}

	.EggFour:hover{
		top: 73%;
		left: 10%;
		transition: top 400ms, left 400ms;
	}

	.wormInfo{
		width: 100%;
		padding-top: 25%;
		padding-left: 1.533742331288344%;
		margin-bottom: -60%;
	}

	.wormTitle{
		font-family: IntroRust;
		font-size: 10vw;
		color: #000;
		width: 50%;
		margin-left: 52%;
		margin-bottom: 2.5%;
	}

	.wormBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 3.1vw;
		color: #000;
		width: 50%;
		margin-left: 54%;
		margin-bottom: 5%;
	}

	.wormNext{
		display: none;
	}

	#pinataSection{
		width: 100%;
		background-color: #BAE393;
		overflow: hidden;
		position: relative;
	}

	.pinataContainer{
		width: 87.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.eggPinataHolder{
		width: 100%;
		background-color: #BAE393;
		position: relative;
	}

	.pinataImage{
		background-image: url(../images/pinata.png);
		width: 115%;
		padding-top: 115%;
		background-size: 100%;
		background-repeat: no-repeat;
		pointer-events: none;
		position: relative;
	}

	.EggFive{
		width: 7%;
		padding-top: 10.5%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 28%;
		left: 21%;
		rotate: 12deg;
		transition: all 400ms;
	}

	.EggFive:hover{
		top: 26.5%;
		left: 21.5%;
		transition: all 400ms;
	}

	.pinataInfo{
		width: 100%;
		padding-top: 15%;
		padding-left: 1.533742331288344%;
	}

	.pinataBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 3.1vw;
		color: #000;
		width: 60.877300613496933%;
		margin-left: 15.053763440860215%;
		margin-bottom: 5%;
	}

	.pinataTitle{
		font-family: IntroRust;
		font-size: 10vw;
		color: #000;
		width: 100%;
		margin-bottom: 5%;
	}

	.pinataNext{
		display: none;
	}

	.footer{
		width: 100%;
		background-color: #F5639C;
	}

	.footerContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.shareText{
		font-family: FuzzyBubblesRegular;
		font-size: 5vw;
		color: #FADC5B;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		padding-top: 10%;
		display: block;
		margin-bottom: 17%;
	}

	.ShareButtons{
		width: 40%;
		padding-bottom: 5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.fa-facebook{
		background-image: url(../images/facebookIcon.png);
		background-size: 100%;
		width: 25%;
		padding-top: 25%;
		position: absolute;
		top: 0%;
		left: 0;
		filter: opacity(60%);
		transition: filter 400ms;
	}

	.fa-facebook:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}

	.fa-twitter{
		background-image: url(../images/twitterIcon.png);
		background-size: 100%;
		width: 26%;
		padding-top: 26%;
		position: absolute;
		top: 0%;
		left: 35%;
		transition: filter 400ms;
		filter: opacity(60%);
	}

	.fa-twitter:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}

	.fa-envelope{
		background-image: url(../images/mailIcon.png);
		background-size: 100%;
		width: 27%;
		padding-top: 27%;
		position: absolute;
		top: 0%;
		left: 71%;
		transition: filter 400ms;
		filter: opacity(60%);
	}

	.fa-envelope:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}


	span{
		font-family: IntroRust;
		font-size: 12vw;
	}

	.boxUnderIcons{
		width: 100%;
		padding-top: 15%;

	}


}

















/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 667px) and (max-width: 1024px){
	.container{
		width:93.75%; /* 720 pixels at a 768 pixel screen width (iPads) */
	}

	/*.Test{
		width: 100%;
		height: 2px;
		background-color: black;
		position: fixed;
		z-index: 700;
		bottom: 12%;
		left: 0%;
	}*/

	nav{
		position: absolute;
		width: 50%;
		height: 100vh;
		top: 0;
		right: -50%;
		background-color: rgba(0,0,0,.25);
		background-color: hotpink;
		transition: right 1000ms;
	}

	nav a{
		display: block;
		line-height: 9vw;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-family: FuzzyBubblesRegular;
		font-size: 5vw;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	nav a:nth-of-type(1){
		margin-top: 40%;
	}

	nav a:hover{
		color: #000;
	}

	.navButton{
		display: block;
		width: 5%;
		position: absolute;
		right: 2%;
		top: 30%;
		z-index: 10;
	}

	.lineTop{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		margin-bottom: 12%;
		border-radius: 10px;
	}

	.lineMiddle{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		margin-bottom: 12%;
		border-radius: 10px;
	}

	.lineBottom{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		border-radius: 10px;
	}

	.hamburgerHover{
		background-color: gray;
	}


	.homeButton{
		background-image: url(../images/eggWhite.png);
		width: 10%;
		padding-top: 12%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: -.5%;
		left: -.8%;
		z-index: 100;
	}

	.homeButton2{
		background-image: url(../images/coloredEgg.png);
		width: 10%;
		height: 14%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: -.5%;
		left: -.8%;
		z-index: 200;
		display: none;
		pointer-events: none;
		opacity: 50%;
	}

	#heroSection{
		width: 100%;
		height: 100vh;
		background-color: #EDFBFF;
		position: relative;
	}

	.revealed{
		right:0;
		transition: right 500ms;
	}

	.Box{
		width: 90%;
		padding-top: 10%;
		background-color: #000;
		border-radius: 60px;
		position: fixed;
		top: 100%;
		left: 5%;
		z-index: 300;
		display: none;
		transition: top 500ms;
	}

	.completedBox{
		width: 70%;
		padding-top: 10%;
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 5%;
		background-color: hotpink;
		border-radius: 60px;
		position: fixed;
		top: 100%;
		left: 50%;
		margin-left: -35%;
		z-index: 500;
		display: none;
	}

	.boxMoveUp{
		top: 15%;
		transition: top 600ms;
	}

	.guide{
		width: 85%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.Box h1{
		margin-top: -2%;
		font-family: IntroRust;
		font-size: 7vw;
		color: #fff;
	}

	.Box h2{
		font-family: FuzzyBubblesRegular;
		font-size: 6w;
		color: #fff;
		margin-top: 3%;
	}

	.Box p{
		font-family: FuzzyBubblesRegular;
		font-size: 2vw;
		color: #fff;
		margin-top: 7%;
		padding-bottom: 10%;
	}

	.Ex1{
		width: 7%;
		padding-top: 7%;
		margin-left: auto;
		margin-top: -12%;
	}

	.Ex2{
		width: 7%;
		padding-top: 7%;
		margin-left: auto;
		margin-top: -12%;
	}

	.Ex3{
		width: 7%;
		padding-top: 7%;
		margin-left: auto;
		margin-top: -12%;
	}

	.Ex4{
		width: 7%;
		padding-top: 7%;
		margin-left: auto;
		margin-top: -12%;
	}

	.Ex5{
		width: 7%;
		padding-top: 7%;
		margin-left: auto;
		margin-top: -12%;
	}

	.Ex6{
		width: 7%;
		padding-top: 7%;
		margin-left: auto;
		margin-top: -12%;
	}

	.stick1{
		width: 10%;
		padding-top: 90%;
		rotate: -45deg;
		background-color: #fff;
		margin-left: auto;
		transition: background-color 300ms;
	}

	.stick2{
		width: 10%;
		padding-top: 90%;
		rotate: 45deg;
		background-color: #fff;
		margin-left: auto;
		margin-top: -90%;
		transition: background-color 300ms;
	}

	.ExHoverState{
		background-color: #F3B13D;
		transition: background-color 300ms;
	}

	.Nav{
		width: 100%;
		height: 5%;
	}

	.navFlexParent{
		display: none;
	}

	.heroSectionContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.smallTitle{
		padding-top: 12.157464212678936%;
		width: 55.214723926380368%;
		margin-left: 6.134969325153374%;
		font-family: FuzzyBubblesBold;
		font-size: 3.5vw;
		color: #000;
	}

	.largeTitle{
		width: 65.214723926380368%;
		margin-left: 6.134969325153374%;
		margin-bottom: 2.134969325153374%;
		font-family: FuzzyBubblesBold;
		font-size: 6.5vw;
		color: #000;
	}

	.subtitle{
		width: 55.214723926380368%;
		margin-left: 6.134969325153374%;
		font-family: FuzzyBubblesRegular;
		font-size: 2.05vw;
		color: #000;
		margin-bottom: 8%;
	}

	.grass{
		background-image: url(../images/greenGrass.png);
		width: 100%;
		padding-top: 38%;
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.heroSectionImages{
		display: flex;
	}

	.chicks{
		background-image: url(../images/chicks_HP.png);
		width: 47.079754601226994%;
		padding-top: 21.779141104294479%;
		background-size: 100%;
		margin-right: 27.607361963190184%;
		z-index: 2;
		position: absolute;
		bottom: 12%;
		left: 3%;
	}

	.princess{
		background-image: url(../images/princess.png);
		width: 33.683026584867076%;
		padding-top: 45.930470347648262%;
		background-size: cover;
		z-index: 2;
		position: absolute;
		bottom: 8%;
		right: 6%;
	}


	@keyframes bob{
    from { 
    	transform: translate(0,  0px); 	
    	
    	}

    65%  { 
    	transform: translate(10px, 10px);
    	
    	}

    to   { 
    	transform: translate(0, 0px);
   
		}		
	}

	.star{
		background-image: url(../images/star.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 3.5%;
		padding-top: 4.5%;
		position: absolute;
	}

	.star:nth-of-type(1){
		width: 2%;
		padding-top: 3%;
		top: 62%;
		left: 19%;
	}

	.star:nth-of-type(2){
		width: 4%;
		padding-top: 5%;
		top: 55%;
		left: 82%;
	}

	.star:nth-of-type(3){
		width: 4%;
		padding-top: 5%;
		top: 10%;
		left: 10%;
	}

	.star:nth-of-type(4){
		width: 3%;
		padding-top: 4%;
		top: 45%;
		left: 7%;
	}

	.star:nth-of-type(5){
		width: 2.75%;
		padding-top: 3.75%;
		top: 25%;
		left: 89%;
	}

	.dot{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 85%;
		left: 6%;
	}

	.dot2{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 22%;
		left: 6%;
	}

	.dot3{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 12%;
		left: 8%;
	}

	.dot4{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 8%;
		left: 90%;
	}

	.dot5{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		right: 8%;
		bottom: 10%;
	}

	.dot6{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		right: 5%;
		bottom: 18%;
	}

	#FindTheEggsSection{
		width: 100%;
/*		height: 70vh;*/
		background-color: #5B8BCB;
		position: relative;
	}

	.EggSectionContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.EggTitle{
		font-family: NoteworthyBold;
		font-size: 10vw;
		width: 87.5%;
		padding-top: 10%;
		padding-bottom: 7%;
		text-align: center;
		color: #FDFAED;
		margin-left: auto;
		margin-right: auto;
	}

	.EggSubtitle{
		font-family: FuzzyBubblesRegular;
		font-size: 3.5vw;
		width: 52.147239263803681%;
		margin-bottom: -5%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		color: #FDFAED;
	}

	.EggImageMobile{
		background-image: url(../images/threeEggs.png);
		background-size: 100%;
		width: 100%;
		padding-top: 50.701171875%;
		background-repeat: no-repeat;
		margin-left: auto;
		margin-right: auto;
	}

	#springSection{
		width: 100%;
		background-color: #EAF7E3;
		position: relative;
	}

	.springImage{
		background-image: url(../images/springGrass.png);
		width: 100%;
		padding-top: 31.319444444444444%;
		background-size: 100%;
		background-repeat: no-repeat;
		z-index: 1;
	}

	.springContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.springTitle{
		width: 100%;
		padding-top: 22%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #427648;
		text-align: center;
		z-index: 2;
	}

	.mirrorSection{
		width: 100%;
		background-color: #FFFAEF;
		position: relative;
	}

	.mirrorContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.mirrorImageContainer{
		width: 50%;
		height: 100%;
		position: relative;
	}

	.mirrorImage{
		background-image: url(../images/mirror.png);
		width: 100.212678936605317%;
		padding-top: 100.087934560327198%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 15%;
		margin-bottom: 15%;
		position: relative;
		pointer-events: none;
	}

	.EggOne{
		width: 7%;
		padding-top: 10.5%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 56%;
		left: 49%;
		rotate: 10deg;
		transition: top 400ms, left 400ms;
	}

	.EggOne:hover{
		top: 55%;
		left: 50%;
		transition: top 400ms, left 400ms;
	}

	.mirrorInfo{
		width: 48.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
		margin-top: 18%;
	}

	.mirorTitle{
		font-family: IntroRust;
		font-size: 5.5vw;
		color: #000;
		margin-bottom: 3.5%;
	}

	.mirrorBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.75vw;
		color: #000;
		width: 70%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.mirrorNext{
		display: none;
	}

	#swingSection{
		width: 100%;
		background-color: #93CC72;
		position: relative;
	}

	.swingContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.swingImage{
		background-image: url(../images/swingFinal.png);
		width: 55.433537832310838%;
		padding-top: 60.51840490797546%;
		background-size: 100%;
		margin-bottom: 7%;
		margin-left: -2%;
	}

	.EggTwo{
		width:5%;
		padding-top: 5%;
		background-image: url(../images/swingEgg.png);
		background-size: 100%;
		position: absolute;
		top: 42%;
		left: 12.4%;
		border: none;
		background-color: rgba(0, 0, 0, 0);
		transition: all 400ms;
	}

	.EggTwo:hover{
		width: 6%;
		padding-top: 6%;
		transition: all 400ms;
	}

	.swingInfo{
		width: 48.466257668711656%;
		height: 30%;
		margin-top: 22%;
	}

	.swingTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 46.012269938650307%;
		margin-bottom: 2.5%;
	}

	.swingBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.75vw;
		color: #000;
		width: 70%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
/*			background-color: yellow;*/
	}

	.swingNext{
		display: none;
	}

	#summerSection{
/*		width: 100vw;*/
		background-color: #DBF3FF;	
		position: relative;
		overflow: hidden;
	}

	.summerTitle{
		width: 100%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #FF5396;;
		padding-top: 23%;
		text-align: center;
	}

	.summerBlurb{
		width: 40.147239263803681%;
		padding-top: 3%;
		font-family: FuzzyBubblesRegular;
		font-size: 2vw;
		color: #FF5396;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 0%;
		padding-bottom: 20%;
		text-align: center;
	}

	.summerImageSun{
		background-image: url(../images/sun.png);
		background-size: 100%;
		width: 20%;
		padding-top: 20%;
		position: absolute;
		top: 10%;
		left: 7%;
	}

	.summerImageCloud{
		background-image: url(../images/cloud.png);
		background-size: 100%;
		width: 20%;
		padding-top: 20%;
		position: absolute;
		top: 17%;
		left: 6%;
		transform: rotateY(180deg);
		rotate: -5deg;
	}

	.summerImageCloud2{
		background-image: url(../images/cloud.png);
		background-size: 100%;
		width: 27%;
		padding-top: 27%;
		position: absolute;
		top: 3%;
		left: -8%;
		rotate: 2deg;
	}

	.summerImageCloud3{
		background-image: url(../images/cloud.png);
		background-size: 100%;
		width: 31%;
		padding-top: 31%;
		position: absolute;
		bottom: 0%;
		right: -3%;
		rotate: 2deg;
	}

	.summerImageBirds{
		background-image: url(../images/birds.png);
		background-size: 100%;
		width: 25%;
		padding-top: 25%;
		position: absolute;
		top: 5%;
		right: 5%;
	}

	#frozenTreatsSection{
		width: 100%;
		background-color: #FF5396;
		position: relative;
		overflow: hidden;
	}

	.frozenTreatsContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.frozenTreatsGrassImage{
		width: 100%;
		padding-top: 20%;
		background-image: url(../images/frozenTreatsGrass.png);
		background-size: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.EggThree{
		width:8%;
		padding-top: 12%;
		border-radius: 50%;
		background-color: #fff;
		border:.2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 86.5%;
		left: 50%;
		rotate: 15deg;
		transition: all 400ms;
	}

	.EggThree:hover{
		top: 86%;
		left: 51%;
		transition: all 400ms;
	}


	.frozenTreatsImageHolder{
		width: 50%;
		height: 100%;
		position: relative;
	}

	.frozenTreatsImage{
		background-image: url(../images/frozenTreats.png);
		width: 100%;
		padding-top: 138%;
		margin-top: 10%;
		background-size: 100%;
		margin-left: 3%;
		background-repeat: no-repeat;
		position: relative;
		pointer-events: none;
	}

	.frozenTreatsInfo{
		width: 48.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
		margin-top: 4%;
	}

	.infoHolder{
		width: 100%;
		height: 50%;
		margin-left: 9.677419354838709%;
	}

	.frozenTreatsTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 100%;
		margin-bottom: 5%;
		margin-top: 25%;
		margin-left: 0%;
	}

	.frozenTreatsBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.6vw;
		color: #fff;
		width: 60.877300613496933%;
		margin-left: 15.053763440860215%;
		margin-bottom: 5%;
/*			background-color: yellow;*/
	}

	.frozenTreatsNext{
		display: none;
	}

	#spaSection{
		width: 100%;
		background-color: #FFFAEF;
	}

	.spaContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.spaImageContainer{
		display: flex;
	}

	.spaImage{
		background-image: url(../images/spa.png);
		width: 50%;
		padding-top: 53%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: relative;
		margin-bottom: 5%;
		margin-top: 5%;
	}	

	.spaInfo{
		width: 48.466257668711656%;
		height: 60%;
		padding-left: 1.533742331288344%;
		margin-top: 14%;
	}

	.spaTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #E87AA5;
		width: 88.607594936708861%;
		margin-bottom: 5%;
	}

	.spaBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.75vw;
		color: #000;
		width: 70%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
	}

	.spaNext{
		display: none;
	}

	#winterSection{
		width: 100%;
		background-color: #5B8BCB;
		overflow: hidden;
		position: relative;
	}

	.winterBackgroundPattern{
		background-image: url(../images/winterPattern.png);
		position: absolute;
		top: 0;
		left: 0%;
		background-size: 100%;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.winterTitle{
		width: 100%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #fff;;
		text-align: center;
		padding-top: 20%;
		margin-bottom: 2%;
	}

	.winterBlurb{
		width: 40.147239263803681%;
		font-family: FuzzyBubblesRegular;
		font-size: 2.5vw;
		color: #fff;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 15%;
	}

	#musicSection{
		width: 100%;
		background-color: #82ADE6;
		position: relative;
	}

	.musicContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.musicImageSnow{
		width: 100%;
		padding-top: 20%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: url(../images/snow.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.musicImageHolder{
		width: 50%;
		height: 100%;
	}

	.musicImageChicken{
		background-image: url(../images/music.png);
		width: 105%;
		padding-top: 125%;
		background-size: 100%;
		margin-left: -5%;
		margin-top: 10%;
	}

	.musicInfo{
		width: 48.466257668711656%;
		margin-left: 1.533742331288344%;
		padding-top: 20%;
	}

	.musicTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #fff;
		width: 46.012269938650307%;
		margin-bottom: 2.5%;
	}

	.musicBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.75vw;
		color: #fff;
		width: 70%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
	}

	.musicNext{
		display: none;
	}

	#fallSection{
		width: 100%;
		background-color: #F4B449;
		position: relative;
		overflow: hidden;
	}

	.fallBackgroundPattern{
		background-image: url(../images/fallPattern.png);
		position: absolute;
		top: 0;
		left: -.5%;
		background-size: 100%;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.fallTitle{
		width: 100%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #000;
		text-align: center;
		z-index: 200;
		padding-top: 28%;
		padding-bottom: 25%;
		margin-top: -5%;
		margin-bottom: 0%;
	}

	#wormSection{
		width: 100%;
		background-color: #FFFAEF;
		position: relative;
	}

	.wormContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
	}

	.wormImage{
		background-image: url(../images/worm.png);
		width: 100%;
		padding-top: 53.1484375%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 5%;
		position: relative;
		pointer-events: none;
	}

	.EggFour{
		width: 3.5%;
		padding-top: 4.75%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 73.25%;
		left: 12%;
		rotate: 15deg;
		transition: top 400ms, left 400ms;
	}

	.EggFour:hover{
		top: 71.5%;
		left: 12%;
		transition: top 400ms, left 400ms;
	}

	.wormInfo{
		width: 48.466257668711656%;
		height: 40%;
		padding-left: 1.533742331288344%;
		position: absolute;
		top: 25%;
		left: 50%;
	}

	.wormTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 46.012269938650307%;
		margin-bottom: 2.5%;
	}

	.wormBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.75vw;
		color: #000;
		width: 70%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
	}

	.wormNext{
		display: none;
	}

	#pinataSection{
/*		width: 100vw;*/
		background-color: #BAE393;
		overflow: hidden;
		display: flex;
	}

	.pinataContainer{
		width: 95.5%;
		height: 100%;
		position: relative;
		margin-left: auto;
		margin-right: auto;
	}

	.pinataImage{
		background-image: url(../images/pinataTablet.png);
		width: 60%;
		padding-top: 60%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-left: 50%;
		margin-top: -54.5%;
		margin-bottom: 2%;
		position: relative;
		pointer-events: none;
	}

	.EggFive{
		width: 4%;
		padding-top: 6%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 33%;
		left: 63%;
		rotate: 12deg;
		transition: all 400ms;
	}

	.EggFive:hover{
		top: 32%;
		left: 63.25%;
		transition: all 400ms;
	}

	.pinataInfo{
		width: 48.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
		padding-bottom: 10%;
		margin-top: 5%;
		margin-left: 4.25%;
	}

	.pinataBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.75vw;
		color: #000;
		width: 70%;
		margin-left: 15.053763440860215%;
		margin-bottom: 5%;
	}

	.pinataNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #000;
		margin-left: 70%;
		text-decoration: none;
	}

	.pinataTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 100%;
		margin-bottom: 5%;
		padding-top: 25%;
		margin-left: 0%;
	}

	.footer{
		width: 100%;
		background-color: #F5639C;
	}

	.footerContainer{
		width: 87.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		display: flex;
	}

	.shareText{
		font-family: FuzzyBubblesRegular;
		font-size: 3vw;
		color: #FADC5B;
		width: 30%;
		padding-top: 5%;
		padding-bottom: 10%;
		margin-bottom: 0%;
	}

	span{
		font-family: IntroRust;
		font-size: 7vw;
	}

	.ShareButtons{
		width: 35%;
		height: 30%;
		margin-left: auto;
		position: relative;
		margin-top: 15%;
		right: 0;
	}

	.fa-facebook{
		background-image: url(../images/facebookIcon.png);
		background-size: 100%;
		width: 20%;
		padding-top: 20%;
		position: absolute;
		top: 0%;
		left: 0;
		filter: opacity(60%);
		transition: filter 400ms;
	}

	.fa-facebook:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}

	.fa-twitter{
		background-image: url(../images/twitterIcon.png);
		background-size: 100%;
		width: 21%;
		padding-top: 21%;
		position: absolute;
		top: 0%;
		left: 25%;
		transition: filter 400ms;
		filter: opacity(60%);
	}

	.fa-twitter:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}

	.fa-envelope{
		background-image: url(../images/mailIcon.png);
		background-size: 100%;
		width: 22%;
		padding-top: 22%;
		position: absolute;
		top: 0%;
		left: 54%;
		transition: filter 400ms;
		filter: opacity(60%);
	}

	.fa-envelope:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}


}







/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){
	.container{
		/*width:978px;*/
		width:95.5%;
	}

	nav{
		position: absolute;
		width: 30%;
		height: 100vh;
		top: 0;
		right: -30%;
		background-color: rgba(0,0,0,.25);
		background-color: hotpink;
		transition: right 1000ms;
	}

	nav a{
		display: block;
		line-height: 6vw;
		text-align: center;
		text-decoration: none;
		color: #fff;
		font-family: FuzzyBubblesRegular;
		font-size: 3vw;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
	}

	nav a:nth-of-type(1){
		margin-top: 30%;
	}

	nav a:hover{
		color: #000;
	}

.navButton{
		display: block;
		width: 3%;
		position: absolute;
		right: 2%;
		top: 30%;
		z-index: 10;
	}

	.lineTop{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		margin-bottom: 12%;
		border-radius: 10px;
	}

	.lineMiddle{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		margin-bottom: 12%;
		border-radius: 10px;
	}

	.lineBottom{
		width: 100%;
		padding-top: 11%;
		background-color: #000;
		border-radius: 10px;
	}

	.revealed{
		right:0;
		transition: right 500ms;
	}

	.completedBox{
		width: 70%;
		padding-top: 10%;
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 5%;
		background-color: hotpink;
		border-radius: 60px;
		position: fixed;
		top: 100%;
		left: 50%;
		margin-left: -35%;
		z-index: 500;
		display: none;
	}
	

	.Box{
		width: 70%;
		padding-top: 10%;
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 5%;
		background-color: #000;
		border-radius: 60px;
		position: fixed;
		top: 100%;
		left: 50%;
		margin-left: -35%;
		z-index: 300;
		display: none;
	}

	.boxMoveUp{
		animation: boxMoveUp 600ms;
		animation-delay: 250ms;
		animation-fill-mode: forwards;
	}

@keyframes boxMoveUp{
	0%{
		top: 100%;
	}

	100%{
		top: 18%;
	}
}

	.guide{
		width: 100%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.Box h1{
		font-family: IntroRust;
		font-size: 6vw;
		color: #fff;
		margin-top: -10%;
	}

	h2{
		font-size: 2.4vw;
	}

	.Box h2{
		font-family: FuzzyBubblesBold;
		color: #fff;
		margin-top: 2%;
	}

	.Box p{
		font-family: FuzzyBubblesRegular;
		font-size: 1.4vw;
		color: #fff;
		margin-top: 7%;
	}

	.Ex1{
		width: 7%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.Ex2{
		width: 7%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.Ex3{
		width: 7%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.Ex4{
		width: 7%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.Ex5{
		width: 7%;
		position: absolute;
		top: 0;
		right: 0;
	}

	.stick1{
		width: 10%;
		padding-top: 90%;
		rotate: -45deg;
		background-color: #fff;
		margin-left: auto;
		transition: background-color 300ms;
	}

	.stick2{
		width: 10%;
		padding-top: 90%;
		rotate: 45deg;
		background-color: #fff;
		margin-left: auto;
		margin-top: -90%;
		transition: background-color 300ms;
	}

	.ExHoverState{
		background-color: #F3B13D;
		transition: background-color 300ms;
	}

	.Nav{
		width: 100%;
		height: 5%;
	}

	.navFlexParent a:hover{
		color: hotpink;
	}

	.hamburgerHover{
		background-color: gray;
	}

	.homeButton{
		background-image: url(../images/eggWhite.png);
		width: 6%;
		padding-top: 8%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: -.5%;
		left: -.8%;
		z-index: 100;
	}

	.homeButton2{
		background-image: url(../images/coloredEgg.png);
		width: 6%;
		height: 10%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: -.5%;
		left: -.8%;
		z-index: 200;
		display: none;
		pointer-events: none;
		opacity: 50%;
	}


	.navFlexParent{
		position: fixed;
		width: 25%;
		height: 5%;
		display: flex;
		color: black;
		right: 0;
		z-index: 200;
	}

	.navFlexParent a{
		margin-right: 10%;
		text-decoration: none;
		font-family: FuzzyBubblesRegular;
		font-size: 1.2vw;
		color: #000;
		margin-left: auto;
		padding-top: 7%;
		z-index: 200;
	}

	#heroSection{
		width: 100%;
		height: 100vh;
		background-color: #EDFBFF;
		position: relative;
	}

	.heroSectionContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.heroText{
		position: absolute;
		bottom: 40%;
		left: 3%;
	}

	.smallTitle{
/*		padding-top: 9.157464212678936%;*/
		width: 55.214723926380368%;
		margin-left: 6.134969325153374%;
		font-family: FuzzyBubblesBold;
		font-size: 3vw;
		color: #000;
	}

	.largeTitle{
		width: 65.214723926380368%;
		margin-left: 6.134969325153374%;
		margin-bottom: 2.134969325153374%;
		font-family: FuzzyBubblesBold;
		font-size: 6vw;
		color: #000;
	}

	.subtitle{
		width: 55.214723926380368%;
		margin-left: 6.134969325153374%;
		font-family: FuzzyBubblesRegular;
		font-size: 1.75vw;
		color: #000;
		margin-bottom: 8%;
	}

	.grass{
		background-image: url(../images/greenGrass.png);
		width: 100%;
		height: 30%;
		background-size: cover;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.heroSectionImages{
		display: flex;
	}

	.chicks{
		background-image: url(../images/chicks_HP.png);
		width: 39.079754601226994%;
		padding-top: 15.779141104294479%;
		background-size: 100%;
		margin-right: 27.607361963190184%;
		z-index: 2;
		position: absolute;
		bottom: 5%;
		left: 2%;
	}

	.princess{
		background-image: url(../images/princess.png);
		width: 32.683026584867076%;
		padding-top: 44.930470347648262%;
		background-size: cover;
		z-index: 2;
		position: absolute;
		bottom: 3%;
		right: 5%;
	}

	
	.heroButton{
		display: block;

/*  		margin: 2.9296875% auto;*/
  		width: 6%;
  		padding-top: 4%;
  		/*border-top: 3px solid #000;
  		border-left: 3px solid #000;
  		rotate: 225deg;   
  		margin-left: -1.720703125%;*/

  		background-image: url(../images/arrowDown.png);
  		background-size: 100%;
  		background-repeat: no-repeat;
  		
  		position: absolute;
  		left: 50%;
  		bottom: 5%;
  		margin-left: -3%;
  		
  		z-index: 100;

  		animation: bob 2s;
  		animation-iteration-count: infinite;
    	animation-timing-function: ease-in-out;

	}

	@keyframes bob{
    from { 
    	transform: translate(0,  0px); 	
    	
    	}

    65%  { 
    	transform: translate(0px, 10px);
    	
    	}

    to   { 
    	transform: translate(0, 0px);
   
		}		
	}

	.star{
		background-image: url(../images/star.png);
		background-size: 100%;
		background-repeat: no-repeat;
		width: 3.5%;
		padding-top: 4.5%;
		position: absolute;
	}

	.star:nth-of-type(1){
		width: 2%;
		padding-top: 3%;
		top: 62%;
		left: 19%;
	}

	.star:nth-of-type(2){
		width: 4%;
		padding-top: 5%;
		top: 55%;
		left: 82%;
	}

	.star:nth-of-type(3){
		width: 4%;
		padding-top: 5%;
		top: 10%;
		left: 10%;
	}

	.star:nth-of-type(4){
		width: 3%;
		padding-top: 4%;
		top: 45%;
		left: 7%;
	}

	.star:nth-of-type(5){
		width: 2.75%;
		padding-top: 3.75%;
		top: 25%;
		left: 89%;
	}

	.dot{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 85%;
		left: 6%;
	}

	.dot2{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 22%;
		left: 6%;
	}

	.dot3{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 12%;
		left: 8%;
	}

	.dot4{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		top: 8%;
		left: 90%;
	}

	.dot5{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		right: 8%;
		bottom: 10%;
	}

	.dot6{
		width: .5%;
		padding-top: .5%;
		border-radius: 50%;
		background-color: #fff;
		position: absolute;
		right: 5%;
		bottom: 18%;
	}

	#FindTheEggsSection{
		width: 100%;
		background-color: #5B8BCB;
		position: relative;
	}

	.EggSectionContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

	.EggTitle{
		font-family: NoteworthyBold;
		font-size: 8vw;
		width: 100%;
		padding-top: 5%;
		text-align: center;
		color: #FDFAED;
		margin-bottom: 5.25%;
	}

	.EggSubtitle{
		font-family: FuzzyBubblesRegular;
		font-size: 2vw;
		width: 52.147239263803681%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		color: #FDFAED;
		margin-bottom: -15%;
	}

	.EggImageMobile{
		background-image: url(../images/eggsDesktop.png);
		background-size: 100%;
		width: 85.707638888888889%;
		padding-top: 45.025694444444444%;
		margin-left: auto;
		margin-right: auto;
		background-repeat: no-repeat;
	}

	#springSection{
		width: 100%;
		background-color: #EAF7E3;
	}

	.springImage{
		background-image: url(../images/springGrass.png);
		width: 100%;
		padding-top: 31.319444444444444%;
		background-size: 100%;
		background-repeat: no-repeat;
		z-index: 1;
	}

	.springContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
	}

	.springTitle{
		width: 100%;
		padding-top: 20%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #427648;
		text-align: center;
		z-index: 2;
		margin-bottom: -5%;
	}

	.mirrorSection{
		width: 100%;
		background-color: #FFFAEF;
	}

	.mirrorContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.mirrorImageContainer{
		width: 50%;
		height: 100%;
		position: relative;
	}

	.mirrorImage{
		background-image: url(../images/mirror.png);
		width: 100.212678936605317%;
		padding-top: 100.087934560327198%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: relative;
		top: 50%;
		left: 50%;
		margin-left: -50.10633946830265%;
		pointer-events: none;
		margin-bottom: 10%;
		margin-top: 10%;
	}

	.EggOne{
		width: 7%;
		padding-top: 10.5%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 55%;
		left: 48%;
		rotate: 10deg;
		transition: top 400ms, left 400ms;
	}

	.EggOne:hover{
		top: 54%;
		left: 49%;
		transition: top 400ms, left 400ms;
	}

	.mirrorInfo{
		width: 48.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
		position: absolute;
		top: 50%;
		left: 51%;
		margin-top: -10%;
	}

	.mirorTitle{
		font-family: IntroRust;
		font-size: 5.5vw;
		color: #000;
		margin-bottom: 3.5%;
	}

	.mirrorBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.2vw;
		color: #000;
		width: 60.877300613496933%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.mirrorNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #000;
		margin-left: 61.25%;
		text-decoration: none;
	}

	.mirrorNext:hover{
		color: #E43F80;
	}

	#swingSection{
		width: 100%;
		background-color: #93CC72;
		position: relative;
		overflow: hidden;
	}

	.swingContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
	}

	.swingImage{
		background-image: url(../images/swingFinal.png);
		width: 76.171165644171779%;
		padding-top: 57.664621676891616%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-bottom: 3%;
		pointer-events: none;
		position: relative;
		margin-left: 2%;
	}

	.EggTwo{
		width:2.1%;
		padding-top: 4%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 43.5%;
		left: 17.8%;
		rotate: -77deg;
		transition: all 400ms;
	}

	.EggTwo:hover{
		width: 2.5%;
		padding-top: 4.4%;
		transition: all 400ms;
	}

	.swingInfo{
		padding-top: 20%;
		width: 70%;
		position: relative;
	}
/*
	.Test{
		width: 100%;
		height: 2px;
		background-color: black;
		position: fixed;
		z-index: 700;
		bottom: 13%;
		left: 0%;
	}*/

	.swingTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 46.012269938650307%;
		margin-bottom: 2.5%;
	}

	.swingBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.3vw;
		color: #000;
		width: 60.377300613496933%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.swingNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #000;
		width: 39.877300613496933%;
		margin-left: 60%;
		text-decoration: none;
	}

	.swingNext:hover{
		color: #fff;
	}

	#summerSection{
/*		width: 100vw;*/
		background-color: #DBF3FF;	
		position: relative;
		overflow: hidden;
	}

	.summerTitle{
		width: 100%;
		padding-top: 20%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #FF5396;;
		text-align: center;
	}

	.summerBlurb{
		width: 40.147239263803681%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 2%;
		padding-bottom: 16%;
		font-family: FuzzyBubblesRegular;
		font-size: 2vw;
		color: #FF5396;;
		text-align: center;
	}

	.summerImageSun{
		background-image: url(../images/sun.png);
		background-size: 100%;
		width: 20%;
		padding-top: 20%;
		position: absolute;
		top: 10%;
		left: 7%;
	}

	.summerImageCloud{
		background-image: url(../images/cloud.png);
		background-size: 100%;
		width: 20%;
		padding-top: 20%;
		position: absolute;
		top: 17%;
		left: 6%;
		transform: rotateY(180deg);
		rotate: -5deg;
	}

	.summerImageCloud2{
		background-image: url(../images/cloud.png);
		background-size: 100%;
		width: 27%;
		padding-top: 27%;
		position: absolute;
		top: 3%;
		left: -8%;
		rotate: 2deg;
	}

	.summerImageCloud3{
		background-image: url(../images/cloud.png);
		background-size: 100%;
		width: 31%;
		padding-top: 31%;
		position: absolute;
		bottom: 0%;
		right: -3%;
		rotate: 2deg;
	}

	.summerImageBirds{
		background-image: url(../images/birds.png);
		background-size: 100%;
		width: 15%;
		padding-top: 15%;
		position: absolute;
		top: 8%;
		right: 8%;
	}

	#frozenTreatsSection{
		width: 100%;
		background-color: #FF5396;
		position: relative;
	}

	.frozenTreatsContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.frozenTreatsGrassImage{
		width: 100%;
		padding-top: 20%;
		background-image: url(../images/frozenTreatsGrass.png);
		background-size: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.frozenTreatsImageHolder{
		width: 50%;
		height: 100%;
	}

	.frozenTreatsImage{
		background-image: url(../images/frozenTreats.png);
		width: 80%;
		padding-top: 108%;
		margin-top: 10%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-left: 18%;
		position: relative;
		pointer-events: none;
	}


	.EggThree{
		width:2.5%;
		padding-top: 4%;
		border-radius: 50%;
		background-color: #fff;
		border:.2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 89%;
		left: 76%;
		rotate: 15deg;
		transition: all 400ms;
	}

	.EggThree:hover{
		left: 76.5%;
		transition: all 400ms;
	}


	.frozenTreatsInfo{
		width: 48.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
	}

	.infoHolder{
		width: 100%;
		height: 50%;
		margin-left: 9.677419354838709%;
	}

	.frozenTreatsTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 100%;
		margin-bottom: 5%;
		margin-top: 25%;
		margin-left: 0%;
	}

	.frozenTreatsBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.3vw;
		color: #fff;
		width: 66.577300613496933%;
		margin-left: 13.653763440860215%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.frozenTreatsNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #000;
		margin-left: 70%;
		text-decoration: none;
	}

	.frozenTreatsNext:hover{
		color: #fff;
	}

	#spaSection{
		width: 100%;
		background-color: #FFFAEF;
	}

	.spaContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.spaImageContainer{
		display: flex;
	}

	.spaImage{
		background-image: url(../images/spa.png);
		width: 47%;
		padding-top: 53%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 5%;
		margin-bottom: 3%;
		margin-left: 3.5%;
	}	

	.spaInfo{
		width: 48.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
		padding-top: 12%;
		margin-left: 1.25%;
	}

	.spaTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #E87AA5;
		width: 88.607594936708861%;
		margin-bottom: 5%;
	}

	.spaBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.35vw;
		color: #000;
		width: 60.393670886075949%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.spaNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #000;
		margin-left: 60.278481012658228%;
		text-decoration: none;
	}

	.spaNext:hover{
		color: #E87AA5;
	}

	#winterSection{
		width: 100%;
		background-color: #5B8BCB;
		overflow: hidden;
		position: relative;
	}

	.winterBackgroundPattern{
		background-image: url(../images/winterPattern.png);
		position: absolute;
		top: 0;
		left: 0%;
		background-size: 100%;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.winterTitle{
		width: 100%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #fff;;
		text-align: center;
		z-index: 200;
		margin-left: auto;
		margin-right: auto;
		padding-top: 18%;
	}

	.winterBlurb{
		width: 40.147239263803681%;
		font-family: FuzzyBubblesRegular;
		font-size: 2vw;
		color: #fff;
		text-align: center;
		z-index: 200;
		margin-left: auto;
		margin-right: auto;
		padding-top: 2%;
		padding-bottom: 18%;
	}

	#musicSection{
		width: 100%;
		background-color: #82ADE6;
		position: relative;
	}

	.musicContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
		position: relative;
	}

	.musicImageSnow{
		width: 100%;
		padding-top: 20%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-image: url(../images/snow.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.musicImageHolder{
		width: 50%;
		height: 100%;
	}

	.musicImageChicken{
		background-image: url(../images/music.png);
		width: 105%;
		padding-top: 125%;
		background-size: 100%;
		margin-top: 7%;
		margin-left: -5%;
	}

	.musicInfo{
		width: 48.466257668711656%;
		margin-left: 4%;
		padding-top: 15%;
	}

	.musicTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #fff;
		width: 46.012269938650307%;
		margin-bottom: 2.5%;
	}

	.musicBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.32vw;
		color: #fff;
		width: 59.493670886075949%;
		margin-left: 8.588957055214724%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.musicNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #fff;
		width: 39.877300613496933%;
		margin-left: 60.278481012658228%;
		text-decoration: none;
	}

	.musicNext:hover{
		color: #F9DD72;
	}

	#fallSection{
		width: 100%;
		background-color: #F4B449;
		position: relative;

	}

	.fallBackgroundPattern{
		background-image: url(../images/fallPattern.png);
		position: absolute;
		top: 0;
		left: -.75%;
		width: 100%;
		height: 100%;
		background-size: cover;
	}

	.fallTitle{
		width: 100%;
		font-family: IntroRust;
		font-size: 8vw;
		color: #000;
		text-align: center;
		z-index: 200;
		margin-left: auto;
		margin-right: auto;
		padding-top: 23%;
		padding-bottom: 23%;
		margin-bottom: 0%;
	}

	#wormSection{
		width: 100%;
		background-color: #FFFAEF;
		position: relative;
	}

	.wormContainer{
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
	}

	.wormImage{
		background-image: url(../images/worm.png);
		width: 100%;
		padding-top: 53.1484375%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0%;
		bottom: 0%;
		pointer-events: none;
		z-index: 2;
	}

	.EggFour{
		width:3%;
		padding-top: 4%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 75.5%;
		left: 15.3%;
		rotate: 15deg;
		transition: all 400ms;
		z-index: 1;
	}

	.EggFour:hover{
		top: 74%;
		left: 15.6%;
		transition: all 400ms;
	}

	.wormInfo{
		width: 48.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
		margin-top: 20%;
		margin-left: 50%;
		margin-bottom: 19%;
	}

	.wormTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 46.012269938650307%;
		margin-bottom: 2.5%;
		margin-left: 2.5%;
	}

	.wormBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.3vw;
		color: #000;
		width: 60.493670886075949%;
		margin-left: 10.888957055214724%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.wormNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #000;
		width: 39.877300613496933%;
		margin-left: 63.278481012658228%;
		text-decoration: none;
	}

	.wormNext:hover{
		color: #E43F80;
	}


	#pinataSection{
/*		width: 100vw;*/
		overflow: hidden;
		background-color: #BAE393;
		position: relative;
	}

	.pinataContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
	}

	.eggPinataHolder{
		width: 100%;
	}

	.pinataImage{
		background-image: url(../images/pinataDesktop.png);
		width: 88.085889570552147%;
		padding-top: 98.208588957055215%;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-left: 20%;
		pointer-events: none;
		position: relative;
	}

	.pinataChicksImage{
		background-image: url(../images/chicks_pinata.png);
		width: 27.627811860940695%;
		padding-top: 19.243353783231084%;
		background-size: 100%;
		background-repeat: no-repeat;
		position: absolute;
		bottom: 6%;
		left: 10%;
	}

	.EggFive{
		width:3%;
		padding-top: 4%;
		border-radius: 50%;
		background-color: #fff;
		border: .2%;
		border-style: solid;
		border-color: #000;
		position: absolute;
		top: 37.5%;
		left: 63.5%;
		rotate: 15deg;
		transition: all 400ms;	
	}

	.EggFive:hover{
		top: 36%;
		left: 64%;
		transition: all 400ms;
	}

	.pinataInfo{
		width: 57.466257668711656%;
		height: 30%;
		padding-left: 1.533742331288344%;
		margin-left: 6%;
	}


	.pinataBlurb{
		font-family: FuzzyBubblesRegular;
		font-size: 1.3vw;
		color: #000;
		width: 93.877300613496933%;
		margin-left: 15.053763440860215%;
		margin-bottom: 5%;
/*		background-color: yellow;*/
	}

	.pinataNext{
		font-family: FuzzyBubblesBold;
		font-size: 1.5vw;
		color: #000;
		margin-left: 70%;
		text-decoration: none;
	}

	.pinataTitle{
		font-family: IntroRust;
		font-size: 5vw;
		color: #000;
		width: 100%;
		margin-bottom: 5%;
		margin-top: 35%;
		margin-left: 0%;
	}

	.footer{
		width: 100%;
	
		background-color: #F5639C;
	}

	.footerContainer{
		width: 95.5%;
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: flex;
	}

	.shareText{
		font-family: FuzzyBubblesRegular;
		font-size: 3vw;
		color: #FADC5B;
		width: 30%;
		margin-top: 5%;
		margin-left: 5%;
		margin-bottom: 8%;
	}

	.ShareButtons{
		width: 35%;
		height: 30%;
		margin-left: auto;
		position: relative;
		margin-top: 15%;
		right: 0;
	}

	.fa-facebook{
		background-image: url(../images/facebookIcon.png);
		background-size: 100%;
		width: 15%;
		padding-top: 15%;
		position: absolute;
		top: 10%;
		left: 0;
		filter: opacity(60%);
		transition: filter 400ms;
	}

	.fa-facebook:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}

	.fa-twitter{
		background-image: url(../images/twitterIcon.png);
		background-size: 100%;
		width: 16%;
		padding-top: 16%;
		position: absolute;
		top: 10%;
		left: 20%;
		transition: filter 400ms;
		filter: opacity(60%);
	}

	.fa-twitter:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}

	.fa-envelope{
		background-image: url(../images/mailIcon.png);
		background-size: 100%;
		width: 16%;
		padding-top: 16%;
		position: absolute;
		top: 10%;
		left: 44%;
		transition: filter 400ms;
		filter: opacity(60%);
	}

	.fa-envelope:hover{
		filter: opacity(100%);
		transition: filter 300ms;
	}

	.lineHelpFooter{
		position: fixed;
		bottom: 30%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: black;
	}

	.lineHelpFooter2{
		position: fixed;
		bottom: 20.5%;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: black;
	}


	span{
		font-family: IntroRust;
		font-size: 7vw;
	}



		
}