:root {
    --bkk24-white: #ffffff;
    --bkk24-black: #050606;
    --bkk24-grey--light: #e9e9e9;
    --bkk24-red: #ff0032;
    --bkk24-pink--light: #e0c6d5;
    --bkk24-blue: #75a3bb;
    --bkk24-blue--light: #94c5dd;


    --bkk24-orange: #ff8244;
    --bkk24-pink: #c61081;
    --bkk24-blue--dark: #003252;
    --bkk24-yellow: #ffe600;
    --bkk24-green--light: #e6e88d;
}

.landingpage.landingpageCampaign {
    color: var(--bkk24-black);
}

.landingpage.landingpageCampaign .accordion .card,
.landingpage.landingpageCampaign .accordion .card-header {
    border: none;
    background: transparent;
}
.landingpage.landingpageCampaign .accordion .btn-link {
    padding-right: 3rem;
    padding-left: 3rem;
    border-width: 0.3rem;
    border-style: solid;
    border-radius: 1.25rem;
    border-color: var(--bkk24-black);
    color: var(--bkk24-black);
}
.landingpage.landingpageCampaign .accordion .card-header .btn-link:after {
    background-image: none;
}

.landingpage.landingpageCampaign .accordion .card-body {
    padding: 1rem 0 1rem 0;
}
.landingpage.landingpageCampaign .accordion .card-body .container {
    padding: 0;
}
.landingpage.landingpageCampaign .accordion .card-body section {
    margin-bottom: 0;
}

.landingpage.landingpageCampaign .accordion .card-header .btn-link .accordion--icon {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 1rem;
    width: 1.3rem;
    transform: rotate(180deg);
    transition: height .5s ease,transform .5s ease;
}
.landingpage.landingpageCampaign .accordion .card-header .btn-link[aria-expanded=true] .accordion--icon {
    transform: rotate(0deg);
}


.landingpage.landingpageCampaign .accordion .btn-color--black {
    border-color: var(--bkk24-black);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--black:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--black[aria-expanded=true] {
    background-color: var(--bkk24-black);
    color: var(--bkk24-white);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--black:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--black[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-white);
}

.landingpage.landingpageCampaign .accordion .btn-color--white {
    border-color: var(--bkk24-grey--light);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--white:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--white[aria-expanded=true] {
    background-color: var(--bkk24-grey--light);
    color: var(--bkk24-black);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--white:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--white[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-black);
}

.landingpage.landingpageCampaign .accordion .btn-color--red {
    border-color: var(--bkk24-red);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--red:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--red[aria-expanded=true] {
    background-color: var(--bkk24-red);
    color: var(--bkk24-white);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--red:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--red[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-white);
}

.landingpage.landingpageCampaign .accordion .btn-color--orange {
    border-color: var(--bkk24-orange);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--orange:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--orange[aria-expanded=true] {
    background-color: var(--bkk24-orange);
    color: var(--bkk24-white);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--orange:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--orange[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-white);
}

.landingpage.landingpageCampaign .accordion .btn-color--pink {
    border-color: var(--bkk24-pink);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--pink:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--pink[aria-expanded=true] {
    background-color: var(--bkk24-pink);
    color: var(--bkk24-white);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--pink:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--pink[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-white);
}

.landingpage.landingpageCampaign .accordion .btn-color--blue {
    border-color: var(--bkk24-blue);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--blue:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--blue[aria-expanded=true] {
    background-color: var(--bkk24-blue);
    color: var(--bkk24-blue--dark);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--blue:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--blue[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-blue--dark);
}

.landingpage.landingpageCampaign .accordion .btn-color--blue-d {
    border-color: var(--bkk24-blue--dark);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--blue-d:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--blue-d[aria-expanded=true] {
    background-color: var(--bkk24-blue--dark);
    color: var(--bkk24-white);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--blue-d:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--blue-d[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-white);
}

.landingpage.landingpageCampaign .accordion .btn-color--yellow {
    border-color: var(--bkk24-yellow);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--yellow:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--yellow[aria-expanded=true] {
    background-color: var(--bkk24-yellow);
    color: var(--bkk24-red);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--yellow:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--yellow[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-red);
}

.landingpage.landingpageCampaign .accordion .btn-color--gren-l {
    border-color: var(--bkk24-green--light);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--gren-l:hover,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--gren-l[aria-expanded=true] {
    background-color: var(--bkk24-green--light);
    color: var(--bkk24-red);
}
.landingpage.landingpageCampaign .accordion .btn-link.btn-color--gren-l:hover .accordion--icon,
.landingpage.landingpageCampaign .accordion .card-header .btn-link.btn-color--gren-l[aria-expanded=true] .accordion--icon {
    fill: var(--bkk24-red);
}
