/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/* TODO: GIVE USER OPTION TO TURN OFF ALL AUDIO */

/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");

.block#advent {
	background-color: black !important;
}

.page {
	--advent-origin-x: 0%;
	--advent-origin-y: 0%;
}

.advent-moments-calendar {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.advent-moments-calendar img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	margin: 0 !important;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.advent-calendar-door {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 0px;
	flex: 1 1 0;
	max-width: 33.3333%;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 33.3333%;
	flex: 0 0 33.3333%;
}

/* 25 December */
.advent-calendar-door.door-1 {
	max-width: 100%;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
}

/* Position the door itself inside the container */
.advent-calendar-door a {
	-webkit-transform-origin: left;
	-ms-transform-origin: left;
	transform-origin: left;
	-webkit-transition: opacity 1s ease-out, -webkit-transform 0.5s ease-in-out;
	transition: opacity 1s ease-out, -webkit-transform 0.5s ease-in-out;
	-o-transition: transform 0.5s ease-in-out, opacity 1s ease-out;
	transition: transform 0.5s ease-in-out, opacity 1s ease-out;
	transition: transform 0.5s ease-in-out, opacity 1s ease-out,
		-webkit-transform 0.5s ease-in-out;
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background-position: center;
	background-size: calc(100% + 20px);
	z-index: 1;
}

.advent-calendar-door:not(.is-complete) a {
	border: 1px solid rgba(255, 255, 255, 0.2);
}

/* White Box behind the anchor */
.advent-calendar-door:not(.is-complete)::after {
	content: "";
	position: absolute;
	top: 10px;
	left: 10px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	background: linear-gradient(
		0deg,
		var(--advent-door-bg, white) 0%,
		var(--advent-door-bg-alt, white) 100%
	);
	z-index: 0;
}

.advent-calendar-door.is-hovered:not(.is-complete) a {
	z-index: 10;
	/*prespectiv creates the door open effect*/
	-webkit-transform: perspective(1200px) translateZ(0px) translateX(0px)
		translateY(0px) rotateY(-35deg);
	transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px)
		rotateY(-35deg);
}

.advent-calendar-door.is-opening:not(.is-complete) a {
	z-index: 10;
	/*prespectiv creates the door open effect*/
	-webkit-transform: perspective(1200px) translateZ(0px) translateX(0px)
		translateY(0px) rotateY(-85deg);
	transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px)
		rotateY(-85deg);
	/* opacity: 0; */
}

.advent-calendar-day {
	position: absolute;
	color: white;
	font-family: "Lora", serif;
	font-size: 2em;
}

.advent-calendar-door {
	position: relative;
}
.advent-calendar-closed,
.advent-calendar-open {
	width: 100%;
	height: 100%;
}

.advent-calendar-open {
	display: none;
}

.advent-open-door,
.advent-closed-door {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 100%;
	width: 100%;
}

.advent-closed-door {
	cursor: default;
}

.advent-moments-modal-challenge {
	font-family: "Lora", serif;
	font-size: 1.6em;
	line-height: 1.3;
}

.advent-moments-modal-bibleverse {
	font-style: italic;
	line-height: 1.4;
	font-size: 1.1em;
}

.advent-calendar-door.is-complete a {
	-webkit-transition: none;
	-o-transition: none;
	transition: none;
}

/* ANIMATION */
.advent-open-door:hover,
.advent-open-door:focus {
	-webkit-animation: glowing 2000ms infinite;
	animation: glowing 2000ms infinite;
}

/* COMPLETED DOOR */
.advent-calendar-door.is-complete .advent-open-door {
	-webkit-animation: none !important;
	animation: none !important;
}

.advent-calendar-door.is-complete .advent-calendar-day {
	background: black;
	border-radius: 500px;
	width: 2.2ch;
	height: 2.2ch;
	line-height: 1;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	text-align: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 1.7em;
	opacity: 0.2;
}

@-webkit-keyframes glowing {
	0% {
		-webkit-box-shadow: 0 0 -10px #c4a300;
		box-shadow: 0 0 -10px #c4a300;
	}
	40% {
		-webkit-box-shadow: 0 0 20px #c4a300;
		box-shadow: 0 0 20px #c4a300;
	}
	60% {
		-webkit-box-shadow: 0 0 20px #c4a300;
		box-shadow: 0 0 20px #c4a300;
	}
	100% {
		-webkit-box-shadow: 0 0 -10px #c4a300;
		box-shadow: 0 0 -10px #c4a300;
	}
}

@keyframes glowing {
	0% {
		-webkit-box-shadow: 0 0 -10px #c4a300;
		box-shadow: 0 0 -10px #c4a300;
	}
	40% {
		-webkit-box-shadow: 0 0 20px #c4a300;
		box-shadow: 0 0 20px #c4a300;
	}
	60% {
		-webkit-box-shadow: 0 0 20px #c4a300;
		box-shadow: 0 0 20px #c4a300;
	}
	100% {
		-webkit-box-shadow: 0 0 -10px #c4a300;
		box-shadow: 0 0 -10px #c4a300;
	}
}

/*  MODAL */

.mfp-christmas .mfp-close {
	color: black !important;
}

.mfp-christmas .modal {
	border-radius: 0.5rem;
	background: -o-linear-gradient(
		151deg,
		var(--advent-modal-bg, #f8f7e5) 45%,
		var(--advent-modal-bg-accent, #e1dfbf) 100%
	);
	background: linear-gradient(
		299deg,
		var(--advent-modal-bg, #f8f7e5) 45%,
		var(--advent-modal-bg-accent, #e1dfbf) 100%
	);
	outline: 21px solid rgba(255, 255, 255, 0.1);
	-webkit-animation: modalbackground 3s linear infinite;
	animation: modalbackground 3s linear infinite;
	background-size: 300% 300%;
}
@-webkit-keyframes modalbackground {
	0% {
		background-position: 0 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	to {
		background-position: 0 50%;
	}
}
@keyframes modalbackground {
	0% {
		background-position: 0 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	to {
		background-position: 0 50%;
	}
}

/* overlay at start */
.mfp-christmas.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.35s ease-in-out;
	-o-transition: all 0.35s ease-in-out;
	transition: all 0.35s ease-in-out;
}
/* overlay animate in */
.mfp-christmas.mfp-bg.mfp-ready {
	opacity: 0.98;
	background-color: #010226;
}
/* overlay animate out */
.mfp-christmas.mfp-bg.mfp-removing {
	opacity: 0;
}

/* content at start */
.mfp-christmas.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-transform: translate(var(--advent-origin-x), var(--advent-origin-y))
		scale(0);
	-ms-transform: translate(var(--advent-origin-x), var(--advent-origin-y))
		scale(0);
	transform: translate(var(--advent-origin-x), var(--advent-origin-y)) scale(0);
}

/* Transform origins */
.mfp-christmas.mfp-wrap.from-right .mfp-content {
	/* transform-origin: right; */
}

.mfp-christmas.mfp-wrap.from-left .mfp-content {
	/* transform-origin: left; */
}

/* content animate it */
.mfp-christmas.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	-webkit-transform: translate(0) scale(1);
	-ms-transform: translate(0) scale(1);
	transform: translate(0) scale(1);
}
/* content animate out */
.mfp-christmas.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}

/* Participants */
.mfp-christmas .moments-counter {
	color: #470a68;
	font-weight: bold;
	font-size: 1.2em;
}

.hidden-audio {
	display: none;
}