* Pure CSS modal box Author:Jorge Chavez Github:http://github.com/jorgechavz */.modal .checkbox{display:none}.modal .modal-overlay{opacity:0;transition:all .3s ease;width:50%;position:absolute;width:100%;height:100%;position:fixed;top:0;left:0;z-index:-100;transform:scale(1);display:flex;background-color:rgba(0,0,0,.7)}.modal .modal-wrap{background-color:#f0f0f0;box-shadow:3px 3px 3px rgba(0,0,0,.2);padding:40px 50px;width:60%;margin:20px auto;align-self:flex-start;border-radius:2px;transition:all .5s ease}.modal .modal-wrap.small{width:30%}.modal .modal-wrap.full{width:100%;height:100%}.modal .modal-wrap.a-center{align-self:center}.modal .modal-wrap.from-left{transform:translateX(-100%)}.modal .modal-wrap.from-right{transform:translateX(100%)}.modal .modal-wrap.from-top{transform:translateY(-100%)}.modal .modal-wrap.from-bottom{transform:translateY(100%)}.modal .modal-overlay .close{position:absolute;right:5px;top:5px;font-size:20px;width:20px;height:20px;color:#282c34}.modal .modal-overlay .close:hover{cursor:pointer;color:#4b5361}.modal .o-close{width:100%;height:100%;position:fixed;left:0;top:0;z-index:-100}.modal input:checked~.o-close{z-index:9998}.modal input:checked~.modal-overlay{transform:scale(1);opacity:1;z-index:9997;overflow:auto}.modal input:checked~.modal-overlay .modal-wrap{transform:translateY(0);z-index:9999}@media (max-width:800px){.modal .modal-wrap{width:80%;padding:20px}}@media (max-width:500px){.modal .modal-wrap{width:90%}}Contact GitHub API Training Shop Blog About