body,h1,h2,h3,h4,h5,h6 {
  font-family: "Lato", sans-serif;
  /* font-family: 'Otomanopee One', sans-serif; */
}

body, html {
  height: 100%;
  color: #777;
  line-height: 1.8;
}
#top{
  background-color: #C21529;
  font-size: 2em;
}
#top a{
  color: azure;
  text-decoration: none;
}

h1{
  color: #C21529;
  font-weight: bold;
}
h3{
  color: black;
  font-weight: bold;
}

.impressum{
  color: #C21529;
  text-decoration: none;
  font-weight: bold;
}
/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('images/motorrad-ankauf-5.png');
  min-height: 100%;
  /* opacity: 0.65; */
}

#start-content{
  /* opacity: 1; */
  padding-top: -50%;  
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("images/motorrad-ankauf-1.png");
  min-height: 100%;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("images/motorrad-ankauf-3.png");
  min-height: 100%;
}
.bnoimg{
  background-color: #eeeeee;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}
/* If the screen size is 601px wide or more, set the font-size of <div> to 80px */
@media screen and (min-width: 601px) {
  .fa-star {
    color: #ffc700;
    font-size: 4.5em;
  }  
}

/* If the screen size is less 600px */
@media screen and (max-width: 600px) {
  .fa-star {
    color: #ffc700;
    font-size: 2em;
  }
  .display-3{
    font-size: 1.8em;
  }
}


.carousel-item-content{
  background-color: #ffffff;
  /* opacity: .8; */
}


.wrapper-buttons, .wrapper-buttons a{
  font-size: 1em; 
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  background-color: #C21529;
}

/* ##########  Acordion FAQ */
.accordion-button, .accordion-header, .accordion-button:not(.collapsed){
  color: #000000;
  font-size: x-large;
  background-color: #ffffff;
}

.accordion-button:focus{
  border-color: #000000;
  box-shadow: none;
}
.accordion-body{
  color: #C21529;
  font-weight: bold;
  font-size:x-large;
}
/* ################################# Tiles ####################################################################### */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

.fs-8{
  font-size: small;
}
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif
    }

    /* body {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center
    } */

    .container {
        transform-style: preserve-3d
    }

    .container .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 20px;
        transform-style: preserve-3d;
        perspective: 1000px;
        cursor: pointer
    }

    .container .box .body {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: 0.9s ease
    }

    .container .box .body .imgContainer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d
    }

    .container .box .body .imgContainer img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover
    }

    .container .box .body .content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #333;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        transform: rotateY(180deg)
    }

    .container .box:hover .body {
        transform: rotateY(180deg)
    }

    .container .box .body .content div {
        transform-style: preserve-3d;
        padding: 20px;
        background: linear-gradient(180deg, #f8001d, #C21529 ); /* , #474747);*/
        transform: translateZ(100px)
    }

    .container .box .body .content div h3 {
        letter-spacing: 1px
    }


    .imgContainer{
      background-color: #C21529;
    }
/* ################################# Tiles ####################################################################### */