/***************************************
*
*___TRIPLEPRO CUSTOM_______________
*
*   TriplePro Online Marketing
*   www.onlinemarketing.triplepro.nl
*
***************************************/

:root
{
  --main-dark-color      : #0D2E65;
  --main-light-color     : #FFFFFF;
  --main-contrast-color  : #EB640A;
  --minor-contrast-color : #B7EB0A;
}

/** STYLING
************************************************/

/** BACKGROUND-IMAGES
************************************************/

#home::after,
#home::before
{
  content : unset;
}

.element.text.kruimelpad
{
  z-index : 500;
}

.element.kruimelpad::after,
.element.kruimelpad::before
{
  content    : '';
  position   : absolute;
  top        : 25em;
  box-sizing : border-box;
  z-index    : 1100;
}

h1, h2, h3, h4, h5 {
  text-transform: lowercase;
}

@media (max-width : 768px)
{

  .oranjeblok
  {
    padding : 9px !important;
  }

  .element.kruimelpad::after,
  .element.kruimelpad::before
  {
    font-size : 7px;
    top       : 45em;
  }

  .tijdlijncontainer2
  {
    width : 100% !important;
  }

  .medewerker .image .pil.faq
  {
    width : 100% !important;
  }

  .luna-ghost
  {
    white-space : nowrap;
    overflow    : hidden;
    font-size   : 3em;
  }
  
  form input, form select, form textarea {
      background-color: #fff;
  }
}

.element.kruimelpad::before
{
  left          : -8em;
  display       : block;
  height        : 8em;
  width         : 16em;
  transform     : rotate(-45deg);
  border-radius : 40px 999em 999em 40px;
  border        : 0.3em solid var(--main-contrast-color);
}

.element.kruimelpad::after
{
  right         : -2em;
  display       : block;
  height        : 7em;
  width         : 7em;
  border-radius : 50%;
  border        : 0.4em solid #D2DEF2;
}

.grijs
{
  background-color : #ECECEC;
}

h2
{
  line-height : 1.2em;
}

p.home-header-title
{
  font-family : "dystopian", "sans-serif";
  font-size   : 2.5em;
}

.templates p.home-header-title {
  margin-bottom: 10px;
}

/** FOOTER
***********************/

.element.text.footer > .sitemap
{
  display : grid;
}

.element.text.footer .module.sitemap
{
  grid-area : module_sitemap;
}

.element.text.footer .socialmedia
{
  grid-area : socialmedia;
}

.element.text.footer hr
{
  grid-area : line;
}

.element.text.footer .diensten
{
  grid-area : diensten;
}

.element.text.footer .kennisdeling
{
  grid-area : kennisdeling;
}

.element.text.footer .triplepro
{
  grid-area : triplepro;
}

.element.text.footer .adres
{
  grid-area : adres;
}

.element.text.footer .partners
{
  grid-area : partners;
}

.element.text.footer .partners2
{
  grid-area : partners2;
}

.groeiscan .website-menu-scan.luna-vertical-center,
html .groeiscan #hoofd #TEXT_HDXANVMV
{
  display : none;
}

html .groeiscan #hoofd #TEXT_QTYFSDSQ
{
  background-color : #0D2E65;
  color            : #FFFFFF;
}

.element.text.footer table td
{
  min-width : unset;
  max-width : unset;
}

.element.text.footer .adres img
{
  margin-right : 1em;
}

@media (max-width : 991px)
{
  html [data-responsive] #hoofd > .element.text.footer
  {
    padding : 2em 2em 7em;
  }
}

@media (min-width : 1265px)
{
  .element.text.footer > .sitemap
  {
    grid-gap              : 1em;
    grid-template-columns : 1fr 1fr 1fr 1fr;
    grid-template-areas   : /* @formatter:off */
      "module_sitemap module_sitemap module_sitemap socialmedia"
      "line line line line"
      "diensten kennisdeling triplepro adres"
      "partners partners partners partners"
      "partners2 partners2 partners2 partners2";
    /* @formatter:on */
  }
}

@media (max-width : 1265px)
{
  .element.text.footer > .sitemap
  {
    grid-gap              : 1em;
    grid-template-columns : 1fr 1fr;
    grid-template-areas   : /* @formatter:off */
      "module_sitemap module_sitemap"
      "line line"
      "socialmedia socialmedia"
      "diensten kennisdeling"
      "triplepro adres"
      "partners partners"
      "partners2 partners2";
    /* @formatter:on */
  }
}

@media (max-width : 768px)
{
  .element.text.footer > .sitemap
  {
    grid-gap              : 1em;
    grid-template-columns : 1fr;
    grid-template-areas   : /* @formatter:off */
      "module_sitemap"
      "line"
      "socialmedia"
      "diensten"
      "kennisdeling"
      "triplepro"
      "adres"
      "partners"
      "partners2"
    /* @formatter:on */;
  }
}

#hoofd > .element.text.footer > :first-child
{
  margin-top : 0;
}

[data-responsive] #hoofd > .element.text.footer
{
  padding : 2em 15%;
}

.element.text.footer .sitemap
{
  text-align : left;
}

.element.text.footer > .sitemap a
{
  color   : rgba(255, 255, 255, 0.5);
  display : block;
}

.element.text.footer > .sitemap a:hover
{
  color : rgba(255, 255, 255);
}

.element.text.footer hr
{
  border : 1px solid rgba(255, 255, 255, 0.5);
  width  : 100%;
}

.element.text.footer h2
{
  font-size   : 1em;
  font-family : 'Montserrat', 'sans-serif';

  margin      : 1rem 0;
}

.element.text.footer .adres table
{
  width : auto;
}

.element.text.footer .partners, .element.text.footer .partners2
{
  display         : flex;
  justify-content : space-between;
  flex-flow       : row wrap;
  gap             : 2em;

  padding-top     : 2em;
}

div#TEXT_HDXANVMV
{
  margin-bottom : 0 !important;
}

@media (max-width : 768px)
{
  .element.text.footer .partners, .element.text.footer .partners2
  {
    justify-content : flex-start;
  }

  .module.kruimelpad a
  {
    font-size : 13.5px;
  }

  html body #hoofd #TEXT_MAKKALWZ
  {
    background-color : #1C5CBD;
    padding-top      : 10px;
    margin-bottom    : -1px;
  }

  html body #hoofd #TEXT_UPBNBZMJ
  {
    padding-top    : 0;
    padding-bottom : 0;
  }

  .diepteheader #hoofd #TEXT_MAKKALWZ
  {
    background-color : #1C5CBD00;
    z-index          : 999;
    padding-top      : 0;
    padding-bottom   : 0 !important;
  }
  
  .templates #hoofd #TEXT_MAKKALWZ {
    background-color: #1c5cbd;
  }
  
  .grecaptcha-badge {
    display: none !important;
  }
  
  #home .module.personeel {
    margin-bottom: -26em;
  }
  
  .module.personeel .navigation .left, .module.personeel .navigation .right {
    font-size: 2em;
    padding: 5px;
  }
  
  .module.case .navigation {
    font-size: 2.5em;
  }
  
  .module.case .navigation .left, .module.case .navigation .right {
     padding: 5px;
  }
  
  span.stop.fa.fa-stop {
    font-size: 14px;
  }
}

.element.text.footer .partners img, .element.text.footer .partners2 img
{
  max-height : 5em;
}

.element.text.footer .socialmedia
{
  display     : flex;
  align-items : center;
  gap         : 0.5em;
}

.element.text.footer .socialmedia img
{
  max-height : 1.5em;
}

.element.text.footer .module.sitemap
{
  height : auto;
}

.element.text.footer .module.sitemap > ul
{
  flex-direction : row;
  padding-left   : 0;
  gap            : 0.8em;
}

.element.text.footer .module.sitemap a
{
  border : none;
}

.element.text.footer .module.sitemap li
{
  min-width : 0;
}

.module.sitemap > ul > li > a
{
  font-size : 15px;
  padding   : 0;
}


/** MEDEWERKER
***********************/

.medewerker
{
  display : grid;
}

.medewerker .image
{
  grid-area : medewerker_image;
}

.medewerker .caption
{
  grid-area : medewerker_caption;
}

.medewerker .text
{
  grid-area : medewerker_text;
}

.medewerker .image figure.faq.pil
{
  background-color : #1C5CBD;
}

.medewerker .image .pil.faq
{
  background-position : 55% 11%, 11% 12%;
  width               : 24vw;
  border-bottom       : none;
}

.medewerker .image img.main
{
  opacity : 1;
}

.medewerker .image img.hover
{
  position   : absolute;
  top        : 0;
  right      : 0;
  left       : 0;
  bottom     : 0;
  object-fit : contain;
  opacity    : 0;
}

.medewerker .image:hover img.main
{
  opacity : 0;
}

.medewerker .image:hover img.hover
{
  opacity : 1;
}

.module.personeel .visible .content
{
  grid-template-rows : 85% 7% auto;
  text-align         : center;
}

.module.case .visible .content .header
{
  margin-top : 10px;
}

html body.dieptepagina.round.vacature.portfolio #TEXT_JZVQGRTB
{
  padding-bottom : 30px !important;
}

@media (min-width : 1365px)
{
  .medewerker
  {
    grid-gap              : 2em;
    grid-template-columns : 1fr 2fr;
    grid-template-rows    : 17em auto;
    grid-template-areas   : "medewerker_image medewerker_caption" "medewerker_image medewerker_text";
    margin-bottom         : -15em;
  }

  .medewerker .text
  {
    color : var(--main-light-color);
  }

  .medewerker img
  {
    max-height : 38em;
  }

  .medewerker p
  {
    margin-top : 0;
  }

  body.over_ons .content_4
  {
    min-height : auto;
  }
}

@media (max-width : 1365px)
{
  .medewerker
  {
    grid-gap              : 1em;
    grid-template-columns : auto auto;
    grid-template-areas   : "medewerker_image medewerker_caption" "medewerker_text medewerker_text";
  }
}

@media (max-width : 768px)
{
  .medewerker
  {
    grid-gap              : 0;
    grid-template-columns : auto;
    grid-template-areas   : "medewerker_caption" "medewerker_image" "medewerker_text";
  }
}

.medewerker h1
{
  margin : 0;
}

.medewerker h1 + p
{
  margin : 0;
}

html .element.text .medewerker ol li:before
{
  color : #56C408;
  top   : -0.2em;
  left  : -1.3em;
}

.personeel .left:hover,
.personeel .right:hover
{
  color : var(--main-contrast-color);
}

.spiegel
{
  -webkit-transform : scaleX(-1);
  transform         : scaleX(-1);
}


html body #hoofd #MENU_QRQHGNSB ul li a
{
  padding-bottom : 1em;
  padding-left   : 0.5em;
  padding-right  : 0.5em;
  padding-top    : 1.25em;
  font-size      : 0.9em;
}

/** GROEISCAN
***********************/

@media (min-width : 1365px)
{

  .element.text.groeiscan
  {
    display : none;
  }

  html body #hoofd #MENU_QRQHGNSB ul li ul
  {
    box-shadow : 1px 1px 1px hsl(216deg 74% 43% / 20%);
  }

  html body #hoofd #MENU_QRQHGNSB ul li ul li a
  {
    padding : 9px 15px;
  }
}

@media (max-width : 1365px)
{

  html body[data-responsive] #hoofd > .element.text.groeiscan
  {
    padding : 0.5em 0;
  }

  .element.text.groeiscan
  {
    background-color : var(--minor-contrast-color);
  }

  .element.text.groeiscan a
  {
    color    : var(--main-dark-color);
    position : relative;
  }

  .element.text.groeiscan a:after
  {
    content     : "\f0a9";
    font-family : FontAwesome, sans-serif;

    position    : absolute;
    left        : -1.5em;
  }

  #home .element.text.groeiscan
  {
    display : none;
  }

  #home .element.text.groeiscan a
  {
    color : var(--minor-contrast-color);
  }

}

/* ======================== Fotografie ======================*/
.fotografie
{
  margin-left     : -10px;
  margin-right    : -10px;
  justify-content : space-between;
  align-items     : center;
  display         : flex;
}

.fotografie > div
{
  flex-grow        : 1;
  flex-basis       : 33.333333%;
  position         : relative;
  min-height       : 1px;
  margin           : 10px;
  color            : #FFFFFF;
  text-align       : center;
  background-color : #005AC4;
  height           : 300px;
}

.fotografie > div:hover .fotografie-image
{
  filter : none;
}

.fotografie-tekst
{
  position        : absolute;
  justify-content : center;
  display         : flex;
  width           : 100%;
  overflow        : hidden;
  bottom          : 0;
  transition      : .5s ease-in-out;
  z-index         : -1;
  opacity         : 0;
}

.fotografie > div:hover .fotografie-tekst
{
  display   : block;
  bottom    : 50%;
  transform : translateY(50%);
  z-index   : 0;
  opacity   : 100%;
}

.overlay
{
  width            : 100%;
  height           : 300px;
  position         : absolute;
  background-color : #0000001C;
  top              : 0;
}

.fotografie-image
{
  background-size : cover;
  width           : 100%;
  height          : 300px;
  transition      : 0.2s;
  filter          : grayscale(100%);
}


/** PERSONEEL
***********************/

.module.personeel
{
  color         : var(--main-contrast-color);
  font-size     : 0.8em;

  margin-bottom : -17em;
}

.module.personeel a
{
  color : var(--main-light-color);
}

#TEXT_KXQSJJIO .module.personeel a,
#TEXT_CPNLQEQB .module.personeel a
{
  color : #1C5CBD;
}

.module.personeel .visible
{
  height : 30em;
}

.module.personeel .visible .scroller .row.active img
{
  border-color : var(--main-contrast-color);
}

.module.personeel .visible .content .text
{
  margin-top : 0.5em;
}

@media (max-width : 1265px)
{
  .module.personeel
  {
    font-size : 0.65em;
  }
}

#home .module.personeel,
#home .module.personeel a
{
  color : #FFFFFF;
}

.overonspagina .module.personeel
{
  margin-bottom : 0;
}

.element.text.footer
{
  font-size : 15px;
}

.module.case a:hover,
.module.case a.active,
.module.personeel a:hover
{
  color : var(--main-contrast-color) !important;
}

/** CASE
***********************/

.module.case a
{
  color : #FFFFFF;
}

.module.case a:hover
{
  color : #DDDDDD;
}

.module.case .visible .content
{
  grid-template-columns : minmax(35em, auto);
}

.case .left:hover,
.case .right:hover
{
  color : var(--main-contrast-color);
}

.module.case .visible .scroller .row
{
  padding : 0 10px;
}

@media (min-width : 1266px)
{
  html body[data-responsive]#home #hoofd > .element.text.content_4
  {
    min-height : 44em;
  }

  html body[data-responsive]#home #hoofd > .element.text.content_5
  {
    min-height : 26em;
  }

  .module.case
  {
    margin   : 0 auto;
    position : absolute;
    left     : 1em;
    right    : 1em;
    bottom   : 5em;
  }
}

@media (max-width : 1265px)
{
  .module.case .visible .content
  {
    grid-template-rows : 60% 3em auto;
  }

  .module.case .visible
  {
    height : 20em;
  }
}

/** CARROUSEL
***********************/

.element.text.content_7 .module.carrousel,
.over_ons #hoofd #TEXT_QANIACRN .module.carrousel
{
  font-size   : 2em;
  width       : 100vw;
  left        : 0;
  bottom      : -5em;
  white-space : nowrap;
  overflow    : hidden;
  position    : absolute;
}

.over_ons #hoofd #TEXT_QANIACRN .module.carrousel
{
  bottom : -11em;
}

.element.text.content_7 .module.carrousel .visible,
.over_ons #hoofd #TEXT_QANIACRN .module.carrousel .visible
{
  color      : var(--main-light-color);
  text-align : center;
}

.element.text.content_7 .module.carrousel .visible figure,
.over_ons #hoofd #TEXT_QANIACRN .module.carrousel .visible figure
{
  position : absolute;
  right    : 0;
}

.element.text.content_7 .module.carrousel img,
.over_ons #hoofd #TEXT_QANIACRN .module.carrousel img
{
  border-radius : 0.2em;
}

.headerbuttons .reversed-wit
{
  margin-top : 10px;
}

.reviewblokpagina .review {
  margin-top: 30px;
}


/** REVIEW
***********************/

@media (min-width : 768px)
{
  .review
  {
    width               : 35em;
    background-image    : url("/websites/1772/images/oranjepill-outline.png"), url("/websites/1772/images/blauwecirkel-outline.png");
    background-repeat   : no-repeat;
    background-position : 15em 2.5em, 33em 15em;
    background-size     : 20em, 1.5em;
  }

  .review .slider
  {
    padding : 3em 3em 2em;
    width   : 30em;
  }

  .review .circle.content
  {
    bottom : 0;
    left   : 24em;
  }

  .paddingleft
  {
    padding-left : 20px;
  }

  .headerbuttons .reversed-wit
  {
    margin-left : 10px;
  }
  
  .reviewblokpagina .review, .reviewblokpagina .review .slider, .overonspagina .review, .overonspagina .review .slider {
    width: 100%;
  }
  
  .reviewblokpagina .review, .overonspagina .review {
      margin-top: 60px;
      background-position: 15em -0.5em, 33em 15em;
  }

  .pillarblok
  {
    width : 400px;
  }
  
  .reviewblokpagina .review .circle.content, .overonspagina .review .circle.content {
    bottom: 0;
    left: 44em;
  }

  .overonspagina .element.text.content_6 {
    padding-top: 30px !important;  
}
  
  .omcases .grid-blokken-twee img, .opsomming .grid-blokken-twee img {
    height: 200px;
  }
  
  .templates .grid-blokken-twee img {
    height: auto;
  }
  
  .omcases .vacaturesblokken img, .opsomming .vacaturesblokken img, .opsomming .blauweblok img {
    height: 150px;
  }
}

@media (max-width : 768px)
{
  .review
  {
    position       : relative;
    width          : 100%;
    padding-bottom : 0.1em;
  }

  .review .slider
  {
    padding : 2em 1em;
  }

  .review .circle.content
  {
    bottom : -1em;
    right  : 0;
  }

  .fotografie
  {
    display : block;
  }
  
  .reviewblokpagina .content_6 iframe, .overonspagina .content_6 iframe {
      width: 100% !important;
      margin-bottom: 30px;
  }
  
 .gratisgroeiscan .content_1  ul.usps li {
    font-size: 11px;
  }
  
  .module.case .visible .scroller .row img {
    max-height: 69%;
  }
}

.review
{
  position       : relative;
  padding-bottom : 0.1em;
}

.review .slider
{
  color            : white;
  margin-bottom    : 5em;
  background-color : #1C5CBE;
  border-radius    : 0.4em;
  z-index          : 1;
}

.review .slider .slideshow
{
  font-size : 0.85em;
}

.review .slider .control
{
  font-size  : 1.5em;
  text-align : center;
}

.review .slider .control > *
{
  cursor : pointer;
}

.review .slider .control > *.active,
.review .slider .control > *:hover
{
  color : var(--main-contrast-color);
}

.fa.fa-stop, .review .slider .control > *:hover .fa.fa-stop
{
  color : transparent !important;
}


.review .quotes
{
  position : absolute;
  top      : -2.3em;
  left     : 2em;
  z-index  : 2;
}

.review .quotes img
{
  margin-right : 0.5em;
  width        : 3em;
}

.review .circle.content
{
  color    : #FFFFFF;
  position : absolute;
  width    : 10em;
  height   : 10em;
  padding  : 2.1em 1em;
  z-index  : 2;
}

.templates .review, .templates .review .slider {
  width: 100%;
  margin-top: 20px;
}

.templates .review {
    background-size: 15em, 1.5em;
}

.templates .element.text.content_3 {
  display: none;
}

/** CIRCLE CONTENT
***********************/

.circle.content
{
  width            : 12em;
  height           : 12em;
  padding          : 3.5em 1em;
  text-align       : center;
  white-space      : pre-wrap;
  transform        : rotate(20deg);
  border-radius    : 50%;
  background-color : var(--main-dark-color);
  box-shadow       : 0.3em 0.5em 0.5em hsl(0deg 0% 0% / 20%);
}

/** PIL
***********************/

.pil
{
  position : relative;
}

.pil img
{
  display : block;
}

.pil .content
{
  position : absolute;
  left     : 10em;
  bottom   : -2em;
}

.pil.left,
.pil.right
{
  background-size   : 50%, auto;
  background-repeat : no-repeat;

  width             : fit-content;

  padding-bottom    : 4em;
}

.pil.left
{
  background-image    : url(/websites/1772/images/organge-ellips.png);
  background-position : 0 100%;
  padding-left        : 4em;
}

.pil.right
{
  background-image    : url(/websites/1772/images/faq-oranjepill-solid.png), url(/websites/1772/images/blauwecirkel-outline.png);
  background-position : 100% 100%, 85% 100%;
  padding-right       : 4em;
}

.pil.faq
{
  background-image    : url(/websites/1772/images/faq-oranjepill-solid.png), url(/websites/1772/images/blauwecirkel-outline.png);
  background-position : top center, 10% 10%;
  background-size     : 90%, auto;
  background-repeat   : no-repeat;
}

.pil.faq
{
  width         : 100%;
  border-bottom : 2px solid var(--main-contrast-color);
  margin-bottom : 20px;
}

@media (min-width : 1265px)
{
  .pil.faq
  {
    width         : 30vw;
    border-bottom : 2px solid var(--main-contrast-color);
  }

  .module.artikel
  {
    width : 35em;
  }
}

/* ============================= USPS styling ===============================*/

.uspsblock
{
  margin-top       : 0 !important;
  background-color : #1232619E;
}

ul.usps
{
  padding         : 0 5vw 0 7vw !important;
  height          : 35px;
  margin          : 0;
  overflow        : hidden;
  display         : flex;
  justify-content : center;
  align-items     : center;
  list-style-type : none;
  flex-flow       : column wrap;
}

ul.usps li
{
  width           : 100%;
  text-align      : center;
  margin          : 0;
  color           : #FFFFFF;
  padding         : 0 0;
  white-space     : nowrap;
  display         : flex;
  justify-content : center;
  align-items     : center;
  animation       : scroll-horizontal 20s ease-out infinite alternate;
  font-size       : 13px;
}

html .element.text ul.usps li:before
{
  color : #B7EB0A !important;
}

.formulier iframe
{
  height : 138px;
}

.calendyruben iframe {
  height: 100% !important;
}

tbody tr:first-child {
    font-weight: 600;
}

@media (max-width : 1500px) {
    .video iframe {
     height: 520px !important;
  }
}

.templates .columnreverse .pil.faq {
  width: 20vw;
}

.templates2 .grid-blokken-twee .blok {
  align-content: center;
}

.templates2 .grid-blokken-twee {
  padding: 20px 0px;
}

.templates2 .header .pil.faq {
  border-bottom: 0px;
  background-position: top center, 10% 14%;
  background-size: 62%, auto;
}

.templates .header .blok.faq.pil {
    margin-top: 20px;
}
  
@media (max-width : 992px)
{
  .opsomming .content_3 iframe
  {
    width : 300px !important;
  }
  
  .templates2 .header .blok.faq.pil {
    width: 95%;
  }
  
  .templates2 .header .pil.faq {
      background-size: 44%, auto;
  }

  p.home-header-title, .templates2 h2
  {
    font-size : 1.2em;
  }

  .werkwijzeimage
  {
    height : 60px;
  }

  .omenom .blok
  {
    padding : 20px !important;
  }

  .module.case .visible .content .header
  {
    font-size : 25px;
  }

  .over_ons #hoofd #TEXT_FZKHWAOR
  {
    margin-top : -330px !important;
  }

  html body.dieptepagina.round.vacature #TEXT_UPBNBZMJ
  {
    padding-top    : 50px !important;
    padding-bottom : 50px !important;
  }

  .vacature .bgimage
  {
    height : auto;
  }

  .vacature .formulier
  {
    margin-top : -30px;
  }

  .over_ons #hoofd #TEXT_FZKHWAOR, .over_ons #hoofd #TEXT_QANIACRN
  {
    padding-bottom : 0 !important;
  }

  .over_ons #hoofd #TEXT_QANIACRN h2
  {
    margin-top : -100px;
  }

  .columnreverse
  {
    flex-direction : column-reverse;
    display        : flex !important;
  }
  
  .templates .columnreverse .pil.faq {
    width: 44vw;
  }

  .omcases #hoofd > .element.text.content_3, .omcases #hoofd > .element.text.content_5
  {
    padding-bottom : 0 !important;
  }

  ul.usps
  {
    padding : 0 !important;
  }

  html body #hoofd #TEXT_OQAVNDGJ .home-header .home-header-title
  {
    font-size : 2em;
  }

  html body #hoofd #TEXT_OQAVNDGJ .home-header .home-header-transparent, html body #hoofd #TEXT_OQAVNDGJ .home-header a.button
  {
    font-size : 1em !important;
  }

  html body #hoofd #TEXT_OQAVNDGJ .home-header a.button
  {
    margin-top : 30px;
  }

  .formulier iframe
  {
    height : 83px;
  }

  .content_1 iframe
  {
    height : 94px;
  }

  html body.over_ons #TEXT_CPNLQEQB
  {
    padding-bottom : 30px !important;
  }

  html body.over_ons #TEXT_PXPPLUKY
  {
    padding-bottom : 0 !important;
  }

  .overonspagina div#TEXT_JZVQGRTB td
  {
    width : 100% !important;
  }

  .overonspagina div#TEXT_OQAVNDGJ td:last-child
  {
    display : none;
  }

  html body #hoofd #MENU_OVCRVALL label
  {
    color : #FFFFFF;
  }

  html body #hoofd #MENU_OVCRVALL .website-menu-logo a
  {
    display         : inline-flex;
    justify-content : center;
    align-items     : center;
  }

  html body #hoofd #MENU_OVCRVALL li ul
  {
    max-height : 120vh;
  }

  .mobielonly
  {
    display : block;
  }

  .desktoponly
  {
    display : none !important;
  }

  .module.artikel h2
  {
    display : none;
  }
  
  .video iframe {
     height: 280px !important;
  }
  
  .mobielefix .grid-blokken {
    display: none;
  }
  
  #artikel li:nth-child(6) {
    display: none;
  }
  
  .mobielcaseheader {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (min-width : 1365px)
{
  ul.usps
  {
    justify-content : space-between;
    flex-flow       : row;
  }

  ul.usps li
  {
    width     : auto;
    animation : none;
  }
}

@keyframes scroll-horizontal
{

  0%,
  20%
  {
    -webkit-transform : translateX(0);
    transform         : translateX(0);
  }

  25%,
  45%
  {
    -webkit-transform : translateX(-100%);
    transform         : translateX(-100%);
  }

  50%,
  70%
  {
    -webkit-transform : translateX(-200%);
    transform         : translateX(-200%);
  }

  75%,
  100%
  {
    -webkit-transform : translateX(-300%);
    transform         : translateX(-300%);
  }
}

html body #hoofd #TEXT_MAKKALWZ .module.kruimelpad
{
  padding : 0 5vw 0 5.5vw !important;
  margin  : 1.6em 0 0.15em;
}

html body #hoofd #TEXT_HTWBGNZH
{
  padding-right : 6%;
}

@media (min-width : 1500px)
{
  html body #hoofd #TEXT_HTWBGNZH
  {
    padding-right : 8%;
  }

  .formulier iframe
  {
    height : 138px;
  }

  html body #hoofd #TEXT_OQAVNDGJ .home-header .home-header-transparent
  {
    padding   : 0 231px !important;
    font-size : 26px;
  }

  .home-header a.button
  {
    font-size : 0.23em !important;
  }
  
  .content_7 .columnreverse .pil.faq {
      width: 12vw;
  }
    
  .content_7 .columnreverse .pil img {
      width: 400px;
    }
}

/* ============================= END - USPS styling ===============================*/

.slideshow > .active
{
  transition : opacity 1s;
}

/** ARTIKEL
***********************/

.module.artikel
{
  max-width : calc(100vw - 2em);
}

.module.artikel label
{
  border           : none;
  position         : relative;
  background-color : hsl(214deg 62% 49%);
  padding          : 1em 3em;
  box-shadow       : 1px 0 2px rgba(0, 0, 0, 0.2);
  border-radius    : 0.4em;
  color: #fff;
}

.module.artikel label:before
{
  content     : "\f178";

  color       : var(--main-contrast-color);
  font-family : fontAwesome, sans-serif;

  position    : absolute;
  left        : 1em;
}

.module.artikel input + label:after
{
  content        : "+";
  color          : #B7EB0A;
  font-weight    : bold;
  text-align     : center;
  vertical-align : middle;

  position       : absolute;
  right          : 2em;
  top            : 0;
  bottom         : 0;

  margin         : auto;
  padding-right  : 0.1em;
  width          : 2em;
  height         : 2em;
  line-height    : 1.8em;

  border         : 2px solid;
  border-radius  : 50%;
  transition     : color 0.5s;
}

.module.artikel input:checked + label:after
{
  content     : "x";
  color       : hsl(24, 92%, 48%);
  line-height : 1.6em;
}

.module.artikel input:checked ~ .content
{
  max-height : 25em;
  transition : 1s;
}

.module.artikel .content
{
  color            : var(--main-dark-color);
  padding          : 0 1em;
  border-radius    : 0 0 0.4em 0.4em;
  background-color : hsl(218, 77%, 95%);
}

/** MARQUEE
***********************/

.marquee
{
  font-size   : 4em;
  padding-top : 20px;
  width       : 100%;
  height      : 4em;
  white-space : nowrap;
  align-items : center;
  display     : flex;
}

.marquee > *
{
  font-family : 'dystopian', 'sans-serif';
  font-size   : 1.75em;
}

.marquee > *
{
  -webkit-text-stroke     : 1px white;
  -webkit-text-fill-color : transparent;
  position                : absolute;
  left                    : 0;
  margin                  : 0;
  animation               : marquee 100s linear infinite;
}

@keyframes marquee
{
  0%
  {
    transform : translateX(-10%);
  }
  100%
  {
    transform : translateX(-100%);
  }
}

/** HOME CLASS
***********************/

html #home #hoofd #TEXT_UPBNBZMJ,
html #home #hoofd #TEXT_CPNLQEQB
{
  background-color : #FFFFFF;
}

html #home #hoofd #TEXT_UPBNBZMJ .marquee > *,
html #home #hoofd #TEXT_CPNLQEQB .marquee > *,
.marqueeblue > *
{
  -webkit-text-stroke : 2px #1A59B76E;
}

.marqueedark > *
{
  -webkit-text-stroke : 2px #0D2E65;
}


/** GRID-BLOKKEN STYLING
 **********************************************/

.paddingpillarlblok
{
  padding : 5vw 8vw;
}

.blauweblok, .blauweblok li
{
  background-color : #1C5CBD !important;
  color            : #FFFFFF !important;
}

.grid-blokken, .grid-blokken-twee, .grid-blokken-vier, .grid-blokken-drie, .grid-blokken-2-1
{
  display               : grid;
  grid-template-columns : repeat(1, 1fr);
  gap                   : 20px;
}

@media (min-width : 992px)
{
  .content_1 iframe
  {
    height : 160px !important;
  }

  .grid-blokken
  {
    grid-template-columns : 1fr 2fr;
  }

  .grid-blokken-2-1
  {
    grid-template-columns : 2fr 1fr;
  }

  .grid-blokken-twee
  {
    grid-template-columns : 1fr 1fr;
  }

  .grid-blokken-drie
  {
    grid-template-columns : 1fr 1fr 1fr;
  }

  .grid-blokken-vier
  {
    grid-template-columns : 1fr 1fr 1fr 1fr;
  }

  .grid-blokken-vijf
  {
    grid-template-columns : 1fr 1fr 1fr 1fr 1fr;
  }
  
  .portfolioblok
  {
    margin-top : -283px;
  }

  .vacature .portfolioblok
  {
    margin-top : -220px;
  }

  .paddingpillarlblok
  {
    padding : 5vw 5vw 5vw 7vw;
  }

  .footerformulier
  {
    margin-bottom : 290px;
  }

  .formulierup
  {
    margin-top : -65px !important;
  }

  .diepte-pillar
  {
    height : 37vw !important;
  }

  html body #hoofd #TEXT_OQAVNDGJ .home-header .home-header-transparent
  {
    padding : 0 130px;
  }

  .mobielonly
  {
    display : none;
  }

  .desktoponly
  {
    display : block;
  }

  .casesruimte
  {
    margin-bottom : 210px;
  }
  
   #artikel li:nth-child(7), #artikel li:nth-child(8) {
    display: none;
  }
}

.grid-blokken .blok, .grid-blokken-twee .blok, .grid-blokken-drie .blok
{
  display         : grid;
  align-content   : center;
  justify-content : center;
}

.grid-blokken-twee .blok, .grid-blokken-2-1 .blok
{
  display         : grid;
  align-content   : baseline;
  justify-content : center;
}

.grid-blokken-vier .blok, .vacaturesblokken .blok
{
  background-color : #0D2E65;
  border-radius    : 10px;
  color            : #FFFFFF;
  padding          : 20px;
  text-align       : center;
}

.onlinemarketingblokken .blok
{
  text-align       : center;
  padding          : 15px 30px 25px 30px;
  border-radius    : 10px;
  background-color : #FFFFFF;
  border           : 1px solid #1C5CBD3D;
  align-content    : stretch;
}

.cro-blokken .blok {
  background-image: url('/websites/1772/images/nieuwebgcro.png');
  padding-top: 30px;
}

.portfolioblok
{
  align-content : flex-start !important;
}

.onlinemarketingblokken
{
  margin-top : 20px;
}

.diepteheader .grid-blokken-vier .blok
{
  background-color : transparent;
}

.diepte-header
{
  background-position : center !important;
  background-size     : cover !important;
}

.bovenaan .blok
{
  align-content : space-between;
}

.omenom
{
  grid-template-columns : 1fr;
}

.omenom .blok:nth-child(odd)
{
  background-color : #0D2D65;
  color            : #FFFFFF;
}

.omenom .blok:nth-child(odd):hover
{
  background-color : #FFFFFF;
  color            : #0D2D65;
}

.omenom2 .blok:nth-child(odd)
{
  background-color : #1C5CBD;
  color            : #FFFFFF;
}

.omenom2 .blok:nth-child(odd):hover
{
  background-color : #FFFFFF;
  color            : #1C5CBD;
}

.omenom .blok
{
  padding         : 0 20px;
  justify-content : flex-start;
}

.oranjeblok
{
  background-color : #EB640B !important;
  padding          : 20px;
}

.witteblok
{
  background-color : #FFFFFF;
  color            : #1C5CBD;
  padding          : 20px;
}

html .element.text .oranjeblok ul li:before
{
  color : #FFFFFF !important;
}

.blok.blauweblok
{
  text-align : center;
  padding    : 10px 50px 20px 50px;
}

.scheidingblok .blok
{
  padding : 20px;
}

.scheidingblok .blok:first-child
{
  background-color : #164778;
  border-right     : 4px solid #EE4D34;
  border-left      : none;
}

.scheidingblok .blok
{
  padding          : 20px;
  background-color : #1C5CBD;
  color            : #FFFFFF;
  border-left      : 4px solid #EE4D34;
}

.scheidingblok .blok ul
{
  color : #FFFFFF;
}

.scheidingblok
{
  grid-gap : 0;
}

.blok td {
    padding: 10px;
}

.templates .content_1 .blok {
    box-shadow: 0px 10px 10px #0000002b;
    background-color: #fff;
    border-radius: 10px;
    color: #0d2e65;
}

.templates .content_2 .blok {
    box-shadow: 0px 0px 10px #0000002b;
    padding: 20px;
    border-radius: 10px;
}

.templates .content_2 .blok.table:hover {
  background-color: #1b5cbd;
  color: #fff;
}

.templates .content_1 .blok .tekstblok {
  padding: 20px;
}

.templates .content_1 .grid-blokken-drie {
  gap: 50px;
}

.templates .content_1 .blok img {
    border-radius: 10px 10px 0px 0px;
}

.templates .content_1 .blok:hover {
  background-color: #0D2E65;
  color: #fff;
}

.templates .content_1 h2 {
    padding: 50px 0px 20px 0px;
    text-align: center;
}

.templates .content_2 h2, .templates .content_6 h2 {
   padding-top: 30px;
}
  
.templates .content_1  .grid-blokken {
  padding-bottom: 75px;
}

.templates .content_6  .grid-blokken {
  padding-bottom: 50px;
}

@media (min-width : 992px) {
  .templates .content_1 h2 {
    padding: 120px 0px 50px 0px;
  }
  
  .templates .content_2 h2, .templates .content_6 h2 {
   padding-top: 35px;
  }
  
  .templates #review h2 {
    padding-top: 0px;
  }

  .templates .content_2 {
    margin-bottom: 200px;
  }

  .templates .content_1  .grid-blokken {
     padding-bottom: 120px;
  }

  .templates .content_6  .grid-blokken {
     padding-bottom: 75px;
  }
}

.templates .content_1 a {
  color: #0d2e65;
}

.templates .content_1 a:hover, .templates .content_1 .blok:hover a, .templates .content_1 .blok a.button  {
  color: #fff;
}

.templates .content_2 .grid-blokken.grid-blokken-drie {
    padding: 20px 0px 60px 0px;
}

.templates .review .slider {
    box-shadow: 0px 0px 10px #0000002b;
    padding: 20px;
    border-radius: 10px;
}

.templates .grid-blokken-vier .blok {
    box-shadow: 0px 0px 10px #0000002b;
    border-radius: 10px;
}

.templates .grid-blokken-vier .blok {
    padding-bottom: 10px;
}

.templates .review .slider .navigation {
  display: none;
}

.templates .module.review .review_content {
    font-size: 1.5em;
}

.templates .module.review li .review_rating {
    padding: 10px 0px;
}

.templates form input[type=submit] {
   background-color: #B7EB09 !important;
   border-color: #B7EB09 !important;
   color: #000;
}


/** DESKTOP|TABLET
***********************/

@media (min-width : 1265px)
{
  .element.text table td:first-child
  {
    padding-right : 2em;
  }
}

/** MOBIEL
***********************/

@media (max-width : 1265px)
{
  .element.text table td
  {
    display   : inline-block;
    min-width : 10em;
  }

  .element.text table td ol
  {
    margin : 0;
  }
  
}

@media (max-width : 992px) {
    .crotable table td {
    display: table-cell !important;
    min-width: revert !important;
    max-width: 65px !important;
    font-size: 10px;
    padding: 4px;
    word-break: break-word;
  }
  
  .crotable2 table td {
    display: table-cell !important;
    min-width: revert !important;
    max-width: 61px !important;
    font-size: 11px;
    text-overflow: ellipsis;
    word-wrap: break-word;
    padding: 5px;
  }
}

/** TABLE SCROLL
***********************/

.element.text table.table_scroll td
{
  display : table-cell;
  padding : 0.25em 0.5em;
}

@media (max-width : 768px)
{
  .element.text table.table_scroll
  {
    display     : block;
    max-width   : 90vw;

    overflow-x  : auto;
    white-space : nowrap;
  }

  .element.text table.table_scroll tbody
  {
    display : table;
    width   : 100%;
  }

  .element.text table.table_scroll td
  {
    min-width   : 10em;
    white-space : normal;
  }
  
  .video iframe {
     height: 170px !important;
  }
}

@media (min-width : 769px) and (max-width : 992px)
{
  .element.text table
  {
    margin-bottom : 4em;
  }

  .over_ons #hoofd #TEXT_FZKHWAOR, .over_ons #hoofd #TEXT_QANIACRN
  {
    padding-top : 30px;
  }

  .bgimage
  {
    height : 99vw !important;
  }

  .formulier iframe
  {
    height : 138px !important;
  }

  .content_1 iframe
  {
    height : 172px !important;
  }

  html body #hoofd #TEXT_OQAVNDGJ .home-header .home-header-transparent, html body #hoofd #TEXT_OQAVNDGJ .home-header a.button
  {
    font-size : 0.7em !important;
  }
}

@media (min-width : 1266px)
{
  .element.text td
  {
    max-width : 51.5%;
  }

  .element.text td:last-child
  {
    width : auto;
  }

  #home #hoofd #TEXT_KXQSJJIO tr:nth-child(2) td:nth-child(2)
  {
    background-color : #FFFFFF;
    border-radius    : 10px 0 0 10px;
    height           : 310px;
    padding          : 10px 50px 0 40px;
  }

  #home #hoofd #TEXT_KXQSJJIO tr:nth-child(2) td:nth-child(3)
  {
    background-color : #FFFFFF;
    border-radius    : 0 10px 10px 0;
    padding          : 10px 50px 0 0;
  }

  #home #hoofd #TEXT_KXQSJJIO tr:nth-child(2) td ol li:nth-child(1)
  {
    padding-bottom : 45px;
  }
}

@media (min-width : 769px) and (max-width : 1500px) {
  .templates2 .header .pil.faq {
      background-position: 50% 45%, 10% 14% !important;
      background-size: 85%, auto !important;
  }
}

.diepte-header2 {
    height: 45vw;
    margin-top: 50px;
    background-size: 150% !important;
    background-repeat: no-repeat !important;
    background-position: top !important;
}

  html body.diepteheader3 #TEXT_OQAVNDGJ {
    background-color: #ffffff !important;
  }
  
/** FOLLOW
***********************/

.follow
{
  display : inline-grid;
}

.follow .image
{
  grid-area : follow_image;
}

.follow .arrow
{
  grid-area : follow_arrow;
}

.follow .header
{
  grid-area : follow_header;
}

.follow .content
{
  grid-area : follow_content;
}

.follow .link
{
  grid-area : follow_link;
}

/** DESKTOP|TABLET
***********************/

.follow .image
{
  background    : white;
  border-radius : 1em 0 0 1em;
  padding       : 0.5em 0 0 1em;
}

.follow .header
{
  padding-left : 1em;
  background   : white;
  z-index      : 3;
}

.follow .header h3
{
  font-size     : 1.25em;
  line-height   : 5rem;
  margin        : 0;
  padding-right : 0.5em;
  white-space   : nowrap;
}

.follow .arrow
{
  line-height      : 5rem;
  border-radius    : 0 1em 1em 0;
  box-shadow       : 1px 0 2px rgba(0, 0, 0, 0.2);
  background-color : #FFFFFF;
  z-index          : 2;
}

.follow .arrow .fa
{
  position       : relative;
  height         : 1.5em;
  width          : 1.5em;
  vertical-align : middle;
  border-radius  : 50%;
  background     : #FFFFFF;
}

.follow .arrow .fa:before
{
  font-size  : 2em;
  display    : inline-block;
  margin-top : -0.15em;
}

.follow .link
{
  position : relative;
}

.follow .link a
{
  color            : #FFFFFF;
  text-align       : right;
  line-height      : 5rem;
  display          : block;
  height           : 100%;
  width            : 100%;
  position         : absolute;
  left             : -1em;
  padding-right    : 0.6em;
  background-color : var(--main-contrast-color);
  border-radius    : 0 0.5em 0.5em 0;
}

.follow .content
{
  padding : 2em 0;
}

.reversed-wit
{
  background   : #FFFFFF !important;
  border-color : #FFFFFF !important;
  color        : #EB640A !important;
}

.reversed-wit:hover
{
  background   : #EB640A !important;
  border-color : #EB640A !important;
  color        : #FFFFFF !important;
}

.icons > div
{
  fill   : #FFFFFF;
  height : 75px;
  width  : 75px;
}

.icons
{
  text-align      : center;
  justify-content : center;
  display         : flex;
  align-items     : center;
}

@media (min-width : 1265px)
{
  .follow
  {
    width                 : 32%;
    margin-right          : 1%;

    grid-template-columns : 5em auto 1em 4em;
    grid-template-rows    : 5em auto;
    /* @formatter:off */
    grid-template-areas   :
      "follow_image follow_header follow_arrow follow_link"
      "follow_content follow_content follow_content follow_content"
    ;
    /* @formatter:on */
  }
}

/** MOBIEL
***********************/

@media (max-width : 1265px)
{
  .follow
  {
    width                 : calc(100% + 1em);
    margin-bottom         : 1em;

    grid-template-columns : 5em auto 1em 4em;
    grid-template-rows    : 5em auto;
    grid-template-areas   : "follow_image follow_header follow_arrow follow_link";
  }

  .follow .content
  {
    display : none;
  }

  .follow .image,
  .follow .header,
  .follow .arrow
  {
    border : 1px solid rgba(235, 100, 10, 0.2);
  }

  .follow .image
  {
    border-right : none;
  }

  .follow .header
  {
    border-left  : none;
    border-right : none;
  }

  .follow .arrow
  {
    border-left  : none;
    border-right : 1px solid var(--main-contrast-color);
  }
}

/** STRUCTURE
************************************************/

.element.text.telefoon
{
  grid-area : telefoon;
}

.element.text.groeiscan
{
  grid-area : groeiscan;
}

.element.menu.top
{
  grid-area : menu_top;
}

.element.text.personeel.top
{
  grid-area : personeel_top;
}

.element.text.personeel.bottom
{
  grid-area : personeel_bottom;
}

.element.text.kruimelpad
{
  grid-area : kruimelpad;
}

.element.text.header
{
  grid-area : header;
}

.element.text.main
{
  grid-area : main;
}

.element.text.content_1
{
  grid-area : content_1;
}

.element.text.content_2
{
  grid-area : content_2;
}

.element.text.content_3
{
  grid-area : content_3;
}

.element.text.content_4
{
  grid-area : content_4;
}

.element.text.content_5
{
  grid-area : content_5;
}

.element.text.content_6
{
  grid-area : content_6;
}

.element.text.content_7
{
  grid-area : content_7;
}

.element.text.content_8
{
  grid-area : content_8;
}

.element.text.content_9
{
  grid-area : content_9;
}

.element.text.contact
{
  grid-area : contact;
}

.element.text.footer
{
  grid-area : footer;
}

.element.menu.bottom
{
  grid-area : menu_bottom;
}

/** DESKTOP|TABLET
***********************/

@media (min-width : 768px)
{
  #hoofd
  {
    grid-template-columns : 15% auto 15%;
    /* @formatter:off */
    grid-template-areas   :
      "telefoon telefoon telefoon"
      "groeiscan groeiscan groeiscan"
      "menu_top menu_top menu_top"
      "kruimelpad kruimelpad kruimelpad"
      "personeel_top personeel_top personeel_top"
      "personeel_bottom personeel_bottom personeel_bottom"
      "header header header"
      ". main ."
      "content_1 content_1 content_1"
      "content_2 content_2 content_2"
      "content_3 content_3 content_3"
      "content_4 content_4 content_4"
      "content_5 content_5 content_5"
      ". content_6 ."
      "content_7 content_7 content_7"
      "content_8 content_8 content_8"
      "contact contact contact"
      "content_9 content_9 content_9"
      "footer footer footer"
    ;
    /* @formatter:on */
  }

  [data-responsive] #hoofd > .element.text
  {
    padding : 0 15%;
  }

  #hoofd > .element.text > :first-child
  {
    margin-top : 2rem;
  }

  #hoofd > .element.text .interface,
  #hoofd > .element.text.telefoon > :first-child,
  #hoofd > .element.text.groeiscan > :first-child
  {
    margin-top : 0;
  }

  .follow .arrow, .follow .link
  {
    display : none;
  }

  .follow .content
  {
    padding : 0 30px 40px 62px;
  }

  #hoofd > .element.text.main,
  #hoofd > .element.text.content_6
  {
    padding : 0 2em;
    z-index : 100;
  }

  .bgblok
  {
    justify-content : flex-end;
    display         : flex;
    max-width       : 1295px;
  }

  .formulier
  {
    width : 500px;
  }

  html body #hoofd #TEXT_MAKKALWZ .module.kruimelpad
  {
    padding : 0 5vw 0 14.5vw !important;
  }
  
  .autoriteitblok .pil.faq {
    width: 15vw;
    border-bottom: 2px solid var(--main-contrast-color);
  }

  /** ROUND
  ***********************/
  .round #hoofd > .element.text.header,
  .round #hoofd > .element.text.content_5
  {
    padding-bottom : 4.5em;
  }

  .round #hoofd > .element.text.main
  {
    margin-top    : -4em;
    padding       : 1em 2em 2em 2em;
    border-radius : 1em;
    z-index       : 300;
  }

  #home #hoofd > .element.text.main
  {
    padding : 0 2em !important;
  }

  .round #hoofd > .element.text.content_1
  {
    margin-top  : -4em;
    padding-top : 4.5em;
  }

  .round #hoofd > .element.text.header, .round #hoofd > .element.text.content_5
  {
    padding-bottom : 7.5em;
  }

  .omcases #hoofd > .element.text.content_5
  {
    padding-bottom : 17.5em;
  }

  .round #hoofd > .element.text.main
  {
    padding : 2em 2em 3em 2em;
  }

  /** DIEPTEPAGINA
  ***********************/
  .dieptepagina #hoofd #TEXT_UPBNBZMJ, .blog #hoofd #TEXT_UPBNBZMJ
  {
    background-color : #0D2D65;
  }

  .diepteheader #hoofd #TEXT_UPBNBZMJ
  {
    background-color : #1C5CBD;
  }

  .dieptepagina #hoofd > .element.text.content_6, .blog #hoofd > .element.text.content_6
  {
    padding-left  : 0;
    padding-right : 0;
  }

  .dieptepagina #hoofd > .element.text.kruimelpad, .blog #hoofd > .element.text.kruimelpad
  {
    padding-top    : 40px;
    padding-bottom : 0;
  }

  .dieptepagina #hoofd > .element.text.header, .blog #hoofd > .element.text.header
  {
    padding-top : 0;
  }

  .dieptepagina #hoofd > .element.text.content_1
  {
    padding-top    : 7.5em;
    padding-bottom : 3.5em;
  }

  .blog #hoofd > .element.text.content_1
  {
    padding : 1% 15% 0 15%;
  }

  .dieptepagina #hoofd > .element.text, .blog #hoofd > .element.text, .diepte-header
  {
    padding : 2% 15% 4% 15%;
  }
  
  .templates2 #hoofd > .element.text.header {
      padding : 2% 15% 4% 15% !important;
  }

  .artikel #hoofd > .main
  {
    padding : 2% 0 4% 0 !important;
  }

  .diepteheader #hoofd > .element.text.header
  {
    padding    : 0;
    margin-top : -93px;
  }

  .diepteheader #hoofd > .element.text.kruimelpad
  {
    padding-top      : 40px;
    background-color : transparent !important;
    padding-bottom   : 0;
    z-index          : 800;
  }

  .diepte-header
  {
    height      : 30vw;
    align-items : center;
    display     : flex;
    margin-top  : 0 !important;
  }
  
  .diepte-header2 {
    height: 27vw;
    margin-top: 40px !important;
    background-size: 100% !important;
    background-position: top !important;
  }
  
  .diepte-pillar
  {
    height : 67vw;
  }

  /** HOME
 ***********************/
  #home #hoofd #TEXT_DUYBKAVJ,
  html #home #hoofd #TEXT_QCMIVPJU
  {
    padding-top    : 120px;
    padding-bottom : 120px;
  }

  #home #hoofd #TEXT_QANIACRN
  {
    padding-top : 130px;
  }

  #home #hoofd #TEXT_KXQSJJIO
  {
    z-index : 201;
  }

  #home #hoofd #TEXT_DUYBKAVJ
  {
    margin-top : -90px;
  }
}

.over_ons #hoofd #TEXT_DUYBKAVJ, .over_ons #hoofd #TEXT_MAKKALWZ
{
  background-color : #0D2E65;
}

.over_ons #hoofd #TEXT_PXPPLUKY
{
  background-color : transparent;
  color            : #1C5CBD;
  height           : 580px !important;
}

.over_ons #hoofd #TEXT_FZKHWAOR
{
  background-color : #1C5CBD;
  color            : #FFFFFF;
  margin-top       : -250px;
  z-index          : 99;
  display          : block !important;
}

.over_ons .module.personeel .visible .scroller .row
{
  color : #FFFFFF;
}

.formulierup > ul
{
  margin-left : 20px;
}

html .overonspagina #hoofd #TEXT_PXPPLUKY
{
  background-color : #2B5CBC;
}

.templatepage .content_2 {
    margin-bottom: 50px;
}

.templatepage #hoofd > .element.text.content_5 {
    padding-bottom: 7.5em;
    padding-top: 4.5em;
}

@media (min-width : 1450px)
{
  .formulierup
  {
    margin-top : -120px !important;
  }

  .bgblok
  {
    max-width : 1580px;
  }
}

.midden, .module.case .visible .content
{
  text-align : center;
}

.middenuitlijling
{
  align-items   : center;
  align-content : center !important;
}

.topuitlijning .blok
{
  display       : flow-root;
  align-content : flex-end;
}

.blokform
{
  padding : 50px;
}

.dieptepagina #hoofd > .content_4, .blog #hoofd > .content_4
{
  padding : 0 !important;
}

/** Tijdlijn
***********************/
.tijdlijncontainer
{
  display         : flex;
  justify-content : space-around;
  align-items     : center;
  width           : 100%;
  height          : 100px;
}

.tijnlijnpaddingcontainer
{
  padding : 30px 0;
}

.tijdlijnbold
{
  margin-top    : 250px;
  text-align    : center;
  margin-bottom : 80px;
}

.tijdlijn-text2
{
  min-height : 90px;
}

.werkwijzeblok
{
  position : relative;
}

.werkwijzeimage
{
  height : 80px;
}

.werkwijzeButton
{
  display         : flex;
  justify-content : center;
}

.werkwijzeTab
{
  width            : 20px;
  height           : 20px;
  background-color : #FFFFFF;
  position         : relative;
  border-radius    : 50%;
  border           : 4px solid #005CCB;
}

.activeWerkwijze
{
  background-color : #FF4F00 !important;
}

.tijdlijnblok
{
  width       : 100%;
  height      : 100%;
  display     : flex;
  align-items : flex-end;
  bottom      : 6%;
  position    : relative;
}

.tijdlijn
{
  width            : 100%;
  height           : 5px;
  background-color : #2E5CCB;
}

.tijdlijn-text:after
{
  content          : '';
  display          : block;
  position         : absolute;
  top              : -.8em;
  left             : 1.2em;
  height           : 1.6em;
  width            : 1.6em;
  transform        : rotate(45deg);
  background-color : #005CCB;
}

.tijdllijnlast:after
{
  right : 1.2em;
  left  : auto;
}

.tijdlijn-text
{
  position         : absolute;
  margin-top       : 2em;
  background-color : #005CCB;
  min-height       : 140px;
  padding          : 25px;
  color            : #FFFFFF;
  max-width        : 350px;
  width            : 100%;
}

.tijdlijnLast-text:after
{
  left  : auto;
  right : 1.2em;
}

.tijdlijnRuimte
{
  margin-top : 350px;
}

.tijnlijnpaddingcontainer
{
  padding : 30px 0;
}

.tijdlijnbold
{
  margin-top    : 250px;
  text-align    : center;
  margin-bottom : 80px;
}

.tijdlijnLast-text
{
  margin-left : -290px;
}


/** Ref blokken
***********************/

.refblokken
{
  display         : flex;
  flex-flow       : row wrap;
  justify-content : center;
  margin-bottom   : 2em;
}

.refblokken > div
{
  display   : flex;
  flex-flow : column nowrap;
  width     : 100%;
  margin    : 15px;
  min-width : 290px;
}

@media (min-width : 768px)
{
  .refblokken > div
  {
    width : 30%;
  }
}

.refblokken .ref-text
{
  position         : relative;
  margin-top       : 2em;
  background-color : #1C5CBD;
  min-height       : 250px;
  padding          : 25px;
  color            : #FFFFFF;
}

@media (min-width : 768px)
{
  .refblokken > div
  {
    width : 30%;
  }
}

.refblokken .ref-text img
{
  max-height : 30px;
}

.refblokken .ref-text:after
{
  content          : '';
  display          : block;
  position         : absolute;
  bottom           : -.8em;
  left             : 1.5em;
  height           : 1.6em;
  width            : 1.6em;
  transform        : rotate(45deg);
  background-color : #1C5CBD;
}

a.toggle
{
  color       : #DD6B37 !important;
  font-weight : 600;
}

a.toggle:hover
{
  color : #FFFFFF !important;
}

.refblokken .ref-pers
{
  display    : flex;
  flex-flow  : row nowrap;
  margin-top : 1.5em;
}

.refblokken .ref-pers img
{
  display      : block;
  margin-right : 10px;
  max-height   : 80px;
}

.refblokken .ref-pers > div
{
  width       : 70%;
  display     : flex;
  flex-flow   : column nowrap;
  margin-left : .5em;
}

.refblokken .ref-pers > div p:nth-child(1)
{
  color : #000000;
}

.refblokken .ref-pers > div p:nth-child(2)
{
  color : #000000;
}

.ref-text a:hover
{
  color : #FFFFFF;
}

.ref-pers img
{
  border-radius : 100%;
}

.bgimage
{
  background-position : center;
  background-repeat   : no-repeat;
  background-size     : cover;
  height              : 53vw;
  margin-top          : 0 !important;
}


html #home #hoofd #TEXT_OQAVNDGJ
{
  background          : url(/websites/1772/images/headerfototp.jpg);
  background-size     : cover;
  height              : 67vh !important;
  justify-content     : center;
  align-items         : center;
  display             : flex;
  background-position : center;
}

.pngimage
{
  background-position : top;
  background-size     : 50%;
  background-color    : #1C5CBD;
}

.formulier
{
  background-color : #EB640B;
  color            : #FFFFFF;
  padding          : 20px;
  margin-top       : 0;
}

.formulier ul
{
  padding-left : 0 !important;
}

.formulier form label[data-error]:before
{
  color : var(--main-contrast-color);
}

.portfolio #hoofd .content_2
{
  padding : 0 !important;
}

.portfolio form input,
.portfolio form select,
.portfolio form textarea
{
  background-color : #FFFFFFCF;
}

form input,
form select
{
  height        : 3em;
  border-radius : 5px;
  color         : #FFFFFF;
}

form select option
{
  color : #000000;
}

form textarea
{
  height        : 5em;
  border-radius : 5px;
  color         : #FFFFFF;
}

.element.text.content_2 form input,
.element.text.content_2 form select,
.element.text.content_2 form textarea,
.element.text.content_2 form input[type=submit]:hover
{
  color : #0D2E65;
}

.element.text.content_2 form input[type=submit]
{
  color : #FFFFFF;
}

form label
{
  margin-top : 7px;
}

form input[type=submit]
{
  background    : #0D2D65 !important;
  margin-top    : 20px;
  text-align    : center;
  border-radius : 20px;
  border        : 1px solid #0D2D65 !important;
  color         : #FFFFFF;
}

form input[type=submit]:hover
{
  background : transparent !important;
  color      : #0D2D65;
  border     : 1px solid #DD6B36;
}

.form ul li:last-child
{
  text-align : center;
}

html .element.text ul li:before
{
  top         : 0.1rem !important;
  color       : #EB640A !important;
  content     : "\f058" !important;
  font-family : "FontAwesome", "sans-serif" !important;
  font-size   : 1.5em !important;
  left        : -1rem !important;
  position    : relative !important;
}

form li:before
{
  display : none !important;
}

.vacaturesblokken .pil.faq
{
  width : 100%;
}

html .opsomming .element.text .blok:first-child ol li:before,
html .opsomming .element.text .blok:first-child ul li:before
{
  content : "\f0a9" !important;
  color   : #EB6536 !important;
  left    : -2.5rem !important;
}

.contactform form textarea,
.contactform form input,
.contactform form select
{
  color : #000000;
}

form input[type=submit]
{
  color : #FFFFFF;
}

div#TEXT_MAKKALWZ
{
  padding : 0 !important;
}

.codeblock {
    background-color: #363131;
    padding: 10px 20px;
    color: #fff;
}

.linkscompact {
 padding: 75px 0px;  
}

.linkscompact p {
    text-align: left;
}

.linkscompact h2 {
    text-align: left !important;
    padding-bottom: 0px !important;
    padding-top: 25px !important;
}

/** MOBIEL
***********************/

@media (max-width : 768px)
{
  #hoofd
  {
    grid-template-columns : auto;
    /* @formatter:off */
    grid-template-areas   :
      "telefoon"
      "groeiscan"
      "kruimelpad"
      "header"
      "personeel_top"
      "personeel_bottom"
      "main"
      "content_1"
      "content_2"
      "content_3"
      "content_4"
      "content_5"
      "content_6"
      "content_7"
      "content_8"
      "contact"
      "content_9"
      "footer"
      "menu_bottom"
    ;
    /* @formatter:on */
  }

  #home #hoofd > .element.text.main
  {
    padding-top : 1em;
  }

  .grid-blokken .blok
  {
    padding : 10px !important;
  }

  .geenpadding .blok
  {
    padding : 3px !important;
  }

  #home #hoofd > .element.text.main
  {
    background-color : var(--main-light-color);
    margin-bottom    : 50px;
  }

  .blokform
  {
    padding : 20px;
  }

  #home #hoofd #TEXT_DUYBKAVJ, html #home #hoofd #TEXT_QCMIVPJU
  {
    padding-top    : 60px;
    padding-bottom : 60px;
  }

  #home #hoofd #TEXT_QANIACRN
  {
    padding-top : 110px;
  }

  .review .slider .control > *
  {
    font-size     : 1.5em;
    margin-bottom : 30px;
  }

  .module.personeel .navigation
  {
    font-size : 3em;
  }

  html h2, html h1
  {
    font-size   : 2em;
    line-height : 1.2em;
  }

  html body[data-responsive] #hoofd > .text
  {
    padding : 0 2em;
  }

  .marquee h2
  {
    font-size : 1.2em;
  }

  .marquee
  {
    height      : 2em;
    padding-top : 2px;
  }

  .content_3 tr
  {
    display        : flex;
    flex-direction : column-reverse;
  }

  .artikelimage
  {
    margin-bottom : -14px;
    margin-top    : 20px;
  }

  figure.pil .content
  {
    display : none;
  }

  html a.button
  {
    width : 95%;
  }

  .review
  {
    margin-top : 32px;
  }

  #home div#TEXT_KXQSJJIO,
  #home div#TEXT_OQAVNDGJ
  {
    padding-top : 0 !important;
  }

  #home div#TEXT_KXQSJJIO
  {
    padding-bottom : 0 !important;
  }

  .review .circle.content
  {
    padding : 2em 1em;
  }

  html body[data-responsive] #hoofd > .text
  {
    padding : 2em 2em;
  }

  .content_2 h2
  {
    margin-top    : 0 !important;
    margin-bottom : 30px !important;
  }

  div#TEXT_MAKKALWZ
  {
    padding-bottom : 0 !important;
  }

  .element.kruimelpad::before, .element.kruimelpad::after
  {
    display : none;
  }

  .content_2 .mobielonly .button
  {
    margin-top    : 20px;
    margin-bottom : -10px !important;
  }

  .diepteheader #hoofd > .element.text.header
  {
    padding    : 0;
    margin-top : -70px;
  }

  .diepte-header
  {
    padding : 69px 18px 33px 18px;
  }

  .bgimage
  {
    height : 117vw;
  }

  .vacature .formulier iframe
  {
    height : 101px;
  }

  .formulier iframe
  {
    height : 76px;
  }

  .over_ons .formulier iframe
  {
    height : 82px;
  }

  .tijdlijn-text
  {
    width     : 70%;
    left      : 50%;
    transform : translate(-50%, 10px)
  }

  .tijdlijnLast-text:after, .tijdlijn-text:after
  {
    display : none;
  }

  .tijdlijn-text
  {
    margin-top : 0.5em;
  }

  .tijdlijnblok
  {
    bottom : 16%;
  }

  .werkwijzeimage
  {
    height : 60px;
  }

  .tijdlijnRuimte
  {
    margin-top : 370px;
  }

  .tijdlijnLast-text
  {
    margin-left : 0;
  }

  html body #hoofd #TEXT_HTWBGNZH
  {
    text-align : center;
  }

  html body #hoofd #TEXT_ATGWEKKU
  {
    padding-left : 10px;
  }

  html #home #hoofd #TEXT_OQAVNDGJ
  {
    height : auto !important;
  }

  html body #hoofd #TEXT_OQAVNDGJ .home-header
  {
    padding : 30px 0 20px 0;
  }

  html .element.text ol li:before
  {
    left : -2rem;
  }

  html #home #hoofd #TEXT_CPNLQEQB
  {
    padding-bottom : 0;
  }

  html body #hoofd #TEXT_PXPPLUKY
  {
    padding-top : 0;
  }

  html body #hoofd #TEXT_MAKKALWZ .module.kruimelpad
  {
    margin : 0.6em 0 0.15em;
  }

  .diepte-pillar
  {
    height : auto;
  }

  .module.artikel .content
  {
    padding : 0 8px;
  }
  
}

/** MENU
************************************************/

.element.menu
{
  display : grid;
}

.element.menu.top .website-menu-logo
{
  grid-area : top_logo;
}

.element.menu.top .website-menu-scan
{
  grid-area : top_scan;
}

.element.menu.top .website-menu-menu
{
  grid-area : top_menu;
}

.element.menu.bottom .website-menu-logo
{
  grid-area : bottom_logo;
}

.element.menu.bottom .website-menu-phone
{
  grid-area : bottom_phone;
}

.element.menu.bottom .website-menu-menu
{
  grid-area : bottom_menu;
}

.element.menu.bottom .luna-scrollbar-track
{
  grid-area : luna_scrollbar;
}

.vacature #hoofd > .main
{
  padding-bottom : 0 !important;
}

html body #hoofd #MENU_QRQHGNSB ul li a:hover,
html body #hoofd #MENU_QRQHGNSB ul li.active > a
{
  color : #EB640B;
}


html .element.text .formulier ul li:before
{
  color : #B7EB09 !important;
}

html .element.text ul.groeneusps li:before
{
  color : #B7EB09 !important;
}


html .element.text .formulier a
{
  color : #0D2E65;
}

html .element.text .formulier a:hover
{
  color : #1C5CBD;
}

form input, form select, form textarea
{
  color : #0D2D65;
}

/** LAAT ELEMENT NIET ZIEN ALS HET LEEG
************************************************/

.element.text:empty
{
  display : none !important;
}

html body.over_ons div#TEXT_QCMIVPJU
{
  display : block !important;
}

@media (max-width: 991px) {
  .element.menu label.bar_label {
      color: #353942;
      width: 3em;
      height: 100%;
      min-height: 50px;
      text-align: center;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      user-select: none;
  }
  
  .templates2 .grid-blokken-twee  p.home-header-title {
      margin-top: 70px;
  }
  
  .templates2 .header .grid-blokken-twee .blok.faq.pil {
      margin-top: -25px;
  }
}

@media (min-width: 991px) and (max-width: 1364px) {
  .element.menu ul.responsive {
      display: block;
      position: inherit;
  }
  
  .element.menu ul.responsive li {
      display: inline-block;
  }
  
  .element.menu.top .website-menu-menu {
      margin-left: -45px;
  }
  
  html body #hoofd #MENU_QRQHGNSB ul li a {
      padding-top: 1em;
  }
  
  .diepte-pillar {
    height: 50vw !important;
  }
  
  .pillarblok {
    width: 340px;
  }
  
  .refblokken > div {
    min-width: 280px;
  }
  
  .grid-blokken-vier {
    grid-template-columns: 1fr 1fr;
  }
  
  #home .content_3 td {
    vertical-align: middle;
  }
  
  #home .content_3 td:last-child {
    padding-left: 20px;
  }
  
  #home .content_6 .review {
    padding-left: 60px;
  }
  
  .content_1 iframe {
    height: 159px !important;
  }

}

@media (min-width: 992px) {
.element.menu label {
    opacity: 0;
    position: absolute;
}
}

/** DESKTOP
***********************/

@media (min-width : 992px)
{
  .element.menu.top
  {
    grid-template-columns : 29% 53% auto;
    grid-template-areas   : "top_logo top_menu top_scan";
  }

  .element.menu.bottom
  {
    display : none;
  }

  html body #hoofd #TEXT_MAKKALWZ
  {
    padding-top : 20px;
  }
}



/** MOBIEL|TABLET
***********************/

@media (max-width : 991px)
{
  .element.menu.bottom
  {
    grid-template-columns : 30% auto 30%;
    grid-template-rows    : auto 0.5em;
    grid-template-areas   : /* @formatter:off */
    "bottom_phone bottom_logo bottom_menu"
    "luna_scrollbar luna_scrollbar luna_scrollbar";
    /* @formatter:on */
  }

  .element.menu.top
  {
    display : none;
  }

  .marquee
  {
    overflow    : hidden;
    position    : relative;
    display     : flex;
    align-items : center;
  }
  
  .templatepage .header .blok {
    padding-left: 35px;
    padding-right: 35px;
  }
  
  .templatepage .donkergrid .blok, .templatepage .witgrid .blok, .templatepage .witblok .blok {
    padding: 20px !important;
  }
  
  .templatepage #hoofd > .element.text.content_5 {
    padding-top: 60px !important;
    padding-bottom: 70px !important;
  }
  
}

.abtest {
  display: none;
}

.calendyform {
  display: none;
}

.gratisgroeiscan form input[type=submit] { 
  background: #b7eb0a !important; 
  border: 1px solid #b7eb0a !important; 
  color:#000; 
  font-weight: 600;} 
  
.gratisgroeiscan form#simplicate { 
  background-color: #eb640b; 
  padding: 9px 30px 20px 6px;
}

.gratisgroeiscan form label[data-error]:before
{
  color: #b7eb0a;
}

form input.error, form select.error, form textarea.error
{
  color: black;
  background-color: #b7eb0a;
}

span.terugnaarboven {
    text-decoration: underline;
    padding-right: 10px;
}

.element.text.footer .socialmedia {
    margin-top: 5px;
}

.blok.autoriteitblok {
    margin-top: 50px;
    margin-bottom: 50px;
}

.donkergrid .blok {
    background-color: #0d2e65;
    padding: 40px 40px;
    color: #fff;
    box-shadow: 0px 0px 10px #0000002b;
    padding: 20px;
    border-radius: 10px;
}

.lichtgrid .blok {
    background-color: hsl(215.93deg 75% 42.35% / 17%);
    color: #000;
}

.lichtblauw .blok {
    background-color: #1C5CBD;
}

.lichtgrid .blok:hover {
    color: #fff;
}

.casesgrid .blok:hover {
    background-color: #1C5CBD;
    color: #fff;
}

.donkergrid .blok img {
  height: 60px; 
}

.witblok .blok {
    background-color: #fff;
    box-shadow: 0px 0px 10px #0000002b;
    border-radius: 10px;
    padding: 20px;
    color: #0d2e65;
}

.witgrid .blok img {
    height: 60px; 
}

.witgrid .blok h3 {
  margin-top: 15px;
}

.donkergrid .blok:hover {
    background-color: #1C5CBD;
}

.lichtehover .blok:hover {
   background-color: #1c5cbd9e;
}

.grid-blokken-vijf .blok:hover {
   background-color: #1b5cbe1a;
}

.witblok .blok:hover {
    background-color: hsl(0deg 0% 100% / 43%);
    color: #fff;
}

.witgrid .blok:hover {
    background-color: hsl(215.93deg 75% 42.35% / 17%);
    color: #0D2E65;
}

.lichtblauw .blok:hover {
    background-color: hsl(215.93deg 75% 42.35% / 17%);
    color: #000;
}

.donkerlichtgrid .blok:hover {
  background-color: #0D2D65;
}

.grid-blokken.grid-blokken-twee.donkergrid.leftuitlijning .blok {
    justify-content: left;
}

@media (min-width : 1500px)
{
  ul.usps
  {
    padding : 0 8vw 0 9vw !important;
  }

  html body #hoofd #TEXT_MAKKALWZ .module.kruimelpad
  {
    padding : 0 12vw 0 15vw !important;
  }

  .content_1 iframe
  {
    height : 218px !important;
  }
}