/*
Project Name: Project #
Description: This project is to create ?
Author: your name
Version: 1.0
License: 

Tags: (optional)

General comments (optional)

Table of Contents in CSS
1. Global
2. Links
3. Headings
4. Header
5. Navigation
6. Middle
7. Forms
8. Extras
9. Footer
*/

/* 1. Global */
html,body  { 
  margin: 0;
  padding: 0;
  scroll-behavior:smooth;
  font-family: 'Courier Prime', monospace;
  font-family: 'Raleway', sans-serif;
  color: #0d1e4c;
  background-color: #252e55;
  line-height: 130%;
}
h1 {
	line-height: 1.2;
}
h3 {
	line-height: 1.1;
}
nav li {
	line-height: 1;
}
img { border: 0px;}
/* 2. Links */
#jump-to-nav { 
	position: absolute;
	overflow: hidden;
	left:-3px;
	width: 1px;
	height: 1px;
}
/* 3. Headings */
#disclaimer {
	position: fixed;
	top: 0px;
	left: 0px;
	height: 95%;
	width:90%;
	background: rgba(0,0,0,.8);
	z-index: 300;
	color: #fff;
	text-align: center;
	overflow-y: auto;
	display: none;
	padding: 5%;
}
/* 4. Header */

/* 5. Navigation */
#burger {
	position: fixed;
	right: 3px;
	z-index: 110;
}
#mainMenu {
	z-index: 150;
	position: fixed;
	width: 100%;
	top: 0px;
	height: 75px;
}
#mainMenu a li {
	position: relative;
	width: 100%;
	left: 0px;
	padding: 10px;
	border-bottom: 1px #ffffff solid;
	text-align: center;
	background: rgb(51,51,51);
	background: linear-gradient(312deg, rgba(51,51,51,1) 5%, rgba(184,182,45,0.15717539863325736) 15%, rgba(68,68,68,1) 21%, rgba(13,30,76,1) 100%);
}
.button {
	position: relative;
	margin: 15px auto;
	height: 50px;
	width: 30%;
	max-width: 175px;
	/*background: #000000;*/
	background: rgb(184,182,45);
	background: radial-gradient(circle, rgba(184,182,45,0.15717539863325736) 31%, rgba(68,68,68,1) 69%);
	border: solid 1px #ffffff;
	border-radius: 40%;
	z-index: 160;
}
#mainMenu a {
		color: #FFFFFF;
		text-decoration: none;
}
#logobtn {
	position: fixed;
	height: 30px;
	left: 3px;
	top: 2%;
	width: 29%;
	z-index: 155;
}
#logo {
	position: fixed;
	top: 0px;
	left: 5%;
	height: 70px;
}
#subnav {
	position: fixed;
	top: -100%;
	padding: 5px;
	width: 100%;
	background-color: #333333;
	list-style: none;
	z-index: 150;
}
#catmenu {
	position: fixed;
	top: -100%;
	padding: 5px;
	width: 100%;
	background-color: #333333;
	list-style: none;
	z-index: 150;
}
#catnav span {
	top: 14px;
	position: relative;
	left: 48%;
	
}
.ico-mglass {
  position:relative;
  display:inline-block;
  background: #fff;
  border-radius: 30px;
  height: 6px;
  width: 6px;
  border: 2px solid #888;
  
  &:after {
    content: "";
    height: 2px;
    width: 6px;
    background: #888;
    position:absolute;
    top:7px;
    left:5px;
    -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
  }
}
.choice {
	position: relative;
	margin-top: 4px;
	background: #444;
	width: 100%;
	height: 44px;
}
.choice img {
	position: absolute;
	top: 2px;
	left: 20px;
}
#research a {
	text-decoration: none;
	color: #ddd;
}
.choice div {
	display: inline-block;
	position: relative;
	left: 90px;
	top: -10px;
	width: calc(100% - 90px);
}
.choice p {
	color: #fff;
	height: 44px;
	width: 100%
}
#research {
	position: fixed;
	left: -100%;
	top:15%;
	width: 100%;
	height: 75%;
	overflow-y: auto;
	z-index: 150;
}
#topicList {
	list-style: none;
	position: relative;
	padding-inline-start: 0px;
}	
@media (max-width: 400px) {
	.choice p {
		font-size: 0.85em;
	}
}
@media (max-width: 278px) {
	.choice p {
		font-size: 0.75em;
	}
}
@media (max-width: 211px) {
	.choice p {
		font-size: 0.65em;
	}
}
#topic {
	position: fixed;
	top: 0px;
	height: 100%;
	width: 90%;
	left: -100%;
	background: #000;
	color: #fff;
	padding-left: 5%;
	padding-right: 5%;
	overflow-y: auto;
	z-index: 175;
}
.topImg {
	position: relative;
	background-repeat: no-repeat;
	background-size: auto;
	width: 100%;
	height: 40%;
	overflow: hidden;
	margin: 0;
}
.topImg img {
	height: 100%;
	width: 100%;
	object-fit: contain;
}
.topImg figcaption {
	position: absolute;
	text-align: center;
	left: 50%;
	bottom: 0px;
	transform: translate(-50%, 5%);
	margin: 0 auto;
	color: #ffffff;
	font-weight: 800;
	background-color: #333;
	padding: 6px;
	font-size: .85em;
}
.summary {
	position: relative;
}
#close {
	position: absolute;
	top: 3%;
	right: 3%;
	color: #fff;
	font-size: 2em;
	text-decoration: none;
	z-index: 100;
}
#topic a {
	color: #aaaa33;
	padding: 3px;
}
#topic a:visited {
	color: #b8b62d;
}
#topic a:hover {
	color: #ffff00;
}
.ref {
	padding-top: 5%;
}
.vacate {
	display:none;
}
.links {
	padding-top: 5%;
	padding-bottom: 15%;
}
#header {
	position: fixed;
	text-align: center;
	width: 100%;
	top: 5px;
	height: 40px;
	color: #ee4437;
	background: #252e55;
	z-index: 100;
}
#header h1 {
	position: relative;
	top:20px;
}
section {
	position: relative;
	margin: 20px auto;
	width: 85%;
	color: #fff;
	z-index: 50;
	padding-top: 25px;
}
section h1 {
	position: relative;
	text-align: center;
}
section a {
	color: #aaaa33;
	padding: 3px;
}
section a:visited {
	color: #b8b62d;
}
section a:hover {
	color: #ffff00;
}
section p {
	text-align: center;
}
#indexSection {
	margin: 70px auto;
}
/* 6. Middle */

/* Main Parts */
#main {
	width: 100%;
	height: 100%;
}
@media (min-width:632px) { /* big landscape tablets, laptops, and desktops */ 
	section {
		max-width: 500px;
	}
	#topic h1, #topic h3, #disclaimer p{
		position: relative;
		margin: 10px auto;
		max-width: 500px;
	}
	.topImg figcaption {
		position: absolute;
		max-width: 450px;
		text-align: center;
		left: 50%;
		bottom: 0px;
		transform: translate(-50%, 5%);
		margin: 0 auto;
	}
	#subnav {
		top: 0px;
		background-color: rgba(0,0,0,0);
	}
	#subnav a {
		display: inline-block;
		position: relative;
		width: 110px;
		float: right;
		right: 10px;
	}

	#subnav .self {
		display: none;
	}
	#burger {
		display: none;
	}
	.button {
		margin: 15px 150px;
	}
	#header {
		left: -140px;
	}
}
/* Part 1 */

/* Part 2 */

/* Part 3 */

/* 7. Forms */
#contact {
	position: relative;
	left: 3%;
	width: 100%;
	height: auto;
}
/* 8. Extras */

/* 9. Footer */
footer {
	position: fixed;
	height:20px;
	width: 100%;
	bottom: 0px;
	background-color: #ee4437;
	z-index: 150;
}
#discBtn {
	position: relative;
	left: 15px;
	color: #fff;
	text-decoration: none;
	font-weight: 800;
}