/* slide animation ============================== */

.fadeOut {
    animation: fadeOut ease-in 0.5s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.fadeIn {
    animation: fadeIn ease-in 0.5s forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* slide text animation ======================== */

.animated {
    visibility: visible;

    animation-duration: 2.5s;

    animation-fill-mode: both;

    -webkit-animation-duration: 2.5s;

    -webkit-animation-fill-mode: both;
}

/* fade in up */

.fadeInUp {
    opacity: 0;

    animation-name: fadeInUp;

    -webkit-animation-name: fadeInUp;
}

@keyframes fadeInUp {
    from {
        transform: translate3d(0, 200px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0, 200px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* fade in down */

.fadeInDown {
    opacity: 0;

    animation-name: fadeInDown;

    -webkit-animation-name: fadeInDown;
}

@keyframes fadeInDown {
    from {
        transform: translate3d(0, -200px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes fadeInDown {
    from {
        transform: translate3d(0, -200px, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* fade in left */

.fadeInLeft {
    opacity: 0;

    animation-name: fadeInLeft;

    -webkit-animation-name: fadeInLeft;
}

@keyframes fadeInLeft {
    from {
        transform: translate3d(-200px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes fadeInLeft {
    from {
        transform: translate3d(-200px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* fade in right */

.fadeInRight {
    opacity: 0;

    animation-name: fadeInRight;

    -webkit-animation-name: fadeInRight;
}

@keyframes fadeInRight {
    from {
        transform: translate3d(200px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes fadeInRight {
    from {
        transform: translate3d(200px, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* play btn animation ======================== */

.play-btn::after,
.play-btn::before {
    animation: playBtnAnimate 1.5s linear infinite;

    -webkit-animation: playBtnAnimate 1.5s linear infinite;

    opacity: 0;
}

.play-btn::after {
    animation-delay: 0.5s;
}

@keyframes playBtnAnimate {
    0% {
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
    }
}

@-webkit-keyframes playBtnAnimate {
    0% {
        transform: scale(0.5);
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
    }
}

/* read more before effect */

.link-text:hover::before {
    animation: animated 0.6s forwards;

    animation-delay: 0.3s;

    width: 0;
}

@keyframes animated {
    form {
        width: 0;
    }

    to {
        width: 30px;

        background-color: #241d26;
    }
}

@-webkit-keyframes animated {
    form {
        width: 0;
    }

    to {
        width: 30px;

        background-color: #241d26;
    }
}

/* shake effect  */

.apply-shake {
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

@-webkit-keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* quicksand effect */

.quicksand-animate-on {
    animation: quicksandOn 0.35s ease-out both;

    -webkit-animation: quicksandOn 0.35s ease-out both;
}

@keyframes quicksandOn {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.4;

        transform: scale3d(0.4, 0.4, 0);
    }

    100% {
        width: 0;

        opacity: 0;

        transform: scale3d(0, 0, 0);
    }
}

@-webkit-keyframes quicksandOn {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.4;

        transform: scale3d(0.4, 0.4, 0);
    }

    100% {
        width: 0;

        opacity: 0;

        transform: scale3d(0, 0, 0);
    }
}

.quicksand-animate-off {
    animation: quicksandOff 0.35s ease-out both;

    -webkit-animation: quicksandOff 0.35s ease-out both;
}

@keyframes quicksandOff {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;

        transform: scale3d(0.4, 0.4, 0);
    }

    100% {
        opacity: 1;

        transform: scale3d(1, 1, 1);
    }
}

@-webkit-keyframes quicksandOff {
    0% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;

        transform: scale3d(0.4, 0.4, 0);
    }

    100% {
        opacity: 0;

        transform: scale3d(1, 1, 1);
    }
}

/* ============================ Collection ============================= */

/* overlay at start */

.mfp-fade.mfp-bg {
    opacity: 0;

    -webkit-transition: all 0.35s ease-out;

    -moz-transition: all 0.35s ease-out;

    transition: all 0.35s ease-out;
}

/* overlay animate in */

.mfp-fade.mfp-bg.mfp-ready {
    opacity: 0.8;
}

/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;

    -webkit-transition: all 0.35s ease-out;

    -moz-transition: all 0.35s ease-out;

    transition: all 0.35s ease-out;
}

/* content animate it */

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

/* content animate out */

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/* fade in effect when hover */

/* top --> bottom */

.appear-top-bottom::before {
    animation: appear-top-bottom ease 0.5s forwards;

    -webkit-animation: appear-top-bottom ease 0.5s forwards;

    transform: translate3d(0, -100%, 0);
}

@keyframes appear-top-bottom {
    0% {
        transform: translate(0, -70%, 0);
    }

    50% {
        transform: translateX(0, -50%, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes appear-top-bottom {
    0% {
        transform: translate(0, -70%, 0);
    }

    50% {
        transform: translateX(0, -50%, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* bottom --> top */

.appear-bottom-top::before {
    animation: appear-bottom-top ease 0.5s forwards;

    -webkit-animation: appear-bottom-top ease 0.5s forwards;

    transform: translate3d(0, 100%, 0);
}

@keyframes appear-bottom-top {
    0% {
        transform: translate(0, 70%, 0);
    }

    50% {
        transform: translateX(0, 50%, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes appear-bottom-top {
    0% {
        transform: translate(0, 70%, 0);
    }

    50% {
        transform: translateX(0, 50%, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* right --> left */

.appear-right-left::before {
    animation: appear-right-left ease 0.5s forwards;

    -webkit-animation: appear-right-left ease 0.5s forwards;

    transform: translate3d(100%, 0, 0);
}

@keyframes appear-right-left {
    0% {
        transform: translate(70%, 0, 0);
    }

    50% {
        transform: translateX(50%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes appear-right-left {
    0% {
        transform: translate(70%, 0, 0);
    }

    50% {
        transform: translateX(50%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* left - right */

.appear-left-right::before {
    animation: appear-left-right ease 0.5s forwards;

    -webkit-animation: appear-left-right ease 0.5s forwards;

    transform: translate3d(-100%, 0, 0);
}

@keyframes appear-left-right {
    0% {
        transform: translate(-70%, 0, 0);
    }

    50% {
        transform: translateX(-50%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

@-webkit-keyframes appear-left-right {
    0% {
        transform: translate(-70%, 0, 0);
    }

    50% {
        transform: translateX(-50%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 0, 0);

        opacity: 1;
    }
}

/* fade out effect when hover */

/* top --> bottom */

.disappear-top-bottom::before {
    animation: disappear-top-bottom ease 0.5s forwards;

    -webkit-animation: disappear-top-bottom ease 0.5s forwards;

    transform: translate3d(0, 0, 0);
}

@keyframes disappear-top-bottom {
    0% {
        transform: translate(0, 50%, 0);
    }

    50% {
        transform: translateX(0, 70%, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, 100%, 0);

        opacity: 0;
    }
}

@-webkit-keyframes disappear-top-bottom {
    0% {
        transform: translate(0, 50%, 0);
    }

    50% {
        transform: translateX(0, 70%, 0);

        opacity: 0.5;
    }

    100% {
        transform: translate3d(0, 100%, 0);

        opacity: 0;
    }
}

/* bottom --> top */

.disappear-bottom-top::before {
    animation: disappear-bottom-top ease 0.5s forwards;

    -webkit-animation: disappear-bottom-top ease 0.5s forwards;

    transform: translate3d(0, 0, 0);
}

@keyframes disappear-bottom-top {
    0% {
        transform: translate(0, -50%, 0);
    }

    50% {
        transform: translateX(0, -70%, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, -100%, 0);

        opacity: 0;
    }
}

@-webkit-keyframes disappear-bottom-top {
    0% {
        transform: translate(0, -50%, 0);
    }

    50% {
        transform: translateX(0, -70%, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(0, -100%, 0);

        opacity: 0;
    }
}

/* right --> left */

.disappear-right-left::before {
    animation: disappear-right-left ease 0.5s forwards;

    -webkit-animation: disappear-right-left ease 0.5s forwards;

    transform: translate3d(0, 0, 0);
}

@keyframes disappear-right-left {
    0% {
        transform: translate(50%, 0, 0);
    }

    50% {
        transform: translateX(70%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(100%, 0, 0);

        opacity: 0;
    }
}

@-webkit-keyframes disappear-right-left {
    0% {
        transform: translate(50%, 0, 0);
    }

    50% {
        transform: translateX(70%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(100%, 0, 0);

        opacity: 0;
    }
}

/* left - right */

.disappear-left-right::before {
    animation: disappear-left-right ease 0.5s forwards;

    -webkit-animation: disappear-left-right ease 0.5s forwards;

    transform: translate3d(0, 0, 0);
}

@keyframes disappear-left-right {
    0% {
        transform: translate(50%, 0, 0);
    }

    50% {
        transform: translateX(70%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(100%, 0, 0);

        opacity: 0;
    }
}

@-webkit-keyframes disappear-left-right {
    0% {
        transform: translate(50%, 0, 0);
    }

    50% {
        transform: translateX(70%, 0, 0);

        opacity: 0.8;
    }

    100% {
        transform: translate3d(100%, 0, 0);

        opacity: 0;
    }
}