/*************************** баннер на главной странице ******************************************/
section.carousel article .placeholder .banner[data-type="banner--black-friday"]{
    min-height: 400px;
    padding: 20px 60px 20px 77px;
    gap: 67px;
    align-items: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] .image{
    width: 42.8%;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] .text{
    margin-top: -15px;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] .image img {
    position: relative;
    top: 11px;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    width: 100%;
    height: auto;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] h1,
section.carousel article .placeholder .banner[data-type="banner--black-friday"] h2{
    font-size: 56px;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 900;
    color: #ffffff;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] .pre-title{
    display: block;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1.4;
    font-weight: 700;
    color: #ffffff;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] p {
    margin-top: 9px;
    line-height: 1.1;
    color: #ffffff;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] h1 + p,
section.carousel article .placeholder .banner[data-type="banner--black-friday"] h2 + p{
    margin-top: 22px;
}
section.carousel article .placeholder .banner[data-type="banner--black-friday"] a.button{
     max-width: 212px;
     margin-top: 18px;
 }

/********************** баннер на главной странице END***********************************************/
/*************************************************************************************************/


section.header article .placeholder.black-friday{
    position: relative;
    background-image: url("../img/black-friday-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
section.header article .placeholder.black-friday .breadcrumb-next .section-item{
    color: #ffffff;
}
section.header article .placeholder.black-friday .breadcrumb-next .section-item:not(:last-child):after {
    content: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.4714 7.5286C10.7318 7.78895 10.7318 8.21105 10.4714 8.4714L6.70017 12.2426C6.43982 12.503 6.01771 12.503 5.75736 12.2426C5.49701 11.9823 5.49701 11.5602 5.75736 11.2998L9.05719 8L5.75736 4.70017C5.49701 4.43982 5.49701 4.01771 5.75736 3.75736C6.01771 3.49701 6.43982 3.49701 6.70017 3.75736L10.4714 7.5286Z' fill='white'/%3E%3C/svg%3E");
    margin-left: 7px;
}
section.header article .placeholder.black-friday .banner .pre-title{
    font-size: 22px;
    line-height: 1.1;
    color: #ffffff;
    font-weight: 400;
    text-transform: uppercase;
}
section.header article .placeholder.black-friday .banner .black-friday{
    display: flex;
    gap: 27px;
    align-items: center;
    margin-top: 5px;
    font-size: 36px;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.2;
    font-weight: 800;
}
section.header article .placeholder.black-friday .banner .black-friday-discount{
    background-color: #BEB400;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 36px;
    line-height: 1;
    box-sizing: border-box;
}
section.header article .placeholder.black-friday .banner h1{
    margin-top: 2px;
    color: #ffffff;
    font-size: 56px;
    line-height: 1.2;
}
section.header article .placeholder.black-friday  .banner p{
    margin-top: 4px;
    max-width: 475px;
    color: #ffffff;
    background-color: transparent;
}
section.header article .placeholder.black-friday  .banner .text {
    padding-top: 32px;
}
section.header article .placeholder.black-friday .banner a.button{
    margin-top: 17px;
    width: fit-content;
    max-width: 100%;
    white-space: wrap;
    height: auto;
    min-height: 51px;
}
section.header article .placeholder.black-friday .banner .image img{
    z-index: 2;
}
section.header article .placeholder.black-friday .banner .image .banner-decor-bubble {
    position: absolute;
    bottom: -31px;
    left: -128px;
    width: 60px;
    height: 60px;
    background-image: url(/assets/img/bubble-large.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 1;
}
section.header article .placeholder.black-friday .banner .image::before {
    content: '';
    position: absolute;
    top: -33px;
    left: 6%;
    width: 95px;
    height: 95px;
    background-image: url(/assets/img/bubble-large.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;
}
section.header article .placeholder.black-friday .banner .image::after {
    content: '';
    position: absolute;
    right: -20%;
    top: -33%;
    width: 160px;
    height: 160px;
    background-image: url(/assets/img/bubble-mega.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 2;
}
section.header article .placeholder.black-friday.placeholder-optima  .banner .image img{
    width: 114%;
    right: -64px;
    bottom: -6px;
    height: auto;
}
section.header article .placeholder.black-friday.placeholder-optima-annual .banner .image img{
    height: auto;
    width: 100%;
    max-width: 471px;
    right: 33px;
    bottom: -7px;
}

section.header article .placeholder.black-friday.placeholder-voyage .banner .text {
    padding-top: 28px;
}
section.header article .placeholder.black-friday.placeholder-voyage .banner h1 {
    margin-top: -7px;
}
section.header article .placeholder.black-friday.placeholder-voyage .banner p {
    margin-top: -1px;
}
section.header article .placeholder.black-friday .banner p.banner__explanation{
    margin-top: 7px;
    color: #ffffff;
    line-height: 1.3;
}
section.header article .placeholder.black-friday.placeholder-voyage .banner .black-friday-discount{
    position: relative;
    top: -2px;
}
section.header article .placeholder.placeholder-voyage .banner .image img{
    width: 100%;
    height: auto;
    right: -36px;
    bottom: -5px;
}
section.header article .placeholder.black-friday.placeholder-accident-russia  .banner p {
    max-width: 500px;
}
section.header article .placeholder.black-friday.placeholder-accident-russia  .banner .image img{
    width: 96%;
    height: auto;
    right: -9px;
    bottom: -5px;
}
section.header article .placeholder.black-friday.placeholder-accident-premium .banner h1 {
    margin-top: -4px;
    max-width: 545px;
    font-size: 48px;
    line-height: 1;
}
section.header article .placeholder.black-friday.placeholder-accident-premium .banner p{
    max-width: 540px;
    line-height: 1;
}
section.header article .placeholder.black-friday.placeholder-accident-premium .banner a.button {
    margin-top: 13px;
}
section.header article .placeholder.black-friday.placeholder-accident-premium .banner .black-friday-discount {
    position: relative;
    top: -12px;
}
section.header article .placeholder.placeholder-accident-premium .banner .image img{
    width: 94%;
    height: auto;
    right: -22px;
    bottom: -6px;
}
/*=============================================================================================*/
@media screen and (max-width: 1300px){
    section.header article .placeholder .banner .image img {
        width: 98%;
        height: auto;
        right: 3px;
        bottom: -6px;
    }
    section.header article .placeholder.black-friday.placeholder-voyage .banner .text {
        padding-top: 15px;
    }
}
@media screen and (max-width: 1250px){
    section.header article .placeholder.black-friday.placeholder-optima-annual .banner .image img{
        right: -45px;
        width: 118%;
        max-width: 600px;
    }
    section.header article .placeholder.black-friday .banner .pre-title {
        font-size: 18px;
    }
    section.header article .placeholder.black-friday .banner .black-friday{
        gap: 20px;
        font-size: 28px;
    }
    section.header article .placeholder.black-friday .banner .black-friday-discount {
        font-size: 24px;
    }
    section.header article .placeholder.black-friday .banner h1 {
        font-size: 45px;
    }
    section.header article .placeholder.black-friday.placeholder-optima .banner .image img {
        width: 123%;
    }
}
@media screen and (max-width: 1200px){
    section.header article .placeholder.black-friday.placeholder-optima-annual .banner .image img{
        right: -20px;
    }
    section.header article .placeholder.black-friday.placeholder-accident-russia .banner .image img {
        width: 118%;
        height: auto;
        right: -56px;
        bottom: -5px;
    }
    section.header article .placeholder.placeholder-accident-premium .banner .image img {
        width: 106%;
        height: auto;
        right: -22px;
        bottom: -6px;
    }
}

@media screen and (max-width: 1000px) {
    section.carousel article .placeholder .banner[data-type="banner--black-friday"] {
        flex-direction: row;
    }
    section.carousel article .placeholder .banner[data-type="banner--black-friday"] .pre-title {
        font-size: 20px;
    }
    section.carousel article .placeholder .banner[data-type="banner--black-friday"] h1, section.carousel article .placeholder .banner[data-type="banner--black-friday"] h2 {
        font-size: 40px;
        margin-top: 10px;
    }
    section.carousel article .placeholder .banner[data-type="banner--black-friday"] {
        gap: 40px;
    }


}
@media screen and (max-width: 900px){
    section.header article .placeholder.black-friday.placeholder-accident-premium .banner .text {
        padding-top: 17px;
    }
    section.header article .placeholder.placeholder-accident-premium .banner p {
        font-size: 18px;
    }
}
@media screen and (max-width: 800px){

    section.carousel article .placeholder .banner[data-type="banner--black-friday"] {
        padding: 24px;
        gap: 35px;
        flex-direction: column;
    }
    section.carousel article .placeholder .banner[data-type="banner--black-friday"] .image{
        width: 100%;
        order: 2;
        height: auto;
        margin-left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    section.carousel article .placeholder .banner[data-type="banner--black-friday"] .text{
        width: 100%;
        order: 1;
        margin-top: 0;
    }
    section.carousel article .placeholder .banner.banner[data-type="banner--black-friday"] .image img{
        position: relative;
        bottom: 0;
        top: 0;
        max-width: 560px;
        height: auto;
        width: 100%;
        left: 0;
        transform: translate(0, 0);
    }
    /*-----------------------------------------------------------*/
    section.header article .placeholder.black-friday .banner .image .banner-decor-bubble,
    section.header article .placeholder.black-friday .banner .image::before,
    section.header article .placeholder.black-friday .banner .image::after    {
       display: none;
    }
    section.header article .placeholder.black-friday .banner .text h1 {
        font-size: 27px;
    }
    section.header article .placeholder.black-friday.placeholder-optima .banner .image img {
        width: 100%;
        max-width: 613px;
        margin-top: 0;
        bottom: -18px;
    }
    section.header article .placeholder.black-friday.placeholder-optima-annual .banner .image img {
        right: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 0;
        bottom: -30px;
    }
    section.header article .placeholder.placeholder-voyage .banner .image img {
        width: 100%;
        height: auto;
        right: auto;
        bottom: -17px;
        margin-top: 0;
    }
    section.header article .placeholder.black-friday.placeholder-accident-russia .banner .image img {
        width: 100%;
        height: auto;
        right: auto;
        bottom: -40px;
        margin-top: 0;
    }
    section.header article .placeholder.black-friday.placeholder-accident-premium .banner .black-friday-discount {
        position: relative;
        top: 0;
    }
    section.header article .placeholder.black-friday.placeholder-accident-premium .banner h1 {
        margin-top: 5px; 
    }

    section.header article .placeholder.placeholder-accident-premium .banner .image img {
        width: 94%;
        height: auto;
        right: auto;
        bottom: -32px;
        margin-top: 0;
    }
}

@media screen and (max-width: 500px){
    section.header article .placeholder.black-friday .banner h1 {
        font-size: 36px;
    }
    section.header article .placeholder.black-friday .banner .black-friday{
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        margin-bottom: 14px;
    }
    section.header article .placeholder.black-friday  .banner .text p {
        font-size: 14px;
        line-height: 1.2;
    }
}