/* burger icon */
#btnWrapper {
  position: fixed;
  bottom: 1.5em;
  left: 1em;
  z-index: 9999;
}
a#burger {
  background: transparent;
  cursor: pointer;
}
a#burger #crossIcon {
  float: right;
}
a#burger #crossIcon svg {
  display: block;
  float: right;
  transform: rotateZ(0deg);
  transition: transform 0.1s ease;
  color: rgba(255,255,255,0.9);
}
a#burger #crossIcon.hide svg {
  transform: rotateZ(-45deg) !important;
}



/* menu wrapper ******************************* */
#overlayWrapper {
  position: fixed; /* absolute; */
  top: 0px;
  left: 0px;
  width: 100vw;
  z-index: 1000;
  background: #110044; /* white; */
  transform: translateX(-100vw);
  transition: none;
}
#overlayWrapper.shown {
  transform: translateX(0vw);
  transition: transform 200ms ease-in;
  opacity: 1.0;
}
#overlayWrapper.hidden {
  transform: translateX(-100vw);
  transition: transform 200ms ease-in;
  opacity: 1.0;
}


#overlay {
  width: 100vw; /* 400px; */
  margin-bottom: 0px;
  min-height: 100vh;
  padding: 2em;
  overflow-x: hidden;
}


/* drop shadow in top */
#topShadow {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  min-height: 120px;
  z-index: 10;
  background: rgb(0,0,0);
  background: -moz-linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  background: -webkit-linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}


/* Client overview */
.clientOverviewWrapper {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  grid-gap: 3em;
}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* THERE ARE STYLESHEETS ATTACHED TO THIS formatting */

/* grids */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen {


  a#burger #crossIcon {
    padding: 0.5em 0.5em 0.25em 0.35em;
  }
  a#burger #crossIcon.hide svg {
    color: rgba(255,255,255,0.9);
  }    

}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 4. */
@media screen and (min-width: 1024px) {


}


/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* 4. */
@media screen and (min-width: 1280px) {
  
  a#burger #crossIcon {
    padding: 0.9em 0.75em 0.5em 0.75em; /* 0.5em 0.5em 0.25em 0.35em; */
  }

}