@import url('https://fonts.googleapis.com/css?family=Cabin|News+Cycle|Poly|Roboto');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

body { margin: 0;
	   background-color: #000000; 
}



h1 { font-family: 'Poly', serif;
	 font-size: 6.5vw;
	 color: #ffffff;
}
.h1-home { color: #000000;
		   text-transform: uppercase;
}
#h1-about { margin-top: 4vw;
			margin-bottom: 0;
			line-height: 8vw;
}
#h1-work, #h1-equipment, #h1-play, #h1-song-list, #h1-contact { margin-top: 2vw;
																margin-bottom: 0;
																text-align: center;
}

h2 { font-family: 'Cabin', sans-serif;
	 font-size: 5vw;
	 color: #ffffff;
}
#h2-contact { text-align: center;
}
p, main li { font-family: 'Roboto', sans-serif;
			 font-size: 3.8vw;
			 color: #ffffff;
}
main dl { font-family: 'Roboto', sans-serif;
		  font-size: 3.8vw;
		  color: #ffffff;
		  margin-left: 5vw;
}
dt { margin-top: 5vw;
	 font-weight: bold;
}
dd { margin: 0;
}

header { background-color: #2d242e;
		 border-top: .1vw solid #2d242e;
		 border-bottom: 2vw solid #b47c68;
}
#header-logo { display: block;
			   width: 80vw;
			   height: auto;
			   margin: 0 auto;
			   margin-top: 5vw;
			   margin-bottom: 5vw;
}
nav { font-family: 'News Cycle', sans-serif;
	  font-size: 7vw;
}
nav ul { list-style-type: none;
		 margin: 0;
		 padding: 0;
}
nav a { text-decoration: none;
		color: #ffffff;
		text-shadow: .4vw .4vw 1.5vw #000000;
		display: block;
		background-color: #b47c68;
		border-top: .3vw solid #fb3b00;
		text-align: center;
}
nav li a:hover { background-color: #e0d7cb;
				 color: #000000;
				 font-weight: bold;
				 text-shadow: none;
}
#on-page { background-color: #a7a7a8;
		   color: #000000;
		   font-weight: bold;
		   text-shadow: none;
}
#on-page:hover { background-color: #e0d7cb;
				 color: #000000;
				 font-weight: bold;
}
main { border-top: .3vw solid #fb3b00;
	   padding-bottom: 4vw;
}
#flex-container { display: flex;
				  flex-direction: column;
}

#cell-home-1, #cell-home-2, #cell-home-3 { width: 100%;
}
#cell-home-4 { width: 100%;
			   border-top: .6vw solid #fb3b00;
}
#welcome-msg { width: 80%;
			   margin: 0 auto;
			   margin-top: 10vw;
}
#plug-in-logo { width: 80%;
				display: block;
				margin: 0 auto;
}
.title-box { display: flex;
			 justify-content: center;
			 align-items: center;
			 text-align: center;
			 background-color: #e0d7cb;
			 height: 15vw;
}		 
.hero-img { display: block;
			margin: 0 auto;
			width: 100%;
			height: auto;
}
.about-img, .play-img  { display: block;
						 margin: 0 auto;
						 margin-top: 3vw;
						 width: 100%;
						 height: auto;
}

#inquiries-button a { display: block;
					  background-color: #e0d7cb;
					  text-align: center;
					  width: 50vw;
					  padding: 5vw;
					  margin: 0 auto;
					  margin-top: 10vw;
					  margin-bottom: 10vw;
					  font-family: 'Roboto', sans-serif;
					  font-size: 5.6vw;
					  font-weight: bold;
					  color: #000000;
					  text-decoration: none;
					  border-radius: 4%;
					  border: .2vw solid #fb3b00;
}
#inquiries-button a:hover { background-color: #ffffff;
}

#cell-about-1, #cell-about-2, #cell-work-1, #cell-work-2, #cell-equipment-1, #cell-equipment-2, #cell-play-1, #cell-play-2, #cell-song-list-1, #cell-song-list-2 { padding: 0 5vw;
}

.client-img { width: 30%;
}

#player { width:100%;
		  color: blue;
}

#cell-contact { text-align: center;
}
.contact-img { display: block;
			   margin: 0 auto;
			   margin-top: 5vw;
			   width: 90%;
			   height: auto;
}
#cell-work-1 a { font-family: 'Roboto', sans-serif;
				 font-size: 3.8vw;
				 color: #00ccff;
}
#cell-contact a, #cell-play-1 a { font-family: 'Roboto', sans-serif;
								  font-size: 5vw;
								  color: #00ccff;
}

#cell-song-list-1 { margin-top: 5vw;
}

#cell-song-list-1 ul, #cell-song-list-2 ul { margin:0;
}

footer { display: flex;
	     flex-direction: column;
		 background-color: #2d242e;
		 border-top: .6vw solid #fb3b00;
		 text-align: center;
		 padding-top: 5vw;
}
footer p { font-size: 5vw;
		   margin: 0;
}
footer a { font-family: 'Roboto', sans-serif;
		   font-size: 5vw;
		   text-decoration: none;
		   color: #ffffff;
}
#icons-container { display:flex;
				   justify-content: space-around;
}
.fa { font-size: 8.5vw;
	  margin-top: 5vw;
	  margin-bottom: 3vw;
}
.fa:hover { color: #ffffff;
}
.fa-imdb { color: #f3ce13;
}
.fa-envelope-o { color: #fb3b00;
}
.fa-facebook-official { color: #3b5998;
}
.fa-twitter { color: #00aced;
}
.fa-instagram { color: #bc2a8d;
}
.fa-youtube-play { color: #bb0000;
}



@media only screen and (min-width: 683px) {
	h1 { font-size: 3.2vw;
		 line-height: 4vw;
	}
	#h1-about { font-size: 4.2vw;
				margin: 0;
				line-height: 5vw;
	}
	#h1-work, #h1-equipment, #h1-play, #h1-contact { font-size: 4.5vw;
													 margin-top: 4.5vw;
													 margin-bottom: 0;
	}	
	h2 { font-size: 3vw;
	}
	p, main li { font-size: 2.5vw;
	}
	main dl  { font-size: 2.5vw;
			   margin-left: 3.2vw;
	}
	dt { margin-top: 3vw;
	}
	header { display: flex;
			 flex-direction: column;
	}
	#header-logo { width: 50vw;
				   margin: 2vw 0 4vw 2vw;
	}
	nav { font-size: 2.5vw;
		  align-self: flex-end;
		  margin-right: 1vw;
	}
	nav li { display: inline-block;
			 width: 14vw;
	}
	nav a { border-bottom: none;
			border-radius: 10% 20% 0 0;
			padding: 1vw 0;
			text-shadow: .3vw .3vw .5vw #000000;
	}
	#flex-container { flex-direction: row;
					  flex-wrap: wrap;
					  justify-content: center;
	}
	#cell-home-1, #cell-home-2, #cell-home-3 { width: 33.33%;
	}
	#cell-home-4 { align-self: center;
				   border-top: .3vw solid #fb3b00;
	}
	#welcome-msg { width: 60%;
	}
	#plug-in-logo { width: 60%;
	}
	.title-box { padding: 0 5vw;
				 height: 10vw;
	}
	.about-img { margin-top: 7vw;
	}
	.play-img { margin-top: 0;
	}
	#inquiries-button a { font-size: 2.5vw;
						  width: 24vw;
						  padding: 2vw;
	}
	#cell-about-1 { width: 42.5%;
					padding: 5vw 2vw 3vw 5vw;
	}
	#cell-about-2 { width: 42.5%;
					padding: 12vw 5vw 3vw 2vw;
	}
	#cell-work-1, #cell-work-2, #cell-equipment-1, #cell-equipment-2, #cell-play-2 { width: 42.5%;
																					 padding: 0 2vw;
	}
	#cell-play-1 { width: 42.5%;
				   padding: 9vw 2vw 0 2vw;
	}
	#cell-work-1 a { font-size: 2.5vw;
	}
	#cell-contact a, #cell-play-1 a { font-size: 2.5vw;
	}
	
	.contact-img { margin-top: 5vw;
				   width: 75%;
	}
	
	#cell-song-list-1, #cell-song-list-2 { width: 42.5%;
										   padding: 0 2vw;
										   margin-top: 3vw;
	}
	footer { flex-direction: row;
			 justify-content: space-between;
			 align-items: center;
			 text-align: left;
			 padding: 5vw 3vw;
	}
	footer p { font-size: 3.5vw;
	}
	footer a { font-size: 3vw;
	}
	#icons-container { width: 50%;
	}
	.fa { font-size: 4vw;
		  margin: 0;
	}
}

@media only screen and (min-width: 1024px) {
	#wrapper { margin: 0 auto;
			   width: 1300px;
	}
	h1 { font-size: 2em;
	     line-height: 1em;
	}
	#h1-about { font-size: 2.7em;
				line-height: 1em;
	}
	#h1-work, #h1-equipment, #h1-play, #h1-contact { font-size: 2.8em;
	}
	h2 { font-size: 1.9em;
	}
	p, main li { font-size: 1.2em;
	}
	main dl { font-size: 1.2em;
			  margin-left: 2em;
	}
	dt { margin-top: 1.5em;
	}
	header { padding-right: 10em;
			 padding-left: 10em;
	}
	#header-logo { width: 30em;
				   margin: 1em 0 2.5em 1em;
	}
	nav { font-size: 1.3em;
	}
	nav li { width: 6em;
	}
	nav a { text-shadow: .15em .15em .3em #000000;
			border-top: .15em solid #fb3b00;
	}
	main { padding: 0 10em 3em 10em;
	}
	#cell-home-4 { border-top: .25em solid #fb3b00;
	}
	#welcome-msg { margin-top: 5em;
	}
	.title-box { padding: 0 3em;
				 height: 6.3em;
	}
	.about-img { margin-top: 4em;
	}
	
	#inquiries-button a { font-size: 1.5em;
						  width: 9em;
						  padding: 1em;
						  margin-top: 4em;
						  margin-bottom: 3em;
	}
	#cell-about-1 { width: 44%;
					padding: 5em 2em 3em 0;
	}
	#cell-about-2 { width: 44%;
					padding: 10em 0 3em 2em;
	}
	#cell-work-1, #cell-work-2, #cell-equipment-1, #cell-equipment-2, #cell-play-2 { padding: 0 2em;
	}
	#cell-play-1 { padding: 5.5em 2em 0 2em;
	}
	#cell-work-1 a { font-size: 1em;
	}
	#cell-contact a, #cell-play-1 a { font-size: 1.2em;
	}
	.contact-img { margin-top: 3em;
				   width: 75%;
	}
	#cell-song-list-1, #cell-song-list-2 { padding: 0 2em;
										   margin-top: 2.5em;
	}
	footer { padding: 2em 10em;
			 border-top: .25em solid #fb3b00;
	}
	footer p { font-size: 1.5em;
	}
	footer a { font-size: 1.5em;
	}
	.fa { font-size: 1.5em;
		  margin: 0;
	}
}