/*
 Theme Name:   bouwstock_dewulf
 Theme URI:    https://www.bouwstockdewulf.be
 Description:  Bouwstock Dewulf
 Author:       Emiel Dewulf
 Author URI:   http://www.emieldewulf.be
 Template:     understrap
 Version:      0.5.5
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 
*/

/* REMOVE ADMIN BAR */

/* #wpadminbar {
    z-index: 10;
   display: none;
} */

/* ALGEMEEN */
::selection{
	background-color:#F5E96B;
}
body{
	font-family: 'Roboto', sans-serif;
	font-size: 1.2rem;
	overflow-x: hidden;
	color:#0a2d22;
}
#page-wrapper{
	margin-top: 5px; /* afhankelijk van de hoogte van de nav-bar */
	padding: 0% 5% 0% 5%;
}
.entry-title{
	margin-bottom:0;
}

.wrapper {
    padding: 0px !important;
}
a{
    color:#0a2d22;
}
a:hover{
    text-decoration: none !important;
}
p{
	font-weight:400;
	font-size:1rem;
}
u {
    background: linear-gradient(to bottom,transparent 0,transparent 55%,#F5E96B 55%,#F5E96B 100%);
    text-decoration: none;
}

h1, .h1 {
    font-size: 3rem;
    margin-bottom: 2rem;
    font-weight: 700;
}

h2, .h2 {
    font-weight: 700;
	font-size: 1.8vw;
    z-index: 2;
}
.side-title {
    font-weight: 700;
	font-size: 2.8vw;
    line-height:3.5rem;
}
.text--white{
	color:#FFF !important;
}
img{
	width: 100%;
}
p.subtitle {
    margin-bottom: 0 !important;
    font-size: 1rem;
}

.align--right{
	text-align: right;
}

.center{
	text-align: center;
}

.make--it--relative{
	position: relative;
}

.auto--size{
    height:100%;
    object-fit:cover;
}

/* ACCENT */
.accent{
    position: relative;
    display: inline-block;
}
.accent:before{
    content: "";
    height: 10px;
    width: 100%;
    background: #F5E96B;
    position: absolute;
    bottom: 5px;
    right: 0;
    z-index: -1;
    left: 0;
}

/* BUTTONS */
.knop--container{
	display: flex;
    margin-top: 2rem;
    align-items: center;
}

.btn-arrow.text--green{
	color:#0F925E;
}
.btn-arrow.text--green svg{
	fill:#0F925E;
}
.btn-arrow.text--green:hover svg{
	fill:#0F925E;
}
.btn-arrow svg{
	opacity: 1;
    fill: #125a47;
    margin-left: 10px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn-arrow.text--white svg{
	fill: #fff;
}
.btn-arrow.text--white:hover svg{
	fill: #fff;
}
.btn-arrow:hover{
	color: #0F925E;
}
.btn-arrow:hover svg{
	fill: #0F925E;
    opacity: 1;
    margin-left: 15px;
}
.btn-border{
	border:1px solid #0F925E;
	background:#0F925E;
	color:#fff;
	padding:10px 15px;
	-webkit-transition: all .3s;
    transition: all .3s;
}
.btn-border:hover{
	color:#fff;
	background:#0F925E;
}
.btn-border svg{
	fill:#FFF;
	margin-left:10px;
	-webkit-transition: all .3s;
    transition: all .3s;
}
.btn-border:hover svg{
	margin-left: 15px;
}
.s-btn {
    position: relative;
    z-index: 0;
}
.s-btn:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 10px;
    bottom: 2px;
    left: 0;
    z-index: -1;
    background-color: #F5E96B;
    visibility: hidden;
    transform-origin: 0 100%;
    -webkit-transform-origin: 0 100%;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.s-btn:hover:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

/* breadcrumbs */
nav.rank-math-breadcrumb a {
    color: #FFF;
    text-transform: lowercase;
}
nav.rank-math-breadcrumb a:last-child {
    font-weight: 500;
}
nav.rank-math-breadcrumb p {
    color: #FFF;
    text-transform: lowercase;
}
.breadcrumbs.pages{
	background: #0F925E;
    padding: 15px 5%;
}
.breadcrumbs.pages p{
	margin-bottom:0;
}

/* FLEXING */
.top-adres{
	display:flex;
	align-items:center;
}
.top-adres p{
	margin-bottom:0;
}
.flexing{
    display: flex;
    flex-wrap: wrap;
}

.flex--row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.vertical--align{
    align-items: center;
}

.flex--column {
    flex: 1;
}

.flex--column--2{
	flex: 0.2;
}

.flex--column--8{
	flex: 0.8;
}

.flex--column--4{
	flex: 0.4;
}

.flex--column--6{
	flex: 0.6;
}

.flex--column--3{
	flex: 0.3;
}

.flex--column--7{
	flex: 0.7
}

/* GLOBAL MARGINS */

.margin--top--1{
	margin-top: 1rem;
}

.margin--top--2{
	margin-top: 2rem;
}

/* GLOBAL PADDING */

.no--padding{
	padding: 0px;
}

.padding--2 {
	padding: 2%;
}

.padding--top--left--bottom--2 {
	padding: 2% 0% 2% 2%;
}

.padding--top--bottom--2{
    padding-top: 2%;
    padding-bottom: 2%;
}

.padding--top--2{
    padding-top: 2%;
}

.padding--bottom--2 {
	padding-bottom: 2%;
}

.padding--5 {
	padding: 5%;
}

.padding--10{
	padding: 10%;
}
.padding--right--40{
    padding-right:40%;
}
.padding--top--5 {
	padding-top: 5%;
}

.padding--bottom--5 {
	padding-bottom: 5%;
}

.padding--left--5{
	padding-left: 5%;
}

.padding--left--10{
    padding-left: 10%;
}

.padding--left--15{
    padding-left: 15%;
}

.padding--right--5{
	padding-right: 5%;
}
.padding--right--10{
    padding-right:10%;
}
.padding--right--25{
    padding-right:25%;
}

.padding--left--right--5{
    padding-left: 5%;
    padding-right: 5%;
}
.padding--left--right--15{
    padding: 0 15%;
}
.padding--top--bottom--5{
    padding-top: 5%;
    padding-bottom: 5%;
}

.padding--top--bottom--10{
    padding-top: 10%;
    padding-bottom: 10%;
}

.padding--left--right--bottom--5{
    padding: 0% 5% 5% 5%;
}

.padding--left--right--top--5{
    padding: 5% 5% 0% 5%;
}
.padding--left--top--5{
    padding:5% 0 0 5%;
}
.padding--right--bottom--5{
    padding:0 5% 5% 0;
}

.padding--right--top--bottom--5{
    padding:5% 5% 5% 0;
}
.padding--left--top--bottom--5{
    padding:5% 0 5% 5%;
}
.margin--bottom--small{
        margin-bottom: 2rem;
}
.padding--top--10{
    padding-top:10%;
}
.margin--right--20 {
    margin-right: 20px;
}
.margin--left--20{
    margin-left:20px;
}
.margin--right--40{
	margin-right:40px;
}


/* CONTACT FORM PAGES */

.contact--form{
    background-color:#0F925E;
}
.contact--form--text{
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
}

.contact--form .wpcf7-form-control.has-spinner.wpcf7-submit {
    background: #FFF !important;
    padding: 0 20px;
    color: #000;
    float: right;
    line-height:40px;
    border:1px solid #FFF;
}
.contact--form .wpcf7-form-control.has-spinner.wpcf7-submit:hover{
    color:#fff;
    background:transparent !important;
    text-decoration: none;;
}

/* HOMEPAGE */
header{
    position: relative;
}
.entry-header-home{
    min-height:80vh;
    display:flex;
    align-items:center;
}
.header--homepage{
    color:#FFF;
    max-width:60%;  
}
.announcement p {
    background: #F5E96B;
    position: absolute;
    top: 0;
    width: auto;
    left: 5%;
    right: 5%;
    text-align: center;
    padding: 10px;
    font-size: 1.2rem;
    font-weight: 500;
}
.homepage-gradient{
	position: absolute;
    left: 5%;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),to(rgba(0,0,0,.6)));
    background-image: linear-gradient(-90deg,transparent 1%,rgba(0,0,0,.6));
    color: #fff;
}
.owl-hero .owl-item img {
    display: block;
    width: 40px;
    height:40px;
    max-width: 40px;
    filter: brightness(0) invert(1);
}
.background{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    left: 0;
    z-index: -1;
    padding:0 5%;
}
.background .img{
    height: 100%;
    width: 100%;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
}
.overlay{
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    left: 0;
}
.services {
    background: #0F925E;
    margin: -13% 5% 0% 5%;
	box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    -webkit-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    -ms-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    display: block;
}
.service {
    text-align: center;
    color: #FFF;
    height: 100px;
    display: flex;
	flex-direction:column;
    align-items: center;
    justify-content: center;
}
.service svg{
	width:40px;
}

button.owl-prev:focus, button.owl-next:focus {
    outline: none;
}

/* PRODUCTCATS HOMEPAGE */
.product--card, .category--card {
    border-top: 3px solid #0F925E;
    box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    -webkit-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    -ms-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    height: auto;
    position: relative;
    margin-bottom:40px;
    display: block;
}
.cat--description ul{
    list-style:none;
    padding-left:0;
}
ul.cat--description li {
    list-style: none;
}
.cat--title {
    border-bottom: 1px solid #E1E1E1;
}
.product--card:hover svg {
    top: 60px;
}

.cat--description li:before {
    content: "";
    font: normal normal normal 20px/1 FontAwesome;
    content: "\f058";
    color: #1A935E;
    padding-right: 10px;
}
.usp ul{
    list-style:none;
    padding-left:0;
    columns:2;  
}
.usp li:before{
    content: "";
    font: normal normal normal 20px/1 FontAwesome;
    content: "\f058";
    color: #1A935E;
    padding-right: 10px;
}
.usp li.text-orange:before{
	color: #FF9708;
}
.usp li.text-orange{
	color:#FF9708;
}
.usp li{
    list-style: none;
	font-size:1rem;
	font-weight:400;
}
.producten{
    display: grid !important;
    grid-template-columns: 3fr 3fr 3fr;
    grid-column-gap: 40px;
}
.product--card .title {
    padding:5%;
    text-transform: uppercase;
    max-width:80%;
}
.product--card svg {
    position: absolute;
    right: 5%;
    top: 3%;
    z-index: 1;
    transition: all 0.3s cubic-bezier(.69,.1,.13,1.01);
}

.home .product--card .description{
    min-height:auto !important;
}
.product--card .cat--image:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: "";
    border-radius: 0%;
    background-color: #0F925E;
    opacity: 0.7;
    z-index: 1;
    transform: scale(0) perspective(400px);
    transform-origin: bottom left;
    transform-style: preserve-3d;
    transition: all 700ms ease;
}
.product--card:hover .cat--image:before {
    transform: scaleX(1) perspective(400px);
}
.product--card:hover svg{
    z-index:2;
}
.product--card:hover .overlay--svg{
    display:block !important;
}
.overlay--svg{
    z-index: 2;
    color: #FFF;
    font-size: 2rem;
}
.cat--image{
    position: relative;
    height:300px;
    overflow:hidden;
}
.cat--image img{
    height:100%;
    width:100%;
    object-fit:cover;
}
.description.cat--description li {
    font-weight: 400;
    font-size:1rem;
}
.divider--img {
    max-height: 40vh;
    object-fit: cover;
    margin:2rem 0;
}

.overlay--svg{
    position: absolute;
    top:50% !important;
    left:50% !important;
    transform: translate(-50%, -50%);
    display:none;
}
.overlay--svg p {
    font-size: 5rem;
}

/* REALISATIES HOMEPAGE */

.realisatie img{
    width:100%;
    height:300px;
    object-fit: cover;
}
.single-realisaties .owl-carousel .owl-item img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 70vh;
}
/* .label {
    background: #0F925E;
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 20px;
    color: #FFF;
    font-weight:800;
}
.label span {
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-block;
} */
.title-knop{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* CONTACT PAGE */

.wpforms-submit {
    background: #0F925E !important;
    color: #FFF !important;
    text-align: center !important;
    width: 100% !important;
}

/* REALISATIES */

.toolbar {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid;
    padding-top: 30px;
    position:relative;
}
.overzicht-projects {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.realisaties-meta {
    display: flex;
    justify-content: center;
	align-items:center;
	margin-top: 2%;
}
.realisaties-meta p{
	margin-bottom:0;
}
.realisatie-img{
	height:700px;
}
.realisatie-overzicht{
	position:relative;
}
.meta-label {
    margin-left: 40px;
    background: #FFF;
    color: #0F925E;
    padding: 5px;
    font-weight: 500;
}
.next svg{
	margin-left:15px;
}
.previous svg {
	margin-right:15px;
    transform: rotate(180deg);
}
.realisatie-info.realisatie-odd{
    right:auto;
    left:0;
}
.owl-realisaties .owl-prev, .owl-realisaties .owl-next {
        background: #06774a !important;
    font-size: 0.7rem !important;
    color: #FFF !important;
    padding: 10px 20px !important;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.owl-realisaties .owl-prev:hover, .owl-realisaties .owl-next:hover{
	background:#F5E96B !important;
	color:#000 !important;
}

.owl-realisaties .owl-nav {
    display: flex;
    flex-direction:column-reverse;
	z-index:1;
	position:absolute;
	top: 219px;
    left: -125px;
}
.owl-realisaties .owl-stage-outer{
	z-index:-1;
}


/* CONTACT FORM */
.contact--form .wpcf7 {
    max-width: 80% !important;
}
.wpcf7{
	max-width:100%;
}
.contact--form .wpcf7-form-control.wpcf7-text {
    background: transparent;
    color: #FFF !important;
    border: none;
    border-bottom: 1px solid;
    border-radius: 0;
    padding:0;
}
.contact--form .wpcf7-form-control.wpcf7-file {
    background: transparent;
    border: none;
    padding: 0;
    color: #FFF;
}
.contact--form ::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
.contact--form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
.contact--form ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
.contact--form :-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}
.contact--form .wpcf7-form-control.wpcf7-textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #FFF;
    border-radius: 0;
    padding:0;
}
.btn-outline-primary, .contact--form .wpcf7 input[type=submit] {
    color: #FFF;
    border: none;
    display: block;
    width: auto;
    text-align: left;
    padding: 0;
    margin-right: 10px;
}
.btn-outline-primary:hover, .contact--form .wpcf7 input:hover[type=submit] {
    color: #fff;
    background-color: transparent;
    border-color: #FFF;
    text-decoration: underline;
}

.solliciteer-knop {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
}
.wpcf7 .ajax-loader{
    display:none !important;
}
.form-control:focus, .wpcf7 input:focus[type=text], .wpcf7 input:focus[type=search], .wpcf7 input:focus[type=url], .wpcf7 input:focus[type=tel], .wpcf7 input:focus[type=number], .wpcf7 input:focus[type=range], .wpcf7 input:focus[type=date], .wpcf7 input:focus[type=month], .wpcf7 input:focus[type=week], .wpcf7 input:focus[type=time], .wpcf7 input:focus[type=datetime], .wpcf7 input:focus[type=datetime-local], .wpcf7 input:focus[type=color], .wpcf7 input:focus[type=email], .wpcf7 input:focus[type=file], .wpcf7 input:focus[type=submit], .wpcf7 select:focus, .wpcf7 textarea:focus, .wpcf7 .wpcf7-validation-errors:focus {
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
    outline: 0;
    box-shadow: none;
}
.page-template-contact-bdw .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required, .page-template-contact-bdw .wpcf7-form-control.wpcf7-text.wpcf7-tel.wpcf7-validates-as-tel {
    background: #EEEEEE;
    height: 40px;
    border: none;
    border-radius: 0 !important;
    color: #000 !important;
}
.page-template-contact-bdw .wpcf7-form-control.wpcf7-textarea{
	background: #EEEEEE;
    border: none;
    border-radius: 0 !important;
    color: #000 !important;
}
.page-template-contact-bdw .wpcf7-form-control.has-spinner.wpcf7-submit {
    max-width: 30%;
    float: right;
    background: #0F925E;
    color: #FFF;
    text-transform: uppercase;
    border: 1px solid #0F925E;
	border-radius:0;
}
.page-template-contact-bdw .wpcf7-form-control.has-spinner.wpcf7-submit:hover {
    background: transparent;
    color: #0F925E;
}
.page-template-contact-bdw  .entry-content h2{
	margin-bottom:0;
}

/* PAGES */
.entry-header-pages {
    margin: 0 5%;
    height: 20vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    background: #0F925E;
    text-align:center;
	overflow:hidden;
}
.entry-header-pages .entry-title {
    font-size: 1.5rem;
}
.realisaties-meta br {
    display: none;
}

/* OVER ONS */
.divider-text {
    font-size: 5rem;
    font-weight: 700;
    text-align:center;
}
.divider-text .accent:before {
    height: 21px;
    bottom: 13px;
}
.counter--block {
    background: #0F925E;
    text-align: center;
    height: 30vh;
    color: #FFF;
	display: flex;
    align-items: center;
}
.counter-value {
    font-size: 3rem;
}
#counter p{
    margin-bottom:0;
}

/* JOBS*/
.tags {
    display: flex;
    align-items: center;
    padding-bottom: 20%;
}
.tag {
    background: #0F925E;
    padding: 5px 10px;
    color: #FFF;
    margin-right:20px;
}
/* BLOG */
.blog{
   display:flex;
   flex-direction:row;
   justify-content: center;
   max-width:100%;
}
.blogpost {
    border: 1px solid #f3f3f3;
    border-bottom: 3px solid #0F925E;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 20%);
    -webkit-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    -ms-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    display: block;
    height:100%;
}
.blog--info {
    padding: 5%;
    position: relative;
}

.blog--date{
    height: auto;
    width: 100px;
    background-color: #F5E96B;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    padding: 10px 5px;
}
.blog--categorie {
    display: inline-block;
    background: #f3f3f3;
    padding: 5px 10px;
    margin-bottom: 1.5rem;
}
.blog--image {
    overflow: hidden;
    height:300px;
	position:relative;
}
.blogpost img{
    transition: 0.5s all ease-in-out;
    height:100%;
    width:100%;
    object-fit: cover;
}
.blogpost:hover img{
    transform:scale(1.05);
}
.read-more a{
    text-align: left;
    margin-top: 2rem;
    display:block;
    color:#000;
}
.read-more a:after {
    content: "+";
    margin-left: 15px;
    padding: 10px 20px;
}
.product-page {
    display: flex;
    padding:5%;
}
.sidebar {
    width: 15%;
}
.sidebar-block.downloads {
    background: #F5F5F5;
    color: #000;
    height: 200px;
    padding: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-bottom:40px;
    margin-top:2rem;
}
a.button-download {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background: #0F925E;
    color: #FFF;
    line-height: 40px;
}
.margin-left-opsomming{
    margin-left:15px;
}
.bold{
    font-weight:900;
}
ul.sidebar-element {
    list-style: none;
    padding: 0;
    line-height:20px;
    font-size: 1rem;
}
ul.sidebar-element li{
    padding: 5px 0;
}
.product-content {
    padding-left: 5%;
    width:85%;
}
.accordion {
  color: #444;
  cursor: pointer;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}
button.accordion {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #fff;
    background: none;
    padding: 10px 0;
    display:flex;
    align-items: center;
	background:#0F925E;
	width:100%;
	margin-bottom:1rem;
}
button.accordion:focus {
    outline: none;
}
button.accordion:before {
    content: "+";
    margin-right: 40px;
    background: #0F925E;
    border:2px solid #0F925E;
    color: #FFF;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
button.accordion.active:before {
    content: "-";
    background:transparent;
    color:#fff;
    border:2px solid #0F925E;
}
.accordion-producten{
    padding:2% 0 calc(1rem + 2%) 0;
}
.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel .cat--description {
    padding: 0;
}
form.wpcf7-form.init .flex--column{
    margin-right:10px;
}

/* REALISATIES */
.padding--right--15{
    padding-right:15%;
}

.realisatie-img img {
    height: 100%;
    object-fit: cover;
}
.realisatie-info {
    width: 25%;
    background: #FFF;
    position: absolute;
    bottom: 0;
    top:0;
    right: 0;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
    -ms-box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
    display: block;
}
.realisatie-content{
    padding:10%;
    padding-bottom:20%;
    position: relative;
    height:100%;
}
.materialen li{
    font-weight:400;
    font-size: 1rem;
}
.previous.back-to {
    margin-bottom: 2rem;
    font-size: 1rem;
    float: right;
}

.realisatie-tag{
    color: #000;
    font-weight: 300;
    background: #F5F5F5;
    display: inline-block;
    padding: 10px 15px;
}
.realisatie-content .knop--container{
    position: absolute;
    bottom: 5%;
}

/* MOBIEL */

@media only screen and (max-width: 811px) {
	
	.no--padding--small{
		padding: 0px;
	}
	.announcement p{
		font-size:0.9rem;
	}
	
	body {
        font-size: 1.2rem;
    }
	.stripe, .stripe-small{
		display:none !important;
	}
    h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    h2, .h2 {
        font-weight: 700;
        font-size: 1.8rem;
        margin-bottom: 1rem;
    }
	.realisatie-img {
    height: auto;
	}
	.realisatie-info{
		position:relative;
		width:auto;
	}
	.counter--block{
		display:none;
	}
	.blog--info{
		height:auto;
	}
	.single-nieuws .flex--column{
		max-width:100%;
	}
	.previous a, .next a {
    font-size: 0;
}
    .header--homepage {
        max-width: 100%;
    }
    #page-wrapper{
        margin-top: 0px;
    }
    #wrapper-navbar{
        margin-top:0;
    }
	button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
	}
    .knop--container {
        flex-direction: column;
        align-items: baseline;
    }
	.btn-arrow.text--white {
        margin-top: 30px !important;
        display:block;
    }
    .owl-hero .owl-dots{
        display:none;
    }
	.padding--top--bottom--small{
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .margin--top--2{
        margin-top: 1rem;
    }

    .margin--top--small{
        margin-top: 2rem;
    }

    .margin--bottom--small{
        margin-bottom: 2rem;
    }

    .padding--bottom--small{
        padding-bottom: 1rem;
    }

    .padding--top--small{
        padding-top: 1rem;
    }

    .flex--column {
		flex: auto;
		width: 100%;
	}

    .flex--column--small, .flex--column--wide {
		flex: auto;
		width: 100%;
	}

    .column--reverse{
        flex-direction: column-reverse;
    }
    .producten, .blog{
        display:block !important;
    }
    .footer--menu{
        padding-left:0;
    }
    .newsletter {
        padding-left: 15px !important;
    }
    .newsletter input[type="submit"]{
        margin-left:0;
        width: calc(100% - 15px);
        margin-bottom:20px;
    }
    .newsletter input[type="email"]{
        width: calc(100% - 15px);
        margin-bottom:0;
    }
    .blogpost{
        margin-bottom:20px;
    }  
    .product--card, .category--card{
        margin-bottom:20px;
    }
    .navbar-brand {
    margin-right: 0 !important;
    }
    .category-hero p, .category-hero a {
        display: none;
    }
    .category-hero .categories p{
        display:block !important;
    }
    p.subtitle{
        font-size:1rem;
    }
    .categories{
        bottom: -156px;
    }
    .category-hero{
        min-height: 600px;
        margin-bottom:25%;
        margin-right:0;
    }
    .mobile-flex-reverse{
        flex-direction:column-reverse;
    }
    .realisatie {
        width: 100%;
        height: 300px;
    }

    .desktop{
        display:none;
    }
    .mobile{
        display:block !important;
    }
    .header-container-pages{
        height:200px;
    }
    .green-transparent{
        display:none;
    }
    .usp ul {
        columns: 1;
    }
    a.btn-arrow {
        display: block;
        margin-top: 30px;
    }
    .cat--image{
        height:200px;
    }
    div#assortiment {
        margin-bottom: 50px;
    }
    .owl-realisaties .owl-nav {
        top: -44px;
        right: -17px;
    }
    .counter--block{
        height:auto;
        padding:5%;
    }
    .counter--block .flex--column{ 
        width:50%;
    }
    .divider-text {
        font-size: 2rem;
    }
    .col-md-4.mix {
        padding: 0;
    }
    .product-page {
        flex-direction: column-reverse;
    }
    .product-content {
        padding-left: 0;
        width: 100%;
    }
    .sidebar {
        width: 100%;
    }
}

a.cky-banner-element {
    padding: 8px 30px;
    background: #F8F9FA;
    color: #858A8F;
    border: 1px solid #DEE2E6;
    box-sizing: border-box;
    border-radius: 2px;
    cursor: pointer;
    margin-bottom:30px;
    display:inline-block;
}

/* stripes */
.stripe {
    width: 100%;
    height: 5vw;
    position: absolute;
    transform: rotate(-45deg);
    display: block;
	background: #F5E96B;
    right: -45%;
	outline: 30px solid #fff;
}
.stripe-small{
	    width: 100%;
    height: 0vw;
    position: absolute;
    transform: rotate(-45deg);
    display: block;
    background: #FFF;
    right: -34%;
    outline: 30px solid #fff;
}
.overflow-hidden{
	overflow:hidden;
}
.hover-underline:hover{
	text-decoration:underline !important;
	color:#000;
}
.owl-realisaties .owl-dots{
	display:none !important;
}


/* ------------ flex ----------- */
.flex{display:flex;}

.flex-col{flex-direction:column;}
.flex-col-reverse{flex-direction:column-reverse;}
.flex-row-reverse{flex-direction:row-reverse;}

.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}

.items-center{align-items: center;}

.gap-4{gap:1rem;}
/* -------- backgrounds -------- */
.bg-green{background-color:#0F925E;}
.bg-yellow{background-color:#F5E96B;}


/* ---------- display ---------- */
.block{display:block;}
.hidden{display:none;}
.inline-block{display:inline-block;}

/* -------- position -------- */
.relative{position:relative;}

/* ----------- height ----------- */
.h-auto{height:auto;}
.h-full{height:100%;}

/* --------- min height ---------- */
.min-h-8{min-height:4rem;}

/* ----------- width ----------- */
.w-20{width:20%;}
.w-24{width:calc(25% - 1rem)}
.w-25{width:25%;}
.w-30{width:30%;}
.w-33{width:calc(33.33333% - 1rem)}
.w-40{width:40%;}
.w-50{width:50%;}
.w-60{width:60%;}
.w-70{width:70%;}
.w-80{width:80%;}
.w-full{width:100%;}

/* --------- max width ---------- */
.max-w-20{max-width:20%;}
.max-w-30{max-width:30%;}
.max-w-40{max-width:40%;}
.max-w-50{max-width:50%;}
.max-w-60{max-width:60%;}
.max-w-70{max-width:70%;}
.max-w-80{max-width:80%;}
.max-w-full{max-width:100%}

/* ----------- padding ----------- */

.pt-0{padding-top:0 !important}

.p-5 {
  padding: 5%; }

.pt-5,
.py-5 {
  padding-top: 5%; }

.pr-5,
.px-5 {
  padding-right: 5%; }

.pb-5,
.py-5 {
  padding-bottom: 5%; }

.pl-5,
.px-5 {
  padding-left: 5%; }
  
.p-10 {
  padding: 10%; }

.pt-10,
.py-10 {
  padding-top: 10%; }

.pr-10,
.px-10 {
  padding-right: 10%; }

.pb-10,
.py-10 {
  padding-bottom: 10%; }

.pl-10,
.px-10 {
  padding-left: 10%; }

.pl-15,
.px-15 {
  padding-left: 15%; }
  
.pr-15,
.px-15 {
  padding-right: 15%; }

/* ----------- margin ----------- */
.m-auto{margin:auto;}
.mb-8{margin-bottom:2rem;}
.-mt-15{margin-top:-15%;}


/* ------ letter spacing ------_ */
.tracking-widest{letter-spacing:0.1em;}

/* ------ text transform  ------ */
.uppercase{text-transform:uppercase;}

/* -------- font size ---------- */
.text-xs{
	font-size: 0.75rem;
	line-height: 1rem; }
	
.\!text-xs{
	font-size: 0.75rem !important;
	line-height: 1rem !important; }
	
.text-base{
	font-size: 1rem;
	line-height: 1.5rem;}
	
.text-xl{
	font-size: 1.25rem;
	line-height: 1.75rem;}
	
.text-3xl{
	font-size: 1.875rem;
	line-height: 2.25rem;}	

.text-4xl{
	font-size: 2.875rem;
	line-height: 3.25rem;}	

/* ------- text align --------- */
.left{text-align:left;}
.center{text-align:center;}

/* ------- text color ------- */
.text-black{color:#000 !important;}

.font-bold{font-weight:700;}
/* ---------- buttons --------- */
.btn-primary, .btn-outline-primary{
	border:1px solid #0F925E;
	background:#0F925E;
	color:#fff;
	padding:10px 15px;
	-webkit-transition: all .3s;
    transition: all .3s;
    display:block;
	text-align:center;
}
.btn-primary:hover, .btn-outline-primary:hover{
	color:#fff;
	background:#06774a;
	border-color:#0F925E;
}
.btn-primary svg{
	fill:#FFF;
	margin-left:10px;
	-webkit-transition: all .3s;
    transition: all .3s;
}
.btn-primary:hover svg{
	margin-left: 15px;
}
.btn-secondary{display:block;background:transparent;}

.btn-secondary svg{
	opacity: 1;
    fill: #125a47;
    margin-left: 10px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn-secondary{color:#000;}
.btn-secondary.text-white{color:#FFF;}
.btn-secondary.text-green{color:#0F925E;}

.btn-secondary.text-white svg, .btn-secondary.text-white:hover svg{
	fill: #fff;
}
.btn-secondary:hover{color: #0F925E;background:transparent}

.btn-secondary:hover svg{
	fill: #0F925E;
    opacity: 1;
    margin-left: 15px;
}

/* -------- object fit -------- */
.object-cover{object-fit: cover;}

/* ------- shapes -------- */
.parallelogram{clip-path: polygon(15% 0%, 100% 0%, 85% 100%, 0% 100%);}
.polygon-right{clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);}
.polygon-left{clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);}

/* -------- border --------- */
.border-t{border-top:1px solid;}
.border-b{border-bottom:1px solid;}

.border-light{border-color:#B6B7B7;}
/* ------ custom css ------- */
.diensten{
	position: absolute;
    width: auto;
    left: 5%;
    right: 5%;
    bottom: 5%;
}
.owl-realisaties .owl-stage{display:flex;height:auto;}
.realisatie:hover .realisatie-img{transition: 0.5s all ease-in-out;transform: scale(1.05);}
.realisatie-img{transition: 0.5s all ease-in-out;}
.product-card:hover .thumbnail{transition: 0.5s all ease-in-out;transform: scale(1.05);}

.thumbnail{height:300px;}
.thumbnail .attachment-post-thumbnail{width:100%; height:100%; object-fit:cover; object-position: bottom;}

.cursor-pointer:hover{cursor:pointer}

/* ------------- MOBILE ---------------- */
@media only screen and (max-width: 818px) {
	/* ------- display ------- */
	.sm\:hidden{display:none;}
	
	/* ------- flex ------- */
	.sm\:flex-col{flex-direction:column;}
	.sm\:flex-row{flex-direction:row;}
	.sm\:flex-col-reverse{flex-direction: column-reverse;}
	
	
	.sm\:items-start{align-items: flex-start;}
	
	/* -------- width -------- */
	.sm\:w-50{width:50%;}
	.sm\:w-full{width:100%;}
	
	/* ------ MAX WIDTH ------ */
	.sm\:max-w-60{max-width:60%;}
	.sm\:max-w-full{max-width:100%;}
	
	/* ------- PADDDING ------ */
	.sm\:p-0{padding:0;}
	.sm\:p-5{padding:5%;}
	.sm\:pt-5{padding-top:5%;}
	.sm\:px-0{padding-left:0;padding-right:0}
	
	
	/* ------ CUSTOM CSS ------- */
	.realisatie-slider {
    	margin-top: 0;
    	padding: 5% 0;
    }
    .realisatie img{
    	height:200px;
    }
	.entry-header-home p {
    	display: none;
	}
	.background {
    	display: none;
	}
	.entry-header-home{
		min-height:auto;
	}
	.entry-header-home h1, .entry-header-home span, .entry-header-home .btn-secondary.text-white{
		color:#0a2d22 !important;
	}
	.entry-header-home .btn-secondary.text-white svg{
		fill:#0a2d22 !important;
	}
	.btn-primary, .entry-header-home-content {
    	width: 100%;
	}
	.entry-header-home > div {
    	padding: 0;
	}
	.btn-primary.mr-4{
		margin-right:0 !important;
	}
	
}


/* woocommerce */
#woocommerce-wrapper .col-md {
    padding: unset;
}
.product-card{
	border: 1px solid #f3f3f3;
    border-bottom: 3px solid #0F925E;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 20%);
    -webkit-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    -ms-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);}
    
/* variations */  
.variations select{
    background: #F5F5F5;
    height: 40px;
    border:none;
    border-bottom: 2px solid #0F925E !important	;
    margin-bottom: 10px;
    width: 100%;
    font-size:0.75rem !important;
    text-transform:uppercase;
	border-radius:0 !important;
	color:#000 !important;
} 

.woocommerce .quantity .qty {
    width: auto !important;
    text-align: center;
    background: #F5F5F5 !important;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid #0F925E !important;
    min-width:75%;
    color: #000 !important;
}

.quantity label {
    width: 100%;
    height: 100%;
    clip-path: none;
    position: relative !important;
    clip: unset;
}

img.ajax-loading {
    width: 20px;
}
.woocommerce div.product form.cart {
    margin-bottom: 0;
}
.yith_ywraq_add_item_response_message{
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    letter-spacing: 0.1em;
    background-color: #F5E96B;
    display:inline-block;
}


.yith_ywraq_add_item_browse_message a:hover {
    background: #0F925E !important;
}

.yith_ywraq_add_item_browse_message a{
font-weight:400 !important;
background: #0F925E;
    margin: 15px 0;
    padding: .618em 1em;
    width:100%;
    display:block;
    color:#FFF;
    text-transform: math-auto;
}
a.add-request-quote-button.button{
text-transform: math-auto;
}


.yith-ywraq-add-to-quote{
width:100%;
text-transform: uppercase;
text-align:center;}

a.add-request-quote-button.button {
    width: 100%;
        font-weight: 400;
}
.woocommerce-tabs{
	display:none;}
    
.related.products {
    clear: both;
}
td.product-subtotal{
	display:none !important;
}

.related .add-to-cart-container{
display:none;}

li.product.type-product {
    border: 1px solid #f3f3f3;
    border-bottom: 3px solid #0F925E;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 20%);
    -webkit-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
    -ms-box-shadow: 0px 3px 15px rgb(0 0 0 / 20%);
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product{
	margin:0 15px;
    width: calc(25% - 2 * 15px);
    padding-bottom:1rem;
}

.related img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
    height: 300px !important;
    width: 100% !important;
    object-fit: cover !important;
}
.related h2.woocommerce-loop-product__title{
padding:0 5% !important;
}
.summary .btn.btn-outline-primary {
    display: none;
}
span.price {
    background: #F5E96B;
    display: flex;
    padding: 0 !important;
    margin: 5%;
    color: #000 !important;
    width: fit-content;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    text-transform:uppercase;
    letter-spacing: 0.1em;
}

/* filter dropdowns */
.nested {
  	display: none;
}
.active {
  	display: block;
}
.caret::before {
  	content: '‹';
  	color: black;
  	display: inline-block;
  	margin-right: 6px;
    float: right;
	transform: rotate(-90deg);

}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  	transform: rotate(90deg);
}

/* jouw offerte */
.woocommerce.ywraq-wrapper {
    padding: 5%;
}
td.product-quantity label, th.product-subtotal, td.product-subtotal {
    display: none;
}
.woocommerce a.remove{
	color:#0F925E !important; 
}
.woocommerce a.remove:hover{
	background:#0F925E !important;
}
	
.woocommerce table.shop_table{
	border:none;
}

.yith-ywraq-mail-form-wrapper {
    background: #F5F5F5 !important;
    border-bottom: 2px solid #0F925E;
}

:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button{
	color:#fff !important;
	background:#0F925E !important;
	border-color:#0F925E !important;
	font-weight:400;
	border-radius:0 !important;
	width:100%;
	padding:15px;
	font-size:1rem !important;
	}
	
.woocommerce table.shop_table th, .yith-ywraq-mail-form-wrapper label{
font-size:0.75rem !important;
text-transform:uppercase;
letter-spacing:1px;
font-weight:400;}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    border: none;
    padding: 15px;
}
td.product-thumbnail {
    max-width: 150px;
}
.wc-block-components-notice-banner.is-success {
    margin: 5%;
}
.description.cat--description {
    padding: 5%;
}

.warning{
	background:#9CC9A5;
	padding:15px;
	width:100%;
	color:#FFF;
}
li.text-green {
    color: #0f925e;
}

.nieuws .sidebar{
	width:20%;
	margin-right:5%;
}
ul.sidebar--filter {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.sidebar--filter li {
    padding: 10px 0;
    border-bottom: 1px solid #F5F5F5;
}
.clear--both{
	clear:both;
}
.product-description{
	font-weight: 400;
    font-size: 1rem;
}
.product-description ul{
	list-style:none;
	padding:0;
}
.product-description h2 {
    font-size: 1.2rem;
}