@font-face {
  font-family: 'ModernSans';
  src: url(../fonts/ModernSans/ModernSans.woff) format('woff');
       /*url(../fonts/JosefinSans/JosefinSans-Regular.woff2) format('woff2');*/
}
* {
margin: 0;
font-family: ModernSans;
text-decoration: none;
/*overflow: hidden;*/
-ms-overflow-style: none;
scrollbar-width: none;
}
*::-webkit-scrollbar {
display: none;
}

/* COLORS & FONT-STYLE */
.fcolor1 {color: rgba(255,255,255,0.75);}
.fcolor2 {color: rgba(50,200,255,1.0);}
.fcolor3 {color: rgba(255,255,255,0.50);}}
.fcolor4 {}
.fcolor5 {}
.fh1:hover {color: rgba(255,255,255,1.0); font-weight: bold;}
.fh2:hover {font-size: 200%;}
.fh3:hover {font-size: 400%;}
.fsize1 {font-size: calc(12px + 16 * ((65vw - 800px) / 680));}/*REGULAR*/
.fsize2 {font-size: calc(16px + 18 * ((90vw - 1000px) / 300));}/*LARGE*/
.fsize3 {font-size: calc(10px + 12 * ((55vw - 800px) / 400));}/*SMALL*/
.fsize4 {font-size: calc(12px + 16 * ((80vw - 800px) / 680));}/*TIME*/
.fsize5{}
@media (max-width: 800px) {
	.fsize2 {font-size: calc(12px + 16 * ((80vw - 800px) / 680));}/*LARGE*/
}

.bg1 {
display: block;
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(18,87,118,0.7));
z-index: -98;
}
.bg2 {
display: block;
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(36,39,38,1.0);
z-index: -99;
clear: after !important;
}
.wrapper {
display: block;
position: relative;
float: left;
width: 100vw;
height: 100vh;
/*overflow: hidden;*/
z-index: 0;
}
.h-container {
display: inline-block;
position: relative;
float: left;
width: 100%;
height: 4.25vh;
}
.h-box-l {
display: inline-block;
position: relative;
float: left;
width: 20%;
height: 100%;
line-height: 4.25vh;
}
.h-box-r {
display: inline-block;
position: relative;
float: right;
width: 10%;
height: 100%;
line-height: 4.25vh;
text-align: center;
}
.h-ico-box {
display: flex;
justify-content: center;
align-items: center;
position: relative;
float: right;
width: 3.5%;
height: 100%;
line-height: 4.25vh;
text-align: center;
}
.h-ico {
display: flex;
position: relative;
width: auto;
height: 80%;
filter: brightness(500);
opacity: 0.65;
}
#m-wrapper{
display: inline-block;
position: relative;
float: left;
width: 100%;
height: 91.5vh;
border: 0;
overflow: auto;
animation: fadeInAnimation ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.iframe1 {
display: inline-block;
position: relative;
float: left;
border: 0;
width: 100%;
height: 100%;
/*background-color: green;*/
}
.iframe2 {
display: inline-block;
position: relative;
float: left;
border: 0;
width: 80%;
height: 100%;
}
.login-container {
display: block;
position: relative;
float: left;
width: 35%;
height: 80%;
margin-left: 32.5%;
margin-top: 0%;
}
.login-logo-box{
display: block;
position: relative;
float: left;
width: 100%;
height: 20%;
overflow: hidden;
margin-bottom: 10%;
}
.login-logo {
width: 50%;
height: auto;
margin-left: 25%;
margin-top: 7.5%;
}
.login-login-box {
display: block;
position: relative;
float: left;
width: 65%;
height: 73.2%;
margin-left: 17.5%;
background-color: rgba(255,255,255,0.05);
border: 2px solid rgba(255,255,255,0.0);
border-radius: 15px;
animation: fadeInAnimation ease 1s;
animation-iteration-count: .5;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.login-slats {
display: flex;
justify-content: center;
align-items: center;
position: relative;
float: left;
width: 90%;
height: 27.5%;
margin-left: 5%;
margin-top: 10px;
margin-bottom: 10px;
}
.login-slats-alt {
height: 10%;
}
.login-graphic {
/*display: none;*/
height: 65%;
width: auto;
filter: brightness(500);
opacity: 0.5;
}
.login-button {
display: flex;
justify-content: center;
align-items: center;
width: 65%;
height: 100%;
border: 1px solid rgba(255,255,255,0.20);
}
.login-button:hover {background-color: rgba(255,255,255,0.15);}
.menu-options-container {
display: block;
position: relative;
float: left;
height: 100vh;
width: 20%;
overflow: hidden;
}
.menu-options-container:hover {overflow-y: auto;}
.menu-options-box, .menu-options-box2 {
display: flex;
justify-content: center;
align-items: center;
position: relative;
float: left;
width: 95%;
height: 15%;
margin-left: 2.5%;
margin-bottom: 3px;
border: 2px solid rgba(255,255,255,0.0);
border-radius: 5px;
}
/*.menu-options-box:hover {background-color: rgba(255,255,255,0.15);}*/
.menu-options-box2 {
height: 4.25%;
}
.start-box {
display: flex;
align-items: center;
position: relative;
float: left;
width: 100%;
height: 100%;
}
.welcome-message {
float: left;
margin-left: 5%;
}
.grid-box {
display: block;
position: relative;
float: left;
height: 100vh;
width: 100%;
overflow: hidden;
animation: fadeInAnimation ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadeInAnimation {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.grid-box:hover {overflow-y: auto;}
.grid-row {
display: inline-block;
position: relative;
float: left;
width: 100%;
height: 20vh;
margin-top: 5%;
}
.grid-option {
display: flex;
justify-content: center;
align-items: center;
float: left;
width: 30vw;
height: 20vh;
margin-left: 1.25%;
margin-right: 1.25%;
background-color: rgba(255,255,255,0.15);
border-radius: 5px;
}
.grid-ico {
display: block;
position: relative;
width: auto;
height: 65%;
}
.f-container {
display: block;
position: relative;
float: left;
width: 100%;
height: 4.25vh;
}
.f-slats {
display: flex;
justify-content: center;
align-items: center;
position: relative;
float: left;
width: 33.3vw;
height: 100%;
}
.f-slats-links {
margin-left: 15px;
margin-right: 15px;
}
.copyright {
	border: 0;
}