/*** GENERAL EASING ***/
.creative-eased, .creative-eased .list-item, .creative-eased a {
    transition: all linear 0.1s;
}

body:not(.finetune) .brooks-light-cta::after,
body:not(.finetune) .brooks-dark-cta::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 4px;
}

body:not(.finetune) .brooks-dark-cta::after {
    background-color: rgb(14, 19, 31);
}

body:not(.finetune) .brooks-light-cta::after {
    background-color: rgb(248, 245, 240);
}

body:not(.finetune) .brooks-light-cta:hover::after,
body:not(.finetune) .brooks-dark-cta:hover::after {
    animation: swipe 0.5s forwards ease;
}

/*** CTA ANIMATION ***/
@keyframes swipe {
    from { width: 0; }
    to { width: 100%; }
}

/*** TABBED INTERFACE ***/
body:not(.finetune) .creative-tab-item {
    display: none!important;
}

body:not(.finetune) .creative-tab-item.creative-active-tab-item {
    display: block!important;
    animation: animateIn .75s forwards ease;
}

.creative-tab-button {
    clear: both;
    cursor: pointer;
}

body:not(.finetune) .creative-tab-item .cms-image-v2-element {
    transition: all linear 0.2s;
    transform: scale(1);
}

body:not(.finetune) .creative-tab-item:hover .cms-image-v2-element {
    transform: scale(1.1)!important;
}

body:not(.finetune) .creative-active-tab-button {
    pointer-events: none;
}

body:not(.finetune) .creative-active-tab-button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%!important;
    height: 4px;
    background-color: rgb(14, 19, 31);
}


body:not(.finetune) .creative-tab-button::after {
    transition: all linear 0.3s;
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 4px;
    background-color: rgb(14, 19, 31);
}

body:not(.finetune) .creative-tab-button:hover::after{
    width: 100%;
}

/*** TAB ANIMATION ***/
@keyframes animateIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/*** STICKY POSITIONING ***/
#splash-container, #main-canvas { 
    overflow: clip!important; 
}

body:not(.finetune) .position-sticky {
    position: -webkit-sticky!important;
    position: sticky!important;
    top: 3.625rem!important;
}

/*** HUB ***/
.hub-card {
    transition: all 0.1s ease-in-out;
}

.hub-card:hover {
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.15);
    cursor: pointer;
}

/*** MEDIA QUERIES ***/
@media screen and (max-width: 667px) {
    .creative-tab-button { clear: none; }
}