@font-face {
  font-family: Headings;
  src: url("../fonts/Andovine.otf");
}
@font-face {
  font-family: textBold;
  src: url("../fonts/Violina Bold.ttf");
}
@font-face {
  font-family: textRegular;
  src: url("../fonts/Violina Regular.ttf");
}

html {
	/*background-color: black;*/
}

body {
	width: 100%;
	font-family: "textRegular";
	background-image: url("../img/background.jpg");
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
	margin: 0;
	min-width: 320px;
}

@keyframes logoPulse {
	0% {transform: scale(1)}
	25% {transform: scale(1.03)}
	50% {transform: scale(1)}
	75% {transform: scale(0.97)}
	100% {transform: scale(1)}
}

@keyframes loading {
	0% {color:blue}
	50% {color:red}
	100% {color:green}
}

#homeLogo {
	margin:0 auto;
	padding: 30px 0;
	width: 30%;
}

#homeLogo img {
	width: 100%;
}

#homeLogo img:hover {
	animation: logoPulse 0.2s linear infinite;
}

.content {
	width: 80%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	background-color: rgba(0,0,0,.5);
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
	border-radius: 50px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	position: relative;
}

@keyframes growShrink {
	0% {transform:scale(1) translateX(0) translateY(0);}
	25% {transform:scale(1.2) translateX(15px) translateY(15px);}
	50% {transform:scale(1) translateX(30px) translateY(30px);}
	75% {transform:scale(0.8) translateX(15px) translateY(15px);}
	100% {transform:scale(1) translateX(0) translateY(0);}
}
@keyframes growShrinkTwo {
	0% {transform:scale(1) translateX(0) translateY(0);}
	25% {transform:scale(1.4) translateX(30px) translateY(30px);}
	50% {transform:scale(1) translateX(60px) translateY(60px);}
	75% {transform:scale(0.6) translateX(30px) translateY(30px);}
	100% {transform:scale(1) translateX(0) translateY(0);}
}

.circle:nth-child(odd) {
	opacity: .3;
	position:fixed;
	animation: growShrink 20s infinite;
	animation-timing-function: linear;
	z-index:-100000;
}
.circle:nth-child(even) {
	opacity: .3;
	position:fixed;
	animation: growShrinkTwo 15s infinite;
	animation-timing-function: linear;
	animation-direction: reverse;
	z-index:-100000;
}
#circle1 {
	width:89px;
	height:89px;
	background-color: blue;
	border-radius: 50%;
	top:13%;
	left:48%;
	animation-delay: 0s;
}
#circle2 {
	width:71px;
	height:71px;
	background-color: purple;
	border-radius: 50%;
	top:13%;
	left:48%;
	animation-delay: -0.2s;
}
#circle3 {
	width:93px;
	height:93px;
	background-color: pink;
	border-radius: 50%;
	top:15%;
	left:73%;
	animation-delay: -0.4s;
}
#circle4 {
	width:63px;
	height:63px;
	background-color: red;
	border-radius: 50%;
	top:60%;
	left:84%;
	animation-delay: -0.6s;
}
#circle5 {
	width:55px;
	height:55px;
	background-color: orange;
	border-radius: 50%;
	top:30%;
	left:12%;
	animation-delay: -0.8s;
}
#circle6 {
	width:71px;
	height:71px;
	background-color: yellow;
	border-radius: 50%;
	top:69%;
	left:42%;
	animation-delay: -1s;
}
#circle7 {
	width:65px;
	height:65px;
	background-color: green;
	border-radius: 50%;
	top:44%;
	left:23%;
	animation-delay: -1.2s;
}
#circle8 {
	width:82px;
	height:82px;
	background-color: aqua;
	border-radius: 50%;
	top:2%;
	left:14%;
	animation-delay: -1.4s;
}
#circle9 {
	width:92px;
	height:92px;
	background-color: maroon;
	border-radius: 50%;
	top:73%;
	left:94%;
	animation-delay: -1.6s;
}
#circle10 {
	width:86px;
	height:86px;
	background-color: lime;
	border-radius: 50%;
	top:29%;
	left:40%;
	animation-delay: -1.8s;
}
#circle11 {
	width:89px;
	height:89px;
	background-color: blue;
	border-radius: 50%;
	top:22%;
	left:24%;
	animation-delay: -2s;
}
#circle12 {
	width:71px;
	height:71px;
	background-color: purple;
	border-radius: 50%;
	top:55%;
	left:36%;
	animation-delay: -2.2s;
}
#circle13 {
	width:93px;
	height:93px;
	background-color: pink;
	border-radius: 50%;
	top:73%;
	left:7%;
	animation-delay: -2.4s;
}
#circle14 {
	width:63px;
	height:63px;
	background-color: red;
	border-radius: 50%;
	top:20%;
	left:24%;
	animation-delay: -2.6s;
}
#circle15 {
	width:55px;
	height:55px;
	background-color: orange;
	border-radius: 50%;
	top:98%;
	left:37%;
	animation-delay: -2.8s;
}
#circle16 {
	width:71px;
	height:71px;
	background-color: yellow;
	border-radius: 50%;
	top:74%;
	left:70%;
	animation-delay: -3.1s;
}
#circle17 {
	width:65px;
	height:65px;
	background-color: green;
	border-radius: 50%;
	top:61%;
	left:34%;
	animation-delay: -3.3s;
}
#circle18 {
	width:82px;
	height:82px;
	background-color: aqua;
	border-radius: 50%;
	top:29%;
	left:10%;
	animation-delay: -3.5s;
}
#circle19 {
	width:92px;
	height:92px;
	background-color: maroon;
	border-radius: 50%;
	top:28%;
	left:57%;
	animation-delay: -3.7s;
}
#circle20 {
	width:86px;
	height:86px;
	background-color: lime;
	border-radius: 50%;
	top:31%;
	left:67%;
	animation-delay: -3.9s;
}

.info {
	padding: 20px;
	color: white;
}

.info h1 {
	font-family: "Headings";
	text-align: center;
	font-size: 42px;
}

.info h2 {
	font-family: "Headings";
	text-align: center;
	font-size: 38px;
}

.info h3 {
	font-family: "Headings";
	text-align: center;
	font-size: 28px;
}

#overview {
	width:80%;
	height:100%;
	margin: 0 auto;
	margin-top: 200px;
	background-color: green;
	position: relative;
	z-index: 1
}

#overview .pageBlock {
	width: 18%;
	height: 200px;
	display: block;
	float: left;
	text-align: center;
	margin: 1%;
	opacity: .8;
	transition: 0.3s;
	color: white;
	border-radius: 20px;
	mix-blend-mode: multiply;
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
}

#overview .pageBlock:hover {
	opacity: 1;
	height:400px;
	font-size: 18px;
	box-shadow: 0px 0px 100px 0px rgba(255,255,0,0.75);
	transform: scale(1.1);
}

#overview .pageBlock:active {
	transform: scale(1.05);
}

#overview .pageBlock h2 {
	mix-blend-mode:difference;
	font-family: "Headings";
}

@keyframes blockWave {
	0% {transform: scale(1)}
	40% {transform: scale(1)}
	42% {transform: scale(1.1)}
	44% {transform: scale(1)}
	46% {transform: scale(.95)}
	48% {transform: scale(1)}
	100% {transform: scale(1)}
}

#trending {
	background-image: url("../img/background2.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -2s;
}
#newReleases {
	background-image: url("../img/background3.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.95s;
}
#topRated {
	background-image: url("../img/background4.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.9s;
}
#featured {
	background-image: url("../img/background5.jpg");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.85s;
}
#tour {
	background-image: url("../img/background6.png");
	animation: blockWave 10s linear infinite;
	animation-delay: -1.8s;
}

nav {
	width:100%;
	height:40px;
	position: sticky;
	top: 0;
	background-color:black;
	margin: 0;
	padding: 0;
	z-index: 1;
	vertical-align: middle;
}

nav .menu {
	visibility: hidden;
	color: white;
	font-size: 26px;
}

nav ul {
	width: 100%;
	height: 100%;
	list-style-type: none;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

nav ul li{
	float:left;
	text-align: center;
	width: 16.66666666666666%;
	vertical-align: middle;
}

nav ul li a {
	display: block;
	text-decoration: none;
	width: 100%;
	height: 40px;
	color: white;
	font-size: 26px;
	transition: 0.3s;
	mix-blend-mode: difference;
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
}

nav ul li .active {
	background-image: url("../img/background3.jpg");
	mix-blend-mode: difference;
	box-shadow: 0px 0px 10px 0px rgba(255,255,0,0.75);
	font-family: "textBold";
}

nav ul li a:hover {
	background-image: url("../img/background3.jpg");
	height: 80px;
	mix-blend-mode: difference;
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75);
	font-family: "textBold";
}

#filter {
	padding: 20px;
}

#filter form input[type="text"] {
	border-radius: 5px;
	width:100px;
	border: 0;
	height:19px;
	border: solid black 1px;
}

#filter form input[type="submit"] {
	font-size: 13px;
	background-color: white;
	border-radius: 5px;
	border: solid black 1px;
}

#search {
	padding: 20px;
	float: right;
	width:auto;
}

#search input[type="text"] {
	border-radius: 5px;
	width:100px;
	border: 0;
	height:19px;
	border: solid black 1px;
	transition: 0.3s;
}

#search input[type="text"]:hover {
	width:300px;
}

#search input[type="text"]:focus {
	width:300px;
}

#search button {
	font-size: 13px;
	background-color: white;
	border-radius: 0 5px 5px 0;
	border: solid black 1px;
	margin-left:-35px;
}

#search button:hover {
	cursor: pointer;
}

.flex-container {
	width: 1200px;
	margin: 0 auto;
	padding-left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

@media screen and (max-width: 520px) { .flex-container { width: 240px; } }
@media screen and (min-width: 521px) and (max-width: 950px) { .flex-container { width: 480px; } }
@media screen and (min-width: 951px) and (max-width: 1200px) { .flex-container { width: 720px; } }
@media screen and (min-width: 1201px) and (max-width: 1500px) { .flex-container { width: 960px; } }

@keyframes zoom-in {
	0% {transform:scale(.8);transform: translateX(-20px);}
	100% {transform:none;transform: translateX(0);}
}

.animated {
	animation: .5s zoom-in;
}

#errorMessage {
	color:white;
	text-align: center;
	z-index: 100000;
	position:relative;
	top:0;
}

.album {
	background-color: rgba(0,0,0,0.75);
	width: 200px;
	margin: 20px;
	text-align: center;
	color: white;
	border-radius: 10px;
	transition: .3s;
	box-shadow: 0px 0px 10px 0px rgba(200,200,200,0.75);
	position: relative;
}

.album img {
	border-radius: 10px 10px 0 0;
	transition: .6s
}

.album .review {
	width: 200px;
	background-color: rgba(0,0,0,.0);
	position: relative;
	top:-204px;
	height: 200px;
	border-radius: 10px 10px 0 0;
	transition: 0.3s;
	margin-bottom: -204px;
}

.album .review button {
	visibility: hidden;
	background-color: transparent;
	border: 0;
	transition: 0.3s;
	position: relative;
	top:60px;
}

.album .review button img {
	visibility: hidden;
	transition: 0.3s;
}

.album .review p {
	visibility: hidden;
}

.album .review iframe {
	color: white;
	visibility: hidden;
}

.album .review audio {
	color: white;
	visibility: hidden;
	width: 200px;
	height: 200px;
}

.album:hover .review {
	background-color: rgba(0,0,0,.7);
}

.album:hover .review p {
	visibility: visible;
}

.album:hover .review iframe {
	visibility: visible;
}

.album:hover .review button {
	visibility: visible;
}

.album:hover .review button img {
	visibility: visible;
}

.album:hover {
	transform: scale(1.1);
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75);
}

@keyframes playAnim {
	0% {box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75);}
	50% {box-shadow: 0px 0px 50px 0px rgba(255,255,0,0.75)}
	100% {box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75)}
}

.playing p {
	visibility: visible !important;
}
.playing {
	transform: scale(1.1) !important;
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75) !important;
	animation: playAnim 2s ease-in-out infinite;
}
.playing button {
	visibility: visible !important;
	z-index: 2;
}
.playing button img {
	visibility: visible !important;
}

@keyframes topB {
	0% {right:100%;opacity: 1;}
	10% {right:90%;opacity: 1;}
	20% {right:80%;opacity: 1;}
	30% {right:70%;opacity: 1;}
	40% {right:60%;opacity: 1;}
	50% {right:50%;opacity: 1;}
	60% {right:40%;opacity: 1;}
	70% {right:30%;opacity: 1;}
	80% {right:20%;opacity: 1;}
	90% {right:10%;opacity: 1;}
	100% {right:0%;opacity: 1;}
}
@keyframes rightB {
	0% {height:0px;opacity: 1;}
	10% {height:20px;opacity: 1;}
	20% {height:40px;opacity: 1;}
	30% {height:60px;opacity: 1;}
	40% {height:80px;opacity: 1;}
	50% {height:100px;opacity: 1;}
	60% {height:120px;opacity: 1;}
	70% {height:140px;opacity: 1;}
	80% {height:160px;opacity: 1;}
	90% {height:180px;opacity: 1;}
	100% {height:200px;opacity: 1;}
}
@keyframes bottomB {
	0% {right:100%;opacity: 1;}
	10% {right:90%;opacity: 1;}
	20% {right:80%;opacity: 1;}
	30% {right:70%;opacity: 1;}
	40% {right:60%;opacity: 1;}
	50% {right:50%;opacity: 1;}
	60% {right:40%;opacity: 1;}
	70% {right:30%;opacity: 1;}
	80% {right:20%;opacity: 1;}
	90% {right:10%;opacity: 1;}
	100% {right:0%;opacity: 1;}
}
@keyframes leftB {
	0% {height:0px;opacity: 1;}
	10% {height:20px;opacity: 1;}
	20% {height:40px;opacity: 1;}
	30% {height:60px;opacity: 1;}
	40% {height:80px;opacity: 1;}
	50% {height:100px;opacity: 1;}
	60% {height:120px;opacity: 1;}
	70% {height:140px;opacity: 1;}
	80% {height:160px;opacity: 1;}
	90% {height:180px;opacity: 1;}
	100% {height:200px;opacity: 1;}
}

.borderTop {
	border-top: 10px solid gold;
	/*box-shadow: 0px 0px 20px 0px rgba(255,255,255,0.75);*/
	position: absolute;
	left: 0;
	right:100%;
	top:0;
	height:190px;
	opacity: 0;
	animation: topB 15s linear 0.1s forwards;
	border-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	z-index: 1;
}
.borderRight {
	border-right: 10px solid gold;
	/*box-shadow: 0px 0px 20px 0px rgba(255,255,255,0.75);*/
	position: absolute;
	top: 0;
	height:190px;
	right:0;
	left:0;
	opacity: 0;
	animation: rightB 15s linear 15.1s forwards;
	border-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	z-index: 1;
}
.borderBottom {
	border-bottom: 10px solid gold;
	/*box-shadow: 0px 0px 20px 0px rgba(255,255,255,0.75);*/
	position: absolute;
	right: 0;
	left:0;
	height:190px;
	top:0;
	opacity: 0;
	animation: bottomB 15s linear 15.1s forwards;
	border-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	z-index: 1;
}
.borderLeft {
	border-left: 10px solid gold;
	/*box-shadow: 0px 0px 20px 0px rgba(255,255,255,0.75);*/
	position: absolute;
	height: 0;
	top:0;
	left:0;
	right:0;
	opacity: 0;
	animation: leftB 15s linear 0.1s forwards;
	border-radius: 10px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	z-index: 1;
}

.album h3 {
	font-size: 28px;
	
	font-family: "textBold";
}

.album .artistName::before {
	content: "by ";
	font-style: italic;
}

.star:before {
	content: "\2605";
}

.checked {
	color: gold;
}

#footer {
	height: 100px;
	width: 100%;
}
#footer p {
	color: grey;
	text-align: center;
	margin-top: -120px;
	margin-bottom: 20px;
}

.logo {
	width: 400px;
	margin: 0 auto;
	position: relative;
	top:150px;
}

.logo img {
	width: 400px;
	padding-bottom: 50px;
	opacity: 0;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

#loading {
	width:100%;
	height:100%;
	text-align: center;
}

#loadLogo {
	width: 186px;
	height: 49px;
	animation: logoPulse 0.2s linear infinite;
}

#loadP {
	text-align: center;
	color:white;
}

#Calendar {
	width:80%;
	display:none;
	margin:0 auto;
	background-color: rgba(245,245,220,0.5);
	border-radius: 20px;
	color:black;
}

#Calendar table {
	color: white;
	width:100%;
}

#Calendar table tr {
	height:100px;
}

#Calendar table td {
	border: 1px solid white;
	vertical-align: top;
	width:14%;
}

#Calendar table td b {
	text-align: center;
	display: inline-block;
}

.calItem:hover {
	cursor: pointer;
}

#calOverlay {
	width:200px;
	display:none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -100px;
	z-index: 11;
}

#pageOverlay {
	position: fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.7);
	display: none;
	z-index: 10;
}

.loginBtn {
	width:16.66666%;
	display: block;
	height: 80px;
	color: white;
	font-size: 26px;
	transition: 0.3s;
	font-family: textRegular;
	position: absolute;
	right:0;
	top:0;
	text-align: right;
	background-color:black;
	padding:0;
	margin:0;
}

.loginBtn li {
	display: block;
	list-style-type: none;
	height: 40px;
	width:100%;
	padding:0;
	margin:0;
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
	text-align: right;
}

.loginBtn li a {
	text-align: right;
	display: block;
	text-decoration: none;
	width: 100%;
	height: 40px;
	color: white;
	font-size: 26px;
	transition: 0.3s;
	mix-blend-mode: difference;
	box-shadow: 0px 0px 10px 0px rgba(255,255,255,0.75);
}

.loginBtn li a:hover {
	background-image: url("../img/background3.jpg");
	mix-blend-mode: difference;
	box-shadow: 0px 0px 20px 0px rgba(255,255,0,0.75);
	font-family: "textBold";
}

#signup {
	width:60%;
	margin:0 auto;
}

#signup input {
	width:100%;
	height:50px;
	border-radius: 10px;
	text-align: center;
	margin-bottom:10px;
	font-size:24px;
}

#signup input:focus {
	background-color: gold;
}

#signup input[type="submit"] {
	width:50%;
	display:block;
	margin: 0 auto;
}

#signup input[type="submit"]:hover {
	border-style: inset;
	cursor: pointer;
	background-color: gold;
}

@media only screen and (max-width: 470px) {
	nav {
		height:120px;
	}
	nav ul li {
    	width:50%;
  	}
	nav ul li a:hover {
		height: 40px;
	}
	#homeLogo {
		width:80%;
	}
	#overview .pageBlock h2 {
		writing-mode: vertical-rl;
		margin-right:20px;
		padding-top:20px;
	}
}

@media only screen and (max-width: 600px) and (min-width: 470px) {
	.content {
		width:100%;
	}
	#homeLogo {
		width:80%;
	}
	#overview .pageBlock h2 {
		writing-mode: vertical-rl;
		padding:5px;
	}
	nav {
		height:80px !important;
	}
	
	nav ul {
		height:80px !important;
	}
	
	nav ul li {
    	width:33.33333333333%;
		height: 40px !important;
  	}
	nav ul li a {
		height: 40px !important;
  	}
	nav ul li a:hover {
		height: 40px !important;
	}
}

@media only screen and (max-width: 840px) and (min-width: 600px) {
	nav {
		height:80px !important;
	}
	
	nav ul {
		height:80px !important;
	}
	
	nav ul li {
    	width:33.33333333333%;
		height: 40px !important;
  	}
	nav ul li a {
		height: 40px !important;
  	}
	nav ul li a:hover {
		height: 40px !important;
	}
	#homeLogo {
		width:50%;
	}
	#overview .pageBlock h2 {
		writing-mode: vertical-rl;
		padding:5px;
	}
}

@media only screen and (max-width: 1180px) and (min-width: 840px) {
	nav {
		height:60px;
	}
	
	nav ul li {
		height:60px;
	}
	
	nav ul li a {
		height:60px;
	}
	nav ul li a:hover {
		height: 80px;
	}
}