/**
Theme Name: Astra Child
Author: Monkey Vision
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* VOEG JE CSS TOE EN SCHEIDT DEZE DMV DE COMMENT RIJEN ZOALS HIERDONDER,
 * PER ONDERDEEL VAN JE SITE EEN APARTE SECTIE, BV EEN SOORT STYLING VAN EEN ROW, EEN PLUGIN, ETC ETC
 * HOUDT HET OVERZICHTELIJK VOOR DE VOLGENDE LEZER
 * HOOFD ITEM? LANGE COMMENT ROW
 * SUB ITEM? KORTERE VERSIE ZOALS HIERONDER MET DE MEDIA QUERIES
*/

html {
	overflow-x:hidden;
}

/****************************************** HEADER ******************************************/

.elementor-location-header .elementor-sticky--effects {
	/* Schrijf hier je CSS als je de header een andere size wilt geven op scroll*/
	/* De laatste class zit op het header element */
}
.elementor-location-header .mobile-switch .elementor-icon-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}

.top-menu-overstag .sub-arrow i {
	color: #EE7622;
}

.sub-menu {
	padding-bottom: 15px !important;
}

.mobile-switch a {
	z-index: 20000;
}

.header-sub-text {
	color: #808080;
}

@media only screen and (max-width: 1535px) {
	.menu-column {
		display: none;
	}
	
	.menu-logo-column {
		width: 100%!important;
	}
	
	.mobile-switch {
		display: unset!important;
	}
	
	.elementor-location-header .mobile-switch .elementor-icon-wrapper {
		justify-content: end;
	}
	
	.mobile-switch .elementor-icon {
		transform: scale(1.5);
	}
	
	.mobile-switch .elementor-icon-wrapper {
		margin-top: -35px;
	}
}

@media only screen and (max-width: 1024px) {
	
	.elementor-location-header .mobile-switch .elementor-icon-wrapper{
    	justify-content: end;
    	align-items: center;
	}
	
	.mobile-switch .elementor-icon {
		transform: scale(1);
	}
	
		
	.mobile-switch .elementor-icon-wrapper {
		margin-top: 0px;
	}
}
/****************************************** HOME ******************************************/
/****************************************** HERO ******************************************/

.hero-title h2 {
	color: #1D1D1B;
	font-size: 45px;
	margin-bottom: -15px;
}

.hero-title h3 {
	font-size: 78px;
	color: #fff;
}

.hero-button span {
	align-items: center;
}


.hero-button span i {
	color: #EE7622;
}

.ab-banner-tekst .elementor-widget-container {
	text-align: left;
}
.button-svg svg {
	transform: scale(1.6);
}

@media only screen and (max-width: 1570px) {
	.db-banner-tekst .elementor-widget-container {
		font-size: 35px;
	}
	
	.db-banner-button .elementor-widget-container {
		margin: 40px 0px 80px 0px!important;
	}
}
	
@media only screen and (max-width: 1490px) {

.ab-banner-tekst {
	font-size: 30px!important;
	line-height: 41px!important;
} 
	
.ab-button .elementor-widget-container {
	padding: 0px!important;
	margin: 0px 0px 80px 0px!important;
}

.hero-title h2 {
	font-size: 35px;
}

.hero-title h3 {
	font-size: 60px;
}
	
}

@media only screen and (max-width: 1284px) {
	.vt-banner-title .elementor-widget-container {
		font-size: 50px;
	}
	
	.vt-banner-button .elementor-widget-container {
		margin: 10px 0px 80px 0px!important; 
	}
}

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

.hero-title h2 {
	font-size: 30px;
}

.hero-title h3 {
	font-size: 52px;
}
/* 
.bottom-hero-section .elementor-container {
	max-width: 1000px!important;
} */
	
/* #hero-button-1 .elementor-button-icon {
		margin-left: 70px!important;
}
	
#hero-button-2 .elementor-button-icon {
		margin-left: 32px!important;
}
	
#hero-button-3 .elementor-button-icon {
		margin-left: 14px!important;
}
	
#hero-button-4 .elementor-button-icon {
		margin-left: 89px!important;
} */
	
}

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

.hero-title h2 {
	font-size: 22px;
}

.hero-title h3 {
	font-size: 37px;
}

.db-banner-tekst .elementor-widget-container {
	font-size: 26px;
}

	.vt-banner-title .elementor-widget-container {
		font-size: 34px;
	}
	
.ab-button .elementor-widget-container {
	padding: 0px!important;
	margin: 0px 0px 25px 0px!important;
}
	
.db-banner-button .elementor-widget-container {
		margin: 40px 0px 25px 0px!important;
}
/* #hero-button-1 .elementor-button-icon {
		margin-left: 55px!important;
}
	
#hero-button-2 .elementor-button-icon {
		margin-left: 13px!important;
}
	
#hero-button-3 .elementor-button-icon {
		margin-left: 10px!important;
}
	
#hero-button-4 .elementor-button-icon {
		margin-left: 62px!important;
} */
	
.hero-button .elementor-button-content-wrapper {
	text-align: left;
}

}

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

.hero-title h2 {
	font-size: 37px;
}

.hero-title h3 {
	font-size: 62px;
}

.hero-button .elementor-button {
	width: 100%;
}
	
.button-text-align .elementor-button-content-wrapper {
	text-align: left;
}
	
.hero-button .elementor-button-content-wrapper {
	text-align: left;
}
}
	
@media only screen and (max-width: 400px) {

.hero-title h2 {
	font-size: 26px;
}

.hero-title h3 {
	font-size: 44px;
}
	
}

/****************************************** SECTION 1 ******************************************/

.hover-translatey:hover {
	transform: translatey(-5px);
	transition-duration: 1s;
}

.hover-translatey:hover .elementor-button-icon {
	transform: translatex(10px);
	transition-duration: 1s;
}

.hover-translatey .elementor-button-icon {
	transition-duration: 1s;
}

.hover-translatey {
	transition-duration: 1s;
}

.hero-button a {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: #000; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, #000 50%, #1D1D1B 50%) right;
    background-size: 200%;
    transition: .2s ease-out;
}
.hero-button a:hover {
    background-position: left;
}

.button-wonen a {
    font: 22px Arial;
    display: inline-block;
    padding: 1em 2em;
    text-align: center;
    color: white;
    background: #000; /* default color */

    /* "to left" / "to right" - affects initial color */
    background: linear-gradient(to left, #000 50%, #1D1D1B 50%) right;
    background-size: 200%;
    transition: .2s ease-out;
}
.button-wonen a:hover {
    background-position: left;
}

.wonen-button-column .elementor-button-text {
	line-height: 20px;
}
/****************************************** CONTACT SECTION ******************************************/
.gform_title {
	display: none;
}

.gform_footer {
	display: flex;
	justify-content: end;
}

.gform_button {
	font-family: "Montserrat", Sans-serif!important;
    font-size: 15px;
    font-weight: bold!important;
    text-transform: uppercase;
    background-color: #EE7622!important;
    box-shadow: -2px 16px 54px -15px rgb(238 118 34 / 72%)!important;
    padding: 18px 52px 18px 32px!important;
	transition-duration: 1s;
}

.gform_button:hover {
	transform: translatey(-10px);
	transition-duration: 1s;
}

@media only screen and (max-width: 1460px) {
	.gform_button {
		width: 100%;
	}
}



/****************************************** WONEN ******************************************/
/****************************************** WONEN BUTTON SECTION ******************************************/

.button-wonen .elementor-widget-container .elementor-button-wrapper .elementor-button .elementor-button-content-wrapper .elementor-button-text {
	text-align: start;
}


.button-wonen .elementor-widget-container .elementor-button-wrapper .elementor-button .elementor-button-content-wrapper .elementor-button-text span {
	font-family: 'Montserrat';
    font-weight: 500;
    font-size: 18px;
    color: #808080;
}
.button-wonen span {
	align-items: center;
}

.button-wonen .elementor-widget-container .elementor-button-wrapper .elementor-button .elementor-button-content-wrapper .elementor-button-icon i {
	color: #EE7622;
}

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

/****************************************** QUOTE WONEN SECTION ******************************************/

.quote-dash {
	color: #343434;
}

/****************************************** VACATURE SINGLE POST ******************************************/

.vacature-bericht h3 {
	font-family: 'Montserrat';
	font-weight: 800;
	font-size: 28px;
	text-transform: uppercase;
	color: #EE7622;
	margin-bottom: 10px;
}

.vacature-loop-button .elementor-button-text {
	text-align: start;
}


.vacature-loop-button span {
	align-items: center;
}

/****************************************** FOOTER ******************************************/
.footer-links a {
	color: #fff !important;
}

.footer-links a:hover {
	color: #EE7622 !important;
}

.elementor-location-footer .monkey-footer a {
	text-decoration:underline;
	color:white;
}

.footer-link-menu a {
	color: #FFF;
	transition-duration: 0.5s;
}

.footer-link-menu a:hover {
	color: #EE7622!important;
	transition-duration: 0.5s;
}
.footer-link {
	color: #EE7622!important;
    text-decoration: none!important;
    font-weight: bold;
}




/****************************************** HIER JOUW CUSTOM CSS ******************************************/

@media only screen and (max-width: 1024px) {
/*************** ADD TABLET ONLY CSS HERE  ***************/


}

@media only screen and (max-width: 767px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/****************************************** OWL CAROUSEL ******************************************/
.owl-carousel {
	display:block!important;
}
.owl-carousel .owl-nav button{
	height:25px;
	width:25px;
	background-repeat:no-repeat!important;
	background-size:contain!important;
	background-position:center!important;
}
.owl-carousel .owl-nav button span{
	display:none;
}
.owl-carousel .owl-nav .owl-prev{
	background-image:url('/wp-content/uploads/2022/01/Icon-ionic-ios-arrow-back.svg')!important;
}
.owl-carousel .owl-nav .owl-next{
	background-image:url('/wp-content/uploads/2022/01/Icon-ionic-ios-arrow-forward.svg')!important
}
.owl-carousel .owl-dots {
	margin: auto;
}
.owl-carousel .owl-dots .owl-dot{
	background-color:black;
	height:7px;
	width:7px;
	margin: 5px;
}
.owl-carousel .owl-dots .owl-dot.active {
	background-color:grey;
}
/****************************************** GRAVITY FORMS **************************************************/

.gform_wrapper select {
	border-color: #393939 !important;
	border-width: 2px;
	background: #000 !important;
}

.gfield_select {
	height: 50px !important;
}

.gform_body input,
.gform_body select {
	padding: 10px 15px !important;
}
.woocommerce select {
	padding:0 10px!important;
}

.gform_button {
	background-image: url(https://overstagdev.wpengine.com/wp-content/uploads/2022/03/angle-right-solid.svg)!important;
    background-size: 9px!important;
    background-repeat: no-repeat!important;
	background-position: 87% 50% !important;
}

/********************************** KLEINE VELDEN EN INPUTS *******************/
.gform_body input[type=text],
.gform_body input[type=tel] {
    border: none !important;
    border-radius: 0 !important;
    border: 2px solid #393939 !important;
    background-color: #000 !important;
    line-height: 24px !important;
}
/********************************** KLEINE VELDEN FOCUS ********************/
.gform_body input[type=text]:focus,
.gform_body input[type=tel]:focus {
    border: 1px solid #CBCBCB !important;
	box-shadow: none !important;
}
					/*bericht*/
.gform_body textarea {
    border: none;
    border-radius: 0px!important;
    border: 2px solid #393939 !important;
    background-color: #000 !important;
}
					/*selectie bericht*/
.gform_body textarea:focus {
    border: 1px solid #CBCBCB !important;
	box-shadow: none !important;
}

/******************** VALIDATIE **************************/

					/* VALID */

/* border van kleine velden validatie */
    .gform_wrapper input[type=text].valid,
	.woocommerce-input-wrapper input[type=text].valid,
	.woocommerce-input-wrapper input[type=tel].valid,
	.woocommerce-input-wrapper input[type=email].valid {
        border: 1px solid #56c92a !important;
        position: relative;
    }

/* checkmark van kleine velden validatie */
    .gform_wrapper input[type=text].valid,
	.woocommerce-input-wrapper input[type=text].valid,
	.woocommerce-input-wrapper input[type=tel].valid,
	.woocommerce-input-wrapper input[type=email].valid {
        background-image: url("/wp-content/uploads/2021/07/checkmark.svg")!important;
        background-size: 15px;
        background-position: right;
        background-position-x: 98%;
        background-repeat: no-repeat;
    }
/* border van bericht validatie */
    .gform_wrapper textarea.valid, 
	.woocommerce-input-wrapper textarea.valid{
        border: 1px solid #56c92a !important;
        position: relative;
    }
/* checkmark van bericht validatie */
    .gform_wrapper textarea.valid,
    .woocommerce-input-wrapper textarea.valid{
        background-image: url("/wp-content/uploads/2021/07/checkmark.svg")!important;
        background-size: 15px;
        background-position: right 15px;
        background-position-x: 98%;
        background-repeat: no-repeat;
    }


					/* ERROR */
/* border van kleine velden error */
    .gform_wrapper input[type=text].error,
	.woocommerce-input-wrapper input[type=text].error,
	.woocommerce-input-wrapper input[type=tel].error,
	.woocommerce-input-wrapper input[type=email].error {
        border: 1px solid #EE2B2B !important;
    }
/*error tekst onder het bericht*/
	.gform_wrapper label.error,
	html .woocommerce-input-wrapper label.errror {
		color: #cf361f!important;	
	}
/* kruisje van bericht error */
    .gform_wrapper input[type=text].error,
	.woocommerce-input-wrapper input[type=text].error,
	.woocommerce-input-wrapper input[type=tel].error,
	.woocommerce-input-wrapper input[type=email].error {
        background-image: url("/wp-content/uploads/2021/07/cross.svg")!important;
        background-size: 12px;
        background-position: right;
        background-position-x: 98%;
        background-repeat: no-repeat;
    }
/* border van tekstveld error */
	.gform_wrapper textarea.error,
	.woocommerce-input-wrapper  textarea.error{
	    border: 1px solid #EE2B2B !important;
        position: relative;
}
/* checkmark van bericht validatie */
    .gform_wrapper textarea.error,
	.woocommerce-input-wrapper textarea.error {
        background-image: url("/wp-content/uploads/2021/07/cross.svg")!important;
        background-size: 15px;
        background-position: right 15px;
        background-position-x: 98%;
        background-repeat: no-repeat;
    }

/****************************************** ALGEMENE CSS EN EFFECTS ******************************************/

.button-black-icon .elementor-button-icon i {
	color: #000;
}

.button-orange-icon .elementor-button-icon i {
	color: #EE7622;
}