/* APP Komponente */

html{
    background-color: white;
    color: black;

    height: 100vh;
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}
body{
    background-color: white;
    color: black;
    height: 100vh;
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    overflow-x: hidden;
}


.navbar-dark .navbar-nav .nav-link {
    color: #222222;
}
.online-booking{
   
    font-size: 18px!important;
    text-decoration: underline;
    color: black;
	font-weight: bold;
}
.bg-green{
    background-color: rgb(163, 183, 169);
}
.bg-pink{
    background-color: #dcb0ad;
}

.text-green{
    color: rgb(163, 183, 169);
}
.text-pink{
    color:#dcb0ad
}
.downArrow img{
    margin-top: -2rem; 
    width:50px;
    filter: brightness(0) invert(0.1);
}

.banner-animal{
    width: 150px;
    margin: 0 1rem;
}



.bounce {
	-moz-animation: bounce 3s infinite;
	-webkit-animation: bounce 3s infinite;
	animation: bounce 3s infinite;
}
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
button {
    box-shadow: none !important;
}

p{
    font-size: 18px;
}
.reviews p{
    font-size: 22px;
    font-weight: 500;
    line-height: 30px;
}

h1 {
    font-size: 1.5rem;
    line-height: 1;
}

#main-logo {
    margin: 1rem;
}
    .frankfurt{
        font-size: 0.7rem;
        letter-spacing: 4px;
        font-weight: bold;
    }


.font-small {
    font-size: 15px
}

#banner {
    background-image: url("../img/main-logo.png");
    height: 30vh;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.logo-text{
height:60px
}

.cursor-pointer{
cursor: pointer;
}
.btn-primary {
    background: black;
    border-radius: 5px;
    color: white;
    border-color: white;
    padding: 8px 24px;
}

.btn-primary:hover {
    background: #000;
    border-radius: 5px;
    color: #fff;
    border-color: black;
    padding: 8px 24px;
}

.btn-primary:focus {
    background: white;
    color: black;
    border-color: black;
    box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled):active {
    box-shadow: none;
    color: #fff;
    background-color: black;
    border-color: black;
}

.image-animal {
    width: 200px;
}

.logo-font {
    font-family: 'Roboto', sans-serif;
}

.image-white {
    filter: brightness(0) invert(1);
}
.parallax-phone {
    background-image: url("../img/bild3.jpg");
    min-height: 40vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(0.3);
}
.gallery-img{

	border-top: 3px solid white;
}

.mail-address:hover{
text-decoration: none;
}

@media (min-width: 767px) {
    .banner-animal{
        width: 350px;
        margin: 0 3rem;
    }
	
	.logo-text{
height:80px
}
}
@media (min-width: 992px) {

h1 {
    font-size: 4rem;
    line-height: 1;
}
    #main-logo {
        margin: 4rem;
    }
    .frankfurt{
        font-size: 1.7rem;
        letter-spacing: 10px;
    }

    #banner {
        margin-top: -80px;
        background-image: url("../img/main-logo.png");
        height: 100vh;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

    }
		.gallery-img{

	border-top: none;
}
	h2 {
    font-size: 2.7rem
}

}


/* Parallax */
.parallax {

    /* Create the parallax scrolling effect */

    background-image: url(../img/parallax.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: 0% 100%;
    background-repeat: no-repeat;
    -webkit-filter: grayscale(0.4);
    filter: grayscale(0.4);
}



/* Gallery */


/* Slider */

.slick-track:focus{
    outline: none;
}
.slick-slide:focus{
    outline: none;
}
.gallery-img{
    background-size: cover;
    filter: sepia(0.3);
    transition: all.3s ease;
    background-repeat: no-repeat;
    height: 50vh;
}
.gallery-img:hover{
    filter: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all.3s ease-out
}
#gallery1 {
    background-image: url("../img/bild1.jpg");
    background-position: top;
}

#gallery2 {
    background-image: url("../img/bild2.jpg");
    background-position: center;
}

#gallery3 {
    background-image: url("../img/parallax.jpg");
    background-position: 0 40%;
}

#gallery4 {
    background-image: url("../img/bild4.jpg");
    background-position: 0 60%;
}

#gallery5 {
    background-image: url("../img/bild5.jpg");
    background-position: 60% 25%;
}
#gallery6 {
    background-image: url("../img/bild6.jpg");
    background-position: 0 60%;
}
#gallery7 {
    background-image: url("../img/bild7.jpg");
    background-position: 0 55%;
}
#gallery8 {
    background-image: url("../img/bild8.jpg");
    background-position: 0 40%;
}


 @media (min-width: 992px) {

    .gallery-img{

        height: 30vh;
    }
	 #gallery3 {
    background-image: url("../img/bild3.jpg");
}
.parallax-phone {
    background-image: url("../img/parallax.jpg");

}

 }

 .footer-tile{
    min-height: 90px;
}
 .min-h-400{
     min-height: 400px;
 }
  /* Bewertungen */

  .table-image{
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 400px;
  }
  #bewertung-1 {
    background-image: url("../img/small_1.jpg");
    background-position: center;
}
#bewertung-2 {
    background-image: url("../img/small_2.jpg");
    background-position: center;
}
#bewertung-3 {
    background-image: url("../img/small_3.jpg");
    background-position: 50% 20%;
}
#bewertung-4 {
    background-image: url("../img/small_4.jpg");
    background-position: center;
}


 /* Speisekarte */
 strong {
    font-weight: bold;
}

.speisekarte_row h2 {
    font-size: 1.8rem;
}

.speisekarte_row p {
    font-size: 16px;
}

#vorspeise {
    background-image: url("../img/vorspeise.jpg");
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}

#spezial {
    background-image: url("../img/spezial.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#haupt_vegan {
    background-image: url("../img/haupt_vegan.jpg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
}

#haupt_fleisch {
    background-image: url("../img/haupt_fleisch.jpg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
}

#dessert {
    background-image: url("../img/dessert.jpg");
    background-repeat: no-repeat;
    background-position: 0 80%;
    background-size: cover;
}

#gnu {
    width: 130px
}

#nashorn {
    width: 170px
}

#antilope {
    width: 70px
}

#loewe {
    width: 200px
}

#zebra {
    width: 130px;
    transform: scaleX(-1);
}

@media (min-width: 992px) {

    .mail-address{
        font-size: 1.25rem;
        font-weight: bold;
    }
    .footer-tile{
        min-height: 160px;
    }
    #gnu {
        position: relative;
        bottom: -3rem;
        left: -4rem;
    }

    #loewe {
        position: relative;
        right: -2rem;
    }

    #zebra {
        position: relative;
        left: -6rem;
    }
}

#kontakt p{
    font-size: 1rem;
    line-height: 1.7;
}