/************* TABBED INTERFACE *************/
/* Custom Classes for All Tabbed Interface Buttons and Items Containers can be found in this space */
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 {
    transition: all linear 0.2s;
    cursor: pointer;
}

.creative-active-tab-line {
    transition: left ease 500ms;
}

.creative-tab-button:hover {
    border-radius: 16px 16px 0 0;
    background-color: rgb(255, 255, 255)!important;
}


/************* STYLE TAB ACTIVE STATE: INTERFACE 2 *************/
.creative-tab-full .creative-active-tab-button {
    border-radius: 16px 16px 0 0;
    background-color: rgb(255, 255, 255)!important;
    border-top: 0px solid rgba(0, 0, 0, 0)!important;
    border-bottom: 0px solid rgba(0, 0, 0, 0)!important;
    color: rgb(0, 139, 208) !important;
}

.creative-tab-item {
    border-radius: 0 0 16px 16px!important;
    overflow: hidden !important;
}

/************* TAB ANIMATION *************/

@keyframes animateIn{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


/************* CAROUSELS *************/
body.finetune .carousel {
    height: auto!important;
}
body:not(.finetune) .carousel {  
    overflow: hidden!important;  
}  
  
body:not(.finetune) .carousel-track {  
    will-change: transform;
    display: flex!important;  
    transition: transform 0.3s ease; 
}  
  
body:not(.finetune) .carousel-slide { 
    flex: 0 0 25%;
    box-sizing: border-box;  
}

@media screen and (max-width: 800px) {
    body:not(.finetune) .carousel-slide { flex: 0 0 50%; }
}

@media screen and (max-width: 667px) {
    body:not(.finetune) .carousel-slide { flex: 0 0 100%;}
}