html, body {
  overflow-x: hidden;
}

body {
  font-family: "Open Sans", sans-serif;
}

.navbar {
  border-radius:       0px;
  background-color:    #231f20;
  margin-bottom:       0;
  font-family:         "Metal Mania", cursive;
  font-size:           1.2em;
  color:               #fff;
  background-image:    radial-gradient(white 15%, transparent 16%);
  background-size:     15px 15px;
  background-position: 0px 0px;
  background-repeat:   repeat-x;
}

@media screen and (min-width: 768px) {
  .navbar {
    max-height:  130px;
    height:      20vh;
    min-height:  50px;
    font-size:   2em;
    padding-top: 5px;
  }
}

.navbar .container-fluid {
  height: 100%;
}

#main-nav-bar {
  height:  100% !important;
  display: flex !important;
}

@media screen and (min-width: 768px) {
  #main-nav-bar {
    justify-content: center;
  }
}

#main-nav-bar ul, #main-nav-bar ul > li {
  height: 100%;
}

#main-nav-bar ul {
  display: flex;
}

@media screen and (min-width: 768px) {
  #main-nav-bar ul {
    flex-basis: 40%;
  }
}

@media screen and (max-width: 767px) {
  #main-nav-bar ul, #main-nav-bar ul > li {
    height: auto;
  }

  #main-nav-bar ul {
    flex-wrap: wrap;
  }

  #main-nav-bar ul > li > a {
    padding: 5px 10px;
  }
}

#main-nav-bar ul:first-child {
  justify-content: center;
  order:           2;
}

#main-nav-bar ul:last-child {
  justify-content: center;
  order:           3;
}

@media screen and (max-width: 767px) {
  #main-nav-bar ul:last-child {
    margin-left: 10px;
  }
}

@media screen and (min-width: 768px) {
  #main-nav-bar ul:first-child {
    justify-content: flex-end;
    order:           1;
  }

  #main-nav-bar ul:last-child {
    justify-content: flex-start;
  }
}

#main-nav-bar ul > li {
  display:         -webkit-flex;
  display:         -moz-flex;
  display:         -ms-flex;
  display:         -o-flex;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

.navbar .nav li {
  transition: 0.2s color;
}

.navbar .nav li:hover,
.navbar .nav li.active {
  color: #9a0000;
}

.navbar .nav li.active a {
  background-color: transparent !important;
}

.navbar li a {
  color: inherit !important;
}

#logo {
  height:     100px;
  margin-top: 15px;
  flex-basis: 20%;
  order:      1;
  text-align: center;
}

@media screen and (max-width: 767px) {
  #logo {
    margin-left:  0;
    margin-right: 15px;
  }
}

@media screen and (min-width: 768px) {
  #logo {
    height:     25vh;
    min-height: 70px;
    max-height: 200px;
    min-width:  200px;
    order:      2;
  }
}

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

main .container-fluid {
  color:      #fff;

  /* taken from https://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%2839\%2C37\%2C37\%2C1\%29\%200\%25\%2C\%20rgba\%2853\%2C50\%2C50\%2C1\%29\%2051\%25\%2C\%20rgba\%2839\%2C37\%2C37\%2C1\%29\%20100\%25\%29\%3B\%20/*\%20FF3\.6+\%20*/' */ background: #272525; /* Old Browsers */ background: -moz-linear-gradient(left, #272525 0 %, #353232 51 %, #272525 100 %); /* FF3.6+ */ background: -webkit-gradient(left top, right top, color-stop(0 %, #272525), color-stop(51 %, #353232), color-stop(100 %, #272525)); /* Chrome, Safari4+ */ background: -webkit-linear-gradient(left, #272525 0 %, #353232 51 %, #272525 100 %); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #272525 0 %, #353232 51 %, #272525 100 %); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #272525 0%, #353232 51%, #272525 100%); /* IE 10+ */
  background: linear-gradient(to right, #272525 0%, #353232 51%, #272525 100%); /* W3C */
  filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#272525', endColorstr='#272525', GradientType=1); /* IE6-9 */
}

main .container-fluid:nth-child(even) {
  /* taken from https://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%2850\%2C47\%2C47\%2C1\%29\%200\%25\%2C\%20rgba\%2867\%2C64\%2C65\%2C1\%29\%2051\%25\%2C\%20rgba\%2850\%2C47\%2C47\%2C1\%29\%20100\%25\%29\%3B\%20/*\%20FF3\.6+\%20*/' */ background: #322f2f; /* Old Browsers */ background: -moz-linear-gradient(left, #322f2f 0 %, #434041 51 %, #322f2f 100 %); /* FF3.6+ */ background: -webkit-gradient(left top, right top, color-stop(0 %, #322f2f), color-stop(51 %, #434041), color-stop(100 %, #322f2f)); /* Chrome, Safari4+ */ background: -webkit-linear-gradient(left, #322f2f 0 %, #434041 51 %, #322f2f 100 %); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #322f2f 0 %, #434041 51 %, #322f2f 100 %); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #322f2f 0%, #434041 51%, #322f2f 100%); /* IE 10+ */
  background: linear-gradient(to right, #322f2f 0%, #434041 51%, #322f2f 100%); /* W3C */
  filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#322f2f', endColorstr='#322f2f', GradientType=1); /* IE6-9 */
}

main .container {
  padding-top:    10vh;
  padding-bottom: 10vh;
}

main .container header {
  text-align: center;
  font-size:  3.5em;
}

main .container header h3 {
  font-size:     inherit;
  margin-top:    0;
  margin-bottom: 95px;
}

main .container-fluid--imprint,
main .container-fluid--home {
  padding-bottom: 50px;
}

main .container-fluid--home {
  /*background-image: url(../img/bg.jpg);
  -webkit-background-size: cover;
  background-size: cover;*/
  /*background-repeat: no-repeat;
  background-image: url(../img/25440270_353075701823171_5096340552798635956_o.jpg);
  background-color: #000;
  background-size: contain;
  background-position: 50% 20vh;*/
  padding-bottom: 0;
}

main .container#home {
  /* height: calc(100vh - 20vh); */
  /* min-height: auto; */
  max-width: 450px;
  display:   none;
}

main .container#hero {
  width:        100vw;
  padding:      0;
  margin-left:  -15px;
  margin-right: -15px;
}

main .container#hero.covid-19 {
  position: relative;
}
main .container#hero.covid-19 img {
  opacity: 0.03;
}

main .container#hero .covid-19 {
  opacity:  1;
  position: absolute;
  padding: 15px;
  display: none;
}

.covid-19 .teaser h2 {
  font-size: 3rem;
}

.flex-container {
  display:         flex;
  justify-content: center;
  align-items:     center;
  position:        absolute;
  width:           100%;
  height:          100%;
}

main .container#hero img {
  width:   100%;
  height:  auto;
  display: block;
}

/*main .container#home,
main .container#imprint {
    margin-top: 20vh;
}*/
main .container#home .teaser {
  text-align:    center;
  font-size:     4.3em;
  margin-bottom: 10vh;
}

main .container#home .teaser h2 {
  font-size: inherit;
}

main .container#home .teaser + .row {
  max-width: 400px;
  margin:    0 auto;
  font-size: 1.2em;
}

main .container#home .teaser + .row .call-to-action {
  text-align: right;
  font-size:  1.2em;
}

main .container#imprint {
  min-height: calc(100vh - 20vh - 150px - 50px);
  max-width:  750px;
  margin-top: 20vh;
}

main .container#bio .bio {
  text-align:  center;
  font-size:   1.2em;
  line-height: 1.6;
}

main .container#bio .bio.bio--footer {
  font-family: "Metal Mania";
  font-size:   2em;
}

main .container#bio .bio p {
  margin-bottom: 1.5em;
}

main .container#menu .nav-tabs,
main .container#covid-rules .nav-tabs{
  display:         -webkit-flex;
  display:         -moz-flex;
  display:         -ms-flex;
  display:         -o-flex;
  display:         flex;
  justify-content: center;
}

main .container#menu .nav-tabs > li,
main .container#covid-rules .nav-tabs > li{
  color: #fff;
}

main .container#menu .nav-tabs > li a,
main .container#covid-rules .nav-tabs > li a{
  border-radius: 0;
}

main .container#menu .nav-tabs > li.active a,
main .container#menu .nav-tabs > li a:hover,
main .container#covid-rules .nav-tabs > li.active a,
main .container#covid-rules .nav-tabs > li a:hover{
  background-color: transparent;
  border-color:     rgba(255, 255, 255, 1);
}

main .container#menu .nav-tabs > li a,
main .container#covid-rules .nav-tabs > li a{
  color:        inherit;
  border-color: rgba(255, 255, 255, 0);
  transition:   0.2s border-color;
}

main .container#menu .tab-content,
main .container#covid-rules .tab-content{
  padding-top:    20px;
  padding-bottom: 20px;
}

main .container#menu .tab-content .row:not(.active),
main .container#covid-rules .tab-content .row:not(.active){
  display: none;
}

main .container#menu .tab-content .row.active,
main .container#covid-rules .tab-content .row.active{
  display: block;
}

main .container#menu .tab-content tr {
  background-color: transparent;
  transition:       0.2s background-color;
}

main .container#menu .tab-content tr:hover {
  background-color: #585858;
}

main .container#map {
  width:         100%;
  padding-left:  0 !important;
  padding-right: 0 !important;
}

main .container#map iframe {
  width:  100%;
  height: 450px;
}

footer {
  background-color: #000;
  height:           150px;
  padding-top:      30px;
  padding-bottom:   30px;
  padding-left:     30px;
  padding-right:    30px;
}

footer .icon-container {
  display:         -webkit-flex;
  display:         -moz-flex;
  display:         -ms-flex;
  display:         -o-flex;
  display:         flex;
  justify-content: center;
}

footer .icon-container .icon {
  /*background-color: #272626;*/
  padding: 15px;
}

footer .icon-container svg {
  stroke:       #fff;
  stroke-width: 1px;
  height:       40px;
  width:        40px;
  transition:   0.2s stroke;
}

footer .icon-container .icon:hover svg {
  stroke: #bbb;
}

footer .meta-nav .horizontal-nav {
  list-style:      none;
  display:         -webkit-flex;
  display:         -moz-flex;
  display:         -ms-flex;
  display:         -o-flex;
  display:         flex;
  justify-content: center;
  color:           #fff;
  margin:          0;
  padding:         0;
}

footer .meta-nav .horizontal-nav li {
  color:      #fff;
  transition: 0.2s color;
}

footer .meta-nav .horizontal-nav li:hover {
  color:           #bbb;
  text-decoration: none;
}

footer .meta-nav .horizontal-nav li:hover:before {
  color: #fff;
}

footer .meta-nav .horizontal-nav a {
  color:           inherit;
  text-decoration: inherit;
}

footer .meta-nav ul > li + li:before {
  content:       "|" !important;
  text-align:    center;
  padding-left:  5px;
  padding-right: 5px;
}

h1, h2, h3, h4, h6, h6 {
  font-family: "Metal Mania", cursive;
}

.no-padding {
  padding-left:  0 !important;
  padding-right: 0 !important;
}

.btn-primary {
  background-color: #9a0000;
  border-color:     transparent !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active.focus,
.btn-primary.active:focus,
.btn-primary.active:hover,
.btn-primary:active.focus,
.btn-primary:active:focus,
.btn-primary:active:hover {
  background-color: #670000;
  border-color:     transparent !important;
}

.coming-soon {
  text-align: center;
}

.nav-tabs a {
  cursor: pointer;
}

/* owl slider */
#gallery .owl-theme .owl-nav [class*=owl-] {
  color: #000;
}

#gallery figure {
  position: relative;
}

#gallery figcaption {
  position:         absolute;
  bottom:           0;
  right:            0;
  padding:          5px;
  font-size:        10px;
  background-color: #272525;
}

#gallery a {
  color: #fff;
}

.allergy-information {
  font-size: 0.8em;
}