/*Ширина вне фуллскрина - 1287*/

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: normal;
    src: url(fonts/InterTight-Regular.ttf);
}
@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    src: url(fonts/InterTight-Bold.ttf);
}
@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: normal;
    src: url(fonts/InterTight-LightItalic.ttf);
}
@font-face {
    font-family: Inter;
    font-style: italic;
    font-weight: bold;
    src: url(fonts/InterTight-LightItalic.ttf);
}

html {
    font-family: Inter;
    scroll-behavior: smooth;
}
body {
    user-select: none;
    margin: 0;
    background: black;
    --view-port-witdh: 1287px;
    /*Универсальный отступ*/
    --common-gap: calc((10 / 1287) * 100vw); /*10px*/
    --common-gap-mobile: calc((20 / 1287) * 100vw);
    background: linear-gradient(to bottom left, rgb(17, 17, 17), rgb(27, 27, 27), rgb(17, 17, 17));
}
.block {
    /*margin: 0 10px 10px 10px;
    border-radius: 20px;*/
    padding: var(--common-gap-mobile);
}
@media screen and (min-width: 500px) {
    .block {
        padding: var(--common-gap);
    }
}
.block-header {
    font-size: calc((60 / 1287) * 100vw);
    text-align: right;
    margin-bottom: var(--common-gap-mobile);
}
@media screen and (min-width: 500px) {
    .block-header {
        font-size: calc((30 / 1287) * 100vw);
        margin-bottom: var(--common-gap);
    }
}
.block-header text, .block-subheader text {
    margin: 0 calc((100 / 1287) * 100vw); /*0 100px*/
}
.block-subheader {
    height: calc((50 / 1287) * 100vw);
    font-size: calc((40 / 1287) * 100vw);
    text-align: left;
    margin: var(--common-gap-mobile) 0;
}
@media screen and (min-width: 500px) {
    .block-subheader {
        height: calc((25 / 1287) * 100vw);
        font-size: calc((20 / 1287) * 100vw);
        margin: var(--common-gap) 0;
    }
}

.menu-button {
    width: calc((140 / 1287) * 100vw);
    height: calc((140 / 1287) * 100vw);
    position: fixed;
    background: linear-gradient(to bottom right, rgb(57, 57, 57), rgb(17, 17, 17, 1));
    right: calc((40 / 1287) * 100vw);
    bottom: calc((40 / 1287) * 100vw);
    z-index: 1000;
    border-radius: calc((40 / 1287) * 100vw);
    display: flex;
    justify-content: center;
    cursor: pointer;
}
@media screen and (min-width: 500px) {
    .menu-button {
        width: calc((70 / 1287) * 100vw);
        height: calc((70 / 1287) * 100vw);
        right: calc((20 / 1287) * 100vw);
        bottom: calc((20 / 1287) * 100vw);
        border-radius: calc((20 / 1287) * 100vw);
    }
}
.menu-button:hover, .menu-button:hover svg {
    bottom: calc((50 / 1287) * 100vw);
    stroke: white;
}
@media screen and (min-width: 500px) {
    .menu-button:hover, .menu-button:hover svg {
        bottom: calc((25 / 1287) * 100vw);
    }
}
.menu-button svg {
    height: calc((70 / 1287) * 100vw);
    stroke: rgb(170, 170, 170);
    margin: auto;
}
@media screen and (min-width: 500px) {
    .menu-button svg {
        height: calc((35 / 1287) * 100vw);
    }
}

.burger-menu {
    display: none;
    margin-top: calc((10 / 1287) * 100vw * -1);
    z-index: 999;
    position: fixed;
    background: linear-gradient(to bottom left, rgb(57, 57, 57), rgb(17, 17, 17, 1));
    width: 100%;
    height: 100%;
    border-radius: 0;
}
@media screen and (min-width: 500px) {
    .burger-menu {
        margin-top: calc((10 / 1287) * 100vw * -1);
        width: calc((300 / 1287) * 100vw);
        border-radius: 0 calc((20 / 1287) * 100vw) calc((20 / 1287) * 100vw) 0;
    }
}
.burger-menu .burger-menu-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: var(--common-gap-mobile);
    grid-row-gap: var(--common-gap-mobile);
    margin: calc((20 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .burger-menu .burger-menu-container {
        grid-column-gap: var(--common-gap);
        grid-row-gap: var(--common-gap);
        margin: calc((10 / 1287) * 100vw);
    }
}
.burger-menu-container a {
    text-decoration: none;
    color: white;
    fill: white;
    font-size: calc((60 / 1287) * 100vw);
    padding: calc((10 / 1287) * 100vw) calc((30 / 1287) * 100vw);
    border-radius: calc((40 / 1287) * 100vw);
    /*transition: background 0.2s, color 0.2s;*/
    text-align: center;
}
@media screen and (min-width: 500px) {
    .burger-menu-container a {
        font-size: calc((20 / 1287) * 100vw); /*20px*/
        padding: calc((5 / 1287) * 100vw) calc((15 / 1287) * 100vw); /*5px 10px*/
        border-radius: calc((20 / 1287) * 100vw); /*10px*/
    }
}
.burger-menu-container a:hover {
    background: white;
    color: black;
    fill: black;
}
.burger-menu-container .burger-menu-logo {
    display: flex;
    justify-content: center;
}
.burger-menu-container .burger-menu-logo svg {
    fill: white;
    height: calc((100 / 1287) * 100vw);
    margin: auto;
}
@media screen and (min-width: 500px) {
    .burger-menu-container .burger-menu-logo svg {
        height: calc((50 / 1287) * 100vw);
    }
}
.burger-menu-container .burger-menu-close-button {
    width: calc((140 / 1287) * 100vw);
    height: calc((140 / 1287) * 100vw);
    background: white;
    position: fixed;
    display: flex;
    justify-content: center;
    border-radius: calc((40 / 1287) * 100vw);
    left: calc((565 / 1287) * 100vw);
    bottom: calc((20 / 1287) * 100vw);
    cursor: pointer;
}
@media screen and (min-width: 500px) {
    .burger-menu-container .burger-menu-close-button {
        width: calc((70 / 1287) * 100vw);
        height: calc((70 / 1287) * 100vw);
        border-radius: calc((20 / 1287) * 100vw);
        left: calc((115 / 1287) * 100vw);
        bottom: calc((20 / 1287) * 100vw);
    }
}
.burger-menu-container .burger-menu-close-button svg {
    height: calc((130 / 1287) * 100vw);
    stroke: black;
    margin: auto;
}
@media screen and (min-width: 500px) {
    .burger-menu-container .burger-menu-close-button svg {
        height: calc((65 / 1287) * 100vw);
    }
}
.burger-menu-container .burger-menu-close-button:hover {
    background: black;
}
.burger-menu-container .burger-menu-close-button:hover svg {
    stroke: white;
}


.header {
    height: calc((250 / 1287) * 100vw); /*250px*/
    margin-top: var(--common-gap); /*10px*/
    margin-bottom: var(--common-gap);
    display: flex;
    justify-content: center;
    color: white;
    fill: white;
    text-decoration: none;
}
.header text {
    font-size: calc((130 / 1287) * 100vw); /*100px*/
    margin: auto calc((20 / 1287) * 100vw); /*auto 20px*/
}
@media screen and (min-width: 500px) {
    .header text {
        font-size: calc((100 / 1287) * 100vw);
    }
}
.header svg {
    height: calc((250 / 1287) * 100vw); /*250px*/
}
.header:hover {
    background: rgb(255,255,255,0.01)
}
/*.header:hover .element-1, .header:hover .element-2, .header:hover .element-4 {
    fill: #13292D;
}
.header:hover .element-3 {
    fill: #DBDBDB;
}
.header:hover .element-5 {
    fill: #B6B660;
}*/

/*#menu {
    position: sticky;
    top: 0;
    z-index: 998;
}
.menu {
    display: flex;
    justify-content: center;
    background: linear-gradient(to bottom left, rgb(27, 27, 27, 0.8), rgb(17, 17, 17, 0.8));
    border-radius: calc((20 / 1287) * 100vw);
    height: calc((50 / 1287) * 100vw);
    color: white;
}
.menu-button-container {
    display: flex;
    justify-content: center;
    margin: auto calc((5 / 1287) * 100vw);
}
.menu-button-container a {
    text-decoration: none;
    color: white;
    fill: white;
    font-size: calc((20 / 1287) * 100vw);
    padding: calc((5 / 1287) * 100vw) calc((10 / 1287) * 100vw);
    border-radius: calc((10 / 1287) * 100vw); /*10px*/
    /*transition: background 0.2s, color 0.2s;
}
.menu-button-container a:hover {
    background: white;
    color: black;
    fill: black;
}*/

.attention {
    display: none;
}
@media screen and (max-width: 499px) {
    .attention {
        display: flex;
        text-align: center;
        font-size: 30px; /**/
        background: yellow;
    }
}

#playlists {
    background: linear-gradient(to bottom left, rgb(123, 120, 172), rgb(109, 105, 175));
}
.playlists-container {
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr;
    grid-column-gap: var(--common-gap-mobile); /*10px*/
    grid-row-gap: var(--common-gap-mobile); /*10px*/
}
@media screen and (min-width: 500px) {
    .playlists-container {
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: var(--common-gap);
        grid-row-gap: var(--common-gap);
    }
}
.playlist-block {
    display: block;
    justify-content: center;
    background: white;
    border-radius: calc((40 / 1287) * 100vw);
    padding: var(--common-gap-mobile);
    fill: black;
}
@media screen and (min-width: 500px) {
    .playlist-block {
        border-radius: calc((20 / 1287) * 100vw);
        padding: var(--common-gap);
    }
}
.playlist-block-header {
    display: block;
    text-align: center;
}
.playlist-block-header div {
    font-size: calc((50 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .playlist-block-header div {
        font-size: calc((25 / 1287) * 100vw);
    }
}
.playlist-block-header text {
    font-size: calc((36 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .playlist-block-header text {
        font-size: calc((18 / 1287) * 100vw);
    }
}
/*последнее изменение адаптации к мобильным устройствам здесь*/
.playlist-block a {
    background: rgb(237, 237, 237);
    height: calc((40 / 1287) * 100vw); /*40px*/
    border-radius: 500px; /*500px*/
    display: flex;
    justify-content: center;
    text-decoration: none;
    margin-top: calc((10 / 1287) * 100vw);
}
@media screen and (max-width: 499px) {
    .playlist-block a {
        height: calc((80 / 1287) * 100vw);
    }
}
.playlist-block a svg {
    height: calc((27 / 1287) * 100vw); /*27px*/
    margin: auto calc((5 / 1287) * 100vw) auto 0; /*auto 5px auto 0*/
}
@media screen and (max-width: 499px) {
    .playlist-block a svg {
        height: calc((54 / 1287) * 100vw);
        margin: auto calc((10 / 1287) * 100vw) auto 0;
    }
}
.playlist-block a text {
    font-size: calc((27 / 1287) * 100vw); /*27px*/
    margin: auto 0;
    color: black;
}
@media screen and (max-width: 499px) {
    .playlist-block a text {
        font-size: calc((54 / 1287) * 100vw);
    }
}
.playlist-block a:hover svg, .playlist-block a:hover text {
    color: rgb(237, 237, 237);
    fill: rgb(237, 237, 237);
}

#releases {
    background: linear-gradient(to bottom left, rgb(237, 237, 237), rgb(207, 207, 207));
}
.releases-container {
    display: grid;
    /*grid-auto-flow: row;*/
    grid-template-columns: 1fr;
    grid-column-gap: var(--common-gap-mobile); /*10px*/
    grid-row-gap: var(--common-gap-mobile); /*10px*/
}

.releases-container-2 {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: var(--common-gap-mobile); /*10px*/
    grid-row-gap: var(--common-gap-mobile); /*10px*/
}
@media screen and (min-width: 500px) {
    .releases-container {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--common-gap);
        grid-row-gap: var(--common-gap);
    }
    .releases-container-2 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-column-gap: var(--common-gap);
        grid-row-gap: var(--common-gap);
    }
}
.releases-container a {
    display: flex;
    justify-content: left;
    border-radius: calc((20 / 1287) * 100vw); /*10px*/
    text-decoration: none;
    color: black;
    background: rgb(0, 0, 0, 0.025);
    height: calc((110 / 1287) * 100vw);
}
.releases-container-2 a {
    /*display: flex;*/
    border-radius: calc((40 / 1287) * 100vw); /*10px*/
    background: white;
    text-decoration: none;
    color: black;  
    z-index: 5;   
}
@media screen and (min-width: 500px) {
    .releases-container-2 a {
        border-radius: calc((20 / 1287) * 100vw);
    }
}
@media screen and (max-width: 499px) {
    .releases-container a {
        height: calc((220 / 1287) * 100vw);
        border-radius: calc((20 / 1287) * 100vw);
        text-decoration: none;
        color: black;
    }
}
.releases-container a:hover {
    background: linear-gradient(to bottom left, rgb(27, 27, 27), rgb(17, 17, 17));
    color: rgb(237, 237, 237);
}
.releases-container-2 a:hover {
    background: linear-gradient(to bottom left, rgb(27, 27, 27), rgb(17, 17, 17));
    color: rgb(237, 237, 237);
}
.releases-container a img {
    height: calc((110 / 1287) * 100vw); /*110px*/
    border-radius: calc((20 / 1287) * 100vw); /*10px*/
}
.releases-container-2 a img {
    width: 100%;
    height: 93%;
    border-radius: calc((40 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .releases-container-2 a img {
        height: calc((309/1287) * 100vw);
        border-radius: calc((20 / 1287) * 100vw);
    }
}
.releases-container-2 a:hover img {
    filter: grayscale(70%);
}
@media screen and (max-width: 499px) {
    .releases-container a img {
        height: calc((220 / 1287) * 100vw);
        border-radius: calc((20 / 1287) * 100vw);
    }
}
.releases-container a div {
    /*margin: auto calc((10 / 1287) * 100vw); /*auto 10px*/
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: left;
}
.releases-container-2 a div {
    display: flex;
    justify-content: left;
    margin-left: calc((30 / 1287) * 100vw);
    margin-bottom: calc((20 / 1287) * 100vw);
    margin-right: calc((30 / 1287) * 100vw);
    margin-top: calc((1 / 1287) * 100vw);
    line-height: calc((40 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .releases-container-2 a div {
        margin-left: calc((10 / 1287) * 100vw);
        margin-bottom: calc((10 / 1287) * 100vw);
        margin-right: calc((10 / 1287) * 100vw);
        margin-top: calc((5 / 1287) * 100vw);
        line-height: calc((20 / 1287) * 100vw);
    }
}
.releases-container a div text {
    font-size: calc((25 / 1287) * 100vw); /*25px*/
    margin: auto auto auto calc((10 / 1287) * 100vw);
}
.releases-container-2 a div text {
    font-size: calc((50 / 1287) * 100vw);
    margin: auto auto auto 0;
}
@media screen and (min-width: 500px) {
    .releases-container-2 a div text {
        font-size: calc((15 / 1287) * 100vw);
    }
}
@media screen and (max-width: 499px) {
    .releases-container a div text {
        font-size: calc((50 / 1287) * 100vw);
        margin: auto auto auto calc((20 / 1287) * 100vw);
    }
}
.releases-container a div span {
    font-size: calc((15 / 1287) * 100vw); /*15px*/
}
@media screen and (max-width: 499px) {
    .releases-container a div span {
        font-size: calc((30 / 1287) * 100vw);
    }
}
.r-c-disc-button {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin-top: calc((20 / 1287) * 100vw);
    background: white;
    text-decoration: none;
    color: black;
    font-size: calc((60 / 1287) * 100vw);
    border-radius: calc((40 / 1287) * 100vw); /*10px*/
}
.r-c-disc-button:hover {
    color: rgb(237, 237, 237);
    background: linear-gradient(to bottom left, rgb(27, 27, 27), rgb(17, 17, 17));
}
.r-c-disc-button text {
    margin: calc((20 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .r-c-disc-button {
        margin-top: calc((10 / 1287) * 100vw);
        font-size: calc((30 / 1287) * 100vw);
        border-radius: calc((20 / 1287) * 100vw);
    }
    .r-c-disc-button text {
        margin: calc((10 / 1287) * 100vw);
    }
}

#links {
    background: linear-gradient(to bottom left, rgb(53, 53, 53), rgb(37, 37, 37));
}
#links .block-header, #links .block-subheader {
    color: rgb(237, 237, 237);
}
.links-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: var(--common-gap); /*10px*/
    grid-row-gap: var(--common-gap); /*10px*/
}
@media screen and (max-width: 499px) {
    .links-container {
        grid-template-columns: 1fr;
        grid-column-gap: var(--common-gap-mobile);
        grid-row-gap: var(--common-gap-mobile);
    }
}
.links-container a {
    background: rgb(237, 237, 237);
    height: calc((40 / 1287) * 100vw); /*40px*/
    border-radius: 500px; /*500px*/
    display: flex;
    justify-content: center;
    text-decoration: none;
}
@media screen and (max-width: 499px) {
    .links-container a {
        height: calc((80 / 1287) * 100vw);
    }
}
.links-container a svg {
    height: calc((27 / 1287) * 100vw); /*27px*/
    margin: auto calc((5 / 1287) * 100vw) auto 0; /*auto 5px auto 0*/
}
@media screen and (max-width: 499px) {
    .links-container a svg {
        height: calc((54 / 1287) * 100vw);
        margin: auto calc((10 / 1287) * 100vw) auto 0;
    }
}
.links-container a text {
    font-size: calc((27 / 1287) * 100vw); /*27px*/
    margin: auto 0;
    color: black;
}
@media screen and (max-width: 499px) {
    .links-container a text {
        font-size: calc((54 / 1287) * 100vw);
    }
}
.links-container a:hover svg, .links-container a:hover text {
    color: rgb(237, 237, 237);
    fill: rgb(237, 237, 237);
}

#blog {
    background: linear-gradient(to bottom left, rgb(226, 206, 209), rgb(199, 158, 165));
}
#blog .block-header {
    color: black;
}
.blog-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: var(--common-gap-mobile); /*10px*/
    grid-row-gap: var(--common-gap-mobile); /*10px*/
}
@media screen and (min-width: 500px) {
    .blog-container {
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--common-gap); /*10px*/
        grid-row-gap: var(--common-gap); /*10px*/
    } 
}
.blog-container a {
    background: white;
    border-radius: calc((40 / 1287) * 100vw);
    height: calc((140 / 1287) * 100vw);
    display: flex;
    justify-content: left;
    text-decoration: none;
}
@media screen and (min-width: 500px) {
    .blog-container a {
        border-radius: calc((20 / 1287) * 100vw);
        height: calc((70 / 1287) * 100vw);
    }
}
.blog-container a img {
    border-radius: calc((40 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .blog-container a img {
        border-radius: calc((20 / 1287) * 100vw);
    }
}
.blog-container a div {
    margin: auto calc((20 / 1287) * 100vw);
}
@media screen and (min-width: 500px) {
    .blog-container a div {
        margin: auto calc((10 / 1287) * 100vw);
    }
}
.blog-container a div text {
    font-size: calc((52 / 1287) * 100vw);
    color: black;
}
@media screen and (min-width: 500px) {
    .blog-container a div text {
        font-size: calc((20 / 1287) * 100vw);
    }
}
.blog-container a:hover {
    background: linear-gradient(to bottom left, rgb(27, 27, 27), rgb(17, 17, 17));
}
.blog-container a:hover img {
    filter: grayscale(70%);
}
.blog-container a:hover div text {
    color: white;   
}

#about {
    background: linear-gradient(to bottom left, #cfc2b1, #D6BA95);
}
.about-container {
    display: flex;
}
@media screen and (max-width: 499px) {
    .about-container {
        display: block;
    }
}
.about-container div {
    /*border: solid black;*/
    padding: calc((10 / 1287) * 100vw); /*10px*/
    font-size: calc((25 / 1287) * 100vw); /*25px*/
    text-align: justify;
}
@media screen and (max-width: 499px) {
    .about-container div {
        padding: calc((20 / 1287) * 100vw);
        font-size: calc((50 / 1287) * 100vw); 
    }
}
.about-container img {
    height: calc((300 / 1287) * 100vw); /*300px*/
    margin-left: var(--common-gap); /*10px*/
}
@media screen and (max-width: 499px) {
    .about-container img {
        height: calc((1100 / 1287) * 100vw);
        margin-left: var(--common-gap-mobile);
    }
}

#roster {
    background: linear-gradient(to bottom left, rgb(237, 237, 237), rgb(207, 207, 207));
}
.roster-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: var(--common-gap); /*10px*/
    grid-row-gap: var(--common-gap); /*10px*/
}
@media screen and (max-width: 499px) {
    .roster-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--common-gap-mobile); /*10px*/
        grid-row-gap: var(--common-gap-mobile); /*10px*/
    }
}
.roster-container a {
    border-radius: 500px; /*500px*/
    background: rgb(0, 0, 0, 0.025);
    text-decoration: none;
    display: flex;
}
/*.roster-container a:hover {
    background: linear-gradient(to bottom left, rgb(27, 27, 27), rgb(17, 17, 17));
}
.roster-container a:hover text {
    color: rgb(237, 237, 237);
}*/
.roster-container a img {
    height: calc((80 / 1287) * 100vw); /*80px*/
    border-radius: 500px; /*500px*/
}
@media screen and (max-width: 499px) {
    .roster-container a img {
        height: calc((160 / 1287) * 100vw);
    }
}
.roster-container a div {
    color: black;
    display: flex;
    margin: auto calc((10 / 1287) * 100vw); /*auto 10px*/
    font-size: calc((27 / 1287) * 100vw); /*27px*/
}
@media screen and (max-width: 499px) {
    .roster-container a div {
        margin: auto calc((20 / 1287) * 100vw);
        font-size: calc((54 / 1287) * 100vw);
    }
}

.roster-container-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--common-gap-mobile); /*10px*/
    grid-row-gap: var(--common-gap-mobile); /*10px*/
}
@media screen and (min-width: 500px) {
    .roster-container-2 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: var(--common-gap); /*10px*/
        grid-row-gap: var(--common-gap); /*10px*/
    }
}
.roster-container-2 a {
    border-radius: calc((40 / 1287) * 100vw);
    background: white;
    text-decoration: none;
    display: flex;
    justify-content: center;
    padding: var(--common-gap-mobile); /*10px*/
}
@media screen and (min-width: 500px) {
    .roster-container-2 a {
        width: calc((220 / 1287) * 100vw);
        height: calc((220 / 1287) * 100vw);
        border-radius: calc((20 / 1287) * 100vw);
        padding: var(--common-gap);
    }
}
.roster-container-2 a img, .roster-container-2 a svg {
    width: 100%;
}
.roster-container-2 a svg {
    fill: black;
    stroke: black;
}
.roster-container-2 a:hover {
    background: rgb(0, 0, 0, 0);
    padding: 0;
}
.roster-container-2 a:hover img, .roster-container-2 a:hover svg {
    /*filter: invert(1);*/
    display: none;
}
.roster-container-2 a .nologo {
    font-size: calc((450 / 1287) * 100vw);
    display: block;
}
@media screen and (min-width: 500px) {
    .roster-container-2 a .nologo {
        font-size: calc((180 / 1287) * 100vw);
    }
}
.roster-container-2 a:hover .nologo {
    display: none;
}
.roster-container-2 a .rc2a-hover {
    display: none;
    width: 100%;
}
@media screen and (min-width: 500px) {
    .roster-container-2 a .rc2a-hover {
        width: calc((250 / 1287) * 100vw);
        height: calc((250 / 1287) * 100vw);
    }
}
.roster-container-2 a:hover .rc2a-hover {
    display: block;
}
.roster-container-2 a .rc2a-hover img {
    width: 100%;
    display: block;
    border-radius: calc((40 / 1287) * 100vw);
    margin-bottom: calc((48 / 1287) * -1 * 100vw);
}
@media screen and (min-width: 500px) {
    .roster-container-2 a .rc2a-hover img {
        border-radius: calc((20 / 1287) * 100vw);
        margin-bottom: calc((24 / 1287) * -1 * 100vw);
    }
}
.roster-container-2 a .rc2a-hover div {
    text-align: center;
    background: white;
    color: black;
    width: calc((240 / 1287) * 100vw);
    text-align: center;
    font-size: calc((52 / 1287) * 100vw);
    border-radius: 0 0 calc((40 / 1287) * 100vw) calc((20 / 1287) * 100vw);
    position: relative;
    z-index: 5;
}
@media screen and (min-width: 500px) {
    .roster-container-2 a .rc2a-hover div {
        font-size: calc((20 / 1287) * 100vw);
        font-size: calc((20 / 1287) * 100vw);
        width: calc((240 / 1287) * 100vw);
    }
}

footer {
    display: flex;
    justify-content: center;
    padding: var(--common-gap); /*10px*/
}
@media screen and (max-width: 499px) {
    footer {
        padding: var(--common-gap-mobile);
    }
}
footer text {
    margin: auto;
    color: white;
    text-align: center;
    font-size: calc((16 / 1287) * 100vw);
}
@media screen and (max-width: 499px) {
    footer text {
        font-size: calc((32 / 1287) * 100vw);
    }
}


.color-yoomoney:hover {
    background: linear-gradient(to bottom left, #cd7cff, #9c00ff);
}
.color-youtube:hover {
    background: linear-gradient(to bottom left, #ff6363, red);
}
.color-soundcloud:hover {
    background: linear-gradient(to bottom left, #ffa083, #FF5722);
}
.color-bandcamp:hover {
    background: linear-gradient(to bottom left, #88a8b1, #17A2C4);
}
.color-spotify:hover {
    background: linear-gradient(to bottom left, #96cca9, #1ED860);
}
.color-applemusic:hover {
    background: linear-gradient(to bottom left, #F9586C, #FA2545);
}
.color-deezer:hover {
    background: linear-gradient(to bottom left, #c27dff, #A238FF);
}
.color-yandexmusic:hover {
    background: linear-gradient(to bottom left, #FB3F1C, #FBCA00);
}
.color-vk:hover {
    background: linear-gradient(to bottom left, #68aeff, #0077FE);
}
.color-twitter:hover {
    background: linear-gradient(to bottom left, #8bb9e4, #3094EF);
}
.color-telegram:hover {
    background: linear-gradient(to bottom left, #87c2e0, #26A5E6);
}
.color-instagram:hover {
    background: linear-gradient(to bottom left, #7E3BB1, #F60205, #F7CE00);
}
.color-gforms:hover {
    background: linear-gradient(to bottom left, #9f94b4, #7148BC);
}
.color-email:hover {
    background: linear-gradient(to bottom left, #bbbbbb, #999999);
}
.color-furaffinity:hover {
    background: linear-gradient(to bottom left, #f1c781, #F9AF3B);
}
.color-vkmusic:hover {
    background: linear-gradient(to bottom left, #F45FFF, #0078FF);
}