@font-face {
    font-family: 'MyWebFont';
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
	font-size: 4vh;
}


html, html * {
	font-family: "Ubuntu", sans-serif;
	font-weight: 400;
	font-style: normal;
	box-sizing: border-box;
}
html, body {margin: 0; padding: 0; width: 100%; box-sizing: border-box;}

body * {box-sizing: border-box;}

h1, h2, h3, h4 {line-height: 1em; font-weight: 500; text-align: center;}
h1 {
	display: block;
	line-height: 0.95em;
	margin: 0;
	margin-top: 0.1em;
	overflow: visible;
	font-family: "Ubuntu", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 20px;
	color: #fff;
}
h2 {font-family: "Madimi One", sans-serif; font-size: 84px; position: relative; margin: 40px; text-align: left;}
h3 {font-family: "Madimi One", sans-serif; font-size: 38px; display: inline-block; width: fit-content;}
h3::after {
	content: '';
	display: block;
	border-bottom: 3px solid rgb(201,235,108);
	width: 120px;
	margin-top: 0.4em;
}
h4 {display: block; text-align: center; font-size: 24px;}

p, a {
	margin: 0.4em;
	text-decoration: none;
	color: rgb(0,0,0);
}

p {line-height: 1.8em;}

div {box-sizing: border-box;}

::placeholder { /* Firefox */
	color: rgb(128,128,140);
	opacity: 0;
}

::-ms-input-placeholder { /* Edge 12 -18 */
	color: rgb(128,128,140);
	opacity: 0;
}

.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
.hidden {display: none !important;}

.bg-b {background-color: rgb(0,0,0);}
.bg-grey-d {background-color: rgb(128,128,140);}
.bg-grey-m {background-color: rgb(181,187,202);}
.bg-grey-l {background-color: rgb(225,227,230);}
.bg-blue {background-color: rgb(96,190,198);}
.bg-lime {background-color: rgb(201,235,108);}
.bg-w {background-color: rgb(255,255,255);}
.f-grey-d {color: rgb(128,128,140);}
.f-grey-m {color: rgb(181,187,202);}
.f-grey-l {color: rgb(225,227,230);}
.f-blue {color: rgb(96,190,198);}
.f-lime {color: rgb(201,235,108);}
.f-w {color: rgb(255,255,255);}

.note {font-size: 0.9em;}

.eur::after {content: '\20AC';}

.table {display: block; position: relative; table-layout: fixed;  overflow: auto; width: 100%;}
.tr {display: block; position: relative; clear: both;}
.tc {display: inline-block; position: relative; vertical-align: top; width: fit-content;}
.table .tr:nth-child(odd) .tc:nth-child(1) {float: right;}
.table .tr:nth-child(odd) .tc:nth-child(2) {float: left;}
.cw3 {width: 35%;}
.cw5 {width: 50%;}
.tcx {padding: 1em 3em;}
.tc img {display: block; width: 100%;}

#headline {
	position: relative;
	min-height: 316px;
	background-color: rgb(96,190,198);
	overflow: auto;
}


#logo {
	position: relative;
	display: flex;
	margin-top: 40px;
	margin-left: 40px;
	text-align: center;
}

.logoimg {
	height: 75px;	
}

.announce {display: block; height: 50px; text-align: center;}
.announce img {vertical-align: middle; margin: 0;}

.announce .contacts {display: flex; float: left; height: 50px; width: 50%; padding: 0 1em; align-items: center;}
.announce .social {float: right; height:100%; width: 50%;  padding: 0 1em; text-align: right;}
.announce .contacts * {display: inline-block; border-radius: 0.5em; padding: 0.3em; font-weight: 600;}
.announce .contacts *::before {margin-right: 0.3em;}
.announce .social * {display: inline-block;}

span.addrr {display: none !important;}

#menu-container {position: relative; height: 2em; text-align: center;}
#menu-container * {display: inline-block;}
#menu, #menu.shiftup {display: inline-block; margin: 0; padding: 0; text-align: center;}
#menu li {padding: 0.2em 0.5em; margin: 0 0.2em;}
a.deal {font-weight: 600;}
div.toggle-menu {font-size: 1.1em; pointer-events: none;}
li.deal {font-weight: 600;}

#contactform {
	position: relative;
	display: flex;
	width: fit-content;
	align-items: center;
	justify-content: center;
	margin: auto; margin-top: -3.5em;
	z-index: 99;
}
#contactform {vertical-align: middle; text-align: center;}
#contactform form {display: inline-block; padding: 1em;}
#contactform label {display: inline-block;}
#contactform label p {display: block;}
#contactform label input,
#contactform label select
	{border: none;}

#content {margin:0; padding: 0;}
.page-header {display: block; width: 100%;}

#footer {height: 60px;}

@media only screen and (max-width: 1370px) {
	h2 {font-size: 50px; text-align: center;}
	h3 {font-size: 30px;}

	::placeholder { /* Firefox */
  		opacity: 1;
	}
	::-ms-input-placeholder { /* Edge 12 -18 */
  		opacity: 1;
	}

	.announce {height: 70px;}
	.announce .contacts {display: block; height: auto; width: 70%; text-align: left; padding: 0.2em 0.3em 0 0;}
	.announce .contacts * {display: block;}
	.announce .social {width: 30%; padding-top: 10px; padding: 0.7em 0.3em 0 0}

	#menu-container {position: relative; height: 2.5em; padding-top: 0.4em; text-align: right;}
	#menu {
		position: absolute; top: 2em; right: 0;
		margin: auto;
		text-align: center;
		width: 50%;
		z-index: 999;
		height: auto;
	}
	#menu.shiftup {display: none;}
	#menu li {display: block;}
	div.deal {float: left; margin-left: 0.5em;}
	div.toggle-menu {
		float: right;
		margin-top: 0.1em; margin-right: 0.3em;
		font-size: 1.5em;
		pointer-events: unset;}

	#logo {display: block; margin-left: auto;}

	#contactform, #contactform label, #contactform form {display: block;}
	#contactform {margin-left: 1em; margin-right: 1em;}
	#contactform label p {display: none;}
	#contactform label input,
	#contactform label select
		{width: 100%;}

	.tc {display: block !important; float: none !important; clea: both; width: 100%;}
	.tcx {margin: -20px 10px 10px 10px; width: auto; background-color: rgb(255, 255, 255, 0.6); z-index: 99;}
}