/* Code CSS chutes de neige */

/* xmas.css snowfall */
html:after { content:''; position:absolute; z-index:-1; top:0; left:0; bottom:0; right:0;
        background-image:url(../img/snow1.png), url(../img/snow2.png), url(../img/snow3.png);
        -webkit-animation:snow 10s linear infinite; animation:snow 10s linear infinite;
        }
@keyframes snow {
        0% { background-position:0 0, 0 0, 0 0 }
        50% { background-position:500px 500px, 100px 200px, -100px 150px }
        100% { background-position:500px 1000px, 0 400px, 0 300px }
        }
@-webkit-keyframes snow {
        0% { background-position:0 0, 0 0, 0 0 }
        50% { background-position:500px 500px, 100px 200px, -100px 150px }
        100% { background-position:500px 1000px, 0 400px, 0 300px }
        }

/* xmas fairy lights */
.lights { position:absolute; top:-1.25em; z-index:1; width:100%; margin:-15px 0 0 0; padding:0;text-align:center; white-space:nowrap; overflow:hidden }
.lights li { display:inline-block; position:relative; width:12px; height:28px; margin:20px; background:#ff0; box-shadow:0 5px 24px 3px #df0; border-radius:50%;
        -webkit-animation:flash-1 2s both infinite; animation:flash-1 2s both infinite
        }
.lights li:nth-child(2n+1) { background:cyan; box-shadow:0 5px 24px 3px cyan;
        -webkit-animation:flash-2 0.4s both infinite; animation:flash-2 0.4s both infinite
        }
.lights li:nth-child(4n+2) { background:#f70094; box-shadow:0 5px 24px 3px #f70094;
        -webkit-animation:flash-3 1.1s both infinite; animation:flash-3 1.1s both infinite
        }
.lights li:nth-child(odd) { -webkit-animation-duration:1.8s; animation-duration:1.8s }
.lights li:nth-child(3n+1) { -webkit-animation-duration:1.4s; animation-duration:1.4s }
.lights li:before { content:""; position:absolute; top:-5px; left:1px; width:10px; height:9px; background:#222; border-radius:3px }
.lights li:after { content:""; position:absolute; top:-14px; left:9px; width:52px; height:19px; border-bottom:solid #222 2px; border-radius:50% }
.lights li:first-child { margin-left:-10px }
@-webkit-keyframes flash-1 {
        0%, 100% { background:#ff0; box-shadow:0 5px 24px 3px #df0 }
        50% { background:rgba(255,255,0,0.4); box-shadow:0 5px 24px 3px rgba(0,247,165,0.2) }
        }
@keyframes flash-1 {
        0%, 100% { background:#ff0; box-shadow:0 5px 24px 3px #df0 }
        50% { background:rgba(255,255,0,0.4); box-shadow:0 5px 24px 3px rgba(0,247,165,0.2) }
        }
@-webkit-keyframes flash-2 {
        0%, 100% { background:cyan; box-shadow:0 5px 24px 3px cyan }
        50% { background:rgba(0,255,255,0.4); box-shadow:0 5px 24px 3px rgba(0,255,255,0.2) }
        }
@keyframes flash-2 {
        0%, 100% { background:cyan; box-shadow:0 5px 24px 3px cyan }
        50% { background:rgba(0,255,255,0.4); box-shadow:0 5px 24px 3px rgba(0,255,255,0.2) }
        }
@-webkit-keyframes flash-3 {
        0%, 100% { background:#f70094; box-shadow:0 5px 24px 3px #f70094 }
        50% { background:rgba(247,0,148,0.4); box-shadow:0 5px 24px 3px rgba(247,0,148,0.2) }
        }
@keyframes flash-3 {
        0%, 100% { background:#f70094; box-shadow:0 5px 24px 3px #f70094 }
        50% { background:rgba(247,0,148,0.4); box-shadow:0 5px 24px 3px rgba(247,0,148,0.2) }
        }