/* Initial Setup */

.wpfox-animated-hero {
	--parade-width: 2150em;
	--parade-time: 120s;
	position: relative;
}

.page-template-wp-custom-template-51st-annual .wpfox-animated-hero {
	--parade-time: 9999999s !important;
}

.wpfox-animated-hero,
.wpfox-animated-hero * {
	font-size: calc(100vw / 1920) !important;
}

@media (max-width: 959px) {
    .wpfox-animated-hero, .wpfox-animated-hero * {
    	font-size: min(calc(100vw / 1920 * 2.2),calc(.5px)) !important;
    }
}

.wpfox-animated-hero > .loading {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.5s;
	display: flex;
	align-items: flex-end;
	pointer-events: none;
}

body.page-loaded .wpfox-animated-hero > .loading {
	opacity: 0;
}

.wpfox-animated-hero > .loading img {
	max-height: 100%;
}

.wpfox-animated-hero > .wrapper {
	position: relative;
	margin: 0 calc(50% - 50vw);
	height: 805em;
	background-color: #FBFBFB;
	overflow: hidden;
}


/* Layers */

.wpfox-animated-hero .layer {
	position: absolute;
	height: 100%;
	width: 100%;
	width: 2020em;
	opacity: 0;
	transition: opacity 0.5s;
	transition-delay: 1s;
}

body.page-loaded .wpfox-animated-hero .layer {
	opacity: 1;
}

.wpfox-animated-hero .layer > .wrapper {
	position: relative;
	height: 100%;
	width: 100%;
}

.wpfox-animated-hero .layer > .wrapper > .bgimage {
	position: absolute;
	height: 100%;
	width: 100%;
}

.wpfox-animated-hero .layer > .wrapper > .bgimage img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: top center;
}


/* Elements */

.wpfox-animated-hero .element {
	left: var(--element-left);
	width: var(--element-width);
	bottom: var(--element-bottom);
	position: absolute;
}

/*
.page-template-wp-custom-template-51st-annual .wpfox-animated-hero #parade .element {
	left: var(--element-left) !important;
}
*/

.wpfox-animated-hero .element > .wrapper {
	position: relative;
}

.wpfox-animated-hero .element > .wrapper > .bgimage img {
	
}


/* Pieces */

.wpfox-animated-hero .piece {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
}

.wpfox-animated-hero .piece > .wrapper {
	position: relative;
	
	& >.bgimage {
		img {
			width: 100%;
		}
	}
}

/* Float - Lamp */

@keyframes lampanimation {
	0% { opacity: 0.5; }
	25% { opacity: 1; }
	100% { opacity: 0.5; }
}

#float-lamp {
	opacity: 0.5;
	animation-name: lampanimation;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

/* Float - Star */

@keyframes staranimation {
	0% { opacity: 0.4; }
	50% { opacity: 0.7; }
	100% { opacity: 0.4; }
}

#float-star {
	opacity: 0.4;
	animation-name: staranimation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}


/* Elf 1 - Head */

@keyframes elf1head {
	0% { transform: rotate(3deg); }
	50% { transform: rotate(-17deg); }
	100% { transform: rotate(3deg); }
}

#elf1-head {
	animation-name: elf1head;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	transform: rotate(3deg);
	transform-origin: 40% 100%;
	animation-timing-function: ease-in-out;
}


/* Elf 2 - Head */

@keyframes elf2head {
	0% { transform: rotate(-10deg); }
	50% { transform: rotate(10deg); }
	100% { transform: rotate(-10deg); }
}

#elf2-head {
	animation-name: elf2head;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	transform: rotate(-10deg);
	transform-origin: 60% 100%;
	animation-timing-function: ease-in-out;
}


/* Elf 3 - Head */

@keyframes elf3head {
	0% { transform: rotate(8deg); }
	50% { transform: rotate(-12deg); }
	100% { transform: rotate(8deg); }
}

#elf3-head {
	animation-name: elf3head;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	transform: rotate(8deg);
	transform-origin: 40% 100%;
	animation-timing-function: ease-in-out;
}


/* Elf 4 - Head */

@keyframes elf4head {
	0% { transform: rotate(-15deg); }
	50% { transform: rotate(0deg); }
	100% { transform: rotate(-15deg); }
}

#elf4-head {
	animation-name: elf4head;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	transform: rotate(-15deg);
	transform-origin: 45% 100%;
	animation-timing-function: ease-in-out;
}


/* Pieces - Sponsor Hands */

.wpfox-animated-hero .piece[id*="elf"][id*="-hands"] {
	pointer-events: none;
}


/* Pieces - Sponsor Signs */

.wpfox-animated-hero .piece[id*="sponsor-sign-"] {
	transform: scale(1);
	transition: transform 0.5s;
	border: 3em solid var(--wp--preset--color--primary);
	box-sizing: border-box;
	
	&:nth-child(2n),
	&[style*="67.5%"]:nth-child(2n + 1) {
		transform: rotate(1deg);
	}
	
	&:nth-child(2n + 1),
	&[style*="67.5%"]:nth-child(2n) {
		transform: rotate(-1deg);
	}
	
	&:is(:hover,.active) {
		transform: scale(1.5) !important;
		z-index: 1;
	}
	
	& > .wrapper {
		position: relative;
		height: 0;
		padding-bottom: 50%;
		background-color: #fff;
		box-shadow: 1em 1em 3em rgba(0,0,0,0.15);
		
		[style*="67.5%"] &::before,
		[style*="79%"] &::before {
			content: "\2022";
			position: absolute;
			left: 3%;
			top: 5%;
			font-size: 12em;
			display: block;
			color: #000;
			z-index: 1;
			line-height: 0.3em;
			opacity: 0.5;
		}
		
		[style*="67.5%"] &::after,
		[style*="79%"] &::after {
			content: "\2022";
			position: absolute;
			top: 5%;
			font-size: 12em;
			display: block;
			color: #000;
			z-index: 1;
			line-height: 0.3em;
			right: 3%;
			opacity: 0.5;
		}
		
		& > .bgimage {
			
			& .sign-text {
				font-size: 10.5em !important;
				background-color: var(--wp--preset--color--primary);
				display: block;
				width: 100%;
				color: #fff;
				position: absolute;
				top: 100%;
				text-align: center;
				line-height: 1;
				padding: 0.3em;
				box-sizing: border-box;
				height: 100%;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--wp--preset--color--primary);
				background-color: #fff;
				/* font-family: var(--wp--preset--font-family--secondary); */
				font-weight: 600;
			}

			& img {
				position: absolute;
				width: 75%;
				height: 70%;
				object-fit: contain;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				
				.sign-text + & {
					display: none;
				}
			}
		}
	}
	
	&[style*="67.5%"] {
		border-color: var(--wp--preset--color--secondary);
		& > .wrapper {
			& > .bgimage {
				& .sign-text {
					color: var(--wp--preset--color--secondary);
				}
			}
		}
	}
}

/* Loud Communicatons Tweak */

#sponsor-sign-7 {
	width: 15.5% !important;
	
	& > .wrapper {
		padding-bottom: 41.5%;
	}
}


/* Elf Hands */

#elf1-hands {
	transform: scale(1);
	transition: transform 0.5s;
	
	#sponsor-sign-1:is(:hover,.active) ~ & {
		transform: scale(1.5);
		z-index: 1;
	}
}

#elf2-hands {
	transform: scale(1);
	transition: transform 0.5s;
	
	#sponsor-sign-2:is(:hover,.active) ~ & {
		transform: scale(1.47);
		z-index: 1;
	}
}

#elf3-hands {
	transform: scale(1);
	transition: transform 0.5s;
	
	#sponsor-sign-3:is(:hover,.active) ~ & {
		transform: scale(1.72);
		z-index: 1;
	}
}


/* Layer - Sky */

.wpfox-animated-hero .layer#sky {
	background-color: #c2e5fb;
}

.wpfox-animated-hero .layer#sky > .wrapper > .bgimage img {
	opacity: 0.12;
	filter: brightness(200%);
}


/* Layer - Skyline */

.wpfox-animated-hero .layer#skyline {
	height: 260em;
	top: 210em;
	left: 50%;
	transform: translate(-50%);
}

.wpfox-animated-hero .layer#skyline > .wrapper > .bgimage img {
	opacity: 0.5;
}

@keyframes dominosanimation {
	0% { filter: grayscale(100%); }
	50% { filter: grayscale(50%); }
	100% { filter: grayscale(100%); }
}

@keyframes dominosglowinganimation {
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	100% { opacity: 0; }
}

.wpfox-animated-hero .element#domino-sugars-sign {
	width: 62em;
	top: 163em;
	left: 119em;
	filter: grayscale(100%);
	opacity: 1.2;
	animation-name: dominosanimation;
	animation-duration: 4.5s;
	animation-iteration-count: infinite;
}

.wpfox-animated-hero .piece#domino-sugars-sign-normal {
	top: 0;
	left: 0;
}

.wpfox-animated-hero .piece#domino-sugars-sign-glowing {
	top: 0;
	left: 0;
	opacity: 0;
	animation-name: dominosglowinganimation;
	animation-duration: 4.5s;
	animation-iteration-count: infinite;
}

@keyframes bohanimation {
	0% { opacity: 1; }
	79% { opacity: 1; }
	80% { opacity: 0; }
	99% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes bohhalfanimation {
	0% { opacity: 0; }
	79% { opacity: 0; }
	80% { opacity: 1; }
	84% { opacity: 1; }
	85% { opacity: 0; }
	94% { opacity: 0; }
	95% { opacity: 1; }
	99% { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes bohfullanimation {
	0% { opacity: 0; }
	84% { opacity: 0; }
	85% { opacity: 1; }
	94% { opacity: 1; }
	95% { opacity: 0; }
	100% { opacity: 0; }
}

.wpfox-animated-hero .element#natty-boh {
	width: 28em;
	top: 104em;
	left: 1267em;
	opacity: 0.32;
}

.wpfox-animated-hero .piece#natty-boh-open {
	opacity: 0;
	animation-name: bohanimation;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

.wpfox-animated-hero .piece#natty-boh-half {
	opacity: 0;
	animation-name: bohhalfanimation;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}

.wpfox-animated-hero .piece#natty-boh-closed {
	opacity: 0;
	animation-name: bohfullanimation;
	animation-duration: 8s;
	animation-iteration-count: infinite;
}


/* Layer - Storefronts */

.wpfox-animated-hero .layer#storefronts {
	height: 565em;
	bottom: 0;
	left: 50%;
	transform: translate(-50%);
}

.wpfox-animated-hero .layer#storefronts > .wrapper > .bgimage img {
}

.wpfox-animated-hero .element#storefronts-main {
	height: 100%;
	width: auto;
	margin: 0 calc(-25em) 0 calc(-15em);
}

.wpfox-animated-hero .element#storefronts-main img {
	
}

.wpfox-animated-hero .piece#hampden-hall-sign {
	width: 100em;
	top: 152em;
	left: 1858em;
}

.wpfox-animated-hero .element#love-building {
	width: 297em;
	top: 75em;
	left: 503em;
}

.wpfox-animated-hero .piece#love-hands {
	top: 37em;
	width: 193em;
	left: 56em;
	opacity: 0.65;
	transform: rotate(-6deg);
}

.wpfox-animated-hero .element#tree-1 {
	width: 130em;
	bottom: 154em;
	left: 190em;
}

.wpfox-animated-hero .element#tree-2 {
	width: 100em;
	bottom: 154em;
	left: 450em;
}

.wpfox-animated-hero .element#tree-3 {
	width: 130em;
	bottom: 154em;
	left: 1090em;
}

.wpfox-animated-hero .element#tree-4 {
	width: 140em;
	bottom: 154em;
	left: 1670em;
}


/* Layer - Parade */

.wpfox-animated-hero .layer#parade {
	background-color: rgba(255,255,255,0.35);
}

.wpfox-animated-hero .layer#parade > .wrapper > .bgimage img {
}


/* Layer - Parade (Scrolling) */

@keyframes parade {
	0% { left: 0; }
	100% { left: calc(-1 * var(--parade-width)); }
}

.wpfox-animated-hero #parade.scrolling {
}

.wpfox-animated-hero #parade.scrolling > .wrapper {
	transform: translateX(0em);
}

.wpfox-animated-hero #parade.scrolling > .wrapper .set {
	animation-name: parade;
	animation-duration: var(--parade-time);
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

.wpfox-animated-hero #parade.scrolling > .wrapper .set-1 {
	position: relative;
	height: 100%;
}

.wpfox-animated-hero #parade.scrolling > .wrapper .set-2 {
	position: relative;
	transform: translateX(var(--parade-width));
}


/* Sponsor Float */

@keyframes sponsorfloat {
	0% { transform: rotate(-0.15deg); }
	50% { transform: rotate(0.15deg); }
	100% { transform: rotate(-0.15deg); }
}

#sponsor-float {
	animation-name: sponsorfloat;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	transform: rotate(-0.15deg);
	transform-origin: 50% 90%;
	animation-timing-function: linear;
}


/* Krampus */

@keyframes krampus {
	0% { transform: rotate(-3deg); }
	50% { transform: rotate(3deg); }
	100% { transform: rotate(-3deg); }
}

#krampus {
	width: 300em;
	bottom: 74em;
	left: 140em;
	animation-name: krampus;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	transform: rotate(-3deg);
	transform-origin: 50% 90%;
	animation-timing-function: linear;
}

#krampus > .wrapper > .bgimage img {
	opacity: 0;
}

#krampus-body {
	top: 0%;
	left: 15%;
	width: 66%;
}

@keyframes krampus-right-arm {
	0% { transform: rotate(0deg); }
	92% { transform: rotate(0deg); }
	94% { transform: rotate(-40deg); }
	96% { transform: rotate(0deg); }
	98% { transform: rotate(-60deg); }
	100% { transform: rotate(0deg); }
}

#krampus-right-arm {
	width: 30%;
	top: 21%;
	transform: rotate(0deg);
	transform-origin: 100% 70%;
	animation-name: krampus-right-arm;
	animation-duration: 6s;
	animation-delay: 1s;
	animation-iteration-count: infinite;
}

@keyframes krampus-left-arm {
	0% { transform: rotate(-15deg); }
	50% { transform: rotate(5deg); }
	100% { transform: rotate(-15deg); }
}

#krampus-left-arm {
	width: 43%;
	top: 35%;
	transform: rotate(-10deg);
	transform-origin: 70% 5%;
	animation-name: krampus-left-arm;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	left: 36%;
}

@keyframes krampus-eyebrows {
	0% { top: 27%; }
	92% { top: 27%; }
	94% { top: 25%; }
	96% { top: 27%; }
	98% { top: 25%; }
	100% { top: 27%; }
}

#krampus-tooth {
	width: 1.8%;
	left: 30.4%;
	top: 45.2%;
}

#krampus-eyebrows {
	width: 20%;
	left: 18%;
	top: 27%;
	animation-name: krampus-eyebrows;
	animation-duration: 6s;
	animation-iteration-count: infinite;
}

@keyframes krampus-tongue {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

#krampus-tongue {
	width: 25%;
	top: 46.7%;
	left: 8.1%;
	transform: rotate(0deg);
	transform-origin: 90% 0%;
	animation-name: krampus-tongue;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes krampus-tail {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(30deg); }
	100% { transform: rotate(0deg); }
}

#krampus-tail {
	width: 24%;
	left: 76%;
	top: 46%;
	transform: rotate(0deg);
	transform-origin: 0% 50%;
	animation-name: krampus-tail;
	animation-duration: 6s;
	animation-iteration-count: infinite;
}


/* Santa */

@keyframes santa {
	0% { transform: translateY(0em); }
	50% { transform: translateY(-80em); }
	100% { transform: translateY(0em); }
}

#santa {
	--kerr-width: 3em;
	--kerr-scale: 1;
	width: 560em;
	bottom: 80em;
	left: 700em;
	animation-name: santa;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	transform: translateY(0em);
}

#santa > .wrapper > .bgimage img {
	width: 100%;
	opacity: 0;
}

#santa-main img {
	width: 100%;
}

@keyframes santa-right-arm {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(-20deg); }
	100% { transform: rotate(0deg); }
}

#santa-right-arm {
	width: 10%;
	left: 53%;
	top: 28%;
	transform: rotate(0deg);
	transform-origin: 80% 80%;
	animation-name: santa-right-arm;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes noseanimation {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

#rednose {
	left: -2em;
	top: 39em;
	width: 30em;
	opacity: 0;
	animation-name: noseanimation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes kerr-head {
	0% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
	100% { transform: rotate(-5deg); }
}

#kerr-head {
	--part-width: 21;
	left: 566em;
	top: 25em;
	width: calc(var(--kerr-width) * var(--part-width));
	transform-origin: bottom center;
	transform: rotate(-5deg);
	animation-name: kerr-head;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#kerr-head img {
	width: 100%;
}

#kerr-torso {
	--part-width: 16.0137;
	--part-width: 15.214;
	left: 576em;
	top: 90em;
	width: calc(var(--kerr-width) * var(--part-width));
	transform-origin: top center;
	transform: rotate(25deg);
	filter: brightness(99%);
}

#kerr-torso img {
	width: 100%;
}

#kerr-logo {
	/* --part-width: 16.0137; */
	--part-width: 10;
	left: 572em;
	top: 114em;
	width: calc(var(--kerr-width) * var(--part-width));
	transform-origin: top center;
	transform: rotate(25deg);
}

#kerr-logo img {
	width: 100%;
}

#kerr-arm-left {
	--part-width: 9.573;
	left: 610em;
	top: 102em;
	width: calc(var(--kerr-width) * var(--part-width));
	transform: rotate(80deg);
	transform-origin: top left;
}

#kerr-arm-left img {
	width: 100%;
}

@keyframes kerr-arm-right {
	0% { transform: rotate(130deg); }
	50% { transform: rotate(140deg); }
	100% { transform: rotate(130deg); }
}

#kerr-arm-right {
	--part-width: 10.4529;
	left: 575em;
	top: 144em;
	width: calc(var(--kerr-width) * var(--part-width));
	transform-origin: 87% -10%;
	transform: rotate(130deg);
	animation-name: kerr-arm-right;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#kerr-arm-right img {
	width: 100%;
}

#kerr-leg-left {
	--part-width: 23.6801;
	left: 500em;
	top: 184em;
	width: calc(var(--kerr-width) * var(--part-width));
	transform-origin: top right;
	transform: rotate(30deg);
	filter: hue-rotate(180deg) brightness(80%) saturate(10%);
}

#kerr-leg-left img {
	width: 100%;
}

@keyframes kerr-leg-right {
	0% { transform: rotate(30deg); }
	50% { transform: rotate(-30deg); }
	100% { transform: rotate(30deg); }
}

#kerr-leg-right {
	--part-width: 17.8085;
	left: 531em;
	top: 163em;
	width: calc(var(--kerr-width) * var(--part-width));
	transform-origin: top center;
	transform: rotate(30deg);
	animation-name: kerr-leg-right;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	filter: hue-rotate(180deg) brightness(80%) saturate(10%);
}

#kerr-leg-right img {
	width: 100%;
}




/* Band */

#parade {
	--band-width: 740em;
	--band-left: 1410em;
	--band-bottom: 74em;
}

#band {
	width: var(--band-width);
	bottom: var(--band-bottom);
	left: var(--band-left);
}

#band img {
	opacity: 0.5;
}

@keyframes band-walk {
	0% { transform: rotate(-1deg); }
	50% { transform: rotate(1deg); }
	100% { transform: rotate(-1deg); }
}

#band-1 {
	width: calc(var(--band-width) * 0.2025753339);
	bottom: calc(var(--band-bottom) + var(--band-width) * 0);
	left: calc(var(--band-left) + var(--band-width) * 0);
	animation-name: band-walk;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	transform: rotate(-1deg);
	transform-origin: 50% 90%;
	animation-timing-function: linear;
}

#band-1 > .wrapper > .bgimage img {
	opacity: 0;
}

#band-1-main {
	width: 58%;
	top: 2.4%;
	left: 25.3%;
}

@keyframes band-1-right-arm {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(30deg); }
	100% { transform: rotate(0deg); }
}

#band-1-right-arm {
	width: 37%;
	top: 0%;
	left: 17.5%;
	transform: rotate(0deg);
	transform-origin: 100% 75%;
	animation-name: band-1-right-arm;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes band-1-left-arm {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(5deg); }
	100% { transform: rotate(0deg); }
}

#band-1-left-arm {
	width: 16%;
	top: 44%;
	left: 59%;
	transform: rotate(0deg);
	transform-origin: 45% 5%;
	animation-name: band-1-left-arm;
	animation-duration: 6s;
	animation-iteration-count: infinite;
}

#band-1-left-leg {
	width: 40%;
	top: 77%;
	left: 0%;
}

#band-1-right-leg {
	width: 33%;
	top: 76.7%;
	left: 67.1%;
}

#band-2 {
	width: calc(var(--band-width) * 0.2166248733);
	bottom: calc(var(--band-bottom) + var(--band-width) * 0);
	left: calc(var(--band-left) + var(--band-width) * 0.165);
	animation-name: band-walk;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	transform: rotate(-1deg);
	transform-origin: 50% 90%;
	animation-timing-function: linear;
}

#band-2 > .wrapper > .bgimage img {
	opacity: 0;
}

#band-2-main {
	width: 100%;
	top: 0%;
	left: 0%;
}

@keyframes band-2-right-arm {
	0% { transform: rotate(0deg); }
	45% { transform: rotate(0deg); }
	50% { transform: rotate(-30deg); }
	95% { transform: rotate(-30deg); }
	100% { transform: rotate(0deg); }
}

#band-2-right-arm {
	width: 30.4%;
	top: 16%;
	left: 50.3%;
	transform: rotate(0deg);
	transform-origin: 95% 85%;
	animation-name: band-2-right-arm;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes band-2-left-arm {
	0% { transform: rotate(0deg); }
	40% { transform: rotate(0deg); }
	50% { transform: rotate(30deg); }
	90% { transform: rotate(30deg); }
	100% { transform: rotate(0deg); }
}

#band-2-left-arm {
	width: 57.2%;
	top: 34.1%;
	left: 23.7%;
	transform: rotate(0deg);
	transform-origin: 95% 70%;
	animation-name: band-2-left-arm;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#band-2-left-leg {
	width: 43%;
	top: 63.2%;
	left: 37%;
}

#band-2-right-leg {
	width: 26%;
	top: 61%;
	left: 57%;
}

#band-3 {
	width: calc(var(--band-width) * 0.2140674936);
	bottom: calc(var(--band-bottom) + var(--band-width) * 0);
	left: calc(var(--band-left) + var(--band-width) * 0.375);
	animation-name: band-walk;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	transform: rotate(-1deg);
	transform-origin: 50% 90%;
	animation-timing-function: linear;
}

#band-3 > .wrapper > .bgimage img {
	opacity: 0;
}

#band-3-main {
	width: 35.1%;
	top: 50.2%;
	left: 37.8%;
}

@keyframes band-3-top {
	0% { transform: rotate(0deg); }
	40% { transform: rotate(0deg); }
	50% { transform: rotate(-20deg); }
	90% { transform: rotate(-20deg); }
	100% { transform: rotate(0deg); }
}

#band-3-top {
	width: 95%;
	top: 0%;
	left: 5.5%;
	transform: rotate(0deg);
	transform-origin: 60% 75%;
	animation-name: band-3-top;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#band-3-left-arm {
	width: 28%;
	top: 39.3%;
	left: 38.8%;
	transform: rotate(0deg);
	transform-origin: 60% 75%;
	animation-name: band-3-top;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#band-3-left-leg {
	width: 65%;
	top: 73.6%;
	left: 0%;
}

#band-3-right-leg {
	width: 33%;
	top: 72%;
	left: 40.5%;
}

#band-4 {
	width: calc(var(--band-width) * 0.2009714651);
	bottom: calc(var(--band-bottom) + var(--band-width) * 0);
	left: calc(var(--band-left) + var(--band-width) * 0.57);
	animation-name: band-walk;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	transform: rotate(-1deg);
	transform-origin: 50% 90%;
	animation-timing-function: linear;
}

#band-4 > .wrapper > .bgimage img {
	opacity: 0;
}

#band-4-main {
	width: 57%;
	top: 33.6%;
	left: 39.8%;
}

@keyframes band-4-top {
	0% { transform: rotate(0deg); }
	40% { transform: rotate(0deg); }
	50% { transform: rotate(25deg); }
	90% { transform: rotate(25deg); }
	100% { transform: rotate(0deg); }
}

#band-4-top {
	width: 100%;
	top: 0%;
	left: 0%;
	transform: rotate(0deg);
	transform-origin: 71% 65%;
	animation-name: band-4-top;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#band-4-left-arm {
	width: 45%;
	top: 27.8%;
	left: 33.4%;
	transform: rotate(0deg);
	transform-origin: 84% 75%;
	animation-name: band-4-top;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#band-4-left-leg {
	width: 28%;
	top: 67.2%;
	left: 71.3%;
}

#band-4-right-leg {
	width: 27%;
	top: 73.2%;
	left: 35.3%;
}

#band-5 {
	width: calc(var(--band-width) * 0.2770531328);
	bottom: calc(var(--band-bottom) + var(--band-width) * 0.003);
	left: calc(var(--band-left) + var(--band-width) * 0.7235);
	animation-name: band-walk;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	transform: rotate(-1deg);
	transform-origin: 50% 90%;
	animation-timing-function: linear;
}

#band-5 > .wrapper > .bgimage img {
	opacity: 0;
}

#band-5-main {
	width: 35.5%;
	top: 58%;
	left: 43.5%;
}

@keyframes band-5-top {
	0% { transform: rotate(0deg); }
	40% { transform: rotate(0deg); }
	50% { transform: rotate(-5deg); }
	90% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}

#band-5-top {
	width: 100%;
	top: 0%;
	left: 0%;
	transform: rotate(0deg);
	transform-origin: 70% 68%;
	animation-name: band-5-top;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

#band-5-collar {
	width: 16.1%;
	top: 56%;
	left: 62.5%;
}

#band-5-shoulder {
	width: 5.5%;
	top: 59.3%;
	left: 72.2%;
}

#band-5-left-leg {
	width: 45%;
	top: 74.4%;
	left: 30.6%;
}

#band-5-right-leg {
	width: 29%;
	top: 77.6%;
	left: 56%;
}


/* Layer - Snow Bottom */

#snow-bottom {
	height: 60em;
	bottom: 0;
	opacity: 1;
	z-index: 2;
}

#snow-bottom > .wrapper > .bgimage img {
}