:root {

    --space-lg: clamp(1.5rem, 1rem + 2vw, 3rem);

    --fs-h2: clamp(2rem, 1.2rem + 1vw, 4rem);
}

/* == HTML/BODY == */
*,
*:before,
*:after {
    box-sizing: border-box;
}

/* == FONT == */
/* https://cloudconvert.com/ttf-to-woff2 */
@font-face {
  font-family: 'KabelBook';
  src: url('../fonts/ITCKabelStd/ITCKabelStdBook.woff2') format('woff2'),
       url('../fonts/ITCKabelStd/ITCKabelStdBook.woff') format('woff'),
       url('../fonts/ITCKabelStd/ITCKabelStdBook.ttf') format('opentype');
}

@font-face {
  font-family: 'KabelDemi';
  src: url('../fonts/ITCKabelStd/ITCKabelStdDemi.woff2') format('woff2'),
       url('../fonts/ITCKabelStd/ITCKabelStdDemi.woff') format('woff'),
       url('../fonts/ITCKabelStd/ITCKabelStdDemi.ttf') format('opentype');
}

@font-face {
  font-family: 'KabelMedium';
  src: url('../fonts/ITCKabelStd/ITCKabelStdMedium.woff2') format('woff2'),
       url('../fonts/ITCKabelStd/ITCKabelStdMedium.woff') format('woff'),
       url('../fonts/ITCKabelStd/ITCKabelStdMedium.ttf') format('opentype');
}

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    font-size: 62.5%; /* 10px = 1rem or 62.5% of 16px = 10px */
    scroll-behavior: smooth;
}

html, body {
    font-family: 'KabelMedium', Helvetica, sans-serif;
    height: 100%;
    line-height: 1.5;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #2a1539;
    color: #d9dcff;
    position: relative;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Resolves background size cover issue on iOS */
body::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100vh;
    z-index: -1;
    background-image: url('../images/background-gradient-2025.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.color-out-of-space {
    /*background: linear-gradient(133deg, #800F2F, #2c3960, #2a1539);*/
    background: linear-gradient(133deg, rgba(128, 15, 47, .4), rgba(44, 57, 96, .4), rgba(42, 21, 57, .4));
    background-size: 400% 400%;
    animation: Gradient 20s ease infinite;
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: auto;
    padding: 0;
    margin: 0;
}

@keyframes Gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* == SIMPLE RESET == */
p, h1, h2, h3, h4, h5, h6, pre, abbr, code {
    margin: 0;
    padding: 0;
    font-weight: 400;
    line-height: inherit;
}

a:link,
a:visited {
    color: #77aada;
}

a:hover {
    color: #6666cc;
}

a:focus {
    color: #6666cc;
    outline: 1px solid #77aada;
}

a:hover img,
a:focus img {
    outline: 1px solid #77aada;
}

/* == == */

.clearfix:after {
    content: "";
    display: block;
    clear: both;
 }

.u--nowrap {
    position: relative;
    white-space: nowrap;
}
/* == == */

/*
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
*/

.main {
    max-width: 1280px;
    margin: 0 auto;
}

.header {
    background: transparent;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

nav.primary-nav {
    background: transparent;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 111px;
}

.logo-menu {
    display: flex;
    justify-content: flex-start;
    flex-grow: 1;
}

.nav-menu {
    display: flex;
    justify-content: flex-end;
    flex-grow: 2;
}

ul.menu {
    padding: 1rem;
    /* margin: 2rem 0;*/
}

ul.menu-streaming {
    padding: 0;
    margin: 2rem 0 0 0;
}

.menu {
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    list-style-type: none;
}

.mobile-menu {
    display: none;
}

.mobile-menu.is-active ul {
    padding: 0;
    margin: 0;
    width: auto;
}

.mobile-menu.is-active ul li.item {
    padding: 0;
    margin: 15px;
    text-align: left;
}

.mobile-menu.is-active ul li.item a {
    background-color: transparent;
    border: 1px solid #f3f6f8;
    border-radius: 12px;
    color: #f3f6f8;
    display: inline-block;
    font-size: 2rem;
    font-weight: 400;
    min-width: 185px;
    text-decoration: none;
    text-align: left;
}

.mobile-menu.is-active ul li.item a:hover {
    color: #77aada;
}

@media only screen and (max-width: 868px) {
    .mobile-menu {
        display: none;
        background-color: rgba(5,15,45,1);
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 6;
    }

    .mobile-menu.is-active {
        display: flex;
        align-items: center;
    }

    .menu {
        display: none;
    }
}

.menu-streaming {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

    list-style-type: none;
}

.menu-streaming-description {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 1.625rem;
    letter-spacing: 0;
}

.o-logo,
.o-logo-font {
    color: white;
    display: block;
}

.o-logo {
    /*width: 48px;
    height: 99px;*/
    width: 36px;
    z-index: 7;
}

.o-logo-font {
    /*width: 358px;
    height: 26px;*/
    max-width: 1280px;
    margin-inline: auto;
    padding: var(--space-lg);
}

.o-logo svg,
.o-logo-font svg {
    color: white;
    fill: white;
}

/* Hamburger menu icon */

.mobile-menu-toggle {
    display: none;
}

@media only screen and (max-width: 868px) {
    .mobile-menu-toggle {
        transform: rotate(0deg);
        transition: .5s ease-in-out;

        background-color: transparent;
        cursor: pointer;
        display: block;
        position: relative;
        pointer-events: all;
        border: none;
        height: 25px;
        width: 25px;
        text-decoration: none;
        z-index: 7;
    }
}

.mobile-menu-toggle__bar {
    transform: rotate(0deg);
    transition: .25s ease-in-out;

    background-color: #f3f6f8;
    border-radius: 1px;
    display: block;
    left: 0;
    opacity: 1;
    position: absolute;
    height: 2px;
    width: 100%;
    z-index: 7;
}

.mobile-menu-toggle .mobile-menu-toggle__bar:nth-child(1) {
    top: 0;
}

.mobile-menu-toggle .mobile-menu-toggle__bar:nth-child(2),
.mobile-menu-toggle .mobile-menu-toggle__bar:nth-child(3) {
    top: 8px;
}

.mobile-menu-toggle .mobile-menu-toggle__bar:nth-child(4) {
    top: 16px;
}

.mobile-menu-toggle:hover .mobile-menu-toggle__bar:nth-child(1),
.mobile-menu-toggle:hover .mobile-menu-toggle__bar:nth-child(2),
.mobile-menu-toggle:hover .mobile-menu-toggle__bar:nth-child(3),
.mobile-menu-toggle:hover .mobile-menu-toggle__bar:nth-child(4) {
    background-color: #77aada;
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(1),
.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(4) {
    left: 50%;
    top: 8px;
    width: 0%;
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(2) {
    transform: rotate(45deg);
    left: 0;
}

.mobile-menu-toggle.is-active .mobile-menu-toggle__bar:nth-child(3) {
    transform: rotate(-45deg);
    left: 0;
}

.title {
    color: #77aada;
    display: block;
    font-family: 'KabelBook', Helvetica, sans-serif;
    font-size: var(--fs-h2);
    line-height: 1.25;
    margin: 0 auto;
    padding-bottom: 1rem;
    text-align: center;
}

.disco-embed {
    margin: 0 auto;
    width: 100%;
    height: 420px;
}

.disco-embed-container {
    padding: 2rem 0;
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 75%;
    z-index: 1;
}

.disco-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 16px solid #8a83ba;
    border-radius: 50%;
    border-top: 16px solid #182739;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    z-index: -1;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media only screen and (min-width: 1024px) {
    .disco-embed {
        height: 480px;
    }

    /*.o-logo {
        width: 77px;
        height: 179px;
    }*/

    /*.o-logo-font {
        width: 568px;
        height: 42px;
    }*/

    /*.title {
        font-size: 2.625rem;
    }*/
}

@media only screen and (max-width: 1023px) and (min-width: 640px) {
    .disco-embed {
        height: 450px;
    }

    /*.o-logo {
        width: 62px;
        height: 129px;
    }*/

    /*.o-logo-font {
        width: 518px;
        height: 36px;
    }*/

    /*.title {
        font-size: 2.375rem;
    }*/
}

@media only screen and (max-width: 639px) {
    .disco-embed {
        height: 480px;
    }

    /*.o-logo {
        width: 58px;
        height: 119px;
    }*/

    /*.title {
        font-size: 2.125rem;
    }*/
}

@media only screen and (max-width: 639px) and (min-width: 400px) {
    /*.o-logo-font {
        width: 408px;
        height: 30px;
    }*/
}

@media only screen and (max-width: 399px) {
    /*.o-logo-font {
        width: 360px;
    }*/
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.item {
    position: relative;
    display: block;
    padding: 0;
    width: auto;
    text-align: center;
}

li.item a {
    /*border: 0;
    border-bottom: 2px solid transparent;*/
    color: #f3f6f8;
    display: block;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    padding: 12px 18px;
    /*letter-spacing: .125rem;*/
    /*transition: all .3s ease-in-out;*/
}

li.item a:hover {
    /*border-bottom: 2px solid #FFF;*/
    color: #77aada;
    text-decoration: underline;
}

.item-menu-streaming {
    order: 1;
    position: relative;
    display: block;
    padding: 12px;
    width: auto;
    text-align: center;
}

li.item-menu-streaming a {
    display: block;
    width: 50px;
    height: 50px;
}

li.item-menu-streaming a svg {
    border: 0;
    fill: #FFF;
    display: block;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

@media only screen and (max-width: 480px) {
    li.item-menu-streaming a {
        width: 65px;
        height: 65px;
    }
}

.contact-container {
    margin: 1rem auto 2rem;
    text-align: center;
    width: 120px;
}

.contact-container--hello {
    margin: 3rem auto 1rem;
    text-align: center;
    width: 120px;
}

a.contact-btn {
    background-color: rgba(60,68,135,.4);
    box-shadow: 0 0 3px rgb(110,120,196);
    border-radius: 12px;
    color: #D9DCFF;
    display: block;
    font-size: 1.25rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 12px 15px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

a.contact-btn:hover {
    background-color: rgba(60,68,135,.8);
    box-shadow: 0 0 9px rgb(110,120,196);
}

.filmography {
    padding-top: 1rem;
}

.awards table,
.filmography table {
    border-spacing: 0;
    width: 100%;
}

.awards tr,
.filmography tr {
    background-color: transparent;
}

.awards tr:nth-of-type(2n),
.filmography tr:nth-of-type(2n) {
    background-color: rgba(75,50,120,.6);
}

.awards th,
.filmography th {
    border-bottom: 1px solid #7f55cb;
}

.awards th, .awards td,
.filmography th,
.filmography td {
    display: table-cell;
    font-size: 1.825rem;
    padding: 1rem;
}

.awards {
    padding-top: 4rem;
}

ul.festival-listing {
    display: inline-block;
    text-align: left;
    padding: 0;
    margin: 0;
}

ul.festival-listing li {
    padding: 5px;
    font-size: 16px;
}

@media only screen and (max-width: 959px) and (min-width: 640px) {
    .awards th, .awards td,
    .filmography th,
    .filmography td {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 639px) {
    .awards th, .awards td,
    .filmography th,
    .filmography td {
        font-size: 1.25rem;
    }
}

.awards-table-title,
.filmography-table-title {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 2.125rem;
    padding-bottom: 2rem;
}

/*@media only screen and (max-width: 640px) {
    .filmography th:nth-of-type(3n-1),
    .filmography td:nth-of-type(3n-1) {
        display: none;
    }
}*/

/* === GRID === */

.main-page-title {
    font-family: 'KabelBook', Helvetica, sans-serif;
    font-size: 3.5rem;
    line-height: 1.125;
    margin: 4rem auto 3rem;
    text-transform: uppercase;
    text-align: center;
}

.main-section-title {
    font-family: 'KabelDemi', Helvetica, sans-serif;
    font-size: 2rem;
    line-height: 2;
    margin: 2rem auto;
    text-transform: uppercase;
    text-align: center;
}

.main-section-description {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 2.5rem;
    margin: .5rem auto 1rem auto;
    text-align: left;
    width: 75%;
}

.grid-container .main-section-description,
.grid-container--index .main-section-description {
    grid-column: 1 / -1;
}

@media only screen and (max-width: 766px) {
    .main-section-title {
        font-size: 2.5rem;
    }

    .main-section-description {
        width: 85%;
    }
}

.grid-page-title {
    font-family: 'KabelBook', Helvetica, sans-serif;
    font-size: 3.5rem;
    text-transform: uppercase;
    line-height: 1.125;
    margin: 2rem auto 0;
}

.grid-container {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 2fr);
    grid-template-rows: auto;
    justify-content: center;

    position: relative;
    padding: 20px 30px;
    margin: 0 auto;
    text-align: center;
}

.grid-container--index {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    justify-content: center;

    position: relative;
    padding: 20px 30px;
    margin: 0 auto;
    text-align: center;
}

.grid-page-title,
.grid-section-title,
.grid-section-title--bio,
.grid-full-width {
    grid-column: 1 / -1;
}

.grid-span-2 {
    grid-column: span 2;
}

.grid-span-3 {
    grid-column: span 3;
}

@media only screen and (max-width: 767px) and (min-width: 640px) { /* If [device width] is less than or equal to */
    .grid-container,
    .grid-container--index {
        grid-template-columns: 620px;
    }

    .grid-span-2,
    .grid-span-3 {
        grid-column: span 1;
    }

    h1.grid-page-title {
        font-family: 'KabelBook', Helvetica, sans-serif;
        font-size: 3.125rem;
        margin: 0 auto;
    }

    h1.main-page-title {
        font-family: 'KabelBook', Helvetica, sans-serif;
        font-size: 3.125rem;
    }
}

@media only screen and (max-width: 639px) and (min-width: 480px) {
    .grid-container,
    .grid-container--index {
        grid-template-columns: 460px;
    }
    
    .grid-span-2,
    .grid-span-3 {
        grid-column: span 1;
    }
}

@media only screen and (max-width: 479px) {
    .grid-container,
    .grid-container--index {
        grid-template-columns: 320px;
    }
    
    .grid-span-2,
    .grid-span-3 {
        grid-column: span 1;
    }
}

.grid-section-title {
    font-family: 'KabelDemi', Helvetica, sans-serif;
    font-size: 2rem;
    line-height: 2;
    margin: 2rem auto 0;
    text-transform: uppercase;
}

.grid-section-title--bio {
    font-family: 'KabelDemi', Helvetica, sans-serif;
    font-size: 2.125rem;
    line-height: 2;
    margin: 0 auto;
    text-transform: uppercase;
}

.grid-box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    height: auto;
    position: relative;
    text-align: left;
}

.grid-box-article {
    justify-content: normal;
}

.grid-box-article--nav {
    margin-top: 3rem;
}

.grid-box-image-container {
    padding: 0;
    margin: 0;
    position: relative;
}

.grid-box-image-container img {
    border: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}

.grid-box-image-container button {
    border: 0;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    width: 40px;
    padding: 0;
    position: absolute;
    bottom: 5px;
    left: 0;
    z-index: 2;
    user-select: none;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all .3s ease-in-out;
}

.grid-box-bio {
    margin: 0 auto;
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 1.825rem;
    letter-spacing: 1px;
    line-height: 2.5rem;
    margin-top: 2rem;
    text-align: left;
    width: 66%;
}

.grid-box-bio p {
    padding-bottom: 25px;
}

@media only screen and (max-width: 767px) { /* If [device width] is less than or equal to */
    .grid-box-bio {
        width: 94%;
    }
}

button.play-button--db {
    color: #D9DCFF;
    background-color: #535CA5;
}

button.play-button--db:hover {
    color: #535ca5;
    background-color: #D9DCFF;
}

button.play-button--lr {
    color: #D9DCFF;
    background-color: #b0342d;
}

button.play-button--lr:hover {
    color: #b0342d;
    background-color: #D9DCFF;
}

button.play-button--v {
    color: #D9DCFF;
    background-color: #03706d;
}

button.play-button--v:hover {
    color: #03706d;
    background-color: #D9DCFF;
}

.grid-box-content {
    padding: 20px;
}

.grid-box-content--composer,
.grid-box-content--testimonials {
    margin: 0 auto;
    text-align: center;
    width: 72%;
}

.grid-box-title--composer,
.grid-box-title--testimonials {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 2.875rem;
    letter-spacing: 1px;
    line-height: 32px;
    padding: 2rem 0;
}

.grid-box-description--composer p,
.grid-box-description--testimonials p {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 2.5rem;
    margin: 2rem 0 3rem 0;
    text-align: left;
}

hr.style {
    border: 1px solid rgba(45,50,90,1);
}

img.composer,
img.testimonials {
    height: auto;
    width: 280px;
}

img.composer.cinematic {
    margin-top: 4rem;
}

@media only screen and (max-width: 767px) {
    .grid-box-content--composer,
    .grid-box-content--testimonials {
        margin: 0;
        width: 100%;
    }

    img.testimonials {
        width: 260px;
    }
}

.grid-box-title {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 2.875rem;
    letter-spacing: 1px;
}

.grid-box-section-title {
    font-family: 'KabelDemi', Helvetica, sans-serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    line-height: 2;
    margin: 1rem 0;
    text-transform: uppercase;   
}

.grid-box-subtitle {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 2.125rem;
}

.grid-box-description {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 2rem;
    letter-spacing: 0;
    line-height: 2.5rem;
    margin-top: 2rem;
}

.grid-box-description sup {
    font-size: 65%;
}

.grid-box-description.page-not-found {
    margin: 0 auto;
    width: 50%;
}

.grid-box-options {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
}

.grid-box-options a {
    flex: 0 0 42%;

    border-radius: 12px;
    color: #D9DCFF;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    padding: 16px 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
}

@media only screen and (max-width: 1024px) and (min-width: 767px) {
    .grid-container--index .grid-box-title {
        font-size: 2.5rem;
    }

    .grid-container--index .grid-box-description {
        font-size: 1.625rem;
    }

    .grid-container--index .grid-box-options a {
        font-size: 1.25rem;
        padding: 14px 0;
    }
}

@media only screen and (max-width: 640px) {
    .grid-box-title,
    .grid-box-title--composer,
    .grid-box-title--testimonials {
        font-size: 2.5rem;
    }

    .grid-box-description,
    .grid-box-description--composer,
    .grid-box-description--testimonials {
        font-size: 1.75rem;
    }

    .grid-box-options {
        flex-wrap: wrap;
    }

    .grid-box-options a {
        flex: 0 0 68%;
        font-size: 1.325rem;
    }
}

.grid-box-options--db a {
    background-color: rgba(60,68,135,.4);
    box-shadow: 0 0 3px rgb(110,120,196);
}

.grid-box-options--db a:hover {
    background-color: rgba(60,68,135,.8);
    box-shadow: 0 0 9px rgb(110,120,196);
}

.grid-box--db {
    background-color: rgba(60,68,135,.2);
}

.grid-box-options--lr a {
    background-color: rgba(176,52,45,.4);
    box-shadow: 0 0 3px rgb(225,120,114);
}

.grid-box-options--lr a:hover {
    background-color: rgba(176,52,45,.8);
    box-shadow: 0 0 9px rgb(225,120,114);
}

.grid-box-options--r a {
    background-color: rgba(187,38,41,.7);
    box-shadow: 0 0 3px rgb(225,43,46);
}

.grid-box-options--r a:hover {
    background-color: rgba(187,38,41,.9);
    box-shadow: 0 0 9px rgb(225,43,46);
}

.grid-box--lr {
    background-color: rgba(176,52,45,.2);
}

.grid-box-options--v a {
    background-color: rgba(3,112,109,.4);
    box-shadow: 0 0 3px rgb(86,217,213);
}

.grid-box-options--v a:hover {
    background-color: rgba(3,112,109,.8);
    box-shadow: 0 0 9px rgb(86,217,213);
}

.grid-box--v {
    background-color: rgba(3,112,109,.2);
}

.grid-box-options a.new-album {
    flex: 1 0 100%;

    background-color: rgba(176,52,45,.4);
    border: 0 !important;
}

.grid-box-options a.new-album:hover {
    flex: 1 0 100%;

    background-color: rgba(176,52,45,.8);
    border: 0 !important;
}

.btn-grad-container {
    padding: 3rem 0 0 0;
}

/* === FORM === */

form#scoreform {
    padding: 0;
    margin: 0;
    position: relative;
}

form#scoreform .form-group {
    margin-bottom: 3rem;
}

form#scoreform fieldset {
    border: none;
    background-color: transparent;
}

form#scoreform label {
    display: block;
    font-weight: bold;
    margin-bottom: .5rem;
    font-size: 2rem;
}

form#scoreform input,
form#scoreform select,
form#scoreform textarea{
    width: 100%;
    padding: 12px;
    font-size: 1.5rem;
    border: 1px solid #77aada;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: rgba(155, 155, 155, .2);
    color: #FFF;
}

form#scoreform textarea {
    min-height: 180px;
    resize: vertical;
}

form#scoreform input[type="submit"] {
    flex: 0 0 42%;

    border-radius: 12px;
    border-width: 0;
    color: #D9DCFF;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    padding: 16px 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: all .3s ease-in-out;
    cursor: pointer;

    background-color: rgba(60,68,135,.4);
    box-shadow: 0 0 3px rgb(110,120,196);
}

form#scoreform input[type="submit"]:hover {
    background-color: rgba(60,68,135,.8);
    box-shadow: 0 0 9px rgb(110,120,196);
}

form#scoreform .error {
    color: #b00020;
    margin-top: 1rem;
    font-size: 1.5rem;
}

form#scoreform .required {
    color: #b00020;
}

.error-summary {
    background-color: transparent;
    border: 2px solid #b00020;
    padding: 3rem;
    margin-bottom: 2rem;
    font-size: 2rem;
}

.success {
    background-color: transparent;
    border: 2px solid #0b7a2a;
    padding: 3rem;
    margin-bottom: 2rem;
    font-size: 2rem;
}

form#scoreform input[aria-invalid="true"],
form#scoreform select[aria-invalid="true"],
form#scoreform textarea[aria-invalid="true"]{
    border: 2px solid #b00020;
}

/* == FOOTER == */
.c-footer {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    flex-direction: column;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    margin: 0;
    padding: 0;
    position: relative;
}

.c-footer__content {
    color: #FFF;
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    padding: 3rem 0;
    line-height: 1.5;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}

.c-footer__content > nav {
    padding-bottom: 2rem;
}
/* == == */

/* == SOCIAL ICONS == */
.o-social-icons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    list-style: none;
    margin: 0;
    padding: 0;
}

.o-social-icons li {
    margin-top: 1.5rem;
    padding: 0 .875rem;
}

.c-social-icons__icons {
    display: block;
    height: 25px;
    width: 25px;
}

.c-social-icons__icons svg {
    fill: #FFF;
    height: 25px;
    width: 25px;
}
/* == == */

/*.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}*/

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    margin: 0 auto;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.embed-container-width {
    margin: 0 auto;
    width: 75%;
}

@media only screen and (max-width: 767px) {
    .disco-embed-container,
    .embed-container-width {
        margin: 0;
        width: 100%;
    }
}

.embed-container-title {
    font-family: 'KabelDemi', Helvetica, sans-serif;
    font-size: 2rem;
    line-height: 2;
    margin: 5rem auto 1rem;
    text-align: center;
    text-transform: uppercase;
}

/* == SOCIAL LINK TREE PAGE == */
.o-social-links-header {
    background: transparent;
    display: block;

    margin: 20px auto 0 auto;
    padding: 0;
    position: relative;

    max-width: 480px;
}

.o-social-links-profile {
    padding: 1rem 0;
}

.social-link-logo-container {
    display: flex;
    justify-content: center;
}

.c-social-links {
    font-family: Verdana, Arial, sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
}

.c-link-container {
    margin: 0 auto;
    padding: 1rem;
    text-align: center;
    max-width: 550px;
}

.c-link {
    background: #2d325a;
    background-color: rgba(45,50,90,.3);
    border: 2px solid #2d325a;
    border-radius: 28px;
    color: #FFF !important;
    display: block;
    padding: 1.5rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.c-link > span > img {
    border: 0;
    outline: none;
}

.c-link:hover {
    background: #00e4ff;
    background-color: rgba(70, 75, 150, .6);
}

.c-artist-title {
    font-family: 'KabelMedium', Arial, sans-serif;
    font-size: 4rem;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.125;
}

.c-registration-mark--artist-title {
    font-size: 50%;
    position: absolute;
    top: 0;
}

.c-artist-matra {
    color: #D9DCFF;
    font-family: Arial, sans-serif;
    font-size: 1.725rem;
    line-height: 1.25;
    padding: 1rem 0;
    text-align: center;
}

.c-social-icon-block {
    display: block;
    height: 28px;
    width: 28px;
    position: absolute;
    top: 14px;
    left: 20px;
}

.c-social-icon-block--sto {
    display: block;
    height: 46px;
    width: 22px;
    position: absolute;
    top: 6px;
    left: 20px;
}

.c-social-icon-block svg {
    fill: #FFF;
    height: 28px;
    width: 28px;
}

/* == == *

/*.play-button {
    color: #D9DCFF;
    cursor: pointer;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    display: inline-block;
    padding: 0;
    user-select: none;
    transition: all .3s ease-in-out;
}

.play-button:hover {
    color: #535CA5;
}*/

/*.grid-box-options a:first-child {
    border-right: 1px dashed #D9DCFF;
}*/

/*.grid-box-options a.explore-playlist {
    flex: 1 0 100%;

    background-color: rgba(45,50,90,.3);
    border: 0 !important;
}

.grid-box-options a.explore-playlist:hover {
    flex: 1 0 100%;

    background-color: rgba(45,50,90,.5);
    border: 0 !important;
}*/

/*.grid-box-options a.explore-catalog,
.grid-box-options a.lets-work-together {
    flex: 1 0 100%;

    background-color: rgba(3,112,109,.3);
    border: 0 !important;
}

.grid-box-options a.explore-catalog:hover,
.grid-box-options a.lets-work-together:hover {
    flex: 1 0 100%;

    background-color: rgba(3,112,109,.5);
    border: 0 !important;
}*/

/*.grid-box-options .coming-soon {
    flex: 1 0 100%;

    background-color: rgba(4,13,50,.3);
    color: #D9DCFF;
    font-size: 1.25rem;
    padding: 20px 0;
    text-align: center;
    text-transform: uppercase;
}

.grid-box-options .in-development {
    flex: 1 0 100%;

    background-color: rgba(3,112,109,.3);
    color: #D9DCFF;
    font-size: 1.25rem;
    padding: 20px 0;
    text-align: center;
    text-transform: uppercase;
}*/

/* == RESPONSIVE == */
/* If [device width] is greater than or equal to */
/*@media only screen and (min-width: 510px) {
}

@media only screen and (min-width: 568px) {
}

@media only screen and (min-width: 628px) {
}*/

/* If [device width] is less than or equal to */
/*@media only screen and (max-width: 1024px) {
}

@media only screen and (max-width: 1024px) and (min-width: 569px) {
}

@media only screen and (max-width: 568px) {
}

@media only screen and (max-width: 1200px) and (min-width: 1025px) {
}

@media only screen and (min-width: 1280px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (min-width: 1280px) {
}*/

/* ==================== */
/*
4:3 aspect ratio resolutions:
640×480,
800×600,
960×720,
1024×768,
1280×960,
1400×1050,
1440×1080,
1600×1200,
1856×1392,
1920×1440,
2048×1536
16:9 aspect ratio resolutions:
1024×576,
1152×648,
1280×720,
1366×768,
1600×900,
1920×1080,
2560×1440,
3840×2160
*/