@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('/CBB.ApplicationSetting/resources/vendors/hover-master/css/hover.css');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;1,200&display=swap');*/


:root {
    /* Only for reference, media query doesn't support css var
    --container-sm-mq: 576px;
    --container-md-mq: 768px;
    --container-lg-mq: 992px;
    --container-xl-mq: 1200px;
    --primary-color: #990033;
    --secondary-color: #003594;
    --accent-color: #cc0033;

    --primary-color: #950319;
    --secondary-color: #003594;
    --accent-color: #cc0033;
 

     */
    --primary-background: #ffffff;
    --primary-color: #990e18;
    --secondary-color: #1c77a0;
    --accent-color: #e51f23;
    /* With this bright red, there's contrast issue, BP changed it to dark red instead
        --cbb-red: #e51f23;
    */
    --cbb-red: #e51f23;
    --primary-link-color: #990e18;
    --main-menu-bg: rgba(0, 0, 0, 0.6);
    --footer-color: #f7f7f7;
    --text-color: #333333;
    --button-color: #326c92;
    --form-field-bg-color: #c1c1c1;
    --primary-font: 'Roboto';
    --primary-font-family: 'Roboto', 'Open Sans', 'Arial';
    --title-font-family: 'Roboto', 'Open Sans', Arial;
    --title-font: 'Assistant';
    --invert-color: #ffffff;
    --content-width: 1240px;
    --test-fonts: 'catamaran', Roboto, 'Exo 2', 'Source Sans Pro', 'Sarabun';
    --top-alert-height: 119px;
    --primary-border-color: #ccc;
}

html, body {
    font-family: 'Roboto', 'Open Sans', 'Arial';
    color: #333;
    background: #fff;
    font-family: var(--primary-font-family);
    font-size: 12pt;
    color: var(--text-color);
    background: var(--invert-color);
}

/* for tab stops and focus - accessible 
:focus {
    outline: 3px solid red !important;
    box-shadow: inset 0 0 10px red;
}
    */
/*
a {
    color: var(--primary-link-color);
}

    a:hover {
        color: var(--text-color);
    }
    */
/* Overrides bootstrap style */
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: none;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}

@media only screen and (min-width: 1240px) {
    .container, container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1240px;
        max-width: var(--content-width);
        padding-left: 15px;
        padding-right: 15px;
    }

    /*   unlock home top carousel content boundary 
    .hero-slider .slider-item .container {
        max-width: 85vw;
    }
    */
}

/* End bootstrap */

/* Common styles */
.position-full {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* End common styles */


/* --- Top alert --- */
.top-alert {
    background-color: #000000;
    font-size: 1rem;
    color: #ffffff;
    height: 119px;
    color: var(--invert-color);
    height: var(--top-alert-height);
    width: 100%;
    display: none;
    z-index: 101;
}

    .top-alert .container {
        display: flex;
        height: 100%;
        align-items: center;
        position: relative;
    }

    .top-alert a {
        color: #0099e3;
    }

.top-alert-close {
    position: absolute;
    right: 0;
    cursor: pointer;
}

/* --- End top alert --- */


/* --- Top link --- */
.top-links {
    background: #f7f7f7;
    background: var(--footer-color);
    /*var(--primary-color);*/
    line-height: 30px;
    text-align: right;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--primary-color);
    border-bottom: 1px solid #990e18;
}
.top-links-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--content-width);
    height: 38px;
    margin-left: auto;
    margin-right: auto;
}

.top-fdic {
    font-style: italic;
}

.top-fdic > img {
    height: 20px;
    margin-top: -2px;
    margin-right: 0.8rem;
}
    .top-links a {
        /*color: var(--invert-color);*/
        margin-left: 30px;
    }

        .top-links a, .top-links a:link, .top-links a:visited, .top-links a:active {
            color: #333;
            color: var(--text-color);
        }



/* --- End top link --- */


/* --- Top menu --- */
/*
.top-menu {
    font-size: 1.2rem;
    background: rgb(0,0,0);
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(149,3,25,0.90) 40%, rgba(245,0,2,0.84) 100%);
    color: #fff;
    z-index: 101;
}
    */
.top-menu {
    font-size: 1.2rem;
    /*border-bottom: solid var(--primary-border-color) 1px;*/
    background: rgba(0, 0, 0, 0.6);
    background-color: rgba(0, 0, 0, 0.6);
    background: var(--main-menu-bg);
    background-color: var(--main-menu-bg);
    color: #fff;
    z-index: 101;
    width: 100%;
}



    .top-menu > nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }

    .top-menu .branding img {
        width: 120px;
    }

    .top-menu .mobile-menu {
        display: none;
    }

    .top-menu .desktop-menu {
        margin-left: auto;
        margin-right: 80px;
    }

        .top-menu .desktop-menu ul, .top-menu .desktop-menu li {
            margin: 0;
            padding: 0;
            list-style: none;
            white-space: nowrap;
        }

        .top-menu .desktop-menu .menu:after {
            content: " ";
            clear: both;
            float: none;
            display: block;
        }

        .top-menu .desktop-menu .menu-item {
            padding: 0 30px;
            height: 90px;
            float: left;
        }

            .top-menu .desktop-menu .menu-item > a, .top-menu .desktop-menu .menu-item > span {
                display: block;
                height: 90px;
                line-height: 90px;
                cursor: pointer;
                color: #fff;
            }

                .top-menu .desktop-menu .menu-item > a:hover {
                    text-decoration: none;
                }

        .top-menu .desktop-menu .menu > li:hover {
            border-bottom: 6px solid;
            border-bottom-color: #326c92;
            border-bottom-color: var(--button-color);
        }

        .top-menu .desktop-menu .menu-item-background {
            display: none;
            position: absolute;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            overflow: hidden;
            border-top: 1px solid #fff;
        }

ul.submenu-list a, ul.submenu-list a:link {
    color: #fff;
}

.top-menu .desktop-menu .menu-item:hover .menu-item-background, .top-menu .desktop-menu .menu-item.active .menu-item-background {
    display: block;
}

.top-menu .desktop-menu .menu-item-background > .container {
    position: relative;
}

    .top-menu .desktop-menu .menu-item-background > .container:after {
        content: "";
        position: absolute;
        top: 0;
        right: -2000px;
        bottom: 0;
        /*left: calc(100% - 194px);*/
        left: 100%;
        background-color: #990e18;
        background-color: var(--primary-color);
        opacity: 0.7;
    }

    /* adjust submenu angle here with top and border-left*/
    .top-menu .desktop-menu .menu-item-background > .container:before {
        content: "";
        position: absolute;
        top: -1300px;
        right: 0;
        border-left: 475px solid transparent;
        border-bottom: 2000px solid #990e18;
        border-bottom: 2000px solid var(--primary-color);
        opacity: 0.7;
    }

.top-menu .desktop-menu .sub-menu {
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 20px;
    z-index: 2;
    position: relative;
}

.top-menu .desktop-menu .menu-item:hover .sub-menu, .top-menu .desktop-menu .menu-item.active .sub-menu {
    display: flex;
}

.top-menu .desktop-menu .submenu-item {
    margin-right: 20px;
}

    .top-menu .desktop-menu .submenu-item.rightmost {
        margin-right: 0;
        color: #ffffff;
        color: var(--invert-color);
    }

        .top-menu .desktop-menu .submenu-item.rightmost a {
            color: #ffffff;
            color: var(--invert-color);
        }

    .top-menu .desktop-menu .submenu-item h5 {
        padding: 40px 0 10px 0;
        font-weight: 400;
        border-bottom: 4px solid #ccc;
        border-bottom: 4px solid var(--primary-border-color);
        margin-bottom: 14px;
    }

    .top-menu .desktop-menu .submenu-item:hover h5 {
        border-bottom-color: #326c92;
        border-bottom-color: var(--button-color);
    }

    .top-menu .desktop-menu .submenu-item .submenu-list {
        margin-right: 10px;
        font-size: 1rem;
        line-height: 2rem;
    }

    .top-menu .desktop-menu .submenu-item.rightmost .submenu-list {
        margin-right: 0;
    }

    .top-menu .desktop-menu .submenu-item .submenu-list > li {
        width: 210px;
        overflow: hidden;
        white-space: normal;
    }

.top-menu .cbb-button a {
    color: #fff;
}

.top-menu .signup-menu {
    display: inline-block;
    position: relative;
}

    .top-menu .signup-menu .cbb-button {
        color: #ffffff;
        color: var(--invert-color);
        padding: 8px 30px;
        text-transform: uppercase;
        background-color: #e51f23;
        background-color: var(--cbb-red);
        font-family: 'Roboto', 'Open Sans', 'Arial';
        font-family: var(--primary-font-family);
        font-size: 1rem;
        border-color: transparent;
        border-radius: 5px;
        cursor: pointer;
    }

.hvr-shutter-in-horizontal {
    background: var(--cbb-red);
}

    .hvr-shutter-in-horizontal:before {
        background: var(--cbb-red);
    }

.top-menu .signup-menu .cbb-button:hover {
    text-decoration: none;
    background: #990e18;
    background: var(--primary-color);
}



.cbb-button {
    color: #fff !important;
    color: var(--invert-color) !important;
    padding: 8px 30px 8px 30px;
    text-transform: uppercase;
    background-color: #e51f23;
    background-color: var(--cbb-red);
    font-family: 'Roboto', 'Open Sans', 'Arial';
    font-family: var(--primary-font-family);
    font-size: 1rem;
    border-color: transparent;
    border-radius: 5px;
    cursor: pointer;
}

    .cbb-button:hover {
        background-color: #990e18;
        color: #ffffff;
        background-color: var(--primary-color);
        color: var(--invert-color);
    }

.btn-center {
    margin-left: auto;
    margin-right: auto;
    display: block!important;
    width: fit-content;
}
}
/* override bootstrap btn primary blue color */
.btn-primary {
    background: #990e18;
    background-color: #990e18;
    border-color: #990e18;
    background: var(--primary-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

    .btn-primary:focus {
        background: #990e18;
        background-color: #990e18;
        border-color: #e51f23;
        background: var(--primary-color);
        background-color: var(--primary-color);
        border-color: var(--cbb-red);
    }

    .btn-primary:hover {
        background: #e51f23;
        background-color: #e51f23;
        border-color: #990e18;
        background: var(--cbb-red);
        background-color: var(--cbb-red);
        border-color: var(--primary-color);
    }
/* override bootbox */
.modal {
    top: 40%;
}

/*   all other general links  */
a, a:active, a:visited, a:link {
    color: #990e18;
    color: var(--primary-link-color);
}


main a, main a:active, main a:visited, main a:link {
    text-decoration: underline;
}

/* underline exceptions */
a.button, a.button:active, a.button:visited, a.button:link, a.focusAtm, a.focusAtm:active, a.focusAtm:visited, a.focusAtm:link, a.btn:any-link, a.nav-link:any-link {
    text-decoration: none;
}

main a:hover {
    text-decoration-line: underline;
    text-decoration-style: double;
}
    a.white-link, a.white-link:active, a.white-link:visited, a.white-link:link {
        color: #FFFFFF;
        font-weight: 600;
        text-decoration: underline;
    }

        a.white-link:hover {
            text-decoration-style: double;
        }

a[href^="tel:"] {
    font-weight:bolder;
}
/* --- End top menu --- */

/* Hero slider */
section.hero-slider {
    margin-top: -90px;
    background: #000;
}

.hero-slider .slider-item {
    position: relative;
}

.hero-slider .slider-item {
    display: none;
}

    .hero-slider .slider-item:first-child {
        display: block;
    }

.hero-slider .slick-hero-slider.slick-initialized .slider-item {
    display: block;
}

.hero-slider .slider-item > picture {
    display: block;
}

.hero-slider .slider-item img {
    object-fit: cover;
    width: 100%;
    max-height: 700px;
}

.hero-slider .slick-hero-slider .slick-prev, .hero-slider .slick-hero-slider .slick-next {
    z-index: 1;
    width: 45px;
    height: 100px;
    background-color: rgba(255, 255, 255, .4);
}

.hero-slider .slick-hero-slider .slick-prev {
    left: 0;
}

.hero-slider .slick-hero-slider .slick-next {
    right: 0;
}

.hero-slider .slick-hero-slider .slick-arrow:before {
    border-style: solid;
    border-width: 0.115em 0.115em 0 0;
    content: '';
    display: inline-block;
    height: 25px;
    left: 0.15em;
    position: relative;
    top: 0.15em;
    transform: rotate(-45deg);
    vertical-align: top;
    width: 25px;
    color: rgba(0, 0, 0, .45);
}

.hero-slider .slick-hero-slider .slick-prev:before {
    left: 0.25em;
    transform: rotate(-135deg);
}

.hero-slider .slick-hero-slider .slick-next:before {
    left: 0;
    transform: rotate(45deg);
}

.hero-slider .slick-hero-slider .container {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
}

.hero-slider .slider-item .slider-text-space {
    color: #fff;
    color: var(--invert-color);
    margin-top: 18em;
}

    .hero-slider .slider-item .slider-text-space.multi-lines {
        margin-top: 12em;
    }
    /* Hero slider custom position */
    .hero-slider .slider-item .slider-text-space.custom-2 {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .carousel-control:focus {
        border: 1;
    }

    @media (max-width: 1239px) and (min-width: 1025px) {
        .hero-slider .slider-item .slider-text-space {
            margin-top: 12em;
        }

        .hero-slider .slider-item .slider-text-space.with-zelle {
            margin-top: 5em;
        }

            .hero-slider .slider-item .slider-text-space.multi-lines {
                margin-top: 3em;
            }
    }

@media (max-width: 1024px) {
    .hero-slider .slider-item .slider-text-space {
        padding-left: 25px;
        padding-right: 25px;
    }

    .hero-slider .slick-hero-slider .slick-prev, .hero-slider .slick-hero-slider .slick-next {
        top: 175px;
    }

    .hero-slider .slider-item > picture {
        height: 350px;
    }

    .hero-slider .slick-hero-slider .container {
        position: static;
        margin-top: 40%;
    }

    .hero-slider .slider-item .slider-text-space {
        color: #333333;
        color: var(--text-color);
        margin-top: 0;
    }

        .hero-slider .slider-item .slider-text-space > :first-child {
            display: block;
            padding-top: 15px;
        }

        .hero-slider .slider-item .slider-text-space.custom-2 {
            display: block;
        }
    /*
    .slider-text-space {
        color: #ccc;
    }
    */
    .hero-slider .title-1, .hero-slider .slider-text-space p, .hero-slider .title-1 {
        max-width: 440px;
        overflow-wrap: break-word;
        word-wrap:break-word;
        color: #333;
        color: var(--text-color);
    }
}
@media (max-width : 850px) {
    .hero-slider .slick-hero-slider .container {
        margin-top: 50%;
    }
}

@media (max-width : 480px) {
    .hero-slider .slick-hero-slider .container {
        margin-top: 25%;
    }
}

/* End hero slider */


/* Home shortcut, Denis created component */
#homeshortcuts-carousel {
    width: calc(100% - 90px);
    margin: 60px auto;
}

    #homeshortcuts-carousel .slider-item {
        display: none;
    }

        #homeshortcuts-carousel .slider-item:first-child {
            display: block;
        }

    #homeshortcuts-carousel.slick-initialized .slider-item {
        display: block;
    }

    #homeshortcuts-carousel .slider-item img {
        display: block;
    }

    #homeshortcuts-carousel .slick-prev, #homeshortcuts-carousel .slick-next {
        z-index: 1;
        width: 45px;
        height: 100px;
        background-color: rgba(255, 255, 255, .4);
    }

    #homeshortcuts-carousel .slick-prev {
        left: -45px;
    }

    #homeshortcuts-carousel .slick-next {
        right: -45px;
    }

    #homeshortcuts-carousel .slick-arrow::before {
        border-style: solid;
        border-width: 0.115em 0.115em 0 0;
        content: '';
        display: inline-block;
        height: 35px;
        left: 0.15em;
        position: relative;
        top: 0.15em;
        transform: rotate(-45deg);
        vertical-align: top;
        width: 35px;
        color: rgba(0, 0, 0, .45);
    }

    #homeshortcuts-carousel .slick-prev::before {
        left: 0.25em;
        transform: rotate(-135deg);
    }

    #homeshortcuts-carousel .slick-next::before {
        left: -0.25em;
        transform: rotate(45deg);
    }

@media (max-width: 1140px) {
    #homeshortcuts-carousel .slick-prev {
        left: -45px;
    }

    #homeshortcuts-carousel .slick-next {
        right: -45px;
    }
}

@media (max-width: 992px) {
    #homeshortcuts-carousel {
        width: calc(100% - 90px);
        margin-left: auto;
        margin-right: auto;
    }

        #homeshortcuts-carousel .slick-prev {
            left: -45px;
        }

        #homeshortcuts-carousel .slick-next {
            right: -45px;
        }
}

/* End home shortcut */


/* Highlight */
.highlight {
    max-width: 1240px;
    max-width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

    .highlight .highlight-item {
        overflow: hidden;
        margin-top: 30px;
    }

    .highlight .highlight-picture {
        height: 350px;
    }

        .highlight .highlight-picture picture {
            position: absolute;
        }

.highlight-content {
    /*opacity: 0.9;*/
    position: absolute;
}

/** TOP */
.highlight .highlight-item-top .highlight-content::after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 400px solid #fff;
    border-left: 80px solid transparent;
    position: absolute;
    top: 0;
    right: 46%;
    left: auto;
    bottom: 0;
    z-index: 3;
}

.highlight .highlight-item-top .highlight-content::before {
    content: "";
    width: 46%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    background-color: #fff;
    z-index: 3;
}

.highlight .highlight-item-top .highlight-text {
    width: 38%;
    padding-right: 10%;
    z-index: 7;
    /*padding-right: 100px; */
    color: #000;
}

.highlight .highlight-item-top .highlight-picture img {
    position: absolute;
    /*left: -10%;*/
    top: 0;
}

/** MIDDLE */

.highlight .highlight-item-middle .highlight-content::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 400px solid #990e18;
    border-top: 400px solid var(--primary-color);
    border-right: 80px solid transparent;
    position: absolute;
    top: 0;
    right: calc(36% + 200px);
    left: auto;
    bottom: 0;
    z-index: 3;
}

.highlight .highlight-item-middle .highlight-content::before {
    content: "";
    width: auto;
    position: absolute;
    top: 0;
    right: calc(36% + 140px * 2);
    bottom: 0;
    left: 0;
    background-color: #990e18;
    background-color: var(--primary-color);
    z-index: 3;
}

.highlight .highlight-item-middle .highlight-text {
    width: 35%;
    z-index: 7;
    padding-left: 115px;
    color: #ffffff;
    color: var(--invert-color);
}

.highlight .highlight-item-middle .highlight-picture img {
    position: absolute;
    /*right: -10%;*/
    top: 0;
}

/** BOTTOM */

.highlight .highlight-item-bottom .highlight-content::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 400px solid #f7f7f7;
    border-top: 400px solid var(--footer-color);
    border-left: 80px solid transparent;
    position: absolute;
    top: 0;
    right: calc(38% + 165px);
    left: auto;
    bottom: 0;
    z-index: 3;
}

.highlight .highlight-item-bottom .highlight-content::before {
    content: "";
    width: calc(38% + 165px);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    background-color: #f7f7f7;
    background-color: var(--footer-color);
    z-index: 3;
}

.highlight .highlight-item-bottom .highlight-text {
    width: 38%;
    padding-right: 10%;
    z-index: 7;
    /*margin-right: 100px;*/
    color: #000;
}

.highlight .highlight-title {
    font-size: 40px;
}

.highlight .highlight-description {
    font-size: 17px;
}

.highlight .highlight-item-bottom .highlight-picture img {
    position: absolute;
    /*left: -25%;*/
    top: 0;
}

@media (max-width: 1px) {
    .highlight .highlight-title {
        font-size: 30px;
    }

    .highlight .highlight-item-top .highlight-text {
        padding-right: 50px;
    }

    .highlight .highlight-item-middle .highlight-text {
        width: 25%;
        padding-left: 0px;
    }
    /*
    .highlight .highlight-picture {
        height: 300px;
    }
    */
    /** TOP */
    .highlight .highlight-item-top .highlight-content::after {
        border-bottom: 300px solid #990134;
        border-left: 155px solid transparent;
    }

    /** MIDDLE */
    .highlight .highlight-item-middle .highlight-content::after {
        border-top: 300px solid #c6b6a6;
        border-right: 155px solid transparent;
        right: calc(40% + 155px);
    }

    .highlight .highlight-item-middle .highlight-content::before {
        right: calc(40% + 155px * 2);
    }

    /** BOTTOM */
    .highlight .highlight-item-bottom .highlight-content::after {
        border-top: 300px solid #434a54;
        border-left: 155px solid transparent;
        right: calc(40% + 155px);
    }

    .highlight .highlight-item-bottom .highlight-content::before {
        width: calc(40% + 155px);
    }
}
@media (max-width: 768px) {
    .highlight-content .justify-content-end {
        -ms-flex-pack: end !important;
        justify-content:flex-start!important;
    }  
}
@media (max-width: 1240px) {
    .highlight-content {
        position: static !important;
        opacity: 1;
        padding: 50px;
    }

    .highlight .highlight-item-bottom .highlight-content {
        padding-bottom: 0;
    }
    .highlight .highlight-picture {
        height: auto;
    }
    .highlight .highlight-picture picture {
        position: static !important;
    }

    .highlight .highlight-item-top .highlight-content::before,
    .highlight .highlight-item-middle .highlight-content::before,
    .highlight .highlight-item-bottom .highlight-content::before,
    .highlight .highlight-item-top .highlight-content::after,
    .highlight .highlight-item-middle .highlight-content::after,
    .highlight .highlight-item-bottom .highlight-content::after {
        width: 0;
        position: static;
        background: none;
        z-index: 0;
        border: none;
    }

    .highlight .highlight-item-top .highlight-picture img,
    .highlight .highlight-item-middle .highlight-picture img,
    .highlight .highlight-item-bottom .highlight-picture img {
        position: static;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .highlight .highlight-item-top .highlight-text,
    .highlight .highlight-item-middle .highlight-text,
    .highlight .highlight-item-bottom .highlight-text {
        width: 65%;
        min-width: 300px;
        padding-left: 0;
        margin-left: auto;
        margin-right: auto;
        color: #333333 !important;
        color: var(--text-color) !important;
    }

    .highlight .highlight-title {
        font-size: 24px;
    }

    .highlight .highlight-description {
        font-size: 15px;
    }

    /** TOP */
    .highlight .highlight-item-top .highlight-text,
    .highlight .highlight-item-bottom .highlight-text {
        padding-right: 15px;
    }

    /** middle **/
    .title-bg-flip, .highlight a.inverted, .highlight a.inverted:link, .highlight a.inverted:visited {
        color: #990e18!important;
        color: var(--primary-color) !important;
    }

 
}

/* End hightlight */


/* General content */
.general .general-content {
    padding: 80px 0;
}

/* End general content */


/* Footer */
.main-footer {
    padding: 65px 0;
    box-shadow: -1px 16px 14px -1px rgba(0, 0, 0, 0.1) inset;
    -webkit-box-shadow: -1px 16px 14px -1px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: -1px 16px 14px -1px rgba(0, 0, 0, 0.1) inset;
    background-color: var(--footer-color);
}

    .main-footer .link-group h3 {
        font-size: 1.1rem;
        font-weight: 400;
        padding-bottom: 20px;
        color: #000;
    }

        .main-footer .link-group h3::after {
            content: "";
            position: absolute;
            height: 3px;
            width: 30px;
            background-color: #990e18;
            background-color: var(--primary-color);
            left: 0;
            bottom: 4px;
        }

    .main-footer .link-group li + li {
        margin-top: 5px;
    }

    .main-footer .link-group a {
        color: #333;
        color: var(--text-color);
    }

/*  End footer */

/* From original css */

.sidebar-nav {
    position: fixed;
    width: 320px;
    height: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    top: 0;
    left: 0;
    background-color: #2f2f2f;
    z-index: 999;
    overflow: auto;
    max-height: 100vh;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
    font-size: 1rem;
}

    .sidebar-nav.is-open {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, .75);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .75)
    }

@media (max-width: 1024px) {
    .sidebar-nav {
        width: 68vw;
        height: 100vh
    }
}

.sidebar-nav .mobile-nav-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 40px
}

.sidebar-nav .close {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    line-height: 40px;
    text-align: center;
    background-color: #2f2f2f
}

.sidebar-nav a {
    display: block;
    padding: 15px 10px;
    font-weight: 600;
    line-height: 16px;
}

    .sidebar-nav a, .sidebar-nav a:active, .sidebar-nav a:link, .sidebar-nav a:visited {
        color: #fff
    }

.sidebar-nav .nav-group {
    text-align: left;
}

    .sidebar-nav .nav-group a {
        font-weight: 400;
    }

        .sidebar-nav .nav-group a:hover {
            text-decoration: none;
        }

@media (max-width: 1024px) {
    .sidebar-nav .nav-group {
        border-bottom: 1px solid #fff;
    }
}

/* side menu leve 1 */
.sidebar-nav .nav-group > a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #fff;
    background-color: #990e18;
    background-color: var(--primary-color);
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

    .sidebar-nav .nav-group > a span {
        margin-left: 3em;
        width: 100%;
        text-align: left;
        white-space: nowrap;
    }

        .sidebar-nav .nav-group > a span:last-child {
            text-align:right;
            padding-left: 0;
            padding-right: 3em;
        }
        .sidebar-nav .nav-group .fa-chevron-up {
            display: none
        }

.sidebar-nav .nav-group .fa-chevron-down {
    display: block
}

.sidebar-nav .nav-group .sub-nav {
    display: none;
    padding-left: 5vw;
    list-style-type: none;
    margin: 0
}
    .sidebar-nav .nav-group .sub-nav li.subsection {
        font-weight: 600;
    }
    .sidebar-nav .nav-group .sub-nav a {
        padding: 10px;
        margin-left: 1em;
        background-color: #4d4c4d;
        -webkit-transition: background-color 150ms ease-in-out;
        transition: background-color 150ms ease-in-out
    }

        .sidebar-nav .nav-group .sub-nav a:hover {
            color: #cf0a2c;
            background-color: #2f2f2f
        }

    .sidebar-nav .nav-group .sub-nav > li > a {
        background-color: #2f2f2f
    }

    .sidebar-nav .nav-group .sub-nav > li ul {
        margin: 0;
        padding-left: 0;
        list-style-type: none;
        background-color: #999
    }

        .sidebar-nav .nav-group .sub-nav > li ul a {
            font-size: .75em
        }

.sidebar-nav .nav-group .is-active .fa-chevron-up {
    display: block
}

.sidebar-nav .nav-group .is-active .fa-chevron-down {
    display: none
}

.sidebar-nav .nav-group .is-active .sub-nav {
    display: block
}

.login-panel {
    position: absolute;
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 20px);
    margin-left: 20px;
    margin-top: 10px;
    padding: 15px 25px 25px 25px;
    /* background-color: rgba(207,10,44,.6);
     border-radius: 0 0 20px 0  */
}

    .login-panel.is-open {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

.sidebar-nav .login-panel {
    width: calc(100% - 20px);
    position: relative;
    display: block;
    left: 0;
    right: 0;
    margin: 10px auto;
    border-radius: 0
}

    .sidebar-nav .login-panel a {
        padding: 0
    }

.login-panel .login-panel__header {
    color: #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 10px;
}

.login-panel button, .login-panel input, .login-panel select {
    width: 100%;
    background-color: #fff;
    border: 0;
    height: 25px;
    border-radius: 4px;
    padding: 0 8px
}

.login-panel button, .login-panel input {
    margin-top: 10px
}

.login-panel button {
    background-color: #cf0a2c;
    text-transform: uppercase;
    color: #fff;
    font-size: .875em;
    font-weight: 700;
    height: 30px;
    cursor: pointer;
    line-height: 1
}

    .login-panel button:hover {
        background-color: #99151d
    }

.login-panel .login-panel__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 10px
}

    .login-panel .login-panel__footer a {
        font-size: .813em;
        font-weight: 400;
        text-transform: none;
        color: #fff;
        margin: 0;
        opacity: .8
    }

        .login-panel .login-panel__footer a:hover {
            opacity: 1
        }

/* End from original css */

/* Login component */
.login-component {
    width: 280px;
    /*height: 380px;*/
    border: 16px solid #990e18;
    border: 16px solid var(--primary-color);
    padding: 6px 16px;
    background-color: #ffffff;
    background-color: var(--invert-color);
    z-index: 103;
    display: none;
    font-size: 1rem;
}

.login-component {
    width: 280px;
    /* height: 390px;
     border: 4px solid var(--primary-color); */
    border: 0;
    border-radius: 10px;
    padding: 6px 16px;
    padding-bottom: 10px;
    background-color: rgba( 0, 0, 0, 0.9);
    z-index: 103;
    display: none;
    font-size: 1rem;
}

    .login-component h5 {
        color: #fff;
    }

    .login-component fieldset {
        margin-top: 20px;
    }

    .login-component .radio-label {
        display: block;
        position: relative;
        padding-left: 54px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        margin: 0;
        padding-top: 4px;
        height: 30px;
    }

    .login-component .options label:before {
        content: "";
        display: block;
        /* background: #fff; var(--form-field-bg-color);*/
        background: none;
        position: absolute;
        left: 0;
        top: 0;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        width: 34px;
        height: 34px;
    }

    .login-component .options > div:not(:first-child) label:before {
        border-radius: unset;
    }

    .login-component .options > div:last-child label:before {
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
    }

    .login-component .radio-label input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .login-component .radio-btn {
        position: absolute;
        height: 25px;
        width: 25px;
        background-color: #fff; /* var(--form-field-bg-color);*/
        border-radius: 15px;
        top: 5px;
        left: 4px;
    }

    .login-component .options > div:last-child .radio-btn {
        top: 4px;
    }

    .login-component .radio-label:hover input ~ .radio-btn {
        border: 1px solid #e51f23;
        border: 1px solid var(--cbb-red);
    }

    .login-component .radio-label input:checked ~ .radio-btn {
        background-color: #e51f23;
        background-color: var(--cbb-red);
    }

    .login-component .radio-btn:after {
        content: "";
        position: absolute;
        display: none;
    }

    .login-component .radio-label input:checked ~ .radio-btn:after {
        display: block;
    }

    .login-component .radio-label .rado-btn:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }

    .login-component .memberLoginForm {
        display: block;
        margin-top: 25px;
    }

    .login-component input[type="text"] {
        /*background: var(--form-field-bg-color);*/
        border: 1px solid transparent;
        border-radius: 4px;
        width: 100%;
        color: #666;
        font-weight: 700;
        padding: 4px 8px;
        margin-bottom: 10px;
    }

        .login-component input[type="text"]::placeholder {
            color: #666;  /* changed from CCC to 666 9/28/2021 */
            font-weight: 400;
        }

        .login-component input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #666;
            font-weight: 400;
        }

    .login-component input[type="submit"] {
        background-color: #326c92;
        color: #ffffff;
        background-color: var(--button-color);
        color: var(--invert-color);
        text-transform: uppercase;
        width: 100%;
        margin-bottom: 10px;
    }

    .login-component .login-component__footer a {
        color: #c1c1c1;
        color: var(--form-field-bg-color);
    }

.login-component {
    position: absolute;
    top: -30px;
    right: -40px;
}

    #msg-companyid {
        display: none;
    }

    .login-component .cbb-alert {
        color: var(--accent-color)!important;
        font-size: 0.8em;
    }
    .ie-label {
        display: none;
    }

@media (max-width: 1240px) {
    .login-component {
        right: -10px;
    }
}

@media (max-width: 992px) {
    .login-component {
        right: 0;
    }
}

@media (max-width: 768px) {
    .login-component {
        top: -27px;
        right: -30px;
    }

    nav.cbb-breadcrumb, nav.cbb-breadcrumb:before {
        display: none !important;
    }
}

/* End login component */



/* ========== general purpose  ======================== */

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    font-family: 'Roboto', 'Open Sans', Arial;
    font-family: var(--title-font-family);
    font-weight: 300;
    background-color: transparent;
}

h1, .heading-1 {
    color: #990e18;
    color: var(--primary-color);
    font-size: 2.6em;
    padding-top: 10px;
    /*line-height: .8;*/
    font-weight: 400;
}

h1.accessible {
    font-size: 0;
    width: 1px;
    height: 1px;
    display: inline-block;
    overflow: hidden;
    position: absolute !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    clip: rect(1px,1px,1px,1px);
}
.cta-heading {
    color: #990e18;
    color: var(--primary-color);
    font-size: 2em;
    padding-top: 10px;
    line-height: .8;
    font-weight: 400;
    white-space: nowrap;
}

main h1 {
    margin-top: 1.2em;
    margin-bottom: .6em;
}

h2, .heading-2 {
    color: #333;
    font-size: 2em;
    padding-top: 10px;
    font-weight: 600;
    white-space: nowrap;
}

    h2.hero-title {
        font-size: 2.5em;
        color: #fff;
        font-family: 'Roboto', 'Open Sans', Arial;
        font-family: var(--title-font-family);
        font-weight: 100;
    }

footer h3 {
    margin-top: 0;
}

h2.hero-title.text-left {
    line-height: 1.8em;
    margin-top: +190px;
}

h3, .heading-3 {
    color: #e51f23;
    color: var(--accent-color);
    font-size: 1.5em;
    font-weight: 500;
    margin-top: 30px;
}

.main-footer h3 {
    color: #cccccc;
    color: var(--text-color);
    font-weight: 400;
}

.heading-4 {
    font-size: 1.3em;
    font-weight: 600;
}
/* label.footer-label has different property for KR */
label.footer-label {
    width: 140px;
}

h4 {
    font-size: 1em;
    font-weight: 600;
}

h5 {
    /* font-size: 1.125em;
    text-decoration: line-through;*/
}

h6 {
    font-size: 1em;
    /*text-decoration: line-through;*/
}

p {
    line-height: 1.5;
    font-size: 1em;
    margin: 1rem 0
}

.cbb-red {
    color: var(--cbb-red);
}

.cbb-dark-red {
    color: #990e18;
    color: var(--primary-color);
}

.cbb-primary-bg {
    background: #990e18;
    background: var(--primary-color);
    color: #fff;
}

.cbb-secondary-bg {
    background: #f7f7f7;
    color: #cccccc;
    background: var(--footer-color);
    color: var(--text-color);
}

.cbb-primary-bg a, .cbb-primary-bg a:link, .cbb-primary-bg a:active, .cbb-primary-bg a:visited {
    color: #ffffff !important;
}

.title-1::after {
    content: '\A';
    white-space: pre;
}

.hero-slider .title-1, .top-image .title-1 {
    font-size: 3em;
    font-weight: 400; /*{}*/
    line-height: 1.1;
    font-family: 'Assistant';
    font-family: var(--title-font);
}

/* subpage banner title text */
#subpage-title-text.title-1 {
    font-weight: 400;
}

.hero-slider .slider-text-space p, .top-image .slider-text-space p {
    font-size: 1.2em; /*{}*/
    font-weight: 300;
}

/*
.hero-slider .title-1, .top-image .title-1, .hero-slider .slider-text-space p, .top-image .slider-text-space p {
    font-family: var(--title-font-family);
}
    */

@media (max-width: 1024px) {
    .hero-slider .title-1 {
        font-size: 2.5em;
    }
}


.slider-text-space .cbb-button {
    margin-top: 30px;
}

.full-width {
    /*width: 100vw;*/
}

.page-content {
    width: 1240px;
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
    /*    padding-left: 15px;
    padding-right: 15px;*/
}



section.full-bg {
    margin-top: 2em;
    width: 100vw;
    height: 400px;
    min-height: 400px;
    max-height: 400px;
}

.highlight-text {
    font-family: 'Roboto', 'Open Sans', Arial;
    font-family: var(--title-font-family);
}

    .highlight-text .highlight-title {
        font-size: 2em;
        font-weight: 600;
        white-space: nowrap;
    }

    .highlight-text .highlight-description {
        font-size: 1.1em;
        font-weight: 300;
    }

@media (max-width: 1024px) {


    .highlight-text .highlight-description {
        font-weight: 300;
        font-size: 1em;
    }

    section.hero-slider {
        background: #fff;
        margin-top: 0;
    }

    #homeshortcuts-carousel div img {
        width: 65px !important;
    }
}

.light-bg {
    background: #f7f7f7;
    background: var(--footer-color);
}

.product-box {
    width: 100%;
}




/* =========== home shortcuts carousel classes ======================= */

div#homeshortcuts {
    width: 100%;
    text-align: center;
}

#homeshortcuts-carousel {
    margin-right: auto;
    margin-left: auto;
}

    #homeshortcuts-carousel div {
        text-align: center;
    }

        #homeshortcuts-carousel div img {
            margin-left: auto;
            margin-right: auto;
            width: 80px;
        }

    #homeshortcuts-carousel a, #homeshortcuts-carousel a:link, #homeshortcut-carousels a:active, #homeshortcuts-carousel a:visited {
        color: #333333;
        color: var(--text-color);
        text-decoration: none;
    }

/* ======================== breadcrumbs ==========================*/
nav.cbb-breadcrumb {
    padding: 0.5em 0.7em;
    border: 1px solid red;
    background: rgb(221,221,221);
    background: linear-gradient(90deg, rgba(221,221,221,1) 0%, rgba(196,196,196,1) 3%, rgba(255,255,255,1) 88%);
    float: right;
    width: auto;
    display: inline-block;
    display: none;
}

    nav.cbb-breadcrumb::before {
        content: '';
        line-height: 0;
        font-size: 0;
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid #f7f7f7;
        border-bottom: 50px solid var(--footer-color);
        border-left: 60px solid transparent;
        border-right: 0px solid #f7f7f7;
        border-right: 0px solid var(--footer-color);
        position: absolute;
        top: -50px;
        left: -60px;
    }

    nav.cbb-breadcrumb ol {
        margin: 0;
        padding-left: 0;
        list-style: none;
    }

    nav.cbb-breadcrumb li {
        display: inline;
    }


        nav.cbb-breadcrumb li + li::before {
            display: inline-block;
            margin: 0 0.25em;
            transform: rotate(15deg);
            border-right: 0.1em solid currentColor;
            height: 0.8em;
            content: '';
        }

    nav.cbb-breadcrumb [aria-current="page"] {
        font-weight: 300;
        text-decoration: none;
    }





/* ====================== general use styles ==============================*/

.transparency-90 {
    opacity: 0.95;
}

.transparency-80 {
    opacity: 0.8;
}

.screen {
    background: rgba(0,0,0, 0.3);
}

.gradient-90 {
    background: linear-gradient(90deg, rgba(149,3,25,1) 0%, rgba(149,3,25,0.90) 64%, transparent);
}

.top-margin-sm {
    margin-top: 2em;
}

.top-margin-md {
    margin-top: 3em;
}

.top-margin-lg {
    margin-top: 5em;
}

.bottom-margin-sm {
    margin-bottom: 2em;
}

.bottom-margin-md {
    margin-bottom: 3em;
}

.bottom-margin-lg {
    margin-top: 5em;
}

.alternate, .alternate-md {
    padding-top: 2em;
    padding-bottom: 2em;
}

.bounce:hover {
    animation: bounce 1s;
}

.primary-text-color {
    color: #990e18;
    color: var(--primary-color);
}

.cbb-text {
    color: #484848;
}

.black-text {
    color: #000000;
}

.title-glow {
    text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.89);
}

.una {
    text-align: center;
    display: block;
    line-height: 1px;
    height: 1px;
    margin: 2rem 0;
    background: #B3B04F;
}

    .una:before, .una:after {
        content: '\2021';
        font-size: 2rem;
        color: #B3B04F;
        position: absolute;
        transform: rotate(90deg);
    }

    .una:before {
        left: 0;
    }

    .una:after {
        right: 0;
    }

.hr-text {
    font-family: 'Roboto', 'Open Sans', 'Arial';
    font-family: var(--primary-font-family);
    font-weight: 300;
    line-height: 1em;
    position: relative;
    outline: 0;
    border: 0;
    color: #333333;
    color: var(--text-color);
    text-align: center;
    height: 1.5em;
    /*opacity: .5;*/
    font-size: 2em;
}

    .hr-text:before {
        content: '';
        background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#818078), to(transparent));
        background: linear-gradient(to right, transparent, #818078, transparent);
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
    }

    .hr-text:after {
        content: attr(data-content);
        position: relative;
        display: inline-block;
        color: black;
        padding: 0 .5em;
        line-height: 1.5em;
        color: #818078;
        background-color: #ffffff;
    }

.enlarge {
    transform: scale(1.1);
}

img.fit-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.text-box {
    background: #f7f7f7;
    background: var(--footer-color);
    padding: 40px 60px 40px 60px;
    border-top-left-radius: 60px;
    border-bottom-right-radius: 60px;
}

.cbb-shadow {
    box-shadow: 8px 7px 12px 1px rgba(0,0,0,.575);
}

img.rount-top {
    border-top-left-radius: 30px;
}

ul.two-columns {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    padding-right: 9em;
}

    ul.two-columns li {
        padding-right: 3em;
    }

.half-width {
    width: 50%;
}

.three-qtr-width {
    width: 75%;
}

/* lg-width mostly for label width */
.lg-width {
    width: 180px!important;
}

.indent-label label {
    min-width: 180px;
    font-weight:600;
}

.indent-label li {
    margin-bottom: 0.5em;
}


/*   link styles     */
.internal-link {
    display: inline-block;
    vertical-align: middle;
}

    .internal-link, .internal-link:link, .internal-link:active, .internal-link:visited {
        color: #990e18;
        color: var(--primary-color);
        border-bottom: 2px solid #1c77a0;
        border-bottom: 2px solid var(--secondary-color);
        text-decoration: none;
        font-size: 1em;
        font-weight: 500;
    }

        .internal-link:after {
            content: '\25BA';
            color: #1c77a0;
            color: var(--secondary-color);
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: perspective(1px) translateZ(0);
            transform: perspective(1px) translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-property: transform;
            transition-property: transform;
        }

        .internal-link:hover:after, .internal-link:hover:focus, .internal-link:hover:active {
            color: #e51f23;
            color: var(--cbb-red);
            -webkit-transform: translateX(8px);
            transform: translateX(8px);
        }

        .internal-link:hover {
            border-bottom-color: #e51f23;
            border-bottom-color: var(--cbb-red);
            text-decoration: none;
        }

a.internal-link.inverted, a.internal-link.inverted:link, a.internal-link.inverted:active, a.internal-link.inverted:visited {
    color: #fff !important;
}

.top-alert a, .top-alert a:link, .top-alert a:visited, .top-alert a:active {
    color: #fff !important;
    /*color: var(--cbb-red)!important; */
    text-decoration: underline;
}

    .top-alert a:hover {
        text-decoration-line: underline;
        text-decoration-style: double;
    }
@media (max-width: 1240px) {
        a .internal-link.inverted, a.internal-link.inverted:link, a.internal-link.inverted:active, a.internal-link.inverted:visited {
        color: #990e18 !important;
        color: var(--primary-color)!important;
    }
}

@media (max-width: 768px) {
    .highlight-text .highlight-title {
        white-space: normal;
    }

    .top-alert a, .top-alert a:link, .top-alert a:active, .top-alert a:visited {
        color: #e51f23;
        color: var(--cbb-red);
    }

    .top-alert p {
        font-size: 0.7em;
    }

    .top-alert {
        height: 200px;
    }
    .hr-text {
        font-size: 1.3em;
    }
}
/* for inner page jump */
.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}
/*  css effects   */

@keyframes bounce {
    0%, 20%, 60%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }

    80% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}


/* image slanted cut -- should not have img.container-fluid for correct cut */
.polygon-cut {
    overflow: hidden;
}

    .polygon-cut.cut-left img {
        clip-path: polygon(15% 0%, 100% 0, 100% 100%, 0% 100%);
    }

    .polygon-cut.cut-right img {
        clip-path: polygon(0% 0%, 100% 0, 85% 100%, 0% 100%);
    }

.circle-cut img {
    width: 60%;
    clip-path: circle(42.4% at 47% 52%);
}
/* Changing to theme color, enhancing contrast */

.betterContrast {
    color: #990e18;
}


/*  bootstrap columns grid divider - vertical */


.grid-divider {
    overflow-x: hidden;
    position: relative;
}

    .grid-divider > [class*="col-"]:nth-child(n + 2):after {
        /*content: "";*/
        background-color: #cccccc;
        background-color: var(--primary-border-color);
        position: absolute;
        top: 0;
        bottom: 0;
    }

@media (max-width: 1024px) {
    .grid-divider > [class*="col-"]:nth-child(n + 2):after {
        width: 100%;
        height: 1px;
        left: 0;
        top: -4px;
    }
    .grid-divider > [class*="col-"]:nth-child(2n - 1) {
        padding-bottom: 2em;
    }

    .grid-divider > [class*="col-"]:nth-child(n + 2) {
        padding-top: 1.5em;
    }
}

@media (min-width: 1025px) {
    .grid-divider > [class*="col-"]:nth-child(n + 2):after {
        width: 1px;
        height: auto;
        left: -1px;
    }
}


/* ============ WCAG Satisfaction purpose ========================== */

.slick-arrow:focus, .slick-slide-control01:focus {
    border: 1px solid var(--cbb-red);
}

.product-slider .product-detail span.cbb-red {
    font-size: 1.15em;
}

.top-menu .signup-menu .cbb-button {
    font-size: 1.1rem;
}


/* ================= overlay styles ==============================================*/

.main-overlay {
    width: 100vw;
    height: 100%;
    z-index: 1500;
    background: rgba(11,11,11, 0.8);
    display: none;
    position: fixed;
    top: 0;
    align-items: center;
    justify-content: center;
}
.overlay-box {
    width: 50vw;
    height: 20vw;
    min-width: 600px;
    min-height: 400px;
    background: #fff;
    align-content: center;
    border-radius: 3rem;
}
#id-home-overlay {
    display: flex;
    padding: 3rem;
    height: 80%;
    align-items: center;
    align-content: center;
    color: var(--text-color);
    background: #f1f1f1;
    border-radius: 3rem;
    overflow: auto;
}

.main-overlay .overlay-operation {
    
}
.overlay-operation .left {
    float: left;
    padding: 1.7rem 2rem .7rem 2rem;
}
.overlay-operation .right {
    float: right;
    padding: 1rem 2rem .7rem 2rem;
}
#id-overlay-image {
    max-height: 75vh;
}

@media (max-width: 768px) {
    .overlay-box {
        width: 95vw;
        height: 75vh;
        min-width: unset;
        min-height: unset;
    }

}