html {
  scroll-behavior: smooth;
}

body {
	--color-primary: #316aa7;
	--color-light: #6798d9;
	--color-dark: #004078;

	--color-alt-primary: #ce92e8;
	--color-alt-light: #ffc3ff;
	--color-alt-dark: #9c63b5;

	--color-text: black;


	/* background-color: var(--color-dark); */
	color: var(--color-text);

	margin: 0px;
	padding: 0px;

	font-family: Montserrat, sans-serif;
}

a.anchor {
	color: inherit;
	text-decoration: inherit;
}
a.anchor::before {
	content: "";
	display: block;
	height: 54px; /* fixed header height*/
	margin: -54px 0 0; /* negative fixed header height */
}


.header-filler {
	position: relative;
	left: 0px;
	right: 0px;

	height: 46px;
}


.header {
	display: grid;
	grid-template-columns: auto 1fr auto;

	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 46px;

	background-color: var(--color-primary);
	color: white;

	padding: 0px 5%;

	transition-property: box-shadow, background-color, backdrop-filter;
	transition-duration: 0.5s, 0.5s, 0.5s;
}
.header[fixed=true] {
	position: fixed;

	background-color: rgba(49, 106, 167, 0.8);
	backdrop-filter: blur(1px);

	box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 2px;
	transition: top 0.3s;
}
.header[fixed=true]:hover {
	background-color: rgba(49, 106, 167, 0.9);
	backdrop-filter: blur(5px);
}

@media only screen and (max-height: 900px) {
	.header[hide=true] {
		top: -46px;
	}
}

.header div {
	height: 46px;

	transition-property: background-color, box-shadow;
	transition-duration: 0.2s, 0.2s;
	/* transition-timing-function: ease-in-out, ease-in-out; */
}

.header div div:hover {
	background-color: var(--color-light);
	box-shadow: rgba(0,0,0,0.2) 0px 0px 5px 2px;
}

.header div div {
	display: inline-block;
	margin: 0px;
	padding: 0px;
}


.header .center {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}
.header .center div {
	padding-top: 11px;
	margin: 0px;

	height: 36px;
	width: 100%;

	text-align: center;

	font-family: "Hiragino Kaku Gothic Pro","Helvetica Neue",Helvetica,"Source Sans Pro","Liberation Sans",sans-serif;
	font-size: 20px;
	font-weight: 700;

	cursor: pointer;
}
.header .center a {
	text-decoration: inherit;
	color: inherit;
}



.header .right img {
	max-height: 46px;
}

.header .right .ani-syd:hover {
	background-color: #a11d21;
}




.wrapper {
	margin: auto;
}
@media only screen and (min-width: 2000px) {
	.wrapper {
		max-width: 1500px;
	}
}




.image-swapper {
	position: relative;
}
.image-swapper * {
	transition-property: opacity;
	transition-duration: 1s;

	/* transition-timing-function: ease-in-out; */
}
.image-swapper .hover {
	position: absolute;
	left: 0px;

	opacity: 0%;
}

.image-swapper:hover .default {
	opacity: 0%;

	transition-duration: 0.2s;
}
.image-swapper:hover .hover {
	opacity: 100%;

	transition-duration: 0.2s;
}




.button {
	display: inline-block;
	padding: 10px 20px;

	border-color: var(--color-primary);
	border-width: 2px;
	border-radius: 20px;
	border-style: solid;

	/* background-color: var(--color-primary); */

	text-decoration: inherit;
	font-weight: 700;
	color: var(--color-primary);

	transition-property: background-color, box-shadow;
	transition-duration: 0.2s, 0.2s;
}
.button:hover {
	/* background-color: #eaf4ff; */
	box-shadow: rgba(139, 148, 156, 0.15) 0px 0px 10px 3px;
}
.button:focus {
	background-color: #eaf4ff;
}





@media only screen and (max-width: 900px) {
	.header {
		padding: 0px 5px;
	}
}

@media only screen and (max-width: 700px) {
	.header {
		grid-template-columns: 1fr auto;
	}

	.header .left {
		display: none;
	}

	.small-center {
		text-align: center;
	}
}

@media only screen and (max-width: 600px) {
	.header {
		grid-template-columns: 1fr;
	}

	.header .right {
		display: none;
	}
}

@media only screen and (max-width: 500px) {
	.header {
		height: auto;
	}
	
	.header-filler {
		height: auto;
	}	

	.header .center {
		grid-template-columns: 1fr;

		height: auto;
	}
}




.footer {
	position: relative;
	left: 0px;
	right: 0px;

	background-color: var(--color-primary);
	height: 160px;

	padding-top: 60px;

	text-align: center;
	font-size: 13px;
	color: white;
}