/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: absolute;
    /*z-index: 1;  Sit on top */
    left: 0;
    top: 10%;
    width: 80%; /* Full width */
    height: 100%; /* Full height */
    background-color: blue; /* Fallback color */
    background-color: rgba(0,0,0,1); /* Black w/ opacity */
    border: 1px solid #668845;
	overflow: visible;
	
	float: right;
    margin-left: auto;
    margin-right: auto;
}

.closeButton{
    height: 20px;
	position: absolute;
    right: -10px;
    top: -10px;
}

.backButton, .forwardButton {
	height: 20px;
}

@media only screen and (min-width: 1024px){
.modal {
	width: 584px;
}
}

@media only screen and (min-width: 1600px){
.modal {
    width: 782px;	
	border-width: 2px;
}
.backButton, .forwardButton {
	height: 30px;
}
.closeButton{
    right: -17px;
    top: -17px;
    height: 30px;
}
}

@media only screen and (min-width: 1920px){
.modal {
	width: 954px;
}
}

@media only screen and (min-width: 2560px){
.modal {
    width: 1313px;
}
}

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

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

/* Modal Content (image) */
#modalImage {
    position: relative;
	top: 2%;
	margin-left: auto;
    margin-right:auto;
    display: block;
    max-width:84%;
	max-height: 96%;
	min-height: 96%;
    object-fit: contain;
}

#closeButton:hover, #closeButton:focus, #backButton:hover, #backButton:focus, #forwardButton:hover, #forwardButton:focus {
    cursor: pointer;
}

#backButton {
    position: absolute;
    left: 3%;
    top: 50%;
}

#forwardButton {
    position: absolute;
    right: 3%;
    top: 50%;
}