@charset "utf-8";
/* CSS Document */

@media all {

	#fullscreen-container {
		visibility: collapse;
		position: fixed;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		height: 100vh;
		width: 100vw;
		background-color: rgba(0,0,0,0.80);
		z-index: 120;
	}

	#gallery-content {
		width: 80vw;
		height: 80vh;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center center;
		margin: 10vh 10vw;
		z-index: 121;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#gallery-content img {
		box-shadow: 0 0 50px 0 rgba(0,0,0,0.5);
	}

	#gallery-all {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;
		text-align: center;
	}

	.gallery-element {
		width: 200px;
		height: 150px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		flex-shrink: 0;
		padding: 10px;
	}

	.gallery-element img {
		box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
	}

	.gallery-element-small {
		width: 120px;
		height: 90px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		flex-shrink: 0;
		margin: 5px;
		overflow: hidden;
	}
	.gallery-element-small img {
		box-shadow: 0 0 20px 0 rgba(0,0,0,0.2);
	}

	.wide {
		width: 100%;
	}

	.tall {
		height: 100%;
	}

	#gallery-btn-left {
		position: fixed;
		height: 80vh;
		width: 45vw;
		left: 0px;
		top: 10vh;
		z-index: 122;
		background-image: url(img/icon/icon_left.png);
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 50px 50px;
		opacity: 0.3;
		transition: all 0.3s;
	}

	#gallery-btn-left:hover {
		opacity: 1;
		transition: all 0.3s;
	}

	#gallery-btn-right {
		position: fixed;
		height: 80vh;
		width: 45vw;
		right: 0px;
		top: 10vh;
		z-index: 122;
		background-image: url(img/icon/icon_right.png);
		background-repeat: no-repeat;
		background-position: right center;
		background-size: 50px 50px;
		opacity: 0.3;
		transition: all 0.3s;
	}

	#gallery-btn-right:hover {
		opacity: 1;
		transition: all 0.3s;
	}

	#btn-close {
		background-image: url(img/icon/icon_close.png);
		background-size: 50px 50px;
		background-position: center;
		background-repeat: no-repeat;
		position: fixed;
		width: 100px;
		height: 100px;
		top: 0px;
		right: 0px;
		z-index: 130;
		opacity: 0.3;
		transition: all 0.3s;
	}

	#btn-close:hover {
		opacity: 1;
		transition: all 0.3s;
	}
	
	/* gallery.css ↓ */
	
	.content {
		width: 100%;
		margin: 0px auto;
	}

	.gallery-container-bg {
		width: 100%;
		margin: 0px auto;
		background-color: rgba(0,0,0,0.80);
	}

	.gallery-container {
		width: 90%;
		margin: 0px auto;
		padding: 20px;
		display: flex;
		*flex-direction: column;
		flex-wrap: wrap;
	}

	h3 {
		margin-top: 50px;
		margin-bottom: 10px;
		color: black;
		font-style: italic;
	}

	h3 a {
		color: #003173;
		text-decoration: none;
	}
	
	/* gallery.css ↑ */
}

@media all AND (max-width: 1023px) {
	
	.gallery-container {
		flex-direction: column;	
	}
	
	.gallery-element {
		width: 60%;
		height: 50%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		vertical-align: middle;
		flex-shrink: 0;
	}
	
	.gallery-element-small {
		width: 600px;
		height: 400px;
		margin: auto;
	}
	
	h3 {
		text-align: center;
		margin: 3em auto 1em auto;
	}
}