html {
  font-family: 'Raleway', sans-serif;
  color: #3c3c3b;
  max-width: 97%;
  margin-left: auto;
  margin-right: auto;

}

header{
    height: 20px;
}



nav{
	height:100px;
	z-index: 20;
    background: #efefef;
    position: fixed;
    width: 97%;
    margin-right: auto;
    margin-left:auto;
    box-shadow: -2px -7px 47px 9px rgba(0,0,0,0.35);
    -moz-box-shadow: -2px -7px 47px 9px rgba(0,0,0,0.35);
    -webkit-box-shadow: -2px -7px 47px 9px rgba(0,0,0,0.35);
}

.logo-section{
  float: left;
	font-family: 'Raleway', sans-serif;
	margin-top:18px;
	margin-left:18px;
  margin-right: 20px;
}

.logo-section img {
	width: 120px;
	}

.hb-button{
    float: right;
    background: #222;
    color: #ffffff;
    border: none;
    font-size: 18px;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    display: none;
}

nav a{
    text-decoration: none;
    color: #282828;
    font-size: 20px;
    padding: 5px;
}

nav ul{
    overflow: hidden;
    color: #ffffff;
    margin: 0;
    padding: 0;
    text-align: center;
    transition: max-height 0.5s;
    -webkit-transition: max-height 0.5s;
    -moz-transition: max-height 0.5s;
    -ms-transition: max-height 0.5s;
    -o-transition: max-height 0.5s;
}

nav ul li{
    float: right;
    display: inline-block;
    padding: 40px;
}

li > a{
    position: relative;
    color: #000000;
    text-decoration: none;

}


li > a:before{
    content:"";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

a{
	text-decoration: none;
	color:black;
}

.row:before, .row:after {
	content:"";
	display: table;
}

.row:after {
	clear:both;
}

.title {
	background-image: url(img/title..jpg);
	background-size: cover;
	padding: 250px 20px 50px 20px;
	color: #FFFFFF;
	text-align: center;
}

.title h1 {
	font-size:30px;
	text-transform: uppercase;
	font-weight:200;
	margin-bottom:50px;
	margin-top:50px;
	background-color: hsla(0,0%,15%,0.63);
}


h2 {
	font-size:30px;
	text-transform: uppercase;
	font-weight:200;
	margin-bottom:30px;
	text-align: center;
	margin-top: 6%;
}

.einleitung{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.col1 img {
	width:100%;
	height: auto;
}

.col1 {
  float:left;
  text-align: center;
}

.col2 img {
	width:20%;
	height: auto;
	margin-top: 20px;
}

.col2 {
  float:left;
  text-align: center;
}


.col {
	width:100%;
	text-align: center;
}


.box-left {
	background-color:white;
	color: #000;
	padding: 40px 20px 20px;
}

.box-right {
	background-color:white;
	color: #000;
	margin-left: auto;
	margin-right: auto;
  text-align: left;
}



.box-left h3{
	margin-top: 10%;
  text-align: left;
}

.slider {
  vertical-align: middle;
}

.gallery {
	position: relative;
	margin-right: auto;
	margin-left:auto;
	background: none;
	border: none;
}

.gallery figure {
	position: absolute;
	display: inline-block;
	animation: wechseln 15s infinite;
	margin-top: 50px;
}

.gallery figure:last-of-type {
	position: relative;
}

.gallery > figure figcaption {
	position: absolute;
	left: 1em;
	font-size: 2em;
	font-weight: bold;
	bottom: 0.5em;
	z-index: 2;
	color: white;
}


@keyframes wechseln {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	60% {
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

.gallery figure:nth-of-type(2) {
	animation-delay: 5s;
	opacity: 0;
}

.gallery figure:nth-of-type(3) {
	animation-delay: 10s;
	opacity: 0;
}

.gallery figure {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-left: 0px;
}

.wrapper img {
  width: 100%;
	margin-right: auto;
	margin-left:auto;
}

.impressionen {
display: table;
line-height: 0;
font-size: 0;
background: #029fd3;
margin-top: 20px;

}

.impressionen img {
display: tabel-cell;
top: 0;
left: 0;
opacity: 1
}

.impressionen img:hover {
opacity: .7
}

.impressionen img {
  -webkit-transition: .1s opacity linear;
     -moz-transition: .1s opacity linear;
      -ms-transition: .1s opacity linear;
       -o-transition: .1s opacity linear;
           transition: .1s opacity linear
}


footer {
margin: 100px, 0px, 300px, 0px;
background-color: #029fd3;
margin-top:20px;
text-align: center;
height: 250px;
}

.footer-impressum {
	color: black;
	text-decoration: none;
	padding: 8px;
  background-color: #029fd3;
}

.footer-datenschutz {
	text-decoration: none;
	color:black;
	padding:8px;
  background-color: #029fd3;
}

.footer-text {
	font-size:16px;
	margin-bottom: 20px;
	color: black;
	text-align: left;
  background-color: #029fd3;
  margin:20px;
}

  #impressum {
  	width: 90%;
  	margin-left: auto;
  	margin-right: auto;

  }

  #datenschutz {
    width: 90%;
	  margin-left: auto;
    margin-right: auto;
  }

  .liste ul {
	list-style-image:url(img/auf.jpg);
	padding: 10px 0px 10px 50px;
}


@media (min-width: 768px){

	.style-logo {
		width:100px;
	}

	.style-nav ul li {
		margin-top:  40px;
		margin-right: 20px;
		display:inline-block;
	}

	.style-nav ul {
		text-align: center;
	}

	.title h1 {
		margin-bottom:200px;
		margin-top:100px;
		font-size:57px;
		}

  .logo-section img {
    width: 250px;
    }

  .col1 {
    float:left;
    text-align: center;
    margin-top: 25px;
  }

  .col1 p {
    margin-top: 10px;
  }


  .col {
    float:left;
  }

  .col-lg-one-third{
    width: 33%;
    margin-left: auto;
    margin-right: auto;
  }

	.col-lg-one-half{
		width:50%;
	}

  .box-right p {
    margin-top:40%;
  }

  #kontakt img {
    width: 10%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  #kontakt p {
     text-align: center;
     margin-top: 15px;
     margin-bottom: 20px;
  }

  .col2 img {
     width: 20%;
    }

  .col2 {
    text-align: center;
  }
}

@media screen and (max-width: 768px){
        .logo-section{
            float: none;
        }
        nav ul{
            background: #ffffff;
            max-height: 0;
            width: 100%;
        }
        nav ul.show{
            max-height: 20em;
        }
        nav ul li{
            box-sizing: border-box;
            width: 100%;
            padding: 15px;
        }
        .hb-button{
            display: inline;
        }
        .box-left a p {
          width: 250px;
          color: #000;
          border: 1px #ccc solid;
          text-align: left;
          padding:15px 10px 15px 10px;
          background-image: linear-gradient(#fefe14, #838383);
        }

        .box-left a {
          text-decoration: none;
        }
    }