@font-face {
  font-display: swap;
  font-family:'wotfard';
  font-style:normal;
  font-weight:400;
  src: url('../../font/Wotfard-Regular.otf') format('opentype');
}
@font-face {
  font-display: swap;
  font-family:'wotfard';
  font-style:normal;
  font-weight:700;
  src: url('../../font/Wotfard-Bold.otf') format('opentype');
}
@font-face {
  font-display: swap;
  font-family:'bebasneue';
  font-style:normal;
  font-weight:700;
  src: url('../../font/BebasNeue-Regular.ttf') format('truetype');
}
@font-face {
  font-display: swap;
  font-family:'bebasneue';
  font-style:normal;
  font-weight:400;
  src: url('../../font/BebasNeue-Book.otf') format('opentype');
}


body {
	font-family:wotfard;
	font-weight:400;
	margin:0 auto;
	padding:0;
	max-width:1920px;
}

a {
	text-decoration:none;
}

h2, p {
	-ms-word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}


h1, h2 {
	font-family:bebasneue;
	text-transform:uppercase;
	margin:0;
}

main h1, h2 {
	color:#4b96c6;	
}

h1, strong {
	font-weight:700;
}
h2 {
	font-weight:400;
}

.h {
	padding-top:100px;
}


#nav {
	font-family:bebasneue;
	background:#043882;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:10;
	height:100px;
	display:flex;
	align-items:center;
	transition:all .3s ease;
}
#nav.scroll {
	top:-100px;
}
#nav a {
	color:#fff;
	text-transform:uppercase;
}
#nav a + a:hover{
	text-decoration:underline;
}
#nav > div a + a {
	letter-spacing:0.1em;
}
#nav > div {
	display:flex;
	justify-content:center;
    align-items:center;
	flex-basis:100%;
}
.menuico, .closeico {
	display:flex;
	align-items:center;
}
.logo{
	font-weight:700;
	margin-right:auto;
	line-height:1em;
	
}
.logo span{
	display:inline-block;
	background:#4b96c6;
	padding:0.15em 0.2em 0 0.25em;
}

main {
	padding-top:1.5em;
}
main hr {
	margin:2em 0 1.5em 0;
	background:#4b96c6;
	height:6px;
	border:none;
}
main p, main ul {
	line-height:1.5em;
}
main h2 + * {
	margin-top:0.25em;
}


.f {
	background:#4b96c6;
	margin-top:2em;
}
.f, .f a {
	color:#fff;
}
.f a:hover {
	text-decoration:underline;
}

.f > div {
	display:flex;
	align-items:flex-start;
	padding-top:2em;
	padding-bottom:2em;
}
.f > div > p {
	margin:0;
	line-height:1.5em;
	margin-right:auto;
}
.f > div > div{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}
.f > div > div > div{
	margin-bottom:1em;
	line-height:1.5em;
}
.ma {
	font-size:min(60px,6.5vw);
	white-space:nowrap;
}


@media all and (min-width: 1281px) {
	#nav > div, main, .f > div {
		max-width:1170px;
		margin:auto;
	}
	.f > div > div {
		width:800px;
	}
}
@media all and (max-width: 1280px) {
	.f > div {
		flex-direction:column;
	}
	#nav > div, main, .f > div{
		margin-left:max(12px,4.5vw);
		margin-right:max(12px,4.5vw);
	}
}
@media all and (min-width: 1001px) {
	.logo{
		font-size:50px;
	}
}
@media all and (max-width: 1001px) and (min-width: 381px){
	.logo{
		font-size:40px;
	}
}
@media all and (min-width: 901px) {
	main h1, h2 {
		font-size:68px;
	}
	body, .ma + p {
		font-size:30px;
	}
	.f > div {
		font-size:22px
	}
}
@media all and (max-width: 900px) and (min-width: 651px){
	main h1, h2 {
		font-size:52px;
	}
	body, .ma + p {
		font-size:24px;
	}
	.f > div {
		font-size:20px
	}
}
@media all and (min-width: 781px){
	#nav a + a {
		margin-left:2em;
	}
	
	.menuico, .closeico {
		display:none;
	}
}
@media all and (max-width: 780px){
	#nav a + a:not(.menuico,.closeico) {
		display:none;
	}
	#nav:target a + a:not(.menuico,.closeico) {
        display:flex;
        position:absolute;
        left:0;
        padding:0 max(12px,4.5vw);
        background:#fff;
        color:#4b96c6;
        height:2em;
        border-bottom: solid 1px #4b96c6;
        top:100px;
        margin:0;
        width:100%;
        box-sizing:border-box;
		font-size:30px;
		font-weight:700;
		justify-content:center;
		align-items:center;
    }
	#nav:target a + a + a:not(.menuico,.closeico) {
        top:calc(100px + 2em);
    }
	#nav:target a + a + a + a:not(.menuico,.closeico) {
        top:calc(100px + 4em);
    }
	#nav:target a + a + a + a + a:not(.menuico,.closeico) {
        top:calc(100px + 6em);
    }
	.closeico {
		display:none;
	}
	#nav:target .closeico {
		display:flex;
	}
	#nav:target .menuico {
		display:none;
	}
}

@media all and (max-width: 650px){
	main h1, h2 {
		font-size:40px;
	}
	body, .ma + p {
		font-size:20px;
	}
}
@media all and (max-width: 380px){
	.logo {
		font-size:34px;
	}
}