@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Unbounded:wght@200..900&display=swap');

* {margin:0px; padding:0px; box-sizing:border-box;}
body {position:relative; width:100%; height:100dvh; background:#FFFFFF; font-family:'Open Sans', sans-serif; font-size:16px;}
ol, ul {margin:0 0 0 20px;}
li {margin:0 0 5px 10px;}

div.page {width:100%; height:100dvh;}

div.hat {position:relative; width:100%; height:170px; background:#072FDB; display:flex; align-items:center; justify-content:flex-start; padding:50px;}
div#logo {display:flex; align-items:center; justify-content:flex-start; min-height:75px; padding:0; text-decoration:none;}
img#logo {height:73px; width:auto; transition:.3s;}
img#pagelogo {height:73px; width:auto; transition:.3s;}
a#header {display:flex; flex-direction:column; flex-wrap:wrap; justify-content:flex-start; padding:0; margin-left:20px; text-decoration:none;}
a#header h1 {font-family:'Fira Sans Extra Condensed', sans-serif; font-size:29px; line-height:1; letter-spacing:1px; font-weight:700; color:#FFFFFF; text-align:left; text-transform:uppercase; margin:0 0 10px 0; padding:0; overflow:hidden; transition:.3s;}
a#header h2 {font-family:'Fira Sans Extra Condensed', sans-serif; font-size:21px; line-height:1.2; letter-spacing:1px; font-weight:200; color:#FFFFFF; text-transform:uppercase; max-width:610px; margin:0; padding:0; overflow:hidden; transition:.3s;}
a#header h3 {font-family:'Fira Sans Extra Condensed', sans-serif; font-size:16px; line-height:1.2; letter-spacing:1px; font-weight:200; color:#FFFFFF; text-align:left; text-transform:uppercase; margin:0; padding:0; overflow:hidden; transition:.3s;}
a#main {display:inline-block; position:absolute; right:40px; top:40px; font-family:'Unbounded', sans-serif; font-size:20px; line-height:1; letter-spacing:0; font-weight:500; color:transparent; background-image:url(/Images/gold2.jpg); background-clip:text; -webkit-background-clip:text; background-position:-100px center; animation: 10s ease-in-out infinite gold; margin:0 0 20px 0; padding:0; filter:drop-shadow(0px 2px 1px rgba(0, 0, 0, .3)); transition:.3s;}

div.pagehat {position:relative; width:100%; height:220px; background:#072FDB; display:flex; flex-direction:column; justify-content:flex-start; padding:40px;}
div#hat-buttons {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; min-height:33px; padding:0; margin-top:25px; text-decoration:none;}
div#hat-buttons div {display:flex; flex-grow:1; align-items:center; justify-content:flex-end; min-height:33px; padding:0; margin:0; text-decoration:none;}
a.button {display:flex; align-items:center; justify-content:center; white-space:nowrap; width:auto; height:32px; padding:10px 15px; margin:0 20px 0 0; border:1px solid #FFFFFF; font-family:'Unbounded', sans-serif; font-size:11px; line-height:1; letter-spacing:.6px; font-weight:normal; text-transform:uppercase; text-decoration:none; color:#FFFFFF; transition:.3s;}
a.button:hover {border:1px solid #eec359; background:#eec359; color:#072FDB;}

#searchform {display:flex; align-items:center; justify-content:flex-end; position:relative; flex:1; max-width:450px; height:32px; padding:0; margin:0 0 0 50px; border:0; text-align:right; transition:.5s;}
input#searchinput {width:calc(100% - 50px); height:32px; background:transparent; font-size:18px; line-height:18px; padding:0; margin:0; border:0; color:#FFFFFF; border-bottom:1px solid #FFFFFF; vertical-align:top; outline:0; outline-offset:0;}
input#searchinput::selection {background:#ffce1b; color:#072FDB;}
input#searchsubmit {width:auto; height:32px; margin:0 0 0 10px; padding:10px 15px; border:0; background:#FFFFFF; cursor:pointer; border:1px solid #FFFFFF; font-family:'Unbounded', sans-serif; font-size:11px; line-height:1; letter-spacing:.6px; font-weight:normal; text-transform:uppercase; text-decoration:none; color:#031359; transition:.3s; vertical-align:top;}
input#searchsubmit:hover {color:#FFFFFF; background-color:#FFFFFF; background:#072FDB;}
div.searchparams {display:block; margin:10px 0; font-size:18px; line-height:1; color:#000000;}
div.searchparams select {max-width:300px; font-size:18px; line-height:1; color:#000000; margin:0 10px 0 0; border-bottom:2px solid #072FDB;}

img.goldline {position:absolute; left:0; bottom:0; width:100%; height:6px; background-image:url(/Images/gold2.jpg); background-size:1000px; background-position:0 0; animation: 10s ease-in-out infinite gold; filter:drop-shadow(0px 2px 1px rgba(0, 0, 0, .3));}

div#title {position:relative; display:flex; align-items:center; justify-content:flex-start; width:100%; height:calc(100vh - 170px); padding:0 0 0 100px; background:linear-gradient(to right, #031359, #072FDB); overflow:hidden;}
div.title {width:60dvw; z-index:10;}
div.title h1 {font-family:'Unbounded', sans-serif; font-size:60px; line-height:1; letter-spacing:0; font-weight:300; color:transparent; background-image:url(/Images/gold2.jpg); background-clip:text; -webkit-background-clip:text; background-position:-100px center; animation: 10s ease-in-out infinite gold; margin:0 0 20px 0; padding:0; filter:drop-shadow(0px 2px 1px rgba(0, 0, 0, .3)); transition:.3s;}
div.title h2 {font-family:'Open Sans', sans-serif; font-size:24px; line-height:1; letter-spacing:0; font-weight:300; color:#FFFFFF; margin:0 0 60px 0; padding:0; transition:.3s;}
div.title a.but {display:inline-block; font-family:'Unbounded', sans-serif; font-size:12px; line-height:1; letter-spacing:1px; font-weight:500; text-transform:uppercase; color:transparent; background-image:url(/Images/gold2.jpg); background-clip:text;-webkit-background-clip:text; background-position:-100px center; animation: 10s ease-in-out infinite gold; margin:0 40px 15px 0; padding:15px 60px; border:1px solid #eec359; text-decoration:none; cursor:pointer; transition:.3s;}
div.title a.but:hover {background:#eec359; color:#031359;}
img.gold {position:absolute; right:-10px; top:-10px; width:auto; height:100%; background-image:url(/Images/gold2.jpg); background-size:1000px; background-position:0 0; animation: 10s ease-in-out infinite gold; mask-image:url(/Images/corner.svg); -webkit-mask-image:url(/Images/corner.svg); mask-repeat:no-repeat; -webkit-mask-repeat:no-repeat; mask-size:auto 100%; -webkit-mask-size:auto 100%;}
img.goldshadow {position:absolute; right:-10px; top:-10px; width:auto; height:100%; filter:drop-shadow(0px 2px 1px rgba(0, 0, 0, .3));}

div#block {position:relative; display:flex; justify-content:flex-start; width:100%; padding:50px 40px; overflow:hidden;}
div.block {display:flex; position:relative; flex-direction:row; flex-wrap:wrap; justify-content:space-between; width:100%; height:auto; background-color:#FFFFFF; border:0; border-top:1px solid rgba(0,0,0,.3); padding:60px 0 0 0; margin:0;}
div.block h3 {position:absolute; left:0; top:-4px; color:#000000; font-family:'Unbounded', sans-serif; font-size:20px; line-height:1; font-weight:bold; text-decoration:none; margin:0; padding:10px 0; border-top:6px solid #000000;}
div.letters {display:block; width:100%; height:60px; margin:0;}
a.letter {display:inline-block; padding:5px 7px; margin:0; border:0; font-family:'Unbounded', sans-serif; font-size:18px; line-height:1; letter-spacing:0; font-weight:700; text-transform:uppercase; text-decoration:none; color:#000000; transition:.3s;}
a.letter:hover {background:#072FDB; color:#FFFFFF;}
div.items {position:relative; width:100%; max-width:1000px; height:calc(100% - 60px); padding:0;}
div.letter {display:block; padding:0; margin:40px 0 20px 0; border:0; font-family:'Unbounded', sans-serif; font-size:50px; line-height:1; letter-spacing:0; font-weight:700; text-transform:uppercase; text-decoration:none; color:#000000; transition:.3s;}
a.item {display:block; padding:10px 20px; margin:0; border:0; font-family:'Unbounded', sans-serif; font-size:14px; line-height:1.4; letter-spacing:.6px; font-weight:normal; text-decoration:underline; color:#072FDB; transition:.3s;}

div.article {position:relative; display:flex; align-items:flex-start; flex-direction:row; flex-wrap:wrap; justify-content:flex-end; width:100%; max-width:1200px; padding:30px 0; overflow:hidden;}
div.organization {position:relative; display:flex; align-items:flex-end; justify-content:flex-start; width:100%; height:400px; padding:0; margin:0 0 30px 0; background:#072FDB; overflow:hidden;}
div.organization h1 {display:block; padding:30px; margin:0; border:0; font-family:'Unbounded', sans-serif; font-size:27px; line-height:1.3; letter-spacing:0; font-weight:500; text-decoration:none; color:#FFFFFF; transition:.3s;}
div.organization img {width:auto; height:100%; transition:.3s;}
img.person {width:100%; max-width:350px; height:auto; margin:0 50px 50px 0; transition:.3s;}

div.text {width:100%; max-width:800px; padding:0; text-align:left;  font-family:'Open Sans', sans-serif; font-size:16px; line-height:1.4; letter-spacing:0; margin:0; overflow:hidden;}
div.text h1 {display:block; padding:0; margin:0 0 40px 0; border:0; font-family:'Unbounded', sans-serif; font-size:27px; line-height:1.3; letter-spacing:0; font-weight:500; text-decoration:none; color:#000000; transition:.3s;}
div.text p {font-size:16px; line-height:1.5; margin:10px 0; hyphens:auto;}
div.text img {max-width:100%; height:auto !important;}
div.text iframe {max-width:100%; margin:10px auto !important;}
table.text, table.text td {border-collapse:collapse;}
table.text {overflow-y:auto;}
table.text p {margin:0;}
div.resolution {font-weight:900; font-size:16px; line-height:1.5; margin:30px 0;}

div.gallery {position:relative; width:100%; background-position:50% 50%; margin:30px 0; background-repeat:no-repeat; background-size:contain; text-align:center; transition:.5s;}
div.left {position:absolute; left:0; top:0; display:inline-block; width:30%; height:100%; background-image:url(/Images/left.png); background-repeat:no-repeat; background-position:left 50%; cursor:pointer; transition:.2s;}
div.left:hover {background-image:url(/Images/lefta.png);}
div.right {position:absolute; right:0; top:0; display:inline-block; width:30%; height:100%; background-image:url(/Images/right.png); background-repeat:no-repeat; background-position:right 50%; cursor:pointer; transition:.2s;}
div.right:hover {background-image:url(/Images/righta.png);}
div.caption {position:absolute; left:50px; right:50px; bottom:20px; display:none; disp-lay:inline-block; padding:10px; color:#fff; font-size:14px; line-height:14px; text-decoration:none; text-align:center; overflow:hidden;}


@keyframes gold {
  0% {
    background-position: 0 0;
  }
  20% {
    background-position:500px 400px;
  }
  40% {
    background-position: 0 0;
  }
  60% {
    background-position:-100px -300px;
  }
  80% {
    background-position: 100px 200px0;
  }
  100% {
    background-position: 0 0;
  }
}

@media only screen and (max-width : 1300px), only screen and (max-device-width : 1300px){
	div.article {flex-direction:column; flex-wrap:nowrap; justify-content:flex-start;}

}
@media only screen and (max-width : 1050px), only screen and (max-device-width : 1050px){
	div#title {align-items:flex-start;}
	div.title {width:100%; padding-top:100px;}
	div.title h1 {font-size:42px;}
	div.title h2 {font-size:18px; margin:0 0 40px 0;}
	div.title a.but {margin:0 20px 0 0; padding:15px 40px;}
	img.gold {transform:rotate(90deg); width:100%; height:auto; left:0; bottom:-10px; right:0; top:unset;}
	img.goldshadow {transform:rotate(90deg); width:100%; height:auto; left:0; bottom:-10px; right:0; top:unset;}

	div.pagehat {padding:20px}
	img#pagelogo {height:53px;}
	a#header h1 {font-size:26px;}
	a#header h3 {font-size:14px;}
	a#main {font-size:16px; right:20px; top:15px;}
	#searchform {margin:0;}
	
	div.organization {flex-direction:column; height:auto;}
	div.organization img {width:100%; height:auto;}
}
@media only screen and (max-width : 800px), only screen and (max-device-width : 800px){
	img#logo {height:53px;}
	a#header h1 {margin:0;}
	a#header h2 {font-size:18px;}
	a#header h3 {display:none;}
	div#hat-buttons {flex-wrap:wrap; margin-top:10px;}
	a.button {width:32%; margin:0;}
	div#hat-buttons div {width:100%; margin-top:10px;}
	#searchform {max-width:unset;}
}
@media only screen and (max-width : 650px), only screen and (max-device-width : 650px){
	div.hat {height:100px; padding:20px 50px;}
	img#logo {height:45px;}
	img#pagelogo {height:45px;}
	a#header h1 {font-size:20px;}
	a#header h2 {font-size:16px;}
	div#title {height:calc(100vh - 100px);}
	div#title {padding:70px 50px;}
	div.title {width:100%; padding-top:0;}
	
	div#block {padding:30px 20px;}
	
	div.organization h1 {font-size:24px;}
	div.text h1 {font-size:24px;}
}
@media only screen and (max-width : 560px), only screen and (max-device-width : 560px){
	a#header h1 {font-size:18px;}
	a#header h2 {font-size:14px;}
	div.title a.but {width:100%; text-align:center; margin:0 0 15px 0;}
	a.button {font-size:10px;}
	input#searchsubmit {font-size:10px;}
}
@media only screen and (max-width : 500px), only screen and (max-device-width : 500px){
	div.hat {height:80px; padding:20px;}
	a#header h1 {font-size:14px;}
	a#header h2 {font-size:14px;}
	div#title {height:calc(100vh - 80px);}
	div.title h1 {font-size:36px;}
	div.title h2 {font-size:14px; margin:0 0 40px 0;}
	
	div.letter {font-size:32px;}
	a.item {padding:10px 0 10px 20px; font-size:12px;}
	
	div.organization h1 {font-size:20px;}
	img.person {width:100%; max-width:unset;}
}
@media only screen and (max-width : 400px), only screen and (max-device-width : 400px){
	a#header h2 {font-size:12px;}
	div.title h1 {font-size:32px;}
	div.title h2 {font-size:14px; margin:0 0 40px 0;}
	a.button {font-size:8px;}
	input#searchsubmit {font-size:8px;}
	
	div.organization h1 {font-size:18px;}

}
@media only screen and (max-height : 500px), only screen and (max-device-height : 500px){
	div.hat {height:80px; padding:20px;}
	img#logo {height:45px;}
	a#header h2 {font-size:14px;}
	div#title {align-items:flex-start; height:calc(100vh - 80px); padding:0;}
	div.title {width:100%; padding:50px;}
	div.title h1 {font-size:36px;}
	div.title h2 {font-size:14px; margin:0 0 40px 0;}
	img.gold {transform:rotate(0deg); right:-10px; top:-10px; width:auto; height:100%; left:unset;}
	img.goldshadow {transform:rotate(0deg); right:-10px; top:-10px; width:auto; height:100%; left:unset;}
}