:root {
	--color-logo--blackberry-100: rgb(162, 32, 102);
	--color-logo--blackberry-25: rgba(162, 32, 102, 0.25);
	--color-logo--blackberry-50: rgba(162, 32, 102, 0.50);
	--color-logo--blackberry-75: rgba(162, 32, 102, 0.75);
	--color-logo--blue-100: rgb(0, 164, 239);
	--color-logo--blue-25: rgba(0, 164, 239, 0.25);
	--color-logo--blue-50: rgba(0, 164, 239, 0.50);
	--color-logo--blue-75: rgba(0, 164, 239, 0.75);
	--color-logo--orange-100: rgb(242, 145, 16);
	--color-logo--orange-25: rgba(242, 145, 16, 0.25);
	--color-logo--orange-50: rgba(242, 145, 16, 0.50);
	--color-logo--orange-75: rgba(242, 145, 16, 0.75);

	--color-logo-dark-blackberry-100: rgb(132, 9, 72);
	--color-logo-dark-blackberry-25: rgba(132, 9, 72, 0.25);
	--color-logo-dark-blackberry-50: rgba(132, 9, 72, 0.50);
	--color-logo-dark-blackberry-75: rgba(132, 9, 72, 0.75);
	--color-logo-dark-blue-100: rgb(0, 134, 209);
	--color-logo-dark-blue-25: rgba(0, 134, 209, 0.25);
	--color-logo-dark-blue-50: rgba(0, 134, 209, 0.50);
	--color-logo-dark-blue-75: rgba(0, 134, 209, 0.75);
	--color-logo-dark-orange-100: rgb(212, 115, 1);
	--color-logo-dark-orange-25: rgba(212, 115, 1, 0.25);
	--color-logo-dark-orange-50: rgba(212, 115, 1, 0.50);
	--color-logo-dark-orange-75: rgba(212, 115, 1, 0.75);

	--color-logo-light-blackberry-100: rgb(192, 92, 132);
	--color-logo-light-blackberry-25: rgba(192, 92, 132, 0.25);
	--color-logo-light-blackberry-50: rgba(192, 92, 132, 0.50);
	--color-logo-light-blackberry-75: rgba(192, 92, 132, 0.75);
	--color-logo-light-blue-100: rgb(31, 194, 255);
	--color-logo-light-blue-25: rgba(31, 194, 255, 0.25);
	--color-logo-light-blue-50: rgba(31, 194, 255, 0.50);
	--color-logo-light-blue-75: rgba(31, 194, 255, 0.75);
	--color-logo-light-orange-100: rgb(255, 175, 47);
	--color-logo-light-orange-25: rgba(255, 175, 47, 0.25);
	--color-logo-light-orange-50: rgba(255, 175, 47, 0.50);
	--color-logo-light-orange-75: rgba(255, 175, 47, 0.75);

	--content-max-width: 60rem;

	--default-color-dark: rgb(25, 23, 23);
	--default-color-dark-25: rgba(25, 23, 23, .25);
	--default-color-dark-50: rgba(25, 23, 23, .5);
	--default-color-dark-75: rgba(25, 23, 23, .75);

	--default-color-light: rgb(255, 255, 255);
	--default-color-light-25: rgba(255, 255, 255, .25);
	--default-color-light-50: rgba(255, 255, 255, .5);
	--default-color-light-75: rgba(255, 255, 255, .75);

	--section-x-margin: 10rem;
}


/* =========================
	RESET / BASE
	========================= */

* {
	box-sizing: border-box;
	font-family: "Raleway", sans-serif;
	font-optical-sizing: auto;
	hyphens: auto;
	line-height: 2rem;
	margin: 0;
	padding: 0;
}

body {
	color: white;
    font-weight: 200;
}

a {
	color: white;
	text-decoration: none;
}

a.underline:hover {
	text-decoration: underline;
}

b {
	font-weight: bold;
}

/* =========================
	TEXT UTILITIES
	========================= */

.hyphens-auto { hyphens: auto; }
.hyphens-initial { hyphens: initial; }

.no-wrap { white-space: nowrap; }

.text-center { text-align: center; }
.text-justify { text-align: justify; }
.text-left { text-align: left; }
.text-right { text-align: right; }


/* =========================
	SVG
	========================= */

.svg-light svg {
	fill: white;
}

.svg-dark svg {
	fill: #191618;
}


/* =========================
	BACKGROUND COLORS
	========================= */

.bg-dark { background-color: var(--default-color-dark); }
.bg-dark-25 { background-color: var(--default-color-dark-25); }
.bg-dark-50 { background-color: var(--default-color-dark-50); }
.bg-dark-75 { background-color: var(--default-color-dark-75); }

.bg-light { background-color: var(--default-color-light); }
.bg-light-25 { background-color: var(--default-color-light-25); }
.bg-light-50 { background-color: var(--default-color-light-50); }
.bg-light-75 { background-color: var(--default-color-light-75); }

.bgcolor-logo-light-blackberry-25 { background-color: var(--color-logo-light-blackberry-25); }
.bgcolor-logo-light-blackberry-50 { background-color: var(--color-logo-light-blackberry-50); }
.bgcolor-logo-light-blackberry-75 { background-color: var(--color-logo-light-blackberry-75); }
.bgcolor-logo-light-blackberry-100 { background-color: var(--color-logo-light-blackberry-100); }

.bgcolor-logo--blackberry-25 { background-color: var(--color-logo--blackberry-25); }
.bgcolor-logo--blackberry-50 { background-color: var(--color-logo--blackberry-50); }
.bgcolor-logo--blackberry-75 { background-color: var(--color-logo--blackberry-75); }
.bgcolor-logo--blackberry-100 { background-color: var(--color-logo--blackberry-100); }

.bgcolor-logo-dark-blackberry-25 { background-color: var(--color-logo-dark-blackberry-25); }
.bgcolor-logo-dark-blackberry-50 { background-color: var(--color-logo-dark-blackberry-50); }
.bgcolor-logo-dark-blackberry-75 { background-color: var(--color-logo-dark-blackberry-75); }
.bgcolor-logo-dark-blackberry-100 { background-color: var(--color-logo-dark-blackberry-100); }

.bgcolor-logo-light-blue-25 { background-color: var(--color-logo-light-blue-25); }
.bgcolor-logo-light-blue-50 { background-color: var(--color-logo-light-blue-50); }
.bgcolor-logo-light-blue-75 { background-color: var(--color-logo-light-blue-75); }
.bgcolor-logo-light-blue-100 { background-color: var(--color-logo-light-blue-100); }

.bgcolor-logo--blue-25 { background-color: var(--color-logo--blue-25); }
.bgcolor-logo--blue-50 { background-color: var(--color-logo--blue-50); }
.bgcolor-logo--blue-75 { background-color: var(--color-logo--blue-75); }
.bgcolor-logo--blue-100 { background-color: var(--color-logo--blue-100); }

.bgcolor-logo-dark-blue-25 { background-color: var(--color-logo-dark-blue-25); }
.bgcolor-logo-dark-blue-50 { background-color: var(--color-logo-dark-blue-50); }
.bgcolor-logo-dark-blue-75 { background-color: var(--color-logo-dark-blue-75); }
.bgcolor-logo-dark-blue-100 { background-color: var(--color-logo-dark-blue-100); }

.bgcolor-logo-light-orange-25 { background-color: var(--color-logo-light-orange-25); }
.bgcolor-logo-light-orange-50 { background-color: var(--color-logo-light-orange-50); }
.bgcolor-logo-light-orange-75 { background-color: var(--color-logo-light-orange-75); }
.bgcolor-logo-light-orange-100 { background-color: var(--color-logo-light-orange-100); }

.bgcolor-logo--orange-25 { background-color: var(--color-logo--orange-25); }
.bgcolor-logo--orange-50 { background-color: var(--color-logo--orange-50); }
.bgcolor-logo--orange-75 { background-color: var(--color-logo--orange-75); }
.bgcolor-logo--orange-100 { background-color: var(--color-logo--orange-100); }

.bgcolor-logo-dark-orange-25 { background-color: var(--color-logo-dark-orange-25); }
.bgcolor-logo-dark-orange-50 { background-color: var(--color-logo-dark-orange-50); }
.bgcolor-logo-dark-orange-75 { background-color: var(--color-logo-dark-orange-75); }
.bgcolor-logo-dark-orange-100 { background-color: var(--color-logo-dark-orange-100); }


/* =========================
	TEXT COLORS
	========================= */

.default-color-dark { color: var(--default-color-dark); }
.default-color-dark-25 { color: var(--default-color-dark-25); }
.default-color-dark-50 { color: var(--default-color-dark-50); }
.default-color-dark-75 { color: var(--default-color-dark-75); }

.default-color-light { color: var(--default-color-light); }
.default-color-light-25 { color: var(--default-color-light-25); }
.default-color-light-50 { color: var(--default-color-light-50); }
.default-color-light-75 { color: var(--default-color-light-75); }

.color-logo-light-blackberry-25 { color: var(--color-logo-light-blackberry-25); }
.color-logo-light-blackberry-50 { color: var(--color-logo-light-blackberry-50); }
.color-logo-light-blackberry-75 { color: var(--color-logo-light-blackberry-75); }
.color-logo-light-blackberry-100 { color: var(--color-logo-light-blackberry-100); }

.color-logo--blackberry-25 { color: var(--color-logo--blackberry-25); }
.color-logo--blackberry-50 { color: var(--color-logo--blackberry-50); }
.color-logo--blackberry-75 { color: var(--color-logo--blackberry-75); }
.color-logo--blackberry-100 { color: var(--color-logo--blackberry-100); }

.color-logo-dark-blackberry-25 { color: var(--color-logo-dark-blackberry-25); }
.color-logo-dark-blackberry-50 { color: var(--color-logo-dark-blackberry-50); }
.color-logo-dark-blackberry-75 { color: var(--color-logo-dark-blackberry-75); }
.color-logo-dark-blackberry-100 { color: var(--color-logo-dark-blackberry-100); }

.color-logo-light-blue-25 { color: var(--color-logo-light-blue-25); }
.color-logo-light-blue-50 { color: var(--color-logo-light-blue-50); }
.color-logo-light-blue-75 { color: var(--color-logo-light-blue-75); }
.color-logo-light-blue-100 { color: var(--color-logo-light-blue-100); }

.color-logo--blue-25 { color: var(--color-logo--blue-25); }
.color-logo--blue-50 { color: var(--color-logo--blue-50); }
.color-logo--blue-75 { color: var(--color-logo--blue-75); }
.color-logo--blue-100 { color: var(--color-logo--blue-100); }

.color-logo-dark-blue-25 { color: var(--color-logo-dark-blue-25); }
.color-logo-dark-blue-50 { color: var(--color-logo-dark-blue-50); }
.color-logo-dark-blue-75 { color: var(--color-logo-dark-blue-75); }
.color-logo-dark-blue-100 { color: var(--color-logo-dark-blue-100); }

.color-logo-light-orange-25 { color: var(--color-logo-light-orange-25); }
.color-logo-light-orange-50 { color: var(--color-logo-light-orange-50); }
.color-logo-light-orange-75 { color: var(--color-logo-light-orange-75); }
.color-logo-light-orange-100 { color: var(--color-logo-light-orange-100); }

.color-logo--orange-25 { color: var(--color-logo--orange-25); }
.color-logo--orange-50 { color: var(--color-logo--orange-50); }
.color-logo--orange-75 { color: var(--color-logo--orange-75); }
.color-logo--orange-100 { color: var(--color-logo--orange-100); }

.color-logo-dark-orange-25 { color: var(--color-logo-dark-orange-25); }
.color-logo-dark-orange-50 { color: var(--color-logo-dark-orange-50); }
.color-logo-dark-orange-75 { color: var(--color-logo-dark-orange-75); }
.color-logo-dark-orange-100 { color: var(--color-logo-dark-orange-100); }


.slogan {
    font-size: xxx-large;
    font-weight: 100;
	font-variant: small-caps;
    line-height: 3.5rem;
    text-shadow: 3px 3px 5px black;
    text-align: center;
}


/* =========================
   DESKTOP LAYOUT OVERRIDES
   ========================= */

.stage {
	background-image: var(--stage-background-image);
}

.content-background {
	background-image: var(--content-background-image);
}


/* =========================
	HEADER
	========================= */

.header {
	position: sticky;
	top: 0;
	z-index: 99;
}


/* =========================
	NAV (DESKTOP)
	========================= */

.nav-container {
	background-color: #191618c7;
	width: 100%;
}

.nav-list {
	align-items: center;
	display: flex;
	gap: 2rem;
	height: 4rem;
	justify-content: space-between;
	list-style-type: none;
	margin: 0 auto;
	max-width: var(--content-max-width);
	padding: 0 5rem;
}

.nav-list li:first-child,
.nav-list div:first-child {
	align-items: center;
	display: flex;
	gap: .5rem;
}

.nav-list .logo {
	height: 1.7rem;
	width: 1.7rem;
}

.nav-list .logo.shadow {
	display: none;
	margin: 1px 0 0 1px;
	position: absolute;
	z-index: -1;
}


/* =========================
	NAV (MOBILE)
	========================= */

.mobile-burger-button {
	cursor: pointer;
	display: block;
	flex-direction: row;
	height: 1rem;
	margin: .5rem;
	position: relative;
	width: 1rem;
}

.mobile-burger-top,
.mobile-burger-middle,
.mobile-burger-bottom {
	background-color: white;
	display: block;
	height: .2rem;
	opacity: 1;
	position: absolute;
	rotate: 0deg;
	transition-duration: .25s;
	transition-property: opacity, rotate, top;
	transition-timing-function: linear;
	width: 1rem;
}

.mobile-burger-top { top: .1rem; }
.mobile-burger-middle { top: .4rem; }
.mobile-burger-bottom { bottom: .1rem; }

#menu-toggle:checked ~ .header .mobile-burger-top {
	rotate: 45deg;
	top: 50%;
}

#menu-toggle:checked ~ .header .mobile-burger-middle {
	opacity: 0;
}

#menu-toggle:checked ~ .header .mobile-burger-bottom {
	rotate: -45deg;
	top: 50%;
}

#menu-toggle:checked ~ .header .mobile-burger-top.shadow,
#menu-toggle:checked ~ .header .mobile-burger-bottom.shadow {
	background-color: var(--default-color-dark-100);
	left: 1px;
	position: absolute;
	top: 9px;
	z-index: -1;
}

.mobile-menu {
	background-attachment: fixed;
	background-image: var(--stage-background-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 100dvh;
	left: 0;
	list-style: none;
	overflow: hidden;
	position: fixed;
	top: 0;
	transition-duration: .25s;
	transition-property: width;
	transition-timing-function: linear;
	width: 0;
}

#menu-toggle:checked ~ .header .nav-list .logo.shadow {
	display: block;
}

#menu-toggle:checked ~ .header .nav-list {
	text-shadow: 1px 1px var(--default-color-dark-100);
}

#menu-toggle:checked ~ .header .mobile-menu {
	width: 100%;
}

.header .mobile-menu ul {
	list-style: none;
	margin: 6rem 2rem;
	white-space: nowrap;
}

.mobile-menu ul > li {
	margin-bottom: 1rem;
	text-shadow: 1px 1px var(--default-color-dark-100);
}

.mobile-nav-copyright {
	bottom: 4rem;
	font-size: .7rem;
	position: absolute;
	text-align: center;
	text-shadow: 1px 1px var(--default-color-dark-100);
	width: 100vw;
}


.blender, main, footer {
    opacity: 1;
	transition-duration: .25s;
	transition-property: opacity;
	transition-timing-function: linear;
}

#menu-toggle:checked ~ .blender, #menu-toggle:checked ~ main, #menu-toggle:checked ~ footer {
    opacity: 0;
}


/* =========================
	BLENDER STRIP
	========================= */

.blender {
	position: sticky;
	top: 4rem;
	z-index: 98;
	-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 32%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
}

.blender .bg-blur {
	height: 4rem;
}



/* =========================
	CONTENT
	========================= */

.content {
	padding-top: 4rem;
}

section {
	margin-bottom: var(--section-x-margin);
}

.content-background {
	background-attachment: fixed;
	background-color: var(--default-color-dark-75);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.bg-blur {
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}

.content-width {
	margin: 0 auto;
	max-width: var(--content-max-width);
	padding: 0 2rem;
}

.content li {
	list-style: none;
	padding-left: 1.5rem;
	position: relative;
}

.content li:before {
	content: '\274F';
	display: inline-block;
	left: 0;
	position: absolute;
}


/* =========================
	FOOTER
	========================= */

footer {
	background-color: #191618c7;
	padding: 4rem 6rem;
}

footer .footer-company {
	white-space: nowrap;
}

footer ul {
	list-style: none;
	padding: 0;
}

footer .footer-phone,
footer .footer-mail,
footer .footer-social-media {
	white-space: nowrap;
}

footer .footer-phone svg,
footer .footer-mail svg,
footer .footer-social-media svg {
	position: relative;
	top: 4px;
}

.footer-line:not(:last-child) {
	margin-bottom: 2rem;
}

.footer-top {
	display: flex;
	gap: 4rem;
	justify-content: center;
}

.footer-left {
	display: flex;
	gap: 1rem;
}

.footer-left .logo {
	height: 3rem;
	width: 3rem;
}

.footer-bottom {
	display: flex;
	flex-direction: row;
	font-size: .7rem;
	gap: 2rem;
	justify-content: center;
}

.footer-short-links {
	display: flex;
	margin-top: 0;
}

.footer-bottom li.space:after {
	content: '';
	margin: 0 0.5rem;
}

.footer-bottom li.divider:after {
	content: '|';
	display: inline-block;
}