/*
 * Developed by Erik at www.toolparadise.nl
*/

*, *::before, *::after
{
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
	padding: 0;
	margin: 0;
	width: 100%;
	min-height: 100%;
}

body {
	font-family: 'Open Sans', Tahoma, Geneva, sans-serif;
	background-color: #fff;
	color: #606060;

	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

#defs {
	display: none;
}

header {
	display: block;
	position: relative;
	left: 0;
	width: 100%;
	padding-top: 20px;
	padding-bottom: 40px;
	min-height: 120px;
	margin-bottom: 1em;
        background: bottom / 100% 80px no-repeat url("/img/scribble.png");
	font-family: 'Open Sans Condensed', sans-serif;
	text-align: center;
}

header .title {
	font-size: 1.4em;
	font-weight: bold;
	letter-spacing: .08em;
}

header .subtitle {
	padding-top: .4em;
	font-size: 1em;
	letter-spacing: .08em;
}

header .subtitle p {
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1em;
}

header .name {
	margin-top: 6px;
	font-size: .8rem;
	letter-spacing: .1rem;
}

header .name img {
	display: inline-block;
	width: auto;
	height: 1.25em; 
	vertical-align: text-bottom;
	margin-left: .4em;
	margin-bottom: .1em;
}

header .languages {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 4px;
	margin-right: 4px;
}

header .languages img {
	height: 1.4rem;
	width: auto;
	border: 0;	/* Fix IE9 */
}

header .languages a.active {
	display: none;
}

header a:not([href^="http"]) {
	text-decoration: none;
	outline: none;
	color: inherit;
}

header .hamburger {
	position: absolute;
	bottom: 2rem;
	right: 0;
	height: 40px;
	width: 40px;
	margin-top: 4px;
	margin-right: 4px;
	cursor: pointer;
	z-index: 20;
}

header .hamburger > div {
	position: absolute;
	background-color: black;
	height: 2px;
	width: 40px;
	border-radius: 1px;
	transition: all 0.4s ease;
}

header .hamburger > div:first-child {
	z-index: 1;
	top: 14px;
}

header .hamburger.checked > div:first-child {
	transform: translate(0px, 10px) rotate(45deg);
	background-color: black;
}

header .hamburger > div:nth-child(2) {
	top: 24px;
}

header .hamburger.checked > div:nth-child(2) {
	background-color: white;
}

header .hamburger > div:last-child {
	z-index: 1;
	top: 34px;
}

header .hamburger.checked > div:last-child {
	transform: translate(0px, -10px) rotate(135deg);
	background-color: black;
}

header .menu {
	position: absolute;
	background-color: rgba(192, 192, 192, .95);
	width: 0%;
	right: 0;
	border-top-left-radius: .8em;
	border-bottom-left-radius: .8em;
	font-family: 'Open Sans', Tahoma, Geneva, sans-serif;
	font-size: .9em;
	overflow: hidden;
	transition: all 0.4s ease;
	z-index: 10;
}

header .hamburger.checked ~ .menu {
	width: 14em;
	overflow: hidden;
}

header .menu ol {
	padding-inline-start: 0;
}

header .menu li {
	list-style: none;
	padding: 0.3rem 0 0.3rem 0;
	overflow: hidden;
	white-space: nowrap;
}

header .menu li:empty {
	border-bottom: 1px #333 solid;
	margin-bottom: .3rem;
	padding-top: 0;
}

header .menu li:hover {
	text-decoration: underline;
}


header .hamburger.checked ~ .menu > div > ul {
	transition: visibility 0.4s ease;
	transition-delay: 0.1s;
	visibility: visible;
}

.page {
	display: none;
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}

.page.visible {
	display: block;
}

.page {
	padding-left: 5%;
	padding-right: 5%;

	-webkit-transition: padding-left .5s ease .1s, padding-right .5s ease .1s;
	-moz-transition: padding-left .5s ease .1s, padding-right .5s ease .1s;
	-ms-transition: padding-left .5s ease .1s, padding-right .5s ease .1s;
	-o-transition: padding-left .5s ease .1s, padding-right .5s ease .1s;
	transition: padding-left .5s ease .1s, padding-right .5s ease .1s;
}

.image-grid,
.video,
.review-list {
	position: relative;
	width: 100%;
}

.photo {
	display: block;
	position: relative;

	/* Prevent image from being selected (and therefore highlighted) */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.full.photo {
	/* Extend beyond section padding */
	margin-left: -1.545%;
	width: 103.09%;

	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

.full.photo + .full.photo {
	margin-top: 4em;
}

.photo[data-title]::after {
	display: block;
	content: attr(data-title);

	-webkit-transition: all .5s ease .1s;
	-moz-transition: all .5s ease .1s;
	-ms-transition: all .5s ease .1s;
	-o-transition: all .5s ease .1s;
	transition: all .5s ease .1s;
}

:not(.full).photo[data-title]::after {
	font-style: italic;
}

:not(.full).photo[data-title][data-position="left"]::after {
	text-align: left;
}

:not(.full).photo[data-title][data-position="middle"]::after {
	text-align: center;
}

:not(.full).photo[data-title][data-position="right"]::after {
	text-align: right;
}

.full.photo[data-title]::after {
	position: absolute;
	bottom: 1vh;
	/*font-size: 1.6em;*/
	font-size: 5.2vw;
	font-weight: bold;
	color: #fff;
}

.full.photo[data-title][data-label-color="black"]::after {
	color: #000;
}

.full.photo[data-title][data-position="left"]::after {
	left: 1.4rem;
}

.full.photo[data-title][data-position="middle"]::after {
	left: 50%;
	transform: translateX(-50%);
}

.full.photo[data-title][data-position="right"]::after {
	right: 1.4rem;
}

.photo:not(.float),
.video:not(.float) {
	clear: both;
}

.float.photo,
.float.video {
	float: right;
	margin: 0 0 1em 1em;
}

.float.left.photo,
.float.left.video {
	float: left;
	margin: 0 1em 1em 0;
}

.float.photo.size-30,
.float.video.size-30 {
	width: 30%;
}
.float.video.size-30 {
	padding-bottom: 16.875%;
}
.float.photo.size-35,
.float.video.size-35 {
	width: 35%;
}
.float.video.size-35 {
	padding-bottom: 19.6875%;
}
.float.photo.size-40,
.float.video.size-40 {
	width: 40%;
}
.float.video.size-40 {
	padding-bottom: 22.5%
}
.float.photo.size-45,
.float.video.size-45 {
	width: 45%;
}
.float.video.size-45 {
	padding-bottom: 25.3125%
}
.float.photo.size-50,
.float.video.size-50 {
	width: 50%;
}
.float.video.size-50 {
	padding-bottom: 28.125%;
}
.float.photo.size-55,
.float.video.size-55 {
	width: 55%;
}
.float.video.size-55 {
	padding-bottom: 30.9375%;
}
.float.photo.size-60,
.float.video.size-60 {
	width: 60%;
}
.float.video.size-60 {
	padding-bottom: 33.75%;
}
.float.photo.size-65,
.float.video.size-65 {
	width: 65%;
}
.float.video.size-65 {
	padding-bottom: 36.5625%;
}
.float.photo.size-70,
.float.video.size-70 {
	width: 70%;
}
.float.video.size-70 {
	padding-bottom: 39.375%;
}

.video {
	padding-bottom: 56.25%;	/* 16:9 ratio */
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.polaroid {
	position: relative;
	float: right;
	width: 13em;
	max-width: 50%;
	margin: 0 1.5em 1.5em 1.5em;
	padding: 6px;
	font-size: .6em;
	text-align: center;
	background-color: #fff;
	border: .1px solid #aaa;
	-webkit-box-shadow: 6px 6px 6px rgba(0, 0, 0, .5);
	-moz-box-shadow: 6px 6px 6px rgba(0, 0, 0, .5);
	box-shadow: 6px 6px 6px rgba(0, 0, 0, .5);
	cursor: pointer;
	z-index: 1;
}

.polaroid[data-position="left"] {
	float: left;
}

.polaroid[data-title]::after {
	display: block;
	content: attr(data-title);
	background-color: #fff;
	margin-top: .4em;
	font-style: italic;
	pointer-events: none;
}

.polaroid[title="--none--"] {
	display: none;
}

.image-grid {
	position: relative;
}

.image-grid .image-container {
	position: relative;
	width: 100%;
	padding-top: 100%;	/* Height equals width */
	overflow: hidden;

	-webkit-transition: margin-top .5s ease .1s, left .5s ease .1s, width .5s ease .1s, padding-top .5s ease .1s;
	-moz-transition: margin-top .5s ease .1s, left .5s ease .1s, width .5s ease .1s, padding-top .5s ease .1s;
	-ms-transition: margin-top .5s ease .1s, left .5s ease .1s, width .5s ease .1s, padding-top .5s ease .1s;
	-o-transition: margin-top .5s ease .1s, left .5s ease .1s, width .5s ease .1s, padding-top .5s ease .1s;
	transition: margin-top .5s ease .1s, left .5s ease .1s, width .5s ease .1s, padding-top .5s ease .1s;
}

.image-grid .image {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	border: 4px solid #fff;
	overflow: hidden;
}

.image-grid > div:nth-of-type(n + 1) {
	left: 0%;
	margin-top: 0%;
}

.image-grid .image img {
	width: 100%;
}

.image-grid nav {
	display: none;
}

.two-columns {
	display: flex;
	flex-direction: column;
	margin-top: 1em;
	margin-bottom: 1em;
}

.two-columns .first,
.two-columns .second {
	display: block;
	width: 100%;
	order: 1;
}

.two-columns .first.picture,
.two-columns .second.picture {
	order: 2;
}

.two-columns .first > picture,
.two-columns .second > picture {
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
}
.two-columns div > picture {
	margin-top: 2em;
}
.two-columns .first p:first-child,
.two-columns .second p:first-child {
	margin-top: 0;
}

.two-columns .first p:last-child,
.two-columns .second p:last-child {
	margin-bottom: 0;
	margin-bottom: 0;
}

#page_home .two-columns + p + p::before {
	display: block;
	position: absolute;
	content: " ";
	left: 10%;
	right: 10%;
	height: 2px;
	background-color: rgba(0, 0, 0, .1);
	background: radial-gradient(circle at 50%, #ccc, #fff);
}

.page[data-date-string]:not([id^="page_blog_"])::after {
	display: block;
	content: attr(data-date-string);
	margin-top: 3em;
	color: #999;
	font-size: .75em;
	clear: both;
}

footer {
	display: block;
	position: relative;
	width: 100%;
	left: 0;
	padding-top: 2em;
	background-color: #fff;
	cursor: default;
}

.colorbar {
	height: 1.5em;
	background: no-repeat top 1em center / 100% .5em url("/img/logo/colorline.jpg");
}

#copyright {
	margin-top: .5em;
	padding-bottom: 1em;
	text-align: center;
}

footer .menu ol {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

footer .menu li {
	display: block;
	padding-left: .6em;
	padding-right: .6em;
	margin-top: .5em;
	margin-bottom: .5em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: center;
}

footer .menu li a {
	text-decoration: none;
	outline: none;
	color: inherit;
}

#links {
	text-align: center;
}

#links a {
	margin-left: .5em;
	margin-right: .5em;
	vertical-align: bottom;
	line-height: calc(1.2em + 12px);
}

#links svg {
	display: inline;
	width: auto;
	height: calc(1em + 12px);
	fill: #606060;
	vertical-align: bottom;
}

#full-image-presenter {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(80, 80, 80, .00000001);
	z-index: 10000;
}

#full-image {
	position: fixed;
	float: none;
	max-width: 100%;
	height: auto;
	margin-left: 0;
	margin-right: 0;

	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	-moz-box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
	box-shadow: 10px 10px 10px rgba(0, 0, 0, .5);
}

#full-image-presenter.visible {
	display: block;
}

.page h1 {
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.75em;
	font-weight: bold;
}

.page h2 {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
	font-weight: normal;
	margin-bottom: 0;
	margin-top: 0;
}

.page p {
	margin-top: 1em;
	margin-bottom: 1em;
}

.page p + h2,
.page ol + h2,
.page ul + h2 {
	margin-top: calc(1em / 1.2);
}

.page p + div {
	margin-top: 1em;
}

.page h1 + p,
.page h2 + p,
.page h2 + .polaroid + p,
.page p:first-child {
	margin-top: 0;
}

.page p[data-font-size="tiny"] {
	font-size: .6em;
}
.page p[data-font-size="small"] {
	font-size: .8em;
}
.page p[data-font-size="large"] {
	font-size: 1.1em;
}
.page p[data-font-size="big"] {
	font-size: 1.2em;
}
.page p[data-font-size="huge"] {
	font-size: 1.4em;
}
.page p[data-font-size="humongous"] {
	font-size: 1.6em;
}

.page p[data-align="left"] {
	text-align: left;
}
.page p[data-align="center"] {
	text-align: center;
}
.page p[data-align="right"] {
	text-align: right;
}

.page h1.break,
.page h2.break,
.page p.break {
	clear: both;
}

.page i {
	margin-right: .2em;	/* Fix visual glueing */
}

.page ol,
.page ul {
	margin-top: 0;
	-webkit-margin-before: 0;
}

.page ol:not(:last-child),
.page ul:not(:last-child) {
	margin-bottom: 0;
	-webkit-margin-after: 0;
}

/* Change indent (not for: .page ol.no-bullets) */
.page ul.no-bullets {
	padding-left: 0;
	-webkit-padding-start: 0;
}

.blog-entry {
	position: relative;
	margin-bottom: 1.5em;
	padding-bottom: 1.5em;
}

.blog-entry:not(:last-child)::after {
	display: block;
	position: absolute;
	content: " ";
	bottom: 0;
	height: 2px;
	right: 10%;
	left: 10%;
	background-color: rgba(0, 0, 0, .1);
	background: radial-gradient(circle at 50%, #ccc, #fff);
}

.blog-container {
	cursor: pointer;
}

.blog-container .blog-image {
	margin-bottom: 1em;
}

.blog-entry h1,
.blog-entry h2 {
	display: block;
	margin: 0;
}

.blog-entry h2 {
	white-space: nowrap;
}

.blog-entry .content {
	position: relative;
	margin-top: .5em;
	margin-bottom: .5em;
	line-height: 1.47em;	/* Def: line height blog entry */
	width: auto;
	max-height: 4.41em;	/* 3 x "Ref: line height blog entry" */
	overflow: hidden;
}

.blog-entry .content > p {
	margin-top: 0;
	margin-bottom: 0;
}

.blog-entry .content::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	height: 1.47em;		/* Ref: line height blog entry */
	width: 6em;
	/* Fade out of last line/word part */
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

.blog-entry .blog-image {
	width: 9.1em;		/* 5 x "Ref: line height blog entry" + 1em margin content + .75em for extra height h1 */
	height: 9.1em;		/* 5 x "Ref: line height blog entry" + 1em margin content + .75em for extra height h1 */
	line-height: 9.1em;	/* 5 x "Ref: line height blog entry" + 1em margin content + .75em for extra height h1 */
	overflow: hidden;
	margin-right: 1em;
}

.blog-entry .blog-image img {
	display: inline-block;
	width: 100%;
}

.blog-entry .nav {
	position: relative;
	margin-top: -1.4em;
	text-align: right;
	padding-right: 1em;
}

.page[id^="page_blog_"] h1 + h2 {
	position: relative;
	font-size: .9em;
	top: -1em;
	margin-bottom: 1em;
}

.review-list {
	list-style: none;
	padding-left: 0;
	-webkit-padding-start: 0;
	padding-bottom: 1em;
}

.review-list.full li {
	position: relative;
	margin-top: 2em;
	padding-top: 2em;
}

.review-list.full li:not(:last-child)::after {
	display: block;
	position: absolute;
	content: " ";
	bottom: -2em;
	height: 2px;
	right: 10%;
	left: 10%;
	background-color: rgba(0, 0, 0, .1);
	background: radial-gradient(circle at 50%, #ccc, #fff);
}

.review-list.full li:first-child {
	margin-top: 0;
	padding-top: 0;
	border: none;
}

.review-list:not(.full) {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.review-list:not(.full) li {
	display: inline-block;
	width: 0;
	overflow: hidden;
}

.review-list:not(.full) li.selected {
	width: 100%;

	-webkit-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	-moz-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	-ms-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	-o-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
}

.review-list:not(.full) .review {
	width: 70vw;
	height: 100%;
	margin-left: 10vw;
	margin-right: 10vw;
	padding: 6px;
	border-radius: 8px;
	color: #ffffff;
	background-color: #ffffff;
	overflow: hidden;
	
	-webkit-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	-moz-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	-ms-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	-o-transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
	transition: background-color .5s ease 0s, color .5s ease 0s, width .5s ease 0s, margin-left .5s ease 0s, margin-right .5s ease 0s;
}

.review-list:not(.full) li.selected .review {
	color: #606060;
	background-color: #f0f0f0;
}

.review .text {
	font-style: italic;
	white-space: pre-line;
	color: #333;
}

.review .name {
	margin-top: 1.4em;
}
.review .name:before {
	content: "- ";
}

/* Nav within (long) list */
.review nav {
	position: relative;
	height: 1.4em;
	margin-top: -1.4em;
	text-align: right;
	padding-right: 1em;
}

#page_contact .map {
	position: relative;
	width: 100%;
	padding-top: 75%;
	margin-top: 4em;
}

#page_contact .map iframe {
	position: absolute;
	top: 0;
}

.gmaps {
	border: 0;
}

/* General settings */
.page a {
	outline: none;
	color: #004d99;
}

.page a.button {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 8px;
	background-color: #606060;
	color: #fff;
	text-decoration: none;
}

.review-list .nav {
	display: inline-block;
	padding: 6px;
	margin-top: 1em;
	border-radius: 8px;
	background-color: #909090;
}

.nav svg {
	display: inline-block;
	fill: none;
	stroke: #fff;
	stroke-width: 3px;
	stroke-linecap: round;
	stroke-linejoin: round;
	cursor: pointer;
}

ul {
	list-style: disc;
}

ul.no-bullets {
	list-style: none;
}

img {
	display: block;
	width: 100%;
	height: auto;
}

/* Show SVG icons/symbols as blocks */
svg {
	display: block;
}

[data-url]:not(.page) {
	cursor: pointer;
}

/* Handle different screen sizes (above everything is based on small 320px screen) */
@media only screen and (min-width: 400px) {
	header .title  {
		font-size: 2em;
	}
	header .subtitle  {
		font-size: 1.2em;
	}
	.polaroid {
		width: 18em;
	}
}

@media only screen and (min-width: 480px) {
	header .menu {
		font-size: 1em;
	}
	.full.photo {
		margin-left: -3.19%;
		width: 106.38%;
	}
	.full.photo[data-title]::after {
		/* font-size: 1.8em; */
	}
}

@media only screen and (min-width: 560px) {
	header {
		font-size: 1.1em;
		padding-top: 10px;
	}
	header .subtitle p {
		display: inline;
	}
	header .subtitle p:nth-child(2) {
		margin-left: .25em;
		margin-right: .25em;
	}
	header .subtitle  {
		font-size: 1.1em;
	}
	header .menu {
		font-size: 1.1rem;
	}
}

@media only screen and (min-width: 600px) {
	header {
		font-size: 1.3em;
	}
	header .subtitle  {
		font-size: 1em;
	}
	header .languages,
	header .hamburger {
		margin-top: 8px;
		margin-right: 8px;
	}
	.full.photo {
		margin-left: -5.556%;
		width: 111.11%;
	}
	.full.photo[data-title]::after {
		/* font-size: 2.8em; */
	}
	.polaroid {
		margin-left: 3em;
		margin-right: 3em;
		padding: 8px;
		font-size: .8em;
	}
	.blog-container {
		vertical-align: top;
	}
	.blog-container .blog-image,
	.blog-container .blog-summary {
		display: inline-block;
		vertical-align: top;
	}
	.blog-container .blog-image {
		margin-bottom: 0;
	}
	.blog-container .blog-summary {
		width: calc(100% - 10.1em);
	}
	.blog-entry .content {
		height: 4.41em;		/* 3 x "Ref: line height blog entry" */
	}
	.image-grid .image-container {
		width: 50%;
		padding-top: 50%;	/* Height equals width */
	}
	.image-grid > div:nth-of-type(2n+1) {
		left: 0%;
		margin-top: 0%;
	}
	.image-grid > div:nth-of-type(2n+2) {
		left: 50%;
		margin-top: -50%;
	}

	#page_contact .info {
		position: relative;
		float: left;
		width: 40%;
		padding-top: 45%;
	}
	#page_contact .info > div {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		vertical-align: middle;
	}
	#page_contact .info > div::before {
		display: inline-block;
		content: "";
		height: 100%;
		vertical-align: middle;
	}
	#page_contact .info > div ul {
		display: inline-block;
		vertical-align: middle;
	}
	#page_contact .map {
		position: relative;
		float: right;
		width: 60%;
		padding-top: 45%;
		margin-top: 0;
	}
}

@media only screen and (min-width: 640px) {
	header {
		font-size: 1.4em;
	}
	footer .menu ol li {
		display: inline-block;
		max-width: 18%;
	}
	footer .menu li:not(:last-child) {
		border-right: 1px solid #00b9e8;
	}
}

@media only screen and (min-width: 768px) {
	header .languages,
	header .hamburger {
		margin-top: 10px;
		margin-right: 10px;
	}
	.page {
		padding-left: 10%;
		padding-right: 10%;
	}
	.full.photo {
		margin-left: -12.5%;
		width: 125%;
	}
	.full.photo[data-title]::after {
		/* font-size: 4em; */
	}
	.polaroid {
		padding: 12px;
		font-size: 1.0em;
		width: 25em;
		max-width: 40%;
	}
	.polaroid.tall {
		max-width: 30%;
	}
	.image-grid .image-container {
		width: 33.3333%;
		padding-top: 33.3333%;	/* Height equals width */
	}
	.image-grid > div:nth-of-type(3n+1) {
		left: 0%;
		margin-top: 0%;
	}
	.image-grid > div:nth-of-type(3n+2) {
		left: 33.3333%;
		margin-top: -33.3333%;
	}
	.image-grid > div:nth-of-type(3n+3) {
		left: 66.6666%;
		margin-top: -33.3333%;
	}
	.review .text {
		color: inherit;
	}
	.two-columns {
		flex-direction: row;
		align-items: center;
	}
	.two-columns .first > picture,
	.two-columns .second > picture {
		width: auto;
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
	}
	.two-columns .first {
		display: inline-block;
		padding-right: .5em;
		vertical-align: top;
	}
	.two-columns .second {
		display: inline-block;
		padding-left: .5em;
		vertical-align: top;
	}
	.two-columns .first.picture,
	.two-columns .second.picture {
		order: 1;
	}
	.two-columns.size-30-70 .first { width: 30%; } .two-columns.size-30-70 .second { width: 70%; }
	.two-columns.size-35-65 .first { width: 35%; } .two-columns.size-35-65 .second { width: 65%; }
	.two-columns.size-40-60 .first { width: 40%; } .two-columns.size-40-60 .second { width: 60%; }
	.two-columns.size-45-55 .first { width: 45%; } .two-columns.size-45-55 .second { width: 55%; }
	.two-columns.size-50-50 .first { width: 50%; } .two-columns.size-50-50 .second { width: 50%; }
	.two-columns.size-55-45 .first { width: 55%; } .two-columns.size-55-45 .second { width: 45%; }
	.two-columns.size-60-40 .first { width: 60%; } .two-columns.size-60-40 .second { width: 40%; }
	.two-columns.size-65-35 .first { width: 65%; } .two-columns.size-65-35 .second { width: 35%; }
	.two-columns.size-70-30 .first { width: 70%; } .two-columns.size-70-30 .second { width: 30%; }
	.page p[data-font-size="tiny"] {
		font-size: .6em;
	}
	.page p[data-font-size="small"] {
		font-size: .8em;
	}
	.page p[data-font-size="large"] {
		font-size: 1.2em;
	}
	.page p[data-font-size="big"] {
		font-size: 1.3em;
	}
	.page p[data-font-size="huge"] {
		font-size: 1.5em;
	}
	.page p[data-font-size="humongous"] {
		font-size: 2.2em;
	}
}

@media only screen and (min-width: 820px) {
	header {
		font-size: 1.8em;
	}
	header .subtitle {
		padding-top: 0;
	}6
}

@media only screen and (min-width: 940px) {
	header {
		min-height: 170px;
	}
	header .name {
		font-size: 1rem;
		letter-spacing: .15rem;
	}
	header .languages,
	header .hamburger {
		margin-top: 14px;
		margin-right: 14px;
	}
	.page {
		padding-left: 15%;
		padding-right: 15%;
	}
	.full.photo {
		margin-left: -21.425%;
		width: 142.85%;
	}
	.full.photo[data-title]::after {
		/* font-size: 5.2em; */
	}
	.blog-entry h1,
	.blog-entry h2 {
		display: inline;
	}
	.blog-entry h2 {
		margin-left: .5em;
	}
	.image-grid .image-container {
		width: 25%;
		padding-top: 25%;	/* Height equals width */
	}
	.image-grid > div:nth-of-type(4n+1) {
		left: 0%;
		margin-top: 0%;
	}
	.image-grid > div:nth-of-type(4n+2) {
		left: 25%;
		margin-top: -25%;
	}
	.image-grid > div:nth-of-type(4n+3) {
		left: 50%;
		margin-top: -25%;
	}
	.image-grid > div:nth-of-type(4n+4) {
		left: 75%;
		margin-top: -25%;
	}
	.page p[data-font-size="tiny"] {
		font-size: .6em;
	}
	.page p[data-font-size="small"] {
		font-size: .8em;
	}
	.page p[data-font-size="large"] {
		font-size: 1.2em;
	}
	.page p[data-font-size="big"] {
		font-size: 1.4em;
	}
	.page p[data-font-size="huge"] {
		font-size: 1.8em;
	}
	.page p[data-font-size="humongous"] {
		font-size: 2.2em;
	}
}
@media only screen and (min-width: 1280px) {
	header {
		min-height: 175px;
	}
	.page p[data-font-size="tiny"] {
		font-size: .6em;
	}
	.page p[data-font-size="small"] {
		font-size: .8em;
	}
	.page p[data-font-size="large"] {
		font-size: 1.2em;
	}
	.page p[data-font-size="big"] {
		font-size: 1.6em;
	}
	.page p[data-font-size="huge"] {
		font-size: 2.2em;
	}
	.page p[data-font-size="humongous"] {
		font-size: 3em;
	}
}