* {
	position: relative;
	-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1d1d1b;
  border: 0;
}
html { height: 100%; }
body { min-height: 101%; margin: 0; padding: 0; }
#container { overflow-x: hidden; }
.block { display: block; }
.inline-block { display: inline-block; }
.center { text-align: center; }


ul.flex, .nolist {	
	margin: 0;
	list-style-type: none; 
	-webkit-padding-start: 0; 
}
.flex {
	display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
	flex-direction: row; 
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap; 
}
.flex.col1>*, .col1:not(.flex),
.flex.col2>*, .col2:not(.flex),
.flex.col3>*, .col3:not(.flex),
.flex.col4>*, .col4:not(.flex) { width: 100%; }


.wrap { max-width: 860px; margin: 0.8em auto; }
.box { padding: 0.4em 2em; }
.innerBox { margin: -0.325em; }
.innerBox .box.border { padding: 0.2em 2em; margin: 0.2em; }

.rounded, .button { border-radius: 12px; }
.border { border: 0.125em solid #edeff0; }
.greyBg { background: #edeff0; }
hr { border-top: 2px solid #edeff0; margin: 2em auto; width: 66%; }
.fadeBg { background: url('img/QRExpress_fadeBg.svg') repeat-x; }


img.logo { width: 66%; max-width: 500px; height: auto; margin: 1em 0; }
img.key { width: 60%; max-width: 400px; height: auto; }
img.Icon { display: block; max-width: 90px; height: auto; margin: 0 0 -4em auto; }
img.vcard { max-width: 200px; height: auto; }
#footer img.logo { width: 50%; max-width: 340px; height: auto; margin: 0 0 2em 0; }


.clouds {
	padding-bottom: 2em;
	background: url('img/QRExpress_clouds.svg') repeat-x;
	background-position: center bottom;
	background-size: 800px;
}
#content .clouds { min-height: 420px; }
#footer .clouds {
	padding-top: 6em;
	padding-bottom: 1em;
	background-position: center top;
}

h1, .h1, h2, h3, .h3, .h3 i:before, h3 strong, h4, .h4, strong, ul.check li:before { color: #4c5356; }
.funktion .fadeBg { padding-bottom: 3em; }
.funktion h4 { margin-bottom: 0.8em; }
.funktion div.fadeBg .clear { min-height: 140px; }

ul.check { list-style: none; }
ul.check li { margin-bottom: 0.8em; }
ul.check li:before { position: absolute;	top: 2px; left: -34px; }

a.link, a.link>i:before { color: #4c5356 !important; }
a.link:hover, a.link:hover>i:before { color: #7b8187 !important; }
a.menu { padding: 0.2em 1.2em; }
.icon.big { color: #4c5356; margin-bottom: -0.2em; }
a.button {
	color: #fff;
	background: #7b8187;
	padding: 0.5em 1.25em;
	margin-bottom: -2px;
}
a.button i:before { color: #fff; top: 1px; left: -3px; }

@media screen and (min-width: 640px){
	.flex.col2>*, .col2:not(.flex),
	.flex.col3>*, .col3:not(.flex) { width: 50%; }
	.valign { 
		top: 15%;
	  -webkit-transform: translateY(-15%);
	  -ms-transform: translateY(-15%);
	  transform: translateY(-15%); 
	}
	.wrap { margin: 2em auto; }
	.box { padding: 0.4em 2.4em; }
	.innerBox .box.border { padding: 0.2em 2.4em; }
	.funktion .fadeBg { padding-bottom: 1em; }
	img.logo { margin-top: 2em; margin-bottom: 3em; }
	img.Icon { max-width: 140px; float: left; margin: 0 2em 0 0; }
	img.Icon.right { float: right; margin: 0 0 0 2em; }
	.clouds { background-size: 1100px; }
}
@media screen and (min-width: 1280px){
	.flex.col3>*, .col3:not(.flex) { width: 33.33%%; }
	.wrap { max-width: 1040px; }
	.box { padding: 0.4em 3em; }
	.funktion div.fadeBg .clear { min-height: 180px; }
	img.Icon { max-width: 160px; height: auto; }
	.clouds { background-size: 1250px; }
	ul.check li:before { top: 2px; }
}
@media screen and (max-width: 420px){
	img.logo { width: 70%; }
	padding-bottom: 0;
	.wrap { margin: 1em auto; }
	.box { padding: 0.2em 1em; }
	#footer img.logo { width: 60%; }
}