/* ---------------------------------------------------------------------- */
/*  Settings -> Variables
/* ---------------------------------------------------------------------- */

:root {

    /* Colors */

    --main-bg-color: #f2f2f2;
    --main-accent-bg-color: #ccc;
    --secondary-bg-color: #49ff00;
    --main-font-color: #404040;
    --main-accent-font-color: #000;

    --map-color-red: #ff00ff;
    --map-color-blue: #6c82ed;
    --map-color-navy: #41feff;
    --map-color-green: #49ff00;
    --map-color-yellow: #ffff00;


    /* Typography */

    --main-font-family: Helvetica, Arial, sans-serif;
    --secondary-font-family: 'Space Mono', monospace;

    --base-font-size: 16px;
    --smaller-font-size: 0.75rem;/* 12px */
    --small-font-size: 0.875rem; /* 14px */
    --big-font-size: 1.125rem; /* 18px */
    --bigger-font-size: 3rem; /* 48px */


    /* Spacing */

    --space: 10px;
    --space-x2: calc(2 * var(--space));
    --space-x3: calc(3 * var(--space));
    --space-x4: calc(4 * var(--space));
    --space-x5: calc(5 * var(--space));
    --space-x6: calc(6 * var(--space));
    --space-x8: calc(8 * var(--space));

    --main-height: var(--space-x6);

}

@media all and (max-width: 900px) {

    :root {
        --bigger-font-size: 2.45rem; /* 40px */
    }

}

@media all and (max-width: 800px) {

    :root {
        --big-font-size: 1rem; /* 16px */
        --bigger-font-size: 1.125rem; /* 21px */
        --main-height: var(--space-x5);
        --header-height: var(--space-x8);
    }

}


/* ---------------------------------------------------------------------- */
/*  Vendor –> Hamburgers
           -> https://jonsuh.com/hamburgers
/* ---------------------------------------------------------------------- */

.hamburger{padding:15px;display:inline-block;cursor:pointer;transition-property:opacity,filter;transition-duration:.15s;transition-timing-function:linear;font:inherit;color:inherit;text-transform:none;background-color:transparent;border:0;margin:0;overflow:visible}.hamburger:hover{opacity:.7}.hamburger-box{width:40px;height:24px;display:inline-block;position:relative}.hamburger-inner{display:block;top:50%;margin-top:-2px}.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before{width:40px;height:4px;background-color:#000;border-radius:4px;position:absolute;transition-property:transform;transition-duration:.15s;transition-timing-function:ease}.hamburger-inner::after,.hamburger-inner::before{content:"";display:block}.hamburger-inner::before{top:-10px}.hamburger-inner::after{bottom:-10px}.hamburger--squeeze .hamburger-inner{transition-duration:75ms;transition-timing-function:cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze .hamburger-inner::before{transition:top 75ms .12s ease,opacity 75ms ease}.hamburger--squeeze .hamburger-inner::after{transition:bottom 75ms .12s ease,transform 75ms cubic-bezier(.55,.055,.675,.19)}.hamburger--squeeze.is-active .hamburger-inner{transform:rotate(45deg);transition-delay:.12s;transition-timing-function:cubic-bezier(.215,.61,.355,1)}.hamburger--squeeze.is-active .hamburger-inner::before{top:0;opacity:0;transition:top 75ms ease,opacity 75ms .12s ease}.hamburger--squeeze.is-active .hamburger-inner::after{bottom:0;transform:rotate(-90deg);transition:bottom 75ms ease,transform 75ms .12s cubic-bezier(.215,.61,.355,1)}


/* ---------------------------------------------------------------------- */
/*  Vendor –> jQuery Selectric v1.13.0
           -> http://selectric.js.org/
/* ---------------------------------------------------------------------- */

.selectric .button,.selectric .label{height:38px;line-height:38px;display:block}.selectric-wrapper{position:relative;cursor:pointer}.selectric-responsive{width:100%}.selectric{border:1px solid #DDD;border-radius:0;background:#F8F8F8;position:relative;overflow:hidden}.selectric .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 38px 0 10px;font-size:12px;color:#444;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.selectric-disabled,.selectric-items .disabled{filter:alpha(opacity=50);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.selectric .button{position:absolute;right:0;top:0;width:38px;background-color:#F8f8f8;color:#BBB;text-align:center;font:0/0 a}.selectric .button:after{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;width:0;height:0;border:4px solid transparent;border-top-color:#BBB;border-bottom:none}.selectric-focus .selectric{border-color:#aaa}.selectric-hover .selectric{border-color:#c4c4c4}.selectric-hover .selectric .button{color:#a2a2a2}.selectric-hover .selectric .button:after{border-top-color:#a2a2a2}.selectric-open{z-index:9999}.selectric-open .selectric{border-color:#c4c4c4}.selectric-open .selectric-items{display:block}.selectric-disabled{opacity:.5;cursor:default;user-select:none}.selectric-hide-select{position:relative;overflow:hidden;width:0;height:0}.selectric-hide-select select{position:absolute;left:-100%}.selectric-hide-select.selectric-is-native{position:absolute;width:100%;height:100%;z-index:10}.selectric-hide-select.selectric-is-native select{position:absolute;top:0;left:0;right:0;height:100%;width:100%;border:none;z-index:1;box-sizing:border-box;opacity:0}.selectric-input{position:absolute!important;top:0!important;left:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;margin:0!important;padding:0!important;width:1px!important;height:1px!important;outline:0!important;border:none!important;background:0 0!important}.selectric-temp-show{position:absolute!important;visibility:hidden!important;display:block!important}.selectric-items{display:none;position:absolute;top:100%;left:0;background:#F8F8F8;border:1px solid #c4c4c4;z-index:-1;box-shadow:0 0 10px -6px}.selectric-items .selectric-scroll{height:100%;overflow:auto}.selectric-above .selectric-items{top:auto;bottom:100%}.selectric-items li,.selectric-items ul{list-style:none;padding:0;margin:0;font-size:12px;line-height:20px;min-height:20px}.selectric-items li{display:block;padding:10px;color:#666;cursor:pointer}.selectric-items li.selected{background:#E0E0E0;color:#444}.selectric-items li.highlighted{background:#D0D0D0;color:#444}.selectric-items li:hover{background:#D5D5D5;color:#444}.selectric-items .disabled{opacity:.5;cursor:default!important;background:0 0!important;color:#666!important;user-select:none}.selectric-items .selectric-group .selectric-group-label{font-weight:700;padding-left:10px;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background:0 0;color:#444}.selectric-items .selectric-group.disabled li{filter:alpha(opacity=100);opacity:1}.selectric-items .selectric-group li{padding-left:25px}



/* ---------------------------------------------------------------------- */
/*  Vendor –> Autcomplete
/* ---------------------------------------------------------------------- */
*:focus {outline: none;}
.autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 2px solid var(--main-accent-bg-color); border-top: 0px; background: #FFF; cursor: default; overflow: auto; max-height: 300px!important; position: fixed!important;}
.autocomplete-suggestion {padding: var(--space-x2); white-space: normal; overflow: hidden; font-weight: bold; text-align: left; font-size:var(--small-font-size); border-bottom: 2px solid var(--main-accent-bg-color);}
.autocomplete-suggestion:last-of-type {border-bottom: 0px;}
.autocomplete-no-suggestion { padding: 11px 10px;}
.autocomplete-selected { background: #D5D5D5; color: #000;}
.autocomplete-suggestions strong { font-weight: bold; color: #000; }
.autocomplete-group { padding: 11px 10px; font-weight: bold; font-size: 14px; color: #000; display: block; border-bottom: 1px solid #000;}



/* ---------------------------------------------------------------------- */
/*  Generic –> Reset -> normalize.css v8.0.0
/*                   -> http://github.com/necolas/normalize.css
/* ---------------------------------------------------------------------- */

button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bold}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.5;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}


/* ---------------------------------------------------------------------- */
/*  Generic –> Box Sizing
/* ---------------------------------------------------------------------- */

*, *:before, *:after {-webkit-box-sizing: border-box; box-sizing: border-box;}


/* ---------------------------------------------------------------------- */
/*  Generic –> Shared
/* ---------------------------------------------------------------------- */

html, body {font-family: var(--main-font-family); font-size: var(--base-font-size); line-height: 1.4; font-weight: 300; color: var(--main-font-color);}
body {margin-top: var(--main-height); background: var(--main-bg-color);}
body.directorio, body.mapeamento {margin-top: calc(2 * var(--main-height));}

hr {display: block; height: 1px; margin: 1em 0; padding: 0; border: 0; border-top: 1px solid #ccc;}

a {color: var(--main-font-color); text-decoration: none; transition: all 0.6s ease 0s;}
a:hover {color: var(--main-accent-font-color); text-decoration: none;}
p a {text-decoration: underline;}
p:last-child {margin-bottom: 0;}

@media all and (max-width: 800px) {

    body, body.directorio, body.mapeamento {margin-top: var(--header-height);}

    .nav-is-open {overflow: hidden;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Header
/* ---------------------------------------------------------------------- */

.site-logo {margin: calc(1.5 * var(--space)) var(--space-x2) var(--space-x2); font-size: var(--bigger-font-size); text-decoration: underline; line-height: 1;}

.header-main {display: none;}

.header-main time {font-family: var(--secondary-font-family); font-size: var(--small-font-size); position: absolute; top: var(--space-x2); right: var(--space-x2);}

@media all and (max-width: 800px) {

    .header-main {display: block; height: var(--header-height); padding: var(--space-x2); background: var(--secondary-bg-color); position: fixed; top: 0; right: 0; left: 0; z-index: 999999;}
    .header-main h1 {margin: 0;}

    .header-main time {display: none;}
    .nav-is-open .header-main time {display: block; font-size: var(--smaller-font-size); position: fixed; top: auto; right: auto; bottom: var(--space-x2); left: var(--space-x2); z-index: 2;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Navigation Button (Mobile)
/* ---------------------------------------------------------------------- */

.hamburger {display: none; padding: var(--space-x2); position: absolute; top: 5px; right: 0;}
.hamburger:focus {outline: 0;}
.hamburger-box {width: var(--space-x2); height: 16px;}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {width: var(--space-x2); height: 2px;}
.hamburger-inner::before {top: -6px;}
.hamburger-inner::after {bottom: -6px;}

@media all and (max-width: 800px) {

    .hamburger {display: block;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Navigation
/* ---------------------------------------------------------------------- */

.nav-main {position: fixed; top: 0; right: 0; left: 0; z-index: 2;}
.nav-main ul {display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; background: var(--main-bg-color); border-bottom: 2px solid var(--main-accent-bg-color); list-style: none; position: relative; z-index: 99999;}
.nav-main li {font-size: var(--small-font-size); font-weight: bold; text-transform: lowercase;}
.nav-main a {display: block; height: calc(var(--main-height) - 2px); padding: 0 var(--space-x2); line-height: var(--main-height);}
.nav-main a:hover, .nav-main .active a {background: var(--main-accent-bg-color);}

@media all and (max-width: 800px) {

    .nav-main {display: none;}

    body.nav-is-open .nav-main {display: block; background: var(--secondary-bg-color); position: fixed; top: var(--header-height); right: 0; bottom: 0; left: 0; z-index: 9999;}
    .nav-main ul {grid-template-columns: 1fr; background: var(--secondary-bg-color); border-top: 1px solid var(--main-bg-color); border-bottom: none;}
    .nav-main li {border-bottom: 1px solid var(--main-bg-color);}
    .nav-main a:hover, .nav-main .active a {background: var(--main-bg-color);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Home
/* ---------------------------------------------------------------------- */

.welcome {margin-top: 0; background-color: var(--secondary-bg-color);}

.welcome .header-main {display: block;}
.welcome .nav-main {top: auto; right: 0; bottom: 0; left: 0; z-index: 1;}
.welcome .nav-main ul {border-top: 2px solid var(--main-accent-bg-color); border-bottom: none;}

.welcome main {padding: var(--space-x4) var(--space-x2) var(--space-x8);}
.welcome main .feature-big {display: none;}
.welcome main p {margin: 0 0 10px; font-size: 5.8vw; font-weight: bold; line-height: 1;}
.welcome main p strong {font-size: 2.5vw;}
.welcome main p em {margin-left: -10px; font-size: 1.2vw; font-style: normal;}
.welcome main p strong em {margin: 0;}

@media all and (max-width: 800px) {

    .welcome {margin-top: var(--header-height);}

    .welcome .nav-main ul {border-top: 1px solid var(--main-bg-color);}

    .welcome main .feature-big {display: block;}
    .welcome main .feature-small {display: none;}

    .welcome main p {font-size: 6.5vw;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Navigation Form
/* ---------------------------------------------------------------------- */

.form-nav {display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 2px solid var(--secondary-bg-color); position: fixed; top: var(--main-height); right: 0; left: 0; z-index: 2;}
.mapeamento .form-nav {border-bottom: 0;}
.form-nav select {opacity: 0;}

.selectric {background: var(--main-bg-color); border: 0;}
.selectric:hover, .selectric-open .selectric, .selectric-hover .selectric {background: var(--main-accent-bg-color);}
.selectric .label {margin-left: var(--space-x2); font-size: var(--small-font-size); font-weight: bold; color: var(--main-font-color); text-transform: lowercase;}
.selectric .button {background: transparent; color: var(--main-font-color);}
.selectric .button, .selectric .label {height: var(--main-height); line-height: var(--main-height);}

.selectric .button:after, .selectric .button:before {content: ''; display: block; width: 0; height: 0; border-style: solid; position: absolute;}
.selectric .button:after {border-color: var(--main-bg-color) transparent transparent; border-width: 8px; top: 6px; left: 0;}
.selectric:hover .button:after, .selectric-open .selectric .button:after, .selectric-hover .selectric .button:after {border-color: var(--main-accent-bg-color) transparent transparent transparent;}
.selectric .button:before {border-color: #474747 transparent transparent; border-width: 9px; border-radius: 6px; top: 26px; left: var(--space);}

.selectric-items {background: var(--main-bg-color); border: 2px solid var(--main-accent-bg-color); border-top: none;}
.selectric-items li {padding: var(--space-x2); border-top: 2px solid var(--main-accent-bg-color); font-size: var(--small-font-size); font-weight: bold; color: var(--main-font-color); text-transform: lowercase;}

.selectric-items li[data-index="0"] {position: relative; color: transparent;}
.selectric-items li[data-index="0"]:after {content: 'Todos'; position: absolute; left: 20px; top: 20px; color: #444;}
.selectric-freguesia-select .selectric-items li[data-index="0"]:after {content: 'todas';}

input[role="search"] {width: 100%; height: var(--main-height); padding: 0 var(--space-x2); background: var(--main-bg-color); border: 2px solid transparent; border-bottom: 0; font-size: var(--small-font-size); font-weight: bold; color: var(--main-font-color); text-transform: lowercase; line-height: var(--main-height);}

input[role="search"]:focus {border: 2px solid var(--secondary-bg-color); border-bottom: 0; outline: none;}

::placeholder {color: var(--main-font-color); opacity: 1;}
:-ms-input-placeholder {color: var(--main-font-color);}
::-ms-input-placeholder {color: var(--main-font-color);}

@media all and (max-width: 800px) {

    .form-nav {grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); position: static;}

    .selectric {border-bottom: 2px solid var(--main-accent-bg-color);}
    .selectric .button:before {top: 22px;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Directório
/* ---------------------------------------------------------------------- */

.directorio-grid {display: grid; grid-template-columns: repeat(4, 25%);}
.directorio-item {display: grid; min-height: 200px; padding: 0; border-right: 2px solid var(--secondary-bg-color); border-bottom: 2px solid var(--secondary-bg-color); position: relative;}
.directorio-item:nth-child(4n+4) {border-right: 0;}
.directorio-item a {display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--space-x2);}
.directorio-item a:hover {background: var(--secondary-bg-color);}
.directorio-item h2 {width: 100%; margin: 0; padding-right: var(--space-x2); font-size: var(--big-font-size); overflow-wrap: break-word; word-break: break-word;}
.directorio-item h2 span {font-weight: normal; position: absolute; top: var(--space-x2); right: var(--space-x2);}
.directorio-item p {margin: auto 0 0; padding-top: 20px; font-family: var(--secondary-font-family); font-size: var(--smaller-font-size); }
.directorio-item span {text-transform: lowercase;}

@media all and (max-width: 800px) {

    .directorio-grid {grid-template-columns: repeat(3, 33.3333%);}

    .directorio-item:nth-child(4n+4) {border-right: 2px solid var(--secondary-bg-color);}
    .directorio-item:nth-child(3n+3) {border-right: 0;}

}

@media all and (max-width: 800px) {

    .directorio-grid {grid-template-columns: repeat(2, 50%);}

    .directorio-item:nth-child(4n+4) {border-right: 2px solid var(--secondary-bg-color);}
    .directorio-item:nth-child(3n+3) {border-right: 2px solid var(--secondary-bg-color);}
    .directorio-item:nth-child(2n+2) {border-right: 0;}

    .directorio-item a {padding: var(--space) var(--space-x2);}
    .directorio-item h2 {font-size: var(--bigger-font-size);}
    .directorio-item h2 span {top: var(--space);}

}

@media all and (max-width: 400px) {

    .directorio-item h2 {font-size: var(--base-font-size);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Entrevistas
/* ---------------------------------------------------------------------- */

.entrevista-item {display: grid; grid-template-columns: 50% 50%;}

.entrevista-item h2 {margin: 0;}
.entrevista-item h2 a {display: block; height: var(--main-height); padding: 0 25% 0 var(--space-x2); border-bottom: 2px solid var(--secondary-bg-color); font-size: var(--big-font-size); line-height: var(--main-height); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; position: relative;}
.entrevista-item h2 a:hover {background: var(--secondary-bg-color);}
.entrevista-item h2 span {font-weight: normal; position: absolute; top: 0; right: var(--space-x2);}

@media all and (max-width: 800px) {

    .entrevista-item {display: block;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Mapeamento
/* ---------------------------------------------------------------------- */

.hidden-info {display: none;}

#map {min-height: calc(100vh - (2 * var(--main-height))); height: 100%;}

.popup-tip-anchor {width: 400px; height: 0; position: absolute; }
.popup-bubble-anchor {width: 100%; position: absolute; bottom: 8px; left: 0;}

.popup-bubble-content {padding: var(--space-x2) var(--space-x8) var(--space-x2) var(--space-x2); overflow-y: auto; transform: translate(-50%, -100%); position: absolute; top: 0; left: 0; z-index: 999}
.popup-bubble-content h2 {margin: 0 0 var(--main-height); font-size: var(--big-font-size);}
.popup-bubble-content .close {line-height: 1; transition: none; position: absolute; top: var(--space-x2); right: var(--space-x2); cursor: pointer;}
.popup-bubble-content .close:hover {font-weight: bold;}
.popup-bubble-content .close:before {content: '\00D7'; font-size: var(--big-font-size);}
.popup-bubble-content p {margin: 0; font-family: var(--secondary-font-family); font-size: var(--smaller-font-size); text-transform: lowercase;}

.popup-marker {width: var(--space-x2); height: var(--space-x2); text-align: center; line-height: var(--space-x2); cursor: pointer; position: relative; left: calc(-1 * var(--space));}
.popup-marker:before {content: '+'; font-size: var(--big-font-size);}
.color-red {background: var(--map-color-red);}
.color-blue {background: var(--map-color-blue);}
.color-navy {background: var(--map-color-navy);}
.color-green {background: var(--map-color-green);}
.color-yellow {background: var(--map-color-yellow);}

#map a[href^="https://maps.google.com/maps"]{display:none !important}
.gmnoprint a, .gmnoprint span, .gm-style-cc {display:none;}

.stats-container {width: 25%; height: calc(100vh - 120px); overflow: scroll; position: fixed; top: 120px; right: 0px; opacity: 0; background: var(--main-accent-bg-color); padding: var(--space-x2); font-family: var(--secondary-font-family);
    font-size: var(--smaller-font-size); animation: slideInFromRight 0.5s linear 1s 1 ; animation-fill-mode: forwards;}

@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0
  }
  100% {
    transform: translateX(0%);
    opacity: 1
  }
}

.stats-container>div {margin: var(--space-x2) 0}
.stats-container>div:first-of-type {margin: 0px 0px var(--space-x2) 0px}
.stats-container ul {margin: var(--space) 0; padding: 0px; list-style-type: none;}
.stats-container ul li {position: relative; padding-left: var(--space-x3);}
.stats-container ul li span {width: 10px; height: 10px; position: absolute; top: 2px; left: var(--space);}

.stats-container .chart-donut {width: 80%; margin: 0px auto;}

.stats-container ul.chart-bar {width: 80%; margin: var(--space-x4) auto; display: flex; align-items: flex-end; justify-content: center;}
.stats-container ul.chart-bar li {display: inline-flex; margin-left: var(--space); width: 60px;}

.stats-container ul.chart-bar-horizontal  {width: 80%; margin: var(--space-x4) auto; display: block; align-items: flex-end; justify-content: center;}
.stats-container ul.chart-bar-horizontal li {display: block; margin-bottom: var(--space); height: 50px}

.stats-container .color-bw-0 {background: rgba(0,0,0,0.7);}
.stats-container .color-bw-1 {background: rgba(0,0,0,0.5);}
.stats-container .color-bw-2 {background: rgba(0,0,0,0.3);}
.stats-container .color-bw-3 {background: #fff;}

body.mapeamento .selectric-js-select:last-of-type .selectric-items li, body.mapeamento .haslocal .selectric-js-select:last-of-type .selectric .label {text-transform: capitalize!important;}
body.mapeamento .haslocal .selectric-js-select:last-of-type .selectric {background: var(--main-accent-bg-color)}
body.mapeamento .haslocal .selectric-js-select:last-of-type  .selectric .button:after {border-color: var(--main-accent-bg-color) transparent transparent}

@media all and (max-width: 800px) {

    #map {min-height: 100vh; height: 100%;}
    .stats-container {position: relative; top: 0; width: 100%; height: auto}
}

@media all and (max-width: 400px) {


    .popup-tip-anchor {width: 100%;}
    .popup-bubble-content {width: 100%; padding: var(--space-x2); z-index: 9999999;}
}


/* ---------------------------------------------------------------------- */
/*  Elements –> Page Detail
/* ---------------------------------------------------------------------- */

.page-detail {min-height: calc(100vh - var(--main-height)); background: var(--secondary-bg-color); position: relative;}

.page-detail header {position: relative;}
.page-detail header h1 {margin-top: calc(2.4 * var(--space)); font-size: var(--big-font-size); text-decoration: underline;}
.page-detail header h3 {margin: 0; font-family: var(--secondary-font-family); font-size: var(--smaller-font-size); font-weight: normal; position: absolute; right: var(--space-x4); bottom: var(--space-x2); left: var(--space-x2);}

.page-detail aside {margin-top: calc(2.4 * var(--space)); font-family: var(--secondary-font-family); font-size: var(--smaller-font-size);}
.page-detail aside p {margin-top: 0;}

.page-detail section h2 {margin-top: calc(2.4 * var(--space)); font-size: var(--big-font-size);}
.page-detail section .summary {font-size: var(--big-font-size);}

.page-detail .content {font-family: var(--secondary-font-family); font-size: var(--smaller-font-size);}
.page-detail .content h4 {font-weight: normal;}
.page-detail .content ul {padding: 0; list-style: none;}
.page-detail .content ul li:before {content: '- ';}

.close-overlay {display: block; text-align: center; position: absolute; top: var(--space-x2); right: var(--space-x2);}
.close-overlay:hover {font-weight: bold;}
.close-overlay:before {content: '\00D7';}

@media all and (max-width: 800px) {

    .page-detail header h1 {margin: 0; padding: var(--space-x2) var(--space-x2) 0 0; font-size: calc(1.5 * var(--bigger-font-size));}
    .page-detail header h3 {position: static;}

    .entrevistas .close-overlay {top: calc(7.5 * var(--space));}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Page Detail Grid Layout
/* ---------------------------------------------------------------------- */

.directorio .page-detail {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 1fr; grid-template-areas: "header aside section section";}

.directorio .page-detail header {grid-area: header; padding-right: var(--space-x4); padding-left: var(--space-x2);}
.directorio .page-detail aside {grid-area: aside; padding-right: var(--space-x4);}
.directorio .page-detail section {grid-area: section; padding-right: var(--space-x4);}

.entrevistas .page-detail {display: grid; align-content: start; grid-template-columns: auto auto; grid-template-rows: auto auto; grid-template-areas: "header header" "aside section";}

.entrevistas .page-detail header {grid-area: header; padding-right: var(--space-x4); padding-left: var(--space-x2);}
.entrevistas .page-detail aside {grid-area: aside; padding-right: var(--space-x4); padding-left: var(--space-x2);}
.entrevistas .page-detail section {grid-area: section; padding: 0 var(--space-x4) var(--space-x2) 0;}

@media all and (max-width: 1024px) {

    .entrevistas .page-detail {grid-template-areas: "header" "aside" "section";}
    .entrevistas .page-detail section {padding: 0 var(--space-x2) var(--space-x4);}

}

@media all and (max-width: 800px) {

    .directorio .page-detail {display: block;}
    .entrevistas .page-detail {grid-template-areas: "player" "header" "aside" "section";}
    .entrevistas .page-detail .audio-player {display: grid; grid-area: player;}

    article.page-detail header, article.page-detail aside, article.page-detail section {margin: 0; padding: 0 var(--space-x2) var(--space-x2);}

    .page-detail section h2 {margin-top: 0;}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Page Overlay
/* ---------------------------------------------------------------------- */

body.overlay-open {overflow: hidden;}

.directorio .page-overlay {width: 100%; height: calc(100vh - calc(2 * var(--main-height))); background: var(--secondary-bg-color); position: fixed; top: calc(2 * var(--main-height)); overflow-y: auto; z-index: 999;}

.entrevistas .page-overlay {width: 50%; height: calc(100vh - var(--main-height)); background: var(--secondary-bg-color); position: fixed; top: var(--main-height); overflow-y: auto; z-index: 999;}

.page-overlay .page-detail {min-height: calc(100vh - calc(2 * var(--main-height))); padding-bottom: var(--space-x2);}

@media all and (max-width: 800px) {

    body.overlay-open {height: auto; overflow: hidden;}

    .page-overlay {height: calc(100vh - var(--header-height)); overflow-y: auto; -webkit-overflow-scrolling: touch;}

    .directorio .page-overlay, .entrevistas .page-overlay {width: 100%; border-top: 1px solid var(--main-bg-color); position: fixed; top: var(--header-height);}
    .directorio .page-overlay {height: calc(100vh - var(--header-height));}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Audio
/* ---------------------------------------------------------------------- */

audio {display: none; width: 100%;}

.audio-player {display: grid; grid-template-columns: var(--main-height) 1fr var(--main-height);}
.page-detail .audio-player {display: none;}

.play, .pause {display: flex; justify-content: center; align-items: center; background: var(--secondary-bg-color);}
.play:hover, .is-playing .play, .pause:hover, .is-paused .pause {background: var(--main-font-color); color: var(--secondary-bg-color); cursor: pointer;}
.play:before {content: '\25BA';}
.pause:before {content: '\258F\258F'; font-size: var(--small-font-size); letter-spacing: -8px;}

.progress-wrap {display: grid; grid-template-columns: auto 1fr auto; background: var(--main-accent-bg-color);}
.current-time, .end-time {padding: 0 var(--space-x2); font-family: var(--secondary-font-family); font-size: var(--smaller-font-size); line-height: var(--main-height);}
.progress {display: flex; justify-content: center; align-items: center; cursor: pointer;}
.progress-bar {display: block; width: 100%; height: 5px; background: var(--main-bg-color);}
.progress-bar span {display: block; width: 0; height: 5px; background: var(--main-font-color);}

@media all and (max-width: 800px) {

    .audio-player {display: none;}

    .play, .pause {background: var(--main-font-color); color: var(--secondary-bg-color);}

    .play:hover, .is-playing .play, .pause:hover, .is-paused .pause {background: var(--secondary-bg-color); color: var(--main-font-color);}

}


/* ---------------------------------------------------------------------- */
/*  Elements –> Page
/* ---------------------------------------------------------------------- */

body.pages {background: var(--secondary-bg-color);}

.pages .nav-main ul {border: 0;}

.page-show {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 200px auto; grid-template-areas: "header header fichatecnica contactos" "section section fichatecnica contactos"; padding: var(--space-x2);}

.page-show header {grid-area: header; margin: calc(1.5 * var(--space)) 0 var(--space-x2); font-size: var(--bigger-font-size); font-weight: bold; text-decoration: underline; line-height: 1;}

.page-show section {grid-area: section; padding-right: var(--space-x2);}
.page-show section .text {font-size: var(--big-font-size);}
.page-show .ficha-tecnica {grid-area: fichatecnica; padding: 0 var(--space-x2); background: var(--secondary-bg-color);}
.page-show .ficha-tecnica img {max-width: 70%; max-height: 70px; mix-blend-mode: multiply;}
.page-show .contactos {grid-area: contactos; padding-left: var(--space-x2);}
.page-show .ficha-tecnica .text, .page-show .contactos .text {grid-area: contactos; font-family: var(--secondary-font-family); font-size: var(--smaller-font-size);}

.page-show section.full-text {grid-column: 1 / -1; column-count: 2; column-gap: var(--space-x2);}
.page-show section.full-text p:first-child {margin-top: 0;}

@media all and (max-width: 800px) {

    .page-show {display: block;}
    .page-show header {display: none;}
    .page-show section, .page-show .ficha-tecnica, .page-show .contactos {padding: 0;}

}