@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
@import url("https://fonts.googleapis.com/css?family=Montserrat:300|Raleway:500");
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,800&display=swap');
@import url("https://use.typekit.net/irm6ivv.css");

	a {

	text-decoration: none;

        line-height: 1.7em;

        letter-spacing: 0px;

    }
    
    

    p{
        text-align: left;

        margin: 0px;
    }


    html::-webkit-scrollbar {

    display: none;

    }

    ::-webkit-scrollbar{

        width: 0px}



    ::-webkit-scrollbar-track-piece{

        background-color: transparent;

        -webkit-border-radius: 6px}



    html{

    -ms-overflow-style: -ms-autohiding-scrollbar;

    -ms-overflow-style: none;

    }


	body {

		font-family: 'Montserrat', sans-serif;

		font-weight: 300;

		margin:  0px;

		padding: 0px;	

		font-size: 20px;

        overflow-x:hidden;

        position: absolute;

        width: 100vw;

	}


    
	nav li {
        display: inline-flex;

        padding-left: 5%;

		text-align: center;
	}



	nav li a {

		text-transform: uppercase;

        color: white;

	}



	nav ul {

		list-style-type: none;

		margin: 0;

		padding: 0;

	}


	h1{

	margin: 0px;

    }


















    

      @media (max-width: 700px) {  
          
        p {
         text-align: -webkit-auto;
        }


          .menu-items{
            font-size:0.75em!important;
            margin-bottom: 0.2vh!important;
          }


          .Banner-text{
              padding-top: 15vh!important;
          }

          .Banner-knop{
              font-size: 1rem!important;
              padding:0.5rem!important;
              line-height: unset!important;
          }

          .projecten-grid{
            grid-template-columns: repeat(1, 1fr)!important;
          }

          .over-mij-grid{
            grid-template-columns: repeat(1, 1fr)!important;
            padding-top: 5vh!important;
          }

          .imagevak-item-1{
              margin-top: 0vh!important;
          }

          .border-text {
            border: thin solid #5f6368;
            border-radius: .5rem!important;
            padding: 1.5rem 1rem!important;
            padding-top: 1rem!important;
            margin: 0!important;
          }
          
          .over-bodytext{
            font-size: 1.1rem!important;
            line-height: 2.2rem!important;
          }

          .card-header-text{
              font-size: 0.8em!important;
          }

          .nav{
            grid-gap: 0em!important;
            grid-template-columns: auto auto!important;
            width: 88vw!important;
          }

          .Banner-titel{
            font-size: 8.5vw!important;
          }

          .mobile{
              display: none!important;
          }

          .Banner-body{
            font-size: 4.5vw!important;
            line-height: 3vh!important;
          }

          .banner-image img {
            height: unset!important;
          }

          .textvak-mid {
            font-size: 2.5vh!important;
            padding-right: 5.5vw!important;
            padding-top: 3vh!important;
            padding-bottom: 5vh!important;
            line-height: 4vh!important;
            padding-left: 5.5vw!important;
            text-align: center;
          }

          .border-text-w{
            padding: 1.5rem!important;
          }

          .waarom-bodytext {
            font-size: 1.1rem!important;
            line-height: 4vh!important;
          }

          .opsomming {
            padding-top: 8px;
            padding-bottom: 8px;
            border-radius: 8px;
            margin-top: 25px;
            width: 88%!important;
            text-align: left;
            font-size: 1rem!important;
            line-height: 5vh!important;
            font-weight: 400;
            padding-left: 15px!important;
        }

        .dun img, .middel img{
            width: 80vw!important;
        }

        .titel-item{
            font-size: 3rem;
        }




    }










      .section-1{
        background-color: #1A1D20;
      }

      .nav {
          width: 88vw;
          padding-left:6vw;
          padding-right: 6vw;
          position: fixed;
          overflow: hidden;
          display: grid;
          grid-template-columns: 25% 69%;
          grid-template-rows: repeat(1, 1fr);
          grid-gap: 4em;
          text-align: center;
          z-index: 9000;
          top: 0;
          background-color:#1A1D20;
          transition: all 0.15s linear;
      }

      .nav.active{
        background-color:#171717;
      }

      .menu-rechts{
          text-align: right;
      }

      .logo{
         text-align: left;
         font-family: 'Montserrat', sans-serif;
         font-weight: 300;
         margin: 0px;
         padding: 0px;
         font-size: 20px;
         color: white;
         text-decoration: none;
         line-height: 1.7em;
         letter-spacing: 0px;
        color: white;
      }

      .Banner-text{
          padding-top: 25vh;
          margin-left: 6vw;
          margin-right: 6vw;
          padding-bottom: 2vh;
      }

      .Banner-titel{
        color: white;
        font-size: 6.5vw;
        line-height: 7.3vw;
      }

      .Banner-body{
        color: white;
        font-size: 2.5vw;
        line-height: 4vw;
        font-weight: 100;
      }

      .Banner-knop{
        text-align: center;
        border: solid#f99512;
        border-radius: .45rem;
        padding-left: 2.5vw;
        padding-right: 2.5vw;
        padding-top: 2vh;
        padding-bottom: 2vh;
        color: #f99512;
        transition: .3s;
        cursor: pointer;
        display: inline-block;
        position: relative;
        font-size: 2vh;
        font-family: 'Montserrat', sans-serif;
        font-weight: 100;
      }

      .Banner-knop:hover {
        color: white;
        background-color: #f99512;
      }

      .Banner-knop h1{
        font-family: 'Montserrat', sans-serif;
        font-weight: 500!important;
      }

      .ander{
        border: solid#f1870c;
        color: #f1870c;
      }

      .ander:hover{
        background-color: #f1870c;
      }

      .ander-kleur{
        border: solid#EE7202;
        color: #EE7202;
      }

      .ander-kleur:hover{
        background-color:#EE7202;
      }


      .menu-items{
          margin-top:3.1vh;
          margin-bottom: 3.1vh;
          font-weight: 500;
      }

      .card{
        border-radius: .625rem;
        object-fit: cover;
        overflow: hidden;
        line-height: 0;
        background-color: #252429;
      }

      .image-container{
          width: 100%;
          height: 100%;;
      }

      .card-header{
        display: grid;
        grid-template-rows: repeat(1, 1fr);
        text-align: left;
        overflow: hidden;
        display: -ms-grid;
        -webkit-transition: .5s;
        transition: .5s;
        opacity: 1;
        border-radius: .625rem;
        height: 15vh;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
      }

      .card-header-image{
        vertical-align: middle;
        text-align: center;
        padding: 4vh;
        padding-left: 0;
        padding-right: 0;
        grid-row-start: 1;
        grid-column-start: 1;
        grid-column-end: 1;
        filter: grayscale(100%);
        height: 9vh;
        width: 100%;
      }

      .card-header-text{
        color: white;
        grid-row-start: 1;
        grid-column-start: 2;
        grid-column-end: 5;        
        line-height: 3vh;
        margin-top: 0.5vh;
      }

      .card-header-text-boven{
        padding-top: 7%;
        margin: 0px;
        color: white;
        font-weight: 500;
        margin-right: 2vw;
      }

      .card-header-text-onder{
        padding-top: 0%!important;
        margin: 0px;
        color: white;
        font-size: 1.3em;
        margin-bottom: 5%;
        margin-right: 2vw;
        text-align: right;
     }

      .card-image{
          width: 80%;
          margin-left: auto;
          margin-right: auto;
          margin-top: 3vh;
      }

      .projecten-grid{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 4em;
        column-gap: 4em;
        text-align: center;
        background-color: #1A1D21;
        padding-top: 5vh;
        padding-left: 6vw;
        padding-right: 6vw;
        padding-bottom: 20vh;
        width: 88vw;
        overflow: hidden;
        display: -ms-grid;
        -webkit-transition: .5s;
        transition: .5s;
        opacity: 1;
        margin-left: auto;
        margin-right: auto;
      }

      .card:hover{
        transition: .5s ease;
        box-shadow: -1px 10px 29px 0px rgba(0,0,0,0.8);
      }

      .card:hover > .card-header > .card-header-image {
        filter:unset;
      }

      .groen:hover{
          background-color:#01aa9f ;
      }

      .blauw:hover{
          background-color: #539eaf;
      }

      .oranje:hover{
        background-color: #c25a00;
      }

      .rose:hover{
          background-color: #dd9bac;
      }

      .toekomst{
          filter:blur(4px);
      }

      .onderlijnen{
        border-bottom: thin solid transparent;
        padding-bottom: 0.1rem;
        width: fit-content;
        /* padding-top: 2rem; */
        /* border: double 1em transparent; */
        background-image: linear-gradient(#1A1D21, #1A1D21), linear-gradient(to right, #bb24bb, #306dcf );
        background-origin: border-box;
        background-clip: content-box, border-box;
      }

      .stiften{
        /*background-image:linear-gradient(to right, #bb24bb, #306dcf );
        */
        background-color: red;
        padding: 0.1em;
        padding-left: 0.2em;
        padding-right: 0.2em;
        border-radius: 4px;
        width: fit-content;
      }

      .footer-container{
        background-color:  #1F1F1F;
        padding-bottom: 7vh;
      }

      .footer-wrapper{
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        padding-bottom: 2vh;
        padding-top: 8vh;
      }

      .footer{
        object-fit: cover;
        padding-left: 1%;
        padding-right: 1%;
        height:8vh;
        opacity: 0.8;
      }

     .footer:hover{
         opacity: 1;
      }

      .colofon{
        text-align: center;
        font-size: 10px;
        opacity: 75%;
        letter-spacing: 0.5px;
        line-height: 27px;
        color: white;
        font-size: large;
        padding-top: 3vh;
      }

      .label-header {
        color: #202125;
        font-size: 1.3em;
        font-weight: 700;
        line-height: 2.5rem;
        margin-top: 10vh;
        }
    
        .paars {
        background-color: rgb(187, 36, 187);
        padding: 0.1em;
        padding-left: 0.2em;
        padding-right: 0.2em;
        border-radius: 4px;
        }



        .over-mij-grid{
                display: grid;
                grid-template-columns: 0.4fr 1fr;
                grid-column-gap: 30px;
                grid-row-gap: 30px;
        }

        .imagevak-item-1 {
            margin-top: 10vh;
            display: block;
        }

        .imagevak-item-1 img {
            width: 100%;
            border-top-left-radius: .625rem;
            border-top-right-radius:  .625rem;
        }


        .over-mij-container{
            padding-top: 10vh;
            margin-left: 6vw;
            margin-right: 6vw;
            padding-bottom: 2vh;
            min-height: 100vh;
        }

      
          .streep{
          border-bottom: thin solid transparent;
          padding-bottom: 0.1rem;
          /* padding-top: 2rem; */
          /* border: double 1em transparent; */
          background-image: linear-gradient(#1A1D21, #1A1D21), linear-gradient(to right, #bb24bb, #306dcf );
          background-origin: border-box;
          background-clip: content-box, border-box;
          }

          .border-text{
            border: thin solid #5f6368;
            border-radius: .5rem;
            padding: 3rem;
            padding-top: 2rem;
            padding-bottom: 2rem;
        }

        .links-grid{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            text-align: center;
            padding: 0.6rem;
            padding-top: 0.6rem;
        }


        .links-grid img{
            width: unset;
            border-radius: unset;
        }

        .contact-card{
            background-color: #252429;
            border-radius: .5rem;
        }

        .over-bodytext{
            font-size: 1.4rem;
            line-height: 6vh;
            font-weight: 400;
            color: #ddd;
            word-wrap: break-word;
        }

        .enter {
            display: block;
            margin: 4.5vh 0;
            content:" "
         }


         .banner-image{
             width: 100vw;
        }

        .banner-image img{
            margin-top: 10vh;
            width: 100%;
            height: 90vh;
            object-fit: cover;
            object-position: 100% 6%;
        }

        .border-text-w {
            border-radius: .625rem;
            padding: 3rem;
            padding-top: 2rem;
            background: #28292c;
            border: none;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .60), 0 1px 3px 1px rgba(0, 0, 0, .30);
        }

        .border-text-w img{
            height: 1.5em;
            display: inline-block;
        }

        .titel-item {
            padding-bottom: 1rem;
            font-size: 3rem;
            display: inline-block;
            line-height: 7vh;
        }

        .onderstrepen-s2s {
            border: thin solid #02DAC5;
        }

        .onderstrepen-s2s-b {
        border: thin solid #02DAC5;
        } 
        
        .waarom-bodytext {
            font-size: 1.3rem;
            line-height: 5.5vh;
            font-weight: 400;
            color: #ddd;
        }

        .onderstrepen-prikkie-b {
            border: thin solid #52b5d4;
        }

        .onderstrepen-prikkie{
            border: thin solid #52b5d4;
        }

        .onderstrepen-voedsel{
            border: thin solid#EE7202;
        }
        .lager{
            margin-top: 2.5rem;
        }

        .met-text{
            margin-bottom: 25px;
        }
       
        .textvak-mid {
            color: white;
            font-size: 3.5vh;
            padding-right: 19.5vw;
            padding-top: 6vh;
            padding-bottom: 5vh;
            line-height: 7vh;
            padding-left: 19.5vw;
            text-align: center;
        }


        .border-text{
            border: thin solid #5f6368;
            border-radius: .625rem;
            padding: 3rem;
            padding-top: 2rem;
        }

        .opsomming{
            background-color: #202327;
            padding: 20px;
            padding-top: 8px;
            padding-bottom: 8px;
            border-radius: 8px;
            margin-top: 25px;
            width: 95%;
            text-align: left;
            font-size: 1.3rem;
            line-height: 7vh;
            font-weight: 400;
        }

        .imagevakbreed {
            width: 100vw;
            display: inline-block;
            padding-top: 5vh;
            padding-bottom: 5vh;
            display: block;
        }

        .imagevakbreed img {
            width: 80vw;
            border-radius: .625rem;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .dun{
        }

        .dun img{
            width:45vw;
        }

        .middel{
        }

        .middel img{
            width:65vw;
        }

        .lang{
            line-height: 5vh;
        }

        .regel {
            display: block;
            margin: 3.5vh 0;
            content:" "
         }

         .ul-prikkie {
            list-style: none; /* Remove default bullets */
          }
          
          .ul-prikkie li::before {
            content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
            color:#f1870c; /* Change the color */
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */
            width: 1em; /* Also needed for space (tweak if needed) */
            margin-left: -1em; /* Also needed for space (tweak if needed) */
          }

          .ul-s2s {
            list-style: none; /* Remove default bullets */
          }
          
          .ul-s2s li::before {
            content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
            color: #f99512;/* Change the color */
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */
            width: 1em; /* Also needed for space (tweak if needed) */
            margin-left: -1em; /* Also needed for space (tweak if needed) */
          }

          .ul-voedsel {
            list-style: none; /* Remove default bullets */
          }
          
          .ul-voedsel li::before {
            content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
            color: #DEDEDE;
            /* C
            colorhange the color */
            font-weight: bold; /* If you want it to be bold */
            display: inline-block; /* Needed to add space between the bullet and the text */
            width: 1em; /* Also needed for space (tweak if needed) */
            margin-left: -1em; /* Also needed for space (tweak if needed) */
          }


          .onder{
              padding-bottom:20vh;
          }

          .home{
            background-color: #1A1D21;
            border: .0625rem solid #5f6368;
            border-radius: .25rem;
            color: #8ab4f8;
            cursor: pointer;
            display: inline-block;
            font-family: inherit;
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 2rem;
            padding-left: 1rem;
            padding-right: 1rem;
            padding-top: 1rem;
            padding-bottom: 1rem;
            position: relative;
            text-align: center;
            font-size: 1.1rem;
          }

          .home:before{
            background: #8ab4f8;
            border-radius: .25rem;
            bottom: 0;
            content: '';
            left: 0;
            opacity: 0;
            position: absolute;
            right: 0;
            top: 0;
            transition: opacity 15ms linear;
          }

          .home:hover::before {
            opacity: .08;
          }
    
          .home:hover {
            color: #82A5DD;
            background-color: unset;
          }

          .scherm img{
            object-position: 100% 60%;
          }

          .textvak-item {
            color: white;
            font-size: 3.5vh;
            padding-left: 5%;
            padding-top: 10vh;
            margin-bottom: 10vh;
            line-height: 7vh;
          }

            .section-2{
            background-color: #1A1D20;
            }

            .vier{
              padding-top: 10vh;
            }

            .oeps{
              text-align: center;
              padding-bottom: 5vh;
            }

            .geen{
              width: unset;
            }

            .groot{
              height: 60vh;
              margin-left: auto;
              display: block;
              margin-right: auto;
            }