html {  
  /*overflow: auto !important; */
}

body {
  /*overflow: auto !important;*/
}



/* -------------    Stories   ---------------- */

.story-container {
	width: 100%;
}

.story-main {
	position: absolute;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}


.story-list-container {	
	-webkit-transition: all 0.25s ease-in-out;	
	transition: all 0.25s ease-in-out;
	text-align: center;
	margin-top: 1.3em;
}

#story .hex {
	width: 1.75em;
	height:2.1em;
	margin-left: .6em;
}

#story .hex-outline {
	position: absolute;	
  background: url('../img/hex-outline.png') no-repeat left top;
  background-size: 1.75em 2.1em; 
  -webkit-transition: all 0.15s ease-in-out;	
  transition: all 0.15s ease-in-out; 
}

#story .icon-sections-story {
	position: absolute;
	font-size: .9em;
	line-height: .85;
	margin-left: 0.32em;
}

#story h1 {
	font-size: .35em;
}

ul.story-list {
	display: inline-block;
	margin-left: 1em;
	margin-right: 1em;
	text-align: center;
	position:relative;
	left:50%;
	margin-top: .3em;
}

.story-list li {
	text-align: center;
	width: 3em;
	float: left;
	margin: .1em .5em 0 .5em;
	position:relative;
	right:50%;
}

#story .icon-sections-story {
	-webkit-transition: all 0.2s ease-in-out;	
	transition: all 0.2s ease-in-out;
}

.story-list li:hover {
	cursor: pointer;
}

.story-list li:hover .hex-outline {
	opacity: 0;
}

.story-list li:hover .line {
	background: #777;
}

.story-list li:hover .icon-story {
	color: #fff;
}

.story-list li:hover h1 {

}

.story-list h1 {
	padding-top: 7em;
}

#story .closure-lines {	
	height: .4em;
	width: 1.7em;
	margin-left: .6em;
	margin-top: .4em;	
	-webkit-transition: all 0.2s ease-in-out;	
	transition: all 0.2s ease-in-out;
}

#story .line {	
	background: #fff;	
	width: 100%;
	height: 1px;	
	margin-top: .06em;
	-webkit-transition: all 0.2s ease-in-out;	
	transition: all 0.2s ease-in-out;
}


/* -------------    Story Single   ---------------- */

.story-single-container {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: #efe8d6;
	padding: .5em;
	-webkit-transition: all 0.25s ease-in-out;	
	transition: all 0.25s ease-in-out;
}

.story-single-container .icy-slider {
	overflow-x: hidden;
}

.story-single {
	width: 100%;	
	top: 0;
	left: 0;
	text-align: center;
}

.story-nav ul {
	display: inline-block;	
	margin-top: .2em;
}

.story-nav li {
	float: left;
}

.story-nav .hex-icon {
	position: relative;
	display: inline;
	width: 1.75em;
	height:2.1em;
}

.story-nav .hex {
	margin-left: 0 !important;
}

.story-nav .icon-sections-story {
	margin-left: -.34em !important;
}

.story-nav .icon-arrow-right, .story-nav .icon-arrow-left {
	margin-top: 1.48em;
	-webkit-transition: all 0.2s ease-in-out;	
	transition: all 0.2s ease-in-out;
} 

.story-single-container .close {
		position: fixed;
		top: 0;
		right: 0;
		-webkit-transition: all 0.25s ease-in-out;	
		transition: all 0.25s ease-in-out;
		cursor: pointer;
		cursor: hand;
		z-index: 100;
}
	
.story-single-container  .close:hover {
		color: #8eb3bf;
}

.story-single li:hover {
	cursor: pointer;
}

.story-single li:hover .hex-outline {
	opacity: 0;
	cursor: pointer;
}

.story-single-container h1 {
	font-size: .45em !important;
	margin-top: .5em;
}

.story-single-container .closure-lines {
	display: inline-block;
	margin-left: 0 !important;
	width: 7.5em !important;
}

.story-single-container .paragraph {
	font-size: .3em;
	font-family: 'PFDinCondensedThin';
	max-width: 25em;
	line-height: 1.5;
	text-align: left;
	display: inline-block;
	margin-bottom: 1em;
}

.story-single-container .paragraph img {
	max-width: 25em;
	height: auto;
	cursor: pointer;
}

.story-single-container .paragraph p {
	font-family: 'PFDinCondensedThin' !important;
}

.story-single-container .footer ul {
	margin-bottom: 1em;
}

.story-single-container .icon-arrow-right:hover,  .story-single-container .icon-arrow-left:hover{
	color: #8eb3bf;
}

.story-single-container .slider-arrow.clicked {
	color: #efe8d6;
}




@media only screen 
and (device-aspect-ratio: 40/71) 
and (orientation : portrait) {
	.story-list-container {
			margin-top: 2em;		
	}

}