html,body{height:100%}.modal-overlay{position:fixed;top:0;left:0;z-index:100;width:100%;height:100%;visibility:hidden;opacity:0;background:rgba(30,30,30,0.8);-webkit-transition:.3s;-moz-transition:.3s;-ms-transition:.3s;transition:.3s}.modal-container{position:fixed;max-width:780px;top:50%;left:50%;z-index:200;text-align:center;width:90%;visibility:hidden;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.modal-content{position:relative;opacity:0;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);-webkit-transition:.3s;-moz-transition:.3s;transition:.3s}.modal-content__close{position:absolute;top:0;right:0;padding:.3em .4em;color:#333;font-size:2em}.modal-content__close:hover{cursor:pointer}.modal-content__img{width:100%;margin-bottom:1em;box-shadow:0 0 10px 5px rgba(0,0,0,0.15)}.modal--show{visibility:visible}.modal--show ~ .modal-overlay{visibility:visible;opacity:1}.modal--show .modal-content{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}