html, body {
    margin: 0;
}
div.header
{
	position: relative;
	width: 100%;
	height: 100vh;
	display: table;
	background-size: cover;
	background-position:center;
}

div.intro { 
	vertical-align: middle;
    display: table-cell;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}

div.intro h1, div.intro p 
{ 
	margin: 0 auto;
	width: 90%; 
	text-align: center; 	
	color: rgba(255,255,255,0.5);
	/*color: rgba(0,0,0,0.6);*/
}
div.intro h1 
{ 
	font-size: 9em; 
	font-family: blackout2am; 
	letter-spacing: 0.15em; 
} 
div.intro p 
{ 
	font-size: 2em;
    font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
    font-weight: bold;
}

.stories-container:after {
  content:"";
  display:block;
  clear:both;
}

div.res-thumb
{
	position: relative;
	border: 0px;
	float: left;
	background-size: cover;
	background-position:center;
	height: 300px;
}

div.res-thumb .info
{
	display: none;
	height: 100%;
	width: calc(100% - 8px);
    padding-left: 4px;
    padding-right: 4px;
	background: rgba(0,0,0,0.6);
	color: white;
}
div.x
{
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
div.res-thumb:hover .info
{
	display: table;
}
a
{
	color: white;
	text-decoration: none;
}
a:hover
{
	font-weight: 600;
}
div.res-thumb .info .title
{
	font-size: 2.3em;
}
div.res-thumb .info .descr
{
	font-size: 1.8em;
}

@media all and (min-width: 0px) { div.res-thumb { width: 100%; } div.intro { font-size: 30%; } }
@media all and (min-width: 280px) { div.res-thumb { width: 100%; } div.intro { font-size: 40%; } }
@media all and (min-width: 350px) { div.res-thumb { width: 100%; } div.intro { font-size: 50%; } }
@media all and (min-width: 450px) { div.res-thumb { width: 100%; } div.intro { font-size: 60%; } }
@media all and (min-width: 600px) { div.res-thumb { width: 100%; } div.intro { font-size: 70%; } }
@media all and (min-width: 800px) { div.res-thumb { width: 50%; } div.intro { font-size: 80%; } }
@media all and (min-width: 1200px) { div.res-thumb { width: 33.33%; } div.intro { font-size: 90%; } }
@media all and (min-width: 1600px) { div.res-thumb { width: 25%; } div.intro { font-size: 100%; } }
@media all and (min-width: 1900px) { div.res-thumb { width: 25%; } div.intro { font-size: 140%; } }