/*
 __  ___       __     __                       __       ___ ___ 
/__`  |  |  | |  \ | /  \    \  /  /\  |\ |     / |  | |__   |  
.__/  |  \__/ |__/ | \__/     \/  /~~\ | \|    /_ |/\| |___  |  

Custom CSS - www.studiovanzwet.nl

    (  )   (   )  )
     ) (   )  (  (
     ( )  (    ) )
     _____________
    <_____________> ___
    |             |/ _ \
    |               | | |
    |               |_| |
 ___|             |\___/
/    \___________/    \
\_____________________/

Let's turn coffee (or another beverage) into website code.

*/


/* color vars */
:root {
--kkgpaars: rgb(102,45,145);
--kkgoranje: rgb(242,104,34);
    /*halftone*/
  --dotSize: 0.25rem;
  --bgSize: 1.35rem;
  --bgPosition: calc(var(--bgSize) / 2);
  --dotColor: white;
}

.btn-kkgoranje {background-color: var(--kkgoranje); color: #FFF;}
.btn-kkgpaars{background-color: var(--kkgpaars); color: #FFF;}
.txt-kkgoranje {color: var(--kkgoranje)}
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
    
.hero {
  width: 100%;
  height: auto;
}


 .svz .heroline {
    margin: 0;
    overflow: hidden;
   text-align: center;
   text-transform: uppercase;
   position: absolute;
   left: 50%;
    top: 50%;

   transform: translate(-50%, -50%) ;    
}



.svz .heroline h1 {
    transform: rotate(-2deg);
       font-size: 8vw;
   font-family: 'Londrina Solid', sans-serif;
   color: #FFF;

}


.svz  h2 {
font-size: 3rem;
   font-family: 'Londrina Solid', sans-serif;

}


 .schuinbovenonder {clip-path: polygon(0% 5%, 100% 0%, 100% 95%, 0% 100%);}

.schuinonder {clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);}

.schuinboven {clip-path: polygon(0% 5%, 100% 0%, 100% 100%, 0% 100%);}
.schuinboven-2 {clip-path: polygon(0% 0%, 100% 8%, 100% 100%, 0% 100%);}

    .wood {background-image: url("../images/SN_Hout.jpg"); background-position: center center}
    
    .img-responsive {width: 100%; height: auto;}
    
    .hovershrink {transition: transform 0.4s ease-in-out; }
    .hovershrink:hover { transform: scale(0.90); }





.svz .navbar-brand img {
  width: 250px;
  height: auto;
}
.svz h1 {
  font-family: 'Londrina Solid', sans-serif;
}
.svz {
  font-family: 'Montserrat', sans-serif;
}


.svz .navbar-toggler {
border: none;
}
.svz .collapsed .fa-bars:before  {
content: "\f0c9"; /*bars*/
}
.svz .fa-bars:before {
content: "\f00d"; /*cross*/
}




.svz .footerbg {background-color: var(--kkgpaars); color: #FFF;}

    /*.footerbg {clip-path: polygon(0% 0%,
                   100% 40%,
                   100% 100%,
                    0% 1000%);
    background-color: var(--kkgpaars); color: #FFF;}
*/



/* halftones */
.svz .halftone-top, .svz .halftone-bottom {
  position: relative;
}


.svz .halftone-top, .svz .halftone-bottom > img {
  display: block;
}

.svz .halftone-top::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 50px;
  width: 100%;
  background-image:
    radial-gradient(circle, white 75%,transparent 0), 
    radial-gradient(circle, white 50%, transparent 0), 
    radial-gradient(circle, white 25%, transparent 0);
  background-size: 1rem 1rem;
  background-repeat: repeat-x;
  background-position: 0 -0.5rem, 0.5rem 0.5rem, 0 1.5rem;
}

.svz .halftone-bottom::after {
  content: "";
position: absolute;
  left: 0;
  bottom: 0;
  height: 50px;
  width: 100%;

  background-image:
    radial-gradient(circle, white 25%, transparent 0), 
    radial-gradient(circle, white 50%, transparent 0), 
    radial-gradient(circle, white 75%, transparent 0);
  background-size: 1rem 1rem;
  background-repeat: repeat-x;
  background-position: 0 0.5rem, 0.5rem 1.5rem, 0 2.5rem;
}


.svz .halftone-bottom-white::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -50px;
  height: 50px;
  width: 100%;
  background-image:
    radial-gradient(circle, white 75%, transparent 0), 
    radial-gradient(circle, white 50%, transparent 0), 
    radial-gradient(circle, white 25%, transparent 0);
  background-size: 1rem 1rem;
  background-repeat: repeat-x;
  background-position: 0 -0.5rem, 0.5rem 0.5rem, 0 1.5rem;
    
}



/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {  }

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

 }

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {  }

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 
}

/* XX-Large devices (larger desktops) */
/* No media query since the xxl breakpoint has no upper bound on its width */


/* https://css-irl.info/css-halftone-patterns/ */
.halftone {
  

  background-image: radial-gradient(
      circle at center,
      var(--dotColor) var(--dotSize),
      transparent 0
    ), radial-gradient(circle at center, var(--dotColor)  var(--dotSize), transparent 0);
  background-size: var(--bgSize) var(--bgSize);
  background-position: 0 0, var(--bgPosition) var(--bgPosition);
}

/* https://www.cssportal.com/css-clip-path-generator/#google_vignette */
.heptagon-1 {
    clip-path: polygon(39% 0, 90% 9%, 100% 51%, 85% 100%, 19% 94%, 4% 63%, 0 19%);
    background-color: white;

    
    
}

.heptagon-1::after {
background-image: radial-gradient(
      circle at center,
      var(--dotColor) var(--dotSize),
      transparent 0
    ), radial-gradient(circle at center, var(--dotColor)  var(--dotSize), transparent 0);
  background-size: var(--bgSize) var(--bgSize);
  background-position: 0 0, var(--bgPosition) var(--bgPosition);
    clip-path: polygon(39% 0, 90% 9%, 100% 51%, 85% 100%, 19% 94%, 4% 63%, 0 19%);
    transform: rotate(5deg);}


.heptagon-2 {
    background-color: white;
    clip-path: polygon(70% 0, 96% 26%, 100% 73%, 75% 96%, 16% 100%, 0 63%, 5% 9%);
}

.heptagon-3 {
    background-color: white;
    clip-path: polygon(51% 0, 100% 19%, 92% 74%, 65% 100%, 17% 92%, 0 63%, 8% 16%);
}

.heptagon-4 {
    background-color: white;
    clip-path: polygon(37% 0, 100% 13%, 93% 79%, 48% 100%, 11% 85%, 0 54%, 8% 12%);
}


.heptagon-5 {
        background-color: white;
    clip-path: polygon(41% 0, 77% 5%, 100% 30%, 91% 75%, 51% 100%, 15% 91%, 0 35%);
}

.heptagon-6 {
        background-color: white;
    clip-path: polygon(32% 4%, 82% 0, 100% 51%, 83% 89%, 33% 100%, 4% 67%, 0 20%);
}

.svz a.anchor {
display: block;
position: relative;
top: -55px;
visibility: hidden;
}