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

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

/* FONTS */
	@font-face {
        font-family: 'Poppins';
        src: url("Poppins-Regular.eot?v=1773388102");
        src: url('fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'),
            url("Poppins-Regular.woff2?v=1773388102") format('woff2'),
            url("Poppins-Regular.woff?v=1773388102") format('woff'),
            url("Poppins-Regular.ttf?v=1773388102") format('truetype'),
            url('fonts/Poppins-Regular.svg#Poppins-Regular') format('svg');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Poppins';
        src: url("Poppins-Bold.eot?v=1773388102");
        src: url('fonts/Poppins-Bold.eot?#iefix') format('embedded-opentype'),
            url("Poppins-Bold.woff2?v=1773388102") format('woff2'),
            url("Poppins-Bold.woff?v=1773388102") format('woff'),
            url("Poppins-Bold.ttf?v=1773388102") format('truetype'),
            url('fonts/Poppins-Bold.svg#Poppins-Bold') format('svg');
        font-weight: bold;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Poppins';
        src: url("Poppins-BoldItalic.eot?v=1773388102");
        src: url('fonts/Poppins-BoldItalic.eot?#iefix') format('embedded-opentype'),
            url("Poppins-BoldItalic.woff2?v=1773388102") format('woff2'),
            url("Poppins-BoldItalic.woff?v=1773388102") format('woff'),
            url("Poppins-BoldItalic.ttf?v=1773388102") format('truetype'),
            url('fonts/Poppins-BoldItalic.svg#Poppins-BoldItalic') format('svg');
        font-weight: bold;
        font-style: italic;
        font-display: swap;
    }
    @font-face {
        font-family: 'Poppins';
        src: url("Poppins-SemiBold.eot?v=1773388102");
        src: url('fonts/Poppins-SemiBold.eot?#iefix') format('embedded-opentype'),
            url("Poppins-SemiBold.woff2?v=1773388102") format('woff2'),
            url("Poppins-SemiBold.woff?v=1773388102") format('woff'),
            url("Poppins-SemiBold.ttf?v=1773388102") format('truetype'),
            url('fonts/Poppins-SemiBold.svg#Poppins-SemiBold') format('svg');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Poppins';
        src: url("Poppins-SemiBoldItalic.eot?v=1773388102");
        src: url('fonts/Poppins-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
            url("Poppins-SemiBoldItalic.woff2?v=1773388102") format('woff2'),
            url("Poppins-SemiBoldItalic.woff?v=1773388102") format('woff'),
            url("Poppins-SemiBoldItalic.ttf?v=1773388102") format('truetype'),
            url('fonts/Poppins-SemiBoldItalic.svg#Poppins-SemiBoldItalic') format('svg');
        font-weight: 600;
        font-style: italic;
        font-display: swap;
    }    
    @font-face {
        font-family: 'Poppins';
        src: url("Poppins-Italic.eot?v=1773388102");
        src: url('fonts/Poppins-Italic.eot?#iefix') format('embedded-opentype'),
            url("Poppins-Italic.woff2?v=1773388102") format('woff2'),
            url("Poppins-Italic.woff?v=1773388102") format('woff'),
            url("Poppins-Italic.ttf?v=1773388102") format('truetype'),
            url('fonts/Poppins-Italic.svg#Poppins-Italic') format('svg');
        font-weight: normal;
        font-style: italic;
        font-display: swap;
    }

/* 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(--green); 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: transparent; box-shadow: none; margin:0px; padding:12px;}
    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(--green); position: absolute; left:0px; bottom:16px; }
    
    body > main > article blockquote { 
        display:block; position:relative;
        background:transparent url("quote_bubble.png?v=1773388102") 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=1773388102") 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(--green); 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(--green); 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=1773388102") no-repeat center center/64px; opacity:0; transform:translate(0, calc(-50% + 8px)); }
    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; transform:translate(0,-50%); transition:opacity 175ms linear 175ms, transform 275ms ease-in-out 175ms;}
    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(--green); 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:12px; height:12px; margin: 12px 12px!important;}
    body > main > article > section .swiper-pagination-bullet-active { background-color: var(--green); }    
    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(--green); stroke:var(--green);}
    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(--green); 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 { max-height: 192px; overflow: hidden; position:relative;}
    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(--green); 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]) > 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=1773388102") 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=1773388102") 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(--green); 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(--green); 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=1773388102") 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(--green); 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="green" 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 16px/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(--green); 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);}
    
    section.audio {
      padding: 0 24px; margin: 0 auto;
      border: 0px solid black;
    }
    section.audio > audio { display:none;}
    
    section.audio .player {
      position: relative; display: flex; flex-direction: row; flex-wrap:nowrap; justify-content: space-between; align-items: center;
      background-color: var(--lightgrey); margin:0px; padding: 8px 0 ;
    }
    section.audio .player > button {
        -webkit-appearance: none;
        outline: none; margin:0px; padding:0px;
        cursor: pointer;
        border: none;
        width: 64px; flex-basis: 64px; flex-shrink: 0;
        height: 32px;
        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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>') no-repeat center center / 24px;
    }
    section.audio .player.play > button {
        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="%2300811f" stroke="%2300811f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>') no-repeat center center / 24px;
    }
    section.audio .player.pause > button {
        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="%2300811f" stroke="%2300811f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>') no-repeat center center / 24px;
    }
    section.audio .player > time {
        -webkit-appearance: none; display:block; width:calc(100% - 64px); padding-left: 16px;
        display: flex; flex-direction: row; flex-wrap:nowrap; justify-content: space-between; align-items: center;
    }
    section.audio .player > time > progress {
        -webkit-appearance: none; display:inline-block; width:100%; height:20px; padding: 8px 0; color: var(--green); background-color: transparent; box-shadow:none; border:none;
    }
    section.audio .player > time > progress::-webkit-progress-bar{
        background-color: var(--white); color: var(--white);
    }
    section.audio .player > time > progress::-webkit-progress-value {
        background-color: var(--green); color: var(--green);
    } 
    section.audio .player > time > progress::-moz-progress-bar {
        background-color: var(--green); color: var(--green);
    }
    section.audio .player > time > small {
        display:inline-block; font-size: 10px; padding-left:24px; padding-right:24px; min-width: 84px; text-align: left;
    }
    section.audio .player > time > u {
        position:absolute; left:0px; top:0px;
    }
    section.audio .player #radioIcon {
      width: 30px;
      height: 30px;
      background: url("microphone.png?v=1773388102") no-repeat center;
      background-size: contain;
    }
    section.audio .player #playAudio {
      -webkit-appearance: none;
      outline: none;
      cursor: pointer;
      border: none;
      width: 30px;
      height: 30px;
      background: url("https://img.icons8.com/play") no-repeat center;
      background-size: contain;
    }
    section.audio .player #playAudio.pause {
      background: url("https://img.icons8.com/pause") no-repeat center;
      background-size: contain;
    }
    section.audio .player p {
      margin: 0 0 0 5px;
      line-height: 1;
      display: inline-flex;
    }
    section.audio .player p time {
      font-size: 10px;
    }
    section.audio .player #seekObjContainer {
      position: relative;
      width: 300px;
      margin: 0 5px;
      height: 5px;
    }
    section.audio .player #seekObjContainer #seekObj {
      position: relative;
      width: 100%;
      height: 100%;
      background-color: #e3e3e3;
      border: 1px solid black;
    }
    section.audio .player #seekObjContainer #seekObj #percentage {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      background-color: coral;
    }
    
    body > footer { position: fixed; z-index:3; left:0px; right:0px; bottom:0px;}
    body > footer > nav { max-width: 512px; margin:0 auto;   overflow:hidden; }
    body > footer > nav > svg { vertical-align: bottom; margin-bottom: -1px;}
    body > footer > nav > ul { display:flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin:0px; padding:6px var(--contain) 24px var(--contain); background-color:#f5f5f5;}
    body > footer > nav > ul > li { display:inline-block;}
    body > footer > nav > ul > li > a { display:block; text-decoration: none; color:var(--white); border-radius: 24px; background-color: var(--green); padding:6px 16px 6px 12px; font-size:14px; white-space: nowrap; 
        background: rgb(22,154,57);
        background: linear-gradient(0deg, rgba(22,154,57,1) 0%, rgba(69,191,66,1) 50%, rgba(130,230,76,1) 100%);}
    body > footer > nav > ul > li > a > * { display: inline-block; vertical-align: middle;}
    body > footer > nav > ul > li > a > i { width:24px; height:24px; margin-right:6px;}
    body > footer > nav > ul > li > a > i > * { display: block; width:24px; height:24px;}
    body > footer > nav > ul > li > a > span { font-weight:700;}
    body > footer > nav > ul > li.ar > a { background-color: var(--blue); background: rgb(16,107,200); background: linear-gradient(0deg, rgba(16,107,200,1) 0%, rgba(22,142,205,1) 50%, rgba(29,177,210,1) 100%);}
    
    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(--green) url("arrow-right-white.png?v=1773388102") 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;}