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

body {
	background-color: #fff;
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	height: 200vh;
	width: calc(100% + 4px);
	z-index: 101;
}

.scene-holiday-card {
	height: 650px;
	opacity: 0;
}

.scene-ice-skates {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	width: 375px;
	height: 387px;
	background: url(https://globalcampus.uark.edu/happy-holidays/2024/assets/opening-ice-skates-775.png) center top no-repeat;
	background-size: 100%;
	cursor: pointer;
	opacity: 0;
	z-index: 1;
}

.scene-ice-skates .tags {
	display: block;
	width: 375px;
	height: 387px;
	margin: 10px 0 0 2px;
	background: url(https://globalcampus.uark.edu/happy-holidays/2024/assets/opening-tags-closed-726.png) center top no-repeat;
	background-size: 100%;
	cursor: pointer;
}

.scene-ice-skates .tags img {
	opacity: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.scene-ice-skates:hover .tags img,
.scene-ice-skates:active .tags img {
	opacity: 1;
}

.scene-ice-skates:hover .tags,
.scene-ice-skates:active .tags {
	background: none;
}

.fade-in {
	-webkit-animation: fade-in ease 2s normal 1.5s forwards;
	-moz-animation: fade-in ease 2s normal 1.5s forwards;
	-ms-animation: fade-in ease 2s normal 1.5s forwards;
	-o-animation: fade-in ease 2s normal 1.5s forwards;
	animation: fade-in ease 2s normal 1.5s forwards;
}

@keyframes fade-in {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.fade-out {
	-webkit-animation: fade-out 1.5s normal 1s forwards;
	-moz-animation: fade-out 1.5s normal 1s forwards;
	-ms-animation: fade-out 1.5s normal 1s forwards;
	-o-animation: fade-out 1.5s normal 1s forwards;
	animation: fade-out 1.5s normal 1s 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);
	}
}

#songpause {
	position: absolute;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.75;
	width: 120px;
	color: #6a302f;
	z-index: 100;
}

p.msg {
	font-size: 1.25em !important;
	font-weight: 300;
}
	
.scene-clip {
	width: 100%;
	height: 523px;
	overflow: hidden;
}

.main-animation {
	display: block;
	position: relative;
	padding: 0;
}

.main-animation .main-animation-background {
	background: url("https://globalcampus.uark.edu/happy-holidays/2024/assets/hh-background-min.png") no-repeat top center;
	background-size: 100%;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 5%);
}

.main-animation .main-animation-frame {
	background: url("https://globalcampus.uark.edu/happy-holidays/2024/assets/hh-foreground-min.png") no-repeat bottom center;
	background-size: 100%;
	position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 5%);
}

.main-animation,
.main-animation .main-animation-background {
	width: 700px;
	height: 436px;
}

.main-animation .main-animation-frame {
	width: 700px;
	height: 420px;
}

.main-animation .main-anim-snow {
	background-image: url("https://globalcampus.uark.edu/happy-holidays/2024/assets/snowfall_02.png"), url("https://globalcampus.uark.edu/happy-holidays/2024/assets/snowfall_03.png");
	width: 100%;
	height: 1000px;
	position: absolute;
	background-repeat: repeat;
	background-position: 0px 0px;
	top: 0px;
	animation-name: snow;
	animation-timing-function: linear;
	animation-duration: 2.5s;
	animation-iteration-count: infinite;
}

@keyframes snow {
	0% {
		background-position:0 0, 0 0;
	}
	100% {
		background-position:150px 150px, 100px 100px;
	}
}
@-moz-keyframes snow {
	0% {
		background-position:0 0, 0 0;
	}
	100% {
		background-position:150px 150px, 100px 100px;
	}
}
@-webkit-keyframes snow {
	0% {
		background-position:0 0, 0 0;
	}
	100% {
		background-position:150px 150px, 100px 100px;
	}
}
@-o-keyframes snow {
	0% {
		background-position:0 0, 0 0;
	}
	100% {
		background-position:150px 150px, 100px 100px;
	}
}
@-ms-keyframes snow {
	0% {
		background-position:0 0, 0 0;
	}
	100% {
		background-position:150px 150px, 100px 100px;
	}
}

.main-animation .main-anim-snow-front {
	background-image: url("https://globalcampus.uark.edu/happy-holidays/2024/assets/snowfall_01.png");
	width: 100%;
	height: 1000px;
	position: absolute;
	background-repeat: repeat;
	background-position: 0px 0px;
	top: 0px;
	animation-name: snowb;
	animation-timing-function: linear;
	animation-duration: 2.25s;
	animation-iteration-count: infinite;
	z-index: 15;
}

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

#sleddingCanvas {
	margin: -5px 0 0 -110px;
}

#snowbunnyCanvas {
	margin: 10px 0 0 -20px;
}

#fishingCanvas {
	margin: 70px 120px 0 0;
}

#hockeyCanvas {
	margin: -100px 0 0 -90px;
}

#skaterCanvasMD {
	margin: 0 0 60px 50px;
	transform: scale(0.8);
}

#skaterBackCanvasMD {
	margin: 0 0 65px 60px;
	transform: scale(0.8);
}

#sleddingCanvas,
#snowbunnyCanvas {
	-webkit-transform: scale(0.35);
	-moz-transform: scale(0.35);
	-ms-transform: scale(0.35);
	-o-transform: scale(0.35);
	transform: scale(0.35);
}

#hockeyCanvas {
	-webkit-transform: scale(0.33);
	-moz-transform: scale(0.33);
	-ms-transform: scale(0.33);
	-o-transform: scale(0.33);
	transform: scale(0.33);
}

#main-content {
	margin-top: 450px;
}





@media (min-width: 375px) {
	.scene-ice-skates,
	.scene-ice-skates .tags {
		width: 375px;
		height: 387px;
	}
}

@media (min-width: 576px)  {
	
	.overlay {
		height: 850px;
	}
	
	.scene-ice-skates,
	.scene-ice-skates .tags {
		width: 576px;
		height: 595px;
	}
	
	.main-animation,
	.main-animation .main-animation-background,
	.main-animation .main-anim-snow {
		width: 840px;
		height: 523px;
	}
	
	.main-animation .main-animation-frame {
		width: 840px;
		height: 502px;
	}
	
	#sleddingCanvas {
		margin: 23px 0 0 -105px;
	}

	#snowbunnyCanvas {
		margin: 45px 0 0 18px;
	}

	#fishingCanvas {
		margin: 0;
	}

	#hockeyCanvas {
		margin: -40px 0 0 -130px;
	}

	#skaterCanvasMD {
		margin: 0 0 110px 110px;
        transform: scale(1);
	}
	
	#skaterBackCanvasMD {
		margin: 0 0 115px 120px;
        transform: scale(1);
	}
	
	#sleddingCanvas,
	#fishingCanvas {
		-webkit-transform: scale(0.42);
		-moz-transform: scale(0.42);
		-ms-transform: scale(0.42);
		-o-transform: scale(0.42);
		transform: scale(0.42);
	}

	#hockeyCanvas,
	#snowbunnyCanvas {
		-webkit-transform: scale(0.37);
		-moz-transform: scale(0.37);
		-ms-transform: scale(0.37);
		-o-transform: scale(0.37);
		transform: scale(0.37);
	}

	#main-content {
		margin-top: 530px;
	}

}

@media (min-width : 768px) {

	.overlay {
		height: 900px;
	}
	
	.scene-ice-skates {
		width: 750px;
		height: 775px;
	}
	
	.scene-ice-skates .tags {
		width: 726px;
		height: 750px;
		margin: 12px 0 0 2px;
	}
	
	.main-animation,
	.main-animation .main-animation-background,
	.main-animation .main-anim-snow {
		width: 840px;
		height: 523px;
	}
	
	.main-animation .main-animation-frame {
		width: 840px;
		height: 502px;
	}
	
	p.msg {
		font-size: 1.5em !important;
	}
	
	#sleddingCanvas {
		margin: 23px 0 0 -105px;
	}

	#snowbunnyCanvas {
		margin: 45px 0 0 18px;
	}

	#fishingCanvas {
		margin: 0;
	}

	#hockeyCanvas {
		margin: -40px 0 0 -130px;
	}

	#skaterCanvasMD {
		margin: 0 0 105px 110px;
	}
	
	#skaterBackCanvasMD {
		margin: 0 0 115px 110px;
	}
	
	#sleddingCanvas,
	#fishingCanvas {
		-webkit-transform: scale(0.42);
		-moz-transform: scale(0.42);
		-ms-transform: scale(0.42);
		-o-transform: scale(0.42);
		transform: scale(0.42);
	}

	#hockeyCanvas,
	#snowbunnyCanvas {
		-webkit-transform: scale(0.37);
		-moz-transform: scale(0.37);
		-ms-transform: scale(0.37);
		-o-transform: scale(0.37);
		transform: scale(0.37);
	}

	#main-content {
		margin-top: 530px;
	}

}

@media (min-width : 992px) {

	.overlay {
		height: 1050px;
	}
	
	.scene-clip {
		height: 673px;
	}
	
	.main-animation,
	.main-animation .main-animation-background,
	.main-animation .main-anim-snow {
		width: 1080px;
		height: 673px;
	}
	
	.main-animation .main-animation-frame {
		width: 1080px;
		height: 645px;
	}
	
	#sleddingCanvas {
		margin: 74px 0 0 -100px;
	}

	#snowbunnyCanvas {
		margin: 90px 0 0 75px;
	}

	#fishingCanvas {
		margin: 50px 65px 0 0;
	}

	#hockeyCanvas {
		margin: 20px 0 0 -40px;
	}

	#skaterCanvasLG {
		margin: 0 0 150px 150px;
	}
	
	#skaterBackCanvasLG {
		margin: 0 0 160px 160px;
	}
	
	#sleddingCanvas,
	#fishingCanvas {
		-webkit-transform: scale(0.56);
		-moz-transform: scale(0.56);
		-ms-transform: scale(0.56);
		-o-transform: scale(0.56);
		transform: scale(0.56);
	}

	#hockeyCanvas,
	#snowbunnyCanvas {
		-webkit-transform: scale(0.51);
		-moz-transform: scale(0.51);
		-ms-transform: scale(0.51);
		-o-transform: scale(0.51);
		transform: scale(0.51);
	}

	#main-content {
		margin-top: 680px;
	}

}

@media (min-width : 1200px) {

	.overlay {
		height: 1150px;
	}
	
	.scene-clip {
		height: 830px;
	}
	
	.main-animation,
	.main-animation .main-animation-background,
	.main-animation .main-anim-snow,
	.main-animation .main-animation-frame {
		width: 1320px;
		height: 790px;
	}
	
	#sleddingCanvas {
		margin: 122px 0 0 -85px;
	}

	#snowbunnyCanvas {
		margin: 130px 0 0 135px;
	}

	#fishingCanvas {
		margin: 100px 130px 0 0;
	}

	#hockeyCanvas {
		margin: 90px 0 0 50px;
	}

	#skaterCanvasXL {
		margin: 0 0 150px 200px;
	}
	
	#skaterBackCanvasXL {
		margin: 0 0 165px 200px;
	}
	
	#sleddingCanvas,
	#fishingCanvas {
		-webkit-transform: scale(0.7);
		-moz-transform: scale(0.7);
		-ms-transform: scale(0.7);
		-o-transform: scale(0.7);
		transform: scale(0.7);
	}

	#hockeyCanvas,
	#snowbunnyCanvas {
		-webkit-transform: scale(0.65);
		-moz-transform: scale(0.65);
		-ms-transform: scale(0.65);
		-o-transform: scale(0.65);
		transform: scale(0.65);
	}

	#main-content {
		margin-top: 830px;
	}

}

@media (min-width: 1400px) {
    .overlay {
        height: 1120px;
    }
}