#xmas {

    position: absolute;

    left: 50%;

    top: 50%;

    margin-left: -400px;

    margin-top: -300px;

}

#dark {

    position: absolute;

    background: url(dark.jpg) no-repeat;

    width: 800px;

    height: 600px;

    -webkit-transition: all 2s ease 2s;

    -moz-transition: all 2s ease 2s;

    -o-transition: all 2s ease 2s;

    -ms-transition: all 2s ease 2s;

    transition: all 2s ease 2s;

}

#dark.animate {

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

}

#light {

    position: absolute;

    background: url(img/light.jpg) no-repeat;

    width: 800px;

    height: 600px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

}

#light.animate {

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

}

#particles {

    position: absolute;

    width: 800px;

    height: 600px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

}

#particles.animate {

    background: url(img/particles.gif) no-repeat;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

}

/*======================================================================*/

/* greeting text

/*======================================================================*/

#greeting {

    font-family: Comic Sans, Comic Sans MS, cursive;

    font-size: 18px;

    line-height: 24px;

    width: 254px;

    position: absolute;

    top: 30px;

    left: 512px;

    color: white;

    text-align: center;

    pointer-events: none;

    cursor: default;

    text-shadow: 0px 0px 5px yellow, 0px 0px 20px yellow, 0px 0px 40px yellow;

}

#msg {

    position: absolute;

    top: 100px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

    -webkit-transition: all 3.5s ease 3s;

    -moz-transition: all 3.5s ease 3s;

    -o-transition: all 3.5s ease 3s;

    -ms-transition: all 3.5s ease 3s;

    transition: all 3.5s ease 3s;

}

#msg.animate {

    top: 0;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

}

#merry {

    position: absolute;

    color: red;

    width: 254px;

    top: 150px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

    text-shadow: 0px 0px 1px orange;

    -webkit-transition: all 3s ease 3.7s;

    -moz-transition: all 3s ease 3.7s;

    -o-transition: all 3s ease 3.7s;

    -ms-transition: all 3s ease 3.7s;

    transition: all 3s ease 3.7s;

}

#merry.animate {

    top: 75px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

    filter: alpha(opacity=100);

    opacity: 1;

}

/*======================================================================*/

/* play button

/*======================================================================*/

#play {

    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 16px;

    line-height: 22px;

    font-weight: bold;

    height: 20px;

    width: 100px;

    color: #F2DB6A;

    position: absolute;

    left: 50%;

    top: 50%;

    padding: 5px;

    margin-left: -50px;

    margin-top: -10px;

    cursor: pointer;

    text-align: center;

    border-radius: 5px;

    border: 1px solid rgba(255, 168, 76, 0.5); /*gradient background*/

    background: rgb(255,168,76); /* Old browsers */

    background: -webkit-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(170,90,10,1) 100%);

    background: -moz-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(170,90,10,1) 100%);

    background: -o-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(170,90,10,1) 100%);

    background: -ms-linear-gradient(top, rgba(255,168,76,1) 0%, rgba(170,90,10,1) 100%);

    background: linear-gradient(top, rgba(255,168,76,1) 0%, rgba(170,90,10,1) 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#aa5a0a',GradientType=0 ); /* IE6-9 */

    -webkit-box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.2), 2px 4px 5px rgba(0, 0, 0, 0.5);

    box-shadow: inset 0px 0px 4px 2px rgba(0,0,0,0.2), 2px 4px 5px rgba(0, 0, 0, 0.5);

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), -1px -1px 2px rgba(255, 255, 255, 0.7);

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    transition: all 0.3s ease;

}

#play:hover {

    color: #542905; /*AA5A0A*/

    /*gradient background*/

    background: rgb(170,90,10); /* Old browsers */

    background: -webkit-linear-gradient(top, rgba(170,90,10,1) 0%, rgba(255,168,76,1) 100%);

    background: -moz-linear-gradient(top, rgba(170,90,10,1) 0%, rgba(255,168,76,1) 100%);

    background: -o-linear-gradient(top, rgba(170,90,10,1) 0%, rgba(255,168,76,1) 100%);

    background: -ms-linear-gradient(top, rgba(170,90,10,1) 0%, rgba(255,168,76,1) 100%);

    background: linear-gradient(top, rgba(170,90,10,1) 0%, rgba(255,168,76,1) 100%); /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aa5a0a', endColorstr='#ffa84c',GradientType=0 ); /* IE6-9 */

    -webkit-box-shadow: 0px 0px 30px rgba(244, 232, 0, 0.5);

    box-shadow: 0px 0px 30px rgba(244, 232, 0, 0.5);

    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0), -1px -1px 2px rgba(255, 255, 255, 0);

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    -ms-transition: all 0.3s ease;

    transition: all 0.3s ease;

}

#play.hide {

    pointer-events: none;

    cursor: default;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

}

/*======================================================================*/

/* fade below play button

/*======================================================================*/

#fade {

    position: absolute;

    background-color: #000;

    width: 800px;

    height: 600px;

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

    filter: alpha(opacity=60);

    opacity: 0.6;

    -webkit-transition: all 0.6s ease;

    -moz-transition: all 0.6s ease;

    -o-transition: all 0.6s ease;

    -ms-transition: all 0.6s ease;

    transition: all 0.6s ease;

}

#fade.animate {

    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

    filter: alpha(opacity=0);

    opacity: 0;

}

/*======================================================================*/

/* =responsiveness

/*======================================================================*/

@media (min-width: 686px) and (max-width: 818px) {

    #xmas {

        width: 668px;

        height: 510px;

        margin-left: -334px;

        margin-top: -255px;

    }

    #dark {

        width: 668px;

        height: 510px;

        -webkit-background-size: 668px 510px;

        -moz-background-size: 668px 510px;

        background-size: 668px 510px;

    }

    #light {

        width: 668px;

        height: 510px;

        -webkit-background-size: 668px 510px;

        -moz-background-size: 668px 510px;

        background-size: 668px 510px;

    }

    #particles {

        width: 668px;

        height: 510px;

    }

    #particles.animate {

        -webkit-background-size: 668px 510px;

        -moz-background-size: 668px 510px;

        background-size: 668px 510px;

    }

    #greeting {

        top: 20px;

        left: 406px;

    }

    #merry {

        width: 254px;

        top: 150px;

    }

    #fade {

        width: 668px;

        height: 510px;

    }

}





@media (min-width: 481px) and (max-width: 685px) {

    #xmas {

        width: 474px;

        height: 356px;

        margin-left: -237px;

        margin-top: -178px;

    }

    #dark {

        width: 474px;

        height: 356px;

        -webkit-background-size: 474px 356px;

        -moz-background-size: 474px 356px;

        background-size: 474px 356px;

    }

    #light {

        width: 474px;

        height: 356px;

        -webkit-background-size: 474px 356px;

        -moz-background-size: 474px 356px;

        background-size: 474px 356px;

    }

    #particles {

        width: 474px;

        height: 356px;

    }

    #particles.animate {

        -webkit-background-size: 474px 356px;

        -moz-background-size: 474px 356px;

        background-size: 474px 356px;

    }

    #greeting {

        width: 180px;

        top: 10px;

        left: 282px;

        font-size: 14px;

        line-height: 18px;

    }

    #merry {

        width: 180px;

        top: 150px;

    }

    #merry.animate {

        top: 62px;

    }

    #fade {

        width: 474px;

        height: 356px;

    }

}





@media (max-width: 480px) {

    #xmas {

        width: 312px;

        height: 234px;

        margin-left: -152px;

        margin-top: -117px;

    }

    #dark {

        width: 312px;

        height: 234px;

        -webkit-background-size: 312px 234px;

        -moz-background-size: 312px 234px;

        background-size: 312px 234px;

    }

    #light {

        width: 312px;

        height: 234px;

        -webkit-background-size: 312px 234px;

        -moz-background-size: 312px 234px;

        background-size: 312px 234px;

    }

    #particles {

        width: 312px;

        height: 234px;

    }

    #particles.animate {

        -webkit-background-size: 312px 234px;

        -moz-background-size: 312px 234px;

        background-size: 312px 234px;

    }

    #greeting {

        width: 180px;

        top: 0;

        left: 100px;

        font-size: 12px;

        line-height: 14px;

    }

    #msg {

        top: 50px;

    }

    #merry {

        width: 180px;

        top: 90px;

    }

    #merry.animate {

        top: 50px;

    }

    #fade {

        width: 312px;

        height: 234px;

    }

}