@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Festive&family=Sedgwick+Ave&display=swap');

body { background-color:#fff; }

.row-centered {
	text-align:center;
}

.col-centered {
	display:inline-block;
	float:none;
	text-align:left;
	margin-right:-4px;
}

.overlay {
	position: fixed;
	background: #fff;
	height: 100%;
	width: 100%;
	z-index: 101;
}

.scene-envelope {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -350px;
	transform: translateX(-50%);
	width: 700px;
	height: 700px;
	background: url(/happy-holidays/2021/envelope-snowbed.png) no-repeat;
}

.envelope-snowbed-branch {
	position: absolute;
	top: 0;
	left: 0;
}

.envelope {
	display: block;
	margin: auto auto;
	width: 500px;
	height: 333px;
	transform: translateY(-350px);
	background: url(/happy-holidays/2021/envelope-view-message.png) no-repeat;
	cursor: pointer;
}

.envelope img {
	opacity: 0;
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	transition: all 0.2s;
}

.scene-envelope:hover .envelope img,
.scene-envelope:active .envelope img {
	opacity: 1;
}

.fade-out {
	-webkit-animation: fade-out ease 1.5s normal forwards;
	animation: fade-out ease 1.5s normal forwards;
}

.slide-bottom {
	-webkit-animation: slide-bottom 0.5s ease-in 1.25s forwards;
	animation: slide-bottom 0.5s ease-in 1.25s forwards;
}

@keyframes fade-out {
	0%{
		opacity: 1;
		-webkit-transform: stranslateX(0);
		transform: translateX(0);
	}
	95%{
		opacity: 0;
		-webkit-transform: stranslateX(0);
		transform: translateX(0);
	}
	100%{
		-webkit-transform: stranslateX(-9999px);
		transform: translateX(-9999px);
	}
}

@-webkit-keyframes slide-bottom {
	0% {
		-webkit-transform: translateY(-350px);
		transform: translateY(-350px);
	}
	100% {
		-webkit-transform: translateY(200px);
		transform: translateY(200px);
	}
}

@keyframes slide-bottom {
	0% {
		-webkit-transform: translateY(-350px);
		transform: translateY(-350px);
	}
	100% {
		-webkit-transform: translateY(200px);
		transform: translateY(200px);
	}
}





.sprite {
	width: 800px;
	height: 320px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -400px;
	transform: translate(-50%, -50%);
	background-image: url('/happy-holidays/2021/caribou-sleigh-animation.png');
	background-position: 0px 0;
	transform: scale(1);
	animation: play-sleigh 0.8s steps(16) infinite;
}

@keyframes play-sleigh {
	0% { background-position:    0px; }
	100%  { background-position: -12800px; }
}
	@-moz-keyframes play-sleigh {
		0% { background-position:    0px; }
		100%  { background-position: -12800px; }
	}
	@-webkit-keyframes play-sleigh {
		0% { background-position:    0px; }
		100%  { background-position: -12800px; }
	}
	@-o-keyframes play-sleigh {
		0% { background-position:    0px; }
		100%  { background-position: -12800px; }
	}
	@-ms-keyframes play-sleigh {
		0% { background-position:    0px; }
		100%  { background-position: -12800px; }
	}





@keyframes trees {
	0% {background-position:-940px 0}
	100% {background-position:0 0}
}
	@-moz-keyframes trees {
		0% {background-position:-940px 0}
		100% {background-position:0 0}
	}
	@-webkit-keyframes trees {
		0% {background-position:-940px 0}
		100% {background-position:0 0}
	}
	@-o-keyframes trees {
		0% {background-position:-940px 0}
		100% {background-position:0 0}
	}
	@-ms-keyframes trees {
		0% {background-position:-940px 0}
		100% {background-position:0 0}
	}





#songpause {
	position: absolute;
	top: 20px;
	right: 10%;
	width: 100px;
	opacity: 0.75;
	z-index: 100;
}

.main-anim {
	width: 100%;
	height: 450px;
	position: absolute;
	top: 0px;
	background: rgb(214,244,253);
	background: linear-gradient(0deg, rgba(232,248,253,1) 50%, rgba(214,244,253,1) 55%, rgba(214,244,253,1) 70%, rgba(254,249,236,1) 100%);
	text-align: center;
}

.main-anim-section-trees .main-anim-foreground {
	background-image: url("/happy-holidays/2021/foreground.png");
	width: 100%;
	height: 528px;
	position: absolute;
	background-repeat: repeat-x;
	background-position: 0px 0px;
	top: 0px;
	animation-name: foreground;
	animation-timing-function: linear;
	animation-duration: 18s;
	animation-iteration-count: infinite;
}

@keyframes foreground {
	0% {background-position:-3018px 0}
	100% {background-position:0 0}
}
	@-moz-keyframes foreground {
		0% {background-position:-3018px 0}
		100% {background-position:0 0}
	}
	@-webkit-keyframes foreground {
		0% {background-position:-3018px 0}
		100% {background-position:0 0}
	}
	@-o-keyframes foreground {
		0% {background-position:-3018px 0}
		100% {background-position:0 0}
	}
	@-ms-keyframes foreground {
		0% {background-position:-3018px 0}
		100% {background-position:0 0}
	}




.main-anim-section-trees .main-anim-midground {
	width: 100%;
	background-image: url("/happy-holidays/2021/midground.png");
	background-repeat: repeat-x;
	height: 385px;
	position: absolute;
	top: 0px;
	background-position: 0px 0px;
	animation-name: midground;
	animation-timing-function: linear;
	animation-duration: 24s;
	animation-iteration-count: infinite;
}

@keyframes midground {
	0% {background-position:-2878px 0}
	100% {background-position:0 0}
}
	@-moz-keyframes midground {
		0% {background-position:-2878px 0}
		100% {background-position:0 0}
	}
	@-webkit-keyframes midground {
		0% {background-position:-2878px 0}
		100% {background-position:0 0}
	}
	@-o-keyframes midground {
		0% {background-position:-2878px 0}
		100% {background-position:0 0}
	}
	@-ms-keyframes midground {
		0% {background-position:-2878px 0}
		100% {background-position:0 0}
	}




.main-anim-section-trees .main-anim-background {
	width: 100%;
	background-image: url("/happy-holidays/2021/background.png");
	background-repeat: repeat-x;
	height: 288px;
	position: absolute;
	top: 0px;
	background-position: 0px 0px;
	animation-name: background;
	animation-timing-function: linear;
	animation-duration: 32s;
	animation-iteration-count: infinite;
}

@keyframes background {
	0% {background-position:-2868px 0}
	100% {background-position:0 0}
}
	@-moz-keyframes background {
		0% {background-position:-2868px 0}
		100% {background-position:0 0}
	}
	@-webkit-keyframes background {
		0% {background-position:-2868px 0}
		100% {background-position:0 0}
	}
	@-o-keyframes background {
		0% {background-position:-2868px 0}
		100% {background-position:0 0}
	}
	@-ms-keyframes background {
		0% {background-position:-2868px 0}
		100% {background-position:0 0}
	}




.main-anim-section-trees .main-anim-snow {
	background-image: url("/_resources/images/happy-holidays/snow.png"), url("/_resources/images/happy-holidays/snow2.png"), url("/_resources/images/happy-holidays/snow3.png");
	width: 100%;
	height: 500px;
	position: absolute;
	background-repeat: repeat;
	background-position: 0px 0px;
	top: 0px;
	animation-name: snow;
	animation-timing-function: linear;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	z-index: 15;
}

@keyframes snow {
	0% {background-position:0 0, 0 0, 0 0}
	100% {background-position:500px 500px, 400px 400px, 300px 300px}
}
	@-moz-keyframes snow {
		0% {background-position:0 0, 0 0, 0 0}
		100% {background-position:500px 500px, 400px 400px, 300px 300px}
	}
	@-webkit-keyframes snow {
		0% {background-position:0 0, 0 0, 0 0}
		100% {background-position:500px 500px, 400px 400px, 300px 300px}
	}
	@-o-keyframes snow {
		0% {background-position:0 0, 0 0, 0 0}
		100% {background-position:500px 500px, 400px 400px, 300px 300px}
	}
	@-ms-keyframes snow {
		0% {background-position:0 0, 0 0, 0 0}
		100% {background-position:500px 500px, 400px 400px, 300px 300px}
	}





p.msg {
	font-size: 1.65em !important;
	font-weight: 300;
}





@media (min-width : 320px) {
	.scene-envelope {
		transform: scale(0.5) translateY(-220px);
	}

	.envelope {
		transform: translateY(-650px);
	}
	
	.sleigh {
		height: 260px;
		margin-top: 150px;
	}

	.sprite {
		transform: scale(0.5);
	}
}

@media (min-width : 768px) {
	.scene-envelope {
		transform: scale(0.75) translateY(-115px);
	}

	.envelope {
		transform: translateY(-450px);
	}

	.sleigh {
		height: 280px;
		margin-top: 145px;
	}

	.sprite {
		transform: scale(0.65);
	}
}

@media (min-width : 992px) {
	.scene-envelope {
		transform: scale(1);
	}

	.envelope {
		transform: translateY(-350px);
	}
	
	.sleigh {
		height:300px;
		margin-top: 175px;
	}

	.sprite {
		transform: scale(0.75);
	}
}

@media (min-width : 1200px) {
	.sleigh {
		height:320px;
		margin-top: 190px;
	}

	.sprite {
		transform: scale(0.85);
	}
}