.map {
  border-radius:0px 23px 23px 23px;
}


  .map-head {
    display:flex;
    position:relative;
    overflow:visible;
    height:90px;
    justify-content: flex-start;
  }
    .map .pages {
      display:inline-flex;
      width:auto;
      height:100%;
      overflow:hidden;
      position:relative;
      align-items:center;
      justify-content:center;
      *padding:10px 16px;
      padding:0px 0px;
      height:auto;
      *gap:15px;
      background-color:var(--orange);
      border-radius:50px;

    }

      .map .pages a:hover {
        text-decoration:none !important;
      }

        .map .pages a {
          position:relative;
          z-index:2;
        }
        .map .pages a.current {
          z-index:1;
        }
        .map .pages a .nr {
          width:34px;
          height:34px;
          border-radius:34px;
          line-height:34px;
          color:var(--lightgray);
          background-color:var(--orange);
          text-align:center;
          font-weight:700;
          transition:.3s;
          position:relative;
          overflow:visible;
        }
          .map .pages a.current .nr {

            color:black;
              background-color:var(--lightgray);
          }
          .map .pages a.current .nr:before {
            content:" ";
            width:200%;
            height:100%;
            top:0;
            left:-50%;
            background:var(--lightgray);
            position:absolute;
            display:block;
            z-index:-2;
          }
            .map .pages a.current .nr:after {
              content:" ";
              position:absolute;
              left:-50%;
              width:50%;
              height:100%;
              border-radius:0px 50px 50px 0px;
              background-color:inherit;
              z-index:-1;
            }
          .map .pages a:not(.current):hover .nr {
            background-color:black;

          }




  .map-body {
    padding:40px 40px 0px 40px;
  }
  .map-foot {
    height:80px;
    position:relative;
  }
    .map-foot .overlay-cont {
      display:flex;
      justify-content: flex-end;
    }


    @media (min-width:991px) {
      .map h1 {
        display:inline;
      }
      .map-head .pages {
        margin-left:30px;
        top:-20px;
      }
      .map .pages a .nr {
        width:44px;
        height:44px;
        border-radius:44px;
        line-height:44px;
      }

    }



  .project .poster {
    aspect-ratio:1;
    width:100%;
    background-color:transparent;
    border-radius:15px;
    position:relative;
    overflow:hidden;
    display:flex;
    justify-content:flex-end;
    flex-direction:column;
    z-index:1;
    transition:.3s;
    text-decoration:none;
    margin-bottom:30px;

  }
      .project .poster .contents {
        color:var(--lightgray);
        padding:60px 30px 30px 30px;
        background: #000000;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
        transition:.5s;
      }


  @media (max-width:991px) {
    .map-head {
      height:auto;
    }
    .map-body {
      padding:20px 20px 0px;
    }

    .project .poster .contents {
      padding:60px 15px 15px 15px;
    }
  }

  @media (prefers-color-scheme: dark) {
    html:not(.light) .map .pages a.current .nr {
      color:var(--lightgray);
        background-color:rgba(10,10,10);
    }
    html:not(.light) .map .pages a.current .nr:before {

      background:rgba(10,10,10);
    }
  }

  .dark .map .pages a.current .nr {
    color:var(--lightgray);
      background-color:rgba(10,10,10);
  }
  .dark .map .pages a.current .nr:before {

    background:rgba(10,10,10);
  }