/************* ACCORDIONS *************/
/* Smoothing the transition for all accordion elements, setting the cursor to a pointer to indicate interactivity */
.plus-minus p:before, 
.creative-accordion, 
.creative-accordion .color-mask {
    -webkit-transition: all linear 0.2s;
    transition: all linear 0.2s;
    cursor: pointer;
}

/* Setting the "plus" character for the icon */
.plus-minus p:before {
    content:'\002B';
    display: block;
}

/* Setting the "minus" character and setting the spin rotation for the icon when accordion is opened */
.rotated .plus-minus p:before {
    transform: rotate(180deg);
    content:'\2212';
}

/* Setting the color background hover state on each accordion */
.creative-accordion:hover .color-mask {
    opacity:1!important;
}

/************* 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: fadeIn .75s forwards ease;
}

.creative-tab-button {
    transition: all linear 0.2s;
    cursor: pointer;
}

/************* STYLE TAB ACTIVE STATE *************/
.creative-active-tab-button {
    opacity: 1!important;
    background-color: rgb(242, 242, 242);
}

/************* STYLE TAB INACTIVE STATE *************/
.creative-tab-button:not(.creative-active-tab-button) {
    color: rgb(20, 17, 59)!important;
    opacity: 0.25!important;
}

/************* STYLE TAB HOVER STATE *************/
.creative-tab-button:not(.creative-active-tab-button):hover {
    opacity: 1!important;
}

/************* SCROLL-TRIGGERED ANIMATIONS *************/

/*body:not(.finetune) .creative-fade {*/
/*    opacity: 0;*/
/*}*/
 
/*body:not(.finetune) .scrolled.creative-fade {*/
/*    animation: fadeIn 1s ease-in-out both;*/
/*}*/

/************* FADE-IN COVER ANIMATIONS *************/

body:not(.finetune) .creative-fade-in {
    animation: fadeIn 2s ease forwards;
    opacity: 0;
}

.creative-delayed1 {
    animation-delay: 0.4s!important;
}

.creative-delayed2 {
    animation-delay: 0.8s!important;
}

/************* KEYFRAME ANIMATION *************/

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}