@charset "UTF-8"; 
@font-face {
font-family: 'icomoon';
src: url('icomoon.woff?qs2cnb') format('woff');
font-weight: normal;
font-style: normal;
}
/*HAUPTELEMENTE*/
* {
margin: 0;
padding: 0;
box-sizing:border-box;
}
html {
font-size:14px;
height:100%;
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
font:100%/1.8em verdana, arial, "trebuchet ms";
color: rgba(0,0,0,0.7);
text-align: left;
position: relative;
width:100%;
max-width:1200px;
margin:0 auto;
}
header, main, .kontakt, .map, footer, .logo, aside, .sidepic{
width:100%;
float:left;
position:relative;
}
header, footer, .logo{
padding:1em;	
}

header{
background-color:rgba(71,105,133,1);
}
.logo{
display:block;
background:transparent url(logo-gerd-mensching.png) no-repeat scroll 50% 50% / 25% auto;
height: 70px;
margin: 0.4em 0 0 0;
}
.map{
background:transparent url(friesen-mapz.jpg) no-repeat scroll 50% 50% / 110% auto;
height:160px;
}
.sidepic {
display: flex;
justify-content: center;
align-items: center;
}

footer{
column-count: 2;
background-color:rgba(71,105,133,1);
}

/*LINKS*/

a:link, a:visited{
color:rgba(71,105,133,0.7);
text-decoration: none;
}
a:hover,a:focus,a:active {
  outline: 0;
}
footer a:link, footer a:visited {
line-height: 3em;
color:white;
display:block;
}

/*TEXT und ZEICHEN*/
.icons::before{
font-family: icomoon;
font-size:1.6em;
margin: 0 0.5em 0 0;
vertical-align: -0.1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:rgba(71,105,133,1);
}
.icons2::before{
font-family: icomoon;
font-size:1.4em;
margin: 0 0.5em 0 0;
vertical-align: -0.1em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color:white;
}
h1, h2, h3, h4, h5, h6{
color:rgba(71,105,133,0.8);
font-weight: normal;
}
h1{
text-transform: uppercase;
font-size: 1.5em;
text-align:center;
color:white;
letter-spacing: 2px;
}
h2{
font-size: 1.2em;
margin: 0 0 1em 0;
text-transform: uppercase;
background: rgba(71,105,133,0.05);
padding: 9px 1.4em;
text-align: right;
border-bottom: 1px solid rgba(71,105,133,0.5);
}
h3{
padding: 0 1em 1em 1em;
line-height: 1.2em;
}

.eingang{
margin: 2em 0 1em 0;
}
p{
margin: 0 0 1em 0;
-webkit-hyphens:auto;
-ms-hyphens:auto;
hyphens: auto;
padding:0 1em;
}
ul{
padding:0 1em;
margin:0 0 1em 0;
list-style-position: inside;
}

/*DEKO*/
img{
border:0;
width:100%;
height:auto;
}

.home::before{content: "\e902";}
.contactdata::before{content: "\f129";}
.impressum::before{content: "\f24e";}
.verguetung::before{content: "\f09d";}
.datenschutz::before{content: "\f023";}
.adr::before{content: "\e947";}
.fon::before{content: "\e942";}
.fax::before{content: "\f02f";}
.email::before{content: "\f003"; font-size: 1.4em;}

.nachOben::before {
position: fixed;
bottom: 30px;
right: 0;
content: "\ea41";
color: white;
font-size: 35px;
text-shadow: 1px 2px 2px #aaa;
}

/*MEDIA QUERIES*/
@media (min-width:350px) {

.map{
background:transparent url(friesen-mapz.jpg) no-repeat scroll 50% 30% / 120% auto;
height:250px;
}
.logo{height:100px;}
}

@media (min-width:500px) {

.logo{
background:transparent url(logo-gerd-mensching.png) no-repeat scroll 50% 50% / 20% auto;
}	
.map {
background: transparent url(friesen-mapz.jpg) no-repeat scroll 0 -3em / 100% auto;
height: 300px;
}
}

@media (min-width:600px) {
.logo{
height:120px;
margin: 0 0 .5em 0;
}

.kontakt{
width:50%;
float:left;
}
.map {
width: 48%;
float: right;
background:transparent url(friesen-mapz.jpg) no-repeat scroll 0 0 / 115% auto;
height: 210px;
margin: 0 2% 0 0;
}

.sidepic {
width: 48%;
float: right;
margin: 0 2% 0 0;
height: 245px;
}
footer{
column-count: 3;
}
}

@media (min-width:800px) {
.logo{
background:transparent url(logo-gerd-mensching.png) no-repeat scroll 50% 50% / 17% auto;
margin:1em 0 1.5em 0;
height:130px;
}

}


@media (min-width:900px) {
.logo{
background:transparent url(logo-gerd-mensching.png) no-repeat scroll 50% 50% / 15% auto;
margin:0.5em 0 1.5em 0;
height:140px;
}

main{
width:60%;
float:left;
min-height:500px;
}


aside{
width:40%;
float:right;
}
.kontakt, .map, .sidepic{
width:100%;
margin:0;
}
.map {
background: transparent url(friesen-mapz.jpg) no-repeat scroll 0 0 / 100% auto;
height:230px;
}

img{width:94%;}

footer{
column-count: 5;
}

footer a:link, footer a:visited {display:block;}
}

@media (min-width:1400px) {
body{
margin: 5em auto;
}
}