.custom-modal {
	z-index: 10;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.custom-modal__inner {
	overflow-y: auto;
	padding: 40px 30px 30px;
	max-height: 90vh;
	width: 90vw;
	max-width: 700px;
	border-radius: 15px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.custom-modal.has-image .custom-modal__inner {
	display: flex;
}

.custom-modal.has-image .custom-modal__content {
	flex: 0 0 60%;
}

.custom-modal.has-image .custom-modal__image {
	flex: 0 0 40%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-right: 20px;
	max-width: 40%;
}
.custom-modal.has-image .custom-modal__image img {
	max-width: 100%;
	object-fit: contain;
}


/* CTA button */
.custom-modal__button {
	margin: 30px auto 0;
}

/* Accent colours */
.custom-modal.accent-colour--blue h1,
.custom-modal.accent-colour--blue h2,
.custom-modal.accent-colour--blue h3 {
	color: #30bbe2;
}
.custom-modal.accent-colour--green h1,
.custom-modal.accent-colour--green h2,
.custom-modal.accent-colour--green h3 {
	color: #9ad82f;
}
.custom-modal.accent-colour--navy h1,
.custom-modal.accent-colour--navy h2,
.custom-modal.accent-colour--navy h3 {
	color: #313a8f;
}
.custom-modal.accent-colour--pink h1,
.custom-modal.accent-colour--pink h2,
.custom-modal.accent-colour--pink h3 {
	color: #e233ac;
}

/* button is blue by default */
.custom-modal.accent-colour--green .custom-modal__button {
	background-color: #9ad82f;
}
.custom-modal.accent-colour--navy .custom-modal__button {
	background-color: #313a8f;
}
.custom-modal.accent-colour--pink .custom-modal__button {
	background-color: #e233ac;
}

/* Images within wysiwyg */
.custom-modal img {
	display: block;
}

/* Close button */
.custom-modal__close {
	display: block;
	height: 34px;
	border: none;
	padding: 0;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	opacity: 0.3;
	cursor: pointer;
	background: none;
}
.custom-modal__close:hover {
	opacity: 1;
	background: none;
}
.custom-modal__close:before, .custom-modal__close:after {
	position: absolute;
	top: 0;
	left: 15px;
	content: ' ';
	height: 33px;
	width: 2px;
	background-color: #333;
}
.custom-modal__close:before {
	transform: rotate(45deg);
}
.custom-modal__close:after {
	transform: rotate(-45deg);
}

/* Overlay */
.custom-modal__overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(3px);
	z-index: 1;
}

body.has-overlay {
	overflow-y: hidden;
}

/* Utility */
.hidden {
	display: none;
}