/* slide animation ============================== */
.fadeOut {
    animation: fadeOut ease-in .5s forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {

        opacity: 0;
    }
}

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

    to {

        opacity: 0;
    }
}

.fadeIn {
    animation: fadeIn ease-in .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: .5s;
}

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

    50% {
        opacity: 1;
    }

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

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

    50% {
        opacity: 1;
    }

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

/* read more before effect */
.link-text:hover::before {
    animation: animated .6s forwards;
    animation-delay: .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(.36, .07, .19, .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 .35s ease-out both;
    -webkit-animation: quicksandOn .35s ease-out both;
}

@keyframes quicksandOn {
    0% {
        opacity: .8;
    }

    50% {
        opacity: .4;
        transform: scale3d(.4, .4, 0);
    }

    100% {
        width: 0;
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }
}

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

    50% {
        opacity: .4;
        transform: scale3d(.4, .4, 0);
    }

    100% {
        width: 0;
        opacity: 0;
        transform: scale3d(0, 0, 0);
    }
}

.quicksand-animate-off {
    animation: quicksandOff .35s ease-out both;
    -webkit-animation: quicksandOff .35s ease-out both;
}

@keyframes quicksandOff {
    0% {
        opacity: .4;
    }

    50% {
        opacity: .8;
        transform: scale3d(.4, .4, 0);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

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

    50% {
        opacity: .8;
        transform: scale3d(.4, .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 .5s forwards;
    -webkit-animation: appear-top-bottom ease .5s forwards;
    transform: translate3d(0, -100%, 0);
}

@keyframes appear-top-bottom{
    0%{
        transform: translate(0, -70%, 0);
    }50%{
        transform: translateX(0, -50%, 0);
        opacity: .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: .8;
    }100%{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* bottom --> top */
.appear-bottom-top::before{
    animation: appear-bottom-top ease .5s forwards;
    -webkit-animation: appear-bottom-top ease .5s forwards;
    transform: translate3d(0, 100%, 0);
}

@keyframes appear-bottom-top{
    0%{
        transform: translate(0, 70%, 0);
    }50%{
        transform: translateX(0, 50%, 0);
        opacity: .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: .8;
    }100%{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* right --> left */
.appear-right-left::before{
    animation: appear-right-left ease .5s forwards;
    -webkit-animation: appear-right-left ease .5s forwards;
    transform: translate3d(100%, 0, 0);
}

@keyframes appear-right-left{
    0%{
        transform: translate(70%, 0, 0);
    }50%{
        transform: translateX(50%, 0, 0);
        opacity: .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: .8;
    }100%{
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}

/* left - right */
.appear-left-right::before{
    animation: appear-left-right ease .5s forwards;
    -webkit-animation: appear-left-right ease .5s forwards;
    transform: translate3d(-100%, 0, 0);
}

@keyframes appear-left-right{
    0%{
        transform: translate(-70%, 0, 0);
    }50%{
        transform: translateX(-50%, 0, 0);
        opacity: .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: .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 .5s forwards;
    -webkit-animation: disappear-top-bottom ease .5s forwards;
    transform: translate3d(0, 0, 0);
}

@keyframes disappear-top-bottom{
    0%{
        transform: translate(0, 50%, 0);
    }50%{
        transform: translateX(0, 70%, 0);
        opacity: .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: .5;
    }100%{
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
}

/* bottom --> top */
.disappear-bottom-top::before{
    animation: disappear-bottom-top ease .5s forwards;
    -webkit-animation: disappear-bottom-top ease .5s forwards;
    transform: translate3d(0, 0, 0);
}

@keyframes disappear-bottom-top{
    0%{
        transform: translate(0, -50%, 0);
    }50%{
        transform: translateX(0, -70%, 0);
        opacity: .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: .8;
    }100%{
        transform: translate3d(0, -100%, 0);
        opacity: 0;
    }
}

/* right --> left */
.disappear-right-left::before{
    animation: disappear-right-left ease .5s forwards;
    -webkit-animation: disappear-right-left ease .5s forwards;
    transform: translate3d(0, 0, 0);
}

@keyframes disappear-right-left{
    0%{
        transform: translate(50%, 0, 0);
    }50%{
        transform: translateX(70%, 0, 0);
        opacity: .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: .8;
    }100%{
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}

/* left - right */
.disappear-left-right::before{
    animation: disappear-left-right ease .5s forwards;
    -webkit-animation: disappear-left-right ease .5s forwards;
    transform: translate3d(0, 0, 0);
}

@keyframes disappear-left-right{
    0%{
        transform: translate(50%, 0, 0);
    }50%{
        transform: translateX(70%, 0, 0);
        opacity: .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: .8;
    }100%{
        transform: translate3d(100%, 0, 0);
        opacity: 0;
    }
}