/*
	Használt Autó Fotózás
	https://hasznaltautofotozas.hu
*/



/* Reset */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }



/* Variables */

:root {
	--sans: 'Lexend', sans-serif;
	--serif: 'Lora', serif;

	--bg: #023047;
	--bg-dark: #002233;
	--bg-light: #063f5c;

	--text: #c2c7cc;
	--text-dark: #8a9199;
	--text-light: #e6ecf2;

	--yellow: #f2a60c;
	--blue: #29b1cc;
	--green: #60bf30;
	--red: #e53939;

	--radial-gradient: radial-gradient(circle, var(--yellow) 0%, var(--blue) 100%);
}



/* Webfonts */

@font-face {
	font-family: 'Lexend';
	font-style: normal;
	font-weight: 200;
	font-display: swap;
	src: url('../webfonts/lexend-v26-latin-ext-200.woff2') format('woff2');
}

@font-face {
	font-family: 'Lexend';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../webfonts/lexend-v26-latin-ext-600.woff2') format('woff2');
}

@font-face {
	font-family: 'Lora';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../webfonts/lora-v37-latin-ext-regular.woff2') format('woff2');
}

@font-face {
	font-family: 'Font Awesome 7 Solid';
	font-display: swap;
	font-style: normal;
	font-weight: 900;
	src: url('/assets/webfonts/fa7-solid.woff2') format('woff2');
}

@font-face {
	font-family: 'Font Awesome 7 Brands';
	font-display: swap;
	font-style: normal;
	font-weight: 400;
	src: url('/assets/webfonts/fa7-brands.woff2') format('woff2');
}



/* FontAwesome Icon Subset */

.fas {
	font-family: 'Font Awesome 7 Solid';
	font-weight: 900;
	line-height: 1;
}

.fab {
	font-family: 'Font Awesome 7 Brands';
	font-weight: 400;
	line-height: 1;
}

.fa-arrow-down:before { content: "\f063"; }
.fa-broom:before { content: "\f51a"; }
.fa-car-on:before { content: "\e4dd"; }
.fa-caret-left:before { content: "\f0d9"; }
.fa-caret-right:before { content: "\f0da"; }
.fa-check-circle:before { content: "\f058"; }
.fa-clock:before { content: "\f017"; }
.fa-couch:before { content: "\f4b8"; }
.fa-crosshairs:before { content: "\f05b"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-hand-sparkles:before { content: "\e05d"; }
.fa-info-circle:before { content: "\f05a"; }
.fa-instagram:before { content: "\f16d"; }
.fa-money-bill-trend-up:before { content: "\e529"; }
.fa-phone:before { content: "\f095"; }
.fa-soap:before { content: "\e06e"; }
.fa-times-circle:before { content: "\f057"; }
.fa-toilet-paper:before { content: "\f71e"; }
.fa-xmark:before { content: "\f00d"; }



/* Base */

html {
	scroll-behavior: smooth;
	font-size: 62.5%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: initial; }
}

::selection {
	color: var(--text-light);
	background-color: var(--blue);
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0 auto;
	font-family: var(--sans);
	font-weight: 200;
	color: var(--text);
	letter-spacing: -.0125rem;
	background-color: var(--bg-dark);
}

@media only screen and (max-width: 575.98px) {
	body {
		font-size: 1.6rem;
		line-height: 1.5;
	}
}

@media only screen and (min-width: 576px) {
	body {
		font-size: 1.8rem;
		line-height: 1.625;
	}
}

@media only screen and (min-width: 768px) {
	body {
		font-size: 2rem;
		line-height: 1.75;
	}
}

img {
	max-width: 100%;
	height: auto;
}

.main {
	flex-grow: 1;
}

.container {
	width: 100%;
	max-width: 140rem;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 575.98px) {
	.container {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	.container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.container {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}



/* Sections */

@media only screen and (max-width: 767.98px) {
	.section {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.section {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

.section--light {
	background-color: var(--bg);
}

.section__title {
	margin-top: 0;
}



/* Typography */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	font-family: var(--serif);
	color: var(--text-light);
}

h1, .h1 {
	letter-spacing: -1px;
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h1, .h1 {
		margin-bottom: 3rem;
		font-size: 3rem;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h1, .h1 {
		margin-bottom: 4rem;
		font-size: 4rem;
	}
}

@media only screen and (min-width: 768px) {
	h1, .h1 {
		margin-bottom: 5rem;
		font-size: 5rem;
	}
}

h2, .h2 {
	margin-bottom: 4rem;
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h2, .h2 {
		margin-top: 2.5rem;
		font-size: 2.5rem;
		letter-spacing: -.5px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h2, .h2 {
		margin-top: 3rem;
		font-size: 3rem;
		letter-spacing: -.75px;
	}
}

@media only screen and (min-width: 768px) {
	h2, .h2 {
		margin-top: 4rem;
		font-size: 4rem;
		letter-spacing: -1px;
	}
}

h3, .h3 {
	margin-bottom: 3rem;
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h3, .h3 {
		margin-top: 1.5rem;
		font-size: 2rem;
		letter-spacing: -.4px;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h3, .h3 {
		margin-top: 2rem;
		font-size: 2.5rem;
		letter-spacing: -.5px;
	}
}

@media only screen and (min-width: 768px) {
	h3, .h3 {
		margin-top: 2.5rem;
		font-size: 3rem;
		letter-spacing: -.75px;
	}
}

h4, .h4 {
	margin-bottom: 2rem;
	letter-spacing: -.375px;
	line-height: 1.4;
}

@media only screen and (max-width: 575.98px) {
	h4, .h4 {
		margin-top: 1rem;
		font-size: 1.8rem;
	}
}

@media only screen and (min-width: 576px) and (max-width: 767.98px) {
	h4, .h4 {
		margin-top: 1.5rem;
		font-size: 2.25rem;
	}
}

@media only screen and (min-width: 768px) {
	h4, .h4 {
		margin-top: 2rem;
		font-size: 2.5rem;
	}
}

p,
ul,
ol {
	margin-bottom: 2rem;
}

li {
	margin-bottom: 1rem;
}

ul.list {
	margin-left: 2rem;
	list-style-type: disc;
}

ol.list {
	margin-left: 2rem;
	list-style-type: decimal;
}

a {
	cursor: pointer;
	color: var(--blue);
	white-space: nowrap;
	text-decoration: none;
	border-bottom: 1px dashed var(--text);
	transition: .25s color, .25s background-color;
}

a:hover,
a:focus {
	color: var(--text-light);
}

strong {
	font-weight: 600;
}

em {
	font-style: italic;
}

small {
	font-size: 82.5%;
}

del {
	color: var(--text-dark);
}

ins {
	color: var(--yellow);
}

hr {
	border: 0;
	border-bottom: 1px solid var(--bg-light);
}

figcaption {
	font-size: 1.6rem;
	color: var(--text-dark);
	letter-spacing: 0;
	text-align: center;
}

.text-center { text-align: center; }

.text-light { color: var(--text-light); }
.text-red { color: var(--red); }
.text-green { color: var(--green); }
.text-yellow { color: var(--yellow); }
.text-blue { color: var(--blue); }



/* Buttons */

.btn {
	cursor: pointer;
	position: relative;
	display: inline-block;
	padding: 1.5rem 3.5rem;
	font: inherit;
	font-weight: 600;
	color: #FFF;
	letter-spacing: -.5px;
	text-transform: uppercase;
	border: 0;
	border-radius: 99rem;
	background-color: var(--yellow);
	transition: background-color .15s;
}

.btn:hover,
.btn:focus {
	background-color: var(--green);
}

.btn--secondary {
	background-color: var(--blue);
}

.button-and-link {
	margin: -1rem;
	margin-top: 4rem;
	text-align: center;
}

.button-and-link > a {
	margin: 1rem;
}

.link {
	--webkit-appearance: none;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	color: var(--text);
	border: 0;
	background-color: transparent;
	transition: color .25s;
}



/* Forms */

.form {
	border-radius: 1rem;
	background-color: var(--bg);
	border-top: 1rem solid var(--yellow);
	box-shadow: rgba(0, 0, 0, .1) 0px 10px 20px, rgba(0, 0, 0, .15) 0px 6px 6px;
}

@media only screen and (max-width: 767.98px) {
	.form {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.form {
		padding: 3rem;
	}
}

.form__group {
	margin-bottom: 1.5rem;
}

.form__label {
	display: block;
	margin-bottom: .5rem;
}

.form__input {
	font: inherit;
	width: 100%;
	padding: .5rem 1.5rem;
	border: 0;
	border-radius: 1rem;
}

.form__disclaimer {
	margin-top: 2rem;
	color: var(--text-dark);
	line-height: 1.5;
}

.form__button {
	margin-top: 1.5rem;
}



/* Hero */

.hero__grid {
	display: grid;
	align-items: center;
	grid-gap: 6rem;
}

@media only screen and (min-width: 992px) {
	.hero__grid {
		grid-template-columns: 3fr 2fr;
	}
}

.hero__h1 {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	font-family: var(--sans);
	color: var(--text-dark);
	letter-spacing: inherit;
	border-bottom: 1px solid var(--bg-light);
}

@media only screen and (max-width: 767.98px) {
	.hero__h1 {
		font-size: 1.6rem;
	}
}

@media only screen and (min-width: 768px) {
	.hero__h1 {
		font-size: 2rem;
	}
}

@media only screen and (max-width: 479.98px) {
	.hero__title {
		font-size: 2.5rem;
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	.hero__title {
		font-size: 4rem;
	}
}

.hero__highlight {
	display: block;
	color: var(--yellow);
}

.hero__highlight--blink:after {
	content: "";
	position: relative;
	top: 1rem;
	display: inline-block;
	width: 2px;
	height: 1em;
	background-color: var(--text-dark);
	animation: blink .5s infinite;
}

@keyframes blink {
	0%, 50% { opacity: 1; }
	51%, 100% { opacity: 0; }
}

.checklist {
	counter-reset: list;
}

@media only screen and (max-width: 767.98px) {
	.checklist {
		margin-bottom: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.checklist {
		margin-bottom: 6rem;
	}
}

.checklist__item {
	margin-bottom: 2rem;
}

@media only screen and (max-width: 767.98px) {
	.checklist__item {
		display: grid;
		align-items: start;
		grid-template-columns: auto 1fr;
	}
}

.checklist__item:before {
	counter-increment: list;
	content: counter(list) ".";
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: .75rem;
	font-weight: 600;
	color: var(--yellow);
	line-height: 1;
}


@media only screen and (max-width: 767.98px) {
	.checklist__item:before {
		grid-row: 1 / 3;
		padding-top: .6rem;
	}
}

.checklist__subtitle {
	color: var(--text-light);
}

.checklist__icon {
	margin-right: .5rem;
	color: var(--yellow);
}

.slider {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
}

.slide {
	grid-area: 1 / 1;
	opacity: 0;
	inset: 0;
	display: grid;
	justify-items: center;
	transition: opacity .75s ease;
	pointer-events: none;
}

.slide--active {
	opacity: 1;
	z-index: 1;
	pointer-events: auto;
	transition-delay: 0.25s;
}

.slide__image {
	position: relative;
	background-color: #FFF;
}

.slide__image--before {
	width: 50%;
	padding: 1rem;
	border-radius: 1rem;
	background-color: var(--bg);
}

.slide__image--before figcaption {
	color: var(--text-dark);
}

.slide__image--after {
	padding: 1rem;
	border-radius: 1.25rem;
	background-color: var(--text-light);
	box-shadow: rgba(0, 0, 0, .2) 0px 10px 20px, rgba(0, 0, 0, .25) 0px 6px 6px;
}

.slide__arrow {
	padding-top: 2rem;
	padding-bottom: 2rem;
	font-size: 3rem;
}

.slide__icon {
	position: absolute;
	right: -1rem;
	bottom: -1rem;
	font-size: 5rem;
	transform: rotate(10deg);
}

@media only screen and (max-width: 575.98px) {
	.slide__icon {
		right: 0.25rem;
		bottom: 3.25rem;
		font-size: 3rem;
	}
}

.slider-pagination {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

.slider-dot {
	cursor: pointer;
	width: 1rem;
	height: 1rem;
	margin: .5rem;
	padding: .75rem;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.125);
	transition: background .3s ease, transform .3s ease;
}

.slider-dot:hover {
	transform: scale(1.5);
	background: rgba(255,255,255,.25);
}

.slider-dot--active {
	background: rgba(255,255,255,.5);
}



/* About */

.about {
	padding: 2rem 0;
	background-color: var(--bg-light);
}

.about__summary {
	cursor: help;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 0 2rem;
	align-items: center;
}

.about__title {
	align-self: end;
	margin: 0;
	font-family: var(--sans);
	font-weight: 600;
}

.about__text {
	align-self: start;
	margin-bottom: 0;
}

@media only screen and (max-width: 575.98px) {
	.about__text {
		font-size: 1.4rem;
	}
}

.about__image {
	width: 10rem;
	height: 10rem;
	grid-row: 1 / 3;
	border-radius: 99rem;
}

.about__content {
	color: var(--text-light);
}

@media only screen and (max-width: 767.98px) {
	.about__content {
		margin-top: 2rem;
		padding: 2rem 0 .25rem 2rem;
		border-left: .5rem solid var(--bg);
	}
}

@media only screen and (min-width: 768px) {
	.about__content {
		margin-left: 4.5rem;
		padding: 4rem 0 1rem 6.5rem;
		border-left: 1rem solid var(--bg);
	}
}



/* Why */

.why-grid {
	display: grid;
	margin-top: 5rem;
}

@media only screen and (max-width: 991.98px) {
	.why-grid {
		grid-gap: 3rem;
	}
}

@media only screen and (min-width: 992px) {
	.why-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 6rem;
	}
}

.card {
	display: grid;
	grid-template-columns: auto 1fr;
}

.card__title {
	font-family: var(--sans);
	font-weight: 600;
	margin-top: 0;
	margin-bottom: .5rem;
}

.card__text {
	grid-column: 2;
	margin-bottom: 0;
}

.card__icon {
	color: var(--yellow);
}

@media only screen and (max-width: 767.98px) {
	.card__icon {
		margin-top: .75rem;
		margin-right: 1.5rem;
		font-size: 2rem;
	}
}

@media only screen and (min-width: 768px) {
	.card__icon {
		margin-top: .65rem;
		margin-right: 2rem;
		font-size: 3rem;
	}
}

.callout {
	margin-top: 6rem;
	padding: 3rem 5rem;
	text-align: center;
	border-radius: 1rem;
	background-color: var(--bg-dark);
}



/* Pricing */

.plan {
	display: grid;
	grid-gap: 2rem;
	border-radius: 1rem;
	background-color: var(--bg);
	box-shadow: rgba(0, 0, 0, .1) 0px 10px 20px, rgba(0, 0, 0, .15) 0px 6px 6px;
}

@media only screen and (max-width: 767.98px) {
	.plan--basic {
		border-top: 1rem solid var(--yellow);
	}
}

@media only screen and (min-width: 768px) {
	.plan--basic {
		border-left: 1rem solid var(--yellow);
	}
}

.plan__text {
	padding: 4rem;
}

@media only screen and (max-width: 991.98px) {
	.plan__text {
		padding: 2rem;
	}
}

@media only screen and (min-width: 992px) {
	.plan__text {
		padding: 4rem;
	}
}

@media only screen and (min-width: 992px) {
	.plan {
		grid-template-columns: repeat(2, 1fr);
	}
}

.plan__name {
	margin-top: 0;
	margin-bottom: 3rem;
	font-family: var(--sans);
	font-weight: 600;
}

.plan__price {
	margin-bottom: 0;
}

.plan__price--new ins {
	text-decoration: none;
}

.label {
	display: inline-block;
	padding: .25rem 1.5rem;
	font-weight: 600;
	font-size: 1.4rem;
	text-transform: uppercase;
	border-radius: 99rem;
	background-color: var(--bg-light);
}

.plan__disclaimer {
	margin-bottom: 0;
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--bg-light);
}

@media only screen and (max-width: 991.98px) {
	.plan__disclaimer {
		margin-top: 2rem;
		padding-top: 2rem;
	}
}

@media only screen and (min-width: 992px) {
	.plan__disclaimer {
		margin-top: 3rem;
		padding-top: 3rem;
	}
}

.plan__photo {
	object-fit: cover;
	height: 100%;
}

@media only screen and (max-width: 991.98px) {
	.plan__photo {
		border-radius: 0 0 1rem 1rem;
	}
}

@media only screen and (min-width: 992px) {
	.plan__photo {
		border-radius: 0 0 1rem 0;
	}
}

.for-dealers {
	margin-top: 3rem;
	color: var(--text-dark);
	font-size: 87.5%;
	letter-spacing: -.25px;
	text-align: center;
}



/* Testimonials, Quotes */

.quotes {
	display: grid;
	margin-bottom: 5rem;
}

@media only screen and (max-width: 767.98px) {
	.quotes {
		grid-gap: 3rem;
	}
}

@media only screen and (min-width: 768px) {
	.quotes {
		grid-gap: 5rem;
		grid-template-columns: repeat(2	, 1fr);
	}
}

.quote {
	display: grid;
	grid-gap: 0 2rem;
	grid-template-columns: auto 1fr;
}

.quote__image {
	grid-row: 1 / 3;
	border-radius: 1rem;
	border: .2rem solid var(--yellow);
	box-shadow: rgba(0, 0, 0, .1) 0px 10px 20px, rgba(0, 0, 0, .15) 0px 6px 6px;
}

@media only screen and (max-width: 991.98px) {
	.quote__image {
		width: 8rem;
		height: 8rem;
	}
}

@media only screen and (min-width: 992px) {
	.quote__image {
		width: 12rem;
		height: 12rem;
	}
}

.quote__text {
	margin-bottom: 1rem;
	line-height: 1.6;
}

@media only screen and (max-width: 991.98px) {
	.quote__text {
		font-size: 1.6rem;
	}
}

@media only screen and (min-width: 992px) {
	.quote__text {
		font-size: 1.8rem;
	}
}

.quote__text:before {
	content: "“";
}

.quote__text:after {
	content: "”";
}

.quote__footer {
	font-size: 1.6rem;
	color: var(--text-dark);
}

.quote__author {
	font-weight: 600;
	color: var(--text);
}



/* Case Study */

.case-study {
	display: grid;
	align-items: start;
	border-radius: 1rem;
	background-color: var(--bg-dark);
}

@media only screen and (max-width: 767.98px) {
	.case-study {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	.case-study {
		padding: 3rem;
	}
}

@media only screen and (max-width: 991.98px) {
	.case-study {
		grid-gap: 2rem;
		margin-top: 4rem;
	}
}

@media only screen and (min-width: 992px) {
	.case-study {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 4rem;
		margin-top: 6rem;
		padding: 4rem;
	}
}

.case-study__title {
	grid-column: 1 / -1;
	margin-top: 0;
	margin-bottom: 0;
}

.case-study__image {
	border-radius: 4rem;
	border: 1rem solid var(--bg-light);
}



/* Gallery */

.gallery {
	display: grid;
}

@media only screen and (max-width: 991.98px) {
	.gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 1rem;
	}
}

@media only screen and (min-width: 992px) {
	.gallery {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 2rem;
	}
}



/* FAQ */

.faq {
	margin-bottom: 1rem;
	border-radius: .5rem;
	border-left: .5rem solid var(--yellow);
	background-color: var(--bg-dark);
}

.faq__question {
	cursor: pointer;
	padding: 1.5rem 2rem;
}

.faq__answer {
	padding: 1rem 2rem;
	color: var(--text-light);
	border-top: 1px solid var(--bg-light);
}



/* Contact */

.contact-grid {
	display: grid;

}

@media only screen and (max-width: 991.98px) {
	.contact-grid {
		grid-gap: 2rem;
	}
}

@media only screen and (min-width: 992px) {
	.contact-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
	.contact-grid {
		grid-gap: 4rem;
	}
}

@media only screen and (min-width: 1200px) {
	.contact-grid {
		grid-gap: 8rem;
	}
}

.contact-card {
	margin-bottom: 2rem;
	padding: 2rem;
	text-align: center;
	border-radius: 1rem;
	background-color: var(--bg);
}

.contact-card__text {
	margin-top: 2rem;
	margin-bottom: 0;
}



/* Footer */

.footer {
	margin-top: 5rem;
	padding-top: 3rem;
	padding-bottom: 3rem;
	color: var(--text-dark);
	text-align: center;
	background-color: var(--bg);
}

.copyright {
	margin-bottom: 1rem;
}

.footer__link {
	padding: 1rem;
}



/* Modal */

body.modal-open {
	overflow: hidden;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	z-index: 98;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	border: 0;
	background-color: rgba(0,0,0,.75);
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.modal__content {
	overflow-y: auto;
	height: 100vh;
	max-width: 100rem;
	padding: 2rem;
	background-color: var(--bg);
	box-shadow: rgba(0, 0, 0, .2) 0px 10px 20px, rgba(0, 0, 0, .25) 0px 6px 6px;
}

@media only screen and (max-width: 767.98px) {
	.modal__content {
		padding: 2rem;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
	.modal__content {
		padding: 3rem;
	}
}

@media only screen and (min-width: 992px) {
	.modal__content {
		height: 95vh;
		padding: 5rem;
	}
}

.modal__title {
	margin-top: 0;
}

.modal__close {
	position: fixed;
	top: 1rem;
	right: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 7rem;
	height: 7rem;
	font-size: 3rem;
	border: 0;
	border-radius: 99rem;
	background-color: var(--bg-light);
}



/* Lightbox */

body.scroll-lock {
	overflow: hidden;
}

.lightbox__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	cursor: zoom-out;
}

.lightbox {
	overflow: hidden;
	visibility: hidden;
	pointer-events: none;
	position: fixed;
	z-index: 99;
	opacity: 0;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.9);
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox--active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.lightbox:not(.lightbox--active) {
	pointer-events: none;
}

.lightbox__container {
	overflow: hidden;
	position: relative;
	width: 100%;
	max-width: 95vw;
	height: 95vh;
}

.lightbox__image {
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: opacity 0.4s ease;
	transform: translate(-50%, -50%);
}

.lightbox__image--prev,
.lightbox__image--next {
	z-index: 1;
}

.lightbox__image--current {
	opacity: 1;
	z-index: 2;
}

.lightbox__caption {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	right: 1rem;
	text-align: center;
	color: #fff;
	z-index: 3;
}

.lightbox__arrow,
.lightbox__close {
	position: absolute;
	background: none;
	border: none;
	color: #fff;
	font-size: 4rem;
	cursor: pointer;
	z-index: 4;
	transition: color .25s;
}

.lightbox__arrow:hover,
.lightbox__arrow:focus {
	color: var(--yellow)
}

.lightbox__close:hover,
.lightbox__close:focus {
	color: var(--red);
}

.lightbox__arrow--prev,
.lightbox__arrow--next {
	top: 50%;
	transform: translateY(-50%);
}

@media only screen and (max-width: 479.98px) {
	.lightbox__arrow--prev { left: .5rem; }
	.lightbox__arrow--next { right: .5rem; }
}

@media only screen and (min-width: 480px) {
	.lightbox__arrow--prev { left: 1rem; }
	.lightbox__arrow--next { right: 1rem; }
}

.lightbox__close {
	top: 1rem;
	right: 1rem;
}



/* Utility Classes */

.hidden, [hidden] { display: none !important; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }