/* CSS Document */

#payoffwrapper {
min-height:600px;
font-size:36px;
font-weight:600;
padding-left:0;
padding-bottom: 70px;
font-family: 'Nunito', sans-serif;
text-align: left;
padding-top: 275px;
}

.payoffimage {
float: right;
width: 38%;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right:10%;
padding-top: 70px;
}

.payoffimage img {
max-width:100%;
height: auto;
}
.knopbanner a {    margin: 17px auto;
    display: flex;
    max-width: 215px;}

.payoffimage img {
  display: block;
  max-width: 100%;
  height: auto;

}

#payoffwrapper span {
font-weight:400;
font-family: 'PT Serif', serif;
font-size:40px;
font-style:italic;
}

.typewrite > .wrap {
border-color: #212529!important;
}

#contentwrapper {
background-position: right -300px top -50px;
}

#content {
position: relative;
}

#services-content {
float:left;
width:calc(40% - 30px);
padding-right:50px;
position: absolute;
top: calc(50% + 35px);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}

#services-blocks{
float:right;
width:60%;
position:relative;
display:flex;
flex-wrap:wrap;
gap:20px;
}

/* blok */
#services-blocks .block{
width:calc(50% - 10px);
    background: linear-gradient(to bottom, #ff9e49 0%, #ff8f3f 20%, #ff7e2d 40%, #ff6701 101%, #ff7e2d 60%, #ff8f3f 80%, #ff9e49 100%);
border-radius:20px;
padding:20px;
box-sizing:border-box;
text-align:center;
position:relative;
margin-bottom:20px;
cursor:pointer;
transition:transform .3s ease;
display:block;
text-decoration:none !important;
overflow:hidden;
}

/* tekst */
#services-blocks .block h3{
font-size:18px;
color:#fff;
padding-bottom:20px;
}

#services-blocks .block p{
color:#fff;
padding-bottom:20px;
}

/* lees meer */
#services-blocks .block .read-more{
color:#fff;
pointer-events:none;
}

#services-blocks .block .read-more:after{
content:"\f061";
font-family:'Line Awesome Free';
font-weight:bold;
padding-left:6px;
position:relative;
top:1px;
}

/* afbeelding blok */
#services-blocks .block-image-only{
padding:0;
}

/* afbeelding vult blok */
#services-blocks .block-image-only img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}

@media (max-width:600px){

#services-blocks{
width:100%;
}

#services-blocks .block{
width:100%;
}

}

#content {
    padding: 25px;
}

#blog {
width:100%;
max-width:1400px;
margin:0 auto;
margin-top: 60px;
	    margin-bottom: 60px;
padding: 0 25px;
}

#blogheaderwrapper {
position: relative;
}

#blogheader {
position: relative;
padding:20px 20px 0 20px;
z-index: 1;
text-align:center; 
max-width:100%; 
margin:0 auto;
	background: linear-gradient(to bottom, #eeeeee, #f2f2f2);
}

#sideimage {display:none;
position: absolute;
top: -10px;
right: 0;
width: 250px;
background: #d7e4db;
box-shadow: inset 0 0 25px 25px #fff;
-webkit-border-radius: 80% 0px 0px 40%;
-moz-border-radius: 80% 0px 0px 40%;
-khtml-border-radius: 80% 0px 0px 40%;
border-radius: 80% 0px 0px 40%;
padding: 10px 0 15px 30px;
z-index: 0;
}

#sideimage img {
max-width: 100%;
height: auto;
}

#blog h1 {
text-align:center;
}

#reviewswrapper {
width:100%;
height:auto;
	    background: linear-gradient(to bottom, #eeeeee, #f2f2f2);
}

#reviews {
width:100%;
max-width:1400px;
margin:0 auto;
padding: 60px 30px;
}
#review {
float:left;
width:40%;
height:auto;


}	
#review p {color:#fff;}
	#review h3 {color:#fff;}

img.portrait {
width:200px;
height:auto;
}

#about {
float:left;
width:60%;
padding-left:60px;
padding-top:7px;
}
#about h2 {padding-bottom: 5px;}

#blogheader img {width:100%; height:auto;}

@media screen and (max-width: 1400px) {
#sideimage {
width: 225px;
}

@media screen and (max-width: 1240px) {

#blogheader {
width: 100%;
padding-right: 250px;
}

#payoffwrapper {
padding-top:17vw;
min-height: 44vw;
}

}

@media screen and (max-width: 1024px) {



#review, #about {
width:50%;
}

#about {
padding-top:0;
}

img.portrait {
width:175px;
height:auto;
}

#blog {
padding-left:15px;
padding-right: 0;
}

} /* end mediaquery */

@media screen and (max-width:980px) {

#headerwrapper {
overflow: hidden;
}

#payoffwrapper {
padding-top: 180px;
  font-size: 24px;
  min-height: 400px;
  }

#payoffwrapper span {
font-size: 28px;
}

.payoffimage {

}


#services-content {
width:100%;
padding-right:0;
padding-top:0;
z-index:2;
position:relative;
top:inherit;
left: inherit;
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}

#services-blocks {
width:100%;
z-index:1;
}

#sideimage {
display: none;
}

#blogheader {
padding-right:20px;
}
	#blogheader img {width:100%; height:auto;}
} /* end mediaquery */

@media screen and (max-width: 750px) {

#payoffwrapper {
padding-left:0;
}

#review, #about {
width:100%;
}

img.portrait {
right:0;
left:inherit;
bottom:-120px;
}

#about {
padding-left:0;
}

#about *{
text-align:left !important;
}

#about h1[style*="right"]::before {
margin:0 0 30px 0;
}

} /* end mediaquery */

@media screen and (max-width: 640px) {
	#content {
    padding: 0;
}

	
	.payoffimage img {
    display: block;
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 6px rgba(180, 180, 180, 0.6));
    max-width: 320px;
    margin: 0 auto;
}
	
#payoffwrapper {
min-height:425px;
 padding-top: 87px;
}

.payoffimage {
padding-top: 112px;
width: 100%;
right:0;
}

#services-blocks {
margin-top:20px;
}

.block {
float:right;
width:100%;
margin-left:0;
}

.block:nth-of-type(2) {
position:relative;
top: inherit;
-ms-transform: none;
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}

} /* end mediaquery */

@media screen and (max-width: 450px) {

.payoffimage {

padding-top: 160px
}

#reviews {
padding-left:20px;
padding-right:20px;
}

#review {
padding:30px 50px 30px 30px;
}

.review h3 {
font-size:18px;
	
}


} /* end mediaquery */