.titilium{
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
}
:root {
    --tranquility-blue: #000c29;
    --tranquility-blue-rgba: rgba(0, 12, 41, 1);
    --vitality-blue: #355973;
    --vitality-blue-rgba: rgba(53, 89, 115, 1);
    --clarity-blue: #a8c7e9;
    --clarity-blue-accessibility: #B1CEEC;
    --clarity-blue-rgba: rgba(168, 199, 233, 1);
    --supporting-black: #000000;
    --supporting-yellow: #ffc226;
    --supporting-white: #ffffff;
    --arc-size: var(--arc-size-custom, clamp(1rem, 5.5vw, 6.4rem));
    --arc-mask: radial-gradient(60vw calc(var(--arc-size) * 2) at 50% calc(100% + var(--arc-size)), #0000 100%, #000);
    --bs-border-radius: 1.00rem;
}

.btn-rnd {
    border: solid thin;
    border-radius: 20px;
    padding: 10px 20px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-family: "Titillium Web", sans-serif;
    font-weight: 600;
    font-style: normal;
    display: inline-block;
    margin: 15px auto 30px;
    letter-spacing: 0.1rem;
}
.btn-rnd.tblue {
    border-color: var(--tranquility-blue);
    background-color: var(--tranquility-blue);
    color: var(--supporting-white) !important;
}



.btn-rnd.white {
    border-color: var(--tranquility-blue);
    background-color: var(--supporting-white);
    color: var(--tranquility-blue) !important;
}

.btn-rnd.reverse {
    border-color: var(--tranquility-blue);
    background-color: var(--supporting-white);
    color: var(--tranquility-blue) !important;
}

.btn-rnd.transparent-white {
    border-color: var(--supporting-white);
    background-color: transparent;
    color: var(--supporting-white) !important;
}

.btn-rnd.transparent-tblue {
    border-color: var(--tranquility-blue);
    background-color: transparent;
    color: var(--tranquility-blue) !important;
}
#dtopNav.rebrand{
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), url("/_images/colors-light-bg.jpg");
    
    border-top: solid 1px #d2d2d2;
}
#dtopNav.rebrand+#cdnVideoHero{
    margin-top: 137px;;
}
#dtopNav.rebrand.bumpedNav{
    margin-top: 61px;
}
#dtopNav.rebrand .container{
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
#dtopNav.rebrand .navbar-brand picture{
    padding:8px 0px;
}
#dtopNav.rebrand .navbar-brand picture{
    max-width: 240px;
}

/* NAVIGATION */
@media (min-width: 992px) and (max-width: 1199.98px) {

    #topBar>.container,
    nav.navbar>.container {
        max-width: 100% !important;
    }
}


    #topBar {
        display: block;
        height: 0px;
    }

.bg-black #topBar{
    border-bottom: solid 1px #555555;
}
    #topBar>.container{
        width:100%;
    }


@media (min-width: 768px) {


        #topBar {
        display: block;
    }
}

@media (min-width: 992px) {
    #topBar>.container{
        width:970px;
    }
}

@media (min-width: 1200px) {
    #topBar>.container{
        width:1170px;    
    }
}

#topBar>div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
#topBar>div::before,
#topBar>div::after
{display: none;}

#promoCode {
    max-width: 230px;
}

#promoCode #error_message {
    display: none;
    position: absolute;
    z-index: 1000000;
    max-width: 230px;
    font-size: 14px;
}
.breadcrumb>li+li:before {
    content: "|";
}
#mobaBreadcrumb {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 38px;
    width: 100%;
    max-width: 360px;
    margin: auto;
}
#mobaBreadcrumb>span {
    padding: 10px 0;
}
#mobaBreadcrumb>span a {
    color: #5e5e5e;
}
#mobaBreadcrumb>span.active a {
    color: var(--tranquility-blue);
}
#mobaBreadcrumb>span+span:before {
    content: "|";
    padding: 0 8px;
}
#topBar nav#topBarNav {
    background-color: transparent !important;
}
#topBar #topBarNav .breadcrumb{
        padding: 18px 0 0 0;
        background-color: transparent;
}
#topBar #topBarNav .breadcrumb-item {
    height:38px;
}
#topBar #topBarNav .breadcrumb-item {
    position: relative;
}

#topBar #topBarNav .breadcrumb-item::before {
    color: #757575;
}
.bg-black #topBar #topBarNav .breadcrumb-item::before {
    color: var(--supporting-white);
}

#topBar #topBarNav .breadcrumb-item a {
    color: #757575;
    text-decoration: none;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    transition: .3s;
    font-weight: 400;
}
.bg-black #topBar #topBarNav .breadcrumb-item a {
    color: #555555;
}


#topBar #topBarNav .breadcrumb-item a:hover {
    color: var(--vitality-blue);
    transition: .3s;
}
.bg-black #topBar #topBarNav .breadcrumb-item a:hover {
    color: var(--clarity-blue);
}

#topBar #topBarNav .breadcrumb-item.active {
    color: var(--tranquility-blue);
}
.bg-black #topBar #topBarNav .breadcrumb-item.active {
    color: var(--supporting-white);
}

#topBar #topBarNav .breadcrumb-item.active a {
    color: var(--tranquility-blue);
}
.bg-black #topBar #topBarNav .breadcrumb-item.active a{
    color: var(--supporting-white);
}

#topBar #topBarNav .breadcrumb-item.active::after {
    content: "";
    width: 20px;
    height: 3px;
    background-color: var(--vitality-blue);
    display: block;
    position: absolute;
    bottom: -5px;
}
#topBar #topBarNav .breadcrumb-item.active:not(:first-child)::after {
    left: 15px;
}

.input-with-button {
    position: relative;
    display: inline-block;
    font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
    /* Or block, depending on layout needs */
}

.input-with-button button {
    position: absolute;
    right: 4px;
    /* Align to the right edge */
    top: 50%;
    transform: translateY(-50%);
    /* Align to the top edge */
    height: 100%;
    /* Make button height same as input */
    width: 22px;
    height: 22px;
    border-radius: 50%;
    line-height: 24px;
    display: inline-block;
    text-align: center;
    background-color: var(--tranquility-blue);
    color: var(--supporting-white);
    font-size: 18px;
    font-weight: 300;
    padding: 0 0 3px 3px;
    margin: 0;
    line-height: 17px;
    border: none;
}
.bg-black .input-with-button button {
    background-color: var(--supporting-black);
    color: var(--supporting-white);
    border: solid 1px var(--supporting-white);
}

.input-with-button button:hover {
    animation: bounceRight 1s infinite;
    /* Apply the animation */
}

.input-with-button input {
    padding-right: 40px;
    /* Adjust based on button width */
    border-radius: 20px;
    height: 32px;
    border-color: var(--tranquility-blue);
    color: var(--tranquility-blue);
}
.bg-black .input-with-button input{
    border-color: var(--supporting-white);
    color: var(--supporting-white);
    background-color: var(--supporting-black);
}

.input-with-button input::-webkit-input-placeholder,
.input-with-button input:-moz-placeholder,
.input-with-button input::-moz-placeholder,
.input-with-button input:-ms-input-placeholder,
.input-with-button input::placeholder {
    color: var(--tranquility-blue);
}
.bg-black .input-with-button #code::-webkit-input-placeholder { color: var(--supporting-white) !important; opacity: 1; }
.bg-black .input-with-button #code::-moz-placeholder { color: var(--supporting-white) !important; opacity: 1; }
.bg-black .input-with-button #code:-ms-input-placeholder { color: var(--supporting-white) !important; opacity: 1; }
.bg-black .input-with-button #code::placeholder { color: var(--supporting-white) !important; opacity: 1; }

.bg-black input::-webkit-input-placeholder,
.bg-black textarea::-webkit-input-placeholder,
.bg-black select::-webkit-input-placeholder {
    color: #aaa !important;
    opacity: 1;
}

.bg-black input::-moz-placeholder,
.bg-black textarea::-moz-placeholder,
.bg-black select::-moz-placeholder {
    color: #aaa !important;
    opacity: 1;
}

.bg-black input:-ms-input-placeholder,
.bg-black textarea:-ms-input-placeholder,
.bg-black select:-ms-input-placeholder {
    color: #aaa !important;
    opacity: 1;
}

.bg-black input::placeholder,
.bg-black textarea::placeholder,
.bg-black select::placeholder {
    color: #aaa !important;
    opacity: 1;
}



#desktopPromoWrapper {
    margin: 15px auto;
}
#topBarNav{
    display: none;
}

@media (min-width: 768px) {
    #desktopPromoWrapper {
    margin: 0px 0px;
}
#topBarNav{
    display: block;
}
        #topBar {
        display: block;
    }
}

#mobilePromoWrapper #promoCode {
    margin: auto;
    max-width: 300px;
}

#mobilePromoWrapper .input-with-button {
    max-width: 300px;
    width: 100%;

}

#mobilePromoWrapper .input-with-button input {
    height: 44px;
    width: 100%;
}


#cdnVideoHero{margin-top: 137px;}

#dtopNav.rebrand .navbar-brand picture, 
#dtopNav.rebrand .navbar-brand img {
        max-width: 220px;
    }
    
#dtopNav.rebrand .navbar-brand {
    max-width: 240px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}


@media only screen and (min-width: 992px) {

    
    
    #cdnVideoHero{margin-top: 99px;}
}


.line-cards .card {
    scroll-snap-align: center;
    border: transparent;
    min-height: 300px;
    max-width: 576px;
    margin: 0px auto 40px;
    border-radius: 20px;
    padding-top: 40px;
}
.line-cards .card a {
    color: white;
}


.line-cards .card img:first-of-type {
    margin: 25px auto;
    display: block;
    width: 100%;
    max-width: 200px;
    max-height: 70px;
    min-height: 65px;
}

.line-cards .card img:nth-of-type(1) {
    margin-bottom: 25px;
}.line-cards .card img:nth-of-type(2) {
    width: 100%;
}

.line-cards .card p {
    margin: 20px auto;
    width: 85%;
}
.line-cards .card h3 {
    color: white;
}

.card.premium-radial {
    background: var(--supporting-black);
    background: radial-gradient(circle at 50% 200%, rgb(0, 0, 0) 40%, rgb(23, 23, 23) 80%, rgb(49, 49, 49) 86%, rgb(0, 0, 0) 1%, rgb(0, 0, 0) 89%, rgb(0, 0, 0) 100%);
    color: var(--supporting-white);
}

.bg-black .card.premium-radial {
    background: var(--supporting-black);
    background: radial-gradient(circle at 50% 200%, #000 40%, #171717 80%, #272727 83%, #000 1%, #181818 89%, #252525 100%);
    color: var(--supporting-white);
}


.card.tranquility-radial {
    background: var(--tranquility-blue);
    background: radial-gradient(circle at 50% 200%, rgba(53, 89, 115, 1) 40%, rgba(0, 12, 41, 1) 85%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1) 100%);
    color: var(--supporting-white);
}

.card.clarity-radial {
    background: var(--clarity-blue);
    background: radial-gradient(circle at 50% 200%, rgba(255, 255, 255, 1) 40%, rgb(168, 199, 233) 85%, rgb(255, 255, 255) 85%, rgb(255, 255, 255) 100%);
    color: var(--tranquility-blue);

}

.tranquility-radial-arc {
    height: 500px;
    position: absolute;
    z-index: -1;
    display: block;
    min-width: 3200px;
    background-color: transparent;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 100%;
    background: var(--tranquility-blue);
    background: radial-gradient(circle at 50% 550%, rgb(0, 12, 41) 75%, rgb(11, 26, 62) 85%, rgb(0, 12, 41) 85%, rgb(0, 12, 41) 100%);
    color: var(--supporting-white);
}

.card .card-model-title{
    font-size: 1.7rem;
    letter-spacing: 4px;
}

.card.img-card {
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    position: relative;
    min-height: 365px;
    overflow: hidden;
}

.card.img-card::after {
    content: '';
    background: var(--supporting-black);
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%);
    height: 100%;
}

.card.img-card .btn-rnd,
.card.img-card .card-bottom-text {
    white-space: nowrap;
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card.img-card .card-bottom-text {
    bottom: 0px;
    color: var(--supporting-white);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card.link-card {
    text-decoration: none;
    min-height: 150px;
    justify-content: center;
    text-align: center;
    font-size: 20px;
    color: var(--tranquility-blue);
}

.sm-links .card.link-card {
    text-transform: uppercase;
    background-color: transparent;
    border: solid 2px var(--tranquility-blue);
    font-size: 21px;
    font-weight: 600;
    padding: 25px;
}

.card.link-card img {
    margin: auto;
    max-width: 250px;
    max-height: 80px;
    padding: 0px 10px;
}

@media (min-width: 992px) {
    .card.link-card {
        font-size: 28px;
    }
}