/*
	Font loading optimization:
	We actually want the browser to "stall" loading the fonts so that the user will see fallback font while the fonts are loading
	It's however not possible to tell the browser to "stall" or not.
	If the browser decideds to load the fonts right away (not stall) there will be no text for about 2 seconds (on a mobile connection)
	If we base64 encode the fonts the text will show right away, but it will take slighly longer to load the page!

*/


body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	color: #3C4B66;
	background-color: #ffffff;
}

.org-bronze {
	background-color: #2C2C2C !important;
	min-height: 100vh;
}
.org-bronze ul.news-list > li.news-list-post { 
	background-color: #2C2C2C !important;
	color: #fff !important;
	padding: 8px !important;
}

.org-bronze h1,
.org-bronze h2,
.org-bronze h3,
.org-bronze h4,
.org-bronze p {
	color: #fff !important;

}

p {
	font-size: 1.25rem;
	line-height: 1.5rem;
	margin: 0px 0px 14px 0px;
}

h1 {
	font-size: 5rem;
	line-height: 90%;
}

h1, h2, h3 {
	hyphens: none;
	color: #1D2548;
	font-weight: normal;
	font-weight: 600;
}

h2 {
	font-size: 3rem;
	line-height: 3rem;
	color: #1D2548;
}

h4 {
	font-size: 1.5rem;
	line-height: 1.65rem;
	color: #1D2548;
}

h5 {
	font-weight: bold;
	font-size: 1.125rem;
	line-height: 1.35rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	break-before: always;
	break-after: avoid;
	color: #1D2548;
	break-inside: avoid;
	break-after: avoid;
}

h5 + p {
	margin-top: 0;
}

p + h5 {
	margin-top: 2rem;
}

a {
	font-weight: bold;
	color: #1D2548;
	text-decoration-color: #00C4D0;
}

header menu li a, header .menu li a {
	font-size: 1.5rem;
}

.knapp a {
	font-size: 1.125rem;
}

.ingress {
	font-size: 1.5rem;
	line-height: 1.65rem;
	color: #1D2548;
}

.big {
	font-size: 2.25rem;
	line-height: 2.475rem;
	font-weight: bold;
	color: #1D2548;
}

.breadcrumbs {

	padding-left: 3.5rem; /* Align with logo */

	padding-bottom: 1rem;
	padding-top: 1rem;
}


/* make svg images scalable */
svg {
	width: 100%; 
	height: auto;
}

svg.small {
	width: 2.5rem;
	height: 2.5rem;
}

/*

	# Forms

*/
form {
	background: #FFFFFF;
	border: 0.063rem solid #EBF2F5;
	box-shadow: 0px 0.625rem 0.938rem rgba(0, 0, 0, 0.1), 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
	text-shadow: none;
	border-radius: 0.5rem;
	text-align: left;
	padding: 1.5rem;
	color: #28356D;
	max-width: 68rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 18rem;
}

form * {
	text-shadow: none;
}


form .left {
	margin-right: 1.5rem;
	width: 50%;
}

form .right {
	margin-left: 1.5rem;
	width: 50%;
}

label {
	font-size: 1.125rem;
	line-height: 1.35rem;
}

label.required:after {
	content: "*";
	color: red;
	margin-left: 0.5rem;
}


input[type='text'], textarea {
	/* grey-100 */
	background: #EBF2F5;
	/* grey-300 */
	border: 0.063rem solid #C8C9D0;
	border-radius: 0.25rem;
	color: #000;

	box-sizing: border-box;
	width: 100%;
	
	height: 3rem;
	padding-left: 1rem;
	
	margin: 0;
	margin-top: 0.125rem;

	font-size: 1.125rem;
	line-height: 1.35rem;

}

textarea {
	height: 15.25rem;
}


input[type='checkbox'] {
	width: 1.25rem;
	height: 1.25rem;
	
	/* white-default */
	background: #FFFFFF;
	/* grey-300 */
	border: 0.063rem solid #C8C9D0;
	border-radius: 0.188rem;
	vertical-align: middle;
}





/*
	# Header
*/

header {
	background: #FFFFFF;
	box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.15);
	z-index: 3;
	
	text-align: left;
	
	line-height: 2.65rem; /* vertical spacing when wrapping */

	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 3.75rem;
	padding-right: 3.75rem;

	display: flex;
	align-items: center;

}
/* hack to vertical align */
header:before {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
}

header .logo {
	margin-left: 0rem;
	margin-right: 3.75rem;
	width: 5.625rem;

}

header .logo, header nav, header .button, header details {
	display: inline;
	vertical-align: middle;
	align-self: auto;
}

header menu, header .menu {
	display: inline;
	padding: 0;
}

header menu li, header .menu li {
	display: inline;
}

header menu a, header .menu a {
	color: #1D2548;
	font-weight: bold;
	text-decoration: none;
	margin-right: 1rem;
}

header menu a, header .menu a:hover {
	text-decoration: underline;
}

/*
	# Buttons
*/

.button {
	box-sizing: border-box;
	
	border: none;
	border-radius: 2rem 2rem 2rem 2rem;

	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	margin-right: 1rem;

	font-size: 1rem;

	min-width: 11.25rem;
	text-decoration: none;
	font-weight: bold;

	background-repeat: no-repeat;
	color: #FFFFFF;
	height: 3rem;
	vertical-align: middle;
	text-align: center;

	display: inline-block; /* might need display: table-cell to vertical align middle */
	
	line-height: 100%; /* needed in order to set heights lower then 3rem */

	max-width: 16rem;

	padding-left: 1rem;
	padding-right: 1rem;

}

header .button {
	display: inline-block;
margin-left: auto;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
}

/* hack to vertical align the .button content */
.button:before {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	margin-top: 3px; /* correct vertical alignment which is slightly off ¯\_(ツ)_/¯ */
}


.button.action {
	background-image: linear-gradient(0.10turn, #00C4D0, #07A8B2);
}

.button.action:after {
	content: "";
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxOSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCQkJPHBhdGggZD0iTTE2LjI5MDggOC4wMjM0OEwxMC44MjUzIDIuNTU3OTdDMTAuNzI4OSAyLjQ2MTUyIDEwLjYwMDIgMi40NjE2MSAxMC41MDM2IDIuNTU4Mkw4Ljk5MDI3IDQuMDcxNDlDOC44OTM2OCA0LjE2ODA5IDguODkzNTkgNC4yOTY3OCA4Ljk5MDA0IDQuMzkzMjNMMTIuOTEyMyA4LjMxNTU0QzEyLjk0NDUgOC4zNDc2OSAxMy4wNDEgOC4zNzk3OSAxMy4wNzMxIDguNDExOTVMMTYuMDk3NSA4LjQwOTcxQzE2LjI5MDUgOC40MDk1NyAxNi40MTk0IDguMTUyMDggMTYuMjkwOCA4LjAyMzQ4WiIgZmlsbD0iI0YxRjFGMSIvPgoJCQk8cGF0aCBkPSJNMC4zMzUwNzYgOS4yMjQ1NUwxNy4zODM3IDkuMjQ1MTVMMTcuMzgzNyA5LjI0NTE1QzE3LjQ0OCA5LjI0NTEgMTcuNTEyNCA5LjI0NTA2IDE3LjU0NDUgOS4yNzcyMUwxOC42Mzc2IDEwLjM3MDNDMTguNzM0MSAxMC40NjY4IDE4LjczNCAxMC41OTU1IDE4LjYzNzQgMTAuNjkyTDE2LjkzMDkgMTIuMzk4NUwxMC43NDkgMTguNTgwNUMxMC42NTI0IDE4LjY3NzEgMTAuNTIzNyAxOC42NzcyIDEwLjQyNzMgMTguNTgwN0w4LjkxNjIgMTcuMDY5NkM4LjgxOTc1IDE2Ljk3MzIgOC44MTk4NCAxNi44NDQ1IDguOTE2NDQgMTYuNzQ3OUwxMy4zNTk3IDEyLjMwNDZDMTMuNTIwNyAxMi4xNDM2IDEzLjM5MjIgMTEuODg2NCAxMy4xOTkxIDExLjg4NjVMMi40ODg3NSAxMS44OTM0TDAuMTczODk4IDkuNjQyOTNDMC4wMTMxNDcyIDkuNDgyMTggMC4xNDIwMzMgOS4yMjQ3IDAuMzM1MDc2IDkuMjI0NTVaIiBmaWxsPSJ3aGl0ZSIvPgoJCTwvc3ZnPg==");
	background-repeat: no-repeat;
	background-position: center;

	margin-left: 0.25rem;

	vertical-align: middle;
	
	height: 100%;
	width: 19px;
	
	display: inline-block;

	margin-top: -3px; /* correct vertical alignment of the arrow */

}

.button.action2 {
	background-color: #1D2548;
}

.button.action3 {
	background-image: linear-gradient(0.10turn, #00C4D0, #07A8B2);
}

.button.info {
	border: 0.125rem solid #1D2548;
	background-color: #fff;
	color: #1D2548;
}



/*

	# HERO (picture with text on top)

*/
.hero {
	color: #FFFFFF;
	
	text-align: center;
	clear: both;
	margin: 0;
}

.hero p, .hero h2 {
	text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.15);
}

.hero h1 {
	color: #fff;
}

.hero .ingress {
	color: #fff;
}

.hero .content {
	max-width: 56rem;
	margin: auto;
	padding-right: 2rem;
	padding-left: 2rem;
}

.hero.gradient1 {
	background-image: url("data:image/svg+xml;base64,Cjxzdmcgdmlld0JveD0iMCAwIDE0NDAgMTA2NiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTk4NCA4MjIuMzMxQzg5MS44ODMgNzgwLjQyNSA4OTQuODMzIDcxMS4zODkgODk0IDY3Ni4wNTZDMTA4Mi41IDY1MC41NTYgMTQ3NC45IDYwNC4yMzEgMTQ4Ni41IDYxNS44MzFDMTUwMSA2MzAuMzMxIDE1NDMuNSA3OTguODMxIDE1NTIuNSA4MjIuMzMxQzE1NTkuNyA4NDEuMTMxIDE1NDQuMzMgMTAxNC4xNyAxNTI4IDEwNjBDMTQ3MS44MyAxMDc2LjUgMTM3OCAxMDYwIDEzMTEgOTQxLjMzMUMxMjUwLjA4IDgzMy40MzkgMTEwMSA4NzUuNTU2IDk4NCA4MjIuMzMxWiIgZmlsbD0iI0VEQUZEMyIvPgo8cGF0aCBkPSJNMTI0Mi41IDc1NEMxMzcwIDcxNC4zNDcgMTQ0MCA2NzIuNSAxNDQwIDY3Mi41VjBIMFYxMDQ3QzQ0LjMzMzMgMTA0NS4xNyAxMjcuNSAxMDQ3IDIxOSAxMDAwQzMxOC40NTYgOTQ4LjkxNCA0NDcuNSA4MTUuNSA3MjkgODE1LjVDODkyLjM3MSA4MTUuNSAxMDMzLjUgODE5IDEyNDIuNSA3NTRaIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWwpIi8+CjxkZWZzPgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MF9yYWRpYWwiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzIwIDUyMy41KSByb3RhdGUoOTApIHNjYWxlKDUyMy41IDcyMCkiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMkYzQTZCIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzA4MEYzMSIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=");
	background-size: cover;
	background-position: top;
	background-repeat: no-repeat;
	min-height: 100vw;
}

.hero.gradient1 .content {
	padding-top: 4rem;
}

.gradient1 .breadcrumbs {
	text-align: left;

}

.gradient1 a {
	color: #fff;
}

.hero.gradient2 {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTU3IiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDU1NyA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik05Ny4yNzcyIDQ5NS42MDFDMTcuNTU5OSA1OTIuNDM4IC02NC4xNDEyIDU2Ni43NjEgLTEwNi43MDggNTU2LjQyNEMtNzYuNzY5MSAzMjIuNTc4IC02LjM1NDE1IC0xNjIuMDUyIDExLjI1NDEgLTE3Mi4yMThDMzMuMjY0MyAtMTg0LjkyNSAyNDguNjIgLTE4MS43NTMgMjc5LjY0MSAtMTg0Ljk5QzMwNC40NTcgLTE4Ny41NzkgNTA2LjY4MSAtMTEzLjY3NiA1NTYuMzEyIC03OS40MTk0QzU1OC4wNDggLTYuODg1NTMgNTA4LjE5NSAxMDAuMTU2IDM0NC42MzYgMTQyLjI5OUMxOTUuOTMxIDE4MC42MTUgMTk4LjUyOCAzNzIuNjA2IDk3LjI3NzIgNDk1LjYwMVoiIGZpbGw9IiMwNkI2QzAiLz4KPC9zdmc+Cg=="), linear-gradient(259.95deg, #07A8B2 0%, #00C4D0 49.9%);;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: auto 100%;
	color: #FFFFFF;
	font-size: 1.125rem;
	line-height: 1.35rem;
	padding: 1rem;
	padding-top: 7rem;
	padding-bottom: 7rem;
}

.hero.gradient2 h2 {
	color: #FFFFFF;
}

.hero.gradient2 .content {
	color: #FFFFFF;
	max-width: 60rem;
	margin: auto;
	text-align: center;
}

.hero.gradient2 .content a.tel {
	color: #fff;
}

.hero.gradient3 {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIxMzg1IiB2aWV3Qm94PSIwIDAgMTQ0MCAxMzg1IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMTI0Ljc0NSAxODUuNTU1QzE1MS42MTggODcuNzgzNiAyNTAuNDQgNTguNDI5OSAzMjguMDAxIDEwOC45MjlMMzI4IDU3MS41M0wxMTIuNTMxIDcxMy40NjNMLTQyLjc5NDMgNzYwLjc2M0MtMjAuNDE0MSA2NDQuNjAyIC0xMjkuMTY4IDQwMS43OTMgMjUuMDc5NCAyOTAuNDc2Qzc4LjA4NyAyNTIuMjIyIDkxLjE1MjYgMzA3Ljc3IDEyNC43NDUgMTg1LjU1NVoiIGZpbGw9IiNFREFGRDMiLz4KPHBhdGggZD0iTTEwMzYuNjQgNy4zODM1N0MxMzA2LjIxIC0yNi42NDk2IDE1OTUuMiA2NS4xOTY0IDE3MDYgMTE1LjM3M1YxMjAxLjc2QzE3MDYgMTIwMS43NiAxNDY5LjQ5IDE0NTguNjkgMTA5NyAxMzY0Qzc3OS45MTEgMTI4My4zOSAyNDguNSAxMzE1IC0xMiAxMzY0Qy0yNjUuNzQ1IDE0MTEuNzMgLTMwMS44ODcgMTI0NC4zNCAtMzIyLjQzMiAxMTQ5LjE4TC0zMjIuNzY2IDExNDcuNjNDLTMzOS4xNjEgMTA3MS43MyAtMjYxLjI4OSA5ODUuNDU0IC0yMjAuMzA0IDk1MS44MDRDLTE4My40NDQgOTEzLjQwOCAtMTAzLjA1IDc5My41NSAtNzYuMzU0MSA2MjEuMjlDLTQyLjk4NCA0MDUuOTY1IDMwLjI5OTIgMzQyLjQ4IDEyMi41NTggMzE5LjU3M0MyMTQuODE2IDI5Ni42NjYgMTg5Ljk1MiAyNTYuMDg4IDE5MS45MTUgMjE0Ljg1NUMxOTMuODc4IDE3My42MjMgMjEyLjg1MyA3Ni4xMDQ1IDUwMC43NTIgNzYuMTA0NUM3ODguNjUgNzYuMTA0NSA2OTkuNjYzIDQ5LjkyNSAxMDM2LjY0IDcuMzgzNTdaIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWwpIi8+CjxkZWZzPgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MF9yYWRpYWwiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjkwLjUgNjkyLjQ3Nykgcm90YXRlKDkwKSBzY2FsZSg2OTIuNDc3IDEwMTUuNSkiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMkYzQTZCIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzA4MEYzMSIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPg==");
	background-position: top;
	background-repeat: no-repeat;
	min-height: 80vw;
	background-size: cover;
}

.hero.gradient3 .content {
	max-width: 45rem;
	padding-top: 15%;
	padding-bottom: 15%;

}

.hero.gradient3 h2, .hero.gradient3 h3 {
	color: #fff;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.hero.gradient4 {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQ0MCIgaGVpZ2h0PSIxMzMzIiB2aWV3Qm94PSIwIDAgMTQ0MCAxMzMzIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNOTI5IDEwODkuMzNDODM2Ljg4MyAxMDQ3LjQzIDgzOS44MzMgOTc4LjM4OSA4MzkgOTQzLjA1NkMxMDI3LjUgOTE3LjU1NiAxNDE5LjkgODcxLjIzMSAxNDMxLjUgODgyLjgzMUMxNDQ2IDg5Ny4zMzEgMTQ4OC41IDEwNjUuODMgMTQ5Ny41IDEwODkuMzNDMTUwNC43IDExMDguMTMgMTQ4OS4zMyAxMjgxLjE3IDE0NzMgMTMyN0MxNDE2LjgzIDEzNDMuNSAxMzIzIDEzMjcgMTI1NiAxMjA4LjMzQzExOTUuMDggMTEwMC40NCAxMDQ2IDExNDIuNTYgOTI5IDEwODkuMzNaIiBmaWxsPSIjRURBRkQzIi8+CjxwYXRoIGQ9Ik0xNDQwIDBWMTAwMy41QzEwNTEgMTE2MSAxMDA4IDk2OC41IDY1NyAxMDAzLjVDMzA2IDEwMzguNSAwIDExMjMuNSAwIDExMjMuNVYzMzdDMTQyLjUgMTk1IDI5MS42IDI1MS4zIDQ1MCAyNDIuNUM2NDggMjMxLjUgODM1IDE3MiA5NTIgMTA0QzEwNDUuNiA0OS42IDExNzUgMCAxNDQwIDBaIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWwpIi8+CjxkZWZzPgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MF9yYWRpYWwiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzIwIDU2MS43NSkgcm90YXRlKDkwKSBzY2FsZSg1NjEuNzUgNzIwKSI+CjxzdG9wIHN0b3AtY29sb3I9IiMyRjNBNkIiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDgwRjMxIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjwvZGVmcz4KPC9zdmc+Cg==");
	background-size: 100vw auto;
	background-position: top;
	background-repeat: no-repeat;
	min-height: 100vw;

	padding-top: 30%;
	padding-bottom: 20%;
	margin-top: -25%;
	margin-bottom: -75%;
}


.hero.dude1 {
	background-image: url("dude1_828x586.png");
	background-size: 100vw;
	background-repeat: no-repeat;
	background-position: center top;
	min-height: 44rem;
	min-height: 46vw;
	padding-top: 25%;
}
@media only screen and (min-width: 1000px) {
	.hero.dude1 {
	background-image: url("dude1_2080x2039.png");
	}
}

.hero.dude1 .content {
	background: radial-gradient(rgba(0,0,0, 0.7 ), #302020, transparent, transparent);
}

.hero.dude1 h2 {
	color: #FFFFFF;
}



/*
	## List with bullet icons
*/
ul.icons {
	list-style-type: none;
	padding: 0;
}

ul.icons li {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

ul.icons li svg {
	width: 4.5rem;
	/* first icon is a bit smaller */
	max-width: 2.5rem;
	max-height: 2.5rem;
	margin-right: 1rem;
}

ul.icons svg {
	vertical-align: middle;
	margin-right: 0.5rem;
}

/* ... 

	ul.icons * {
	border: 1px solid red;
	}

	ul.icons li {
	display: block;
	text-align: left;
	}

	ul.icons li svg {
	position: absolute;
	}

*/


/* list with metrics */

ul.metrics {
	list-style-type: none;
	display: flex;
	gap: 3rem;
	margin: 0;
	padding: 0;
	margin-top: 5rem;
}

ul.metrics strong {
	color: #EDAFD3;
	font-size: 5rem;
	line-height: 4.5rem;
}


/* 
	# Sections
*/

.section.hug {
	margin-top: 0rem;
	margin-bottom: 0rem;
}

.section.hug:last-of-type {
	margin-bottom: 9rem;
}

.section.hug .left {
	align-self: center;
}

.section.hug .right {
	align-self: center;
}

/* the first section */
.breadcrumbs + .section {
	margin-top: 1rem;
}

.section.center {
	display: block;
	margin: auto;
	
	margin-top: 6rem;
	margin-bottom: 6rem;

}

.section.center .content {
	max-width: 56rem;
	margin: auto;
	text-align: center;
}

.section {
	box-sizing: border-box;
	margin: auto;
	display: flex;
	clear: both;
	max-width: 79rem;
	text-align: left;
	padding: 2rem;
	margin-top: 10rem;
	margin-bottom: 10rem;
}

.section.full {
	display: block;
}

.section.columns {
	display: block;
	column-count: 2;
	column-gap: 3rem;
}


.columns h2 {
	column-span: all;
}

.columns h3, .columns h4, .columns h5  {
	margin-top: 0;
	column-span: none;
}

.columns p + h3, .columns p + h4, .columns p + h5 {
	margin-top: 2rem;
}

.section .right, .section .right div {
	/* move content to the right */
	margin-left: auto;
	margin-right: 0;
}

/* align image with header in sections */
.section h2, .section picture {
	margin-top: 1rem;
}

.section h2 {
	/* create multi line headings to avoid bastards */
	max-width: 32rem;
}

/* if the section is devided in two parts, make them equal big */
.section .right, .section .left {
	width: 50%;
}

/* avoid using gap because it doesn't work in IE and edge! */
.section .left {
	margin-right: 3rem;
}
.section .right {
	margin-left: 3rem;
}


/*

	# List with image, header and summary

*/
.boxes {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;

	padding: 0;
}

.boxes li {
	margin: 0;
	padding: 0;
	display: inline-block;
	position: relative;
	height: 6rem;
	width: 24rem;
	
	margin-bottom: 1rem;
}

.boxes li picture {
	border-radius: 0.25rem;
	height: 100%;

	display:flex;

	align-items: center;

	position: absolute;
	width: 6rem;
	
	margin: 0;
	overflow: hidden;
}

.boxes li picture img {
	border-radius: 0.25rem;
	
	height: auto;
	width: 150%;
	align-self: center;

}

.boxes h4 {
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.boxes li h4 {
	margin: 0;
	margin-left: 7rem;
}

.boxes li p {
	margin-left: 7rem;
	margin-top: 0.5rem;
}

.boxes p.big {
	display: block;
	width: 100%;
}



/*
	# Pictures
*/

picture {
	margin: 0rem;
	display: block;
}

picture img {
	width: 100%;
	border-radius: 0.75rem;
}

picture.right {
	margin-left: 2rem;
}

picture.left {
	margin-right: 2rem;
}


/*

	# Plain Boxes with text

*/

.shadowbox {
	background: #FFFFFF;
	color: #3C4B66;
	border: 0.063rem solid #C8C9D0;
	box-shadow: 0px 0.625rem 0.938rem rgba(0, 0, 0, 0.1), 0px 0.25rem 0.375rem rgba(0, 0, 0, 0.05);
	text-shadow: none;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	max-width: 32rem;
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
	box-sizing: border-box;
}

.shadowbox h4 {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
}

.hero .shadowbox {
	display: inline-block;
	width: 39%;
	max-width: 39%;

	vertical-align: top;
	margin-left: 1rem;
	margin-right: 1rem;
}

/* 

	# FOOTER 

*/

footer {
	background-color: #1d2448;
	color: #FFFFFF;
	padding: 0;
	vertical-align: top;
	
	padding-top: 6.75rem;
	padding-bottom: 2.5rem;
	padding-left: 2rem;
	padding-right: 2rem;

	display: flex;
	justify-content: center;
}

footer .left {
	margin-right: 2.5%;

}

footer .right {
	margin-left: 2.5%;
	width: 50%;
	position: relative; /* needed to place small at the bottom */
	min-width: 48rem; /* so that the .directionShift block doesn't fall down prematurely */
}

footer .group {
	display: inline-block;

	align-items: flex-start;
	margin: 0;

	text-align: left;
}

footer .col:not(:first-child) {

}

footer .right, footer .right p {
	font-size: 1.125rem;
	line-height: 1.35rem;
}

footer .small {
	position: absolute;
	display: block;
	bottom: 0px;
}

footer p, footer small, footer label {
	font-size: 12px;
	line-height: 1.05rem;
}

footer a {
	color: #FFFFFF;
}

footer h3 {
	text-transform: uppercase;
	font-size: 1.125rem;
	line-height: 1.35rem;
	color: #fff;
}

footer h5 {
	font-weight: bold;
	font-size: 1.125rem;
	line-height: 1.35rem;
	margin-top: 0rem;
	margin-bottom: 0.5rem;
	color: #fff;
}

footer ul {
	margin: 0;
	padding: 0;
}

footer .menu {
	
}

footer .menu li {
	list-style: none;
	
	font-size: 1.125rem;
	line-height: 1.35rem;
	margin-bottom: 0.5rem;
}

footer .menu.vertical {
	margin-top: 3rem;
	display: flex;
	margin-top: 3.2rem;
}

footer .menu.vertical li {
	display: inline-block;
	margin-right: 1rem;
}

footer .menu li:hover {
	list-style-type: square;
	text-decoration: underline;
}

footer .menu a {
	text-decoration: none;
	font-weight: normal;
	font-size: 1.125rem;
	line-height: 1.35rem;
}

footer .align-bottom-hack {
	margin-top: 13rem;
}

footer .social-media {
	margin-top: 2rem;
	margin-bottom: 3rem;
	white-space: nowrap;
}

footer .social-media svg {
	width: 2.5rem;
	height: 2.5rem;
}

footer .logobox {
	background-color: white;
	margin-top: 1rem;
	border-radius: 0.25rem;
	margin-right: 1rem;
	overflow: hidden;
	float: left;
	margin-bottom: 1.5rem;
	margin-top: 4rem;
}

footer .platforms, footer .paymentoptions {
	display: flex;
	width: 9rem;
	height: 2.5rem;
	
}
footer .platforms svg {
	margin: 0.4rem;
}
footer .platforms .android {
	width: 15rem;
}

footer .paymentoptions {
	display: flex;
	width: 12rem;
}
footer .paymentoptions svg {
	margin: 0.4rem;
}
footer .paymentoptions svg.swish {
	width: 22rem;
}

footer .logo {
	width: 6rem;
}

footer form {
	margin: 0;
	background: none;
	border: none;
	box-shadow: none;
	color: #fff;
	padding: 0;
}

footer .input {
	background-color: #000000;
	width: 100%;
	max-width: 25rem;
	margin-top: 1rem;
	margin-bottom: 1rem;
	display: flex;
	padding: 0px;
	border-radius: 0.25rem;

	flex: auto;
	border: 0.1rem solid black;

}

footer .input input {
	background-color: #000000;
	color: #C8C9D0;

	border: none;
	margin: 0.3rem;
	flex-grow: 4;

	height: 1.5rem;

	/* must specify width or Firefox will overflow siblings */
	width: 15px;
}

footer .input button {
	background: linear-gradient(259.95deg, #07A8B2 0%, #00C4D0 49.9%);
	border-radius: 2px;
	color: #FFFFFF;
	border: 0;
	padding: 0.5rem;
	margin: 0.3rem;
	display: inline;
	width: 20%;
	min-width: 3.5rem;
	margin: 0;
	padding: 0;
}

footer input[type='checkbox'] {
	border: 1px solid #C8C9D0;
	background-color: #fff;
}

footer input[type='checkbox']:checked {

}




/*

	# Misc

*/

address {
	font-style: normal;
}

.center {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 68rem;
}

.group {
	display: flex;
	justify-content: space-between;
}

.group.contacts {
	flex-wrap: wrap;
	gap: 1rem;
}

.contacts .title {
	font-weight: bold;
}

.group.contacts div {
	width: 30%;
	font-weight: bold;
	margin-top: 2rem;
}

.headinglist {
	display: inline-block;
	position: relative;
	width: 13rem;
	text-align: left;
	margin-right: 2.5rem;
	vertical-align: top;

	margin-top: 2.5rem;
}

.headinglist:last-of-type {
	margin-right: 0;
}


.longboxes {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.longboxes li {
	width: 100%;
	height: 4.625rem;
	margin-bottom: 1.125rem;
	background: #FFFFFF;
	border: 0.063rem solid #EBF2F5;
	box-sizing: border-box;
	box-shadow: 0px 0px 1.875rem rgba(119, 119, 119, 0.1);
	border-radius: 0.5rem;
	width: 100%;
	display: flex;
	padding: 1.5rem;
}

.longboxes a {
	display: block;
	font-size: 1.5rem;
	line-height: 1.65rem;
	width: 50%;
}

.longboxes span {
	text-align: right;
	font-size: 1.125rem;
	line-height: 1.35rem;
	width: 50%;
}

/* Hint desktop users that it's a link */
a:hover {
	text-decoration: underline;
}

#downarrowsvg {
	width: 7.75rem;
	height: 7.75rem;
}

/* text next to a button, manage spacing when text breaks below the button */
.button + span {
	line-height: 3.5rem;
}

/* we want to align some items vertical center (parent display: flex) */
.vertical-middle {
	align-self: center;
}


/* big screens */

@media only screen and (min-width: 1600px) {

	.hero.gradient3 {
		background-size: 100vw 100%;
	}

}

@media only screen and (min-width: 2200px) {

	html {
		font-size: 32px;
	}
	
}



/*

	# Fixes for IE and Edge

*/

/* IE and Edge doesn't support the details element! */


/* Rules that only applies for IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	details#mobilemenu {
		display: none;
	}

	/* fix for logo pushing everything down */
	svg.logo {
		height: 2rem;
	}

	/* fix background starting a bit down */
	.hero.gradient1 {
		height: 100vh;
		min-height: 100vw!important;
		background-position: 0px -380px; /* this hack works up to full HD width */
		background-size: 140vw!important; /* note: iphone css want to change this so we use more specific rule */
	}

	/* fix very large icons on the list */
	ul.icons li svg {
		width: 2rem;
		height: 2rem;
	}

	/* Items continue outside the screen! flex-wrap: wrap; doesn't work in IE!? */
	.boxes {
		display: block;
	}

	/* flex: gap not working in IE or edge */
	.boxes li {
		margin-right: 1rem;
	}

	/* fix svg icons in platform boxes which does not fit and is not aligned */
	footer .platforms svg, footer .paymentoptions svg {
		margin-top: 0;
		margin-bottom: 0.4rem;
	}

	footer .platforms svg {
		height: 1.8rem;
		margin-top: 0.3rem;
	}

}

/* Rules that only applies for Edge */
@supports (-ms-ime-align: auto) {
	
	details#mobilemenu {
		display: none;
	}

	
}

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html, body {
	background: #000;
	color: #fff;
	font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 14px;
}

h1,h2,h3,h4,h5,h6 {
	color: #fff;
	font-weight: normal;
	font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.container {
	margin: 0px auto;
	padding: 16px;
}

ul.news-list {
	list-style: none;
	padding: 0px;
	margin: 0px;
}

ul.news-list > li.news-list-post {
	display: block;
	padding: 32px 16px;
	border-radius: 16px;
	background: #1C1C1E;
	margin-bottom: 16px;
	border: 0.5px solid #3A3A3C;
}

span.item-created {
	display: block;
	border-bottom: #3A3A3C;
	border-bottom-width: 0.5px;
	border-bottom-style: solid;
	padding-bottom: 4px;
	font-size: 12px;
	line-height: 18px;
}

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

a {
	color: #E42286;
	text-decoration: none;
}