@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700&display=swap");
body {
  margin: 0px;
  padding: 0px;
  font-family: 'Poppins', sans-serif; }
  body a {
    text-decoration: none; }
  body p {
    letter-spacing: -0.25px; }
  body h2 {
    font-size: 35px;
    letter-spacing: -0.5px;
    font-weight: 700;
    margin: 0 0 25px 0;
    line-height: 40px; }
  body h1, body h2, body h4 {
    color: #040447; }

* {
  box-sizing: border-box; }

.button-reg {
  padding: 15px 25px;
  display: inline-block;
  color: white;
  border-radius: 9px;
  font-weight: 600;
  transition: .1s all ease-in-out;
  letter-spacing: -0.1px; }
  .button-reg:hover {
    transform: translateY(-3px); }

#wrapper {
  max-width: 65%;
  margin: 0px auto; }

.nav-colored { 
	position: fixed; 
	color: black; 
	background-color:white;
	padding: 12px 0;
	box-shadow: 5px -1px 12px -5px grey;
}

.nav-transparent { background: transparent; } 

header {
  padding: 30px 0;
  width: 100%;
  position: fixed;
	transition: .2s all ease-in-out;
  z-index: 99999; }
  header nav .content {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    header nav .content article ul {
      padding: 0px;
      margin: 0px;
      background-color: white;
      border-radius: 7px;
      display: flex;
      padding: 15px 20px; }

header nav .content article .logo {
	display: block;
    width: 150px;
}

      header nav .content article ul li {
        list-style-type: none; }
        header nav .content article ul li a {
          color: #040447;
          margin: 0 15px;
          font-size: 15px;
          font-weight: 500; }
          header nav .content article ul li a:hover {
            text-decoration: underline; }
    header nav .content article .button-reg {
      background-color: #EDFCFE;
      color: #040447; }

#hero {
  padding: 200px 0 100px 0;
  background-color: #EDFCFE;
  position: relative; }
  #hero .content {
    display: flex;
    justify-content: space-between; }
    #hero .content article {
      flex: 0 0 45%; }
      #hero .content article h1 {
        font-size: 65px;
        line-height: 70px;
        margin: 0px; }
        #hero .content article h1 span {
          position: relative; }
          #hero .content article h1 span:after {
            content: '';
            width: 100%;
            height: 10px;
            background-color: #00E5CC;
            position: absolute;
            left: 0;
            bottom: 18px;
            z-index: -9; }
      #hero .content article p {
        color: #56646C;
        line-height: 31px;
        font-weight: 500;
        font-size: 19px;
        margin: 35px 0 10px 0; }
    #hero .content .left {
      position: relative;
      z-index: 99; }
      #hero .content .left .buttons {
        margin-top: 50px; }
        #hero .content .left .buttons .button-reg {
          background: linear-gradient(180deg, #0C0C66 0%, #040440 100%);
          z-index: 999;
          position: relative; }
        #hero .content .left .buttons .bottom-a {
          color: #6A9297;
          display: block;
          margin-top: 30px;
          font-weight: 500; }
          #hero .content .left .buttons .bottom-a i {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: white;
            border-radius: 50%;
            color: #040447;
            font-size: 9px;
            margin-left: 10px;
            transition: .1s; }
          #hero .content .left .buttons .bottom-a:hover i {
            margin-left: 15px; }
  #hero .right-img {
    width: 50%;
    height: 105%;
    background-image: url("/wp-content/uploads/2022/03/hero.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0; }
    #hero .right-img h2 {
      color: white;
      position: absolute;
      right: 30px;
      bottom: -12px;
      margin: 0px;
      font-size: 60px;
      line-height: 65px; }

#bedrijven {
  padding: 150px 0 100px 0;
  text-align: center; }
  #bedrijven #wrapper {
    max-width: 60%; }
  #bedrijven p {
    line-height: 25px;
    color: #7D8589; }
  #bedrijven .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px; }

#bedrijven .content .slick-track {
	display: flex;
    align-items: center;
}

    #bedrijven .content article img {
      width: 150px;
      filter: grayscale(100%);
      opacity: .2;
      transition: .15s all ease-in-out; }
      #bedrijven .content article img:hover {
        opacity: unset;
        filter: unset; }

#service {
  padding: 0 0 60px 0;
  text-align: center; }
  #service #wrapper {
    max-width: 60%; }
  #service h3 {
    color: #00C6AE;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 16px;
    margin: 0 0 10px 0;
    font-weight: 700; }
  #service h2 {
    max-width: 40%;
    margin: 0 auto;
    line-height: 47px; }
  #service .intro {
    max-width: 50%;
    margin: 20px auto 0 auto;
    line-height: 25px;
    color: #56646C;
    font-weight: 500; }
  #service .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 100px; }
    #service .content article {
      flex: 0 0 350px;
      border: 1px solid #EBF5F9;
      padding: 40px;
      border-radius: 10px;
      margin-bottom: 40px; }
      #service .content article h4 {
        margin-bottom: 0px; }
      #service .content article div {
        position: relative;
        width: auto;
        display: inline-block; }
        #service .content article div i {
          position: absolute;
          top: -20px;
          right: -20px;
          background: #00E5CC;
          box-shadow: 0px 8px 20px rgba(52, 198, 53, 0.25);
          color: white;
          width: 35px;
          height: 35px;
          line-height: 35px;
          text-align: center;
          border-radius: 50%; }
      #service .content article p {
        color: #56646C;
        margin-bottom: 0px; }
      #service .content article:nth-child(2), #service .content article:nth-child(5) {
        position: relative;
        top: -40px; }
  #service .button-reg {
    background: linear-gradient(180deg, #0C0C66 0%, #040440 100%); }

#map {
  text-align: center;
  padding: 100px 0; }
  #map h3 {
    color: #00C6AE;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 16px;
    margin: 0 0 10px 0;
    font-weight: 700; }
  #map h2 {
    max-width: 40%;
    margin: 0 auto;
    line-height: 47px; }

#reviews {
  text-align: center;
  position: relative; }
  #reviews h2 {
    max-width: 40%;
    margin: 0 auto;
    font-size: 28px; }
  #reviews .intro {
    color: #56646C;
    line-height: 25px;
    max-width: 37%;
    margin: 20px auto 0 auto; }
  #reviews #wrapper {
    background: linear-gradient(129.01deg, #F2FEFF 27.62%, #E0FBFF 100%);
    padding: 60px 0 400px 0;
    border-radius: 10px; }
  #reviews .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 40px;
    position: absolute;
    width: 70%;
    left: 50%;
    transform: translateX(-50%); }
    #reviews .content article {
      flex: 0 0 415px;
      background-color: white;
      padding: 30px;
      text-align: left;
      box-shadow: 0px 60px 120px -20px rgba(95, 157, 166, 0.25); }
      #reviews .content article .stars i {
        color: #FBB040;
        font-size: 13px;
        letter-spacing: -2px; }
      #reviews .content article .review-text {
        color: #56646C;
        line-height: 24px;
        font-size: 15px; }
      #reviews .content article .name h4 {
        color: #040447;
        font-weight: 700;
        margin: 20px 0 5px 0; }
      #reviews .content article .name p {
        color: #969696;
        font-weight: 400;
        margin: 0px;
        font-size: 15px; }



footer {
  padding: 100px 0; }
  footer .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    footer .content .contact h4 {
      color: #7C7C83;
      text-transform: uppercase;
      letter-spacing: 4px;
      font-weight: 600;
      margin: 0 0 20px 0; }
    footer .content .contact h3 {
      font-size: 29px;
      margin: 0px; }
      footer .content .contact h3 a {
        color: #040447; }
    footer .content article h4 {
      color: black;
      font-weight: 500;
      margin: 0 0 15px 0; }
    footer .content article ul {
      margin: 0px;
      padding: 0px; }
      footer .content article ul li {
        list-style: none;
        margin: 10px 0; }
        footer .content article ul li a {
          color: #56646C;
          text-decoration: none; }
          footer .content article ul li a:hover {
            text-decoration: underline; }
    footer .content article p {
      color: #56646C;
      line-height: 25px; }
    footer .content :nth-child(4) {
      flex: 0 0 20%; }

#hero-lp {
  padding: 150px 0 100px 0;
  background-color: #EDFCFE;
  position: relative; }
  #hero-lp .content {
    display: flex;
    justify-content: space-between; }
    #hero-lp .content article {
      flex: 0 0 45%; }
      #hero-lp .content article h1 {
        font-size: 50px;
        line-height: 70px;
        margin: 0px; }
        #hero-lp .content article h1 span {
          position: relative; }
          #hero-lp .content article h1 span:after {
            content: '';
            width: 100%;
            height: 10px;
            background-color: #00E5CC;
            position: absolute;
            left: 0;
            bottom: 18px;
            z-index: -9; }
    #hero-lp .content .left {
      position: relative;
      z-index: 99; }
  #hero-lp .right-img {
    width: 50%;
    height: 105%;
    background-image: url("/wp-content/uploads/2022/03/hero.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0; }
    #hero-lp .right-img h2 {
      color: white;
      position: absolute;
      right: 30px;
      bottom: -12px;
      margin: 0px;
      font-size: 60px;
      line-height: 65px; }

#blokken {
  padding-top: 100px; }
  #blokken #wrapper {
    max-width: 50%; }
  #blokken .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    #blokken .content article {
      border: 3px solid #F9F9F9;
      border-radius: 10px;
      flex: 0 0 32%;
      padding: 30px 10px;
      text-align: center; }
      #blokken .content article img {
        display: block;
        margin: 0px auto;
        width: 50px; }
      #blokken .content article h3 {
        color: #040447;
        margin: 15px 0;
        letter-spacing: -0.3px;
        font-weight: 700; }
      #blokken .content article a {
        color: #00C6AE;
        font-weight: 600; }
        #blokken .content article a:hover {
          text-decoration: underline; }

#contact-formulier {
  padding: 100px 0; }
  #contact-formulier #wrapper {
    max-width: 50%; }
  #contact-formulier .content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; }
    #contact-formulier .content .usp {
      flex: 0 0 20%; }
      #contact-formulier .content .usp ul {
        padding: 0px;
        margin: 0px; }
        #contact-formulier .content .usp ul li {
          position: relative;
          list-style-type: none;
          margin-bottom: 25px;
          color: black;
          padding-left: 42px;
          line-height: 25px;
          color: #7D8589; }
#contact-formulier .content .usp ul li strong {
	font-weight: 600;
}
          #contact-formulier .content .usp ul li:before {
            background: transparent url("/wp-content/uploads/2022/03/check.png") scroll 0 0 no-repeat;
            background-size: 37px;
            content: "";
            width: 38px;
            height: 38px;
            position: absolute;
            left: 0;
            top: -5px; }

/* Waring melding */
.wpcf7 form.invalid > .wpcf7-response-output {
	margin-left: 0px;
	margin-right: 0px;
	background-color: white;
	border: unset;
	border-left: 4px solid #FF8D00;
	border-radius: 4px;
	box-shadow: 0 32px 32px -32px rgb(56, 46, 44, 0.08);
	color: #8E9095;
	font-weight: 400;
	position: relative;
	font-size: 15px;
	padding: 40px 22px 22px 55px;
}
.wpcf7 form.invalid > .wpcf7-response-output:before {
	color: #FF8D00;
	position: absolute;
	font: var(--fa-font-solid);
    content:  '\f06a';
	display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	
	left: 20px;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
	font-size: 23px;
}
.wpcf7 form.invalid > .wpcf7-response-output:after {
	content: 'Warning';
    position: absolute;
    color: black;
    top: 11px;
    left: 55px;
    font-size: 15.5px;
    letter-spacing: -0.2px;
    font-weight: 700;
}
/* End waring melding */


#contact-formulier .wpcf7-not-valid-tip {
	font-size: 13px;
    font-weight: 600;
    position: relative;
    top: -14px;
}

#contact-formulier .content .formulier {
	flex: 0 0 70%;
}
#contact-formulier .content .formulier form .content-for-inputs {
	display: flex;
	justify-content: space-between;
}
#contact-formulier .content .formulier form .content-for-inputs div {
	flex: 0 0 48%;
}
#contact-formulier .content .formulier form .content-for-inputs input {
	font-size: 14px;
	border: 1px solid #d2d2d2;
	background: none;
	font-family: 'Inter', sans-serif;
	border-radius: 4px;
	outline: none;
	color: grey;
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;
	transition: .3s;
}
#contact-formulier .content .formulier form .content-for-inputs input:focus {
	border: 1px solid #00C6AE; }
#contact-formulier .content .formulier form .content-for-inputs input::placeholder {
	color: grey;
	font-family: 'Inter', sans-serif; }
#contact-formulier .content .formulier form textarea {
	border: 1px solid #d2d2d2;
	background: none;
	font-family: 'Inter', sans-serif;
	border-radius: 4px;
	outline: none;
	color: grey;
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;
	font-size: 14px;
	transition: .3s;
	resize: none; }
#contact-formulier .content .formulier form textarea:focus {
	border: 1px solid #00C6AE; }
#contact-formulier .content .formulier form textarea::placeholder {
	color: grey;
	font-family: 'Inter', sans-serif; }
#contact-formulier .content .formulier form input[type=submit] {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	 -webkit-appearance: none;
	margin: 0px;
	padding: 15px 25px;
	border: none;
	width: 50%;
	background: linear-gradient(180deg, #0C0C66 0%, #040440 100%);
	display: inline-block;
	color: white;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer; }

#contact-formulier .content .formulier form .content-for-inputs p {
	margin: 0px;
}



#intro-lp {
  padding: 100px 0; }
  #intro-lp .content {
    display: flex;
	  align-items: flex-start;
    justify-content: space-between; }
    #intro-lp .content article {
      flex: 0 0 47%; }
      #intro-lp .content article p {
        line-height: 25px;
        color: #7D8589;
        font-weight: 400; }

#intro-lp .content article ul li {
	line-height: 25px;
    color: #7D8589;
    font-weight: 400;
	margin: 7px 0;
}

      #intro-lp .content article a {
        color: #00C6AE;
        font-weight: 600;
        margin-top: 10px;
        display: inline-block; }
        #intro-lp .content article a:hover {
          text-decoration: underline; }

.content-section {
  padding: 100px 0; }
  .content-section .content {
    display: flex;
    justify-content: space-between;
    align-items: center; }
    .content-section .content article {
      flex: 0 0 47%; }
      .content-section .content article p {
        color: #7D8589;
        line-height: 25px; }

.content-section .content article ul li {
	line-height: 25px;
    color: #7D8589;
    font-weight: 400;
	margin: 7px 0;
}

      .content-section .content article .img-wrapper {
        overflow: hidden;
        padding: 0px;
        max-height: 400px;
        max-width: 100%;
        position: relative;
        border-radius: 30px 30px 0 30px; }
        .content-section .content article .img-wrapper img {
          display: block;
          object-fit: cover;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 400px; }
      .content-section .content article a {
        color: #00C6AE;
        font-weight: 600;
        margin-top: 20px;
        display: inline-block; }
        .content-section .content article a:hover {
          text-decoration: underline; }

.content-section.bg {
  background-color: #f8fdff; }

.content-section.rev .content article .img-wrapper {
  border-radius: 30px 30px 30px 0; }

.contact-formulier {
	background: linear-gradient(129.01deg, #F2FEFF 27.62%, #E0FBFF 100%);
	border-radius: 15px;
	padding: 25px;
	
	position: sticky;
    top: 150px;
}
.contact-formulier  span.wpcf7-not-valid-tip {
	font-size: 14px;
    position: relative;
    top: -15px;
}
.contact-formulier .wpcf7-spinner {
	display: none;
}

.contact-formulier input,
.contact-formulier textarea {
	font-size: 14px;
    background: white;
	border: 1px solid white;
    font-family: 'Poppins', sans-serif;
    border-radius: 4px;
    outline: none;
    color: #56646C;
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    transition: .3s;
}
.contact-formulier input:focus {
	border: 1px solid #00C6AE; }
.contact-formulier input::placeholder {
	color: #56646C;
	font-family: 'Poppins', sans-serif; }
.contact-formulier textarea {
	border: 1px solid #d2d2d2;
	background: none;
	font-family: 'Poppins', sans-serif;
	border-radius: 4px;
	outline: none;
	color: grey;
	width: 100%;
	padding: 15px;
	margin-bottom: 20px;
	font-size: 14px;
	transition: .3s;
	resize: none; }
.contact-formulier textarea:focus {
	border: 1px solid #00C6AE; }
.contact-formulier  textarea::placeholder {
	color: grey;
	font-family: 'Poppins', sans-serif; }
.contact-formulier input[type=submit] {
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	 -webkit-appearance: none;
	margin: 0px;
	padding: 15px 25px;
	border: none;
	width: 100%;
	background: linear-gradient(180deg, #0C0C66 0%, #040440 100%);
	display: inline-block;
	color: white;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer; }

.contact-formulier p {
	margin: 0px;
}



@media only screen and (max-width: 600px) {
	
	#wrapper {
		max-width: 90%;
	}
	
	body h2 {
		font-size: 26px;
		line-height: 32px;
	}
	
	.slick-dots li button:before {
		font-size: 12px !important;
	}
	.slick-dots {
		bottom: -35px !important;
	}
	
	/* 	----------------  */
	header {
		background-color: white !important;
		top: 0;
		padding: 5px 0;
	}
	header nav .content article .logo {
		width: 105px;
	}
	header nav .content .right {
		display: none;
	}
	
	/*  max mega menu  */
	header a.mega-menu-link {
		padding-left: 5% !important;
		padding-right: 5% !important;
	}
	/*  end   */
	
	#hero {
		padding: unset;
	}
	#hero #overlay {
		padding: 125px 0 65px 0;
	}
	#hero .right-img {
		width: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.49) 0%, rgba(21, 106, 177, 0) 100%), url("/wp-content/uploads/2022/03/hero.png");
		height: 100%;
	}
	#hero .content article {
		flex: 0 0 100%;
	}
	#hero .content article h1 {
		font-size: 40px;
    	line-height: 45px;
		color: white;
	}
	#hero .content article p {
		line-height: 27px;
    	font-size: 17px;
		color: white;
	}
	#hero .content article h1 span:after {
		height: 6px;
    	bottom: 11px;
		background-color: #55c3b7;
	}
	#hero .right-img h2 {
		display: none;
	}
	#hero .content .left .buttons {
		margin-top: 35px;
	}
	#hero .content .left .buttons .bottom-a {
		color: white;
	}
	#hero .content .left .buttons .button-reg {
		background: #55c3b7;
	}
	
	#bedrijven {
		padding: 60px 0;
	}
	#bedrijven #wrapper {
		max-width: 90%;
	}
	#bedrijven .content article img {
		margin: 0px auto;
	}
	
	#service #wrapper {
		max-width: 90%;
	}
	#service h2 {
		max-width: unset;
		line-height: 34px;
	}
	#service .intro {
		max-width: unset;
	}
	#service .content {
		margin-top: 50px;
		display: block;
	}
	#service .content article:nth-child(2), #service .content article:nth-child(5) {
		top: unset;
	}
	#service .content article {
		margin: 0px 5px;
		flex: 0 0 100%;
	}
	#service .button-reg {
		margin-top: 40px;
	}
	
	#map {
		padding: 50px 0;
	}
	#map h2 {
		max-width: unset;
		line-height: 34px;
	}
	
	#reviews h2 {
		line-height: 34px;
		max-width: 90%;
	}
	#reviews #wrapper {
		padding-top: 42px;
	}
	#reviews .intro {
		max-width: 90%;
	}
	#reviews .content {
		width: 100%;
		overflow: hidden;
	}
	#reviews .content article {
		margin-left: 5px;
		margin-right: 5px;
		box-shadow: unset;
	}
	
	footer {
		padding: 50px 0 30px 0;
	}
	footer .content {
		flex-wrap: wrap;
	}
	footer .content article,
	footer .content :nth-child(4) {
		flex: 0 0 100%;
	}
	footer .content article {
		margin-bottom: 20px;
	}
	footer .content .contact h4 {
		font-size: 15px;
	}
	footer .content .contact h3 {
		font-size: 18px;
	}
	
	
	/*  Landings pagina	 */
	#hero-lp {
		padding: unset;
	}
	#hero-lp #overlay {
		padding: 125px 0 60px 0;
	}
	#hero-lp .right-img {
		width: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.49) 0%, rgba(21, 106, 177, 0) 100%), url("/wp-content/uploads/2022/03/hero.png");
		height: 100%;
	}
	#hero-lp .content article {
		flex: 0 0 100%;
	}
	#hero-lp .content article h1 {
		font-size: 40px;
    	line-height: 45px;
		color: white;
	}
	#hero-lp .content article p {
		line-height: 27px;
    	font-size: 17px;
		color: white;
	}
	#hero-lp .content article h1 span:after {
		height: 6px;
    	bottom: 11px;
		background-color: #55c3b7;
	}
	#hero-lp .right-img h2 {
		display: none;
	}
	#hero-lp .content article h1 {
		font-size: 32px;
	}
	
	#intro-lp {
		padding: 50px 0;
	}
	#intro-lp .content {
		flex-wrap: wrap;
	}
	#intro-lp .content article {
		flex: 0 0 100%;
	}
	#intro-lp .content article p {
		font-size: 15px;
	}
	#intro-lp .content article ul li {
		font-size: 15px;
	}
	
	.content-section {
		padding: 50px 0;
	}
	.content-section .content {
		flex-wrap: wrap;
	}
	.content-section .content article {
		flex: 0 0 100%;
	}
	.content-section .content article p {
		font-size: 15px;
	}
	.content-section .content article .img-wrapper {
		margin-top: 25px;
	}
	.content-section .content article .img-wrapper,
	.content-section .content article .img-wrapper img {
		max-height: 220px;
	}
	
	.content-section.rev .content {
		flex-direction: column-reverse;
	}
	.content-section.rev .content article,
	.content-section.rev .content article .img-wrapper {
		width: 100%;
	}
	
	.contact-formulier {
		margin-top: 50px;
	}
	
	
	/* 	Contact pagina  */
	#blokken #wrapper {
		max-width: 90%;
	}
	#blokken .content {
		flex-wrap: wrap;
	}
	#blokken .content article {
		flex: 0 0 49%;
		transition: .15s all ease-in-out;
	}
	#blokken .content article:hover {
		background-color: #F9F9F9;
	}
	#blokken .content article #content {
		display: flex;
		align-items: center;
	}
	#blokken .content article #content .info {
		text-align: left;
	}
	#blokken .content article #content img {
		width: 25px;
		margin: 0 10px 0 0;
	}
	#blokken .content article h3 {
		margin-top: 0px;
		margin-bottom: 1.5px;
	}
	#blokken .content article h3,
	#blokken .content article a {
		font-size: 12px;
	}
	
	#blokken .content article {
		padding: 12px;
	}
	#blokken .content .locatie {
		flex: 0 0 100%;
		margin-top: 8px;
		display: flex;
		justify-content: center;
	}
	#blokken {
		padding-top: 60px;
	}
	
	#contact-formulier #wrapper {
		max-width: 90%;
	}
	#contact-formulier .content {
		flex-wrap: wrap;
	}
	#contact-formulier .content .formulier {
		flex: 0 0 100%;
	}
	#contact-formulier .content .formulier p {
		margin: 0px;
	}
	#contact-formulier .content .formulier form .content-for-inputs {
		flex-wrap: wrap;
	}
	#contact-formulier .content .formulier form .content-for-inputs div {
		flex: 0 0 100%;
	}
	#contact-formulier {
		padding: 50px 0;
	}
	#contact-formulier .content .usp {
		margin-top: 30px;
		flex: 0 0 100%;
	}
	
	
}

@media screen and (min-width: 601px) and (max-width: 767px) {
	
	#wrapper {
		max-width: 80%;
	}
	
	body h2 {
		font-size: 28px;
		line-height: 36px;
	}
	
	/* 	----------------  */

	header nav .content .right {
		display: none;
	}
	header {
		background-color: white !important;
		top: 0;
		padding: 5px 0;
	}
	
	/*  max mega menu  */
	header a.mega-menu-link {
		padding-left: 10% !important;
		padding-right: 10% !important;
	}
	/*  end   */
	
	#hero {
		padding: unset;
	}
	#hero #overlay {
		padding: 145px 0 85px 0;
	}
	#hero .right-img {
		width: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.49) 0%, rgba(21, 106, 177, 0) 100%), url("/wp-content/uploads/2022/03/hero.png");
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#hero .content article {
		flex: 0 0 100%;
	}
	#hero .content article h1 {
		font-size: 40px;
    	line-height: 45px;
		color: white;
	}
	#hero .content article p {
		line-height: 27px;
    	font-size: 17px;
		color: white;
	}
	#hero .content article h1 span:after {
		height: 6px;
    	bottom: 11px;
		background-color: #55c3b7;
	}
	#hero .right-img h2 {
		display: none;
	}
	#hero .content .left .buttons {
		margin-top: 35px;
	}
	#hero .content .left .buttons .bottom-a {
		color: white;
	}
	#hero .content .left .buttons .button-reg {
		background: #55c3b7;
	}
	
	#bedrijven {
		padding: 60px 0;
	}
	#bedrijven #wrapper {
		max-width: 90%;
	}
	#bedrijven .content article img {
		margin: 0px auto;
	}
	
	#service #wrapper {
		max-width: 80%;
	}
	#service h2 {
		max-width: unset;
		line-height: 34px;
	}
	#service .intro {
		max-width: unset;
	}
	#service .content {
		margin-top: 50px;
		display: block;
	}
	#service .content article:nth-child(2), #service .content article:nth-child(5) {
		top: unset;
	}
	#service .content article {
		margin: 0px 5px;
		flex: 0 0 100%;
	}
	#service .button-reg {
		margin-top: 40px;
	}
	
	#map {
		padding: 50px 0;
	}
	#map h2 {
		max-width: unset;
		line-height: 34px;
	}
	
	#reviews h2 {
		line-height: 34px;
		max-width: 90%;
	}
	#reviews #wrapper {
		padding-top: 42px;
	}
	#reviews .intro {
		max-width: 90%;
	}
	#reviews .content {
		width: 100%;
		overflow: hidden;
	}
	#reviews .content article {
		margin-left: 5px;
		margin-right: 5px;
		box-shadow: unset;
	}
	
	footer {
		padding: 50px 0 30px 0;
	}
	footer .content {
		flex-wrap: wrap;
	}
	footer .content article,
	footer .content :nth-child(4) {
		flex: 0 0 50%;
	}
	footer .content article {
		margin-bottom: 20px;
	}
	footer .content .contact h4 {
		font-size: 15px;
	}
	footer .content .contact h3 {
		font-size: 18px;
	}
	
	
	/*  Landings pagina	 */
	#hero-lp {
		padding: unset;
	}
	#hero-lp #overlay {
		padding: 110px 0 75px 0;
	}
	#hero-lp .right-img {
		width: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.49) 0%, rgba(21, 106, 177, 0) 100%), url("/wp-content/uploads/2022/03/hero.png");
		height: 100%;
	}
	#hero-lp .content article {
		flex: 0 0 100%;
	}
	#hero-lp .content article h1 {
		font-size: 40px;
    	line-height: 45px;
		color: white;
	}
	#hero-lp .content article p {
		line-height: 27px;
    	font-size: 17px;
		color: white;
	}
	#hero-lp .content article h1 span:after {
		height: 6px;
    	bottom: 11px;
		background-color: #55c3b7;
	}
	#hero-lp .right-img h2 {
		display: none;
	}
	#hero-lp .content article h1 {
		font-size: 32px;
	}
	
	#intro-lp {
		padding: 50px 0;
	}
	#intro-lp .content {
		flex-wrap: wrap;
	}
	#intro-lp .content article {
		flex: 0 0 100%;
	}
	#intro-lp .content article p {
		font-size: 15px;
	}
	#intro-lp .content article ul li {
		font-size: 15px;
	}
	
	.content-section {
		padding: 50px 0;
	}
	.content-section .content {
		flex-wrap: wrap;
	}
	.content-section .content article {
		flex: 0 0 100%;
	}
	.content-section .content article p {
		font-size: 15px;
	}
	.content-section .content article .img-wrapper {
		margin-top: 25px;
	}
	.content-section .content article .img-wrapper,
	.content-section .content article .img-wrapper img {
		max-height: 220px;
	}
	
	.content-section.rev .content {
		flex-direction: column-reverse;
	}
	.content-section.rev .content article,
	.content-section.rev .content article .img-wrapper {
		width: 100%;
	}
	
	.contact-formulier {
		margin-top: 50px;
	}
	
	
	/* 	Contact pagina  */
	#blokken #wrapper {
		max-width: 80%;
	}
	#blokken .content {
		flex-wrap: wrap;
	}
	#blokken .content article {
		flex: 0 0 49%;
		transition: .15s all ease-in-out;
	}
	#blokken .content article:hover {
		background-color: #F9F9F9;
	}
	#blokken .content article #content {
		display: flex;
		align-items: center;
	}
	#blokken .content article #content .info {
		text-align: left;
	}
	#blokken .content article #content img {
		width: 35px;
		margin: 0 10px 0 0;
	}
	#blokken .content article h3 {
		margin-top: 0px;
		margin-bottom: 1.5px;
	}
	#blokken .content article h3,
	#blokken .content article a {
		font-size: 14px;
	}
	
	#blokken .content article {
		padding: 17px;
	}
	#blokken .content .locatie {
		flex: 0 0 100%;
		margin-top: 8px;
		display: flex;
		justify-content: center;
	}
	#blokken {
		padding-top: 60px;
	}
	
	#contact-formulier #wrapper {
		max-width: 80%;
	}
	#contact-formulier .content {
		flex-wrap: wrap;
	}
	#contact-formulier .content .formulier {
		flex: 0 0 100%;
	}
	#contact-formulier .content .formulier p {
		margin: 0px;
	}
	#contact-formulier {
		padding: 50px 0;
	}
	#contact-formulier .content .usp {
		margin-top: 30px;
		flex: 0 0 100%;
	}
	
	
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	
	#wrapper {
		max-width: 75%;
	}
	
	body h2 {
		font-size: 28px;
		line-height: 36px;
	}
	
	/* 	----------------  */
	
	header nav .content .right {
		display: none;
	}
	header {
		background-color: white !important;
		top: 0;
		padding: 5px 0;
	}
	
	/*  max mega menu  */
	header a.mega-menu-link {
		padding-left: 12.5% !important;
		padding-right: 12.5% !important;
	}
	/*  end   */
	
	#hero {
		padding: unset;
	}
	#hero #overlay {
		padding: 145px 0 85px 0;
	}
	#hero .right-img {
		width: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.49) 0%, rgba(21, 106, 177, 0) 100%), url("/wp-content/uploads/2022/03/hero.png");
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#hero .content article {
		flex: 0 0 62%;
	}
	#hero .content article h1 {
		font-size: 52px;
    	line-height: 51px;
		color: white;
	}
	#hero .content article p {
		line-height: 27px;
    	font-size: 17px;
		color: white;
	}
	#hero .content article h1 span:after {
		height: 6px;
    	bottom: 11px;
		background-color: #55c3b7;
	}
	#hero .right-img h2 {
		display: none;
	}
	#hero .content .left .buttons {
		margin-top: 35px;
	}
	#hero .content .left .buttons .bottom-a {
		color: white;
	}
	#hero .content .left .buttons .button-reg {
		background: #55c3b7;
	}
	
	#bedrijven {
		padding: 70px 0;
	}
	#bedrijven #wrapper {
		max-width: 75%;
	}
	#bedrijven .content article img {
		margin: 0px auto;
	}
	
	#service #wrapper {
		max-width: 75%;
	}
	#service h2 {
		max-width: unset;
		line-height: 34px;
	}
	#service .intro {
		max-width: unset;
	}
	#service .content {
		margin-top: 50px;
		display: block;
	}
	#service .content article:nth-child(2), #service .content article:nth-child(5) {
		top: unset;
	}
	#service .content article {
		margin: 0px 5px;
		flex: 0 0 100%;
	}
	#service .button-reg {
		margin-top: 40px;
	}
	
	#map {
		padding: 50px 0;
	}
	#map h2 {
		max-width: unset;
		line-height: 34px;
	}
	
	#reviews h2 {
		line-height: 34px;
		max-width: 90%;
	}
	#reviews #wrapper {
		padding-top: 42px;
	}
	#reviews .intro {
		max-width: 90%;
	}
	#reviews .content {
		width: 100%;
		overflow: hidden;
	}
	#reviews .content article {
		margin-left: 5px;
		margin-right: 5px;
		box-shadow: unset;
	}
	
	footer {
		padding: 50px 0 30px 0;
	}
	footer .content {
		flex-wrap: wrap;
	}
	footer .content article,
	footer .content :nth-child(4) {
		flex: 0 0 50%;
	}
	footer .content article {
		margin-bottom: 20px;
	}
	footer .content .contact h4 {
		font-size: 15px;
	}
	footer .content .contact h3 {
		font-size: 18px;
	}
	
	
	/*  Landings pagina	 */
	#hero-lp {
		padding: unset;
	}
	#hero-lp #overlay {
		padding: 140px 0 75px 0;
	}
	#hero-lp .right-img {
		width: 100%;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.49) 0%, rgba(21, 106, 177, 0) 100%), url("/wp-content/uploads/2022/03/hero.png");
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#hero-lp .content article {
		flex: 0 0 100%;
	}
	#hero-lp .content article h1 {
		font-size: 40px;
    	line-height: 45px;
		color: white;
	}
	#hero-lp .content article p {
		line-height: 27px;
    	font-size: 17px;
		color: white;
	}
	#hero-lp .content article h1 span:after {
		height: 6px;
    	bottom: 11px;
		background-color: #55c3b7;
	}
	#hero-lp .right-img h2 {
		display: none;
	}
	#hero-lp .content article h1 {
		font-size: 32px;
	}
	
	#intro-lp {
		padding: 60px 0;
	}
	#intro-lp .content {
		flex-wrap: wrap;
	}
	#intro-lp .content article {
		flex: 0 0 85%;
	}
	
	.content-section {
		padding: 60px 0;
	}
	.content-section .content {
		flex-wrap: wrap;
	}
	.content-section .content article {
		flex: 0 0 85%;
	}
	.content-section .content article .img-wrapper {
		margin-top: 50px;
	}
	.content-section .content article .img-wrapper,
	.content-section .content article .img-wrapper img {
		max-height: 260px;
	}
	
	.content-section.rev .content {
		flex-direction: column-reverse;
		align-items: flex-start;
	}
	.content-section.rev .content article {
		width: 85%;
	}
	.content-section.rev .content article .img-wrapper {
		width: 100%;
	}
	
	
	.contact-formulier {
		margin-top: 50px;
	}
	
	
	/* 	Contact pagina  */
	#blokken #wrapper {
		max-width: 75%;
	}
	#blokken .content {
		flex-wrap: wrap;
	}
	#blokken .content article {
		flex: 0 0 49%;
		transition: .15s all ease-in-out;
	}
	#blokken .content article:hover {
		background-color: #F9F9F9;
	}
	#blokken .content article #content {
		display: flex;
		align-items: center;
	}
	#blokken .content article #content .info {
		text-align: left;
	}
	#blokken .content article #content img {
		width: 35px;
		margin: 0 15px 0 0;
	}
	#blokken .content article h3 {
		margin-top: 0px;
		margin-bottom: 1.5px;
	}
	#blokken .content article h3,
	#blokken .content article a {
		font-size: 15.5px;
	}
	
	#blokken .content article {
		padding: 17px;
	}
	#blokken .content .locatie {
		flex: 0 0 100%;
		margin-top: 8px;
		display: flex;
		justify-content: center;
	}
	#blokken {
		padding-top: 60px;
	}
	
	#contact-formulier #wrapper {
		max-width: 75%;
	}
	#contact-formulier .content {
		flex-wrap: wrap;
	}
	#contact-formulier .content .formulier {
		flex: 0 0 100%;
	}
	#contact-formulier .content .formulier p {
		margin: 0px;
	}
	#contact-formulier {
		padding: 50px 0;
	}
	#contact-formulier .content .usp {
		margin-top: 30px;
		flex: 0 0 100%;
	}
	
	
	
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
	
	#wrapper {
		max-width: 75%;
	}
	
	body h2 {
		font-size: 28px;
		line-height: 36px;
	}
	
	/* 	----------------  */
	header nav .content {
		flex-direction: row;
	}
	header nav .content article:nth-child(2) {
		order: 3;		
	}
	header nav .content article:nth-child(3) {
		order: 2;
		position: relative;
		right: -20%;
	}
	
	header {
		background-color: white !important;
		top: 0;
		padding: 10px 0;
	}
	header nav .content article .button-reg {
		display: inline-block;
	}
	
	/*  max mega menu  */
	header a.mega-menu-link {
		padding-left: 12.5% !important;
		padding-right: 12.5% !important;
	}
	/*  end   */
	
	/* Home pagina */
	#hero {
		padding: 137px 0 100px 0;
	}
	#hero .content article h1 {
		font-size: 58px;
    	line-height: 65px;
	}
	#hero .right-img {
		width: 44%;
    	height: 104%;
	}
	
	#bedrijven {
		padding: 70px 0;
	}
	#bedrijven #wrapper {
		max-width: 75%;
	}
	#bedrijven .content article img {
		margin: 0px auto;
	}
	
	#service #wrapper {
		max-width: 60%;
	}
	#service h2 {
		max-width: 90%;
    	line-height: 40px;
	}
	#service .intro {
		max-width: 90%;
	}
	#service .content article {
		flex: 0 0 100%;
		margin: 0 5px;
	}
	#service .content article:nth-child(5) {
		top: unset;
	}
	
	
	#map {
		padding: 50px 0;
	}
	#map h2 {
		max-width: unset;
		line-height: 34px;
	}
	
	#reviews h2 {
		line-height: 34px;
		max-width: 75%;
	}
	#reviews #wrapper {
		padding-top: 55px;
	}
	#reviews .intro {
		max-width: 75%;
	}
	#reviews .content {
		width: 100%;
	}
	#reviews .content article {
		margin-left: 5px;
		margin-right: 5px;
		flex: 0 0 350px;
	}
	
	footer {
		padding: 50px 0;
	}
	footer .content {
		flex-wrap: wrap;
	}
	footer .content article,
	footer .content :nth-child(4) {
		flex: 0 0 25%;
	}
	footer .content .contact h4 {
		font-size: 15px;
	}
	footer .content .contact h3 {
		font-size: 20px;
	}
	
	
	/*  Landings pagina	 */
	#hero-lp .content article h1 {
		font-size: 40px;
	}
	#hero-lp .right-img h2 {
		bottom: -6px;
		font-size: 47px;
		line-height: 45px;
	}
	
	#intro-lp {
		padding: 75px 0;
	}
	#intro-lp .content {
		flex-wrap: wrap;
	}
	#intro-lp .content article {
		flex: 0 0 85%;
	}
	
	.content-section {
		padding: 75px 0;
	}
	.content-section .content {
		flex-wrap: wrap;
	}
	.content-section .content article {
		flex: 0 0 85%;
	}
	.content-section .content article .img-wrapper {
		margin-top: 55px;
	}
	.content-section .content article .img-wrapper,
	.content-section .content article .img-wrapper img {
		max-height: 260px;
	}
	
	.content-section.rev .content {
		flex-direction: column-reverse;
		align-items: flex-start;
	}
	.content-section.rev .content article {
		width: 85%;
	}
	.content-section.rev .content article .img-wrapper {
		width: 100%;
	}
	
	.contact-formulier {
		margin-top: 50px;
		flex: 0 0 60%;
	}
	
	/* Contact pagina */
	#blokken #wrapper,
	#contact-formulier #wrapper {
		max-width: 75%;
	}
	
	
	
}

@media screen and (min-width: 1200px) and (max-width: 1500px) {
	
	#wrapper {
		max-width: 75%;
	}
	
	body h2 {
		font-size: 28px;
		line-height: 36px;
	}
	
	/* 	----------------  */	

	
	#hero {
		padding: 165px 0 100px 0;
	}
	#hero .content article h1 {
		font-size: 58px;
    	line-height: 65px;
	}
	#hero .right-img {
		width: 44%;
    	height: 104%;
	}
	
	
	#bedrijven {
		padding: 90px 0;
	}
	#bedrijven #wrapper {
		max-width: 75%;
	}
	#bedrijven .content article img {
		margin: 0px auto;
	}
	
	#service #wrapper {
		max-width: 60%;
	}
	#service h2 {
		max-width: 90%;
    	line-height: 40px;
	}
	#service .intro {
		max-width: 90%;
	}
	#service .content article {
		flex: 0 0 48%;
	}
	#service .content article:nth-child(2),
	#service .content article:nth-child(4),
	#service .content article:nth-child(6) {
		position: relative;
    	top: -40px;
	}
	#service .content article:nth-child(5) {
		top: unset;
	}
	
	
	#map {
		padding: 70px 0;
	}
	#map h2 {
		max-width: unset;
		line-height: 34px;
	}
	
	#reviews h2 {
		line-height: 34px;
		max-width: 75%;
	}
	#reviews #wrapper {
		padding-top: 55px;
	}
	#reviews .intro {
		max-width: 75%;
	}
	#reviews .content {
		width: 100%;
	}
	#reviews .content article {
		margin-left: 5px;
		margin-right: 5px;
		flex: 0 0 350px;
	}
	#reviews .content {
		justify-content: space-evenly;
	}
	
	footer {
		padding: 80px 0;
	}
	footer .content {
		flex-wrap: wrap;
	}
	footer .content article,
	footer .content :nth-child(4) {
		flex: 0 0 25%;
	}
	footer .content .contact h4 {
		font-size: 15px;
	}
	footer .content .contact h3 {
		font-size: 20px;
	}
	
	
	
	/* Contact pagina */
	#blokken #wrapper,
	#contact-formulier #wrapper {
		max-width: 65%;
	}
	
	
	
}