@import url('../../template/css/style.css?v=204');
@import url('../../template-default/css/style.css');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700&display=swap');

/* Algemeen */

html {scroll-behavior: smooth; scroll-padding-top: 150px;}

h2 { font-size: 45px; font-weight: 300;}
h3 {font-size: 27px;}

.bg-primary {background-color: #f16f23 !important;}
.bg-primary h2 {color: var(--white);}

.container.small {max-width: 1260px;}

.aoc {position: relative;}
.aoc img {position: absolute; left: 0; bottom: 0px; max-width: 120px;}

/* Banner */

.container-fluid.header {}
.container-fluid.header .container {}
.container-fluid.header .container .text-overlay {width: inherit; max-width:inherit; display: flex; justify-content: end;}
.container-fluid.header .container .text-overlay h1 {font-weight: 300;}
.container-fluid.header .container .text-overlay h1,
.container-fluid.header .container .text-overlay h2 {position: absolute; top: unset; bottom: 12px; text-transform: none; color: var(--white); padding: 20px 50px; background-color: #f16f23; text-shadow: none; }

/* Content */
.greybar {}
.row.greybar:before {top: -150px; height: 100%; transform: skew(0deg);}

.block.product.openjobs {gap: 24px 0;}
.block.product.openjobs a {text-decoration: none;}
.block.product.openjobs .item {height: 100%; border: 1px solid #E3E3E3; }
.block.product.openjobs .item .image {}
.block.product.openjobs .item .image img {width: 100%;}
.block.product.openjobs .item .content {padding: 20px 40px;}
.block.product.openjobs .item .content h3 {margin-bottom: 7px;}
.block.product.openjobs .item .content .text {font-size: 1rem; color: black; padding-bottom: 20px; }
.block.product.openjobs .item .content .text span {color: #f16f23; margin-right: 25px;}
.block.product.openjobs .item .content .text span::before{content: ''; font-family: "Font Awesome 5 Pro"; margin-right: 4px; display: inline-block; width: 20px; height: 20px;}
.block.product.openjobs .item .content .text span.time {}
.block.product.openjobs .item .content .text span.time::before {content: '\f017';}
.block.product.openjobs .item .content .text span.study {}
.block.product.openjobs .item .content .text span.study::before {content: '\f19d';}
.block.product.openjobs .item .content .btn { margin-bottom: 20px; text-transform: none; padding: 12px 30px; background-color: #f16f23; border-color: #f16f23; font-weight: 700;}
.block.product.openjobs .item .content .btn:hover {background-color: #ffffff; border-color: #f16f23; color: #f16f23;}

.row:has(.block.html.alljobs) .row {margin-bottom: 0;}

.block.html.alljobs {text-align: center; margin-top: 24px;}
.block.html.alljobs .btn {position: relative; font-size: 18px; font-weight: 700; padding: 15px 60px; border-color: black;}
.block.html.alljobs .btn::after {content: attr(data-amount); color: var(--white); display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; position: absolute; top: -20px; right: 20px; background-color: #f16f23; border-radius: 100%;}

.row:has(.block.slider ) {margin-top: 0;}

.block.html.video {}
.block.html.video .overlay {width: fit-content; position: relative;}
.block.html.video .overlay::before {content: '\f144'; font-size: 75px; color: #f16f23; font-family: "Font Awesome 5 Pro"; font-weight: 700; position: absolute; width: 100%; height: 100%; pointer-events: none; display: flex; justify-content: center; align-items: center; }

body > .content .row:has(.block.html.openjob) {margin-top: 0; margin-bottom: 0;}

.block.html.openjob {}
.block.html.openjob .bar {position: relative;}
.block.html.openjob .bar .image {position: relative;}
.block.html.openjob .bar .image::before {content: ''; position: absolute; width: 100%; height: 100%; inset: 0; background-color: black; opacity: 0.4; pointer-events: none; }
.block.html.openjob .bar .image img {width: 100%;}
.block.html.openjob .bar .content {position: absolute; width: 100%; height: 100%; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;}
.block.html.openjob .bar .content h2 {font-size: 45px; font-weight: 300; color: var(--white); padding: 20px 40px; background-color: #f16f23;}
.block.html.openjob .bar .content .text {color: var(--white); max-width: 675px;}
.block.html.openjob .bar .content button {border: 1px solid var(--white); padding: 10px 40px; background-color: transparent;}
.block.html.openjob .bar .content button:hover {background-color: var(--white); color: #f16f23;}

.modal-dialog {max-width: 950px;}
.modal-content {background-color: #f16f23;}
.modal-content .row:has(form) {margin: 0;}

.block.html.form-title h2 {font-weight: 300; margin-top: 24px;}

.block.form form {}
.block.form form .form-group {border: 1px solid var(--white); margin: 0;}
.block.form form .form-group .row {height: 100%;}
.block.form form .form-group .form-control {height: 100%; padding: 10px 24px; border: none; color: var(--white); background-color: hsl(33, 93%, 54%); border-radius: 0;}
.block.form form .form-group .form-control::placeholder {font-size: 1tem; color: var(--white);}
.block.form form .form-group .btn {padding: 9px 20px; min-width: 160px; background-color: #280b00000; color: var(--white); border-color: #280b00000; transition: all 0.5s;}
.block.form form .form-group .btn:hover {background-color: transparent; color: #280b00000; border-color: #280b00000;}
.block.form form .form-group:not(.mod_block):not(:has(.btn)) {display: none;}

.block.form form .form-group:has(input[type='file']) {padding: 10px 32px;}
.block.form form .form-group:has(input[type='file']) .form_field_entry { display: flex; flex-wrap: nowrap; flex-direction: column-reverse;}
.block.form form .form-group:has(input[type='file']) .form_field_entry .form-control { padding: 0;}
.block.form form .form-group:has(input[type='file']) .form_field_entry .form-control #file-upload-button {background-color: var(--white);}
.block.form form .form-group:has(input[type='file']) .form_field_entry span {color: var(--white);}

.block.html:has(.block.form) {padding: 40px 140px;}
.block.html .block.form form .row {margin-top: 0; margin-bottom: 0;}

/* Grid */
.block.form form {
  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-gap: 20px;
  padding: 0;
  border-radius: 0;
}

.block.form form  {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 18px 18px 18px 18px 18px 18px;
  gap: 15px 15px;
  grid-auto-flow: row;
  grid-template-areas: 
  "a a a a b b b b c c c c"
  "a a a a b b b b c c c c"
  "d d d d d d d d c c c c"
  "d d d d d d d d f f f f"
  "e e e e e e e e f f f f"
  "e e e e e e e e f f f f"
  "z z z z z z z z z z z z"
  "g g g g g g g g g g g g"
  "g g g g g g g g g g g g"; 
}

.block.form form .form-group.name {grid-area: a;}
.block.form form .form-group.lastname {grid-area: b;}
.block.form form .form-group.email {grid-area: d;}
.block.form form .form-group.phone {grid-area: e;}
.block.form form .form-group.cv {grid-area: c;}
.block.form form .form-group.motivation {grid-area: f;}
.block.form form .form-group:not( .g-recaptcha):has(.btn) {grid-area: g; border: none;}
.block.form form .form-group:has(.g-recaptcha) {grid-area: z; border: 0;}
.block.form form .form-group:has(.g-recaptcha) > div {padding: 0;}
.block.form form .form-group:has( .g-recaptcha):not( .btn) {display: block;}

body:not(.jobpage) .subfooter {display: none;}


/* Vacature doorklik */
body:has(.job-page) .subfooter {display: block;}

body:has(.job-page) .container-fluid.content > .row {margin-top: 0; margin-bottom: 0;}
body:has(.job-page) .container-fluid.content > .row > .container > .row {margin-top: 0; margin-bottom: 0;}
body:has(.job-page)>.content .row:has(.block.form) {margin-top: 0; margin-bottom: 0;}

.block.product.openjobs:has(.job-page) {margin-top: 0; margin-bottom: 0;}

.job-page {}
.job-page h2 {font-weight: 500;}

.job-page .text {font-size: 1rem; font-weight: 500; line-height: 30px; color: #280b00000; margin-top: 25px; margin-bottom: 25px;}
.job-page .text ul {padding-left: 0;}
.job-page .text ul li {list-style: ''; display: flex; align-items: baseline; }
.job-page .text ul li::before {content: ''; display: inline-block; width: 10px; min-width: 10px; height: 10px; min-height: 10px; background-color: #f16f23; border-radius: 100%; margin-right: 20px;}
.job-page .text .btn { font-weight: 700; text-transform: none; background-color: #f16f23; border-color: #f16f23; color: var(--white);}
.job-page .text .btn:hover {background-color: var(--white); color: #f16f23;}

@media only screen and (max-width: 1599px) { 
  .block.product.openjobs .item .content {display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 275px);} 

}

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

  body > .content .row.greybar {padding: 0;}
  .block.product.openjobs .item .content {height: calc(100% - 235px);} 
  .block.product.openjobs .item .content .text {min-height: 208px;}

  h2 {font-size: 32px;}
  .block.html.openjob .bar .content h2 {font-size: 32px;}

}

@media only screen and (max-width: 1199px) {
  
  .container-fluid.header .container .text-overlay h1 {font-size: 32px;}
  .container-fluid.header .container .text-overlay h2 {font-size: 32px;}

  .block.product.openjobs .item .content {height: calc(100% - 195px);} 

  .block.html.openjob .bar .image img {min-height: 320px; object-fit: cover;}


}

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

  .block.product.openjobs {gap: 24px 0;}
  .block.product.openjobs .item .content {height: fit-content;} 
  .block.product.openjobs .item .content .text {min-height: unset;}

  .block.html.openjob .bar .content h2 {font-size: 32px;}

  .block.form form { display: flex; flex-direction: column; padding-bottom: 12px;}

  .job-page .text {margin-top: 12px; margin-bottom: 12px;}


}

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


  .container-fluid.header .container .text-overlay h1  {font-size: 24px;}
  .container-fluid.header .container .text-overlay h2 {font-size: 22px;}

  .block.slider .item {margin-bottom: 24px;}

  .block.html:has(.block.form) {padding: 20px;}

  .aoc img {max-width: 80px;}
  
}

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

  .container-fluid.header .container .text-overlay h1  {font-size: 22px;}
  .container-fluid.header .container .text-overlay h2 {font-size: 18px;}

  
  .row.greybar:before {top: -75px;}
  
  .block.html.openjob .bar .content .text {padding: 0 12px;}
  
  .modal button.btn.btn-primary {width: fit-content; padding: 0; padding-right: 15px; text-align: end;}
  
  body:has(.job-page) h2 {font-size: 18px;}
  body:has(.job-page) .col-sm-6 img { margin-bottom: 12px;}

  .aoc img {max-width: 50px !important;}


}

@media only screen and (max-width: 480px) {
 
  .container-fluid.header .container .text-overlay h1  {font-size: 18px;}
  .container-fluid.header .container .text-overlay h2 {font-size: 18px;}

}



@media only screen and (min-width: 1921px) {

}


/* #Tablet (Landscape)
================================================== */
@media only screen and (min-width: 959px) and (max-width: 1220px){

}

/* Tablet (Portrait)
================================================== */
@media only screen and (min-width: 768px) and (max-width: 959px) {


}

/* #Mobile (Landscape)
================================================== */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobiel (Portrait)
================================================== */
@media only screen and (max-width: 479px) {

}

@media only screen and (min-width: 991px) {
  .w-lg-95 {max-width: 95%;}
  .w-lg-80 {max-width: 80%;}
  .w-lg-75 {max-width: 75%;}
}

/* container vars */
@media only screen and (min-width: 1400px) {
  :root {
      --container-width: 1380px;
  }
.container {max-width: 1320px;}
}

@media only screen and (min-width: 1600px) {
  :root {
      --container-width: 1580px;
  }
  .container {max-width: 1580px;}
}

@media only screen and (max-width: 1400px) {
  :root {
      --container-width: 1140px;
  }
}

@media only screen and (max-width: 1200px) {
  :root {
      --container-width: 960px;
  }
}

@media only screen and (max-width: 991px) {
  :root {
      --container-width: 720px;
  }
}

@media only screen and (max-width: 767px) {
  :root {
      --container-width: 540px;
  }
}

@media only screen and (max-width: 575px) {
  :root {
      --container-width: 100%;
  }
}