/*
Theme Name: Zephyr Child
Template: Zephyr
Version: 1.0
Author:	UpSolution
Theme URI: http://zephyr.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/


:root {
	--contrast: #222222; 
	--contrast-2: #575760;
	--contrast-3: #b2b2be;
	--accent: #2359a6;   /* Blue */
	--global-color-8: #f8b92e; /* Yellow */
	--global-color-9: #702169; /* Dark Purple */
	--global-color-10: #53bbb0;	/* Bright green */
	--global-color-11: #638cc8;	/* Light Blue */
	--global-color-12: #3c575d; /* Dark blue */	
	--global-color-13: #eb5e32;	/* orange */
	--global-color-14: #c3629d;	/* Lila */
	--global-color-15: #bd1634;	/* bright red */
	--global-color-16: #fed8a1;	/* light yellow */
	--global-color-17: #250323;	/* dark purple background */
}



body {background: #250323 url("images/background-pattern.png")!important; }


/* Home logo in content */
.home-logo img {width: 600px;}
.home-face img {width: 600px; }

.home .l-subheader-cell.at_left img {display: none;}

/* Home hero informatie */
.home-hero-information {color: #000;}

.date-vrijdag strong {color: var(--global-color-9); display: inline-block; min-width: 180px; }
.date-zaterdag strong {color: var(--global-color-9); display: inline-block; min-width: 180px;}
.date-zondag strong {color: var(--global-color-9); display: inline-block; min-width: 180px;}

/* Blocks categories */
.row-blocks h3 {background:var(--global-color-15); text-align: center; padding: 1em; }

/* LOGO payoff animation https://www.youtube.com/watch?v=iXlkRhjnnpk */
.hero-animate h2  {font-weight: 700;  font-size: 30px; text-transform: uppercase; }
.hero-animate h2.jalan-date {font-size: 38px; animation-delay: 1s; /* Vertraging*/}

.hero-animate .initial {margin-right: 5px;}
.hero-animate .initial.one {color: var(--global-color-15); }
.hero-animate .initial.two {color: var(--global-color-11);}
.hero-animate .initial.three {color: var(--global-color-13);}
.hero-animate .initial.four {color: var(--global-color-9);}

/* INDO ANIMATION */

.reveal {
	text-transform: none; 
    color: transparent;
    margin-left: -5px;
    background: linear-gradient(#000 0 0) no-repeat;
    background-size: 0% 100%; /* Start bij 0% */
    -webkit-background-clip: text;
    background-clip: text;
    animation: none; /* Geen animatie vooraf */
}

/* De animatie wordt pas uitgevoerd wanneer de 'animate' klasse wordt toegevoegd */
.reveal.animate {
    animation: a 1.2s .5s both; /* Animatie start wanneer de 'animate' klasse wordt toegevoegd */
}


@keyframes a {
    to {
        background-size: 100% 100%; /* De animatie naar 100% 100% */
    }
}


/* DATE ANIMATION */

.reveal-date {
  	color: var(--global-color-16); /* Witte tekst */
    background-color: var(--global-color-9); /* Achtergrond */
    display: inline-block;
    position: relative;
    opacity: 0; /* Begin met onzichtbare tekst */
    transform: translateX(100%); /* Begin de tekst helemaal rechts buiten het zicht */
    padding: 10px 20px; /* Optioneel: Voeg padding toe voor meer ruimte rond de tekst */
    animation: b 1.2s ease-out .5s forwards; /* Voer de animatie uit na 0.5s vertraging */
	animation: none; /* Geen animatie vooraf */
}

/* De animatie wordt pas uitgevoerd wanneer de 'animate' klasse wordt toegevoegd */
.reveal-date.animate {
    animation: b 1.2s .5s both;
	animation-delay: 1s; 
}


/* Animatie voor de 'reveal' class */
@keyframes b {
    0% {
        opacity: 0;
        transform: translateX(100%); /* Begin buiten het zicht aan de rechterkant */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Kom naar de originele positie */
    }
}

/* CITY  ANIMATION */
.reveal-city {
  	color: var(--global-color-10); /* Witte tekst */
    background-color: black; /* Zwarte achtergrond */
    display: inline-block;
    position: relative;
    opacity: 0; /* Begin met onzichtbare tekst */
    transform: translateX(100%); /* Begin de tekst helemaal rechts buiten het zicht */
    padding: 10px 20px; /* Optioneel: Voeg padding toe voor meer ruimte rond de tekst */
    animation: t 1.2s ease-out .5s forwards; /* Voer de animatie uit na 0.5s vertraging */
	animation: none; /* Geen animatie vooraf */
}



/* De animatie wordt pas uitgevoerd wanneer de 'animate' klasse wordt toegevoegd */
.reveal-city.animate {
    animation: t 1.2s .5s both;
    animation-delay: 2s; /* Vertraging voor de rechtervoet */
}

@keyframes t {
    0% {
        opacity: 0;
        transform: translateX(100%); /* Begin buiten het zicht aan de rechterkant */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Kom naar de originele positie */
    }
}

/* Lopende voetjes */

/* footprints container verticaal */

@media screen and (max-width: 1300px) {
	.footprints-container {display: none;}
}

.footprints-container {
    position: fixed; /* Zorgt ervoor dat de voetstappen op dezelfde plaats blijven */
    top: 100px; /* Zet ze op de gewenste hoogte */
    left: 20px; /* Zet ze aan de linkerkant van het scherm */
    transform: translateY(-50%);
    z-index: 100!important;
    height: 150px;
    width: 130px;
}

.footprint.footprint-1 {
    width: 52px;
    height: 100px;
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 1;
    animation-play-state: paused; /* Start de animatie in gepauzeerde staat */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Voor soepel stoppen */
}

/* Rechter voet */
.footprint.footprint-2 {
    width: 52px;
    height: 100px;
    position: absolute;
    left: 60px;
    top: 10px;
    opacity: 1;
    animation-play-state: paused; /* Start de animatie in gepauzeerde staat */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Voor soepel stoppen */
}

/* Animatie voor de linkervoet */
.footprint.footprint-1.walking {
    animation-name: example;
    animation-duration: 0.4s;
    animation-iteration-count: infinite;
    animation-play-state: running; /* Start de animatie als de walking-klasse wordt toegevoegd */
}

/* Animatie voor de rechtervoet */
.footprint.footprint-2.walking {
    animation-name: example2;
    animation-duration: 0.4s;
    animation-delay: 0.2s; /* Vertraging voor de rechtervoet */
    animation-iteration-count: infinite;
    animation-play-state: running; /* Start de animatie als de walking-klasse wordt toegevoegd */
}

/* Keyframes voor de linkervoet */
@keyframes example {
    0%   { transform: translateY(200px); opacity: 0.5; }
    100% { transform: translateY(10px); opacity: 1; }
}

/* Keyframes voor de rechtervoet */
@keyframes example2 {
    0%   { transform: translateY(200px); opacity: 0.5; }
    100% { transform: translateY(10px); opacity: 1; }
}


/* Einde */





/* Events slider */
.eventsname-slider-container {
overflow-x: clip;
max-width: 100%;
max-height: 80px;
height: 80px;
clear: both; display: block;
text-transform: uppercase;
margin-bottom: 20px;
}

/* termen */
.eventsname-slider-container span { margin: 0 2px; padding: 4px 8px; display: inline; }

span.workshops {background: var(--global-color-16); color: #000; }
span.optredens {background: var(--global-color-9);}
span.theater {background: var(--global-color-10);}
span.lezingen {background: var(--global-color-11);}
span.spoken-word {background: var(--global-color-12);}
span.dans {background: var(--global-color-13);}
span.film {background: var(--global-color-14);}
span.sport {background: var(--global-color-15);}


span.korte-voorhout {background: var(--global-color-8); }
span.lange-voorhout {background: var(--global-color-9);}
span.koorenhuis {background: var(--global-color-10);}
span.pulchri {background: var(--global-color-11);}
span.toko {background: var(--global-color-12);}
span.huiskamers {background: var(--global-color-13);}
span.popups {background: var(--global-color-14);}
span.sophiahof {background: var(--global-color-10);}
span.paard {background: var(--global-color-9);}
span.hotel-des-indes {background: var(--global-color-15);}

span.feet {width: 80px!important; height:80px; display: inline-block; margin-bottom: -40px; z-index: 100;}
span.feet img {}

span.feet.one {background: url(images/feet-1.png) no-repeat ; background-size: contain; }
span.feet.two {background: url(images/feet-2.png) no-repeat ; background-size: contain; transform: scaleX(-1);}
span.feet.three {background: url(images/feet-3.png) no-repeat ; background-size: contain;}
span.feet.four {background: url(images/feet-4.png) no-repeat ; background-size: contain; transform: scaleX(-1);}
span.feet.five {background: url(images/feet-5.png) no-repeat ; background-size: contain;}

.eventsname-slider {
animation: slide linear;
animation-timeline: scroll();
white-space: nowrap;
margin-left: -200px;
transform: rotate(-3deg);
}

@keyframes slide {
	to {
		transform: translatex(-20%);
	}
}


.eventsname-slider-reverse {
animation: slide-reverse linear;
animation-timeline: scroll();
white-space: nowrap;
margin-left: -400px;
transform: rotate(3deg);
}

@keyframes slide-reverse {
	to {
		transform: translatex(20%);
	}
}

.eventsname-slider-container {
mask-image: linear-gradient(90deg,transparent 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 89%, transparent 100%);
}


/* Deelnemer */

.single-deelnemers .post_taxonomy a {text-decoration: underline;}  
.term-jalan-pedis {content: url(/wp-content/uploads/2026/06/logo-jalanpedis-small.png); width: 100px; height: auto; }


/* Locaties */
.single-evenement-locatie .locatie-logo {border: 4px solid var(--global-color-9); margin-bottom: 24px;}

/* Jalan Pedis */
.row-jalanpedis-blocks {}
.row-jalanpedis-blocks .wpb_column .vc_column-inner  {background: #be1717; border:  1px solid #fff; padding: 2em;}


/* Programma home */




.programma-grid-home div {outline: 0 solid red;}

.grid-dag {width: 7%;}
.grid-title {width: 22%;}
.grid-soort {width: 10%;}
.grid-vanaf-tot { width: 12%;}
.grid-vanaf {width: auto; display: inline;  margin-right: 8px!important;}
.grid-tot {width: auto; display: inline; }
.grid-locaties {width: 22%;}
.grid-organisator {width: 14%; }
.grid-info {display:none; }



/* Formulieren */

.gf_label {
  display: block;
}

.gfield input[type="checkbox"] + label::before,
.gfield input[type="radio"] + label::before {
  content: '';
  font-family: 'Gravity Forms', sans-serif !important;
}

.gfield_checkbox_item,
.gfield_radio_item {
  display: inline-block;
  margin-right: 15px;
}




.gform_heading {margin-bottom:  2em!important;}
.gform-theme--foundation .gform_fields {grid-row-gap: 20px !important;}

select, 
textarea, 
input[type="text"], 
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"], 
input[type="color"], 
.uneditable-input {
box-shadow: none !important;
border-color: #4444 !important;
background: var(--global-color-16)!important;
color: var(--global-color-17) !important; /* Text color */
}

label {color: var(--global-color-14)!important; font-size: inherit!important;}
legend { color: var(--global-color-14)!important; font-size: inherit!important;}
.gfield_description, .gchoice label, .ginput_container_consent label {color: #fff!important; font-size: inherit!important;}


.gform_wrapper input[type="checkbox"] {
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    width: 18px;
    height: 18px;
    position: relative;
}

.gform_wrapper input[type="checkbox"]::before,
.gform_wrapper input[type="checkbox"]::after {
    display: none !important;
    content: none !important;
}


/* Button */
.gform_button.button {background: #974df3!important; color: #fff;}
.gform_button.button:hover {opacity: 0.8;}
.gform_required_legend {display: none; }
.gf_step_number, .gf_step_label {color: var(--global-color-8)!important;}

/* Change Gravity Forms Submit Button Color */
body .gform_wrapper .gform_footer input[type="submit"],
body .gform_wrapper .gform_footer input[type="button"],
body .gform_wrapper .gform_page_footer input[type="submit"],
body .gform_wrapper .gform_page_footer input[type="button"] {
    background-color: var(--global-color-9) !important; /* Change this to your desired color */
    border: none !important;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

/* Hover Effect */
body .gform_wrapper .gform_footer input[type="submit"]:hover,
body .gform_wrapper .gform_footer input[type="button"]:hover,
body .gform_wrapper .gform_page_footer input[type="submit"]:hover,
body .gform_wrapper .gform_page_footer input[type="button"]:hover {
    background-color: var(--global-color-14)!important; /* Darker shade on hover */
}

/* Footer */
#page-footer .w-menu.layout_ver .menu>li, .w-menu.for_category_nav li {margin-bottom: 8px!important; }


/* responsive */
@media screen and (max-width: 1400px) {

}

@media screen and  (max-width: 1100px) {
	.home .gb-text.gbp-section__headline .word {display: block; line-height: 1.5em;}
}

@media screen and  (max-width: 900px) {
	
.programma-grid-home {}
.programma-grid-home  .w-hwrapper {}
.programma-grid-home div, .programma-grid-home h5 {width: 100%; clear: both; display: block; margin-bottom: 0!important;}
.page-id-411 .w-hwrapper {display: block;}
.grid-dag {}
.grid-title {font-size: 24px; line-height: 1.5em;}
.grid-soort {display: none!important; }
.grid-vanaf-tot {overflow: hidden; }
.grid-vanaf {display: inline!important;}
.grid-tot {display: inline!important;}
.grid-locaties {  }
.grid-organisator {margin-top: 12px!important;}
.grid-info {display: none!important; }
}


/* Programma home */







@media screen and  (max-width: 769px) {
	#page-header {background: var(--global-color-17);}
	.hero-animate h2.jalan-date {font-size: 22px; animation-delay: 1s; /* Vertraging*/}
	.site-header .header-image {width: 200px;}
	.reveal-date, .reveal-city {max-width: 100%;  /* Zorg ervoor dat de breedte zich aanpast aan de schermgrootte */ padding: 8px 16px; /* Pas padding aan voor kleinere schermen */}
	.home-hero-information span {clear: both!important;  width: 100%!important;  }
	
	
		
}