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

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-boarding-pass {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -400px;
	transform: translateX(-50%);
	width: 800px;
	height: 776px;
	background: url(/happy-holidays/2022/overlay-clouds-backgroud.png) no-repeat;
	cursor: pointer;
	opacity: 0;
}

.boarding-pass-cloud-top {
	position: absolute;
	top: 0;
	left: 0;
}

.boarding-pass {
	display: block;
	margin: auto auto;
	width: 800px;
	height: 776px;
	transform: translateY(-800px);
	background: url(/happy-holidays/2022/overlay-boarding-pass.png) no-repeat;
	cursor: pointer;
}

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

.boarding-pass-msg {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    color: #9b2b29;
    font-size: 1.25em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

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

.fade-in {
	-webkit-animation: fade-in ease 1.25s normal forwards;
	animation: fade-in ease 1.25s normal forwards;
}

.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 1.5s cubic-bezier(.1,.3,.3,1.08) 1s forwards;
	animation: slide-bottom 1.5s cubic-bezier(.1,.3,.3,1.08) 1s forwards;
}

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

@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(-800px);
		transform: translateY(-800px);
	}
	100% {
		-webkit-transform: translateY(0px);
		transform: translateY(0px);
	}
}

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

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

.sprite {
	width: 866px;
	height: 558px;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -433px;
	transform: translate(-50%, -50%);
	background-image: url('/happy-holidays/2022/2022-holiday-card-plane-sequence-min.png');
	background-position: 0px 0;
	transform: scale(1);
	animation: fly-plane 2.75s steps(33) infinite;
}

@keyframes fly-plane {
	0% { background-position: 0px; }
	100%  { background-position: -28591px; }
}
	@-moz-keyframes fly-plane {
		0% { background-position: 0px; }
		100%  { background-position: -28591px; }
	}
	@-webkit-keyframes fly-plane {
		0% { background-position: 0px; }
		100%  { background-position: -28591px; }
	}
	@-o-keyframes fly-plane {
		0% { background-position: 0px; }
		100%  { background-position: -28591px; }
	}
	@-ms-keyframes fly-plane {
		0% { background-position: 0px; }
		100%  { background-position: -28591px; }
	}

.main-anim {
	width: 100%;
	height: 450px;
	position: absolute;
	top: 0px;
	background: rgb(180,229,246);
	background: linear-gradient(180deg, rgba(207,244,251,1) 1%, rgba(212,231,231,1) 45%, rgba(180,229,246,1) 100%);
	text-align: center;
}

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

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

.main-anim-section-clouds .main-anim-clouds-back,
.main-anim-section-clouds .main-anim-clouds-mid,
.main-anim-section-clouds .main-anim-clouds-front {
	width: 100%;
	background-repeat: repeat-x;
	height: 340px;
	position: absolute;
	top: 0px;
	background-position: 0px 0px;
	animation-name: cloudlayers;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.main-anim-section-clouds .main-anim-clouds-back {
	background-image: url("/happy-holidays/2022/clouds-back.png");
	animation-duration: 240s;
}

.main-anim-section-clouds .main-anim-clouds-mid {
	background-image: url("/happy-holidays/2022/clouds-mid.png");
	animation-duration: 180s;
}

.main-anim-section-clouds .main-anim-clouds-front {
	background-image: url("/happy-holidays/2022/clouds-front.png");
	animation-duration: 120s;
}

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

.fog-over-lettering {
	width: 100%;
	background-image: url("/happy-holidays/2022/fog-over-lettering.png?v=3");
	background-repeat: repeat-x;
	height: 260px;
	position: absolute;
	top: 0px;
	background-position: 0px 0px;
	animation-name: foglayer;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 80s;
}

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

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

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

	.boarding-pass {
		transform: translateY(-800px);
	}
	
	.main-anim-section-clouds .main-anim-cloudbase {
		top: -60px;
	}
	
	.main-anim-section-clouds .main-anim-clouds-back,
	.main-anim-section-clouds .main-anim-clouds-mid,
	.main-anim-section-clouds .main-anim-clouds-front {
		top: -30px;
	}
	
	.fog-over-lettering {
		top: -100px;
	}
	
	.plane {
		height: 380px;
		margin-top: 0;
	}

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

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

	.boarding-pass {
		transform: translateY(-650px);
	}
	
	.main-anim-section-clouds .main-anim-cloudbase,
	.main-anim-section-clouds .main-anim-clouds-back,
	.main-anim-section-clouds .main-anim-clouds-mid,
	.main-anim-section-clouds .main-anim-clouds-front {
		top: -50px;
	}

	.fog-over-lettering {
		height: 260px;
		top: -75px;
	}
	
	.plane {
		height: 420px;
		margin-top: 0;
	}

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

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

	.boarding-pass {
		transform: translateY(-800px);
	}
	
	.main-anim-section-clouds .main-anim-cloudbase,
	.main-anim-section-clouds .main-anim-clouds-back,
	.main-anim-section-clouds .main-anim-clouds-mid,
	.main-anim-section-clouds .main-anim-clouds-front {
		top: 0px;
	}
	
	.fog-over-lettering {
		top: -60px;
	}
	
	.plane {
		height:450px;
		margin-top: 50px;
	}

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

@media (min-width : 1200px) {
	.sprite {
		transform: scale(0.85);
	}
}