/* Menu */
#topmusic-main-menu{
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    height:150px;
    overflow:visible;
    opacity:.99;
    z-index:100;
    background-image:url('../images/topmusic-2021/main-menu-bg-big-light.svg');
    background-size:cover;
    background-position:bottom center;
    background-repeat:no-repeat;
    transition: all ease-in-out .5s;
}
#topmusic-main-menu a:not([class*="btn"]) {
    text-transform: uppercase;
    cursor: pointer;
    text-wrap: none;
    transition: all ease-in-out .5s;
    color: var(--midnight-blue);
    line-height: 40px;
    font-size: 18px;
    z-index: 11;
    font-family: 'Flama',sans-serif;
                /*font-family: 'Flama',sans-serif;*/
}
#topmusic-main-menu a:hover {
    color: var(--cool-teal);
    transition: all ease-in-out .5s;
}
.admin-bar #topmusic-main-menu {
    top:32px;
}
#topmusic-main-menu .topmusic-go-pro {
    position: absolute;
    bottom: 23px;
    left: calc(50% - 50px);
}
#topmusic-main-menu .topmusic-go-pro a {
    display: block;
    width: 100px;
    height: 100px;
    background-image: url('../images/topmusic-2021/go-pro.svg');
    background-size: 100px auto;
    background-repeat: no-repeat;
    background-position: bottom center;
}
#topmusic-main-menu .topmusic-go-pro.topmusic-go-pro-join a {
    background-image: url('../images/topmusic-2021/join.svg');
}
#topmusic-main-menu-logo {
    display: block;
    width: 200px;
    height: 40px;
    background-image: url('../images/topmusic-2021/topmusic-logo-blue.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position:center;
}
#topmusic-main-menu-logo.topmusic-pro-logo,.dark #topmusic-main-menu-logo.topmusic-pro-logo {
    background-image: url('../images/topmusic-2021/topmusic-pro-logo.svg');
    width: 250px;
    height: 60px;
}
.dark #topmusic-main-menu {
    background-image:url('../images/topmusic-2021/main-menu-bg-big-dark.svg');
}
.dark #topmusic-main-menu a:not([class*="btn"]) {
    color: var(--cool-teal);
}
.dark #topmusic-main-menu a:hover {
    color: white;
}
.dark #topmusic-main-menu .topmusic-go-pro a {
    background-image: url('../images/topmusic-2021/go-pro-dark.svg');
}
.dark #topmusic-main-menu .topmusic-go-pro.topmusic-go-pro-join a {
    background-image: url('../images/topmusic-2021/join-dark.svg');
}
.dark #topmusic-main-menu-logo {
    background-image: url('../images/topmusic-2021/topmusic-logo-white.svg');
}
.topmusic-menu-item.selected{
    color:var(--cool-teal)!important;
}
.dark .topmusic-menu-item.selected {
    color:var(--white)!important;
}
/* Menu items */
.topmusic-submenu {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:90;
}
.topmusic-submenu:not(#topmusic-search):after{
    width: 100%;
    height: 80px;
    margin-top:-170px;
    position: relative;
    display:block;
    content:' ';
    box-shadow: rgba(0, 0, 0, 0.5) 0 45px 45px;
    z-index: -1;
    background-color:var(--almost-white);
}
.dark .topmusic-submenu:after{
    background-color:var(--almost-black);
    box-shadow: rgb(130 58 203) 0 45px 45px;
}
.topmusic-submenu-content {
    padding-top:175px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
/* Learn */
#topmusic-learn h2 {
    line-height: 125%;
    font-size: var(--font-m);
}
#topmusic-learn h3 {
    font-size: var(--font-s);
    line-height: 150%;
    color: var(--mid-grey-old);
    margin-bottom:18px;
}
#topmusic-learn a .border-radius-l {
    border: 1px solid transparent;
    overflow:hidden;
}
#topmusic-learn a:hover .border-radius-l {
    border: 1px solid var(--cool-teal);
}
#topmusic-learn img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transition: all .5s linear;
}
#topmusic-learn a:hover img:not(.rocket-animation) {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transition: all .5s linear;
    animation: bounce 2s;
}
.rocket-animation {
    animation: rocket-fly-by 12s ease-in-out infinite;
}
.dark #topmusic-learn a:hover .border-radius-l {
    border: 1px solid var(--purple-rain);
}
.dark #topmusic-learn img:not(.rocket-animation) {
    background: var(--cool-rain);
    border-radius: 100%;
    border: 1px solid var(--purple-rain);
    margin-left: 20px;
    margin-bottom: -10px;
}
/* Blog */
.topmusic-submenu-content {
    /*min-height: calc( 100vw / 6 + 250px );*/
}
.topmusic-blog-post-thumbnail {
    /*width: calc( 100vw / 4 - 40px );*/
    width:100%;
    height: 100%;
    /*min-height: calc( 100vw / 6 );*/
    border-radius: var(--border-radius-l);
    overflow: hidden;
    margin:auto;
    margin-bottom:20px;
    box-shadow: var(--box-shadow);
    border: 1px solid transparent;
}
.topmusic-blog-post-thumbnail:hover {
    border: 1px solid var(--mid-grey);
}
.topmusic-blog-post-thumbnail img {
    width: 100%;
    height: auto;
}
/* Search */
#topmusic-search {
    height: 100vh;
    width: 100%;
    position: fixed;
    top:0;
    left:0;
    overflow: auto;
    background-color:rgba(241,241,242,.90);
    backdrop-filter:blur(10px);
    z-index:999;
}
.dark #topmusic-search {
    background-color:rgba(10,20,20,.90);
}
#topmusic-search #ajaxsearchlite1 {
    height:30px;
    border-radius: var(--border-radius-l);
    overflow: hidden;
    padding: 20px;
    box-shadow: var(--box-shadow);
}
.dark #topmusic-search #ajaxsearchlite1 {
    background-color:var(--dark);
    box-shadow: var(--box-shadow-dark);
}
.dark #ajaxsearchlite1 .probox, .dark div.asl_w .probox {
    background-color:var(--dark) !important;
}
.dark div.asl_w .probox .promagnifier .innericon svg {
    fill: var(--almost-white);
}
.dark div.asl_w .probox .promagnifier {
    box-shadow: none !important;
}
.dark #topmusic-search input::placeholder {
    color: var(--mid-grey-old) !important;
}
.dark div.asl_w .probox div.asl_simple-circle {
    border-color: var(--cool-teal);
}
#topmusic-search #ajaxsearchlite1 .probox .proinput input, div.asl_w .probox .proinput input {
    font-size:18pt !important;
    line-height: 20pt !important;
    color: var(--midnight-blue) !important;
    /*font-family: 'Flama', sans-serif !important;*/
    font-family: 'Flama', sans-serif !important;
}
.dark #topmusic-search #ajaxsearchlite1 .probox .proinput input, .dark div.asl_w .probox .proinput input {
    color: var(--strawberry) !important;
    background-color:var(--dark) !important;
}
#ajaxsearchliteres1 {
    border-radius: var(--border-radius-l) !important;
    box-shadow: var(--box-shadow);
}
.dark #ajaxsearchliteres1 {
    background-color: var(--dark);
    box-shadow: var(--box-shadow-dark);
}
#ajaxsearchliteres1 .asl_simplebar-content-wrapper {
    padding-bottom: 160px;
}
#ajaxsearchliteres1 .asl_content {
    padding-left: 10px;
    padding-right: 10px;
}
div.asl_r .results .item {
    border:none!important;
}
.dark div.asl_r .results .item, .dark div.asl_r .results .asl_nores {
    background-color:var(--dark)!important;
}
.dark div.asl_r.asl_w.vertical .results .item::after {
    background-color: var(--almost-black);
}
#ajaxsearchliteres1 .asl_content h3 {
    margin-top: 25px;
    display: block;
}
#ajaxsearchliteres1 .asl_content * {
    font-size: 18pt;
    line-height: 24pt;
}
div[id*='ajaxsearchliteres'].wpdreams_asl_results .results div.asl_image {
    width: 200px !important;
    height: 160px !important;
    border-radius: var(--border-radius-l) !important;
}
.admin-bar #topmusic-search {
    top:32px;
    height: calc(100vh - 32px);
}
.wp-admin #topmusic-main-menu {
    position: relative;
    z-index: 10;
}
/* mobile menu */
#topmusic-mobile-menu{
    position:fixed;
    height:85vh;
    width:100vw;
    border-bottom-left-radius:var(--border-radius-l);
    border-bottom-right-radius:var(--border-radius-l);
    overflow-x: hidden;
    overflow-y:scroll;
    z-index:99999;
    background: var(--gradient-white-to-bottom-almost-white);
    display:none;
    box-shadow: var(--box-shadow);
    border-right:3px solid rgba(0,0,0,.25);
    border-bottom:3px solid rgba(0,0,0,.25);
    top: 0;
}
.dark #topmusic-mobile-menu {
    background:var(--gradient-black-to-bottom-almost-black);
    box-shadow: var(--box-shadow-dark);
    border-right:3px solid rgba(255,255,255,.25);
    border-bottom:3px solid rgba(255,255,255,.25);
}
.topmusic-mobile-menu-container {
    padding-top: 20px;
    padding-left: 20px;
}
.admin-bar .topmusic-mobile-menu-container {
    padding-top: 100px;
}
#topmusic-mobile-menu h3.widget-title {
    font-family: 'Recoleta', serif;
    text-transform: lowercase;
    margin-top:20px;
    color: var(--midnight-blue);
}
.dark #topmusic-mobile-menu h3.widget-title {
    color: white;
}
#topmusic-mobile-menu ul {
    list-style: none;
    padding-left:0;
}
#topmusic-mobile-menu ul li {
    border-bottom: 1px solid #eee;
    line-height: 54px;
}
.dark #topmusic-mobile-menu ul li {
    border-bottom: 2px dotted var(--purple-rain);
}
#topmusic-mobile-menu a {
    color:var(--midnight-blue)
}
.dark #topmusic-mobile-menu a {
    color:var(--cool-teal);
}
#topmusic-mobile-menu ul li a:after{
    content: '\f054';
    float:right;
    font-family: "FontAwesome";
    padding-right:20px;
}

/* Media Queries */
@media all and (min-width: 1080px) {
    #topmusic-main-menu {
        background-position: center;
    }
    #topmusic-main-menu .topmusic-go-pro {
        height: 150px;
        bottom: 11px;
        left: calc(50% - 62px);
    }
    #topmusic-main-menu .topmusic-go-pro a {
        height:150px;
        width:124px;
        background-size:100%;
        background-position:bottom center;
    }
}
@media all and (max-width: 767px) {
    .topmusic-desktop-navigation {
        display: none;
    }
    .topmusic-mobile-navigation {
        display: block;
    }
}
@media all and (min-width: 768px) {
    .topmusic-mobile-navigation {
        display: none;
    }
}
@keyframes rocket-fly-by {
    0% {
        transform: translate3d(0px, 500px, 0);
    }
    15% {
        transform: translate3d(0px, 0px, 0) scale(1.2) rotate(-2deg);
    }
    20% {
        transform: translate3d(0px, 0px, 0) scale(1.1) rotate(0deg);
    }
    25% {
        transform: translate3d(0px, 0px, 0) scale(1.2) rotate(2deg);
    }
    40% {
        transform: translate3d(0px, 120px, 0) scale(5);
    }
    50% {
        transform: translate3d(0px, 80px, 0) scale(4);
    }
    75% {
        transform: translate3d(0px, 0px, 0) scale(1);
    }
    100% {
        transform: translate3d(0px, -1000px, 0);
    }
}