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

@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/bold.otf');
}

@font-face{
	font-family: 'owners-medium';
	src: url('../fonts/medium.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) */
	}

	.listThree{
		display: none;
	}

	.aboutHintTablet{
		display: none;
	}

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

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

	.whiteContainer{
		background-color: #fff;
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		top: 2vh;
	}

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

	.mobileHolder{
		display: none;
	}

	span{
		font-size: 2em;
	}

	#emoji{
		display: none;
		/*width: 45%;
		position: absolute;
		top: 40%;
		left: 50%;
		margin-left: -22.5%;*/
	}

	.meIllustration{
		background-image: url(../images/me.png);
		width: 100%;
		padding-top: 100%;
		background-size: contain;
		margin-top: 8%;
	}

	.aboutHint{
		display: none;
	}

	
	 #musicNote{
     	/*width: 4%;
      	position: absolute;
      	top: 36%;
      	right: 27%;
      	rotate: -10deg;*/
      	display: none;
     }

     #musicNote2{
     	/*width: 7%;
      	position: absolute;
      	top: 45%;
      	right: 14%;
      	rotate: 15deg;*/
      	display: none;
     }

	

      .starFour{
     	/*width: 5%;
     	position: absolute;
      	top: 40%;
      	left: 25%;
      	rotate: -5deg;*/
      	display: none;
     }

   /*   .starFive{
     	width: 7%;
     	position: absolute;
      	top: 84%;
      	left: 24%;
      	rotate: 0deg;
     }*/

     .starSix{
     	/*width: 5%;
     	position: absolute;
      	top: 18%;
      	right: 24%;
      	rotate: 0deg;*/
      	display: none;
     }

     .currently{
     	width: 86.428571428571429%;
     	margin-left: auto;
     	margin-right: auto;
     	margin-bottom: 15%;
     	margin-top: 2%;
     }

     .muralPhoto{
     	background-image: url(../images/muralSquare.jpg);
     	width: 100%;
     	padding-top: 116%;
     	background-size: contain;
     	margin-left: auto;
     	margin-right: auto;
     	background-repeat: no-repeat;
     	background-position: bottom left;
     }

     .currently h1{
     	font-size: 13vw;
     	font-family: owners-black;
     	padding-top: 5%;
     	padding-bottom: 5%;
     }

     .currently h2{
     	font-size: 4vw;
     	line-height: 5vw;
     	font-family: medium;
     	padding-bottom: 3%;
     }

      .currently p{
     	font-size: 3.75vw;
     	line-height: 4.5vw;
     	font-family: book;
     	padding-bottom: 5%;
     }

     .bookText{
     	display: none;
     }

     .inspiration{
		margin-left: auto;
		margin-right: auto;
		width: 77.914110429447853%;
		padding-bottom: 20%;
	}

	.inspoHL{
		font-family: owners-black;
		text-align: center;
		width: 100%;
		font-size: 13vw;
		margin-bottom: 10%;
	}

	.inspoSH{
		font-family: owners-black;
		text-align: center;
		width: 100%;
		font-size: 5.5vw;
		margin-bottom: 15%;
	}

	.musicFlexbox{
		display: none;
	}

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

	.mobilemusicFlexbox .jump{
		width: 46.376811594202899%;
		padding-top: 46.376811594202899%;
		margin-right: 7.246376811594203%;
		background-image: url(../images/jump.jpg);
		background-size: contain;
		rotate: -3deg;
	}

	.mobilemusicFlexbox .kai{
		width: 46.376811594202899%;
		padding-top: 46.376811594202899%;
		background-image: url(../images/kai.jpg);
		background-size: contain;
	}

	.mobilemusicFlexbox .illit{
		width: 46.376811594202899%;
		padding-top: 46.376811594202899%;
		margin-right: 7.246376811594203%;
		background-image: url(../images/magnetic.jpg);
		background-size: contain;
		margin-bottom: 10%;
	}

	.mobilemusicFlexbox .harry{
		width: 46.376811594202899%;
		padding-top: 46.376811594202899%;
		background-image: url(../images/harryStyles.jpg);
		background-size: contain;
		rotate: 3deg;
		margin-bottom: 10%;
	}

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

	.bookFlexbox .DOAC{
		width: 46.376811594202899%;
		padding-top: 46.376811594202899%;
		margin-right: 4%;
		background-image: url(../images/diary.jpg);
		background-size: contain;
	}

	.bookFlexbox .rick{
		width: 46.376811594202899%;
		padding-top: 46.376811594202899%;
		background-image: url(../images/rick.jpg);
		background-size: contain;
	}







    /*  .inspiration{
     	width: 86.428571428571429%;
     	margin-left: auto;
     	margin-right: auto;
     }

     .inspiration h1{
     	font-size: 13vw;
     	font-family: owners-black;
     	padding-top: 5%;
     	padding-bottom: 8%;
     }

      .inspiration h2{
     	font-size: 5vw;
     	font-family: medium;
     	padding-bottom: 3%;
     }

     .inspiration p{
     	font-size: 3.75vw;
     	line-height: 4.5vw;
     	font-family: book;
     	padding-bottom: 10%;
     }

     .row{
     	display: flex;
     }

     .rowOne ul{
     	width: 45.867768595041322%;
     	margin-right: 8.264462809917356%;
     }

     .rowTwo ul{
     	width: 45.867768595041322%;
     	margin-right: 8.264462809917356%;
     }

     .album{
     	padding-top: 100%;
     	width: 100%;
			background-size: contain;
     }

   .one{
		background-image: url(../images/harryStyles.jpg);
	}

	.two{
		background-image: url(../images/5SOS.jpg);
	}

	.nct{
		background-image: url(../images/nctDream.jpg);
	}

	.ariana{
		background-image: url(../images/arianaGrande.jpg);
	}

	.twice{
		background-image: url(../images/twice.jpg);
	}

	.nial{
		background-image: url(../images/txt.jpg);
	}

	.nial{
		background-image: url(../images/txt.jpg);
	}

      .rowTwo ul:nth-of-type(3){
     	display: none;
     }

     .rowOne ul:nth-of-type(2){
     	margin-right: 0%;
     }

     .rowTwo ul:nth-of-type(2){
     	margin-right: 0%;
     }

     .rowOne ul:nth-of-type(3){
     	display: none;
     }

     .rowOne ul:nth-of-type(4){
     	display: none;
     }


  .song{
		font-family: medium;
		margin-bottom: 5%;
		margin-top: 10%;
		font-size: 4vw;
	}

	.artist{
		font-family: book;
		font-size: 3vw;
		margin-bottom: 20%;
	}

  .books{
     	width: 100%;
     	margin-top: 20%;
      padding-bottom: 30%;
     }

  .books h2{
     font-size: 5vw;
     font-family: medium;
     padding-bottom: 3%;
   }

  .books li{
		font-size: 4vw;
		font-family: medium;
	}

	.books li p{
		font-size: 3.5vw;
		font-family: book;
	}

	.books li:nth-of-type(2n){
		margin-bottom: 10%;
		margin-top: 3%;
	}*/







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

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

	.resumeLink{
		display: none;
		/*font-size: 1.5em;
  		color: #000;
  		text-decoration: none;
  		line-height: 4vh;
		font-family: medium;
		transition: all 300ms;*/
	}

	.behance{
		width: 10%;
		padding: 2%;
		transition: all 400ms;
	}

	.behance:hover .behanceColor{
		fill: #572FF5;
		transition: fill 200ms;
	}
    

}

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

	.desktopArtist1{
		display: none;
	}

	.desktopArtist2{
		display: none;
	}

	.bookTextMobile{
		display: none;
	}

	.mobilemusicFlexbox{
		display: none;
	}

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

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

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

	.whiteContainer{
		background-color: #fff;
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
		top: 4vh;
	}

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

	span{
		font-size: 2em;
	}

	#emoji{
		width: 20%;
		position: absolute;
		top: 44%;
		left: 50%;
		margin-left: -10%;
	}

	.aboutHint{
		display: none;
	}

	.aboutHintTablet{
		width: 20%;
		position: absolute;
		bottom: 11%;
		left: 50%;
		margin-left: -10%;
		font-family: book;
		font-size: 1.5vw;
		line-height: 1.5vw;
		text-align: center;
	}

	#duck{
		width: 10%;
		position: absolute;
		left: 15%;
		bottom: 13%;
		transition: rotate 600ms;
	}

	.clickAreaDuckTablet{
		width: 9.5%;
		padding-top: 14%;
		position: absolute;
		left: 15%;
		bottom: 13%;
	}

	.duckBlurb{
		color: #000;
		background-color: #fff;
		border-radius: 1vw;
		border: solid #000 2px;

		opacity: 0;
		transition: opacity 400ms;

		position: absolute;
		left: 21%;
		bottom: 37%;
		width: 14%;
	}

	.duckBlurb p{
		font-family: book;
		font-size: 1.5vw;
		text-align: center;
		width: 100%;
		padding-top: 10%;
		padding-bottom: 8%;
	}

	.DuckRotate{
		rotate: -5deg;
		transition: rotate 500ms;
	}

   #paintbrush{
     	width: 6%;
      position: absolute;
      top: 18%;
      left: 18%;
      transition: rotate 600ms;
    }

   .clickAreaPaintbrushTablet{
		width: 7%;
		padding-top: 9%;
		position: absolute;
		top: 18%;
      	left: 18%;
	}

	.paintbrushBlurb{
		color: #000;
		background-color: #fff;
		border-radius: 1vw;
		border: solid #000 2px;

		opacity: 0;
		transition: opacity 400ms;

		position: absolute;
		left: 2.5%;
		top: 18.5%;
		width: 15%;
	}

	.paintbrushBlurb p{
		font-family: book;
		font-size: 1.5vw;
		text-align: center;
		width: 100%;
		padding-top: 10%;
		padding-bottom: 8%;
	}

	.paintbrushRotate{
		rotate: 18deg;
		transition: rotate 500ms;
	}

	 #musicNote{
     	width: 2.25%;
      	position: absolute;
      	top: 36%;
      	right: 19%;
      	rotate: -10deg;
     }

     #musicNote2{
     	width: 3.25%;
      	position: absolute;
      	top: 47%;
      	right: 14%;
      	rotate: 15deg;
     }

	 #headphones{
      	width: 10%;
      	position: absolute;
      	top: 23%;
      	right: 6%;
      	transition: rotate 600ms;
/*      	rotate: 8deg;*/
     }

 	.clickAreaHeaphonesTablet{
		width: 10%;
		padding-top: 12%;
		position: absolute;
		top: 23%;
      	right: 6%;
	}

	.headphonesBlurb{
		color: #000;
		background-color: #fff;
		border-radius: 1vw;
		border: solid #000 2px;

		opacity: 0;
		transition: opacity 400ms;

		position: absolute;
		right: 12%;
		top: 15%;
		width: 15%;
	}

	.headphonesBlurb p{
		font-family: book;
		font-size: 1.5vw;
		text-align: center;
		width: 100%;
		padding-top: 10%;
		padding-bottom: 8%;
	}

	.headphonesRotate{
		rotate: 13deg;
		transition: rotate 500ms;
	}

	#crayons{
		width: 7%;
		position: absolute;
		left: 4%;
		bottom: 40%;
		transition: rotate 600ms;
	}

 	.clickAreaCrayonsTablet{
		width: 6%;
		padding-top: 8%;
		position: absolute;
		left: 4%;
		bottom: 40%;
	}

	.crayonsBlurb{
		color: #000;
		background-color: #fff;
		border-radius: 1vw;
		border: solid #000 2px;

		opacity: 0;
		transition: opacity 400ms;

		position: absolute;
		left: 12%;
		bottom: 48%;
		width: 15%;
	}

	.crayonsBlurb p{
		font-family: book;
		font-size: 1.5vw;
		text-align: center;
		width: 100%;
		padding-top: 10%;
		padding-bottom: 8%;
	}

	.crayonsRotate{
		rotate: 13deg;
		transition: rotate 500ms;
	}

	#bowl{
		width: 16%;
		position: absolute;
		bottom: 13%;
		right: 12%;
		transition: rotate 600ms;
	}

	.clickAreaBowlTablet{
		width: 16%;
		padding-top: 11%;
		position: absolute;
		bottom: 13%;
		right: 12%;
	}

	.bowlBlurb{
		color: #000;
		background-color: #fff;
		border-radius: 1.5vw;
		border: solid #000 2px;

		opacity: 0;
		transition: opacity 400ms;

		position: absolute;
		bottom: 31%;
		right: 22%;
		width: 15%;
	}

	.bowlBlurb p{
		font-family: book;
		font-size: 1.5vw;
		text-align: center;
		width: 100%;
		padding-top: 10%;
		padding-bottom: 6%;
		line-height: 1.5vw;
	}

	.bowlRotate{
		rotate: 7deg;
		transition: rotate 500ms;
	}

     .starOne{
     	width: 4%;
     	position: absolute;
      	top: 33%;
      	left: 1%;
      	rotate: 0deg;
     }

     .starTwo{
     	width: 3%;
     	position: absolute;
      	top: 15%;
      	right: 2%;
      	rotate: 0deg;
     }

     .starThree{
     	width: 2%;
     	position: absolute;
      	top: 12%;
      	left: 3%;
      	rotate: 10deg;
     }

      .starFour{
     	width: 2%;
     	position: absolute;
      	top: 43%;
      	left: 18%;
      	rotate: -5deg;
     }

      .starFive{
     	width: 2%;
     	position: absolute;
      	top: 81%;
      	left: 28%;
      	rotate: 0deg;
     }

     .starSix{
     	width: 1.5%;
     	position: absolute;
      	top: 18%;
      	right: 24%;
      	rotate: 0deg;
     }

      .starSeven{
     	width: 2.5%;
     	position: absolute;
      	bottom: 24%;
      	right: 32%;
      	rotate: 0deg;
     }






  h1{
		font-family: owners-black;
		font-size: 5vw;
		text-align: left;
		margin-bottom: 3.067484662576687%;
	}

	h2{
		font-family: medium;
		font-size: 1.375em;
		line-height: 1.3em;
		text-align: left;
		margin-bottom:1%;
	}

	.currently{
		display: flex;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10%;
		padding-top: 12%;
		width: 88.815789473684211%;
	}

	.currently h2{
		font-size: 2.25vw;
		line-height: 2.75vw;
		margin-bottom: 3%;
	}

	.muralPhoto{
		width: 39.506172839506173%;
		padding-top: 60.185185185185185%;
		background-image: url(../images/mural.jpg);
		background-size: contain;
		margin-right: 3.703703703703703%;
		background-repeat: no-repeat;
	}

	.currentlyRightSide{
		width: 56.656346749226006%;
	}

	.currently p{
		line-height: 2.5vw;
	}

	p{
		font-family: book;
		font-size: 2vw;
		text-align: left;
		margin-bottom: 2%;
	}




	.inspiration{
		margin-left: auto;
		margin-right: auto;
		width: 77.914110429447853%;
		padding-bottom: 20%;
	}

	.inspoHL{
		text-align: center;
		width: 100%;
	}

	.inspoSH{
		text-align: center;
		width: 100%;
		margin-bottom: 5%;
		font-family: owners-black;
	}

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

	.musicFlexbox .jump{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/jump.jpg);
		background-size: contain;
		rotate: -5deg;
	}

	.musicFlexbox .kai{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/kai.jpg);
		background-size: contain;
	}

	.musicFlexbox .illit{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/magnetic.jpg);
		background-size: contain;
		rotate: 5deg;
	}

	.musicFlexbox .harry{
		width: 22%;
		padding-top: 22%;
		background-image: url(../images/harryStyles.jpg);
		background-size: contain;
	}

	.bookFlexbox{
		display: flex;
	}

	.bookFlexbox .DOAC{
		width: 22%;
		padding-top: 22%;
		margin-left: 25.925925925925926%;
		margin-right: 4%;
		background-image: url(../images/diary.jpg);
		background-size: contain;
	}

	.bookFlexbox .rick{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/rick.jpg);
		background-size: contain;
	}


/*.inspiration{
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		padding-bottom: 20%;
	}

	.bookTextMobile{
		display: none;
	}

	.inspirationFlexbox{
		display: flex;
	}

	.albumContainer{
		width: 48.148148148148148%;
		margin-right: 3.703703703703703%;
	}

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

	.albumContainer ul{
		width: 28.205128205128205%;
		margin-right: 7.692307692307693%;
	}

	.albumContainer ul:nth-of-type(3n){
		margin-right: 0;
	}

	.album{
		width: 100%;
		padding-top: 100%;
		background-size: contain;
		margin-bottom: 8%;
	}

	.song{
		font-family: medium;
		margin-bottom: 5%;
		font-size: 1em;
	}

	.artist{
		font-family: book;
		font-size: .9em;
	}

	.one{
		background-image: url(../images/harryStyles.jpg);
	}

	.two{
		background-image: url(../images/5SOS.jpg);
	}

	.nct{
		background-image: url(../images/nctDream.jpg);
	}

	.ariana{
		background-image: url(../images/arianaGrande.jpg);
	}

	.twice{
		background-image: url(../images/twice.jpg);
	}

	.nial{
		background-image: url(../images/txt.jpg);
	}

	.nial{
		background-image: url(../images/txt.jpg);
	}

	.fadeIn{
		opacity: 1;
		transition: opacity 300ms;
	}

	.books{
		width: 48.148148148148148%;
	}

	.books li{
		font-size: 2vw;
		line-height: 2vw;
		font-family: medium;
	}

	.books li:nth-of-type(2n){
		margin-bottom: 10%;
		margin-top: 4%;
	}

	.flexbox h2{
		margin-bottom: 5%;
	}

	.books h2{
		margin-bottom: 5%;
	}

	.inspirationTextFlexbox{
		display: flex;
		margin-bottom: 5%;
	}

	.musicText{
		width: 48.148148148148148%;
		margin-right: 3.703703703703703%;
	}

	.bookText{
		width: 48.148148148148148%;
	}*/















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

	.resumeLink{
		font-size: 1.3em;
  		color: #000;
  		text-decoration: none;
  		line-height: 4vh;
		font-family: medium;
		transition: all 300ms;
		margin-top: 5%;
	}

	.resumeLink:hover{
		color: #572FF5;
		transition: all 300ms;
	}

	.behance{
		width: 9%;
		padding: 2%;
		transition: all 400ms;
	}

	.behance:hover .behanceColor{
		fill: #572FF5;
		transition: fill 200ms;
	}


}


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

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

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

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

	.aboutHintTablet{
		display: none;
	}

	.mobilemusicFlexbox{
		display: none;
	}

	.whiteContainer{
		/*background-color: gray;*/
		width: 95.5%;
		margin-left: auto;
		margin-right: auto;
		position: relative;
	}

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

	.doodleSection h1{
		text-align: center;
		font-family: owners-black;
		font-size: 6em;
		margin-bottom: 2%;
	}


   h1{
		font-family: owners-black;
		font-size: 4vw;
		text-align: left;
		margin-bottom: 3.067484662576687%;
	}


	h2{
		font-family: medium;
		font-size: 2em;
		line-height: 1.3em;
		text-align: left;
		/*margin-bottom:1%;*/
	}

	.currently{
		display: flex;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 10%;
		width: 77.914110429447853%;
		padding-top: 10%;
	}

	.currently h2{
		font-size: 1.25vw;
		line-height: 1.55vw;
		margin-bottom: 3%;
	}

	.muralPhoto{
		width: 39.333333333333333%;
		padding-top: 55.510666666666667%;
		background-image: url(../images/mural.jpg);
		background-size: contain;
		margin-right: 3.937007874015748%;
		background-repeat: no-repeat;
	}

	.currentlyRightSide{
		width: 56.692913385826772%;
	}

	p{
		font-family: book;
		font-size: 1.25vw;
		line-height: 1.5vw;
		text-align: left;
		margin-bottom: 3%;
	}

	.inspiration{
		margin-left: auto;
		margin-right: auto;
		width: 77.914110429447853%;
		padding-bottom: 20%;
	}

	.inspoHL{
		text-align: center;
		width: 100%;
	}

	.inspoSH{
		text-align: center;
		width: 100%;
		margin-bottom: 5%;
		font-family: owners-black;
	}

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

	.musicFlexbox .jump{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/jump.jpg);
		background-size: contain;
		rotate: -5deg;
	}

	.musicFlexbox .kai{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/kai.jpg);
		background-size: contain;
	}

	.musicFlexbox .illit{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/magnetic.jpg);
		background-size: contain;
		rotate: 5deg;
	}

	.musicFlexbox .harry{
		width: 22%;
		padding-top: 22%;
		background-image: url(../images/harryStyles.jpg);
		background-size: contain;
	}

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

	.bookFlexbox .DOAC{
		width: 22%;
		padding-top: 22%;
		margin-left: 26%;
		margin-right: 4%;
		background-image: url(../images/diary.jpg);
		background-size: contain;
	}

	.bookFlexbox .rick{
		width: 22%;
		padding-top: 22%;
		margin-right: 4%;
		background-image: url(../images/rick.jpg);
		background-size: contain;
	}







	/*.bookTextMobile{
		display: none;
	}

	.inspirationFlexbox{
		display: flex;
	}

	.albumContainer{
		width: 48.148148148148148%;
		margin-right: 3.703703703703703%;
		background-color: pink;
	}

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

	.albumContainer ul{
		width: 28.205128205128205%;
		margin-right: 7.692307692307693%;
	}

	.albumContainer ul:nth-of-type(3n){
		margin-right: 0;
	}

	.album{
		width: 100%;
		padding-top: 100%;
		background-size: contain;
		margin-bottom: 8%;
	}

	.song{
		font-family: medium;
		margin-bottom: 5%;
		font-size: 1em;
	}

	.artist{
		font-family: book;
		font-size: .9em;
	}

	.one{
		background-image: url(../images/harryStyles.jpg);
	}

	.kai{
		background-image: url(../images/kai.jpg);
	}

	.nct{
		background-image: url(../images/nctDream.jpg);
	}

	.magnetic{
		background-image: url(../images/magnetic.jpg);
	}

	.twice{
		background-image: url(../images/twice.jpg);
	}

	.nial{
		background-image: url(../images/txt.jpg);
	}

	.blackpink{
		background-image: url(../images/jump.jpg);
	}

	.fadeIn{
		opacity: 1;
		transition: opacity 300ms;
	}

	.flexbox{
		display: flex;
		margin-left: auto;
		margin-right: auto;
	}

	.books{
		width: 48.148148148148148%;
	}

	.books li{
		font-size: 1.25vw;
		line-height: 2vw;
		font-family: medium;
	}

	.books li:nth-of-type(2n){
		margin-bottom: 7%;
		margin-top: 1.25%;
	}

	.flexbox h2{
		margin-bottom: 5%;
	}

	.books h2{
		margin-bottom: 5%;
	}

	.inspirationTextFlexbox{
		display: flex;
		margin-bottom: 3%;
	}

	.musicText{
		width: 48.148148148148148%;
		margin-right: 3.703703703703703%;
	}

	.bookText{
		width: 48.148148148148148%;
	}*/







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

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

	.resumeLink{
		font-size: 1.25em;
  		color: #000;
  		text-decoration: none;
  		line-height: 4vh;
		font-family: medium;
		transition: all 300ms;
		padding-top: 2%;
	}

	.resumeLink:hover{
		color: #572FF5;
		transition: all 300ms;
	}

	.behance{
		width: 7%;
		padding: 2%;
		transition: all 400ms;
	}

	.behance:hover .behanceColor{
		fill: #572FF5;
		transition: fill 200ms;
	}


	/*.flexparent{
		display: flex;
	}*/
	
}