.cta-bar {
    position: relative;
    z-index: 1;
    color: #fff;
}

.cta-bar h2 {
    color: #fff;
}

.cta-bar__img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0% 100%);
}

.cta-bar__content {
    padding: 52px 0 66px 0;
    background: linear-gradient(to bottom,  rgba(210,36,41,0.8) 0%,rgba(150,18,43,0.8) 100%); 
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0% 100%);
}

.full-Width-image-background  .cta-bar__content {
    padding: 52px 0;
}

.full-Width-image-background .cta-bar__img,
.full-Width-image-background .cta-bar__content {
    clip-path: none;
}

.cta-bar__headline {
    position: relative;
    padding: 0;
    padding-bottom: 10px;
    margin-bottom: 27px;
    z-index: 1;
}

.home .cta-bar__headline {
    padding-bottom: 0;
}

.full-Width-image-background .cta-bar__headline {
    padding: 0 2px;
}  

.cta-bar__headline::before {
    content: '';
    position: absolute;
    width: 185px;
    height: 5px;
    background-color: #000;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
}

.cta-bar__text {
    padding-bottom: 30px;
}

.cta-bar::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 19px;
    bottom: 0px;
    right: 0;
    background-color: #000;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
    z-index: 2;
}

.cta-bar__border {
    position: absolute;
    width:24px;
    height: 36px;
    bottom: 11px;
    right: 0;
    z-index: 1;
}

.cta-bar__border::before {
    content: '';
    position: absolute;
    width:  18px;
    height: 1px;
    top: 0;
    right: 0;
    background-color: #fff;
}

.cta-bar__border::after {
    content: '';
    position: absolute;
    width:  1px;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    transform: rotate(15deg);
}

.full-Width-image-background--gray .cta-bar__headline::before {
    background-color: #D22429;
}

.cta-gray.cta-red .cta-gray-wrap a {
    color: #fff;
}

.cta-gray.cta-red .cta-gray-wrap a:hover {
    color: #000;
}

.cta-gray.cta-red .btn-white:hover::before, 
.cta-gray.cta-red .btn-white:hover::after, 
.cta-gray.cta-red .btn-white:hover span::before, 
.cta-gray.cta-red .btn-white:hover span::after {
    border-color: #000;
}

@media (min-width: 768px) {

    .cta-bar::before {
        bottom: -14px;
    }

    .cta-bar__img {
        clip-path: polygon(0 3%, 100% 0, 100% 97%, 0% 100%);
    }
    
    .cta-bar__content {
        padding: 100px 0 140px 0;
        clip-path: polygon(0 3%, 100% 0, 100% 97%, 0% 100%);
    }

    .cta-bar__headline::before {
        width: 420px;
    }

    .cta-bar::before {
        width: 218px;
        height: 32px;
        clip-path: polygon(5% 0, 100% 0, 100% 100%, 0% 100%);
    }

    .cta-bar__border {
        width: 125px;
        height: 60px;
    }

    .cta-bar__border::before {
        width:  115px;
    }
    
    .cta-bar__border::after {
        transform: rotate(18deg);
        top: -1px;
    }

    .full-Width-image-background  .cta-bar__content {
        padding: 80px 0 100px;
    }

    .cta-bar__text {
        padding-bottom: 45px;
    }

    .cta-dots-center {
        position: absolute;
        right: 0;
        max-width: 100%;
        width: 100%;
        top: unset;
        bottom: 0;
        z-index: 1;
    }
}


@media (min-width: 1200px) {
    .home .cta-bar::before {
        bottom: 5px;
    }

    .cta-bar::before {
        bottom: 0px;
    }

    .cta-bar__wrapper {
        width: 726px;
        margin: 0 auto;
    }

    .cta-bar__img {
        clip-path: polygon(0 6%, 100% 0, 100% 94%, 0% 100%);
    }
    
    .cta-bar__content {
        padding: 145px 0;
        clip-path: polygon(0 6%, 100% 0, 100% 94%, 0% 100%);
    }

    .cta-bar::before {
        height: 38px;
        width: 668px;
        clip-path: polygon(2% 0, 100% 0, 100% 100%, 0% 100%);
    }

    .cta-bar__border {
        width: 316px;
    }

    .cta-bar__border::before {
        width:  306px;
    }
    
    .cta-bar__border::after {
        transform: rotate(20deg);
    }

    .full-Width-image-background  .cta-bar__content {
        padding: 80px 0 100px;
    }

    .cta-bar__text {
        padding-bottom: 40px;
    }

    .full-Width-image-background .cta-bar__headline {
        padding: 0 30px;
    }
    
}


/* cta-gray */

.cta-gray {
    background: #EBEBEC;
    color: #000000;
    position: relative;
    padding: 75px 0;
    z-index: 1;
    overflow: hidden;
}

.cta-dots-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

.cta-dots-left {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
}

.cta-top-gap {
    margin-top: -55px;
    clip-path: polygon(0 1%, 100% 0%, 100% 100%, 0% 100%);
    padding-top: 120px;
}



.cta-gray-wrap h2 {
    padding-bottom: 30px;
    color: #000000;
}

.cta-red {
    background: #D22429;
    padding: 40px 0 60px;
}

.cta-red .cta-gray-wrap h2 {
    padding-bottom: 25px;
    color: #fff;
}

.btn-white {
    color: #fff;
}

.btn-white::before,
.btn-white::after,
.btn-white span::before,
.btn-white span::after {
    border-color: #fff ;
}

.full-Width-image-background--gray .cta-bar__content {
    clip-path: none;
    background: linear-gradient(to bottom,  rgba(240,240,240,0.8) 0%,rgba(206,206,206,0.8) 99%,rgba(206,206,206,0.8) 100%); 
    color: #292929;
}

.full-Width-image-background--gray .cta-bar__headline {
    color: #000000;
    padding-bottom: 10px;
}

.full-Width-image-background--gray.cta-bar::before {
    background-color: #D22429;
}

.full-Width-image-background--gray .cta-bar__border::before,
.full-Width-image-background--gray .cta-bar__border::after {
    background-color: #000000;
}

.full-Width-image-background--gray .cta-bar__border::before {
    height: 2px;
}

.full-Width-image-background--gray .cta-bar__border::after {
    width: 2px;
}

.cta-gray.cta-red .cta-gray-wrap p {
    color: #fff;
}

@media (min-width: 768px) {
    .cta-gray-wrap h2 {
        padding-bottom: 50px;
    }

    .cta-gray {
        padding: 100px 0;
    }
    
    .cta-dots-right {
        max-width: 400px;
    }
    
    .cta-dots-left {
        max-width: unset;
    }
    
    .cta-top-gap {
        margin-top: -86px;
        padding-top: 200px;
    }

    .cta-red {
        padding: 90px 0;
    }

}

@media (min-width: 1200px) {
    .cta-gray-wrap {
        max-width: 570px;
        margin: 0 auto;
    }
    .cta-gray {
        padding: 100px 0;
    }
    
    .cta-dots-right {
        max-width: 100%;
        height: 100%;
        width: 100%;
    }

    .home .cta-dots-right {
        width: auto;
    }
    
    .cta-dots-left {
        max-width: 100%;
    }

    .home .cta-dots-left {
        height: 100%;
        width: auto;
    }
    
    .cta-top-gap {
        margin-top: -200px;
        padding-top: 250px;
    }
    
    .cta-gray-wrap {
        max-width: 780px;
    }

    .cta-red {
        padding: 100px 0 110px;
    }

    .cta-red .cta-dots-right {
        height: 100%;
        width: 100%;
    }

    .btn-white:hover::before,
    .btn-white:hover::after,
    .btn-white:hover span::before,
    .btn-white:hover span::after {
        border-color: #E2E2E2 !important ;
    }

    .cta-gray.cta-red .btn-white:hover::before, 
    .cta-gray.cta-red .btn-white:hover::after, 
    .cta-gray.cta-red .btn-white:hover span::before, 
    .cta-gray.cta-red .btn-white:hover span::after {
        border-color: #000 !important;
    }

    .btn-white:hover {
        color: #E2E2E2;
    }

}