* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

#container {
	position: relative;
}

header {
	padding: 20px 0;
	background-color: #fff;
	display: flex;
	justify-content: center;
}

.in-header-div {
	flex: 1;
	max-width: 1220px;
}

.arrow-down {
	margin-left: 20px;
}

.arrow-up {
	margin-right: 20px;
}

h2 {
	text-align: center;
}

#select-view {
	width: 80%;
	padding: 10px;
	display: block;
	margin: 0 auto;
}

#select-view:focus {
	outline: none;
	border: 1px solid rgb(62, 5, 168);
}

#gallery {
	max-width: 1220px;
	margin: 30px auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.image-container {
		background:white;
	display: inline-block;
	max-width: 100%;
	padding:2px;
}

.image-container img {
	width: 100%;
	height: auto;
}
.image-container div  {
	width: auto;
	padding:5px;
	height:125px;
	font-size:larger;
	quotes: "«" "»" "‹" "›";
}

.image-container h3 {
	width:auto;
	height:36px;
	font-size:smaller;
	border-bottom: 1px solid grey;
}

@media screen and (min-width: 700px) {
	#gallery {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.image-container {
		margin: 10px 0;
	}

	.image-container img {
		height: 200px;
		width: auto;
	}
	
	.image-container div  {
		max-width:180px;*/
	}

	.image-container h3 {
		max-width:180px;
		height:35px;
		overflow:hidden;
	}
	

	#larger-img {
		position: fixed;
		display: block;
		top: 50%;  
		left: 50%;  
		transform: translate(-50%, -50%);
	}

	#larger-img img {
		border: 2px solid black;
		max-width: 100%;
	}

	#close-image {
		position: absolute;
		top: -15px;
		right: -15px;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 1px solid black;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.sticky {
	position: sticky;
	top: 0;
}