/* Table of Content
==================================================
	#Site Variables
	#Site Styles
	#UIKit Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Variables
================================================== */
:root {
  --primary: #D7A61A;
  --secondary: #1A3D46;
  --light: #F4F1E9;
  --dark: #272727;
  --white: #ffffff;
  --text: #272727;
  --navigation: #ffffff;
  
  --freight-big-pro: 'freightbigcmp-pro', 'FreightBigCmp Pro', serif;
  --freight-text-pro: 'freight-text-pro', serif;
  --freight-display-pro: 'freight-display-pro', 'FreightDisp Pro', serif;
  --helmet: 'Helmet', sans-serif;
  --ibm-plex: 'ibm-plex-sans', 'IBM Plex Sans', serif;
}


/* #Site Styles
================================================== */
*				{ outline:none; }
html, body		{ color:var(--text); font-size:18px; font-weight:300; font-family:var(--freight-text-pro); line-height:1.5rem; }

.aligncenter 	{ text-align:center; }
.alignleft		{ text-align:left; }
.alignright		{ text-align:right; }
	img.aligncenter { float:none; display:block; margin:0 auto 15px; }
	img.alignleft	{ float:left; margin-right:15px; }
	img.alignright	{ float:right; margin-left:15px; }

.w900 			{ font-weight:900; }
.w800				{ font-weight:800; }
.w700				{ font-weight:700; }
.w600				{ font-weight:600; }
.w500				{ font-weight:500; }
.w400				{ font-weight:400; }
.w300				{ font-weight:300; }
.w200				{ font-weight:200; }
.w100				{ font-weight:100; }

.font6			{ font-size:0.625em; }
.font7			{ font-size:0.750em; }
.font8			{ font-size:0.875em; }
.font10			{ font-size:1.0em; }
.font12			{ font-size:1.2em; }
.font15			{ font-size:1.5em; }
.font18			{ font-size:1.8em; }
.font20			{ font-size:2.0em; }
.font25			{ font-size:2.5em; }
.font30			{ font-size:3.0em; }
.font35			{ font-size:3.5em; }
.font40			{ font-size:4.0em; }
.font45			{ font-size:4.5em; }

.s1				{ letter-spacing:1px; }
.s2				{ letter-spacing:2px; }
.s3				{ letter-spacing:3px; }
.s4				{ letter-spacing:4px; }
.s5				{ letter-spacing:5px; }
.s6				{ letter-spacing:6px; }
.s7				{ letter-spacing:7px; }
.s8				{ letter-spacing:8px; }

.lh0			{ line-height:1em; }
.lh1			{ line-height:1.1em; }
.lh2			{ line-height:1.2em; }
.lh3			{ line-height:1.3em; }
.lh4			{ line-height:1.4em; }
.lh5			{ line-height:1.5em; }
.lh8			{ line-height:1.8em; }
.lh20			{ line-height:2.0em; }
.lh25			{ line-height:2.5em; }

h1, h2, h3, h4, h5, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5	{ font-family:var(--freight-big-pro); font-weight:400; color:inherit; line-height:1em; }

h1, .uk-h1	{ font-size:6.000em; letter-spacing:-.01em; }
h2, .uk-h2	{ font-size:5.500em; font-family:var(--freight-display-pro); }
h3, .uk-h3	{ font-size:3.125em; letter-spacing:-.01em; }
h4, .uk-h4	{ font-size:1.250em; font-family:var(--helmet); text-transform:uppercase; letter-spacing:.2em; }
h5, .uk-h5	{ font-size:1.000em; font-family:var(--helmet); text-transform:uppercase; letter-spacing:.1em; }

em				{ color:inherit; }
p 				{ line-height:1.5em; }
b, strong, .uk-text-bold	{ font-weight:600; }

a, .uk-link		{ color:var(--primary); }
	a:hover, .uk-link:hover { color:inherit; text-decoration:none; }
	
blockquote { color:inherit; }
blockquote footer { color:inherit; }

.font-freightbigcmp-pro { font-family:var(--freight-big-pro) !important; }
.font-freight-text-pro { font-family:var(--freight-text-pro) !important; }
.font-freight-display-pro { font-family:var(--freight-display-pro) !important; }
.font-helmet { font-family:var(--helmet) !important; }
.font-ibmplex { font-family:var(--ibm-plex) !important; }

/* #UIKit Styles
================================================== */
.uk-text-contrast { color:var(--white) !important; }
.uk-text-secondary { color:var(--secondary) !important; }

.uk-section-light { background:var(--light); }
.uk-section-secondary { background:var(--secondary); }

.uk-button { font-family:var(--ibm-plex); font-size:.875em; font-weight:500; text-transform:inherit; line-height:1em; min-width:275px; padding:15px 35px; border-radius:50px; display:inline-flex; justify-content:center; gap:25px; transition: all 0.3s ease-in-out; border:1px solid var(--dark); color:var(--white); background:var(--dark); }

.uk-button::after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1rem; font-style: normal; margin-left: 5px; display: inline-block; position: relative; top: 1px; text-decoration: none; }

.uk-button-primary { background:var(--primary); color:var(--dark); border-color:var(--primary); }
.uk-button-primary:hover { background:var(--primary); color:var(--dark); }

.uk-button-secondary { background:var(--secondary); color:var(--white); border-color:var(--secondary); }
.uk-button-secondary:hover { background:var(--secondary); color:var(--white); }

.uk-button-primary-outline { background:none; border-color:var(--primary); color:var(--primary); }
.uk-button-primary-outline:hover { background:var(--primary); color:var(--dark); }

.uk-button-secondary-outline { background:none; border-color:var(--secondary); color:var(--secondary); }
.uk-button-secondary-outline:hover { background:var(--secondary); color:var(--white); }

.uk-button:hover { gap:5px; }

.uk-grid-divider>:not(.uk-first-column)::before { opacity:.3; }

.gform-field-label { color:var(--secondary); font-family:var(--helmet); font-weight:300; text-transform:uppercase; letter-spacing:.1em; }
.gchoice .gform-field-label { color:var(--text); font-family:var(--ibm-plex); font-weight:500; text-transform:inherit; letter-spacing:0; }
.gform_fields input, .gform_fields select { border-radius:5px; border:1px solid #A7A7A7; }
.gform-footer { justify-content:center; text-align:center; }
.gform_wrapper.gravity-theme .ginput_container_date input { width:100%; }

/* #Page Styles
================================================== */

.block-hero { position: relative; background-size: cover; background-position: center; padding: 40px 0; z-index: 0; height: 100vh; display: flex !important; justify-content: center; flex-wrap: wrap; flex-direction: column; }
.block-hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; }
.block-hero > * { position: relative; z-index: 2; }
.block-hero > .uk-container { max-width: 1300px; }

.block-hero .custom-headline { color: var(--primary) !important; width: 550px; min-width: 550px; font-size: 90px; font-weight:500; margin-bottom: 10px; text-align: center; padding-left: 0%; line-height: 90px; margin: 0; letter-spacing:-.03em; }

.block-hero .custom-subheadline { color: #ffffff !important; font-size: 28px; margin-bottom: 20px; text-align: center; text-transform: capitalize; font-style: italic; margin:0; letter-spacing:-.01em; }

.block-hero .koss-button {
	background-color: transparent !important;
	color: var(--primary) !important;
	border-radius: 50px; /* Pill shape */
	font-size: 16px;
	font-weight: 300;
	text-transform: capitalize;
	text-align: center;
	transition: background-color 0.3s ease, color 0.3s ease;
	cursor: pointer;
	display: inline-block;
	text-decoration: none;
	width: 200px;
	display: inline-flex; /* Use flexbox for alignment */
	align-items: center; /* Center icon and text vertically */
	justify-content: center; /* Center everything horizontally */
	margin:0;
	font-family:var(--ibm-plex);
	border: 1px solid var(--primary);
}


.block-hero .koss-button:hover { background-color: var(--primary) !important; color: black !important; }

.block-hero .koss-button i,
.block-hero .custom-button svg {
	margin-left: 25px; /* Add space between text and icon */
	vertical-align: middle; /* Ensure proper alignment */
	transition: margin-left .3s ease;
}

.block-hero .koss-button:hover i { margin-left: 10px; }

.down-arrow{ position: absolute; bottom: 15px; left: 48%; width: 40px; transform: rotate(90deg); }

.background-overlay { background: black; opacity: .5; width: 100%; position: absolute; height: 100%; left: 0; }



.timeline-year  { color: var(--primary) !important; font-size: 70px; font-weight: 100 !important; }
.timeline-text { font-size: 18px; color: white; }
.timeline-item { border-top: 2px solid #D7A51A; padding: 0 20px 0 0; border-left: 2px solid #D7A51A; }

.timeline-navigation {  color: var(--secondary); }
.timeline-headline-text{ color: var(--primary); font-size: 66px; font-weight: 300; text-align: center; text-transform: capitalize; padding: 2% 30%;margin-bottom:25px; }

#timeline-slider { overflow: visible; }

.timeline-container{ background-color: #272727; padding: 100px 0; }
.timeline-slider-button { cursor: pointer; }
.timeline-slider-image { transform: translatey(-25px); max-width:265px; max-height:285px; }


.bio .bio-box { position:relative; background:var(--secondary); color:var(--white); width:0; height:600px; box-sizing:border-box; overflow:hidden; transition: all 0.3s ease-in-out; }
.bio:hover .bio-box { width:500px; }
.bio .bio-box>div { width:450px !important; opacity:0; transition: all 1s ease-in-out; position:absolute; top:0; margin:auto; padding:25px; }
.bio:hover .bio-box>div { opacity:1; }



#team-slider-container{ background-color: #F0F0F0; padding: 100px; display: flex; flex-direction: column; align-items: center; }

.team-slider-headline { width: 70%; font-size: 70px; }
.team-position { font-weight: 100; margin:0; font-size: 18px; }
.team-name { font-weight: 300; font-size: 22px; margin: 0; }
.team-image-container { margin-bottom:15px !important; }
.team-slider-headline { width: 50%; margin: 50px; }



#logo-slider-container { background-color: var(--white); padding:100px 0; text-align: center; position: relative; overflow: hidden;background-image: url("https://kossolinger.wpenginepowered.com/wp-content/uploads/2025/04/LogoSlider_Background.png"); }

.logo-slider-headline { width: 70%; margin-bottom: 30px; }
.logo-image-container { /*max-width: 150px; /* Prevents logos from being too large */ margin: 0 auto; padding: 50px; border-radius: 15px; background-color: #6C3201; aspect-ratio: 5/4; align-content: center; }
.logo-item img { max-width: 100%; height: auto; object-fit: contain; }


.floating-image-wrapper { position: absolute; top: 50%; left: -10%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; }
.floating-image { width: 1000px; max-width: 1000px; }





.filter-bar { margin-top: 20px; margin-bottom: 20px; }

.post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-item { background-color: #f5f5f5; padding: 15px; border-radius: 8px; }

.pagination { margin: 20px 0; text-align: center; display: flex; flex-direction: row; justify-content: center; }
.pagination a, .pagination span { margin: 0 5px; padding: 5px 10px; border-radius: 5px; text-decoration: none; }
.pagination .current { background-color: #0073aa; color: #fff; }

.grid-title { color:white; font-size: 38px; }
.grid-date { color: white; text-transform: uppercase; }
.grid-date:hover, .grid-title:hover { color: var(--primary); }

.grid-category-button { border-radius: 30px; border: 1px solid var(--primary); font-family: var(--freight-display-pro); color: #535353; background: transparent; padding: 10px 25px; font-size: 16px; cursor: pointer; margin: 0px 5px;
}
.grid-category-button:hover { background: var(--primary); color: white; }

.grid-with-filters-next-button { border: none; color: var(--secondary); background: none; cursor: pointer; font-size: 22px; text-transform: uppercase; }
.grid-with-filters-next-button:hover { color: var(--primary); }
.grid-with-filters-next-button-image { width: 40px; }

.open-position-item { margin-bottom: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #707070; }
.open-position-title { font-size: 56px; font-weight: bold; color: var(--secondary); margin-bottom: 10px; text-transform: uppercase; }
.open-position-description { margin-bottom: 10px; color: #555; font-size: 1rem; width: 60%; line-height: 24px; }
.open-position-button { background: var(--secondary); border: none; border-radius: 30px; color: var(--white); font-family:var(---ibm-plex);padding: 10px 40px; }
.open-position-button:hover { color: var(--primary); }
.open-position-divider { border: none; border-top: 1px solid #ddd; margin-top: 20px; }


.uk-select { max-width: 300px; }

#open-position-filter { width: 400px; margin-top: 25px; margin-bottom: 50px; }


.faq-slider-block { padding-top: 60px;  padding-bottom: 60px; }
.faq-card { background-color: #F4F1E9; border-radius: 15px; padding: 25px; height: 300px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start;  box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: max-height .3s ease; overflow: hidden; position:relative; }
.faq-card:after { content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 30%; width:100%; background: #F4F1E9; background: linear-gradient(180deg, rgba(244, 241, 233, 0) 0%, rgba(244, 241, 233, 1) 100%); z-index: 10; }
.faq-title { font-size: 1.1rem; font-family:var(--helmet); letter-spacing:.03em; text-transform: uppercase; font-weight: 300; margin-bottom: 10px; color: var(--text); }
.faq-answer { font-size: 0.875rem; color: var(--text); line-height: 1.5; overflow-y:scroll; padding-right:20px; scrollbar-width:none; }
.faq-answer::-webkit-scrollbar { display:none; }

.custom-scrollbar { position: absolute; bottom: 25px; right: 15px; width: 12px; height: 70%; }

.scroll-track { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background:#bbb; transform: translateX(-50%); border-radius: 1px; }
.scroll-thumb { position: absolute; left: 50%; width: 12px; height: 12px; background: black; border-radius: 50%; transform: translate(-50%, 0); cursor: pointer; }


.relative-container { top: 3110px; position: absolute; width: 100%; height: 1000px; border: none; pointer-events: none; }
.scrolling-icon-container { width: 100%; position: relative; left: 28px; transform: translateX(-50%); height: 100%; display: flex; flex-direction: column; align-items: center; z-index: 900; overflow: hidden; }
.vertical-line { width: 2px; height: 600px; background-color: var(--primary); }
.scrolling-icon { position: absolute; width: 50px; transition: transform 0.2s linear; }
.vertical-line-svg { width: 2px; height: 100%; }
.vertical-line-svg line { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 0.2s linear; }


.special-width { width:36%; }

/* #Media Queries
================================================== */
	@media only screen and (max-width: 1420px) { }

	@media only screen and (max-width: 1199px) {		
		h1, .uk-h1	{ font-size:5.000em; }
		h2, .uk-h2	{ font-size:4.000em; }
		h3, .uk-h3	{ font-size:3.000em; }
		h4, .uk-h4	{ font-size:1.250em; }
		h5, .uk-h5	{ font-size:1.000em; }

	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		h1, .uk-h1	{ font-size:4.500em; }
		h2, .uk-h2	{ font-size:3.500em; }
		h3, .uk-h3	{ font-size:2.750em; }
		h4, .uk-h4	{ font-size:1.250em; }
		h5, .uk-h5	{ font-size:1.000em; }

	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 638px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 638px) {
		html, body { font-size:16px; }

		h1, .uk-h1	{ font-size:4.000em; }
		h2, .uk-h2	{ font-size:3.000em; }
		h3, .uk-h3	{ font-size:2.500em; }
		h4, .uk-h4	{ font-size:1.250em; }
		h5, .uk-h5	{ font-size:1.000em; }
		
		.header-logo img { width: 200px; }
		
		.grid-title { 
		   font-size:24px;
		}
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		h1, .uk-h1	{ font-size:3.500em; }
		h2, .uk-h2	{ font-size:2.875em; }
		h3, .uk-h3	{ font-size:2.250em; }
		h4, .uk-h4	{ font-size:1.250em; }
		h5, .uk-h5	{ font-size:1.000em; }
		
		.uk-offcanvas-bar { width:inherit; }
		
		.special-width { width:auto; }
		
		.bio, .bio canvas { height:350px; }
		.bio .bio-box { display:none; }
		
		.team-member canvas { height:350px; }
	}


/* #Font-Face
================================================== */
	@font-face {
		font-family: 'Helmet';
		src: url('../fonts/Helmet-Regular.woff') format('woff');
		font-weight: normal;
		font-style: normal;
		font-display: swap;
	}
	
	/*	@font-face {
			font-family: 'FontName';
			src: url('../fonts/FontName.eot');
			src: url('../fonts/FontName.eot?iefix') format('eot'),
				 url('../fonts/FontName.woff') format('woff'),
				 url('../fonts/FontName.ttf') format('truetype'),
				 url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
			font-weight: normal;
			font-style: normal; }
	*/