@font-face {
  font-family: Noto-Sans;
  src: url("../fonts/NotoSans-Regular.ttf");
}

body {
  font-family:Noto-Sans;
  font-size:100%;
  background-color:#0B0B2C;
  background-image:url("../images/background-art.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  color:#d3ffff;
  margin:0;
  padding:0;
}
a {
  color:#00fffe;
  font-size: 1.0em;
  text-decoration:none;
  border:none;
  display:inline-block;
}
a:hover {
  color:#e6e600;
}
h1 {
  font-size:2.5em;
  font-weight:bold;
}
h2 {
  font-size:1.75em;
  font-weight:bold; 
}
h3 {
  font-size:1.5em;
  font-weight:bold;
}
div, p {
  font-size:1.0em;
}
.notice {
  color:#ff4d4d;
  font-weight:bold;
}
.divider1 {
  width:90%;
  max-height:200px;
  margin:25px auto;
}
.divider1 img {
  width:100%;
  height:100%;
}
.divider2 {
  width:90%;
  max-height:200px;
  margin:25px auto;
  text-align:center;
}
.divider2 img {
  width:100%;
  height:100%;
}
.content-text {
  padding:15px;
}
.container-full {
  margin:0;
  padding:15px;
}
.colored-bg {
  background-color:#20224C;
}
.container-large {
  width:90%;
  margin:25px auto;
  padding:25px;
}
.container-small {
  display:inline-block;
  width:500px;
  margin:25px auto;
  padding:25px;
}
.container-xs {
  display:inline-block;
  width:350px;
  margin:25px;
  padding:0px 25px 25px;
}
.bordered {
  background-color:#20224C;
  border-radius:10px;
  border:2px solid #4d52b3;
}
.centered {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
.indented {
  padding-left:30px;
}
.content-box-decor-top {
  height:50px;
  margin-top:25px;
  background-image:url('../images/bg-layer-top.gif');
  background-size:100% 100%;
}
.content-box-decor-bottom {
  height:50px;
  margin-bottom:25px;
  background-image:url('../images/bg-layer-bottom.gif');
  background-size:100% 100%;
}
.click-box {
  border-radius: 10px;
  border:2px solid #5f8fd7;
  padding:5px;
  color:#5f8fd7;
}
.click-box:hover {
  border:2px solid #72cdeb;
  color:#72cdeb;
}
.big-link-text {
  color:#00fffe;
  text-decoration:none;
  font-size:2.5em;
  font-weight:bold;
  margin:20px;
}
.big-link-text:hover {
  color:#00fffe;
  text-shadow:-1px 1px 10px #e6ccff, 1px -1px 10px #e6ccff;
}
.text-glow {
  text-shadow:-1px 1px 10px #6600ff, 1px -1px 10px #6600ff;
}
.img-box {
  width:300px;
  height:300px;
  display:block;
  border-radius: 10px;
  margin:25px auto;
}
.img-box img {
  width:100%;
  height:100%;
  border-radius: 10px;
}
.image-link {
  box-shadow:none;
  text-decoration:none;
}
.image-link:hover {
  box-shadow:-1px 1px 10px #4d52b3, 1px -1px 10px #4d52b3;
}

/* Navigation Menu */
#menu {
  background-image:url('../images/navbar-bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height:150px;
  width:100%;
  padding-bottom:25px;
}
#navlogo {
  display: inline;
  float: left;
  border: none;
  width: 35%;
  padding-left:25px;
  padding-right:25px;
}
#navlogo a {
  border: none;
  text-decoration: none;
}
#navlogo a img {
  display: inline;
  width: 100%;
}
#menu ul, #menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}
#menu ul {
  position: relative;
  display: inline;
  float: right;
  margin-top: 25px;
  padding-right:30px;
}
#menu li {
  margin: 0px 10px;
  float: left;
  display: inline;
  position: relative;
}
#menu a {
  display: block;
  line-height: 50px;
  padding: 10px 14px;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 1.75em;
  text-shadow: -1px 1px 10px #000000, 1px -1px 10px #000000;
  font-weight: bold;
}
#menu a.dropdown-arrow:after {
  content: "\25BE";
  margin-left: 5px;
}
#menu li a:hover {
  text-shadow: -1px 1px 10px #c57105, 1px -1px 10px #c57105;
}
#menu input {
  display: none;
  margin-top: 30px;
  margin-left: 30px;
  padding: 0;
  height: 50px;
  width: 150px;
  opacity: 0;
  cursor: pointer
}
#menu label {
  font-size: 150px;
  display: none;
  margin-top: 30px;
  margin-left: 35px;
  line-height: 50px;
  text-align: center;
  position: absolute;
}
#menu label:before {
  content: "\2261"; 
  margin-left: 20px;
}
#menu ul.sub-menus{
  height: auto;
  overflow: hidden;
  width: 170px;
  background: #00056b;
  position: absolute;
  z-index: 99;
  display: none;
}
#menu ul.sub-menus li {
  display: block;
  width: 100%;
}
#menu ul.sub-menus a {
  color: #000000;
  font-size: 1.6em;
}
#menu li:hover ul.sub-menus {
  display: block
}
#menu ul.sub-menus a:hover{
  background: #edeef7;
  color: #000000;
}

/* Cookies and Privacy Compliance */
#cookie-box {
  font-size: 1.0em;
  background-color: #000;
  z-index: 5;
  right: 10px;
  bottom: 10px;
  width: 350px;
  position: fixed;
  padding: 20px;
}
#cookie-btn {
  width: 100px;
  margin: 0 auto;
  font-size: 1.75em;
  font-weight: bold;
}

/* Lightbox with Full Image */
.imagebox {
  width:350px;
  margin:15px;
  display:inline-block;
}
.imagebox img {
  border-radius: 10px;
  box-shadow:-1px 1px 10px #4d52b3, 1px -1px 10px #4d52b3;
  width:100%;
  height:100%;
}
.imagebox img:hover {
  box-shadow:-1px 1px 10px #b3b34d, 1px -1px 10px #b3b34d;
}
.lightbox {
	display: none;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1em;
	background: rgba(0, 0, 0, 0.8);
}
.lightbox:target {
	display: block;
}
.lightbox span {
	display: block;
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* For Small Screen Scaling */
@media screen and (max-width: 1200px){
  #menu {
    position: relative;
  }
  #navlogo {
    text-align: center;
    float: none;
  }
  #navlogo a {
	margin: 0 auto;
	padding: 15px 0;
	width: 50%;
  }
  #navlogo a img {
	width: 100%;
  }
  #menu ul {
	position: absolute;
	top: 150px;
	right: 0;
	left: 0;
	z-index: 3;
	height: auto;
	display: none;
	margin: 0px;
  }
  #menu ul.sub-menus {
	width: 100%;
	position: static;
  }
  #menu ul.sub-menus a {
	padding-left: 30px;
  }
  #menu li {
    background-color:#20224C;
	display: block;
	float: none;
	width: auto;
  }
  #menu input, #menu label {
	width: 30px;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	margin-top: 30px;
  }
  #menu input {
	z-index: 4;
  }
  #menu input:checked + label {
	color: #FFF;
  }
  #menu input:checked + label:before {
	content: "\00d7";
  }
  #menu input:checked ~ ul {
	display: block;
  }
  #menu a {
	font-size: 1.5em;
  }
  .titlebox h1 {
	bottom: 0;
	display: block;
  }
  .titlebox img {
	display: block;
	margin: 10px auto;
  }
}