/* 
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
*/

.corner {
	clip-path: polygon(calc(100% - 2.5em) 0, 100% 2.5em, 100% 100%, 0 100%, 0 100%, 0 0);
}

.nftt-column {
	filter: grayscale(1);
	transition:.5s;
	width:33.33%;
	height:25em;
	white-space: nowrap;
}

.nftt-column .nftt-label {
   opacity: 0;
	bottom:-1em;
	transition:.6s;
}

.nftt-column:hover {
	filter: grayscale(0);
	width:75%;
}

.nftt-column:hover .nftt-label {
	opacity: 1;
	bottom:0em;
}

@media only screen and (max-width:1200px) {
.nftt-column {
	filter: inherit;
	transition:.5s;
	width:100%;
	height:25em;
	white-space: nowrap;
}
.nftt-column .nftt-label {
   opacity: 1;
	bottom:0em;
	transition:.6s;
}

.nftt-column:hover {
	filter: grayscale(0);
	width:100%;
}
}

/* Mark */

mark {
	color: inherit;
	background: none;
	background-image: linear-gradient(90deg, var(--e-global-color-accent), var(--e-global-color-accent));
	  background-position: bottom .15em left;
	  background-repeat: no-repeat;
	  background-size:0% .7em;
}

@media only screen and (max-width: 640px) {
	//mark {
		background-image: linear-gradient(90deg, var(--e-global-color-accent), var(--e-global-color-accent));
		  background-position: bottom .25em left;
		  background-repeat: no-repeat;
		  background-size:0% .7em;
	}
}

.line.fadeIn * {
	opacity: 1;
	animation: bgline cubic-bezier(0.75, 0, .25, 1) forwards;
   transform-origin: 100% 0%;
   animation-duration: 1.5s;
   -webkit-animation-duration: 1.5s;
   animation-delay: .3s;
   -webkit-animation-delay:.3s;
}

 
@keyframes bgline {
	   0% {
		   background-size:0% .25em;
	   }
	   
	   100% {
		   background-size:100% .25em;
	   }
}

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

/* Hide the ENTIRE container if there are no loop items inside it */
.hide-if-loop-empty:not(:has(.e-loop-item)) {
  display: none !important;
}

.product-choice {
	box-shadow: inset 0 0 0 1px var(--e-global-color-d9ea39c)!important;
	transition:.2s;
	aspect-ratio: 16 / 9;
}

.product-choice:hover {
	opacity: 1!important;
}

.product-choice-raster:hover .product-choice {
	opacity:.3;
}

/*------------------------------------*\
	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: 1680;  /* px voor maximale breedte van de website (tel padding-inline grootte erbij) */
	
	/* Font schalen (alleen nummers) */
	--min-font-size: 12;     /* px voor minimum font-size */
	--max-font-size: 20;     /* 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;
	}
}

/*------------------------------------*\
	BUTTONS - Geef een button de class '.xs' voor klein en '.xl' voor groot
\*------------------------------------*/

/* Het algemene uiterlijk van een normale knop */
.elementor-widget-button .elementor-button, .elementor-widget-form .elementor-button[type="submit"], .cli-plugin-button, .wt-cli-privacy-accept-btn {
	position:relative;
	
	font-family:var( --e-global-typography-accent-font-family ), Sans-serif;
	text-transform: uppercase;
	font-size:1em;
	line-height: 1em;
	font-weight: 600;

	padding: 0.9em 1em;
	border-radius:0em;
	//box-shadow: inset 0 0 0 0.1em var(--e-global-color-primary); /* Zet een lijn rondom de knop */
	
	
	clip-path: polygon(calc(100% - .5em) 0, 100% .5em, 100% 100%, 0 100%, 0 100%, 0 0);
	transition:all .3s;
}

.elementor-button:hover, .elementor-widget-form .elementor-button[type="submit"]:hover, .cli-plugin-button:hover, .wt-cli-privacy-accept-btn {
	clip-path: polygon(100% 0, 100% 0, 100% 100%, .5em 100%, 0 calc(100% - .5em), 0 0);
	font-size:1em;
}

/* Het uiterlijk van een kleine knop (geef de knop de class .xs) */
.xs.elementor-widget-button .elementor-button {
	padding:0em;
	background-color:rgba(255,255,255,0)!important;
	color:var( --e-global-color-accent );
	font-size:1em;
	clip-path:none;
}

/* Button text layout */
.xs.elementor-widget-button .elementor-button-text {
  display: flex;
  gap: .75em;
  align-items: center;
  color:var(--e-global-color-primary);
}

/* SVG icon */
.xs.elementor-widget-button .elementor-button-text::after {
  content: "";
  display: inline-block;
  width: 2.3rem;
  height: 1.7rem;

  background-image: url("/wp-content/themes/thestudio-child/img/button_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* animation */
  transform: translateX(0);
  transition: transform 0.3s ease;
}

/* Hover effect */
.xs.elementor-widget-button .elementor-button:hover .elementor-button-text::after {
  transform: translateX(0.25em);
}



/* Het uiterlijk van een kleine knop (geef de knop de class .xl) */
.xl.elementor-widget.elementor-widget-button {
	font-size:1.25em;
}

.anchor .elementor-button {
	font-size:.8em;
	padding:.8em 1em;
	clip-path:none;
	background:none!important;
	border-radius:2em;
	line-height:1em;
	box-shadow: inset 0 0 0 1px rgba(252, 243, 232,.2);
	color:var(--e-global-color-primary);
}

.anchor .elementor-button:hover {
	background:var(--e-global-color-accent)!important;
	box-shadow: inset 0 0 0 1px var(--e-global-color-accent);
	color:var(--e-global-color-primary);
	
}

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

/* De kleuren en border-radius van de lijnen rondom de velden */
:root {
	--formline:inset 0 0 0 0.1rem rgba(252, 243, 232,.1); /* breedte lijn en kleur van formulier velden */
	--formlinefocus:inset 0 0 0 0.1rem rgba(252, 243, 232,1); /* breedte lijn en kleur van formulier velden op focus */
	--fieldsborderradius: 0em; /* radius van de velden */
	
body {
	--formlinetexttype: var(--e-global-color-primary); /* kleur van de tekst wanneer je typt */
	--formlinetext: var(--e-global-color-text); /* kleur van de placeholder tekst */
	--formlinetextopacity: .2; /* doorzichtigheid van de placeholder tekst */
}
}

/* 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{
	min-height:0px;
	border:none;
	border-radius:var(--fieldsborderradius);
	box-shadow:var(--formline);
	
	background-color:rgba(255,255,255,0)!important;
	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);
}

/* Ruimtes van formulier labels */
label.elementor-field-label { margin-block:.8em; }
/* Kleur tekst wannneer een veld is ingevuld */
.elementor-widget-form .elementor-field-group .elementor-field { color: var(--formlinetexttype); }
/* Kleur van de placeholders */
input::placeholder, textarea::placeholder { color: var(--formlinetext)!important; opacity: var(--formlinetextopacity)!important; }

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

:root {
	--groottebox:1.2em;
	--boxrightmargin:.4em;
}

/* Uiterlijk van de Checkbox en Radio velden */
.elementor-form input[type="checkbox"], .elementor-form input[type="radio"] {	
	min-width: var(--groottebox); min-height: var(--groottebox);
	margin-right: var(--boxrightmargin);
	box-shadow:var(--formline);
	
	background:rgba(255,255,255,0);
}

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

/* Ruimte boven de verzend-knop */
.elementor-form .elementor-field-type-submit {
	margin-top:1em;
}

/* Radius van de Checkbox (hetzelfde als formulier velden) */
.elementor-form input[type="checkbox"], .elementor-form input[type="checkbox"]:before {
	border-radius:var(--fieldsborderradius);
}

/* Tekst voor het Goedkeuring veld */
.elementor-field-option label {
	font-size: calc(1em - .2em);
	margin-top:-0.05em!important;
	line-height: 1.6em!important;
}

/* Ruimte tussen de opties voor Checkbox en Radio */
.elementor-field-group .elementor-field-subgroup {
	gap:.5em;
}

/*--------*\
/* SELECT */

/* Icoon aan het eind van het Select veld */
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: 2em;
}
.elementor-select-wrapper .select-caret-down-wrapper i {
	font-size:.75rem;
}

/*--------*\
/* FILE UPLOAD */

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

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

/*------------------------------------*\
	LINKS
\*------------------------------------*/

/* Normale underline */

/* .elementor p a {
	color:var(--e-global-color-accent);
	position: relative;
	text-decoration: underline;
}

.elementor p a:hover {
	text-decoration: none;
} */

/* Underline animatie V1 */

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

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

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

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


/* Underline animatie V2  */


/* .elementor 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;
}

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

.elementor 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;
}

.elementor 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 DROPDOWN
\*------------------------------------*/

.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;
}

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

.elementor-nav-menu .sub-arrow {
	padding:0 0 0 .25em;
	color:var(--e-global-color-accent);
	font-size:calc(1em + .125em);
}

.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;
}

/*------------------------------------*\
	OPSOMMINGEN
\*------------------------------------*/

:root {
	--opsomming-icon:"\e89e";
	--opsomming-inlinestart:1.2em;
	--opsomming-paddingleft:.6em;
	--opsomming-gap:.3em;
	--opsomming-lineheight:1.8em;
}

/* 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:.8em;
}

/* Lijst in text-editor */
.elementor-widget-text-editor ul li::marker {
	content: var(--opsomming-icon); */ https://elementor.github.io/elementor-icons/ */
	font-size:1em;
	font-family: eicons;
	font-weight: 900;
}
.elementor-widget-text-editor ul {
	padding-inline-start: var(--opsomming-inlinestart);
}

.elementor-widget-text-editor ul li {
	padding-left: var(--opsomming-paddingleft);
	padding-bottom: var(--opsomming-gap);
	line-height: var(--opsomming-lineheight);
}

/*------------------------------------*\
	POP-UPS
\*------------------------------------*/

.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);
}

::selection {
  background: rgba(252, 243, 232, .9); /* selection background */
  color: var(--e-global-color-secondary);      /* selected text color */
}

::-moz-selection { /* Firefox */
  background: rgba(252, 243, 232, .9);
  color: var(--e-global-color-secondary);
}

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

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

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