@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap');


@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500&display=swap');
/*
font-family: 'Roboto Slab', serif;
font-family: 'Cormorant Garamond', serif;
font-family: 'Playfair Display', serif;
font-family: 'Cormorant Infant', serif;
font-family: 'EB Garamond', serif;

font-family: 'Mulish', sans-serif;
font-family: 'Roboto', sans-serif;
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Dosis', sans-serif;

font-family: 'Lora', serif;
font-family: 'Alegreya Sans', sans-serif;
*/
:root {
  --grijs: rgba(182, 182, 182);
  
  --eating:     rgba(29, 84, 141);
  --culinair:   rgba(172, 97, 1); 
  --cursus:     rgba(156, 52, 34);
  --cursus1:    rgba(184, 64, 18);
  --interieur:  rgba(164, 61, 167);
  --gallerij:   rgba(106, 164, 51);
  --gasten:     rgba(28, 102, 76);
  --contact:    rgba(159, 117, 65);
  --home:       rgba(162, 33, 25);
  --over:       rgba(195, 32, 77);
  --bord:       rgba(78, 83, 152); /*rgba(58, 62, 114);*/

  --serif:    'Lora', serif;
  --sanserif: 'Alegreya Sans', sans-serif; 

  --titles : 'Lora', serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

html { 
  overflow-y: scroll; 
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

html, body { width: 100%; height: 100vh; }

body {
  font: 300 1rem  var(--sanserif);
  line-height: 1.4;
  background: white;
  height: 100vh;
}


a { color: #282828; transition: color 300ms cubic-bezier(0.08,0.52,0.52,1); }
a:hover { color: var(--home); text-decoration: underline; }

img { max-width: 100%; display: block; }

p { 
  font-family: var(--sanserif);  
  font-size: 1.15rem;
  padding:  0 0 1rem 0;
}

h1, h2, h3 { font-family: var(--titles); }

h1 { 
  font-size: 1.7rem; 
  line-height: 1.2;
  font-weight: 300; 
  padding: 0 0 1rem 0;
}

h2 { font-size: 1.1rem;  }
h3 { font-size: 1.2rem; font-weight: 500; padding-bottom: 0.1rem; } 

h1 + h2 { padding-bottom: 1rem; color: black!important; }


/* ======== HAMBURGER ======== */
.hamburger { 
  position: relative;
  top: -0.5rem;
  right: 0rem;
  width: 3rem;
  height: 3rem;
  background: transparent; 
  z-index: 1;
  cursor: pointer; 
}

.burgerline, .burgerline::before, .burgerline::after { 
  width: 1.7rem; 
  height: 0.18rem;
}

.burgerline {
  position: absolute;
  top: 1.3rem;
  right: 0.5rem;
  border-radius: 3px;
  background: var(--bord);
  transition: all 0.4s;
}

.burgerline::before, .burgerline::after {right: 0; }

.burgerline::before, .burgerline::after {
  content: "";
  position: absolute;
  border-radius: 3px;
  background: var(--bord);
  transition: all 0.4s;
}

.burgerline::before { top: -0.5rem; }
.burgerline::after  { top: 0.5rem; }

.hamburger.active .burgerline { width: 0; background: transparent; } 
.hamburger.active .burgerline::before { transform: rotateZ(45deg) translate(6px, 5px); background: var(--home); }
.hamburger.active .burgerline::after  { transform: rotateZ(-45deg) translate(6px, -5px); background: var(--home); }


/* ======== BASIS ======== */
.wrapper {
  position: relative; 
  max-width: 64em; /*1024*/
	display: grid;
	grid-template-rows: min-content auto min-content;
  //height: 100vh;
  margin: 0 auto;
}

header.head {
  height: 5rem;
  position: fixed;
  width: 100%;
  display: flex; 
  align-items: center;
  justify-content: space-between; 
  background: white;
  border-bottom: 1px solid var(--grijs);
  padding: 0 1rem;
  z-index: 999;
}
/*
header.intro:not(#home header.intro), .details {
  width: min(85%, 42rem)!important;
  margin: 0 auto;
}
*/

main {
  width: min(90%, 50em);
 /* height: calc(100vh - 6rem); voor index*/
  place-self: start center;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
  padding: 6rem 0 0 0;
}

.content { padding: 2rem 0; }

footer {
  width: 100%;
  border-style: solid;
  border-width: 1px 0 0 0;
  border-color: var(--grijs);
  padding: 1rem 1.5rem;  
}

@keyframes fade {
  0%    { opacity: 0; }
  100%  { opacity: 1; }
}

#home .logo  { animation: fade 2s ease-in; }

.interieur:nth-of-type(-n+2) { 
  margin: 0 0 2rem 0;
  padding-bottom: 1rem;
}

.interieur, .ria {
  display: grid;
  grid-template-columns:1fr;
  grid-template-rows: 1fr;
  grid-auto-rows: auto;  
}

.interieur:nth-of-type(2) div { order: 2; }


/* ======== H1 KLEUREN ======== */
#privatedining h1 span, #privatedining h2, #privatedining .prijzen p          { color: var(--eating); }
#culinairworkshop h1 span, #culinairworkshop h2, #culinairworkshop .prijzen p { color: var(--culinair); }
#kookcursus h1 span, #kookcursus h2, #kookcursus h2, #kookcursus .prijzen p   { color: var(--cursus); }
#overria h1 span, #overria h2            { color: var(--over); }
#interieur h1 span, #interieur h2        { color: var(--interieur); }
#fotogallerij h1 span, #fotogallerij h2  { color: var(--gallerij); }
#onzegasten h1 span, #onzegasten h2      { color: var(--gasten); }
#contact h1 span, #contact h2            { color: var(--contact); }
#english h1 span, #english h2, #english .prijzen p { color: var(--bord); }


/* ======== ========== ======== */
p:last-child {padding: 0; }

.logo    { width: 14rem; }
.intro   {  text-align: center; margin-top: 1rem; }
.cutlery { height: 3.5rem; }  
.curly   { width: 10rem; }

.intro h2:last-of-type { padding: 0 0 2rem 0; }


#home h2     { padding-bottom: 0.5rem; }
#home .intro { margin-top: 0; }
#home .curly { padding: 1rem 0 1.5rem 0; }
#home a:nth-of-type(1) h2 { color: var(--eating); }
#home a:nth-of-type(2) h2 { color: var(--culinair); }
#home a:nth-of-type(3) h2 { color: var(--cursus); }


.shade {
  margin: 0 0 1.3rem 0;
  border-radius: 5px;
  border: 1px solid rgb(193, 193, 193); 
  box-shadow: 0px 11px 9px -6px rgba(0, 0, 0, 0.28);
}

.details .curly.rond { border-radius: 50%; padding: 1rem 0; }

.details {
  font-weight: 400;
  text-align: center;
  padding: 0 0 3rem 0;
}

.animatie, main .cutlery, main .curly { margin: 0 auto; }

#culinairworkshop .curly, .details .curly { padding: 0 0 2rem 0; }

#culinairworkshop img { transform: scale(1.15); }
#culinairworkshop .shade { margin: 0; }

#english ul { text-align: left; }

#english .details li {
  list-style-type: circle;
  text-align: left;
}

#english .details li:nth-of-type(-n+2) { padding-bottom: 0.3rem; }

.prijzen {
  width: 95%;
  border-style: solid;
  border-width: 1px 0 0 0;
  border-color: #b6b6b6;
}

.prijzen p { 
  font-size: 0.9rem;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center; 
  padding: 0.5rem 0; 
}

address a, a[href^="http"] { color: var(--contact); }

footer address {
  font-size: 0.9rem;
  font-weight: 400;
  color: #515151;
  line-height: 1.5;
  text-align: right;
}

footer address a { color: var(--home); }


/* ============= ACHTERGROND IMAGE ============= */ 
.bg.test2 {
  background-image: url(../img/bg.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
}

.bg.test {
  background-image: url(../img/bg.jpg);
  background-repeat: no-repeat;
  background-position: center 19rem;
  background-size: initial;
}

.bg img {  
  border-radius: 3px;
  box-shadow: 0px 11px 9px -6px rgba(0, 0, 0, 0.47);
}



/* ============= TO TOP BUTTON ============= */ 
#button {
  display: inline-block;
  background-color: var(--bord);
  width: 3rem;
  height: 2.5rem;
  position: fixed;
  bottom: -3rem;
  right: 0;
	background-image: url(../img/sprite.svg);
	background-position: 8px 11px;
	background-repeat: no-repeat;
	background-size: 9rem;
  border-radius: 0.5rem 0 0 0.5rem;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  z-index: 1000;
	transition: all 400ms ease-in;
}


#button:active { background-color: #555; }
#button.show   { bottom: 5rem; opacity: 1; visibility: visible; }


/* ============= GALLERIJ + OVERLAY ============= */ 
.gallery, .gasten {
  display: flex;
  flex-flow: row wrap;
  margin-left: -10px;
  padding-bottom: 3rem;
}

.gallery-item {
  flex-grow: 1; /*flex: auto; */
  height: 10rem;
  /*min-width: 150px;*/
  overflow: hidden;
  border-radius: 5px;
  border: 1px solid rgb(193, 193, 193); 
  margin: 0 0 8px 8px;
  position: relative;
}

.gallery-item:last-child { flex-grow: 0; }

.gallery-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: transparent;
  transition: opacity 0.5s, background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.overlay:hover {  opacity: 1; }

.overlay p {
  background: white;
  padding: 1rem 0;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%;
  font-size: 0.9rem;
  letter-spacing: 0.01rem;
  color: black;
  transition: bottom 1.5s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.overlay:hover p { bottom: 2rem; }


/* ============= Gasten Lijst ============= */ 
#onzegasten .gasten { justify-content: space-evenly; margin: 0; }

#onzegasten .gast-namen {
  flex: 1 0 46%;   
  min-height: 3.5rem;
  font-weight: 400;
  text-align: left;
  border: 1px solid var(--grijs);
  border-radius: 5px;
  padding: 1rem 1rem 1rem 4rem;
  margin: 0 0.5rem 1rem 0.5rem;
}

#onzegasten .gast-namen:last-child { flex-grow: 0; }

#onzegasten .gast-namen { position: relative; }
.gast-namen::before {
  content: '';
  background-image: url(../img/bord.png);
  width: 3rem;
  height: 3rem;
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  background-size: cover;
  opacity: 0.2;
  display: block;
}

/* Navigation Bar: vertical position */
#swipebox-bottom-bar {
  position: absolute;
  top: 50%;
  bottom: auto;
  left: 0;
  right: 0;
  background: transparent!important;
  transition: none;
}
/* Navigation Bar: override position when is active */
#swipebox-bottom-bar.visible-bars {
   -webkit-transform: translate3d(0px, -25px, 0px);
  transform: translate3d(0px, -25px, 0px);
}
/* Navigation arrows: horizontal position */
#swipebox-arrows {
  max-width: 100%;
  width: 99%;
}
/* background blur */
#swipebox-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}

/* close button */
#swipebox-close {
  top: 0;
  right: 0;
  top: 50%;
  left: 50%;
  background-position: 5px 12px;
  transform: translate3d(0, -12rem, 0);
}

#swipebox-arrows {
  width: 92%;
  max-width: 64em;
}

.slide.current img {
  border-radius: 5px;
}

/* ========== MEDIAQUERIE 414 ========== */
@media screen and (min-width: 25.875em) { 

  header.intro:not(#home header.intro), .details {
    width: min(85%, 42rem)!important;
    margin: 0 auto;
  }

}


/* ========== MEDIAQUERIE 668 ========== */
  @media screen and (min-width: 41.750em) { 

  .ria { grid-template-columns: auto 1fr; column-gap: 1.5rem; }

  }

  /* ========== MEDIAQUERIE 768 ========== */
  @media screen and (min-width: 48em) { 

    #onzegasten .gallery-item {
      flex: 0 0 40%;   
    }

  header.head { 
    position: relative;
    height: 11.5rem;
    align-items: flex-start;
    border-bottom: none; 
    padding-top: 1rem;
  }

  main { padding: 2.5rem 0 0 0; }

  .interieur {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;  
    column-gap: 1.5rem;
    padding: 0 0 2rem 0;
  }

  .interieur h3 { grid-column: span 2; }
  .interieur:nth-of-type(2) div { order: 0; }
  .interieur:nth-of-type(2) img { place-self: normal end; }

  .hamburger { display: none; }


  /* ======== ========== ======== */
  p { font-size:1.1rem; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.15rem; }

  .logo    { width: 17rem; }
  .cutlery { height: 4.5rem; }


  #culinairworkshop img { transform: scale(1.05); }

  #english .details ul {
    width: min(85%, 42rem);
    margin: 0 auto;
  }

  .interieur > div, .ria > div { margin: -0.3rem 0 0 0; }

  .bg {
    background-position: center 19rem;
    background-size: initial;
  }

 




}

/* a[href^="mailto:"], a[href^="tel:"] { color: var(--gallerij); } */
/* .cutlery { filter: sepia(75%) saturate(129%); } */
/*border-image: linear-gradient(to left, #fdfdfd, #1e1e1ec4, #fbfbfb) 1 0;*/