@charset "UTF-8";

@import url('/package/styles/fonts.css');

/* ------------------------------ */
:root {
	/* ------------------------------ */
	--font-circular-std: circular-std, 'Circular STD', Arial, sans-serif;
	--font-gotham: gotham, 'Gotham', Arial, sans-serif;
	--font-roboto: roboto, 'Roboto', Arial, sans-serif;
	--font-size: 16px;
	/* ------------------------------ */
	--background: #F0F0F0;
	--blue-01: #161C6A;
	--blue-02: #1E69E8;
	--blue-03: #72CBFF;
	--blue-overlay: rgba(30, 105, 230, 0.25);
	--dark-gray: #232323;
	--red-01: #AF0000;
	--red-02: #FA0000;
	--red-03: #FF7A7A;
	/* ------------------------------ */
	--gap: 80px;
	--line-height: 20px;
	--masthead-height: 80px;
	--page-margin: 80px;
}

/* ------------------------------ */
body {
	background-color: var(--background);
	font-family: var(--font-roboto);
	font-size: 16px;
	line-height: 20px;
}
body, button, dl, fieldset, figure, input, ol, select, textarea, ul {
	margin: 0px;
}
button, input[type="button"], input[type="reset"], input[type="submit"] {
	cursor: pointer;
	padding: 0px;
}
h1, h2, h3, h4, h5, h6, p {
	margin-bottom: 20px;
	margin-top: 0px;
}
img, svg {
	display: block;
}
a {
	color: var(--blue-02);
}

/* --------------- Container Narrow --------------- */
*.containerNarrow {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	width: 1200px;
}

/* --------------- Header 1 --------------- */
*.header1 {
	align-items: center;
	appearance: none;
	display: flex;
	flex-direction: column;
	font-family: var(--font-gotham);
	font-size: 36px;
	font-weight: bold;
	line-height: 40px;
	margin-bottom: 40px;
	row-gap: 10px;
	text-align: center;
	text-transform: uppercase;
}
*.header1::after {
	background-color: var(--red-02);
	content: ' ';
	display: block;
	height: 4px;
	width: 240px;
}

/* --------------- JITS Logo --------------- */
svg.JITSLogo rect.redBox {
	fill: var(--red-01);
}
svg.JITSLogo path.symbolMark {
	fill: #FFFFFF;
}
svg.JITSLogo path.wordMark {
	fill: #FFFFFF;
}

/* --------------- Site Menu --------------- */
nav.siteMenu {
	font-family: var(--font-gotham);
	font-size: 12px;
	font-weight: bold;
	line-height: 20px;
	text-transform: uppercase;
}
nav.siteMenu ul {
	list-style: none;
	padding-left: 0px;
}
nav.siteMenu a {
	--padding: 25px;
	box-sizing: border-box;
	color: #FFFFFF;
	display: block;
	height: inherit;
	padding-left: var(--padding);
	padding-right: var(--padding);
	text-decoration: none;
	transition: color 0.25s;
}
nav.siteMenu a:hover {
	color: var(--blue-03);
}
nav.siteMenu a.active {
	background-color: rgba(225, 225, 225, 0.10);
}

/* --------------- Side Panel Toggle Button --------------- */
button#toggleSidePanel {
	--dimension: 30px;
	--margin: calc((var(--masthead-height) - var(--dimension)) / 2);
	background: none;
	border: none;
	display: none;
	height: var(--dimension);
	left: 100%;
	margin-left: calc(var(--margin) * -1);
	margin-top: var(--margin);
	position: fixed;
	top: 0px;
	transform: translateX(-100%);
	width: var(--dimension);
	z-index: 10;
}
button#toggleSidePanel svg {
	--displacement: 50%;
	--line-displacement: 9px;
	--line-rotation: 45deg;
	--line-scale: 1.41421;
	left: var(--displacement);
	position: absolute;
	top: var(--displacement);
	transform: translate(calc(var(--displacement) * -1), calc(var(--displacement) * -1));
}
button#toggleSidePanel svg line {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 4px;
	transform-origin: center;
	transition: stroke 0.25s, transform 0.25s;
}
button#toggleSidePanel svg line:first-of-type {
	transform: translateY(calc(var(--line-displacement) * -1));
}
button#toggleSidePanel svg line:last-of-type {
	transform: translateY(var(--line-displacement));
}

/* --------------- Masthead --------------- */
header#masthead {
	background-color: var(--blue-01);
	box-sizing: border-box;
	height: var(--masthead-height);
	top: 0px;
	padding-left: var(--page-margin);
	padding-right: var(--page-margin);
	position: fixed;
	width: 100%;
	z-index: 9;
}
header#masthead > div.contentWrapper {
	align-items: center;
	display: flex;
	height: inherit;
	justify-content: space-between;
}
header#masthead svg.JITSLogo {
	height: 40px;
	width: auto;
}

/* --------------- Masthead Site Menu --------------- */
nav#siteMenuMasthead {
	--sub-links-height: 40px;
}
nav#siteMenuMasthead > ul {
	display: flex;
	height: inherit;
}
nav#siteMenuMasthead > ul > li {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
}
nav#siteMenuMasthead li:hover nav.subMenu {
	--padding: 15px;
}
nav#siteMenuMasthead li:hover nav.subMenu a {
	height: var(--sub-links-height);
}
nav#siteMenuMasthead nav.subMenu {
	--padding: 0px;
	background-color: var(--blue-01);
	display: block;
	margin-top: var(--masthead-height);
	padding-bottom: var(--padding);
	padding-top: var(--padding);
	position: absolute;
	text-align: right;
	transition: padding-bottom 0.25s, padding-top 0.25s;
}
nav#siteMenuMasthead nav.subMenu a {
	height: 0px;
	line-height: var(--sub-links-height);
	overflow: hidden;
	transition: color 0.25s, height 0.25s;
	white-space: nowrap;
}
nav#siteMenuMasthead a {
	line-height: var(--masthead-height);
}

/* --------------- Side Panel --------------- */
div#sidePanel {
	--width: 280px;
	background-color: var(--blue-01);
	box-shadow: none;
	box-sizing: border-box;
	height: 100vh;
	left: 100%;
	margin-left: 0px;
	position: fixed;
	top: 0px;
	transition: box-shadow 0.25s, margin-left 0.25s;
	width: var(--width);
	z-index: 9;
}

/* --------------- Side Panel Site Menu --------------- */
nav#siteMenuSidePanel {
	margin-top: calc(var(--masthead-height) + 20px);
}
nav#siteMenuSidePanel a {
	--height: 40px;
	line-height: var(--height);
	height: var(--height);
}

/* --------------- Page Banner --------------- */
header#pageBanner {
	--anchor-position: 0px;
	background-color: var(--dark-gray);
	margin-bottom: var(--gap);
	margin-top: var(--masthead-height);
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* --------------- Footer --------------- */
footer#footer {
	color: #FFFFFF;
	font-size: 14px;
	line-height: 20px;
	position: relative;
	margin-top: var(--gap);
	width: 100%;
}
footer#footer > div {
	box-sizing: border-box;
	width: inherit;
}

/* --------------- Upper Footer --------------- */
div#footerUpper {
	--gap: 20px;
	--big-gap: calc(var(--gap) * 2);
	align-items: flex-start;
	background-color: var(--blue-01);
	display: flex;
	justify-content: space-between;
	padding: var(--page-margin);
}
div#footerUpper *.footerHeader {
	font-weight: bold;
}

/* --------------- Lower Footer --------------- */
div#footerLower {
	--padding: 20px;
	align-items: center;
	background-color: var(--dark-gray);
	box-sizing: border-box;
	display: flex;
	line-height: 20px;
	justify-content: space-between;
	padding-bottom: var(--padding);
	padding-left: var(--page-margin);
	padding-right: var(--page-margin);
	padding-top: var(--padding);
	width: 100%;
}
div#footerLower p {
	margin-bottom: 0px;	
}
div#footerLower p.copyright {
	font-family: var(--font-circular-std);
	font-weight: bold;
}
div#footerLower p.byline {
	font-size: 14px;
}
div#footerLower p.byline a {
	color: var(--blue-03);
	text-decoration: none;
}

/* --------------- Footer Address --------------- */
address#footerContactDetails {
	--icon-size: 20px;
	align-items: flex-start;
	display: flex;
	font-style: normal;
	column-gap: var(--big-gap);
}
address#footerContactDetails > div {
	align-items: flex-start;
	column-gap: var(--big-gap);
	display: flex;
	flex-shrink: 0;
}
address#footerContactDetails svg.icon {
	flex-shrink: 0;
	height: var(--icon-size);
	margin-right: var(--gap);
	width: var(--icon-size);
}
address#footerContactDetails svg.JITSLogo {
	flex-shrink: 0;
	height: auto;
	width: 200px;
}
address#footerContactDetails svg path {
	fill: #FFFFFF;
}
address#footerContactDetails dd {
	margin-left: 0px;	
}

/* --------------- Footer Addresses --------------- */
div#footerAddresses {
	display: flex;
	max-width: 470px;
}
div#footerAddresses dl > * {
	margin-bottom: 10px;
}

/* --------------- Footer Contact Links --------------- */
dl#footerContactLinks {
	align-items: center;
	display: grid;
	grid-column-gap: var(--gap);
	grid-template-columns: var(--icon-size) auto;
	grid-row-gap: var(--gap);
}
dl#footerContactLinks a {
	color: #FFFFFF;
	text-decoration: none;
}

/* --------------- Footer Social Media --------------- */
div#footerSocialMedia {
	min-width: 240px;
}
div#footerSocialMedia ul {
	list-style: none;
	padding-left: 0px;
}
div#footerSocialMedia a {
	--dimension: 40px;
	background-color: #FFFFFF;
	border-radius: 5px;
	display: block;
	height: var(--dimension);
	position: relative;
	width: var(--dimension);
}
div#footerSocialMedia svg {
	--dimension: 26px;
	--displacement: 50%;
	height: var(--dimension);
	left: var(--displacement);
	position: absolute;
	top: var(--displacement);
	transform: translate(calc(var(--displacement) * -1), calc(var(--displacement) * -1));
	width: var(--dimension);
}
div#footerSocialMedia path {
	fill: var(--blue-01);
}

/* ------------------------------ */
@media all and (max-width: 1369px) {
/* ------------------------------ */
:root {
	/* ------------------------------ */
	--gap: 60px;
	--page-margin: 40px;
}

/* --------------- Header 1 --------------- */
*.header1 {
	font-size: 32px;
	line-height: 36px;
}
*.header1::after {
	width: 180px;
}

/* --------------- Site Menu --------------- */
nav#siteMenuMasthead a {
	--padding: 20px;
}

/* --------------- Upper Footer --------------- */
div#footerUpper {
	--gap: 15px;
	display: block;
}

/* --------------- Lower Footer --------------- */
div#footerLower p.copyright {
	font-size: 14px;
}

/* --------------- Footer Address --------------- */
address#footerContactDetails {
	--icon-size: 24px;
	display: block;
	font-size: 14px;
}
address#footerContactDetails svg.JITSLogo {
	margin-bottom: 40px;
	width: 180px;
}

/* --------------- Footer Social Media --------------- */
div#footerSocialMedia {
	margin-top: var(--big-gap);
	min-width: 0px;
}
}

/* ------------------------------ */
@media all and (max-width: 1279px) {
/* --------------- Container Narrow --------------- */
*.containerNarrow {
	width: calc(100% - (var(--page-margin) * 2));
}
}

/* ------------------------------ */
@media all and (max-width: 1079px) {
/* ------------------------------ */
:root {
	/* ------------------------------ */
	--font-size: 16px;
	--line-height: 20px;
}

/* --------------- Lower Footer --------------- */
div#footerLower {
	display: block;
}
div#footerLower p.copyright {
	margin-bottom: 10px;
}

/* --------------- Footer Address --------------- */
address#footerContactDetails > div {
	display: block;
}	
}

/* ------------------------------ */
@media all and (max-width: 769px) {
/* ------------------------------ */
:root {
	/* ------------------------------ */
	--gap: 40px;
	--masthead-height: 60px;
	--page-margin: 20px;
}

/* --------------- Header 1 --------------- */
*.header1 {
	font-size: 28px;
	line-height: 30px;
	margin-bottom: 30px;
}

/* --------------- Side Panel Toggle Button --------------- */
button#toggleSidePanel {
	display: block;
}
button#toggleSidePanel.active svg line:first-of-type {
	transform: rotate(var(--line-rotation)) scaleX(var(--line-scale));
}
button#toggleSidePanel.active svg line:nth-of-type(2) {
	transform: scaleX(0);
}
button#toggleSidePanel.active svg line:last-of-type {
	transform: rotate(calc(var(--line-rotation) * -1)) scaleX(var(--line-scale));
}

/* --------------- Masthead --------------- */
header#masthead svg.JITSLogo {
	height: 30px;
}

/* --------------- Masthead Site Menu --------------- */
nav#siteMenuMasthead {
	display: none;
}

/* --------------- Side Panel --------------- */
div#sidePanel.active {
	box-shadow: -2px 0px 4px 2px rgba(0, 0, 0, 0.15);
	margin-left: calc(var(--width) * -1);
}

/* --------------- Upper Footer --------------- */
div#footerUpper {
	--padding: 40px;
	padding-bottom: var(--padding);
	padding-top: var(--padding);
}
}