body {
  font-family: 'Work Sans', sans-serif;
  position: relative;
  background: #f1fffa;
  text-transform: uppercase;
}

.icon-top {
  background: rgb(60, 30, 63);
}

.icon-top a {
  color: #f1fffa;
  font-size: 15px;
  transition: color 1s ease;

}

.icon-top a:hover {
  color: #242424;

}
.text-icon{
  font-size: 15px;
  float: right;
  color: #f1fffa;

}
.text-icon:hover{
  color:#242424;
}
/*Navbar*/

.navbar {
  background: rgb(127, 23, 148)!important;
  padding: 10px 15px!important;
  transition: padding 2s ease;
}

.navbar-background {
  padding: 2px 20px!important;
}




.navbar-brand {
  color: white;
  font-size: 25px;
  transition: all 5s;
}

.navbar-brand:hover {
  background: #e273b0;
  color: #242424;
  border-bottom: 2px solid transparent;
}

.navbar-toggler {
  border: 3px solid white;
  padding: 3px;

}

.bar1,
.bar2,
.bar3 {
  width: 23px;
  height: 3px;
  margin: 5px;
  background: white;
  transition: all 0.5s ease;
}

.change .bar1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: rotate(45deg) translate(-5px, -8px);
}




.nav-link {
  color: #f1fffa;
  font-size: 25px;
  padding: 10px 20px!important;
  border-radius: 25px;
  transition: background 2s ease;
}

.nav-link:hover {
  background: #b361ac;
  color: #f1fffa;

}

.nav-active {
  color: #f1fffa;
  font-size: 25px;
  padding: 10px 20px!important;
  border-radius: 25px;
  background: rgba(224, 128, 204, 0.6);
  transition: background 2s ease;
}

.nav-active:hover {
  background: #e780da;
}
.mrt a{
  font-size: 12px;
  background: blueviolet;
  color:#fff!important;
  border-radius: 60px;
  padding: 10px 25px !important;
  width: 100px;
  box-shadow: 10px 3px 5px rgb(49, 6, 49);
}
.mrt a:hover{
  background: rgb(174, 0, 255);
  box-shadow: none;
}
@media only sceen and (max-width: 1140px)
and (min-width : 320px) 
and (max-width : 568px)
{
  .navbar-brand {
    margin-left: 0px;
  }

}
@media only screen and (max-width: 991px){
  .art a{
    margin-top:10px;
    margin-bottom:10px;
  }
}
/*banner*/

.item
 {
 min-height: 60vh;
}

.no-padding {
  padding: 0;
}

.banner-btn {
  color: #f1fffa;
  border: 2px solid #f1fffa;
  transition: all 1s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.banner-btn:hover {
  color: white;
  background: #f1fffa;
  border-color: #f1fffa;
  transform: translateY(-7px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);

}

/*title*/

.title h1 {
  color: #242424;
 padding-top: 30px;
 font-size: 30px;
}

.title-underline {
  height: 5px;
  width: 250px;
  background: rgb(62, 36, 83);
  margin: -28px auto 0 auto;
}

.title a {
  color: #e780da;
  font-size: 30px;
  padding: 0px 10px;
  display: inline-block;
  background: #f1fffa;

}




/*current service*/
.text-uppercase h2{
  color: #f1fffa;
}
.service-list{
  color: #f1fffa;
}
#current-service {
  background: rgb(143, 188, 173);
  background-position: 0px;

}

.current-service-photo {
  position: relative;
  min-height: 50vh;
}

.current-service {
  width: 50%;
  height: 60%;
  position: absolute;
  transition: all 2s ease-in-out;
}

.current-service:hover {
  z-index: 10;
  transform: scale(1.1);
}

.current-service-1 {
  top: 0;
  left: 10%;
  transform: rotate(-15deg);
  z-index: 20;
}



.current-service-2 {
  top: 0;
  left: 46%;
  transform: rotate(8deg);
  z-index: 30;
}

.current-service-3 {
  top: 40%;
  left: 3%;
  transform: rotate(-5deg);
}

.current-service-4 {
  top: 41%;
  left: 40%;
  transform: rotate(38deg);
}

.current-service-5{
  top: 42%;
  left: 5%;
  transform: rotate(60deg);
}
.current-service-6{
  top: 45%;
  left: 45%;
  transform: rotate(90deg);
}
.current-service-7{
  top: 50%;
  left: 10%;
  transform: rotate(75deg);
}
.current-service:hover {
  transform: scale(1.1);
  z-index: 50;
}

#work .work-title-text {
  margin: 40px;
  padding-right: 30px;
  border-right: 3px solid #ced0ce;
}


#work button {
  font-size: 15px;
  padding: 15px 25px;
  margin: 5px;
  background-color: #332430;
  border-radius: 0;
  color: #ec77dd;
}

#work button:hover {
  background-color: #f3aef3;
  color: #372642;
}

/*price*/
.text h2{
  background-color: rgb(207, 174, 238);
  padding-left: 20px;
  padding-top: 20px;
}
.text p{
  margin: 48px;
  Padding-left:40px;
  Padding-right:40px;
  Border: 20px;
}

/*contact*/
.text p{
  margin: 30px;
  padding-left: 30px;
  border: 50px;
}
.text a{
  margin: 40px;
}
.pt-4{
  margin: 30px;
}
.map-container-6{
  margin-left: 30px;
  overflow:hidden;
  padding-bottom: 50px;
  position:relative;
  height:0;
  }
  .map-container-6 iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
  }
  .h2{
    margin-top: 50px;
  }



/*footer*/

footer {
  background: #462a42;
}

.footer-icons a {
  color: white;
  font-size: 15px;
  transition: color 1s ease;

}

.footer-icons a:hover {
  color: black;
}

footer h5 {
  color: #f1fffa;
  font-size: 10px;
}
.Impressum-inhalt {
  border-left: 40px;
  float: right;
  padding-left: 40px;
  padding-right: 40px;
}
/*Resevierung*/
.Reservierung h3{
  margin-top: 30px;
}
.contact{
  margin: 28px;

}
.contact-input {
  width: 100%;
  margin-bottom: 28px;
  background-color: rgb(255, 255, 255);
}
.contact-input:focus,
input.contact-input:focus {
  border: 1px solid rgb(30, 30, 30);
  background-color: rgb(230, 230, 230);
}
.contact-message {
  height: 100px;
  
}
input.contact-submit[type="submit"] {
  background-color: rgb(255, 255, 255);
}
.contact-form {
  margin-bottom: 0px;
}
.contact-label {
  color: rgb(255, 255, 255);
  display: none;
}
#contactformular {
  color: rgb(255, 255, 255);
  padding-top: 20px;
  padding-bottom: 20px;
}