/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background-color: transparent;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #000;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: bold;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}
/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  select {
    background: #fff !important;
  }
  .navbar {
    display: none;
  }
  .btn > .caret,
  .dropup > .btn > .caret {
    border-top-color: #000 !important;
  }
  .label {
    border: 1px solid #000;
  }
  .table {
    border-collapse: collapse !important;
  }
  .table td,
  .table th {
    background-color: #fff !important;
  }
  .table-bordered th,
  .table-bordered td {
    border: 1px solid #ddd !important;
  }
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 10px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  background-color: #ffffff;
}
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
a {
  color: #026cb6;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #038ae8;
  text-decoration: underline;
}
a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
figure {
  margin: 0;
}


#screen-warning{
		position:absolute;
		width:100%;
		height:100%;
		background-color:#fff;
		padding:20px 40px;
		text-align:center;
		color:#c7081b;
}
.viewer{
		display:none;
}

@media screen and (min-width: 900px) {
    #screen-warning{
        display:none;
    }
		.viewer{
			display:block;		
		}
    
}


html{
height:100%;	
}
body{
background-color:#000;	
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.viewer{
width:1280px;
height:900px;
overflow:hidden;
position:relative;
margin:0 auto;
transform-origin:top left;
}
#reload-page{
	display:none;
	text-align:center;
	color:#444;
	padding-top:200px;
	background-color:#450513;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:999;
}
#reload-page .btn{
		border:1px solid #555;
	background-color:#eee;
	padding:8px 16px;
	color:#450513;
	border-radius:4px;
	box-shadow:1px 1px 2px 2px rgba(10,10,10,.6);
}

#loading-page{
	background-color:#450513;
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:999;
}
#loading-page > div{
	display:none;
}
.loading-message{
	margin-top:200px;
	text-align:center;
	font-size:18px;
	font-family:trebuchet;
	font-style:italic;
	letter-spacing:4px;
	color:#fff;
}
.bulbs{
	position:absolute;
	left:340px;
	top:200px;
	height:500px;
	width:600px;
}
.bulb{
	position:absolute;
	top:-50px;
	left:-100px;
	background-color:red;
	background:radial-gradient(white,transparent);
	height:40px;
	width:25px;
	border-radius:50%;
	transform:rotateZ(20deg);
	box-shadow:0 0 4px 2px rgba(255,255,255,.3);
}
.bulb:after{
    content: "";
    width: 13px;
    height: 14px;
    position: absolute;
    bottom: -11px;
    left: 6px;
    background-color: #444;
	background:linear-gradient(to bottom, #444, #444 50%, #555 50%, #555);
	background-size:100% 2px;
	border:2px solid #444;
    border-radius: 2px 2px 5px 5px;	
}
.room-slider{
position:absolute;
left:0;
display:flex;
width:2560px;
height:900px;
transform:translateX(0);
transition:transform 1s;
}
.room{
position:relative;
width:1280px;
height:900px;	
}
.chapel{
position:relative;	
background-color:tan;
width:1280px;
height:900px;	
}
#mailmobile{
position:absolute;
top:400px;
left:-200px;
width:415px;
height:390px;
transform:translateX(-200px) translateY(-30px);
transition:transform 3s linear, width 3s linear, height 3s linear;
}
#mailmobile.start{
width:217px;
height:200px;
transform:translateX(550px) translateY(-40px);
}
#mail-table{
position:absolute;
bottom:-29px;
left:-38px;
}
.the-mail{
position:absolute;
bottom:170px;
left:-8px;
transform:translateX(0);
transform-origin:bottom right;
transition:transform 1.5s;
}
.the-mail.start{
transform:translateX(-200px);
}
#cozy-card{
	display:none;
	position:absolute;
	bottom:-550px;
	left:-20px;
	width:500px;
	height:500px;
	transform:translateY(240px) rotateZ(15deg) scale(1.3) translateX(70px);
	transform-origin:center center;
	transition:transform 18s ease-in;
}
#cozy-card.start{
	transform:translateY(-540px) rotateZ(-10deg) scale(.8) translateX(-30px);
}
#card-left{
	position:absolute;
	top:0;
	left:0;
	width:250px;
	height:500px;
	padding-top:110px;
	text-align:center;
	transform-origin: right center;
    transform: rotateY(9deg) skewY(8deg) translateY(-70px);	
	transition:transform 1s ease-in;	
	box-shadow: -9px 0 15px 10px rgba(20,20,20, .2);
}
#card-right{
	position:absolute;
	top:0;
	left:250px;
	width:250px;
	height:500px;
	border-left:1px solid #ddd;
	text-align:center;
	padding-top:30px;
	background-color:#fff;
	transform-origin: left center;
    transform: rotateY(-8deg) skewY(-8deg) translateY(-70px);	
	transition:transform 1s ease-in;
	box-shadow: 9px 0 15px 10px rgba(20,20,20, .2);
}
#card-right p{
	font-size: 20px;
    padding: 2px 10px;
    font-family: monotype corsiva;
}
.start #card-left{
    transform: rotateY(70deg) skewY(20deg) translateY(0px);		
}
.start #card-right{
    transform: rotateY(-70deg) skewY(-20deg) translateY(0px);			
}
#snow-window, #let-it-snow-pane, #let-it-snow-pane-click{
position:absolute;
top:0;
left:0;
width:370px;
height:700px;	
overflow:hidden;	
}
#let-it-snow-pane.darkness{
	background-color:rgba(0,0,0,.4);
}
#let-it-snow-pane-click{
z-index:100;
}
.snow-flakes{
position:absolute;
top:-710px;
left:0;
}
.snow-flakes-slant{
position:absolute;
top:-200px;
left:-740px;
}
.let-it-snow{
position:absolute;
width:40px;
height:40px;
}
.flakes-back{
opacity:.1;
}
#outdoor-lights{
display:none;
position:absolute;
top:344px;
	left:120px;
	height:100px;
	width:210px;
}
#outdoor-lights span{
position:absolute;
height:4px;
width:4px;
border-radius:50%;
background:radial-gradient(white,#ffed73);
box-shadow:0 0 4px 2px rgba(255,231,115,.3);
}
#outdoor-lights span:nth-child(1){
top:68px;
left:6px;
}
#outdoor-lights span:nth-child(2){
top:64px;
left:11px;
}
#outdoor-lights span:nth-child(3){
top:60px;
left:15px;
}
#outdoor-lights span:nth-child(4){
top:56px;
left:19px;
}
#outdoor-lights span:nth-child(5){
top:51px;
left:24px;
}
#outdoor-lights span:nth-child(6){
top:45px;
left:29px;
}
#outdoor-lights span:nth-child(7){
top:40px;
left:35px;
}
#outdoor-lights span:nth-child(8){
top:35px;
left:40px;
}
#outdoor-lights span:nth-child(9){
top:31px;
left:44px;
}
#outdoor-lights span:nth-child(10){
top:35px;
left:51px;
}
#outdoor-lights span:nth-child(11){
top:40px;
left:57px;
}
#outdoor-lights span:nth-child(12){
top:45px;
left:62px;
}
#outdoor-lights span:nth-child(13){
top:50px;
left:67px;
}
#outdoor-lights span:nth-child(14){
top:55px;
left:73px;
}
#outdoor-lights span:nth-child(15){
top:60px;
left:78px;
}
#outdoor-lights span:nth-child(16){
top:64px;
left:83px;
}
#outdoor-lights span:nth-child(17){
top:68px;
left:88px;
}
#outdoor-lights span:nth-child(18){
top:60px;
left:101px;
}
#outdoor-lights span:nth-child(19){
top:56px;
left:106px;
}
#outdoor-lights span:nth-child(20){
top:51px;
left:109px;
}
#outdoor-lights span:nth-child(21){
top:45px;
left:115px;
}
#outdoor-lights span:nth-child(22){
top:41px;
left:119px;
}
#outdoor-lights span:nth-child(23){
top:35px;
left:125px;
}
#outdoor-lights span:nth-child(24){
top:30px;
left:130px;
}
#outdoor-lights span:nth-child(25){
top:26px;
left:134px;
}
#outdoor-lights span:nth-child(26){
top:21px;
left:140px;
}
#outdoor-lights span:nth-child(27){
top:16px;
left:145px;
}
#outdoor-lights span:nth-child(28){
top:11px;
left:149px;
}
#outdoor-lights span:nth-child(29){
top:15px;
left:154px;
}
#outdoor-lights span:nth-child(30){
top:19px;
left:160px;
}
#outdoor-lights span:nth-child(31){
top:24px;
left:165px;
}
#outdoor-lights span:nth-child(32){
top:29px;
left:170px;
}
#outdoor-lights span:nth-child(33){
top:34px;
left:176px;
}
#outdoor-lights span:nth-child(34){
top:40px;
left:182px;
}
#outdoor-lights span:nth-child(35){
top:45px;
left:188px;
}
#outdoor-lights span:nth-child(36){
top:51px;
left:194px;
}
#outdoor-lights span:nth-child(37){
top:56px;
left:199px;
}
#outdoor-lights span:nth-child(38){
top:60px;
left:204px;
}
#clock-face{
position:absolute;
top:251px;
left:813px;
height:34px;
width:34px;	
border-radius:50%;
background-image:url(../imgs/clock-face.png);
background-position:-4px -8px;
background-repeat:no-repeat;
transform:rotateZ(0);
transition:transform 1s ;
}
#clock-face:hover{
transform:rotateZ(720deg);
}
#clock-sec{
position:absolute;
top:251px;
left:830px;
height:15px;
width:1px;
background-color:#555;
transform-origin: center bottom;
}
#clock-min{
position:absolute;
top:254px;
left:827px;
height:12px;
width:6px;
background-color:transparent;
background-image:url(../imgs/minute-hand.png);
transform-origin: center bottom;
}
#clock-hour{
position:absolute;
top:258px;
left:827px;
height:9px;
width:6px;
background-color:transparent;
background-image:url(../imgs/hour-hand.png);
transform-origin:center bottom;
}
#slider-control:checked ~ .room-slider{
transform:translateX(-1200px);	
}
input#slider-control{
display:none;	
}
label[for="slider-control"]{
display:block;
position:absolute;
top:50%;
transform:translateX(1170px);
height:30px;
width:60px;
cursor:pointer;	
z-index:2;
background-color:purple;
transition:transform 1s;
}
#slider-control:checked ~ label{
transform:translateX(-30px);
}
.outside{
position:relative;
}
#village{
position:absolute;
top:0;
left:-141px;
}
#village-night{
position:absolute;
top:-6px;
left:-323px;
}
#mountain{
position:absolute;
top:0px;
left:-114px;
}
.night{
display:none;
}
#bush{
position:absolute;
bottom:197px;
left:-85px;
}
.outside, .inside{
width:1280px;
height:900px;
position:absolute;
top:0;
left:0;
}
.inside{
background-image:url(../imgs/inside2.png);
background-repeat:no-repeat;
}
#smoke{
position:relative;
top:220px;
left:246px;	
}
#deer{
	position:absolute;
	left:-200px;
	top:428px;
	width:200px;
	height:137px;
	background-image:url(../imgs/deer-body.png);
	background-position:bottom left;
	transition:top .4s;
}
#deer-head{
	background-image:url(../imgs/deer-head.png);
	background-position:top right;
	background-repeat:no-repeat;
	width:175px;
	height:130px;	
	margin-top:8px;
	transform:rotateZ(0) translateX(-2px);
	transition:transform 1s ease;
}
#deer.move{
	top:430px;
}
#deer.move #deer-head{
	transform:rotateZ(10deg) translateX(6px);
}
#deer.watch #deer-head{
	transform:rotateZ(-8deg) translateY(-2px);
}
#deer.down{
	top:455px;
}
#deer.down #deer-head{
	transform:rotateZ(68deg) translateY(14px) translateX(2px);
}

#deer-chewing{
position:absolute;
left:283px;
top:431px;
height:101px;
width:98px;
overflow:hidden;
TRANSFORM-ORIGIN:RIGHT BOTTOM;
transform:rotateZ(-90deg);
}
#snow-clump{
position:absolute;
top:-150px;
left:130px;
width:200px;
height:138px;
opacity:.9;	
transform-origin:center center;
}

#train-container{
position:absolute;
    top: 393px;
    left: 624px;
    width: 657px;
    height: 257px;
overflow:hidden;
}
#train-scroller{
position:absolute;
    top: 0;
    left: -464px;
    width: 657px;
    height: 257px;
	
}
#track{
position:absolute;
    top: 594px;
    left: 721px;
}
#train{
position:absolute;
top:168px;
left:130px;
	width:350px;
	height:43px;
}
.left2right #train{
	background-image:url(../imgs/train-right.png);
}
.right2left #train{
	background-image:url(../imgs/train-left.png);
}

#train-cover{
position:absolute;
top:542px;
left:620px;
}
#train-cover-2{
position:absolute;
top:444px;
left:923px;	
}
#jack-box{
position:absolute;
top:12px;
left:205px;
width:50px;
height:180px;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}
#jack{
	opacity:0;
}
.pop #jack{
opacity:1;
}
#box{
position:absolute;
bottom:0;
	height:59px;
	width:52px;
	background-image:url(../imgs/box.png);
}
.pop #box{
	background-image:url(../imgs/box-open.png);
}
#spring{
height:40px;
display:flex;
justify-content:flex-end;
flex-direction:column;
transition:height 1s cubic-bezier(.075,.82,.165,1);
}
.ring{
border: 1px solid #777;
border-radius: 50%;
background-color: rgba(100,100,100,.2);
margin: -7px auto 0;
height: 16px;
width: 16px;
display: block;
transform: scaleY(.7);
}
.grow #spring{
height:170px;
}
.shrink #spring{
transition: height 1s cubic-bezier(.55,.055,.675,.19);
}

#train-tree{
display:none;
position:absolute;
top:154px;
left:188px;
}
#train-presents{
display:none;
position:absolute;
top:160px;
left:210px;
}
#train-pinecones{
display:none;
position:absolute;
top:168px;
left:205px;	
}
#train-gingerbread-house{
display:none;
position:absolute;
top:112px;
left:201px;
}
#train-teddy-bear{
display:none;
position:absolute;
top:138px;
left:342px;
}
 
 
 
#countdown{
position:absolute;
top:397px;
left:1220px;
width:40px;
height:50px;  
text-align:center;

}
#top-sheet{
position:absolute;
bottom:0;
right:0;
width:30px;
height:40px;
border: 1px solid #999;
background-color:#fff;
transform: rotateZ(-2deg);
	transform-origin:top right;
	transition:transform .6s, right 1.6s, bottom 1.3s ease-in;
}
#top-sheet.rip1{
transform:rotateZ(-10deg);
right:-50px;
bottom:-100px;
}
#top-sheet.rip2{
transform:rotateZ(-10deg);
right:-60px;
bottom:-30px;
}
#top-sheet.rip3{
		transition:transform .3s, right 1.6s 4s, bottom 1.3s ease-in 1.2s;
transform:rotateZ(-22deg);
bottom:-80px;
}
#next-sheet{
position:absolute;
bottom:0;
right:0;	
width:30px;
height:40px;
border:1px solid #777;
background-color:#fff;
}
#pad{
position:absolute;
bottom: 0px;
right: 0px;
width:30px;
height:40px;
border:1px solid #777;
background-color:#777;
box-sizing:content-box;
}
.month{
font-size:4px;
padding-top:4px
}
.date{
color:#444;
padding-top:3px;
font-family:courier;	
font-weight:700;
font-size:18px;
}


#man-falling{
position:absolute;
top:-250px;
left:200px;
width:250px;
height:304px;
opacity:.9;	
transform-origin:center center;
}
#blue-chair{
display:none;
position:absolute;
top:321px;
left:216px;
width:436px;
height:401px;
}
#advent-wreath{
position:absolute;
top:507px;
left:598px;
width:158px;
height:153px;
}
#wreath-wall{
position:absolute;
top:110px;
left:850px;
width:150px;
height:142px;	
}
.object-to-appear{
position:absolute;
display:none;
}
#mantle-candle-inner{
position:absolute;	
top:252px;
left:1017px;
}
#mantle-candle-outer{
position:absolute;	
top:252px;
left:1017px;
}
#mantle-candle-garland{
position:absolute;	
top:277px;
left:972px;
}
#tree{
top:88px;
left:233px;
}
#tree-decorated{
top:113px;
left:357px;
}
#lights-on{
left:-21px;
top:20px;
}
#darkness{
position:absolute;
top:0;
left:0;
height:900px;
width:1280px;
background-color:rgba(0,0,0,.3);
}
#mouse-furniture{
position:absolute;
top:762px;
left:578px;	
}
#clock-cloth{
top:273px;
left:769px;
}
#stockings{
top:341px;
left:841px;
}
#card-1, .card-1{
top:597px;
left:1170px;
transform:translateY(0);
		transition:transform 1s ease-out;
}
#card-1.xmas, .card-1.xmas{
top:753px;
left:1202px;
}
#card-2, .card-2{
top:604px;
left:1070px;
transform:translateY(0);
		transition:transform 1s ease-out;
}
#card-2.xmas, .card-2.xmas{
top:602px;
left:1256px;
}
#card-3, .card-3{
top:582px;
left:585px;
	transform:translateY(0);
		transition:transform 1s ease-out;
}
#card-4, .card-4{
top:610px;
left:1220px;
	transform:translateY(0);
		transition:transform 1s ease-out;
}
#card-4.xmas, .card-4.xmas{
top:758px;
left:1142px;
}
#card-5, .card-5{
top:615px;
left:1117px;
	transform:translateY(0);
		transition:transform 1s ease-out;
}
#card-5.xmas, .card-5.xmas{
top:601px;
left:1065px;
}
#card-6, .card-6{
top:594px;
left:654px;
	transform:translateY(0);
		transition:transform 1s ease-out;
}
#card-7, .card-7{
top:543px;
left:736px;
	transform:translateY(0);
		transition:transform 1s ease-out;
}
x.card-start{
	transform:translateY(-50px) !important;
}
#cookies{
top:572px;
left:757px;
}
#window-light{
	display:none;
	position:absolute;
	left:286px;
	top:400px;
}
#window-light.on{
	display:block;
}
#train-crossing{
	position:absolute;
	top:524px;
	left:880px;
}
#train-crossing-light-1{
	display:none;
	position:absolute;
	top:542px;
	left:911px;	
	width:6px;
	height:6px;
	background-color:black;
	border-radius:50%;
	transition:background-color .4s;
	opacity:.6;
}
#train-crossing-light-2{
	display:none;
	position:absolute;
	top:542px;
	left:928px;	
	width:6px;
	height:6px;
	background-color:black;	
	border-radius:50%;
	transition: background-color .4s;
	opacity:.6;
}
#train-crossing-light-1.on, #train-crossing-light-2.on{
	background-color:red;
}





#nativity-empty,#nativity{
top:575px;
left:1071px;
}
#angel{
opacity:0;	
position:absolute;
top:538px;
left:1151px;
transform:translateY(0);
transition:opacity 1.4s,transform 3s;
}
#nativity:hover + #angel{
opacity:1;
transform:translateY(6px);
}
#flame1{
position:absolute;
left:632px;
top:507px;	
}
#nuts{
top:626px;
left:796px;
}
#flame2{
position:absolute;
left:656px;
top:497px;	
}
#flame3{
position:absolute;
left:690px;
top:506px;	
}
#flame4{
position:absolute;
left:705px;
top:504px;	
}
#flame5{
position:absolute;
left:670px;
top:530px;	
}
#fireplace{
position:absolute;
top:444px;
left:849px;
}
#stnicholas{
top:528px;
left:1120px;
}
#poinsettia{
top:685px;
left:590px;
}
#bSanta1{
top:604px;
left:6px;
}
#bSanta2{
top:599px;
left:49px;
}
#bSanta3{
top:593px;
left:85px;
}
#bSanta4{
top:593px;
left:115px;
}
#bSanta5{
top:592px;
left:137px;
}
#bSanta6{
top:591px;
left:154px;
}
#nutcracker{
top:191px;
left:1043px;
transform-origin:bottom center;
}
#snowman-container{
top:0;
left:0;
}
#snowman{
position:absolute;
top:355px;
left:85px;
}
#snowman-arm{
position:absolute;
transform-origin: left bottom;
top:381px;
left:194px;
}
#baby-jesus{
top:602px;
left:335px;
}
.snow-storm-flake{
opacity:.5 !important;
}
#garland{
top:65px;
left:419px;
}
.garland-lights{
top:65px;
left:419px;
}
#present{
top:591px;
left:327px;
}
#snowmobile{
position:absolute;
top:377px;
left:-300px;	
}
#dog{
top:537px;
left:806px;
}
#elf-hat{
top:532px;
left:882px;
}
#santa-sleigh{
top:20px;
left:-10px;	
}
#santa-sleigh > img, #santa-sleigh > div{
position:absolute;
}
.string, .string:after{
position:absolute;
opacity:.6;
width:1px;
background-color:red;
}
#reindeer-1{
left:-20px;	
}
#reindeer-1 + .string{
top:-26px;
left:34px;
height:59px;
}
#reindeer-2{
top:20px;
left:44px;	
}
#reindeer-2 + .string{
top:-20px;
left:101px;
height:80px;
}
#reindeer-3{
top:40px;
left:120px;	
}
#reindeer-3 + .string{
top:-20px;
left:174px;
height:111px;
}
#reindeer-4{
top:60px;
left:186px;	
}
#reindeer-4 + .string{
top:1px;
left:237px;
height:99px;
}
#reindeer-4 + .string:after{
top:0;
left:4px;
height:11px;
width:1px;
content:" ";
transform:rotateZ(-30deg);
}
#santa{
transform:scaleX(.7);
top:60px;
left:260px
}
#santa + .string{
top:34px;
left:311px;
height:37px;
}
#santa + .string:after{
top:-3px;
left:-3px;
height:7px;
width:1px;
content:" ";
transform:rotateZ(77deg);
}

#peace{
top:20px;
left:60px;	
}
#peace > img, #peace > div{
position:absolute;
}
#peace-p{
left:-20px;	
}
#peace-p + .string{
top:-26px;
left:-3px;
height:29px;
}
#peace-e1{
top:20px;
left:44px;	
}
#peace-e1 + .string{
top:-20px;
left:62px;
height:42px;
}
#peace-a{
top:40px;
left:101px;	
}
#peace-a + .string{
top:-20px;
left:120px;
height:63px;
}
#peace-c{
top:55px;
left:156px;	
}
#peace-c + .string{
top:3px;
left:176px;
height:53px;
}
#peace-c + .string:after{
top:0;
left:4px;
height:11px;
width:1px;
content:" ";
transform:rotateZ(-30deg);
}
#peace-e2{
top:74px;
left:208px;	
}
#peace-e2 + .string{
top:29px;
left:228px;
height:47px;
}
#peace-e2 + .string:after{
top:-3px;
left:-3px;
height:7px;
width:1px;
content:" ";
transform:rotateZ(77deg);
}

#love{
top:20px;
left:60px;	
}
#love > img, #love > div{
position:absolute;
}
#love-l{
top:20px;
left:44px;	
}
#love-l + .string{
top:-20px;
left:60px;
height:42px;
}
#love-o{
top:40px;
left:101px;	
}
#love-o + .string{
top:-20px;
left:120px;
height:61px;
}
#love-v{
top:55px;
left:156px;	
}
#love-v + .string{
top:3px;
left:177px;
height:85px;
}
#love-v + .string:after{
top:0;
left:4px;
height:11px;
width:1px;
content:" ";
transform:rotateZ(-30deg);
}
#love-e{
top:74px;
left:208px;	
}
#love-e + .string{
top:29px;
left:226px;
height:47px;
}
#love-e + .string:after{
top:-3px;
left:-3px;
height:7px;
width:1px;
content:" ";
transform:rotateZ(77deg);
}

#joy{
top:20px;
left:60px;	
}
#joy > img, #joy > div{
position:absolute;
}
#joy-j{
top:20px;
left:44px;	
}
#joy-j + .string{
top:-20px;
left:65px;
height:43px;
}
#joy-o{
top:40px;
left:101px;	
}
#joy-o + .string{
top:-20px;
left:120px;
height:61px;
}
#joy-y{
top:55px;
left:156px;	
}
#joy-y + .string{
top:3px;
left:178px;
height:75px;
}
#joy-y + .string:after{
top:0;
left:4px;
height:11px;
width:1px;
content:" ";
transform:rotateZ(-30deg);
}
#message{
	position:absolute;
	top:0;
	left:0;
	width:360px;
	height:80px;
	background-color:#fff;
	z-index:9;
	padding:20px;
	opacity:0;
	font-size:14px;
	border:1px solid #f34848;
	border-bottom-width:6px;
	transform:translate(700px,40px) ;
	transition:transform 6s linear,opacity 3s;
}
#message:after{
	content:"X";
	position:absolute;
	top:4px;
	right:8px;
	border:1px solid #999;
	border-radius:50%;
	height:16px;
	width:16px;
	text-align:center;
	line-height:1;
	cursor:pointer;
}
#message.show{
	transform:translate(920px,180px);
	opacity:.9;
}
.about{
	position:absolute;
	top:-4px;
	right:19px;
	z-index:88;
    border-radius: 0 0 3px 3px;
    color: #333;
    font-size: 12px;
    border: 1px solid #bbb;
    text-align: center;
    box-shadow: 1px 3px 2px #777;
    padding-top: 5px;	
	background-color:lightyellow;
}
#about-snippet{
	display:none;
	background-color:#fafafa;
	border:4px solid #fff;
	padding:30px 50px;
	font-family:arial;
	font-size:14px;
	position:absolute;
	left:420px;
	top:40px;
	width:700px;
	max-height:800px;
	overflow-y:auto;
}
.close-about{
    position: absolute;
    right: 10px;
    top: 6px;
    line-height: 22px;
    height: 24px;
    width: 24px;
    border: 1px solid #222;
    border-radius: 50%;
    background-color: #444;
    color: #fff;
    text-align: center;
    font-family: arial;
}
.center-text{
	text-align:center;
}
.about-title{
	padding-top:10px;
	margin-top:10px;
	border-top:1px solid #7e363f;
	text-align:center;
}
.show-hide{
	display:none;
}
.show-hide.visible{
	display:block;
}
.card{
	cursor:pointer;
	position:absolute;
	height:85px;
	width:70px;
}
.card-inside{
	color:#fff;
	height:400px;
	width:300px;
	position:absolute;
	bottom:0;
	right:0;
	transform:scale(.4, .6) rotateY(90deg) rotateZ(0deg);
	transition:transform .8s .4s;
}
.card-inside > img{
	border:1px solid #fff;
	box-shadow:1px 1px 7px 4px rgba(55,55,55,.3);
}
.card:hover .card-inside{
	transform: scale(1, .9) rotateY(0deg) rotateZ(-8deg);
}
.card-2:hover .card-inside{
	transform: scale(1, .9) rotateY(8deg) rotateZ(6deg);
}
.card-4:hover .card-inside{
	transform: scale(1, .9) rotateY(0deg) rotateZ(3deg);
}
.card-6:hover .card-inside{
	transform: scale(1, .9) rotateY(0deg) rotateZ(2deg);
}
/****** weather forecast */

	#forecast-control:checked ~ #forecast{
	top:-1px;
	}
	input#forecast-control{
	display:none;	
	}
	label[for="forecast-control"]{
	display: block;
    position: absolute;
    top: -5px;
    right: 100px;
    height: 24px;
    width: 93px;
    cursor: pointer;
    z-index: 2;
    background-color: rgba(104, 177, 37, 0.3);
    border-radius: 0 0 3px 3px;
    color: #555;
    font-size: 12px;
    border: 1px solid #bbb;
    text-align: center;
    box-shadow: 1px 3px 2px #777;
	 padding-top:5px;
	 transition: top .4s;
	}
label[for="forecast-control"]:hover{
 top:-1px;
}
	#forecast{
	position:absolute;
	left:100px;
	top:-230px;	
	height:220px;
	width:800px;
	background-color:#fafafa;
	border:1px solid #999;
	box-shadow:0 0 8px 3px #777;
	transition:top 1s;
	z-index:3;
	padding:10px 15px;
	}
	#forecast-listing{
	margin:0;
	padding:0;	
	}
	#forecast-listing{
		display:flex;	
		justify-content:center;
		list-style:none;
	}
	#forecast-listing > li{
		width:12.5%;
		
	}
	.forecast-tombstone{
		padding:0 5px;
	}
	.tombstone-container{
		display:flex;
		flex-direction:column;
		height:200px;
		font-size:13px;
		text-align:center;
	}
	.period-name{
		line-height:1.1;
		font-weight:700;
		height:32px;
	}
	.weather-img{
		position:relative;	
		margin:4px 0;
	}
	.weather-img > img{
		display:block;	
	}
	.weather-img > span{
		position:absolute;
		width:100%;
		left:0;
		bottom:0;
		background-color:rgba(160,160,160,.6);
		color:#2d4384;
		font-weight:700;
		text-align:right;
		padding:0 8px;
	}
	.temp{
		margin-top:auto;
		font-weight:700;
	}
	.temp-low{
		color:#15a3e0;
	}
	.temp-high{
		color:#ef3725;
	}
	
	
.shake{

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);

}

.shake:hover{
-webkit-animation-name: hvr-buzz-out;
animation-name: hvr-buzz-out;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;	
}

/* Buzz Out */
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.card-left-blue{
	background-color:#82c0d3;
}

.card-left-green{
	background-color:#2b6642;
}

.card-left-red{
	background-color:#e34040;
}

.card-left-yellow{
	background-color:#e1d687;
}

.dog{
	position:absolute;
	left:865px;
	top:819px;
}
.candle-alt{
	position:absolute;
	left:968px;
	top:232px;
}
.candle-alt.alt3{
top:246px
}