/* :root {
        --white: #fff;
        --black : #000;
        --gsap_beige: #fffce1;
        --base-width: 50px;
      } */

      .wrapper-modal {
        position: relative;

        .open-modal {
          /* position: relative; */
          display: block;
          width: 25%;
          height: var(--base-width);
          color: var(--white);
          border-radius: 30px;
          font-weight: bold;
          z-index: 1;
        }

        .open-modal:hover {
          scale: 105%;
          cursor: pointer !important;
        }
      }

      .modal {
        -webkit-backdrop-filter: blur(5px) opacity(1);
        backdrop-filter: blur(5px) opacity(1);
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        align-items: center;
        justify-content: center;
        background: var(--black);
        visibility: hidden;
        opacity: 0.5;
        z-index: 120;
        display: grid;
        justify-self: center;
        width: 750px;
        max-width: fit-content;
        background-color: #0000004d;

        &,
        .close-modal {
          /* top: 0; */
          color: var(--white);
        }

        .modal-dialog {
          /* -webkit-backdrop-filter: blur(5px) opacity(1);
          backdrop-filter: blur(5px) opacity(1); */
          /* background-color: #d9afafcc; */
          display: grid;
          grid-template-rows: max-content;
          width: 100%;
          max-width: 750px;
          height: 100vh;
          /* max-height: 100vh; */
          margin: 0vh auto auto;
          /* flex-wrap: nowrap; */
          overflow: auto;
          /* padding-bottom: 5%; */
          /* align-content: center; */
          opacity: 0;
          place-content: center;
        }

        .modal-content {
          width: 100%;
          max-width: 750px;
          height: 100%;
          /* max-height: 100vh; */
          /* padding: 2%; */
          align-content: center;
          margin: auto;
          color: white;
          /* background-color: #fff; */
          overflow: auto;
          position: relative;
          line-height: 3.3rem;
          font-size: 22px;

          p + p {
            margin-top: 1rem;
          }
        }

        .close-modal {
          position: absolute;
          top: 4%;
          float: right;
          font-size: 1.8rem;
          color: white;
          background: none;
          border: none;
          text-align: end;
          /* margin: 1%; */
          cursor: pointer;
        }

        .close{
          line-height: 42px;
          margin: 0;
          /* padding: 3% 0 3% 10px; */
          position: relative;
          cursor: pointer;
          transition: 0.3s;
          /* font-family: Open Sans, \30d2\30e9\30ae\30ce\89d2\30b4 Pro, Hiragino Kaku Gothic Pro !important; */
          font-weight: 400;
          font-size: 22px;
          z-index: 121;
          width: 8%;
        }

        .close::before{
          content: "";
          display: inline-block;
          position: absolute;
          top: 50%;
          right: 25%;
          transform: translateY(-50%) rotate(315deg);
          transition: 0.2s;
          width: 60%;
          height: 0%;
          border-bottom: 4px solid #000000;
          border-radius: 50px
        }
        .close::after{
          content: "";
          display: inline-block;
          position: absolute;
          top: 50%;
          right: 25%;
          transform: translateY(-50%) rotate(225deg);
          transition: 0.2s;
          width: 60%;
          height: 0%;
          border-bottom: 4px solid #000000;
          border-radius: 50px
        }

        @media screen and (max-width: 750px) {
            .modal-content {          
                line-height: 7vw;
                font-size: 3vw;
            }
        }

        /* @media screen and (max-width: 470px) {
          .modal-content {          
              line-height: 7vw;
              font-size: 3vw;
          }
        } */
      }