@import url("font-awesome.min.css");

@font-face {
font-family:'GothamBook';
src:url('../fonts/GothamBook.eot');
src:url('../fonts/GothamBook.woff2') format('woff2'),
    url('../fonts/GothamBook.woff') format('woff'),
    url('../fonts/GothamBook.ttf') format('truetype'),
    url('../fonts/GothamBook.otf') format('opentype'),
    url('../fonts/GothamBook.svg#GothamBook') format('svg'),
    url('../fonts/GothamBook.eot?#iefix') format('embedded-opentype');font-weight:normal;font-style:normal;}



body{margin:0px;padding:0px; background: url(../images/main_bg.jpg) no-repeat; background-attachment: fixed; height: 100%; color:#FFF;font-size:16px; font-family:'GothamBook'; overflow-x:hidden;overflow-y:auto; -o-background-size:cover;-moz-background-size:cover;-webkit-background-size:cover;background-size:cover; }   

article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
svg:not(:root){overflow:hidden}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
button{outline:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
input,textarea,button,select,a,div{-webkit-tap-highlight-color:transparent;outline:none}
table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
img{border:0px;max-width:100%;vertical-align:top}  
::-moz-selection{background:#ff4a4a;color:#000}
::selection{background:#ff4a4a;color:#000}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}
:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}
a{text-decoration:none; color:#fcd168;}
*{text-rendering:optimizeLegibility}
html.touch *{text-rendering:optimizeSpeed}
p{margin: 0px;padding: 0px;}  
h1,h2,h3,h4,h5,h6{margin: 0px;padding: 0px;font-weight: normal;}
ol,ul,li{margin: 0px;padding: 0px;list-style-type: none;}
.clr{clear: both;}

.wrapper{width: 1200px; margin: 0 auto;}

.top_row{margin: 0 0 59px 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,414141+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top, #000000 0%, #414141 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #000000 0%,#414141 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #000000 0%,#414141 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#414141',GradientType=0 ); /* IE6-9 */
}
.logo_row{position: relative; padding: 20px 0;}
.logo_l{position: absolute; left: 5px; top: 0; }
.logo_r{float: right; color: #FFF; font-size: 18px;}
.logo_r a{color: #FFF; -webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-o-transition: all ease 0.5s;-ms-transition: all ease 0.5s;transition: all ease 0.5s;}
.logo_r a:hover{color: #ff4a4a; -webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-o-transition: all ease 0.5s;-ms-transition: all ease 0.5s;transition: all ease 0.5s;}
.logo_r span{padding: 0 30px;}
.logo_r ul{margin: 0px; padding: 0px; float: right;}
.logo_r ul li{list-style-type: none; float: left; margin: 0 25px 0 0;}
.logo_r ul li a{color: #FFF; text-decoration: none; -webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-o-transition: all ease 0.5s;-ms-transition: all ease 0.5s;transition: all ease 0.5s;}
.logo_r ul li a:hover{color: #ff4a4a; -webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-o-transition: all ease 0.5s;-ms-transition: all ease 0.5s;transition: all ease 0.5s;}

.middle_cont{background: rgba(24, 24, 24, 0.8); border-radius: 10px; padding:17px; margin: 0 0 40px 0;}
.misuc_row{height: 114px; width: 100%; display: table; padding-bottom: 9px; margin-bottom: 14px; border-bottom: 1px solid #888888;}
.music_l{display: inline-block; vertical-align: middle; margin: 0 23px 0 0;}
.music_r{display: inline-block; vertical-align: middle; width: 88%;}
.music_head{color: #FFF; font-size: 30px;}
.music_head span{display: block; font-size: 14px; margin: 5px 0 0 0;}

.playlist_bx{border-bottom: 1px solid #888888; margin: 0 0 20px 0;}

.music_one{background: rgba(69, 69, 69, 0.6); border-radius: 10px; padding:10px; margin: 0 0 17px 0;}
.music_cont{position: relative; padding: 0 0 0 133px; min-height: 110px;}
.music_one_pic{position: absolute; left: 0; top: 0; }
.music_one_pic img{width: 110px; height: 110px; border-radius: 10px;}
.music_name{text-overflow:ellipsis;vertical-align:middle;white-space:nowrap;overflow:hidden; text-transform: uppercase; color: #c8c8c8; font-size: 15px;}
.music_name span{display: block; margin: 3px 0 0 0; font-size: 11px; color: #868686; margin: 0 0 18px 0;}
.music_wait{position: relative; padding: 0 0 0 39px;}
.ply_btn{position: absolute; left: 0; color: #c8c8c8; font-size: 30px; top: 5px;}
.ply_btn a{color: #c8c8c8;}
.back_btn{margin: 0 0 0 33px; font-size: 15px; color: #c8c8c8;}
.back_btn a{ color: #c8c8c8;}

footer{background: rgba(0, 0, 0, 0.8); padding: 15px 0; text-align: center; color: #525153; font-size: 12px; line-height: 55px;}

/* ---------- login page css ----------*/
.login_area{position: absolute; right: 0; top: 30%;}
.login_content{background: rgba(24, 24, 24, 0.9); padding:20px; width: 300px; border-radius: 5px 0 0 5px;}
.login_head{color: #ff4a4a; font-size: 30px; text-transform: uppercase; margin: 0 0 15px 0;}
.lgn_frm{margin: 0 0 0 35px;}
.lgn_one{margin: 0 0 8px 0;}
.input_one{background: #FFF; padding:8px 10px; color: #000; font-size: 14px; border: 0; width: 80%;}
.sub_btn{background: #000; color: #FFF; padding: 8px 10px; text-transform: uppercase; border: 0; border-radius: 5px; -webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-o-transition: all ease 0.5s;-ms-transition: all ease 0.5s;transition: all ease 0.5s;}
.sub_btn:hover{background: #ff4a4a; color: #FFF; -webkit-transition: all ease 0.5s;-moz-transition: all ease 0.5s;-o-transition: all ease 0.5s;-ms-transition: all ease 0.5s;transition: all ease 0.5s;}

@media screen and (max-width:1680px){
	
	
}  

@media screen and (max-width:1600px){
	
	
} 



@media screen and (max-width:1440px){
	
}

@media screen and (max-width:1366px){
	
	
}

@media screen and (max-width:1366px){
	
}

@media screen and (max-width:1280px){
	.login_head,.music_head{font-size: 26px;}
	
}



@media screen and (max-width:1100px){ 
	.wrapper{width: 100%; padding: 0 30px;}
	.login_area{top: 20%;}
	.login_head,.music_head{font-size: 22px;}
	
	.top_row{margin: 0 0 45px 0;}
	.logo_r{font-size: 16px;}
	.music_l{margin: 0 15px 0 0;}
	.music_r{width: 87%;}
	.logo_r span {padding: 0 25px 0 17px;}
	.logo_l{width: 90px;}
	.music_l{width: 90px;}
	.music_wait{padding: 0 0 0 34px;}
	.ply_btn{width: 20px;}
	
	
}

@media screen and (max-width:1024px){
	
	
	
}



@media screen and (max-width:900px){
	
	.login_head,.music_head {font-size: 20px;}
	.logo_l{width: 80px;}
	.top_row {margin: 0 0 35px 0;}
	.music_l {width: 80px;}
	.music_r {width: 85%;}
	.ply_btn {width: 17px; margin-top: -5px;}
	.music_cont{min-height: 80px;}
	.music_one_pic img {width: 80px; height: 80px;}
	.music_name span{margin: 0 0 10px 0;}
	.music_cont{padding: 0 0 0 98px;}
	.music_name{font-size: 14px;}
	.misuc_row{height: 94px;}


	
}

@media screen and (max-width:800px){
	
	
	
} 

@media screen and (max-width:700px){
	.logo_row{padding: 10px 0;}
	.wrapper{padding: 0 20px;}
	.logo_r{font-size: 14px;}
	.login_area{width: 300px; right: 50%; margin-right: -150px; top:35%; }
	.logo_r span {padding: 0 10px;}
	.logo_r ul li{margin: 0 15px 0 0;}
	
	.top_row{margin: 0 0 37px 0;}
	.logo_l{width: 60px;}
	
	.music_r {width: 70%;}
	.music_l {width: 70px;}
	.login_head, .music_head {font-size: 18px;}
	.music_one_pic img {width: 70px; height: 70px;}
	.music_cont{min-height: 70px;}
	.playlist_bx{margin: 0;}
	body { background: url(../images/main_bg.jpg) repeat;
		background-attachment:inherit;}
	
}

@media screen and (max-width:568px){
	.logo_l{left: 0;}
	.logo_r span{padding: 0 0 0 10px;}
	.logo_r ul li{margin: 0 0 0 10px;}
	
	.music_r {width: 70%;}
	.music_l {width: 55px;}
	.music_head {font-size: 15px;}
	.music_head span{font-size: 12px;}
	.music_one_pic img {width: 55px; height: 55px;}
	.music_cont{min-height: 55px;}
	
	.middle_cont{margin: 0 0 20px 0;}
	.music_cont {padding: 0 0 0 80px;}
	.ply_btn {width: 12px; margin-top: -8px;}
	.music_wait {padding: 0 0 0 20px;}
	.back_btn{font-size: 12px; margin: 0 0 0 13px;}

}

@media screen and (max-width:480px){
	
	
	
}

@media screen and (max-width:375px){
.music_cont {padding: 0 0 0 67px;}
	.back_btn{margin: 0 0 0 13px;}

}

@media screen and (max-width:360px){
	.login_content{width: 100%;}
	.login_area{width: 280px; right: 50%; margin-right: -140px; top:35%; }

}

@media screen and (max-width:340px){

	
}


@media screen and (max-width:320px){
	.wrapper {padding: 0 10px;}
	footer{line-height: 45px;}
	footer img{width:45px;}
	
}