/*
 * Custom styles by WebinWeb Design
*/

/*--------------------------------------------------------------
 >>> Globals:
 ----------------------------------------------------------------*/
 body {font-family: 'Open Sans', sans-serif !important; color:var(--zwart-color) !important; line-height:1.6 !important; font-size:14.5px !important; -webkit-font-smoothing: antialiased;}
 .container {padding-right: 1.25rem !important; padding-left: 1.25rem !important;}
 .container-fluid {padding-left:10% !important; padding-right:10% !important;}
 .embed-container {position:relative; padding-bottom:56.25%; overflow:hidden; max-width:100%; height:auto;} 
 .embed-container iframe, .embed-container object, .embed-container embed {position:absolute; top:0; left:0; width:100%; height:100%;}
 .grecaptcha-badge {visibility: hidden;}
 .verticalCenter {display:flex; align-items:center; justify-content:center;}
 h1, .h1 {font-size:2.5em !important; color:var(--zwart-color); font-weight:700 !important;}
 h2, .h2 {font-size:2em !important; margin-bottom:0.5rem !important; color:var(--zwart-color); font-weight:700 !important;}
 h3, .h3 {font-size:1.2em !important; color:var(--zwart-color); font-weight:700 !important;}
 h4, .h4 {font-size:1.2em !important; color:var(--zwart-color);}
 ul, ol {-webkit-padding-start:0 !important; padding-left:0 !important;}
 img, svg {width:100%; height:100%;}
 :root {
   --blauw-color:#031026;
   --wit-color:#FFFFFF;
   --creme-color:#FCFCFC;
   --zwart-color: #000000;
   --groen-color: #15AC16;
   --oranje-color: #C26325;
   --oranje-dark-color: #9B2602;
 }
 
 .bg-blauw {background-color:var(--blauw-color); color:var(--wit-color);}
 .bg-blauw h2 {color:var(--wit-color);}
 .bg-creme {background-color:var(--creme-color);}
 

 /*--------------------------------------------------------------
 >>> Buttons:
 ----------------------------------------------------------------*/
 button.btn.btn-oranje {border:1px solid var(--oranje-color); background-color:var(--oranje-color); border-radius:30px; padding:10px 30px; font-weight:600; background: linear-gradient(to right, var(--oranje-dark-color) 50%, var(--oranje-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out!important; color:var(--wit-color);}
  button.btn.btn-oranje a {color:var(--wit-color); text-decoration:none;}
  button.btn.btn-oranje:hover { border-color: var(--oranje-dark-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4);}
  
  button.btn.btn-groen {border:1px solid var(--groen-color); background-color:var(--groen-color); border-radius:30px; padding:10px 30px; font-weight:600; background: linear-gradient(to right, var(--groen-color) 50%, var(--groen-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out!important; color:var(--wit-color);}
  button.btn.btn-groen a {color:var(--wit-color); text-decoration:none;}
  button.btn.btn-groen:hover { border-color: var(--groen-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4);}
  
  
  button.btn.btn-trans {border:1px solid var(--green-dark-color); background-color:transparent; border-radius:30px; padding:10px 40px; font-weight:600; background: linear-gradient(to right, var(--green-btn-color) 50%, var(--wit-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out!important; color:var(--green-dark-color);}
  button.btn.btn-trans a {color:var(--green-dark-color) !important; text-decoration:none;}
  button.btn.btn-trans:hover {border-color:var(--green-btn-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4); color:var(--wit-color);}
  button.btn.btn-trans:hover a {color:var(--wit-color) !important;}
 
 
 
 /*--------------------------------------------------------------
  >>> Header:
  ----------------------------------------------------------------*/
 header {border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
 .topbar {background-color:var(--blauw-color); color:var(--wit-color); padding:5px 0; font-size:0.85em;}
 .topbar .usp {text-align:center;}
 .topbar .usp:before {content:"\f00c"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--oranje-color); padding-right:3px;}
 .menubar .nav-wrapper {display:flex; align-items:center; margin:15px 0;}
 .menubar .nav-wrapper .nav {flex: 1; padding:1rem 0 0; display:block;}
 .menubar .nav-wrapper .btn {margin-left: auto;}
 
 .menubar .nav-wrapper .nav ul li {list-style-type:none; display:inline-block; padding:0 15px;}
 .menubar .nav-wrapper .nav ul li a {padding-bottom:45px; transition:all .2s ease-out !important; font-size:17px; font-weight:600;}
 .menubar .nav-wrapper .nav ul li a:hover {color:var(--oranje-color); transition:all .2s ease-out !important;}
 .menubar .nav-wrapper .nav ul li.current-menu-item a {color:var(--oranje-color);}
 .menubar .nav-wrapper .nav ul li.menu-item-has-children:after {content:"\f078"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--zwart-color); font-size:10px;}
  
  /* -- Submenu --*/
 .menubar .logo {margin-top:12px;}
 .menubar .nav .main-navigation ul li:hover > ul.sub-menu {display: block;}
 .menubar .nav .main-navigation ul.sub-menu {display:none; position:absolute; z-index:9999; margin-top:26px; margin-left:-15px; width:375px; background-color:var(--wit-color); padding:15px 15px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .25);}
 .menubar .nav .main-navigation ul.sub-menu li {display:block !important; text-align:left; padding: 0.2rem 15px 0.2rem 1rem;}
 .menubar .nav .main-navigation ul.sub-menu li:last-child {padding:0 1rem 0; margin-top:0;}
 .menubar .nav .main-navigation ul.sub-menu li a {color:var(--zwart-color) !important; font-size:15px !important;}
 .menubar .nav .main-navigation ul.sub-menu li a:hover, header #menubar .nav .main-navigation ul.sub-menu li.current-menu-item a {color:var(--blauw-color) !important;}
 .menubar .nav .main-navigation ul.sub-menu li a:after {display:none;}
 .menubar .nav-wrapper .btn.btn-groen {margin-left:auto; padding:5px 30px;}

 .broodkruimels {color:var(--creme-color); padding:22px 0; font-size:14px;}
 .broodkruimels a {color:#a6a6a6;}
 
 /*--------------------------------------------------------------
 >>> Home:
 ----------------------------------------------------------------*/

 
 /*--------------------------------------------------------------
 >>> Footer:
 ----------------------------------------------------------------*/
 footer {background-color:var(--blauw-color); color:var(--wit-color); padding:60px 0; border-top:1px solid var(--wit-color);}
 footer h3 {color:var(--wit-color); margin-bottom:30px;}
 footer ul {list-style-type:none;}
 footer a:hover {text-decoration:underline;}
 footer .kolom1 {padding-right:30px;}
 .info-footer {margin-top:5px;}
 .info-footer .author {float:right;}
 
 
 
 /*--------------------------------------------------------------
  >>> Components:
  ----------------------------------------------------------------*/
 .quick_links .content {padding-right:15px;}
 .quick_links .content ul {list-style-type:none;}
 .quick_links .content ul li {padding-left:20px; padding:0.5rem 20px 0.5rem 20px; line-height:1.4; border-bottom:1px solid #e4e4e4;}
 .quick_links .content ul li:before {content:"\f061"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--oranje-color); padding-right:10px; font-size:10px; margin-left:-19px;}
 .quick_links .content ul li:hover:before {color:var(--oranje-color);}
 .quick_links .content ul li a:hover, .quick_links .content ul li:hover {text-decoration:none; color:var(--oranje-color); cursor:pointer; font-weight:600;}
 #sub .quick_links, #single .quick_links {border-top:1px solid #e4e4e4; background-color:var(--creme-color); margin-top:3rem;}
 
 .slider {margin-bottom:1.5rem; position:relative;}
 .slider .slide .slideItem { width:100%; height:800px; background-size:cover; background-position:center; background-repeat:no-repeat;}
 .slider .slide .slideItem .overlay {background: linear-gradient(to right, rgba(3, 16, 38, 1), rgba(3, 16, 38, 0)); position:absolute; z-index:1; top:0; width:100%; height:800px;}
 .slider .slide .slideItem .content {z-index:999; color:var(--wit-color); position:absolute; bottom:300px; max-width:550px;}
 .slider .slide .slideItem .content h2, .slider .slide .slideItem .content h1 {color:var(--wit-color); font-weight:700 !important; font-size:4em !important; line-height:1em !important;}
 .slider .slide .slideItem .content p {font-weight:500; font-size:1.875em;}
 .slider .slide .slideItem .content button {margin-top:15px; font-weight:700; font-size:1.5em;}
 .slider .slider-divider {display:block; width:100%; height:60px; fill:var(--wit-color); margin-top:-60px; position:absolute; z-index:99;}
 
 .sub-banner {background-color:var(--blauw-color); height:70px; }

 .how-it-works {padding:3rem 0;}
 .how-it-works .intro {text-align:center; margin-bottom:30px;}
 .how-it-works .stap {background-color:var(--creme-color); border-radius:10px; border:1px solid #D9D0D0; padding:30px; position:relative; height:100%;}
 .how-it-works .stap .nummer {position:absolute; right:30px; font-size:1.25em; top:15px; font-weight:900;}
 .how-it-works .stap .image {background-color:var(--oranje-color); width:35px; height:35px; border-radius:4px;}
 .how-it-works .stap .image img {padding:4px;}
 .how-it-works .stap .titel {font-weight:900; font-size:20px; margin:1.5rem 0 0.5rem;}
 .how-it-works button.btn.btn-oranje {display:flex; margin:45px auto 0;}
 
 
 .content_content .titel {margin-bottom:1.5rem;}
 .content_content a {color:var(--blauw-color); font-weight:600;}
 .content_content ul {list-style-type:none;}
 .content_content ul li {padding:3px 0; margin-left: 25px;}
 .content_content ul li:before {content:"\f00c"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--oranje-color); padding-right:10px;     margin-left:-25px;}
 
 .image img {border-radius:10px;}
 .image .imageBG {height:700px; width:100%; background-position:center; background-size:cover; background-repeat: no-repeat; background-attachment:fixed;}
 
 .imageRepeater .image {margin:10px 0;}
 
 /* .image_content .row {align-items: stretch;} */
 .image_content.bg-blauw .row {align-items:center;}
 .image_content .visibleXS {display:none;}
 #home .image_content .image {position:relative; margin-left:calc(-50vw + 50%);}
 #home .image_content .image img {border-radius:0;}
 .image_content .image {height: 100%;}
 .image_content .image img {width:100%; display:block; border-radius:10px; height:100%; object-fit:cover;}
 .image_content .content {padding-left:60px;}
 .image_content .content ul {list-style-type:none; margin:2rem 0;}
 .image_content .content ul li {padding:3px 0; margin-left: 25px;}
 .image_content .content ul li:before {content:"\f00c"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--oranje-color); padding-right:10px;     margin-left:-25px;}
 
 /* .content_image .row {align-items: stretch;} */
 .content_image.bg-blauw .row {align-items:center;}
 .content_image .image {height:100%;}
 .content_image .image img {width:100%; display:block; border-radius:10px; height:100%; object-fit:cover;}
 .content_image .content {padding-right:60px;}
 .content_image .content ul {list-style-type:none; margin:2rem 0;}
 .content_image .content ul li {padding:3px 0; margin-left: 25px;}
 .content_image .content ul li:before {content:"\f078"; font-family:'Font Awesome\ 5 Free'; font-weight:900; color:var(--oranje-color); padding-right:10px;     margin-left:-25px;}
 
 
 .faq {/*background-color:var(--creme-color);*/ padding:3rem 0 3rem !important;}
 .faq .accordion-item {border-bottom:1px solid #a8a7a7;}
 .faq .accordion-button {padding:1rem 0; font-weight:600;}
 .faq .accordion-button:focus {box-shadow:none;}
 .faq .accordion-body {padding:0 200px 45px 0; margin-top:-1rem;}
 .faq .accordion-body ul {padding-left:15px !important;}
 .faq .accordion-item:last-of-type>.accordion-collapse {border-top:1px solid var(--creme-color);}
 .faq .accordion .accordion-item .accordion-button::after {background-image: url('img/plus.svg'); background-size:.75rem; background-position:center center; margin-top:5px;}
 .faq .accordion .accordion-item .accordion-button:not(.collapsed)::after {background-image: url('img/minus.svg'); background-size:.75rem; background-position:center center; margin-top:5px;}
 
 
 .merken .image {bordeR:1px solid #e4e4e4; padding:10px; margin:10px 0; border-radius:4px;}
 .merken .image img {filter: grayscale(100%); transition: filter 0.3s ease, box-shadow 0.3s ease;}
 .merken .image:hover {box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
 .merken .image:hover img {filter: grayscale(0%);}
 
 
 .cta {background-color:var(--blauw-color); color:var(--wit-color); text-align:center; padding:60px 0; margin-top:3rem;}
 .cta h2 {color:var(--wit-color);}
 .cta button {margin-top:15px;}
 
 form h2 {margin-top:30px !important;}
 form input[type="text"], form input[type="tel"], input[type="email"], select {width:100%; height:40px; border-radius:10px; border:1px solid var(--blauw-color); padding:0 10px;}
 form input[type="text"]:focus, form input[type="tel"]:focus, form input[type="email"]:focus, form textarea:focus {border:1px solid var(--blauw-color);}
 form textarea {width:100%; border-radius:10px; border:1px solid var(--blauw-color); padding:10px;}
 form input[type="submit"] {border:1px solid var(--oranje-color); background-color:var(--oranje-color); border-radius:30px; padding:10px 30px; font-weight:600; background: linear-gradient(to right, var(--blauw-color) 50%, var(--oranje-color) 50%); background-size:200% 100%!important; background-position:right bottom; transition:all .2s ease-out!important; color:var(--wit-color); margin-top:15px;}
  form input[type="submit"]:hover {border-color: var(--blauw-color); background-position:left bottom!important; box-shadow:0px 2px 10px 0px rgba(33, 33, 33, 0.4);}

 
 /*--------------------------------------------------------------
 >>> Media queries:
 ----------------------------------------------------------------*/
 @media only screen and (max-width : 1599px) {
 .container-fluid {padding-left:100px !important; padding-right:100px !important;}   
 }
 
 @media only screen and (max-width : 1499px) {
 .container-fluid {padding-left:70px !important; padding-right:70px !important;}   
 }
 
 @media only screen and (max-width : 1499px) {
  .container-fluid {padding-left:1.5rem !important; padding-right:1.5rem !important;}   
  }
  
 @media only screen and (max-width : 1199px) {
 .slider .slide .slideItem, .slider .slide .slideItem .overlay {height:700px;}
 .menubar .nav-wrapper .nav ul li {padding:0 10px;}
 .menubar .nav-wrapper .nav ul li a {font-size:16px;}
 .image_content.bg-blauw .content {padding:60px 0 60px 30px;}
 .image_content.bg-blauw .image img {height: 100vh; object-fit: cover;}
 .image_content .content {padding-left:30px;}
 .content_image .content {padding-right:30px;}
 }
 
 
 
 
 @media only screen and (max-width : 991px) {
 .container {padding-right:1.5rem !important; padding-left:1.5rem !important; max-width:100%;}
 .slider .slide .slideItem, .slider .slide .slideItem .overlay {height:600px;}
 .slider .slide .slideItem .content {bottom:200px;}
 .slider .slide .slideItem .content h2, .slider .slide .slideItem .content h1 {font-size:3rem !important;}
 .menubar .nav-wrapper .btn.btn-groen {margin-right:75px;}
 .menubar .logo img {width:134px; height:auto;}
 .how-it-works .stap {padding:30px 15px;}
 .image_content .visibleXL {display:none;}
 .image_content .visibleXS {display:block;}
 #home .image_content .image {width: calc(100vw + 20px); margin-top:0;}
 .image_content.bg-blauw .content {padding: 60px 0;}
 .image_content.bg-blauw .image img {height:100%;}
 .image_content .content {padding-left:0;}
 .image_content .image {width:100%; margin-top:20px;}
 .content_image .content {padding-right:0;}
 .content_image .image {margin-top:20px;}
 .quick_links .kolom3 {margin-top:-15px;}
 }
 
 
 
 @media only screen and (max-width : 767px) {     
 .slider {margin-bottom:0;}
 .slider .slide .slideItem, .slider .slide .slideItem .overlay {height:500px;}
 .slider .slide .slideItem .content {bottom:175px;}
 .slider .slide .slideItem .content h2, .slider .slide .slideItem .content h1 {font-size:2.5rem !important;}
 .slider .slide .slideItem .content button {font-size:1.25em;}
 .how-it-works .item {margin-top:15px;}
 .quick_links .kolom2 {margin-top:-15px;}
 .quick_links .content {padding-right:0;}
 .image .imageBG {height:500px;}
 /* iOS devices */
 @supports (-webkit-touch-callout: none) {.image .imageBG {background-attachment: scroll; height:300px;} }
 footer {padding:30px 0;}
 footer .kolom1 h3, footer .kolom2 h3, footer .kolom3 h3 {margin:30px 0 15px;}
 .info-footer {text-align:center;}
 .info-footer .copy p {margin:0.5rem 0 0;}
 .info-footer .author {float:none; text-align:center;}

 }
 
 
 
 @media only screen and (max-width : 576px) {
 .container {padding-right:1.25rem !important; padding-left:1.25rem !important; max-width:100%;}
 .slider .slide .slideItem, .slider .slide .slideItem .overlay {height:350px;}
 .slider .slide .slideItem .content {bottom:125px;}
 .slider .slide .slideItem .content h2, .slider .slide .slideItem .content h1 {font-size:2rem !important;}
 .slider .slide .slideItem .content button {font-size:1em;} 
 .slider .slider-divider {height:30px; margin-top:-30px;}
 .menubar .logo {margin-left:-10px;}
 .menubar .nav-wrapper .btn.btn-groen {padding:5px 10px; font-size:14px; margin-right:40px;}
 .image .imageBG {height:400px;}
 .cta {margin-top:1.5rem;}
 }