@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900');


/* CSS Document */

/* Nav */

nav {
	background-color: #8EBD23;
	max-width: 1200px; /* <-- Nav width */
	margin: 25px auto;
}

.menu li {
	padding: 0 30px; /* Distance of menu items */
}

.menu li a {
	padding: 21px 0; /* General alignment */
	font-size: 22px;
	font-weight: 700;
	color: #7A290A;
}

.menu li a:hover {
	color: #518C30;
}

a.active {
	color: #518C30 !important; /* active link */
}

/* For responsive design, here just an example */

/*
@media only screen and (max-width: 960px) {
	.menu li a {
		font-size: 20px;
		padding: 20px 35px;
	}
}
*/

@media only screen and (max-width: 720px) {

/* Font size of menu items in hamburger mode */
.menu li a {
	font-size: 18px;
}

/* Here you can decide if menu should go over content (Not necessary if navFixed is on) */
.menu {
	/* position: absolute;
	width: 100%; */
	background-color: #6F9DD3;
}

.slide-down {
	height: 360px; /* Edit this in dependence of amount of menu items etc. */
}

}

/* Grid */

[class*="column-"] {
	padding: 25px;
}

/* General */

body {
	background: linear-gradient(120deg, #5dbaaf 0%, #3aa8b7 50%, #22a7c6 75%);
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Work Sans', sans-serif;
	font-weight: 700;
	color: #21a8c7;
}

p {
	font-family: 'Work Sans', sans-serif;
	line-height: 1.4em;
	font-size: 16px;
	font-weight: 400;
	color: #494949;
}

a {
	text-decoration: none;
	color: #606060;
	font-weight: 700;
}

/* Content Box */

.fullScreen {
	width: 100%;
	height: 100vh;
}

.contentBox {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
	grid-gap: 15px 15px;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}

.box-1 {
	background: #FCFCFC;
  grid-column: 1/2;
	padding: 25px;
}

.box-2 {
	background: #FCFCFC;
	grid-column: 2/2;
	padding: 25px;
}

.box-3 {
	-webkit-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.18);
	box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.18);
	background: #fff;
	padding: 25px;
	grid-column: 1/3;
}

.madeInGermany {
	position: absolute;
	max-width: 150px;
	right: 20px;
	bottom: 20px;
}

@media only screen and (max-width: 640px) {
	.madeInGermany {
		margin: 0 auto;
		left: 0;
		right: 0;
	}
}