.cms-modal-element {cursor: pointer;transition: 0.3s;}
.cms-modal-element:hover {
opacity: 0.7;

}

.cms-modal {display: none; position: fixed; z-index: 2; padding-top: 30px; left: 0;top: 0;width: 100%;height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.7); }

.cms-modal-content {margin: auto;display: block;width: 80%;max-width: 550px;}

#cms-caption {margin: auto;display: block;width: 80%;max-width: 700px;text-align: center;color: #ccc;padding: 10px 0;height: 150px;}

.cms-modal-content, #cms-caption {  -webkit-animation-name: zoom;-webkit-animation-duration: 0.6s;animation-name: zoom;animation-duration: 0.6s;}

@-webkit-keyframes zoom {from {-webkit-transform:scale(0)}to {-webkit-transform:scale(1)}}
@keyframes zoom {from {transform:scale(0)} to {transform:scale(1)}}

.cms-close {position: absolute;top: 0px;right: 0px;color: #fff;font-size: 40px;font-weight: bold;transition: 0.3s;border-radius: 50%;width: 39px;text-align: center;opacity: 1;}

.cms-close:hover,.cms-close:focus {color: #00568f;text-decoration: none;cursor: pointer;opacity: 1;}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){.cms-modal-content {width: 100%;}}