/* 
Theme Name: The Studio Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Studio Child is a child theme of The Studio
Author: The Studio
Author URI: https://www.the-studio.be
Template: thestudio
Version: 1.0.1
Text Domain: thestudio-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

@import url("buttons.css");

/*------------------------------------*\
	WEBSITE - Geef de max breedte van de website en font-sizes.
\*------------------------------------*/

/* Geef je website breedte (tel padding-inline grootte erbij op) aan en de font-size van je bodytekst */
:root {
	/* Breedte website (alleen nummers) */
	--min-width-site: 640;   /* px voor minimale breedte van de website */
	--max-width-site: 1384;  /* px voor maximale breedte van de website (+ --max-font-size * 4) */
	
	/* Font schalen (alleen nummers) */
	--min-font-size: 13;     /* px voor minimum font-size */
	--max-font-size: 16;     /* px voor maximum font-size */  
}

/* Padding breedte. Dit gaat dus af van je maximale breedte van de website */
.e-con.e-flex > .e-con-inner, .e-con.e-grid > .e-con-inner {
	padding-inline: 2em;
}

@media only screen and (max-width:880px) {
	.e-con.e-flex > .e-con-inner, .e-con.e-grid > .e-con-inner {
		padding-inline: 1em;
	}
}



/*------------------------------------*\
	ADD YOUR CUSTOM STYLES HERE
\*------------------------------------*/

.jet-smart-filters-select.jet-filter .jet-select {
	max-width: inherit!important;
}

.jet-smart-filters-select .jet-select__control, .custom-select-dropdown {
	width: 13.5em!important;
	height: 3.5em!important;	
}

@media only screen and (max-width:940px) {
.jet-smart-filters-select .jet-select__control, .custom-select-dropdown {
	width: 90vw!important;
	height: 3.5em!important;	
}
}

select.jet-select__control, select.custom-select-dropdown {
	border:2px solid #E7E8E9;
	border-radius:.5em;
	font-size:1em;
	font-weight: 500;
	color:var(--e-global-color-primary);
}

.apply-filters__button {
	margin-top:0px!important;
	height: 3.5em!important;
	border:none;
	padding:0px 1.5em;
	border-radius:.5em;
}

.apply-filters__button:hover
 {
	background-color:rgba(255,255,255,0);
	box-shadow: inset 0 0 0 0.07em var(--e-global-color-primary);
	color:var(--e-global-color-primary);
}

.apply-filters__button:focus {
	background-color: var(--e-global-color-primary);
	color:white;
}


.labelWoning:before {
	content: url(/wp-content/themes/thestudio-child/img/i-labelwoning.svg);	
}

.labelAppartement:before {
	content: url(/wp-content/themes/thestudio-child/img/i-labelappartement.svg);	
}




/* Dak-icoon */
.dak:after {
	content: url(/wp-content/themes/thestudio-child/img/dak.svg);
	width: 4em;
	height: auto;
	top:-2em;
	
	position: absolute;
	right:0px;
}


/* Divider Vastgoedadvies en de rest */
li.menu-item:not(.m-div):after {
	display: none;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:last-child):after {
	margin-inline:1em;
}

.menu-zwart .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:last-child):after {
	border-color:white;
}

.menu-wit .elementor-nav-menu--layout-horizontal .elementor-nav-menu>li:not(:last-child):after {
	border-color:var(--e-global-color-primary);
}

/* Onderlijn menu */
.elementor-item:after, .elementor-item.elementor-item-active:after{
	content: "";
	width: 100%;
	height: 1.5px;
	display: inline;
	position: absolute;
	bottom: -.2em;
	
	transition:.2s!important;
	opacity: 0;
}

.elementor-item:hover:after {
	bottom:0em;
	opacity: 1;
}

.menu-wit .elementor-item:after, .menu-wit .elementor-item.elementor-item-active:after {
	background: var(--e-global-color-primary);
}

.menu-zwart .elementor-item:after, .menu-zwart .elementor-item.elementor-item-active:after {
	background: white;
}

/* Onderlijn menu wanneer actief */
.elementor-item.elementor-item-active:after {
	content: "";
	width: 100%;
	height: 1.5px;
	display: inline;
	position: absolute;
	bottom: 0em;
	background: var(--e-global-color-primary);
	opacity: 1;
}

.menu-wit .elementor-item.elementor-item-active:after {
	background: var(--e-global-color-primary);
}

.menu-zwart .elementor-item.elementor-item-active:after {
	background: white;
}

.elementor-item.elementor-item-active:hover:after{
	bottom:-.2em;
	opacity: 0;
}


/* Label boven 'Te Huur' */
li.m-nutehuur:not(.sub-menu) a:before {
	content: "Nieuw";
	background:var(--e-global-color-accent);
	font-size:10px;
	border-radius:.2em;
	padding:.8em .6em;
	line-height: 0px;
	top:-20px;
	opacity: 1!important;
	
	color:var(--e-global-color-primary);
}

li.m-nutehuur:not(.sub-menu) a:before {
	box-shadow: 0 0 0 0 rgba(222, 220, 0, 1);
	animation: pulse 5s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(222, 220, 0, 0.7);
	}

	25% {
		box-shadow: 0 0 0 10px rgba(222, 220, 0, 0);
	}

	40% {
		box-shadow: 0 0 0 0 rgba(222, 220, 0, 0);
	}
	
	100% {
		box-shadow: 0 0 0 0 rgba(222, 220, 0, 0);
	}
}

/* Menu dropdown */
li a.elementor-sub-item:before {
	display: none;
}

ul.sub-menu a:hover {
	text-decoration: underline;
}




/* Labels */

div.kijker-label span, div.kijker-label-xl span, div.kijkers-label span, div.kijkers-label-xl span{
	border-radius: .25em;
	padding:4px 6px;
	font-size:10px;
	line-height: 100%;
}

div.kijker-label-xl span, div.kijkers-label-xl span {
	font-size:12px!important;
	padding:5px 7px!important;
}

.project-categorie-gerealiseerd div.kijker-label span, .project-categorie-gerealiseerd div.kijker-label-xl span, .project-categorie-gerealiseerd div.kijkers-label span, .project-categorie-gerealiseerd div.kijkers-label-xl span {
	background: var(--e-global-color-accent);
	color:var(--e-global-color-primary);
}

.project-categorie-inontwikkeling div.kijker-label span, .project-categorie-inontwikkeling div.kijker-label-xl span, .project-categorie-inontwikkeling div.kijkers-label span, .project-categorie-inontwikkeling div.kijkers-label-xl span {
	background: var(--e-global-color-secondary);
	color:white;
}

/* Loop Carrousel */
.elementor-widget-loop-carousel.elementor-element :is(.swiper,.swiper-container)~.elementor-swiper-button-prev {
	display: none;
}

.elementor-widget-loop-carousel.elementor-element :is(.swiper,.swiper-container)~.elementor-swiper-button-next {
	background: #393B3E;
	padding:.8em;
	border-radius:.25em;
	left:-4em;
	position: absolute;
	right:inherit;
}

.elementor-widget-loop-carousel.elementor-element :is(.swiper,.swiper-container)~.elementor-swiper-button-next:hover {
	background: white;
}

/* Proces tags */
.proces div {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	gap: 1em;
}

.proces span {
	background:white;
	line-height: 100%;
	font-size:0.875em;
	box-shadow: inset 0 0 0 0.05rem var(--e-global-color-primary);
	border-radius:10em;
	padding:.8em 1.2em;
}

.lijst-tehuur span.elementor-icon-list-text {
	background:var(--e-global-color-primary);
	color:white;
	padding-inline-start: 0px!important;
	line-height: 100%!important;
	height: 14px;
	width: 14px;
	font-size:10px!important;
	display: flex!important;
	justify-content: center;
	align-items: center;
	border-radius:.25em;
}

/*------------------------------------*\
	FORMULIEREN
\*------------------------------------*/

/* De kleuren en border-radius van de lijnen rondom de velden */
:root {
	--formline:inset 0 0 0 0.1rem rgba(0,0,0,0.1);
	--formlinefocus:inset 0 0 0 0.1rem rgba(0,0,0,1);
	--fieldsborderradius:.2em;
}

/* Het algemene uiterlijk van formulierveld */
.elementor-form input[type=date], .elementor-form input[type=email], .elementor-form input[type=number], .elementor-form input[type=password], .elementor-form input[type=search], .elementor-form input[type=tel], .elementor-form input[type=text], .elementor-form input[type=url], .elementor-form select, .elementor-form textarea, .elementor-field-group .elementor-field-textual, .elementor-field-group .elementor-select-wrapper select{
	border:none;
	min-height:0px;
	border-radius:var(--fieldsborderradius);
	box-shadow:var(--formline);
	
	background-color:white;
	padding: 1em;
	font-size:1em;
}

/* Wat er gebeurd als je op een formulierveld klikt */
.elementor-form input[type=date]:focus, .elementor-form input[type=email]:focus, .elementor-form input[type=number]:focus, .elementor-form input[type=password]:focus, .elementor-form input[type=search]:focus, .elementor-form input[type=tel]:focus, .elementor-form input[type=text]:focus, .elementor-form input[type=url], .elementor-form select:focus, .elementor-form textarea:focus, .elementor-field-group .elementor-field-textual:focus {
	border:none;
	box-shadow: var(--formlinefocus);
}

/* Kleur tekst wannneer een veld is ingevuld */
.elementor-widget-form .elementor-field-group .elementor-field {
	color:var(--e-global-color-primary);
}

/* Kleur van de placeholders */
input::placeholder, textarea::placeholder {
	color:var(--e-global-color-text)!important;
}

/* Ruimtes van formulier labels */
label.elementor-field-label {
	margin-block:.5em;
}

.e-form__buttons, .e-form__buttons__wrapper {
	margin-top:1em;
	justify-content:space-between;
}

/*--------*\
/* CHECKBOX & RADIO */

:root {
	--groottebox:1.25em;
}

/* Uiterlijk van de Checkbox en Radio velden */
.elementor-form input[type="checkbox"], .elementor-form input[type="radio"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	display: inline-block!important;
	position: relative;
	
	background:white;
	width: var(--groottebox);
	height: var(--groottebox);
	margin-right: .5em;
	box-shadow:var(--formline);
}

/* Uiterlijk van de Checkbox en Radio velden wanneer ze actief zijn */
.elementor-form input[type="checkbox"]:before, .elementor-form input[type="radio"]:before {
	content:"";
	opacity: 0;
	position: absolute;
	
	width: var(--groottebox);
	height: var(--groottebox);
	background:var(--e-global-color-primary);
	background-image:url(/wp-content/themes/thestudio-child/img/check-w.svg);
	background-repeat: no-repeat;
	background-size:calc(var(--groottebox) / 1.5);
	background-position:center center;
}

.elementor-form input[type="checkbox"], .elementor-form input[type="checkbox"]:before {
	border-radius:var(--fieldsborderradius);
}

.elementor-form input[type="checkbox"]:checked:before, .elementor-form input[type="radio"]:checked:before{
	opacity: 1;
}

.elementor-message:before {
	display: none;
}

.elementor-field-subgroup .elementor-field-option {
	display:flex;
	align-items:center;
}

.elementor-field-group .elementor-field-subgroup {
	gap:10px;
}

/* Radio */

.elementor-form input[type="radio"], .elementor-form input[type="radio"]:before {
	border-radius:50%;
}

/* Select */

i.eicon-caret-down {
	transform: rotate(90deg)!important;
}

.eicon-caret-down:before {
	 content: '\e87d'!important; /* https://elementor.github.io/elementor-icons/ */
}

.elementor-select-wrapper .select-caret-down-wrapper{
	inset-inline-end: 20px;
}

.elementor-select-wrapper .select-caret-down-wrapper i {
	font-size:12px;
}

/* Zorgt ervoor dat de Select net zo hoog blijft als andere velden */
.elementor-field-group .elementor-select-wrapper select {
	line-height: 1em;
}

/* File Upload */

input {
	
}

.elementor-field-type-upload input[type="file"]::file-selector-button {
	margin-right:1em;
	//margin-top: 0.5em;
	color: white;
	padding: 0.5em 1em;
	border:none;
	border-radius:var(--fieldsborderradius);
	background:var(--e-global-color-text);
	transition: .2s;
	cursor: pointer;
}

.elementor-field-type-upload input[type="file"]::file-selector-button:hover {
	background:var(--e-global-color-secondary);
}

/*------------------------------------*\
	MOGELIJKHEDEN
\*------------------------------------*/

/* Underline animatie V1 */

p:last-child {
	margin-bottom:0em;
}

p a {
	color:var(--e-global-color-accent);
	position: relative;
}

p a:hover {
	color:var(--e-global-color-primary);	
}

p a:after {
	content: "";
	width: 100%;
	height: 1px;
	background: var(--e-global-color-accent);
	display: inline;
	position: absolute;
	bottom: .05em;
	transition: .2s;
	left:0px;
}

p a:hover:after {
	background:inherit;
	bottom: 0px;
}


/* Underline animatie V2  */

/* p {
	margin-bottom:1.5em;
}

p a {
	font-weight:bold;
	color:var(--e-global-color-primary);
	position:relative;
	padding-bottom:.1em;
	border-bottom:2px solid rgba(41,48,57,0.1);
	overflow:hidden;
	text-decoration:none!important;
}

p a:hover{
	color:var(--e-global-color-primary);
}

p a::after {
	content: "";
	position:absolute;
	left:0;
	bottom:-.1em;
	width:100%;
	height:2px;
	background:var(--e-global-color-accent);
	
	transform: scaleX(0);
	transform-origin:right;
	transition:transform 300ms ease-in-out;
}

p a:hover::after {
	transform: scaleX(1);
	transform-origin:left;
} */

/*------------------------------------*\
	AFBEELDINGEN
\*------------------------------------*/

.reveal.fadeIn * {
	opacity: 1;
	animation: reveal cubic-bezier(0.75, 0, .25, 1) forwards;
   transform-origin: 100% 0%;
   animation-duration: 1.5s;
   -webkit-animation-duration: 1.5s;
}
   
@keyframes reveal {
	   0% {
		   clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
	   }
	   
	   100% {
		   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	   }
}

/*------------------------------------*\
	MENU
\*------------------------------------*/


.menu-item-has-children:hover .sub-menu {
	opacity: 1;
		animation: sub cubic-bezier(.00,.66,.75,1) forwards;
	   transform-origin: 100% 0%;
	   animation-duration: .3s;
	   -webkit-animation-duration: .3s;
	   padding-block: .5em;
}

@keyframes sub {
	   0% {
		   transform: translateY(-8px);
		   opacity: 0;
	   }
	   
	   50% {
		   opacity: 1;
	   }
	   
	   100% {
			  transform: translateY(0px);
			  opacity: 1;
		  }
}

.elementor-nav-menu .sub-arrow {
	padding:3px!important;
	color:var(--e-global-color-accent);
	font-size:calc(1em + .125em);
	display: none;
}

.elementor-nav-menu--dropdown a {
	padding:1em 1.25em;
}

ul.elementor-nav-menu--dropdown a, ul.elementor-nav-menu--dropdown a:focus, ul.elementor-nav-menu--dropdown a:hover {
	border-inline: 0px solid transparent;
	border-inline-start-width:0px!important;
}

.elementor-nav-menu ul li a {
	justify-content: space-between;
	min-width:100px;
	transition:.2s!important;
}

/*------------------------------------*\
	BETTER ANIMATIONS
\*------------------------------------*/

@keyframes fadeDown {
	from {
		opacity: 0;
		transform: translate3d(0,-25%,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.elementor-element.fadeInDown {
	animation-name: fadeDown
}

@keyframes fadeLeft {
	from {
		opacity: 0;
		transform: translate3d(-25%,0,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.elementor-element.fadeInLeft {
	animation-name: fadeLeft
}

@keyframes fadeRight {
	from {
		opacity: 0;
		transform: translate3d(25%,0,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.elementor-element.fadeInRight {
	animation-name: fadeRight
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translate3d(0,25%,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.elementor-element.fadeInUp {
	animation-name: fadeUp
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translate3d(0,-25%,0)
	}

	to {
		opacity: 1;
		transform: none
	}
}

.elementor-element.slideInDown {
	animation-name: slideDown
}

@keyframes slideLeft {
	from {
		transform: translate3d(-25%,0,0)
	}

	to {
		transform: none
	}
}

.elementor-element.slideInLeft {
	animation-name: slideLeft
}

@keyframes slideRight {
	from {
		transform: translate3d(25%,0,0)
	}

	to {
		transform: none
	}
}

.elementor-element.slideInRight {
	animation-name: slideRight
}

@keyframes slideUp {
	from {
		transform: translate3d(0,25%,0)
	}

	to {
		transform: none
	}
}

.elementor-element.slideInUp {
	animation-name: slideUp
}

/* Voor animaties */
html {
	overflow-x: hidden;
}

/*------------------------------------*\
	COOKIEYES
\*------------------------------------*/

.cky-footer-wrapper div:last-child {
	display: none !important;
}

/* CookieYes Oud */
/* #cookie-law-info-bar {
	border-radius:10px;
	padding:24px 24px!important;
}

.cli-tab-header a.cli-nav-link, a.cli-privacy-readmore {
	font-weight:bold;
}

.cli-style-v2 {
	line-height:24px;
	font-family:var( --e-global-typography-accent-font-family ), Sans-serif;
}

.cli-bar-message:before, .fa-zhihu:before {
	content:"";
	width: 40px;
	height: 40px;
	background-image:url(http://localhost:8888/standaard/wp-content/themes/dubbelduck-child/img/cookie-bar.svg);
	background-repeat: no-repeat;
	background-position:center center;
	margin-bottom:20px;
	display:block;
}

.cli-bar-btn_container {
	gap:10px;
	margin-top:20px!important;
}

.cli-plugin-button, .wt-cli-privacy-accept-btn {
	margin:0px!important;
	font-family:var( --e-global-typography-primary-font-family ), Sans-serif;
	transition:.2s;
}

.wt-cli-ckyes-footer-section {
	display:none;
} */

/*------------------------------------*\
	GENERAL
\*------------------------------------*/

/* Hide header */
header, header.site-header {
	display:none;
}

/* Zet iconen van lijst-widget op goede hoogte */
.elementor-widget .elementor-icon-list-item {
	-webkit-box-align: normal;
	-ms-flex-align: normal;
	align-items: normal;
}

.elementor-widget .elementor-icon-list-icon i {
	margin-top:.7em;
}

/* Lijst in text-editor */
.elementor-widget-text-editor ul li::marker {
	content: "\e89e";
	font-size:1em;
	font-family: eicons;
	font-weight: 900;
}
.elementor-widget-text-editor ul {
	padding-inline-start: 25px;
}

.elementor-widget-text-editor ul li {
	padding-left: 5px;
	padding-bottom: 10px;
	line-height: 1.8em;
}

/* Captcha */
.grecaptcha-badge {
	visibility: hidden;
}

.cky-btn-revisit-wrapper {
	display: none!important;
}

/* Verberg class */
.verberg {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* Haalt blauwe focus van buttons weg */
*:focus {
	outline:none!important;
}

/* Pop-up */
.elementor-popup-modal .dialog-close-button {
	background: var(--e-global-color-primary);
	border-radius: 50%;
	padding: .5em;
	color:white;
}

.elementor-popup-modal .dialog-close-button:hover {
	transform:scale(1.1);
}

.elementor img {
	border-radius:0em;
}



/* 
@media only screen and (max-width: 1280px) {
}

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

@media only screen and (max-width: 640px) {
}
*/