:root {
  --lightgreen: rgba(0, 148, 139, .15);
  --dpurple: hsl(252, 83%, 15%); /* Deep Purple */
  --dpurple-light: hsl(252, 83%, 80%);

  --beleid: hsl(204, 100%, 34%); /* Beleid (Blue) */
  --beleid-light: hsl(204, 100%, 76%);
  --operationeel: hsl(120, 35%, 51%); /* Operationeel (Green) */
  --operationeel-light: hsl(120, 35%, 70%);
  --inspiratie: hsl(280, 74%, 67%); /* Inspiratie (Violet) */
  --inspiratie-light: hsl(280, 74%, 78%);
  --monitoring: hsl(51, 73%, 59%); /* Monitoring (Yellow) */
  --monitoring-light: hsl(51, 73%, 68%);
}

section.best__list { padding: 48px 0 0 0; }
section.best__list p { font-size: 21px; margin-top: 48px; }
section.best__full { padding: 0px 0 96px 0; min-height: 80vh; }

.best__tile { padding: 12px; }
.best__tile .inner { /*min-height: 240px;*/ border-radius: 12px; padding: 16px; position: relative; cursor: pointer; transition: .3s; }

.best__tile .inner.beleid { border: 2px solid var(--beleid); border-top: 48px solid var(--beleid); }
.best__tile .inner.operationeel { border: 2px solid var(--operationeel); border-top: 48px solid var(--operationeel); }
.best__tile .inner.inspiratie { border: 2px solid var(--inspiratie); border-top: 48px solid var(--inspiratie); }
.best__tile .inner.monitoring { border: 2px solid var(--monitoring); border-top: 48px solid var(--monitoring); }

.best__tile .inner:hover { box-shadow: var(--major-shadow); }

/*
.best__tile .inner.beleid:hover { background-color: var(--beleid-light); }
.best__tile .inner.operationeel:hover { background-color: var(--operationeel-light); }
.best__tile .inner.inspiratie:hover { background-color: var(--inspiratie-light); }
.best__tile .inner.monitoring:hover { background-color: var(--monitoring-light); }
*/
.best__tile .inner span { position: absolute; top: -42px; right: 12px; }

.best__tile h3 { position: absolute; top: -42px; left: 54px; font-size: 21px; line-height: 32px; color: #FFF; font-weight: 600; }
.best__tile p { font-size: 17px; }
.best__tile .type { border-radius: 4px; background-color: #CCC; box-shadow: var(--tiny-shadow); display: inline-block; font-size: 19px; padding: 3px 10px; margin-left: 12px; }
.best__tile hr { margin: 24px auto 16px; max-width: 90%; position: relative; border: none; background-color: #B2B2B2; height: 1px; }

.best__tile .lightbulb {
  position: relative; border: 1px solid var(--dpurple); border-left-width: 36px; float: left;
  font-size: 19px; color: var(--dpurple); margin: 0; transition: .2s; padding-left: 8px;  }
.best__tile .lightbulb::before { position: absolute; height: 24px; width: 24px; content:''; background-image: url('icon/lightbulb-white.png'); background-size: 100% 100%; top: 4px; left: -30px; }
.best__tile .lightbulb::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0;
  background: var(--dpurple); transition: width 0.4s ease; z-index: -1;  /* behind text and icon */
}
.best__tile .lightbulb:hover { color: #FFF; }
.best__tile .lightbulb:hover::after { width: 100%; }

.best__tags { width: 100%; text-align: right; margin: 12px 0 24px 0; }
.best__logos img { height: 27px; }

.best__logo { display: inline-block; padding: 4px; border-radius: 4px; }
.best__link { display: inline-block; transition: .3s; padding: 4px; border-radius: 4px; }
.best__link:hover { background-color: #EEE; }

.info {
  position: relative; border: 1px solid #00948B; border-left-width: 42px; height: 42px; line-height: 40px; padding: 0 24px; border-radius: 4px;
  font-size: 19px; color: #00948B; margin: 0; transition: .2s; display: inline-block; background-color: rgba(0, 148, 139, .15); }
.info::before { position: absolute; height: 32px; width: 32px; content:''; background-image: url('icon/lightbulb-white.png'); background-size: 100% 100%; top: 4px; left: -36px; padding: 4px; }

.grid__link { font-size: 15px; }

.filters .button::before { display: inline-block; height: 32px; width: 32px; content:''; margin: 2px 12px 0 0; vertical-align: top; background-size: 100% 100%; }
.filters .button.active::before { background-image: url('icon/cm.png');}

.best__tile .inner::before { position: absolute; height: 32px; width: 32px; content:''; background-size: 100% 100%; top: -38px; left: 16px; }
.best__tile.electricity .inner::before, .button.active[data-tag="electricity"]::before { background-image: url('icon/electricity-white.png');}
.best__tile.flight .inner::before, .button.active[data-tag="flight"]::before { background-image: url('icon/flight-white.png');}
.best__tile.transport_home .inner::before, .button.active[data-tag="transport_home"]::before { background-image: url('icon/transport-white.png');}
.best__tile.transport_study .inner::before, .button.active[data-tag="transport_study"]::before { background-image: url('icon/bike-white.png');}
.best__tile.food .inner::before, .button.active[data-tag="food"]::before { background-image: url('icon/forkknife-white.png');}
.best__tile.fossil .inner::before, .button.active[data-tag="fossil"]::before { background-image: url('icon/fossil-white.png');}
.best__tile.water .inner::before, .button.active[data-tag="water"]::before { background-image: url('icon/water-white.png');}
.best__tile.garbage .inner::before, .button.active[data-tag="garbage"]::before { background-image: url('icon/garbage-white.png');}
.best__tile.biodiversity .inner::before, .button.active[data-tag="biodiversity"]::before { background-image: url('icon/biodiversity-white.png');}
.best__tile.other .inner::before, .button.active[data-tag="other"]::before { background-image: url('icon/other-white.png');}
.best__tile.research .inner::before, .button.active[data-tag="research"]::before { background-image: url('icon/research-white.png');}
.best__tile.education .inner::before, .button.active[data-tag="education"]::before { background-image: url('icon/education-white.png');}
.best__tile.general .inner::before, .button.active[data-tag="general"]::before { background-image: url('icon/general-white.png');}

.button { border-radius: 4px; padding: 2px 10px; color: #FFF; display: inline-block; font-size: 23px; margin: 4px; transition: .2s; cursor: pointer; }
.button.indicator { background-color: #444; border: 2px solid #444; }