/** RESET **/
body {
	background-color: #1a1a1a;
}
body, h1, h2, h3, h4, p, a  {
	padding: 0%;
	margin: 0%;
}
a, ul, li {
	color: inherit;
	position: inherit;
	list-style-type: inherit;
	display: inherit;
	text-decoration: none;
}
a, li, h1, h2, h3, h4, p {
	font-family: sans-serif;

}
h1 {
	font-weight: bolder;
	text-align: center;
	color: #000;
	position: inherit;
}
/** ---------- NAVBAR ---------**/
@media all and (max-width: 849px) /** SMALL NAVBAR **/{
	.navbar-big{
		display: none;
	}
	.navbar-small{
		background-color: #1e1e1e;
		padding: 0px;
		margin: 0px;
	}
	.navbar-small h1 {
		color: #fff;
		padding: 10px;
	}
	.navbar-small ul {
		margin: 0px;
		padding: 0px;
		list-style-type: none;
	}
	.navbar-small ul a {
		padding: 0px;
		background-color: #3e3e3e;
		border-bottom: 2px solid #222;
	}
	.navbar-small li {
		color: #eee;
		padding: 8px;
	}
}

@media all and (min-width: 850px) /** BIG NAVBAR **/{
	.navbar-small {
		display: none;
	}
	.navbar-master {
		display: flex;
		justify-content: center;
		width: 100%;
		background-color: #fff;
		margin: 0px;
		list-style-type: none;
		align-items: center;
	}
	.navbar-title {
		width: 50%;
	}
	.navbar-right, .navbar-left {
		list-style: none;
		display: inline;
		text-decoration: none;
		text-align: center;
 		margin: 0;
  		padding: 0;
  		overflow: hidden;
		top: 0;
		width: 25%;
	}
	.navbar-left-list {
		float: left;
		padding: 10px;
		border-right: 1px solid black;
	}
	.navbar-right-list {
		float: right;
		padding: 10px;
		border-left: 1px solid black;
	}
	.navbar-master li:hover {

		background-color: #dedede;
	}
	header {
		border-bottom: 10px solid #999;
	}
}
/** ----- BUTTONS ------ **/
.button {
	background-color: #fff;
  	transition: 0.2s;
	border-radius: 30px;
	margin: 24px auto;
	padding: 48px 0;
}
.button:hover {	
	border-radius: 20px;
  	transition: 0.2s;
}
@media all and (min-width: 850px) /** Button Big **/{
	.button {
		width: 450px;
	}
}
@media all and (max-width: 849px) /** Button Small **/{
	.button {
		width: 350px;
	}
}
.vote-button {color: #4B0082cc;}
.vote-button:hover {color: #4B0082cc;}
/** -----BANNERS------ **/
.banner-container {	
	background-position: top;
	text-align: center;
	color: #fff;
}

.banner-container h2 {
	color: #fff;
}
.banner-container p {
	font-family: 'Times New Roman', Times, serif;
	font-style: italic;
	color: #bbb;
}

/** Homepage Banner **/
.homepage-banner {
	background-image: url('../img/home-banner.jpg');	
	background-position: top;
	background-size: cover;
	background-repeat: no-repeat;
	border-bottom: 15px solid #555;	
	padding: 25vh 0;
	padding-bottom: 25%;
}
.homepage-banner p, .homepage-banner h2, .homepage-banner h3 {
	margin-left: 5vw;
	font-size: 1.5em;
	text-align: left;
	width: 40%;
}

/** HOLIDAY HOMEPAGE BANNER **/
.holiday-banner {
	background-image: url('../img/2020-banner.jpg');
	border-bottom: 15px solid #555;	
	text-align: left;
}
.holiday-banner p, .holiday-banner h2, .holiday-banner h3 {	
	font-size: 1.5em;
	color: #fff;
}	
@media all and (min-width: 850px) /** HOME BANNER BIG **/{
	.holiday-banner {
		padding: 20vh 0;
		padding-bottom: 25%;	
		background-position: unset;
	}
	.holiday-banner p, .holiday-banner h2, .holiday-banner h3 {		
		width: 300px;
		margin-left: 5vh;
		margin-top: 24px;
	}	
}
@media all and (max-width: 849px) /** HOME BANNER SMALL **/{
	.holiday-banner {
		padding: 2vh 0;
		padding-bottom: 25%;	
		background-position: left;
	}
	.holiday-banner p, .holiday-banner h2, .holiday-banner h3 {
		width: 300px;
		margin-left: 2vh;
		margin-top: 24px;
	}
}

/** Coming Soon Banner **/
.coming-soon-banner {
	padding: 35vh 0;
	text-align: center;
	font-size: 250%;
}
.coming-soon-banner p {
	font-size: 100%;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	line-height: 100%;
	font-style: normal;
	color: #fff;
	padding-bottom: 15px;
}
.coming-soon-banner sup, .coming-soon-banner sub {
}
.coming-soon-banner h3 {
	font-style: italic;
	border-bottom: 3px solid #f9f9f9;
	width: 75vw;
	margin: auto;
	padding-bottom: 7px;
}
.coming-soon-banner div {
	background-color: #777e;
	padding: 10px 0;
}

/**Nomination Page Banner **/
.banner-nominate-open {
	background-image: url('../img/record-banner.jpg');
}

/**Voting Page Banner **/
.banner-vote-open {
	background-image: url('../img/microphone-banner.jpg');
}
/** --------- LINKS --------**/
.link-container {
	padding: 15vh 0;
	margin: 0px;
	opacity: .65;
	filter: alpha(opacity=85);
	background-position: top;
  	background-repeat: no-repeat;
  	background-size: cover;
  	transition: 0.2s;
  	font-family: sans-serif;
	text-decoration: none;
	color: #fff;
}
.link-container:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
.link-container h2 {	
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	color: #ffffff;
	margin: auto;
	font-size: 15vw;
	opacity: 100;
	text-align: center;
}
.link-container p {
	font-size: 150%;
	text-align: center;
	
}
.nominate {
	background-image: url('../img/nominate.jpg');
	/*background-color: #ffd000;*/
}
.vote {	
	background-image: url('../img/vote.jpg');
	/*background-color: #c414ff;*/
}
.awards {
	background-image: url('../img/guitar-banner.jpg');
}
.library {
	background-image: url('../img/recordshop-banner.jpg');
}
/* ---- COVERS ----- */

.cover {
	margin: 15vh 0;
	padding: 20px 5vw;
	border-top: 10px solid gray; 
	border-bottom: 10px solid gray; 
	text-align: center;
}
.cover h3 {
	font-size: 56px;
	font-weight: 700;
}
.cover h4 {
	font-size: 36px;
}
.cover p {
	font-size: 125%;
}

/** ---------FOOTER ---------- **/
@media all and (min-width: 850px) /** FOOTER NAV BIG **/{
footer a, footer p, footer ul, footer li {
	margin: 0;
	padding: 0;
}
footer {
	background-color: #eee;
	height: 8vh;
	border-top: 10px solid #555;
	overflow: auto;
}
footer p {
	color: #333;
	font-weight: 300;
	font-size: 80%;
	text-align: right;
	padding-right: 20px;
}
.footernav {
	margin: 3px;
}
.footernav ul {	
	padding-left: 20px;
	list-style-type: none;
	display: inline;
	overflow: auto;
}
.footernav li {
	text-align: center;
	border-left: 1px solid #000;
	padding-left: 20px;
	padding-right: 20px;
}
.footernav a:last-child {
	border-right: 1px solid #000;
}
.footernav li:hover {
	color: #49008a;
}
}
@media all and (max-width: 849px) /** FOOTER NAV SMALL**/{
	footer {
		background-color: #444;
		border-top: 20px solid black;
	}
	.footernav ul{
		list-style-type: none;
		padding: 0px 0px 0px 24px;
	}
	.footernav li {
		padding: 4px;
		color: #ccc;
	}
	footer p {
		text-align: center;
		padding: 10px;
		color: #777;
	}
}

/** ------ NORMAL MAIN -------**/
.normal .title {
	text-align: center;
	color: #fff;
	padding: 8px 0;
	border-bottom: 10px solid #333;
}
.normal .title h2 {	
	font-size: 175%;
}
.normal .title p {
	font-style: italic;
}
.normal-background {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;	
	padding: 0.1px;
}
.normal-container {	
	margin-left: 5vw;
	margin-right: 5vw;
	width: auto;
	background-color: #fff;
	border-left: 10px solid #999;
	border-right: 10px solid#999;
}

/**-----AWARDS MAIN------**/
.awards-title {
	background-color: darkblue;
}
.awards-container {
	background-image: url('../img/sheetmusic-banner.jpg');
}
.awards-img {
	width: 200px;
	background-size: cover;
	border-radius: 50px;
}
.awards-inner {
	padding: 2vh 3vw 1vh 2vw;	
}
.awards-inner:hover {
	background-color: #9cf;
}

/** -----LIBRARY ELEMENTS -----**/
.library-title {
	background-color: purple;
}
.library-bg {
	background-image: url('../img/cassette-img.jpg');
}
.library-container {
	margin: 0 auto;
	width: 94vw;
	background-color: #fff;	
	border-left: 5px solid #999;;
	border-right: 5px solid #999;
}
.library-container h3 {
	padding: 8px;
	text-align: center;
	padding-top: 12px;
}
.library-container table
{
	margin: auto;
	padding-bottom: 12px;
	width: 92vw;
	text-align: left;
}
.library-container table thead th {
	width: 33%;
	background-color: #e1e1e1;
	text-align: center;
}
.library-container table tbody{
	font-family: sans-serif;
	background-color: #f2f2f2;
}
.library-container table tbody td {
	padding: 0 10px;
}
/* Library Center Alignment */
/*
.library-container table tbody td {
	text-align: center;
}
.library-container table tbody td a{
	display: flex; /* turns on flexbox 
	justify-content: center; /* aligns items vertically 
	align-items: center; /* aligns items horizontally 
} */
.library-container td a:hover {
	color: darkviolet;
}
.winner {
	background-color: gold;
}

/** ---- NOMINATE MAIN  ----- **/
.nominate-title {
	background-color: #ffd000;
}
.nominate-bg {
	background-image: url('../img/nominate-banner.jpg');
}
.nominate-container  {
	margin: auto;
	text-align: center;
}
@media all and (min-width: 850px) {
	.nominate-container iframe {
		width: 850px;
		height: 2400px;
		/*background-color: #f2e8bf*/;
	}
}
@media all and (max-width: 849px)
{
	.nominate-container iframe {
		width: 350px;
		height: 3200px;
	}

}
.nominate-container p{
	color: #fff;
	text-align: center;
	margin: 10px;
}
.nominate-container a:hover{
	color: mediumorchid;
}
.nominate-cover {
	background-color: #FBD749cc;
	color: #444
}

/** VOTE ELEMENTS **/
.vote-title {
 background-color: indigo;
}
.vote-bg {
	background-image: url('../img/microphone-banner.jpg');
}
.vote-cover {
	background-color: #4B0082cc;
	color: #fff;
}

/** INFO ELEMENTS **/
.info-container h2{
	font-family: 'Candara', serif;
	color: #fff;
	text-align: center;
}
.info-container .countdown-container {
	background-image: url('../img/purpleguitar-banner.jpg');
	background-repeat: none;
	background-size: cover;
	background-position: center;
	padding: 10vh;
	font-size: 5vw;
	border-bottom: 20px solid #888;
}
.info-container .details-container {
	background-image: url('../img/info-details-banner.jpg');
	background-position: center;
	background-size: cover;
}
.info-container .details-container-cover, .info-container .itinerary-container {
	margin: auto;	
	border-left: 15px solid #ccc;
	border-right: 15px solid #ccc;
	height: 100%;
	background-color: #fff5;
}
.info-container .details-container-cover p, .info-container .itinerary-container p {
	font-family: monospace;
	text-align: center;
	color: #000;
}
.info-container .details-container-cover h5 {
	text-align: center;
	font-size: 20px;
	margin: 10px;
	color: #fff;
}
.info-button {
	font-family: sans-serif;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	background-color: orange;
	width: 50%;
}
.info-title {
	background-color: #ff7000cc;
	color: #fff;
}
.info-container .title {
	font-weight: 900;
}
.info-container .minor {
	font-size: 65%;
	font-weight: 100;
}

@media all and (min-width: 850px) {
.info-container .details-container-cover, .info-container .itinerary-container {	
		font-size: 250%;	
		width: 50vw;
		padding: 15vh 0 0 0;
	}
	.info-container .itinerary-container {
		padding-bottom: 5vh;
	}
}
@media all and (max-width: 849px)
{
	.info-container .details-container-cover, .info-container .itinerary-container{
		font-size: 170%;
		width: 80vw;
		padding: 5vh 0 0 0;
	}
	.info-container .itinerary-container {
		padding-bottom: 5vh;
	}
}