/* set defaults */

html, body, div, p, ul, li, h4 {
	/*font-size: 16px;*/
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: top;
    background: transparent;
	box-sizing: border-box;
}

body {
	background-color: lightgrey;
	/*font-family: 'PT Serif', serif;*/
	/*font-family: 'Noto Serif', serif;*/
	font-family: 'Amiri', serif;
	/*font-family: 'Cormorant Garamond', serif;*/
	/*font-family: 'Nanum Myeongjo', serif;*/
}

.top-wrapper {
	width: 100%;
	max-width: 1220px;
	height: auto;
	margin: auto;
	background-color: lightgrey;
	padding: 10px;
	padding-top: 40px;
	padding-bottom: 0;
}

@media (max-width: 600px) {
	.top-wrapper {
		padding-top: 0;
	}
}

.gallery-wrapper {
	width: 100%;
	max-width: 1220px;
	height: auto;
	margin: auto;
	background-color: lightgrey;
	padding: 0;
	padding-top: 10px;
	padding-bottom: 0;
}

.footer-wrapper {
	width: 100%;
	max-width: 1220px;
	margin: auto;
	background-color: lightgrey;
	padding-top: 40px;
	padding-bottom: 20px;
}

.footer {
	text-align: center;
}

.main {
	font-size: 1.2em;
	color: white;
	background-color: #999;
	padding: 20px;
	margin-top: 40px; /* even with name is 40px, even with links is 110px */
}

.sidebar {
	color: black;
	min-width: 280px;
	/*background-color: lightgrey;*/
}

@media (min-width: 600px) {
	.sidebar {
		display: inline-block;
	}

	.main {
		width: calc(100% - 280px);
		display: inline-block;
	}
}

.sidebar-menu {
	list-style-type: none;
	margin: 20px;
}

.sidebar-menu > li > a {
	text-decoration: none;
	color: #333;
	font-size: 1.25em;
}

.sidebar-menu > li > a:hover {
	color: white;
}

.sidebar h4, .sidebar h3, .sidebar h2, .sidebar h1 {
	font-size: 28px;
	font-weight: 600;
	margin: 20px;
	color: #333;
	margin-bottom: 40px;
	margin-top: 40px;
}

.thumbnail {
	width: 100%;
	margin-bottom: 20px;
}

.gallery {
	width: 100%;
	color: white;
	/*padding: 20px;*/
	margin-top: 40px;
	font-size: 0;
	display: flex;
	/*flex-direction: vertical;*/
	flex-wrap: wrap;
	align-content: space-between;
}

@media (max-width: 400px) {
	.gallery {
		/*margin-top: 0;*/
	}
	.gallery-wrapper {
		/*padding-top: 10px;*/
	}
	.footer-wrapper {
		padding-top: 0;
	}
}

.column {
	flex: calc(100% / 3);
	max-width: calc(100% / 3);
	padding: 0 10px;
	/*display: inline-block;*/
}

@media (max-width: 800px) {
	.column {
		flex: 50%;
		max-width: 50%;
	}
}

@media (max-width: 550px) {
	.column {
		flex: 100%;
		max-width: 100%;
	}
}

.main > p > a {
	color: black;
	text-decoration: none;
}

.main > p > a:hover {
	color: white;
}