/* Fonts */
@font-face {
    font-family: 'Recoleta';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Recoleta.eot');
    src: url('../fonts/Recoleta.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Recoleta.woff2') format('woff2'),
    url('../fonts/Recoleta.woff') format('woff'),url('../fonts/Recoleta.ttf') format('truetype');
}
@font-face {
    font-family: 'Flama';
    font-style: normal;
    font-weight: normal;
    src: local('Flama'), url('../fonts/Flama Regular.woff') format('woff');
}
@font-face {
    font-family: "Flama";
    src: local('Flama Bold'), url('../fonts/Flama Bold.otf') format('opentype'),url('../fonts/Flama Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: bold;
}
@font-face {
    font-family: "Flama";
    src: local('Flama Italic'), url('../fonts/Flama Italic.woff') format('woff');
    font-style: italic;
    font-weight: normal;
}
@font-face {
    font-family: "Flama";
    font-style: italic;
    font-weight: bold;
    src: local('Flama Bold Italic'), url('../fonts/Flama Bold Italic.woff') format('woff');
}
@font-face {
    font-family: 'Flama Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Flama Italic'), url('../fonts/Flama Italic.woff') format('woff');
}
@font-face {
    font-family: 'Flama Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Flama Bold Italic'), url('../fonts/Flama Bold Italic.woff') format('woff');
}
/* Vars */
:root {
    --midnight-blue: #121163;
    --midnight-blu: var(--midnight-blue);
    --almost-white: #f1f2f2;
    --cool-rain: linear-gradient(to right, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    --gradient-white-to-bottom-almost-white: linear-gradient(to bottom, var(--white) 0%, var(--almost-white) 100%);
    --gradient-black-to-bottom-almost-black: linear-gradient(to bottom, black 0%, var(--almost-black) 100%);
    --gradient-almost-white-to-bottom-white: linear-gradient(to top, var(--white) 0%, var(--almost-white) 100%);
    --gradient-almost-black-to-bottom-black: linear-gradient(to top, black 0%, var(--almost-black) 100%);
    --purple-rain: #823acb;
    --cool-teal: #3accc3;
    --strawberry: #e46c71;
    --mid-grey-old: #808285;
    --mid-grey: #58595B;
    --white: #fff;
    --dark: black;
    --almost-black: #0a1414;
    --doodle-light-20-image: url("../images/topmusic-2021/doodle-light-20.png");
    --doodle-dark-20-image:  url("../images/topmusic-2021/doodle-dark-20.png");
    --doodle-light-15-image: url("../images/topmusic-2021/doodle-light-15.png");
    --doodle-dark-15-image:  url("../images/topmusic-2021/doodle-dark-15.png");
    --font-xs: 14px;
    --font-s: 14pt;
    --font-m: 16pt;
    --font-l: 20pt;
    --font-xl: 36pt;
    --font-xxl: 40pt;
    --font-s-mobile: 12pt;
    --font-m-mobile: 16pt;
    --font-l-mobile: 20pt;
    --font-xl-mobile: 30pt;
    --border-radius-s: 10pt;
    --border-radius-l: 25pt;
    --box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 12px;
    --box-shadow-dark: rgb(130, 58, 203) 0 0 10px;
    --box-shadow-down-dark:  rgb(130 58 203) 50vh 45px 45px, rgb(130 58 203) -50vh 45px 45px, rgba(130, 58, 203,0.5) 0 120px 50px;
    --box-shadow-up-dark:  rgb(130 58 203) 50vh -45px 45px, rgb(130 58 203) -50vh -45px 45px, rgba(130, 58, 203,0.5) 0 -120px 50px;
    /*bootstrap overrides*/
    --primary: var(--cool-teal);
    --secondary: var(--purple-rain);
    --bs-primary: var(--cool-teal);
    --bs-secondary: var(--purple-rain);
    --danger: var(--strawberry);
    --bs-strawberry: var(--strawberry);
}
.border-radius-s{
    border-radius: var(--border-radius-s);
}
.border-radius-l{
    border-radius: var(--border-radius-l);
}
.z-0 {
    z-index: 0;
}
.z-1 {
    z-index: 1;
}
.z-2 {
    z-index: 2;
}
.z-3 {
    z-index: 3;
}
/* Colours */
.bg-cool-rain, .has-cool-rain-gradient-background {
    /* Source: https://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28130\%2C58\%2C203\%2C1\%29\%200\%25\%2C\%20rgba\%2858\%2C204\%2C195\%2C1\%29\%20100\%25\%29\%3B' */
    background: rgba(130,58,203,1);
    background: -moz-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(130,58,203,1)), color-stop(100%, rgba(58,204,195,1)));
    background: -webkit-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: -o-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: -ms-linear-gradient(left, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    background: linear-gradient(to right, rgba(130,58,203,1) 0%, rgba(58,204,195,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#823acb', endColorstr='#3accc3', GradientType=1 );
}
/* Gutenberg gradient backgrounds */
.has-cool-teal-gradient-background{
    background: linear-gradient(180deg, rgba(58,204,195,1) 0%, rgba(58,204,195,.5) 100%);
}
.has-purple-rain-gradient-background{
    background: linear-gradient(180deg, rgba(130,58,203,1) 0%, rgba(130,58,203,.5) 100%);
}
.has-midnight-blue-gradient-background{
    background: linear-gradient(180deg, rgba(18,17,99,1) 0%, rgba(18,17,99,.5) 100%);
}
.has-white-almost-white-gradient-background{
    background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(241,242,242,1) 100%);
}
.has-black-almost-black-gradient-background{
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(10,20,20,1) 100%);
}
.has-strawberry-gradient-background{
    background: linear-gradient(180deg, rgba(228,108,113,1) 0%, rgba(228,108,113,.5) 100%);
}
/* End Gutenberg Gradient Backgrounds */
.bg-midnight-blue, .background-midnight-blue, .has-midnight-blue-background-color, .has-midnight-blue-background-color {
    background-color: var(--midnight-blue);
    color: var(--almost-white);
}
.bg-almost-white, .background-almost-white, .has-almost-white-background-color {
    background-color: var(--almost-white);
    color: var(--midnight-blue);
}
.dark .bg-almost-white, .dark .background-almost-white, .dark .has-almost-white-background-color {
    background-color: var(--almost-black);
    color: var(--strawberry);
}
.bg-purple-rain, .background-purple-rain,.has-purple-rain-background-color {
    background-color: var(--purple-rain);
    color: var(--white);
}
.bg-cool-teal, .background-cool-teal,.has-cool-teal-background-color {
    background-color: var(--cool-teal);
    color: var(--white);
}
.bg-strawberry, .background-strawberry,.has-strawberry-background-color {
    background-color: var(--strawberry);
    color: var(--midnight-blue);
}
.bg-mid-grey, .background-mid-grey,.has-mid-grey-background-color {
    background-color: var(--mid-grey);
    color: var(--white);
}
.bg-white, .background-white,.has-white-background-color {
    background-color: var(--white);
    color:var(--midnight-blue);
}
.dark .bg-white, .dark .background-white,.dark .has-white-background-color {
    background-color: var(--dark) !important;
    color: var(--white);
}
.bg-doodle, .background-doodle,.has-background-doodle {
    background-image: url("../images/topmusic-2021/doodle-dark-15-top-music.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.bg-contain, .background-contain {
    background-size:contain !important;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-cover, .background-cover {
    background-size:cover !important;
    background-position: center;
    background-repeat: no-repeat;
}
.bg-midnight-blue h1, .bg-midnight-blue h2, .bg-midnight-blue h3,
.background-midnight-blue h1, .background-midnight-blue h2, .background-midnight-blue h3{
    color: var(--strawberry);
}
.bg-strawberry h1, .bg-strawberry h2, .bg-strawberry h3,
.background-strawberry h1, .background-strawberry h2, .background-strawberry h3{
    color: var(--midnight-blue);
}
.bg-midnight-blue.bg-doodle {
    background-image: url("../images/topmusic-2021/doodle-light-20.png");
}
.bg-gradient-to-almost-white-vertical {
    background: linear-gradient(0deg, var(--almost-white) 30%, rgba(255,255,255,1) 100%);
}
.dark .bg-gradient-to-almost-white-vertical {
    background: linear-gradient(0deg, var(--almost-black) 30%, rgba(0,0,0,1) 100%);
}
/* Boostrap 4 migration */
.float-right {
    float:right;
}
.float-left {
    float:left;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.mt-negative-1 { margin-top: -0.25rem; }
.mt-negative-2 { margin-top: -0.5rem; }
.mt-negative-3 { margin-top: -1rem; }
.mt-negative-4 { margin-top: -1.5rem; }
.mt-negative-5 { margin-top: -3rem; }
.mb-negative-1 { margin-bottom: -0.25rem; }
.mb-negative-2 { margin-bottom: -0.5rem; }
.mb-negative-3 { margin-bottom: -1rem; }
.mb-negative-4 { margin-bottom: -1.5rem; }
.mb-negative-5 { margin-bottom: -3rem; }
/* Headings */
.topmusic-lpg h1,.topmusic-lpg h2,.topmusic-lpg h3,.topmusic-lpg h4,.topmusic-lpg h5,.topmusic-lpg h6{
    font-family: 'Recoleta',serif;
    color: var(--midnight-blue);
    line-height:95%;
}
.topmusic-lpg h1 a,.topmusic-lpg h1 a:hover {
    color: var(--midnight-blue);
    font-size: var(--font-xl);
}
.topmusic-lpg h2 {
    font-family: 'Flama',sans-serif;
                /*font-family: 'Flama',sans-serif;*/
    /*text-transform: uppercase;*/
    font-size: var(--font-l);
    margin-top: 18px;
    margin-bottom: 18px;
    color:var(--midnight-blue);
}
.topmusic-lpg h2 strong, .topmusic-lpg strong h2 {
    font-family: 'Recoleta', serif;
    font-size: var(--font-xl);
}
.bb-course-item-wrap h2.bb-course-title {
    font-size: var(--font-m);
}
.lpg-block h2 strike {
    font-family: 'Recoleta', serif;
    opacity: .75;
}
.lpg-block h2 .discounted-price {
    font-family: 'Bad Script', serif;
    font-size:120%;
    color:white;
    transform:rotate(-15deg);
    display: inline-block;
    margin-left:-10px;
}
.topmusic-lpg h3 {
    font-family: 'Flama',sans-serif;
                /*font-family: 'Flama',sans-serif;*/
    text-transform: uppercase;
    color: var(--mid-grey);
    font-size: var(--font-l);
}
.topmusic-lpg h4, .background-almost-white h4, .background-white h4 {
    font-size:var(--font-l);
    color:var(--midnight-blue);
}
.topmusic-lpg h4 em, .background-almost-white h4 em, .background-white h4 em {
    font-family: 'Bad Script', serif;
}
.dark.topmusic-lpg h4, .background-cool-teal h4,
.background-midnight-blue h4,
.background-midnight-blu h4,
.background-strawberry h4,
.background-purple-rain h4,
.background-mid-grey h4 {
    color:white;
}
.dark.topmusic-lpg h2,.dark.topmusic-lpg h5,.dark.topmusic-lpg h6 {
    color: var(--strawberry);
}
.dark.topmusic-lpg h3 {
    color: var(--almost-white);
}
.dark.topmusic-lpg h1 a, .dark.topmusic-lpg h1 a:hover, .dark.topmusic-lpg h1 {
    color: var(--strawberry);
}
.font-xs {
    font-size:var(--font-xs)!important;
}
.font-s {
    font-size:var(--font-s)!important;
}
.font-m {
    font-size:var(--font-m)!important;
}
.font-l {
    font-size:var(--font-l)!important;
}
.font-xl {
    font-size:var(--font-xl)!important;
}
body {
    background-color: var(--white);
    max-width: 100vw;
    overflow-x: hidden;
}
body.dark {
    background-color: var(--dark) !important;
}
body.topmusic-lpg:not(.buddyboss-theme),.topmusic-lpg p:not(body.buddyboss-theme p):not(.tim-boxes p),.topmusic-lpg span:not(body.buddyboss-theme span):not(.topmusic-lpg h2 span):not(.topmusic-lpg h3 span):not(.dashicon):not(span[data-preserver-spaces="true"]):not(.breakdance span){
    font-family: 'Flama',sans-serif;
                /*font-family: 'Flama',sans-serif;*/
    line-height: 200%;
    font-size: var(--font-m);
    color:var(--mid-grey);
}
.topmusic-lpg .tim-boxes p,.topmusic-lpg .tim-boxes h2,.topmusic-lpg .tim-boxes h3 {
    line-height: 100%;
}
.dark body, .dark.topmusic-lpg p, .dark.topmusic-lpg span,
body.dark.topmusic-lpg:not(.buddyboss-theme),.dark.topmusic-lpg p:not(body.buddyboss-theme p):not(.tim-boxes p),.dark.topmusic-lpg span:not(body.buddyboss-theme span)
{
    color:var(--almost-white);
}
.topmusic-lpg p {
    margin-bottom: 22pt;
}
.topmusic-lpg img.aligncenter:not(.single .entry-content img.aligncenter) {
    display: block;
    margin: auto;
    padding: 20px;
}
.topmusic-lpg a:not([class*="btn"]):not(.button):not(.bbp-topic-reply-link):not(.ld-button) {
    color:var(--cool-teal);
    transition: all ease-in-out .5s;
    text-decoration: none;
}
.topmusic-lpg a:hover:not([class*="btn"]:hover):not(.button:hover):not(.bbp-topic-reply-link:hover):not(.ld-button) {
    color:var(--purple-rain);
    text-decoration: none;
    transition: all ease-in-out .5s;
}
.buddyboss-theme.topmusic-lpg a:not([class*="btn"]):not(.button):not(.bbp-topic-reply-link):not(.ld-button) {
    color:var(--strawberry);
    transition: all ease-in-out .5s;
    text-decoration: none;
}
.buddyboss-theme.topmusic-lpg a:hover:not([class*="btn"]:hover):not(.button:hover):not(.bbp-topic-reply-link:hover):not(.ld-button) {
    color:var(--midnight-blue);
    text-decoration: none;
    transition: all ease-in-out .5s;
}
.buddyboss-theme #site-navigation a {
    color: #58595B;
}
.buddyboss-theme #site-navigation .current_page_item a,
.buddyboss-theme #site-navigation .current-menu-item a,
.buddyboss-theme #site-navigation a:hover {
    color: var(--strawberry);
    font-weight: 500;
}
.buddyboss-theme.topmusic-lpg .bs-meta-item.bs-meta-item a {
    color: white !important;
}
.nowrap {
    text-wrap:none;
}
.bad-script {
    font-family: 'Bad Script', serif;
    color: var(--midnight-blue);
}
.font-sans {
    font-family: 'Flama',sans-serif !important;
}
.font-serif {
    font-family: 'Recoleta',serif !important;
}
.font-cursive, .topmusic-lpg h4.font-cursive {
    font-family: 'Bad Script', serif !important;
}
.dark .bad-script {
    color:var(--white);
}
.dark-only, .dark .light-only {
    display: none !important;
}
.dark .dark-only, .light-only {
    display: block !important;
}
.topmusic-lpg blockquote {
    border-radius: var(--border-radius-s) !important;
    background-color: var(--almost-white) !important;
    font-size: var(--font-m)!important;
    font-style: normal !important;
}
.dark.topmusic-lpg blockquote {
    background: var(--almost-black) !important;
    border: 1px solid var(--purple-rain) !important;
}
/* Logos */
.topmusic-logo {
    background-image: url('../images/topmusic-2021/topmusic-co-logo-horizontal-blue.svg');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}
.dark .topmusic-logo,.topmusic-logo.white {
    background-image: url('../images/topmusic-2021/topmusic-co-logo-horizontal-white.svg');
}
.topmusic-logo.blue {
    background-image: url('../images/topmusic-2021/topmusic-co-logo-horizontal-blue.svg');
}
.topmusic-icon {
    background-image: url('../images/topmusic-2021/topmusic-icon-blue.svg');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}
.dark .topmusic-icon, .topmusic-icon.white {
    background-image: url('../images/topmusic-2021/topmusic-icon-white.svg');
}
.topmusic-icon.blue {
    background-image: url('../images/topmusic-2021/topmusic-icon-blue.svg');
}
/* buttons */
.topmusic-lpg .btn,
.topmusic-lpg .button,
.btn,
.btn:not(:disabled):not(.disabled):active {
    border-radius:var(--border-radius-l) !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    font-size: var(--font-xs);
    border: 2px solid;
    color: #FFFFFF;
    text-align: center;
    display: inline-block;
    width: auto;
    line-height: initial;
}
.topmusic-lpg #groups-list button.button {
    padding: 0 12px !important;
}

.topmusic-lpg .btn-primary,.topmusic-lpg .button-primary, .btn-primary,.btn-primary.disabled, .btn-primary:not(:disabled):not(.disabled):active{
    background-color:var(--cool-teal);
    border-color:var(--cool-teal);
    color:white;
}
.btn-primary:hover,.topmusic-lpg .button-primary:hover, .btn-outline-primary:hover,.btn.disabled:hover,.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:focus,.btn-primary:focus{
    background-color:var(--cool-teal);
    border-color:var(--cool-teal);
    box-shadow:var(--box-shadow);
    /*box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset;*/
    color:white!important;
}
.btn-outline-primary, .btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color:var(--white);
    border-color:var(--cool-teal);
    color:var(--cool-teal)!important;
}
.btn.disabled{
    opacity: .7;
}
.dark .btn-primary, .dark .btn-primary:not(:disabled):not(.disabled):active, .dark .btn-primary:focus {
    color: var(--almost-black);
}
.dark .btn-outline-primary, .dark .btn-outline-primary:not(:disabled):not(.disabled):active  {
    color: var(--cool-teal) !important;
    border-color: var(--cool-teal);
    background-color: var(--almost-black);
}
.dark .btn-primary:hover,.dark .btn-outline-primary:hover,.dark .btn.disabled:hover,.dark .btn-primary:not(:disabled):not(.disabled):active:focus,.dark .btn-outline-primary:focus{
    box-shadow:var(--box-shadow-dark);
}
/*BUTTONS*/
.btn-size-small{
    padding: 5px 10px;
}
.btn-size-medium{
    padding: 10px;
}
.btn-size-big{
    padding: 15px 30px;
    font-size: 16pt !important;
}
.btn-position-left{
    float: left;
}
.btn-position-right{
    float: right;
}
.btn-strawberry{
    background-color: var(--strawberry);
    border: 1px solid var(--strawberry)!important;
}
.btn-midnight-blue,.btn-midnight-blu,.btn-midnightblu{
    background-color: var(--midnight-blue);
    border: 1px solid var(--midnight-blue)!important;
}
.btn-coolteal,.btn-cool-teal{
    background-color: var(--cool-teal);
    border: 1px solid var(--cool-teal)!important;
}
.btn-purple,.btn-purple-rain,.btn-purplerain{
    background-color: var(--purple-rain);
    border: 1px solid var(--purple-rain)!important;
}
.btn-midgrey,.btn-mid-grey,.btn-mid-gray{
    background-color: var(--mid-grey);
    border: 1px solid var(--mid-grey)!important;
}
.btn:disabled {
    opacity: 0.4;
}
/* button hover effect */
/*.lpg-block .btn:hover,*/
/*.lpg-block .btn:active,*/
/*.lpg-block .btn:not(:disabled):not(.disabled):active:focus*/
/*.lpg-block .btn.btn-primary:hover,*/
/*.lpg-block .btn.btn-primary:active,*/
/*.lpg-block .btn-primary:not(:disabled):not(.disabled):active:focus {*/
/*}*/
/* curved borders */
.curved-top-border {
    height: 250px;
    border-radius: 50% 50% 50% 50% / 50px 50px 90% 90% ;
    margin-bottom:-200px;
}
.curved-bottom-border {
    height:250px;
    border-radius: 50% 50% 50% 50% / 90% 90% 50px 50px;
    margin-top:-200px;
}
.curved-top-separator{
    background-image: url('../images/topmusic-2021/curved-top-light.svg');
    background-size:auto 150px;
    background-position-y:0;
    background-position-x:center;
    background-repeat:no-repeat;
    height:150px;
    margin-top:-150px;
}
.curved-top-separator.almost-white{
    background-image: url('../images/topmusic-2021/curved-top-almost-white.svg');
}
.dark .curved-top-separator{
    background-image: url('../images/topmusic-2021/curved-top-dark.svg');
}
.dark .curved-top-separator.almost-white{
    background-image: url('../images/topmusic-2021/curved-top-almost-black.svg');
}
/*
.dark .curved-top-separator:after{
    width: 100%;
    height: 80px;
    position: relative;
    display: block;
    content: ' ';
    box-shadow: var(--box-shadow-up-dark);
    z-index: -1;
    background-color: transparent;
    top: 200px;
}
*/
.curved-bottom-separator{
    background-image: url('../images/topmusic-2021/curved-bottom-light.svg');
    background-size:auto 150px;
    background-position-y:0;
    background-position-x:center;
    background-repeat:no-repeat;
    height:150px;
}
.curved-bottom-separator.almost-white{
    background-image: url('../images/topmusic-2021/curved-bottom-almost-white.svg');
}
.dark .curved-bottom-separator{
    background-image: url('../images/topmusic-2021/curved-bottom-dark.svg');
}
.dark .curved-bottom-separator.almost-white{
    background-image: url('../images/topmusic-2021/curved-bottom-almost-black.svg');
}
.dark .curved-bottom-separator:after{
    width: 100%;
    height: 80px;
    position: relative;
    display: block;
    content: ' ';
    box-shadow: var(--box-shadow-down-dark);
    z-index: -1;
    background-color: transparent;
    top: -125px;
}
.curved-top {
    background-image: url('../images/topmusic-2021/curved-top-light.svg');
    background-size:auto 150px;
    background-position-y:0;
    background-position-x:center;
    background-repeat:no-repeat;
    margin-top:-125px;
    padding-top:150px;
}
.dark .curved-top {
    background-image: url('../images/topmusic-2021/curved-top-dark.svg');
}
.curved-top.almost-white {
    background-image: url('../images/topmusic-2021/curved-top-almost-white.svg');
}
.curved-bottom {
    background-image: url('../images/topmusic-2021/curved-bottom-light.svg');
    background-size: auto 150px;
    background-position-y: 105%;
    background-position-x: center;
    background-repeat: no-repeat;
    padding-bottom: 120px;
}
.dark .curved-bottom {
    background-image: url('../images/topmusic-2021/curved-bottom-dark.svg');
}
.curved-bottom.almost-white {
    background-image: url('../images/topmusic-2021/curved-bottom-almost-white.svg');
}
.dark .curved-bottom.almost-white {
    background-image: url('../images/topmusic-2021/curved-bottom-almost-black.svg');
}
.curved-top-concave-separator{
    background-image: url('../images/topmusic-2021/curved-top-concave-white.svg');
    background-size:auto 80px;
    background-position-y:0;
    background-position-x:center;
    background-repeat:no-repeat;
    height:80px;
    margin-top:-80px;
}
.curved-top-concave-separator.almost-white {
    background-image:url('../images/topmusic-2021/curved-top-concave-almost-white.svg');
}
.dark .curved-top-concave-separator {
    background-image:url('../images/topmusic-2021/curved-top-concave-black.svg');
}
.dark .curved-top-concave-separator.almost-white {
    background-image:url('../images/topmusic-2021/curved-top-concave-almost-black.svg');
}
.dark .curved-top-concave-separator:after{
    width: 100%;
    height: 30px;
    position: relative;
    display: block;
    content: ' ';
    box-shadow: var(--box-shadow-up-dark);
    z-index: -1;
    background-color: transparent;
    top: 30px;
    opacity: .5;
}
/* curved bottom concave */
.curved-bottom-concave-separator{
    background-image: url('../images/topmusic-2021/curved-bottom-concave-white.svg');
    background-size:auto 80px;
    background-position-y:0;
    background-position-x:center;
    background-repeat:no-repeat;
    height:80px;
    margin-bottom:-80px;
    position: relative;
    z-index: 1;
}
.curved-bottom-concave-separator.almost-white {
    background-image:url('../images/topmusic-2021/curved-bottom-concave-almost-white.svg');
}
.dark .curved-bottom-concave-separator {
    background-image:url('../images/topmusic-2021/curved-bottom-concave-black.svg');
}
.dark .curved-bottom-concave-separator.almost-white {
    background-image:url('../images/topmusic-2021/curved-bottom-concave-almost-black.svg');
}
.dark .curved-bottom-concave-separator:after{
    width: 100%;
    height: 30px;
    position: relative;
    display: block;
    content: ' ';
    box-shadow: var(--box-shadow-up-dark);
    z-index: -1;
    background-color: transparent;
    top: 30px;
    opacity: .5;
}
/* curved bottom concave end */
/* curly top */
.curly-top-separator{
    background-image: url('../images/topmusic-2021/curly-top-white.svg');
    background-size:auto 80px;
    background-position-y:0;
    background-position-x:center;
    background-repeat:no-repeat;
    height:80px;
    margin-top:-80px;
}
.curly-top-separator.almost-white {
    background-image:url('../images/topmusic-2021/curly-top-almost-white.svg');
}
.dark .curly-top-separator {
    background-image:url('../images/topmusic-2021/curly-top-black.svg');
}
.dark .curly-top-separator.almost-white {
    background-image:url('../images/topmusic-2021/curly-top-almost-black.svg');
}
.dark .curly-top-separator:after{
    width: 100%;
    height: 30px;
    position: relative;
    display: block;
    content: ' ';
    box-shadow: var(--box-shadow-up-dark);
    z-index: -1;
    background-color: transparent;
    top: 30px;
    opacity: .5;
}
/* curly top end */
/* curly bottom */
.curly-bottom-separator{
    background-image: url('../images/topmusic-2021/curly-bottom-white.svg');
    background-size:auto 80px;
    background-position-y:0;
    background-position-x:center;
    background-repeat:no-repeat;
    height:80px;
}
.curly-bottom-separator.almost-white {
    background-image:url('../images/topmusic-2021/curly-bottom-almost-white.svg');
}
.dark .curly-bottom-separator {
    background-image:url('../images/topmusic-2021/curly-bottom-black.svg');
}
.dark .curly-bottom-separator.almost-white {
    background-image:url('../images/topmusic-2021/curly-bottom-almost-black.svg');
}
.dark .curly-bottom-separator:after{
    width: 100%;
    height: 30px;
    position: relative;
    display: block;
    content: ' ';
    box-shadow: var(--box-shadow-up-dark);
    z-index: -1;
    background-color: transparent;
    top: 30px;
    opacity: .5;
}
/* curly bottom end */
.dark .make-white-on-dark, .background-midnight-blue .make-white-on-dark,.background-midnight-blu .make-white-on-dark {
    filter: brightness(0) saturate(100%) invert() !important;
}
.dark .invert-on-dark {
    filter: invert() !important;
}
.arrow-swirl {
    background-image: url('../images/topmusic-2021/arrow-swirl.svg');
    width: 100px;
    height: 110px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}
.dark .arrow-swirl, .background-cool-teal .arrow-swirl {
    background-image: url('../images/topmusic-2021/arrow-swirl-dark.svg');
}
.dark .background-purple-rain .arrow-swirl {
    background-image: url('../images/topmusic-2021/arrow-swirl.svg');
}
.position-relative {
    position: relative;
}
/* Hero */
.topmusic-hero {
    height: 100%;
}
.topmusic-hero .bg-cover {
    max-height: 100vh;
}
.topmusic-below-hero {
    margin-top: -440px!important;
    /*padding-top: 600px!important;*/
    padding-bottom: 100px;
}
.topmusic-hero-piano, .topmusic-hero-guitar {
    height:100vh;
    min-height: 900px;
    width: 100%;
    padding-top:120px;
    padding-bottom:100px;
}
.topmusic-hero-piano{
    background-color: #212F47!important;
}
.topmusic-hero-guitar{
    background-color: #45390C !important;
}
.topmusic-hero-piano .container,.topmusic-hero-guitar .container {
    margin-top: -15vh!important;
}
/* subfooter */
#subfooter, #topmusic-subfooter {
    overflow: hidden;
    height: 250px;
    position: relative;
    z-index: 1;
    background: transparent;
}
.dark #subfooter, .dark #topmusic-subfooter {
    background-color: var(--dark);
    background-image:url('../images/topmusic-2021/grid-bg.jpg');
    background-size:100% 100%;
    background-position:center;
}
#topmusic-subfooter #copyright p, #copyright p {
    top: -14px;
    font-family: 'Flama',sans-serif;
                /*font-family: 'Flama',sans-serif;*/
    position: relative;
}
.dark #copyright, .dark #topmusic-subfooter #copyright {
    color:var(--almost-white)
}
#subfooter-image, #topmusic-subfooter #subfooter-image {
    /*background-image:url('../images/topmusic-2021/subfooter-image.png');*/
    background-image:url('../images/topmusic-2021/subfooter-image-piano.webp');
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom;
    width:250px;
    height:250px;
}
.dark #subfooter-image, .dark #topmusic-subfooter #subfooter-image {
    background-image:url('../images/topmusic-2021/subfooter-image-dark.png');
}
#subfooter-image.subfooter-image-1, #topmusic-subfooter #subfooter-image.subfooter-image-1 {
    /*background-image:url('../images/topmusic-2021/subfooter-image.png');*/
    background-image:url('../images/topmusic-2021/subfooter-image-piano.webp');
}
.dark #subfooter-image.subfooter-image-1, .dark #topmusic-subfooter #subfooter-image.subfooter-image-1 {
    background-image:url('../images/topmusic-2021/subfooter-image-dark.png');
}
#subfooter-image.subfooter-image-2, #topmusic-subfooter #subfooter-image.subfooter-image-2 {
    background-image:url('../images/topmusic-2021/subfooter-image-2.png');
}
.dark #subfooter-image.subfooter-image-2, .dark #topmusic-subfooter #subfooter-image.subfooter-image-2 {
    background-image:url('../images/topmusic-2021/subfooter-image-2.png');
}
/* segmented control */
.segmented-control {
    border-radius:var(--border-radius-l);
    overflow: hidden;
    white-space: nowrap;
    border: 2px solid var(--cool-teal);
    display:inline-block;
    padding: 0;
    position: relative;
}
.segmented-control .segment {
    padding: 0 50px;
    color:white !important;
    background-color:rgba(0,0,0,.2);
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
}

.segmented-control .segment:hover {
    cursor: pointer;
}
.segmented-control .segment.active {
    background-color:var(--cool-teal);
}
.segmented-control .topmusic-new-arrow {
    background-image: url('../images/topmusic-2021/new.svg');
    background-size:contain;
    width: 40px;
    height: 40px;
    position: absolute;
    top:-35px;
    right:-35px;
    z-index: 10;
}
/* animated logo */
/***************************************************
 * Generated by SVG Artista on 10/5/2021, 11:29:03 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-fill-0 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-0 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-0 {
    -webkit-animation: animate-svg-fill-1 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.01s both;
    animation: animate-svg-fill-1 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.01s both;
}

@-webkit-keyframes animate-svg-fill-1 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-1 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-1 {
    -webkit-animation: animate-svg-fill-1 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.2s both;
    animation: animate-svg-fill-1 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.2s both;
}

@-webkit-keyframes animate-svg-fill-2 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-2 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-2 {
    -webkit-animation: animate-svg-fill-2 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.30000000000000004s both;
    animation: animate-svg-fill-2 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.30000000000000004s both;
}

@-webkit-keyframes animate-svg-fill-3 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-3 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-3 {
    -webkit-animation: animate-svg-fill-3 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.4s both;
    animation: animate-svg-fill-3 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.4s both;
}

@-webkit-keyframes animate-svg-fill-4 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-4 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-4 {
    -webkit-animation: animate-svg-fill-4 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.5s both;
    animation: animate-svg-fill-4 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.5s both;
}

@-webkit-keyframes animate-svg-fill-5 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-5 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-5 {
    -webkit-animation: animate-svg-fill-5 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.6000000000000001s both;
    animation: animate-svg-fill-5 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.6000000000000001s both;
}

@-webkit-keyframes animate-svg-fill-6 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-6 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-6 {
    -webkit-animation: animate-svg-fill-6 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.7s both;
    animation: animate-svg-fill-6 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.7s both;
}

@-webkit-keyframes animate-svg-fill-7 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

@keyframes animate-svg-fill-7 {
    0% {
        fill: transparent;
    }

    100% {
        fill: rgb(255, 255, 255);
    }
}

.topmusic-icon-animation-7 {
    -webkit-animation: animate-svg-fill-7 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.8s both;
    animation: animate-svg-fill-7 0.4s cubic-bezier(0.95, 0.05, 0.795, 0.035) 0.8s both;
}
/* Media Queries */
@media only screen and (max-width: 767px) {
    .font-xs {
        font-size:var(--font-s-mobile)!important;
    }
    .font-s {
        font-size:var(--font-s-mobile)!important;
    }
    .font-m {
        font-size:var(--font-m-mobile)!important;
    }
    .font-l {
        font-size:var(--font-l-mobile)!important;
    }
    .font-xl {
        font-size:var(--font-xl-mobile)!important;
    }
}

@media only screen and (max-width: 1960px) {
    .topmusic-below-hero {
        margin-top: -400px !important;
    }
}

@media only screen and (max-width: 1300px) {
    .topmusic-below-hero {
        margin-top: -360px !important;
    }
}

@media only screen and (min-width: 1280px) {
    .font-xs {
        font-size:var(--font-s)!important;
    }
    .font-s {
        font-size:var(--font-m)!important;
    }
    .font-m {
        font-size:var(--font-l)!important;
    }
    .font-l {
        font-size:var(--font-xl)!important;
    }
    .font-xl {
        font-size:var(--font-xxl)!important;
    }
}

@media only screen and (max-width: 992px) {
    .topmusic-below-hero {
        margin-top: -400px !important;
    }
}

@media all and (max-width: 767px) {
    .topmusic-hero-piano, .topmusic-hero-guitar {
        height: auto;
    }
}
@media all and (max-width: 440px) {
    .topmusic-below-hero {
       margin-top: -360px!important;
    }
    .segmented-control .segment {
        padding: 0 25px;
    }
    .topmusic-hero-piano *, .topmusic-hero-guitar * {
        text-shadow: 0 0 20px black, 0 -1px 2px var(--midnight-blue);
    }
}