:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

/* .image-modal-container {
} */

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.image {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.image--is-loaded {
	opacity: 1;
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.share-box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start
}

.share-box::before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 0.5em;
	border-top: 1px solid #e6e6e6;
}

.share-box::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 0.5em;
	border-top: 1px solid #e6e6e6;
}

@media {

	.share-box::after {
		display: none;
	}
}

.share-box__title {
	/* transform: rotate(-90deg);
	transform-origin: top left; */
	/* border-top: 1px solid var(--colour-white); */
	/* padding-left: 1em; */
	font-size: 0.59172em;
	line-height: 1;
	font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-feature-settings: none;
  font-variant-ligatures: none;
}

.share-box__icons {
	margin-left: 0.35013em;
	line-height: 1;
	font-size: 1.69em
}

.share-box__icons a:link,
	.share-box__icons a:visited {
	color: #e6e6e6;
}

.share-box__icons a:hover,
	.share-box__icons a:active {
	color: #e6007e;
	text-decoration: none;
}

/* .share-box__icon {
	margin-left: var(--font-size-xxxs);
} */

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.modal {
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 1.3em);
	max-width: 30em;
	padding: 1.69em 1.69em;
	/* box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); */
	background-color: #060606
	/* border: 1px solid var(--colour-grey-lightest); */
}

.modal h1 {
	margin-top: 0;
	margin-right: 1.5em;
	margin-bottom: 1.69em;
	font-family: Lekton, Helvetica, Arial;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-feature-settings: none;
	font-variant-ligatures: none;
	font-size: 1em;
	color: rgb(138, 138, 138);
}

.modal p:last-child {
	margin-bottom: 0;
}

.modal__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	opacity: 0;
	background-color: #060606;
	transition: 0.3s;
}

.modal__overlay--appear-active,
.modal__overlay--enter-done {
	opacity: 0.7;
}

.modal__close-button {
	/* position: fixed; */
	position: absolute;
	z-index: 1000;
	top: 0;
	right: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.69em;
	height: 1.69em;
	background-color: #060606;
	font-size: 1.69em;
	color: #e6e6e6
}

.modal__close-button i {
	width: 1em;
	height: 1em;
	display: inline-block;
	line-height: 1;
}

.modal__close-button:active,
	.modal__close-button:hover {
	color: #e6007e;
}

.modal__inside {
	position: relative;
	height: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch
}

.modal__inside::-webkit-scrollbar-track {
	/*
   background-color: var(--colour-grey-darkest); */
}

.modal__inside::-webkit-scrollbar {
	width: 2px;
}

.modal__inside::-webkit-scrollbar-thumb {
	background-color: rgb(58, 58, 58);
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.loader-text {
	color: rgb(219, 219, 219);
	opacity: 0;
	transition: opacity 0.3s ease-in-out
}

.loader-text span {
	/*
   *
	     * Use the blink animation, which is defined above */
	animation-name: blink;
	/*
   *
	     * The animation should take 1.4 seconds */
	animation-duration: 1.4s;
	/*
   *
	     * It will repeat itself forever */
	animation-iteration-count: infinite;
	/*
   *
	     * This makes sure that the starting style (opacity: .2)
	     * of the animation is applied before the animation starts.
	     * Otherwise we would see a short flash or would have
	     * to set the default styling of the dots to the same
	     * as the animation. Same applies for the ending styles. */
	animation-fill-mode: both;
}

.loader-text span:nth-child(2) {
	/*
   *
	     * Starts the animation of the third dot
	     * with a delay of .2s, otherwise all dots
	     * would animate at the same time */
	animation-delay: 0.2s;
}

.loader-text span:nth-child(3) {
	/*
   *
	     * Starts the animation of the third dot
	     * with a delay of .4s, otherwise all dots
	     * would animate at the same time */
	animation-delay: 0.4s;
}

.loader-text--entered {
	opacity: 1;
}

.loader-text--exited {
	opacity: 0;
}

@keyframes blink {
	/**
     * At the start of the animation the dot
     * has an opacity of .2
     */
	0% {
		opacity: 0.2;
	}
	/**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
	20% {
		opacity: 1;
	}
	/**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
	100% {
		opacity: 0.2;
	}
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.modal.image-modal {
	display: flex;
	flex-direction: column;
	height: calc(100% - 2em);
	padding: 2.8561em 0.76923em 0.76923em;
}

@media (min-width: 48em) {

	.modal.image-modal {
		width: 80%;
		height: 50vh;
		max-width: 80em;
		padding: 0.76923em;
	}
}

.modal.image-modal.image-modal--entered {}

.modal.image-modal {
	/*
   Prevent scrollbars from showing when image is animating */
}

.modal.image-modal.image-modal--entering .modal__inside {
	overflow: hidden;
}

@media (min-width: 48em) {

	.image-modal .modal__inside {
		display: flex;
		flex-direction: row;
		padding: 0.76923em;
	}
}

.image-modal__image-holder {
	height: 50%;
	background-color: rgb(41, 41, 41);
	padding: 0.59172em;
	margin-bottom: 1em;
	opacity: 0;
	transition: 0.3s;
}

@media (min-width: 48em) {

	.image-modal__image-holder {
		width: 70%;
		height: calc(100% - 1em);
		margin-right: 1.3em;
		margin-bottom: 0;
	}
}

.image-modal--entered .image-modal__image-holder {
	opacity: 1;
}

.image-modal__image {
	height: 100%;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-bottom: 1em;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.image-modal__image--is-loaded {
	opacity: 1;
}

.image-modal__hidden-image {
	display: none;
}

.image-modal__info {
	/* margin-right: var(--spacing-xlg); */
	opacity: 0;
	transition: 0.6s;
	padding-right: 1em;
	padding-bottom: 1em;
}

@media (min-width: 48em) {

	.image-modal__info {
		position: relative;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		width: 30%;
		height: calc(100% - 1em);
		padding-top: 4em;
	}
}

.image-modal--entered .image-modal__info {
	opacity: 1;
}

.image-modal__type {
	margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-feature-settings: none;
  font-variant-ligatures: none;
	font-size: 0.59172em;
	font-weight: 600;
	color: rgb(138, 138, 138);
}

@media (min-width: 48em) {

	.image-modal__type {
		font-size: 0.59172em;
	}
}

.modal h1.image-modal__title {
	font-size: 1.69em;
	font-family: 'Barlow', sans-serif;
	text-transform: none;
	line-height: 1.1;
	letter-spacing: 0;
	margin-right: 0;
	margin-bottom: 0.59172em;
	color: #e6e6e6;
}

@media (min-width: 48em) {

	.modal h1.image-modal__title {
		font-size: 1.69em;
	}
}

.image-modal__content {
	padding-bottom: 2em;
	font-size: 1em;
	color: rgb(161, 161, 161);
}

@media (min-width: 48em) {

	.image-modal__content {
		padding-bottom: 3em;
		overflow: auto;
		font-size: 1em;
	}
}

.image-modal__footer {
	/* position: fixed; */
	/* bottom: var(--spacing-sm); */
	display: flex;
	align-items: baseline;
	padding-top: 0.76923em;
	padding-right: 0.59172em;
	background-color: #060606;
	/* justify-content: space-around; */
}

@media (min-width: 48em) {

	.image-modal__footer {
		position: absolute;
		bottom: 0;
		left: 0.76923em;
		width: calc(100% - 1em);
		padding-right: 0;
	}
}

.image-modal__date {
	margin-left: auto;
	/* font-family: var(--font-primary); */
	font-size: 0.59172em;
	color: rgb(161, 161, 161);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-feature-settings: none;
  font-variant-ligatures: none;
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.photo-booth-modal {
	display: flex;
	position: absolute;
	flex-direction: column;
	align-items: center;
	top: 0;
	right: 0;
	height: 100vh;
	width: 25em;
	padding: 5em 2em 2em 2em;
	background-color: #060606;
	/* background-color: rgba(0, 0, 0, 0.8); */
	transition: width 700ms cubic-bezier(0.77, 0, 0.175, 1),
		right 700ms cubic-bezier(0.77, 0, 0.175, 1);
}

.photo-booth-modal--full {
	width: 100%;
}

.photo-booth-modal--hidden {
	right: -20em;
	/* width: 5em; */
}

.photo-booth-modal--is-blink {
	background-color: #e6e6e6;
}

.photo-booth-modal__hide-button {
	position: absolute;
	top: 0;
	left: 0;
	width: 2.2em;
	height: 2.2em;
	padding: 0;
	font-size: 2.197em
}

.photo-booth-modal__hide-button:active {
	color: #e6007e;
}

.photo-booth-modal__close-button {
	position: absolute;
	z-index: 10;
	top: 0;
	right: 0;
	width: 2.2em;
	height: 2.2em;
	font-size: 2.197em
}

.photo-booth-modal__close-button:active {
	color: #e6007e;
}

.photo-booth-modal__buttons {
	display: flex
}

.photo-booth-modal__buttons .button {
	margin: 0 1em;
}

.photo-booth-modal__camera-button {
	display: block;
	margin: 15px auto;
	background-color: #e6007e;
	width: 6em;
	height: 6em;
	border-radius: 3em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-feature-settings: none;
  font-variant-ligatures: none;

	box-shadow: 0 0 0 5px #060606,
		0 0 0 15px rgb(161, 0, 88)
}

.photo-booth-modal__camera-button:active {
	background-color: rgb(161, 0, 88);
}

/* =========================================================================
 * Photo Box
 * ========================================================================= */

.photo-booth-modal__photo-box {
	display: block;
	flex-direction: column;
	width: 100%;
	max-width: 30em
}

.photo-booth-modal--full .photo-booth-modal__photo-box {
	/*
   align-items: center; */
}

.photo-booth-modal__photo-box__content .button {
	margin-top: 1em;
	width: 100%;
}

.photo-booth-modal__title {
	margin-top: 0;
	margin-bottom: 0;
	text-transform: none;
	letter-spacing: 0;
	font-family: 'Barlow', sans-serif;
	font-size: 2.197em;
}

.photo-booth-modal__subtitle {
	font-size: 1em;
	margin-bottom: 1.69em;
	color: rgb(138, 138, 138);
}

.photo-booth-modal__start-button {
	max-width: 21em;
}

.photo-booth-modal__silhouette {
	margin: 0 auto;
	max-height: 21em;
	max-width: 21em;
	background-color: rgb(58, 58, 58);
}

.photo-booth-modal__video {
	margin: 0 auto 1em;
	max-height: 30em;
	max-width: 30em;
	transform: scaleX(-1);
	border: 0.76923em solid rgb(41, 41, 41);
}

.photo-booth-modal__video--feed {
}

.photo-booth-modal__video--preview {
	/* border: var(--spacing-sm) solid var(--colour-white); */
}

.photo-booth-modal__send-selfie {
	display: flex;
	margin: 0 auto;
	width: 80%;
}

@media (min-width: 120em) {

	.photo-booth-modal__send-selfie {
		width: 60%;
	}
}

.photo-booth-modal__send-selfie__preview {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-right: 2.197em;
}

.photo-booth-modal__show-thanks {
	position: relative;
	text-align: center;
	margin-top: -2em;
	top: 50%;
	transform: translateY(-50%);
}

/* =========================================================================
 * Search
 * ========================================================================= */

.photo-booth-modal__search {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	height: 100%;
}

.photo-booth-modal__search--is-active {
	display: block;
}

/* =========================================================================
 * About
 * ========================================================================= */

.photo-booth-modal__about {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
}

.photo-booth-modal__about--is-active {
	display: block;
}

/* =========================================================================
 * Footer 
 * ========================================================================= */

.photo-booth-modal__footer {
	position: absolute;
	left: 2em;
	bottom: 2em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: flex-end;
	width: 100%;
	margin-top: auto;
	text-align: left;
	opacity: 1;
	transition: opacity 700ms cubic-bezier(0.77, 0, 0.175, 1) /* easeInOutQuart */
}

.photo-booth-modal--hidden .photo-booth-modal__footer {
	opacity: 0;
}

.photo-booth-modal__menu {
	position: relative;
	display: block;
	padding-left: 0;
	margin-bottom: 3em;
	opacity: 0;
	transition: 700ms cubic-bezier(0.77, 0, 0.175, 1) /* easeInOutQuart */
}

.photo-booth-modal__menu:before {
	content: '';
	position: absolute;
	top: -0.5em;
	width: 1.3em;
	border-top: 1px solid #e6e6e6;
}

.photo-booth-modal__menu.photo-booth-modal__menu--is-active {
	opacity: 1;
}

.photo-booth-modal__menu-item {
	margin-bottom: 0.2em;
	list-style: none;
	font-size: 1.69em;
	font-family: 'Barlow', sans-serif;
	font-weight: 800;
	cursor: pointer
}

.photo-booth-modal__menu-item i {
	width: 1em;
	margin-right: 0.35013em;
}

.photo-booth-modal__menu-item:active {
	color: #e6007e;
}

.photo-booth-modal__nsw-logo {
	max-width: 21em;
	height: auto;
}

/* =========================================================================
 * Keyboard
 * ========================================================================= */

.photo-booth-modal__keyboard {
	position: fixed;
	left: 50%;
	transform: translate(-50%, 105%);
	bottom: 1em;
	width: 50%;
	transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.photo-booth-modal__keyboard--is-active {
	transform: translate(-50%, 0);
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.keyboard {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.76923em;
	background-color: #060606;
	font-family: 'Barlow', sans-serif;
}

.keyboard-row {
	display: flex;
	width: 100%;
	margin-bottom: 3px

	/* QWERTY */
}

.keyboard-row:nth-child(2) {
	width: 95%;
}

.keyboard-row {
	/*
   ASDF */
}

.keyboard-row:nth-child(3) {
	width: 90%;
}

.keyboard-row {
	/*
   Spacebar */
}

.keyboard-row:nth-child(5) {
	width: 70%;
}

.keyboard-button {
	flex: 1;
	height: 3em;
	margin: 0 2px;
	background-color: rgb(41, 41, 41);
	text-transform: none;
	font-family: 'Barlow', sans-serif;
	font-size: 1.3em
}

.keyboard-button:active {
	background-color: rgb(58, 58, 58);
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.photo-booth-modal-form p {
	font-size: 1.3em;
	font-family: 'Barlow', sans-serif;
	margin-bottom: 1.3em;
}

.photo-booth-modal-form input[type='text'],
	.photo-booth-modal-form input[type='email'] {
	width: 75%;
	font-size: 1em;
}

.photo-booth-modal-form__label {
	display: inline-block;
	width: 25%;
	font-size: 0.59172em;
	color: rgb(161, 161, 161);
}

.photo-booth-modal-form__label-required {
	color: #e6007e;
}

.photo-booth-modal-form__checkbox {
	font-size: 1em;
	margin-right: 0.76923em;
}

.photo-booth-modal-form__terms-conditions {
	margin-left: 25%;
	margin-bottom: 3em

	/* & label {
		width: inherit;
	} */
}

.photo-booth-modal-form__terms-conditions p {
	font-size: 1em;
}

.photo-booth-modal-form__terms-conditions__input {
	display: flex;
	color: rgb(161, 161, 161);
}

.photo-booth-modal-form__footer {
	display: flex;
	align-items: center;
	font-size: 1.3em;
}

.photo-booth-modal-form__button {
	transition: 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}

.photo-booth-modal-form__form-message {
	margin-left: 1em;
	line-height: 1.3;
	color: #e6007e;
}

.photo-booth-modal-form__form-message-sending {
	line-height: 1;
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.search-results {
	height: 100%;
	width: 100%;
	overflow: auto;
	-webkit-overflow-scrolling: touch
}

.search-results > div {
	height: 100%;
}

.search-results__loading-more {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	height: auto !important;
	padding: 0.76923em;
	background-color: #060606;
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.info-box {
	position: absolute;
	left: 0.45517em;
	bottom: 1em;
	right: 1.69em;
	z-index: 5;
	width: calc(100% - 1em);
	background-color: #060606;
	padding: 1em;
	/* padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg); */
}

@media (min-width: 36em) {

	.info-box {
		right: auto;
		left: 0.45517em;
		max-width: 40rem;
		padding: 2.197em 2.197em 2.197em;
	}
}

.info-box.info-box--is-full-size {
	top: 1em;
	width: calc(100% - 1em);
	height: calc(100% - 2em);
	padding-top: 2.9em;
}

.info-box.info-box--is-full-size p:first-of-type {
	position: relative;
	font-size: 1.3em;
	margin-bottom: 1em;
	padding-bottom: 1.69em;
}

.info-box.info-box--is-full-size p:first-of-type::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 1em;
	height: 1px;
	border-bottom: 1px solid #e6e6e6;
}

.info-box h2 {
	font-family: 'Lekton', sans-serif;
	font-size: 1em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-feature-settings: none;
	font-variant-ligatures: none;
}

.info-box__inside {
	display: flex;
	flex-direction: column;
	position: relative;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	height: 100%;
	padding-right: 1em
}

.info-box__inside::-webkit-scrollbar-track {
	/*
   background-color: var(--colour-grey-darkest); */
}

.info-box__inside::-webkit-scrollbar {
	width: 2px;
	margin-right: -1em;
}

.info-box__inside::-webkit-scrollbar-thumb {
	background-color: rgb(58, 58, 58);
}

@media (min-width: 48em) {

	.info-box__inside {
		margin-right: -1em;
	}
}

.info-box__title {
	margin-top: 0;
	margin-right: 1.3em;
	color: #060606;
	font-family: Barlow, Helvetica, Arial, sans-serif;
	font-size: 2.4em;
	text-shadow: 0 -1.5px #e6007e,
		-1.5px 0 #e6007e, 1.5px 0 #e6007e,
		0 1.5px #e6007e;
}

@media (min-width: 36em) {

	.info-box__title {
		margin-right: 0;
		font-size: 3.71293em;
	}
}

.info-box__title-image {
	width: calc(100% - 3em);
	max-width: 29em;
	height: auto;

	/* margin-top: var(--spacing-md); */
	margin-bottom: 0.45517em
}

.info-box--is-full-size .info-box__title-image {
	width: calc(100% - 4em);
	margin-bottom: 1.3em;
}

.info-box__excerpt {
	margin-top: 0;
	margin-bottom: 1.3em;
	font-size: 0.76923em;
}

@media (min-width: 36em) {

	.info-box__excerpt {
		font-size: 1em;
	}
}

.info-box__toggle-button {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 1.69em;
	height: 1.69em;
	padding-top: 0.3em;
	font-size: 1.69em;
	/* color: var(--colour-highlight); */
	background-color: #060606;
}

.info-box__more-button {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.69em;
	height: 1.69em;
	max-width: 14em;
	margin-bottom: auto;
	padding: 0;
	font-size: 1.69em;
	background-color: #060606;
}

.info-box__hide-button {
	align-self: flex-start;
	margin-top: 2em;
}

@media (min-width: 36em) {

	.info-box__hide-button {
		align-self: inherit;
		margin-top: 0;
		margin-left: auto;
	}
}

.info-box__logo-holder {
	/* display: flex;
	flex-wrap: wrap; */
	flex: 0 0 2em;
	margin-top: 2.197em;
	margin-bottom: 1.3em;
}

@media (min-width: 36em) {

	.info-box__logo-holder {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
}

.info-box__logo {
	max-width: 6em;
	margin-right: 2.197em;
}

.info-box__logo--dxlab {
	max-width: 6em;
}

.info-box__logo--slnsw {
	max-width: 8.5em;
	margin-right: 0;
}

.info-box__footer {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

@media (min-width: 36em) {

	.info-box__footer {
		flex-direction: row;
		flex-flow: row wrap;
		align-items: baseline;
		justify-content: flex-end;
	}
}

ul.footer-menu {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-top: 1em;
	margin-bottom: 0.76923em;
	padding-left: 0;
	font-size: 0.76923em;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-feature-settings: none;
  font-variant-ligatures: none;
	text-align: left;
}

@media (min-width: 36em) {

	ul.footer-menu {
		flex-direction: row;
		order: 3;
		width: 100%;
		text-align: left;
		margin-bottom: 0;
	}
}

ul.footer-menu li {
	line-height: 1.7;
	list-style: none;
}

@media (min-width: 36em) {

	ul.footer-menu li {
		margin-right: 1em;
	}

	ul.footer-menu li::after {
		content: '/';
		margin-left: 1em;
	}

	ul.footer-menu li:last-child::after {
		content: '';
		margin-left: 0;
	}
}

ul.footer-menu a:link,
	ul.footer-menu a:visited {
	color: #e6e6e6;
}

ul.footer-menu {
	/*
   Line decoration */
}

ul.footer-menu::after {
	position: absolute;
	bottom: 0.5em;
	left: 0;
	content: '';
	width: 1em;
	border-top: 1px solid #e6e6e6;
}

@media (min-width: 36em) {

	ul.footer-menu::after {
		top: -1em;
		bottom: auto;
	}
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.search-box {
	display: flex;
}

.search-box--is-active {
	width: 100%;
}

.search-box__back-button {
	margin-right: 1px;
}

.search-box__search-icon {
	padding: 0;
	background-color: #060606
}

.search-box--is-active .search-box__search-icon {
	background-color: rgb(58, 58, 58);
}

.search-box__form {
	flex: 1
}

.search-box__form form {
	display: flex;
}

.search-box--is-active .search-box__form {
	/*
   border: 1px solid var(--colour-white); */
}

input.search-box__input {
	z-index: 1;
	width: 96px;
	width: 6rem;
	height: 2.197em;
	margin-right: 2px;
	padding: 0.59172em;
	font-size: 0.76923em;
	background-color: #060606;
	border: none;
	transition: 0.3s cubic-bezier(0.77, 0, 0.175, 1)
}

input.search-box__input:focus {
	outline-style: solid;
	outline-width: 1px;
	outline-offset: 0;
}

.search-box--is-active input.search-box__input {
	width: calc(100% - 1.69em - 2px);
	margin-right: 2px;
	background-color: rgb(41, 41, 41);
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.search-filters {
	position: relative;
	z-index: 2;
	width: 100%
	/* padding-right: var(--spacing-xs); */
}

.search-filters ul {
	display: flex;
	justify-content: flex-end;
	padding: 0;
	margin: 0;
	list-style-type: none;
	color: rgb(138, 138, 138);
	font-family: 'Barlow', sans-serif;
}

.search-filters li {
	/*
   flex: 1; */
	/*
   margin-left: 1em; */
	text-transform: capitalize;
}

.search-filters li.search-filters__filter--is-selected {
	color: #e6007e;
}

.search-filters__filter-button {
	padding: 0.59172em;
	color: inherit;
	text-transform: inherit;
	font-family: inherit;
	font-weight: 400
}

.search-filters__filter-button:hover {
	/*
   color: var(--colour-primary); */
	text-decoration: underline;
}

.search-filters__filter-button:disabled {
	opacity: 0.5;
	text-decoration: none;
}

@media (min-width: 36em) {

	.search-filters__filter-button {
		font-weight: 500;
	}
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.search-suggestions ul {

	list-style: none;

	padding: 0;
}

.search-suggestions li {

	font-size: 1.3em;

	line-height: 2;
}

@media (min-width: 36em) {

	.search-suggestions li {

		font-size: 1.69em;
	}
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: none;
	width: 100%;
	height: 100%;
	background-color: #060606;
	transition: opacity 0.3s;
	opacity: 0;
}

.overlay--enter {
	display: block;
}

.overlay--enter-active,
.overlay--enter-done {
	display: block;
	opacity: 1;
}

.overlay--exit {
	display: block;
}

.overlay--exit-active {
	opacity: 0;
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.message-widget {
	font-size: 1.3em;
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.newselfwales-page__toggle-animation-button {
	position: absolute;
	top: 2.197em;
	left: 1em;
	z-index: 2;
	border-radius: 0;
	padding: 1em 1.3em 1em
		1.69em;

	/* border: 1px solid var(--colour-grey-lightest); */

	color: #e6007e;
	background-color: #060606;
	font-size: 0.45517em;
	font-weight: 700;
}

.newselfwales-page__special-care {
	border: 1px solid rgb(41, 41, 41);
}

.modal .newselfwales-page__special-care-title {
	color: #e6007e;
}

.newselfwales-page__message-widget {
	min-height: 5em;
}

.newselfwales-page__info-box--is-hidden {
	visibility: hidden;
}

/* 
 * SEARCH 
 * ------------------------------------------------------------------------- */

.newselfwales-page__search-box {
	position: absolute;
	top: 0.59172em;
	right: 0.26933em;
	left: 0.26933em;
	z-index: 2;
	width: calc(100% - 0.70026em);
	font-size: 1.69em;
}

@media (min-width: 48em) {

	.newselfwales-page__search-box {
		max-width: 12em;
	}
}

.newselfwales-page__search-box--is-hidden {
	visibility: hidden;
}

.newselfwales-page__search-filters {
	position: absolute;
	top: 72.8px;
	top: 4.55rem;
	right: 1.6px;
	right: 0.1rem;
}

@media (min-width: 48em) {

	.newselfwales-page__search-filters {
		width: auto;
		top: 1.2em;
		left: 22em;
		right: auto;
	}
}

.newselfwales-page__search-results {
	position: absolute;
	z-index: 3;
	top: 7em;
	left: 0;
	width: 100%;
	height: calc(100% - 7em);
}

@media (min-width: 48em) {

	.newselfwales-page__search-results {
		top: 5em;
		height: calc(100% - 5em);
	}
}

.newselfwales-page__search-results .image-feed__images {
	padding-left: 5px;
	padding-right: 5px;
}

.newselfwales-page__search-results .search-results__notification {
	position: absolute;
	top: calc(50% - 4em);
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.newselfwales-page__search-suggestions {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%);
	margin-top: 2em;
	text-align: center;
}

@media (min-width: 36em) {

	.newselfwales-page__search-suggestions {
		margin-top: 0;
	}
}

/* 
 * OVERLAY
 * ------------------------------------------------------------------------- */

.newselfwales-page__overlay {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: #060606;
}

/* 
 * IMAGE FEED
 * ------------------------------------------------------------------------- */

.newselfwales-page__image-feed-loader {
	position: absolute;
	top: 1.3em;
	right: 1.3em;
	padding: 0.76923em;
	background-color: #060606;
	font-size: 0.76923em;
}

.newselfwales-page__image-feed-loader-text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80%;
	transform: translate(-50%, -50%);
	padding: 0.76923em;
	/* background-color: var(--colour-black); */
	color: rgb(219, 219, 219);
	font-size: 0.76923em;
	text-align: center;
}

@media (min-width: 48em) {

	.newselfwales-page__image-feed-loader-text {
		font-size: 1em;
		width: 40%;
		max-width: 30em;
	}
}

.newselfwales-page__image-feed-loader-text p {
	animation: fadeIn 1s infinite alternate;
}

@keyframes fadeIn {
	from {
		opacity: 0.5;
	}
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.page {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 5em;
	opacity: 0;
	transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1)
}

.page h1 {
	font-size: 2.8561em;
}

.page--enter-done {
	opacity: 1;
}

.page__content {
	overflow: auto;
	width: 35em;
	height: calc(100vh - 20rem);
	font-size: 1.3em;
	padding-right: 2em
}

.page__content h3 {
	margin-bottom: 0.35013em;
}

.page__content::-webkit-scrollbar-track {
	background-color: rgb(41, 41, 41);
}

.page__content::-webkit-scrollbar {
	width: 3px;
}

.page__content::-webkit-scrollbar-thumb {
	background-color: rgb(81, 81, 81);
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.image-fader {
	position: relative;
	height: 21em;
}

.image-fader__image {
	width: 21em;
	height: 21em;
	object-fit: cover;
	position: absolute;
	z-index: 1;
	border: 0.76923em solid rgb(41, 41, 41);
}

.image-fader__image--rear {
	z-index: 0;
}

.image-fader__image--is-fading {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 2.0s, opacity 2.0s linear;
}

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

/* .image-fader-container {
} */

:root {
	/*
   * VARIABLES
   * ======================================================================== */

	/*
   * Colours
   * ------------------------------------------------------------------------ */

	/*--colour-primary: #ef0083;*/

	/*--colour-highlight: #ef0083;*/

	/*--colour-black: #120f10;*/

	/* Greys */

	/* Primary */

	/* Secondary */

	/* Tertiary */

	/* Highlight */

	/*
   * Font Sizes
   * ------------------------------------------------------------------------ */

	/*
   * Font Families
   * ------------------------------------------------------------------------ */

	/*
   * Spacing
   * ------------------------------------------------------------------------ */

	/*
   * Line Heights
   * ------------------------------------------------------------------------ */

	/*
   * Custom Media Queries
   * ------------------------------------------------------------------------ */

	/* Extra small screen / small phone */

	/* 576px Small screen / phone */

	/* 768px Small screen / tablet */

	/* 992px Medium screen / desktop */

	/* 1200px Large screen / wide desktop */

	/* 1920 HD TV screen */

	/*
   * Containers
   * ------------------------------------------------------------------------ */

	/*
   * Custom Properties
   * http://cssnext.io/features/#custom-properties-set-apply
   * ------------------------------------------------------------------------ */

	/*
   * Animation
   * ------------------------------------------------------------------------ */ /* easeInOutQuint */ /* easeInOutQuart */
}

.photo-booth-page {
	position: relative;
	overflow: hidden;
	height: 100%;
}

.photo-booth-page__search {
	position: absolute;
	top: 0;
	left: 0;
}