body {
    background-color: black;
    font: normal normal normal 18/22px Helvetica;
    max-width: 100%;
    overflow-x: hidden;
    padding: 0px;
}

p {
    font-size: x-large;
}
h1 {
    text-align: center;
}
h2 {
    text-align: center;
}
h3 {
    text-align: center;
}
.jumbrotron {
    background-size: 100% 100%;
}

#Startseite-wrap {
    background-color: white;
    text-align: center;
}

.fit-image{
    width: 100%;
    object-fit: cover;
    }

.flag {
    height:0.9rem;
    width: auto;

    }

.frame {
    height: 70vh;
    width: 100%;
    justify-content: center;
    align-items: center;

}

.frame img {
    width: 100%;
    height:100%;
    object-fit: cover;
    overflow: hidden;
}

.home-img-cont {
    height: 100vh;
    width: 100%;
    background-image: url('mpu-alc.jpeg');
    background-size: cover;    
    background-image: -webkit-linear-gradient(left, 
    rgba(14, 14, 14, 0.9) 0%, 
    rgba(0, 0, 0, 0.766) 20%,
    rgba(0,0,0,0) 80%,
    rgba(255, 255, 255, 0.9) 100%
  ),
    url('mpu-alc.jpeg');
    background-repeat: no-repeat;
    filter: blur(1px)
}

.home-text-cont {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}



#bg-image {
    flex-shrink: 0%;
    height: 100vh;
    min-width: 100%;
    min-height: 100%;

}   

.banner {
    height: 30vh;
}
.png-cont {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.png-cont img {
    height: 100%;
    width: auto;
}

.card {
    margin: 1vw;
    padding: 0px;
}
.card-img-top {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.card p {
    font-size:medium;
}
.kontakt p{
margin: 0px;
}

/* Navbar */
.cheadcontact {
    font-size: small;
    margin-left: 5vw;
    margin-right: 5vw;
}

.nav-link {
    font: normal normal bold 18px/22px Helvetica;
    color: white;
}

.nav-link:hover {
    color: rgb(223,123,51);
}

.navbar {
    box-shadow: 0px 3px 6px #00000029;
    background-color: rgb(36,39,43);
    display: flex;
    justify-content: space-between;
}

.nav-link {
    color: white !important;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: rgb(223,123,51) ;
}

.navbar li a:hover {
    -moz-transition: all .1s ease-in-out;
    -webkit-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
  }

.dropdown-menu {
    background-color: rgb(36,39,43) !important;
}
.dropdown-item {
    color: white !important;
}

.dropdown-item:hover {
    color: black !important;
}

/*Edit starts here*/
.navbar li {
    position:relative;
  }
  
.navbar li::after {
      content: '';
      display: block;
      width: 0;
      position:absolute;
      left:0%;
      height: 2px;
      background: rgb(223,123,51);
      transition: cubic-bezier(.77,0,.18,1) 1s;
  }
  
 .navbar li:hover::after {
      width: 80%;
      left: 10%;
  }
  
 .navbar li {
    transition: cubic-bezier(.77,0,.18,1) 1s;
  }


.logo-navbar {
    height: 5vh;
    width: auto;
    padding-left: 3vw;
}

#navbar-mobile {
    display: none;
}

.mobile-cont {
    display: none;
}



.anchor {
    display: block;
    height: 72px;
    margin-top: -72px;
    visibility: hidden;
}

/* Sonstiges */
hr {
    border: 1px solid rgb(223,123,51) !important;
    margin-top: 2vh;
}

.iframe-container-mobile {
    display: none;
}

/* Footer */
#Footer p {
    font-size: medium;
}
#Footer {
    background-color: #23272B;
    color: white;
}

#Footer img {
    width: 6vw;
    height: auto;
}

#Footer a {
    text-decoration: none;
    color: white;
}

.ueber-uns-footer {
    width: 50%;
}

.auto-logo-footer {
    margin-left: 25vw;
    margin-top: -18vh;
}

#Footer a:hover {
    text-decoration: underline;
}

.parallax {
    /* The image used */
  background-image: url('fahrschule_wagen.jpeg');

  /* Full height */
  height: 60vh; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.alert {

    color: red;
    font-weight: bold;
    font-size:x-large;
    text-align: center;
    margin: 0px;
    padding: 0px;
    border-radius: 0px !important;
}

.home-mobile-bg-image {
    display: none;
}
#home-text-mobile {
    display: none;
}
#home-mobile {
    display: none;
}

/* Effects */
@-webkit-keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-moz-keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @-o-keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
.animation {
    animation-name: fade;
    animation-duration: 3s;
    animation-fill-mode: forwards;
}

.reveal{
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
  }
  
  .reveal.active{
    transform: translateY(0);
    opacity: 1;
  }
/* Media Queries for mobile */

/* GALERIE */

@media screen and (max-width: 1200px) {
    p {
        font-size: large;
    }
    li {
        font-size: large;
    }
    .home-mobile-bg-image {
        display: block;
        background-image: url('/static/mpu-alc.jpeg');
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(5px);
        height: 92vh;
        background-position:top;
    }
    .home-text-mobile {
        display: block;
        position:absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: auto;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: left;
        display: flex;
        align-items: center;
        color: white;
    }
    #home-mobile {
        display: block;
        position:absolute;
        /* background-color: rgb(0,0,0); Fallback color */
        top: 50%;
        left: 40%;
        height: 100%;
        width: auto;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: left;
        display: flex;
        align-items: center;
        color: white;
        background-image: -webkit-linear-gradient(left, 
        rgba(14, 14, 14, 0.9) 0%, 
       rgb(0, 0, 0) 20%,
        rgba(0, 0, 0, 0.586) 80%,
        rgba(9, 9, 9, 0) 100%);
   }
    #home-desktop {
        display: none;
   }

    #navbar-mobile {
        display: flex;
    }

    #navbar-desktop {
        display: none;
    }
    #banner {
        display: none;
    }
    .ueber-uns-footer {
        width: 100%;
    }

    .auto-logo-footer {
        display: none;
    }
}

@media screen and (max-width: 1300px) {
    .pic-col-mpu {
        display: none;
    }

}


@media screen and (max-width: 770px){
    .web-cont {
        display: none;
    }

    .mobile-cont {
        display: block;
    }
}