.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0, 0.95);
  overflow-x: hidden;
  transition: width 0.7s, opacity 0.5s;
}

.overlay-content {
  position: relative;
  top: 10%;
  width: 100%;
  margin-top: 30px;
  padding-left: 25px;
  margin-left: 0px;

}

.overlay-content > div + div {
margin-top: 7px;
}

.overlay a, .overlay summary{
  color: #fff;
}
.overlay a {
text-decoration: none;
width: 200px;
padding-left: 0px;
border-bottom: solid 1px rgba(255, 255, 255, 0);
transition: padding-right 0.3s, padding-left 0.3s, border-bottom 0.3s;
}

.overlay a:hover, .overlay a:focus {
text-decoration: none;
color: #fff;
padding-left: 50px;
border-bottom: solid 1px rgba(255, 255, 255, 1);
}

#overlay_contact {
font-size: 26px;
padding-left: 0;
color: white;
background-color: black;
border: none;
outline: 0;
border-bottom: solid 1px rgba(255, 255, 255, 0);
transition: padding-right 0.3s, padding-left 0.3s, border-bottom 0.3s;
}

#overlay_contact:hover, #overlay_contact:focus {
outline: 0;
padding-left: 50px;
border-bottom: solid 1px rgba(255, 255, 255, 1);
}

.overlay-details-content div{
padding-left: 30px;
}

.first_level a, .first_level summary{
font-size: 26px;
}

.second_level a, .second_level summary{
font-size: 22px;
}

.third_level {
padding-block: 3px;
margin-right: 20px;
}

.third_level a, .third_level summary {
font-size: 20px;
}
.overlay detains[open] summary{
color: white;
}
.overlay details[open] summary ~ * {
  animation: sweep .5s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateX(-10px)}
  100%  {opacity: 1; transform: translateX(0)}
}


@media screen and (min-width: 450px) {
.overlay-content {

}
  .first_level a, .first_level summary, #overlay_contact{
font-size: 34px;
}

.second_level a, .second_level summary{
font-size: 30px;
}

.third_level a, .third_level summary {
font-size: 26px;
}
.overlay-details-content div{
padding-left: 40px;
}

}