@keyframes fade-in {
	0% { opacity: 0; }
	to { opacity: 1; }
}
@keyframes pop-in {
	0% {
		opacity: 0;
		transform: translateZ(0) translateY(-.5em);
	}
	to {
		opacity: 1;
		transform: translateZ(0) translateX(0);
	}
}
::-webkit-scrollbar{
	background: white;
	box-shadow: inset 0 0 8px #bdbde5;
	outline: 1px solid rgb(65 65 93 / 20%);
}
::-webkit-scrollbar-thumb{
	background: #41415d;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 2px;
	box-shadow: 0px 0 2px 0 #9090ad, 0 0 100vh 20px #002040;
}

html {
	scroll-behavior: smooth;
}
html, body{
	height: 100%;
}
body {
	margin: 0;
	font-size: 18px;
	display: flex;
	flex-direction: column;
	overflow-y: scroll;
	color: #4a4a55;
	font-weight: 400;
	letter-spacing: .0125em;
	line-height: 1.325;
}
body, button, input, select, textarea {
	font-size: clamp(14px, 4.5vw, 18px);
}
body, button, select, label {
	font-family: 'Red Hat Display', sans-serif;
}
h1, h2{
	color: #03a4aa;
	font-size: 1.5em;
	font-weight: 500;
	letter-spacing: .0125em;
}
h3{
	color: #00767a;
	font-weight: 500;
}
.form-backdrop h1,
.form-backdrop h2{
	color: #009499;
}
input[type=text],
input[type=email],
textarea {
	font-family: sans-serif;
}
button,
input,
select,
textarea {
	font-size: 1em;
}
main input,
main select,
main textarea{
	background-color: white;
}
.toplinks{
	background: #f9f9ff;
	text-align: right;
	padding: 3px;
}
.toplinks>.container{
	min-height: 1em;
}
header {
	background: black;
	padding: .5em .25em;
	background: linear-gradient(to right, #48c1c5, #7e3f98);
}
header,
.nav-content{
	user-select: none;
}
header a,
footer a {
	color: white;
	text-decoration: none;
}
.container{
	margin: 0 auto;
}
header .container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
}
button{
	cursor: pointer;
}
.footer {
	flex-shrink: 0;
}
[tabindex="-1"] {
	outline: none;
}
[hidden] {
	display: none;
}
.clear{
	clear: both;
}	
.brand,
.login,
.search{
	align-items: center;
	display: flex;
}
.brand,
.login, 
.search {
	padding: .25em;
}
.brand{
	height: 100%;
	flex: 1 0 auto;
}
.brand a{
	display: inline-block;
	position: relative;
	padding: .5em;
	vertical-align: middle;
	display: flex;
}
.login{
	text-align: right;
}
.login a{
	padding: .5em;
	display: flex;
}
.brand svg {
	display: block;
	margin-top: 1px;
}
.login svg,
.login span{
	vertical-align: middle;
}
.login svg{
	width: 1.25em;
	height: 1.25em;
	margin-right: .25em;
}
.search form {
	position: relative;
	text-align: right;
	width: 100%;
}
.search input,
.search button {
	box-sizing: border-box;
	border-radius: 3em;
	margin: 0;
	transition: all .1s ease-out;
}
.search input{
	width: 100%;
	color: rgb(0, 24, 48);
	background: white;
	position: relative;
	border: 2px solid white;
	padding: .55em 2.5em .45em .75em;
}
.search-button-label,
.search label,
.search button {
	position: absolute;
}
.search-button-label,
.search label {
	bottom: 200%;
}
.search button {
	top: 0;
	right: 0;
	bottom: 0;
	white-space: nowrap;
	background: rgba(0, 24, 48, .8);
	background: #2da0a4;
	border: 2px solid white;
	padding: .5em;
	cursor: pointer;
}
.search svg {
	width: 1em;
	height: 1em;
	position: relative;
	display: block;
	stroke: white;
	margin: 0 2px;
}
.search input:not(
	:focus,
	.not-empty input
	) {
	cursor: pointer;
	width: 0;
	padding-right: 1.5em;
	background: rgba(255,255,255,0);
	z-index: 1;
	border-color: rgba(255,255,255,0);
}
.search input:not(:focus, .not-empty input) + button {
	background: rgba(0, 24, 48, 0);
	border-color: rgba(255,255,255,0);
}
.search.not-empty button:hover{
	background: rgba(0, 24, 48, .8);
}
.search form input:hover {
	border-color: white;
}
.search input{
	outline: 0;
}
nav.menu ul{
	padding:0;
	margin:0;
}
.nav-content{
	background: #f9f9ff;
	padding: .25em .125em;
	border-bottom: 1px solid #e5e5ff;
}
nav.menu li{
	list-style: none;
}
nav.menu ul {
	animation: pop-in .1s ease-out;
}
nav.menu>ul>li>a,
nav.menu>ul>li>button{
	border: 1px solid #f9f9ff;
	border-radius: 3px;
}
nav.menu li button:after,
nav.menu li[tabindex]>a:after {
	content: "";
	float: right;
	display: inline-block;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='5,9 12,16 19,9'/%3E%3C/svg%3E");
	width: 24px;
	height: 24px;
	padding: 0;
}
.nav-content {
	white-space: nowrap;
	position: relative;
}
.menu-button {
	background: none;
	border: 1px solid #93a5a5;
	border-radius: 3px;
	position: relative;
}
.menu-button span {
	display: block;
	background: #386666;
	width: 14px;
	height: 2px;
	margin: 2px 0;
	transition: transform ease-out .1s;
}
.menu-button[aria-expanded=true] span:first-child {
	transform: translateY(4px);
}
.menu-button[aria-expanded=true] span:last-child {
	transform: translateY(-4px);
}
nav.menu .selected a{
	color: #808c98;
}
nav.menu li li.selected{
	border-left: .25em solid #2bb1b6;
}
nav.menu li li.selected a{
	font-weight: 500;
}
main {
	flex: 1;
}
.languages li{
	list-style: none;
}
footer {
	padding: .75em 0 1em;
	background: #41415d;
	/*background: #5b5b76;*/
}
footer .languages{
	/*background: #41415d;
	padding: 0 .75em;*/
	text-align: center;
}
footer .languages ul{
	margin: 0;
}
footer .languages li{
	display: inline-block;
	padding: 0;
}
footer .languages a{
	color: white;
}
.languages a {
	display: block;
}
.language-selector a,
.language-selector button{
	padding: .75em;
	display: block;
}
.bottom-links{
	/*padding: .5em 0;
	background: #5b5b76;*/
	text-align: center;
}
.bottom-links a{
	display: inline-block;
	padding: .5em;
}
.language-selector{
	position: relative;
	display: inline-block;
	z-index: 9999;
	border-radius: 4px;
	text-align: left;
}
.language-selector li{
	display: block;
	padding:0;
}
.language-selector a{
	text-decoration: none;
	color: #4e6173;
}
.language-selector a.button{
	display: flex;
}
.language-selector svg{
	position: relative;
	vertical-align: middle;
	width: 18px;
	height: 18px;
	margin-right: .25em;
}
nav.menu button{
	font-weight: 500;
}
nav.menu ul button[aria-expanded=true]{
	background: #ebebff;
	color: black;
}
.language-selector span{
	vertical-align: middle;
}
.language-selector a.button,
.language-selector button{
	text-decoration: none;
	color: black;
	padding: .75em .625em;
	display: inline-block;
	border: 1px solid #f9f9ff;
	border-radius: 3px;
	margin-bottom: -1px;
}
.language-selector button{
	background: none;
}
.language-selector li{
	display:block;
}
.language-selector ul{
	text-align: left;
	margin:0;
	position: absolute;
	right: 0;
	background: white;
	border: 1px solid #e0e0ff;
	box-shadow: 2px 2px 5px rgba(0,96,192,.19);
	border-radius: 3px 0 3px 3px;
	animation: pop-in .1s ease-out;
}
.brands a img {
	/*opacity: 0.62;*/
	/*filter: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg\'%3e%3cfilter id='grayscale'%3e%3cfeColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/%3e%23grayscale");*/
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");*/
	/*filter: grayscale(100%);*/
	/*filter:brightness(80%) sepia(100%)  hue-rotate(190deg) saturate(150%);*/
	/*transition: all .2s ease-out;*/
}
.addresses{
	text-align: center;
	padding: 1.5em 0;
	background: #f9f9ff;
	border-top: 1px solid #ebebff;
	color: #41415d;
}
.addresses h2{
	margin: 0 0 .25em;
	font-weight: 500;
	font-family: lexend;
	font-size: 1.5em;
	color: #7d7da6;
}
.address{
	display: inline-flex;
	align-items: center;
	padding: .5em;
}
.address p{
	margin: .25em 0;
}
.address svg{
	margin-right: .25em;
}
.address img{
	display: block;
	width: 150px;
}
img{
	animation: fade-in .2s ease-out;
}
.img, .addresses address{
	display: inline-block;
	vertical-align: bottom;
	text-align: left;
	padding: 0 .25em;
}
.intranet{
	text-align: left;
	font-weight: 500;
	letter-spacing: .05em;
	font-size: 14px;
	font-family: lexend;
	color: #859db2;
}
.intranet li,
.intranet ul{
	margin: 0;
	padding: 0;
}
.intranet a{
	text-decoration: none;
	padding: .5em .625em .4em;
	display: inline-block;
	color: #607180;
}
.brands{
	text-align: center;
	padding: 2em 1em;
}
.brands h2{
	font-weight: 500;
	font-family: lexend;
	color: #8282a1;
	margin: .5em 0;
}
.brands a{
	padding: .5em .75em;
	margin: .25em .5em;
	display: inline-block;
	box-sizing: border-box;
	vertical-align: bottom;
}
.brands a:hover img{
	/*transform: scale(1.05,1.05);*/
}
.brands img{
	vertical-align: bottom;
	transition: transform .1s ease-out;
}
.DrayTek-brand img {
	height: 2.5em;
}
.ACTi-brand img {
	height: 2.75em;
}
.DINTEK-brand img {
	height: 2.75em;
	opacity: 0.94;
}
.brands .KEDACOM-brand{
	padding: 1em .75em;
}
.KEDACOM-brand img{
	height: 1.625em;
}
.brands a:hover img,
.brands a:focus img {
	opacity: 1;
	filter: none;
	/*filter: grayscale(0%);*/
} 
address{
	font-style: normal;
}
.address a{
	color: #4e6173;
}
.home-banner{
	height: 600px;
	overflow: hidden;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	color: white;
	font-family: lexend;
	max-height: 62vw;
	background-color: #41415d;
	background-position: 50% 50%;
	background-size: cover;
}
.banner h1{
	font-weight: normal;
}
.jumpmenu{
	text-align: left;
}
.jumpmenu a{
	background: #41415d;
	color: white;
	padding: .75em 2em;
	top: 1.5em;
	margin-left: .5em;
	display: inline-block;
	text-decoration: none;
	position: absolute;
	z-index: 101;
	transform: translateY(-200%) translateZ(0);
	transition: all .1s ease-out;
}
.jumpmenu a:focus{
	transform: translateY(0) translateZ(0);
	box-shadow: 0 0 9999px 9999px rgba(255,255,255,.6);
}
.home-news{
	padding: 3em .75em;
	text-align: center;
	background-color: #41415d;
	background-position: 50% 50%;
	background-size:cover;
}
.home-news .button{
	border: 1px solid #C4D0DF;
	background: #F9F9FF;
	color: #646473;
	padding: .75em 1.5em;
	display: inline-block;
	text-decoration: none;
	border-radius: 2em;
	box-shadow: 0 2px 5px rgba(0,96,192,.19);
}
.news-backdrop{
	background: #f9f9ffcc;
	border: 1px solid #EBEBFF;
	border-radius: 6px;
	box-shadow: 0 2px 5px rgba(0,96,192,.19);
	margin: 0 auto;
	display: inline-block;
}
.news-list{
	list-style: none;
	padding: .75em 1.5em;
	max-width: 24em;
	margin:0;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
}
.home-news h2{
	color: white;
	text-shadow: 0 2px 5px rgba(0, 96, 192, .6);
	font-family: lexend;
	letter-spacing: .05em;
	font-size: 1.75em;
	font-weight: 500;
	margin: 0;
	margin-bottom: .5em;
}
.home-news .news-item{
	box-sizing: border-box;
	padding: .75em;
	border-radius: 5px;
	font-weight: normal;
	text-decoration: none;
	height: 100%;
	width: 33.33333333%;
	min-width: 16em;
}
.news-list a{
	background: #F9F9FF;
	border: 1px solid #C4D0DF;
	padding: 1.5em .75em;
	display: block;
	color: #646473;
	text-decoration: none;
	height: 100%;
	min-height: 100%;
	border-radius: 5px;
}
.home-news .news-image{
	border: 1px solid #D7E0EA;
	padding: .5em;
	display: inline-block;
	margin-bottom:.75em;
}
.home-news .news-image img{
	width: 120px;
	height: 120px;
	display: block;
	background: #ffffff66;
}
.home-news .news-date{
	background: #f0f0ff;
	color: #646473;
	border: 1px solid #D7E0EA;
	display: inline-block;
	padding: .25em .75em;
	border-radius: 1em;
	margin-bottom: .5em;
}
.more-news{
	margin-bottom: -1em;
	text-align: center;
}
.home-news .news-title{
	display: inline-block;
	min-height: 2.5em;
	font-weight: 500;
	letter-spacing: .0325em;
}
.about{
	flex: 1 0 auto;
}
.about article{
	padding: 3em 1.5em;
	margin: 0 auto;
	max-width: 43em;
}
main img{
	animation: fade-in .1s ease-out; 
}
address strong,
address b{
	font-weight: 500;
	letter-spacing: .025em;
}
nav.menu ul,
.languages ul{
	padding: 0;
}
#languages a{
	padding: .5em .5em;
}
.brand-column{
	max-width: 30em;
	display: inline-block;
}
header .container{
	display: flex;
}
.right {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}
.brand{
	max-width: calc(50% - 32px)
}
.search{
	order: 2;
	overflow: hidden;
}
.login{
	order: 1;
	text-align: right;
}
.nav-content{
	padding: .25em .75em;
}
.menu-button {
	display: initial;
	padding: 1em;
}
.language-selector{
	float: right;
}
.nav-content a{
	text-decoration: none;
}
nav.menu>ul{
	border: 1px solid #E0E0FF;
	border-top: 1px solid white;
	max-width: 15em;
	z-index: 100;
	left: 0;
	right: 0;
	top: 100%;
	background: #f9f9ff;
	padding: 1em 1.5em;
	box-shadow: 2px 2px 5px rgba(0, 96, 192, .19);
	animation: pop-in .1s ease-out;
}
.language-selector a,
.language-selector button,
nav.menu li a,
nav.menu li button{
	padding: .75em 1em;
	display: block;
}
nav.menu li button,
.language-selector button{
	text-align: left;
	width: 100%;
}
nav.menu li[tabindex]:not(:focus)>a {
	pointer-events: none;
}
nav.menu li[tabindex]:focus>a{
	pointer-events: auto;
}
nav.menu li[tabindex]:not(:focus-within) ul{
	display: none;
}
nav.menu li[tabindex]:focus-within ul{
	display: block;
	background: white;
}
nav.menu li[tabindex]:focus-within>a{
	background-color: #ebebff;
}
nav.menu li button[aria-expanded=true]+ul{
	background:white;
}
.nav-content abbr{
	text-decoration: none;
}
.menu-button,
.language-selector a,
.language-selector button{
	border-radius: 3px;
}
nav.menu>ul>li>a,
nav.menu li button{
	color: #4e6173;
	font-weight: 500;
}
.language-selector a,
.language-selector button,
nav.menu li ul a{
	color: #4e6173;
}
.menu-button,
nav.menu li button,
.language-selector button{
	background: none;
	border: 1px solid transparent;
}
nav.menu li[tabindex]>a:after,
nav.menu li button:after{
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='5,9 12,16 19,9'/%3E%3C/svg%3E");
}
.language-selector>a:focus,
.language-selector>a:hover,
.language-selector button:focus,
.language-selector button:hover,
.language-selector button[aria-expanded=true]{
	background: white;
	border: 1px solid #e0e0ff;
}
.language-selector button:after{
	content: "";
	display: inline-block;
	width: 14px;
	height: 8px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='8px' viewBox='0 0 14 8'%3E%3Cpolyline fill='none' stroke='%234e6173' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='2,1.5 7,6.5 12,1.5'/%3E%3C/svg%3E%0A");
}
nav.menu li button,
.language-selector button{
	position: relative;
	z-index: 2;
}
nav.menu li button[aria-expanded=true],
.language-selector button[aria-expanded=true]{
	border-bottom-color: white;
}
.nav-content button:after{
	transition: transform .1s ease-out;
}
nav.menu li button[aria-expanded=true]:after,
.language-selector button[aria-expanded=true]:after{
	transform: rotate(180deg);
}
nav.menu li ul,
.language-selector ul{
	background: white;
}
nav.menu li,
.language-selector{
	position: relative;
}
nav.menu>button[aria-expanded=true]+ul,
.language-selector ul{
	position: absolute;
	border: 1px solid #e0e0ff;
	border-radius: 3px 0 3px 3px;
	text-align: left;
	box-shadow: 2px 2px 5px rgba(0,96,192,.19);
}
.language-selector ul{
	padding:.75em .325em;
	right: 0;
	background: white;
	min-width: 110%;
}
section#languages{
	padding: .125em 0;
}
nav.menu li{
	border-top: 1px solid #e0e0ff;
}
/*FORMS*/
.form-backdrop{
	background: #F9F9FF;
	border: 1px solid #eaeafa;
	padding: 1em 0 1em;
	margin: 0 auto;
}
.form-backdrop a{
	color: #00767a;
}
main button:active{
	transform: translateY(2px);
}
main form h1,
main form h2,
main form h3,
main form h4{
	font-weight: 500;
	letter-spacing: .0125em;
	margin-top: 2em;
	border-left: .25em solid #2da0a4;
	padding-left: .625em;
}
main select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24px' height='24px' viewBox='0 0 24 24'%3E%3Cpolyline fill='none' stroke='%23444' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='5,9 12,16 19,9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - .625em) 50%;
}
main input[type=text],
main input[type=email],
main input[type=file],
main textarea,
main select{
	display: block;
	width: 100%;
	padding: .75em;
	box-sizing: border-box;
	margin-bottom: .75em;
	border-color: #d6d6f5;
	border-radius: 3px;
}
main input[type=text],
main input[type=email],
main textarea,
main select{
	padding: .75em;
	border-width: 1px;
	border-style: solid;
}
main form button{
	padding: .75em 1.5em;
	background: #2da0a4;
	border: 0;
	color: white;
	border-radius: 3px;
	margin-top: .5em;
}
main form button[disabled]{
	background: #41415d;
}
main input[type=file]{
	border-width: 1px;
	border-style: solid;
	background: white;
	border-color: #c1c1f0;
}
main input.has-drag-n-drop{
	border-style: dashed;
	padding: 1.5em .75em;
}
main input[type=file]::file-selector-button{
	padding: .5em 1em;
	background: #f9f9ff;
	border: 1px solid #c1c1f0;
	border-radius: 3px;
	margin: .25em .5em .25em 0;
}
main input[type=checkbox],
main input[type=radio]{
	width: 1px;
	height: 1px;
	margin:0;
	border:0;
	margin-right: -.25em;
	clip: rect(0,0,0,0);
	outline:0;
	position: absolute;
	z-index: -1;
}
main input ~ label:before{
	background: white;
}
main input[type=radio] ~ label:before{
	border-radius: 50%;
}
main input[type=radio] ~ label,
main input[type=checkbox] ~ label{
	padding: .625em .75em;
	display: inline-block;
	border-radius: 3px;
	line-height: 1.5;
	margin: .25em 0;
	margin-left: -.5em;
}
main input ~ label:before{
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	border: 2px solid white;
	box-shadow: 0 0 0 1px #8f8fbc;
	margin-right: .5em;
	margin-bottom: -.20em;
}
main input[type=checkbox] ~ label:before{
	border-radius: 3px;
}
main input[type=radio] ~ label:before{
	border-radius: 50%;
}
main input:focus ~ label:before{
	box-shadow: 0 0 0 2px black;
}
main input:checked ~ label:before{
	background: #2da0a4;
}
@media screen and (max-width: 30em) {
	main input[type=file]::file-selector-button{
		display: block;
		width:100%;
		margin-bottom:.25em;
	}
}
a {
	color: #007b80;
}
/*CONTACT*/
.contact article{
	padding: 2em 0;
}
.location-switcher{
	padding:0;
	list-style: none;
	margin-bottom: 1.5em;
}
.location-switcher li{
	display: inline-block;
	margin-right: 1em;
}
.location-switcher a{
	padding: .625em .25em;
	display: block;
	text-decoration: none;
	color: #444;
	margin-bottom: -1px;
	border-bottom: 0;
}
.location-switcher [aria-selected=true]{
	letter-spacing: .0125em;
	background: white;
	color: #666;
	border-bottom: .25em solid #2da0a4;
	font-weight: 500;
}
.contact img{
	max-width: 100%;
}
.location-switcher{
	padding: 0 .75em 1.5em;
	margin: 0 -0.125em;
}
.contact .image{
	max-width: 32em;
	height: 100%;
}
.contact .image,
.contact .form,
.contact .contact-info{
	box-sizing: border-box;
}
.contact-info{
	flex-grow: 1;
}
.contact .image,
.contact .contact-info,
.contact .container{
	padding: 0 .75em;
}
.contact .form{
	width: 100%;
	padding: 0 .75em;
}

.contact .container{
	max-width: 48em;
	flex-basis: 48em;

}
.contact .image{
	min-width: 16em;
}
.contact b{
	font-weight: 500;
}
.contact article .container{
	flex-wrap: wrap;
	display: flex;
}
/* RESELLER */
.resellerform article {
	margin: 2em auto 2em;
	max-width: 33em;
	padding: 0 1em;
}
.resellerform .form-backdrop{
	max-width: 35em;
	margin-bottom: 1.5em;
}
.resellerform form{
}
/* NEWS LISTING */
.news-listing .container{
	padding: .75em 1.5em 1.5em;
}
.news-listing h1{
	/*text-align: center;*/
}
.news-listing h2{
	margin: 0 0 .625em;
}
.news-listing article {
	margin: 1.5em auto;
	max-width: 40em;
	padding: .75em;
	flex-direction: row;
	flex-wrap: wrap;
	display: flex;
	background: #F9F9FF;
	box-shadow: 0 2px 5px rgba(0, 64, 128, .3);
}
.news-listing article:nth-child(odd){
	border-left: .25em solid #2da0a4;
}
.news-listing article:nth-child(odd) .button-spacer{
	text-align: left;
}
.news-listing article:nth-child(even){
	border-right: .25em solid #2da0a4;
}
.news-listing article:nth-child(even) .button-spacer{
	text-align: right;
}
.news-listing article:nth-child(odd){
	flex-direction: row-reverse;
}
.news-listing .image,
.news-listing .column{
	box-sizing: border-box;
	padding: .75em;
	margin: 0 auto;
}
.news-listing .image {
	text-align: center;
	box-sizing: content-box;
	flex: 1 0 300px;
}
.news-listing .column{
	flex: 8 0 20em;
	max-width: 100%;
}
.news-listing .article-date{
	color: #514a54;
	display: inline-block;
}
.news-listing .pagination {
	text-align: center;
	padding: 0;
}
.news-listing .button-spacer{
	text-align: right;
	padding-right: .25em;
	display: flex;
	justify-content: space-between;
}
.news-item .button,
.pagination .button{
	display: inline-block;
	border-radius: 3px;
	text-decoration: none;
}
.news-item .button{
	padding: .75em 1.5em;
	background: #2da0a4;
	color: white;
}
.pagination .button{
	background: #f9f9ff;
	color: black;
	padding: .75em 1.25em;
	border: 1px solid #e5e5ff;
}
.news-listing .image img{
	max-width: 100%;
}
/* TRAINING */
.training-listing article,
.training-record article {
	margin: 2em auto 2em;
	max-width: 33em;
	padding: 0 1.5em;
}
article h2,
article h3,
article h4{
	font-weight: 400;
	letter-spacing: .0125em;
}
.schedule{
	background: #f9f9ff;
	border-radius: 3px;
	padding: .5em 0;
	list-style: none;
	box-shadow: 0 2px 5px rgba(0, 128, 255, .3);
}
.schedule li{
	
	display: block;
	border-radius: 3px;
}
.schedule a{
	text-decoration: none;
	padding: .5em .75em;
	display: block;
	line-height: 1.5;
	color: #666666;
}
.schedule a:hover{
	background: #fafaff;
	background: white;
}
.schedule .title{
	display: block;
	font-weight: 500;
	color: #0979a5;
	letter-spacing: .0125em;
}
.training-listing .course{
	border-left: .25em solid #35a3a7;
	box-shadow: 0 2px 5px rgba(0, 128, 255, .3);
	background: #F9F9FF;
	padding: .75em;
	margin: 0 0 1.5em;
}
.course .datetime{
	width: 8em;
	text-align: center;
	padding: .25em .75em;
}
.course .details{
	padding: .25em .75em;
}
.course .description {
	/*	padding: 1em;
	border: 1px solid #d9d9f2;*/
}
.course .content{
	display: flex;
	
}
.course .title{
	font-weight: 500;
	letter-spacing: .0125em;
	color: #0979a5;
	margin: 0;
	padding: .5em .75em;
}
.course .location{
	display: block;
	padding: .5em 0;
}
.course .weekday{
	font-weight: 500;
	letter-spacing: .05em;
}
.course .month{
	background: #35a3a7;
	color: white;
	padding: .25em .5em;
	display: block;
	font-weight: 500;
	letter-spacing: .05em;
}
.course .date{
	display: inline-block;
	border-radius: 3px;
	background: #fff;
	width: 100%;
	overflow: hidden;
	margin-top:.25em;
	box-shadow: 0 2px 5px rgba(0, 128, 255, .3);
}
.course .button-spacer{
	text-align: right;
	padding: .25em;
}
.course .button{
	display: inline-block;
	padding: .75em 1.5em;
	background: #2da0a4;
	border: 0;
	color: white;
	text-align: left;
	border-radius: 3px;
	text-decoration: none;
	box-shadow: 0 2px 5px rgba(0, 128, 255, .3);
}
.course .day{
	font-size: 4em;
	padding: .125em;
	line-height: 1;
	display: block;
	font-family: 'Quicksand', sans-serif;
	font-weight: 500;
	letter-spacing: .05em;
}
.course .time{
	white-space: nowrap;
	
	padding: .25em .5em;
	border-radius: 3px;
	display: inline-block;
	background: white;
	box-shadow: 0 2px 5px rgba(0, 128, 255, .3);
}
.schedule .closed{
	background: #efeffd;
}
.course.closed {
	border-left-color: #8ea1af;
}
.course.closed .month {
	background: #667e8f;
}
.course.closed .day {
	color: #667e8f;
}
.trainingform .form-backdrop{
	max-width: 33em;
	margin: 1.5em auto;
}
.trainingform .course .content{
	margin: 0 -.75em;
}
.training-record article h3{
	border-top: 1px dashed #dbdbff;
	padding-top: 1em;
}
/* RECORD */
.record article {
	margin: 2em auto 2em;
	max-width: 37em;
	padding: 0 1.5em;
}
.search-results{
	margin: 0 auto;
	max-width: 40em;
	padding: 0 1.5em;
}
.search-results input[type=text]{
	margin-bottom:0;
	margin-right:.25em
}
.search-results form{
	display:flex;
}
.pagination {
	list-style:none;
	padding:0;
	text-align:center;
}
.pagination li{
	display:inline-block
}
.pagination a{
	display: block;
	padding: .75em;
	text-decoration:none;
	min-width: 1cm;
	text-align: center;
}
@media screen and (min-width: 60em) {
	nav.menu {
		display: inline-block;
		position: relative;
		top: auto;
		max-width: none;
		text-align: center;
		box-shadow: none;
		border:0;
		padding:0;
	}
	nav.menu>ul{
		animation: none;
		max-width: none;
		display: inline-block;
	}
	
	nav.menu>button[aria-expanded]+ul,
	nav.menu>ul{
		position: relative;
		padding:0;
		box-shadow: none;
		border:0;
	}
	nav.menu li{
		border:0;
	}
	.language-selector a,
	.language-selector button,
	nav.menu li a,
	nav.menu li button{
		padding: .75em;
	}
	nav.menu>ul>li>a,
	nav.menu li button{
		font-weight: 400;
	}
	nav.menu li ul{
		padding: .75em .125em;
		margin-top: -2px;
	}
	nav.menu > ul > li {
		display: inline-block;
	}
	nav.menu>ul>li.selected{
		border-bottom: .25em solid #2da0a4;
		margin-bottom: -.25em;
	}
	.nav-content{
		z-index: 999;
		text-align: center;
		direction: rtl;
	}
	.nav-content nav.menu,
	.language-selector {
		direction: ltr;
	}
	.language-selector{
		float: none;
	}
	header .container{
		max-width: 49.5em;
	}
	header .container div{
		vertical-align: middle;
	}
	.menu-button {
		display: none;
	}			
	nav.menu li ul {
		position: absolute;
		background: white;
		min-width: 110%;
		left:0;
		border: 1px solid #e0e0ff;
		text-align: left;
		box-shadow: 2px 2px 5px rgba(0,96,192,.19);
		border-radius: 0 3px 3px 3px;
	}
	nav.menu li[tabindex]:focus-within,
	nav.menu li:not([tabindex]):focus-within{
		z-index: 10;
		position: relative;
	}
	nav.menu>ul>li>a:focus,
	nav.menu li button:focus,
	.language-selector a:focus{
		background-color: white;
		border: 1px solid #e0e0ff;
	}
	nav.menu li[tabindex]:focus-within>a{
		background-color: white;
		border: 1px solid #e0e0ff;
		position: relative;
		z-index: 2;
		border-bottom-color: white;
	}
	nav.menu li button[aria-expanded=true]{
		background: white;
		border: 1px solid #e0e0ff;
		border-bottom-color: white;
		position: relative;
		z-index: 999;
	}
	
	nav.menu li[tabindex]>a:after,
	nav.menu li button:after{
		content:"";
		display: inline-block;
		margin-left:.2em;
		width: 14px;
		height: 8px;
		float:none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14px' height='8px' viewBox='0 0 14 8'%3E%3Cpolyline fill='none' stroke='%234e6173' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='2,1.5 7,6.5 12,1.5'/%3E%3C/svg%3E%0A");
	}
}
nav.menu li li a:hover,
.language-selector li a:hover{
	background-color: #f9f9ff;
}
@media 
screen and 
(min-width: 60em) and 
(hover:hover) and 
(pointer: fine) 
{
	.login a:hover,
	footer a:hover{
		text-decoration: underline;
	}
	nav.menu li:hover{
		position: relative;
		z-index: 2;
	}
	nav.menu li:hover a{
		border-color: #e0e0ff;
	}
	nav.menu>ul>li:hover>a,
	nav.menu>ul>li:hover>button,
	.language-selector:hover button{
		background: white;
		position: relative;
		z-index: 2;
	}
	nav.menu>ul>li[tabindex]:hover>a,
	nav.menu>ul>li:hover>button,
	.language-selector:hover button{
		pointer-events: none;
		border-color: #e0e0ff #e0e0ff white #e0e0ff;
	}
	nav.menu li:hover ul,
	.language-selector:hover ul{
		display: block;
	}
	
}
@media screen and (min-width: calc(22em * 3)) {
	.news-list{
		max-width: none;
	}
}
@media screen and (min-width: 64em){
	.language-selector ul{
		left: 0;
		right: auto;
		border-radius: 0 3px 3px 3px;
	}
}
@media (prefers-reduced-motion) {
	html {scroll-behavior:auto;}
	* {transition:!important;animation:!important;}
}
nav.menu li.first{
	border-top:0;
}

nav.menu li li{
	border:0;
}
.form-notice{
	background: white;
	box-shadow: 0 2px 5px rgba(0, 96, 192, .19);
	text-align: left;
	padding: .75;
	border-radius:3px;
}
.form-notice svg{
	display:block;
}
.form-notice.success{
	border-left: .25em solid #48C1C5;
	margin: 2em 0;
	padding: .75em;
}
.form-notice.error{
	border-left: .25em solid #E05858;
	margin-bottom: 1em;
	padding: .25em;
}
.form-notice.info{
	border-left: .25em solid #666666;
	margin-bottom: 1.5em;
	padding: .25em;
}
.form-notice td{
	padding: .25em;
}
article.big-text{max-width:45em}
strong{font-weight:500;}
abbr{text-decoration:none;}
figure{
	margin:0;
}
form ul{
	margin:.25em 0;
	padding-left: 1.5em;
}
.form-backdrop .container,
.form-backdrop .row{
	padding: .75em;
}
.description{
	/*margin-bottom: -.25em;*/
	padding-top:.5em;
}
.description h3,
.description p{
	margin: .625em 0;
}
article img:not(table img){
	max-width: 100%;
}
article table{
	border-spacing: 0;
	margin: 0 -.75em;
}
article td{
	padding: .5em .75em;
}
main ::selection,
section.addresses ::selection{
	background: #dadaf6;
	color: black;
}
footer ::selection {
	background: none;
}
footer a::selection,
footer abbr::selection{
	color: #70708f;
	background: white;
}
.download-list .container {
	padding: 1em;
	margin: 0 auto;
	max-width: 40em;
}
.download {
	background: #F9F9FF;
	border: 1px solid #eaeafa;
	padding: 1em;
	margin: 1em 0;
}
.download h2{
	margin: 0 0 .5em;
}
.download .image{
	margin-bottom: .5em;
}
.download .files {
	padding: .25em;
	margin: 0 -.5em;
}
.download .files li {
	list-style: none;
	padding: .25em;
	display: inline-block;
}
.download .files a {
	padding: .5em .75em;
	background: white;
	border: 1px solid #eaeafa;
	text-decoration: none;
	box-shadow: 0 2px 5px rgba(0, 96, 192, .19);
}
.copyright {
	padding: .5em .75em;
	text-align: center;
	color: #f9f9ff;
}
.pagination .active{
	border-top: .25em solid #2da0a4;
}
.gallery .image{
	margin:.25em;
}
.gallery .image img{
	max-width: 100%;
	animation: fade-in .1s ease-out;
}
.kartgp-container{
	max-width: 40em;
	width:100%;
	margin: 0 auto;
}

@media screen and (prefers-contrast: more) {
	::-webkit-scrollbar-thumb{
		outline: 1px solid black;
	}
	.brand path,
	.login svg{
		fill: currentcolor;
	}
	main input:checked ~ label:before{
		background: currentcolor!important;
	}
	.search path,
	.search circle{
		stroke: currentcolor;
	}
	form button{
		outline: 1px solid black;
	}
}
@media (prefers-color-scheme: dark) {
	/* DARK MODE IS HAPPENING 0.0 */
}

@media (max-width: 440px){
	header .search{
		display: none;
	}
}

[lang=fr] .news-item .button:nth-child(2) {
	display: none;
}