:root {
	--bodyWidth: 1050px;
	--bodySidePadding: 10px;
}

html {
	--defColor: #0d0d0d;
	--priColor: #2d396b;
	--secColor: #ff6933;
	--accPriColor: #1ecf95;
	--priColorPale: #6875aa;
	--accSecColor: #fc3d60;
	--defBgColor: #ffffff;
	--bgColorPale: #dedede;

	--fontFam: "Oxygen", sans-serif;
	--fontSizeDef: 14pt;
	--fontSizeS: 12pt;
	--fontSizeM: 17pt;
	--fontSizeL: 21pt;
	--fontSizeXL: 27pt;

	--bodySideMargin: calc(50% - (var(--bodyWidth) / 2) - var(--bodySidePadding));

	--menuHeight: 60px;
	--menuSidePadding: 15px;


	margin: 0;
	padding: 0;
	font-family: var(--fontFam);
	font-size: var(--fontSizeS);
	color: var(--defColor);
}

body {
	width: var(--bodyWidth);
	margin: 0px 0px 0px var(--bodySideMargin);
	padding: 0px var(--bodySidePadding);
}

.head {
	margin-top: calc(var(--menuHeight) + 20px);
}

.preset-flex-column {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

h2 {
	font-size: var(--fontSizeXL);
	font-weight: bold;
	color: var(--priColor);

	margin-top: 30px;
	margin-bottom: 5px;
}

h3 {
	font-size: var(--fontSizeL);
	font-weight: normal;
	color: var(--secColor);

	margin-top: 5px;
	margin-bottom: 30px;
}

h4 {
	font-size: var(--fontSizeM);
	font-weight: bold;
	color: var(--priColor);

	margin-top: 5px;
	margin-bottom: 0px;
}

p {
	font-size: var(--fontSizeS);
	font-weight: normal;
	color: inherit;

	margin-top: 10px;
	margin-bottom: 30px;
}

img.round {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

a {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;

	text-decoration: underline;
	text-decoration-color: var(--secColor);
}

a:hover {
	text-decoration: none;
	-moz-text-decoration: none;
	-o-text-decoration: none;
	-webkit-text-decoration: none;
}

code {
	display: block;
	border-radius: 3px;
	border: 1px solid #cdcdcd;
	padding: 5px 10px;
	margin-top: 10px;
}

/* MENU */

.mob-menu {
	display: none;
}

.def-menu {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;

	position: fixed;
	top: 0;
	left: var(--bodySideMargin);
	padding: 0px var(--menuSidePadding);
	width: calc(var(--bodyWidth) - (var(--menuSidePadding) * 2) + (var(--bodySidePadding) * 2));
	height: var(--menuHeight);

	background-color: rgba(255,255,255,0.75);
	backdrop-filter: blur(4px);
	z-index: 900;
}

.def-menu a {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.def-menu a img {
	height: calc(var(--menuHeight) / 2);
	width: auto;
}

.def-menu .def-menu-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	height: 100%;
	color: var(--secColor);
}

.def-menu .def-menu-container a {
	font-size: var(--fontSizeM);
	color: var(--secColor);
	height: var(--menuHeight);
	padding: 0px 20px;

	text-decoration: none;
	cursor: pointer;

	transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
}

.def-menu .def-menu-container a:hover {
	background-color: rgba(255,105,51,0.15);
}

.def-menu .def-menu-container a.menu-icon-link {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.def-menu .def-menu-container a.menu-icon-link img {
	height: calc(var(--menuHeight) - 20px);
	width: auto;
}

.def-menu .def-menu-container a.menu-icon-link div {
	margin-left: 10px;
}

/* ACCOUNT BOX OVERLAY */

.account-box.overlay {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	background-color: rgba(0,0,0,0.9);
	backdrop-filter: blur(4px);

	z-index: 915;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
}

.account-box.overlay iframe {
	height: 472px;
	width: 40%;
	max-width: 570px;
	background-color: #fff;

	border: none;
	outline: none;

	border-radius: 5px;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	-moz-box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.account-box.close-icon {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	position: fixed;
	top: 10;
	right: 10;
	z-index: 920;

	cursor: pointer;
}

.account-box.close-icon div {
	transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;

	width: 35px;
	height: 2px;
	margin: 4px 0px;

	content: "";
	background-color: #fff;
}

.account-box.close-icon div.a {
	transform: translateY(5px) rotate(-45deg);
}
.account-box.close-icon div.b {
	transform: translateY(-5px) rotate(45deg);
}

/* GRID */

.gbgc-white {
	background-color: #fff;
	color: #000;
}

.gbgc-lightgrey {
	background-color: #efefef;
	color: #000;
}

.gbgc-darkgrey {
	background-color: #3d3d3d;
	color: #fff;
}

.gbgc-pink {
	background-color: #fc3d60;
	color: #fff;
}

.gbgc-darkblue {
	background-color: #2d396b;
	color: #fff;
}

.gbgc-lightblue {
	background-color: #bdc9fb;
	color: #000;
}

.gbgc-aquamarine {
	background-color: #1ecf95;
	color: #fff;
}

.gbgc-orange {
	background-color: #ff6933;
	color: #fff;
}

.gbgc-darkred {
	background-color: #cd3434;
	color: #fff;
}

.gbgc-lightred {
	background-color: #ffab9a;
	color: #000;
}

.gbgc-lightaqua {
	background-color: #9effc5;
	color: #000;
}

.grid-container {
	display: grid;
	grid-gap: 10px;
	grid-template-areas:
		"welcome contact contact"
		"partner contact contact"
		"partner about about"
		"refs refs refs"
		"supportedby supportedby supportedby"
	;
}

.grid-container .grid-item {
	transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-o-transition: all 0.15s ease;

	padding: 20px;
}

.grid-container .grid-item .title {
	font-size: var(--fontSizeXL);
	font-weight: bold;
	margin-bottom: 20px;
}

.grid-container .grid-item p {
	font-size: var(--fontSizeDef);
}

#contact {
	background: url('/i/telephone.jpg') #efefef;
	background-blend-mode: overlay;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

#partner {
	background: url('/i/entrepreneur.jpg') #bdc9fb;
	background-blend-mode: lighten;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.item1 { grid-area: welcome; }
.item2 { grid-area: contact; }
.item3 { grid-area: partner; }
.item4 { grid-area: about; }
.item5 { grid-area: refs; }

.itemSB {
	grid-area: supportedby;

	background-color: #fff;
	color: #000;
}

.itemSB b {
	text-align: center;
	display: block;
}

.image-link-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.image-link-container a {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;

	text-decoration: none;
}

.image-link-container a.hov {
	border-bottom: 0px solid #000;
	padding-bottom: 3px;

	transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
}

.image-link-container a.hov:hover {
	border-bottom-width: 3px;
	padding-bottom: 0px;
}

.image-link-container a > * {
	margin: 10px;
}

.image-link-container.own-app a {
	max-width: 30%;

	box-shadow: 0px 2px 10px -3px black;
	background-color: var(--defBgColor);

	padding: 30px;
	margin: 15px;
	border-radius: 5px;

	transition: all 0.15s ease;
	-o-transition: all 0.15s ease;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
}

.image-link-container.own-app a:hover {
	box-shadow: 0px 6px 15px -3px;
}

/* FOOTER */

.cookie-usage {
	position: fixed;
	bottom: 0;
	left: calc(var(--bodySideMargin) + var(--bodySidePadding));

	background-color: var(--priColor);
	color: #fff;

	box-shadow: 0px 5px 20px 0px #3d3d3d;
	-webkit-box-shadow: 0px 5px 20px 0px #3d3d3d;
	-moz-box-shadow: 0px 5px 20px 0px #3d3d3d;

	max-width: calc(var(--bodyWidth) - 30px);
	padding: 15px;

	z-index: 800;
}

.footer {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: flex-end;
	align-content: center;

	width: calc(100% - 40px);
	margin-top: 20px;
	padding: 30px 20px;

	background-color: var(--priColor);
	color: #fff;
}

.footer .copyright {
	font-size: var(--fontSizeS);
	margin-bottom: 15px;
}

.footer .since {
	font-size: var(--fontSizeM);
}

.footer a {
	color: inherit;
	text-decoration: none;
}