body {
	padding:0;margin:0;
	overflow-x:hidden;
	overflow-y:auto;
	line-height: 1.3em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: white;
	font-family: Helvetica, Arial, sans;
	background-color:#eee;
	background-size:cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
}

a {text-decoration:none; color: inherit;}

iframe {border:none}
* {
	box-sizing: border-box;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
	-webkit-touch-callout: none;
}


.content {
	width:100vw;
	padding: 4vw;
	display:grid;
	grid-gap: 1vw;
	grid-auto-rows: 1fr;
	grid-auto-flow: dense;
}



html.flex .content > div.tile {
	height: 600px;
	height: max-content;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	padding-bottom: 0;
}
html.flex .content > div.tile > *, html.flex .content > div.tile > * > * {
	display:block;
	height: auto;
	position: static;
	position: unset;
}


	/* global layout */




.gallery {
	width:100vw;
	
	display:grid;
	
	/* MSIE 11 Fallback. One size catches all */
	display:-ms-grid;
	-ms-grid-columns: 1fr 1fr;	
	-ms-grid-rows: 1fr 1fr 1fr 1fr;
}
.gallery > div.tile#s1  {-ms-grid-row: 1;-ms-grid-column: 1;-ms-grid-column-span: 2;}
.gallery > div.tile#s3  {-ms-grid-row: 2;-ms-grid-column: 1;}
.gallery > div.tile#s4  {-ms-grid-row: 2;-ms-grid-column: 2;}
.gallery > div.tile#s5  {-ms-grid-row: 3;-ms-grid-column: 1;}
.gallery > div.tile#s6  {-ms-grid-row: 3;-ms-grid-column: 2;}
.gallery > div.tile#s7  {-ms-grid-row: 4;-ms-grid-column: 1;}
.gallery > div.tile#s8  {-ms-grid-row: 4;-ms-grid-column: 2;}


.tile#s2, .tile#s9, .tile#s10, .tile#s11, .tile#s12 { display: none; }
.tile#t1, .tile#t2, .tile#t3, .tile#t4 {display:none;}



@media (min-width: 1061px) {
	body { font-size: 1.2vw; }
	.content {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
	.gallery {
		height:100vh;max-height: 56.25vw;
		padding: 4vw;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 2fr 1fr 1fr;
		grid-template-areas:
			"a1 a1 a3 a4"
			"a5 a6 a7 a8"
			"a5 a6 a7 a8";
		grid-gap:2vw;
	}
}

@media (min-width: 641px) AND (max-width: 1060px) {
	body { font-size: 2.6vw; }
	.content {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
	.gallery {
		height:100vh;max-height: 56.25vw;
		padding: 4vw;
		height:250vw; max-height: 250vw;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"a1 a1"
			"a3 a4"
			"a5 a6"
			"a7 a8";
		grid-gap:2vw;
	}
}
@media (min-width: 481px) AND (max-width: 640px) {
	body { font-size: 20px; }
	.content {grid-template-columns: 1fr 1fr 1fr;}
	.gallery {
		height:600vw; max-height: 600vw;
		padding:6.6vw;
		grid-gap:0.66em;
		grid-template-columns: 1fr;
		grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"a1"
			"a3"
			"a4"
			"a5"
			"a6"
			"a7"
			"a8";
		grid-gap:0.66em;
	}

}
@media (max-width: 480px) {
	body { font-size: 15px; }
	.content {grid-template-columns: 1fr 1fr;}
	.gallery {
		height:750vw; max-height: 750vw;
		padding:6.6vw;
		grid-gap:0.66em;
		grid-template-columns: 1fr;
		grid-template-rows: 0.5fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"a1"
			"a3"
			"a4"
			"a5"
			"a6"
			"a7"
			"a8";
		grid-gap:0.66em;
	}
}


.gallery > div.tile#s1  {grid-area: a1}
.gallery > div.tile#s2  {grid-area: a2}
.gallery > div.tile#s3  {grid-area: a3}
.gallery > div.tile#s4  {grid-area: a4}
.gallery > div.tile#s5  {grid-area: a5}
.gallery > div.tile#s6  {grid-area: a6}
.gallery > div.tile#s7  {grid-area: a7}
.gallery > div.tile#s8  {grid-area: a8}
.gallery > div.tile#s9  {grid-area: a9}
.gallery > div.tile#s10 {grid-area: a10}
.gallery > div.tile#s11 {grid-area: a11}
.gallery > div.tile#s12 {grid-area: a12}

.content > div.tile {
	height: 0; 
	padding-bottom:105%;
}

.content > div.tile > div {opacity: 1;}
.content > div.tile#t1 > div:not(:last-child), .content > div.tile#t2 > div:not(:last-child) {opacity: 0;}
.gallery > .tile > div:last-child { opacity: 1; }

div.tile {
	background: transparent;
	overflow: hidden;
	max-height:100%;
	position:relative;
}


div.tile > div {
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	display: block;
	position:absolute;
	top:0;
	left:0;
	background-color: #99aaaa;
	transition-property: opacity;
	transition-duration:1s;
	opacity: 0;
	hyphens: auto;
	padding: 1vw;
}

div.tile > div.facebook  {background-color: #3b5998;}
div.tile > div.instagram {background-color: #c1558b;}
div.tile > div.youtube   {background-color: #990000;}
div.tile > div.twitter   {background-color: #00acee;}




div.tile > div > * {
	width:100%;
	max-width:100%;
	/* max-height:100%; */
}
.gallery > .tile#s1 > div.video > iframe {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

.gallery > .tile#s1 > div.video > .serviceicon, 
.gallery > .tile#s1 > div.video > .text, 
.gallery > .tile#s1 > div.video > .info {display:none;}


/* overlay */
#overlay1, #overlay2 { pointer-events: none;}
#overlay1 {
	width:100vw;height:100vh;
	position:fixed;
	top:0;
	left:0;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
	animation-timing-function: ease-out;
	background-color:black;
	transform-origin: center left; 
	transform: translateX(-100vw);
}
#overlay1.slidein  {animation-name: slidein;animation-delay:3s;}
#overlay1.slideout {animation-name: slideout;animation-duration: 3s;}
@keyframes slidein {
	from { transform: translateX(-100vw);opacity: 0}
	to   { transform: translateX(0vw); opacity: 1}
}
@keyframes slideout {
	from { transform: translateX(0vw);opacity: 1}
	50%  { transform: translateX(0vw);opacity: 0}
	to   { transform: translateX(100vw);opacity: 0}
}	



/* inner workings of the posts */
.gallery > .tile#s1 > div.hasimage > iframe, 
.gallery > .tile#s1 > div.hasimage > video 		{ max-height: 100% !important}

div.tile > div.hasimage.image, 
div.tile > div.hasimage.image_link, 
div.tile > div.iframe 	{background: white;padding: 0; }
div.tile > div.iframe > iframe { overflow: hidden;max-height:101%;height:101%;max-width:101%;width:101%; }
div.tile > div::before 	{
	display:block;
	font-size: 1.4em;
	margin: 0 0 0.7em 0;
	content: "";
}

div.tile > div.hasimage.image > *, div.tile > div.hasimage.image_link > * { display: none;}
div.tile > div.hasimage.image > img, div.tile > div.hasimage.image_link > img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	position: absolute;
	top: 0;
	left: 0;
}
div.tile > div.hasimage > img, 
div.tile > div.hasimage > video,
div.tile > div.hasimage > iframe{
	max-height: 55%;
	height: 55%;
	object-fit: contain;
	object-position: top left;
}
.gallery > .tile#s5 > div.hasimage > img, 
.gallery > .tile#s5 > div.hasimage > video,
.gallery > .tile#s5 > div.hasimage > iframe,
.gallery > .tile#s6 > div.hasimage > img, 
.gallery > .tile#s6 > div.hasimage > video,
.gallery > .tile#s6 > div.hasimage > iframe{
	max-height: 60%;
}

div.tile > div.noimage > div.text.big {
	font-size: 2.5em;
	line-height: 1.3em;
	hyphens: none;
}

/* info */
div.tile > div.kpi > .info, 
div.tile > div.kpi > .serviceicon {
	display:none;
}

div.tile > div > div.info {
	position: absolute;
	left:0;
	bottom: 0;
	padding: 0.2em 1vw;
	font-size: 0.75em;
	display: inline-block;
}
div.tile > div.flyphq > div.info { display: none; }
div.tile > div > div.info > img, .msgoverlay > div > div.info > img {display:none; }
div.tile > div > span.serviceicon::before {
	font-size: 2em;
	position: absolute;
	top: 0;
	right: 0;
	margin: 0.2em 1rem 0 0;
}
div.tile > div > span.serviceicon.serviceicon_flyphq { display:none;}
div.tile > div > div.info > span.user { float:left; }
div.info > span.user > span:first-child {display: none}
div.info > span.user > span:last-child {display: inline}
div.tile > div > div.info > span.serviceinfo { float:right; }

	/* KPI */
div.tile > div.kpi::before { min-height: 0;}
.kpi > div.text {margin: -1em 0; vertical-align:middle; }
.kpi > div.text > span > span {clear: both; display: block;text-align: center; line-height: 1.2em;}
.kpi > .text > span > span:nth-child(1) { font-size: 0.8em;}
.kpi > .text > span > span:nth-child(2) { font-family: "flypicons"; font-size: 2.4em;}
.kpi > .text > span > span:nth-child(3) { font-size: 2.4em;line-height:1em;}
.kpi > .text > span > span:nth-child(4) { font-size: 0.8em;}

#morebtn{
	font-size:1.5em;
	padding: 0.5em;
	background: #336633;
	cursor:pointer;
	display:block;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	color: white;
	margin-bottom: 100px;
}
#morebtn:before {
	content: "more posts..."

}

@media (max-width: 1060px) {
	.kpi {
		font-size: 120%;
	}
	.kpi > div.text {
		margin-top: 0.5em;
	}
}

@media (max-width: 640px) {
	.kpi {
		font-size: 115%;
	}
	.kpi > div.text {
		margin-top: 0.33em;
	}
	#morebtn {font-size: 150%;}
}

.tile .image .text, .tile .image_link .text, 
.tile .image .info, .tile .image_link .info, 
.tile .image .serviceicon, .tile .image_link .serviceicon {
	display: none;
}

div.tile div.haslink {cursor:pointer}

.postcard_button .button {
    background-color: #333333;
    color: white;
    border-radius: 8px;
    padding: 3px 8px;
    margin: 1em auto;
    display: block;
    width: 50%;
    width: fit-content;
    text-align: center;
    cursor: pointer;
}

div.tile div.consent {
	background-color: rgba(80,60,60,0.66)!important;
	color:white;
	z-index: 10;
	width:100%;
	height:100%;
	position:absolute!important;
	top:0;
	left:0;
	display:block;
	padding: 1em;
	pointer-events: all;
}
div.tile div.consent a {
	text-decoration: underline;
}
.gallery div.tile div.consent > * {
	font-size: 14px;
	line-height: 1.1em;
}
.gallery div.tile#s1 div.consent > * {
	font-size: 1.3em;
	line-height: 1.1em;
}
div.tile div.consent input {
	cursor: pointer;
	padding: 0.1em 0.2em;
	border-radius: 0.1em;
	border-width: 0;
	margin:0.25em;
	color: #666;
}
div.tile div.consent input:hover {
	color: #000;
}