.overlay {
  display:none;
  background:#fff;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:999;
  height: 100%;
}
.overlay.active {
  display:flex!important;
  flex-direction:column;
}

.flh {
flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.close-overlay {
  display:flex;
  flex-direction:column;
  cursor:pointer;
  background:var(--color-base-4);
  height: auto;
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
}
.close-overlay:hover {
  background:var(--color-base-1);
}
.close-overlay:hover span {
  background:var(--color-base-4);
}
 .cross-wrapper {
    padding:1rem 0;
    margin: auto;
  cursor:pointer;
  
}

.cross-wrapper span {
    display: block;
   -webkit-transition: background-color 300ms linear;
    -ms-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
    width: 4.8rem!important;
    height: .6rem;
    background: var(--color-base-1);
    margin: 9px 0;
    -webkit-border-radius: 2px !important;
    border-radius: 2px !important;
  cursor:pointer;
    background-clip: padding-box !important;
    /* stops bg color from leaking outside the border: */
}
.cross-wrapper span.first {
      translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 14px) rotate(45deg);
}
.cross-wrapper span.second {
      translate: none;
    rotate: none;
    scale: none;
    transform: rotate(45deg);
}

.cross-wrapper span.third {
      translate: none;
    rotate: none;
    scale: none;
    width: 100%;
    transform: translate(0px, -14px) rotate(-45deg);
}

/*******************************************************************/
/* ftrtch dino */
/* [type: CSS] [file:portfolio-overlay] [23.912] DESIGN*/
/*******************************************************************/
/* 0.1 P>P */
/* db 101 */