@import url("variable.css");

@media(min-width:768px){
	.header-navigation-wrapper {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}

.post-box:hover .post-title h2:after {
    width: 100%;
}
.article-box:hover .article-date, .blog-item:hover .article-date {
    transform: scale(0);
}
.author-box:hover .author-meta svg {
	transform: scale(1);
}

.author-box:hover .author-meta:after {
    opacity: 0.8;
    visibility: visible;
}
.author-box:hover .author-meta span{
    opacity: 1;
    visibility: visible;
}
.most-recent-post .post-box:hover .post-title h2:after {
    width: 100%;
}

.most-recent-post .post-box:hover .post-play {
    transform: translate(-50%, -50%) scale(1);
}

.article-box:hover .article-title h3, .blog-item:hover .article-title h3 {
	background-size: 100% 40%;
	color: rgba(var(--uh-primary));
}
.article-box:hover .article-image:after, .blog-item:hover .article-image:after {
    visibility: visible;
    opacity: 1;
}
.article-box:hover .article-image:before, .blog-item:hover .article-image:before {
    transform: translate(-50%, -50%) scale(1);
}
.article-box:hover .article-image img, .blog-item:hover .article-image img {
	transform: scale(1.2);
}
.most-recent-post .post-box:hover .post-play {
    transform: translate(-50%, -50%) scale(1);
}
}

@media(max-width:1450px){
.trending-post-thumbnail {
    height: 70px;
    width: 110px;
}
.trending-post-tag a, .sidebar-artisat-name, .popular-post-wrapper .post-date, .trending-post-artist-name, .most-recent-post .artist-name {
    font-size: 12px;
}
.field-flex input#mc-embedded-subscribe {
    font-size: 12px;
    padding: 0 15px;
}
.trending-post-title h2 {
    line-height: 22px;
}
.sidebar-post-thumbnail img {
    width: 65px;
    height: 50px;
    border-radius: 5px;
    min-width: 65px;
}
.sidebar-music-svg svg {
    width: 32px;
}
.sidebar-post-title h3 {
    font-size: 14px;
    line-height: 20px;
}
.popular-post-wrapper .post-box .thumbnail {
    height: 220px;
}
.container {
    max-width: 1170px;
}
.sidebar-inr {
    max-width: 320px;
}
.header-container h1 {
    font-size: 48px;
}
.header-container .header-search button.search-submit svg {
    width: 30px;
    height: 30px;
}
.header-container .header-search button.search-submit {
    width: 70px;
}
.header-container .header-search input {
    height: 50px;
}
.header-inner {
    height: 75px;
}
#site-content {
    margin-top: 75px;
}
.dark-mode, .btn.custom-btn.learn-guitar, .custom-btn.new-songs {
    height: 45px;
    line-height: 45px;
}
.dark-mode {
    width: 45px;
}
.most-recent-post .post-title h2, .trending-post-title h2 a, .popular-post-wrapper .post-title h2, .article-title h3 {
    font-size: 17px;
        line-height: 22px;
}
.main-heading {
    font-size: 22px;
    padding-bottom: 20px;
}
.tags-list ul li a {
    font-size: 12px;
}
.footer-top h2 {
    font-size: 36px;
    line-height: 48px;
}
.footer-top {
    padding: 50px 0 40px;
}
.footer-top .footer-box+.footer-box {
    margin-top: 30px;
}
.popular-post-wrapper .post-svg svg {
    width: 42px;
    height: 42px;
}
.most-recent-post .post-play svg {
    width: 50px;
}
}

@media(max-width:1170px){
.top-artist .owl-carousel .owl-nav .owl-next {
    right: -15px;
}
.owl-carousel .owl-nav .owl-next {
    right: -15px;
}
.owl-carousel .owl-nav .owl-prev {
    left: -15px;
}
.hero-banner-inner {
    max-width: 600px;
}
.wp-block-social-links.is-style-logos-only .wp-social-link {
    width: 50px;
    height: 50px;
}
.main-content-wrapper > div+div {
    margin-top: 50px;
}
.footer-top .footer-box+.footer-box {
    margin-top: 10px;
}
#mc_embed_signup_scroll p {
    font-size: 14px;
}
.article-wrapper {
    padding: 25px 0 0;
}
.sidebar-grid-left {
    align-items: self-start;
}
.top-artist .owl-carousel:after {
display:none;
}
.field-flex input#mce-EMAIL {
    border-radius: 5px;
  border-right: 1px solid rgba(var(--uh-dark)) !important;
}
.popular-post-wrapper .post-box .thumbnail, .article-image {
    height: 200px;
}
.field-flex {
    flex-direction: column;
}
.field-flex input#mc-embedded-subscribe {
    border-radius: 5px;
    margin-top: 15px !important;
}
.tags-list ul li a {
    font-size: 10px;
    padding: 3px 8px;
        margin: 3px;
}
.tags-list ul {
    margin: 0 -3px;
}
.most-recent-post .post-title h2, .trending-post-title h2 a, .popular-post-wrapper .post-title h2, .article-title h3 {
    font-size: 16px;
    line-height: 20px;
}
.author-box h3 {
    width: 85%;
    font-size: 14px;
}
.author-image {
    height: 170px;
}
.sidebar-post-list, .tags-wrapper , #mc_embed_signup form {
     padding: 15px !important;
}
.trending-post-wrapper {
    padding: 15px 15px 0 15px;
}
.trending-post-title {
    padding-left: 15px;
}
.most-recent-post .post-title h2 {
    bottom: 15px;
    left: 15px;
}
.most-recent-post .artist-name {
    top: 15px;
    left: 15px;
}
.most-recent-post .post-date {
    top: 15px;
    right: 15px;
    font-size: 11px;
}
.most-recent-post .post-box {
    height: 190px;
}
.most-recent-post .post-play svg {
    width: 40px;
}
.trending-post-tag a, .sidebar-artisat-name, .popular-post-wrapper .post-date, .trending-post-artist-name, .most-recent-post .artist-name {
    font-size: 11px;
}
.trending-post-thumbnail {
    height: 60px;
    width: 60px;
    border-radius:5px;
}
.container {
    max-width: 960px;
}
.sidebar-inr {
    max-width: 258px;
}
.header-container h1 {
    font-size: 40px;
}
.header-navigation-wrapper .menu-item a{
height: 45px;}
.single-chord-main {
    padding: 50px 0;
}

.header-search input {
    height: 45px;
}
.header-inner .header-titles-wrapper {
    width: 110px;
}
.header-inner .header-search {
    width: 45%;
}
.header-inner {
    height: 70px;
}
#site-content {
    margin-top: 70px;
}
.header-titles img.custom-logo {
    max-width: 110px;
    height: auto;
}
.post-title h2 {
    font-size: 22px;
}
.social-share div.heateor_sss_horizontal_sharing .heateor_sss_sharing_ul a span, .custom-comment-social-share div.heateor_sss_horizontal_sharing .heateor_sss_sharing_ul a span {
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 5px;
    width: 22px !important;
    height: 22px !important;
}
.post-content-main h2 {
    font-size: 20px;
}
.social-share {
    letter-spacing: 0.1em;
}
.post-header-left {
    font-size: 14px;
}
.sidebar-post-title h3 {
  font-size: 14px;
    line-height: 16px;
    display: block;
}
.sidebar-post-thumbnail img {
    width: 60px;
    height: 60px;
    border-radius: 5px;
}
.toolset-font-change {
    padding: 5px 10px;
    border-radius: 5px;
    height: 35px;
    margin-right: 12px;
}
.toolset-up, .toolset-down {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
}

#font-size-input, #selTranspose-input {
    width: 45px;
    font-size: 13px;
}
.toolset {
    padding: 15px;
}
.custom-btn {
    padding: 5px 10px;
    height: 35px;
    line-height: 18px;
    font-size: 12px;
}
.btn-chord-hide-show {
        background-position: 94px 9px;
    width: 130px;
}
.btn-chord-hide-show.hide-show {
    background-position: 94px -28px;
}
.btn-merge {
    margin-right: 10px;
}
.tooset-label {
    font-size: 12px;
    font-size:0;
}

.footer-top {
    padding: 45px 0;
}
.footer-top h2 {
    font-size: 32px;
    line-height: 40px;
}
}

@media(max-width:991px) {
.learn-guitar svg, .new-songs svg {
    margin: 0;
}
.dark-mode, .btn.custom-btn.learn-guitar, .custom-btn.new-songs {
    width: 45px;
    padding: 0;
    display: flex;
    justify-content: center;
}
.header-inner .header-search {
    width: 100%;
}
.dark-mode, .btn.custom-btn.learn-guitar, .custom-btn.new-songs {
    font-size: 0;
}
.header-container h1 {
    font-size: 36px;
}
.header-container .header-search button.search-submit {
    width: 60px;
}
.header-container .header-search input {
    height: 45px;
}
.header-navigation-wrapper .menu-item:last-child a {
    background: transparent;
    color: rgba(var(--uh-dark)) !important;
    border-color: transparent;
}
.header-navigation-wrapper .menu-item a {
    border-radius: 0;
    padding: 0;
    height: inherit !important;
    min-width: inherit;
    justify-content: left;
    border: 0;
}
.main-wrapper {
    flex-direction: column;
}
.main-content-wrapper, .sidebar-content {
    max-width: 100%;
    flex: 0 0 100%;
}
.fixed.bottom .sidebar-inr, .sidebar-inr {
    position: initial;
    top: auto;
    bottom: 0px;
    width: 100% !important;
    max-height: initial;
    margin-top: 25px;
}
.pagination-single-inner svg {
    width: 14px;
}
.pagination-single-inner span.title {
    font-size: 15px;
}
.pagination-single-inner span.arrow {
    font-size: 12px;
}
.comment-respond form input[type=email], .comment-respond form [type=number], .comment-respond form [type=password], .comment-respond form [type=text], .comment-respond form [type=url] {
    border-radius: 5px;
    height: 45px;
}

.footer-follow-us {
    justify-content: center;
}
.footer-top {
    justify-content: center;
    padding: 40px 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.footer-follow-us li {
    margin-left: 0;
    margin: 0 5px;
}
.footer-box {
    margin: 10px 0;
}
.footer-follow-us li a svg {
    width: 20px;
}
.footer-box figure.wp-block-image.size-full {
    max-width: 150px;
}
.header-navigation-wrapper {
    z-index: 999;
    display: block;
    align-items: inherit;
    position: fixed;
    left: 0;
    top: 0;
    width: 200px !important;
    background: rgba(var(--uh-white));
    height: 100%;
    padding: 20px;
    box-shadow: 0 0 10px rgba(var(--uh-black), 10%);
    overflow: auto;
    -webkit-box-shadow: 0 0 10px rgba(var(--uh-black), 10%);
    box-shadow: 0 0 10px rgba(var(--uh-black), 10%);
    -webkit-font-smoothing: antialiased;
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: translate(-120%, 0);
    transform: translate(-120%, 0);
    -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}

div#nav-icon {
  min-width: 20px;
    width: 25px;
    height: 20px;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    -o-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    display: none;
    position: relative;
    z-index: 9991;
    top: 2px;
}
#nav-icon span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: rgba(var(--uh-dark));
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;
        
}
#nav-icon span:nth-child(1) {
    top: 0px;
}
#nav-icon span:nth-child(2) {
    top: 8px;
    -webkit-animation: nav-icon-bg 3s infinite;
    -moz-animation: nav-icon-bg 3s infinite;
    -o-animation: nav-icon-bg 3s infinite;
    animation: nav-icon-bg 3s infinite;
}
#nav-icon span:nth-child(3) {
    top: 16px;
}
.menu-open .header-navigation-wrapper {
    -webkit-transform: none;
    transform: none;
}
.menu-open #nav-icon span {
    background: rgba(var(--uh-white));
}
#nav-icon.open span:nth-child(1) {
    top: 7px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
#nav-icon.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
}
#nav-icon.open span:nth-child(3) {
    top: 7px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.overlay-close {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(var(--uh-black), 0.7215686274509804);
    left: 0;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 300ms all;
    transition: 300ms all;
}
.menu-open .overlay-close {
    opacity: 1;
    visibility: visible;
}
.header-navigation-wrapper ul {
    flex-direction: column;
}
.header-navigation-wrapper ul li + li {
    margin-left: 0;
    margin-top: 10px;
}
.header-navigation-wrapper .menu-item  {
width:100%;
}
.mobile-youtube, .mobile-sldo-view {
    display: block;
}
.single-chord .sidebar-content {
    display: none;
}
.sidebar-inr {
    max-width: 100%;
}
.mobile-sldo-view h2 {
    margin-top: 0;
}
.footer-top h2 {
    font-size: 26px;
    line-height: 33px;
}
.wp-block-social-links.is-style-logos-only .wp-social-link {
    width: 40px;
    height: 40px;
}
.footer-logo img {
    width: 110px;
}
.wp-social-link a {
    background-size: 16px !important;
}
.wp-social-link-facebook a {
    background-size: 8px !important;
}
}

@media(max-width:767px){
.footer-top h2 {
    font-size: 22px;
    line-height: 30px;
}
.footer-logo, .copyright-menu-box {
    display: none;
}
.footer-btm .container {
    justify-content: center;
}
.header-container h1 {
    font-size: 30px;
}
.single-chord-main {
    padding: 30px 0 15px;
}
.toolset-font-change {
    height: 40px;
}
.header-container .header-search input {
    padding: 12px;
    font-size: 13px;
    border-radius: 8px;
}
#custom-home-header .header-container {
    height: 310px !important;
}
.toolset {
    position: fixed;
    flex-direction: row;
    align-items: center;
    padding: 12.5px 15px;
    border-radius: 0;
    border: 0;
    background: rgba(var(--uh-white));
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -2px 10px rgba(var(--uh-black), 10%);
    justify-content: space-between;
}
.toolset-left, .toolset-right {
    align-items: center;
    flex-wrap: wrap;
}
.toolset-font-change {
    margin-bottom: 0;
}
.pagination-single-inner svg {
    width: 10px;
}
#commentform .form-submit input#submit {
    height: 40px;
}

.footer-box figure.wp-block-image.size-full {
    max-width: 100%;
}
.footer-top {
    padding: 25px 0;
}
.post-header-manu {
    padding: 15px 15px 0;
        border-radius: 5px 5px 0 0;
}
.post-content-main {
    padding: 15px;
}
.custom-comment-social-share {
    letter-spacing: 1px;
    font-size: 10px;
}
.custom-comment-total h3 {
    font-size: 16px;
}
.comment-form-cookies-consent {
    display: inline-flex;
    margin-top: 0;
}
.comment-reply a.comment-reply-link {
    font-size: 11px;
}
.post-title h2 {
    font-size: 20px;
    line-height: 1;
}
.header-inner .header-search {
    width: 100%;
    margin: 0;
    top: 60px;
    position: absolute;
    left: 0px;
    right: 0;
    box-shadow: 0 2px 5px rgba(var(--uh-black), 5%);
    display: none;
}
.header-inner {
    height: 60px;
}
.header-titles img.custom-logo {
    max-width: 95px;
}

.search-submit svg {
    width: 20px;
}
.header-search button.search-submit {
    width: 40px;
    display: none;
}
.header-search input {
 height: 50px;
    padding: 13px 35px 13px 15px;
}
.custom-logo-link {
    display: flex;
}
.header-search input {
    border-radius: 0;
    background: rgba(var(--uh-white));
    border:0;
}
.nav-search {
    position: absolute;
    right: 180px;
    top: 56%;
    transform: translateY(-50%);
    display: block;
    cursor: pointer;
    width: 20px !important;
}
.nav-search svg {
    width: 20px;
    height: 20px;
}

.social-share {
    letter-spacing: 1px;
    font-size: 10px;
}
.social-share .heateor_sss_sharing_container {
    margin-left: 5px;
}
div.heateor_sss_follow_ul a, div.heateor_sss_horizontal_sharing div.heateor_sss_sharing_ul a {
    margin: 0 !important;
}
span.artist-name {
      font-size: 12px;
    margin-top: 10px;
    display: block;
}
.post-header-right div {
    letter-spacing: 2px;
}
.post-content-main h2 {
    padding-top: 14px;
}

.tooset-label {
    font-size: 0;
    margin:0;
}
.post-header-right div + div {
    margin-top: 2px;
}
.post-header-right div {
    letter-spacing: 2px;
    font-size: 10px;
}
.post-header-right div svg {
    display: none;
}
.cpress_line {
    margin: 10px 0 0 !important;
    letter-spacing: 1px;
}
.single-chord-main .comments-wrapper.section-inner, .post-content-main {
    border-radius: 5px;
}

.single-chord-main .comments-wrapper.section-inner {
    padding: 15px;
}
.custom-comment-social-share .heateor_sss_sharing_container {
    margin-left: 5px;
}
#commentform .form-submit input#submit {
    border-radius: 5px;
}
.wp-block-embed iframe {
    border-radius: 5px;
}
 .main-content-wrapper > div+div, .main-content-wrapper > div+div {
    margin-top: 40px;
}
.sidebar-inr {
 margin-top: 25px;
 top:0 !important;
}
.archive-header-inner .archive-title {
    font-size: 26px;
    line-height: 31px;
}
.archive-header {
    padding: 15px;
}
.single-main-inr h2 {
    font-size: 22px;
    line-height: 32px;
}
.single-main-inr h3 {
    font-size: 18px;
    line-height: 22px;
}
.wrap-spacing {
    margin: 40px 0;
}
.article-wrapper {
    padding: 15px 0 0;
}
.main-wrapper {
    margin: 40px -15px 0;
}
.comment-meta a {
    font-size: 12px;
}
.sidebar-post-list {
    border-radius: 5px;
}
#menu-footer a, .wp-block-latest-posts a {
    padding: 0;
    font-size: 12px;
    line-height: 1;
}
.footer-box figcaption {
    font-size: 12px;
    margin: 10px 0 0;
}
.footer-copyright {
    font-size: 11px;
}
.comment.parent .comment {
    margin-top: 15px;
}
.pagination-single-inner {
    padding: 15px 0;
}
.custom-btn {
    padding: 0;
    height: 35px;
    font-size: 0;
    width: 35px;
    line-height: 35px;
    text-align: center;
}
.btn-merge {
    margin-right: 0;
}
.sidebar-content .widget-main {
    margin-top:18px;
}

.single-chord-main .comments-wrapper.section-inner {
    padding: 15px;
}

#site-content {
    margin-top: 60px;
}
.social-share div.heateor_sss_horizontal_sharing .heateor_sss_sharing_ul a span, .custom-comment-social-share div.heateor_sss_horizontal_sharing .heateor_sss_sharing_ul a span {
    width: 21px !important;
    height: 21px !important;
}
#commentform input+ label {
    font-size: 12px;
    top: -1px;
    left: 4px;
        line-height: 18px;
}
.comment-respond form input[type=email], .comment-respond form [type=number], .comment-respond form [type=password], .comment-respond form [type=text], .comment-respond form [type=url] {
    height: 40px;
}
.footer-box figure.wp-block-image.size-full img {
    width: 150px;
}
#commentform textarea#comment {
    border-radius: 5px;
}

.comment-author img {
   display:none;
}
.comment-content p {
    font-size: 14px;
    line-height: 20px;
}
.comment-body {
    margin-left: 30px;
}
.comment.parent .comment {
    margin-left: 0;
}
.comment-body {
    padding-bottom: 10px;
    margin-left: 0;
}

.comment-reply a.comment-reply-link {
    font-weight: 600;
}
.sidebar-music-svg svg {
    width: 30px;
    height: 30px;
}
.sidebar-artisat-name {
    font-size: 11px;
    line-height: 17px;
    letter-spacing: 0.5px;
}

header#site-header{
position: absolute;}
header#site-header.sticky {
    top: 0;
}
#font-size-input, #selTranspose-input {
    width: 35px;
}
.custom-btn {
    height: 40px;
    width: 40px;
    line-height: 40px;
}
.comments-inner {
    border-radius: 5px;
}
.btn-chord-hide-show {
    background-position: center 12px;
}
.btn-chord-hide-show.hide-show {
    background-position: center -25px;
}
.trending-post-wrapper > li {
    flex: 0 0 100%;
    max-width: 100%;
    border-bottom: 1px solid rgba(var(--uh-black), 0.1);
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.trending-post-wrapper > li:last-child {
    padding: 0;
    border: 0;
}
.hero-banner-inner {
    padding: 0 25px;
}
.home .header-search-wrapper {
    display: none;
}
.header-search-wrapper {
    flex: auto;
}
.dark-mode, .btn.custom-btn.learn-guitar, .custom-btn.new-songs {
    width: 40px;
    height: 40px;
}
.custom-btn svg {
    width: 16px;
}
.most-recent-post .post-date {
    display: none;
}
.most-recent-post .post-title h2, .trending-post-title h2 a, .popular-post-wrapper .post-title h2, .article-title h3 {
    font-size: 14px;
    line-height: 18px;
    display: inline-block;
}
.article-date {
display:none;
}
.footer-btm-box {
    max-width: 100%;
    flex: 0 0 100%;
}
.article-carousel .item {
    margin: 20px 10px;
    width: calc(50% - 20px);
}
.head-wrapper a {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: 1px;
}
.article-title {
    padding-top: 0px;
}
.trending-post-release-date {
    margin-left: 5px;
    font-size: 10px;
}
.trending-post-tag a, .sidebar-artisat-name, .popular-post-wrapper .post-date, .trending-post-artist-name, .most-recent-post .artist-name {
    font-size: 10px;
}
.trending-post-tag a {
    padding: 2px 7px;
}
.dark-mode svg {
    width: 20px;
}
.dark-mode .dark-mode-icon {
    width: 17px;
}
.pagination-single-inner span.title {
    font-size: 14px;
}
.single-main-inr img {
    max-height: 310px;
    object-fit: cover;
    width: 100% !important;
}
.post-inner-meta p {
    font-size: 12px;
}
}

@media(max-width:480px){
.popular-post-wrapper .post-box {
    flex: 0 0 calc(100% - 20px);
    max-width: calc(100% - 20px);
    margin: 0 10px 15px;
}
.hero-banner-inner {
    padding: 0;
}
.article-carousel .item {
    margin: 15px 10px;
}
.article-image, .author-image, .most-recent-post .post-box {
    height: 140px;
}
.comment-form-cookies-consent input {
    margin-top: 6px;
}

}