#mec-modal-overlay { cursor: pointer; background: rgba(0,0,0,.5); z-index: 99999999; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#mec-modal { padding: 15px; background: #fff; position: fixed; z-index: 999999999; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#mec-modal img { max-width: 480px; max-height: 480px; }
div[data-modal] { cursor: pointer; }

@media(max-width: 580px) {
    #mec-modal img { max-width: 300px; }
}

#mec-close { text-align: center; background: #fff; cursor: pointer; width: 30px; height: 30px; position: absolute; right: -15px; top: -15px; border-radius: 50%; }
#mec-close i { margin-top: 5px; }