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

	div.header
	{
		position: relative;
		width: 100%;
		height: 100%;
		margin-bottom: 0.4em;
	}

	div.cover
	{
		width: 100%;
		margin-bottom: 0.4em;
		background-position:center;
		background-size: cover;
		background-image: url('../ico/marker.png');
	}
	@media all
	{
		div.cover
		{
			height: calc(100% - 14em - 0.4em);
		}
	}
	@media all and (min-width: 800px) 
	{ 
		div.cover
		{
			height: calc(100% - 9em - 0.4em);
		}
	}
	
	div.user-info
	{
		margin-bottom: 0.4em;	
	}
	
	@media all
	{
		div.user-info
		{
			width: 100%;
			padding-left: 0;
			height: 8em;
			padding-top: 6em;
		}
		
	}
	@media all and (min-width: 800px) 
	{ 
		div.user-info
		{
			width: calc(100% - 20em);
			padding-left: 20em;
			height: 8em;
			padding-top: 1em;
		}
	}
	div.user-info span
	{
		display: block;
		color: white;
		font-size: 2em;
		max-height: 2.9em;
		overflow: hidden;
	}
	div.user-info span:nth-child(2)
	{
		font-size: 1em;
	}
	@media all
	{
		div.user-info span
		{
			width: 100%;
			text-align: center;	
		}
	}
	@media all and (min-width: 800px) 
	{ 
		div.user-info span
		{
			width: auto;
			text-align: left;
		}	
	}
	
	
	div.name 
	{
		display: block;
		position: absolute;
	}

	div.name span
	{
		font-weight: 600;
		color: white;
	}
	
	div.avatar 
	{
		display: block;
		position: absolute;
		width: 14em;
		height: 14em;
		border-radius: 50%;
		border: 0.4em solid white;
		background: gray;
		background-position:center;
		background-size: cover;
		background-image: url('../ico/thumb.png');
	}

	
	@media all
	{
		
		div.name 
		{
			top: 0;
			display: table;
			height: calc(100% - 14em - 0.4em - 9em);
			width: 100%;
			text-align: center;	
		}
		div.name span
		{
			display: table-cell;
			vertical-align: middle;
			font-size: 220%;
		}
		div.avatar 
		{
			top: calc(100% - 14em - 0.4em - 7em - 2em); /* height - user info height - padding - avatar half - correction */
			left: calc(50% - 7em);
		}
	}
	
	@media all and (min-width: 800px) 
	{
		div.name 
		{
			top: calc(100% - 9em - 0.4em - 5em); 
			left: 20em;
			display: block;
			height: auto;
			width: auto;
			text-align: left;	
		}
		div.name span
		{
			display: block;
			font-size: 300%;
		}
		div.avatar
		{ 
			top:calc(100% - 9em - 0.4em - 7em - 2em); 
			left: 3em; 
		}
	}
	
	.trips-container:after {
		content:"";
		display:block;
		clear:both;
	}


	div.story
	{
		display: block;
		position: relative;
		float: left;
		height: 500px;
		background-position: center;
		background-size: cover;
	}

	div.story .info
	{
		display:none;
		height: 100%;
		width:100%;
		background: rgba(0,0,0,0.6);
		color: white;
	}
	div.x
	{
		display: table-cell;
		vertical-align: middle;
		text-align: center;
		padding: 0 0.3em;
	}
	div.story:hover .info
	{
		display: table;
	}

	a
	{
		color: white;
		text-decoration: none;
	}
	a:hover
	{
		font-weight: 600;
	}
	div.story .info .title
	{
		font-size: 2.6em;
	}
	div.story .info .descr
	{
		font-size: 1.7em;
	}

	@media all
	{
		div.story
		{
			width: 100%;
			height: 300px;
		}
	}
	@media all and (min-width: 500px) 
	{
		div.story
		{
			height: 500px;
		}
	}
	@media all and (min-width: 800px) 
	{
		div.story
		{
			width: 50%;
		}
	}