/* new styles start */

html {
	scroll-behavior: smooth;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}
.disease-page {

    .slick-track {
        display: flex;
    }
    
    .slick-track .slick-slide {
        display: flex;
        height: auto;
        /* align-items: center; */
    }

    .slick-arrow {
        font-size:0;
        width: 34px;
        height: 34px;
        z-index:2;
    }

    .slick-prev {
        left:32px;
    }

    .slick-next {
        right:32px;
    }
            
    .slick-arrow:before {
        width: 34px;
        height: 34px;
        display:block;
        border-radius:50%;
    }
            
    .slick-prev:before {
        background: url('/wp-content/themes/periodic_fevers/assets/img/arrow_back.svg') center / 34px 34px no-repeat;
        opacity: 1;
        content: '';
    }
            
    .slick-next:before {
        background: url('/wp-content/themes/periodic_fevers/assets/img/arrow_back.svg') center / 34px 34px no-repeat;
        opacity: 1;
        content:'';
        transform:rotate(180deg);
    }

    .slick-prev:hover:before {
        background: url('/wp-content/themes/periodic_fevers/assets/img/arrow_forward.svg') center / 34px 34px no-repeat;
        transform:rotate(180deg) !important;
    }

    .slick-next:hover:before {
        background: url('/wp-content/themes/periodic_fevers/assets/img/arrow_forward.svg') center / 34px 34px no-repeat;
        transform:unset;
    }

    .slick-dots {
        margin: auto;
        display: flex;
        justify-content: space-between;
        position: absolute;
        left: 0;
        z-index:1;
        gap: 0 10px;
        bottom: auto;
        right: auto;
        flex-direction: row;
        width: auto;
    }

    .slick-dots li {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background-color: #D9D9D9;
        cursor: pointer;
        margin: 0;
    }

    .slick-dots li.slick-active {
        background-color: #982A33;
    }

    a {
        color: #216DA4;
        font-family: 'PT SANS';
        font-size: 16px;
        line-height: 24px;

        &.all_podcasts {
            font-weight: bold;
        }
    }
    
    p {
        margin: 0 0 24px 0;
        font-family: 'PT Sans', sans-serif;
        font-weight: 400;
        line-height: 150%;
    }

    h2 {
        color: #2A2A2A;
        font-family: "Roboto Slab", sans-serif;
        font-size: 36px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 24px;
    }

    h3 {
        color: #2A2A2A;
        font-family: "Roboto Slab", sans-serif;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: 24px; /* 100% */
        margin-bottom: 18px;
    }
    h4 {
        color: #2A2A2A;
        font-family: "PT Sans", sans-serif;
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
    }

    ol {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-family: 'PT Sans', sans-serif;
        font-weight: 400;
        line-height: 150%;
        margin: 0 0 5px 0;
        padding: 0 0 0 19px;
        box-sizing: border-box;

        li {
            list-style-type: decimal;
            margin: 0 0 19px;
            color: #2A2A2A;
            font-family: "PT Sans", sans-serif;
            font-size: 16px;
            font-style: normal;
            line-height: 24px;
            font-weight: 400;
            line-height: 150%;
            max-width: 100%;
        }

    }

    ul {
        display: flex;
        flex-direction: column;
        gap: 5px;
        font-family: 'PT Sans', sans-serif;
        font-weight: 400;
        line-height: 150%;
        margin: 0 0 5px 0;
        padding: 0 0 0 22px;
        box-sizing: border-box;

        li {
            list-style: disc;
            font-family: 'PT Sans', sans-serif;
            font-weight: 400;
            line-height: 150%;
            margin-bottom: 19px;
        }
        
    }


    .columns {
        display: flex;
    }

    .gap-40 {
        gap: 40px;
    }

    .w-38 {
        width: 38%;
    }

    .w-60 {
        width: 60%;
    }

    .mb-64 {
        margin-bottom: 64px;
    }

    .button {
        padding: 16px 32px;
        background-color: #A42130;
        color: #ffffff;
        border: none;
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        cursor: pointer;
        height: 48px;
        line-height:1;
    }

    .wrapper {
        width:960px;
        margin:0 auto;
    }

    #content {
        margin: 29px 0 0;

        & > div {
            margin-bottom: 64px;
        }
    }
    .hero_block {
        margin-bottom: 60px !important;
        .hero_banner {
            border-radius: 32px;
            background-position: cover;
            display: flex;
            padding: 69px 48px 72px;
            flex-direction: column;
            color: #fff;
            background-repeat: no-repeat;
            
            h1 {
                font-family: "Roboto Slab", sans-serif;
                font-size: 36px;
                font-style: normal;
                font-weight: 700;
                line-height: normal;
                text-transform: uppercase;
                max-width: 50%;
            }

            p {
                margin-top: 10px;
            }
    
            .hero_banner_cta {
                display: inline-block;
                padding: 16px 35px;
                background: #FFF;
                color: #A42130;
                text-align: center;
                font-family: Inter;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;
                margin-top: 8px;
            }
        }
    }
    

    
    .slider_block {
        margin-bottom: 43px !important;
        
        h2 {
            margin-left:calc(50% - 480px);
        }

        .inner {
            position:relative;
            padding-top:40px;
        }

        .slider_cards {
            display: flex;
            flex-direction: row;
            gap: 16px;
            position: static;
            min-height: 320px;
            width: calc(50% + 480px);
            margin-left: calc(50% - 480px);
        
            .slider_cards_item {
                padding: 32px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                border-radius: 32px;
                background: #D8E0EB;
                position: relative;
                width:472px;
                flex-basis: 472px;
                margin-right: 16px;
                justify-content: flex-start;

                .item_title {
                    color: #2A2A2A;
                    font-family: "Roboto Slab", sans-serif;
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 600;
                    line-height: 24px; /* 100% */
                    margin-bottom: 16px;
                }
            }

            .slider_cards_item.video {
                padding:0;

                .item_title {
                    position:absolute;
                    color: #fff;
                    top: 32px;
                    left: 32px;
                    width: calc(100% - 64px);
                }
                video {
                    width: 100%;
                    height: auto;
                    border-radius: 16px;
                }

                .play {
                    position:absolute;
                    left:calc(50% - 32px);
                    top:calc(50% - 32px);
                }
            }
            .slider_cards_item.audio {
                p {
                    font-weight:bold;
                    font-size: 16px;
                    line-height: 24px;
                }
                audio {
                    margin: 0 0 auto 0;
                    display: block;
                    max-width: 100%;
                    width: 100%;
                    display:flex;
                    /* flex: 1 auto; */
                    align-items:flex-start;
                    justify-content:flex-start;
                }
            }

            .slider_cards_item.file {
                .item_content {
                    display: flex;
                    gap: 16px;
                    img {
                        display: flex;
                        flex-basis: 50%;
                        max-width: calc(50% - 8px);
                        height: auto;
                        border-radius: 22px;
                    }
                    
                    .item_text {
                        display: flex;
                        flex-basis: 0;
                        flex-direction:column;
                        p {
                            margin: 0 0 24px 0;
                        font-family: 'PT Sans', sans-serif;
                        font-weight: 400;
                        line-height: 150%;
                        }
                        
                    ;
                        max-width: calc(50% - 8px);
                        justify-content: space-between;
                    }
                }
            }

            .slick-dots {
                top: 0;
                left: calc(50% - 480px);
                padding:0;
            }

            .slick-prev {
                right: calc(50% - 428px);
                top: 5px;
                left: auto;
            }

            .slick-next {
                right: calc(50% - 480px);
                top: 5px;
            }
        }

        .slider_cards.cards_numbered {
            margin-top:-15px;
            margin-bottom:40px;
            counter-reset: myCounter;
            
            .slider_cards_item {
                margin: 14px 16px 0 0;
            }
        }

        .cards_numbered .slider_cards_item:
        after{
            display: flex;
            position: absolute;
            right: -8px;
            top: -11px;
            border-radius: 50px;
            background: #A42130;
            color: #fff;
            font-size: 36px;
            width: 48px;
            height: 48px;
            justify-content: center;
            align-items: center;
            font-family: 'Roboto Slab';
            line-height: 48px;
            counter-increment: myCounter;
            content: counter(myCounter);
        }

        .cards_numbered_info {
        padding:0 15px;
        width:100%;
        box-sizing:border-box;
        position: relative;
            p {
                margin: 0 0 3px 0;
            }
        }  
    }

    .teaser_block + .slider_block {
        margin-bottom: 0 !important;
    }
    
    .contents_carousel {
        background: #A42130;
        margin: 64px 0;
        height: 64px;
        position:relative;

        &:after {
            content:'';
            width:146px;
            height:100%;
            position:absolute;
            right:0;
            top:0;
            background:linear-gradient(to left, #A42130, transparent);
            z-index:1;
        }
        .contents_carousel-slider {
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            gap: 0 8px;
            width: calc(50% + 480px);
            margin-left: calc(50% - 480px);
            position:static;
        }
        a {
            text-decoration: none;
            color: #fff;
            font-family: "Inter", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 16px;
            padding: 24px 16px;
            display: flex;
            white-space: nowrap;
            height: 64px;
            align-items: center;
            border: 0;
        }
        a:hover {
            background: #610711;
        }
    }

    .content_block{
        margin-bottom: 40px !important;
        
        h2::after{
            content: "";
            height: 5px;
            width: 51%;
            background-color: #A42130;
            display: block;
            margin-top: 5px;
        }
    }

    .colored_block {
        width: 1088px;
        margin: auto;
        border-radius: 32px;
        background: #D8E0EB;
        padding: 49px 64px 24px;
        margin-bottom: 64px !important;
        max-width: 100%;
        
        p + h2 {
            margin: 49px 0 30px 0;
        }
    }

    .disease_content {
        display: flex;
        flex-direction: row;
        gap: 24px;
        justify-content: space-between;
        align-items:flex-end;
        
        .disease_text_block {
            max-width: 62.5%;
            
            .disease_link {
                color: #216DA4;
                font-family: 'PT SANS';
                font-size: 16px;
                line-height: 24px;
            }

            h2 {
                margin-bottom:30px;
            }
        }

        .disease_image_block {
            width: calc(37.5% - 24px);
            align-self: flex-start;
            
            img{
                width: 100%;
                height: auto;
                border-radius: 8px;
            }
        }
            
        .disease_image_block span{
            display: block;
            text-align: center;
            color: #216DA4;
            font-family: 'PT SANS';
            font-size: 16px;
            line-height: 24px;
            font-weight: bold;
            margin-top: 4px;
        }

        .disease_quote {
            margin-top: auto;
            border-radius: 16px;
            background: #D8E0EB;
            padding: 62px 32px 38px;
            position: relative;
            font-size: 20px;
            line-height: 26px;
            font-family: 'PT Sans';
            max-width: calc(37.5% - 24px);
            height: auto;
            
            p {
                font-size: 20px;
            line-height: 26px;
            font-family: 'PT Sans';
            }
        }

        .disease_quote::before{
            content:"";
            display: block;
            width: 64px;
            height: 59px;
            background: url("/wp-content/themes/periodic_fevers/assets/img/blockquote.svg");
            position: absolute;
            top: -30px;
            z-index:1;
        }

        .disease_quote::after {
            content:"";
            display: block;
            width: 64px;
            height: 59px;
            background: url("/wp-content/themes/periodic_fevers/assets/img/blockquote.svg");
            position: absolute;
            bottom: -30px;
            right: 15px;
            transform: rotate(180deg);
            z-index:1;
        }
        
    }

    .blockquote_block {
        margin-bottom: 94px !important;
    }

    .teaser_block {
       margin-bottom: 4px;

       .article_teaser {
            display: flex;
            flex-direction: row;
            gap: 16px;
            padding: 0 9px 48px;
            justify-content:space-between;
            margin: 0;
            
            img {
                max-width: 280px;
                margin: 0;
            }
        
            .article_preview {
                padding: 0 0 0 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                
                .article_title {
                    color: #2A2A2A;
                    font-family: "PT Sans", sans-serif;
                    font-size: 20px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 26px;
                    margin-bottom: 25px;
                }
            }

            a {
                font-family: 'Inter', sans-serif;
                display: inline-block;
                padding: 16px 32px;
                border: 1px solid #000;
                font-size: 16px;
                font-style: normal;
                font-weight: 500;
                line-height: 16px;
                text-decoration: none;
                color: #000;
            }
        }

        .article_teaser:last-of-type {
            margin: 0 0 35px 0;
        }

        .article_teaser:nth-child(2n)>img{
            order: 2;
            max-width: 300px;
        }
    }

    .columns_block {
        margin-bottom: 42px !important;

        .content_block {
            margin-bottom: 0px !important;

            h2 {
                   margin-bottom: 30px;
            }
        }
    }

    .cards {
        width: 100%;
    }

    .cards.materials {
        width: calc(100% + 16px);
        margin: 0 -8px;

        .cards_item {
            padding:0 8px;
            /* height: 100%; */
            display: flex;

            .cards_inner {
                display: flex;
                flex-direction: column;
                gap: 16px;
                padding: 8px 8px 16px 8px;
                background-color: #D8E0EB;
                border-radius: 16px;
                width: 228px;
                justify-content:space-between;

                .cards_item-img {
                    height:250px;
                    
                    img {
                        max-width: 100%;
                        /* height: 100%; */
                        border-radius:16px;
                        /* object-fit: cover; */
                        /* object-position: left top; */
                    }
                }

                .cards_item-text {
                    padding: 0px 8px 0;
                    font-family: 'PT Sans';
                    font-size: 16px;
                    line-height: 24px;
                    display:flex;
                    flex:1 0 auto;
                }

                .cards_item-button {
                    width: calc(100% - 16px);
                    margin: 0 auto;
                }
            }
        }
    }
    
    .literature_block .accordion_item {
        

        ol {
            margin: 5px 0 0 0;
            padding: 0 0 0 53px;

            li {
                margin-bottom: 0;
            }
        }
    }
    
    .accordions {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .accordion_item {
        display: flex;
        flex-direction: column;
        padding: 0px 16px;
        border-bottom: 1px solid #A42130;

        .accordion_title {
            display: flex;
            justify-content: space-between;
            width: 100%;
            min-height: 64px;
            align-items: center;
            cursor:pointer;

            .acc_title {
                color: #2A2A2A;
                font-family: "PT Sans", sans-serif;
                font-size: 20px;
                font-style: normal;
                font-weight: 700;
                line-height: 26px;
                width: calc(100% - 40px);
            }

            .icon_arrow {
                transform: rotate(180deg);
                cursor: pointer;
                width: 23px;
                height: 14px;
            }
        }

        &.open .icon_arrow {
        transform: rotate(0deg);
        }

        &.open .accordion_body {
            display: block;
        }

        .accordion_body {
            display: none;
            padding: 0 0 14px 0;
        }
    }

    .map_block {
        #map.fmf-map {
            position:relative;
            margin: 0 0 64px 0;
            
            .tab-map {
                position: absolute;
                right: 0;
                top: -55px;
                width: auto;
                justify-content: space-between;
                gap: 0 24px;
                margin: 0;
                span {
                    background: 0;
                    border: 0;
                    color: #A42130;
                    font-size: 16px;
                    font-weight: 500;
                    font-family: 'Inter';
                    line-height: 16px;
                    width: auto;
                    text-align: left;
                    padding: 0 0 14px 18px;
                    white-space: nowrap;
                    border-bottom: 2px solid transparent;
                    position:relative;
                }
                span:nth-of-type(1) {
                    padding: 0 0 14px 0;
                }
                span:nth-of-type(2):before {
                    content: '';
                    width: 8px;
                    height: 8px;
                    border: 3px solid #216DA4;
                    display: block;
                    position: absolute;
                    left: 0;
                    border-radius: 50%;
                    top: 1px;
                }
                span:nth-of-type(3):before {
                    content:'';
                    width: 8px;
                    height: 8px;
                    border: 3px solid #A42130;
                    display: block;
                    position: absolute;
                    left: 0;
                    border-radius: 50%;
                    top: 1px;
                }
                span.active {
                    border-bottom: 2px solid #A42130;
                }
            }

            .wrapper .map-border {
                border: 0;
                border-radius: 19px;
                width: calc(100% - 16px);
                margin: 0 auto;
            }
    
            .wrapper:nth-child(2) {
                height: 397px;
            }
        }

    }

    .others-slider{
        width:calc(100% + 16px);
        margin:0 -8px;
    
        .cards_item {
            padding:0 8px;
            
            .cards_inner {
                padding: 24px 16px 16px;
                width: 309px;
                background: #D8E0EB;
                display: flex;
                flex-direction: column;
                gap: 12px;
                background-color: #D8E0EB;
                border-radius: 16px;
                justify-content:space-between;
            }
        }

        .cards_item-text {
            padding: 0 16px 0px 16px;
            gap: 9px;
            display: flex;
            flex-direction: column;
            
            .other_title {
                font-size: 17px;
                line-height: 20px;
                font-weight: bold;
                font-family: 'PT SANS';
            }

            p {
                margin-bottom: 11px;
                display:flex;
                flex:1 auto;
            }
            
        }
    }

    .spisok_block {
        h2 {
            border-top:1px solid #2a2a2a;
            padding: 14px 0 0 0;
        }
        ol {
            margin: 0 0 15px 0;
            li {
                margin-bottom: 3px;
            }
        ;
            padding: 0 0 0 15px;
        }
    }

}


@media (max-width: 980px) {
    .disease-page {

        .wrapper {
            width: 100%;
            margin: 0 auto;
            padding: 0 16px;
        }

        p {
            font-size: 16px;
        }

        .breadcrumbs {
            display: block;

            span:nth-of-type(1),
            span:nth-of-type(2) {
                display:inline;
            }
        }

        #content {
            margin: 35px 0;
        }

        .hero_block {

            .wrapper {
                padding: 0;
            }

            .hero_banner {
                padding: 127px 32px 16px 32px;
                background-position: 70%;
                
                h1 {
                    font-size: 24px;
                }

                .hero_banner_cta {
                width: 100%;
                }
            }
        }

        .slider_block {

            h2 {
                margin-left: 16px;
                max-width: calc(100% - 32px);
            }

            .inner {
                padding-top:0;
            }
            
            .slider_cards {
                margin: 0 auto;
                width: 100%;
                padding:0 0 0 16px;
                
            }

            .slider_cards.cards_numbered {
                .slider_cards_item {
                    padding: 31px 30px;
                    gap: 30px;
                    justify-content: flex-start;

                    .item_title {
                        font-size: 19px;
                        line-height: 26px;
                    }
                }
            }
        }

        .contents_carousel {
            .contents_carousel-slider {
                width: calc(100% - 16px);
                margin-left: 16px;
            }

            &:after {
                content:'';
                width: 85px;
            }
        }

        .content_block h2::after {
            width: 90%;
        }

        .disease_content {
            flex-direction: column;
            gap: 30px;
            
            .disease_text_block {
                max-width: 100%;
                min-width: 100%;
            }

            .disease_image_block {
                width: 100%;
                span {
                        margin:0;
                    }
                }

                .disease_quote {
                    max-width: calc(100% - 8px);
                    margin: auto;
                }
        }

        .colored_content {
            padding: 24px 0;
        }

        .teaser_block {
            padding-top: 17px;
            
            .article_teaser {
                flex-direction: column;
                padding:0;
                gap: 32px;
                margin-bottom:32px;

                .article_preview {
                    padding:0;

                    .article_title {
                        margin-bottom: 16px;
                    }

                    p {
                        margin: 0 0 16px 0;
                    }
                }
                img {
                    margin:0 auto;
                    max-width: 320px;
                }
                a {
                    width: 100%;
                    text-align: center;
                }
            }

            .article_teaser:nth-child(2n)> img {
                order: 0;
                max-width: 320px;
            }
        }
        
        .cards_numbered {
            padding-left: 0;
        }

        .columns {
            flex-direction: column;
        }

        .gap-40 {
            gap: 24px 0;
        }

        .w-38, .w-60 {
            width: 100%;
        }
        
        .content_block {
            margin-bottom: 64px !important;
        }

        .colored_block {
            padding: 24px 0 16px;
        }

        .literature_block {
            .accordion_item {
                padding: 0 7px;

                ol {
                    padding: 0 0 0 24px;
                }
            }
        }

        .map_block {
            h2 {
               margin-bottom: 39px;
            }
            #map.fmf-map {
                .wrapper {
                    padding:0;
                }

                .wrapper:nth-child(2) {
                    height: 500px;
                }
                
                .tab-map {
                    position:static;
                    margin-bottom:24px;
                    justify-content: flex-start;
                }

                .wrapper .map-border {
                    width: 100%;
                    height: 100%;

                     iframe {
                        height:100%;
                    }
                }
            }
        }

        .cards.materials {
            .cards_item {
                .cards_inner {
                    width: 300px;

                    .cards_item-img {
                        border-radius:8px;
                        height: 300px;

                        img {
                            width:100%;
                            height:100%;
                            object-fit:cover;
                        }
                    }

                    .cards_item-text {
                        margin-bottom: 25px;
                    }

                    .cards_item-button {
                        max-width: 196px;
                    }
                }
            }
        }

        .faq_block {
            .accordions {
                .accordion_item {
                    padding: 16px 8px;
                    
                    .accordion_title {
                        height: auto;
                    }

                    .accordion_body {
                        margin:16px 0 0 0;
                    }
                }
            }
        }

        .other_block {
            margin-bottom: 86px !important;
            .others-slider {
                .cards_item {
                    .cards_inner {
                        padding: 24px 0px 16px;
                        width: 300px;

                        .button {
                            width: calc(100% - 32px);
                            margin: 0 auto;
                        }
                    }
                }
            }
        }

        .spisok_block {
            margin-bottom: 0px !important;
        }
    }
}

@media (max-width: 600px) {
.disease-page {
    .slider_block {
            .slider_cards {
                

                .slick-track {
                }

                .slider_cards_item {
                    width: 300px;
                    flex-basis: 300px;
                    margin-right: 8px;
                    padding: 24px 16px;
                    justify-content: flex-start;
                    /* gap:20px; */
                    .item_title {
                    margin-bottom: 14px;
                    }
                }

                .slider_cards_item.audio {
                    audio {
                        margin: 0 0 24px 0;
                    }
                }

                .slider_cards_item.video {
                    padding: 24px 16px;
                    justify-content: flex-start;

                    .item_title {
                        position: static;
                        color: #2A2A2A;
                    }

                    .video {
                        margin:auto;
                    }

                    .play {
                        display:none;
                    }
                }

                .slider_cards_item.file {
                    .item_content {
                        flex-direction:column;

                        img {
                            max-width: 190px;
                        }

                        .item_text {
                            max-width: 100%;
                        }
                    }
                }
            }
        }

        .contents_carousel {
            &:after {
                display:none;
            }
        }

        .map_block {
            #map.fmf-map {
                .tab-map {
                    gap:0;
                    span {
                        margin-right:24px;
                    }
                }
            }
        }
    }

}