/* general styles */
body{
  font-size: 14px;
}
div.centerContent{
  width: 100%;
  padding-left: 25px;
  padding-right: 25px;
}
header{
  z-index: 20;
}
body.home header{
  background: none;
  background-color: #dbd871;
  color: #FFF;
}

.itemNav{
  margin-top: 25px;
  margin-bottom: 0px;
}
.itemNav .mainButton{
  min-width: 125px;
}


h1, .h1{
  font-size: 2.1em;
  line-height: 1.1em;
}

/*      HEADER & MENU      */
header.fixed,
header{
  background-color: #FFF;
  position: fixed;
  background-position: center top;
  top: 0px;
  left: 0px;
  width: 100%;
  padding-bottom: 20px;
  padding-top: 20px;
}
header a.logoHolder{
  display: block;
  width: 200px;
  left: auto;
  top: auto;
  position: relative;
}
div.menuHolder{
  top: 35px;
  left: -110%;
  margin-left: 0px;
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  background-color: #4f222b;
}
header div.menuInfo{
  display: none;
}
div.menuHolder nav{
  padding-left: 25px;
  padding-top: 25px;
}
div.menuHolder nav>ul{
  margin-top: 0px;
  height: auto;
  padding-bottom: 5px;
  text-align: left;
}
div.menuHolder nav ul li{
  padding-bottom: 12px;
  margin-bottom: 12px;
  float: none;
  display: block;
  font-size: 1.2em;
  line-height: 1em;
  height: auto;
  padding-left: 0px;
  padding-right: 0px;
}
div.menuButton{
  display: block;
  font-size: 26px;
  position: absolute;
  right: 25px;
  top: -6px;
  z-index: 21;
}

div.content{
  padding-top: 54px;
}

div.pageHeader{
  padding-top: 25px;
  padding-bottom: 25px;
}
div.pageHeader .flex,
div.textRow .flex{
  flex-direction: column-reverse;
}
div.pageHeader div.centerContent:after{
  display: none;
}
div.spacer{
}
div.pageHeader div.spacer{
  margin-top: 10px;
}
div.pageText{
  width: 100%;
  margin-top: 25px;
}
div.pageText h1{
  margin-bottom: 10px;
}
div.pageText h2{
  margin-bottom: 5px;
}
div.sideImage,
div.simpleImage{
  width: 100%;
}
div.sideImage:before{
  display: none;
}
div.case div.sideImage img,
div.sideImage img{
  display: block;
  width: 100%;
  margin-top: 0px;
}


/*      HOME      */
body.home,
body.home div.container{
  height: 100%;
}
div.content.home{
  padding-top: 0px;
}
div.content.case div.pageHeader,
div.content.home div.pageHeader{
  padding-bottom: 25px;
  text-align: left;
}
div.pageVisual{
  min-height: 75%;
}
div.pageVisual img{
  width: 60%;
}

div.content.home div.pageHeader .flex{
  flex-direction: column
}
div.content.home div.pageHeader div.pageText{
  margin-bottom: 25px;
  margin-top: 0px;
}
div.content.home div.pageHeader div.centerContent:after{
  display: none;
}
div.content.home div.sideImage .mainButton{
  position: relative;
  left: auto;
  bottom: auto;
  margin-top: 25px;
  display: inline-block;
}

div.caseHolder{
  padding-top: 25px;
  padding-bottom: 25px;
}
div.caseHolder h2.h3{
  margin-bottom: 25px;
}
div.caseHolder div.caseOverview{
  padding-top: 0px;
  column-gap: 10px;
}
div.caseHolder a.caseItem{
  margin-bottom: 10px;
}
div.content.home div.caseHolder div.spacer{
  height: 50px;
  margin-top: -10px;
}

div.instagramBar{
  padding-top: 25px;
  padding-bottom: 25px;
}
div.instagramHolder{
  width: 100%;
}
div.instagramBar div.instagramDivider{
  display: none;
}
div.instagramBar a.instagramText{
  height: auto;
  position: relative;
  right: auto;
  top: auto;
  bottom: auto;
  width: 100%;
  margin-top: 20px;
}
div.instagramBar a.instagramText span.textCell{
  text-align: center;
}
div.storyHolder {
  padding-top: 25px;
  padding-bottom: 0px;
}

div.storyHolder h2,
div.storyText h2{
  margin-bottom: 10px;
}
div.storyHolder h2{
  margin-bottom: 25px;
}
div.storyHolder div.storyOverview:before{
  display: none;
}



/*    OVER JULI   */
div.overons div.pageHeader{
  padding-bottom: 25px;
}
div.content.overons div.pageHeader .flex,
div.textRow.employee .flex{
  flex-direction: column
}
div.overons div.pageHeader div.sideImage img:last-child{
  display: none;
}
div.overons div.pageHeader h1{
  margin-bottom: 10px;
}
div.overons div.textRow h2{
  margin-bottom: 0px;
}
div.textRow{
  padding-top: 25px;
  padding-bottom: 25px;
}
div.textRow.employee{
  padding-top: 25px;
  padding-bottom: 25px;
}
div.textRow:not(.employee) div.simpleImage{
  width: 100%;
}
div.textRow div.simpleImage{
  margin-left: 0px;
}
div.textRow div.simpleImage.small{
  display: none;
}
div.textRow div.pageText{
  margin-left: 0px;
}
div.textRow div.pageText .mainButton{
  margin-top: 20px;
}
div.textRow.employee div.pageText {
  width: 100%;
}
div.textRow.employee div.pageText h3,
div.textRow div.pageText .h3{
  margin-bottom: 5px;
}
div.textRow.employee div.pageText div.twocols{
  column-count: 1;
  column-gap: 0px;
}
div.textRow.employee div.pageText p.hashtags{
  margin-top: 20px;
}
div.videoHolder{
  width: 100%;
  margin-top: 20px;
}
div.textRow:last-child{
  padding-top: 0px;
}
div.textRow:last-child div.pageText {
  width: 100%;
}
div.textRow:last-child div.pageText:before{
  display: none;
}


/*    STORIES   */
div.stories div.pageHeader{
  padding-top: 25px;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
div.storyOverview{
  column-gap: 0px;
}
a.storyItem{
  width: 100%;
  margin-bottom: 25px;
}
a.storyItem span.title{
  margin-top: 0px;
  margin-bottom: 5px;
}
a.storyItem span.intro{
  display: block;
  margin-bottom: 15px;
  min-height: 0px;
}

div.story div.pageHeader{
  padding-top: 25px;
  padding-bottom: 180px;
  margin-bottom: 0px;
}
img.storyImage{
  width: 100%;
  display: block;
  margin-top: -150px;
  margin-bottom: 25px;
}
div.storyText{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.quote{
  margin-bottom: 0px;
  padding: 40px;
  padding-bottom: 40px;
  font-size: 1.3em;
}
div.content.case .quote{
  margin-bottom: 25px;
}

div.content.landing div.storyImages{
  margin-bottom: 0px;
}

/*    CASES   */
div.cases div.pageHeader{
  padding-top: 25px;
  padding-bottom: 25px;
  margin-bottom: 0px;
}
div.caseOverview{
  padding-top: 30px;
  margin-bottom: 0px;
  column-gap: 0px;
}
a.caseItem{
  width: 100%;
  margin-bottom: 25px;
}
div.caseContent{
  padding-top: 30px;
}
div.case div.pageHeader{
  padding-top: 25px;
  padding-bottom: 25px;
  margin-bottom: 0px;
}
div.case div.pageHeader .flex{
  flex-direction: column-reverse;
}
div.case .flex.justify-space-between{
  flex-direction: column;
}
div.case div.bigLeft{
  width: 100%;
  margin-left: 0px;
}
div.caseExtraText{
  padding-left: 0px;
  padding-right: 0px;
  width: 100%;
  margin-top: 25px;
}
div.bigPortrait{
  width: 100%;
  margin-top: 25px;
}

div.case div.smallRight{
  width: 100%;
  padding-right: 0px;
  justify-content: space-between;
  margin-top: 25px;
}
div.case div.smallRight.photography{
  margin-bottom: 0px;
}
div.case div.smallRight img{
  margin-top: 0px;
  width: 45%;
}
div.case div.bigCenter,
div.case div.extraImages div.flex.justify-center,
div.case .quote{
  width: 100%;
  margin-top: 25px;
}
div.case div.extraImages div.flex.justify-start{
  width: 100%;
  margin-top: 25px;
  column-gap: 8%;
}
div.case div.videoRow{
  margin-top: 70px;
  padding-bottom: 0px;
}

/*      WERKWIJZE   */
div.werkwijze div.pageHeader .flex{
  flex-direction: column;
}
div.werkwijzeHolder{
  background-color: rgb(232,227,221);
  padding-top: 25px;
  padding-bottom: 25px;
}
div.werkwijzeText{
  border-bottom-left-radius: 60px;
  width: 100%;
  padding-bottom: 40px;
  margin-bottom: 0px;
}
div.werkwijzeText div.heading{
  width: auto;
  margin-left: 35px;
  margin-right: 35px;
  margin-bottom: 25px;
}
div.werkwijzeText div.block{
  margin-top: 40px;
}
div.werkwijzeText div.block:after{
  bottom: -21px;
  width: 80px;
}
div.werkwijzeText div.block h2,
div.werkwijzeText div.block div{
  padding-left: 35px;
  padding-right: 35px;
}
div.werkwijzeText div.block h2{
  font-size: 1.5em;
  margin-bottom: 0px;
}
div.werkwijzeText h2:before{
  font-size: 6px;
  left: 20px;
  top: 1px;
}
div.werkwijzeText div.block div.extraTextHolder{
  padding-left: 20px;
}
div.werkwijzeText div.block:nth-child(odd) div.extraTextHolder {
  margin-left: 35px;
  padding-left: 25px;
}
div.werkwijzeText div.block:nth-child(even) div.extraTextHolder {
  margin-right: 35px;
  padding-left: 35px;
}

div.werkwijzeFooter{
  padding-bottom: 30px;
}

/*      CONTACT    */
div.content.contact div.pageHeader{
  padding-bottom: 60px;
  padding-top: 25px;
}
div.content.contact div.pageHeader div.centerContent:after{
  display: none;
}
div.contactInfo{
  font-size: 0.8em;
}

@media screen and (max-width: 410px) {
  div.contactInfo span span {
    display: block;
    margin-left: 37px;
    padding-top: 5px;
  }
}

div.contactImage.flex{
  display: block;
}
div.contactImage .imageHolder{
  width: 100%;
  margin-left: 0px;
  margin-top: -100px;
}

/*      FOOTER      */
footer{
  background-color: rgb(241,238,234);
  padding-top: 0px;
  border-top-width: 25px;
  border-bottom-width: 25px;
  border-left-width: 25px;
  border-right-width: 25px;
}
footer div.footerContent{
  padding-top: 40px;
}

footer .flex{
  flex-direction: column;
  justify-content: center;
}
div.footerCol:nth-child(2),
div.footerCol{
  width: 100%;
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  margin-bottom: 35px;
}
div.footerCol:nth-child(2){
  display: none;
}

div.footerCol:nth-child(1) p{
  margin-bottom: 10px;
}
div.footerCol:nth-child(3) p{
  width: 100%;
  margin: 0px;
  margin-bottom: 0px;
  font-size: 0.9em;
}
a.footerLogo{
  margin-left: 0px;
  width: 100%;
}


div.footerCol:nth-child(3) p:nth-child(even){
  text-align: center;
  padding-right: 0px;
  margin-top: 5px;
}
div.footerCol p.socials a{
  display: inline-block;
  padding-right: 10px;
}

div.copyright{
  padding-top: 0px;
  padding-bottom: 25px;
  line-height: 1.5em;
}
div.copyright br{
  display: inline;
}