/**
Theme Name: Step Closer
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: step-closer
Template: astra
*/

.rel {
    position: relative
}

.abs {
    position: absolute
}

.full {
    height: 100%;
    width: 100%
}

.flex {
    display: flex;
    flex-wrap: nowrap
}

.background-contain {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

.transition {
    transition: all .3s cubic-bezier(.65, 0, .35, 1)
}

.elementor-widget-button.blauw a.elementor-button {
    background: #0095d6 !important
}

header .header-wrapper {
    -webkit-box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1)
}

header .header-wrapper .logo-wrapper {
    width: 150px !important
}

header .header-wrapper .menu-wrapper {
    width: calc(100% - 300px) !important;
    padding: 5px 0
}

header .header-wrapper .menu-wrapper>div {
    align-items: center
}

header .header-wrapper .menu-wrapper .elementor-widget-nav-menu {
    margin: 0
}

header .header-wrapper .menu-wrapper .elementor-nav-menu {
    gap: 15px
}

header .header-wrapper .menu-wrapper .elementor-nav-menu li a {
    padding: 5px;
    color: #000;
    font-size: 18px
}

header .header-wrapper .menu-wrapper .elementor-nav-menu li a::after {
    background: #ba2127;
    height: 2px
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    header .header-wrapper .menu-wrapper .elementor-nav-menu li a {
        font-size:16px
    }
}

header .header-wrapper .menu-wrapper .elementor-nav-menu::after {
    display: none
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    header .header-wrapper .menu-wrapper .elementor-nav-menu {
        gap:10px
    }
}

header .header-wrapper .menu-wrapper .cta-text {
    position: relative;
    margin: 0 0 10px 0;
    text-align: right;
    background: #f5f5f5;
    padding: 6px 20px;
    border-radius: 5px 5px 0 5px;
    width: fit-content
}

header .header-wrapper .menu-wrapper .cta-text p {
    margin: 0
}

header .header-wrapper .menu-wrapper .cta-text p a {
    color: #000;
    text-decoration: underline
}

header .header-wrapper .menu-wrapper .cta-text p a:hover,header .header-wrapper .menu-wrapper .cta-text p a:focus {
    color: #ba2127
}

header .header-wrapper .menu-wrapper .cta-text:after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: 0;
    width: 10px;
    height: 10px;
    background: #f5f5f5;
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
    clip-path: polygon(0 0, 0% 100%, 100% 100%)
}

header .header-wrapper .menu-wrapper .elementor-widget-icon .elementor-icon-wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: #0095d6;
    border-radius: 5px;
    padding: 9px
}

header .header-wrapper .menu-wrapper .elementor-widget-icon .elementor-icon-wrapper a {
    outline: none !important
}

header .header-wrapper .img-wrapper {
    width: 150px !important
}

header .header-wrapper .img-wrapper .elementor-widget-image img {
    border-radius: 50%;
    height: 100px;
    width: fit-content
}

@media only screen and (min-width: 1024px) and (max-width: 1150px) {
    header .header-wrapper .logo-wrapper {
        width:130px !important
    }

    header .header-wrapper .menu-wrapper {
        width: calc(100% - 180px) !important
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    header .header-wrapper .menu-wrapper .elementor-nav-menu {
        gap:5px
    }

    header .header-wrapper .menu-wrapper .elementor-nav-menu li a {
        font-size: 18px
    }
}

@media only screen and (max-width: 1024px) {
    header .header-wrapper .logo-wrapper {
        width:115px !important
    }

    header .header-wrapper .menu-wrapper {
        width: calc(100% - 115px) !important;
        padding: 0px
    }
}

@media only screen and (max-width: 767px) {
    header .header-wrapper .logo-wrapper {
        width:100px !important
    }

    header .header-wrapper .menu-wrapper {
        width: calc(100% - 100px) !important
    }

    header .header-wrapper .menu-wrapper .elementor-widget-button a {
        padding: 15px 25px !important
    }

    header .header-wrapper .menu-wrapper .elementor-widget-icon .elementor-icon-wrapper {
        padding: 7px
    }
}

@media only screen and (max-width: 380px) {
    header .header-wrapper .menu-wrapper .elementor-widget-button {
        display:none
    }

    header .header-wrapper .menu-wrapper .elementor-widget-icon .elementor-icon-wrapper {
        background: #ba2127
    }
}

.mobile-offcanvas .dialog-close-button {
    outline: none !important;
    font-size: 24px !important;
    color: #000 !important
}

.mobile-offcanvas .elementor-nav-menu li a {
    font-size: 21px !important
}

.mobile-offcanvas .elementor-nav-menu li a.elementor-item-active,.mobile-offcanvas .elementor-nav-menu li a:hover,.mobile-offcanvas .elementor-nav-menu li a:focus {
    color: #ba2127 !important
}

section.subhero {
    min-height: 500px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center
}

section.subhero.project {
    min-height: 400px !important
}

section.subhero>.elementor-container {
    padding: 50px 10px
}

section.subhero .elementor-background-overlay {
    opacity: 0.5 !important
}

section.subhero .elementor-shape path {
    fill: #fff !important
}

@media only screen and (max-width: 767px) {
    section.subhero {
        min-height:400px
    }
}

.elementor-widget-heading.icon h2 {
    position: relative
}

.elementor-widget-heading.icon h2::before {
    content: "";
    height: 40px;
    width: 40px;
    display: inline-block;
    margin: 0 15px -10px 0;
    background-image: url('/wp-content/uploads/2022/05/BedMobile-Huisstijl-Element-2-600px.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat
}

@media only screen and (max-width: 767px) {
    .elementor-widget-heading.icon h2::before {
        height:30px;
        width: 30px;
        margin: 0 7px -11px 0
    }
}

.elementor-widget-heading h2 span {
    color: #ba2127
}

@media only screen and (max-width: 767px) {
    .elementor-widget-heading h2.elementor-heading-title {
        font-size:26px !important;
        line-height: 1.1 !important
    }
}

.afbeelding-links .elementor-container {
    padding: 75px 20px
}

@media only screen and (min-width: 1024px) {
    .afbeelding-links .elementor-container>.elementor-column:first-of-type .elementor-widget-image {
        padding-right:40px
    }
}

.afbeelding-links .elementor-container>.elementor-column:first-of-type .elementor-widget-image .elementor-widget-container {
    position: relative
}

.afbeelding-links .elementor-container>.elementor-column:first-of-type .elementor-widget-image .elementor-widget-container::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: -5%;
    top: 5%;
    background: #0095d6;
    z-index: 0;
    border-radius: 50px
}

@media only screen and (max-width: 767px) {
    .afbeelding-links .elementor-container>.elementor-column:first-of-type .elementor-widget-image .elementor-widget-container::after {
        border-radius:30px !important;
        left: -12px;
        top: 12px
    }
}

.afbeelding-links .elementor-container>.elementor-column:first-of-type .elementor-widget-image .elementor-widget-container img {
    position: relative;
    z-index: 2
}

@media only screen and (max-width: 767px) {
    .afbeelding-links .elementor-container>.elementor-column:first-of-type .elementor-widget-image .elementor-widget-container img {
        border-radius:30px !important
    }
}

.afbeelding-links .elementor-container>.elementor-column:last-of-type .elementor-widget-text-editor {
    margin-bottom: 0px !important
}

@media only screen and (max-width: 1024px) {
    .afbeelding-links .elementor-container {
        flex-direction:column-reverse;
        max-width: 700px !important
    }
}

@media only screen and (max-width: 767px) {
    .afbeelding-links .elementor-container {
        padding:50px 5px
    }
}

.afbeelding-links.rood .elementor-container>.elementor-column:first-of-type .elementor-widget-image .elementor-widget-container::after {
    background: #ba2127
}

.afbeelding-links.no-padding-top .elementor-container {
    padding-top: 0px !important
}

.afbeelding-rechts .elementor-container {
    padding: 75px 20px
}

@media only screen and (min-width: 1024px) {
    .afbeelding-rechts .elementor-container>.elementor-column:last-of-type .elementor-widget-image {
        padding-left:40px
    }
}

.afbeelding-rechts .elementor-container>.elementor-column:last-of-type .elementor-widget-image .elementor-widget-container {
    position: relative
}

.afbeelding-rechts .elementor-container>.elementor-column:last-of-type .elementor-widget-image .elementor-widget-container::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    right: -5%;
    top: 5%;
    background: #0095d6;
    z-index: 0;
    border-radius: 50px
}

@media only screen and (max-width: 767px) {
    .afbeelding-rechts .elementor-container>.elementor-column:last-of-type .elementor-widget-image .elementor-widget-container::after {
        border-radius:30px !important;
        right: -12px;
        top: 12px
    }
}

.afbeelding-rechts .elementor-container>.elementor-column:last-of-type .elementor-widget-image .elementor-widget-container img {
    position: relative;
    z-index: 2
}

@media only screen and (max-width: 767px) {
    .afbeelding-rechts .elementor-container>.elementor-column:last-of-type .elementor-widget-image .elementor-widget-container img {
        border-radius:30px !important
    }
}

.afbeelding-rechts .elementor-container>.elementor-column:first-of-type .elementor-widget-text-editor {
    margin-bottom: 0px !important
}

@media only screen and (max-width: 1024px) {
    .afbeelding-rechts .elementor-container {
        max-width:700px !important
    }
}

@media only screen and (max-width: 767px) {
    .afbeelding-rechts .elementor-container {
        padding:50px 5px
    }
}

.afbeelding-rechts.rood .elementor-container>.elementor-column:last-of-type .elementor-widget-image .elementor-widget-container::after {
    background: #ba2127
}

#contact .elementor-widget-text-editor {
    margin-bottom: 0px !important
}

#contact .elementor-widget-icon-list li i {
    padding: 10px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    background: #ba2127;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s cubic-bezier(.65, 0, .35, 1)
}

#contact .elementor-widget-icon-list li i::before {
    color: #fff
}

#contact .elementor-widget-icon-list li a {
    width: fit-content
}

#contact .elementor-widget-icon-list li a:hover i,#contact .elementor-widget-icon-list li a:focus i {
    background: #0095d6 !important
}

@media only screen and (max-width: 1024px) {
    #contact .elementor-container {
        row-gap:2rem
    }
}

article.projecten .elementor-widget-call-to-action .elementor-cta__content {
    padding: 25px 20px !important
}

article.projecten .elementor-widget-call-to-action .elementor-cta__content p {
    margin-bottom: 0px !important
}

article.projecten .elementor-widget-call-to-action>div {
    border-radius: 20px
}

article.projecten .elementor-widget-call-to-action .elementor-cta__button:hover {
    background: transparent
}

@media only screen and (max-width: 1024px) {
    .projecten-home .ecs-posts>article:nth-child(3) {
        display:none !important
    }
}

section.cijfers .elementor-counter .elementor-counter-number-wrapper {
    font-size: 3rem
}

section.cijfers .elementor-counter .elementor-counter-title {
    font-size: 1.1rem;
    line-height: 1.2;
    text-align: center;
    margin-top: 1rem
}

section.cijfers .elementor-inner-section .elementor-column>div {
    padding-top: 0px !important;
    padding-bottom: 0px !important
}

@media only screen and (max-width: 1024px) {
    section.cijfers .elementor-inner-section>div {
        row-gap:1.5rem
    }

    section.cijfers .elementor-counter .elementor-counter-number-wrapper {
        font-size: 2.5rem
    }
}

@media only screen and (max-width: 767px) {
    section.cijfers .elementor-counter .elementor-counter-number-wrapper {
        font-size:2rem
    }
}

@media only screen and (max-width: 767px) {
    .banner .elementor-section .elementor-container>div:last-of-type {
        display:none
    }
}

.diensten .elementor-widget-call-to-action>div {
    border-radius: 25px
}

.elementor-widget-text-editor.no-margin p {
    margin: 0px !important
}

.red-line {
    margin: -15px 0 10px 0 !important
}

.red-line img {
    width: 100% !important;
    max-width: 275px
}

@media only screen and (max-width: 767px) {
    .red-line {
        margin:0px 0 10px 0 !important
    }

    .red-line img {
        max-width: 180px
    }
}