@font-face {
	font-family: 'Calluna';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
}

body {
	/* font-family: "Comic Sans MS", cursive, sans-serif; */
	font-family: 'Lato';
	background-color: rgb(58, 175, 169);
	min-width: 98%;
	min-height: 100%;
	max-width: 100%;
	max-height: 100%;
}

h1, h2, h3, p a {
	color: #17252A;
}

.main {
	background-color: #FEFFFF;
}

.content {
	margin-top: 30px;
}

.container {
	background-color: #FEFFFF;
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	min-height: 90.1vh;
}

.menu {
	min-height: 30px;
	text-align: right;
	padding: 20px 35px;
}

.menu a {
	float: right;
	font-size: 21px;
	padding-top: 25px;
	text-decoration: underline;
	color: #17252A;
}

.menu h1 {
	float: left;
}

#work-columns {
	padding-left: 20px;
	padding-right: 20px;
	column-width: 520px;
	column-gap: 15px;
	max-width: 98%;
	margin: 50px auto;
	margin-bottom: 0px;
}

div#work-columns figure {
	background: #fefefe;
	border: 2px solid #fcfcfc;
	box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
	margin: 0 2px 15px;
	padding: 15px;
	padding-bottom: 10px;
	transition: opacity .4s ease-in-out;
	display: inline-block;
}

div#work-columns figure img {
	width: 100%;
	height: auto;
	border-bottom: 1px solid #ccc;
	padding-bottom: 15px;
	margin-bottom: 5px;
}

div#work-columns figure figcaption {
	font-size: .9rem;
	color: #444;
	line-height: 1.5;
}

div#work-columns:hover figure:not(:hover) {
	opacity: 0.4;
}

@media screen and (max-width: 750px) {
	#work-columns {
		column-gap: 0px;
		padding-left: 40px;
		padding-right: 60px;
		column-width: 320px;
		column-gap: 15px;
		max-width: 98%;
		margin: 50px auto;
		margin-bottom: 0px;
	}
	#work-columns figure {
		width: 100%;
	}
}

@media screen and (max-width: 426px) {
	#work-columns {
		column-gap: 0px;
		padding-left: 10px;
		padding-right: 10px;
		column-width: 100%;
		column-gap: 15px;
		width: 95%;
		margin-bottom: 0px;
	}
	div#work-columns figure {
		background: #fefefe;
		border: 2px solid #fcfcfc;
		box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
		margin: 0 10px 15px;
		padding: 2px;
		width: auto;
		align-content: center;
		padding-bottom: 10px;
		transition: opacity .4s ease-in-out;
		display: inline-block;
	}
	body {
		min-width: auto;
	}
	.menu h1 {
		text-align: center;
	}
	.menu a {
		display:none;
	}
}