@font-face {
  font-family: NimbusMono;
  src: url(nimbusmono-regular.otf);
}


html,php{width:100%; height:100%; background-color:#eee; color: #00004c; font: 16px 'NimbusMono',  monospace; margin:0; padding:0}
body{}

header{ width:100%; height: 70px;background-color:#00004c; transition: all 0.3s ease; position:fixed; top: 0; left:0;  box-sizing: border-box; border-top:5px solid #eee;  border-left:5px solid #eee;  border-right:5px solid #eee;  z-index:998}


header.shrunk {top:0;}

#logo{width:65px; height:65px; margin-left:5px; float:left}
#head{ min-width:303px; height:66px; margin: 0 auto}
#head ul ul {display:none; border: 1px solid white; z-index:200;}
#head ul li:hover ul, #head ul li:active ul {display: block;}
#head ul {display: inline-block; list-style-type: none; position: relative;  padding: 0; margin:0; float:right;  }
#headp ul:after {content: ""; clear: both; display: block;}
#head ul li { float:left }
#head ul li a {display:block; color:#fff;  line-height: 65px; padding: 0 30px 0 30px; text-align: center; text-decoration:none}
#head ul li .akt, #head ul li a:hover, #head ul li a:active {background-color: #fff; color: #00004c;}
#head ul ul {position: absolute; top: 100%;   padding: 0;}
#head ul ul li {border-bottom: 1px solid #ddd; box-sizing:border-box; float:none;  position: relative; }
#head ul ul li a {  background-color:#00004c;  color:#fff; height: 30px; line-height: 30px; padding: 0 5px 0 5px; }	
#head ul ul li a:hover, #head ul ul li a:active, #head ul ul li.current a {background-color: #fff; color:#00004c;  }

#mmenu{width:65px; height:65px; display:none; background:url("../img_fol/nav_white.png") no-repeat; background-position: center center; -webkit-filter: grayscale(100%); filter: grayscale(100%);float:right}

.hline{border-bottom:1px solid #00004c;}
h1{font-size: 16px; }
h2{font-size: 15px; }
h4{font-size: 14px; padding: 10px}
header{background-color: #00004c;}
main{width:100%; margin: 0 auto; text-align:center }
form {border:none}
.cleaner{clear:both}

a{color:white; text-decoration:none}
.w{color:#fff; text-decoration:none}
.bc {color:#00004c; text-decoration:none}
.bc:hover {text-decoration:underline}
.bcu {color:#00004c; text-decoration:underline}

p{margin: 0; text-indent:25px}
.small{font-size:14px}

.invert:hover, .invert:active {background-color:#00004c; color:#fff;}
.tc{text-align:center;}
.tr{text-align:right}
.tl{text-align:left !important;}
.b{font-weight:bold}


.grid-container{margin-top:0; display: grid; grid-template-columns: 5% 90% 5%; }
.grid-allheight{height:95vh; }
.grid-item { }
.center{position: relative; top: 50%; transform: translateY(-50%);}
.smallf{font-size:14px}
.di{display:inline-table}
a {color:white}




.card_holder{ position: relative; top: 50%; transform: translateY(-40%);}
.card {text-align:center; width: 20%; height:200px; display: inline-table; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);  border: 1px solid #00004c; transition: 0.3s; padding: 40px 20px 20px 20px; }
.card_small {text-align:center; width: 20%; display: inline-table; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);  border: 1px solid #00004c; transition: 0.3s; padding: 20px; }

/* On mouse-over, add a deeper shadow */
.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
}

/* Add some padding inside the card container */
.container {
	margin:: 2px 16px;
}




.col-25 { float: left; width: 25%; }
.col-50 { float: left; width: 50%; }


.dit{display:inline-table}
.stopro{width:100%}		

#status-msg, #fstatus-msg { position:fixed; left:0; bottom:0; border-bottom: 2px solid #00004c;  width:100%; height:50px; color:white; font-weight:bold; line-height:30px; padding: 5px; text-align:center; animation-duration:5s}
#status-msg { transform:translate(0, 100%); animation-name: statusmsg; }
#fstatus-msg { transform:translate(0, 100%); animation-name: fstatusmsg; display:none }
.allfine {background-color: green}
.notfine{ background-color: red;}

/* LOGIN-FORM */
			#loginForm { width:310px; margin: auto; position:relative} 
			#loginForm input { width:270px; border: none; font-size:16px; padding: 5px; text-align:center }
			#loginForm input::placeholder{font-size:16px; font-style:italic; color:#ccc}
			#loginForm input.invalid{background-color: #ffdddd} 
			#loginBtn { background-color: #00004c; border: 1px solid #fff; color:#fff; font-size:14px; font-weight:bold; padding: 10px 30px; margin: 70px auto 0 auto; cursor:pointer}
			#loginBtn:hover, #loginBtn:active { border: 1px solid #00004c; background-color: #fff; color:#00004c;}
			.border_bottom{border-bottom:1px solid #00004c; }
			.login_fld{width:288px; border-bottom:1px solid #00004c !important; }
			
			.step{width: 270px; position:absolute; top:100px; left:0; display: none; padding: 20px; opacity: 1;}
			.center{text-align:center }

			input[type=text], input[type=password], textarea {width:100%; padding: 5px 10px; margin: 8px 0; display:inline-block; border:1px solid #bbb; box-sizing:border-box}
			
			input[type=text]:focus-visible, input[type=password]:focus-visible {outline: none; }

@keyframes statusmsg {
0% {transform:translate(0,0); opacity:0;}
15% {opacity:1}
25% {transform:translate(0, -100%);}
75% {transform:translate(0, -100%);}
85% {opacity:1}
100% {transform:translate(0, 0); opacity:0}
}
@keyframes fstatusmsg {
0% {transform:translate(0,100%); opacity:0;}
25% {transform:translate(0, 0); opacity:1}
75% {transform:translate(0, 0); opacity:1}
100% {transform:translate(0, 100%); opacity:0; display:none}
}

footer{position:fixed; left:0; bottom:0; width:100%; height:30px; line-height:25px; background-color: #00004c; box-sizing: border-box; border-bottom:5px solid #eee;  border-left:5px solid #eee;  border-right:5px solid #eee;  color:#fff; text-align:right; z-index:997}
footer p{margin: 6px; padding: 3px 0; }

@media only screen and (max-width:1910px){
 .grid-container{grid-template-columns: 0 100% 0; }
}

@media only screen and (max-width:1024px){
 .col-25 { width: 35%; }
 .col-50 {  width: 30%; }

 .grid-container{display: grid; grid-template-columns: 0 100% 0; }
 .card_holder{ position: relative; top: 50%; transform: translateY(-50%); padding: 80px 12px 80px 12px;}
 .card { width: 80%; display: inline-block; } 
}



@media only screen and (max-width:805px){
 .grid-container{display: grid; grid-template-columns: 0 100% 0; }
 .smallf{font-size:12px}
 .col-25, .col-50 { width: 33%; }
 }

@media only screen and (max-width:650px){
	#mmenu{display: block; cursor:pointer}
	#head{width:100%; height:75px; margin-top: 0px;}
	#head ul li{display:none; background-color:#00004c}
	#head:hover ul,  #head:focus ul{width:100%; height:100%}
	#head:hover #mmenu, #head:active #mmenu { background:none;  }
	#head:hover ul li, #head:hover ul ul, #head:active ul li, #head:active ul ul {display:block}
	#head ul li a:hover, #head ul li a:active {background-color:#fff}
	#head ul ul {position: static;}
	#head ul li a {line-height: 45px; text-decoration:underline}
	#head ul ul, #head ul ul li {border: none}
	#head ul ul li a {  height: 30px; line-height: 30px; text-decoration:none}
	
	#head ul li { float:none }
	.col-25 { width: 80%; }
	.col-hide{display:none}
}