/* Whole Page Styles */
.page-template-advent-calendar {
	padding-top: 0;
	background-color: #dbe9f6;
}

/* Christmas Titles */
.advent-calendar-title {
	color: #191919;
	font-size: 1.65rem;
	font-family: 'Mountains of Christmas';
	font-weight: 700;
	font-variant: normal;
}

@media screen and (min-width: 800px) {
	 .advent-calendar-title {
		font-size: 1.85rem;
	}
}

@media screen and (min-width: 1024px) {
	 .advent-calendar-title {
		font-size: 2rem;
	}
}

/* Illustrations Coverage Styles */
.ac-intro__mountains,
.ac-intro__snow-mound-left,
.ac-intro__snow-mound-left:after,
.ac-intro__snow-mound-middle,
.ac-intro__snow-mound-middle:after,
.ac-intro__snow-mound-right,
.ac-intro__snow-mound-right:after,
.ac-intro__datanode,
.ac-intro__datanode:after,
.ac-intro__elf-left,
.ac-intro__elf-left:after,
.ac-intro__elf-left--final,
.ac-intro__elf-left--final:after,
.ac-intro__elf-middle,
.ac-intro__elf-middle:after,
.ac-intro__elf-middle--final,
.ac-intro__elf-middle--final:after,
.ac-intro__elf-right,
.ac-intro__elf-right:after,
.ac-intro__elf-right--final,
.ac-intro__elf-right--final:after,
.advent-question-box__base,
.ac-instructions__topper,
.ac-footer__topper {
	content: '';
	display: block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Intro */
.ac-intro {
	position: relative;
	text-align: center;
	margin-top: 0;
	padding-top: 2em;
	padding-bottom: calc(28.80859375% + 2em);
	overflow: hidden;
}

@media screen and (min-width: 600px) {
	.ac-intro {
		padding-top: 3em;
	}
}
@media screen and (min-width: 800px) {
	.ac-intro {
		padding-top: 3.5em;
	}
}
@media screen and (min-width: 1024px) {
	.ac-intro {
		padding-top: 4.5em;
	}
}
@media screen and (min-width: 1120px) {
	.ac-intro {
		padding-top: 6em;
	}
}

.ac-intro .wrapper {
	max-width: 800px;
	margin: 0 auto;
}

.ac-intro__content {
	position: relative;
	z-index: 100;
}

/* Mountain Background */
.ac-intro__mountains {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 28.80859375%;
	background-image: url('../img/advent-calendar/mountains.png');
	z-index: 50;
}

/* Snow Mounds */
.ac-intro__snow-mound-left,
.ac-intro__snow-mound-middle,
.ac-intro__snow-mound-right {
	position: absolute;
	bottom: 0;
	width: 28%;
	z-index: 100;
}

/* Snow Mound Left */
.ac-intro__snow-mound-left {
	left: 7%;
}
.ac-intro__snow-mound-left:after {
	padding-bottom: 9.97566909975669%;
	background-image: url('../img/advent-calendar/snow-mound-left.png');
}

/* Snow Mound Middle */
.ac-intro__snow-mound-middle {
	left: 42%;
	width: 17%;
}
.ac-intro__snow-mound-middle:after {
	padding-bottom: 15.48%;
	background-image: url('../img/advent-calendar/snow-mound-middle.png');
}

/* Snow Mound Right */
.ac-intro__snow-mound-right {
	right: 5%;
}
.ac-intro__snow-mound-right:after {
	padding-bottom: 11.19221411192214%;
	background-image: url('../img/advent-calendar/snow-mound-right.png');
}

/* Data Node + Elf Left */
.ac-intro__datanode,
.ac-intro__elf-left,
.ac-intro__elf-left--final {
	position: absolute;
	bottom: 0;
	left: 9%;
	width: 31%;
}
.ac-intro__datanode:after,
.ac-intro__elf-left:after,
.ac-intro__elf-left--final:after {
	padding-bottom: 105.1063829787234%;
}

/* Data Node  */
.ac-intro__datanode {
	z-index: 75;
}
.ac-intro__datanode:after {
	background-image: url('../img/advent-calendar/vw-kiss.png');
}

/* Elf Left */
.ac-intro__elf-left {
	z-index: 60;
	transform: scale(.15);
	transform-origin: 32% bottom;
	transition: transform 2s cubic-bezier(.68, 1, .32, 1.2);
}
.ac-intro__elf-left--enter {
	transform: scale(1);
}
.ac-intro__elf-left:after {
	background-image: url('../img/advent-calendar/elf-left.png');
}

/* Elf Middle */
.ac-intro__elf-middle,
.ac-intro__elf-middle--final {
	position: absolute;
	bottom: 0;
	left: 42%;
	width: 17%;
	z-index: 60;
}
.ac-intro__elf-middle {
	transform: translateY(100%);
	transition: transform 1.2s cubic-bezier(.68, 1, .32, 1.2) 3.5s;
}
.ac-intro__elf-middle--enter {
	transform: translateY(0%);
}

.ac-intro__elf-middle:after,
.ac-intro__elf-middle--final:after {
	padding-bottom: 141.49%;
}

.ac-intro__elf-middle:after {
	background-image: url('../img/advent-calendar/elf-middle.png');
}

/* Elf Right */
.ac-intro__elf-right,
.ac-intro__elf-right--final {
	position: absolute;
	bottom: 0;
	right: 12%;
	width: 19%;
	z-index: 60;
}
.ac-intro__elf-right {
	transform: translateY(100%);
	transition: transform 1.2s cubic-bezier(.68, 1, .32, 1.2) 2.3s;
}
.ac-intro__elf-right--enter {
	transform: translateY(0%);
}

.ac-intro__elf-right:after,
.ac-intro__elf-right--final:after {
	padding-bottom: 154.79876160990713%;
}

.ac-intro__elf-right:after {
	background-image: url('../img/advent-calendar/elf-right.png');
}

/* Snowflakes */
.ac-intro__snow {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 55;
}
.ac-flake {
	position: absolute;
	width: 40px;
	height: 40px;
	animation-name: falling;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.ac-flake__vw {
	width: 100%;
	height: 100%;
}

@keyframes falling {
	0% {
		top: -50px;
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	80% {
		opacity: 0;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}

/* Boxes Output */
.advent-calendar {
	margin-top: 0;
	padding: 2em 0;
	background-color: #fff;
}

@media screen and (min-width: 800px) {
	.advent-calendar {
		padding: 3em 0;
	}
}

@media screen and (min-width: 1024px) {
	.advent-calendar {
		padding: 4em 0;
	}
}

@media screen and (min-width: 1240px) {
	.advent-calendar {
		padding: 6em 0;
	}
}

.advent-question-box__base {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding-bottom: 6.61641541038526%;
	background-image: url('../img/advent-calendar/instructions-topper.png');
	transform: scale(-1, -1);
	z-index: 50;
}

/* Instructions */
.ac-instructions {
	position: relative;
	margin-top: 0;
	padding: calc(6.61641541038526% + 2em) 0 2em;
}

.ac-instructions__topper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: 6.61641541038526%;
	background-image: url('../img/advent-calendar/instructions-topper.png');
	z-index: 50;
}

@media screen and (min-width: 800px) {
	.ac-instructions {
		padding: calc(6.61641541038526% + 3em) 0 3em;
	}
}
@media screen and (min-width: 1024px) {
	.ac-instructions {
		padding: calc(6.61641541038526% + 4em) 0 4em;
	}

}
@media screen and (min-width: 1240px) {
	.ac-instructions {
		padding: calc(6.61641541038526% + 6em) 0 6em;
	}
}

/* Footer */
.ac-footer {
	position: relative;
	margin-top: 0;
	padding-top: 30.22%;
	background: #fff;
	text-align: center;
}

.ac-footer .wrapper {
	padding-top: .5em;
}

.ac-footer__topper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: 30.22%;
	background-image: url('../img/advent-calendar/footer-kiss-topper.jpg');
	z-index: 50;
}

.ac-footer h2 {
	margin: 0;
}

/* Share Links */
.ac-share__icons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 140px;
	margin: 1em auto 0;
}
.ac-share__link {
	display: flex;
	align-items: center;
	justify-content: center;
}
.ac-share__icon {
	width: 26px;
	height: 26px;
}


@media screen and (min-width: 600px) {
	.ac-footer .wrapper {
		padding-top: 0;
	}
}

@media screen and (min-width: 1024px) {
	.ac-share__icons {
		width: 200px;
		margin-top: 2em;
	}

	.ac-share__icon {
		width: 32px;
		height: 32px;
	}
}