@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900");
@import url("fontawesome-all.min.css");

/*
	Aerial by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)

	Nextel theme overrides:
	- Brand Blue: #1e63ff
	- Sky Blue:   #6fb7ff
	- Dark Navy:  #0b1220
	- Overlay:    tuned for modern telco look
*/

/* Reset (unchanged) */
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; }
body { -webkit-text-size-adjust: none; }
mark { background-color: transparent; color: inherit; }
input::-moz-focus-inner { border: 0; padding: 0; }
input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* =========================
   Nextel Theme Variables
   ========================= */
:root{
	--nx-bg: #0b1220;
	--nx-bg2:#08162f;
	--nx-blue:#1e63ff;
	--nx-sky:#6fb7ff;
	--nx-white:#ffffff;
	--nx-text: rgba(255,255,255,0.92);
	--nx-muted: rgba(255,255,255,0.72);
	--nx-border: rgba(255,255,255,0.18);
	--nx-glow: 0 0 28px rgba(30,99,255,0.45);
	--nx-glow2: 0 0 36px rgba(111,183,255,0.28);
}

/* Basic */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
	background: var(--nx-bg);
	overflow: hidden;
}

body.is-preload *, body.is-preload *:before, body.is-preload *:after {
	-moz-animation: none !important;
	-webkit-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
	-moz-transition: none !important;
	-webkit-transition: none !important;
	-ms-transition: none !important;
	transition: none !important;
}

body, input, select, textarea {
	color: var(--nx-text);
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 15pt;
	font-weight: 300 !important;
	letter-spacing: -0.025em;
	line-height: 1.75em;
}

/* Links */
a {
	-moz-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	border-bottom: dotted 1px rgba(255,255,255,0.35);
	color: rgba(255,255,255,0.92);
	outline: 0;
	text-decoration: none;
}
a:hover {
	border-color: transparent;
	color: var(--nx-sky);
}

/* Icon */
.icon { text-decoration: none; position: relative; }
.icon:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	line-height: 1;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 400;
}
.icon > .label { display: none; }
.icon.solid:before { font-weight: 900; }
.icon.brands:before { font-family: 'Font Awesome 5 Brands'; }

/* Wrapper */
@-moz-keyframes wrapper { 0%{opacity:0} 100%{opacity:1} }
@-webkit-keyframes wrapper { 0%{opacity:0} 100%{opacity:1} }
@-ms-keyframes wrapper { 0%{opacity:0} 100%{opacity:1} }
@keyframes wrapper { 0%{opacity:0} 100%{opacity:1} }

#wrapper {
	-moz-animation: wrapper 2.4s forwards;
	-webkit-animation: wrapper 2.4s forwards;
	-ms-animation: wrapper 2.4s forwards;
	animation: wrapper 2.4s forwards;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

/* =========================
   NEXTEL: Particle / Comms Background (NO bg.jpg)
   Drop this into assets/css/main.css (replacing the whole #bg section)
   Also remove/ignore any old url("images/bg.jpg") references.
   ========================= */

/* Optional: brand vars (safe if already defined) */
:root{
	--nx-bg:#0b1220;
	--nx-bg2:#08162f;
	--nx-blue:#1e63ff;
	--nx-sky:#6fb7ff;
}

/* Main BG layer (no image) */
#bg {
	position: fixed;
	top: 0; left: 0;
	height: 100%;
	width: 100%;
	opacity: 1;

	/* Base depth + glow */
	background:
		radial-gradient(1100px 700px at 20% 18%, rgba(30,99,255,0.32), transparent 60%),
		radial-gradient(900px 600px at 82% 22%, rgba(111,183,255,0.22), transparent 62%),
		radial-gradient(700px 500px at 55% 85%, rgba(30,99,255,0.18), transparent 62%),
		linear-gradient(160deg, var(--nx-bg), var(--nx-bg2));
}

/* Particle layer #1 */
#bg:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.30), transparent 2px),
		radial-gradient(1px 1px at 20% 80%, rgba(255,255,255,0.22), transparent 2px),
		radial-gradient(1px 1px at 35% 40%, rgba(255,255,255,0.18), transparent 2px),
		radial-gradient(1px 1px at 55% 25%, rgba(255,255,255,0.22), transparent 2px),
		radial-gradient(1px 1px at 70% 70%, rgba(255,255,255,0.16), transparent 2px),
		radial-gradient(1px 1px at 85% 35%, rgba(255,255,255,0.20), transparent 2px),
		radial-gradient(1px 1px at 92% 82%, rgba(255,255,255,0.14), transparent 2px),
		radial-gradient(1px 1px at 8% 55%, rgba(255,255,255,0.18), transparent 2px);
	background-repeat: repeat;
	background-size: 260px 260px;
	opacity: 0.85;

	/* soft sparkle */
	filter: drop-shadow(0 0 8px rgba(111,183,255,0.12));
	animation: nxParticlesA 18s linear infinite;
	transform: translate3d(0,0,0);
}

/* Particle layer #2 (smaller, faster) */
#bg:after {
	content: "";
	position: absolute;
	inset: -10%;
	background-image:
		radial-gradient(1px 1px at 12% 22%, rgba(111,183,255,0.35), transparent 2px),
		radial-gradient(1px 1px at 28% 62%, rgba(30,99,255,0.28), transparent 2px),
		radial-gradient(1px 1px at 48% 18%, rgba(111,183,255,0.26), transparent 2px),
		radial-gradient(1px 1px at 64% 52%, rgba(30,99,255,0.22), transparent 2px),
		radial-gradient(1px 1px at 78% 28%, rgba(111,183,255,0.24), transparent 2px),
		radial-gradient(1px 1px at 90% 60%, rgba(30,99,255,0.18), transparent 2px);
	background-repeat: repeat;
	background-size: 180px 180px;
	opacity: 0.65;

	/* movement + slight blur for depth */
	filter: blur(0.2px);
	animation: nxParticlesB 12s linear infinite;
	transform: translate3d(0,0,0);
}

/* Subtle “signal sweep” overlay (optional but looks telco) */
#overlay {
	/* keep existing overlay images if you want; this just adds a sweep */
	background-image:
		linear-gradient(120deg, rgba(30,99,255,0.00), rgba(30,99,255,0.08), rgba(111,183,255,0.00)),
		url("images/overlay-pattern.png"),
		url("images/overlay.svg");
	background-size: 220% 220%, auto, cover;
	background-repeat: no-repeat, repeat, no-repeat;
	background-position: 0% 0%, top left, center center;
	animation: nxSweep 9s ease-in-out infinite;
}

/* Animations */
@keyframes nxParticlesA {
	0%   { transform: translate3d(0,0,0); }
	100% { transform: translate3d(-260px, 260px, 0); }
}

@keyframes nxParticlesB {
	0%   { transform: translate3d(0,0,0); }
	100% { transform: translate3d(180px, -180px, 0); }
}

@keyframes nxSweep {
	0%   { background-position: 0% 0%, top left, center center; }
	50%  { background-position: 100% 100%, top left, center center; }
	100% { background-position: 0% 0%, top left, center center; }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
	#bg:before, #bg:after, #overlay { animation: none !important; }
}


/* =========================
   Overlay (Nextel)
   ========================= */
@-moz-keyframes overlay { 0%{opacity:0} 100%{opacity:1} }
@-webkit-keyframes overlay { 0%{opacity:0} 100%{opacity:1} }
@-ms-keyframes overlay { 0%{opacity:0} 100%{opacity:1} }
@keyframes overlay { 0%{opacity:0} 100%{opacity:1} }

#overlay {
	-moz-animation: overlay 1.2s 1.2s forwards;
	-webkit-animation: overlay 1.2s 1.2s forwards;
	-ms-animation: overlay 1.2s 1.2s forwards;
	animation: overlay 1.2s 1.2s forwards;

	background-attachment: fixed, fixed, fixed;
	background-image:
		url("images/overlay-pattern.png"),
		url("images/overlay.svg"),
		radial-gradient(1000px 700px at 50% 0%, rgba(255,255,255,0.06), transparent 70%);
	background-position: top left, center center, center center;
	background-repeat: repeat, no-repeat, no-repeat;
	background-size: auto, cover, cover;

	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

/* Main */
#main {
	height: 100%;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
}
#main:before {
	content: '';
	display: inline-block;
	height: 100%;
	margin-right: 0;
	vertical-align: middle;
	width: 1px;
}

/* =========================
   Header (Nextel)
   ========================= */
@-moz-keyframes header { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }
@-webkit-keyframes header { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }
@-ms-keyframes header { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }
@keyframes header { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }

@-moz-keyframes nav-icons { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }
@-webkit-keyframes nav-icons { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }
@-ms-keyframes nav-icons { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }
@keyframes nav-icons { 0%{transform:translate3d(0,1em,0);opacity:0} 100%{transform:translate3d(0,0,0);opacity:1} }

#header {
	-moz-animation: header 0.9s 1.9s forwards;
	-webkit-animation: header 0.9s 1.9s forwards;
	-ms-animation: header 0.9s 1.9s forwards;
	animation: header 0.9s 1.9s forwards;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	cursor: default;
	display: inline-block;
	opacity: 0;
	position: relative;
	text-align: center;
	top: -1em;
	vertical-align: middle;
	width: 90%;
}

/* Nextel wordmark feel */
#header h1 {
	font-size: 4.35em;
	font-weight: 900;
	letter-spacing: 0.06em;   /* cleaner, telco feel */
	line-height: 1em;
	text-transform: uppercase;
	color: var(--nx-white);
	text-shadow:
		0 10px 35px rgba(0,0,0,0.45),
		var(--nx-glow);
}

/* Tagline */
#header p {
	font-size: 1.25em;
	margin: 0.75em 0 0.25em 0;
	opacity: 0.88;
	color: var(--nx-muted);
}

/* Nav */
#header nav { margin: 1.5em 0 0 0; }

#header nav li {
	-moz-animation: nav-icons 0.5s ease-in-out forwards;
	-webkit-animation: nav-icons 0.5s ease-in-out forwards;
	-ms-animation: nav-icons 0.5s ease-in-out forwards;
	animation: nav-icons 0.5s ease-in-out forwards;

	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;

	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);

	display: inline-block;
	height: 5.35em;
	line-height: 5.885em;
	opacity: 0;
	position: relative;
	top: 0;
	width: 5.35em;
}

/* Animation delays (unchanged) */
#header nav li:nth-child(1){animation-delay:2.5s}
#header nav li:nth-child(2){animation-delay:2.75s}
#header nav li:nth-child(3){animation-delay:3s}
#header nav li:nth-child(4){animation-delay:3.25s}
#header nav li:nth-child(5){animation-delay:3.5s}
#header nav li:nth-child(6){animation-delay:3.75s}
#header nav li:nth-child(7){animation-delay:4s}
#header nav li:nth-child(8){animation-delay:4.25s}
#header nav li:nth-child(9){animation-delay:4.5s}
#header nav li:nth-child(10){animation-delay:4.75s}

#header nav a {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-touch-callout: none;
	border: 0;
	display: inline-block;
}

#header nav a:before {
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;

	border-radius: 100%;
	border: solid 1px var(--nx-border);
	display: block;
	font-size: 1.75em;
	height: 2.5em;
	line-height: 2.5em;
	position: relative;
	text-align: center;
	top: 0;
	width: 2.5em;

	/* Glassy telco feel */
	background: rgba(255,255,255,0.06);
	box-shadow:
		0 14px 40px rgba(0,0,0,0.30),
		var(--nx-glow2);
}

#header nav a:hover { font-size: 1.1em; }
#header nav a:hover:before {
	background-color: rgba(30, 99, 255, 0.18);
	border-color: rgba(30, 99, 255, 0.55);
	color: var(--nx-white);
	box-shadow: 0 16px 44px rgba(0,0,0,0.30), var(--nx-glow);
}
#header nav a:active { font-size: 0.95em; background: none; }
#header nav a:active:before {
	background-color: rgba(30, 99, 255, 0.28);
	border-color: rgba(111, 183, 255, 0.55);
	color: var(--nx-white);
}
#header nav a span { display: none; }

/* Footer */
#footer {
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.55) 75%);
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.55) 75%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.55) 75%);
	background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.55) 75%);
	bottom: 0;
	cursor: default;
	height: 6em;
	left: 0;
	line-height: 8em;
	position: absolute;
	text-align: center;
	width: 100%;
}

/* =========================
   Responsive (keep original sizing)
   ========================= */
@media screen and (max-width: 1680px) {
	body, input, select, textarea { font-size: 13pt; }

	@-moz-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-1500px,0,0)} }
	@-webkit-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-1500px,0,0)} }
	@-ms-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-1500px,0,0)} }
	@keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-1500px,0,0)} }

	#bg { background-size: cover, cover, cover, 1500px auto; width: 4500px; }
}

@media screen and (max-width: 1280px) {
	body, input, select, textarea { font-size: 12pt; }

	@-moz-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-750px,0,0)} }
	@-webkit-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-750px,0,0)} }
	@-ms-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-750px,0,0)} }
	@keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-750px,0,0)} }

	#bg { background-size: cover, cover, cover, 750px auto; width: 2250px; }
}

@media screen and (max-width: 736px) {
	body { min-width: 320px; }
	body, input, select, textarea { font-size: 11pt; }

	@-moz-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-300px,0,0)} }
	@-webkit-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-300px,0,0)} }
	@-ms-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-300px,0,0)} }
	@keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-300px,0,0)} }

	#bg { background-size: cover, cover, cover, 300px auto; width: 900px; }

	#header h1 { font-size: 2.5em; }
	#header p { font-size: 1em; }
	#header nav { font-size: 1em; }
	#header nav a:hover { font-size: 1em; }
	#header nav a:active { font-size: 1em; }
}

@media screen and (max-width: 480px) {
	@-moz-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-412.5px,0,0)} }
	@-webkit-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-412.5px,0,0)} }
	@-ms-keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-412.5px,0,0)} }
	@keyframes bg { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-412.5px,0,0)} }

	#bg { background-size: cover, cover, cover, 412.5px auto; width: 1237.5px; }
	#header nav { padding: 0 1em; }
}