@keyframes rotate {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}
@keyframes bekijk {
	0% {
		animation-timing-function: ease-out;
		transform: scale(1);
		transform-origin: center center;
	}

	
	50% {
		animation-timing-function: ease-out;
		transform: scale(0.80);
	}


	95% {
		animation-timing-function: ease-out;
		transform: scale(1);
	}
}
@keyframes maxlogo {
	0% {
		transform: rotate(0deg);
		transform-origin: 50% 50%;
        transform:scale(0.2);
        opacity:1;
	}

	10% {
		transform: rotate(8deg);
	}

	20%,
	40%,
	60% {
		transform: rotate(-10deg);
        
	}
    50% {
       
    }

	30%,
	50%,
	70% {
		transform: rotate(10deg);
	}
    /* 75% {
        transform:scale(0.7);   
    } */
	80% {
		transform: rotate(-8deg);
	}

	90% {
		transform: rotate(8deg);
	}
    100% {
        
		transform: rotate(-5deg);
		transform-origin: 50% 50%;
        transform:scale(1);
        opacity:1;
	}
}
@keyframes maxin {
	0% {
		animation-timing-function: ease-in;
		opacity: 0;
		transform: translateY(250px);
	}

	38% {
		animation-timing-function: ease-out;
		opacity: 1;
		transform: translateY(0);
	}

	55% {
		animation-timing-function: ease-in;
		transform: translateY(65px);
	}

	72% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	}

	81% {
		animation-timing-function: ease-in;
		transform: translateY(28px);
	}

	90% {
		animation-timing-function: ease-out;
		transform: translateY(0);
	} 
    
    95% {
		animation-timing-function: ease-in;
		transform: translateY(8px);
	}

	100% {
		animation-timing-function: ease-out;
		transform: translateY(0); 
        opacity: 1;
	}
}
@keyframes zoomout {
	0% {
		transform: scale(2);
	}

	100% {
		transform: scale(1);
	}
}
html {
    scroll-behavior: smooth;
  }
.wp-site-blocks {
    overflow:hidden;
}
header {
   z-index:1!important;
   transition:all 0.2s ease;
   .wp-block-navigation__container li {
            
    padding-top:12px;
    
    a {
        transform:rotate(-1deg);
        transition:all 0.2s ease;
        background: #fff;
        padding-left:20px;
        padding-right:20px;
        margin:0!important;   
        border:0!important;   
        &:hover {
            background-color:#000;
            color:#fff!important;
        }
    }
}
    &.scrolled {
        z-index:9999!important; 
        position:fixed;
        top:0;
        .wp-block-navigation__container li {
            
            padding-top:12px;
            
            a {
                transform:rotate(-1deg);
                transition:all 0.2s ease;
                background: #fff;
                padding-left:20px;
                padding-right:20px;
                margin:0!important;   
                border:0!important;   
                &:hover {
                    background-color:#000;
                    color:#fff;
                }
            }
        }
        .logo {
            display:none!important;
            /* 
            transition:all 0.2s ease;
            width:400px;
            left:-346px; */
            
            .sun {
                top: -20px;
                left:50px;
                opacity: 0;
            }
        }
    }
    .logo {
        position: relative;
        left: -294px;
        top: -72px;
        height:auto;
        width:950px;
        /* animation: maxlogo 2.1s ease-in-out 0.7s 1 normal forwards; */
        @media screen and (max-width:921px) {
            left: -190px;
            width: 450px;
            top: -110px;
            
        }
        .sun {
            left: -20px;
            position: absolute;
            z-index: -1;
            top: -150px;
            @media screen and (max-width:921px) {
                top: -20px;
                left:40px;
            }
            user-select:text;
            pointer-events: none;
/*             animation: rotate 10s linear 0s infinite normal forwards; */
			opacity:0!important;
            img {
                transform:scale(1.4);
            }
        }
        .site-logo-img {
            left: 0px;
            position: absolute;
            top: 50px;
            user-select:text;
            pointer-events: none;
        }
    }
    .wp-block-navigation-item__content {
        transition:all 0.2s ease;
        border-bottom:6px solid transparent;
        &:hover {
            
            border-bottom:6px solid #000;
        }
    }
    .wp-block-navigation__responsive-container-open {
        top: -30px;
        position: relative;
        svg {
            display:none;
        }
        &:before {
          
            content:'';
            height:30px;
            width:30px;
            background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="22px" viewBox="0 0 30 22" version="1.1"><title>hamburger_icon</title><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="hamburger_icon" transform="translate(0.6595, 0.5175)" fill="%23000000" fill-rule="nonzero"><g id="Hamburger_icon" transform="translate(14.3405, 10.4825) rotate(-2) translate(-14.3405, -10.4825)translate(0.3405, 0.4825)"><path d="M2,4 L26,4 C27.104,4 28,3.104 28,2 C28,0.896 27.104,0 26,0 L2,0 C0.896,0 0,0.896 0,2 C0,3.104 0.896,4 2,4 Z M26,8 L2,8 C0.896,8 0,8.896 0,10 C0,11.104 0.896,12 2,12 L26,12 C27.104,12 28,11.104 28,10 C28,8.896 27.104,8 26,8 Z M26,16 L2,16 C0.896,16 0,16.896 0,18 C0,19.104 0.896,20 2,20 L26,20 C27.104,20 28,19.104 28,18 C28,16.896 27.104,16 26,16 Z" id="Shape"/></g></g></g></svg>');
            background-size:contain;
            background-repeat: no-repeat;
        }
    }
}
#hero {
    padding-top:80px!important;
    @media screen and (max-width:921px) {
       
    }
}
.wp-block-cover {
    position: relative;

    @media screen and (max-width:921px) {
    overflow: visible;
    }
    .wp-block-cover__image-background {
        position:absolute;
        
        object-fit: none;
        opacity: 0;
        /* animation: zoomout 0.6s linear 0s 1 normal forwards; */
        animation: maxin 1.0s ease 0.0s 1 normal forwards;
        Mix-blend-mode: darken;
        left:15%;
        top:90px;
        /* filter: contrast(1.3); */

        @media screen and (max-width:921px) {
        left:10%;
        top:150px;
        }

    }
    .wp-block-group {
        z-index:2;
    }
}

#hero, #speellijst {
    @media screen and (min-width:1920px) {
        background-size: cover!important;
    }
}
#over-max {
    @media screen and (min-width:1934px) {
    min-height:1076px!important;
    .wp-block-columns {
        margin-top:120px;
    }
    }
}

.bg_overlay {
    min-height:123px;
    margin-top:-123px!important;
    background-repeat: repeat-x!important;
    background-position: 50% bottom;
    background-size:unset!important;
}

#posters {
    z-index:1;
    padding-top:20px!important;
    padding-bottom:120px!important;
    h5 {
        transition:all 0.2s ease;
    }
    .poster_img {
        transition:all 0.2s ease;
    }
    .pointer {
        
    }
    .poster_col {
        transition:all 0.2s ease;
        cursor:pointer;
        &:hover {
            
            h3 {
                
            }
            h4 {
                
            }
            .pointer {
                animation: bekijk 0.7s ease 0ms infinite normal forwards;

            }
            h5 {
                padding-left:0px;
                transform:scale(1.05);
            }
            .poster_img {
                /* transform:scale(1.05); */
            }
        }
    }
}
#over-max {
    z-index: 3;
    margin-top:-100px;
    
}

#speellijst {

    margin-top: -200px !important;
    padding-top:250px!important;
    min-height:2000px;
    z-index:0;

    ul.speellijst {
        margin:0;
        margin-top:40px;    
        padding:0;
        display:flex;
        flex-direction: column;
        gap:20px;
        

        li {
            &.year {
				z-index:-1;
                font-size:2.5em;
                line-height:60px;  
                font-family: Bungee, system-ui;
                color:#ff2bab;   
            }
            display:flex;
            gap:40px; 
            .date {
                display:flex;
                flex-direction: column;
                font-family: Bungee, system-ui;
                .day {
                    padding-top:14px;
                    font-size:4.5em;
                    line-height:60px;   
                }
                .month {
                    font-size:2.9em;
                    line-height: initial;
                }
                
            }
            .row {
                display:flex;    
                gap: 20px;
                h3, h4 {
                    margin:0;
                }
                .show {
                    line-height:44px;
                    color:#ff2bab;  
                }
            }
            
            .theater_meta {
                font-size: 1.3em;
                font-weight: bold;
                margin-top:-12px;    
                .ticketlink {
                    transform:rotate(-1deg);
                    margin-top:4px;   
                    border:0px solid #000;
                    background:#000;
                    font-family: Bungee, system-ui;
                    color:#fff;  
                    display: flex;
                    width:fit-content;
                    flex-direction: row;
                    align-items: center;
                    padding-left:8px;   
                    padding-right:4px;  
                    transition: all 0.2s ease;   
                    &.uitverkocht {
                        pointer-events: none;
                        background:#000;
                        color:#fff;
                        transform:rotate(-1deg);
                        padding:4px 8px!important;
                    }
                    img {
                        max-height:30px;
                        margin-left:8px; 
                        transition: all 0.2s ease;   
                    }
                   &:hover {
                    background:#000;
                    color:#ff2bab;
                    img {
                        filter:invert(1) grayscale(1) brightness(10);
                    }
                   }
                }
            }   
            @media (max-width: 921px) {
                padding-left:12px;
                gap:12px!important;
                .date {
                    padding-top:-30px;
                    text-align: center;
                    .day {
                        padding-top:0px;
                        font-size:3.3em;
                        line-height:60px;   
                    }
                    .month {
                        font-size:2.0em;
                        line-height: initial;
                        margin-top:-14px;
                    }  
                }
                .row {
                    margin-top:4px;
                    flex-direction: column;
                    .plaats {
                        font-size:1.6em;
                    }
                    .show {
                        margin-top:-30px;
                        font-size:1.1em;
                    }
                    
                }
                .theater_meta {
                    flex-direction: column;
                    display:flex;
                    margin-top:-12px;
                    font-size:1em;
                    .theater {
                        margin-right:6px;
                    }
                   
                }
            }    
        }

    }
    #speellijst-content {
        z-index: 2;
    }
    #speellijst-video {
        aspect-ratio: 16 / 9!important;
        display:none!important;
        position:absolute!important;
        width: auto !important;
        height: 104vh !important;
        top:-20px;
       
@media (max-width: 1440px) {
    transform:translateX(-18vw);
  }
  @media (max-width: 921px) and (orientation: portrait) {
    opacity:0.85;
    transform:translateX(-38%);
    height: calc(100vh+30px)!important;
    top:-30px!important;
  }
        /* width: 125vw !important;
        height: auto !important; */
        
        &.is_sticky {
            z-index: -1;
           
        }
        &.scrolled {
            display:block!important;  
            position:fixed!important;
        }
        
    }
    canvas {
        z-index:-1;
    }
}

footer {
    z-index: 2;
    background-color: #fff;
    @media screen and (max-width:921px) {
        .alignwide { justify-content: center; }
        .is-content-justification-space-between {
            gap:0;
        }
    }
    figure {
        font-size:0;
        img {
            width:120px;
            @media screen and (max-width:921px) {
                width:100px;
            }
        }
    }
}

.page h2, .year {
    transform:rotate(2deg);
    position:relative;
    margin-left:12px;
   
    &:before {
        position:absolute;
        top:-50px;
        left:-132px;
        background:url('/wp-content/uploads/2025/04/splat_before.png');
        background-repeat: no-repeat;
        background-size:contain;
        height:200px;
        width:400px;
        content:'';
        @media screen and (max-width:921px) {
            top:-66px;
        }
    }
    &:after {
        position:absolute;
        top:-46px;
        margin-left:-40px;
        background:url('/wp-content/uploads/2025/04/splat_after.png');
        background-repeat: no-repeat;
        background-size:contain;
        height:200px;
        width:400px;
        content:'';
        z-index: 10;
        display: block;
        @media screen and (max-width:921px) {
            margin-left:-66px;
        }
    }
}
#speellijst {
    h2:before, h2:after {
    filter: invert(1);
    }
    .year {
        font-size:2.4em!important;
        transform:rotate(-2deg);
        margin-bottom:20px;
        &:before {
            filter: brightness(0) saturate(100%) invert(28%) sepia(55%) saturate(3730%) hue-rotate(305deg) brightness(92%) contrast(98%);
            @media screen and (max-width:921px) {
                left:-120px;
                top:-0px;
                height:120px;
                
            }
        }
        &:after {
            margin-left:-150px;
            @media screen and (max-width:921px) {
                margin-left:-166px;
            }
            filter: brightness(0) saturate(100%) invert(28%) sepia(55%) saturate(3730%) hue-rotate(305deg) brightness(92%) contrast(98%);          
        }
        
    }
}

#contact {
    h2:before, h2:after {
        
        }
    .flex-contact {
        display:flex;
        gap:40px;
        @media screen and (max-width:921px) {
            flex-direction: column;
            gap:0px;
        }
        .col {
            flex:1;
        }
        label {
            display:flex;
            flex-direction: column;
            
        }
        .field-name, .wpcf7-quiz-label {
            font-family: Bungee, system-ui;
            color:#fff;

        }
        input[type='text'], input[type='email'], input[type='tel'] {
            padding:12px;
            font-size:17px;
            width:100%;
            opacity: 0.85;
        }
        textarea {
            padding:12px; 
            font-size:17px;
            width:100%;
            opacity: 0.85;
            font-family: "Open Sans", sans-serif;
        }
        input[type='submit'] {
            font-family: Bungee, system-ui;
            color:#fff;
            background:#000;
            border: 0;
            border-radius: 0!important;
                transform: rotate(-1deg);
                transition: all 0.2s ease;
                padding:8px;   
                font-size:20px; 
                padding-left: 20px;
                padding-right: 20px; 
                cursor: pointer;
                &:hover {
                    background:#fff;
                    color:#000;   
                }

        }
        .wpcf7-not-valid-tip {
            background:red;
            color:#fff;
            padding:4px 8px;
            
        }
    }
    form.invalid .wpcf7-response-output {
        background:red;
        color:#fff;
        padding:4px 8px; 
        margin:0;
        border:0;
    }
}

.btn_rotate {
    transform:rotate(-1deg);
    
    a {
        border-radius: 0!important;
    }
}

@media screen and (max-width:921px) {
    .entry-content > .wp-block-group.has-global-padding  {
        padding-top:30px!important;
    }

    #hero {
        top: -150px;
        .wp-block-cover__inner-container {
            display:none!important;
        }
        .wp-block-cover {
            min-height: 700px;
        }
    
    }
    .bg_overlay {
        margin-top: -520px!important;
    }

    html.has-modal-open {
        .wp-block-navigation-item__content {
            font-size:1.4em;  
            transform:rotate(-1deg);
            border-bottom:0!important;
        }
        .wp-block-navigation__responsive-container {
            height:140vh;
            
        }
        .wp-block-navigation-item__content {
            padding-left:8px!important;
            padding-right:8px!important;
            color:#000;
            background:#fff!important;
            &:hover {
                background:#000!important;
                color:#fff!important;    
            }
        }
        header {
            z-index:9999!important;
            
        }
        .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
            background:rgba(0,0,0,0.8)!important;
        }
        .wp-block-navigation__responsive-container-close {
            color:#fff;
        }
    }
    #posters .has-background {
    background-size: contain!important;
    background-repeat: no-repeat;
        h3 {
            font-size:1.6em;
        }
        h4 {
            font-size:1.3em; 
        }
        .has-heading-color {
            padding:40px!important;
        }
    }

    #over-max {
       
            background-size:cover!important;
       
        .wp-block-column {
            padding-left:12px!important;  
            padding-right:12px!important;  
        }
        .wp-block-columns.alignwide {
            .wp-block-column {
                padding-bottom:0!important;
                &.is-vertically-aligned-bottom {
                    padding-top:0!important;
                    padding-bottom:40px!important;
                }
            }   
        }
        .zakelijk {
            padding:0;
            gap:0;
            margin-bottom:0!important;
            a, p {
            font-size:20px!important;
        }
        }
    }

    #speellijst {
        padding-bottom:350px;
        padding-top:218px!important;
    }
    input[type='submit'] {
        font-size:14px!important;
    }

}