@-webkit-keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@-webkit-keyframes fadeInUp {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,100%,0);
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}


@-webkit-keyframes wipe-enter {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes wipe-enter {
    0% {
        opacity: 0.1;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes zoomIn {
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    100% {
        opacity: 1
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(.3,.3,.3);
        transform: scale3d(.3,.3,.3)
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none
    }
}

@keyframes cutFadeLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-10%,0,0);
        transform: translate3d(-10%,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none opacity: 1;
    }
}

@keyframes cutFadeRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(10%,0,0);
        transform: translate3d(10%,0,0)
    }

    100% {
        -webkit-transform: none;
        transform: none opacity: 1;
    }
}

/*@keyframes cutFadeUp {
    0% {
        -webkit-transform: translate3d(0,10%,0);
        transform: translate3d(0,10%,0)
    }

    80% {
        -webkit-transform: translate3d(0,3%,0);
        transform: translate3d(0,3%,0)
    }

    100% {
        -webkit-transform: none;
        transform: none;
    }
}
*/

@keyframes cutFadeUp {
    0% {
        transform: translateY(100%);
        -webkit-transform: translateY(100%);
    }


    100% {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}


@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        animation-name: wipe-enter;
        animation-duration: 1s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-delay: 0.2s
    }

    .zoom-in {
        animation-name: zoomIn;
        animation-fill-mode: forwards;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
    }

    .fade-in-left {
        animation-fill-mode: forwards;
        -webkit-animation-name: fadeInLeft;
        animation-name: fadeInLeft;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
    }

    .fade-in-right {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
    }

    .fade-in-down {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        animation-duration: 2s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .fade-in-up {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
        animation-duration: 1s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .cut-fade-left {
        -webkit-animation-name: cutFadeLeft;
        animation-name: cutFadeLeft;
        animation-duration: 1.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .cut-fade-right {
        -webkit-animation-name: cutFadeRight;
        animation-name: cutFadeRight;
        animation-duration: 1.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .cut-fade-up {
        -webkit-animation-name: cutFadeUp;
        animation-name: cutFadeUp;
        animation-duration: 0.5s;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
    }

    .zoom-on-hover {
        transition: transform .2s;
        transform: scale(1);
    }

        .zoom-on-hover:hover {
            transform: scale(1.1);
        }

    .hidden {
        opacity: 0;
    }
}

.invert-colours {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

.image-fade-gradient-down {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.5)))
}


.ql-align-center {
    text-align: center;
}

.galleria-stage {
    background-color: transparent !important;
}

.galleria-bar {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

.galleria-container:not(.fullscreen) {
    border-radius: 25px;
}