*{
	margin:0;
	padding:0;
	border:0;
	outline:none;
}
a{ 
	text-decoration: none; 
}
body {
	background:#27418087;
	background:red;
	background-image: url('../img/background.jpg');
}

#hap-wrapper{
	font-family: Arial, Helvetica, sans-serif;
	max-width: 640px;
	margin:0 auto;
	margin-top: 100px;
	position: relative;
}
.hap-player-holder{
	height:300px;
	background:#080611c7;;
	width: 100%;
	overflow: hidden;
}
.hap-contr-btn > i{
	color:#fff;
}
.hap-contr-btn:hover > i,
.hap-contr-btn-hover{
	color:#4DA7FE!important;
} 
.hap-contr-btn > i{
	position: absolute;
    top: 0;
    left: 0;
	width:30px;
	height:30px;
	text-align: center;
	display: inline-block;
	font-size: 14px!important;
	line-height: 30px!important;
}
.hap-player-thumb-wrapper{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:255px;
	height: -webkit-calc(100% - 45px);
    height: -moz-calc(100% - 45px);
    height: calc(100% - 45px);
	background:#000;
	overflow:hidden;
}
.hap-player-thumb{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}
.hap-player-thumb img{
	display: block;
    position: absolute;
    max-width: none!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
.hap-media-title-mask{
	position:relative;
	top:0px;
	left:15px;
	float:left;
	width:50%;
	width: -webkit-calc(100% - 270px);
    width: -moz-calc(100% - 270px);
    width: calc(100% - 270px);
	height:100%;
	overflow:hidden;
}
.hap-media-title{
	position:absolute;
	top:0;
	left:0;
	height: 100%;
	white-space: nowrap;
	font-size:13px;
	color:#fff;
	line-height: 30px;
}
.hap-player-controls{
	position:relative;
	width:100%;
	height:30px;
	top:0px;
	left:0px;
	background:#05223c;
		background:#656565;
	
}
.hap-playback-toggle,
.hap-prev-toggle,
.hap-next-toggle{
	position:relative;
	top:0px;
	left:5px;
	width:30px;
	height:30px;
	float:left;
}
.hap-lyrics-toggle{
	position:relative;
	top:0px;
	left:5px;
	width:30px;
	height:30px;
	float:right;
	cursor: pointer;
	margin-right:10px;
}
.hap-volume-toggle{
	position:relative;
	height:30px;
	width:30px;
	top:0px;
	float:right;
	margin-right:5px;
}
.hap-volume-seekbar{
	position:relative;
	top:-1px;
	width:80px;
	height:32px;
	float:right;
	cursor: pointer;
	margin-right:5px;
	touch-action: none;
}
.hap-volume-bg{
	position:absolute;
	top:12px;
	left:10px;
	width:60px;
	height:8px;
	background:#333333;
}
.hap-volume-level{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	background:#5873c6;
}
.hap-seekbar{
	position:relative;
	top:0px;
	left:0px;
	width:100%;
	height:15px;
	cursor: pointer;
	touch-action: none;
}
.hap-progress-bg{
	position:absolute;
	background:#666;
	width:100%;
	top:0px;
	height:13px;
}
.hap-load-level{
	position:absolute;
	background:#444;
	top:0;
	height:100%;
}
.hap-progress-level{
	position:absolute;
	background:#5873c6;
	top:0;
	height:100%;
}




#hap-playlist-list{
	display:none;
}
.hap-playlist-holder{
	position: relative;
	background:#05223c;
	background:#656565;
	width: 100%;
	height: 300px;
	overflow: hidden;
}
.hap-playlist-inner{
	height:270px;
	height: -webkit-calc(100% - 30px);
    height: -moz-calc(100% - 30px);
    height: calc(100% - 30px);
}
.hap-playlist-item{
	position: relative;
	top:0px;
	left:0px;
	background:#222;
	height:80px;
	margin-bottom:5px;
	overflow: hidden;
}
.hap-playlist-item:last-child {  
	margin-bottom:0px;
}

.hap-playlist-item-content {
	cursor: pointer;
	flex:1;
	overflow: hidden;
	color: #ffffff;
	height: 100%;
	background:#222;
}
.hap-playlist-item-selected .hap-playlist-title-num,
.hap-playlist-item-selected .hap-playlist-title{
	color:#C33;
}
.hap-playlist-title-num,
.hap-playlist-title {
	font-size:13px;
	color:inherit;
	color:#666;
}

.hap-download, .hap-link{
	float:right;
	margin: 5px 15px 5px 5px;
	color:#fff!important;
	font-size: 13px!important;
}
.hap-download i, .hap-link i{
	color:inherit;
}
.hap-download:hover, .hap-link:hover{
	color:#4DA7FE!important;
}
.hap-playlist-thumb{
	display:block;
	position:relative;
	top:0px;
	left:0px;
	margin: 5px;
	width:70px;
	height:70px;
	float:left;
	background:#05223c;
		background:#656565;
	overflow:hidden;
}
.hap-playlist-thumb img{
	display:block;
	height:100%;
	width:auto!important;
	margin:0 auto;
	max-width: none!important;
}
.hap-playlist-title{
	display:block;
	position:relative;
	top:10px;
	padding: 0 10px;
	overflow:hidden;
	font-size:15px;
	color:inherit;
}
.hap-playlist-filter-msg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
}
.hap-playlist-filter::placeholder { 
    color: inherit!important;
}
.hap-playlist-filter-msg span{
    position: relative;
    line-height:270px;
    float: left;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size:15px!important;
	color:#fff!important;
}	

.hap-bottom-bar{
	height:30px;
	background:#05223c;
		background:#656565;
}
.hap-search-filter{
	position:relative;
	width:100px!important;
	height:18px!important;
	top:50%;
	margin:-9px 0 0 20px!important;
	padding:0!important;
	border:0!important;
	-moz-border-radius:0 !important;
    -webkit-border-radius:0 !important;
	border-radius:0 !important;
	background:#222 !important;
	color:#fff !important;
	box-shadow:none!important; 
	line-height:1!important; 
	float: left;
	outline:none;
}
.hap-search-filter::placeholder { 
	color: inherit!important;
}

.hap-sr-bar-i{
	display: inline-block;
	font-size: 15px!important;
	line-height: 30px!important;
}
.hap-sort-alpha{
	position:relative;
	left:5px;
	top:0px;
	width:25px;
	height:100%;
	text-align: center;
	float: left;
}
.hap-share-item{
	position:relative;
	top:0px;
	right:10px;
	width:25px;
	height:100%;
	margin-right:5px;
	text-align: center;
	float: right;
}





.hap-tooltip{
	position:absolute;
	background:#05223c;
		background:#656565;
	text-align:center;
	color:#fff!important;
	z-index:10000;
	border:1px solid #222;
	pointer-events:none;
	display:none;
	font-size:12px!important;
	padding:2px 5px !important;
	line-height:20px !important;
	white-space:nowrap;
}


.hap-preloader {
	position:absolute;
	top:50%;
	left:50%;
    width: 40px;
    height: 40px;
    margin-left:-20px;
	margin-top:-20px;
    background-color: #C33;
    -webkit-animation: hap_preloader 1.2s infinite ease-in-out;
    animation: hap_preloader 1.2s infinite ease-in-out;
}
@-webkit-keyframes hap_preloader {
    0% { -webkit-transform: perspective(120px) }
    50% { -webkit-transform: perspective(120px) rotateY(180deg) }
    100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}
@keyframes hap_preloader {
    0% { 
	    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
    } 50% { 
	    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
    } 100% { 
	    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
}



		  
.hap-hidden {
	opacity: 0; 
	filter: alpha(opacity=0); 
}
.hap-visible {
	opacity: 1;
	-webkit-transition: opacity 500ms ease-out;
	-moz-transition: opacity 500ms ease-out;
	transition: opacity 500ms ease-out;
}					  



/* scroll */
.hap-playlist-inner .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 10px;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px;
     border-radius: 0px; 
}
.hap-playlist-inner .mCSB_inside > .mCSB_container {
    margin-right: 30px;
}
.hap-playlist-inner .mCSB_scrollTools .mCSB_draggerRail {
    width: 10px;
    -webkit-border-radius: 0px; 
    -moz-border-radius: 0px;
     border-radius: 0px; 
     background-color: #444;
}



.video {
	background: rgba(36, 37, 49, 1);
	text-align: center;
	font-size: 20px;
	display:grid;

	grid-template-rows: 2;
	padding: 20px;

	border-radius: 15px ;
}
.video_element{

	background: #ddd;


	grid-auto-flow: column;

	border-radius: 15px  15px;

}

.vid-head{

	padding: 7px;
	margin-top: 20px;
}
.video-text{
background: rgb(99, 96, 96);
padding: 10px;
width: 100px;
/*border-radius: 10px;*/

}

.vid_foot{
	background: rgb(133, 129, 123) ;
	margin-left: 40px;
	margin-right: 40px;
}

@media only screen and (max-width: 350px) {
	.hap-media-title-mask{
		display: none;
	}
}




.hap-lyrics-cont{
	position: absolute;
	bottom: 10px;
	left: 20px;
	right: 20px;
}
.hap-lyrics-cont p{
	font-size:20px;
	color:#c658a5;
	text-shadow:
   -1px -1px 0 #000,  
    1px -1px 0 #000,
    -1px 1px 0 #000,
     1px 1px 0 #000;
	margin-top: 10px;
}

.hap-youtube-holder,
.hap-iframe-blocker{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:hidden;
}	
.hap-media{
	width: 100%;
    height: 100%;
    position:absolute;
    user-select: none;
    visibility: visible;
    top:0;
    left:0;
    max-width:none!important;
}

/*-- The youth Nav start here*/


.container {
	
grid-template-columns: repeat(6, 1fr);
	padding: 20px;
	grid-template-areas: "nav nav nav nav nav nav" 
	"main main	main	main	main	main"
	"main main	main	main	main	main"
	"main main	main	main	main	main"
	"main main	main	main	main	main"
	"main main	main	main	main	main"
	"main main	main	main	main	main"
	"main main	main	main	main	main"
	"main main	main	main	main	main"
	"sidebar sidebar sidebar sidebar sidebar sidebar"
	"sidebar sidebar sidebar sidebar sidebar sidebar"
	"sidebar sidebar sidebar sidebar sidebar sidebar"
	"sidebar sidebar sidebar sidebar sidebar sidebar"
	"sidebar sidebar sidebar sidebar sidebar sidebar"
	"footer	footer	footer	footer	footer	footer"
	"footer	footer	footer	footer	footer	footer";
	grid-gap: 1.5em;
	grid-template-rows: auto auto auto auto;
}

nav {
	background: rgb(2, 2, 48);
	grid-area: nav;
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	font-size: 2.5em;
	color: #dddd;
	font-weight: 700;
	justify-content: center;
	justify-items: center;
	text-justify: middle;
	text-align: center;
	padding: 20px;
	grid-template-columns: 1/6;
}

.footer {
	display: grid;
	background: rgb(60, 60, 75);
	grid-area: footer;
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);

	grid-gap: 1em;
	padding-top: 25px;
	padding-bottom: 25px;

	
	grid-template-columns: 1/6;
}

.footer>div {
	background: rgba(36, 37, 49, 1);
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	color: rgba(236, 231, 231, 0.867);
	padding-left: 1.5em;
	grid-template-columns: 1/6;
	padding-left: 15%;
	padding: 20px;
	padding-left:20%;
font-size:24px;
}




@media only screen and (min-width: 80em) {
	.container {
		grid-template-columns: repeat(12,1fr);
			/*grid-template-areas: "nav" "main" "sidebar" "footer";*/
			grid-template-rows: 1fr 200px 100px;
			grid-gap: 20px;
			grid-template-areas: "nav	nav	nav	nav	nav	nav	nav	nav	nav	nav	nav	nav " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "sidebar	sidebar	sidebar	sidebar	main	main	main	main	main	main	main	main " "footer	footer	footer	footer	footer	footer	footer	footer	footer	footer	footer	footer";
	}
	nav {
			display: grid;
			background: rgb(2, 2, 48);
			grid-area: nav;
			border-radius: var(--main-radius);
			padding-top: var(--padding-top);
			font-size:5em;
			color: #dddd;
			font-weight: 700;
			padding: 20px;
			grid-template-rows:1fr;
			grid-template-columns: 2fr 8fr 2fr;
			justify-content: center;
			align-items: center;
	}
	.logo {
			grid-template-columns:1/ 2;
			grid-template-rows: 1fr;
	}
	.head {
			grid-template-columns: 8fr;
			grid-template-rows: 1fr;
		
			text-justify: center;
			align-items: center;
			justify-items: center;
			justify-self: stretch;
			text-align: center;
			justify-content: end;
 }
 .footer {
	display: grid;
	background: rgb(60, 60, 75);
	grid-area: footer;
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	grid-template-columns: repeat(3,4fr);
	grid-template-rows: auto;
	grid-template-rows: 200px;
	grid-gap: 1em;
	padding: 25px;

}
.footer>div {
	background: rgba(36, 37, 49, 1);
	border-radius: var(--main-radius);
	padding-top: var(--padding-top);
	color: rgba(242, 255, 254, 0.9);
	padding-left: 1.5em;
	grid-template-columns: 4fr 4fr 4fr;
	padding: 25px;
	padding-left:20%;
font-size:24px;
}
.video {
	background: rgba(36, 37, 49, 1);
		
	text-align: center;
	font-size: 20px;
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(480px,1fr));
	grid-gap:20px;
	grid-template-rows: 2;
	padding: 20px;

	border-radius: 15px ;
}
.video_element{
	background: #ddd;
	grid-auto-flow: column;

	/*border-radius: 15px ;*/

}

.vid-head{
/*	background: red;*/
	padding: 7px;
}
.vid_foot{
	background: rgb(133, 129, 123) ;
}
.video-text{
background: rgb(99, 96, 96);
padding: 10px;
width: 100px;
/*border-radius: 10px;*/

}

}