/*** GENERAL EASING ***/
.creative-eased, 
.creative-eased .list-item, 
.creative-eased a,
.creative-tab-button {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/*** BOLD ***/
strong {
    font-family: 'Reddit Sans Bold'!important;
    font-weight: regular;
}

/*** GRADIENTS ***/
.reddit-gradient-1 {
    background: linear-gradient(to bottom, #F0FFB3 0%, #92FFEA 100%);
}

.reddit-gradient-2 {
    background: linear-gradient(to bottom, #FFDE55 0%, #FF4500 100%);
}

/*** HERO ANIMATIONS ***/
body:not(.finetune) .reddit-loading {
    animation: slideUp 2s ease forwards;
    transform: translateY(100vh);
}

body:not(.finetune) .reddit-delay-1 {
    animation-delay: 1s;
}

body:not(.finetune) .reddit-delay-2 {
    animation-delay: 1.1s;
}

body:not(.finetune) .reddit-delay-3 {
    animation-delay: 1.2s;
}

body:not(.finetune) .reddit-delay-4 {
    animation-delay: 1.3s;
}

body:not(.finetune) .reddit-delay-5 {
    animation-delay: 1.4s;
}

body:not(.finetune) .reddit-delay-6 {
    animation-delay: 1.5s;
}

@keyframes slideUp {
    100% { 
        transform: translateY(0); 
    }
}

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

body:not(.finetune) .creative-tab-item .dope-repeatable-container {
    border-radius: 0 1.5rem 1.5rem 1.5rem!important;
}

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

.creative-tab-button {
    border-radius: .5rem .5rem 0 0!important;
    transition: all linear 0.2s;
    cursor: pointer;
}

.creative-tab-detached .creative-active-tab-button {
    color: #000000!important;
    background-color: #FFFFFF!important;
}

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

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

/*** ACCORDIONS ***/
.down-caret, 
.creative-accordion, 
.creative-accordion .accordion-toggle p {
    transition: all linear 0.2s;
    cursor: pointer;
}
.creative-accordion:hover .accordion-toggle p {
    color: rgb(255, 69, 0)!important;
}
.down-caret p:before {
    content:'\E012';
    font-family:'kohtello';
    transform: rotate(0deg);
}
.rotated .down-caret {
    transform: rotate(180deg);
}
.sr-only {  
    position: absolute;  
    width: 1px;  
    height: 1px;  
    padding: 0;  
    margin: -1px;  
    overflow: hidden;  
    clip: rect(0, 0, 0, 0);  
    border: 0;  
}

/*** VIDEO ***/
.reddit-video-link:hover .reddit-play-button {
    background-color: rgb(146, 255, 234)!important;
}

/*** MEDIA QUERIES ***/
@media screen and (max-width: 1400px) {
    .cover-1 { top: 17rem!important; }
    .cover-2 { top: 20.5rem!important; }
    .cover-3 { top: 29rem!important; }
    .cover-4 { top: 26.75rem!important; left: 75%!important; }
}

@media screen and (max-width: 1200px) {
    .cover-1 { top: 14rem!important; }
    .cover-2 { top: 17.5rem!important; }
    .cover-3 { top: 26rem!important; width: 14rem!important; }
    .cover-4 { top: 23.75rem!important; }
}

@media screen and (max-width: 1000px) {
    .cover-1 { top: 7rem!important; }
    .cover-2 { top: 10.5rem!important; }
    .cover-2 .cms-block-type-headline { font-size: 3.25rem!important; }
    .cover-3 { top: 17rem!important; left: 38%!important; }
    .cover-4 { top: 15.5rem!important; left: 65%!important; }
}

@media screen and (max-width: 667px) {
    .creative-tab-button, .creative-active-tab-button { border-radius: 0!important; }
    body:not(.finetune) .creative-tab-item .dope-repeatable-container { border-radius: 0 0 1.5rem 1.5rem!important; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.finetune) .reddit-loading {
        animation: none !important;
        transform: translateY(0) !important;
    }
    
    .creative-eased, 
    .creative-eased .list-item, 
    .creative-eased a,
    .creative-tab-button,
    .down-caret, 
    .creative-accordion, 
    .creative-accordion .accordion-toggle p {
        transition: none !important;
    }
    
    body:not(.finetune) .creative-tab-item.creative-active-tab-item {
        animation: none !important;
        opacity: 1 !important;
    }
    
    html {
        scroll-behavior: auto !important;
    }
}