@charset "utf-8";

#xms_banner {
    text-align: center;
    margin: 0 0 25px 0;
    font-size: 29px;
    padding: 15px;
    box-sizing: border-box;
    font-family: 'Roboto Slab';
    font-weight: 300;
    color: #000;
    border: 1px dashed #7fb17d;
    border-radius: 16px;
    background-color: #f0f7f1;
    background-image: radial-gradient(#ffffff 20%, transparent 20%),
            radial-gradient(#ffffff 20%, transparent 20%);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    box-shadow: rgb(0 0 0 / 14%) 0px 25px 20px -20px;
    position: relative;
}

#xms_banner h2 {
    font-weight: 300;
    font-size: 0.9em;
    margin: 10px;
    color: #764037;
}

#xms_banner p {
    font-size: 0.6em;
}

.coupon_xmas {
background: #fff; border: 1px dashed #d10000; color: #d10000; padding: 4px 12px; border-radius:8px; font-weight: 200;
}

@media (max-width: 500px) {
.coupon_xmas {
    margin:5px auto 5px auto;
    display:block;
    width:100px
}
}

.snowflake {
            position: absolute;
            top: -10px;
            background-color: white;
            border-radius: 50%;
            opacity: 0.8;
            pointer-events: none;
            animation: snowfall linear infinite;
        }

        @keyframes snowfall {
            0% {
                transform: translateY(-10px) translateX(0px);
                opacity: 0.9;
            }
            100% {
                transform: translateY(650px) translateX(20px); /* Falls down 650px */
                opacity: 0; /* Fades out at bottom */
            }
        }

        /* Creating different sizes and speeds for natural look */
        .snowflake:nth-child(1) { left: 10%; width: 5px; height: 5px; animation-duration: 7s; animation-delay: 0s; }
        .snowflake:nth-child(2) { left: 20%; width: 8px; height: 8px; animation-duration: 10s; animation-delay: 2s; }
        .snowflake:nth-child(3) { left: 35%; width: 4px; height: 4px; animation-duration: 5s; animation-delay: 4s; }
        .snowflake:nth-child(4) { left: 50%; width: 6px; height: 6px; animation-duration: 8s; animation-delay: 1s; }
        .snowflake:nth-child(5) { left: 65%; width: 9px; height: 9px; animation-duration: 12s; animation-delay: 3s; }
        .snowflake:nth-child(6) { left: 80%; width: 5px; height: 5px; animation-duration: 6s; animation-delay: 5s; }
        .snowflake:nth-child(7) { left: 95%; width: 7px; height: 7px; animation-duration: 9s; animation-delay: 2s; }