@import url("fonts/style.css");


.burger {
    cursor: pointer;
    padding-top: 22px;
    padding-left: 22px;

    position: relative;
    width: 38px;
    padding: 0;
    height: 38px;
    z-index:1010;

}
.burger span {
    position: absolute;
    display: block;
    left: 0px;
    height: 5px;
    width: 100%;;
    background: #f8e7d2;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    -webkit-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    opacity: 1;
}
.burger span.top {
    top: 0px;
}
.burger span.middle {
    top: 15px;
}
.burger span.bottom {
    top: 30px;
}


.menuOpen  .burger span {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.menuOpen  .burger span.top {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 44px;

    left:3px;

}

.menuOpen  .burger span {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.menuOpen  .burger span.middle {
    opacity: 0;
    width: 0;
}


.menuOpen  .burger span {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.menuOpen  .burger span.bottom {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    width: 44px;
    left: -1px;
    top: 31px;
}


.menubg {
    background-color:#222b32;
    position:fixed;top:0px;left:0%;width:100%;height:100%;z-index:99;
    display:none;
}

nav.navi {
    position:fixed;z-index:100;top:0px;padding-left:0%;
    width:100%;display:none;height:100vh;
}

.mainmenu {font-family:'Big John PRO Bold';font-weight:normal;
text-transform:uppercase;
text-align:center;padding-top:120px;

}
.mainmenu a {padding:20px 0px;display:block;text-decoration:none;}

.navi .lang {text-align:center;position:absolute;
bottom:200px;width:100%;}
.navi .lang a {padding:5px 20px;display:inline-block}


.marquee p {
    /* Starting position */
    margin:0;
    -moz-transform:translateX(100%);
    -webkit-transform:translateX(100%);
    transform:translateX(100%);
    /* Apply animation to this element */
    -moz-animation: scroll-left 25s linear infinite;
    -webkit-animation: scroll-left 25s linear infinite;
    animation: scroll-left 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
    0%   { -moz-transform: translateX(100%); }
    100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
    0%   { -webkit-transform: translateX(100%); }
    100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
    0%   {
        -moz-transform: translateX(100%); /* Browser bug fix */
        -webkit-transform: translateX(100%); /* Browser bug fix */
        transform: translateX(100%);
    }
    100% {
        -moz-transform: translateX(-100%); /* Browser bug fix */
        -webkit-transform: translateX(-100%); /* Browser bug fix */
        transform: translateX(-100%);
    }
}

.marquee p:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;

}
.marquee {width:100%;
    font-size:16px;line-height:20px;padding:20px 0px 50px 0px;text-transform:uppercase;  white-space: nowrap;overflow:hidden;
    }

.marquee span {border-bottom:1px solid #ebdcc9;width:170px;display:inline-block;}

html {
  font-size:100%;}

html,body {
  height: 100%;
}
body {background-color:#222b32;    font-size:24px;          line-height:30px;
font-family:'Big John PRO Regular';font-weight:normal;font-style: normal; color:#f8e6d1;letter-spacing:0.5px;
}

b, strong {
font-family:'Big John PRO Bold';font-weight:normal;
}


.header {font-size:16px;line-height:20px;text-transform:uppercase;
    width: 100%;background-color:#222b32;z-index:200;padding-bottom:15px;
}

h1 {
    font-size:64px;line-height:78px;font-family:'Big John PRO Bold';font-weight:normal;letter-spacing:0.5px;text-transform:uppercase;
}


h2 {
  font-size:50px;line-height:60px;font-family:'Big John PRO Bold';font-weight:normal;letter-spacing:0.5px;text-transform:uppercase;
}

h4 {
    font-size:27px;line-height:36px;font-family:'Big John PRO Bold';font-weight:normal;letter-spacing:0.5px;text-transform:uppercase;
    margin-bottom:16px;
}

h5 {
    font-size:20px;line-height:36px;font-family:'Big John PRO Bold';font-weight:normal;letter-spacing:0px;text-transform:uppercase;
    margin-bottom:16px;
}

a {color:#f8e6d1;}
a:hover {color:#f8e6d1;}

.btn {
    color:#f8e6d1;border:4px solid #f8e7d2;font-family:'Big John PRO Bold';font-weight:normal;
    letter-spacing:0;padding:18px 40px;line-height:1em;border-radius:0;text-transform:uppercase;
}
.btn:hover {background-color:#f8e6d1;}


.bilder3 .container , .bildblock {position:relative;}
.bilder3 .bildblock {background-size:0%}
.bilder3 {padding-bottom:120px;}
.bilder3 .headline {position:absolute;top:0px;right:0px;z-index:40;}
.bilder3 .diebilder {padding-top:60px;}
.bildblock .titel {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    display: flex;
    z-index: 50;
    justify-content: center;
    flex-direction: column;
    text-align: center;

}
.bildblock .titel h2 {margin-bottom:40px;}
.bildblock .titel hr{

    margin:0 auto;
    opacity:1;
    height:1px;
    width:190px;
}

.bildblock .overlay {
    position: absolute;display:none;
    width: 100%;

    bottom: 0px;

    z-index: 50;
   padding: 0px 100px 30px 100px;
    text-align: center;

}
.bildblock:hover .overlay {display:block;}
// .bilder3 .bildblock:hover .bild {opacity:0.6;}

.bilderswiper .swiper-wrapper .swiper-slide::after, .bildblock .bild::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-size:contain;

}

.bild1 .bildblock .bild::after {
    background-image: url('img/img1.png');
}
.bild2 .bildblock .bild::after {
    background-image: url('img/img3.png');
}
.bild3 .bildblock .bild::after {
    background-image: url('img/img2.png');
}

.bilderswiper .swiper-wrapper .swiper-slide::after,.bilder3 .bildblock:hover .bild::after {
    background-image: url('img/hover.png');
}
.bilderswiper .swiper-wrapper .swiper-slide::after {pointer-events: none;background:none;
    background-color:rgba(0,0,0,0.3)
}

.eventslider .element .bild {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('img/event.png');
    background-size:cover;

}
.bild2 .bildblock .overlay {padding-left:20px;padding-right:20px;padding-bottom:100px;}
.bild3 .bildblock .overlay {padding-left:30px;padding-right:30px;}

@media (min-width:768px)
{
    .bild2 {padding-top:280px !important
    }
}
.beschreibung .headline h1, .bilder3 h1 {margin-bottom:20px;}
.beschreibung .headline h1:after, .bilder3 .headline h1:after{
    content: "";
    background: #f8e6d1;

    height: 1px;
    width: 330px;
    position: absolute;
    bottom: 35px;
    left: -340px;
}

.bilder3 .btn {padding:15px 50px;}


.eventslider {padding-bottom:200px;}
.eventslider .mySwiper {padding-bottom:40px;padding-top:100px;}
.eventslider .swiper-slide-next {margin-top:-100px;}

.eventslider  .slider , .eventslider .container {position:relative}
.eventslider  .slider .element {height:700px;text-align:center;
display:flex;position:relative;background-size: cover;
}

.eventslider .headline {position:absolute;top:10px;left:15px;z-index:40;}
.eventslider .headline h1:after {
    content: "";
    background: #f8e6d1;
    height: 1px;
    width: 330px;
    position: absolute;
    bottom: 24px;
    left: 275px;
}

.eventslider .booking {position:absolute;bottom:-29px;width:100%;}
.eventslider .inhalt {position:absolute;bottom:60px;left:0px;width:100%;align-self:end;
padding-left:10px;padding-right:10px;
}
.eventslider .txt {
    font-size:18px;line-height:26px;font-family:'Big John PRO Bold';font-weight:normal;letter-spacing:0.5px;text-transform:uppercase;}
.eventslider  .titel hr {
    margin: 0 auto;
    opacity: 1;
    height: 1px;
    width: 250px;
}
.eventslider  .titel h2 {margin-bottom:20px;}
.eventslider  .titel {padding-bottom:35px;}

.eventslider .datum {position:absolute;
top:0px;right:40px;background-color:#f8e7d2;color:#000;
    padding:12px;
    font-size:18px;line-height:22px;font-family:'Big John PRO Bold';font-weight:normal;letter-spacing:0.5px;text-transform:uppercase;
}
.eventslider .datum span {font-size:28px;}
.eventslider .txt b {font-size:24px;}


.mySwiper .swiper-button-next {
    right: 35%;
    left: auto;

}
.mySwiper .swiper-button-prev {
    left: 35%;
    right: auto;

}
.mySwiper .swiper-button-prev, .mySwiper .swiper-button-next {
    top: auto;
    bottom: 10px; width:200px;

}
.mySwiper .swiper-button-next:after, .mySwiper  .swiper-button-prev:after {
    content: '';
}


.evento {padding-bottom:130px;}
.evento .container {position:relative;}

.evento .textblock {position:absolute;

    height: 100%;
    top: 0px;
    display: flex;
    z-index: 50;
    justify-content: center;
    flex-direction: column;
    text-align: left;color:#212a32;
}
.evento .textblock .rosatext {background-color:#f8e7d2;padding:50px;position:relative;padding-bottom:25px;margin-right:15px;}
.evento .textblock .rosatext .maillink {position:absolute;right:34px;bottom:40px;}

.beschreibung {padding-bottom:90px;}
.beschreibung .txt {padding-top:45px;}
.beschreibung .txt p {padding:1rem 0;}

.beschreibung .head {position:relative}
.beschreibung .headline {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 60;
}

.footer {  background: linear-gradient(90deg, #f8e7d2 50%, #222b32 50%);}
.footer .txt {color:#222b32;padding-top:80px}
.footer .txt a {color:#222b32;}

.footer h1 {padding-bottom:40px;}
.footer h4 {margin-bottom:11px;}
.footer small {font-size:12px}

.footer .head h5 {padding-left:5px;}
.footer .head svg {display:inline-block;margin-top:-9px;margin-left:15px;width:33px;height:auto;}
.footer .head .col-6 {padding:5px;}
.footer .head .bilder {margin-bottom:-5px;padding-left:8px}












/* old shit */


 img.responsive {max-width:100%;height:auto;width:100%;}
 .img-responsive {
  max-width:100%;height:auto;width:100%;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #f8e6d1;
}



.content {
  padding-top:1.7rem;
}

.menu {
  text-transform:uppercase;font-family:'Big John PRO Bold';font-weight:normal;

}

.menu a   {
  display:inline-block;padding:0px 30px;text-decoration:none;
    padding-top:10px;
}

.menu a:hover {
  text-decoration:underline;

}



.lang {
    text-transform: uppercase;
    white-space: nowrap;

}


.lang a  {
    padding-top:10px;text-decoration:none;display:block;
}

.lang a.on {font-family:'Big John PRO Bold';font-weight:normal;}


.bilderswiper {padding-top:10px;padding-bottom:90px}

.bilderswiper .logo {margin:0 auto;top:50%;margin-top:-110px;position:absolute;text-align:center;width:100%;z-index:99;pointer-events: none}
.bilderswiper .logo img {max-width:220px;height:auto;}

.slick-dotted.slick-slider {
    margin-bottom: 0px  !important;
}





@media (max-width: 1399px)
{
.header .btn {padding: 18px 20px;}
    .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next {
        width: 170px;
    }
     h2 {font-size:45px;}
    .footer .txt {padding-top:30px;}
  .footer h1 {padding-bottom:18px;}
  .bilder3 .bildblock:hover hr {display:none;}
}
@media (max-width: 1199px)
{
    .marquee {padding-bottom:30px;}
    .eventslider .headline h1:after {
        width: 230px;
        bottom: 14px;
        left: 178px;
    }

    .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next {
        width: 120px;
    }


    body {font-size:18px;line-height:24px;}
    .menu a {
        padding: 0px 16px;padding-top:10px;

    }
    h1 {font-size:40px;line-height:40px;}
    h2 {font-size:36px;line-height:38px;}
    h4 {font-size:20px;line-height:24px;}
    .bilderswiper {padding-bottom:70px}

    .bilder3 .diebilder {
        padding-top: 30px;
    }
    .evento .textblock .rosatext {
        padding: 35px;
padding-right:50px;
        padding-bottom: 15px;
        margin-right: 15px;
    }
    .evento .textblock .rosatext .maillink {

        right: 24px;
        bottom: 20px;
    }
    .beschreibung .headline h1, .bilder3 h1 {
        margin-bottom: 29px;
    }

    .evento {
        padding-bottom: 100px;
    }
}

@media (max-width: 1100px) {
    .bilder3 .bildblock hr {display:none;}
    .bilder3 .bildblock .overlay {display:block;}

}









@media (max-width: 991px)
{
    .mySwiper .swiper-button-next {
        right: 1%;

    }
    .mySwiper .swiper-button-prev {
        right: 180px;left:auto;

    }

    .btn {padding:18px}
    .marquee {padding-bottom:30px;}
    .menu a {padding-bottom:10px;width:180px;}

    .bilder3 .headline {
        right: 15px;
    }
    .bildblock .overlay {
        padding: 0px 20px 10px 20px;
    }
    .beschreibung .headline h1:after, .bilder3 .headline h1:after {
        width: 150px;
        left: -160px;
    }
    .bild1  .bildblock .titel {

        top: 20px;
        justify-content: start;
    }
    .bild1 .overlay {
        padding-bottom:0px;
    }
        .bild2 {
            padding-top: 180px !important;
        }
    .bild2 .bildblock .overlay {
        padding-bottom: 60px;
    }
}
@media (max-width: 767px) {
    .mainmenu {
        padding-top:60px;

    }
    .navi .lang {
        bottom:120px;
    }

    .bilderswiper .logo {margin-top:-55px;}
    .bilderswiper .logo img {max-width:110px;height:auto;}

    .bilder3 {
        padding-bottom: 80px;
    }
    .eventslider .mySwiper {

        padding-top: 60px;
    }

    .bilder3 .bildblock .bild::after {
        background-image: url('img/mobile.png') !important;
    }
    .eventslider .swiper-wrapper { }
    .eventslider .slider .element {
        height: 400px;border: 4px solid #f8e7d2;background-position:center;
    }
    .eventslider {
        padding-bottom: 120px;
    }
    .eventslider .datum {
        top: -1px;}


    .eventslider .headline h1:after {
        display:none;
    }
    .eventslider .swiper-slide-next {margin-top:00px;}


    .eventslider .booking .btn {
    background-color:#000;
    }
    .eventslider .booking {
        position: absolute;
        bottom: -24px;
    }
    .eventslider .inhalt {

        bottom: 30px;
    }
    .mySwiper .swiper-button-next {right:-1px;}
    .mySwiper .swiper-button-prev, .mySwiper .swiper-button-next {
color:#f8e7d2;
        bottom: auto;

        top: 50%;
        width: calc(var(--swiper-navigation-size) / 44 * 27);
        height: var(--swiper-navigation-size);
        background-color:#222b32;z-index:99;
    }
    .mySwiper .swiper-button-prev svg , .mySwiper .swiper-button-next svg { display:none;}
        .mySwiper .swiper-button-prev {
            right: auto;
            left: 0px;
        }

    .mySwiper .swiper-button-next:after {
        content: 'next';
    }
    .mySwiper .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
        content: 'prev';
    }


    .btn {font-size:12px;
        padding: 10px 8px;
    }
    .bilder3 .headline {position:relative;right:auto;}
    .bilder3 .headline .menubtn {top:0px;right:0px;}
    .bilder3 .btn {
        padding: 15px 15px;
    }
    .bilder3 .diebilder {
        padding-top: 0px;
    }
    .bilder3 .bildblock {border:4px solid #f8e7d2;background-size:cover;}
    .bilder3 .bildblock .bild img {display:none}
    .bilder3 .bildblock .overlay,     .bilder3 .bildblock .titel {
        position:relative;height:auto;display:block;top:0;
    }
    .bilder3 .bildblock .overlay {padding-top:10px;padding-bottom:10px;}
    .bilder3 .bildblock .titel h2 {
        margin-bottom: 20px;padding-top:30px;
    }
    .bilder3 .bildblock hr {
        display: block;margin-bottom:10px;
    }
    .bilder3 .bild2 {
        padding-top: 1.5rem !important;
    }
        .bild2 .bildblock .overlay {

        }
    .evento .textblock {margin-top:250px;
    margin-left:20px;margin-right:20px;
    }
    .evento .bildblock {border:3px solid #f8e7d2;}
    .evento .textblock .rosatext {
        padding: 25px;
        margin-right: 15px;
    }
    .evento .bildblock .titel h2 {
        margin-bottom: 20px;
    }
    .evento {margin-bottom:280px;}

        .beschreibung .headline h1:after, .bilder3 .headline h1:after {
    display:none;
        }
        .beschreibung .headline {position:relative;right:auto;}
        .beschreibung .headline h1 {margin-bottom:5px;padding-left:15px;}
    .beschreibung .txt {
        padding-top: 15px;padding-left:15px;padding-right:15px;
    }

    .footer {
        background: none;
    }
    .footer .txt {background-color: #f8e7d2;
    margin-top:20px;margin-left:-15px;margin-right:-15px;
        padding-left:20px;padding-right:20px;
        margin-bottom:-16px;padding-bottom:15px;
    }
    .beschreibung {
        padding-bottom: 60px;
    }
    .header {min-height:65px}
    .header .container {padding-top:15px;}

    .marquee p {
        -moz-animation: scroll-left 15s linear infinite;
        -webkit-animation: scroll-left 15s linear infinite;
        animation: scroll-left 15s linear infinite;
    }
    .marquee span {border-bottom:1px solid #ebdcc9;width:70px;display:inline-block;}

}