:root {

	--black: #000;
	--white: #fff;
	--yellow: #fd0;
	--yellowBright: #fff3b0;
	--blue: #09c;
	--blueBright: #4db5d7;
	--gray: #f9f5f5;
	
	--headerContainer1Bg: var(--yellow);
	--headerContainer2Bg: var(--white);
	
	--awardBg:  var(--gray);
	
	--footerBg: var(--yellow);
	
	--pageWidth: 1380px;
	
	--gapSizeL: 25px;
	--paddingSizeL: var(--gapSizeL);
	--marginSizeL: var(--gapSizeL);
	
	--gapSizeM: 15px;
	--paddingSizeM: var(--gapSizeM);
	--marginSizeM: var(--gapSizeM);
	
	--gapSizeS: 5px;
	--paddingSizeS: var(--gapSizeS);
	--marginSizeS: var(--gapSizeS);
	
	--textFontFamily: "Encode Sans", sans-serif;
	--textColor: var(--black);
	--textSizeXXL: 2.0rem;
	--textSizeXL: 1.6rem;
	--textSizeL: 1.2rem;
	--textSizeM: 1.0rem;
	--textSizeS: .85rem;
	--textSizeXS: .7rem;
	
	--linkColor: var(--black);
	
	
    /*
	
	link-color:          pale-blue;  
banner-color:        pale-green;  
banner-border:       pale-dark-green;  
banner-bg:           pale-neon-green;  
alert-status:        pale-green;  
alert-status-border: pale-dark-green;  
button-bg:           pale-neon-blue;  
button-border:       pale-blue;  
--footer-bg:           pale-neon-blue;  */
}


*, *:before, *:after {
  box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--textFontFamily);
	font-size: var(--textSizeM);
	color: var(--textColor);
	overflow-wrap:break-word;
}

figure {
	margin:0;
	display:block;
}

img {
    max-width: 100%;
    height: auto;
}

h1 {

}

#header .inside, #main .inside, #footer .inside {
	max-width:var(--pageWidth);
	margin:0 auto;
	position:relative;
}

#header .inside {
	height: 630px;
	padding-top: 30px;
}

#header .headerImg {
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

#header .headerImg img {
	width:100%;
	height:100%;
	object-fit:cover;
}

#header .container {
	position:relative;
	margin: 0 80px;
	
}

#nav1Container{
	background:var(--headerContainer1Bg);
	padding: var(--paddingSizeM);
	display:grid;
	grid-template-columns: auto auto;
	grid-gap:var(--gapSizeM);
}

#nav2Container{
	background:var(--headerContainer2Bg);
	display:grid;
	grid-template-columns: auto auto;
	grid-gap:var(--gapSizeM);
}

#searchContainer {
	background:var(--gray);
	border-radius:10px;
	top:50%;
	padding:var(--paddingSizeM);
	
}

#searchContainer h2 {
	text-align:center;
	font-size:var(--textSizeXL);
	
}

#searchContainer form {
	
	display:grid;
	grid-template-columns:auto auto auto auto auto;
	grid-gap:var(--gapSizeM);
}

#searchContainer label {
	display:none;
}

#searchContainer input {
	padding:var(--paddingSizeM);
	border-radius:5px;
	border:1px solid #000;
	width:100%;
}

#searchContainer button {
	padding:var(--paddingSizeM);
	border-radius:5px;
	background:var(--blue);
	color:var(--white);
	border:0;
	font-weight:bold;
	width:100%;
}

#logo {
	grid-row: 1 / span 2;
}

#logo img {
	max-height: 70px;
}

nav ul {
	list-style:none;
	margin:0;
	padding:0;
}

nav li {
	white-space:nowrap;
}

#navigation1 > ul {
	display:flex;
	justify-content: flex-end;
}

#navigation1 li:not(:last-child):after {
	content:"\00a0\00a0|\00a0\00a0";
}

#navigation1 a {
	font-size:var(--textSizeS);
}

#navigation1 a:hover, #navigation1 a.active {
	text-decoration:underline;
}

#contactButtons {
	text-align:right;
}

#contactButtons a {
	padding: 10px;
	font-weight:bold;
    border: 1px solid #000;
    border-radius: 20px;
}

#contactButtons a:hover {
	background:var(--yellowBright);
}

#contactButtons em {
	transform: translateY(6px);
	margin: 0 5px;
}

#navigation2 > ul {
	display:flex;
}

#navigation2 .level_1 > li > a {
    display:block;
	font-weight:bold;
	padding:var(--paddingSizeM);
}

#navigation2 .level_1 > li:hover, #navigation2 .level_1 > li.active {
	background:var(--yellowBright);
}

#navigation2 .level_1 > li:hover .level_2 {
	display: flex;
}

#navigation2 .level_2 {
	display:none;
	position: absolute;
    width: 100%;
    background: #fff;
	border-top: 5px solid transparent;
    background-clip: padding-box;
	z-index:1;
}

#navigation2 .level_2>li {
	color:var(--blue);
	font-weight:bold;
}

#navigation2 .level_2 .linkList {
	margin:var(--marginSizeL);
}

.linkList + .linkSingle {
	margin-left:auto;
}
#navigation2 .level_2 .linkSingle {
	white-space:normal;
}

#navigation2 .level_2 .linkSingle a {
	padding:var(--paddingSizeM);
	padding-right:50px;
	word-spacing:100vw;
	width:min-content;
	display:block;
	height:100%;
	align-content:flex-end;
	position:relative;
}

#navigation2 .level_2 .linkSingle:nth-child(odd) a{
	background:var(--yellow);
}

#navigation2 .level_2 .linkSingle:nth-child(even) a {
	background:var(--blue);
	color:var(--white);
}

#navigation2 .level_2 .linkSingle:nth-child(odd) a:hover {
	background:var(--yellowBright);
}

#navigation2 .level_2 .linkSingle:nth-child(even) a:hover {
	background:var(--blueBright);
}

#navigation2 .level_2 .linkSingle a::after {
	content:"\279C ";
	float:right;
	font-size:var(--textSizeXL);
	position:absolute;
	bottom:0;
	right:0;
	padding:var(--paddingSizeM);
}

#navigation2 .level_3 {
	column-count:2;
	font-weight:normal;
	margin:var(--marginSizeL) 0;
}



#navigation2 .level_3 li {
	padding:5px;
}
#navigation2 .level_3 li:before {
	
	content:'> ';
}

#navigation2 .level_3 a:hover {
	text-decoration:underline;
}

#navigation2 .level_3 a::before {
	
	
}

#navigation2 .level_3 a:hover:before {
	text-decoration:none;
}

#navigationMobile {
	display:none;
}

#quickSearch {
	text-align:right;
	font-weight:bold;
}

#quickSearch a {
	display:inline-block;
	padding:var(--paddingSizeM);
}

#quickSearch a:hover {
	background:var(--yellowBright);
}

#quickSearch em {
	line-height: 0px;
    font-size: 30px;
    transform: translateY(7px);
}

.awardContainer {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-gap:var(--gapSizeM);
}

.award {
	
	background:var(--awardBg);
	border-radius:10px;
	padding:var(--paddingSizeM);
	text-align:center;
	
} 

.award em {
	background:var(--white);
	border-radius:50%;
	font-size: 3.0rem;
    width: 5rem;
    height: 5rem;
    line-height: 5rem;
	color: var(--yellow);
}

.award h2 {
	font-size:var(--textSizeL);
}

#main .inside {
	padding:var(--paddingSizeL);
}

#footer {
	background:var(--footerBg);
	font-size:var(--textSizeS);
}

#footer .inside {
	padding:var(--paddingSizeL);
	display:flex;
	gap:var(--gapSizeL);
	justify-content: space-between;
}

#footer h2 {
	font-size:var(--textSizeM);
}

#header a, #main a, #footer a {
	text-decoration:none;
	color:var(--linkColor);
}

#main a:hover, #footer a:hover {
	text-decoration:underline;
}