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

div.container
{
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

div.header
{
	display: table;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	
}

div.header div
{
	display: table-cell;
	vertical-align: middle;
	background: rgba(0,0,0,0.4);
}

h1, h2, h3, .extra-info
{
	
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	color: white;
}
h1
{
	width: 60%;
	font-size: 4em;
	margin-bottom: 0;
}
h2
{
	width: 80%;
	font-size: 2em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
h3
{
	margin-bottom: 0.5em;
}
h3 a
{
	color: white;
}
h3 a:link {
	text-decoration: none;
	
}

h3 a:visited {
    text-decoration: none;
}

h3 a:hover {
    text-decoration: underline;
}

h3 a:active {
    text-decoration: underline;
}

span.extra-info
{
	display: block;
}

div.stories
{
	width: 100%;
}

.media-container, 
.photo, 
.text-container, 
.text
{
	margin: 0;
	padding: 0;
}

.place-name
{
	font-size: 3em;
	text-align: center;
	color: black;
}

.media-container { 
	width: 100%;
	margin-bottom: 2em;
	text-align: center;
	overflow: hidden;
}

.inner-container
{
	display: inline-block;
	margin: 0 auto;
}

.photo
{
	min-width: 25em;
	margin: 0 auto;
}

.photo.unviewed,
.photo.hackthis
{
    background-image: url('../ico/loading.gif');
	background-repeat: no-repeat;
	background-position: center;
}
.text-container
{
	overflow: hidden;
}

.text
{	
	font-size: 2em;
	text-align: center;
	background: white;
	color: black;
}


@media all and (max-width: 800px) { body { font-size: 90%; } }
@media all and (max-width: 600px) { body { font-size: 80%; } }
@media all and (max-width: 400px) { body { font-size: 70%; } }
@media all and (max-width: 300px) { body { font-size: 50%; } }
@media all and (max-width: 200px) { body { font-size: 35%; } }
@media all and (max-width: 100px) { body { font-size: 20%; } }

/* hsplit */
/* two media queries */
@media all and (max-width: 800px) 
{
	.media-container.hsplit.photo, 
	.media-container.hsplit.text-container,
	.media-container.hsplit.text 
	{
		display: block;
	}
	.media-container.hsplit .inner-container
	{
		width: 100%;
	}
	.media-container.hsplit .text-container
	{
		width: calc(100% - 4em);	
		margin: 0.5em 2em;
	}
	.media-container.hsplit .text
	{
		display: block;
	}
	
	.media-container.hsplit .photo 
	{
		width: 100%;
	}
	
	.media-container.hsplit .photo img
	{
		width: inherit;
	}

}
@media all and (min-width: 800px) 
{
	.media-container.hsplit .photo, 
	.media-container.hsplit .text-container,
	.media-container.hsplit .text
	{
		display: inline-block;
	}

	.media-container.hsplit 
	{
		height: 25em;
		text-align: center;
	}
	.media-container.hsplit .inner-container
	{
		height: inherit;
	}
	
	.media-container.hsplit .text-container
	{
		width: 25em;
		height: 24em; /*calc(25em - 1em);*/
		margin: 0.5em 1em;
	}
	.media-container.hsplit .text
	{
		display: table-cell;
		vertical-align: middle;
		height: inherit;
		width: 25em;
	}

	.media-container.hsplit .photo 
	{
		height: inherit;
		overflow: hidden;
	}
	
	.media-container.hsplit  .photo img
	{
		height: inherit;
	}
	/* left, right */	
	.media-container.left .text-container
	{
		float: left;
		right: 0;
	}

}


	
/* vsplit */
.media-container.vsplit {}

.media-container.vsplit.photo, 
.media-container.vsplit.text-container,
.media-container.vsplit.text {
	display: block;
}

.media-container.vsplit .photo {
	width: 100%;
}
.media-container.vsplit .text-container
{
	width: calc(100% - 4em);	
	margin: 0.5em 2em;
}
.media-container.vsplit .text
{
	display: block;
}

@media all and (max-width: 800px) 
{
	.media-container.vsplit.photo-only .inner-container
	{
		width: 100%;
	}
	.media-container.vsplit .photo img
	{
		width: inherit;
	}
}

@media all and (min-width: 800px) 
{
	.media-container.vsplit .photo
	{
		/*height: 32em;*/
	}
	.media-container.vsplit .photo img
	{
		max-height: 100vh;
		max-width: 100vw;
	}
}


/* text only */
.media-container.vsplit.text-only .photo
{
	display: none;
}
/* photo only */
.media-container.vsplit.photo-only .text-container
{
	display: none;
}

div#to-the-top-with-you
{
	position: fixed;
	bottom: 0;
	right: 1.6em;
	width: 4em;
	height: 4em;
	padding-bottom: 1.6em;
	background-image: url("../ico/up.png");
	background-size: 80%;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-filter: brightness(6);
}

div#to-the-top-with-you:hover
{
	-webkit-filter: brightness(2);
}