/* CSS Document */

#sfeertext-home {
padding: 7vw 55% 0 0;
}

#sfeertext-home .button:hover {
color:#FFFFFF;
border-color:#FFFFFF;
background-color:transparent;
}

#titlewrapper {
width:100%;
height:auto;
}

#title {
width:100%;
max-width:1240px;
margin: 0 auto;
padding:50px 30px;
text-align:center;
}

#aboutwrapper {
width:100%;
background-color:#F7E8EF;
}

#about {
width:100%;
max-width:1240px;
margin: 0 auto;
padding:0 0 0 30px;
}

#about-text {
float:left;
width:55%;
padding:50px 30px 20px 0;
}

#about-image {
float:left;
width:27.5%;
background-position:top center;
background-size:cover;
}

#about-payoff {
float:left;
width:17.5%;
background-color:#93637a;
position: relative;
padding:15px;
text-align:center;
}

#about-payoff .inner {
border: solid 1px #FFFFFF;
height:100%;
}

#about-payoff .inner span{
width:100%;
left:0;
position:absolute;
top: 50%;
transform: translateY(-50%);
color:#FFFFFF;
font-family: "Quicksand", sans-serif !important;
text-transform:none;
font-size:30px;
line-height:100%;
}

#portfoliowrapper {
width:100%;
height:auto;
}

.homegrid-sizer,
.homegrid-item { width: 25%; }

.homegrid-item {
position:relative;
}

.homegrid-overlay {
opacity:0;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
transition: all 0.7s ease;
background: rgba(149,225,212,1);
background: -moz-linear-gradient(top, rgba(149,225,212,1) 0%, rgba(42,46,75,0.76) 68%, rgba(42,46,75,0.65) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(149,225,212,1)), color-stop(68%, rgba(42,46,75,0.76)), color-stop(100%, rgba(42,46,75,0.65)));
background: -webkit-linear-gradient(top, rgba(149,225,212,1) 0%, rgba(42,46,75,0.76) 68%, rgba(42,46,75,0.65) 100%);
background: -o-linear-gradient(top, rgba(149,225,212,1) 0%, rgba(42,46,75,0.76) 68%, rgba(42,46,75,0.65) 100%);
background: -ms-linear-gradient(top, rgba(149,225,212,1) 0%, rgba(42,46,75,0.76) 68%, rgba(42,46,75,0.65) 100%);
background: linear-gradient(to bottom, rgba(149,225,212,1) 0%, rgba(42,46,75,0.76) 68%, rgba(42,46,75,0.65) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95e1d4', endColorstr='#2a2e4b', GradientType=0 );
}

.homegrid-item:hover .homegrid-overlay {
opacity:1;
}

.homegrid-overlay-text {
  position: absolute;
  width:100%;
  top: 50%;
  transform: translateY(-50%);
  text-align:center;
  color:#FFFFFF;
  padding:10px;
}

.homegrid-overlay-text h2 {
line-height:100%;
margin-bottom:10px;
}

.homegrid-overlay-text p {
margin-bottom:0;
}

.homegrid-item img{
width:100%;
height:auto;
display:block;
}

#blogwrapper {
width:100%;
height:auto;
}

#reactie {
width:100%;
height:auto;
padding-top: 15px;
}

#blog {
width:100%;
max-width:1240px;
margin: 0 auto;
padding:50px 30px;
text-align:center;
}

#man h2{
width:100%;
max-width:1240px;
margin: 0 auto;
padding:15px 30px 40px;
text-align:center;
font-style: normal !important;
}


#reviewswrapper {
width:100%;
background-color:#F7E8EF;
}

#reviews {
width:100%;
max-width:1240px;
margin: 0 auto;
padding:0 30px 0 0;
}

#reviews-payoff {
float:left;
width:17.5%;
background-color:#93637a;
position: relative;
padding:15px;
text-align:center;
}

#reviews-text {
float:left;
width:82.5%;
padding:50px 0 50px 50px;
color:#535353;
}

#reviews-text h3 {
color:#535353;
}

#reviews-text p {
font-family: 'Roboto Condensed', sans-serif;
font-style:italic;
font-size:24px;
margin-bottom:0;
}

#reviews-payoff .inner {
border: solid 1px #FFFFFF;
height:100%;
}

#reviews-payoff .inner span{
width:100%;
left:0;
position:absolute;
top: 50%;
transform: translateY(-50%);
color:#FFFFFF;
font-family: 'Old Standard TT', serif !important;
text-transform:none;
font-size:46px;
line-height:100%;
}

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

.homegrid-sizer,
.homegrid-item { width: 50%; }

#reviews-payoff {
width:25%;
}

#reviews-text {
float:left;
width:75%;
}

} /* end mediaquery */

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

#about-text {
float:left;
width:100%;
padding:50px 30px 20px 30px;
}

#about-image {
float:left;
width:55%;
height:50vw;
background-position:top center;
background-size:cover;
}

#about-payoff {
float:left;
width:45%;
}

#reviews-payoff {
width:27%;
}

#reviews-text {
width:73%;
}

} /* end mediaquery */


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


#sfeertext-home {
padding: 7vw 25% 0 0;
}

#sfeer h3 {
font-size:40px;
}

#reviews {
padding:0;
}

#reviews-payoff {
width:100%;
height:120px;
}

#reviews-text {
float:left;
width:100%;
padding: 50px 30px 50px 30px;
}

} /* end mediaquery */

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

#sfeertext-home {
padding: 7vw 0 0 0;
}

#about-payoff {
width:100%;
}

#about-payoff .inner {
height:auto;
padding: 50px 30px 50px 30px;
}

#about-image {
width:100%;
height:70vw;
background-position:center center;
}

.homegrid-sizer,
.homegrid-item { width: 100%; }

} /* end mediaquery */







.bg-strook{
  width: 100%;
  margin: 40px 0;
  background: #e2e3df;
}

/* Titel boven de blokken */
.bg-strook-intro{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 28px;
  text-align: center;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: #8d6679;
}

/* Container */
.bg-strook-inner{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  gap: 18px;
  align-items: stretch;
}

/* Blokken */
.bg-item{
  flex: 1 1 0;
  min-width: 220px;
  background: #ffffff;
  border: 1px solid #ededed;
  border-radius: 16px;
  padding: 18px 16px 16px;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}

/* Yin yang icoon */
.bg-icon{
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;
  color: #8d6679;

  background: #f5e9ef;
  border: 1px solid #f0dfe8;

  font-family: "Segoe UI Symbol","Noto Sans Symbols","Apple Symbols",sans-serif;
}

/* Titel per blok */
.bg-title{
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  color: #8d6679;
  margin-bottom: 8px;
}

/* Tekst */
.bg-text{
  font-size: 14px;
  line-height: 1.45;
  color: #555555;
}

/* Tablet */
@media (max-width: 1000px){
  .bg-strook-inner{
    flex-wrap: wrap;
  }

  .bg-item{
    flex: 1 1 calc(50% - 18px);
  }
}

/* Mobiel */
@media (max-width: 560px){
  .bg-item{
    flex: 1 1 100%;
  }
}