@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

body {background: #fff}
p {font-family: 'Open Sans', sans-serif; font-size: 15px; color: #767676}
#main {width: 100%; max-width: 976px; margin: 0 auto; background: #eaeaea; position: relative}
#nav {width: 100%; max-width: 976px; margin: 0 auto; background: #fff!important; position: relative; height: 100px }

h1, h2, h3, h4 {font-size: 30px;font-weight: 400; line-height: 29px; padding-bottom: 15px}
h1, h4 { color:#225b8a} h2 {color:#fff} h3 {color:#edc125}

strong {font-weight: 600}

header {background: url("../images/header.jpg")no-repeat; width: 100%; height: 409px; position: relative}
.logo {position: absolute; top: -80px; left: -120px}
.portrait {position: absolute; right: -135px; top: -200px}
.slogan {position: absolute; bottom: 0; left: 0; width: 100%; background: url("../images/header-bottom.png")no-repeat;height: 126px}
.slogan p {color:#5fa161; font-size: 30px; font-weight: 600; position: absolute; bottom: 50px; right: 175px}

.navi {position: absolute; top: 0; right: 0; z-index: 100}
.navi ul {padding-top: 60px}
.navi ul li {display: inline-block; margin-left: 8px}
.navi ul li a {color: #fff; text-decoration: none; font-size: 15px; padding: 5px 12px}
.navi ul li:nth-of-type(1) a {background: #27679c} .navi ul li:nth-of-type(1) a:hover {background: #225b8a; color:#fff}
.navi ul li:nth-of-type(2) a {background:#5fa161 } .navi ul li:nth-of-type(2) a:hover {background: #558f56; color:#fff}
.navi ul li:nth-of-type(3) a {background: #f7c927} .navi ul li:nth-of-type(3) a:hover {background: #e5ba22; color:#fff}

.navi a {color: #a3a3a3; text-decoration: none; font-size: 13px; display: inline-block; float: right; padding-left: 10px}
.navi a:hover {color: #27679c}
#nav span, .sidenav {display: none}

#service, #leistungen, #kontakt, #impressum {position: relative; padding: 100px 0; height: auto}
#service {background: #EAEAEA} #leistungen {background: #5FA060} #kontakt {background: #f6f6f6} #impressum {background: #fff}
#leistungen p {color: #fff}
.leistungen {width: 100%; height: auto; display: block}
.kasten {padding-left: 150px; width: 361px}
.kasten a {background: #e5ba22; color: #fff; text-decoration: none; padding: 5px 10px; display: block; line-height: 20px; font-size: 15px; margin-top: 10px; text-align: center}
.kasten a:hover {background: #5fa161}
.kasten a:nth-of-type(1), .kasten a:nth-of-type(2) {display: none}
#kontakt img {position: absolute; top: -15px; left: -80px}
#impressum a {color:#27679c; text-decoration: none}
#impressum a:hover {color: #5fa161}
.col-1, .col-2 {width: 46%; height: auto; display: inline-block; vertical-align: top; padding: 0 30px}



img, figure {pointer-events: none;}

@media screen and (max-width: 1190px) {
    .portrait {right: 0}
    .logo {left: 0}
    .slogan p {right: 280px}
    #kontakt img {left: 0; top: -6px}
    .kasten {width: 415px; padding-left: 200px}
}

@media screen and (max-width: 976px) {
    .navi {right: 15px}
}

@media screen and (max-width: 670px) {
    .logo {max-width: 280px}
    .portrait {max-width: 200px; height: auto; top: -139px} 
    .slogan p {right: 180px}
    .col-1, .col-2 {width: 100%}
    .col-1 {padding-bottom: 20px}
}

@media screen and (max-width: 530px) {
    .slogan p {font-size: 20px}
    .navi {z-index: 0}
    #nav ul {display: none}
     #nav span {display: block; position: absolute; top: 32px; right: 16px; background: #558f56; width: 56px; height: 50px; cursor: pointer}
    #nav span:hover {background: #225b8a}
    #nav span img {width: 41px; height: 31px; position: absolute; top: 9px; left: 7px;}
    .sidenav { display: block;height: 100%; width: 0; position: fixed; z-index: 1;top: 0; right: 0; background-color: #558f56;overflow-x: hidden;transition: 0.5s;
     padding-top: 15px;}
    .sidenav a {padding: 8px 8px 8px 32px; text-decoration: none; font-size: 17px; color: #fff; display: block; transition: 0.3s; text-transform: uppercase}
    .sidenav a:hover, .offcanvas a:focus{ color: #225b8a;}
    .sidenav .closebtn {position: absolute; top: 0;right: 25px; font-size: 36px;margin-left: 50px;}
}

@media screen and (max-width: 480px) {
    #kontakt img {display: none}
    .kasten {padding-left: 2%; width: 100%}
}

@media screen and (max-width: 430px) {
    .slogan p {font-size: 16px; right: 147px}
    .portrait {max-width: 170px; } 
   header {background: url("../images/header-resp.jpg")no-repeat; width: 100%; height: 262px; position: relative}
    .kasten a:nth-of-type(1), .kasten a:nth-of-type(2) {display: block}

}

@media screen and (max-width: 360px) {
    .portrait {position: relative; width: 100%; height: auto; top: 0; right: 0}
    .slogan p {right: 20px}
}