/*
Project title: ProjektiNeGJW_Detyra_2 
Author: Kastriot Kadriu
*/
body{
	margin:0;
	width:100%;
	padding:0;
	height:auto;
	overflow-x:hidden;
}
header{
	z-index:1;
}
a{
	text-decoration:none;
	color:inherit;
}
p:hover,h3:hover{
	cursor:pointer;
	color:navy;
}

.main-header{
	height:700px;
	background-color:purple;
	overflow:hidden;
	position:relative;
	top:-100px;
}
.main-header-item img{
	background-size:100%;
	height:700px;
	width:100%;
}
.main-header-item p{
	position:absolute;
	top:250px;
	left:20%;
	font-size:150%;
	font-family:'PT Sans',sans-serif;
	z-index:4;
	color:white;
    text-shadow: 2px 2px gray;
}
.main-header-item h3{
	font-family:'Raleway',sans-serif;
	position:absolute;
	top:200px;
	left:20%;
	font-size:220%;
	z-index:3;
	color:white;
    text-shadow: 2px 2px gray;

}
.main-header-item{
	width:100%;
	position:absolute;
	display:none;
	opacity:0;
	transition:1s;
}
#main-header-gradient{
	transition:3s;
	width:100%;
	height:600px;
	position:absolute;
	top:40%;
	z-index:2;
background: -moz-linear-gradient(271deg, rgba(153,218,255,0) 0%, rgba(96,73,128,0.69) 25%, rgba(140,119,159,1) 36%, rgba(224,209,219,1) 57%, rgba(250,247,249,1) 89%, #f6f6f6 95%); /* ff3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(153,218,255,0)), color-stop(25%, rgba(96,73,128,0.69)), color-stop(36%, rgba(140,119,159,1)), color-stop(57%, rgba(224,209,219,1)), color-stop(89%, rgba(250,247,249,1)), color-stop(95%, #f6f6f6)); /* safari4+,chrome */
background: -webkit-linear-gradient(271deg, rgba(153,218,255,0) 0%, rgba(96,73,128,0.69) 25%, rgba(140,119,159,1) 36%, rgba(224,209,219,1) 57%, rgba(250,247,249,1) 89%, #f6f6f6 95%); /* safari5.1+,chrome10+ */
background: -o-linear-gradient(271deg, rgba(153,218,255,0) 0%, rgba(96,73,128,0.69) 25%, rgba(140,119,159,1) 36%, rgba(224,209,219,1) 57%, rgba(250,247,249,1) 89%, #f6f6f6 95%); /* opera 11.10+ */
background: -ms-linear-gradient(271deg, rgba(153,218,255,0) 0%, rgba(96,73,128,0.69) 25%, rgba(140,119,159,1) 36%, rgba(224,209,219,1) 57%, rgba(250,247,249,1) 89%, #f6f6f6 95%); /* ie10+ */
background: linear-gradient(179deg, rgba(153,218,255,0) 0%, rgba(96,73,128,0.69) 25%, rgba(140,119,159,1) 36%, rgba(224,209,219,1) 57%, rgba(250,247,249,1) 89%, #f6f6f6 95%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99DAFF', endColorstr='#FFFFFF',GradientType=0 ); /* ie6-9 */
}

.mobile-menu{
	width:100%;
	margin:0;
	display:block;
}
.mobile-menu:hover > ul {
	display:block;
}
.mobile-menu h3{
	position:relative;
	background-color:black;
	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;
		top:-2px;
	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;

	
}
.desktop-menu{
}
.desktop-menu ul{
	list-style-type:none;
	z-index:1;
	position:absolute;
	top:7%;
	left:20%;
	width:auto;
}
.desktop-menu  ul li {
	background: linear-gradient(270deg, rgba(2,30,400,0), rgba(20, 300, 200, 0.65),rgba(200, 95, 108, 0.62));
	background-size: 400% 400%;	display:inline;
	font-family:'Orator Std',sans-serif;
	font-size:130%;
	padding:10px;
	margin:15px;
	transition: 0.5s;
	-webkit-animation: animacioni 5s ease infinite;
	-moz-animation: animacioni 5s ease infinite;
	animation: animacioni 5s ease infinite;
	border:3px solid rgba(0,0,0,0.5);
}
.desktop-menu ul li:hover{
	background-color:transparent;
	color:white;
	cursor:pointer;
}
section{
	position:relative;
	top:-300px;
	margin-left:18%;
	width:50%;
	float:left;
	display:inline;
	z-index:2;
	height:100%;
}

.toplist{
	position:relative;
	clear:both;
	background: linear-gradient(270deg, #23d4a6, #0f5687);
	background-size: 400% 400%;
	-webkit-animation: animacioni 10s ease infinite;
	-moz-animation: animacioni 10s ease infinite;
	animation: animacioni 10s ease infinite;
}
@-webkit-keyframes animacioni {
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
@-moz-keyframes animacioni {
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
@keyframes animacioni { 
    0%{background-position:0% 35%}
    50%{background-position:66% 100%}
    100%{background-position:0% 35%}
}
.toplist h2{
	font-family:'Orator Std',sans-serif;
	font-size:130%;
	color:white;
	width:100%;
	background: linear-gradient(180deg, maroon, #8e5871);
}
.toplist-wrapper {
	padding-right:40px;
	}
.toplist-artist{
	font-weight:bold;
	margin-left:10px;
	background: linear-gradient(270deg, navy, #8e5871);
	background-size: 400% 400%;	color:white;
	border-radius:7px 7px;
	padding-left:5%;
	padding-right:5%;
	box-shadow:2px 2px lightgray;
	-webkit-animation: animacioni 10s ease infinite;
	-moz-animation: animacioni 10s ease infinite;
	animation: animacioni 10s ease infinite;	
	transition:0.5s;
	}
.list-item{
	clear:both;
	width:100%;
	display:block;
	font-family:'Quattrocento',sans-serif;
	padding:20px;
	border-bottom:1px solid black;
	font-weight:bold;
}
.toplist-artist:hover{
	font-size:110%;
		background: linear-gradient(270deg, navy, rgba(24,12,12,0.5));

}

.toplist-wrapper span:hover{
	cursor:pointer;
}
.toplist-duration{
	float:right;
}
.toplist-wrapper div{
	margin:40px;
	display:none;
}
.toplist-wrapper div p{
	width:100%;
	float:left;
}
.toplist-wrapper div span{
	float:left;
	width:60%;
	font-family:'Slabo 27px', serif;
	color:white;
}
.collapsed-div{
	float:right;
	width:25%;
	display:block;
}
.collapsed-div img{
	width:100%;
	
}
.collapsed-div img:nth-child(1){
	position:relative;
	top:80px;
	z-index:2;
	width:25%;
}
.collapsed-div img:nth-child(2){
	position:relative;
	z-index:1;
}
.desktop-menu {
		display:block;
	}
	.mobile-menu{
		display:none;
	}
	.secondary-header{
		display: inline;
	}
@media screen and (max-width: 500px){
	.mobile-menu{
		display:block;
		position:fixed;
		z-index:5;
	}
	.desktop-menu{
		display:none;
	}
	.main-header-item h3{
		font-size:130%;
	}
	.main-header-item p{
		font-size:200%;
	}
	section{
	width:100%;
	margin:0;
	clear:both;
	display:block;
	}
	aside{
	margin:0 !important;
	clear:both;
	width:100% !important;
	position:relative !important;
	display:block !important;
	top:0 !important;
	}
	aside:nth-child(1){
		margin:0;
		width:100% !important;
	}
	.most-read ul li{
		margin-bottom:50px;
	}
	.most-read ul li img{
		width:27% !important;
	}
	.second-article-item img{
		float:clear !important;
	}
	.second-article-item{
		height:200px !important;
	}
	.trending{
		position:relative;
		top:150px !important;
	}
	.toplist {
		top:200px !important;
	}
.second-article-item p{
	margin-right:120px !important;
	z-index:2 !important;
	height:100%;
}
footer{
	height:450px !important;
}
footer img{
	width:80% !important;
	
}
#copyright{
	float:none !important;
	width:50% !important;
}
.social-icons {
	margin-top:-100px !important;
	width:100% !important;
}
.social-icons img{
	width:15% !important;
	display:inline-block  !important;
}
	
}

footer{
	z-index:3;
	position:relative;
	top:150px;
	clear:both;
	width:100%;
	background-color:black;
	height:200px;
		padding:20px;

}
article {
	position:relative;
	margin-top:40px;
	background-color:black;
	min-height:400px;
	overflow:hidden;
	z-index:3;
}
.signs{
	background-color:white;
	font-size:40px;
	margin-left:5px;
}
.article-block img{
	width:50%;
	height:90%;
	float:left;
	margin-left:10px;
	margin-top:-3px;
	margin-right:20px;
}
.article-block p{
	color:white;
	font-size:100%;
	text-align:justify;
	width:98%;
	font-family: 'Quattrocento', serif;
	margin-top:-50px;
}
.article-block h1{
	font-family:'Playfair Display SC', serif;
	position:relative;
	top:-50px;
	color:white;
	font-size:20px;
	margin-left:-100px;

}
article button{
	background-color:rgba(123,23,23,0.5);
	border:none;
	font-size:140%;
	margin-left:20px;
	margin-top:20px;
	margin-bottom:10px;
	z-index:3;
	position:relative;
	color:white;
	transition:0.5s;
}
article button:hover{
	cursor:pointer;
	background-color:rgba(123,23,23,1);

	}
aside{
	width:20%;
	margin-left:20px;
	float:left;
	display:inline;
	width:20%;
	overflow:hidden;
	position:relative;
	top:-200px;
	z-index:2;
}
aside img{	
	width:100%;

}
.second-article{
	width:100%;
	position:absolute;
	top:460px;
	-webkit-column-count:3;
    -moz-column-count:3;
	column-count:3;
	display:none;
	transition:2s;
	transform:rotateX(-90deg);
	background-color:white;
}
.second-article-item img{
	width:60%;
}
.second-article-item{
	padding:20px;
	min-width:200px;
}
.second-article-item p{
	font-family: 'Exo', sans-serif;
	float:right;
	text-align:left;
	width:38%;
	font-size:70%;
}
.trending{
	background-color:white;
	margin-top:180px;	
	width:98%;
	position:relative;
	top:20px;
	height:1100px;
	padding:10px;
}
.trending>h1{
	text-align:center;
	border-top:10px solid black;
	font-family:'Playfair Display SC',serif;
	z-index:2;
	font-size:200%;
	width:100%;
	background-color:white;
}
.trending-main-item{
	width:50%;
	box-shadow: 5px 5px 5px #888888;
	float:left;
	border:2px solid gray;
	box-sizing:border-box;
	background-color:white;
}
.trending-main-item img{
	width:90%;
	height:400px;
	padding:5%;
}
.trending-main-item p{
	margin-top:-5%;
	font-family:'Source sans pro',sans-serif;
	font-weight:bold;
	margin-left:4%;
}
.trending-item{
	background-color:white;
	margin-top:20px;
	padding:1%;
	margin:2%;
	float:right;
	position:relative;
	width:20%;
	height:25%;
	box-shadow: 3px 3px 5px #888888;
	border:2px solid gray;
	box-sizing:border-box;	
}
.trending-item img{
	width:90%;
	height:40%;
}
.trending-item p{
	width:100%;
	font-family:'Source sans pro',sans-serif;
	font-weight:bold;
}
.most-read{
	background-color:white;
	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%;
}
.article-block{
	position:absolute;
	display:none;
	opacity:0;
	transition:1s;
	height:auto;
}

.click-area{
	width:10%;
	height:70%;
	position:absolute;
	z-index:2;
}
.click-area:hover{
	cursor:pointer;
}
.musicplayer{
	background: linear-gradient(270deg, #5e4d55, #0f5687,#74e29b,#74e240);
	background-size: 400% 400%;
	-webkit-animation: animacioni 10s ease infinite;
	-moz-animation: animacioni 10s ease infinite;
	animation: animacioni 10s ease infinite;	
	width:100%;
	height:70px;
	border-top:3px solid black;
	
}
.musicplayer img{
	width:10%;
	float:right;
	margin-right:200px;
	margin-top:-40px;
	box-shadow:5px 5px gray;
}
#vol_control {
	margin-left:200px;
	float:left;
	width:10%;
	margin-top:20px;
}
#vol_control input[type=range]{

  -webkit-appearance: none;
  width: 100%;
  margin: 1.2px 0;
}
#vol_control input[type=range]:focus,#seek_control input[type=range]:focus {
  outline: none;
}
#vol_control input[type=range]::-webkit-slider-runnable-track,#seek_control input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #5e4d55;
  border-radius: 0px;
  border: 0px solid #010101;
}
#vol_control input[type=range]::-webkit-slider-thumb,#seek_control input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 28px;
  width: 20px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.77);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1.2px;
}
#vol_control input[type=range]:focus::-webkit-slider-runnable-track,#seek_control input[type=range]:focus::-webkit-slider-runnable-track {
  background: #77626c;
}
#vol_control input[type=range]::-moz-range-track,#seek_control input[type=range]::-moz-range-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #5e4d55;
  border-radius: 0px;
  border: 0px solid #010101;
}
#vol_control input[type=range]::-moz-range-thumb,#seek_control input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 28px;
  width: 20px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.77);
  cursor: pointer;
}
#vol_control input[type=range]::-ms-track,#seek_control input[type=range]::-ms-track {
  width: 100%;
  height: 25.6px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#vol_control input[type=range]::-ms-fill-lower,#seek_control input[type=range]::-ms-fill-lower {
  background: #45383e;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#vol_control input[type=range]::-ms-fill-upper,#seek_control input[type=range]::-ms-fill-upper {
  background: #5e4d55;
  border: 0px solid #010101;
  border-radius: 0px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
#vol_control input[type=range]::-ms-thumb,#seek_control input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 1px #670000, 0px 0px 0px #810000;
  border: 0px solid #ff1e00;
  height: 28px;
  width: 20px;
  border-radius: 0px;
  background: rgba(255, 67, 95, 0.77);
  cursor: pointer;
  height: 25.6px;
}
#vol_control input[type=range]:focus::-ms-fill-lower,#seek_control input[type=range]:focus::ms-fill-lower {
  background: #5e4d55;
}
#vol_control input[type=range]:focus::-ms-fill-upper,#seek_control input[type=range]:focus::-ms-fill-upper {
  background: #77626c;
}
#playpausebtn{
	width:3%;
	float:left;
	margin-left:250px;
	margin-top:50px;
}
#playpausebtn img{
	width:100%;
	transition:0.5s;
	box-shadow:none;
}
#playpausebtn img:hover{
	cursor:pointer;
	transform:scale(1.22);
}
#seek_control{
	width:30%;
	margin-right:40px;
	float:right;
	margin-top:20px;
}
#seek_control input[type=range]{

  -webkit-appearance: none;
  width: 100%;
  margin: 1.2px 0;
} 
#musicplayer-wrapper{
	position:fixed;
	bottom:10px;
	z-index:3;
	display:none;
	}
.musicplayer span{
	margin-left:-12%;
	margin-top:1.3%;
	float:left;
	font-family:'Raleway',serif;
	
}
@keyframes entr{
	0%{
		transform:translateY(-500px);
	}
	100%{
		transform:translateY(0px);
	}
}
#songname{
	width:10%;
	font-size:100%;
	font-family:'Slabo 27px', serif;
	font-weight:bold;
}
.spotlight{
	margin-top:20px;
	background-color:white;
	width:49%;
	height:auto;
	position:relative;
	float:right;
	border:2px solid gray;
	box-shadow: 5px 5px 5px #888888;
	border-top:10px solid black;
	
	
}
.spotlight img{
	width:100%;
	border:20px solid white;
	border-top:1px solid gray;
	padding-top:20px;
	box-sizing:border-box;
}
.spotlight h1{
	font-family:'Playfair Display SC',serif;
	padding-left:20px;
}
.spotlight h4{
	font-family:'Exo',sans-serif;
	text-align:center;
	font-weight:bold;
	font-size:150%;
}
.spotlight h5{
	font-family:'Source sans pro',sans-serif;
	color:gray;
	text-align:center;
	margin-top:-10px;
}
#adsimg{
	margin-top:20px;
	width:100%;
	height:200px;
}
.ads{
	width:47%;
	position:relative;
	float:right;
	height:250px;
	margin-top:20px;
	margin-left:10px;
	border:10px solid white;
	box-sizing:border-box;
	background-color:navy;
}
#logo {
	position:absolute;
	z-index:2;
	width:13%;
	margin-left:100px;
	margin-top:-15px;
}
.ads p{
	font-size:220%;
	padding-left:10%;
	font-family:'Orator Std',sans-serif;
	color:white;
}
footer img{
	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:10%;
	color:gray;
	font-family:'Exo',sans-serif;
	float:right;
	width:30%;
	
}