@import url("reset.css");
.clear {
    clear: both;
}
a {
    text-decoration: none; 
    color: #1a4798;
}
::selection {
    background: #1a4798;
    color: #fff;
}
::-moz-selection {
    background: #1a4798;
    color: #fff;
}
body {width: 100%;
font: 300 12px/20px 'Open Sans', sans-serif;
color: #616161;
background: url(../images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
   
}
p {
    float: left;
}
#sidebar {
		background-attachment: scroll, fixed;
		background: #f1f7ff;
		position: fixed;
		color: #fff;
		height: 100%;
		left: 0;
		text-align: left;
		top: 0;
		width: 168px;
        padding: 50px;
		float: left;
	}
.cont-btn {
    width: 168px;
    height: 22px;
    margin-top: 15px;
    margin-left: -13px;
    padding-top: 8px;
    display: block;
    float: left;
    background: #1a4798;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s;
}
.cont-btn:hover {
    background: #5478b9;
}
a.logo img {
	width: 169px;
	height: 53px;
}
nav {
	margin: 87px 50px 86px 0;
}
nav ul li {
    width: 168px;
	font: 300 14px/16px 'Open Sans', sans-serif;
	margin: 0 0 10px 0;
    font-style: italic;
}
nav ul li a {
	color: #616161;
	text-decoration: none;
    padding-left: 10px;
}
nav ul li a:hover, nav ul li a.active {
	color: #1a4798;
	transition: all 0.3s;
    background: url(../images/nav-dot.png) center left no-repeat;
}
h1, h2, h3 {
	font: 22px/26px 'Open Sans', sans-serif;
    font-weight: 700;
    font-style: italic;
	color: #1a4798;
	margin: 0 0 12px 0;
}
h4 {font: 700 16px 'Open Sans', sans-serif; line-height: 19px;}
#home, #ueber, #leistungen, #kontakt, #footer {
	float: left;
	width: 726px;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 453px;
    padding: 50px;
	margin: 197px 0 50px 361px;
}
#info {
	float: left;
	width: 726px;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    min-height: 253px;
    padding: 50px;
	margin: 197px 0 50px 361px;
}
ul.list li {padding-left: 15px; background: url(../images/nav-dot.png) 0 center no-repeat;}
#kontakt {
	float: left;
	width: 726px;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: auto;
    padding: 50px;
	margin: 197px 0 50px 361px;
}
#home img, #ueber img, #leistungen img, #kontakt img {margin:0 0 17px 0;}
.cont-col {width: 330px; margin-right: 50px; float: left;}
.cont-col-r {width: 330px; float: left; margin-right: 0;}
.cont-col p, .cont-col-r p {margin-bottom: 15px;}
.text-wrap {width: 100%; float: left;}
strong {
    font-weight: 600;
    color: #1a4798;
}
.content, .galerie {
	margin: 3.571428571428571% 0 0 80px;
	padding: 0 0 40px 0;
	border-bottom: 2px solid #efefef;
}
.content ul {
	margin: 0 0 18px 0;
}
.content ul li {
	list-style: disc;
	margin: 0 0 0 12px;
}
.content p, .galerie p {
	margin: 0 0 18px 0;
}
.teaser p {
	font-weight: 700;
	margin: 0 0 18px 0;
}
.block {
	float: left;
	width: 340px;
	margin: 0 20px 0 0;
}
.box_wrap { 
	display: none;
}
.galerie .colum {
	height: 130px;
	border-radius: 8px;
	overflow: hidden;
}
.colum {
	width: 230px;
	float: left;
    margin: 0 8px 8px 0;
}
.contact {
    font-style: 12px;
    line-height: 14px;
    padding-left: 10px;
    color: #616161;
}
.cont-wrap {
    width: 1280px; height: 100%;
}
iframe {width: 100%; height: 150px; float: left; margin-bottom: 25px;}
#footer {
    height: 100px; 
    margin-top: 0;}
#footer ul li a {
    padding-left: 15px;
    color: #616161;
	text-decoration: none;
}
#footer ul {
    margin-top: 15px;
}
#footer ul li a:hover, #footer ul li a.active {
	color: #1a4798;
	transition: all 0.3s;
    background: url(../images/nav-dot.png) center left no-repeat;
}
.map {width: 100%; height: 200px; float: left; border: 0;}
.img-mt {margin-top: 26px !important; float: left;}

.resp-sidebar {display: none;}

.kf {height: 700px; width: 100%;
}
.side-nav {display: none;}

@media only screen and (max-width: 1300px) {
.side-nav {display: block; position: fixed; z-index: 800; background: #fff; bottom: 0;}   
.side-nav a {float: left; padding: 5px 10px 5px 10px; font-size: 14px;}
    
#sidebar {
    display: none;
}
.resp-sidebar {display: block;  background: rgba(241, 248, 255, 0.8); width: 100%; height: 100px;}   
    .resp-sidebar img {margin-left: 30%; padding-top: 20px; }
    
 .cont-wrap {
    width: 100%;
    height: 100%;
}
    #home, #ueber, #leistungen, #kontakt {
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 453px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}
    
    #footer {
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 150px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}
    
    #info {
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 800px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}
    
    #kontakt {
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: auto;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}
    #home img,
    #ueber img,
    #leistungen .cont-col img{width: 80%;}
    
#navbutt {
    display: none;
}

.res-nav {
    top: ;
    left: 3%;
    position: fixed;
    z-index: 9999;
}

.res-nav ul li {
    padding: 5% 10% 5% 5%;
    border-bottom: 1px solid #fff8f8;
    background: url(../images/pfeil.html) no-repeat right #fff;
}

.res-nav ul li:last-child {
    border-bottom: none;
}

.res-nav * {
    transition: all .3s ease;
}

.res-nav label {
    display: inline-block;
}

.res-nav label ~ ul {
    display: block;
    width: 100%;
    height: 0;
    overflow: hidden;
    text-align: left;
}

.res-nav a {
    color: #1a4798;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
}

.res-nav input:checked ~ label {
    transform: rotate(90deg) translateY(-7px)
}

.res-nav input:checked ~ ul {
    overflow: visible;
    padding-left: 10px;
}

.res-nav label ~ ul li {
    display: block;
    width: 100%;
    height: auto;
}
    }

@media only screen and (max-width: 775px) {
 #home, #ueber, #leistungen, #kontakt, #footer{
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 520px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}
    
   #leistungen{
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 820px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}

 #kontakt{
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 1700px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
} 
     #footer{
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 150px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
} 
}

@media only screen and (max-width: 360px) {
 .cont-col-r,
    .cont-col{
    width: 94%;
    float: left;
        margin-right: 3%;}

    #kontakt img {width: 90%; height: auto;}
    
    #home, #ueber, #leistungen, #kontakt, #footer{
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 570px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}
     #leistungen{
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 900px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
}
    #kontakt{
    float: left;
    width: 92%;
    background: rgba(241, 248, 255, 0.8);
    display: block;
    height: 1900px;
    padding: 4%;
    margin: 40px 0px 50px 0px;
} 
}