.project-aanpak-block {
    padding: 100px 0px;
}
.project-aanpak-block .grey-bg {
    position: relative;
    box-shadow: 8px 8px 15px #1a2f2d;
    border: 1px solid #1a2f2d;
    margin: 0 auto;
	backdrop-filter: blur(10px);
}
@media screen and (min-width: 1600px) {
    .project-aanpak-block .checkpoints {
        width: 73%;
    }
    .project-aanpak-block .grey-bg {
        width: 50%;
        padding: 30px;
    }
    .project-aanpak-block .illustration img {
        width: 350px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1600px) {
    .project-aanpak-block .checkpoints {
        width: 80%;
    }
    .project-aanpak-block .grey-bg {
        width: 70%;
        padding: 30px;
    }
    .project-aanpak-block .illustration img {
        width: 350px;
        opacity: 0.5;
    }
}
@media screen and (max-width: 992px) {
    .project-aanpak-block .grey-bg {
        width: 100%;
        padding: 30px;
    }
    .project-aanpak-block .illustration img {
        width: 250px;
        opacity: 0.3;
    }
}

.project-aanpak-block .illustration {
    width: 20%;
}
.project-aanpak-block .project-aanpak-content {
    color: #fff;
}
.project-aanpak-block .check-title {
    font-weight: 700;
}
.project-aanpak-block svg {
    color: var(--secondary-color);
}
.project-aanpak-block .check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
.project-aanpak-block .illustration img {
    position: absolute;
    right: -50px;
    bottom: -1px;
}
/* TEXT BLOCK WITH SIDE TEXT */
.text-block-row {
    padding-top: 100px;
}

.text-block .specific {
    padding-top: 100px;
}

.side-text-div {
    position: absolute;
    left: 7.5%;
    margin: 0 auto;
}
/* laptop/mac */
@media only screen and (max-width: 1600px) {
    .kennis-maken-container {
        margin-left: 0 !important;
    }
}
@media screen and (min-width: 992px) {
    .text-block-img-div-rechts {
        width: 50%;
    }
    .block-geen-achtergrond {
        padding-top: 100px;
    }
}
@media screen and (max-width:992px) {
    .block-geen-achtergrond {
        padding-top: 20px;
    }
}
.rotated-side-text {
    margin: 0 auto;
    font-size: 22px;
    font-weight: 600;
    writing-mode: vertical-lr;
    font-family: var(--primary-font);
    text-transform: uppercase;
	color: #fff;
}
.text-block-container {
    display: flex; 
    justify-content: center; 
	align-items: center;
    padding-bottom: 50px;
    gap: 100px;
}
@media screen and (min-width: 1600px) {
	.text-block-div {
		width: 45%;
	}
}
@media screen and (min-width: 1024px) and (max-width:1600px) {
	.text-block-div {
		width: 60%;
	}
}
.text-block-div ul {
    padding-left: 10px;
    font-size: inherit!important;
}
.text-block-div ul li {
    font-weight: 400!important;
}

.text-block-title {
    font-size: 35px;
    color: #fff;
    margin-bottom: 50px;
}
/* laptop/mac */
@media only screen and (max-width: 1600px) {
    .text-block-title {
        font-size: 33px;
    }
}

.text-block-text {
    font-size: 16px;
    line-height: 1,5;
}

/* with img */
.text-block-img {
    display: flex;
    width: 65%;
    height: 300px;
    margin: 0 0 0 100px;
}
.text-block-image {
    width: 100%;
}

/* uitlijningen */

/* links met foto */
.text-block .rows {
    justify-content: center;
}
.text-block-container-links-image, .text-block-rechts {
    width: 70%;
}
.text-block-div-image-links {
    width: 50%;
}
.text-block-img-div-links .text-block-text {
    font-size: 14px;
}
.text-block-img-div-links {
    width: 50%;
    margin-left: 0;
}
/* links zonder foto */
.text-block-container-links {
    justify-content: flex-start;
}
.text-block-div-links {
    width: 45%;
    margin-left: 15%;
}


/* midden */
.text-block-container-midden {
    justify-content: center;
}
.text-block-div-midden {
    margin-left: 0;
}

/* rechts met foto */
.text-block-image-rechts {
    width: 100%;
}
.text-block-div-image-rechts {
    width: 50%;
}

/* rechts zonder foto */
.text-block-container-rechts {
    justify-content: flex-end;
}
.text-block-div-rechts {
    width: 45%;
    margin-right: 5%;
}

/* Stretch */
.text-block-div-stretch {
    width: 70%;
}

/* tablet */
@media only screen and (max-width: 1024px) {
    .rows {
        display: flex;
    }
    .text-block-row {
        padding-top: 50px;
    }
    .side-text-div {
        margin: 0;
    }
    .text-block-div {
        margin-left: 0;
        width: 100%;
    }
    .text-block-div-links {
        margin-left: 25px;
        width: 100%;
    }
    .text-block-div-rechts {
        width: 100%;
        margin-right: 25px;
    }
    .text-block-div-stretch {
        width: 90%;
    }
    .rotated-side-text {
        display: none;
    }
    .side-text-div {
        margin: 0;
        min-height: 100px;
        display: flex;
        justify-content: center;
    }
    .specific {
        padding-left: 0;
    }
    .text-block-container {
        width: 80%;
        flex-direction: column!important;
        gap: 0px!important;
    }
}

/* phone */
@media only screen and (max-width: 550px) {
    .text-block-row {
        padding-top: 75px;
        margin-top: -75px;
    }

    .rows {
		max-width: 100%;
        display: flex;
    }

    .text-block .specific {
        padding-top: 0;
    }

    .side-text-div {
        margin: 0;
        min-height: auto;
        display: flex;
        justify-content: center;
        position: initial;
    }

    .specific {
        padding-left: 0;
    }

    .text-block-container {
        width: 95%;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .text-block-title {
        margin-top: 15px;
        margin-bottom: 10px;
        font-size: 22px;
    }
    
    .text-block-div {
        width: 100%;
    }

    .rotated-side-text {
        display: none;
        font-size: 20px;
        margin-bottom: 0;
        padding-top: 25px;
        padding-bottom: 25px;
        writing-mode: horizontal-tb;
    }

    .text-block-img-div-links {
        margin-bottom: 50px;
        width: 90%;
    }

    .text-block-div-image-links {
        margin-top: 25px !important;
    }

    .text-block-img {
        width: 100%;
        margin: 0 0 450px 25px;
        display: flex;
        flex-direction: column;
    }

    .text-block-with-img {
        width: 90%;
    }
}

/* phone laying */
@media only screen and (max-height: 440px) {
    .text-block-row {
        padding-top: 25px;
    }
    .center-title {
        padding-top: 25px;
        margin-bottom: 0 !important;
    }
    .text-block-title {
        margin-top: 0px;
    }
    .rotated-side-text {
        display: none;
    }
}

/* TOP PAGE BLOCK */
@media screen and (min-width: 992px) {
    .top-page-block {
        height: auto;
        margin-top: -135px;
/*         background-color: var(--primary-color); */
        background-size: cover;
        padding-bottom: 150px;
        background-position: bottom;
    }
}
@media screen and (max-width: 992px) {
    .top-page-block {
        height: auto;
        margin-top: -135px;
/*         background-color: var(--primary-color); */
        background-position: 65%!important;
        background-size: cover;
        padding-bottom: 50px;
    }
	.subtitle {
		font-size: 16px!important;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1600px) {
	.top-page-block {
		padding-bottom: 30px;
	}
	.top-page-title-block {
		margin-top: 350px!important;
	}
}
.top-page-title-block {
    margin-top: 450px;
    margin-left: 7.5%;
}

.top-page-title-block-midden {
    margin-top: 450px;
    margin-left: 30%;
}

.top-page-title {
    color: var(--white-color);
    margin-bottom: 10px;
    font-size: 48px;
}

.subtitle {
    color: white;
    font-weight: normal;
    font-size: 21px;
	text-shadow: 0px 0px 5px #000;
}

.top-page-img-block {
    display: flex;
    justify-content: flex-end;
    margin-top: 100px;
}

.top-page-img {
    width: 85%;
}

/* tablet */
@media only screen and (max-width: 1024px) {
    .top-page-title-block {
        margin-top: 230px;
        margin-left: 50px;
    }
    .top-page-title-block-midden {
        margin-top: 230px;
        margin-left: 10%;
    }
    .top-page-container {
        display: flex;
        flex-direction: row;
    }
}

@media only screen and (max-width: 800px) {
    .top-page-title-block-midden {
        margin-top: 230px;
        margin-left: 10%;
    }
}

/* phone */
@media only screen and (max-width: 500px) {
    .top-page-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 40px;
    }

    .top-page-title-block {
		width: 100%;
        margin-top: 230px;
        margin-left: 25px;
    }

    .top-page-title-block-midden {
        margin-top: 230px;
        margin-left: 10%;
    }

    .top-page-title {
        font-size: 26px;
    }
}
/* DIENSTEN BLOCK */
.diensten-block {
    margin-top: 100px;
    margin-bottom: 100px;
}

.dienst-row {
    justify-content: center;
}

.diensten-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1420px;
}

.diensten-column {
    margin-top: 50px;
}
.diensten-column .row {
    width: 100%;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.dienst-block {
	padding-top: 40px;
    padding-left: 25px !important;
	padding-right: 20px;
    background-color: #264341;
}
.lees-meer-button path {
	fill: #fff;
}

.dienst-hoofd-title {
    margin-bottom: 25px;
}
.dienst-title {
    margin-bottom: 25px;
}

.dienst-title, .lees-meer-button {
    color: #fff;
}
.dienst-block:hover .lees-meer-button {
    transform: rotate(180deg);
}
.dienst-block:hover .lees-meer-button svg {
    animation: bounceDienstRight 2s infinite;
}
.dienst-block:hover .lees-meer-button svg path {
    fill: var(--secondary-color);
}
.dienst-block p {
    color: #fff;
}
@keyframes bounceDienstRight {
    0%, 20%, 50%, 80%, 100% {
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
    40% {
      -moz-transform: translateX(5px);
      -ms-transform: translateX(5px);
      -webkit-transform: translateX(5px);
      transform: translateX(5px);
    }
    60% {
      -moz-transform: translateX(2px);
      -ms-transform: translateX(2px);
      -webkit-transform: translateX(2px);
      transform: translateX(2px);
    }
}


.arrow-div {
    display: flex;
    justify-content: flex-end;
}

.read-more {
    transform: rotate(180deg);
}


/* laptop/mac */
@media only screen and (max-width: 1600px) {
    .dienst-title {
        font-size: 22px;
    }
    .dienst-block p {
        font-size: 15px;
    }
}

/* tablet */
@media only screen and (max-width: 1024px) {
    .diensten-div {
        width: auto;
    }
}

/* phone */
@media only screen and (max-width: 550px) {
    .diensten-block {
        margin-top: 0;
        margin-bottom: 100px;
    }
   
    .diensten-column .row {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 25px;
	}
    .diensten-column {
        margin: 0;
    }
}

/* phone laying */
@media only screen and (max-height: 440px) {
    .diensten-block {
        margin-top: 0;
        margin-bottom: 50px;
    }
    .diensten-column {
        margin-left: 10px;
    }
}

@media screen and (min-width:1024px) and (max-width:1600px) {
	.diensten-column {
		max-width: 76%!important;
	}
}

/* APPROACH */
.approach {
/* 	background: url(https://fconlinenieuw.afo-staging.nl/wp-content/uploads/2023/03/fconline.png); */
	position: relative;
/* 	background-position: center; */
/* 	background-repeat: no-repeat; */
/* 	background-size: cover; */
    padding-top: 100px;
	padding-bottom: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.approach h2, .approach .side-text-div {
	color: #fff!important;
}
.left-space {
	width: 70%;
}
#soccer-field {
	width: 1150px;
    height: 950px;
    margin-top: -230px;
    margin-left: -50px;
}
#soccer-field path {
  	stroke-width: 8px;
  	fill: #c5c5c5;
  	stroke: #F8F8F8;
  	/* animation: progress 3s linear forwards; */
}
@keyframes progress {
  from {
    stroke-dasharray:0;
  }
  to {
    stroke-dasharray:3600;
  }
}
.soccerfield-svg {
    width: 100%!important;
    height: 914px;
}
.strategy-1 {
	position: absolute;
    top: 75%;
    left: 36%;
    opacity: 0;
    display: none;
    width: 129px;
    height: 31px;
}
.strategy-2 {
	position: absolute;
    top: 71%;
    left: 41%;
    opacity: 0;
    display: none;
    width: 35px;
    height: 37px;
}
.strategy-3 {
	position: absolute;
    top: 78%;
    left: 42%;
    opacity: 0;
    display: none;
    width: 37px;
    height: 39px;
}
.design-1 {
	position: absolute;
    left: 43%;
    top: 31%;
	opacity: 0;
    display: none;
    width: 170px;
    height: 70px;
}
.coding-1 {
	position: absolute;
    right: 31%;
    bottom: 10%;
	opacity: 0;
    display: none;
    width: 362px;
    height: 227px;
}
.marketing-1 {
	position: absolute;
    right: 18%;
    top: 38%;
    transform: rotate(35deg);
	opacity: 0;
    display: none;
    width: 362px;
    height: 227px;
}

/* groter scherm */
@media only screen and (min-width: 2100px) {
    .hero-title {
        margin-bottom: 50px;
    }
}
/* laptop/mac */
@media only screen and (max-width: 1600px) {
    
}

@media only screen and (max-height: 440px) {
    .approach {
        padding-top: 50px;
        padding-bottom: 0;
    }
    .left-space {
        width: 100%;
    }
    .left-space .hero-title {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}








@media screen and (max-width: 1920px) {
    .soccerfield-svg {
        width: 1500px;
    }
    .coding-1 {
        right: 24%;
        bottom: 16%;
    }
    .soccer-block.marketing {
        top: 30% !important;
        right: 20% !important;
    }
    .marketing-1 {
        right: 14%;
        top: 38%;
    }
}







@media screen and (max-width: 1800px) {
    .soccerfield-svg {
        width: 1200px;
    }
    .soccer-block .small-title {
        font-size: 14px !important;
    }
    .soccer-block h3 {
        font-size: 21px;
    }
    .soccer-block p {
        font-size: 12px;
    }
    /*  */
    .soccer-block.strategy {
        top: 57% !important;
        left: 31% !important;
    }
    .strategy-1 {
        top: 71%;
        left: 35%;
        width: 110px;
        height: 31px;
    }
    .strategy-2 {
        top: 67%;
        left: 41%;
        width: 30px;
        height: 32px;
    }
    .strategy-3 {
        top: 73%;
        left: 43%;
        width: 32px;
        height: 34px;
    }
    /*  */
    .soccer-block.design {
        top: 23% !important;
        left: 40% !important;
    }
    .design-1 {
        left: 42%;
        top: 35%;
        width: 160px;
        height: 60px;
    }
    /*  */
    .soccer-block.coding {
        top: 60% !important;
        right: 37% !important;
    }
    .coding-1 {
        right: 30%;
        bottom: 22%;
        width: 260px;
        height: 180px;
    }
    /*  */
    .soccer-block.marketing {
        top: 31% !important;
        right: 25% !important;
    }
    .marketing-1 {
        right: 20%;
        top: 38%;
        width: 260px;
        height: 180px;
    }
}





@media screen and (max-width: 1550px) {
    .soccerfield-svg {
        width: 1000px;
        height: 650px;
    }
    .soccer-block .small-title {
        font-size: 12px !important;
        color: var(--primary-color);
    }
    .soccer-block h3 {
        font-size: 19px;
    }
    .soccer-block p {
        font-size: 10px;
    }
    /*  */
    .soccer-block.strategy {
        top: 56% !important;
        left: 30% !important;
    }
    .strategy-1 {
        top: 70%;
        left: 36%;
        width: 90px;
        height: 30px;
    }
    .strategy-2 {
        top: 66%;
        left: 42%;
        width: 26px;
        height: 28px;
    }
    .strategy-3 {
        top: 72%;
        left: 44%;
        width: 28px;
        height: 30px;
    }
    /*  */
    .soccer-block.design {
        top: 22% !important;
        left: 39% !important;
    }
    .design-1 {
        left: 41%;
        top: 34%;
        width: 150px;
        height: 50px;
    }
    /*  */
    .soccer-block.coding {
        top: 54% !important;
        right: 38% !important;
    }
    .coding-1 {
        right: 30%;
        bottom: 22%;
        width: 230px;
        height: 160px;
    }
    /*  */
    .soccer-block.marketing {
        top: 30% !important;
        right: 24% !important;
    }
    .marketing-1 {
        right: 15%;
        top: 39%;
        width: 230px;
        height: 160px;
    }
}








@media screen and (max-width: 1150px) {
    .soccerfield-svg {
        width: 800px;
    }
    .soccer-block .small-title {
        font-size: 10px !important;
    }
    .soccer-block h3 {
        font-size: 13px;
    }
    .soccer-block p {
        font-size: 9px;
    }
    /*  */
    .soccer-block.strategy {
        top: 54% !important;
        left: 29% !important;
    }
    .strategy-1 {
        top: 67%;
        left: 36%;
        width: 75px;
        height: 25px;
    }
    .strategy-2 {
        top: 64%;
        left: 42%;
        width: 22px;
        height: 24px;
    }
    .strategy-3 {
        top: 69%;
        left: 44%;
        width: 24px;
        height: 26px;
    }
    /*  */
    .soccer-block.design {
        top: 29% !important;
        left: 39% !important;
    }
    .design-1 {
        left: 41%;
        top: 40%;
        width: 140px;
        height: 40px;
    }
    /*  */
    .soccer-block.coding {
        top: 55% !important;
        right: 35% !important;
    }
    .coding-1 {
        right: 26%;
        bottom: 26%;
        width: 180px;
        height: 120px;
    }
    /*  */
    .soccer-block.marketing {
        top: 35% !important;
        right: 22% !important;
    }
    .marketing-1 {
        right: 16%;
        top: 44%;
        width: 180px;
        height: 120px;
    }
}

@media screen and (max-width: 850px) {
    .approach {
        padding-bottom: 150px;
    }
    .hero-title {
        text-align: center;
        padding-bottom: 50px;
    }
    .soccerfield-svg {
        width: 700px !important;
    }
    .left-space {
        padding: 0;
    }
    .hero-subtitle-side {
        left: 3;
    }
    .soccer-field {
        transform: rotate(90deg);
    }
    .soccerfield-svg {
        width: 650px;
    }
    .soccer-block .small-title {
        font-size: 10px !important;
    }
    .soccer-block h3 {
        font-size: 13px;
    }
    .soccer-block p {
        font-size: 9px;
    } 
    /*  */
    .soccer-block.strategy {
        top: 400px !important;
        left: 80px !important;
        transform: rotate(-90deg);
    }
    .strategy-1 {
        top: 440px;
        left: 200px;
        width: 75px;
        height: 25px;
    }
    .strategy-2 {
        top: 410px;
        left: 250px;
        width: 22px;
        height: 24px;
    }
    .strategy-3 {
        top: 470px;
        left: 260px;
        width: 24px;
        height: 26px;
    }
    /*  */
    .soccer-block.design {
        top: 200px !important;
        left: 110px !important;
        transform: rotate(-90deg);
    }
    .design-1 {
        left: 220px;
        top: 200px;
        width: 140px;
        height: 40px;
    }
    /*  */
    .soccer-block.coding {
        top: 300px !important;
        right: 110px !important;
        transform: rotate(-90deg);
    }
    .coding-1 {
        right: 00px;
        bottom: 150px;
        width: 180px;
        height: 120px;
    }
    /*  */
    .soccer-block.marketing {
        top: 180px !important;
        right: 30px !important;
        transform: rotate(-90deg);
    }
    .marketing-1 {
        right: -120px;
        top: 250px;
        width: 170px;
        height: 100px;
    } 
}









@media screen and (max-width: 550px) {
    .approach {
        padding-top: 50px;
    }
    
    .soccerfield-svg {
        width: 600px !important;
    }
    .left-space {
        padding: 0 0 50px 0;
        width: 100%;
    }
    .hero-title {
        font-size: 25px;
        text-align: center;
    }
    .soccer-field {
        padding: 25px;
        margin-top: -150px;
        transform: rotate(90deg);
    }
    .soccerfield-svg {
        width: 650px;
    }
    .soccer-block .small-title {
        font-size: 10px !important;
    }
    .soccer-block h3 {
        font-size: 13px;
    }
    .soccer-block p {
        font-size: 9px;
    } 
    /*  */
    .soccer-block.strategy {
        top: 400px !important;
        left: 50px !important;
        transform: rotate(-90deg);
    }
    .strategy-1 {
        top: 425px;
        left: 160px;
        width: 75px;
        height: 25px;
    }
    .strategy-2 {
        top: 390px;
        left: 220px;
        width: 22px;
        height: 24px;
    }
    .strategy-3 {
        top: 460px;
        left: 220px;
        width: 24px;
        height: 26px;
    }
    /*  */
    .soccer-block.design {
        top: 225px !important;
        left: 75px !important;
        transform: rotate(-90deg);
    }
    .design-1 {
        left: 190px;
        top: 230px;
        width: 140px;
        height: 40px;
    }
    /*  */
    .soccer-block.coding {
        top: 270px !important;
        right: -60px !important;
        transform: rotate(-90deg);
    }
    .coding-1 {
        right: -75px;
        bottom: 200px;
        width: 175px;
        height: 115px;
    }
    /*  */
    .soccer-block.marketing {
        top: 200px !important;
        right: -150px !important;
        transform: rotate(-90deg);
    }
    .marketing-1 {
        right: -175px;
        top: 300px;
        width: 150px;
        height: 80px;
    } 
}


/* phone laying */
@media only screen and (max-height: 380px) {
    .soccerfield-svg {
        width: 600px !important;
    }
}
@media only screen and (max-height: 430px) {
    .soccerfield-svg {
        width: 700px ;
    }
}

@media only screen and (max-height: 440px) {
    .hero-subtitle-side {
        left: 3%;
    }
    .left-space {
        padding: 0;
    }
    .hero-title {
        padding-top: 25px;
        padding-left: 0;
    }
    .soccer-field {
        transform: rotate(0deg) !important;
    }
    .soccerfield-svg {
        height: 500px;
    }
}

@media only screen and (max-height: 360px) {
    .soccerfield-svg {
        margin-left: 10%;
    }

    /*  */
    .soccer-block.strategy {
        top: 240px !important;
        left: 70px !important;
        transform: rotate(0deg);
    }
    .strategy-1 {
        top: 335px;
        left: 180px;
        width: 73px;
        height: 23px;
    }
    .strategy-2 {
        top: 310px;
        left: 220px;
        width: 20px;
        height: 22px;
    }
    .strategy-3 {
        top: 370px;
        left: 235px;
        width: 22px;
        height: 24px;
    }
    /*  */
    .soccer-block.design {
        top: 75px !important;
        left: 150px !important;
        transform: rotate(0deg);
    }
    .design-1 {
        left: 250px;
        top: 160px ;
        width: 130px;
        height: 35px;
    }
    /*  */
    .soccer-block.coding {
        top: 240px !important;
        right: 260px !important;
        transform: rotate(0deg);
    }
    .coding-1 {
        top: 290px;
        right: 185px;
        width: 170px;
        height: 110px;
    }
    /*  */
    .soccer-block.marketing {
        top: 100px !important;
        right: 100px !important;
        transform: rotate(0deg);
    }
    .marketing-1 {
        right: 80px;
        top: 180px;
        width: 160px;
        height: 90px;
    } 
}
@media only screen and (min-height: 370px) and  (max-height: 375px) {
    .soccerfield-svg {
        margin-left: 5%;
    }

    /*  */
    .soccer-block.strategy {
        top: 240px !important;
        left: 30px !important;
        transform: rotate(0deg);
    }
    .strategy-1 {
        top: 335px;
        left: 120px;
        width: 73px;
        height: 23px;
    }
    .strategy-2 {
        top: 310px;
        left: 160px;
        width: 20px;
        height: 22px;
    }
    .strategy-3 {
        top: 370px;
        left: 175px;
        width: 22px;
        height: 24px;
    }
    /*  */
    .soccer-block.design {
        top: 75px !important;
        left: 100px !important;
        transform: rotate(0deg);
    }
    .design-1 {
        left: 210px;
        top: 160px;
        width: 130px;
        height: 35px;
    }
    /*  */
    .soccer-block.coding {
        top: 250px !important;
        right: 250px !important;
        transform: rotate(0deg);
    }
    .coding-1 {
        right: 185px;
        top: 290px;
        width: 170px;
        height: 110px;
    }
    /*  */
    .soccer-block.marketing {
        top: 100px !important;
        right: 100px !important;
        transform: rotate(0deg);
    }
    .marketing-1 {
        right: 80px;
        top: 180px;
        width: 160px;
        height: 90px;
    } 
}
@media only screen and (min-height: 385px) and (max-height: 395px) {
    .soccerfield-svg {
        margin-left: 10%;
    }

    /*  */
    .soccer-block.strategy {
        top: 260px !important;
        left: 130px !important;
        transform: rotate(0deg);
    }
    .strategy-1 {
        top: 360px;
        left: 230px;
        width: 73px;
        height: 23px;
    }
    .strategy-2 {
        top: 335px;
        left: 270px;
        width: 20px;
        height: 22px;
    }
    .strategy-3 {
        top: 390px;
        left: 295px;
        width: 22px;
        height: 24px;
    }
    /*  */
    .soccer-block.design {
        top: 70px !important;
        left: 200px !important;
        transform: rotate(0deg);
    }
    .design-1 {
        left: 300px;
        top: 160px;
        width: 130px;
        height: 35px;
    }
    /*  */
    .soccer-block.coding {
        top: 270px !important;
        right: 300px !important;
        transform: rotate(0deg);
    }
    .coding-1 {
        top: 310px;
        right: 230px;
        width: 170px;
        height: 110px;
    }
    /*  */
    .soccer-block.marketing {
        top: 80px !important;
        right: 150px !important;
        transform: rotate(0deg);
    }
    .marketing-1 {
        right: 100px;
        top: 180px;
        width: 160px;
        height: 90px;
    } 
}
@media only screen and (min-height: 400px) and (max-height: 440px)  {
    .soccerfield-svg {
        margin-left: 12%;
    }

    /*  */
    .soccer-block.strategy {
        top: 260px !important;
        left: 200px !important;
        transform: rotate(0deg);
    }
    .strategy-1 {
        top: 360px;
        left: 300px;
        width: 73px;
        height: 23px;
    }
    .strategy-2 {
        top: 335px;
        left: 340px;
        width: 20px;
        height: 22px;
    }
    .strategy-3 {
        top: 390px;
        left: 365px;
        width: 22px;
        height: 24px;
    }
    /*  */
    .soccer-block.design {
        top: 70px !important;
        left: 230px !important;
        transform: rotate(0deg);
    }
    .design-1 {
        left: 330px;
        top: 155px;
        width: 130px;
        height: 35px;
    }
    /*  */
    .soccer-block.coding {
        top: 260px !important;
        right: 320px !important;
        transform: rotate(0deg);
    }
    .coding-1 {
        top: 310px;
        right: 260px;
        width: 170px;
        height: 110px;
    }
    /*  */
    .soccer-block.marketing {
        top: 100px !important;
        right: 170px !important;
        transform: rotate(0deg);
    }
    .marketing-1 {
        right: 160px;
        top: 180px;
        width: 160px;
        height: 90px;
    } 
}









.ball-line {
	position: absolute;
    bottom: 70px;
    width: 388px;
    transform: rotate(243deg);
    left: 24%;
    opacity: 0;
    display: none;
}
.ball-line__path {
	animation: ball-line 1.5s ease-in;
	fill: none;
	stroke: var(--secondary-color);
	stroke-dasharray: 940; /* this is the entire length of the line */
	stroke-dashoffset: 0; /* this is the entire length of the line */
	stroke-width: 6;
}

.ball-line__dash {
	fill: none;
	stroke: #F8F8F8; /* this must match the background color */
	stroke-dasharray: 16 10; /* draws a 10px dash line with a 16px gap between */
	stroke-width: 7; /* make the dashed line slightly bigger than the one it's covering */
}

.ball-line2 {
	position: absolute;
    bottom: 92px;
    width: 402px;
    transform: rotate(137deg);
    left: 41%;
    opacity: 0;
    display: none;
}
.ball-line__path2 {
	animation: ball-line 2.5s ease-in;
	fill: none;
	stroke: var(--secondary-color);
	stroke-dasharray: 940; /* this is the entire length of the line */
	stroke-dashoffset: 0; /* this is the entire length of the line */
	stroke-width: 6;
}

.ball-line__dash2 {
	fill: none;
	stroke: #F8F8F8; /* this must match the background color */
	stroke-dasharray: 16 10; /* draws a 10px dash line with a 16px gap between */
	stroke-width: 7; /* make the dashed line slightly bigger than the one it's covering */
}

.ball-line3 {
	position: absolute;
    bottom: 167px;
    width: 299px;
    transform: rotate(247deg);
    left: 50%;
    opacity: 0;
    display: none;
}
.ball-line__path3 {
	animation: ball-line 3s ease-in;
	fill: none;
	stroke: var(--secondary-color);
	stroke-dasharray: 1000; /* this is the entire length of the line */
	stroke-dashoffset: 0; /* this is the entire length of the line */
	stroke-width: 6;
}
.ball-line__dash3 {
	fill: none;
	stroke: #F8F8F8; /* this must match the background color */
	stroke-dasharray: 16 10; /* draws a 10px dash line with a 16px gap between */
	stroke-width: 7; /* make the dashed line slightly bigger than the one it's covering */
}

.ball-line4 {
	position: absolute;
    bottom: 68px;
    width: 480px;
    transform: rotate(-152deg);
    right: 121px;
    opacity: 0;
    display: none;
}
.ball-line__path4 {
	animation: ball-line 2s ease-in;
	fill: none;
	stroke: var(--secondary-color);
	stroke-dasharray: 1000; /* this is the entire length of the line */
	stroke-dashoffset: 0; /* this is the entire length of the line */
	stroke-width: 6;
}
.ball-line__dash4 {
	fill: none;
	stroke: #F8F8F8; /* this must match the background color */
	stroke-dasharray: 16 10; /* draws a 10px dash line with a 16px gap between */
	stroke-width: 7; /* make the dashed line slightly bigger than the one it's covering */
}

@keyframes ball-line {
	from {
		stroke-dashoffset: 940;
	}
	to {
		stroke-dashoffset: 0;
	}
}
.soccer-block {
	position: absolute;
	background: var(--primary-color);
	padding: 0px 25px;
	z-index: 2;
}
.soccer-block.strategy {
	top: 58%;
    left: 33%;
}
.soccer-block.design {
	top: 18%;
    left: 40%;
    opacity: 0;
}
.soccer-block.coding {
	top: 63%;
    right: 35%;
    opacity: 0;
}
.soccer-block.marketing {
	top: 28%;
    right: 28%;
    opacity: 0;
}
.soccer-block h3{
	color: var(--white-color);
	margin-top: 35px;
}
.soccer-block .small-title {
	position: absolute;
    top: 7px;
	font-size: 14px;
    color: var(--white-color);
}
.soccer-block p {
	color: white;
    margin-top: 0px;
}
.soccer-block .line {
	border-left: 2px solid var(--secondary-color);
    height: 100px;
    position: absolute;
    left: 50%;
    z-index: 1;
}
.soccer-block .line:before {
	content: "";
	position: absolute;
	animation: blink 4s infinite;
    left: -15px;
    bottom: -30px;
    width: 30px;
    height: 30px;
    background: #3d706d;
    border-radius: 100%;
    z-index: 2;
}
.soccer-block .line:after {
	content: "";
	position: absolute;
    left: -6px;
    bottom: -21px;
    width: 12px;
    height: 12px;
    background: var(--secondary-color);
    border-radius: 100%;
    z-index: 3;
}
@keyframes blink {
      0% {
        transform: scale(1);
        opacity: .25;
      }
      25%{
        opacity: 1;
      }
      50% {
        opacity: .25;
      }
      75%{
        opacity: 1;
      }
      100% {
        transform: scale(1);
        opacity: .25;
      }
}

@media screen and (min-width: 940px) {
	.hero-subtitle-side {
		font-size: 18px;
		font-weight: bold;
		text-transform: uppercase;
		position: absolute;
	    left: 3%;
		transform: rotate(90deg);
		color: var(--black-color)!important;
	}
}
@media screen and (max-width: 932px) {
	.hero-subtitle-side {
		font-size: 18px;
		font-weight: 600;
		text-transform: uppercase;
		position: absolute;
		transform: rotate(0deg);
		color: var(--black-color)!important;
	}
}

.veel-gestelde-vragen {
    padding: 100px 0px;
}
.veel-gestelde-vragen .title {
    position: relative;
}
.veel-gestelde-vragen .title:after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 0;
    width: 36px;
    text-align: center;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: bold;
    color: #fff;
    font-size: 26px;
    font-family: 'Poppins';
}
.veel-gestelde-vragen .content {
    padding-top: 20px;
    display: none;
}
.veel-gestelde-vragen .rows {
    justify-content: center;
}
.veel-gestelde-vragen .contentOpen:after {
    content: "-";
    font-size: 26px;
    font-family: 'Poppins';
}
.veel-gestelde-vragen .content a {
    color: #fff!important;
    text-decoration: underline!important;
}
@media screen and (min-width: 992px) {
    .veel-gestelde-vragen .questions {
        display: grid;
        grid-template-columns: auto auto;
    }
    .veel-gestelde-vragen .one-column {
        width: 60%;
        margin: 0 auto;
    }
    .veel-gestelde-vragen .toggle-faq {
        width: 70%;
    }
    .veel-gestelde-vragen h2 {
        color: #fff!important;
        margin-bottom: 35px;
    }
    .veel-gestelde-vragen .question {
        width: 90%;
        background: #f8f8f80f;
        padding: 15px;
        cursor: pointer;
        margin-bottom: 15px;
        height: min-content;
    }
	.veel-gestelde-vragen .toggle-faq h3 {
		color: #fff;
		font-size: 20px;
		font-weight: 400;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1600px) {
	.veel-gestelde-vragen .one-column {
		width: 75%;
	}
}
@media screen and (max-width: 992px) {
    .rows {
        padding: 0px 20px;
    }
    .veel-gestelde-vragen h2 {
        color: #fff!important;
        font-size: 26px;
        margin-bottom: 26px;
    }
    .veel-gestelde-vragen .toggle-faq {
        width: 100%;
    }
    .veel-gestelde-vragen .question {
        width: 100%;
        background: #f8f8f80f;
        padding: 15px;
        cursor: pointer;
        margin-bottom: 15px;
		box-sizing: border-box;
    }
	.veel-gestelde-vragen .toggle-faq h3 {
		color: #fff;
		font-size: 15px;
		font-weight: 400;
	}
	.veel-gestelde-vragen .content {
		font-size: 13px;
	}
}
/* KENNIS MAKEN BLOCK */
.kennis-maken-block {
    padding-top: 150px;
    padding-bottom: 50px;
}
.kennis-maken-block .rows {
    justify-content: center;
}
@media screen and (min-width: 1600px) {
	.kennis-maken-container {
		width: 50%!important;
	}
}
.kennis-maken-container {
    width: 70%;
    color: var(--white-color);
    display: flex;
    flex-direction: column;
	background: url(/wp-content/uploads/2024/11/shirt-compleet-small.webp);
    background-size: cover;
    background-position: 100% 15%;
    background-repeat: no-repeat;
	box-shadow: 8px 8px 15px #1a2f2d;
    border: 1px solid #1a2f2d;
	padding: 30px;
}
.kennis-maken-container .center-title {
    justify-content: center;
}
.kennis-maken-container .text-block-title {
	margin-bottom: 0px!important;
}

.kennis-maken-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
@media screen and (min-width: 1024px) {
	.kennis-maken-links {
		width: 40%;
	}
}

.kennis-maken-links p {
    font-size: 15px;
}

.kennis-maken-img {
    width: 100px;
    border-radius: 45%;
}
.kenis-maken-gegevens {
    margin-top: 50px;
    display: flex;
    align-items: center;
}
.kennis-maken-info a {
	display: flex;
	align-items: center;
	gap: 5px;
}
.kennis-maken-info {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
}
.kennis-maken-contact-naam {
    font-weight: bold;
}

.kennis-maken-rechts {
    width: 45%;
    margin-left: 10%;
    margin-top: -50px;
}

.kennis-maken-form, .footer-form {
    font-family: var(--primary-font);
}

.kennis-maken-input {
    margin-bottom: 10px;
}

.succes-message {
    position: fixed;
    right: 40%;
    top: 5%;
    background-color: var(--secondary-color);
    color: var(--white-color);
    padding: 10px;
    border-radius: 10px;
    z-index: 100;
    animation: fade 6s linear;
    opacity: 0;
}
@keyframes fade {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0.75;
      }
      100% {
        opacity: 0;
        z-index: 0;
      }
}
@media only screen and (max-width: 800px) {
    .succes-message {
        right: 6%;
        top: 10%;
    }
}
@media only screen and (max-width: 550px) {
    .succes-message {
        right: 1%;
        top: auto;
        bottom: 5%;
    }
}
@media only screen and (max-height: 440px) {
    .succes-message {
        right: 6%;
        top: 25%;
    }
}

.text-area-input{
    width: 95%;
    height: 100px;
    padding-top: 15px;
}
/* groter scherm */
@media only screen and (min-width: 2100px) {
    .text-area-input{
        width: 94%;
    }
}

/* tablet */
@media only screen and (max-width: 1024px) {
    .kennis-maken-container {
        width: 100%;
        margin-left: 0;
    }
    .kennis-maken-row {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .kennis-maken-rechts {
        margin-left: 0;
        margin-top: 50px;
        display: flex;
        justify-content: center;
    }
    .kennis-maken-form {
        display: flex;
        flex-direction: column;
        width: 500px;
    }
    .kennis-maken-input {
        width: 500px;
    }
    .text-area-input {
        width: 500px;
    }
}

/* phone */
@media only screen and (max-width: 550px) {
    .kennis-maken-block {
        padding-top: 25px;
    }

    .kennis-maken-container {
        display: flex;
        align-items: center;
        width: 100%;
        margin-left: 0;
    }
    .kennis-maken-row {
        flex-direction: column;
    }
    .aanpak-title {
        margin-left: 0;
    }
    .kenis-maken-gegevens {
        margin-top: 25px;
    }

    .kennis-contact-button {
        display: block;
        width: 100%;
    }

    .kennis-maken-input {
        width: 275px;
    }

    .kennis-maken-form {
        display: none;
    }

    .text-area-input {
        width: 275px;
    }
}

/* phone laying */
@media only screen and (max-height: 440px) {
    .kennis-maken-block {
        padding-top: 50px;
    }
    .kennis-maken-rechts {
        margin-left: 0;
        margin-top: 50px;
        display: block;
    }
    .kennis-maken-form {
        display: none;
    }
    .kennis-contact-button {
        display: block;
        width: 100%;
    }
}
/* TEAM BLOCK */
.team-block {
    margin-top: 100px;
    display: flex;
    justify-content: center;
}

.ons-team-block {
    width: 62.5%;
}
.team-titel h2 {
	color: #fff;
}
.teamlid-div {
    display: flex;
    flex-wrap: wrap;
	gap: 50px;
}

.teamlid {
	flex-direction: column;
    display: flex;
    margin: 25px 0 0 20px;
}
.teamlid {
	color: #fff;
}

.teamlid-img {
    width: 275px;
}

.teamlid-naam {
	margin-top: 10px;
	font-size: 24px;
    font-weight: bold;
}
@media screen and (max-width: 992px) {
	.team-block {
		margin-bottom: 100px;
	}
}
@media only screen and (max-width: 550px) {
    .ons-team-block {
        width: 90%;
    }
}
/* BLOG BLOCK */
.blog-section {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    padding-bottom: 100px;
}

.blog-block {
    width: 70%;
}
.blog-block .center-title {
    justify-content: center;
}

.blog-container {
    padding-bottom: 150px;
}
.blog-pagination {
    padding-top: 50px;
}
/* groter scherm */
@media only screen and (min-width: 2100px) {
    .blog-img {
        height: 100% !important;
    }
}
.blogSwiper {
    height: 400px;
    overflow: initial !important;
}
.blog-slide {
    display: flex !important;
    flex-direction: column;
}
.blog-wrapper {
    height: min-content;
}
.blog-img {
    width: 100%;
    height: min-content;
    display: block;
	object-fit: cover;
    max-height: 250px;
    min-height: 216px;
}
.blog-content {
    padding: 20px;
}
.blog-title {
    margin: 10px 0;
    font-weight: 500;
    font-size: 20px;
    color: #fff !important;
}
.blog-desc {
    width: 85%;
    font-size: 16px;
}

@media only screen and (max-width: 1600px) {
    .blog-container {
        padding-bottom: 50px;
    }
    .blog-title {
        font-size: 18px;
    }
    .blog-desc {
        font-size: 13px;
    }
}

/* tablet */
@media only screen and (max-width: 1024px) { 
    .blog-block {
        margin-left: 0;
    }
    .blog-container {
        width: 100%;
		padding: 0px 20px;
		box-sizing: border-box;
    }
    .blogSwiper {
        height: auto;
    }
    .blog-wrapper {
        height: auto !important;
        bottom: 15px;
    }
    .blog-slide {
        width: 50% !important;
        height: 400px !important;
    }
    .blog-title {
		font-size: 16px!important;
	}
    .blog-pagination {
        display: flex;
        justify-content: center;
    }
}
/* tablet laying */
@media only screen and (max-width: 768px) {
    .blog-block {
        width: 90%;
    }
}

/* phone */
@media only screen and (max-width: 550px) {
    .blog-block {
        margin-left: 0;
        width: 100%;
    }
    .blog-slide {
        width: 100% !important;
        height: 400px !important;
    }
    .blog-pagination .swiper-pagination-bullet {
        background: var(--white-color);
    }
}

/* phone laying */
@media only screen and (max-height: 440px)  {
    .blog-section {
        margin-top: 50px;
    }
    .blog-slide {
        width: 100% !important;
    }
    .blog-title, .blog-desc {
        margin: 0 auto;
    }
    .blog-title {
        margin-top: 25px;
    }
    .blog-desc {
        width: auto;
    }
}

.blog-slide {
	border: 1px solid #264341;
    height: auto!important;
	box-shadow: 8px 8px 15px #1a2f2d;
}

.blog-text-page-block {
    margin-top: 50px;
    padding-bottom: 100px;
    display: flex;
    justify-content: center
}
.blog-text-block h1, .blog-text-block h2, .blog-text-block h3 {
	color: #fff!important;
	margin-bottom: 10px;
	margin-top: 30px;
}
.blog-text-block {
	font-family: var(--primary-font);
	color: #fff;
}
@media screen and (min-width: 1024px) {
	.blog-text-block {
		width: 55%;
		height: auto;
		background-color: #264341;
		padding: 25px;
	}
}
@media screen and (max-width: 1024px) {
	.blog-text-block {
		width: 100%;
		height: auto;
		background-color: #264341;
		padding: 20px;
		margin: 20px;
	}
}
.blog-page-image {
    width: 100%;
    margin: 30px 0 50px 0;
}

.blog-block-top {
    display: flex;
    margin-bottom: 25px;
}
.single-blog .blog-text-page-block ul {
	list-style-type: square!important;
	font-size: 16px!important;
	font-weight: 400!important;
}
.blog-tag-block {
	display: flex;
	align-items: center;
	gap: 5px;
    padding: 5px;
    margin-right: 10px;
    background-color: #1e3331;
}

.blog-publish-date-block {
	display: flex;
	align-items: center;
	gap: 5px;
    padding: 5px 10px;
    background-color: #1e3331;
}
.blog-publish-date-block svg, .blog-tag-block svg {
	stroke: #fff;
}
/* FLOATY HERO BLOCK */
.hero-block {
    color: var(--white-color);
    margin-top: -135px;
    padding-top: 400px;
	background-image: url(/wp-content/uploads/fconline-banner-home-1.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	height: 37vh;
}

.hero-titel {
    font-size: 60px;
	text-shadow: 0px 0px 5px #000;
}
@media screen and (min-width: 1024px) {
	.hero-title-outline {
		color: var(--primary-color);
		-webkit-text-stroke-width: 2px;
		-webkit-text-stroke-color: var(--secondary-color);
	}
}
@media screen and (max-width: 1024px) {
	.hero-title-outline {
		color: var(--secondary-color);
	}
}
.hero-title-dot {
    color: var(--secondary-color);
}
.hero svg {
	fill: white;
    position: absolute;
    bottom: 40px;
    left: 20px;
    width: 60px;
    height: 60px;
}
.svg-arrow-down {
	transform: rotate(-90deg);
}
.arrow-down {
	display: inline-block;
    width: auto;
    height: auto;
    -webkit-animation: bounceDown 2s infinite;
  	animation: bounceDown 2s infinite;
    z-index: 2;
}
@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
/* slider */
.row-hero {
    display: flex !important;
    flex-direction: row !important;
}

.slider-div {
    display: flex;
    flex-direction: column;
    margin-bottom: 5%;
}

/* .swiper-slide-hero:after {
    content: "";
    background: linear-gradient(0deg, var(--primary-color), transparent);
    position: absolute;
    width: 100%;
    left: 0px;
    height: 200px;
    bottom: 0px;
    z-index: 1;
    pointer-events: none;
} */

.slider-div-titel {
    justify-content: space-around;
    margin-left: 8%;
    margin-top: 2%;
}
.go-down {
	margin-top: 5%;
}
.swiper-slide-hero {
    background-position: center;
/*     width: 82% !important; */
}

.swiper-slide-active {
    transform: none !important;
}

.swiper-slide-img-hero {
    display: block;
    width: 100%;
}

.overlay-div {
    position: absolute;
    top: 0;
    left: 40px;
    bottom: 30px;
    display: flex;
    align-items: flex-end;
}

.swiper-slide svg {
    height: 60px;
    width: 60px;
}

.slide-title {
    margin: 0 0 -10px -10px;
    z-index: 10;
}

/* pagination */
.swiper-pagination {
    margin: 25% 0 0 10%;
    z-index: 1 !important;
    bottom: unset !important;
}
.swiper-pagination-bullet {
    width: 50px !important;
    border-radius: 5px !important;
}
.swiper-pagination .swiper-pagination-bullet {
    background-color: var(--white-color);
}
.swiper-pagination-bullet-active {
    background-color: var(--secondary-color) !important;
}

/* groter scherm */
@media only screen and (min-width: 2100px) {
    .hero-block {
        padding-top: 450px !important;
    }
    .swiper-pagination {
        margin: 25% 0 0 8%;
    }
}
/* laptop/mac */
@media only screen and (max-width: 1600px) {
    .hero-block {
        padding-top: 250px !important;
		margin-top: -135px!important;
		background-position: 90% 100%;
        height: 40vh !important;
    }
    .hero-titel {
        font-size: 45px;
        margin-top: 75px;
    }
}

/* tablet */
@media only screen and (max-width: 1024px) {
    .hero-titel {
        font-size: 40px;
    }
    .slider-div-titel {
        margin-left: 2%;
    }
    .swiper-pagination {
        top: 2.5% !important;
    }
}

/* tablet standing */
@media only screen and (max-width: 800px) {
    .main-slider {
        margin-top: 50px;
        width: 500px;
    }
    .hero-block {
        padding-top: 150px !important;
		background-size: cover;
        background-position: 90% 100%;
        height: 30vh!important;
    }
    .swiper-pagination {
        top: 4% !important;
        left: 5% !important;
    }
}

/* phone */
@media only screen and (max-width: 800px) {
    .main-slider {
        width: auto;
        margin-top: 0;
    }
    .hero-block {
        display: flex;
        margin-top: -135px;
    }
	.hero-block .rows {
		padding-right: 0px!important;
	}
    .row-hero {
        flex-direction: column !important;
        margin-bottom: 0px;
    }

    .hero-block {
        padding-top: 150px !important;
    }

    .hero-titel {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .slider-div {
        margin: 0;
        max-width: 100%;
		padding-right: 20px;
    }

    .swiper-slide-hero {
        width: 350px !important;
    }

    .swiper-slide-img-hero {
        width: 100%;
    }

    .overlay-div {
        left: 20px;
        bottom: 10px;
    }

    .swiper-slide svg {
        display: none;
    }

    .swiper-pagination {
        position: inherit !important;
        margin: 20px 0 0 -5px;
        bottom: var(--swiper-pagination-bottom, 8px)
    }
    .swiper-pagination-bullet {
        width: 25px !important;
        border-radius: 5px !important;
    }
	.go-down {
		display: none;
	}
}

@media only screen and (max-width: 400px) {
	.hero-titel {
		font-size: 24px!important;
	}
}

/* phone laying */
@media only screen and (max-height: 440px) {
    .hero-block {
        height: 750px;
        padding-top: 25% !important;
    }
    .row-hero {
        flex-direction: column !important;
    }
    .slider-div {
        margin: 0 auto;
    }
    .main-slider {
        margin-top: 40px;
        width: 500px;
    }
    .swiper-slide-img-hero {
        width: 100%;
    }
    .slider-div-titel {
        width: 75%;
       margin: 0 auto;
       display: flex;
    }
    .swiper-pagination {
        position: inherit !important;
        margin: 20px 0 0 -5px;
        bottom: var(--swiper-pagination-bottom, 8px)
    }
    .swiper-pagination-bullet {
        border-radius: 5px !important;
    }
}
/* info block */
.info-blocken {
    margin: 200px 0 100px 0;
}
.info-column {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.info-block {
    background-color: #264341;
    min-height: 250px;
    padding: 25px;
    margin-bottom: 25px;
}
.info-block svg {
	margin-right: 5px;
	width: 25px;
	height: 25px;
}
.info-title {
    color: #FFF;
    padding-bottom: 10px;
}
/* phone */
@media only screen and (max-width: 550px) {
    .info-row {
        justify-content: center;
    }

    .info-column {
        flex-direction: column;
        width: 90%;
    }
}
/* KLANTEN LOGOS */
.klanten-logo-block {
    padding-top: 100px;
	padding-bottom: 100px;
}

.klanten-logo-block .rows {
    justify-content: center;
}

.klanten-div {
    width: 70%;
}
.klanten-div .center-title {
    justify-content: center;
}

.klanten-swiper {
/*     margin-top: 100px; */
    margin-left: 0 !important;
	height: 250px;
}

.klanten-img {
    height: 196px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center;
    background: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

/* groter scherm */
@media only screen and (min-width: 2100px) {

    .klanten-img {
        height: 220px !important;
    }
    .klant-logo {
        max-height: 175px;
        max-width: 175px;
    }
}
/* laptop/mac */
@media only screen and (max-width: 1600px) {
    
}

.klant-logo {
    width: 100%;
    max-height: 150px;
    max-width: 150px;
    height: auto !important;
    background-color: var(--white-color);
    /* filter: grayscale(1); */
}

/* .klant-logo:hover {
    filter: grayscale(0);
} */

/* tablet */
@media only screen and (max-width: 1024px) {
    .klanten-logo-block {
        margin-bottom: 0;
    }
    .klanten-div {
        width: 100%;
    }
}

/* phone */
@media only screen and (max-width: 550px) {
    .klanten-logo-block {
        padding-top: 0;
        margin-bottom: -50px;
    }

    .klant-title {
        font-size: 18px;
    }

    .klanten-div {
        width: 100%;
        margin: 0;
    }

    .klanten-swiper {
        width: 100%;
        margin-top: 0;
    }
    
    .klanten-img {
/*         width: 45% !important; */
        height: 146px !important;
    }

    .klant-logo {
        max-height: 145px;
        max-width: 145px;
    }
}

/* phone laying */
@media only screen and (max-height: 440px) {
    .klanten-logo-block {
        padding-top: 0;
    }
    .klanten-swiper {
        margin-top: 0;
    }
}

/* PROJECT BLOCK */
.project-block {
    margin-top: 100px;
    margin-bottom: 100px;
}
.project-block .rows {
    justify-content: flex-end;
}
.project-div {
    width: 85%;
}
.project-div .center-title {
    justify-content: center;
}
.project-div .text-block-title {
	margin-bottom: 0px!important;
}
.swiper-slide-img-projects {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.project-swiper {
    margin-top: 50px;
}
.project-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: -100px;
    position: absolute;
    right: 6%;
}
.project-button-back {
    position: relative;
}
.project-button-next {
    position: relative;
    animation: bounceRight 3s infinite;
}   
.project-content {
    position: absolute;
    bottom: 30px;
    left: 30px;
}
.swiper-slide-projects svg {
    height: 20px;
    width: 20px;
    margin-right: 10px;
    display: inline-block!important;
}
.swiper-slide-projects > a > .project-content > span {
	display: flex;
	align-items: center;
}
.swiper-pagination-bullet {
	background: var(--white-color);
}
@media screen and (max-width: 1024px) {
	.project-pagination {
		text-align: center;
	}
	.project-buttons {
		display: none;
	}
}
@media screen and (min-width: 1024px) {
	.project-pagination {
		display: none;
	}
}
@media screen and (min-width: 1024px) and (max-width: 1700px) {
	.swiper-slide-projects h3 {
		font-size: 22px!important;
		line-height: 1.2;
	}
	.swiper-slide-projects span {
		display: flex;
		line-height: 17px;
		font-size: 14px;
		margin-top: 10px;
	}
}
.swiper-slide-projects h3 {
	text-shadow: 0px 0px 5px #000;
    font-weight: 500;
}
.swiper-slide-projects {
	box-shadow: 8px 8px 15px #1a2f2d;
    margin-bottom: 30px;
}
.project-buttons path {
	fill: #fff;
}
@keyframes bounceRight {
    0% {
        transform: rotate(180deg) translateX(0);
    }
    50% {
        transform: rotate(180deg) translateX(10px);
    }
    100% {
        transform: rotate(180deg) translateX(0);
    }
}

/* tablet */
@media only screen and (max-width: 1024px) {
    .project-div {
        width: 100%;
        margin: 0;
    }
    .project-swiper {
        margin-top: 50px;
    }
    .center-title {
        display: flex;
        margin-bottom: 20px;
    }
    .project-buttons {
        justify-content: space-between;
        margin-top: -50px;
    }
}

/* phone */
@media only screen and (max-width: 550px) {
    .project-block {
        margin-top: 0;
    }
    .project-div {
        width: 100%;
        margin: 0;
    }
    .project-block .center-title {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
    .project-buttons {
        display: none;
    }
    .project-swiper {
        margin-top: 50px;
    }
    .swiper-slide-img-projects {
        width: 100%;
    }
}

/* phone laying */
@media only screen and (max-height: 440px) {
    .project-block {
        margin-top: 0px;
    }
    .project-swiper {
        margin-top: 25px;
    }
    .project-buttons {
        justify-content: space-between;
    }
}