@import url('https://fonts.googleapis.com/css?family=Arimo');

body {
	margin: 0;
	padding: 0;
	font-family: 'Arimo', Segoe, "Segoe UI", Arial;
	
	--color1: #348F50; /*#DA22FF;*/
	--color2: #56B4D3; /*#9733EE;*/
	--def-width: 90%;
	--max-width: 1180px;
}





div.header {
	/*background: linear-gradient(45deg, #00B4DB, #0083B0);*/
	/*background: linear-gradient(45deg, #DA22FF, #9733EE);*/
	background: linear-gradient(45deg, var(--color1), var(--color2));
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}
div.header .box {
	color: #ffffff;
	font-weight: bold;
	padding: 1em;
	
	/*border: 1px solid #000;*/
}
div.header .logo {
	padding-right: 0;
}
div.header .title {
	padding-left: 0.5em;
	font-size: 1.5em;
}



div.topmenu {
	background: #ffffff;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	padding: 1em 0;
}
div.topmenu .box {
	color: var(--color1);
	font-weight: bold;
	padding: 0.3em 0;
	
	/*border: 1px solid #000;*/
}
div.topmenu .box a {
	color: var(--color1);
	padding: 0.3em 1em;
}
div.topmenu .box a:hover {
	color: var(--color2);
}
div.topmenu .box a.this {
	color: var(--color2);
	border: 1px solid var(--color2);
	text-decoration: none;
	border-radius: 1em;
}



div.content {
	margin: 0 auto;
	width: var(--def-width);
	max-width: var(--max-width);
}



div.news {
	margin: 0 auto;
	width: var(--def-width);
	max-width: var(--max-width);
}
div.news .wrap {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(4, 1fr);
}
div.news .box {
	background: #efefef;
	font-size: 85%;
	padding: 1em;
}
@media screen and (max-width: 1079px) {
	div.news .wrap {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media screen and (max-width: 539px) {
	div.news .wrap {
		grid-template-columns: repeat(1, 1fr);
	}
}





div.elements {
	margin: 0 auto;
	margin-top: 2em;
	width: var(--def-width);
	max-width: var(--max-width);
}
div.elements .wrap {
	display: flex;
	flex-flow: row wrap;
	gap: 1em;
	justify-content: center;
}
div.elements .box {
	background: #00DD00;
	padding: 1em;
	width: 10em;
	/*height: 10em;*/
}
div.elements .img {
	background: #fff;
	width: 10em;
	height: 10em;
}
@media screen and (max-width: 539px) {
	div.elements .box {
		width: 8em;
	}
	div.elements .img {
		width: 8em;
	}
}



div.elements2 {
	margin: 0 auto;
	margin-top: 2em;
	width: var(--def-width);
	max-width: var(--max-width);
}
div.elements2 .wrap {
	display: grid;
	gap: 2em 0.2em;
	/*grid-template-columns: repeat(12, 1fr);*/
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	justify-content: center;
}
div.elements2 .box {
	background: #d9d9d9;
	padding: 0.2em;
	/*height: 10em;*/
}
div.elements2 .img {
	background: #fff;
	width: 100%;
	height: 10em;
}
div.elements2 .title {
	background: #ccc;
	margin-top: 1em;
}



div.elements3 {
	margin: 0 auto;
	margin-top: 2em;
	width: var(--def-width);
	max-width: var(--max-width);
}
div.elements3 .wrap {
	display: grid;
	gap: 2em 0.2em;
	/*grid-template-columns: repeat(12, 1fr);*/
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	justify-content: center;
}
@media screen and (max-width: 539px) {
	div.elements3 .wrap {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		font-size: 80%;
	}
}
div.elements3 .box {
	background: #d9d9d9;
	padding: 0.2em;
	/*height: 10em;*/
}
div.elements3 .img {
	background: #fff;
	width: 100%;
	height: 10em;
	overflow: hidden;
}
div.elements3 .title {
	background: #ccc;
	margin-top: 0.3em;
	padding: 0.3em;
}