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

/* The Modal (background) */
.modal {
	display:none;/* Hidden by default */
	position:fixed;/* Stay in place */
	z-index:1;/* Sit on top */
	/* padding-top:100px; *//* Location of the box */
	padding-top:4rem;/* Location of the box */
	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 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)
	}
}

/* The Close Button */
a.zoomClose {
	display:block;
	position:absolute;
	top:17px;
	right:47px;
	z-index:2;
/* 	margin:1px;
	padding:0 15px;
	vertical-align:middle;
	text-decoration:none; */
	color:#ccc;
/* 	font-size:3.2rem; */
	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;}