/*!
Theme Name: Firedepartment Amsterdam
Theme URI: https://madework.nl/
Author: madework.
Author URI: https://madework.nl/
Description: Barebones theme.
Version: 2.0.3
License: GNU General Public License
License URI: license.txt
Tags: fluid-layout, responsive-layout, custom-menu, featured-images, microformats
*/

/* ROOT */
	:root {
	  --black: #000;
	  --red: #00811f;
	  --red: #CC6666;
      --blue:#1070c9;
	  --lightgrey : #f9f9f9;
      --grey : #f0f1f1;
      --darkgrey : #868686;
	  --white: #ffffff;
      --contain:24px;
	}

/* GENERAL */
    *,*::after,*::before{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}
    body {font-family:'Poppins',sans-serif; font-size:16px; line-height: 32px; color:var(--black); padding:0px; margin:0px; background-color: var(--black);}
    body > main { position:relative; z-index:0; min-height:100svh;}
    
/* HEADER */
    body > header { position: fixed; z-index:3; left:0px; right:0px; top:0px; pointer-events:none;}
    body > header > nav { max-width: 512px; margin:0 auto; overflow:hidden; }
    body > header > nav > ul { 
        display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin:0px; padding:12px 0px; 
        background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%);
    }
    body > header > nav > ul > li { display:inline-block;}
    body > header > nav > ul > li > a { display:block; text-decoration: none; color:var(--white); border-radius: 24px;  padding:6px 24px; pointer-events: all;}
    body > header > nav > ul > li > a > span { display: none;}

/* FEATURED */
    /* body > main > figure { position:relative; z-index: 0; overflow:hidden; background-color: var(--black); height:256px;}
    body > main > figure > picture { position: fixed; display:block; z-index: 0; overflow: hidden; width:512px; height:256px; left:50%; top:0px; bottom:auto; transform:translateX(-50%); }
    body > main > figure > picture > button { display:none;}
    body > main > figure > picture > img { position: relative; z-index: 0; vertical-align: bottom; object-fit: cover; width:100%; height:256px; min-height:256px; max-height: none!important; transform: scale(1.2); opacity:0.8; transition: opacity 125ms linear, transform 275ms ease-in-out, filter 125ms linear; will-change: opacity, transform, filter, min-height;}
    body > main > figure > figcaption { position:absolute; z-index: 1; top:calc(env(safe-area-inset-top) + 14px); left:24px; font-size:14px; transition: opacity 125ms linear 125ms; color:var(--white); opacity:0.8;}
    body.--scrolled > main > figure { background: var(--black);}
    body.--scrolled > main > figure > picture { overflow: hidden;}
    body.--scrolled > main > figure > picture > img { transform: scale(1); filter: blur(1px); opacity:0.6;}
    body.--scrolled > main > figure > figcaption { opacity:0;}
    body > main > figure.--zoom > picture > img { opacity:1;}
    body > main > figure + article { padding-top:var(--contain)!important;} */
    
 /* ARTICLE */   
    /* body > main > article {position:relative; z-index:1; min-height:100svh; background-color: var(--white); color: var(--black);  padding:calc(env(safe-area-inset-top) + var(--contain)) var(--contain) 112px var(--contain);} */
    /* body > main > article h1, body > main > article h2, body > main > article h3, body > main > article h4, body > main > article h5, body > main > article h6 { color:var(--red); line-height:1.6em;}
    body > main > article h4, body > main > article h5, body > main > article h6 { margin-bottom:1em;} */
    body > main > article a { color: inherit; text-decoration: underline;}
    body > main > article hr { display:block; margin-left:calc(var(--contain) * -1); width:calc(100% + (var(--contain) * 2) ); float: none; clear: both;}
    body > main > article img { max-width:100%; height:auto;}
    body > main > article p img.alignleft { float: left; margin-right:var(--contain); margin-bottom:var(--contain); width:calc(100% / 3);}
    body > main > article p img.aligncenter { display:block; float:none; margin:0 auto; max-width:calc(100% / 2.5);}
    
    body > main > article audio { width:100%;}
    
    body > main > article figure { position: relative; margin:0px; padding:0px;}
    body > main > article figure button { position:absolute; right:24px; top:24px; z-index: 1; border:none; background: #F60000; box-shadow: none; margin:0px; padding:12px; border-radius:4px;}
    body > main > article figure button * { pointer-events: none;}
    body > main > article figure button > i { color:#fff;}
    body > main > article figure button > span { display:none;}
    body > main > article figure button:hover { cursor: pointer;}
    body > main > article figure picture {position: relative; display:block; z-index: 0; overflow: hidden;}
    body > main > article figure picture img { width:100%; height:auto; vertical-align: bottom;}
    body > main > article figure figcaption { position:relative; z-index:1; padding: 16px 24px 16px 16px; font-size: 14px; line-height: 24px; font-style:italic;}
    body > main > article figure figcaption::before {content:''; display:block; width:7px; height:calc(100% + 10px); background-color:rgba(255,255,255,0.9); position: absolute; z-index: 0; left:-2px; bottom:16px;}
    body > main > article figure figcaption::after { content:''; display:block; width:3px; height:calc(100% + 8px); background-color:var(--red); position: absolute; left:0px; bottom:16px; }
    
    /* body > main > article blockquote { 
        display:block; position:relative;
        background:transparent url('quote_bubble.png?v=1743757252') no-repeat left 30px/96px; min-height:80px;
        margin-left:0px; margin-right:0px; padding:46px 0px 16px 96px; color: var(--darkgrey);
    }
    body > main > article blockquote.alt { background:transparent url('quote_ar.jpg?v=1743757252') no-repeat left 30px/80px; min-height:106px; min-height:138px; }
    body > main > article blockquote > svg { position:absolute; left:0px; top:0px; width:100%;}
    body > main > article blockquote > h4 { margin:0px; font-style: italic; color:var(--red); line-height:28px; }
    body > main > article blockquote > p:last-child { margin-bottom:0px;} */
    
    /* body > main > article > hgroup { padding:var(--contain) 80px var(--contain) 0; position: relative; line-height:24px; }
    body > main > article > hgroup h1 { color:var(--red); margin-bottom:0px; margin-top:0px; line-height: 28px;}
    body > main > article > hgroup h2 { color: var(--black); font-weight:400; font-size: 1.2em; margin-bottom:0px; margin-top:0px;}
    body > main > article > hgroup > i {  position: absolute; left:0px; top:50%; width:64px; height:85px; background:transparent url('location_pin.png?v=1743757252') no-repeat center center/64px;  }
    body > main > article > hgroup > b { position:absolute; right:0px; top:50%; width:64px; height:85px; transform:translate(0, -50%); }
    body > main > article > hgroup.-has-icon { padding-right:80px; }
    body.single-poi > main > article > hgroup.-has-pin { padding-left:80px; padding-right:0px; transition:padding-left 175ms ease-in-out, padding-right 175ms ease-in-out;}
    body.single-poi > main > article > hgroup.-has-pin > i { opacity:1; }
    body.single-poi > main > article > hgroup.-has-pin > i > span { position: absolute; left:50%; top:20px; text-align: center; transform: translateX(-50%); font-size:19px; font-style:normal; font-weight: 700;} */
    
    /* body > main > article > svg { position: absolute; z-index: 1; left:0px; bottom:calc(100% - 1px); right:0px; width:100%; vertical-align: bottom;}
    body > main > article > svg ~ svg { position: relative; margin-left:-24px; width:calc(100% + 48px);}     */
        
    body > main > article .wp-caption {width:100%; max-width:100%; min-width:100%; position:relative;}
    body > main > article .wp-caption > button { position:absolute; right:0px; top:24px; z-index: 1; border:none; background: transparent; box-shadow: none; margin:0px; padding:12px;}
    body > main > article .wp-caption > button * { pointer-events: none;}
    body > main > article .wp-caption > button > i { color: #fff;}
    body > main > article .wp-caption > button > span { display:none;}
    body > main > article .wp-caption > button:hover {cursor: pointer;}
    body > main > article .wp-caption > img { vertical-align: bottom; margin-left:calc(var(--contain) * -1); max-width:calc(100% + (var(--contain) * 2)); min-width:calc(100% + (var(--contain) * 2));}
    body > main > article .wp-caption > p { position:relative; z-index:1; padding: 16px 24px 16px 16px; margin:0px; font-size: 14px; line-height: 24px; font-style:italic; }
    body > main > article .wp-caption > p::before {content:''; display:block; width:7px; height:calc(100% + 10px); background-color:rgba(255,255,255,0.9); position: absolute; z-index: 0; left:-2px; bottom:16px;}
    body > main > article .wp-caption > p::after {content:''; display:block; width:3px; height:calc(100% + 8px); background-color:var(--red); position: absolute; z-index: 1; left:0px; bottom:16px;}
    body > main > article .wp-caption.alignleft { float: left!important; margin-left: 0!important; margin-right:calc(var(--contain))!important; margin-bottom:var(--contain)!important; width:calc((100% / 2) - 24px); min-width:calc((100% / 2) - 24px); max-width:calc((100% / 2) - 24px);}
    body > main > article .wp-caption.alignleft > img {max-width:calc(100% + (var(--contain))); min-width:calc(100% + (var(--contain)));}
    body > main > article .wp-caption.alignleft > p { padding-right: 0px;}
    body > main > article .wp-caption.alignleft + * + * { float:none; clear:both;}    
    
    body > main > article > figure {  margin:0px;margin-bottom: 16px;}
    body > main > article > figure > picture { display:block; margin-left: calc((var(--contain) * -1)); width: calc(100% + (var(--contain) * 2)); max-width: calc(100% + (var(--contain) * 2)) }
    body > main > article > section { display:block; margin-left: calc((var(--contain) * -1))!important; width: calc(100% + (var(--contain) * 2));}
    body > main > article > section figure > figcaption { padding: 16px var(--contain); width:calc(100% - 48px); margin: 0px; margin-left:24px; margin-right:24px;}
    body > main > article > section .swiper-pagination-bullets { position:relative; bottom:auto!important; height:40px!important; }
    body > main > article > section .swiper-pagination-bullet { width:8px; height:8px; margin: 12px 8px!important;}
    body > main > article > section .swiper-pagination-bullet-active { background-color: var(--red); }    
    /* body > main > article > section > object { position:relative; display:block; background-color:var(--lightgrey);}
    body > main > article > section > object > video { vertical-align: bottom;}
    body > main > article > section > object > video + figure { position:absolute; left:0px; top:0px; right:0px; bottom:0px; height:100%; min-height:100%; max-height:100%; overflow: hidden; transition:opacity 175ms linear;}
    body > main > article > section > object > video + figure * { pointer-events:none;}
    body > main > article > section > object > video + figure > picture { display:block; height:100%; min-height:100%; max-height:100%; }
    body > main > article > section > object > video + figure > picture > img {height:100%; min-height:100%; max-height:100%; object-fit: cover; }
    body > main > article > section > object > video + figure > picture > button { display:none;}
    body > main > article > section > object > video + figure > figcaption { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px; padding:20px; margin:0px; background-color:var(--white); border-radius:4px;}
    body > main > article > section > object > video + figure > figcaption::before,
    body > main > article > section > object > video + figure > figcaption::after { display:none;}
    body > main > article > section > object > video + figure > figcaption > i { display:inline-block; line-height:24px;}
    body > main > article > section > object > video + figure > figcaption > i > svg { fill:var(--red); stroke:var(--red);}
    body > main > article > section > object > video + figure:hover { cursor:pointer;}
    body > main > article > section > object.--play > video + figure { opacity:0; pointer-events:none;}
    body > main > article > section > object ~ p { display:block; position:relative; padding-left:var(--contain); padding-right:var(--contain); font-size:14px; line-height: 24px; margin:0px; margin-left:24px; margin-right:24px; padding:16px;}
    body > main > article > section > object ~ p::before {content:''; display:block; width:7px; height:calc(100% + 10px); background-color:rgba(255,255,255,0.9); position: absolute; z-index: 0; left:-2px; bottom:16px;}
    body > main > article > section > object ~ p::after {content:''; display:block; width:3px; height:calc(100% + 8px); background-color:var(--red); position: absolute; z-index: 1; left:0px; bottom:16px;} */
    
    body > main > article > .verdieping { padding-left: 24px; padding-right:24px;}
    body > main > article > .verdieping::after {}
    
    body > main > article > .verdieping { }
    body > main > article > .verdieping > summary { display:block; width:100%; padding-top:12px; position: relative; z-index: 3; list-style: none;}
    body > main > article > .verdieping > summary * { pointer-events: none;}
    body > main > article > .verdieping > summary:hover { cursor:pointer;}
    body > main > article > .verdieping > summary::-webkit-details-marker { display:none;}
    body > main > article > .verdieping > summary > span { display:block; width:100%; background-color:var(--red); color:var(--white); padding:6px 46px 6px 16px; border-radius:4px; font-size: 18px; font-weight: 600; position:relative;}
    body > main > article > .verdieping > summary > span > i { position:absolute; right:16px; top:10px; display: block; width:24px; height:24px; transition: all 125ms ease-in-out;}
    body > main > article > .verdieping::after { 
        content:''; display: block; width:100%; height:192px; position: absolute; z-index: 1; left:0px; bottom:0px; right:0px;
        background: rgb(255,255,255);  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,0) 100%);
    }
    body > main > article > .verdieping:not([open]) { max-height: 192px; overflow: hidden; position:relative; }
    body > main > article > .verdieping:not([open]) > summary ~ * { display:none;}
    body > main > article > .verdieping:not([open]) > summary + *,
    body > main > article > .verdieping:not([open]) > summary + * + *,
    body > main > article > .verdieping:not([open]) > summary + * + * + * {display: block;}
    body > main > article > .verdieping[open] { max-height:none;}
    body > main > article > .verdieping[open]::after { display:none;}
    body > main > article > .verdieping[open] > summary > span > i { transform: rotate(180deg); transform-origin: center;}
    
    body > main > article > nav { display:block; margin-left: calc((var(--contain) * -1))!important; width: calc(100% + (var(--contain) * 2));}
    body > main > article > nav > ul { list-style: none; padding: 0px; margin:0px; display:block;}
    body > main > article > nav > ul > li { display: block; margin-bottom: 8px; background-color: var(--lightgrey);}
    body > main > article > nav > ul > li > a { display:block; padding:var(--contain) var(--contain) var(--contain) 96px; text-decoration: none; position: relative; font-size:20px; line-height:26px; min-height:128px; background: url('arrow-right.png?v=1743757252') no-repeat calc(100% - 20px) calc(100% - 24px) / 40px 40px; padding-right:64px;}
    body > main > article > nav > ul > li > a > i { display: inline-block; margin-right: 16px; position: absolute; left:var(--contain); top:var(--contain); width:64px; height:85px; background:transparent url('location_pin.png?v=1743757252') no-repeat center center/64px; text-align: center; font-style: normal; font-size:16px; font-weight:700; padding-top:20px; }
    body > main > article > nav > ul > li > a > span { display:block;}
    body > main > article > nav > ul > li > a > span.location { color:var(--black); font-weight:700; font-size: 14px;}
    body > main > article > nav > ul > li > a > span.ar { position:absolute; right:26px; top:20px; width:28px; color:var(--blue);}
    body > main > article > nav > ul > li > a > span.title {color:var(--red); font-weight:700;}
    body > main > article > nav > ul > li > a > span.subtitle { color:var(--red); font-size: 15px; line-height: 21px; font-style: italic; margin-top:4px;}
    body > main > article > nav > ul > li > a + a { padding: 12px var(--contain); background-color: var(--grey); font-size:14px; font-style: italic; min-height:auto; background-image:none;}
    
    body > main > article > nav > ul.menu-items { }
    body > main > article > nav > ul.menu-items > li.menu-item { background-color: var(--white); }
    body > main > article > nav > ul.menu-items > li.menu-item > a { padding:12px 24px; margin:0px; background-color:var(--red); color:var(--white); font-weight: 700; min-height:24px; background-image: none;}
    body > main > article > nav > ul.menu-items > li.menu-item > a[href="#"] { pointer-events: none;}
    body > main > article > nav > ul.menu-items > li.menu-item > ul.sub-menu { padding:12px 24px; margin:0px; list-style: none;}
    body > main > article > nav > ul.menu-items > li.menu-item > ul.sub-menu > li > a { text-decoration: none;  line-height: 1.6em; display:block; padding: 8px 32px 8px 0; background: url('arrow-right.png?v=1743757252') no-repeat right 1px / 40px 40px; }
    body > main > article > nav > ul.menu-items > li.menu-item > ul.sub-menu > li > a > span { }
        
    section.list { padding:24px; background-color: var(--white); }
    section.list > h4 {color:var(--red); font-size:22px; margin-bottom: 8px;}
    section.list ul{ margin:0px; padding:0px; margin-bottom: 1em; list-style: none;}
    section.list ul > li { border-bottom:rgba(0,0,0,0.2) 1px solid; padding:12px 0 12px 48px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23CC9900" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-square"><polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path></svg>') no-repeat left 12px/24px; }
    section.list ul > li:last-child { border:none;}
    section.list ul > li > h4 { font-weight:600; margin:0px; color:var(--black);}
    
    section.accordions { padding:24px;}
    section.accordions > h4 {color:var(--red); font-size:22px; margin-bottom: 8px;}
    section.accordions > details:not(:last-child) {border-bottom:rgba(0,0,0,0.2) 1px solid;}
    section.accordions > details > summary { position:relative; padding: 12px 32px 12px 0; font-weight: 600; line-height: 1.6em; list-style: none;}
    section.accordions > details > summary > b { position: absolute; display:block; right:0px; top:12px; width:24px; height:24px; transition: all 125ms ease-in-out;}
    section.accordions > details > summary:hover { cursor:pointer;}
    section.accordions > details > summary::-webkit-details-marker { display:none;}
    section.accordions > details[open] > summary > b { transform: rotate(180deg);}
    
   
    
    
    body > dialog { 
        position:fixed; z-index: 999; left:0px; top:0px; right:0px; bottom:0px; width:100vw; height:100vh; border:none; box-shadow: none; margin:0px; padding:0px;
        background-color:rgba(0,0,0,0.8); color: inherit; pointer-events:none; opacity:0; transition: opacity 75ms linear;}
    body > dialog > button { position:absolute; z-index: 1; right:24px; top:24px; z-index: 1; border:none; background: transparent; box-shadow: none; margin:0px; padding:12px;}
    body > dialog > button * { pointer-events: none;}
    body > dialog > button > i { color: #fff;}
    body > dialog > button > span { display:none;}
    body > dialog > button:hover { cursor: pointer;}
    body > dialog > section { width:100%; height:100%; max-height:100%; max-width:100%; z-index: 0;}
    body > dialog > section img { height:auto;}
    body > dialog[open] { pointer-events: all; opacity: 1; touch-action: pinch-zoom;}
    
    /* SPECIFICS */
    body.page-id-445 > main > article > hgroup {display:none;}
    
    a.appkit-button { display:block; clear:both; width:100%; max-width:100%; padding:12px; text-decoration: none; background:var(--red) url('arrow-right-white.png?v=1743757252') no-repeat right center / 40px 40px; color:var(--white); border-radius:8px; margin-top:12px; font-weight:700;}
    ul.appkit-information { list-style: none; padding:0px; margin:0px; font-size: 14px; line-height:19px; opacity:0.6;}
    ul.appkit-information > li { margin-bottom:6px;}