.block {
  /* border: 1px solid #ff000010; */
  min-height: 100px;
}

.block--flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--spotzi-site-darkgrey);
}

.block--project {
  margin-top: 1.5em;
}

.block--project-img {
  height: 226px;
  width: 100%;
  border-radius: 8px;
  background: var(--spotzi-site-mediumgrey);
  overflow: hidden;
}

.block--project-img img {
  min-height: 100%;
  object-fit: cover;
}


.block--img {
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid #ff000010; */
}

.block--img img {
  max-width: 100px;
}

.block--banner-content {
  /* background: yellow; */
  padding: 24px;
}

.block--banner-img {
  background: transparent;
  max-height: inherit;
  overflow: hidden;
  border-radius: 0;
}

.block--banner-img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.block--prices {
  margin: 48px 0;
}

.block--price-img {
  background: var(--spotzi-site-darkgrey);
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  max-height: 200px;
}

.block--price {
  border-radius: 8px;
  overflow: hidden;
}

.block--price:hover a,
.block--price:hover p,
.block--price:hover li {
  text-decoration: none;
}

.block--price h3 {
  margin: 0;
}

.block--price-img img {
  max-width: 100%;
  height: inherit;
  object-fit: cover;
  object-position: center;
}

.block--price-content {
  margin: 16px 0;
  padding: 0;
}

.block--price-content li {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 4px 0;
}

.block--price-content li > div {
  flex: 1;
}

.block--price-icon {
  width: 24px; /* same as padding-left set on li */
  background: var(--spotzi-site-mediumgrey);
  border-radius: 50%;
  height: 24px;
  margin-right: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block--price-icon i {
  font-size: 16px;
  color: var(--spotzi-site-green);
}

.block--price-cta {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column-end: span 2;
}

.block--price-cta p {
  margin-top: 0px;
  padding: 0;
}

.block--price-cta button {
  margin-bottom: 16px;
}

.faq-list {
  margin: 0 auto;
  max-width: var(--spotzi-site-wrap-width);
  padding: 24px 0;
  font-size: 1.25em;
}

.faq-list-item {
  width: 100%;
  list-style: none;
  border-bottom: 1px solid #d9d5d5;
  position: relative;
  /* background: var(--spotzi-site-lightgrey); */
}

.faq-question {
  width: 100%;
  border: 0;
  text-align: left;
  font-size: 1em;
  line-height: 1.625rem;
  color: var(--spotzi-site-blue);
  font-weight: bold;
  position: relative;
  padding: .5rem .5rem .5rem 0;
  margin: 0;
  background: transparent;
  font-family: "Zinnebeeld-Web", arial, sans-serif;
  font-weight: bold;
}

.faq-list .faq-question:focus,
input:focus {
  outline: none;
}

.faq-answer {
  display: none;
  padding: 0 16px 32px 16px;
  margin: 0;
  color: var(--spotzi-site-darkgrey);
  background: transparent;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  padding: 0 16px 32px 16px;
  font-size: 1em;
}

.faq-answer.open {
  display: block;
  padding: 0 0 1rem 0;
}

.faq-icon {
  position: absolute;
  right: 8px;
  top: 8px;
  border-radius: 50%;
  height: 24px;
  width: 24px;
  padding: 4px;
  background: var(--spotzi-site-mediumgrey);
}

.panel {
  /* padding: 16px 0; */
  /* background:yellow; */
  border-bottom: 1px solid #f3f3f4;
  padding: 0 16px;
}

.panel.dark {
  background: var(--spotzi-site-blue);
  padding: 32px 16px;
}

.panel-wrap {
  padding: 2rem 0;
  width: 100%;
  margin: 0 auto;
}

.panel-wrap.s-padding {
  padding: 32px 0;
}

.panel-m {
  max-width: 986px;
}

.page-title {
    margin-bottom: 32px;
}

.panel-title {
  max-width: 720px;
  /* margin: 2rem auto 2rem auto; */
  /* text-align: center; */
}

.panel-title ~ p {
    margin-top: 0;
}

.panel-description {
    max-width: 720px;
    margin: 0 auto;
    margin-top: 1rem;
}

.panel--hero {
  width: 100%;
  position: relative;
}

.panel--hero-home {
  width: 100%;
  position: relative;
}

.panel--hero-home-img {
  max-width: 100%;
  height: 800px;
  margin: 0 auto;
  z-index: 1;
  bottom: 0;
  overflow: hidden;
  position: relative;
  border-radius: 0px;
  overflow: hidden;
}

.panel--hero-home-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
.panel--hero-img {
  max-width: 100%;
  max-height: 620px;
  background: transparent;
  margin: 0 auto;
  z-index: 1;
  bottom: 0;
  overflow: hidden;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.panel--hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.panel--hero-img.data {
  max-width: 600px;
  min-height: 400px;
}

.panel--hero-img img {
  box-sizing: border-box;
  object-fit: cover;
}

.panel--logogrid {
    position:relative;
}

.panel--logogrid img {
    opacity: .8;
}

.panel--logogrid::after {
    content: "";
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(0deg, rgba(255,255,255,1) 10%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.block-hero--overlay {
  position: absolute;
  background: rgba(var(--spotzi-blue), 0.4);
  pointer-events: none;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel--logos .panel-wrap{
    padding: 1rem;
}


.panel--crumble {
    height: 56px;
    display: flex;
    align-items: center;
    color: var(--spotzi-site-darkgrey);
}

.panel--crumble .panel-wrap{
    padding: 0;
}

img.home-image-full {
    width: 100%;
}

.block-hero--overlay.home {
  /* background: rgba(var(--spotzi-blue), 0.7); */
  background: linear-gradient(0deg, rgba(var(--spotzi-blue), .2) 0%, rgba(var(--spotzi-blue), 50%) 20%);
  display: flex;
}

.block-hero--content-container {
    display: flex;
    flex-direction:column;
    max-width: 800px;
}

.block-hero--ticker-container {
    margin-bottom: 2rem;
}

.block-hero--overlay.home h3 {
    color: white;
    margin: 0 0 .5rem 0;
    text-transform:uppercase;
    color: var(--spotzi-site-green);
    font-weight: normal;
    font-size: 1.5em;
}

.block-hero--overlay.home h1 {
    color: white;
    height: 4rem;
    font-size: 4rem;
}

.panel--intro {
  background: rgba(var(--spotzi-blue),.5);
  min-height: 240px;
  position:relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items:center;
}

.panel--intro h1, .panel--intro p {
    color: white;
    text-shadow: 0px 0px 40px rgb(0 0 0 / 80%);
}

.panel--intro h5 {
    color: var(--spotzi-site-lightgrey);
    line-height: 1.5em;
    margin-top: 1em;
    max-width: 760px;
    text-shadow: 0px 0px 50px rgb(0 0 0 / 80%);
  }

.panel--intro .panel-wrap {
    position:relative;
    z-index:1;
}

.panel--intro > .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    z-index:0;
    overflow:hidden;
}

.panel--intro > .overlay::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(15deg, rgba(19, 84, 122, 0.72), rgba(128, 208, 199, 0.12));
    /* background-image: linear-gradient(to top, #1e3c72 0%, #1e3c72 1%, #2a5298 100%); */
    opacity: .7;
}


.panel--intro > .overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.block-hero--overlay > .block-open-dashboard {
  position: absolute;
  pointer-events: all;
  background: rgba(var(--spotzi-blue), 0.6);
  padding: 0px 32px;
  height: 3rem;
  border-radius: 50px;
  color: white;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.block-open-dashboard:hover {
  background: var(--spotzi-site-green);
  cursor: pointer;
  transform: scale(1.03);
}

.block-hero--overlay .block-promo-dashboard {
  background: rgba(255, 255, 255, 0.98);
  padding: 24px 32px;
  border-radius: 8px;
  pointer-events: all;
  box-shadow: var(--box-shadow-one);
}

.block-hero--overlay .block-promo-dashboard p {
  font-size: 1rem;
  max-width: 600px;
  margin-bottom: .5rem;
}

.large-search-bar {
  display: flex;
  padding: 16px 0;
}

.large-search-bar input[type="text"] {
  flex-grow: 1;
  margin-right: 16px;
  background: #f0f0f094;
  border:2px solid var(--spotzi-site-green);
}

.large-search-bar input[type="text"]:focus {
    border:2px solid var(--spotzi-site-green);
}

.block-promo-dashboard h3 {
  margin-top: 0px;
}

.block-hero--overlay .material-icons {
  margin-right: 8px;
}

.panel--hero-stroke {
  width: 100%;
  height: 100%;
  background: var(--spotzi-site-darkgrey);
  position: absolute;
  top: 0;
  z-index: -1;
}

.panel--quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.panel--quote h3 {
  font-style: italic;
  font-weight: normal;
  color: var(--spotzi-site-green);
  max-width: 830px;
  margin: 0 auto;

}

.panel--quote p {
  color: var(--spotzi-site-darkgrey);
  max-width: 830px;
}

.panel--footer {
  padding: 0;
  max-width: 1182px;
  margin: 0 auto;
  background: rgb(var(--spotzi-blue-world));
  color: rgba(255, 255, 255, 0.8);
  font-weight: bold;
}

.panel--footer .footer-block-wrap {
    display:flex;
    flex-direction: column;
}

.panel--footer ul {
  list-style: none;
  margin-top: .4rem;
  padding: 0;
  color: rgba(255, 255, 255, 0.7);
  font-weight: normal;
}

.panel--footer li {
  list-style: none;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.7);
}

.panel--footer li a {
  list-style: none;
  line-height: 2rem;
  color: rgba(255, 255, 255, 0.6);
}

.panel--footer li,
.panel--footer p {
  color: rgba(255, 255, 255, 0.7);
}

.panel--footer-copyright {
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  font-weight: normal;
}

.panel--footer-copyright--wrapper {
    margin: 0 auto;
    max-width: var(--spotzi-site-wrap-width);
}

.panel--faq {
  background: var(--spotzi-site-mediumgrey);
}

.panel--datasets {
  background: transparent;
}

.panel--datasets .data-card {
  background: var(--spotzi-site-mediumgrey);
  padding: 16px 24px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.panel--datasets .data-card .text {
  overflow: hidden;
}

.panel--datasets .data-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel--datasets .data-card > .icon {
  padding-right: 24px;
  display: flex;
  align-items: center;
}

.panel--datasets .data-card .icon svg {
  height: 32px;
  width: 32px;
  fill: var(--spotzi-site-green);
}

.panel--datasets .data-card:focus,
.panel--datasets .data-card input:focus {
  outline: none;
}

.panel--datasets .data-card.selected {
  background: var(--spotzi-site-green);
  color: white;
  box-sizing: border-box;
  border-radius: 8px;
}

.panel--datasets .data-card:hover {
  background: var(--spotzi-site-hover);
  text-decoration: none;
}

.panel--datasets a:hover {
  text-decoration: none;
}

.panel--datasets .data-card.selected:hover {
  background: var(--spotzi-site-green);
  color: white;
}

.panel--datasets .data-card p {
  margin: 0;
}

.panel--datasets .data-card p.bold {
  color: var(--spotzi-site-blue);
}

.panel--datasets.hide .row-datasets .data-card:nth-child(n + 7) {
  background: blue;
  display: none;
  padding: 16px;
  box-sizing: border-box;
  border-radius: 8px;
}

.row-datasets {
  grid-auto-rows: 1fr;
  width: 100%;

}

.row-datasets ~ .show-all-data span {
    display:none;
}
.row-datasets ~ .show-all-data.show-all .hide-all-text{
    display:inline-block;
}

.row-datasets ~ .show-all-data:not(.show-all) .show-all-text{
    display:inline-block;
}

.datasets-wrapper h3 {
    margin-top: 40px;
}
.row-datasets a {
    min-width: 0;
}
.row-datasets:not(.show-all) a:nth-child(n + 0) {
    display:block;
}
.row-datasets:not(.show-all) a:not(:nth-child(-n + 6)){
    display:none;
}


@media screen and (min-width: 600px) {
    .row-datasets:not(.show-all) a:nth-child(n + 0) {
        display:block;
    }
    .row-datasets[data-item-count='6']  ~ .show-all-data,
    .row-datasets[data-item-count='7']  ~ .show-all-data {
        display:none !important;
    }
    .row-datasets:not(.show-all) a:not(:nth-child(-n + 8)){
        display:none;
    }

    .block-hero--content-container {
        display: flex;
        flex-direction:column;
        max-width: 800px;
        padding: 0 16px;
    }

}

@media screen and (min-width: 970px) {
    .row-datasets:not(.show-all) a:nth-child(n + 0) {
        display:block;
    }

    .row-datasets[data-item-count='8']  ~ .show-all-data {
        display:none;
    }

    .row-datasets:not(.show-all) a:not(:nth-child(-n + 9)){
        display:none;
    }
}

.panel--datasets .dataset-container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.panel--datasets .row-datasets-container {
    display:flex;
    flex-direction: column;
    align-items:center
}

.panel--datasets .show-all-data {
  text-align: center;
  background: var(--spotzi-site-mediumgrey);
  border-radius: 4px;
  display: inline-block;
  padding: 0.7rem 2rem;
  margin: 2rem 0;
}

.panel--datasets .show-all-data:hover {
    cursor: pointer;
    background: var(--spotzi-site-hover);

}

.modal--container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.modal--overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(var(--spotzi-blue), 0.8);
  z-index: 999;
  display: flex;
  justify-content: center;
  z-index: 500;
}

.modal--select-country {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 501;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.modal--select-country > div {
  align-self: center;
  background: white;
  height: 100%;
  width: 100%;
  max-width: 800px;
  border: 1px solid var(--spotzi-site-mediumgrey);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin: 0;
  pointer-events: all;
  z-index: 502;
}

.modal--select-country .title {
  background: var(--spotzi-site-mediumgrey);
  height: 48px;
  line-height: 50px;
  text-align: center;
  color: var(--spotzi-site-blue);
}

.modal--select-country .content {
  background: white;
  flex: 1;
  overflow-y: auto;
}

.modal--select-country .footer {
  background: green;
  height: 48px;
}

.modal--select-country .close {
  background: transparent;
  height: 32px;
  width: 32px;
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.modal--select-country .close:hover {
  background: var(--spotzi-site-hover);
}

.modal--select-country ul {
  margin: 0;
  padding: 0;
}

.modal--select-country li {
  list-style: none;
  height: 48px;
  padding: 0 16px;
  line-height: 48px;
  border-bottom: 1px solid var(--spotzi-site-mediumgrey);
}

.modal--select-country li:hover {
  background: var(--spotzi-site-lightgrey);
}

.faq-list {
  outline: none;
}

.datasets-wrapper p.center {
  text-align:center;
}

.panel--banner .panel-wrap{
    position:relative;
    max-width: 660px;
}

.panel--banner-overlay{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom:0;
    width: 100%;
    height: 100%;
    background: var(--spotzi-site-blue);
    opacity: .5;
    z-index:1;
}

.panel--banner-overlay img {
    width: 100%;
    height: 100%;
    object-fit:cover;
}

.panel--banner {
    position:relative;
}


.panel--banner .panel-wrap {
    position: relative;
    z-index:2;
}

.panel--banner h3, .panel--banner p {
    color:white;
    text-shadow: 0 0 0.5em rgba(0,0,0,.2);
    margin-top: 0;
}


.panel--banner p {
    margin-bottom:2rem;
}

.panel-cta--title {
    text-align:center;
}

@media screen and (max-width: 48em) {

  .large-search-bar {
    display: flex;
    flex-direction:column;
    padding: 0;
  }

  .large-search-bar input[type="text"]  {
    margin-bottom: 16px;
    margin-right:0;
  }


  .block-hero--overlay .block-promo-dashboard {
    padding: 24px;
    border-radius: 8px;
    margin: 0 16px
  }

  .panel--hero-home-img {
      height: 540px;
  }

  .block-hero--overlay.home h1 {
      font-size: 2rem;
      margin-top: 1rem;
      height: 2rem;
  }

  .block-hero--ticker-container {
      padding: 0 16px;
  }

  .block-hero--overlay .block-promo-dashboard p {
      margin-top: 0;
  }

  .panel--banner .block--usp-image {
      display: none;
  }

  .panel-wrap.s-padding {
    padding: 1rem 0;
  }

  .panel-title {
    text-align: left;
  }

  .panel-description.center {
      text-align:left;
  }

  p.center {
      text-align: unset;
  }
}



@media screen and (min-width: 600px) {
    .panel--intro {
        height: 384px;
    }

    .panel-wrap {
       padding: 2rem;
       max-width: var(--spotzi-site-wrap-width);
    }

    .block-hero--overlay .block-promo-dashboard {
        margin-bottom: 104px;
        min-width: 600px;
    }
}