@charset "utf-8";
/* CSS Document */

/*
 Theme Name:   Lowtone 2025
 Theme URI:    https://lowtone.nl
 Description:  Generatepress Child Theme
 Author:       Lowtone
 Author URI:   http://www.lowtone.nl
 Template:     generatepress
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/



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




h1, h2, h3, h4, h5 {}
blockquote {}


/* General */

html, body {}
.comments-area {display: none;}
.desktop {display: inline-block;}
.mobile {display: none;}

/* GP 100% HEIGHT */
  body {
	  
	background: #250323 url("images/backgound-pattern.png");
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        min-height: 100vh;
     
    }
	
	.container.grid-container {
    width: 100%;
	}
    .site-footer {
        margin-top: auto;
    }

/* 100% HEIGHT */


article ul, article ol {margin-left: 16px; padding-left: 0;}
article ul li, article ol li {margin-bottom: 6px; padding-bottom: 6px; }


*  {box-sizing: border-box; }
a {transition: all 0.1s ease; cursor: pointer; }
a:hover {transition: all 0.1s ease;  }
article .entry-content a  {}

/* Checkmark */
ul.check {list-style: none; margin-left: 0px; }
ul.check li {list-style: none; margin-left: 0px;  position: relative; padding-left: 1.5em;   margin-top: 12px; /* space to preserve indentation on wrap */}
ul.check li:before {content: '✓'; color: #9dc447; position: absolute; left: 0;  /* place the SVG at the start of the padding */ width: 1em; height: 1em;}


/* menu */
.current-page-ancestor a {color: #ff7700!important;}


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



/* footprints container verticaal */

@media screen and (max-width: 1500px) {
	.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;
}

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


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

@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%);
}



/* forms */

.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;
		font-size: 17px!important;
}

.ginput_container_checkbox .gchoice .gform-field-label.gform-field-label--type-inline {color: #fff!important; font-size: 17px!important; margin-bottom: 30px!important;}
.gform_button.button {background: var(--global-color-14)!important; color: #fff; font-size: 17px!important;}
.gform_button.button:hover {opacity: 0.8;}

.gform_required_legend {display: none; }





/* responsive */


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

}

@media screen and (max-width: 769px) {
	
.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 */
    }
	
	
	
	.programma-accordeon h2 {font-size: 18px;}
	.gb-accordion__content p  {font-size: 18px!important;} 
	
	
	
	
}






/*
.desktop {display: none;}
.mobile {display: inline-block;}
*/