header .headertitle h1 {
    font-size: 3em;
    padding: 0;
    margin: 0; 
}

header .headertitle {
    padding-top: 30vh; 
}

@media screen and (max-width: 799px) {
  header .headertitle h1 {
    font-size: 2.5em;
    padding: 0;
    margin: 0; 
  }
}


/* MAP */
#intromap {
  display: flex;
  width: 100%;
  height: 100vh;
  background-color: white;
  color: black;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 1em;
  box-sizing: border-box;
}


#intromap div.hint {
  padding: 0;
  margin: 0.6em 0.2em;
  border: 1px dotted #0f9cd8;
  background: rgba(15,156,216,0.1);
  line-height: 1.7em;
  max-width: 600px;
}

#intromap div.hint ul {
  padding: 0 0.5em 0 1.5em;
}

#intromap div.hint ul li {
  padding: 0.3em 0;
}

#intromap div.hint img {
  position: relative; 
  display: inline; 
  vertical-align: middle;
  padding: 0;
}

#intromap h1 {
  text-align: center;
  font: normal 2em "Bebas Neue", sans-serif;
  max-width: 600px;
}

#intromap h2 {
  text-align: center;
  font: 300 2em "Fira Sans", sans-serif;
  max-width: 600px;
}

#globalcontent {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  background-color: white;
  color: black;
}

@media screen and (min-width: 900px) {
  #globalcontent {
      padding: 0 2em; 
  }
}

#map_container {
  width: 100%;
  margin: 0 auto;
  height: 700px;
  position: relative;
  overflow: hidden;
  transition: height 1s ease-in-out;
}

#map_sub_container {
  position: absolute;
  width: 99%;
  height: 698px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#map1 {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#map_twofingers {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  #map_twofingers {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    font: normal 1.3em "Bebas Neue", sans-serif;
    color: white;
    text-align: center;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    padding: 1em;
    box-sizing: border-box;
  }
}

#map_twofingers.interact {
  pointer-events: none;
  opacity: 0;
}

#map_alert {
  position: absolute;
  width: 100%;
  height: 100px;
  z-index: 2;
  display: none;
  background-color: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  text-align: center;
  font: normal 1.3em "Bebas Neue", sans-serif;
  color: white;
  cursor: pointer;
}

#desc {
  width: 100%;
  padding: 1em 0.5em;
  box-sizing: border-box;
  font: 300 1em "Fira Sans", sans-serif;
}

@media screen and (max-width: 749px) {
  #map_container.wrapped {
    height: 100px;
  }

  #map_alert.show {
    display: flex;
  }

  .layermanager {
    max-width: 205px;
  }
}

@media screen and (min-width: 750px) {
    #globalcontent {
        flex-direction: row;
    }
    
    #map_container {
      flex: 60%;
      width: auto;
    }

    #desc {
      flex: 40%;
      padding: 0 0.5em;
      overflow: auto;
    }
}

#desc h1 {
  font: normal 1.6em "Bebas Neue", sans-serif;
  padding: 0;
  margin: 0;
}

#desc h3 {
  font: 300 0.8em "Fira Sans", sans-serif;
  padding: 0.5em 0 0.3em 0;
  margin: 0;
  text-transform: uppercase;
  text-align: right;
}

#desc img {
  max-width: 100%;
  display: block;
  padding: 2em 0 0 0;
  animation: titlefall 1.5s cubic-bezier(0.8, 0, 0.1, 1);
  cursor: pointer;
}

#desc p {
  text-align: justify;
  line-height: 1.6em;
}

#desc div.hint {
  padding: 0;
  margin: 0.6em 0.2em;
  border: 1px dotted #0f9cd8;
  background: rgba(15,156,216,0.1);
  line-height: 1.7em;
}

#desc div.hint ul {
  padding: 0 0.5em 0 1.5em;
}

#desc div.hint ul li {
  padding: 0.3em 0;
}

#desc div.hint img {
  position: relative; 
  display: inline; 
  vertical-align: middle;
  padding: 0;
}

@keyframes titlefall {
  0% {opacity: 0;}
  60% {opacity: 20;}
  100% {opacity: 100;}
}

.layermanager {
  font: 300 0.9em "Fira Sans", Sans-serif;
  background: rgba(255,255,255,0.8);
  padding: 0.3em;
  border: 1px solid #8394a0;
  z-index: 2;
  top: 0.6em;
  right: 0.6em;
  position: absolute;
  color: black;
}

.layermanager ul li {
  padding: 0.4em 0.4em 0.4em 2.1em;
  position: relative;
}

.layermanager ul li input {
  position: absolute;
  left: 0;
  top: 0.2em;
}

#search_cities {
  position: relative;
  height: 4.5em;
  width: 100%;
}

.dwl_lux_search {
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* MODAL */
aside {
  top: 0;
  position: fixed;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: none;
  backdrop-filter: blur(4px);
}

aside #dwl_modal {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  width: 95%;
  height: 95%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.5em;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: url(../../maps/geoportail/202108_inondations/icons/close-button.svg) 2 2, auto;
}

.dwl-flash {
  animation: 3s flashbulb infinite;
}

@keyframes flashbulb {
  0% {opacity: 0.1;}
  40% {opacity: 1; transform: scale(1.6);}
  100% {opacity: 0.3; transform: scale(0.8);}
}

.ol-zoom button#luxhome {
  background-image: url(../../maps/geoportail/202108_inondations/icons/luxembourg.svg); 
  background-size: contain;
}

.ol-zoom button#luxhome:hover {
  background-image: url(../../maps/geoportail/202108_inondations/icons/luxembourg-hover.svg);
}