html,body{margin:0;height: 100%;}
body{background:url(img/eagle.jpg) center center no-repeat;background-size: cover;}
.wrap{width: 1202px;margin:0 auto;}
.tc{margin-top: 100px;text-align: center;}

.menu{display: inline-block;background-color: rgba(34,34,34,.75);position: relative;}
.menu span{display: inline-block;color: #fff;margin: 8px;text-align: center;border-radius: 3px;padding: 8px;background-color: rgba(242,242,242,.15);cursor: pointer;}
.menu span:hover{background-color: rgba(242,242,242,.3);}
.menu span.active{background-color: rgba(255,0,0,.6);}

.fader{-webkit-transition: opacity 1s ease-out;transition: opacity 1s ease-out;opacity: 0;}

.mask{position: absolute;width: 100%;height: 100%;left: 0;top:0;overflow: hidden;}
.mask.active{opacity: 1;}
.mask_snow{}






.snow_drifter{background-image: url(img/snow_drifter.png);}

.snow_dom_slice {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 600px
}
.snow_fall {
    -webkit-transform-origin: 0% 0%;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    transform-origin: 0% 0%;
    animation-timing-function: linear;
    animation-iteration-count: infinite
}

.snow_01 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 50s;
    animation-duration: 50s;
    height: 100%;
    -webkit-animation-name: snow_falling_fore;
    animation-name: snow_falling_fore;
    top: -100%
}

.snow_02 {
    -webkit-animation-delay: 25s;
    animation-delay: 25s;
    -webkit-animation-duration: 50s;
    animation-duration: 50s;
    -webkit-animation-name: snow_falling_fore;
    animation-name: snow_falling_fore;
    top: -100%;
    height: 100%
}

.snow_03 {
    -webkit-animation-delay: 0s;
    -webkit-animation-duration: 70s;
    animation-delay: 0s;
    animation-duration: 70s;
    opacity: .5;
    -webkit-animation-name: snow_falling_mid;
    animation-name: snow_falling_mid;
    top: -100%;
    height: 100%
}

.snow_04 {
    -webkit-animation-delay: 35s;
    -webkit-animation-duration: 70s;
    animation-delay: 35s;
    animation-duration: 70s;
    opacity: .5;
    -webkit-animation-name: snow_falling_mid;
    animation-name: snow_falling_mid;
    top: -100%;
    height: 100%
}

.snow_drifter {
    width: 100%;
    height: 100%;
    background-repeat: repeat
}

.drift_01 {
    background-position: 10% 20%
}

.drift_02 {
    background-position: 40% 60%
}

.drift_03 {
    background-position: 90% 10%
}

.drift_04 {
    background-position: 50% 15%
}

@-webkit-keyframes snow_falling_fore {
    0% {
        top: -100%;
        opacity: 0
    }

    1% {
        top: -100%;
        opacity: 1
    }

    99.8% {
        top: 100%;
        opacity: 1
    }

    99.9% {
        opacity: 0
    }

    100% {
        top: -100%;
        opacity: 0
    }
}

@keyframes snow_falling_fore {
    0% {
        top: -100%;
        opacity: 0
    }

    1% {
        top: -100%;
        opacity: 1
    }

    99.8% {
        top: 100%;
        opacity: 1
    }

    99.9% {
        opacity: 0
    }

    100% {
        top: -100%;
        opacity: 0
    }
}

@-webkit-keyframes snow_falling_mid {
    0% {
        top: -100%;
        opacity: 0
    }

    1% {
        top: -100%;
        opacity: 1
    }

    99.8% {
        top: 100%;
        opacity: 1
    }

    99.9% {
        opacity: 0
    }

    100% {
        top: -100%;
        opacity: 0
    }
}

@keyframes snow_falling_mid {
    0% {
        top: -100%;
        opacity: 0
    }

    1% {
        top: -100%;
        opacity: 1
    }

    99.8% {
        top: 100%;
        opacity: 1
    }

    99.9% {
        opacity: 0
    }

    100% {
        top: -100%;
        opacity: 0
    }
}