.container {
    width: unset;
    max-inline-size: unset;
    width: 100%;
    
}

.main_nav {
    max-inline-size: 1080px;
    margin: auto;
}

.sidebar_button.active:after {
    all: unset;
}

.hero {
    padding: 0em;
}

.hero > h3 {
    top: 8em;
    width: 90%;
    
    font-weight: 700;
    text-align: center;
}

.heroblock > img {
    min-width: 100%;
    max-height: 750px;
    object-fit: cover;
}

.sectionbreak {
    width: 100%;
    background-color: white;
    background: linear-gradient( 65deg ,hsl(197,10%,50%),white);   
    height: 2em;
}

.sectionbreak2 {
    width: 100%;
    background-color: white;
    background: linear-gradient( 65deg ,white,hsl(197,10%,50%));   
    height: 2em;
}

.main {
    width: 100%;
}
.topintro {
    width: 100%;
    /*background-image: linear-gradient( 65deg ,hsl(197,10%,50%),white);   */
    /*background-image:  linear-gradient( 180deg ,hsl(195,63%,93%),hsl(196,100%,95%)   ); */
/******* Onderstende background img conflicteerd met de main background dus deleted ***********/
/*    background-image: linear-gradient( 180deg ,hsl(180,3%,93%),hsl(196,100%,95%),hsl(196,100%,100%)     ); */

    margin: unset;
    height: unset;
    padding-bottom: 1em;
}

.txtblock {
    width: 75%;
    margin: auto;
    /*background-color: white;    */
    background: linear-gradient( 125deg , hsl(197,100%,95%, white) ); ;
    border-radius: 5px;
}


.usp .listusp { 
  list-style: none;
  padding: 5px;
}

li.listusp {
  font-size: 1.25em;
}

.accord_outline {
  margin-top: 1em;
}


.topintro h3 {
    font-family: Roboto;
    text-align: center;
    font-size: 2em;

}

.topintro p {
    text-align: justify;
    font-size: 1.25em;
    line-height: 1.5;
    
}

.accord_outline {
    max-width: 75%;
    margin: auto;
    background-color: white;
    border-radius: 5px;
}

.accordion {
    background-color: unset;
    background: unset;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.5em;
    transition: 0.4s;
  }
  
  .active, .accordion:hover {
    background-color:hsl(196,100%,80%)
  }
  
  .accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "\2212";
  }
  
  .panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
  }

  .panel > p { 
    font-weight: 500;
  }

  .topintro #btncontact {
    display: block;
    float: none;
    margin-top: 1em;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 2em;
    font-size: 1.25em;
  }

  .sectionheader {
    width: 80%;
    margin: auto;
    background-image: linear-gradient( 125deg ,hsl(196,100%,95%), hsl(197,100%,50%) );
  }

  .sectionheader > h1 {
    color: white;
    font-family: Roboto;
    text-align: center;
    padding: 2.5em;
    font-size: 3em;
  }

  .sectionheader.images {
    margin-top: 1em;
    max-width: 1200px;
  }

  .sectionheader img{
    max-inline-size: 100%;
    object-fit: cover;
  }

  .cardgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;

  }

  .scard {
    display: grid;
    gap: 0;
    grid-row: span 3;
    grid-template-rows: max-content auto max-content;
    grid-template-rows: subgrid;
    border: none;
    max-width: 80%;
    margin: auto;
    background: linear-gradient( 125deg , hsl(197,100%,97%) ,white );
  }

  .sbox {
    max-width: 65%;
    height: 309px;
    margin: auto;
    display: flex; 
    align-self: self-start; 
  }

  .sbox img {
    max-inline-size: 100%;
    object-fit: cover;
    flex: 1;
  }

  .descrbox {
    max-width: 70%;
    text-align: justify;
    justify-self: center;
    
  }


.descrbox > h3 {
    text-align: center;
}




/*
  .scard {
    display: flex;
    flex-direction: column;
    flex: 1;
    border: none;
    max-width: 80%;
    margin: auto;
  }

  .sbox {
    max-width: 65%;
    height: 309px;
    margin: auto;
    display: flex;

  }

  .sbox img {
    max-inline-size: 100%;
    object-fit: cover;
    flex: 1;
  }

  .descrbox {
    max-width: 70%;
    text-align: justify;
    margin: auto;
  }*/

  .sectionheader.details {
    width: 100%;
    background-image: linear-gradient( 205deg ,hsl(196,100%,95%), hsl(197,100%,50%) );
  }

  .cardbtn {
    grid-column: span 2;
  }

  .cardbtn > #btncontact {
    display: block;
    inline-size: 80%;
    float: none;
    padding: 1.5em;
    margin: auto;
    margin-bottom: 1em;
    margin-top: 1em;
    font-size: 1.5em;
  }

  /*
  .onhow {
    margin: auto;
    max-width: 1200px;
  }

  .artic {
    column-count: 3;
    column-rule: 2px solid grey;
    column-gap: 2.5em;
    margin-top: 1.75em;
  } */

  .onhow {
    max-width: 60rem;
    margin: auto;
    /*background: linear-gradient( 125deg , hsl(195,33%,93%),hsl(197,100%,95%) ); */
    background: linear-gradient( 125deg , white,hsl(197,100%,95%) ); 
    border-radius: 5px;
  }

  .onhow > h1 , h2,  p {
    font-family: sans-serif;
    color: black;
    
  }

  .onhow >  h2,  p {
    margin-left: 1em;
    margin-right: 1em;

    
  }


  .onhow > h1 {
    display: inline-block;
    /*border-top: 2px solid hsl(197,10%,50%);
    border-bottom: 2px solid hsl(197,10%,50%);
    font-family: serif;*/
    font-size: 2.5em;
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 2em;
    margin-bottom: 1em;
    margin-left: 20%;
    margin-right: 20%;

  }

  figure {
    float: left;
    margin-right: 1em;
    width: 50vw; 
    
    margin-left: 0;

  }

  .landingtop {
    max-width: 50%;
  }

  figure img {
    max-inline-size: 100%;
    object-fit: cover;
  }

  figure.fright {
    float: right;
    margin-left: 1em;
    margin-right: 0;
    max-width: 50%;
  }

  figure.modest {
    width: 30vw;
  }
  
  .artic > h2 {
    font-size: 1.5em;
    text-transform: uppercase;
    margin-left: 1em;
    margin-right: 1em;
    text-align: center;
  }

.artic > h3 {
  font-size: 1.2em;
  text-transform: uppercase;
  text-align: left;
  margin-left: 1.5em;

}

  .artic > p {
    font-size: 1.2rem;
    text-align: justify;
    
    -webkit-hyphens: auto;
    hyphens: auto;
    line-height: 1.75;
    font-weight: 500;

    letter-spacing: .03125rem;

    line-height: 1.75rem;
  }

  

  p.whiteb {
    background-color: white;
  }
  @media (max-width: 1000px) {

    .hero {
        margin-top: unset;
    }

    .accord_outline {
        max-width: 100%;
        margin-left: 2em;
        margin-right: 2em;
    }

    .accordion {
        font-size: 2.25em;
        font-weight: 500;
    }

    .panel > p {
        font-size: 2.25em;
        font-weight: 400;
        text-align: left;
    }


    .cardgrid {
        display: block;
        
    
      }

    .topintro #btncontact { 
        font-size: 2.5em;
        color: black;
    }

    .cardbtn #btncontact {
        font-size: 2em;
        color: black;
    }
    
  

    .scard {
        margin-bottom: 2em;
    }

    .cardbtn #btncontact {
        font-size: 2.5em;
        color: black;
    }


    .artic > p {
        font-size: 1.5rem;
        line-height: 2.5rem;
        font-weight: 400;
    } 

    .blogarticle.wide {
      width: 100%;
    }

}

  @media (max-width: 900px) {

    .hero > h3 {

        position: absolute;
        top: 1em;
        font-size: 2em;
        margin: 0em 0.5em;
    }

}