/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*VARIABLES*/
:root{
  --blue: #003c6c;
	--richblue: #0075d2;
	--cornflowerblue: #47a9f5;
	--powerblue: #67e4ff;
  --lightblue: #aedbfa;
	--midblue: #387fb1;
  --white: #fff;
	--vlightgrey: #e9e9e9;
	--lightgrey: #ccc;
	--midgrey: #9d9d9d;
	--grey: #888;
	--textgrey: #404040;
  --darkgrey: #2b2b2b;
	--vdarkgrey: #222;
  --orange: #ffa500;
	--powerorange: #ff7800;
  --fontmain: "Nunito Sans", "Arial", sans-serif;
}
a {
	cursor: pointer;
}
b {
	font-weight: bold;
}
i {
	font-style: italic;
}
body {
	overflow-x: hidden;
}
/*CSS*/
.tablet-header, .laptop-header, .pane-top, .c-b-left, .c-b-right, .pane-left, .pane-right, .tablet-footer, .laptop-footer {
	display:none;
}
.banner {
				display: flex;
				box-sizing: border-box;
				max-height: 100px;
				width: 100vw;
				padding-left: 7px;
				color: var(--white);
				background-color: #d33838;
				font-family: var(--fontmain);
				font-size: 18px;
				justify-content: space-between;
				align-items: center;
				transition: max-height .5s;
				-o-transition: max-height .5s;
				-ms-transition: max-height .5s;
				-moz-transition: max-height .5s;
				-webkit-transition: max-height .5s;
			}
			.banner-text {
				padding: 5px;
				margin: 1.5px 0;
				line-height: 1.2;
			}
			.banner a {
				text-decoration: none;
				color: var(--white);
			}
			.banner a:hover{
				text-decoration: underline;
			}
			.banner-close {
				padding: 7px 7px 3px 7px;
				margin: 0 13px -1px auto;
			}
			.banner-close:hover {
				background-color: #8d2c2c;
			}
			.banner-close img {
				height: 18px;
				width: 18px;
			}
.grid-container {
	display: grid;
	height: 100vh;
	width: 100%;
	grid-template-areas:
		'banner'
		'mobile-header'
		'main'
		'mobile-footer';
	grid-template-columns: 100%;
	grid-template-rows: max-content max-content auto max-content;
}
.mobile-header {
				grid-area: mobile-header;
				display: flex;
				align-items: center;
				background-color: var(--blue);
			}
			.title a, .title a:hover, .title a:active, .title a:visited {
				text-decoration: none;
			}
			.title img {
				display: flex;
				float: left;
				margin: 0 15px 0 0;
			}
			.title h1{
				font-family: var(--fontmain);
				font-weight: bold;
				text-decoration: none;
				color: var(--white);
				font-size: 35px;
				margin-top: 1px;
			}
			.mobile-menu-btn {
				margin-left: auto;
				margin-right: 12px;
			}
.tablet-header {
				grid-area: tablet-header;
				display: none;
				align-items: stretch;
				background-color: var(--blue);
				padding-right: 10px;
			}
			.title {
				display: inline-flex;
				margin: 10px 10px 10px 10px;
			}
			.title h1{
				font-size: 40px;
			}
			.nav {
				display: inline-flex;
				margin-left: auto;
			}
			.nav a, .nav-dropdown {
				display: inline-flex;
				position: relative;
				align-items: center;
				padding: 10px 0 4px 0;
				margin: 0 10px 0 20px;
				font-family: var(--fontmain);
				font-size: 20px;
				text-decoration: none;
				text-align: center;
				color: var(--white);
				border-bottom: solid 6px var(--blue);
			}
			.nav a:hover, .nav-dropdown:hover {
				border-bottom-color: var(--white);
			}
			.nav-dropdown-content {
				display: none;
				position: absolute;
				margin-left: -20px;
				top: 61px;
				min-width: 170px;
				flex-direction: column;
				z-index: 50;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
			}
			.nav-dropdown:hover .nav-dropdown-content,
			.nav-dropdown-content:hover {
				display: flex;
			}
			.nav-dropdown-content a {
				background-color: var(--blue);
				margin: 0;
				border: none;
				padding: 10px 20px;
				white-space: nowrap;
			}
			.nav-dropdown-content a:hover {
				background-color: var(--white);
				color: var(--blue);
			}
.laptop-header {
				grid-area: laptop-header;
				display: none;
				align-items: stretch;
				background-color: var(--blue);
			}
.pane-top {
	grid-area: pane-top;
	padding: 10px;
	background-color: var(--blue);
}
.c-b-left {
	grid-area: c-b-left;
	padding: 20px;
	background-color: var(--blue);
}
.c-b-right {
	grid-area: c-b-right;
	padding: 20px;
	background-color: var(--blue);
}
.pane-left {
	grid-area: pane-left;
	padding: 20px;
	border-right: solid 1px var(--blue);
}
.ad-portrait {
				height: 600px;
				width: 160px;
				margin: auto;
				border-top: solid 1px var(--lightgrey);
				border-bottom: solid 1px var(--lightgrey);
				background-color: var(--white);
			}
			.ad-text {
				padding: 3px 0;
				font-size: 12px;
				letter-spacing: 1px;
				font-family: var(--fontmain);
				text-align: center;
				color: var(--darkgrey);
			}
.pane-right {
	grid-area: pane-right;
	padding: 20px;
	border-left: solid 1px var(--blue);
}
.main {
	grid-area: main;
}
[class$="-footer"] {
	background-color: var(--blue);
	color: var(--white);
	font-family: var(--fontmain);
	display: flex;
	justify-content: center;
}
.footer-item {
	margin: 0 15px;
	color: var(--white);
	text-decoration: none;
	text-align: center;
}
a.footer-item:hover {
	color: var(--orange);
}
.mobile-footer {
	grid-area: mobile-footer;
	padding: 10px;
}
.tablet-footer {
	grid-area: tablet-footer;
	padding: 10px;
}
.laptop-footer {
	grid-area: laptop-footer;
	padding: 10px;
}
.mobile-menu {
				position: absolute;
				overflow: hidden;
				z-index: 61;
				display: flex;
				top: 0;
				right: 0;
				height: 100vh;
				width: 0;
				background-color: var(--midgrey);
				flex-direction: column;
				transition: width .5s;
				-o-transition: width .5s;
				-ms-transition: width .5s;
				-moz-transition: width .5s;
				-webkit-transition: width .5s;
			}
			.mobile-menu-container {
				display: flex;
				flex-direction: column;
				border-left: solid 6px var(--blue);
				height: 100%
			}
			.mobile-menu-back {
				z-index: 60;
				position: fixed;
				top: 0;
				left: 0;
				height: 100vh;
				width: 0;
				background-color: rgba(100,100,100,.75);
			}
			.mobile-menu-title {
				display: flex;
				font-family: var(--fontmain);
				font-size: 20px;
				font-weight: bold;
				letter-spacing: 0.1em;
				color: var(--white);
				height: 60px;
				padding-left: 20px;
				align-items: center;
			}
			.mobile-menu-close-btn {
				display: flex;
				margin-left: auto;
				padding: 17px;
				align-items: center;
			}
			.mobile-menu-option {
				display: flex;
				align-items: center;
				padding: 15px 20px;
				font-family: var(--fontmain);
				font-size: 20px;
				text-decoration: none;
			}
			.mmo-top img {
				height: 20px;
				margin-right: 20px;
			}
			.mmo-top .arrow {
				width: 18px;
				height: auto;
				margin-left: 15px;
				transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transition: transform .5s;
        -o-transition: transform .5s;
        -ms-transition: transform .5s;
        -moz-transition: transform .5s;
        -webkit-transition: transform .5s;
			}
			.mmo-top {
				background-color: var(--blue);
				color: var(--white);
				border-top: solid 3px var(--white);
			}
			.mmo-top:last-of-type {
				border-bottom: solid 3px var(--white);
			}
			.mmo-container {
				overflow: hidden;
				display: flex;
				flex-direction: column;
				height: 0;
				transition: height .5s;
				-o-transition: height .5s;
				-ms-transition: height .5s;
				-moz-transition: height .5s;
				-webkit-transition: height .5s;
			}
			.mmo-btm {
				background-color: var(--white);
				color: var(--blue);
				padding: 8px 20px 8px 40px;
			}
			.mmo-btm:first-child {
				padding-top: 15px;
			}
			.mmo-btm:last-child {
				padding-bottom: 15px;
			}
			.mmo-btm:hover {
				background-color: var(--blue);
				color: var(--white);
			}
			.mobile-menu-bottom {
				display: flex;
				flex-direction: column;
				margin: auto 0 0 50px;
				padding-right: 70px;
				align-items: center;
				overflow: hidden;
			}
			.mobile-menu-bottom-item {
				text-align: center;
				padding: 8px;
				color: var(--white);
				font-size: 17px;
				text-decoration: none;
				font-size: 18px;
				white-space: nowrap;
			}
.cookie-block {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 200;
}
.cookie-screen {
	height: 100%;
	width: 100%;
	background-color: rgba(100,100,100,.75);
	backdrop-filter: blur(5px);
}
.cookie-square-holder {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
}
.cookie-square {
	position: relative;
	background-color: var(--white);
	border: solid 2px var(--blue);
	border-radius: 2px;
	margin: 40px 20px;
	color: var(--blue);
	width: max-content;
	font-family: var(--fontmain);
	padding: 20px;
	font-size: 20px;
}
.cookie-square p {
	margin-bottom: 20px;
	font-size: 18px;
}
.cookie-btns {
	display: flex;
	column-gap: 10px;
	row-gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
.cookie-btn {
	height: max-content;
	display: inline;
	padding: 10px;
	min-width: 200px;
	text-align: center;
	background-color: var(--white);
	border: solid 2px var(--blue);
	border-radius: 2px;
	color: var(--blue);
	text-decoration: none;
	font-weight: bold;
}
#cookie-agree {
	background-color: var(--blue);
	color: var(--white);
	font-weight: normal;
	cursor: pointer;
}
.tablet-header, .laptop-header, .pane-top, .c-b-left, .c-b-right, .pane-left, .pane-right, .tablet-footer, .laptop-footer {
	display:none;
}
/*TABLET*/
@media only screen and (min-width: 760px){
.grid-container {
	grid-template-areas:
		'banner'
		'tablet-header'
		'main'
		'tablet-footer';
	grid-template-columns: 100vw;
	grid-template-rows: max-content max-content auto max-content;
}
.mobile-header, .laptop-header, .pane-top, .c-b-left, .c-b-right, .pane-left, .pane-right, .mobile-footer, .laptop-footer {
	display:none;
}
.tablet-header, .tablet-footer {
	display:flex;
}
}
/*LAPTOP*/
@media only screen and (min-width: 1100px){
.grid-container {
	--pane-width: 200px;
	grid-template-areas:
		'banner banner banner'
		'c-b-left laptop-header c-b-right'
		'pane-left main pane-right'
		'laptop-footer laptop-footer laptop-footer';
	grid-template-columns: var(--pane-width) auto var(--pane-width);
	grid-template-rows: max-content max-content auto max-content;
}
.mobile-header, .tablet-header, .mobile-footer, .tablet-footer {
	display:none;
}
.pane-top, .c-b-left, .c-b-right, .pane-left, .pane-right {
	display: block;
}
.laptop-header, .laptop-footer {
	display: flex;
}
.banner {
	padding: 0 var(--pane-width);
}
}