/* Scaffolding */

html,
body {
  width: 100%;
  height: 100%;
  background:black;
  font-family: 'Roboto Slab', serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: #dddddd;
}

* {
  box-sizing: border-box;
}


body {}

h1 {
  font-weight: 400;
  font-size: 24px;
  font-family: 'Trade Winds', cursive;
}

@media (min-width: 768px) {
  h1 {
    font-weight: 700;
    font-size: 36px;
  }
  body {
    font-size: 18px;
  }
}

h2 {
  font-family: 'Trade Winds';
  font-size: 24px;
}

h2, h3, h4, h5, h6 {
  font-weight: 700;
}

a {

  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* Backgrounds */

.bg-holder {
  width: 100%;
  height: 80%;
  background-size: cover;
  background-position: 50% 50%;
  color: #fff;
}


.bg-holder .content {
  color: #fff;
  text-align: center;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

h2 {
  font-size: 32px;
  line-height: 1.5;
}

.pic1 {
  background-image: url('../img/bg/bg_1.jpg');
}

.pic2 {
  background-image: url('../img/bg/bg_2.jpg');
}

.pic3 {
  background-image: url('../img/bg/bg_3.jpg');
}

.pic4 {
  background-image: url('../img/bg/bg_4.jpg');
}

@media (min-width: 768px) {
  .pic1 {
    background-image: url('../img/bg/bg_1_big.jpg');
  }
  .pic2 {
    background-image: url('../img/bg/bg_2_big.jpg');
  }
  .pic3 {
    background-image: url('../img/bg/bg_3_big.jpg');
  }
  .pic4 {
    background-image: url('../img/bg/bg_4_big.jpg');
  }
}


/* Content Sections */

section {
  padding: 48px;
}

.content {
  margin: 0 auto;
  max-width: 960px;
}

.content h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

section p {
  margin: 0;
}

section p + p {
  text-indent: 2em;
}

section + hr {
  border: 0;
  border-top: 1px solid #ccc;
  height: 0;
}

section .gist {
  margin: 24px 0;
}

section .gist .gist-data {
  border-bottom: 0;
}

section .gist-meta {
  display: none;
}

.content code {
  font-family: monospace, serif;
  font-size: 16px;
  color: gray;
  white-space: nowrap;
}


/* Intro */

.intro h1 {
  margin: 0;
  line-height: 1.5;
  text-shadow: black 0.2em 0.2em 0.4em;
  color: #eee;
}

.intro p {
  margin: 0;
  font-size: 24px;
}

.cta {
  margin-top: 32px;
}

.btn-cta {
  color: #fff;
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 4px;
  padding: 8px 16px;
  margin: 0 4px;
  text-decoration: none;
}

.btn-cta:hover {
  background-color: white;
  color: #228B22;
  text-decoration: none;
}


/* Footer */

.footer {
  padding:0 0 20px;
  font-size:0.7em;
}

.footer h2 {
  margin:0;
  font-size:1.2em;
  font-family: 'Roboto Slab', serif;
}

.footer p {
  line-height: 1.3;
}


/* meins */
.signatur {
  font-style: italic;
  text-align: right;
}


.events {
  padding: 10px;
  text-align:left;
}

.events-footer {
  text-align:left;
}

.events-footer a{
  text-decoration:none;
  color: #dddddd;
}

.events-footer img {
  margin-right: 10px;
  float: left;
}


/* Reservierung */
@media (min-width: 768px) {
  #reservierung-container {
    display:flex;
  }
}


dl {
  text-align:left;
}

dt {
  font-size:16px;
  font-weight: bold;
}

dl span {
  font-size:18px;
  font-weight:bold;
}

@media (min-width: 768px) {
  dt {
    font-size:24px;
    font-weight: bold;
  }
  .events {
    padding:0;
  }
}


/* Galerie Overlay */
.gallery > ul {
  list-style-type: none;
}

.gallery > ul > li {
  float: left;
  width: 100%;
  height: auto;

  margin-bottom: -5px;
  position: relative;
}

@media (min-width: 370px) {
  .gallery > ul > li {
    width: 50%;
  }
}

@media (min-width: 480px) {
  .gallery > ul > li {
    width: 33%;
  }
}

@media (min-width: 768px) {
  .gallery > ul > li {
    width: 25%;
  }
}

.container .gallery a img {
  border: 2px solid #fff;
  -webkit-transition: -webkit-transform .15s ease;
  -moz-transition: -moz-transform .15s ease;
  -o-transition: -o-transform .15s ease;
  -ms-transition: -ms-transform .15s ease;
  transition: transform .15s ease;
  width: 100%;
}

@media (min-width: 768px) {
  .container .gallery a:hover img {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    z-index: 5;
  }
}

.overlay-box {
  position:relative;
  z-index: 100;
}



.overlay {
  position: absolute;
  background: rgba(200,200,200,.75);
  color: #333333;
  font-size: 16px;
  text-shadow: -1px -1px 0px rgba(255,255,255,0.3), 1px 1px 0px rgba(0,0,0,0.8);
  text-align:center;
  padding: 5px 10px;
  opacity:1;
  -webkit-transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  transition: opacity .5s ease;
  z-index: 200;
  top: 20%;
  width: 98%;
  margin-left: 1%;
}

@media (min-width: 768px) {
  .overlay-box:hover .overlay {
    opacity:1;
  }

  .overlay {
    font-size: 24px;
    opacity: 0;
    width: 104%;
    margin-left: -2%;
  }
}

#modal {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  height: 100%;
  width: 100%;
  display:none;
}

@media (min-width: 768px) {
  #modal {
    display: block;
  }
}

#modalclose {
  position: fixed;
  top: 10px;
  background: white;
  z-index: 1000;
  right: 10px;
  padding-left: 7px;
  line-height: 22px;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  font-weight: bold;
  cursor: pointer;
  color: black;
}

.modalcontent {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  background: #fff;
  height: 90%;
  padding: 5px;
}

.modalcontent a {
  position: relative;
}

.modalcontent img {
  width: 100%;
  height: 100%;
}

#logo {
  float:right;
  width: 30%;
  margin: 0 30px;
}

@media (min-width: 480px) {
  #logo {
    float:right;
    width: 20%;
    margin: 0 30px;
  }
}

@media (min-width: 768px) {
  #logo {
    float:left;
    margin: 0 30px;
  }
}

/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div           (normal)
.jssorb05 div:hover     (normal mouseover)
.jssorb05 .av           (active)
.jssorb05 .av:hover     (active mouseover)
.jssorb05 .dn           (mousedown)
*/
.jssorb05 {
  position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
  position: absolute;
  /* size of bullet elment */
  width: 16px;
  height: 16px;
  background: url('../img/slider/b05.png') no-repeat;
  overflow: hidden;
  cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

/* jssor slider arrow navigator skin 12 css */
/*
.jssora12l                  (normal)
.jssora12r                  (normal)
.jssora12l:hover            (normal mouseover)
.jssora12r:hover            (normal mouseover)
.jssora12l.jssora12ldn      (mousedown)
.jssora12r.jssora12rdn      (mousedown)
*/
.jssora12l, .jssora12r {
  display: block;
  position: absolute;
  /* size of arrow element */
  width: 30px;
  height: 46px;
  cursor: pointer;
  background: url('../img/slider/a12.png') no-repeat;
  overflow: hidden;
}
.jssora12l { background-position: -16px -37px; }
.jssora12r { background-position: -75px -37px; }
.jssora12l:hover { background-position: -136px -37px; }
.jssora12r:hover { background-position: -195px -37px; }
.jssora12l.jssora12ldn { background-position: -256px -37px; }
.jssora12r.jssora12rdn { background-position: -315px -37px; }


/* cyrillic-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(../fonts/RobotoSlab-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Trade Winds';
  font-style: normal;
  font-weight: 400;
  src: local('Trade Winds'), local('TradeWinds'), url(../fonts/TradeWinds-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



#close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
    font-size: 22px;
}

::backdrop {
    background: #000;
    opacity: 0.75;
}