@font-face {
	font-family: 'Segoe UI';
	src: url('../fonts/SegoeUI.eot');
	src: local('Segoe UI'), local('SegoeUI'),
		url('../fonts/SegoeUI.eot?#iefix') format('embedded-opentype'),
		url('../fonts/SegoeUI.woff') format('woff'),
		url('../fonts/SegoeUI.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Segoe UI';
	src: url('../fonts/SegoeUI-Bold.eot');
	src: local('Segoe UI Bold'), local('SegoeUI-Bold'),
		url('../fonts/SegoeUI-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/SegoeUI-Bold.woff') format('woff'),
		url('../fonts/SegoeUI-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
input[type=number],
input[type=tel],
input[type=url],
input[type=password],
input[type=text],
input[type=email],
input[type=reset],
input[type=button],
input[type=submit],
input[type=search],
button,
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}
img {
	vertical-align: top;
	height:auto;
	max-width:100%;
}
body, html{height:100%;}
body {
	width:100%;
	font:15px "Segoe UI", Helvetica, Arial, sans-serif;
	color: #707070;
	background: #fff;
	min-width:320px;
	-webkit-text-size-adjust: none;
	margin:0;
	display:table;
	table-layout:fixed;
  background-image: linear-gradient(to right, #fffbd5, #ce57004a );
}
input, textarea, select, button {
	outline: none;
	vertical-align:middle;
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
	border-radius:0;
}
*:focus {
    outline: none;
}
a{
	color: #002c33;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
/* wrapper */
.wrapper{
	display:table-cell;
	width:100%;
	margin:0 auto;
	overflow:hidden;
	position:relative;
	z-index:5;
}
.page-holder{
	max-width:970px;
	padding:0 15px;
	margin:0 auto;
}
.page-holder:after{
	content:"";
	clear:both;
	display:block;
}
.text-holder{padding: 2vh 0 0 0;}
header{
	padding:30px 15px;
  display: inline;
  background-color: "aliceblue";
}
header .page-holder{
    max-width: 90vw;
}
.logo{
	font-size:15px;
	line-height:1.2;
}
.text-title{
	  font-size:18px;
	  text-align:center;
	  line-height:1.2;
}
.text-description{
	  font-size:14px;
	  text-align:center;
    line-height:1.2;
    margin: 4vh;
}
.nav{
	margin:0 0 0 auto;
	padding:0;
	list-style:none;
	text-align:right;
}
.nav li{
	display:inline-block;
	vertical-align:top;
	padding:2px 0 2px 20px;
}
.search-song-area{
	position:relative;
	overflow:hidden;
	margin:0 0 65px;
}
.search-song-area input[type="text"]{
	display:block;
	width:100%;
	border:1px solid #ebebeb;
	background:#f9f9f9;
	padding:26px 30px;
	color:#707070;
	font-size:16px;
	height:70px;
}
.search-song-area ::-webkit-input-placeholder{color: #707070;}
.search-song-area ::-moz-placeholder{
	color: #707070;
	opacity: 1;
}
.search-song-area :-moz-placeholder{
	color: #707070;
	opacity: 1;
}
.search-song-area :-ms-input-placeholder{color: #707070;}
.search-song-area button{
	position:absolute;
	right:1px;
	top:0;
	width:72px;
	height:100%;
	font-size:30px;
	border:0;
	background:none;
	padding:0;
	cursor:pointer;
	color:#9a9a9a;
}
.search-song-area button:hover{
	color:#444;
	background:#ebebeb;
}
.choose-song-area h1{
	text-align:center;
	margin:0 0 42px;
	font-weight:normal;
	color:#707070;
	font-size:25px;
	line-height:1.2;
}
.choose-song-area h1.left{
	text-align:left;
	margin:0 0 32px;
}
.song-lst{
	margin:0 -10px;
	padding:0 0 39px;
	list-style:none;
	display:flex;
	flex-wrap:wrap;
}
.song-lst > li{
	width:33.33%;
	padding:0 10px 49px;
}
.song-lst .img{
	border:1px solid #ebebeb;
	background:#f9f9f9;
	margin:0 0 25px;
	text-align:center;
}
.song-lst h2{
	margin:0 0 13px;
	font-size:18px;
	line-height:1.15;
	font-weight:normal;
	color:#707070;
}
.song-lst h2 a{color:#707070;}
.song-lst h2 a:hover{
	color:#111;
}
.song-lst p{
	margin:0 0 23px;
	line-height:1.1;
}
.add-lst{
	margin:0;
	padding:0;
	list-style:none;
	font-size:13px;
	line-height:1.2;
}
.add-lst li{
	display:inline-block;
	padding:0 0 0 23px;
	margin:0 27px 20px 0;
	vertical-align:top;
	position:relative;
}
.add-lst li.view:before{
	content:"\f15c";
	position:absolute;
	top:0;
	left:0;
	font-family: 'Material-Design-Iconic-Font';
	font-size:15px;
	color:#707070;
}
.add-lst li.fav{padding-left:18px;}
.add-lst li.fav:before{
	content:"\f15e";
	position:absolute;
	top:0;
	left:0;
	font-family: 'Material-Design-Iconic-Font';
	font-size:14px;
	color:#707070;
}
.choose-song-area .btn-holder{text-align:center;}
.choose-song-area .btn-holder .add-txt{
	display:block;
	padding:0 0 11px;
	font-size:14px;
	line-height:1.2;
	color:#707070;
}
.choose-song-area .btn-holder a{
	text-decoration:none;
	display:inline-block;
	vertical-align:top;
	position:relative;
	background:#f9f9f9;
	border:1px solid #ebebeb;
	color:#707070;
	font-size:16px;
	font-weight:bold;
	line-height:1.2;
	padding:25px 44px;
}
.choose-song-area .btn-holder a:hover{background:#fbf5f5;}
.choose-song-area .btn-holder a span{
	display:block;
	position:relative;
	padding:0 0 0 60px;
}
.choose-song-area .btn-holder a span:before{
	content:"\f2f9";
	font-family: 'Material-Design-Iconic-Font';
	position:absolute;
	top:50%;
	margin:-23px 0 0;
	left:0;
	width:45px;
	height:45px;
	border-radius:45px;
	background:#eee;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:26px;
}
.ico-home{
	width:70px;
	height:70px;
	margin:0 0 61px;
	background:#f9f9f9;
	border:1px solid #ebebeb;
}
.ico-home.inner{margin:0 0 83px;}
.ico-home a{
	text-decoration:none;
	display:flex;
	align-items:center;
	justify-content:center;
	height:100%;
	width:100%;
	font-size:30px;
	line-height:1.2;
	color:#707070;
}
.ico-home a:hover{background:#ebebeb;}
.song-lst-sorted{
	margin:0;
	padding:0 0 45px;
	list-style:none;
}
.song-lst-sorted > li{
	background:#f9f9f9;
	border:1px solid #ebebeb;
	display:flex;
	margin:0 0 30px;
	align-items:center;
}
.song-lst-sorted .img{
	min-width:69px;
	max-width:69px;
	width:7%;
	align-self:flex-start;
}
.song-lst-sorted .txt-box{
	width:93%;
	height:100%;
	padding:10px 30px 10px 31px;
	display:flex;
	align-items:center;
}
.song-lst-sorted h2{
	font-weight:normal;
	margin:0;
	max-width:45%;
	font-size:18px;
	line-height:1.2;
	color:#707070;
}
.song-lst-sorted h2 a{color:#707070;}
.add-list{
	margin:0 0 0 auto;
	padding:0;
	list-style:none;
	font-size:15px;
	line-height:1.1;
}
.add-list li{
	margin:0 0 0 29px;
	padding:0 0 0 31px;
	display:inline-block;
	vertical-align:middle;
	position:relative;
}
.add-list li.time:after,
.add-list li.difficult:after{
	content:"\f39e";
	font-family: 'Material-Design-Iconic-Font';
	position:absolute;
	top:-2px;
	left:0;
	font-size:18px;
	color:#707070;
}
.add-list li.time{padding-left:28px;}
.add-list li.time:after{
	content:"\f339";
	font-size:20px;
}
/*.img-banner{
	border:1px solid #ebebeb;
	margin:0 0 26px;
}*/
.img-banner{
	  /* border:1px solid #ebebeb;
	 margin:0 0 26px; */
	  text-align: center;
    grid-row: 1 / 4;
    position: relative;
    padding-bottom: 56.25%;
    /* padding-top: 35px; */
    height: 0;
    overflow: hidden;
}

#youtube-player
.img-banner iframe{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    max-height: 50vh;
    height: 100%;
}
.song-info{
	display:flex;
	align-items:center;
	margin:0 0 72px;
}
.song-info h2{
	margin:0;
	font-weight:normal;
	font-size:18px;
	line-height:1.2;
	max-width:50%;
}
.choose-song-area.inner .add-lst{
	margin:0 0 0 auto;
	font-size:15px;
}
.choose-song-area.inner .add-lst li{margin:0 0 0 29px;}
.choose-song-area.inner .add-lst li.view::before{
	font-size:19px;
	top:-3px;
}
.choose-song-area.inner .add-lst li.view{padding-left:26px;}
.choose-song-area.inner .add-lst li.fav{padding-left:21px;}
.choose-song-area.inner .add-lst li.fav::before{
	font-size:17px;
	top:-1px;
}
.music-notes h2{
	margin:0 0 35px;
	font-size:18px;
	line-height:1.2;
}
.music-notes .img-holder{
	padding:0 0 79px;
}
.song-player-area{
	/* padding:0 120px; */
	position:relative;
}
.song-player-area .btn-next,
.song-player-area .btn-prev{
	width:70px;
	height:70px;
	border:1px solid #ebebeb;
	background:#f9f9f9;
	position:absolute;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
	font-size:36px;
	color:#707070;
}

.editor-btn-line{
    border-color:gray;
    border-width:1px 0 1px 0;
}
.editor-btn{
	  background:white;
}

.song-player-area .btn-next:hover,
.song-player-area .btn-prev:hover{background:#ebebeb;}
.song-player-area .btn-next{
	left:auto;
	right:0;
}
.song-player{
	border:1px solid #ebebeb;
	background:#f9f9f9;
	padding:14px 99px;
	position:relative;
	display:flex;
	min-height:68px;
}
.song-player .btn-mute,
.song-player .btn-play{
	width:40px;
	line-height:40px;
	background:#cfcfcf;
	border-radius:40px;
	color:#8c8c8c;
	font-size:18px;
	text-align:center;
	position:absolute;
	top:14px;
	left:30px;
}
.song-player .btn-mute:hover,
.song-player .btn-play:hover{background:#dbd9d9;}
.song-player .btn-mute{
	left:auto;
	right:30px;
}
.song-length{
	margin:16px 0 0;
	height:23px;
	width:100%;
	position:relative;
}
.song-length:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background:#cfcfcf;
	height:8px;
	border-radius:6px;
}
.song-length .length-block{
	position:absolute;
	top:-6px;
	left:0;
	width:23px;
	height:23px;
	background:#8c8c8c;
	border-radius:23px;
	cursor:pointer;
}
.video-holder-area{
	position:relative;
}
.video-holder-area .overlay-area i{
	/*
when font size of the icons are reduced, they tend to stick to the top
of the overlay div. On removing this, they return to the center of the div
margin-top:-20%;
*/
	position:relative;
	z-index:2;
}
.video-holder-area .overlay-area{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	max-height:30vh;
	height:100%;
	z-index:5;
	font-size:488px;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
}
.video-holder-area .overlay-area:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#f9f9f9;
	opacity:0.1;
}
/* footer */
footer{
	position:relative;
	display:table-footer-group;
	height:1%;
	z-index:5;
}
.copy{
	display:block;
	padding:20px 0;
	text-align:center;
	line-height:1.2;
}

.main{padding:20px 0 2vh;}
/* responsive layout */
@media screen and (max-width: 767px){
	.song-lst-sorted > li{margin:0 0 15px;}
  /* main */
  .main{padding:20px 0 40px;}
}
@media screen and (max-width: 667px){
	.song-lst > li{width:50%;}
	.add-list li{
		margin-left:19px;
		padding-left:23px;
	}
	.add-list li.time{padding-left:23px;}
	.song-lst-sorted .txt-box{
		padding:10px 15px;
		align-items:flex-start;
	}
	.song-player-area{padding:0 15px;}
	.song-player{padding:14px 75px;}
	.song-player .btn-play{left:15px;}
	.song-player .btn-mute{right:15px;}
	.ico-home.inner{margin:0 0 61px;}
	.choose-song-area h1{
		font-size:23px;
		margin:0 0 36px;
	}
	.song-lst-sorted{padding:0 0 35px;}
	.choose-song-area h1.left{margin:0 0 22px;}
	.song-info{margin:0 0 52px;}
	.music-notes .img-holder{padding:0 0 59px;}
	.video-holder-area .overlay-area{font-size:388px;}
  .page-holder{padding:10vh 0 0 0;}
}
@media screen and (max-width: 479px){
	.music-notes h2,
	.song-info h2{font-size:17px;}
	.song-lst > li{width:100%;}
	.song-lst{padding:0 0 19px;}
	.song-lst-sorted h2{
		font-size:16px;
	}
	.add-list{font-size:14px;}
	.song-lst-sorted .img{
		max-width:60px;
		min-width:60px;
	}
	.add-list li{margin-left:8px;}
	.song-player-area .btn-next, .song-player-area .btn-prev{
		width:50px;
		height:50px;
		font-size:28px;
	}
	.song-player-area{padding:0 10px;}
	.song-player .btn-mute, .song-player .btn-play{
		width:30px;
		line-height:30px;
		font-size:16px;
		top:8px;
	}
	.song-player .btn-play{left:9px;}
	.song-player .btn-mute{right:9px;}
	.song-player{
		padding:4px 44px;
		min-height:50px;
	}
	.song-length .length-block{
		width:17px;
		height:17px;
		top:-5px;
	}
	.song-length::before{height:6px;}
	.song-info{
		display:block;
		margin:0 0 42px;
	}
	.song-info h2{
		margin:0 0 10px;
		max-width:none;
	}
	.choose-song-area .add-lst{margin:0;}
	.choose-song-area .add-lst li{margin:0 22px 0 0;}
	.video-holder-area .overlay-area{font-size:268px;}

  .page-holder{padding:10vh 0 0 0;}
}
@media screen and (max-width: 400px){
	.song-lst-sorted h2{max-width:35%;}
  .page-holder{padding:10vh 0 0 0;}
}
@media screen and (max-width: 349px){
	.song-lst-sorted h2{margin:0 0 2px;}
	.song-lst-sorted .txt-box{display:block;}
	.add-list li{margin:0 8px 0 0;}
	.song-lst-sorted h2{max-width:none;}
  .page-holder{padding:10vh 0 0 0;}
}