@charset "utf-8";
/* CSS Document */
/* Source: 
https://stackoverflow.com/questions/53983082/how-to-enlarge-a-image-using-javascript 
*/

dialog {
	padding:0; /* Overrides default 1em */
}
/* The Modal (background) */
.modal {
	display:none;/* Hidden by default */
	position:fixed;/* Stay in place */
	z-index:1;/* Sit on top */
	left:0;
	top:0;
	width:100%;/* Full width */
	height:100%;/* Full height */
	overflow:auto;/* Enable scroll if needed */
	background-color:rgb(68,68,68);/* Fallback color */
	background-color:rgba(68,68,68,0.99);/* Black w/ opacity */}

.modal-margin {
	position:relative; /* for position:absolute button */
	padding-top:6rem;/* Location of the box */
}
/* Modal Content (image) */
.modal-content {
	margin:0.75em auto;
	display:block;
	width:85%;
	max-width:1500px;/* 840px */}

/* Caption of Modal Image */
#zoomCaption {
	margin:0.25em auto;
	display:block;
	width:85%;
	max-width:1500px;/* 840px */
	text-align:left;
	font-size:1.2rem;
	line-height:1.5;
	color:#fcfcfc;
	padding:0.5em 0;
	height:20em;}

/* Add Animation */
.modal-content,
#zoomCaption {
	-webkit-animation-name:zoom;
	-webkit-animation-duration:0.6s;
	animation-name:zoom;
	animation-duration:0.6s;}

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

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

/* Close Link */
a.zoomClose {
	display:block;
	position:absolute;
	top:17px;
	right:47px;
	z-index:2;
	color:#ccc;
	font-weight:normal;
	transition:0.2s;
	float:right;
	font-size:2.15rem;
	text-align:center;
	vertical-align:top;
	margin:0;
	padding:0.25rem 0.75rem 0.35rem 0.75rem;
	background-color:transparent;
	border:2px solid transparent;
	outline:2px solid transparent;
}
a.zoomClose:hover,
a.zoomClose:focus {
	margin:0;
	border:1px solid #fff;
	border-radius:0.1em;
	color:#fcfcfc;
	cursor:pointer;
}

/* Close Button */
button.zoomClose {
	margin:2px;
	position:absolute;
	top:1rem;
	right:9%;
	z-index:2;
	padding:0.15rem 0.75rem;
	vertical-align:middle;
	text-decoration:none;
	background-color:#444;
	color:#ccc;
	border:1px solid #ccc;
	border-radius:0.1em;
	outline:1px solid #ccc;
	font-size:2rem;
	font-weight:normal;
	transition:0.2s;
}
button.zoomClose:focus,
button.zoomClose:hover,
button.zoomClose:active {
	color:#fcfcfc;
	border:1px solid #fcfcfc;
	outline:2px solid #fcfcfc;
	cursor:pointer;
}