/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map #infowindow-content {
  display: inline;
}

.info {
  flex: 2;
  padding: 2rem;
}

.cta {
  flex: 1;
  margin-top: 2rem;
  padding: 2rem;
  height: 100px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.cta.button {
      color: #fff;
      padding: .5rem 1rem;
      background-color: #000;
      border: 0;
      outline: 0;
    }


#consent-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding:  0.5% 22%;
  background-color: rgb(168, 168, 168);
  transition: opacity 1s ease;
  z-index: 3;
}

.cookie-div-btn {
  font-size: 14px;
  width: 20%;
  float: left;
}

.cookie-div-text p {
  font-size: 12px;
  color: #ffffff;
  margin-bottom: auto;
}

.cookie-btn {
  color:#ffffff;
  background-color:#b33232;
  padding: 9px 21px;
  font-size: 12px;
  border: none;
  transition: 0.3s;
}

.cookie-btn:hover {
  background-color: #902525;
}

@media (min-width: 1400px) {
  .cookie-btn {
    margin-top: 5px;
    margin-left: 15px;
  }
}

.cookie-div-text {
  width: 80%;
  float:left
}

@media (max-width: 1367px) and (max-height: 1025px) and (min-width: 1365px) and (min-height: 1023px) {
  #consent-popup {
    padding:  0.5% 25%;
  }
  .cookie-btn {
    margin-top: 4px;
  }
}

@media (max-width: 1025px) and (max-height: 1367px) and (min-width: 1023px) and (min-height: 1365px) {
  #consent-popup {
    padding:  0.5% 22%;
  }
  .cookie-div-btn {
    font-size: 24px;
    margin-top: -2px;
  }
}

@media (max-width: 1025px) and (max-height: 769px) and (min-width: 1023px) and (min-height: 767px) {
  #consent-popup {
    padding:  0.5% 18%;
  }
  .cookie-div-btn {
    font-size: 24px;
    margin-top: -2px;
  }
}

@media (max-width: 769px) and (max-height: 1025px) and (min-width: 767px) and (min-height: 1023px) {
  #consent-popup {
    padding:  0.5% 16%;
  }
  .cookie-div-btn {
    font-size: 24px;
    margin-top: 7px;
  }
}

@media (max-width: 755px) and (max-height: 813px) and (min-width: 300px) and (min-height: 811px) {
  #consent-popup {
    padding:  1.5% 25% 0 2%;
  }
  .cookie-div-btn {
    font-size: 24px;
    margin-top: 8px;
    float: none;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  .cookie-btn {
    padding: 10px 25px;
    font-size: 10px;
    border: none;
  }
  .cookie-div-text p {
    font-size: 11px;
    width: 127%;
  }
}

@media (max-width: 813px) and (max-height: 376px) and (min-width: 811px) and (min-height: 374px) {
  #consent-popup {
    padding:  0 45px 0 10px;
  }
  .cookie-div-btn {
    font-size: 24px;
    margin-top: -5px;
  }
  .cookie-div-text p {
    font-size: 11px;
  }
}


#consent-popup.hidden {
  opacity: 0;
}