html, body {
	position: relative;
	margin: 0;
	padding: 0;
	font: 16px arial, sans-serif;
	font-family: 'Noto Sans', sans-serif;
	background: #ffe3cb;
}

.bg {
	position: fixed;
	left: -10px;
	right: -10px;
	top: -10px;
	bottom: -10px;
	/*width: 100%;
	height: 100%;*/
	background: url('pencils.jpg') top center no-repeat;
	background-size: cover;
	opacity: .7;
	z-index: 1;
	-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
}

.c {
	position: relative;
	margin: 0 auto;
	padding: 80px 40px 40px;
	max-width: 1200px;
	z-index: 2
}
.c:after, header {
	content: "";
	display: block;
	clear: both;
	overflow: hidden;
}

header {
	padding-bottom: 4%
}

.logo {
	display: block;
	position: relative;
	float: left;
	width: 25.33%;
	padding: 6% 3%;
	background: #105f2f;
}
.logo img {display: block; max-width:100%; background-color:white;}
.logo span {color:#fff; margin-left: 4%; font-size: 20px;}

.contact {
	position: relative;
	float: left;
	margin-left: 4%;
	padding: 6% 3%;
	width: 58.66%;
	background: rgba(255,255,255,.8);
	z-index: 1;
	
	font-size: 24px;
	line-height: 1.6;
	color: #333;
}

.contact span,
.contact ar {
	display: block;
}

.contact a {
	color: #105f2f;
}

/*
.contact:after {
	content: "KONTAKT";
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 10vw;
	font-weight: bold;
	font-family: 'Open Sans', sans-serif;
	line-height: 1;
	color: #d8d8d8;
	z-index: -1;
	display: none;
}*/

.quick-contact {
	float: left;
	width: 47%;
	font-size: .83em;
	/*text-align: right;*/
}
.quick-contact span:nth-child(2) {
	font-weight: bold;
	font-size: 1.6em;
}

.address {
	float: left;
	margin-left: 6%;
	width: 47%;
	/*text-align: right*/
}

header, .about {
	display: flex;
}

section {
	box-sizing: border-box;
	float: left;
	padding: 3% 3% 0;
	width: 48%;
	/*background: #d64c00;*/
	color: #333;
	font-size: 18px;
	background: rgba(255,255,255,.7);
}
	
section:nth-of-type(2) {
	margin-left: 4%;
	/*background: #070191;*/
	
}

section h1 {
	margin: 0;
	font-size: 60px;
	text-transform: uppercase;
	font-family: 'Open Sans', sans-serif;
	color: #fff;
	background: #014b91;
	margin-left: -7%;
	padding-right: 3%;
	text-align: right;
}
section:nth-of-type(2) h1 {
	background: #be3d0a;
}
section ul {
	/*padding: 0 0 0 20px;*/
	padding-top: 8%;
	padding-bottom: 8%;
	margin: 0;
	font-size: 24px;
}
section li {color: #014b91;}
section:nth-of-type(2) li {color:#be3d0a;}

.hide {opacity:0; -webkit-transition: opacity .5s; transition: opacity .5s;}
.show{opacity:1; }
.bg.show {opacity:.7;}
body.show {}

.animation {position: absolute; left: 40%; top: 45%; color: #105f2f;}
.animation span {
	font-family: 'Open Sans', sans-serif;
	font-size: 80px;
	color: #105f2f;
	opacity: 0;
	transition: opacity .3s;
}
.animation div {opacity:0;}
span.appear {
	opacity: 1; 
}
header {background:rgba(255,255,255,.8); padding-bottom:0; margin-bottom:4%;}
.logo {display:none;}
.logo2 {width: 25.33%; padding: 6% 3%;}
.logo2 img {max-width:100%;}
.contact {background:transparent; text-shadow: 0 0 3px white}
.contact a {font-weight:bold;}
.contact>div {}

@media (max-width: 1280px) {
	.logo span {font-size:1.56vw}
}
@media (max-width: 1080px) {
	.contact {font-size: 18px;}
	section h1 {font-size: 50px;}
}
@media (max-width: 900px) {
	.contact {font-size: 18px;}
	section ul {font-size:18px;}
	section h1 {font-size: 34px;}
}
@media (max-width: 640px) {
	.c {padding: 20px;}
	header,.about {display: block;}
	.logo {width: 60%; float: none;}
	.logo span {font-size:3.56vw}
	.contact {margin: 4% 0 0; width: auto; float: none;}
	.contact:after {content: ""; position:relative; display:block; clear:both; overflow:hidden;}
	section {margin: 0 0 4% !important; width: auto; float: none;}
}