/* Whole Page Styles */
.page-template-advent-calendar {
	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-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-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-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 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/data-node.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 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;
}

.advent-calendar__output {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	gap: 1em;
	grid-template-areas: '.';
}

.advent-calendar__box {
	padding: .65em 0;
	border: solid #c6d8e6 3px;
	border-radius: 6px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 2px 6px;
	text-align: center;
}

.advent-calendar__box--unlocked {
	cursor: pointer;
}

.advent-calendar__box--locked {
	border-color: #dde5f0;
}

.advent-calendar__date {
	margin: 0 0 .35rem;
	font-size: 1.5rem;
	font-weight: 600;
}

.advent-calendar__open {
	margin: 0;
	font-size: .85rem;
}
.advent-calendar__lock {
	width: 16px;
}

@media screen and (min-width: 560px) {
	.advent-calendar__output {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

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

	.advent-calendar__output {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}

@media screen and (min-width: 1024px) {
	.advent-calendar {
		padding: 4em 0;
	}
	.advent-calendar__output {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	}

	.advent-calendar__box {
		padding: .85em 0;
	}
}

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

/* Question Box */
.advent-question-box {
	display: none;
}

.glightbox-container .advent-question-box,
.glightbox-container .advent-question-box .new-form {
	display: block;
	position: relative;
	z-index: 10;
}

.gslide-inline .ginlined-content {
	padding: 0;
}

.advent-question-box__content {
	background-color: #dbe9f6;
	position: relative;
	padding: 2em 1em calc(6.61641541038526% + 2em);
}

.advent-question-box__content .advent-calendar-title {
	margin: 0;
	text-align: center;
}

.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;
}

/* Question Form */
#advent-calendar-form {
	margin-top: 2em;
}

.new-form__label--question {
	margin-bottom: 1.5rem;
}

#advent-calendar-form .new-form__input,
#advent-calendar-form .new-form__submit,
#advent-calendar-form .radio__fake {
	border-color: #3172a5;
}

#advent-calendar-form .new-form__input {
	background-color: transparent;
}

#advent-calendar-form .radio__input:checked + .radio__fake::after {
	background-color: #3172a5;
}

#advent-calendar-form .radio__input:focus + .radio__fake  {
	box-shadow: #3172a5 0 1px 4px;
}

.messages--advent .messages__message--success {
	color: #3172a5;
}

.messages--share {
	display: none;
	margin-top: 2em;
}

/* 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: 11.81640625%;
	background: #fff;
	text-align: center;
}

.ac-footer__topper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-bottom: 11.81640625%;
	background-image: url('../img/advent-calendar/footer-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: 1024px) {
	.ac-share__icons {
		width: 200px;
		margin-top: 2em;
	}

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