.quote-item-wrapper{

    padding: var(--spacing-xl);
    background-color: var(--color-black);
    color: #ffffff;
    font-family: var(--klavika-medium);

}
.single-quote-wrapper{

    background-color: var(--color-black);


}

.quote-large .quote-item-wrapper p{
    font-size: var(--font-size-50);
    line-height: var(--font-size-50-line-height);
    font-family: var(--klavika-light);

}
.quote-slider .quote-item-wrapper p{
    font-size: var(--font-size-30);
    line-height: var(--font-size-30-line-height);
    font-family: var(--klavika-light);
}
.quote-item-wrapper small{
    font-size: var(--copy-font-size);
    line-height: var(--copy-font-line-height);
    display: block;
}
.quote-top_red_line{
    display: block;
    width: var(--header-h2-under-bar-width);
    height: var(--header-h2-under-bar-height);
    background-color: var(--color-red);

}
.quotes-container {

    position: relative;
}
.quote-item-wrapper.swiper-slide {
    width: calc(100vw - 120px - calc((100vw - 1320px)/2));
    margin-right: 24px;
}
.quote-item-wrapper.swiper-slide {
    width: calc(100vw - 120px - calc((100vw - 1320px)/2));
    margin-right: 24px;
}
.quote-item-wrapper.swiper-slide p{
    width: calc(100vw - 366px - 120px - calc((100vw - 1320px)/2));
}
/*$('.quotes-container .slick-toolbar').css('transform', 'translateX(-'+containerLeftMargin/2+'px)');*/

/*.quotes-container .slider-toolbar{*/

/*    transform: translateX(calc(-1*((100vw - 1320px)/2))px);*/

/*}*/
.quotes-container .slider-toolbar {
    width: calc(100% - 156px);
}
h2.quote-heading {
    font-family: var(--klavika-bold);
    font-size: 30px;
    text-transform: uppercase;
}
.quote-item-wrapper p{
    color: #ffffff;
}


@media (max-width: 480px) {

    .quotes-container.only-left-margin {
        margin-left: 0 ;
    }

    .quote-slider .swiper-wrapper {
        margin-left: 0;
    }

    .quote-slider .swiper-wrapper .swiper-slide {
        height: auto;
        width: calc(100vw - 36px) !important;
        margin-right: 4px;
        padding-right: 60px;
        padding-left: 60px;

    }
    .quote-wrapper .swiper-button-prev {
        left: 0;
        right: auto;
    }

    .quote-slider .quote-item-wrapper p {
        width: 213px;
        font-size: 15px;
        line-height: 19px;
        font-family: var(--klavika-light);
        word-break: break-word;
    }
    .quotes-container .slider-toolbar {
        width: calc(100% - 36px);
    }
    .swiper-button-next {
        right: 0;
        left: auto;
    }

}
@media (min-width: 481px) and (max-width: 850px) {

    h2.quote-heading {
        font-family: var(--klavika-bold);
        font-size: 48px;
        text-transform: uppercase;
        line-height: 50px;
    }

    .quote-slider .swiper-wrapper .swiper-slide {
        height: auto;
        width: calc(100vw - 160px) !important;
    }

    .quote-slider .quote-item-wrapper p {
        width: 428px;
        font-size: 23px;
        line-height: 35px;
        font-family: var(--klavika-light);
        word-break: break-word;
        text-transform: unset;
    }
    .swiper-button-next {
        right: 33px;
        left: auto;
        top: 22px;
    }
    .quotes-container .slider-toolbar {
        width: calc(100% - 140px);
        display: block;
        right: 60px;
    }

    .swiper-button-prev {
        left: -59px;
        right: auto;
        top: 22px;
    }

    .single-quote-wrapper .quote-large{
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    .single-quote-wrapper .quote-large .swiper-slide, .single-quote-wrapper .quote-large .swiper-slide p{
        margin: 0;
        width: 100% !important;
        max-width: 100%;
    }

    .quote-wrapper .swiper-button-prev {
        left: -162px;
        right: auto;
    }

    .quote-wrapper .swiper-button-prev:after {
        transform: rotate(180deg);
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28.915" height="51.531" viewBox="0 0 28.915 51.531"> <g id="Group_2787" data-name="Group 2787" transform="translate(-11.948 11.06)"> <path id="Path_1072" data-name="Path 1072" d="M5.7,51.531.04,45.874,20.063,25.851,0,5.636,5.678,0,27.116,21.6a5.836,5.836,0,0,1,1.495,6.06,6.487,6.487,0,0,1-1.506,2.462Z" transform="translate(11.948 -11.06)" fill="%2321313C"/> </g> </svg>');
    }

}
@media (max-width: 480px) {
    .quote-item-wrapper.swiper-slide p {
        width: 100%;
    }
    .single-quote-wrapper .quote-large{
        margin: 0;
        width: 100%;
        max-width: 100%;
    }
    .single-quote-wrapper .quote-large .swiper-slide, .single-quote-wrapper .quote-large .swiper-slide p{
        margin: 0;
        width: 100% !important;
        max-width: 100%;
    }
    .single-quote-wrapper .quote-large .swiper-slide p{
        font-size: 24px;
        line-height: 28px;
        font-family: var(--klavika-light);
    }

    .quote-item-wrapper small {
        font-size: 14px;
        line-height: 20px;
        display: block;
        font-family: var(--klavika-regular);
    }

}