body {
	background: #f3f3f3;
	font-family: 'Open Sans', Arial, Sans-Serif;
	transition: background .3s ease-in-out;
}

body.dark {
	background: #111111;
}

.logo-wrapper {
	width: 100%;
	position: relative;
	display: block;
}

	.logo-wrapper::before {
		padding-top: 100%;
		content: '';
		display: block;
	}

@media (max-width: 500px) {
	.logo-wrapper {
		margin-right: 3.33333%;
	}
}
	
	
.logo {
	width: 100%;
	height: auto;
	display: block;
	transition: fill .3s ease-in-out;
	fill: #fff;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.dark .logo {
	fill: #222;
}

main, footer {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: calc(25vw - 300px) 10px 0;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}
	
@media (min-width: 1600px) {
	main, footer {
		padding-top: 100px;
	}
}

@media (max-width: 1240px) {
	main, footer {
		padding-top: 10px;
	}
}

@media (max-width: 500px) {
	main, footer {
		flex-direction: column;
	}
}
	
nav {
	width: 100%;
	margin: 1.5rem 0;
	font-size: 0.875rem;
	line-height: 1.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	transition: color .3s ease-in-out;
	text-align: right;
	padding: 1rem;
	box-sizing: border-box;
	text-transform: uppercase;
}
	
	.dark nav,
	.dark nav::before,
	.dark nav::after {
		color: #fff;
	}
	
	nav ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	
	nav li.spacer {
		margin-top: 1rem;
	}
	
	nav a {
		display: inline-block;
		padding: 0 .5em;
		margin: 0;
		text-decoration: none;
		z-index: 1;
		position: relative;
		color: #575757;
		border-color: #ccc;
		outline: none;
		transition: background .3s ease-in-out, box-shadow .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
	}
	
		.dark nav a {
			color: #aaa;
			border-color: #333;
		}

		nav a:hover,
		nav a:focus,
		nav a.active {
			background: #fff;
			border-color: #fff;
		}
		
		.dark nav a:hover,
		.dark nav a:focus,
		.dark nav a.active {
			background: #222;
			border-color: #222;
		}
		
		nav a.tag {
			font-weight: bold;
		}
		
		nav a.pagelink,
		nav a.next-link {
			visibility: hidden;
		}
		
		nav a.pagelink.active {
			font-weight: bold;
		}
		
	nav .left {

	}
	
	nav .right {
		position: absolute;
		right: 0;
		z-index: 1;
	}
	
	nav .seperator-before,
	nav .seperator-after {
		position: relative;
	}
	
	nav .seperator-before::before,
	nav .seperator-after::after {
		content: '';
		width: 2px;
		height: 1.5rem;
		background: #f0f0f0;
		display: inline-block;
		position: absolute;
		transform: skewX(-6deg);
		transition: background .3s ease-in-out;
	}
	
	.dark nav .seperator-before::before,
	.dark nav .seperator-after::after {
		background: #111;
	}
	
	nav .seperator-before {
		margin-left: 1rem;
	}
	nav .seperator-before::before {
		left: -.75rem;
	}
	
	nav .seperator-after {
		margin-right: 1rem;
	}
	nav .seperator-after::after {
		right: -.75rem;
	}
	
	nav .back-up {
		text-indent: -999px;
		position: relative;
		width: 40px;
		height: 40px;
		text-align: left;
		overflow: hidden;
		border-radius: 100%;
		border-width: 2px;
		border-style: dashed;
		padding: 0;
	}
	
		nav .back-up::after {
			content: '';
			display: block;
			position: absolute;
			transform: translate(-1px, 2px) rotateZ(45deg);
			border-left: 2px;
			border-top: 2px;
			border-right: 0;
			border-bottom: 0;
			border-color: #222;
			border-style: solid;
			width: 10px;
			height: 10px;
			background: transparent;
			top: 50%;
			left: 50%;
			margin: -5px 0 0 -5px;
		}
		
		.dark nav .back-up::after {
			border-color: #aaa;
		}
	
nav.top {
	margin-top: 1.6666vw;
	background: transparent;
	padding: 0;
}

nav.bottom {
	width: 73.333%;
	margin-left: auto;
	margin-right: .8333%;
	margin-bottom: 0;
}

@media (max-width: 500px) {
	nav.bottom {
		width: 96.666%;
		margin-left: auto;
		margin-right: auto;
	}
}

.sidebar {
	width: 25%;
	padding: 0.8333vw .8333% 0;
	box-sizing: border-box;
}

@media (min-width: 1200px) {
	nav.top {
		margin-top: 20px;
	}
	
	.sidebar {
		padding-top: 10px;
	}
}

@media (min-width: 501px) {
	.sidebar {
		padding-top: 10px;
		top: 10px;
		position: -webkit-sticky;
		position: sticky;
		align-self: flex-start;
		height: auto;
	}
}


@media (max-width: 500px) {
	.sidebar {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 0.8333vw 1.6666% 0;
	}
}

.images {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	width: 75%;
	position: relative;
	margin-bottom: auto;
}

	.images > * {
		width: calc(33.3%);
		margin: 0;
	}

	@media (max-width: 767px) {
		.images > * {
			width: calc(50%);
		}
	}
	
	@media (max-width: 500px) {
		.images {
			width: 100%;
		}
		
		.images > * {
			width: calc(50%);
		}
	}
	
	.images .group {
		position: relative;
		width: 100%;
		height: 0;
	}
	
		.images .group:before {
			content:'';
			float:left;
			padding-top:100%;
		}
	
		.images .group .content {
			background: transparent;
			color: #fff;
			padding: 0;
			box-sizing: border-box;
			width: 93.3333%;
			height: 93.3333%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			overflow: hidden;
		}
	
		.images .group h2 {
			text-transform: uppercase;
			font-size: 1.125rem;
			line-height: 1;
			margin: 0 0 1rem 0;
		}
		.images .group h2 .tag {
			text-transform: lowercase;
			font-size: 0.8125rem;
			display: block;
			font-weight: normal;
			margin-bottom: .125rem;
		}
		.images .group .text {
			font-size: 0.8125rem;
		}
		

	.images .image {
		display: block;
		background: transparent;
		flex-grow: 0;
		flex-shrink: 0;
		position: relative;
	}
	
	.images .image:before {
		content:'';
		float:left;
		padding-top:100%;
	}
	
	.images .image img {
		width: 93.333%;
		height: 93.333%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		opacity: 0;
		visibility: hidden;
		transition: all .4s ease-out;
	}
		.images .image img.loaded {
			opacity: 1;
			visibility: visible;
		}

.switch-wrapper {
	margin-right: .5rem;
}
		
input.switch {
	position: absolute;
	left: -9999px;
	display: none;
}

	input.switch + label {
		height: 14px;
		border-radius: 7px;
		background: #e0e0e0;
		width: 100%;
		position: relative;
		z-index: 1;
		width: 28px;
		display: inline-block;
		vertical-align: top;
		cursor: pointer;
		margin: 5px 1px;
		transition: background .3s ease-in-out;
	}
	
	.dark input.switch + label {
		background: #000;
	}
	
	input.switch + label::after {
		content: '';
		position: absolute;
		z-index: 2;
		width: 12px;
		height: 12px;
		background: #fff;
		left: 1px;
		top: 1px;
		display: block;
		border-radius: 100%;
		transition: background .3s ease-in-out;
	}
	input.switch:checked + label::after {
		right: 1px;
		left: auto;
	}
	
	.dark  input.switch + label::after {
		background: #222;
	}
	
	.dot {
		width: 8px;
		height: 8px;
		border: 1px solid #e0e0e0;
		display: inline-block;
		vertical-align: top;
		margin: 7px 0;
		border-radius: 100%;
		background: #fff;
		transition: background .3s ease-in-out, border-color .3s ease-in-out;
	}
	
	.dot.dark {
		background: #999;
		border-color: #f0f0f0;
	}
	
	.dark .dot {
		background: #666;
		border-color: transparent;
	}
	
	.dark .dot.dark {
		background: #000;
	}
	
.contact {
	color: #575757;
	padding: 1.6666vw 1.6666% 0;
	font-size: .875rem;
	line-height: 1.5rem;
	transition: color .3s ease-in-out;
}

.dark .contact {
	color: #aaa;
}

@media (min-width: 1200px) {
	.contact {
		padding-top: 20px;
	}
}

@media (max-width: 500px) {
	.contact {
		padding: 0.8333vw 1.6666% 0;
	}
}

	.contact a {
		color: inherit;
		display: inline-block;
		text-decoration: none;
		padding: 0 .25rem;
	}
	
	.contact a:hover {
		background: #fff;
		transition: background .3s ease-in-out;
	}
	
	.dark .contact a:hover {
		background: #222;
	}
	
.mobile-footer {
	display: none;
}
	
	.mobile-footer .nav-wrapper {
		display: flex;
		flex-direction: row;
		width: 100%;
		padding: 0.8333vw 1.6666% 0;
		box-sizing: border-box;
	}
	
	.mobile-footer .switch-wrapper { 
		display: none;
	}
	
@media (max-width: 500px) {
	.mobile-footer {
		display: block;
	}
}