html.grayscale-animate-in body > *{
    -webkit-animation-name: grayIn;
    animation-name: grayIn;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

html.grayscale-animate-out body > *{
    -webkit-animation-name: grayOut;
    animation-name: grayOut;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes grayIn {
    from { -webkit-filter: grayscale(0); filter: grayscale(0); }
    to { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
}

@keyframes grayIn {
    from { -webkit-filter: grayscale(0); filter: grayscale(0); }
    to { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
}

@-webkit-keyframes grayOut {
    from { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    to { -webkit-filter: grayscale(0); filter: grayscale(0); }
}

@keyframes grayOut {
    from { -webkit-filter: grayscale(100%); filter: grayscale(100%); }
    to { -webkit-filter: grayscale(0); filter: grayscale(0); }
}

.mfp-king-fade.mfp-bg {
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

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

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

.mfp-king-fade.mfp-wrap .mfp-content {
    opacity: 0;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}

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

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