/*Okay, this CSS is not how css should typically be written.
There are lots of individual overrides and there is an overuse of !important.
Deleting it should not make the site unusable, but might cause minor graphical weirdness.*/

/*Try an external font [Not entirely happy with it, but it matches our signage close enough]*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&family=Roboto:wght@300&family=Asap&display=swap');

/*Doesn't seem to behave on some browsers.*/
body {
	scroll-behavior: smooth;
}

html {
	background-color: #f26522;
}

.vidgrid {
	display: inline-grid !important;
}

.card {
	transition: 0.15s transform, 0.15s box-shadow;
	border-radius: 9px;
	border: solid 1px #0000000A;
	padding: 12px;
	margin-top: 16px;
	margin-bottom: 16px;
	background-color: #00000006;
}

.quotetext {
	font-size: 12pt;
	font-style: oblique;
}

.card:focus, .card:active, .card:target {
	transition: 0.3s transform, box-	shadow 0.6s;
	transform: scale(1.01);
	box-shadow: 0px 3px 8px #00000008;
}

/*Cover art style menu.*/

span.cover {
  margin: 9px;
  border-radius: 10px;
  transition: all 0.15s;
  filter: brightness(0.95);
  display: inline-block !important;
	font-size: 13pt;
	font-family: "asap", sans-serif;
	text-align: center !important;
	height: 246px;
  width: 246px;
}

span.cover:hover {
  transform: scale(1.025);
  transition: all 0.3s;
  filter: brightness(1.03);
}

span.cover:hover > img {
	box-shadow: 0px 2px 8px #0003;
	transition: all 0.3s;
}

span.cover > img {
	transition: all 0.3s;
}

span.cover > img {
	margin-bottom: 6px;
}

figure.entry-thumb {
	display: none;
	padding: 0;
	margin: 0;
}

#picmenu {
	padding-top: 8px;
	padding-bottom: 22px;
	text-align: center;
	background-color: #00000008;
	border: solid 1px #00000011;
	margin-bottom: 18px;
	border-radius: 10px;
	animation-delay: 1.2s;
	animation: slideOpen 0.6s;
}

#picmenu > p {
	display: inline !important;
}

#primary-header {
	padding: 12px;
}

/*Forces the tables to show outlines.*/
table, th {
	border-bottom: solid 1px #0001;
	border-top: solid 1px #0001;
	border-left: solid 1px #0001;
	border-right: solid 1px #0001;
}

tr:nth-child(even) {
	background: #0001;
}

.desktop-br {
	display: block;
}

a {
	transition: color 0.15s;
	outline: 0 !important;
}

a:hover {
	transition: color 0.15s;
	color: #E15411;
}

/*Make the selection Chieftain orange*/
::selection {
	background-color: #f26522DD;
	color: white;
}

/*Change heading color | SN-17461663-hc*/
h2, h3, h4, h5, h6 {
  color: #f26522;
}

/*Animate the menu item arrows.*/
.menu-item:hover > span {
	transition: transform 0.6s;
	transform: rotate(-90deg);
}

/*Fade pre-cached images in smoothly.*/
img:not(.custom-logo) {
	animation-name: fade !important;
	animation-duration: 0.5s !important;
	border-radius: 9px;
}

/*Change text color | SN-17453302-hc*/	
p {
	color: #58595b !important;
	text-align: justify;
}

/*Use the company font in most places.*/
p, h1, h2, h3, h4, h5, h6, label {
	font-family: "Asap" !important;
	letter-spacing: 0.01em;
}

/*Fallback font for menu items and a few other exceptions.*/
.site-title.th-text-xl.th-leading-none.th-mb-0{
	font-family: "Arimo", sans-serif !important;
}

/*Blur the caption background for extra readability.*/
div.tiled-gallery-caption {
	backdrop-filter: blur(32px);
	-webkit-backdrop-filter: blur(24px);
	background-color: #ffffffbb;
	animation: slideOpenUp 0.3s;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	border-top: none;
	border-color: white;
	border-width: 2px;
}

/*Search menu.*/
#header-searchform {
	animation: slideOpen 0.3s;
	background-color: #fffc;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(24px);
	border-radius: 64px;
	box-shadow: 0px 2px 10px #0002 !important;
	border-color: #0003 !important;
}

#header-searchform::before, #header-searchform::after {
	display: none;
}

#header-searchform > label > input {
	border-radius: 64px;
	background-color: transparent;
	border-color: #0003;
}

#header-searchform > button {
	border-radius: 64px;
	transition: background-color 0.3s;
}

/*Mobile Menu*/
#mobile-navigation {
	animation: slideOpen 0.3s;
}

/*Make the jump to top button animate.*/
#gotop-button {
	transition: background 0.3s ease-out, height 0.05s, transform 0.05s;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

#gotop-button:hover {
	transition: height 0.3s, border-radius 0.3s, transform 0.3s;
	height: 44px;
	transform: translateY(2px);
}

.sd-button {
	transition: all 0.3s;
}

.sd-button:hover {
	transition: all 0.3s;
	transform: scale(1.25);
}

/*Apply rounded corners to the logo*/
.custom-logo {
	border-radius: 4px;
	transition: transform 0.15s;
}

/*Orange link button styling.*/
.b_link {
	background-color: #F26522;
	text-decoration: none !important;
	border-radius: 8px;
	padding: 10px;
	color: white !important;
	font-size: 16pt;
	transition: all 0.6s;
	display: inline-block;
	border: solid 1px #0002 !important;
	padding-left: 16px;
	padding-right: 16px;
}

.b_link:hover {
	background-color: #FA6D2A;
	text-decoration: none !important;
	color: white !important;
	box-shadow: 0px 2px 6px #0004;
	transition: all 0.15s;
}

/*Animate a selected Anchor*/
h2:target, h3:target, h4:target, h5:target, h6:target {
	animation-name: pulse;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	animation-play-state: running;
	animation-timing-function: linear;
}

/*--------------*/
/*Big boi screens*/
@media only screen and (min-width: 992px) {
	
	.custom-logo {
		height: 100.3125px;
		width: 181.25px;		
	}

	/*Blur the navbar [Looks good on MacOS, and helps readability]*/
	#header-inner.sticky-navigation {
		background-color: #f9f9f9c8;
		backdrop-filter: blur(32px);
		-webkit-backdrop-filter: blur(32px) saturate(160%);
		animation: slideOpen 0.45s;
		transition: background 0.6s, box-shadow 0.6s;
		border-bottom: solid #0002 1px;
	}
	
	#header-inner.sticky-navigation .custom-logo {
		max-height: none;
	}
	
	#header-inner.sticky-navigation:hover 	{
		background-color: #fbfbfbdd;
		box-shadow: 0px 3px 8px #0001;
		transition: background 0.6s, box-shadow 0.6s;
		border-bottom: solid #0003 1px;
	}
	
	/*Make the navbar items more curvy.*/
	#site-navigation a {
		border-radius: 9px;
	}
	
	#menu-course-titles > .menu-item-has-children {
		border: 1px solid #0003;
		margin-bottom: 6px;
		border-radius: 10px;
		box-shadow: 0px 0px 6px #0001;
		background-color: #fff9;
	}
	
	#menu-course-titles > .menu-item-has-children:hover {
		border: 1px solid #0001;
	}
	
	/*Adjust menu position for the growing logo.*/
	ul#menu-courses {
		padding-left: 6px;
	}

	/*Apply menu animations [in desktop mode only].*/
	.menu-item > a {
		transition: background 0.15s, 			color 0.15s !important;
	}

	.menu-item-has-children:hover > ul {
		animation-name: slideOpen !important;
		animation-duration: 0.3s !important;
	}
	
	.header-search-button {
		transition: transform 0.3s;
		border-radius: 32px;
		height: 42px;
		width: 42px;
		border: #0003 solid 1px;
		box-shadow: 0px 0px 6px #0001;
		background-color: #fff8;
	}
	
	#header-searchform {
		margin-top: 16px;
		margin-left: 6px;
		padding: 10px;
		
	}
	
	.header-search-button:hover {
		transition: transform 0.6s;
		transform: rotate(90deg) scale(1.3);
		border: #0002 solid 1px;
		background-color: #fff;
	}
	
	.custom-logo:hover {
	z-index: 100;
	transform: scale(1.03);
	transition: transform 0.3s;
	}

  /*Navbar offset.
  pointer-events being set to none means anchor points cannot also be hyperlinks at the same time.*/
	.anchor {
		position:relative;
		padding-top: 160px;
		margin-top: -160px;
		pointer-events: none;
	}

	/*Fast Track*/
	ul #menu-item-6170 {
		margin-right: 65px;
	}


  /*Hides the further information menu in desktop mode*/
	#menu-item-7903 {
		display: none;
	}

  /*Adds a shadow to desktop mode menus.*/
	.sub-menu {
	box-shadow: 0px 6px 12px #00000033 !important;
	border-bottom-left-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
	border-top-right-radius: 8px !important;
	}
	
	.bigHide {
		display: none;
	}
	
}

/*--------------*/
/*Small screens*/
@media only screen and (max-width: 991px) {
	
	h1 {
		display: hidden !important;
	}
	
	.dropdown-toggle {
		border-radius: 32px !important;
		border: 1px solid #0003
	}
	
	.dropdown-toggle:hover {
		border: 1px solid #0000
	}
	
	span.cover {
		height: 156px;
    width: 156px;
	}
	
	#picmenu > div > a > span, span.cover {
		font-size: 11pt;
	}
	
	.anchor {
		position:relative;
		padding-top: 72px;
		margin-top: -72px;
		pointer-events: none;
	}
	
	.desktop-br {
		display: none;
	}
	
	#menu-header-menu {
		display: none !important;
	}

  /*Shows the further information menu in mobile / tablet mode*/
	#menu-item-7903 {
		display: default;
	}	
	
	.tabletHide {
		display: none;
	}
	
}

/*Tiny screens*/
/*
@media screen and (max-width: 600px) {
	span.cover {
		height: 109px;
    width: 109px;
	}

	#picmenu > div > a > span, span.cover {
		font-size: 9pt;
	}
	
	.phoneHide {
		display: none;
	}
}
*/

/*--------------*/
/*CSS Animations*/
@keyframes fade {
  0% {
    opacity: 0.25;
  }
  100% {
    opacity: 1;
  }
}

/*Grow-Shrink, Throb*/
@keyframes throb {
	0% {
		transform: scale(1);
  }
	60% {
		transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}

/*Grow-Shrink, Throb Bigger*/
@keyframes throb-del {
	0% {
		transform: scale(1);
  }
	2% {
		transform: scale(0.95);
  }
  5% {
    transform: scale(1);
  }
	100% {
  }
}

/*Soft blinking text for clicked anchors.*/
@keyframes pulse {
	0% {
    opacity: 1;
		text-shadow: 0px 1px 2px #0004;
  }
	50% {
    opacity: 0.7;
		text-shadow: 0px 1px 2px #fff;
  }
  100% {
    opacity: 1;
		text-shadow: 0px 1px 2px #0004;
  }
}

/*Soft fade & sliding open of the top menus.*/
@keyframes slideOpen {
    0% {
        opacity: 0%;
        transform: translateY(-18px);
			}
    100% {
        opacity:100%;
        transform: translateY(0px);
    }
}

@keyframes slideOpenUp {
    0% {
        opacity: 0%;
        transform: translateY(12px);
			}
    100% {
        opacity:100%;
        transform: translateY(0px);
    }
}