/* css for demo page only */
.philtest .page-container > div[class] {
	position: relative;
}
.philtest .page-container > div[class]:after {
	content: attr(class);
	padding: 10px; opacity: 0.8;
	background: yellow; color: #000;
	font: 12px; font-weight: 700;
	position: absolute; left: 10px; top: 10px;
	pointer-events: none;
}
@media (max-width:980px){.philtest li.story button[style]{margin: 40px auto !important}}
/* /css for demo page only */

li.story { position: relative }
li.story.has-video::after {
	display: block; content: '';
	position: absolute; right: 18px; top: 10px; z-index: 9;
	width: 38px; height: 38px;
	background: url(../images/ico_video.png) no-repeat;
	background-size: contain;
}
.stories-row li.story.has-video::after,
[data-show-random="4"] .story:nth-child(4) ~ .story { display: none }

/* for 3x3 thumbnail */
li.story .bgfx { background-size: 100% 100% }

.kv li.story figure { position: relative; padding-bottom: 66.6667% }
.kv li.story img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; }
.kv li.story img + img { display: none }

.kv li.story [itemprop="name"] {
	padding: 10px; font-size: 18px;
	text-align: center;
	color: #000; background: #fff;
	-webkit-transition: opacity .2s, margin-left 0s;
	transition: opacity .2s, margin-left 0s;
}
@media (min-width:641px) {
	.kv li.story figure { padding-bottom: 33.3333% }
	.kv li.story img:not(:last-of-type) { display: none }
	.kv li.story img + img { display: block }
	.kv li.story [itemprop="name"] {
		width: 390px; position: absolute; bottom: 30px;
		padding: 15px; font-size: 22px;
		text-align: initial;
		background: rgba(255,255,255,0.85);
	}
	.left.kv li.story [itemprop="name"] { left: 30px }
	.right.kv li.story [itemprop="name"] { right: 30px }
	.center.kv li.story [itemprop="name"] { left: 50%; margin-left: -195px; text-align: center }
}
@media (min-width:981px) {
	.kv li.story a:focus [itemprop="name"],
	.kv li.story a:hover [itemprop="name"] {
		opacity: 0; margin-left: -99%;
		-webkit-transition: opacity .2s, margin-left 0s linear .2s;
		transition: opacity .2s, margin-left 0s linear .2s;
	}
	.left.kv li.story .overlay { text-align: left }
	/* .right.kv li.story .overlay { text-align: right } */
	.right.kv li.story .overlay-content { margin-bottom: 80px }
	.kv li.story .overlay-content {
		width: 390px;
		margin: 20px 30px;
		vertical-align: bottom;
	}
	.kv li.story .overlay-content h3 {
		display: block;
		font: 30px FloodStd;
		color: #fff;
		margin: 5px 0;
	}
	.kv li.story .overlay-content h4 {
		color: #fff;
		width: 390px;
		font-size: 24px;
		margin: 5px 0;
	}
	.kv li.story .overlay-content p {
		font-size: 16px;
	}
}
.kv li.story { width: 100%; padding: 0 }


.elletv.stories-row { padding: 15px 0 }
.stories-grid { display: block; overflow: hidden; margin: 50px auto }
@media (min-width: 641px) {
	.stories-grid .stories { margin: 0 -4px }
}
@media (min-width: 981px) {
	.stories-row { min-height: 250px }
	.elletv.stories-row { padding: 15px; min-height: auto }
	.stories-row { display: table; width: 100%; }
	.stories-row .stories { display: table-cell }
	.stories-grid .stories { margin: 0 -7.5px }
}


.elletv a { color: #fff }
.elletv.stories-row { background: #000; color: #fff }
.stories-row .side-content { margin: 50px auto; text-align: center }

.stories-row .side-title {
	text-align: center;
	font-size: 28px;
	font-family: Open Sans, Microsoft JhengHei;
	font-weight: 300;
	margin: 30px 0;
}
.elletv .stories-row .side-title { color: #fff }

li.story {
	display: inline-block;
	vertical-align: top;
	font-weight: 300;
}
.stories-row .stories li.story {
	width: 50%;
	padding: 0 4px;
}
.stories-row li.story.slick-slide { outline: 0 }
.stories-grid li.story {
	width: 100%;
}
@media (min-width: 641px) {
	.stories-row .stories li.story {
		width: 25%;
		min-height: 15em;
	}
}
@media (min-width: 981px) {
	.stories-row .kv {
		display: block; position: absolute; left: 0; bottom: 0; right: 309px;
	}
	.stories-row .stories li.story {
		min-height: auto;
	}
}
ul.kv,
.stories-row .stories,
.stories-grid .stories { padding: 0 15px }
.elletv.stories-row .stories { padding: 0 15px 30px }
@media (min-width: 981px) {
	ul.kv { padding: 0 }
	.stories-row + ul.kv { margin: 20px auto 0 }
	.stories-row .side-title {
		display: table-cell; width: 23.076923%; /* 270/(1200-15-15) */
		vertical-align: middle;
		margin: 0;
	}
	.stories-row .side-content { display: table-cell; margin: 0 auto; vertical-align: top }
	/* stories with very short titles, followed by LREC1 */
	.medium.title + .stories-row { table-layout: fixed }
	.medium.title + .stories-row .stories + .side-content { width: 300px }
	.stories-row .stories { padding: 0 }
	.stories-row .stories li.story { padding: 0 9px 0 0 }
	.stories-row .side-title + .stories li.story { padding: 0 0 0 9px }
	.elletv.stories-row li.story { padding: 0 15px 0 0 }
	.elletv.stories-row .side-title + .stories { padding: 0 }
	.elletv.stories-row .side-title + .stories li.story { padding: 0 0 0 15px }
}
@media (min-width: 641px) {
	.stories-grid .stories { padding: 0	}
	.stories-grid li.story {
		width: 50%;
		padding: 0 4px;
	}
}
.stories-row .stories li.story a [itemprop="name"] {
	color: #000;
	padding: 10px 10px 20px;
	font-size: 15px;
}

.general-article .stories-row .stories li.story a [itemprop="name"]{font-size:16px;}

.elletv.stories-row li.story a [itemprop="name"] { color: #fff }
.elletv.stories-row li.story a:hover [itemprop="name"] { color: #c8c8c8 }
.stories-grid li.story a [itemprop="name"] {
	font-size: 18px;
	text-align: center;
	padding: 10px 0 30px;
}
.stories-grid li.story.custom {
	width: 100%; max-width: 100%; text-align: center;
}
@media (min-width: 641px) {
	.stories-grid li.story a [itemprop="name"] {
		font-size: initial;
		padding: 15px 15px 30px;
	}
}
@media (min-width: 981px) {
	.stories-row .stories li.story a [itemprop="name"] {/* font-size: 14px */}
	.general-article .stories-row .stories li.story a [itemprop="name"]{font-size:14px;}
	.stories-grid li.story,
	.stories-grid li.story.custom {
		width: 33.33334%;
		max-width: 405px;
		padding: 0 7.5px;
	}
	.sidebar-content .stories-row li.story { display: block; width: 100%; margin-bottom: 10px; padding: 0 }
	.sidebar-content .stories-row li.story a { display: table }
	.sidebar-content .stories-row li.story a figure { display: table-cell; width: 140px; vertical-align: top }
	.sidebar-content .stories-row li.story a [itemprop="name"] { display: table-cell; vertical-align: top; padding: 0 0 0 10px }
	.sidebar-content .stories-row li.story .overlay .actions { display: none }
	.sidebar-content .stories-row li.story .overlay h3 { font: 18px FloodStd }
}


.article-body .page .stories-wide { margin: 0 auto; padding: 0 }
.article-body .page .stories-wide .stories-title { font-size: 14px; text-transform: uppercase; margin: 0.5em 20px }
.article-body .page .stories-wide ul.stories { background: #f3f3f3; width: 100%; padding: 20px 0 }
.article-body .page .stories-wide li.story { background: #f3f3f3; width: 100%; padding: 10px 20px; min-height: 110px }
.article-body .page .stories-wide li.story a { display: table; width: 100%; color: #4d4d4d; border: 0 !important }
.article-body .page .stories-wide li.story a figure { display: table-cell; width: 120px; vertical-align: top }
.article-body .page .stories-wide li.story a [itemprop="name"] { display: table-cell; vertical-align: top; padding: 0 0 0 15px; font-size: 18px; }
.article-body .page .stories-wide li.story a .footnote { display: block; margin: 1em 0 0; color: #8d8d8d; font-size: 14px; text-decoration: none !important }
.article-body .page .stories-wide li.story .overlay p,
.article-body .page .stories-wide li.story .overlay .actions { display: none }
.article-body .page .stories-wide li.story .overlay h3 { font: 18px FloodStd; color: #fff }
@media (min-width: 641px) {
	.article-body .page .stories-wide { max-width: 800px; margin: 30px auto; padding: 0 20px }
	.article-body .page .stories-wide .stories-title { text-transform: none; font-size: 12px; margin: 0.5em 12px }
	.article-body .page .stories-wide ul.stories { background: transparent; display: table; padding: 0 }
	.article-body .page .stories-wide li.story { display: table-cell; table-layout: fixed; width: 50%; padding: 12px }
	.article-body .page .stories-wide li.story:only-child { display: inline-block; width: 100% }
	.article-body .page .stories-wide li.story a [itemprop="name"] { font-size: 14px }
}

li.story a:focus { outline: 0 }
li.story a:focus [itemprop="name"],
li.story a:hover [itemprop="name"] { color: #7d7d7d }
.stories li.story a:focus [itemprop="name"] { text-decoration: underline }
.stories li.story a:hover:focus [itemprop="name"] { text-decoration: none }
li.story figure + [itemprop="genre"],
li.story figure + [itemprop="genre"] + [itemprop="name"] + [itemprop="author"] { display: none; }

li.story figure {
	position: relative;
	overflow: hidden;
	-webkit-transition: opacity 2s;
	transition: opacity 2s;
}
li.story figure i {
	display: block;
	position: relative; overflow: hidden;
	width: 100%; height: 1px; padding-bottom: 66.6667%;
}
li.story figure i img {
	display: block; width: auto; height: 100%;
	position: absolute; top: 0; right: -99%; bottom: 0; left: -99%;
	margin: 0 auto;
	-webkit-transition: all .2s;
	transition: all .2s;
}
li.story .overlay {
	display: none; opacity: 0; position: absolute; left: 0; top: 0; z-index: 6;
	width: 100%; height: 100%;
	text-align: center; white-space: nowrap;
	-webkit-transition: all .2s;
	transition: all .2s;
}
@media (min-width: 981px) {
	li.story .bgfx::after {
		opacity: 0; visibility: hidden; display: block; content: "";
		position: absolute; left: 0; top: 0; z-index: 4;
		width: 100%; height: 100%;
		background: rgba(0,0,0,0.5);
		-webkit-transition: all .2s;
		transition: all .2s;
	}
	li.story .overlay { display: block }
	li.story .overlay:before{content:'';display:inline-block;height:100%;vertical-align:middle}
	li.story .overlay-content {display:inline-block;vertical-align:middle;white-space:initial;font-style:normal}
	.stories-grid li.story .overlay-content h3 { font: 30px FloodStd; font-weight: 400; color: #fff }
	.stories-row .stories li.story .overlay-content h3 { font: 16px FloodStd; font-weight: 400; color: #fff }
	.stories-row .stories li.story .overlay-content p,
	.elletv.stories-row li.story .overlay-content h3 { display: none }
	li.story .overlay-content p { margin: 5px 0; font-size: 14px; color: #fff }
	li.story .actions { margin-top: 30px; height: 38px }
	.kv li.story .actions { margin-top: 20px }
	li.story .actions:first-child,
	.stories-row li.story .overlay .actions { margin-top: 6px; }
	li.story a:focus figure img,
	li.story a:hover figure img { -webkit-filter: blur(2px); filter: blur(2px); }
	li.story a:focus .overlay,
	li.story a:focus .bgfx::after,
	li.story a:hover .overlay,
	li.story a:hover .bgfx::after { opacity: 1; visibility: visible; }
}

li.story [itemprop="author"]:before { content: "by " }
li.story [itemprop="genre"] {
	display: block;
	text-transform: uppercase;
	font-size: 12px;
	color: #8d8d8d;
}

li.story .actions button {margin:0;padding:0;border:0;outline:0;display:inline-block;cursor:pointer;background-color:transparent;background-repeat:no-repeat;background-position:0 0;text-indent:100%;white-space:nowrap;overflow:hidden;-webkit-appearance:none}
li.story .actions button:hover,
li.story .actions button:focus {background-position:0 100%}
li.story .actions .share { width: 38px; height: 38px; background-image: url("../images/buttons/share_circled.png"); }