@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 100;
    src: url('webfonts/cy-grotesk-key-thin.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 300;
    src: url('webfonts/cy-grotesk-key-light.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 400;
    src: url('webfonts/cy-grotesk-key-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 500;
    src: url('webfonts/cy-grotesk-key-medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 600;
    src: url('webfonts/cy-grotesk-key-demi.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 700;
    src: url('webfonts/cy-grotesk-key-bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 800;
    src: url('webfonts/cy-grotesk-wide-heavy.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk key';
    font-weight: 900;
    src: url('webfonts/cy-grotesk-key-black.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 100;
    src: url('webfonts/cy-grotesk-wide-thin.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 300;
    src: url('webfonts/cy-grotesk-wide-light.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 400;
    src: url('webfonts/cy-grotesk-wide-medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 500;
    src: url('webfonts/cy-grotesk-wide-demi.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 600;
    src: url('webfonts/cy-grotesk-wide-bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 700;
    src: url('webfonts/cy-grotesk-wide-heavy.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 800;
    src: url('webfonts/cy-grotesk-wide-dark.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk wide';
    font-weight: 900;
    src: url('webfonts/cy-grotesk-wide-black.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 100;
    src: url('webfonts/cy-grotesk-grand-thin.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 300;
    src: url('webfonts/cy-grotesk-grand-light.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 400;
    src: url('webfonts/cy-grotesk-grand-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 500;
    src: url('webfonts/cy-grotesk-grand-medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 600;
    src: url('webfonts/cy-grotesk-grand-demi.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 700;
    src: url('webfonts/cy-grotesk-grand-bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 800;
    src: url('webfonts/cy-grotesk-grand-heavy.ttf') format('truetype');
}
@font-face {
    font-family: 'Cy Grotesk';
    font-weight: 900;
    src: url('webfonts/cy-grotesk-grand-black.ttf') format('truetype');
}


html * {
    font-family: 'Cy Grotesk key';
}

.header_a {
    font-size:1.1em;
    color:#000000;
    text-decoration:none;
    font-weight: 500;
}

.s_icons a{
    color:#000000;
    text-decoration:none;
    font-size:1.7em;
    font-weight: 600;
}

.s_icons_b a{
    color:#000000;
    text-decoration:none;
    font-size:1.2em;
    font-weight: 600;
}


body{
    background-color:#FFEAD7;
    font-size:16px;

}
.card{
    cursor: pointer;
}

.card .card-title{
    font-size:0.9rem;

}

.card_img{

        width: 100%;


    /* width:200px;
 */}

.description{
    font-size:1.2rem;
    line-height: 1.2;
}


.modal_title{
    font-size:1.7rem;
    font-weight:500;
}

.card-effects .img-hover {
    position: relative;
    overflow: hidden;
    background-color: #2A2A2A;
    border-radius:10px !important;

}
.card-effects .img-hover img {
    transition: all .6s ease;
    transform: scale(1)
}

.card-effects .card-effect:hover .img-hover img {
    transform: scale(1.2)
}

.verybigmodal {
    max-width: 90%;
}

.playlist_item{
}


.bg_dark{
    background-color: #2A2A2A;
}

.text_milk{
    color:#FFEAD7;
}

.playlist_item .card-title{

        font-family: 'Cy Grotesk';
        /*font-size:20px;*/
    font-size: 0.9rem !important;
    font-weight: 800;
        text-transform:uppercase;

}

.modal_logo{
    color:#000000;
    text-decoration:none;
    font-size:2em;
    font-weight: 600;
}

.logo_b img{
    width:27px;
}

.modal-content{
    background-color:#FFEAD7;
}

.meta_title{
    font-weight: 700;
    font-size: 2rem;
    font-family: 'Cy Grotesk wide';
    line-height: 2.1rem;
}

@media (max-width: 575.98px) {
    .s_title a{
        font-size:1em;
    }    .s_icons a{
        font-size:1em;
    }
}
@media (max-width: 767.98px) {
}

@media (max-width: 991.98px) {
}

@media (max-width: 1199.98px) {  }

@media (max-width: 1399.98px) {  }