@media screen and (max-width: 1440px) {
    header {
    	margin-left: 240px;
    	padding: 50px 50px;
    	width: calc(100% - 240px);}
    nav {
    	padding: 50px 40px;
    	width: 240px;}
    section {
    	padding: 0 40px 40px 40px;
    	margin: 150px 0 65px 240px;}
    .single section {
        margin: 150px 0 100px 240px;}
    .audioplayer {
    	padding: 0 20px;}
    .lyrics {
    	font-size: 16px;
    	max-height: calc(100vh - 475px);}
    .playable img, .viewable img {
    	height: 20px;}
    .viewable {
    	line-height: 20px;}
    hr {
    	padding-bottom: 20px;
    	margin-bottom: 35px;}
    .cover-image {
    	margin-bottom: 10px;}
    small {
    	font-size: 12px;
    	text-align: left;}
    footer {
        left: 290px;
        width: calc(100% - 340px);}
    .header-search-form {
        margin-left: 0;}
    .corner-menu {
        margin-right: 0;}
    .avatar-wrapper {
        width: 60px;}
    .avatar {
        height: 60px;
        width: 60px;}
    .song-list .col {
        width: 100%;}
    .recommended-songs p {
        font-size: 12px;}
    .login-right span {
        font-size: 56px;}
    .login i {
        padding: 25px;
        font-size: 16px;}
    .footer-menu {
        margin-top: 30px;}
}

@media screen and (max-width:  1280px ) {
    .sub-page .header-search-form {
        margin-left: unset;}
}

@media screen and (max-width: 1024px) {
    h1 {
        font-size: 28px;}
    strong {
        font-size: 14px;}
    .single em {
        padding: 0 10px;}
    .col-sm-3, .col-sm-4 {
    	width: calc(50% - 20px);}
    .col-sm-5 {
        width: calc(100% - 20px);}
    .single .col-sm-3:nth-last-child(1), .single .col-sm-3:nth-last-child(2) {
        width: calc(100% - 20px);}
    .lyrics {
        max-height: unset;}
    .downloadable-contents-wrapper {
        max-height: unset;}
    .cover-image {
        max-height: unset;}
    section {
        margin: 150px 0 20px 240px;}
    .sub-panel {
        height: auto;}
    body {
        overflow: visible;}
    header.poz-top {
        opacity: 0;
        visibility: hidden;}
    footer {
        background-color: rgba(255, 255, 255, 0.85);
        box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.05);}
    .recommended-songs .col {
        width: calc(50% - 20px);}
    .recommended-songs .col:last-child {
        display: none;}
    body.dark-style footer {
        background-color: rgba(255, 255, 255, 0.9);}
    .audio-pre-button {
        border: 1px solid #000;}
    .audio-pre-button span {
        border-left: 12px solid #000;}
    footer p {
        color: #000;}
}

@media screen and (max-width: 768px) {
	body::before {
        opacity: 0.005;}
    h1 {
        flex-wrap: wrap;
        margin-top: -25px;}
    .login {
        height: auto;}
    .login h1 {
        margin-top: 10px;
        color: #32364d;}
    .login input {
        border: none;
        background-color: rgba(255, 255, 255, 0.66);}
    strong {
        padding-bottom: 0;}
    strong br {
        display: block;}
    .updatelyrics {
        top: 45px;}
    .yt {
        width: 100%;
        margin: 10px 0 0 0;
        padding: 3px 3px 3px 25px;
        background-size: 20px auto;}
    .single em {
        font-size: 0;}
    nav {
        padding: 20px 40px;
        z-index: 99;
        background: rgba(255, 255, 255, 0.99);
        color: #000;
        box-shadow: 0px 0px 33px rgba(0, 0, 0, 0.05);
		left: -240px;}
    nav ul li a, nav button {
        color: #000;}
    blockquote {
        margin: 20px;}
    nav ul li:nth-child(2) {
        margin-bottom: 0;}
    nav ul {
        height: calc(100% - 280px);
        margin-bottom: 16px;}
    nav ul li.active::after {
        background-color: rgba(0, 0, 0, 0.1);}
    .logout {
        bottom: 40px;}
    nav.active {
        left: 0;}
	header {
		padding: 20px;
        position: relative;
		width: 100%;
		margin: 0;}
    header.poz-top {
        opacity: 1;
        visibility: visible;}
	header form {
		width: 100%;}
    .col-sm-3, .col-sm-4, .col-sm-5 {
    	width: 100%;}
    .col {
    	margin: 10px 0;
    	padding: 0;}
    .single .col-sm-3:nth-last-child(1), .single .col-sm-3:nth-last-child(2) {
        width: 100%;}
    .row {
    	margin: 0;}
    section {
        padding: 20px;
        margin: 0;}
    .single section {
    	padding: 20px 20px 120px 20px;
    	margin: 0;}
    .cover-image {
    	display: block;
    	border-radius: 15px;
    	max-height: none;
    	margin: 20px 0px 10px 0px;}
    small {
    	padding-top: 5px;}
    .lyrics {
    	padding: 0 0 25px 0;
    	max-height: none;}
    .downloadable-contents-wrapper {
    	max-height: none;}
    body {
    	scrollbar-width: none;
    	overflow: hidden;
    	height: 100vh;
    	overflow-y: scroll;}
    body::before {
        left: 0;
        top: 0;
        width: 100%;}
    .audioplayer-volume-adjust {
        display: none;}
    .login-left {
        width: calc(100% - 40px);}
    .login-right {
        display: none;}
    .song-list span {
        padding: 0;
        font-size: 22px;
        margin-top: 20px;}
    .song-list {
        max-height: unset;}
    .nav-menu-btn {
        display: flex;}
    .single .nav-menu-btn {
        display: none;}
    .corner-menu {
        display: none;}
    .header-search-form {
        width: 100%;
        max-width: 100%;}
    .sub-page .header-search-form {
        margin-right: 0;}
    .updatelyrics button.chord {
        right: 10px;}
    .bpm {
        top: 5px;
        right: 10px;
        left: auto;}
    footer {
        background-color: #fff;
        width: calc(100% - 40px);
        left: 20px;}
    .footer-menu {
        display: none;}
    nav form {
        display: block !important;}
    .saz {
        justify-content: center;}
    .recommended-songs .col {
        width: 50%;
        padding: 10px;}
    .home section {
        height: auto;}
    body.login-wrapper::before {
        opacity: 0.33;
        filter: grayscale(100%);
        top: -25px;
        left: -25px;
        width: calc(100% + 50px);
        height: calc(100% + 50px);
        background-image: url("/skin/img/login-bg2.jpg");}
    body.login-wrapper .login {
        background-color: transparent;}
    .switch {
        width: 100%;}
    .song-list li a p b {
        display: block;
        margin: 0;}
    nav .switch {
        display: block;}
    body.dark-style nav ul li a {
        color: #fff;}
    body.dark-style nav {
        background-color: rgba(0, 0, 0, 0.8);}
    body.dark-style nav .name {
        color: #fff;}
}

@media screen and (max-width: 576px) {
    h2 {
        padding: 20px 10px;
        font-size: 22px;}
    section.logged-out {
        padding: 20px;}
    .song-list li a {
        padding: 0px;}
    .song-list li a strong {
        display: none;}
    .song-list li a .arrow {
        display: none;}
    .song-list li a p {
        font-size: 14px;}
    .sub-panel {
        padding: 20px;}
    .sub-panel h1 {
        margin-top: 0px;}
    section.logged-out .sub-panel {
        height: auto;}
}
@media screen and (max-width: 440px) {
    .saz a {
        width: calc(20% - 20px);}
}