@charset "utf-8";
html, body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	font-size: 1.1rem;
	line-height: 1rem;
	font-family: "Playfair Display", serif;
}
body {
	overflow: hidden;
}
body.loaded {
	overflow: auto;
}
@keyframes rotate {
	0% {
		transform: rotateY(71deg);
	}
	80% {
		transform: rotateY(-71deg);
	}
	100% {
		transform: rotateY(0deg);
	}
}
@keyframes removeit {
	0% { content:""; }
	100% { content:none; height:0; width:0; }
}
#main {
    opacity: 0;
    width: 100vw;
	transform: rotateY(71deg);
    transform-style: preserve-3d;
    position: relative;
    animation: rotate 3s forwards 2s;
}
.loaded #main:before {
    position: absolute;
    display: block;
    content: "";
    right: 0;
    width: 2vw;
    height: 100%;
    background: white;
    transform: rotateY(-90deg);
    animation: removeit 0.02s forwards 4s;
    transform-origin: right;
}
.loaded #main:after {
    position: absolute;
    display: block;
    content: "";
    left: 0;
    width: 2vw;
    height: 100%;
    background: white;
    transform: rotateY(90deg);
    animation: removeit 0.02s forwards 4s;
    transform-origin: left;
}
@keyframes zoom {
	0% {
		transform: scale(0.2);
		bottom: 29vw;
		right: 2vw;
	}
	99.99% {
		transform: scale(1);
		bottom: 0;
		right: 0;
	}
	100% {
		transform: scale(1);
		bottom: 0;
		right: 0;
		position: relative;
		overflow: hidden;
	}
}
.loaded #main-outer {
    transform: scale(0.2);
	transform-origin: bottom right;
	position: absolute;
	bottom: 29vw;
	right: 2vw;
	animation: zoom 1s forwards 3s;
	max-width: 100vw;
}
@media screen and (max-width:767px) {
    .loaded #main-outer {
        transform: scale(0.11);
    }
}
.loaded #main {
	opacity: 1;

}
.loaded .calendar-shadow {
	width: 100%;
	height: 11%;
	position: absolute;
	display: block;
	content: "";
	bottom: -1%;
	left: 0;
	background: black;
	opacity: 0.8;
	transform: rotateX(73deg);
	transform-origin: bottom;
	filter: blur(6vw);
	animation: removeit 0.02s forwards 4s;
}
.bg {
	background: url("../images/engage-web-office-at-christmas.jpg") no-repeat top;
	background-size: cover;
	min-height: 100vh;
}

/* Text */

h1,h2,h3,h4,.h1,.h2.h3,.h4 {
	letter-spacing: -0.044em;
}
p {
	letter-spacing: -0.031em;
}
.text-white, .text-light {
	text-shadow: 1px 1px 2px #00000040;
}

/* Calendar */

.calendar {
	opacity: 0;
}
.loaded .calendar {
	opacity: 1;
	transition: all 0.4s;
	transition-delay: 3.1s;
}
.door {
	position: relative;
	perspective: 800px; 
	z-index: 666;
	cursor: pointer;
}
.door .number, .door .number h2 {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.door .number {
	border: 1px dashed white;
	border-left: 1px solid white;
}
.door .door-inner {
	opacity: 0;
	border-right: 1px solid white;
	border-top: 1px solid white;
	border-bottom: 1px solid white;
	transition: all .2s ease-out;
}
.door .door-inner .naughty {
	user-select: none;
	font-size: 2.9vmin;
  	line-height: 3.1vmin;
	background: #333;
}
.door .number {
	transform-style: preserve-3d;
	transform-origin: 0;
	perspective: 800px; 
	text-align: center;
	cursor: pointer;
	transition: all .2s ease-out;
}
.loaded .door.past-it .number {
	transform: rotateY(-31deg);
	transition-delay: 4.2s;
}
.loaded .door.past-it .door-inner {
	opacity: 0.4;
	transition-delay: 4.2s;
}
.loaded .door:hover .door-inner {
	transition: all .25s ease-in;
	opacity: 1;
}
.loaded .door:hover, .loaded .door:active {
	z-index: 999;
}
.loaded .door:hover .number, .loaded .door.past-it:hover .number {  
	transform: rotateY(-97deg);
	perspective-origin: 0;
	transition: all .25s ease-in;
	transition-delay: 0s;
	--bs-bg-opacity: 1;
}

/* Logo */

svg.logo {
	margin: 0.2vw;
	width: 5.3vw;
	max-height: 20vw;
}
@keyframes letters {
	0% {
		stroke-dashoffset: 1009.609;
		fill: transparent;
	}
	75% {
		stroke-dashoffset: 0;
		fill: transparent;
	}
	100% {
		stroke-dashoffset: 0;
		fill: #FFFFFF;
	}
}
@keyframes circle1 {
	0% {
		stroke-dashoffset: 1106.113;
		fill: transparent;
		stroke: #FFFFFF;
	}
	50 {
		stroke-dashoffset: 553.0565 stroke:#9f2382;
	}
	75% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: 0;
		stroke: #9f2382;
		fill: #9f2382;
	}
}
.st0 {
	fill-rule: evenodd;
	clip-rule: evenodd;
	fill: transparent;
	stroke: #A02482;
	stroke-width: 8;
	stroke-dasharray: 1106.113;
	stroke-dashoffset: 1106.113;
}
.st0a {
	animation: circle1 1s ease-in-out 1s forwards 1;
}
.st0b {
	animation: circle2 1s ease-in-out 1s forwards 1;
}
.st1 {
	fill-rule: evenodd;
	clip-rule: evenodd;
	fill: transparent;
	stroke: #FFFFFF;
	stroke-width: 8;
	stroke-dasharray: 1009.609;
	stroke-dashoffset: 1009.609;
	animation: letters 3s ease-in-out 1s forwards 1;
}
.st1a {
	animation: letters 1.5s ease-in-out 1s forwards 1;
}
.st1b {
	animation: letters 1.5s ease-in-out 2.5s forwards 1;
}

.logo-load .st0a {
	animation: circle1 1s ease-in-out 1s infinite;
}
.logo-load .st0b {
	animation: circle2 1s ease-in-out 1s infinite;
}
.logo-load .st1 {
	animation: letters 3s ease-in-out 1s infinite;
}
.logo-load .st1a {
	animation: letters 1.5s ease-in-out 1s infinite;
}
.logo-load .st1b {
	animation: letters 1.5s ease-in-out 2.5s infinite;
}
@media only screen and (max-width:1025px) {
	svg.logo {
		width: 120px;
	}
}
@media only screen and (max-width:769px) {
	svg.logo {
		width: 80px;
	}
}

/* Pop-up video */

.mpop-video {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 56.25%;
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}
.mpop-video-icon {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 56.25%;
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
}
.mpop-video-icon:before {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: white;
	opacity: 0.8;
	display: block;
	content: "";
	width: 35px;
	height: 35px;
	z-index: 2;
	opacity: 0.44;
}
.mpop-video-icon:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	content: "";
	width: 0;
	height: 0;
	margin-left:2px;
	border-top: 11px solid transparent;
	border-left: 20px solid black;
	border-bottom: 11px solid transparent;
	z-index: 3;
	transition: all 0.4s;
	opacity: 0.4;
}
@keyframes slideup {
	from {
		margin-bottom:-60vw;
	}
	to {
		margin-bottom:0;
	}
}
@keyframes pointing {
	0% {
		margin-left :0;
	}
	92% {
		margin-left :0;
	}
	94% {
		margin-left :-2vmax;
	}
	96% {
		margin-left :0;
	}
	98% {
		margin-left :-2vmax;
	}
	100% {
		margin-left :0;
	}
}
@keyframes colourchange {
	0% {
		background-color: rgba(255, 255, 255, 0.92);
	}
	92% {
		background-color: rgba(255, 255, 255, 0.92);
	}
	94% {
		background-color: rgba(255, 255, 0, 0.8);
	}
	96% {
		background-color: rgba(255, 255, 255, 0.92);
	}
	98% {
		background-color: rgba(255, 255, 0, 0.8);
	}
	100% {
		background-color: rgba(255, 255, 255, 0.92);
	}
}
@keyframes colourchangesmall {
	0% {
		background-color: rgba(255, 255, 255, 0.51);
	}
	92% {
		background-color: rgba(255, 255, 255, 0.51);
	}
	94% {
		background-color: rgba(255, 255, 0, 0.8);
	}
	96% {
		background-color: rgba(255, 255, 255, 0.51);
	}
	98% {
		background-color: rgba(255, 255, 0, 0.8);
	}
	100% {
		background-color: rgba(255, 255, 255, 0.51);
	}
}
.rotate-m90 {
	transform:rotateZ(-90deg);
}
@media screen and (min-width:992px) {
	.rotate-lg-0 {
		transform:rotateZ(0deg);
	}
}
#ryanchristmasouter {
	margin-bottom:-60vw;
	animation: slideup 0.8s forwards 6.5s, pointing 6s infinite;
}
#ryanchristmas {
	margin-top: 3.8vmax;
	background: url("../images/ryan-christmas.png") no-repeat;
	background-size: auto;
	background-size: contain;
}
#ryanchristmasbox {
	margin-bottom:-60vw;
	text-decoration: none;
	background-color: rgba(255, 255, 255, 0.92);
	animation: slideup 0.8s forwards 7.4s, colourchange 6s infinite;
}
@media screen and (max-width:991px) {
	#ryanchristmasbox {
		background-color: rgba(255, 255, 255, 0.51);
		animation: slideup 0.8s forwards 7.4s, colourchangesmall 6s infinite;
	}
}
#ryanchristmasbox:hover {
	background-color: rgba(255, 255, 0, 0.8)!important;
}

/* Room */

#room {
	background:url("../images/room.jpg") no-repeat bottom center;
	background-size: cover;
}

/* Loader */

#loader {
	z-index:2002;
	background: #9f2382;
	transition: all 2s;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
@keyframes loaderfade {
	from {
		opacity:1;
	}
	to {
		opacity:0;
	}
}
@keyframes loadergo {
	100% {
		width:0;
		height:0;
	}
}
.loaded #loader {
	animation: loaderfade 2s forwards, loadergo 0.2s forwards;
}

#a2a_modal input#a2a_copy_link_text {
	font-size: 1.3vmax!important;
}

.mfp-iframe-scaler-full-screen {
	padding-top: 87vh;
}