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

@font-face{
	font-family: "owners-xnarrow", sans-serif;
	font-style: normal;
	font-weight: 900;
}

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

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

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

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

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

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


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

	#homeBolt{
		width: 40%;
		margin-top: -10%;
	}

	#homeBolt:hover .homeBolt-5{
		stroke: #28BDE6;
		stroke-width: 5px;
	}

	nav{
		position: fixed;
		top: 2.5%;
		left: 50%;
		margin-left: -41.388888888888889%;
		width: 82.777777777777778%;
		height: 5.5vh;
		background-color: #000;
		border-radius: 50px;
		border-style: solid;
		border-color: #fff;
		border-width: 1.25px;
		z-index: 7;
	}

	.navButtonsContainer{
		display: flex;
 		position: relative;
	}

	nav ul li{
		flex: 1;
  	display: flex;
  	text-align: center;
  	border-radius: 50px;
		transition: background-color 500ms;	
		margin-top: .5vh;
		margin-bottom: .5vh;
		margin-left: .5vh;
		margin-right: .5vh;
	}

	#workButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	#aboutButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	nav a{
		font-size: 1.75em;
		flex: 1;
  	justify-content: center;
  	color: #ffffff;
  	text-decoration: none;
  	position: relative;
  	line-height: 4.5vh;
		font-family: owners-black;
	}

	#Home{
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;

		z-index: 1;
	}

	#landingPage{
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(#000, #000);
		top: 0;
		left: 0;
		position: fixed;
		z-index: 2;
	}

	.mobileClouds{
		background-image: url(../images/mobileClouds.png);
		width: 100%;
		position: absolute;
		top: -20vh;
		left: 0;
		height: 20vh;
/*		padding-top: 30%;*/
		background-size: cover;
		background-position: top;
		pointer-events: none;
		z-index: 4;
	}

#landingPageContainer{
		width: 87.5%;
		height: 100vh;
		position: fixed;
		top: 50%;
		left: 50%;
		height: 40vh;
		margin-top: -20vh;
		margin-left: -43.75%;
		z-index: 3;
}

#landingPageContainer li{
		color: #fff;
		text-align: center;
	}

	.helloThereIm{
		font-size: 8vw;
		font-family: owners-black;
	}

	.faithPetrina{
		font-size: 17vw;
		font-family: owners-black;
		margin-bottom: 5%;
	}

	.aBrainstormer{
		font-family: book;
		color: #fff;
		text-align: center;
		font-size: 4vw;
		line-height: 1.3em;
		width: 72.142857142857143%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10%;
	}

	.overarchingContainer{
		width: 100%;
		height: 100vh;
		position: relative;
		top: z;
		left: 0;
		z-index: 3;
	}

	#myWorkButton{
		text-decoration: none;

		padding-top: .5%;
		padding-bottom: .5%;
		padding-right: 1%;
		padding-left: 1%;
		text-align: center;

		width: 34%;
		position: absolute;
		left: 50%;
		margin-left: -20%;
		
		font-family: owners-black;
		font-size: 6vw;
		color: #fff;

		border-radius: 35px;
		border: solid #fff 2px;
		transition: box-shadow 300ms;
		padding: 10px;
		z-index: 5;
	}


	#myWorkButton:hover{
		box-shadow: 0px 0px 25px #28BDE6;
		padding: 10px;
		transition: box-shadow 300ms;
	}

#MyWork{
/*	background-color: blue;*/
	width: 100%;
	height: 40vh;
	top: 0vh;
	left: 0;
	position: relative;
	z-index: 6;
	}

#myWork{
	font-family: owners-black;
	font-size: 18vw;
	text-align: center;
	line-height: 40vh;
	}

	#whiteBackground{
		width: 100%;
		position: relative;
		background-color: #fff;

		z-index: 6;
	}

#cloudLeft{
	width: 18%;
	position: absolute;
	bottom: 25%;
	left: 5%;
	}

#cloudRight{
	width: 18%;
	position: absolute;
	bottom: 27%;
	right: 10%;
	}


#bolt-One{
		display: none;
	}
	.st0{fill:url(#SVGID_1_);}
  .st1{fill:url(#SVGID_00000109723973560500918480000013872567170945512605_);}
  .st2{fill:url(#SVGID_00000120518185202922120420000016441919966393791669_);}
  .st3{fill:url(#SVGID_00000003088547733936303770000013790162906112365219_);}


/*#bolt-Two{
		position: absolute;
		top: 18%;
		right: 3%;
		width: 25%;
		animation: bob 6s infinite ease;
		rotate: -30deg;
	}

#bolt-Three{
		position: absolute;
		top: 17%;
		left: 2%;
		width: 25%;
		animation: bob 6s infinite ease;
		rotate: 100deg;
}*/

#bolt-Two{
		display: none;
	}

	#bolt-Three{
		display: none;
	}

#bolt-Four{
	display: none;
}

#bolt-Five{
	display: none;
}

#bolt-Six{
	display: none;
}

#bolt-Seven{
	display: none;
}

#gradientLine{
	display: none;
}

.star:hover{
	rotate: 360deg;
	transition: all 300ms;
}

.starOne{
	display: none;
}

.starTwo{
	display: none;
}

.starTwo:hover{
	rotate: 375deg;
	transition: all 300ms;
}

.starThree{
	display: none;
}

#cloudMobile{
		display: none;
	}

.project{
		position: relative;
		background-color: #fff;
		width: 87.5%;
		z-index: 3;
	}

.leftSide{
		width: 72.142857142857143%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		margin-top: 25%;
	}

.rightSide{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		width: 77.5;
		padding-top: 77.5%;
		margin-bottom: 15%;
	}

	.Zero .rightSide{
		background-image: url(../images/attuneMockup.png);
	}

.One .rightSide{
		background-image: url(../images/raisingRoyaltyMockup.png);
	}

.Two .rightSide{
	margin-top: 8%;
		background-image: url(../images/birdsOfSouthAmerica.png);
	}

.Three .rightSide{
		margin-top: 8%;
		background-image: url(../images/monsterCityKitties.png);
		margin-bottom: 40%;
	}

.number{
		display: none;
	}

.title{
		font-family: owners-black;
		font-size: 4em;
		color: #000;
		margin-bottom: 10%;	
	}

.blurb{
		font-family: book;
		font-size: 1.2em;
		line-height: 1.3em;
		color: #000;
		margin-bottom: 10%;
	}

.details {
	width: 100%;
	font-family: owners-black;
	font-size: 7vw;
	color: #000;
	text-decoration: none;
}

.lineHolder{
	width: 20%;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -10%;
}

.line{
	width: 0%;
	padding-top: 5%;
	background-image: linear-gradient(to right,#00BAFF, #D5FF21, #F036BE );
	transition: width 350ms;
}

.lineDraw{
	width: 100%;
	transition: width 200ms;
}

.footer{
	width: 100%;
	padding-top: 55%;
	position: relative;
	background-color: #fff;
	z-index: 3;
}

#footerClouds{
	position: absolute;
	top: -28%;
	left: 0;
}

.footerContent{
	width: 100%;
	position: absolute;
	top: 30%;
	left: 0%;
}

.footerHeader{
	font-family: owners-black;
	font-size: 7.5vw;
	margin-bottom: 4%;
	text-align: center;
}

.copywright{
	font-family: owners-bold;
	font-size: 4vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24%;
	display: flex;
	width: 36%;
	padding-left: 2%;
}

.copywrightSymbol{
	font-family: bold;
	padding-top: 2%;
	padding-right: 1%;
	color: #000;
}

.gmail{
	width: 20%;
	position: absolute;
	left: 50%;
	margin-left: -10%;
}

.mailShareButton{
	display: flex;
	}

.mailShareButton:hover{
		color: #C153B1;
	}

	#envelope{
		width: 100%;
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
		animation: bobMail 1.7s infinite ease-in-out;
	}

	#envelope:hover .mail-2{
		fill: #C153B1;
		transition: fill 300ms;
	}

	@keyframes bobMail{
		0%{
			margin-top: 5%;
		}

		50%{
			margin-top: 14%;
		}

		100%{
			margin-top: 5%;
		}
	}


}


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

	#cloudMobile{
		display: none;
	}

	#homeBolt{
		width: 23%;
		margin-top: -5%;
	}

	#homeBolt:hover .homeBolt-5{
		stroke: #28BDE6;
		stroke-width: 5px;
	}

	nav{
		position: fixed;
		top: 2.5%;
		left: 50%;
		margin-left: -41.388888888888889%;
		width: 82.777777777777778%;
		height: 5.5vh;
		background-color: #000;
		border-radius: 50px;
		border-style: solid;
		border-color: #fff;
		border-width: 1.25px;
		z-index: 7;
	}

	.navButtonsContainer{
		display: flex;
 		position: relative;
	}

	nav ul li{
		flex: 1;
  	display: flex;
  	text-align: center;
  	border-radius: 50px;
		transition: background-color 500ms;	
		margin-top: .5vh;
		margin-bottom: .5vh;
		margin-left: .5vh;
		margin-right: .5vh;
	}

	#workButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	#aboutButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	nav a{
		font-size: 1.75em;
		flex: 1;
  	justify-content: center;
  	color: #ffffff;
  	text-decoration: none;
  	position: relative;
  	line-height: 4.5vh;
		font-family: owners-black;
	}






#Home{
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;

		z-index: 1;
	}

	#landingPage{
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(#000, #000);
		top: 0;
		left: 0;
		position: fixed;
		z-index: 2;
	}

.mobileClouds{
		display: none;
	}

#landingPageContainer{
		width: 93.75%;
		height: 40vh;
		position: fixed;	
		top: 50%;
		left: 50%;
		margin-left: -46.875%;
		margin-top: -25vh;
		z-index: 3;
	}

.cloudsLandingPage{
		background-image: url(../images/cloudsLandingPage.png);
		width: 100%;
		height: 20vh;
		background-size: cover;
		background-position: top;
		position: absolute;
		top: -20vh;
		left: 0;
		z-index: 4;
		pointer-events: none;
	}

		#myWorkButton{
		text-decoration: none;

		padding-top: .5%;
		padding-bottom: .5%;
		padding-right: 1%;
		padding-left: 1%;
		text-align: center;

		width: 22%;
		position: absolute;
		left: 50%;
		margin-left: -13%;
		
		font-family: owners-black;
		font-size: 4vw;
		color: #fff;

		border-radius: 35px;
		border: solid #fff 2px;
		transition: box-shadow 300ms;
		padding: 10px;
		z-index: 5;
	}


	#myWorkButton:hover{
		box-shadow: 0px 0px 25px #28BDE6;
		padding: 10px;
		transition: box-shadow 300ms;
	}

#MyWork{
	background-color: #fff;
	width: 100%;
	height: 80vh;
	position: relative;
	scroll-snap-align: start;
	}

#myWork{
	font-family: owners-black;
	font-size: 10em;
	text-align: center;
	line-height: 75vh;
	}

#cloudLeft{
	width: 18%;
	position: absolute;
	bottom: 30%;
	left: 10%;
	}

#cloudRight{
		position: absolute;
		bottom: 30%;
		right: 11%;
		width: 19%;
		rotate: 5deg;
		}

	#whiteBackground{
		width: 100%;
		position: relative;
		background-color: #fff;

		z-index: 6;
	}

	.helloThereIm{
		font-size: 5vw;
		font-family: owners-black;
		color: #fff;
		text-align: center;
	}

	.faithPetrina{
		font-size: 15vw;
		font-family: owners-black;
		padding-bottom: 2%;
			color: #fff;
		text-align: center;
	}

	.aBrainstormer{
		font-family: book;
		color: #fff;
		text-align: center;
		font-size: 2vw;
		line-height: 2.5vw;
		width: 54.601226993865031%;
		margin-left: 22.699386503067485%;
		margin-bottom: 4%;
			color: #fff;
		text-align: center;
	}



#bolt-One{
		position: absolute;
		top: 7%;
		left: 4%;
		width: 15%;
		animation: bobBoltOne 6s infinite ease;
	
	}
	.st0{fill:url(#SVGID_1_);}
  .st1{fill:url(#SVGID_00000109723973560500918480000013872567170945512605_);}
  .st2{fill:url(#SVGID_00000120518185202922120420000016441919966393791669_);}
  .st3{fill:url(#SVGID_00000003088547733936303770000013790162906112365219_);}

@keyframes bobBoltOne{
	0%{
		top: 7%;
		left: 4%;
	}

	50%{
		top: 8%;
		left: 6%;
	}

	100%{
		top: 7%;
		left: 4%;
	}
}


#bolt-Two{
	position: absolute;
	top: 38%;
	left: 2%;
	width: 16%;
	animation: bob2 4s infinite ease;
	animation-delay: 200ms;
}
  .st4{fill:url(#gradient4_00000087383626191808444990000017609482410858689968_);}
  .st5{fill:url(#gradient3_00000120536915661343762390000014395773170561335981_);}
  .st6{fill:url(#gradient2_00000088122912329992885730000017552381547289351871_);}
  .st7{fill:url(#gradient1_00000004512335537231320280000003741936396430800025_);}

@keyframes bob2{
	0%{
		top: 38%;
		left: 2%;
	}

	50%{
		top: 38%;
		left: 4%;
	}

	100%{
		top: 38%;
		left: 2%;
	}
}

#bolt-Three{
	position: absolute;
	bottom: 13%;
	right: 4%;
	width: 23%;
	animation: bob3 4s infinite ease;
	animation-delay: 200ms;
	z-index: 2;
}
	.st8{fill:url(#gradient8_00000148660155311940599440000004326022327729118859_);}
  .st9{fill:url(#gradient7_00000077320990144194716440000001521748617123865272_);}
  .st10{fill:url(#gradient6_00000008856748342779377720000013335014285523164823_);}
  .st11{fill:url(#gradient5_00000178885329298700857960000004998148743934137236_);}

@keyframes bob3{
	0%{
		bottom: 13%;
		right: 4%;
	}

	50%{
		bottom: 15%;
		right: 3%;
	}

	100%{
		bottom: 13%;
		right: 4%;
	}
}


#bolt-Four{
	position: absolute;
	top: 7%;
	right: 15%;
	width: 10%;
	animation: bob4 4s infinite ease;
	animation-delay: 200ms;
	rotate: 3deg;
}
    .st12{fill:url(#SVGID_00000076590012526079203440000012034228690708598926_);}
    .st13{fill:url(#SVGID_00000134224881713189271080000001734478621516140444_);}
    .st14{fill:url(#SVGID_00000081631569467157216980000009924484014766456196_);}
    .st15{fill:url(#SVGID_00000076601909884539393020000011983084253471319937_);}
    .st16{fill:url(#SVGID_00000081643663011665177080000000227366304024031625_);}

@keyframes bob4{
	0%{
		top: 7%;
		right: 15%;
	}

	50%{
		top: 8%;
		right: 16%;
	}

	100%{
		top: 7%;
		right: 15%;
	}
}


#bolt-Five{
	position: absolute;
	top: 25%;
	left: 2%;
	width: 10%;
	animation: bob5 4s infinite ease;
	animation-delay: 200ms;
	rotate: 3deg;
	fill: #fff;
	rotate: -14deg;

	display: none;
}


@keyframes bob5{
	0%{
		top: 25%;
		left: 2%;
	}

	50%{
		top: 25%;
		left: 3%;
	}

	100%{
		top: 25%;
		left: 2%;
	}
}

#bolt-Six{
	position: absolute;
	top: 11%;
	right: 4%;
	width: 15%;
	animation: bob6 4s infinite ease;
	rotate: 270deg;
}


@keyframes bob6{
	0%{
		top: 11%;
		right: 4%;
	}

	50%{
		top: 15%;
		right: 5%;
	}

	100%{
		top: 11%;
		right: 4%;
	}
}

#bolt-Seven{
	position: absolute;
	bottom: 18%;
	left: 15%;
	width: 13%;
	animation: bob7 4.2s infinite ease;
	rotate: 280deg;
	z-index: 2;
}

@keyframes bob7{
	0%{
	bottom: 18%;
	left: 15%;
	}

	50%{
	bottom: 19%;
	left: 16%;
	}

	100%{
	bottom: 18%;
	left: 15%;
	}
}

.star:hover{
	rotate: 360deg;
	transition: all 300ms;
}

.starOne{
	width: 2%;
	position: absolute;
	top: 14%;
	left: 19%;
	fill: #fff;
}

.starTwo{
	width: 3%;
	position: absolute;
	top: 42%;
	right: 11%;
	rotate: 15deg;
	fill: #fff;
}

.starTwo:hover{
	rotate: 375deg;
	transition: all 300ms;
}

.starThree{
	width: 1.5%;
	position: absolute;
	top: 40%;
	right: 15%;
	fill: #fff;
}

.starFive{
	width: 2.5%;
	position: absolute;
	top: 67%;
	left: 7%;
	fill: #fff;
}

.starSix{
	width: 1.2%;
	position: absolute;
	top: 62%;
	left: 16%;
	fill: #fff;
	rotate: 20deg;
}

#gradientLine{
	display: none;
	 /*position: absolute;
	 bottom: 25%;
	 left: 3%;
	 width: 13%;*/
}

.project{
		position: relative;
		background-color: #fff;
		width: 93.75%;
	}

.leftSide{
		width: 51.666666666666667%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
	}

.rightSide{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		width: 77.5;
		padding-top: 77.5%;
		margin-bottom: 15%;
	}

	.Zero .rightSide{
		background-image: url(../images/attuneMockup.png);
	}

.One .rightSide{
		background-image: url(../images/raisingRoyaltyMockup.png);
	}

.Two .rightSide{
	margin-top: 8%;
		background-image: url(../images/birdsOfSouthAmerica.png);
	}

.Three .rightSide{
		margin-top: 8%;
		background-image: url(../images/monsterCityKitties.png);
	}

/*.number{
		display: none;
	}*/

.title{
		font-family: owners-black;
		font-size: 4em;
		color: #000;
		margin-bottom: 5%;
	}

.blurb{
		font-family: book;
		font-size: 1.2em;
		line-height: 1.3em;
		color: #000;
		margin-bottom: 10%;
	}

.details {
	width: 100%;
	font-family: owners-black;
	font-size: 4vw;
	color: #000;
	text-decoration: none;
}

.lineHolder{
	width: 20%;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -10%;
}

.line{
	width: 0%;
	padding-top: 5%;
	background-image: linear-gradient(to right,#00BAFF, #D5FF21, #F036BE );
	transition: width 350ms;
}

.lineDraw{
	width: 100%;
	transition: width 200ms;
}


.footer{
	width: 100%;
	padding-top: 30%;
	position: relative;
	background-color: #fff;
}

#footerClouds{
	position: absolute;
	top: -48%;
	left: 0;
}

.footerContent{
	width: 100%;
	position: absolute;
	top: 25%;
	left: 0%;

}

.footerHeader{
	font-family: owners-black;
	font-size: 5vw;
	margin-bottom: 4%;
	text-align: center;
}

.email{
	font-family: owners-black;
	font-size: 3vw;
	margin-bottom: 6%;
	text-align: center;
}

.copywright{
	font-family: owners-bold;
	font-size: 2vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 14%;
	display: flex;
	width: 16%;
}

.copywrightSymbol{
	font-family: bold;
	padding-top: 2%;
	padding-right: 1%;
}

.gmail{
	width: 10%;
	position: absolute;
	left: 50%;
	margin-left: -5%;
}

.mailShareButton{
	display: flex;
	}

	.mailShareButton:hover{
		color: #C153B1;
	}

	#envelope{
		width: 100%;
		margin-top: 3%;
		margin-left: auto;
		margin-right: auto;
		animation: bobMail 1.7s infinite ease-in-out;
	}

	#envelope:hover .mail-2{
		fill: #C153B1;
		transition: fill 300ms;
	}

	@keyframes bobMail{
		0%{
			margin-top: 3%;
		}

		50%{
			margin-top: 12%;
		}

		100%{
			margin-top: 3%;
		}
	}



}




/* DESKTOP STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width: 1025px){

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

	.bolt-Six{
		display: none;
	}

	#cloudMobile{
		display: none;
	}

	span{
		display: none;
	}





	#homeBolt{
		width: 33%;
		margin-top: -10%;
	}

	#homeBolt:hover .homeBolt-5{
		stroke: #28BDE6;
		stroke-width: 5px;
	}

	nav{
		position: fixed;
		top: 2.5%;
		left: 50%;
		margin-left: -20.729166666666667%;
		width: 41.458333333333333%;
		height: 5.5vh;
		background-color: #000;
		border-radius: 50px;
		border-style: solid;
		border-color: #fff;
		border-width: 1px;
		z-index: 7;
	}

	.navButtonsContainer{
		display: flex;
 		position: relative;
	}

	nav ul li{
		flex: 1;
  	display: flex;
  	text-align: center;
  	border-radius: 50px;
		transition: text-shadow 500ms;	
		margin-top: .5vh;
		margin-bottom: .5vh;
		margin-left: .5vh;
		margin-right: .5vh;
	}

	#workButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	#aboutButton:hover{
		text-shadow: 0 0 20px #28BDE6, 0 0 40px #28BDE6, 0 0 50px #28BDE6, 0 0 60px #28BDE6;
		border-radius: 50px;
		transition: text-shadow 500ms;	
	}

	nav a{
		font-size: 1.75em;
		flex: 1;
  	justify-content: center;
  	color: #ffffff;
  	text-decoration: none;
  	position: relative;
  	line-height: 4.5vh;
		font-family: owners-black;
	}

	nav a:nth-of-type(2){
		position: absolute;
	}

#Home{
		width: 100%;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;

		z-index: 1;
	}

	.mobileClouds{
		display: none;
	}

	#whiteBackground{
		width: 100%;
		position: relative;
		background-color: #fff;

		z-index: 6;
	}

	#landingPage{
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(#000, #000);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}

	#landingPageContainer{
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -47.75%;
		margin-top: -28vh;
		width: 95.5%;
		z-index: 3;
		height: 50vh;
	}

	#myWorkButton{
		text-decoration: none;

		padding-top: .5%;
		padding-bottom: .5%;
		padding-right: 1%;
		padding-left: 1%;
		text-align: center;

		width: 14%;
		position: absolute;
		left: 50%;
		margin-left: -8%;
		
		font-family: owners-black;
		font-size: 2.5vw;
		color: #fff;

		border-radius: 35px;
		border: solid #fff 2px;
		transition: box-shadow 300ms;
		padding: 10px;
		z-index: 5;
	}


	#myWorkButton:hover{
		box-shadow: 0px 0px 25px #28BDE6;
		padding: 10px;
		transition: box-shadow 300ms;
	}

	.cloudsLandingPage{
		background-image: url(../images/cloudsLandingPage.png);
		width: 100%;
		height: 30vh;
		background-size: cover;
		background-position: top;
		position: absolute;
		top: -30vh;
		left: 0;
		z-index: 4;
		pointer-events: none;
	}

	#MyWork{
		background-color: #fff;
		width: 100%;
		height: 80vh;
		position: relative;
	}

	#myWork{
		font-family: owners-black;
		font-size: 10em;
		text-align: center;
		line-height: 100vh;
	}

	#cloudLeft{
		width: 12%;
		position: absolute;
		bottom: 12%;
		left: 18%;
	}

	#cloudRight{
		position: absolute;
		bottom: 15%;
		right: 17%;
		width: 12%;
		rotate: 5deg;
		}

	.helloThereIm{
		font-size: 4.25vw;
		font-family: owners-black;
		color: #fff;
		text-align: center;
	}

	.faithPetrina{
		font-size: 11vw;
		font-family: owners-black;
		padding-bottom: 1.5%;
		color: #fff;
		text-align: center;
	}

	.aBrainstormer{
		font-family: book;
		color: #fff;
		text-align: center;
		font-size: 1.5vw;
		line-height: 2vw;
		width: 48.601226993865031%;
		margin-left: 25.699386503067485%;
		margin-bottom: 4%;
	}


	#bolt-One{
		position: absolute;
		top: 7%;
		left: 4%;
		width: 15%;
		animation: bobBoltOne 6s infinite linear;
		z-index: 2;
	
	}
	.st0{fill:url(#SVGID_1_);}
  .st1{fill:url(#SVGID_00000109723973560500918480000013872567170945512605_);}
  .st2{fill:url(#SVGID_00000120518185202922120420000016441919966393791669_);}
  .st3{fill:url(#SVGID_00000003088547733936303770000013790162906112365219_);}

@keyframes bobBoltOne{
	0%{
		top: 7%;
		left: 4%;
	}

	50%{
		top: 8%;
		left: 6%;
	}

	100%{
		top: 7%;
		left: 4%;
	}
}


#bolt-Two{
	position: absolute;
	top: 38%;
	left: 2%;
	width: 16%;
	animation: bob2 4s infinite linear;
	animation-delay: 200ms;
	z-index: 2;
}
  .st4{fill:url(#gradient4_00000087383626191808444990000017609482410858689968_);}
  .st5{fill:url(#gradient3_00000120536915661343762390000014395773170561335981_);}
  .st6{fill:url(#gradient2_00000088122912329992885730000017552381547289351871_);}
  .st7{fill:url(#gradient1_00000004512335537231320280000003741936396430800025_);}

@keyframes bob2{
	0%{
		top: 38%;
		left: 2%;
	}

	50%{
		top: 38%;
		left: 4%;
	}

	100%{
		top: 38%;
		left: 2%;
	}
}

#bolt-Three{
	position: absolute;
	bottom: 13%;
	right: 4%;
	width: 20%;
	animation: bob3 4s infinite ease;
	animation-delay: 200ms;
	z-index: 2;
}
	.st8{fill:url(#gradient8_00000148660155311940599440000004326022327729118859_);}
  .st9{fill:url(#gradient7_00000077320990144194716440000001521748617123865272_);}
  .st10{fill:url(#gradient6_00000008856748342779377720000013335014285523164823_);}
  .st11{fill:url(#gradient5_00000178885329298700857960000004998148743934137236_);}

@keyframes bob3{
	0%{
		bottom: 13%;
		right: 4%;
	}

	50%{
		bottom: 15%;
		right: 3%;
	}

	100%{
		bottom: 13%;
		right: 4%;
	}
}

#bolt-Four{
	position: absolute;
	top: 7%;
	right: 15%;
	width: 10%;
	animation: bob4 4s infinite ease;
	animation-delay: 200ms;
	rotate: 3deg;
	z-index: 2;
}
    .st12{fill:url(#SVGID_00000076590012526079203440000012034228690708598926_);}
    .st13{fill:url(#SVGID_00000134224881713189271080000001734478621516140444_);}
    .st14{fill:url(#SVGID_00000081631569467157216980000009924484014766456196_);}
    .st15{fill:url(#SVGID_00000076601909884539393020000011983084253471319937_);}
    .st16{fill:url(#SVGID_00000081643663011665177080000000227366304024031625_);}

@keyframes bob4{
	0%{
		top: 7%;
		right: 15%;
	}

	50%{
		top: 8%;
		right: 16%;
	}

	100%{
		top: 7%;
		right: 15%;
	}
}

#bolt-Five{
	position: absolute;
	top: 25%;
	left: 2%;
	width: 10%;
	animation: bob5 4s infinite ease;
	animation-delay: 200ms;
	rotate: 3deg;
	fill: #fff;
	rotate: -14deg;
	z-index: 2;
}

@keyframes bob5{
	0%{
		top: 25%;
		left: 2%;
	}

	50%{
		top: 25%;
		left: 3%;
	}

	100%{
		top: 25%;
		left: 2%;
	}
}

#bolt-Six{
	position: absolute;
	top: 11%;
	right: 4%;
	width: 15%;
	animation: bob6 4s infinite ease;
	rotate: 270deg;
	z-index: 2;
}

@keyframes bob6{
	0%{
		top: 11%;
		right: 4%;
	}

	50%{
		top: 15%;
		right: 5%;
	}

	100%{
		top: 11%;
		right: 4%;
	}
}

#bolt-Seven{
	position: absolute;
	bottom: 18%;
	left: 15%;
	width: 8%;
	animation: bob7 4.2s infinite ease;
	rotate: 280deg;
	z-index: 2;
}

@keyframes bob7{
	0%{
	bottom: 18%;
	left: 15%;
	}

	50%{
	bottom: 19%;
	left: 16%;
	}

	100%{
	bottom: 18%;
	left: 15%;
	}
}

.star:hover{
	rotate: 360deg;
	transition: all 300ms;
}

.starOne{
	width: 2%;
	position: absolute;
	top: 14%;
	left: 19%;
	fill: #fff;
}

.starTwo{
	width: 3%;
	position: absolute;
	top: 42%;
	right: 11%;
	rotate: 15deg;
	fill: #fff;
}

.starTwo:hover{
	rotate: 375deg;
	transition: all 300ms;
}

.starThree{
	width: 1.5%;
	position: absolute;
	top: 40%;
	right: 15%;
	fill: #fff;
}

.starFour{
	width: 1.5%;
	position: absolute;
	top: 60%;
	right: 20%;
	fill: #fff;
}

.starFive{
	width: 2.5%;
	position: absolute;
	top: 67%;
	left: 10%;
	fill: #fff;
}

.starSix{
	width: 1.2%;
	position: absolute;
	top: 62%;
	left: 16%;
	fill: #fff;
	rotate: 20deg;
}


#gradientLine{
	display: none;
}

	.project{
/*		height: 100vh;*/
		display: flex;
		/*scroll-snap-align: start;*/
		position: relative;
		/*background-color: pink;*/
		margin-bottom: 5%;
	}

	.Three{
		margin-bottom: 13%;
	}

	.leftSide{
		width: 39.877300613496933%;
		margin-left: 8.588957055214724%;
		margin-right: 3.067484662576687%;
		padding-bottom: 10%;
		/*background-color: palegoldenrod;*/
	}

	/*margin-right is what to use for space between about page*/

.rightSide{
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		width: 39.877300613496933%;
		padding-top: 39.877300613496933%;
		/*background-color: palegoldenrod;*/
	}

.Zero .rightSide{
		background-image: url(../images/attuneMockup.png);
	}

.One .rightSide{
		background-image: url(../images/raisingRoyaltyMockup.png);
	}

.Two .rightSide{
		background-image: url(../images/birdsOfSouthAmerica.png);
	}

.Three .rightSide{
		background-image: url(../images/monsterCityKitties.png);
	}

.number{
		font-family: owners-black;
		font-size: 3em;
		color: #000;

		margin-top: 20%;
		margin-bottom: 5%;
	}

.title{
		font-family: owners-black;
		font-size: 4.25vw;
		color: #000;

		margin-bottom: 5%;
	}

.blurb{
		font-family: book;
		font-size: 1.2em;
		line-height: 1.3em;
		color: #000;
		width: 90%;
		margin-bottom: 20%;
		/*background-color: green;*/
	}

.details {
	width: 100%;
	font-family: owners-black;
	font-size: 2.5vw;
	color: #000;
	text-decoration: none;
}

.lineHolder{
	width: 15%;
	text-align: left;
	position: relative;
}

.line{
	width: 0%;
	padding-top: 5%;
	background-image: linear-gradient(to right, #28BDE6, #74FFDE, #FFFE60, #FF6FB6);
	transition: width 350ms;
}

.lineDraw{
	width: 100%;
	transition: width 200ms;
}

.footer{
	width: 100%;
	padding-top: 30%;
	position: relative;
	background-color: #fff;
}

#footerClouds{
	position: absolute;
	top: -48%;
	left: 0;
}

.footerContent{
	width: 100%;
	position: absolute;
	top: 23%;
	left: 0%;
}

.footerHeader{
	font-family: owners-black;
	font-size: 4.5vw;
	margin-bottom: 3%;
	text-align: center;
	position: relative;
}

.copywright{
	font-family: owners-bold;
	font-size: 2vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 14%;
	display: flex;
	width: 16%;
}

.copywrightSymbol{
	font-family: bold;
	padding-top: 2%;
	padding-right: 1%;
}

.gmail{
	width: 10%;
	position: absolute;
	left: 50%;
	margin-left: -5%;
}

.mailShareButton{
	display: flex;
	}

	.mailShareButton:hover{
		color: #C153B1;
	}

	#envelope{
		width: 100%;
		margin-top: 3%;
		margin-left: auto;
		margin-right: auto;
		animation: bobMail 1.7s infinite ease-in-out;
	}

	#envelope:hover .mail-2{
		fill: #C153B1;
		transition: fill 300ms;
	}

	@keyframes bobMail{
		0%{
			margin-top: 3%;
		}

		50%{
			margin-top: 12%;
		}

		100%{
			margin-top: 3%;
		}
	}




}