:root {
    --kleur1: #c24927;
    --kleur2: #4d4d4d;
    --fontkleur: #282821;
    --font-family1: "Graphik", Helvetica, Arial, sans-serif;
    --max-width: 1580px;
    --text-small: 1000px;
    --border-radius: 3px;
  }
  
:root {
  --color1: #c24927;
  --color2: #4d4d4d;
  --fontColor: #282821;
  --fontFamily1: "Graphik", Helvetica, Arial, sans-serif;
  --bodyFontSize: 17px;
  --h1Size: 40px;
  --h2Size: 30px;
  --h3Size: 18px;
  --h5Size: 25px;
  --maxWidth: 1580px;
  --textSmall: 1000px;
  --borderRadius1: 3px;
}

  body {font-family: var(--fontFamily1); font-weight: normal; color: var(--fontColor); background: #f1e8ee; font-size: var(--bodyFontSize); line-height: 1.85em;}
  ::selection {background: var(--color2); color: #FFF;}
  
  textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"] {border-radius: var(--borderRadius1); background: #FFF; color: #666; padding: 12px 10px;}
  
  .breadcrumbs {display: none;}
  
  h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover,
  h2, .h2, h3, .h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
  h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
  h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {font-family: var(--fontFamily1); font-weight: 200; color: var(--color1); line-height: 1.35em; margin: 0 0 0.5em 0;}
  
  h1, .h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {font-size: var(--h1Size);}
  h2, .h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {font-size: var(--h2Size);}
  h3, .h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {font-size: var(--h3Size);}
  h5, .h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover {font-size: var(--h5Size); font-family: var(--fontFamily1); color: #999;}
    
  a.logo {margin: auto 0; outline: 0;}
  a.logo img {width: 400px; margin: 0;}
  
  a.knop, .button, a.button, button {position: relative; font-family: var(--fontFamily1); background-color: var(--color1); color: #FFF; border: 0; font-size: 15px; padding: 15px 25px; cursor: pointer; line-height: 1; text-decoration: none !important; font-weight: normal; border-radius: var(--borderRadius1);}

  a.knop:hover, .button:hover, a.button:hover, button:hover {background: var(--color2);}
  a.knop {min-width: 200px;}
  
  .bovenkantHolder {border: 0; position: sticky; top: 0; z-index: 10;}
  .bovenkantHolder .bovenkant {max-width: unset; background:rgba(255,255,255,0); transition: all .3s ease;}
  .bovenkantHolder .bovenkant .art-menu {display: flex; gap: 30px;}
  
  .HeaderHolder {display: grid; line-height: 0; background: #e8e6e6;}
  .HeaderHolder > div {margin: auto;}
  .HeaderHolder > div img {width: 100% !important; height: auto !important;}

  .art-Sheet .art-content {min-height: calc(100vh - 70px - 109px);}

  .art-Sheet .art-sidebar1 {display:none !important;}
  .art-Sheet .art-sidebar1 .art-Block {background: #FFF; padding: 30px; box-sizing: border-box;}

  
  .art-menu li a .t {font-size: 16px; color: var(--fontColor); padding: 15px 0;}
  .art-menu li a .t:hover, .art-menu li a.active .t {color:var(--color1);}
    
  #map-canvas {height: calc(100vh - 130px) !important; width: 100% !important;}
  #map-canvas::before { opacity: 0;  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; pointer-events: none; transition: all 1s ease 0s; z-index: 1;}
  
  .gm-style .gm-style-iw {font-size: 16px; font-family: var(--fontFamily1);}
  .gm-style .gm-style-iw-c {border-radius: 0; box-shadow: 0 10px 20px rgba(0,0,0,.2);}
  .gm-style .gm-style-iw-c button { top: 5px !important; right: 5px !important; transform: scale(1.5);}
  .gMapsHolder {padding:20px; line-height: 1.65em; font-weight: normal; width:300px;}
  .gMaps_email, .gMaps_extra1, .gMaps_adres, .gMaps_Telefoon {margin:0;}
  .gMaps_Telefoon, .gMaps_extra1, .gMaps_extra2 {margin-top:0.5em;}
  .gMaps_bedrijfsnaam {font-weight: bold !important;}
  
  div[class*="grid"] {gap:100px;}
  div[class*="grid"].midden {align-items: center;}
  
  .vak .inhoud.max600 {margin-left:auto; margin-right:auto; max-width: 600px;}
  
  .pageFooterHolder {display: none;}

  .pageFooterKnoppenHolder {background: #000;}
  .pageFooterKnoppenHolder .pageFooterKnoppen {max-width: 100%;}
  .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu a {color: #999;}
  .pageFooterKnoppenHolder .pageFooterKnoppen .copyright {opacity: 1; color: #999;}
  .pageFooterKnoppenHolder .pageFooterKnoppen .extramenu .seperator {opacity: 0; margin: 0 5px;}

  .resMenuHolder {top: 100%;}


  /* Testje */
  /* .liquid-slide-sjabloon .plaatje {width:90%; margin-left:10%;} */

  /* Einde testje */


  @media screen and (max-width: 900px) {
    :root{
      --h1Size: 40px;
      --h2Size: 30px;
      --h3Size: 18px;
      --h5Size: 25px;
    }
    
    a.logo img {width: 280px;}
  
    .vak {padding: 0;}
    .art-Sheet, section .inhoud, .vak .inhoud {padding: 20px;}

  
}