.preloader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}
.preloader svg {
    max-width: 200px;
}

.preloader svg .letter,
.preloader svg .trademark,
.preloader svg .main-stroke ,
.preloader svg .curve {
    opacity: 0;
}
.image-cta-wrapper > * {
    opacity: 0;
    transform: translateY(50px);
}

@media(min-width:768px) {
    .preloader svg {
        max-width: 300px;
    }  
}

@media(min-width:1200px) {
    .preloader svg {
        max-width: 400px;
    }  
}

/* .js-animated-fade-text > * {
    position: relative;
    transform: translate(0, -30px) scale(1);
    opacity: 0;
} */




@media (min-width: 1200px) {
    .js-animated-fade-right-reveal-item {
        transform: translate(100%, 0);
        opacity: 0;
    }
    .js-animated-fade-left-reveal-item {
        transform: translate(-100%, 0);
        opacity: 0;
    }

    .js-animated-reveal-left {
        transform: translate(-50px, 0);
        opacity: 0;
    }   
    .js-animated-reveal-right {
        transform: translate(50px, 0);
        opacity: 0;
    }

    .js-animated-reveal,
    .js-animated-fade-reveal-item {
        transform: translate(0, 50px);
        opacity: 0;
    }

    .js-animated-fade-top-reveal-item {
        transform: translate(0, -50px);
        opacity: 0;
    }

    .js-animated-fade-left-reveal-item {
        transform: translate(-50px, 0);
        opacity: 0;
    }

    .js-animated-fade-right-reveal-item {
        transform: translate(50px, 0);
        opacity: 0;
    }

    .js-image-reveal,
    .js-masthead-image-reveal {
        position: relative;
        overflow: hidden;
        width:100%;
        max-width:100%;
        --height: 0%;
    }

    .js-image-reveal::after,
    .js-masthead-image-reveal::after {
        content: "";
        position: absolute;
        width: 100%;
        height: var(--height);
        bottom: 0;
        left: 0;
        background: var(--color-white-100);
    }

    .js-image-reveal img {
        width: 100%;
        opacity: 0;
    }

    .js-split-text-char .split-child,
    .js-split-text .split-line {
        overflow: hidden;
    }

    .js-homepage-banner-animation  .masthead__content > * {
        opacity: 0;
        transform : translate(0,-50px)
    }

    .js-header-item ,
    .animated-headlines > * {
        transform: translateY(-30px);
        opacity: 0;
    }
    .js-header-fade-item{
        opacity: 0;
    }

    .js-animated-fade-flip-reveal-item{
        opacity: 0;
        scale : 1.2;
    }

    .animated-button-item {
        transform: translateX(-50%);
        opacity: 0;
        
    }
    .animated-button-item img{
        scale : 1.5;
    }

    .animated-wrapper {
        opacity: 0;
    }

    .text-content-slider--homepage .text-content-slide{
        opacity: 0;
        transform: translateY(-100%);
    }
    .masthead__content > * {
        opacity: 0;
        transform : translate(-50px,0)
    }
    
    
    .js-animated-button-top-item:not(.image-cards__top-content) > * {
        opacity: 0;
        transform: translateY(-50px);
    }
    
    .story-cards__item:not(.image-cards__item){
        opacity: 0;
        transform: translateY(-50px);
    }
    
    .js-full-width-image-text{
        overflow: hidden;
    }
    
    .js-animated-bg{
        transform: scale(1.2);
    }

    .js-animated-content{
        opacity: 0;
        transform: translateX(100%);
    }
}


.uncover {
    display: flex;
    flex-direction: row;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.uncover_slice {
    height: 100%;
    flex-grow: 1;
    background: #fff;
}

.js-image-text-slider-reveal {
    overflow: hidden;
}

.js-masthead-image-reveal .uncover_slice {
    height: 0;
}

.js-image-text-slider-reveal .uncover_slice {
    height: 0;
} 

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

@keyframes Draw {
    0% {
        fill-opacity:0;
        stroke-dashoffset:800;
    }
    80% {
        stroke-dashoffset:0;
        fill-opacity:0;
    }
    100%{
        stroke-dashoffset:0;
        fill-opacity:1;
    }
}
@-webkit-keyframes Draw{
    0%{ 
        fill-opacity:0;
        stroke-dashoffset:800;
    }
    80%{
        stroke-dashoffset:0;
        fill-opacity:0;
    }
    100%{
        stroke-dashoffset:0;
        fill-opacity:1;
    }
}
@-moz-keyframes Draw{
    0%{
        fill-opacity:0;
        stroke-dashoffset:800;
    }
    80% {
        stroke-dashoffset:0;
        fill-opacity:0;
    }
    100%{
        stroke-dashoffset:0;
        fill-opacity:1;
    }
}



@keyframes Bounce {
    0% {
        transform : scale(1.0) ;
    }
    80% {
        transform : scale(1.1) ;
    }
    100%{
        transform : scale(1.0) ;
    }
}
@-webkit-keyframes Bounce{
    0% {
        transform : scale(1.0) ;
    }
    80% {
        transform : scale(1.1) ;
    }
    100%{
        transform : scale(1.0) ;
    }
}
@-moz-keyframes Bounce{
    0% {
        transform : scale(1.0) ;
    }
    80% {
        transform : scale(1.1) ;
    }
    100%{
        transform : scale(1.0) ;
    }
}