/* рождественские эффекты */

@keyframes sway {
    25% { transform: translateX(-50px) rotate(90deg); }
    50% { transform: translateX(0) rotate(180deg); }
    75% { transform: translateX(50px) rotate(270deg); }
    100% { transform: translateX(0) rotate(360deg); }
}

@keyframes fall {
    0% { top: -10vh; }
    100% { top: 105vh; }
}

/* снежинки */
#snowflakes {
    position: fixed;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    width: 100%;
    text-align: left;
    z-index: 9999;
    contain: strict;
    will-change: transform;
}

#snowflakes i {
    display: block;
    position: absolute;
    height: 16px;
    width: 16px;
    top: -10vh;
    border-radius: 50%;
    animation: fall 3s linear 2s infinite, sway 3s linear 2s infinite;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, #fff 40%, #fff 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, rgba(255, 255, 255, 0) 40%, #fff 40%, #fff 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(45deg, rgba(255, 255, 255, 0) 43%, #fff 43%, #fff 57%, rgba(255, 255, 255, 0) 57%), linear-gradient(135deg, rgba(255, 255, 255, 0) 43%, #fff 43%, #fff 57%, rgba(255, 255, 255, 0) 57%);
    will-change: transform, top;
    contain: layout style;
}

.snow-alternate #snowflakes i {
    background: #fff;
    box-shadow: 0 0 3px #fff;
    height: 8px;
    width: 8px;
}

#snowflakes i:nth-of-type(5n) { left: 25%; }
#snowflakes i:nth-of-type(5n + 1) { left: 50%; }
#snowflakes i:nth-of-type(5n + 2) { left: 75%; }
#snowflakes i:nth-of-type(5n + 3) { left: 0%; }
#snowflakes i:nth-of-type(5n + 4) { left: 100%; }

#snowflakes i:nth-of-type(3n) {
    height: 30px;
    width: 30px;
    transform-origin: right -30px;
}

.snow-alternate #snowflakes i:nth-of-type(3n) {
    width: 12px;
    height: 12px;
    opacity: .9;
}

#snowflakes i:nth-of-type(3n+1) {
    height: 24px;
    width: 24px;
    transform-origin: left -30px;
}

.snow-alternate #snowflakes i:nth-of-type(3n + 1) {
    width: 8px;
    height: 8px;
    opacity: .8;
}

#snowflakes i:nth-of-type(3n+2) {
    height: 10px;
    width: 10px;
    transform-origin: -30px 0;
}

.snow-alternate #snowflakes i:nth-of-type(3n + 2) {
    width: 4px;
    height: 4px;
    opacity: .6;
}

#snowflakes i:nth-of-type(4n) { animation-duration: 6s, 5s; transform-origin: left -20px; }
#snowflakes i:nth-of-type(4n+1) { animation-duration: 5s, 4s; transform-origin: 10px -20px; }
#snowflakes i:nth-of-type(4n+2) { animation-duration: 3s, 2s; transform-origin: right -20px; }
#snowflakes i:nth-of-type(4n+3) { animation-duration: 4s, 4s; transform-origin: right -20px; }

.slow-snow #snowflakes i:nth-of-type(4n + 0) { animation-duration: 9s, 6s; }
.slow-snow #snowflakes i:nth-of-type(4n + 1) { animation-duration: 11s, 5s; }
.slow-snow #snowflakes i:nth-of-type(4n + 2) { animation-duration: 13s, 4s; }
.slow-snow #snowflakes i:nth-of-type(4n + 3) { animation-duration: 15s, 9s; }

.fast-snow #snowflakes i:nth-of-type(4n + 0) { animation-duration: 2s, 1s; }
.fast-snow #snowflakes i:nth-of-type(4n + 1) { animation-duration: 3s, 2.5s; }
.fast-snow #snowflakes i:nth-of-type(4n + 2) { animation-duration: 2.5s, 2s; }
.fast-snow #snowflakes i:nth-of-type(4n + 3) { animation-duration: 1.5s, .5s; }

#snowflakes i:nth-of-type(7n) { animation-delay: 1.3s, 0.5s; }
#snowflakes i:nth-of-type(7n+1) { animation-delay: 0.5s, 0.3s; }
#snowflakes i:nth-of-type(7n+2) { animation-delay: 1.9s, 1s; }
#snowflakes i:nth-of-type(7n+3) { animation-delay: 1s, 0.5s; }
#snowflakes i:nth-of-type(7n+4) { animation-delay: 1.8s, 0.8s; }
#snowflakes i:nth-of-type(7n+5) { animation-delay: 1.1s, 0.3s; }
#snowflakes i:nth-of-type(7n+6) { animation-delay: 1.9s, 0.1s; }

#snowflakes i:nth-of-type(5n) { animation-timing-function: ease-in-out, ease-in-out; }
#snowflakes i:nth-of-type(5n+1) { animation-timing-function: ease-out, ease-in-out; }
#snowflakes i:nth-of-type(5n+2) { animation-timing-function: ease, ease-in-out; }
#snowflakes i:nth-of-type(5n+3) { animation-timing-function: ease-in, ease-in-out; }
#snowflakes i:nth-of-type(5n+4) { animation-timing-function: linear, ease-in-out; }
#snowflakes i:nth-of-type(11n) { animation-timing-function: cubic-bezier(0.2, 0.3, 0.8, 0.9), ease-in-out; }

/* украшения */
.has-christmas-decoration {
    overflow: visible !important;
}

/* исключение для sticky элементов */
.has-christmas-decoration:not([style*="sticky"]):not(.sticky):not(.mn-sticky-top) {
    position: relative;
}

.mn-card.has-christmas-decoration > *:not(.christmas-decoration) {
    border-radius: inherit;
}

.mn-card.has-christmas-decoration img {
    border-radius: 8px 8px 0 0;
}

.mn-card.has-christmas-decoration .article-simple,
.mn-card.has-christmas-decoration .advertising {
    overflow: hidden;
    border-radius: inherit;
}

.christmas-decoration {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background-image: url('../img/christmas/xmas-frame.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    pointer-events: none;
    z-index: 100;
}

.mn-header-image .christmas-decoration {
    width: 120px;
    height: 120px;
    top: -30px;
    left: -30px;
}

.single-post .christmas-decoration {
    width: 100px;
    height: 100px;
    top: -25px;
    left: -25px;
}

.mn-card .christmas-decoration {
    width: 60px;
    height: 60px;
    top: -15px;
    left: -15px;
}

.mn-single-five-news-header.has-christmas-decoration {
    display: inline-block;
}

.mn-single-five-news-header .christmas-decoration {
    width: 50px;
    height: 50px;
    top: -12px;
    left: -25px;
}