.crossfade > figure {

  animation: imageAnimation 18s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: left center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

@keyframes
imageAnimation {

 0% {
 opacity: 0;
}
 0% {
 opacity: 1;
}
 34% {
 opacity: 1;
}
 34.01% {
 opacity: 0;
}
100% {
opacity: 0;

}
}

header {
  height: 100vh;
  width: 100%;
  padding: 156px 0 100px;
}

.crossfade > figure:nth-child(1) {
  background-image: url(../bilder/meitli.jpg);
}

.crossfade > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url(../bilder/bueb_meitli.jpg);
}

.crossfade > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url(../bilder/buebe.jpg);
  }

section {
  padding: 150px 0;
}

.k {
  color: rgba(0,0,0,.7);
}

h1 {
  font-weight: 700;
  font-family: 'Abril Fatface';
  font-size: 5rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: rgba(0,0,0,.7);
  margin-bottom: 2rem;
  letter-spacing: 0.1rem;
}

h2 {
  text-align: left;
  margin-bottom: 5rem;
  font-family: 'Abril Fatface', serif;
  color: rgba(0,0,0,.7);
  font-weight: 700;
  font-size: 4rem;
}

.home {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 4;
    padding: 1rem;
}

.nav-item{
  padding-right: 30px;
}

.navbar-collapse{
  justify-content: center;
}

.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

p {
  font-family: 'Rubik', sans-serif;
  color: #000000;
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

section {
  background-color: #ffffff;
}

.navbar {
  background-color: rgba(250, 250, 250,)!important;
  min-height: 100px;
}

#meitli{
  background-color: white;
}

#beidi{
    background-color: #002F53;
}

#buebe{
  background-color: white;
}

#facts{
  background-color: #E7EAEE;
}

h3 {
  color: ;
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-family: 'Rubik', serif;
  font-size: 1.5rem;
}

.titel {
  rgba(0,0,0,.7);
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-family: 'Rubik', serif;
  font-weight: 800;
  font-size: 1.1rem;
}

.card {
  background-color: transparent;
  border-width: 0px;
}

.card-header {
    padding: .75rem 1.25rem;
    margin-bottom: 0;
    background: none!important;
    border-bottom: 1px solid rgba(0,0,0,0);
}

.card-body {
  margin-top: -1rem;
  margin-bottom: 2rem;
}

 .landingpage {
   color: rgba(0,0,0,.6);
   font-size: 1.2rem;
 }

 .btn {
   background-color: transparent;
   font-family: 'Rubik', serif;
   margin-top: -2rem;
   color: #000;
 }

 .btn:focus{
   box-shadow: none;
 }

 .quelle {
   color: #707070;
 }

 .quelle2 {
   color: #707070;
   background-image: linear-gradient(120deg, #707070 0%, #707070 100%);
   background-repeat: no-repeat;
   background-size: 100% 0.1em;
   background-position: 0 0%;
   transition: background-size 0.25s ease-in;
   display: block;
   margin-top: 3rem;
   margin-bottom: 3rem;
 }

 a {
   color: rgba(0,0,0,.5);
 }

a:active {
   color: rgba(0,0,0,.6);
   text-decoration: none;
 }

 a:hover {
   color: rgba(0,0,0,.4);
   text-decoration: none;
 }


 #headingOne {
   padding-top: 5rem;
 }

.container-fluid {
  overflow-x: hidden;
  padding: 0;
}

section {
  overflow-x: hidden;
}

.kopicontainer {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 15px;
  z-index: 100;
}

@media (max-width: 768px) {

.crossfade > figure {
      width: 100%;
      height: 100%;
  }

  .crossfade > figure:nth-child(1) {
    background-position: -137px;
  }

  .crossfade > figure:nth-child(2) {
    background-position: -158px;
  }

  .crossfade > figure:nth-child(3) {
    background-position: -147px;
    }


.landingpage {
  display: none;
}

h1 {
  top: -20%;
  font-size: 3rem;
}

h2 {
  font-size: 3rem;
}

header {
  padding: 20px 0 100px;
}

}