/* Styles for the html and body: height , width and font */
@font-face {
  font-family: "Bodoni";
  src: url("/assets./fonts/Bodoni.ttf") format("truetype");
}

@font-face {
  font-family: "PointersStd";
  src: url("/assets./fonts/PointersStd.otf") format("opentype");
}

@font-face {
  font-family:"Krijt";
  src:url("/assets./fonts/film-cryptic.oblique.ttf") format("truetype");
}

@font-face{
  font-family: "Lato";
  src:  url("/assets./fonts/Lato-Regular.ttf") format("truetype");
}

@font-face{
  font-family: "sans-serif";
  src:  url("/assets./fonts/Sans-SerifFLF.otf") format("opentype");
}

@font-face{
  font-family: "Satisfy";
  src:  url("/assets./fonts/Satisfy-Regular.ttf") format("opentype");
}

.bodo {
  font-family: Bodoni;
}

.lato {
  font-family: Lato;
}

.latoBlue {
  font-family: Lato !important;
  color:  #0000A0 !important;
}

 
html {
  height:100%;
  width:100%;
  /*overflow-x:hidden;
  overflow-y:auto;*/
  margin:0px;
  padding:0px;
 /*   -moz-box-sizing: border-box;
  box-sizing:border-box; */
  background-color:black !important;
}

body {
  font-family: "Lato", sans-serif;
  min-height: 100%;
  /*transition: background 1s ease;
  border-left: solid 3px white;
  border-right: solid 3px white; */
  padding-top:63px;
}

/* footer styles for black and white backgrounds */
a,
.dark1 a {
  color:white;
}

.white a {
  color:black;
}

.dark1 a img {
  background:white;
}

.footer {
  font-size:12px;
  text-align:center;
  max-width:98vw;
}

footer {
  font-size:12px;
}

footer a {
  color: black;
}

.breadcrumb {
  background:transparent;
  font-size:12px;
  color: grey;
  padding:2px;
  margin:0px;
}

.breadcrumb a {
  color: grey;
  text-decoration:underline;
}

.behind {
  font-size:10px;
  z-index:-200;
}

/* Styling the nav, navbar */
.navbar-pointers {
  font-size: 12px;
  font-weight:bold;
  color:white;
  background-color:black;
  padding:0px;
  margin:0px;
}

.hundred {
    width:300px;
    height:400px;
}

.nav-link {
    color: #ffffff !important;
}

.nav-item {
  color: #ffffff;
}

.navbar-brand {
  color: #ffffff;
  font-style: bold;
  width: 120px;
}

.dropdown-item {
  color:#ffffff;
  background: black;
  font-size:12px;
}

.nav-link:active,
.nav-link:focus   {
  color:#ffffff;
  border-bottom: 2px solid currentColor;
}

.navbar-light .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon,
.navbar .navbar-toggler-icon {
  background-image: url(/assets../img/dark/Menu_Burger_white.png);
}

/* social-media-icons */
.social {
  max-height: 15px;
}

.social-md {
  max-height:20px;
}

.social-lg {
  max-height:30px;
}

.row-header {
  font-size: 25px;
  text-align: center;
  padding:8px 0px 8px 0px;
}

.row-event {
  font-size:20px;
  text-align: center;
}

.row-border {
  min-height:70px;
  border: solid 1px black;
  padding-top:10px;
  background-color: lightgrey;
}

.social-lg-wbg {
  max-height:30px;
  background-color: white;
}

/* Styles for the header: parallax behavior and such */
.parallax {

  height: 95vh;
  /*min-height: 350px;*/
  background: no-repeat center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   scroll-behavior: smooth;
   z-index:40;
}


/* Box styling for card boxes */
.kaart {
  position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: transparent;
  background-clip: border-box;
  text-align:center !important;
  border: solid 1px  white;
}

.kaart1 {
  position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: black;
  background-clip: border-box;
  text-align:center !important;
  border: solid 1px black;  
}

.kaart2 {
  position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: transparent;
  background-clip: border-box;
  text-align:center !important;
  border:none;  
}


.kaart3 {
  position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: #cccccc;
  background-clip: border-box;
  text-align:center !important;
  margin: 5px;
}

.kaart4 {
  position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: #cccccc;
  background-clip: border-box;
  text-align:center !important;
  margin: 5px;
  padding: 5px;
  border:2px solid #000000;
}

.kaart5 {
  position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: #e6ffff;
  background-clip: border-box;
  text-align:center !important;
  margin: 5px;
  padding: 5px;
  border:2px solid #00ffff;
}

.drinks {
   position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: transparent;
  text-align:center;
  margin-top:0px !important;
  margin-bottom: 5px;
    -ms-text-transform:lowercase;
  text-transform: lowercase;
}

.drinks-title {
    -ms-text-transform:lowercase;
  text-transform: lowercase;
  font-size:24px;
  text-align:center;
 
}


.food {
   position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: transparent;
  text-align:center;
  margin: 15px;
   -ms-text-transform:lowercase;
  text-transform: lowercase;
}

.food-title {
  -ms-text-transform:uppercase;
  text-transform: uppercase;
  font-size:22px;
  text-align:center;
  margin-bottom:5px;
 
}

#C2, #C3, #C4, #C5 {
  display:none;
  -webkit-display:block;
}
/* font size and weight styles */

.header-logo {
  max-width:450px;
}

/* Set the backgroundimages for the header with or without webp support -- needs the modernizr-custom.js file (in bootstrap) */
.no-webp .backgroundImage {
  background-image: url("/assets../img/pictures/Pointers.png");
}

.webp .backgroundImage {
  background-image: url("/assets../img/pictures/Pointers.webp");
} 

/* .backgroundImage::after{
  content: '';
  transform: translate(5px,5px) ;
} */

.logo {
  max-width:15vw;
}

.flag {
  height: 22px;
  width: 35px;
}

.img-link {
  font-size:45px;
  font-weight: 500;
  text-shadow: 1px 1px 1px black;
}

.header-title {
  font-size:70px;
  font-weight:500;
}

/* different header styles */
/* header1 title for lg screens */
.header1 {
  font-size:110px;
  font-family:"PointersSTD" !important;
  padding-bottom:0px;
  text-shadow: 1px 1px 1px black;
}

/* header2 adress for lg screens */
.header2 {
  font-size:22px;
  font-family:"PointersSTD",sans-serif;
  text-shadow: 1px 1px 1px black;
}

.dark {
  font-family:"Bodoni", sans-serif;
  color:white;
  background-color: black;
  border:none !important;
  border-color: black;
}

.dark1 {
  font-family:"Lato", sans-serif;
  color:white;
  background-color: black;
  border:none !important;
  border-color: black;
}

.dark2 {
  font-family:"Lato", sans-serif;
  color: black;
  background-color: white;
  border: solid 2px black;
}

.dark3 {
  color:white ;
  background-color: black;
  border:none !important;
}

.satisfy {
  font-family:"Satisfy", sans-serif !important;
  
}

.white {
  font-family:"Lato", sans-serif;
  color: black;
  background-color: white;
  border:none !important;
  border-color: white;
}


.skew-border {
  border: solid 2px white;
  transform: rotate(45deg);
}

.line {
  text-decoration: underline overline;
  text-transform: uppercase;
}

.underline {
  text-decoration:underline;
}

.spacer {
    height:20px;
}

.spacer-sm {
  height:10px;
}

.spacer-lg {
  height:50px;
}

.spacer-lg-dark{
  height:50px;
  background-color: black;
}

/* styles for the event kalender */
.noborder {
  border:hidden; !important;
}

.noborder a {
  color: black;
  text-decoration: underline;
}

.noborder a:hover {
  color:blue;
}

.modal a {
  color:black;
  text-decoration:underline;
}

.modal a:hover {
  color: blue;
}

.card-padding {
  padding: 30px;
}

.card-body p a {
  color: black !important;
}

.doublebrd {
  border: 3px double white;
}

.sports1 {
  color:white !important;
  background: black !important;
}

.sports2 {
  color: black;
  background: white;
}

.sports3 {
  color:black;
  background:#e6e6e6;
}

/* dark arrows for carousel */
.fa-arrow-alt-circle-right,
.fa-arrow-alt-circle-left {
  color:black !important;
}

table.table-bordered,
table.table-bordered > thead >tr > th,
table.table-bordered > tbody > tr > td {
  border: 2px solid black !important;
}

/* hide spam catch fields in forms */
.extraClass {
  display:none;
}

/* ### heigth and width styles ###*/


/* ### placing content styles ### */
/* no margin and padding for divs 
div {
  margin-left:0px;
  margin-right:0px;
}*/

/* padding and margin styles */
.pad25 {
  padding-top:25px; 
}

.pad100 {
  padding-top:100px;
}

.padbo5 {
  padding-bottom:5px;
}

.padbo15 {
  padding-bottom:15px;
}

.padli15 {
  padding-left:15px;
}

.pad_4_25 {
  padding:25px;
}

.pad_7px {
  padding:7px;
}

.mar5all {
  margin:5px;
}

.mar10 {
  margin-top:10px;
}

.mar-lr {
  margin-left: 150px;
  margin-right: 150px;
}

/* styles for the menus */
.mar-menu {
  margin-bottom:100px;
}

/* put the menu-items more in the middle on large screens */
.mar-menu-lr100 {
  margin-left:100px;
  margin-right:100px;
}

.mar-4d {
  margin-left:40vw;
}

.login {
  font-size:10vh;
  padding-left: ;
}

.width50 {
  width:75px;
}

.width50perc {
  max-width:50vw;
  padding:2vw;
}

.width400 {
  max-width: 400px;
}

.width20 {
  width:20vw !important;
}

.width20perc {
  max-width: 20vw;
  align-items: center;
}

.maxWidth20 {
  max-width:20vw !important;
}

.pad-bottom {
  padding-top:60px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

/* img height sport calender */
.maxImg40 {
  height:40px;
  margin:auto;
}

/* no bulletpoints in lists */
.nobul{
  list-style:none;
}

/* divider for next content/part */
.top-line {
  border-top: 5px solid white;
}

/* divider between theanchor-links*/
.divide {
  height:50px;
  background-color:white;
}

/* center content in the middle of the screen */
.caption-container {
  position:relative;
  text-align:center;
  color:white;
}

.centered {
  color:white;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

.award {
  position:absolute;
  top:7%;
  right:3%;
}

.awardSize {
  height:40vh;
}

.awardMobile {
  width:95vw;
  align-items: center;
}

.bottom {
  color:white;
  position:absolute;
  top:75%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:50;
}

.top {
   color:white;
  position:absolute;
  top:30%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index:50;
}

.STD {
  font-family:PointersSTD;
  text-shadow: 1px 1px 1px black;
}

.STDnoBorder {
  font-family:PointersSTD;
}


.center {
  text-align:center;
  vertical-align:middle;
}

/* style for dark hovering */
a.darken {
  display:inline-block;
  background: black;
  padding:0;
}

a.darken img {
  display: block;
  -webkit-transition: all o.5s linear;
  -moz-transition: all o.5s linear;
  -ms-transition: all o.5s linear;
  -o-transition: all o.5s linear;
  transition: all o.5s linear;
}

a.darken:hover img {
  opacity: 0.3;
}

/* button styles */
.btn-pointers1 {
  background-color:#ffffff;
  border: 2px solid #808080;
}
.btn-pointers1:hover {
  border: 2px outset #4d94ff;
}

.btn-dark1 {
  color:white !important;
  background-color:black;
  border: double 4px white;
}

.btn-dark1:hover {
  color:white;
  background-color:grey;
}

.btn-dark2 {
 /* font-size: 24px; */
  color:black;
  background-color:white;
   padding:  15px 25px;
    border: double 3px black;
  
 
}

.btn-dark2:hover {
  color:black;
  background-color:grey;
}

.btn-dark3 {
  width:100%;
  color:white;
  background: black;
  border: 3px double white;
}

.btn-dark4 {
  color:black;
  background: #c2f0c2;
  border: 3px double black ;
}

.btn-dark5 {
  color:black;
  background:white;
  border: 3px double grey;
  padding:  15px 25px;
}

.btn-yellow {
  color:black;
  background:yellow;
  border: 3px double black;
   padding:  15px 25px;
}

.btn-order1 {
/*  font-size: 24px; */
  color:  #fff;
  background-color: #ed561a;
  padding:  15px 25px;
  border: double 3px white;
  border-radius:2px;
}

.btn-order1:hover {
  background-color: #d12600;
} 

a .btn-order1 {
  padding:0px;
  margin: opx;
}

.btn-order {
/*  font-size: 24px; */
  color:  #fff;
  background-color: #ed561a;
  padding:  15px 25px;
  border: double 3px white;
}

.btn-order:hover {
  background-color: #d12600;
} 

a .btn-order {
  padding:0px;
  margin: opx;
}
.btn-events8 {
  background-color:#cca300;
  color:#ffffff !important;
  border-radius: 0rem !important;
}

.btn-copy {
  background-color:white;
  color:black;
  border: 3px black double;
  max-width:90px;
}

.btn-left {
  margin-left: 8vw;
}

.btn-10vw {
  width: 10vw;
  height:auto;

}

.btn-15vw {
  width:20vw;
  height:auto;
}

.res-20vw {
  width: 20vw;
  height:auto;
}

.btn-20vw {
  width: 25vw !important;
  height: auto;
}

.btn-35vw {
  width: 34vw !important;
  height:auto;
}

.btn-nobg {
  background-image: none !important;
}

/* google map style for contact part */
.map_responsive {
  height:0;
  overflow:hidden;
  padding-top:100%;
  position: relative;
}

.map_responsive iframe {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  border:0;
}

/* Do not display tiny-cloud notification for TinyMCE */
.tox-notification, .tox-notification--in, .tox-notification--warning {display: none !important;}

.height100 {
  max-height:100px;
  vertical-align: middle;
}

.height150 {
    max-height:150px;
    vertical-align: middle;
}

.height300{
  max-height:300px;
  vertical-align:middle;
}

.height500 {
  max-height:750px;
}

.width50vw {
  width:50vw;
  height:100%;
}

.yellow {
  color: #ffd600 !important;
}

.dark-grey {
  color:#595959;
} 

.blue {
  color: #007acc;
  text-transform: uppercase;
}

.blue a {
  color: #007acc !important;
}

.green {
  color: #00b300;
} 

.orange {
  color: #ffdb4d !important;
}

.redup {
  color: #ff4d4d !important;
  text-transform: uppercase;
}

.red {
  color: red;
}

.black {
  color:#000000 !important;
}

.notice {
  font-size: 13px;
  color: #990000;
}

.bg-white {
  background-color: white;
}

.bg-white:hover {
  background-color: #e6e6e6;
}

.bg-yellow {
  background-color: #ffffe6;
  border: solid 2px #ffcc00;
  border-radius: 5px;
}

.bg-yellow-dark {
  background-color: #fff0b3;
}

.bg-green {
  background-color: #e6ffe6;
  border: solid 2px #009933;
}

.bg-red {
  background-color: #ffe6e6;
  border: solid 2px #ff0000;
}

.bg-blue {
  background-color: #cce6ff;
  border: solid 2px #0066ff;
}

.bg-light-blue {
  background-color: #e6ffff;
}

.bg-grey {
  background-color: #d9d9d9;
}

.bg-black {
  background-color: black;
  color:white;
  border: double 4px white;
}

.bg-blink {
  padding: 10px;
  display: inline-block;
  border: solid 2px #ff0000;
  border-radius: 10px;
  animation:  blinkingBackground 2s infinite;
}

@keyframes blinkingBackground {
    0%      {background-color: #ffcccc;}
    25%     {background-color: #ff9999;}
    50%     {background-color: #ff4d4d;}
    75%     {background-color: #ff0000;}
    1000%   {background-color: #white;}
}

.upper {
  text-transform: uppercase;
}

/* styles for the bevarages list */
.drinks {
   position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: transparent;
  text-align:center;
  margin-top:0px !important;
  margin-bottom: 5px;
    -ms-text-transform:lowercase;
  text-transform: lowercase;
}

.drinks-title {
    -ms-text-transform:uppercase;
  text-transform: uppercase;
  font-size:20px;
  text-align:center;
 }

/* styles for the food menu */
 .food {
   position:relative; 
  -ms-flex-direction: row;
  flex-direction: row;
  min-width:0;
  word-wrap: break-word;
  background-color: transparent;
  text-align:center;
  margin: 15px;
   -ms-text-transform:lowercase;
  text-transform: lowercase;
  border:none !important;

}

.food-title {
  -ms-text-transform:uppercase;
  text-transform: uppercase;
  font-size:20px;
  text-align:center;
  margin-bottom:5px;
 
}

.krijtbord {
  background-image: url('/assets../img/dark/krijtbord.jpg');
  background-repeat: no-repeat;
  font-family:"Krijt";
  color:white;
  padding:30px;
  max-width:790px;
}

.fill {
  min-width: 245px;
}

 ul.list,
 ul {
  padding:0px;
 }

 /* styling for the goto top button for food and drinks */
 #myBtn {
  color:grey;
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 30px; /* Place the button at the bottom of the page */
  right: 35px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 5px; 
  background-color: transparent;
 }

 #myBtn:hover {
  color:#99c2ff;
 }

 
.impressumHTML {
  max-width:50vw;
  height:100%;
  margin-left:25vw;
  background-color:black;
}

.impressum {
  background-color:white;
  align-content: center;
}

.reserveWeb {
  width:40vw;
  left: 30vw;
  padding:15px;
  background-color: #e6f2ff;
  color:black;
  border: black 7px double;
  border-radius:15px;
}

.header .jumbotron {
  background-color:  #99c2ff !important;
}


@media (max-width: 1200px) {

  /* style of the link images */
  .bottom {
    top:50%;
  }

  .img-link {
  font-size:35px;
  font-weight: 500;
  }

  /* no margin for reserve button text in mobile header*/
  .marbo0 {
    margin-bottom:0px;
  }

  .width50vw {
    width:100%;
    height:100%;
  }
} 

.img {
  width: 100%;
}





@media (max-width: 767px) {

    /* style of the link images */
  .bottom {
    top:75%;
  }

  .img-link {
  font-size:30px;
  font-weight: 500;
  }

  .header-logo {
  max-width:180px;
  }

  .logo {
    max-width:85vw;
  }

  /* no margins for the menus on mobile */
  .mar-menu-lr100 {
    margin-left:0px;
    margin-right:0px;
  }

  .mar-menu-lr,
  .mar-lr {
    margin-left:0px;
    margin-right:0px;
  }

  .width50vw {
    width:100%;
    height:100%;
  }

  .impressumHTML {
    width:95vw;
    margin-left:2vw;
  }

  .width20perc {
    max-width: 95vw;
  }

  .mar-4d {
    margin-top:0;
    margin-left:0;
  }

  .width400 {
    width: 100%;
  }

  .krijtbord {
    background-image: url("/assets../img/dark/krijtbord-small.png");
    max-width:270px;
  }

  .fill {
    min-width:0px;
  }

  .reserveWeb {
    width: 100%;
    padding: 5px;
    align-items:center;
  }

  .btn-left {
    margin-left: 20vw;
  }

  .img {
    width: 789px;
  }

  .btn-10vw {
    width:98vw !important;
    height:auto;
  }

  .btn-15vw {
    width:98vw !important;
    height:auto;
  }

  .btn-20vw {
  width: 98vw !important;
  height: auto;
}

.btn-35vw {
  width: 98vw !important;
  height:auto;
}

.res-20vw {
  width: 90vw;
  height:auto;
}

.award {
  position: static;
}

}