.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');
}


/*.container{
		width:87.5%; /* 280 pixels at a 320 pixel screen width (iPhone 3 / 4 / 5) */

/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){
	
	.container{
		width: 86.25%;
	}

	#figmaVideo{
		display: none;
	}

	.behindScenesContainer{
		display: none;
	}

	#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: 3;
	}

	.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;
	}

	.projectName{
		width: 100%;
		font-family: owners-black;
		font-size: 10vw;
		margin-bottom: 10%;
		padding-top: 25%;
	}

	.detailsContainer{
		width: 42%;
		position: relative;
		top: 0;
		left: 0%;
		font-family: book;
		font-size: 3.5vw;
		margin-bottom: 5%;
	}

	#date{
		width: 8%;
		padding-right: 4%;
		padding-bottom: 2%;
	}

	#course{
		width: 8%;
		padding-right: 4%;
		padding-bottom: 2%;
	}

	#time{
		width: 8%;
		padding-right: 4%;
		padding-bottom: 2%;
	}

	.dateDetails3{
		display: flex;
		margin-bottom: 4%;
	}

	.dateDetails{
		display: flex;
		margin-bottom: 4%;
	}

	.courseDetails{
		display: flex;
		margin-bottom: 4%;
	}

	.courseDetails3{
		display: flex;
		margin-bottom: 4%;
	}

	.courseDetails2{
		display: flex;
		margin-bottom: 4%;
	}

	.timeDetails{
		display: flex;
		margin-bottom: 15%;
	}

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

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

.lineHolder2{
	width: 40%;
	position: relative;
	top: 0;
	left: 0%;
	margin-bottom: 4%;
}

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

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

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

.siteVideoEventuallyZero{
		width: 100%;
		padding-top: 56.435327635327635%;
		background-image: url(../images/attuneLandingPage.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
}

.siteVideoEventually{
	background-image: url(../images/phone.png);
	width: 73.188405797101449%;
	padding-top: 127.572463768115942%;
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10%;
}

.siteVideoEventually2{
	background-image: url(../images/birdsOfSouthAmericaScreen.png);
	width: 100%;
	padding-top:54.065217391304348%;
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10%;
	margin-top: 5%;
}

.logoImage{
	background-image: url(../images/logoMobile.svg);
	width: 100%;
	padding-top: 131.786231884057971%;
	background-size: contain;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10%;
	margin-top: 5%;
}


	h2{
		font-size: 5vw;
     	font-family: medium;
		margin-bottom: 5%;
	}

	p{
		font-family: book;
		font-size: 3.75vw;
     	line-height: 4.5vw;
     	color: #5A5A5A;
	}

	.briefText{
		margin-bottom: 15%;
	}

	.inspirationText{
		margin-bottom: 15%;
	}

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

	.moodboard{
		background-image: url(../images/moodboardMobile1.png);
		width: 100%;
		padding-top: 187.681159420289855%;
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.moodboard2{
		background-image: url(../images/moodboardMobile2.png);
		width: 100%;
		padding-top: 187.681159420289855%;
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.moodboard3{
		background-image: url(../images/moodboardMobile3.png);
		width: 100%;
		padding-top: 187.681159420289855%;
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.ideation{
		background-image: url(../images/mobileLeftSketch.jpg);
		width: 100%;
		padding-top: 200%;
		background-size: contain;
	}

	.ideation2nd{
		background-image: url(../images/mobileRightSketch.jpg);
		width: 100%;
		padding-top: 200%;
		background-size: contain;
		margin-bottom: 10%;
	}

	.ideation3{
		background-image: url(../images/ideationMobile.jpg);
		width: 100%;
		padding-top: 160.869565217391304%;
		background-size: contain;
		margin-bottom: 10%;
	}

	.wireframes{
		width: 100%;
		padding-top: 169.938405797101449%;
		background-image: url(../images/wireframesMobile.png);
		background-size: contain;
		margin-bottom: 5%;
	}

	.colors{
		background-image: url(../images/colorsMobile.png);
		width: 100%;
		padding-top: 100%;
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.primary{
		background-image: url(../images/primaryMobile.svg);
		width: 82.694214876033058%;
		padding-top: 117.628099173553719%;
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: auto;
		margin-right: auto;
	}

	.secondary{
		background-image: url(../images/secondaryMobile.svg);
		width: 82.694214876033058%;
		padding-top: 117.628099173553719%;
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: auto;
		margin-right: auto;
	}

	.tertiary{
		background-image: url(../images/tertiaryMobile.svg);
		width: 82.694214876033058%;
		padding-top: 117.628099173553719%;
		background-size: contain;
		background-repeat: no-repeat;
		margin-left: auto;
		margin-right: auto;
	}

	.type{
		background-image: url(../images/type.png);
		width: 100%;
		padding-top: 85%;
		background-size: contain;
		background-repeat: no-repeat;
		margin-bottom: 10%;
	}

	.mockupOne{
		background-image: url(../images/merchMobile1.png);
		width: 100%;
		padding-top: 89.256198347107438%;
		background-size: contain;
		margin-bottom: 5%;
/*		background-repeat: no-repeat;*/
	}

	.mockupTwo{
		background-image: url(../images/merchMobile2.png);
		width: 100%;
		padding-top: 114.070247933884298%;
		background-size: contain;
		margin-bottom: 5%;
/*		background-repeat: no-repeat;*/
	}

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

	#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;
	}

	.email{
		font-family: owners-black;
		font-size: 5vw;
		margin-bottom: 15%;
		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%;
		}
	}

	.videoHolder{
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
	}

	#mobileFigmaVideo{
		width:100%;
		margin-bottom: 10%;
	}

	.inspirationText p{
		margin-bottom: 5%;
	}

	.behindScenesBlurb{
		text-align: center;
	}

.processBook{
	width: 100%;
	font-family: owners-black;
	font-size: 6vw;
	color: #000;
	text-decoration: none;
	position: relative;
	left: 50%;
	margin-left: -19%;
	text-align: center;
	}

	.processBook:hover{
		color: #27B7EA;
	}

	.checkBack{
	display: none;
	}

	.comeBackBlurb{
		display: none;
	}




}

/* 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) */
	}

	#mobileFigmaVideo{
		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: 3;
	}

	.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;
	}

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

	.projectName{
		font-family: owners-black;
		font-size: 7vw;
		color: #000;
		padding-top: 13%;
		margin-bottom: 3%;
		width: 100%;
		text-align: center;
	}

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

	.lineHolder{
		width: 12%;
		position: relative;
		top: 0;
		left: 50%;
		margin-left: -6%;
		margin-bottom: 4%;
		text-align: center;
	}

	.lineHolder2{
	width: 20%;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -10%;
	margin-bottom: 4%;
	text-align: center;
}

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

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

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

	.siteVideoEventuallyZero{
		width: 100%;
		padding-top: 56.435327635327635%;
		background-image: url(../images/attuneLandingPage.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
}

	.siteVideoEventually{
		width: 100%;
		padding-top: 54.135327635327635%;
		background-image: url(../images/raisingRoyalty.png);
		background-size: contain;
		margin-bottom: 5%;
	}

	.siteVideoEventually2{
		width: 100%;
		padding-top: 54.135327635327635%;
		background-image: url(../images/birdsOfSouthAmericaScreen.png);
		background-size: contain;
		margin-bottom: 5%;
	}

	.detailsContainer{
		margin-top: 3%;
		margin-bottom: 5%;
	}

	.right{
		width: 85.9375%;
		margin-left: 21.794871794871795%;
		line-height: 2vw;
		display: flex;
	}

	.right p{
		font-family: book;
		font-size: 1.75vw;
		width: 20.909090909090909%;
		margin-right: 3.636363636363636%;
		text-align: center;
	}

	.right p:nth-of-type(3){
		margin-right: 0%;
	}

	h2{
		font-family: medium;
		font-size: 2vw;
		margin-bottom: 2%;
	}

	p{
		font-size: 1.6vw;
		line-height: 2vw;
		font-family: book;
		color: #5A5A5A;
	}

	.textContainer{
		display: flex;
		margin-bottom: 10%;
	}

	.myProcess{
		font-family: owners-black;
		font-size: 4vw;
		margin-bottom: 3%;
	}

	.processFlexBox{
		display: flex;
	}

	.briefText{
		width: 52.136752136752137%;
		margin-right: 4.273504273504274%;
	}

	.inspirationText{
		width: 52.136752136752137%;
	}

	.moodboard0{
		background-image: url(../images/moodboardZero.png);
		width: 100%;
		padding-top: 56.481159420289855%;
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.moodboard1{
		width: 100%;
		padding-top: 67%;
		background-image: url(../images/moodboardOne.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.moodboard2{
		width: 100%;
		padding-top: 67%;
		background-image: url(../images/moodboardTwo.jpg);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.moodboard3{
		width: 100%;
		padding-top: 67%;
		background-image: url(../images/moodboardThree.jpg);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.attuneColors{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/attuneColors.jpg);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.ideation0{
		width: 100%;
		padding-top: 55.754985754985755%;
		background-image: url(../images/logoIdeation2.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.ideation{
		width: 100%;
		padding-top: 73.846153846153846%;
		background-image: url(../images/ideationOne.png);
		background-size: contain;
		margin-bottom: 5%;
	}

	.personaOne{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/personaOne.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.personaTwo{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/personaTwo.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.personaThree{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/personaThree.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.leftSide{
		width: 52.136752136752137%;
		margin-right: 4.273504273504274%;
	}

	.rightSide{
		width: 52.136752136752137%;
	}

	.logoImage{
		background-image: url(../images/logo.svg);
		background-size: contain;
		width: 100%;
		padding-top: 48.598290598290598%;
		margin-bottom: 5%;
	}

	.colors{
		background-image: url(../images/colors.png);
		background-size: contain;
		width: 100%;
		padding-top: 48.628205128205128%;
		margin-bottom: 5%;
		margin-top: 5%;
	}

	.mockups{
		background-image: url(../images/merch.png);
		background-size: contain;
		width: 100%;
		padding-top: 52.39031339031339%;
		margin-bottom: 5%;
	}

	.textContainer2{
		display: flex;
		margin-bottom: 10%;
	}

	.logoSVGS{
		width: 100%;
		display: flex;
		margin-bottom: 5%;
	}

	.primary{
		background-image: url(../images/primary.svg);
		width: 33.333333333333333%;
		padding-top: 42.991452991452991%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.secondary{
		background-image: url(../images/secondary.svg);
		width: 33.333333333333333%;
		padding-top: 42.991452991452991%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.tertiary{
		background-image: url(../images/tertiary.svg);
		width: 33.333333333333333%;
		padding-top: 42.991452991452991%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.ideation3{
		background-image: url(../images/ideation3.jpg);
		width: 100%;
		padding-top: 74.294871794871795%;
		background-size: contain;
	}

	.wireframes{
		width: 100%;
		padding-top: 50.055555555555556%;
		background-image: url(../images/wireframes.png);
		background-size: contain;
		margin-bottom: 5%;
	}


	.detailsContainer{
		justify-content: space-evenly;
		display: flex;
		margin-bottom: 4%;
		width: 70%;
		margin-left: auto;
		margin-right: auto;
	}

	.dateDetails{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 20%;
		margin-left: auto;
		margin-right: auto;
	}

	.dateDetails3{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 16%;
		margin-left: auto;
		margin-right: auto;
	}

	.courseDetails{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 28%;
		margin-left: auto;
		margin-right: auto;
	}

	.courseDetails2{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 25%;
		margin-left: auto;
		margin-right: auto;
	}

	.courseDetails3{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 26%;
		margin-left: auto;
		margin-right: auto;
	}

	.timeDetails{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 15%;
		margin-left: auto;
		margin-right: auto;
	}

	#time{
		width: 15%;
		padding-right: 5%;
		padding-top: 2%;
		padding-bottom: 12%;
	}

	#course{
		width: 8.5%;
		padding-right: 5%;
		padding-bottom: 4%;
	}

	#date{
		width:11%;
		padding-right: 5%;
		padding-bottom: 5%;
	}



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

#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%;
	color: #000;
}

.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%;
		}
	}

	.videoHolder{
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
	}

	#figmaVideo{
		width:100%;
		margin-bottom: 10%;
	}

	.inspirationText p{
		margin-bottom: 5%;
	}

	.behindScenesBlurb{
		text-align: center;
	}

.processBook{
	width: 100%;
	font-family: owners-black;
	font-size: 2.5vw;
	color: #000;
	text-decoration: none;
	text-align: center;
	position: relative;
	left: 50%;
	margin-left: -8.25%;
	}

	.processBook:hover{
		color: #27B7EA;
	}

.checkBack{
	width: 100%;
	font-family: owners-black;
	font-size: 4vw;
	color: #000;
	position: absolute;
	top: 25%;
	left: 52%;
	}

	.comeBackBlurb{
		position: absolute;
		top: 40%;
		left: 52%;
	}



}

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

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

	#mobileFigmaVideo{
		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: 1.25px;
		z-index: 3;
	}

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

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

	#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: 4vh;
		font-family: owners-black;
	}

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

	.projectName{
		font-family: owners-black;
		font-size: 5vw;
		color: #000;
		padding-top: 13%;
		margin-bottom: 3%;
		width: 100%;
		text-align: center;
	}

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

.lineHolder{
	width: 10%;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -5%;
	margin-bottom: 4%;
	text-align: center;
}

.lineHolder2{
	width: 20%;
	position: relative;
	top: 0;
	left: 50%;
	margin-left: -10%;
	margin-bottom: 4%;
	text-align: center;
}

.line2{
	width: 0%;
	padding-top: 2%;
	background-image: linear-gradient(to right,#00BAFF, #D5FF21, #F036BE );
	transition: width 350ms;
/*	margin-left: -10%;*/
	margin-bottom: 4%;
	text-align: center;
}

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

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

.siteVideoEventuallyZero{
		width: 100%;
		padding-top: 56.435327635327635%;
		background-image: url(../images/attuneLandingPage.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
}

.siteVideoEventually{
		width: 100%;
		padding-top: 54.135327635327635%;
		background-image: url(../images/raisingRoyalty.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
}

.siteVideoEventually2{
		width: 100%;
		padding-top: 54.135327635327635%;
		background-image: url(../images/birdsOfSouthAmericaScreen.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
}






	.detailsContainer{
		justify-content: space-evenly;
		display: flex;
		margin-bottom: 4%;
		width: 60%;
		margin-left: auto;
		margin-right: auto;
	}

	.dateDetails{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 20%;
		margin-left: auto;
		margin-right: auto;
	}

	.dateDetails3{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 16%;
		margin-left: auto;
		margin-right: auto;
	}

	.courseDetails{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 28%;
		margin-left: auto;
		margin-right: auto;
	}

	.courseDetails2{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 25%;
		margin-left: auto;
		margin-right: auto;
	}

	.courseDetails3{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 26%;
		margin-left: auto;
		margin-right: auto;
	}

	.timeDetails{
		font-family: book;
		font-size: 1.25vw;
		display: flex;

		width: 15%;
		margin-left: auto;
		margin-right: auto;
	}

	#time{
		width: 16%;
		padding-right: 5%;
		padding-bottom: 10%;
	}

	#course{
		width: 8.5%;
		padding-right: 5%;
		padding-bottom: 4%;
	}

	#date{
		width:11%;
		padding-right: 5%;
		padding-bottom: 5%;
	}












	h2{
		font-family: medium;
		font-size: 1.6vw;
		margin-bottom: 2%;
	}

	p{
		font-size: 1.2vw;
		line-height: 1.5vw;
		font-family: book;
		color: #5A5A5A;
	}

	.textContainer{
		display: flex;
		margin-bottom: 10%;
	}

	.myProcess{
		font-family: owners-black;
		font-size: 2.5vw;
		margin-bottom: 3%;
	}

	.processFlexBox{
		display: flex;
	}

	.briefText{
		width: 52.136752136752137%;
		margin-right: 4.273504273504274%;
	}

	.inspirationText{
		width: 52.136752136752137%;
	}

	.moodboard0{
		width: 100%;
		padding-top: 56.3002849002849%;
		background-image: url(../images/moodboardZero.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.moodboard1{
		width: 100%;
		padding-top: 67%;
		background-image: url(../images/moodboardOne.png);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.moodboard2{
		width: 100%;
		padding-top: 67%;
		background-image: url(../images/moodboardTwo.jpg);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.moodboard3{
		width: 100%;
		padding-top: 67%;
		background-image: url(../images/moodboardThree.jpg);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.ideation0{
		width: 100%;
		padding-top: 55.754985754985755%;
		background-image: url(../images/logoIdeation2.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.attuneColors{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/attuneColors.jpg);
		background-size: contain;
		margin-bottom: 5%;
		background-repeat: no-repeat;
	}

	.ideation{
		width: 100%;
		padding-top: 73.846153846153846%;
		background-image: url(../images/ideationOne.png);
		background-size: contain;
		margin-bottom: 5%;
	}

	.finalLogo{
		width: 100%;
		padding-top: 30.720797720797721%;
		background-image: url(../images/finalLogo.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.wireframes{
		width: 100%;
		padding-top: 50.055555555555556%;
		background-image: url(../images/wireframes.png);
		background-size: contain;
		margin-bottom: 5%;
	}

	.personaOne{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/personaOne.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.personaTwo{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/personaTwo.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.personaThree{
		width: 100%;
		padding-top: 44.807692307692308%;
		background-image: url(../images/personaThree.jpg);
		background-size: contain;
		margin-bottom: 10%;
		background-repeat: no-repeat;
	}

	.leftSide{
		width: 52.136752136752137%;
		margin-right: 4.273504273504274%;
	}

	.rightSide{
		width: 52.136752136752137%;
	}

	.logoImage{
		background-image: url(../images/logo.svg);
		background-size: contain;
		width: 100%;
		padding-top: 48.598290598290598%;
		margin-bottom: 5%;
	}

	.colors{
		background-image: url(../images/colors.png);
		background-size: contain;
		width: 100%;
		padding-top: 48.628205128205128%;
		margin-bottom: 10%;
		margin-top: 5%;
		background-repeat: no-repeat;
	}

	.mockups{
		background-image: url(../images/merch.png);
		background-size: contain;
		width: 100%;
		padding-top: 52.39031339031339%;
		margin-bottom: 5%;
	}

	.textContainer2{
		display: flex;
		margin-bottom: 10%;
	}

	.logoSVGS{
		width: 100%;
		display: flex;
		margin-bottom: 5%;
	}

	.primary{
		background-image: url(../images/primary.svg);
		width: 33.333333333333333%;
		padding-top: 42.991452991452991%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.secondary{
		background-image: url(../images/secondary.svg);
		width: 33.333333333333333%;
		padding-top: 42.991452991452991%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.tertiary{
		background-image: url(../images/tertiary.svg);
		width: 33.333333333333333%;
		padding-top: 42.991452991452991%;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.ideation3{
		background-image: url(../images/ideation3.jpg);
		width: 100%;
		padding-top: 74.294871794871795%;
		background-size: contain;
	}






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

#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;
}

.email{
	font-family: owners-black;
	font-size: 2.5vw;
	margin-bottom: 7%;
	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;
	font-size: 2vw;
	padding-top: 3%;
	padding-right: 1%;
	color: #000;
}

.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%;
		}
	}

	#figmaVideo{
		width:100%;
		margin-bottom: 10%;
	}

	.inspirationText p{
		margin-bottom: 5%;
	}

	.behindScenesBlurb{
		text-align: center;
	}

.processBook{
	font-family: owners-black;
	font-size: 2vw;
	color: #000;
	text-decoration: none;
	position: relative;
	left: 50%;
	margin-left: -8.25%;
	text-align: center;
	}

.processBook:hover{
	color: #27B7EA;
}

.checkBack{
	width: 100%;
	font-family: owners-black;
	font-size: 4vw;
	color: #000;
	position: absolute;
	top: 25%;
	left: 50%;
}

.comeBackBlurb{
	position: absolute;
	top: 40%;
	left: 50%;
}




}