@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; margin: 1em 0; text-align: left; font-size: 26px; font-weight: 500;}

p, a {
	margin: 5px;
	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,0.95);}
.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'; font-size: 0.7em; font-weight: 500;}
.price {font-size: 26px; font-weight: 500;}


.table {display: block; position: relative; table-layout: fixed;  overflow: auto; width: 100%;}
.tr {display: flex; position: relative; width: 100%; margin-bottom: 2em;}
.tc {display: inline-block; position: relative; vertical-align: top; width: fit-content;}
.table .tr:nth-child(odd) {flex-direction: row-reverse;}
.table .tr:nth-child(even) .wrapper {width: 105%; margin-left: -40px; padding-left: 4em;}
.cw3 {width: 35%;}
.cw5 {width: 50%;}
.tcx {padding: 1em; width: 100%;}
.tc .wrapper {
	position: relative;
	width: 105%; height: 100%; padding: 3em;
	background-color: rgb(255, 255, 255, 0.6);
	z-index: 99;
}

#headline {
	position: relative;
	min-height: 316px;
	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 . contacts i {margin-right: 0.5em; margin-left: 0;}
.announce .social * {display: inline-block; padding-top: 0.5em;}
.announce .social i {margin-left: 1em; margin-right: 0; font-size: 1.5em;}

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: 940px) {
	h2 {font-size: 50px; text-align: center;}
	h3 {font-size: 30px;}
	h4 {font-size: 24px;}

	::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 a, .announce .contacts p {display: block; line-height: 1em; padding: 0;}
	.announce .social * {padding-top: 0.4em;}
	.announce .social {width: 30%; padding: 0.7em 0.5em 0 0}
	.announce .social i {font-size: 2em; margin-left: 0.3em;}

	#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%;}

	.tr {display: block !important; margin-bottom: 1em; flex-direction: row;}
	.tc {display: block !important; width: 100%;}
	.tci img {width: 100%;}
	.tcx {padding: 10px;}
	.table .tr .tcx .wrapper {width: 100%; margin: 0; margin-top: -35px; padding: 1em 2em;}
	
	.price {font-size: 24px;}
}