a{
	text-decoration:none;
	color:inherit;
}
#merch{
	position:relative;
	margin-top:60px;
	top:200px;
	border-top:2px solid gray;
	width:100%;
}
#merch h1{
	font-family:'Pacifico',cursive;
	margin-top:-20px;
	margin-left:40%;
	background-color:white;
	width:10%;
}
#music{
	position:relative;
	top:20px;
	border-top:2px solid gray;
}
#music h1{
	font-family:'Pacifico',cursive;
	margin-top:-24px;
	margin-left:20%;
	background-color:white;
	width:57%;
}
.shop-item{
	width:30%;
	overflow:hidden;
	display:inline-block;
	min-width:150px;
}
.shop-item-wrapper{
	width:96%;
	height:200px;
}
.shop-item-wrapper img:hover{
	cursor:pointer;
	transform:scale(1.2);
}
.shop-item-wrapper:hover>.left-span,.shop-item-wrapper:hover>.right-span{
	left:0%;
	padding-bottom:10px;
}
.shop-item-wrapper img{
	width:100%;
	transition:2s;
}
.left-span{
	font-size:80%;
	transition:2s;
	z-index:3;
	position:relative;
	left:-100%;
	background-color:black;
	color:white;
	padding:5%;
	font-family:'Slabo 27px',sans-serif;
	line-height:240%;
}
.right-span{
	z-index:3;
	transition:2s;
	position:relative;
	left:110%;
	transform:translateX(200px);
	background-color:black;
	color:white;
	padding:5%;
	font-family:'Slabo 27px',sans-serif;
}

body{
	margin:0;
	width:100%;
	padding:0;
	height:auto;
	overflow-x:hidden;
}
header{
	z-index:1;
}
p:hover,h3:hover{
	cursor:pointer;
	color:navy;
}
.top-header{
	background-color:#ffdb00;
	height:100px;
	border-bottom:3px solid black;
}
section{
	position:relative;
	top:-200px;
	margin-left:18%;
	width:50%;
	float:left;
	display:inline;
	z-index:2;
}
aside{
	width:20%;
	margin-left:20px;
	float:left;
	display:inline;
	width:20%;
	overflow:hidden;
	position:relative;
	top:-150px;
	z-index:1;
}
aside img{	
	width:100%;

}
.mobile-menu{
	width:100%;
	margin:0;
	display:none;
}
.mobile-menu:hover > ul {
	display:block;
}
.mobile-menu h3{
	position:relative;
	background-color:#ffdb00;
	color:white;
	font-family:'Orator Std',sans-serif;
	padding:10px;
	text-align:center;
	
}
.mobile-menu ul{
	padding:0;
	display:none;
}
.mobile-menu ul li{
	
	width:100%;
	position:relative;
	display:block;
	padding-top:20px;
	padding-bottom:20px;
	font-size:20px;
	background-color:black;
	color:white;
	font-family:'Orator Std',sans-serif;
	text-align:center;
}
.most-read{
	border-top:10px solid black;
}
.most-read h1{
	margin-top:3%;
	font-family:'Playfair Display SC',serif;
}
.most-read ul{
	list-style-type:none;
	margin-left:-35px;
}
.most-read ul li:hover{
	cursor:pointer;
	color:navy;
}
.most-read ul li{
	font-family:'Crete Round',serif;
	padding-bottom:13%;
	border-bottom:3px dotted black;
}
.most-read ul li img{
	padding-right:1%;
	float:left;
	width:35%;
}
.desktop-menu ul{
	list-style-type:none;
	z-index:1;
	position:absolute;
	top:3%;
	left:20%;
	width:auto;
	z-index:2;
}
.desktop-menu  ul li {
	background: rgba(0,0,0,0.7);
	color:white;
	background-size: 400% 400%;	
	display:inline;
	font-family:'Orator Std',sans-serif;
	font-size:130%;
	padding:10px;
	margin:15px;
	transition: 0.5s;
	border:3px solid rgba(0,0,0,0.5);
}
.desktop-menu ul li:hover{
	background-color:transparent;
	color:black;
	cursor:pointer;
}
footer{
	position:relative;
	top:150px;
	clear:both;
	width:100%;
	background-color:#ffdb00;
	height:200px;
	padding:20px;
	border-top:4px solid black;

}
.subscribe h1{
	font-size:130%;
	font-family:'Playfair Display SC',serif;
	border-top:10px solid black;
}
.subscribe input{
	width:60%;
	height:30px;
	font-size:120%;
}
.subscribe button{
	width:30%;
	height:35px;
	border:none;
	background-color:rgba(0,0,0,0.6);
	color:white;
	font-weight:bold;
	transition:0.5s;
}
.subscribe button:hover{
	cursor:pointer;
	background-color:rgb(0,0,0);
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
@keyframes AnimationName { 
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}

.shop-block{
	width:50%;
	height:400px;
	position:relative;
	z-index:1;
	float:left;
	overflow:hidden;
	clear:both;
}
.shop-block:hover img{
	cursor:pointer;
	top:-400px;
}
.shop-block:hover > .shop-block-content{
	top:-425px;
}
.shop-block:hover{
	cursor:pointer;
}
.shop-block-content{
	transition:0.5s;
	position:relative;
	top:0px;
	width:100%;
	height:100%;
	background-color:orange;
	
}
.shop-block-content h3{
	position:relative;
	width:60%;
	top:100px;
	left:150px;
	border-bottom:2px solid white;
	font-size:200%;
	font-family:'Khula',sans-serif;
	color:white;

}
.shop-block img,.shop-block-tiles img
{
	transition:0.5s;
	top:0;
	position:relative;
	width:100%;
	height:100%;
}
.shop-block-tiles {
	width:25%;
	float:right;
	height:200px;
	overflow:hidden;

}
.shop-block-tiles:hover{
	cursor:pointer;
}
.shop-block-tiles:hover>img{
	top:-205px;
}
.shop-block-tiles:hover>.shop-block-tiles-content{
	top:-205px;
	
}
.shop-block-tiles-content{
	transition:0.5s;
	width:100%;
	height:100%;
	position:relative;
	top:0px;
	background-color:orange;

	
}
.shop-block-tiles-content h3{
	position:relative;
	width:60%;
	left:150px;
	border-bottom:2px solid white;
	font-size:150%;
	font-family:'Khula',sans-serif;
	color:white;
	height:100%;
}
.shop-info{
	position:relative;
	left:60%;
	top:40px;
	
}
.shop-info span{
	background-color:black;
	color:white;
	padding:10px;
	font-family:'Khula',sans-serif;
	transition:0.3s;
}
.shop-info span:hover{
	cursor:pointer;
	background-color:rgba(0,0,0,0.5);
}
.modal{
	border:1px solid black;
	width:60%;
	height:90%;
	background-color:white;
	margin-left:15%;
	margin-top:30px;
}
.modal-container{
	position:fixed;
	z-index:4;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	display:none;
	top:0px;
}
#modal-img{
	margin:3%;
	margin-top:80px;
	width:50%;
	height:80%;
	float:left;
	border:1px solid black;
}
.modal h1{
	margin-top:60px;
	border-bottom:1px solid gray;	
	padding-bottom:20px;
	font-family:'Khula',sans-serif;
	
}
.modal h3{
	color:orange;
	font-size:150%;
	font-family:'Khula',sans-serif;
}
.modal h3 b{
	font-size:70%;
	color:rgba(255,153,0,0.6);
}
.modal label,.modal span{
	font-family:'Slabo 27px',sans-serif;
}
.modal input{
	width:5%;
	height:5%;
	margin-left:20px;
}
.modal button{
	font-size:110%;
	margin-top:20px;
	border:none;
	padding:10px;
	font-family:'Slabo 27px',sans-serif;
	background-color:rgba(255,154,0,0.4);
	transition:0.5s;
	border:2px solid rgba(255,154,0,0.8);
}
.modal button:hover{
	cursor:pointer;
	background-color:rgb(255,154,0);

}
.modal span{
	position:relative;
	top:30px;
}
#payment-info{
	width:20%;
	height:10%;
	position:relative;
	top:-20px;
	float:right;
	margin-right:200px;
}

#closemodal{
	float:right;
	margin-right:20px;
	height:6%;
}
.color-picker{
	margin-top:20px;
	height:30px;
	width:40%;
	float:right;
}
.color{
	width:10%;
	height:100%;
	margin-left:20px;
	display:inline-block;
	background-color:rgb(63, 127, 191);
		border:1px solid black;

}
.color:hover{
	cursor:pointer;
}
section form{
	top:230px;
	position:relative;
}
section form label{
		font-family:'Khula',sans-serif;
	font-size:120%;
}
section form select{
	border-radius:5px 5px;
	font-size:110%;
	padding:10px;
		font-family:'Khula',sans-serif;
}
section form select:hover{
	cursor:pointer;
}
#logo {
	min-width:200px;
	z-index:2;
	width:10%;
	margin-left:3%;
	margin-top:-30px;
	float:left;
}
@media screen and (max-width: 500px){
	section{
		margin:0;
		width:100%;
	}
	aside{
		clear:both;
		width:100%;
	}
.most-read ul li{
	padding-bottom:100px;
}
.modal-container{
	width:100%;
	margin:0;
}
.modal{
	position:fixed;
	margin:0;
	height:100%;
}
#modal-img{
	height:300px;
}
#payment-info{
	width:60%;
	height:auto;
}
.desktop-menu{
	display:none;
}
.mobile-menu{
	position:fixed;
	top:70px;
	display:block;
	z-index:3;
}
footer{
	height:450px !important;
}
footer img{
	width:80% !important;
	
}
#copyright{
	float:none !important;
	width:50% !important;
}
.social-icons {
	margin-top:-50px !important;
	width:100% !important;
}
.social-icons img{
	width:15% !important;
	display:inline-block  !important;
}
}
footer img{
	height:200px;
	margin-left:10%;
	float:left;
	width:12%;
	
}
.social-icons{
	width:30%;
	border-right:3px dotted gray;
	margin-top:75px;
	margin-left:30px;
	float:left;
}
.social-icons img{
	width:10%;
	height:auto;
	margin-left:30px;
	transition:0.4s;
	
}
.social-icons img:hover{
	cursor:pointer;
	transform:scale(1.22);
}
#copyright{
	margin-top:75px;
	margin-right:100px;
	color:gray;
	font-family:'Exo',sans-serif;
	float:right;
	width:30%;
	
}
.ads{
	width:98%;
	height:200px;
	overflow:hidden;
}
.ads img{
	animation:imgzoom 10s ease-in-out;
}
@keyframes imgzoom{
	0%{
		transform:scale(1.0);
	}
	60%{
		transform:scale(1.3);
	}
	100%{
		transform:scale(1.0);
	}
}
@keyframes h1move{
	0%{
		transform:translateX(0px);
	}
	60%{
		transform:translateX(200px);		
	}
	100%{
		transform:translateX(0px);

	}
}
.ads h1{
	font-family:'Exo',sans-serif;
	position:absolute;
	top:50px;
	left:10%;
	background-color:orange;
	z-index:2;
	color:white;
	padding-left:4%;
	animation: h1move 20s ease-in-out;
}
#cdmusic {
	margin-top:30px;
	border-top:2px solid black;
}
#cdmusic h1{
	width:30%;
}