:root {
	--darkblue:#060a10;
	--bgblue:#181e29;
	--blue:#2c3f5e;
	/* --lblue:#32548b; */
	--green:#4aa44b;
	--lblue:#5379b5;
	--beige:#f5e6b4;
	--darkred:#4f1414;
	--red:#891818;;

	--global-padding-top:2em;
	--global-padding-sides:5em;
	--global-padding-bottom:5em;

	--menu-width:350px;
}

.group:after {
  content: "";
  display: table;
  clear: both;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
	font-family:inherit;
	color:inherit;
}

img {
	display:block;
	max-width:100%;
}

.wrap {
  position:relative;
  width:calc(1300px - 2em);
  padding:0 1em;
  max-width:100%;
  margin:0 auto;
  clear:both;
}

#burger,
#mobnav {
  display:none;
}

body {
    font-size:62.5%;
	background-color:var(--bgblue);
	color:var(--beige);
	font-family: 'Outfit', sans-serif;
	font-weight:300;
}

#bgcorner {
	position:fixed;
	left:0;
	top:0;
	width:50%;
	z-index:-1;
	user-select: none;
	pointer-events: none;
}

header {
	float:left;
	clear:left;
    width:100%;
	padding-top:var(--global-padding-top);
	margin-bottom:2em;
}

	#logo {
		position: relative;
		z-index:10;
		float:left;
		width:210px;
		margin-left:var(--global-padding-sides);
		margin-top:1%;
		user-select: none;
	}

		#logo img {
			width:100%;
		}

    nav {
		float:right;
		margin-right:calc(var(--global-padding-sides) + 50px);
		position:relative;
    }
		
		nav ul {
			list-style: none;
		}
		
			nav li {
				float:left;
			}
			
				nav a {
					float:left;
					text-decoration: none;
					padding:1em 1.5em;
					font-size:1.2em;
					font-weight:200;
				}
				
					nav a:hover,
					.active{
						color:#fff;
					}

					nav a.close-menu {
						display:none;
					}

				header .btns {
					position:fixed;
					right:var(--global-padding-sides);
					top:2em;
					z-index:101;
				}

					header .btns a img {
						background-color:var(--bgblue);
						border-radius:100%;
					}

				.nav-account,
				#burger {
					position:relative;
					isolation: isolate;
					float:left;
				}

					:is(.nav-account,#burger) img {
						position:absolute;
						z-index:-1;
					}

					:is(.nav-account,#burger) input {
						position: relative;
						width:33px;
						height:35px;
						z-index:1;
						opacity:0;
						cursor: pointer;
					}

				header .btns:has(#show-account-menu:checked) ~ .account-menu {
					left:calc(100% - var(--menu-width));
				}
				header .btns:has(#burger-checkbox:checked) ~ nav {
					left:calc(100% - var(--menu-width));
				}

				#show-account-menu {
					float:left;
					width:35px;
					padding:0;
				}

					#show-account-menu img {
						height:35px;
					}

					#show-account-menu:hover ~ img,
					#burger:hover img {
						filter:brightness(5);
						background-color:unset;
					}

				.account-menu {
					position:fixed;
					top:0;
					width:var(--menu-width);
					max-width:100%;
					height:100%;
					z-index:100;
					overflow:hidden;
					background-color:var(--darkblue);
					padding:8em var(--global-padding-sides) 5em;
					left:100%;
					transition: left 0.5s cubic-bezier(.14,.7,.32,.99);
				}

					.account-menu ul,
					.account-menu li,
					.account-menu a {
						float:left;
						clear:left;
						width:100%;
						list-style: none;
					}

						.account-menu a {
							font-size:1.8em;
							text-decoration: none;
							padding:0.5em 0;
							border-bottom:1px dotted var(--blue);
						}

						.account-menu a:hover {
							background-color:var(--blue);
						}

						.account-menu a span {
							float:right;
							color:var(--blue);
						}

						.account-menu a:hover span {
							color:var(--darkblue);
						}

					.account-menu a.close-menu {
						position:absolute;
						width:35px;
						text-align:center;
						left:calc(var(--global-padding-sides) / 2 - 0.5em);
						top:0.75em;
						border:none;
						padding:0.5em;
					}

						.account-menu a.close-menu:hover {
							background-color:unset;
						}

.flex {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:row;
  flex-direction:row;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
}

.fcw {
  float:left;
  clear:left;
  width:100%;
}

h1,h2,h3,h4,h5,h6 {
	margin-bottom:1em;
	font-weight:normal;
	line-height:1.2;
}

h1 {
	font-size:4em;
	font-weight:300;
}

main p,
main li {
	font-size:1.4em;
	line-height:1.8;
	margin-bottom:1em;
	clear:left;
}

main ul,
main ol {
	margin:2em;
}

  main li {
    padding-left:1em;
  }

.align_left {
  float:left;
}

.align_right {
  float:right;
}

.align_center {
  text-align: center;
}

img.align_left {
  margin:0.5em 1em 1em 0;
}

img.align_right {
  margin:0.5em 0 1em 1em;
}

img.align_center {
  display:block;
  margin-left:auto;
  margin-right:auto;
}

input,
textarea,
label,
hr{
	float:left;
	clear:left;
	width:100%;
}

input,
textarea,
select {
	background-color:var(--darkblue);
	padding:1.5em 1em;
	font-size:1.3em;
	border:none;
	outline:none;
	border-radius:0.25em;
}

select,option {
	cursor: pointer;
}

option {
	padding:1em;
}

input[type="submit"] {
	float:left;
	clear:left;
	text-decoration: none;
	cursor: pointer;
}

.errortext {
	color:red;
}

.darkbox {
    background-color:var(--darkblue);
    padding:3em;
    border-radius:0.5em;
	max-width:100%;
}

.fullwidth {
	grid-column: 1/-1;
}

.bgbluebox {
	box-shadow:5px 0 5em var(--darkblue);
	background-color:var(--bgblue);
    padding:3em;
    border-radius:0.5em;
	max-width:100%;
}

.blue-btn {
    background-color: var(--blue);
    color: #fff;
    padding: 1em;
    text-decoration: none;
    float: left;
    clear: none;
    display: block;
    width: auto;
    margin-right: 0.5em;
    border-radius: 0.25em;
    font-size: 1.2em;
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
	text-align:center;
}

    .blue-btn:hover {
        background-color:var(--lblue);
    }

.dblue-btn {
	background-color:var(--darkblue);
	padding:1em;
	transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out;
	text-decoration: none;
	text-align: center;
}

	.dblue-btn:hover {
		background-color:var(--blue);
	}

.fade-in,
.fade-in-noscroll {
	opacity:0;
}

.fade-in.run,
.fade-in-noscroll {
	animation-name: fade-in;
	animation-duration: 0.75s;
	animation-fill-mode: forwards;
}

.fade-in:nth-of-type(6n+1){
	animation-delay: 0s;
}
.fade-in:nth-of-type(6n+2){
	animation-delay: 0.08s;
}
.fade-in:nth-of-type(6n+3){
	animation-delay: 0.16s;
}
.fade-in:nth-of-type(6n+4){
	animation-delay: 0.24s;
}
.fade-in:nth-of-type(6n+5){
	animation-delay: 0.32s;
}
.fade-in:nth-of-type(6n+6){
	animation-delay: 0.40s;
}

@keyframes fade-in {
	0% {
		transform:translateX(-15px);
		opacity:0;
	}
	100%{
		transform:translateX(0);
		opacity:100%;
	}
}

.two-col,
.three-col,
.four-col {
	display:grid;
	grid-gap:1em;
}
.two-col {
	grid-template-columns: repeat(2,1fr);
}
.three-col {
	grid-template-columns: repeat(3,1fr);
}
.four-col {
	grid-template-columns: repeat(4,1fr);
}

.small_title {
    color:#fff;
    font-size:1.1em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom:0.75em;
}
  
footer {
	float:left;
  	clear:both;
	width:100%;
	margin-top:5%;
  	padding:0 var(--global-padding-sides) var(--global-padding-bottom) var(--global-padding-sides);
}

	.copyright {
		width:100%;
		text-align: right;
		font-weight:200;
		opacity:0.4;
	}

.pager-nav,
.pager-nav ul{
	float:left;
	clear:left;
	width:100%;
	text-align: center;
	padding:0;
	margin:2.5% 0 0 0;
}

main .pager-nav ul li {
	display:inline-block;
	color:#333;
	padding:0;
	margin:0;
}

	main .pager-nav ul li a {
	float:left;
	background-color:var(--darkblue);
	padding:0.5em 1em;
	color:var(--beige);
	text-decoration: none;
	margin:0.25em;
	border-radius:0.25em;
	}
	
	main .pager-nav ul li a:hover,
	main .pager-nav ul li.active a{
		background-color:var(--blue);
	}




@media screen and (width < 850px) {
	:root {
		--global-padding-sides:2em;
	}

	#logo {
		display:block;
		float:none;
		clear:both;
		margin:2em auto 0;
		width:210px;
	}
}

@media screen and (width < 600px) {
	header {
		display:grid;
		grid-template-columns: 1fr 70px;
		grid-gap:1em;
		padding:2em var(--global-padding-sides);
		margin-bottom:0;
	}

	#logo {
		margin:0;
		grid-row:1;
		grid-column: 1;
	}

	.btns {
		float:right;
		grid-row:1;
		grid-column: 2;
	}

	#burger {
		float:left;
		display:block;
		width:35px;
	}

	nav {
		position:fixed;
		top:0;
		width:var(--menu-width);
		max-width:100%;
		height:100%;
		z-index:100;
		overflow:hidden;
		background-color:var(--darkblue);
		padding:8em var(--global-padding-sides) 5em;
		left:100%;
		transition: left 0.5s cubic-bezier(.14,.7,.32,.99);
	}

		nav.visible {
			left:calc(100% - var(--menu-width));
		}

		nav li,
		nav a {
			float:left;
			clear:left;
			width:100%;
		}

		nav a {
			padding:0.5em 0;
			font-size:1.8em;
			border-bottom:1px dotted var(--blue);
		}

		nav a.close-menu {
			display:block;
		}

		nav a.close-menu {
			position:absolute;
			width:35px;
			text-align:center;
			left:calc(var(--global-padding-sides) / 2 - 0.5em);
			top:0.75em;
			border:none;
			padding:0.5em;
		}

			nav a.close-menu:hover {
				background-color:unset;
			}

}

@media screen and (width < 500px) {
	:root {
		--global-padding-top:1em;
		--global-padding-sides:1em;
		--menu-width:100%;
	}

}