/* === Allgemein ===*/

/* Schriften */

@import url("https://fonts.googleapis.com/css?family=Alegreya+SC:700|Black+Ops+One|Montserrat|Roboto+Slab:500&display=swap");

body {
  position: relative;
}

body,
p {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Slab", serif;
}

.font-logo {
  font-family: "Black Ops One", cursive;
}

/* Button */

.btn-round {
  border-radius: 30px;
}

/* Farben */

.bg-overlay {
  height: 100%;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.9);
  position: absolute;
  top: 0;
}

.bg-unterbringoverlay {
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.25);
  position: absolute;
  top: 0;
}

.bg-touroverlay {
  height: 100%;
  width: 100%;
  background-color: rgba(241, 236, 236, 0.65);
  position: absolute;
  top: 0;
}

.bg-qundaoverlay {
  height: 100%;
  width: 100%;
  background-color: rgba(241, 236, 236, 0.65);
  position: absolute;
  top: 0;
}

a.text-white:hover,
a.text-white:hover {
  color: #dc3545 !important;
  text-decoration: none;
}

nav {
  -webkit-transition: 0.7s ease-in-out;
  -o-transition: 0.7s ease-in-out;
  transition: 0.7s ease-in-out;
}

/* Section */

section {
  padding: 100px 0;
}

/* Hilfsklassen */

.d-relative {
  position: relative;
}

/* Bild Hover */

#produkte .card img,
#impressionen img,
#bohne img {
  filter: grayscale(5%);
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in;
}

#produkte .card:hover img,
#impressionen img:hover,
#bohne img:hover {
  filter: none;
}

.card-img-overlay {
  z-index: 20;
  transform: rotate(-20deg);
}
/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.8);
  /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 0.5s ease;
  opacity: 0;
  color: #dc3545;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.card:hover .overlay {
  opacity: 0.5;
}

#impressionen_neu .carousel-inner .bg-dark {
  opacity: 0.75;
}

/* === Navigation ===*/

nav.navbar.navbar-dark button:hover,
nav.navbar.navbar-dark button:focus,
nav.navbar.navbar-dark .nav-link:hover {
  color: #dc3545;
}

.navbar-nav .badge {
  position: absolute;
  left: 25px;
  bottom: 25px;
  padding-right: 0.5em;
  padding-left: 0.5em;
}

.navbar-nav .icon-basket {
  line-height: 0.8;
  font-size: 1.5em;
}

.navbar.bg-white .navbar-nav .nav-link,
.navbar.bg-white a,
.navbar.bg-white a:hover,
.navbar.bg-white button {
  color: #333;
}

.navbar.bg-white button {
  border-color: rgba(51, 51, 51, 0.6);
}

.navbar .navbar-nav .nav-link.active {
  color: #dc3545;
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: #dc3545;
}

/* === Hero ===*/

.hero-bg {
  background: url("../img/motorcycle-hero-adjustet.jpg") 50% 0 fixed no-repeat;
  height: 100vh;
  background-size: cover;
}

#home .container {
  height: 100%;
}

#home .row {
  height: 80%;
}

/* === Über uns ===*/

.img-bg {
  position: absolute;
  overflow: hidden;
  right: 0px;
  top: 100px;
  /*!bottom: 0;*/
  width: 40vw;
}

/* === Die Bohnen ===*/

.bohne-bg {
  background: url("../img/motorcycle-hero_neu.jpg") 50% 0 fixed no-repeat;
  height: 100%;
  background-size: cover;
}

#bohne .rounded {
  border: 5px solid #fff;
}

/* === Unterbringung ===*/
.unterbring-bg {
  background: url("../img/room.jpg") 50% 0 fixed no-repeat;
  height: 100%;
  background-size: cover;
}

/* === Tour ===*/
.tour-bg {
  background: url("../img/tour_background.jpg") 50% 0 fixed no-repeat;
  height: 100%;
  background-size: cover;
}

/* === FAQ===*/
.qunda-bg {
  background: url("../img/question-mark.jpg") 50% 0 fixed no-repeat;
  height: 100%;
  background-size: cover;
}

/* === Testimonials ===*/

.testimonials-bg {
  background: url("../img/bg-testimonials.jpg") 50% 0 fixed no-repeat;
  height: 100%;
  background-size: cover;
}

#testimonial-carousel .carousel-control-prev,
#testimonial-carousel .carousel-control-next {
  width: 1%;
}

#testimonial-carousel .carousel-indicators {
  bottom: -30px;
}

#testimonial-carousel .carousel-indicators li {
  max-width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* === Impressionen ===*/

.card-columns {
  -webkit-column-gap: 0;
  -moz-column-gap: 0;
  column-gap: 0;
}

.card-columns .card {
  margin-bottom: -1px;
  border: 0;
}

.single_card {
  margin: 0 auto;
  /* Added */
  float: none;
  /* Added */
  margin-bottom: 10px;
  /* Added */
}


/* === Newsletter ===*/

.newsletter-bg {
  background: url("../img/bg-newsletter.jpg") 50% 0 fixed no-repeat;
  height: 100%;
  background-size: cover;
}

/* === Modal ===*/

.modal-open {
  padding-right: 0px !important;
}

/* === Kontakt ===*/

.input-group-lg>.form-control {
  border-radius: 30px;
}

.input-group-lg .input-group-prepend .input-group-text {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

/* === Footer ===*/

.bg-black {
  background-color: #333;
}

/* === Back to Top Button ===*/

#back-to-top-button {
  display: none;
  position: fixed;
  right: 40px;
  bottom: 40px;
}

/* Bugfixing */

h1,
h2,
h3,
h4,
h5,
h6,
.font-alt,
p,
button,
a {
  filter: blur(0);
}

.navbar::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 10px;
  left: 50%;
  bottom: -4px;
  margin-left: -90px;
  background: rgb(248, 0, 12);
}