.modal {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(255, 2555, 255, 0.8);
    z-index: 2000;

    & .modal-img{
        padding: 1%;
        border: 2px dashed black;
        z-index: 2100;
    }

    & .close-container {
        background: none;
        border: black 1px dashed;
        position: absolute;
        top: 2vh;
        right: 2vh;
        width: 10vh;
        height: 10vh;
        cursor: pointer;
        -webkit-box-shadow: 12px 19px 21px 8px rgba(0, 0, 0, 0.68);
        box-shadow: 12px 19px 21px 8px rgba(0, 0, 0, 0.68);
        transition: all 0.3s ease-in-out;
        z-index: 2200;

        & span {
            position: absolute;
            display: block;
            background: black;
            border-radius: 50%;
            width: 90%;
            height: 10%;
            top: 45%;
            left: 5%;
            transition: all 0.4s ease-in-out;

            &.close-stick-1 {
                /* transform: scale(0.2) rotate(360deg); */
                transform: rotate(45deg);
            }

            &.close-stick-2 {
                transform: rotate(135deg);
            }
        }

        &:hover {
            background: black;
            -webkit-box-shadow: 6px 9px 10px 4px rgba(0, 0, 0, 0.68);
            box-shadow: 6px 9px 10px 4px rgba(0, 0, 0, 0.68);
            transition: all 0.3s ease-in-out;

            & span {
                transition: all 0.4s ease-in-out;

                &.close-stick-1 {
                    transform: rotate(180deg);
                    top: 25%;
                    background: white;
                }

                &.close-stick-2 {
                    transform: rotate(-180deg);
                    top: 65%;
                    background: white;
                }
            }
        }
    }
}