/**
 * Portal Modern
 * e-Journal Politeknik Penerbangan Surabaya
 *
 * Stage 2:
 * Header + Hero
 */

:root {
	--portal-orange: #f47a1f;
	--portal-orange-dark: #d95c08;
	--portal-orange-soft: #fff2e7;

	--portal-navy: #12324b;
	--portal-navy-dark: #0a263d;

	--portal-text: #425b6b;
	--portal-muted: #71838f;

	--portal-bg: #f5f8fa;
	--portal-white: #fff;

	--portal-border: #e1e8ec;

	--portal-shadow:
		0 12px 36px rgba(18,50,75,.07);
}


/* =========================================================
   GLOBAL RESET
   ========================================================= */

html {
	scroll-behavior: smooth;
}

body.portal-modern-body {
	margin: 0 !important;
	padding: 0 !important;

	overflow-x: hidden !important;

	background: var(--portal-bg) !important;

	color: var(--portal-text) !important;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif !important;
}


.portal-site,
.portal-site .pkp_structure_content,
.portal-site .pkp_structure_main,
.portal-site .page_index_site {
	box-sizing: border-box !important;

	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	float: none !important;

	background: transparent !important;
}


.portal-site .pkp_structure_main:before,
.portal-site .pkp_structure_main:after,
.portal-site .pkp_structure_content:before,
.portal-site .pkp_structure_content:after {
	content: none !important;
	display: none !important;
}


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

.portal-header {
	position: relative !important;
	z-index: 100 !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #fff !important;

	border-top:
		4px solid var(--portal-orange) !important;

	border-bottom:
		1px solid #e8edef !important;

	box-shadow:
		0 4px 16px rgba(18,50,75,.025) !important;
}


.portal-header-inner {
	width: 100% !important;
	max-width: 1440px !important;

	margin: 0 auto !important;

	padding:
		0
		32px !important;
}


.portal-header-top {
	display: flex !important;

	align-items: center !important;
	justify-content: space-between !important;

	gap: 28px !important;

	min-height: 90px !important;

	border-bottom:
		1px solid #edf1f3 !important;
}


/* Brand */

.portal-brand {
	display: inline-flex !important;

	align-items: center !important;

	gap: 16px !important;

	min-width: 0 !important;

	color: inherit !important;

	text-decoration: none !important;
}


.portal-brand-logo {
	display: block !important;

	width: 66px !important;
	height: 66px !important;

	flex:
		0
		0
		66px !important;

	object-fit: contain !important;
}


.portal-brand-copy {
	display: flex !important;
	flex-direction: column !important;

	min-width: 0 !important;

	line-height: 1.05 !important;
}


.portal-brand-title {
	color: var(--portal-orange) !important;

	font-size: 29px !important;
	font-weight: 850 !important;

	letter-spacing: .02em !important;
}


.portal-brand-subtitle {
	margin-top: 5px !important;

	color: var(--portal-navy) !important;

	font-size: 14px !important;
	font-weight: 700 !important;
}


/* Header actions */

.portal-header-actions {
	display: flex !important;

	align-items: center !important;

	gap: 15px !important;
}


.portal-header-journals {
	display: inline-flex !important;

	align-items: center !important;

	gap: 8px !important;

	height: 42px !important;

	padding:
		0
		17px !important;

	border:
		1px solid #dde5e9 !important;

	border-radius:
		22px !important;

	background:
		#f9fbfc !important;

	color:
		var(--portal-navy) !important;

	font-size:
		12px !important;

	font-weight:
		650 !important;

	text-decoration:
		none !important;
}


.portal-header-journals:hover {
	border-color: #efb587 !important;

	color: var(--portal-orange-dark) !important;

	background: var(--portal-orange-soft) !important;
}


/* OJS user menu */

.portal-user-wrapper {
	position: relative !important;
}


.portal-user-menu {
	display: flex !important;

	align-items: center !important;

	gap: 8px !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


.portal-user-menu > li {
	position: relative !important;

	margin: 0 !important;
	padding: 0 !important;
}


.portal-user-menu > li > a {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	min-height: 42px !important;

	padding:
		0
		16px !important;

	border:
		1px solid #dde5e9 !important;

	border-radius:
		8px !important;

	background: #fff !important;

	color: var(--portal-navy) !important;

	font-size: 12px !important;
	font-weight: 650 !important;

	text-decoration: none !important;
}


.portal-user-menu > li:last-child > a {
	border-color: var(--portal-orange) !important;

	background: var(--portal-orange) !important;

	color: #fff !important;
}


/* Dropdowns */

.portal-user-menu ul {
	position: absolute !important;

	top: calc(100% + 8px) !important;
	right: 0 !important;

	z-index: 500 !important;

	min-width: 190px !important;

	margin: 0 !important;
	padding: 7px !important;

	list-style: none !important;

	background: #fff !important;

	border:
		1px solid var(--portal-border) !important;

	border-radius:
		8px !important;

	box-shadow:
		0 12px 30px rgba(18,50,75,.12) !important;
}


.portal-user-menu ul a {
	display: block !important;

	padding:
		8px
		10px !important;

	border-radius:
		5px !important;

	color:
		var(--portal-navy) !important;

	font-size:
		11px !important;

	text-decoration:
		none !important;
}


.portal-user-menu ul a:hover {
	background:
		var(--portal-orange-soft) !important;

	color:
		var(--portal-orange-dark) !important;
}


/* =========================================================
   PRIMARY NAVIGATION
   ========================================================= */

.portal-navigation {
	min-height: 54px !important;

	display: flex !important;

	align-items: center !important;
}


.portal-primary-menu {
	display: flex !important;

	align-items: center !important;

	gap: 34px !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


.portal-primary-menu li {
	margin: 0 !important;
	padding: 0 !important;
}


.portal-primary-menu a {
	position: relative !important;

	display: flex !important;

	align-items: center !important;

	height: 54px !important;

	color:
		var(--portal-navy) !important;

	font-size:
		12px !important;

	font-weight:
		650 !important;

	text-decoration:
		none !important;
}


.portal-primary-menu a:hover,
.portal-primary-menu a.is-active {
	color:
		var(--portal-orange-dark) !important;
}


.portal-primary-menu a.is-active:after {
	content: "";

	position: absolute !important;

	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;

	height: 3px !important;

	border-radius:
		3px
		3px
		0
		0 !important;

	background:
		var(--portal-orange) !important;
}


/* Mobile toggle hidden on desktop */

.portal-menu-toggle {
	display: none !important;
}


/* =========================================================
   HERO
   ========================================================= */

.portal-home {
	padding:
		22px
		28px
		60px !important;
}


.portal-hero {
	position: relative !important;

	width: 100% !important;
	max-width: 1440px !important;

	min-height: 440px !important;

	margin:
		0
		auto !important;

	overflow: hidden !important;

	border-radius:
		14px !important;

	background-image:
		url("../images/hero_ojs_poltekbangsby.webp") !important;

	background-size:
		cover !important;

	background-position:
		center center !important;

	box-shadow:
		var(--portal-shadow) !important;
}


.portal-hero-overlay {
	position: absolute !important;

	inset: 0 !important;

	background:
		linear-gradient(
			90deg,
			rgba(8,35,58,.94) 0%,
			rgba(8,35,58,.87) 27%,
			rgba(8,35,58,.56) 49%,
			rgba(8,35,58,.12) 72%,
			rgba(8,35,58,0) 100%
		) !important;
}


.portal-hero-inner {
	position: relative !important;
	z-index: 2 !important;

	display: flex !important;

	align-items: center !important;
	justify-content: space-between !important;

	width: 100% !important;

	min-height: 440px !important;

	padding:
		54px
		52px !important;
}


.portal-hero-content {
	width: 100% !important;
	max-width: 650px !important;
}


.portal-hero-eyebrow {
	display: flex !important;

	align-items: center !important;

	gap: 12px !important;

	margin-bottom:
		18px !important;

	color:
		#dce8ef !important;

	font-size:
		11px !important;

	font-weight:
		750 !important;

	letter-spacing:
		.16em !important;

	text-transform:
		uppercase !important;
}


.portal-hero-eyebrow span {
	display: block !important;

	width: 35px !important;
	height: 4px !important;

	border-radius:
		3px !important;

	background:
		var(--portal-orange) !important;
}


.portal-hero-title {
	margin:
		0
		0
		19px !important;

	padding: 0 !important;

	font-family:
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif !important;

	line-height:
		1.04 !important;
}


.portal-hero-title span {
	display: block !important;

	color:
		#fff !important;

	font-size:
		48px !important;

	font-weight:
		850 !important;

	letter-spacing:
		-.025em !important;
}


.portal-hero-title strong {
	display: block !important;

	margin-top:
		6px !important;

	color:
		#ff8b2f !important;

	font-size:
		38px !important;

	font-weight:
		850 !important;

	letter-spacing:
		-.02em !important;
}


.portal-hero-description {
	max-width:
		570px !important;

	margin:
		0
		0
		26px !important;

	color:
		#e3ebf0 !important;

	font-size:
		15px !important;

	font-weight:
		450 !important;

	line-height:
		1.65 !important;
}


.portal-hero-actions {
	display: flex !important;

	align-items: center !important;

	flex-wrap: wrap !important;

	gap: 11px !important;
}


.portal-button {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	gap: 9px !important;

	min-height:
		46px !important;

	padding:
		0
		21px !important;

	border-radius:
		7px !important;

	font-size:
		12px !important;

	font-weight:
		750 !important;

	text-decoration:
		none !important;

	transition:
		transform .16s ease,
		box-shadow .16s ease !important;
}


.portal-button:hover {
	transform:
		translateY(-1px) !important;
}


.portal-button-primary {
	border:
		1px solid var(--portal-orange) !important;

	background:
		var(--portal-orange) !important;

	color:
		#fff !important;

	box-shadow:
		0 8px 22px rgba(244,122,31,.22) !important;
}


.portal-button-primary:hover {
	background:
		var(--portal-orange-dark) !important;

	border-color:
		var(--portal-orange-dark) !important;
}


.portal-button-secondary {
	border:
		1px solid rgba(255,255,255,.65) !important;

	background:
		rgba(255,255,255,.95) !important;

	color:
		var(--portal-navy) !important;
}


/* Slogan */

.portal-hero-slogan {
	position: absolute !important;

	right: 42px !important;
	top: 36px !important;

	display: flex !important;

	flex-direction: column !important;

	align-items: flex-end !important;

	color:
		#fff !important;

	text-align:
		right !important;

	text-shadow:
		0 2px 10px rgba(0,0,0,.25) !important;
}


.portal-hero-slogan span {
	font-size:
		12px !important;

	font-weight:
		500 !important;
}


.portal-hero-slogan strong {
	margin-top:
		2px !important;

	font-size:
		20px !important;

	font-weight:
		750 !important;

	font-style:
		italic !important;
}


/* =========================================================
   TEMPORARY LOWER CONTENT
   Will be replaced in next stages
   ========================================================= */

.portal-stage-content {
	width: 100% !important;
	max-width: 1440px !important;

	margin:
		24px
		auto
		0 !important;
}


.portal-temp-about,
.portal-temp-journals {
	margin:
		0
		0
		20px !important;

	padding:
		25px
		27px !important;

	background:
		#fff !important;

	border:
		1px solid var(--portal-border) !important;

	border-radius:
		12px !important;

	box-shadow:
		0 7px 24px rgba(18,50,75,.035) !important;
}


.portal-temp-heading {
	margin-bottom:
		18px !important;
}


.portal-temp-kicker {
	display: block !important;

	margin-bottom:
		7px !important;

	color:
		var(--portal-orange-dark) !important;

	font-size:
		9px !important;

	font-weight:
		800 !important;

	letter-spacing:
		.14em !important;

	text-transform:
		uppercase !important;
}


.portal-temp-heading h2 {
	margin: 0 !important;
	padding: 0 !important;

	color:
		var(--portal-navy) !important;

	font-size:
		24px !important;

	font-weight:
		800 !important;

	line-height:
		1.25 !important;
}


.portal-temp-about-content {
	color:
		#566d7b !important;

	font-size:
		11.5px !important;

	line-height:
		1.7 !important;
}


/* Temporary journal cards */

.portal-temp-journal-list {
	display: grid !important;

	grid-template-columns:
		repeat(2,minmax(0,1fr)) !important;

	gap:
		16px !important;

	margin: 0 !important;
	padding: 0 !important;

	list-style: none !important;
}


.portal-temp-journal {
	display: grid !important;

	grid-template-columns:
		130px
		minmax(0,1fr) !important;

	gap:
		18px !important;

	margin: 0 !important;

	padding:
		16px !important;

	background:
		#fafcfd !important;

	border:
		1px solid #e7ecef !important;

	border-radius:
		10px !important;
}


.portal-temp-journal-cover img {
	display: block !important;

	width: 130px !important;
	height: 175px !important;

	object-fit:
		cover !important;

	border-radius:
		5px !important;
}


.portal-temp-journal-body h3 {
	margin:
		0
		0
		9px !important;

	font-size:
		16px !important;

	line-height:
		1.35 !important;
}


.portal-temp-journal-body h3 a {
	color:
		var(--portal-navy) !important;

	font-weight:
		800 !important;

	text-decoration:
		none !important;
}


.portal-temp-journal-description {
	color:
		#687c88 !important;

	font-size:
		10.5px !important;

	line-height:
		1.55 !important;
}


.portal-temp-journal-actions {
	display: flex !important;

	gap:
		7px !important;

	margin-top:
		13px !important;
}


.portal-small-button {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	min-height:
		34px !important;

	padding:
		0
		12px !important;

	border:
		1px solid #d9e2e7 !important;

	border-radius:
		6px !important;

	background:
		#fff !important;

	color:
		var(--portal-navy) !important;

	font-size:
		9px !important;

	font-weight:
		700 !important;

	text-decoration:
		none !important;
}


.portal-small-button.primary {
	border-color:
		var(--portal-orange) !important;

	background:
		var(--portal-orange) !important;

	color:
		#fff !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

	.portal-header-inner {
		padding:
			0
			22px !important;
	}


	.portal-hero {
		min-height:
			410px !important;
	}


	.portal-hero-inner {
		min-height:
			410px !important;

		padding:
			44px
			38px !important;
	}


	.portal-hero-title span {
		font-size:
			41px !important;
	}


	.portal-hero-title strong {
		font-size:
			31px !important;
	}


	.portal-temp-journal-list {
		grid-template-columns:
			1fr !important;
	}

}


@media (max-width: 760px) {

	.portal-home {
		padding:
			14px
			14px
			45px !important;
	}


	.portal-header-inner {
		padding:
			0
			17px !important;
	}


	.portal-header-top {
		min-height:
			76px !important;
	}


	.portal-brand-logo {
		width:
			52px !important;

		height:
			52px !important;

		flex-basis:
			52px !important;
	}


	.portal-brand-title {
		font-size:
			23px !important;
	}


	.portal-brand-subtitle {
		font-size:
			11px !important;
	}


	.portal-header-journals {
		display:
			none !important;
	}


	.portal-navigation {
		overflow-x:
			auto !important;
	}


	.portal-primary-menu {
		gap:
			25px !important;

		white-space:
			nowrap !important;
	}


	.portal-hero {
		min-height:
			470px !important;

		background-position:
			64% center !important;
	}


	.portal-hero-overlay {
		background:
			linear-gradient(
				90deg,
				rgba(8,35,58,.96) 0%,
				rgba(8,35,58,.87) 60%,
				rgba(8,35,58,.45) 100%
			) !important;
	}


	.portal-hero-inner {
		align-items:
			flex-end !important;

		min-height:
			470px !important;

		padding:
			32px
			24px !important;
	}


	.portal-hero-slogan {
		top:
			25px !important;

		right:
			22px !important;
	}


	.portal-hero-title span {
		font-size:
			34px !important;
	}


	.portal-hero-title strong {
		font-size:
			26px !important;
	}


	.portal-hero-description {
		font-size:
			13px !important;
	}


	.portal-temp-about,
	.portal-temp-journals {
		padding:
			21px
			19px !important;
	}


	.portal-temp-journal {
		grid-template-columns:
			100px
			minmax(0,1fr) !important;

		gap:
			14px !important;
	}


	.portal-temp-journal-cover img {
		width:
			100px !important;

		height:
			140px !important;
	}

}


@media (max-width: 480px) {

	.portal-brand-subtitle {
		display:
			none !important;
	}


	.portal-user-menu > li > a {
		padding:
			0
			11px !important;
	}


	.portal-hero-actions {
		align-items:
			stretch !important;

		flex-direction:
			column !important;
	}


	.portal-button {
		width:
			100% !important;
	}


	.portal-temp-journal {
		grid-template-columns:
			1fr !important;
	}


	.portal-temp-journal-cover img {
		width:
			110px !important;

		height:
			auto !important;
	}

}



/* =========================================================
   PORTAL USER MENU DROPDOWN FIX V1
   ========================================================= */

/*
 * Hide account submenu by default.
 */

.portal-header
.portal-user-menu > li > ul,

.portal-header
.portal-user-menu > li > .dropdown-menu {

    display: none !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    position: absolute !important;

    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;

    z-index: 1000 !important;

    min-width: 190px !important;

    margin: 0 !important;
    padding: 7px !important;

    background: #fff !important;

    border: 1px solid var(--portal-border) !important;
    border-radius: 8px !important;

    box-shadow:
        0 12px 30px rgba(18,50,75,.14) !important;
}


/*
 * OJS / Bootstrap usually adds .open to the parent LI.
 */

.portal-header
.portal-user-menu > li.open > ul,

.portal-header
.portal-user-menu > li.open > .dropdown-menu,

.portal-header
.portal-user-menu > li.show > ul,

.portal-header
.portal-user-menu > li.show > .dropdown-menu {

    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}


/*
 * Also support aria-expanded used by some OJS menu markup.
 */

.portal-header
.portal-user-menu > li > a[aria-expanded="true"] + ul,

.portal-header
.portal-user-menu > li > a[aria-expanded="true"] + .dropdown-menu {

    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;
}


/* Dropdown entries */

.portal-header
.portal-user-menu > li > ul > li,

.portal-header
.portal-user-menu .dropdown-menu > li {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.portal-header
.portal-user-menu > li > ul > li > a,

.portal-header
.portal-user-menu .dropdown-menu > li > a {

    display: block !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        9px
        11px !important;

    border: 0 !important;
    border-radius: 5px !important;

    background: transparent !important;

    color: var(--portal-navy) !important;

    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;

    text-align: left !important;
    text-decoration: none !important;

    white-space: nowrap !important;
}


.portal-header
.portal-user-menu > li > ul > li > a:hover,

.portal-header
.portal-user-menu .dropdown-menu > li > a:hover {

    background: var(--portal-orange-soft) !important;

    color: var(--portal-orange-dark) !important;
}


/* Keep account button above dropdown */

.portal-user-menu > li {
    position: relative !important;
}


/* =========================================================
   FIX VISIBLE SKIP LINKS
   They should only appear when keyboard-focused.
   ========================================================= */

.portal-header .cmp_skip_to_content {

    position: absolute !important;

    left: -9999px !important;
    top: auto !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


.portal-header .cmp_skip_to_content:focus-within {

    left: 15px !important;
    top: 8px !important;

    width: auto !important;
    height: auto !important;

    overflow: visible !important;

    z-index: 5000 !important;
}



/* =========================================================
   PORTAL HOMEPAGE - FULL WIDTH HERO V1
   ========================================================= */

/*
 * Keep lower homepage sections contained,
 * but allow HERO to span the entire browser viewport.
 */

body.portal-modern-body {
    overflow-x: hidden !important;
}


/* Homepage wrapper remains full width */

.portal-home {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
        0
        0
        60px !important;
}


/* Full-bleed hero */

.portal-home .portal-hero {
    position: relative !important;

    left: 50% !important;

    width: 100vw !important;
    max-width: 100vw !important;

    min-height: 470px !important;

    margin:
        0
        0
        0
        -50vw !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    background-size: cover !important;
    background-position: center center !important;
}


/* Hero inner content remains visually aligned
   with the header / lower sections */

.portal-home .portal-hero-inner {
    width: 100% !important;
    max-width: 1440px !important;

    min-height: 470px !important;

    margin:
        0
        auto !important;

    padding:
        58px
        42px !important;
}


/* Slightly stronger left overlay now that image is wider */

.portal-home .portal-hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(8,35,58,.96) 0%,
            rgba(8,35,58,.90) 24%,
            rgba(8,35,58,.66) 44%,
            rgba(8,35,58,.24) 65%,
            rgba(8,35,58,.05) 82%,
            rgba(8,35,58,0) 100%
        ) !important;
}


/* Lower homepage content returns to constrained layout */

.portal-home .portal-stage-content {
    width: calc(100% - 56px) !important;
    max-width: 1440px !important;

    margin:
        24px
        auto
        0 !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .portal-home .portal-hero,
    .portal-home .portal-hero-inner {
        min-height: 440px !important;
    }

    .portal-home .portal-hero-inner {
        padding:
            48px
            30px !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 760px) {

    .portal-home .portal-hero {
        min-height: 490px !important;

        background-position:
            64% center !important;
    }

    .portal-home .portal-hero-inner {
        min-height: 490px !important;

        padding:
            34px
            20px !important;
    }

    .portal-home .portal-stage-content {
        width: calc(100% - 28px) !important;

        margin-top: 14px !important;
    }

}



/* =========================================================
   ABOUT OUR PORTAL REDESIGN V1
   ========================================================= */

.portal-home .portal-about {
    width: 100% !important;

    margin:
        0
        0
        20px !important;

    padding: 0 !important;

    background: #fff !important;

    border:
        1px solid var(--portal-border) !important;

    border-radius:
        12px !important;

    box-shadow:
        0 7px 24px rgba(18,50,75,.035) !important;

    overflow: hidden !important;
}


/* =========================================================
   MAIN TWO-COLUMN LAYOUT
   ========================================================= */

.portal-about-main {
    display: grid !important;

    grid-template-columns:
        minmax(0,1.08fr)
        minmax(520px,.92fr) !important;

    align-items: stretch !important;

    width: 100% !important;

    margin: 0 !important;

    padding:
        0 !important;
}


/* =========================================================
   LEFT COPY
   ========================================================= */

.portal-about-copy {
    position: relative !important;

    padding:
        26px
        30px
        27px !important;
}


.portal-about-copy:before {
    content: "";

    position: absolute !important;

    left: 0 !important;
    top: 22px !important;
    bottom: 22px !important;

    width: 4px !important;

    background:
        var(--portal-orange) !important;

    border-radius:
        0
        3px
        3px
        0 !important;
}


.portal-about-kicker {
    display: block !important;

    margin:
        0
        0
        7px !important;

    color:
        var(--portal-orange-dark) !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        .15em !important;

    text-transform:
        uppercase !important;
}


.portal-about-copy h2 {
    margin:
        0
        0
        12px !important;

    padding: 0 !important;

    color:
        var(--portal-navy) !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;

    font-size:
        24px !important;

    font-weight:
        800 !important;

    line-height:
        1.25 !important;

    letter-spacing:
        -.01em !important;
}


.portal-about-copy p {
    max-width: 720px !important;

    margin: 0 !important;
    padding: 0 !important;

    color:
        #5c7180 !important;

    font-size:
        11.5px !important;

    font-weight:
        450 !important;

    line-height:
        1.7 !important;
}


/* =========================================================
   RIGHT VALUE PROPOSITIONS
   ========================================================= */

.portal-about-values {
    display: grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    align-items: center !important;

    margin:
        18px
        18px
        18px
        0 !important;

    padding:
        0 !important;

    background:
        linear-gradient(
            135deg,
            #f9fbfc 0%,
            #f5f8fa 100%
        ) !important;

    border-radius:
        10px !important;

    overflow: hidden !important;
}


.portal-about-value {
    position: relative !important;

    display: flex !important;

    align-items: center !important;

    gap: 12px !important;

    min-width: 0 !important;

    height: 100% !important;

    padding:
        22px
        17px !important;
}


.portal-about-value + .portal-about-value:before {
    content: "";

    position: absolute !important;

    left: 0 !important;
    top: 22% !important;
    bottom: 22% !important;

    width: 1px !important;

    background:
        #dfe6ea !important;
}


/* =========================================================
   ICON
   ========================================================= */

.portal-about-value-icon {
    flex:
        0
        0
        42px !important;

    width: 42px !important;
    height: 42px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    border-radius:
        50% !important;

    color:
        var(--portal-orange) !important;

    font-size:
        26px !important;
}


/* =========================================================
   VALUE COPY
   ========================================================= */

.portal-about-value-copy {
    min-width: 0 !important;
}


.portal-about-value-copy strong {
    display: block !important;

    margin:
        0
        0
        5px !important;

    color:
        var(--portal-navy) !important;

    font-size:
        10.5px !important;

    font-weight:
        750 !important;

    line-height:
        1.35 !important;
}


.portal-about-value-copy span {
    display: block !important;

    color:
        #667b88 !important;

    font-size:
        9.5px !important;

    font-weight:
        450 !important;

    line-height:
        1.45 !important;
}


/* =========================================================
   Remove old temporary About styling if inherited
   ========================================================= */

.portal-home .portal-temp-about {
    display: none !important;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {

    .portal-about-main {
        grid-template-columns:
            minmax(0,1fr)
            470px !important;
    }


    .portal-about-values {
        grid-template-columns:
            1fr !important;
    }


    .portal-about-value {
        padding:
            13px
            17px !important;
    }


    .portal-about-value + .portal-about-value:before {
        left: 17px !important;
        right: 17px !important;

        top: 0 !important;
        bottom: auto !important;

        width: auto !important;
        height: 1px !important;
    }

}


@media (max-width: 900px) {

    .portal-about-main {
        grid-template-columns:
            1fr !important;
    }


    .portal-about-values {
        grid-template-columns:
            repeat(3,minmax(0,1fr)) !important;

        margin:
            0
            20px
            20px !important;
    }


    .portal-about-value {
        padding:
            18px
            14px !important;
    }


    .portal-about-value + .portal-about-value:before {
        left: 0 !important;
        right: auto !important;

        top: 22% !important;
        bottom: 22% !important;

        width: 1px !important;
        height: auto !important;
    }

}


@media (max-width: 650px) {

    .portal-about-copy {
        padding:
            23px
            21px
            22px !important;
    }


    .portal-about-copy h2 {
        font-size:
            21px !important;
    }


    .portal-about-copy p {
        font-size:
            11px !important;
    }


    .portal-about-values {
        grid-template-columns:
            1fr !important;

        margin:
            0
            14px
            14px !important;
    }


    .portal-about-value {
        padding:
            14px
            15px !important;
    }


    .portal-about-value + .portal-about-value:before {
        left: 15px !important;
        right: 15px !important;

        top: 0 !important;
        bottom: auto !important;

        width: auto !important;
        height: 1px !important;
    }

}



/* =========================================================
   PORTAL FOOTER REDESIGN V1
   ========================================================= */

.portal-footer {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background:
        linear-gradient(
            135deg,
            #0a263d 0%,
            #12324b 100%
        ) !important;

    color: #dce6ec !important;

    border: 0 !important;
}


.portal-footer-inner {
    width: 100% !important;
    max-width: 1440px !important;

    margin: 0 auto !important;

    padding:
        30px
        36px
        18px !important;
}


/* =========================================================
   MAIN FOOTER GRID
   ========================================================= */

.portal-footer-main {
    display: grid !important;

    grid-template-columns:
        minmax(320px,1.2fr)
        minmax(200px,.65fr)
        minmax(330px,1fr) !important;

    gap: 44px !important;

    align-items: start !important;

    padding-bottom: 24px !important;
}


/* =========================================================
   BRAND
   ========================================================= */

.portal-footer-brand {
    min-width: 0 !important;
}


.portal-footer-brand-link {
    display: flex !important;

    align-items: center !important;

    gap: 14px !important;

    color: inherit !important;

    text-decoration: none !important;
}


.portal-footer-logo {
    display: block !important;

    width: 64px !important;
    height: 64px !important;

    flex:
        0
        0
        64px !important;

    object-fit: contain !important;
}


.portal-footer-brand-copy {
    display: flex !important;

    flex-direction: column !important;

    min-width: 0 !important;
}


.portal-footer-brand-copy strong {
    color: #fff !important;

    font-size: 18px !important;

    font-weight: 800 !important;

    line-height: 1.1 !important;
}


.portal-footer-brand-copy span {
    margin-top: 4px !important;

    color: #c9d7df !important;

    font-size: 10.5px !important;

    font-weight: 600 !important;
}


.portal-footer-slogan {
    margin:
        15px
        0
        0
        78px !important;

    color: #9fb3c0 !important;

    font-size: 10px !important;

    font-style: italic !important;

    line-height: 1.45 !important;
}


.portal-footer-slogan span {
    display: block !important;

    color: #fff !important;
}


/* =========================================================
   SECTION TITLES
   ========================================================= */

.portal-footer h3 {
    margin:
        0
        0
        13px !important;

    padding:
        0
        0
        8px !important;

    border-bottom:
        1px solid rgba(255,255,255,.10) !important;

    color: #fff !important;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif !important;

    font-size: 11px !important;

    font-weight: 750 !important;

    line-height: 1.3 !important;
}


/* =========================================================
   LINKS
   ========================================================= */

.portal-footer-links ul {
    margin: 0 !important;

    padding: 0 !important;

    list-style: none !important;
}


.portal-footer-links li {
    margin:
        0
        0
        7px !important;

    padding: 0 !important;
}


.portal-footer-links a,
.portal-footer-contact a {
    color: #c9d7df !important;

    font-size: 10px !important;

    line-height: 1.45 !important;

    text-decoration: none !important;
}


.portal-footer-links a:hover,
.portal-footer-contact a:hover {
    color: #fff !important;
}


/* =========================================================
   CONTACT
   ========================================================= */

.portal-footer-contact-item {
    display: flex !important;

    align-items: flex-start !important;

    gap: 10px !important;

    margin:
        0
        0
        11px !important;

    color: #c9d7df !important;

    font-size: 10px !important;

    line-height: 1.55 !important;
}


.portal-footer-contact-item i {
    width: 17px !important;

    flex:
        0
        0
        17px !important;

    margin-top: 2px !important;

    color: var(--portal-orange) !important;

    font-size: 13px !important;

    text-align: center !important;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.portal-footer-bottom {
    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    gap: 25px !important;

    padding-top: 15px !important;

    border-top:
        1px solid rgba(255,255,255,.15) !important;
}


.portal-footer-copyright {
    color: #96aab7 !important;

    font-size: 8.5px !important;

    line-height: 1.4 !important;
}


.portal-footer-powered {
    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    color: #9fb2be !important;

    font-size: 8.5px !important;

    white-space: nowrap !important;
}


.portal-footer-powered i {
    margin-left: 4px !important;

    color: var(--portal-orange) !important;

    font-size: 18px !important;

    transform: rotate(-8deg) !important;
}


.portal-footer-divider {
    opacity: .4 !important;
}


/* =========================================================
   REMOVE DEFAULT OJS FOOTER ARTIFACTS
   ========================================================= */

.portal-footer .pkp_brand_footer,
.portal-footer .pkp_brand_footer img,
.portal-footer .pkp_brand_footer a {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .portal-footer-main {
        grid-template-columns:
            1fr
            1fr !important;
    }


    .portal-footer-brand {
        grid-column:
            1 / -1 !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .portal-footer-inner {
        padding:
            26px
            20px
            17px !important;
    }


    .portal-footer-main {
        grid-template-columns:
            1fr !important;

        gap:
            25px !important;
    }


    .portal-footer-brand {
        grid-column:
            1 !important;
    }


    .portal-footer-slogan {
        margin-left:
            0 !important;
    }


    .portal-footer-bottom {
        align-items:
            flex-start !important;

        flex-direction:
            column !important;

        gap:
            10px !important;
    }


    .portal-footer-powered {
        flex-wrap:
            wrap !important;

        white-space:
            normal !important;
    }

}



/* =========================================================
   PORTAL FOOTER - FONT SIZE +2PX
   ========================================================= */

/* Main brand */

.portal-footer-brand-copy strong {
    font-size: 20px !important;
}


.portal-footer-brand-copy span {
    font-size: 12.5px !important;
}


/* Slogan */

.portal-footer-slogan {
    font-size: 12px !important;
}


/* Column titles */

.portal-footer h3 {
    font-size: 13px !important;
}


/* Quick links */

.portal-footer-links a {
    font-size: 12px !important;
}


/* Contact text + email */

.portal-footer-contact-item,
.portal-footer-contact a {
    font-size: 12px !important;
}


/* Copyright */

.portal-footer-copyright {
    font-size: 10.5px !important;
}


/* Bottom-right text */

.portal-footer-powered {
    font-size: 10.5px !important;
}