/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* -------------------------------------------------------
   GLOBAL FORM VARS
------------------------------------------------------- */

:root {
	--theme-form-field-padding: 0 25px;
	--cnt-bg-size: 100%;
	--cnt-zoom-scale: 110%;
	--cnt-zoom-in-speed: 0.4s;
	--cnt-zoom-in-ease: ease-out;
	--cnt-zoom-out-speed: 0.7s;
	--cnt-zoom-out-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

textarea {
	--theme-form-field-padding: 20px 25px;
}

/* -------------------------------------------------------
   CONTACT FORM
------------------------------------------------------- */

.ct-contact-form {
	--theme-form-text-initial-color: rgba(255, 255, 255, 0.5);
	--theme-form-text-focus-color: rgba(255, 255, 255, 1);
	--theme-form-field-border-initial-color: transparent;
	--theme-form-field-background-initial-color: #121b1f;
	--theme-form-field-background-focus-color: #121b1f;
}

.ct-contact-form .ff-btn-submit {
	width: 100%;
	--theme-button-text-initial-color: var(--theme-palette-color-4);
	--theme-button-background-initial-color: #fff;
}

/* -------------------------------------------------------
   GLOBAL ICON STAGGER — PAGE LOAD
------------------------------------------------------- */

a svg,
button svg,
.ct-toggle-dropdown-desktop .ct-icon,
.gspb-buttonbox .gspb-buttonbox-icon > svg {
	opacity: 0;
	transform: translateY(8px);
	animation: staggerIcon 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

a svg:nth-of-type(1),
button svg:nth-of-type(1),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(1),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(1) { animation-delay: 0ms; }

a svg:nth-of-type(2),
button svg:nth-of-type(2),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(2),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(2) { animation-delay: 120ms; }

a svg:nth-of-type(3),
button svg:nth-of-type(3),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(3),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(3) { animation-delay: 240ms; }

a svg:nth-of-type(4),
button svg:nth-of-type(4),
.ct-toggle-dropdown-desktop .ct-icon:nth-of-type(4),
.gspb-buttonbox .gspb-buttonbox-icon > svg:nth-of-type(4) { animation-delay: 360ms; }

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

/* -------------------------------------------------------
   GREENSHIFT — BUTTON ICON ANIMATION
------------------------------------------------------- */

.gspb-buttonbox .gspb-buttonbox-icon {
	position: relative;
	display: inline-flex;
	overflow: visible;
}

.gspb-buttonbox .gspb-buttonbox-icon > svg {
	display: inline-block;
	animation: iconSlideIn 0.6s cubic-bezier(0.4,0,0.2,1) 0.2s both;
}

.gspb-buttonbox:hover .gspb-buttonbox-icon > svg {
	animation: iconSlideIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

.gspb-buttonbox:not(:hover) .gspb-buttonbox-icon > svg {
	animation: iconSlideOut 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes iconSlideIn {
	0% { transform: translateX(0); opacity:1; }
	35% { transform: translateX(10px); opacity:0; }
	36% { transform: translateX(-10px); opacity:0; }
	100% { transform: translateX(0); opacity:1; }
}

@keyframes iconSlideOut {
	0% { transform: translateX(0); opacity:1; }
	35% { transform: translateX(-10px); opacity:0; }
	36% { transform: translateX(10px); opacity:0; }
	100% { transform: translateX(0); opacity:1; }
}

/* -------------------------------------------------------
   BLOCKSY NAV MENU — DROPDOWN ICON ANIMATION
------------------------------------------------------- */

.ct-toggle-dropdown-desktop {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.ct-toggle-dropdown-desktop .ct-icon {
	display: inline-block;
	transition: none;
	animation: navIconIdle 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

.menu-item.menu-item-has-children:hover 
    > .ct-menu-link 
    > .ct-toggle-dropdown-desktop 
    .ct-icon {
	animation: navIconUp 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes navIconUp {
	0% { opacity:1; transform: translateY(0); }
	35% { opacity:0; transform: translateY(8px); }
	36% { opacity:0; transform: translateY(-8px); }
	100% { opacity:1; transform: translateY(0); }
}

@keyframes navIconIdle {
	0% { opacity:1; transform: translateY(0); }
	35% { opacity:0; transform: translateY(-8px); }
	36% { opacity:0; transform: translateY(8px); }
	100% { opacity:1; transform: translateY(0); }
}

/* -------------------------------------------------------
   .mttr-trigger — ICON TRIGGER ON CONTAINER HOVER
------------------------------------------------------- */

.mttr-trigger:hover .gspb-buttonbox .gspb-buttonbox-icon > svg {
	animation: iconSlideIn 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

.mttr-trigger:not(:hover) .gspb-buttonbox .gspb-buttonbox-icon > svg {
	animation: iconSlideOut 0.45s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* -------------------------------------------------------
   .mttr-ico-trigger — CONTAINER HOVER EFFECT
------------------------------------------------------- */

.mttr-ico-trigger {
	transition:
		transform .35s cubic-bezier(0.4,0,0.2,1),
		box-shadow .35s cubic-bezier(0.4,0,0.2,1);
}

.mttr-ico-trigger:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px
}
/* -------------------------------------------------------
 *    SureForms 'verplicht' icoontje verbergen
------------------------------------------------------- */
.srfm-form-container .srfm-form .srfm-required {
    display: none;
}