* {
    font-family: Arial, Helvetica, sans-serif;
}
body{
  background-color: #57705b;
}
td {
  color: #000000;
  font-size: small;
  text-align: right;
}
a {
color:#006DB6;
text-decoration: none;
}
a:hover {
  color:#006DB6;
  text-decoration: underline;
}
h3 {
  color:#006DB6;
}
figure {
  float: left;
  margin: 0.5em;
  padding: 0.5em;
}
.mainpage
{   margin-block-start: 0px;
    margin-inline-end: 0px;
    margin-inline-start: 0px;
    margin-block-end: 5px;
    background-image: url('../img/splash1.webp');
    background-position:center top;
    background-repeat: no-repeat;
    background-size: auto; /* auto 660px;*/
    margin: auto;
    width: auto;

}
.header-wrapper {
    width: 100%;
    background-color: #ffffff;
    height: 80px;
}
.header {
    max-width: 1000px;
    margin: auto;
    padding-top: 25px;
    padding-left: 10px;
    
  }
  .topnav {
    margin-inline-start: 20px;
 
   
 }
 .topnav a {
  font-size: x-large;
  margin-inline-end: 50px;
 }
 .topnav a:hover {
 color: #000000;
 text-decoration: none;
 }
 .introduction {
    max-width: 1000px;
    display: grid;
    grid-template-columns: 1fr, 3fr;
    margin: auto;
    padding-top: 0px;
    padding-left: 10px;
 }
 .quote {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end:4;
    font-size: x-large;
    color: white;
    border: 1 px solid white;
  }
  .quote h2{
    font-size: 1.2em;
    color:#77b9ff;
    margin-inline-start: 40px;
    letter-spacing: 0.2mm;
  }
  .colorchar {
    color: #77b9ff;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
   }
.liststeps {
    grid-row: 2;
    grid-column-start: 2;
    grid-column-end: 4;
    margin-block-start: 150px;
    margin-inline-end: 50px;
    border: 1px solid white;
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 20px;
    color: white;
    width: auto;
    font-size: small;
  }
  .sublist {
    border: 0px;
    background-color:transparent;
  }

    .liststeps li {
        width: 230px;
        color: black;
        opacity: 0.9;
        font-size: large;
        margin-left: -25px;
        list-style-type: none;
        padding-inline-start: 75px;
        margin-block-start: 8px;
        background-image: url('../img/icon_agenda.png');
        background-repeat: no-repeat;
        background-size: 50px;
        background-position: left;
    }
.periodHome {
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end:3;
    margin-block-start: 220px;    
    color: white;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: larger;
    font-style: italic;
}
.periodHome  a {
   text-decoration: none;
   font-weight: bold;
   color: white;
  }
.bold {
   font-weight: bold;
  }
       
    .abutton {
        margin-inline-start: 10px;
        color: white;
        font-style: normal;
        padding: 10px;
        border: 1px solid white;
        border-radius: 15px;
        text-decoration: none;
    }
    .abutton:hover {
        background-color: rgba(255, 255, 255, 0.4);
    }
.main-content {
    max-width: 1000px;
    margin: auto;
  
    }
.home {
    margin-block-start: 90px;
    }

.contents-left {
     border: 1px solid white;
    border-radius: 15px;
    background-color: rgba(255, 255, 255, 0.8);
    max-width: 950px;
}
.contents-left h2, h3 {
  letter-spacing: 1px;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
  margin-block-start: 23px;
  margin-block-end: 0px;
}
.contents-left h3 {
  color:#006DB6;
}
.sub {
    margin-block-start: 0px;
    background-color: #ffffff;
   }

.sub-right {
    background-color: #e1dfdf;
    /* border: 1px solid rgb(0, 0, 0); */
    border-radius: 15px;
    width: 100%;
    margin-inline-start: -35px;
    min-height: 400px;
}
.sub-right p {
    margin-inline-start: 25px;
    margin-inline-end: 15px;
}

.anititel {
  padding: 10px;
  background-color: #ddf1da;
 margin-inline-start: 25px;
 min-width: 300px;
}
.contents-left p {
    margin-block-start: 20px;
    margin-inline-start: 40px;
    margin-inline-end: 30px;
}
.contents-left ul{
    margin-inline-start: 50px;
    margin-inline-end: 50px;
    margin-block-end: 50px;
}
.contents-left li{
  color: black;
  opacity: 0.9;
  font-size: normal;
  margin-left: -15px;
  list-style-type: none;
  padding-inline-start: 25px;
  margin-block-start: 8px;
  background-image: url('../img/purbul.svg');
  background-repeat: no-repeat;
  background-position: top left ;
  background-size: 20px;
}
.abuttonDark {
 /*   background-color: #3DAE2B;*/
    background-color: #2b7120;
    color:  #ffffff;
    filter: drop-shadow(3px 2px 5px #4e4d4d);
    font-style: normal;
    padding: 10px;
    border: 1px solid rgb(84, 84, 84);
    border-radius: 15px;
    text-decoration: none;
    margin-inline-start: 0px;  
  }
  .abuttonDark:hover {
    filter: drop-shadow(0px 0px 0px #4e4d4d);
    color:  #ffffff;
    text-decoration: none;
    padding: 9px;
  }
  .abuttonDark2 {
    background-color: #773DBD;
    color:  #ffffff;
    filter: drop-shadow(3px 2px 5px #4e4d4d);
    font-style: normal;
    padding: 10px;
    border: 1px solid rgb(84, 84, 84);
    border-radius: 15px;
    text-decoration: none;
    margin-block-start: 60px;
    margin-inline-start: 12px;  
  }
  .abuttonDark2:hover {
    filter: drop-shadow(0px 0px 0px #4e4d4d);
    color:  #ffffff;
    text-decoration: none;
    padding: 9px;
  }
  .in-form {
    font-weight: normal;
    text-decoration: none;
    color: #773DBD;
    font-size: small;
  }
  .under-form {
    font-weight: bold;
    text-decoration: none;
    color: #773DBD;
    font-size: 1em;
    padding-bottom: 10px;
    border-bottom: 1px solid black; 
  }
  .under-form:hover {
    font-weight: bold;
    color: #3DAE2B; 
  }
  .smaller {
    font-size: small;
    text-decoration: none;

  }
  .formP {
    min-height: 100px;
    width: 276px;
    padding: 10px;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 0.8em;
  }
  .regions {
    margin-block-start: 0px;
    margin-inline-start: 40px; 
    max-width: 300px; 
  color:#006DB6;  
  }
.footer {
    max-width: 1000px;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    height: auto;
    margin: auto;
    margin-block-end: 20px;
}
.footer-item {
  margin-inline-start: 20px;
  margin-block-start: 50px;
   /*background-color: rgba(255, 255, 255, 0.8);*/
  padding: 20px;
 
}
.footer-item h4{
  margin-block-start: 0px;
  padding-bottom: 5px;
  font-family:"Segoe UI",Arial,sans-serif;
  font-weight:200;
  letter-spacing:2px;
  border-bottom: 1px solid grey;

}
.footer-item ul{
  margin-inline-start: -20px;
}
.footer-item li{
  list-style: none;
  font-weight:100;
  color: #4e4d4d;
  font-size: small;
}
.ic-leeg {
  margin-inline-start: 16px;
  writing-mode: horizontal-tb;
}
.footer-item a{
  display: inline-block;
  padding: 15px 15px 15px 0px;
  margin: 1px;
  color: #000;
  font-size: 1.1em;
  text-decoration: none;
  text-align:left;
  transition: 100ms ease;
}
.footer-item a:hover{
  color: #3DAE2B;
  font-size: 1.1em;
  text-decoration: none;
  text-align:left;
  transition: 100ms ease;
}
.k-afbouw a {
  color: #E42C1E;
}
.k-vloeren a {
  color: #773DBD;
}
.k-wanden a {
  color: #006DB6;
}
.k-gietvloeren a {
  color: #3DAE2B;
}
.werkwijze img {margin-right: 20px;margin-bottom: 20px;}
.werkwijze {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  border-bottom: 1px solid black;
}
.warning {
  color: #E42C1E;
  font-size: smaller;
}
@media only screen and (min-width:801px) and (max-width: 959px) {
 .contents-left {
  width: 490px;
  margin-inline-start: 10px;
 }
 .contents-left li{
  background-size: 20px auto;
 }
 .contents-right {
  grid-column: 2;
  margin-block-start: 100px;
  width: 320px;
  margin-inline-end: 10px;
 }
 .under-form {
  border-bottom: 0px
 }
 .abuttonDark2 {
  margin-inline-start: 5px;  
 }
}
@media only screen and (max-width: 800px) {
 .introduction {
  display: grid;
  grid-template-columns:none;
 }
 .header-logo {
  grid-row: 1;
  width: 200px;
  height: 85px;
  background-image: url('../img/kok-gv-logo.svg');
  background-position:center;
  background-repeat: no-repeat;
  background-size: 200px auto;
 }
 .topnav {
  grid-row: 1;
  margin-inline-start: 0px;
  z-index: 3;
 }
 .quote {
  grid-row: 2;
  grid-column-start: 1;
  grid-column-end:1;
  font-size: large;
  color: white;
  border: 1 px solid white;
 }
 .liststeps {
  grid-row: 3;
  grid-column-start: 1;
  grid-column-end: 1;
  margin-inline-start: -10px;
  margin: auto;
 }
 .periodHome {
  grid-row: 4;
  grid-column-start: 1;
  grid-column-end:1;
  margin-block-start: 20px;    
  font-size: larger;
 }
 .abutton {
  margin-block-start: -50px;
  margin-block-end: 100px;
  font-size: medium;
  color:rgb(255, 251, 251);
  background-color: #2b7120;
  border: 1px solid rgb(0, 0, 0);
 }
 .abutton:hover {
  background-color: rgba(0, 0, 0, 0.4);
 }
 .main-content {
  margin: auto;
  display: grid;
  grid-template-columns: none;
 }
 .home {
  margin-block-start: 0px;
 }
 .contents-left {
  margin-block-start: 20px;
  grid-row: 1;
  grid-column: 1;
  border-radius: 0px;
  width: 100%;
 }
 .contents-left p {
  margin-block-start: 10px;
  margin-inline-start: 15px;
  margin-inline-end: 5px;
 }
 .contents-left h2, h3 {
  letter-spacing: 1px;
  margin-inline-start: 10px;
  margin-block-start: 13px;
 }
 .contents-left ul{
  margin-inline-start: 0px;
  margin-inline-end: 50px;
 }
 .contents-left li{
  background-size: 20px auto;
 }
 .werkwijze {
  border-bottom: 0px ;
 }
 .sub {
  margin-block-start: 0px;
  background-color: #ffffff;
 }
 .contents-right {
  grid-row: 2;
  grid-column: 1;
  border-radius: 0px;
  margin-block-start: 20px;
  margin-inline-start: 0px;
  min-height: auto;
 }
 .under-form {
  font-size: 1em;
  border-bottom: 0px
 }
 .abuttonDark {
  margin-inline-start: 30px;  
 }
 .footer {
  margin: auto;
  display: grid;
  grid-template-columns: auto;
  padding: 10px;
  height: auto;
  margin: auto;
  margin-block-end: -20px;
 }
 .footer-item {
  margin-inline-start: 0px;
  margin-block-start: 0px;
  padding: 20px;
 }
 
}
/* @media only screen and (max-width: 940px) {

}
   @media only screen and (max-width: 1168px) {

} */