/* ------------------------------------------------------- */
/* GENERAL ----------------------------------------------- */
/* ------------------------------------------------------- */

body {
	font-family: "Open Sans";
	font-weight: 500;
	font-size: 12px;
	line-height: 1.5em;
	background: url("../image/header-level-01.jpg") top center; }

body.takeover .out-wrapper {
	background: black; }

body.takeover.full .out-wrapper .content {
	max-width: 984px;
	float: none; }

body.takeover.full .ad-rail {
	display: none; }

body:before {
	display: none;
	content: url("..images/diag-black.svg"), url("../image/menu-icon-focus.svg"); }

body a {
	color: #f36b31;
    outline: none;
    border: none; }

body a:focus {
    outline: none;
    border: none; }

.in {
	max-width: 1290px;
	min-width: 320px;
	padding: 0px 20px;
	margin: 0 auto; }

.mo-round {
	border-radius: 2px; }

.down10 {
	margin-bottom: 10px; }

.down20 {
	margin-bottom: 20px; }

.down40 {
	margin-bottom: 40px; }

.soft {
	transition: all linear .2s; }

.soft:hover {
	transition: all linear .015s; }

.main-column {
	width: calc(100% - 320px);
	float: left; }

.right-column {
	width: 300px;
	float: right; }

.none {
	display: none; }

.box-ad {
	margin-bottom: 20px; }

.ad {
	text-align: center; }

.ad img {
	text-align: center;
	margin: 0 auto;
	width: auto;
	display: block; }

.ad.mobile-content {
	display: none; }

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; }

.height-truncate {
	overflow: hidden;
	text-overflow: ellipsis; }

.button {
	display: inline-block;
	text-align: center;
	padding: 7px 14px;
	border-radius: 3px;
	background-color: #e2e2e2;
	color: black;
	text-decoration: none;
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .1); }

.button.wide {
	display: block; }

.button:focus, .button.hover, .button:active {
	background-color: white; }

figure {
	position: relative;
	overflow: hidden;
 	border-radius: 3px; }

figure figcaption {
	position: absolute;
 	bottom: 0px;
	left: 0px;
	background: rgba(0, 0, 0, .75);
	padding: 6px;
	color: white; }

figure.expand {
	height: 100px;
	max-width: 480px;}

figure.expand.open {
	height: auto; }

figure .expand-button {
	background: rgba(255, 255, 255, .75);
	cursor: pointer;
	color: black;
	font-weight: 500;
	padding: 3px 6px;
	border-radius: 2px;
	position: absolute;
 	top: 10px;
	right: 10px; }

figure.expand .expand-button::after {
	content: "Expand"; }


figure .expand-button.open::after {
	content: "Close"; }

figure img {
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .25); }

figure:highlight {
	background: transparent; }

span.caption {
	display: block;
	border-radius: 2px;
	background-color: #e2e2e2;
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0,.1);
	padding: 6px; }

span.caption img {
	border-radius: 1px;
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .25);
	margin-bottom: 6px; }

/* ------------------------------------------------------- */
/* SIDE RAIL --------------------------------------------- */
/* ------------------------------------------------------- */

.right-column .widget {
	background: #c2b8b5; }

.right-column h2, .widget-title {
	margin: 0px;
	padding: 12px 12px 10px;
	background: #46413D url("../image/mo-dots.svg") calc(100% - 10px) 50% / 30px no-repeat;
	color: #ff7f49;
	font-family: sans-serif;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	text-align: left; }

.right-column .article-list {
	padding: 0px 1px 1px;
	margin: 0px; }

.right-column .article-list li {
	position: relative;
	padding: 0px;
	margin: 0px;
	list-style: none; }

.right-column .article-list li .arrow {
	position: absolute;
	top: 0px;
	z-index: 4;
	margin-right: 0px;
	right: 100%;
	background: url("../image/rail-arrow-left.svg") center center / 100% no-repeat;
	height: 100%;
	width: 12px;
	opacity: 0;
	pointer-events: none; }

.right-column .article-list li:hover .arrow {
	opacity: 1;
    transition-delay: .35s; }

.right-column .article-list li .article-wrap {
	position: absolute;
	z-index: 2;
	right: 100%;
	margin-right: 0px;
	top: 0px;
	padding: 0px;
	opacity: 0;
	width: 125%;
	pointer-events: none;
	border: 1px solid rgba(71, 66, 62, .35);
	border-right: 1px solid #c2b8b5;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, .15); }

.right-column .article-list li .article-wrap .widget-content {
	position: relative;
	background: white;
	padding: 10px; }

.right-column .article-list li:hover .article-wrap {
	height: auto;
	opacity: 1;
    transition-delay: .35s;
	pointer-events: all; }

.right-column .article-list li .article-pic {
	display: block;
	position: absolute;
	height: calc(100% - 20px);
	width: 100px;
	box-shadow: 0px 0px 0px 1px white inset;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	float: left; }

.right-column .article-list li .right-content {
	width: calc(100% - 110px);
	min-height: 60px;
	float: right; }

.right-column .article-list li .right-content .meta, .right-column .article-list li .right-content p {
	margin: 0px;
	padding: 0px;
	margin-bottom: 8px; }

.right-column .article-list li h3 {
	margin: 0px;
	padding: 1px 0px 0px;
	font-weight: 500;
	letter-spacing: 0px;
	font-size: 12px;
	line-height: 20px; }

.right-column .article-list li:last-child h3 {
	padding: 1px 0px 0px; }

.right-column .article-list li h3 a {
	display: block;
	position: relative;
	padding: 9px;
	color: #726b66;
	background: rgba(255, 255, 255, .5);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .75);
	border-left-color: rgba(255, 255, 255, .5);
	border-top-color: rgba(255, 255, 255, .5); }

.right-column .article-list li:hover h3 a {
	background: white; }

.right-column .article-list li h3 a:hover {
	color: black;
	z-index: 3;
	background: white; }

.right-column .article-list li .right-content .meta {
	color: rgba(0, 0, 0, .5);
	font-size: 10px; }

.right-column .article-list li .right-content p {
	margin: 0px; }

.right-column .tags {
	background: rgba(255, 255, 255, .95);
	margin: 0px;
	padding: 8px 10px;
	border-top: 1px solid #e6e4e3; }

.right-column .tags li {
	display: inline-block;
	margin-right: 6px; }

.right-column .tags li a {
	color: grey;
	text-decoration: none; }

.right-column .tags li a:hover {
	color: #1b1b1b; }

.right-column .tags li a:before {
	content: "#"; }


/* ------------------------------------------------------- */
/* MAIN HEADER ------------------------------------------- */
/* ------------------------------------------------------- */


header#main-header { }

header#main-header .level-01 {
	max-height: 112px; }

header#main-header .level-01 .header-headlines {
	width: calc(100% - 160px);
	padding: 10px 0px;
	float: right; }

header#main-header .level-01 .header-headlines .widget {
	background: rgba(0, 0, 0, .33);
	padding: 10px;
	max-width: 280px;
	margin-left: 10px;
	float: right; }

header#main-header .level-01 .header-headlines .widget h2.widget-title {
	background-color: transparent;
	color: #988c85;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0px 50px 0px 0px;
	margin: 0px; }

header#main-header .level-01 .header-headlines .widget ul {
	margin: 0px;
	padding: 0px; }

header#main-header .level-01 .header-headlines .widget ul li {
	list-style: none; }

header#main-header .level-01 .header-headlines .widget ul li a {
	text-decoration: none; }

header#main-header .level-01 .header-headlines .widget ul li h1, header#main-header .level-01 .header-headlines .widget ul li h2, header#main-header .level-01 .header-headlines .widget ul li h3 {
	font-size: 12px;
	font-weight: normal;
	padding: 0px;
	margin: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; }

header#main-header .level-01 .header-headlines .widget ul li h2	a:hover {
	color: white;
	text-decoration: underline; }

header#main-header .level-01 a#logo-main {
	height: 112px;
	width: 160px;
	float: left;
	display: block;
	background: url("../image/logo-orange.svg") 0px 50px / contain no-repeat; }

header#main-header .level-02 {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	background: #988c85 url("../image/header-level-02.jpg") center center; }

header#main-header .level-02 nav {
	width: calc(100% - 300px);
	float: left; }

header#main-header .level-02 nav ul {
	padding: 0px;
	height: 24px;
	margin: 0px; }

header#main-header .level-02 nav ul li {
	padding: 0px;
	margin: 0px 10px 0px 0px;
	display: inline-block; }

header#main-header .level-02 nav ul li a {
	color: white;
	text-transform: uppercase;
	line-height: auto;
	text-decoration: none;
	font-weight: 700;
	display: block;
	padding: 9px 0px;
	background: url("../image/nav-a-hover.svg") center 50px / 24px no-repeat;
	transition: background-position linear .2s; }

header#main-header .level-02 nav ul li a:hover {
	background-position: center center;
	transition: background-position linear .09s }

header#main-header .level-02 .level-mobile {
	width: 300px;
	float: right; }

header#main-header .level-02 #search {
	width: 300px;
	margin: 6px 0px 7px; }

header#main-header .level-02 #search input {
	font-family: "Open Sans";
	width: calc(100% - 8px);
	border: none;
	color: black;
	background: #A59C99;
	padding: 3px 4px;
	box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .25); }

header#main-header .level-02 #search input[placeholder], header#main-header .level-02 #search input::-webkit-input-placeholder {
	appearance: none;
	color: white; }

header#main-header #menu-button {
	display: none;
	float: left;
	background: url("../image/menu-icon.svg") left 8px / 22px 20px no-repeat;
	height: 34px;
	width: 32px;
	margin-bottom: 1px; }

header#main-header #menu-button:hover {
	background-image: url("../image/menu-icon-focus.svg"); }


/* ------------------------------------------------------- */
/* MAIN BODY --------------------------------------------- */
/* ------------------------------------------------------- */


.out-wrapper {
	background: url("../image/black-bg.jpg") center center;
	padding: 20px 0px; }

.out-wrapper .content {
	position: relative;
	padding: 0px;
	background: white;
	width: calc(100% - 300px);
	margin: 0 auto;
	float: left; }

.out-wrapper .content .content-top-pad {
	padding: 20px;
}

/* ------------------------------------------------------- */
/* HERO -------------------------------------------------- */
/* ------------------------------------------------------- */

#hero {
	position: relative; }

#hero #hero-window {
	background: #1b1b1b; }

#hero #hero-window .hero-item {
	display: block;
	background: #1b1b1b;
	margin-bottom: 1px;
	height: 270px;
	color: black;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-decoration: none; }

#hero #hero-window .hero-item .opac {
	position: relative;
	height: 100%;
	background: url("../image/diag-light-opac.svg") top left / 4px;
	box-shadow: inset 0px 0px 25px rgba(0, 0, 0, .25); }

#hero #hero-window .hero-item:hover {
	color: #F36C30; }

#hero #hero-window .hero-item:hover .opac {
	background: rgba(255, 255, 255, .1) url("../image/diag-light-opac.svg") top left / 4px; }

#hero #hero-window .hero-item .hero-content {
	position: absolute;
	background: rgba(255, 255, 255, .9);
	border: 1px solid white;
	width: calc((100% / 3) - 19px);
	padding: 9px;  }

#hero #hero-window .hero-item:hover .hero-content {
	background: white; }

#hero #hero-window .hero-item .hero-content .hero-content-in {
	padding: 10px; }

#hero #hero-window .hero-item .hero-content .hero-content-in h1 {
	font-family: sans-serif;
	padding: 0px;
	margin: 0px 0px 10px;
	font-size: 30px;
	line-height: 32px; }

#hero #hero-window .hero-item .hero-content .hero-content-in p {
	padding: 0px;
	margin: 0px; }

#hero #hero-window .hero-item .hero-content.pos-top-left  { top: 0px; left: 0px; border-top: none; border-left: none; }
#hero #hero-window .hero-item .hero-content.pos-top-right { top: 0px; right: 0px; border-top: none; border-right: none; padding-right: 10px; }
#hero #hero-window .hero-item .hero-content.pos-bot-left  { bottom: 0px; left: 0px; border-bottom: none; border-left: none; }
#hero #hero-window .hero-item .hero-content.pos-bot-right { bottom: 0px; right: 0px; border-bottom: none; border-right: none; padding-right: 10px; }

#hero ul#hero-links {
	padding: 0px;
	margin: 0px; }

#hero #hero-links li {
	list-style: none;
	padding: 0px;
	margin: 0px 1px 0px 0px;
	display: block;
	float: left; }

#hero #hero-links li:last-child {
	margin-right: 0px; }

#hero #hero-links li a {
	position: relative;
	display: block;
	padding: 6px 10px 6px;
	background: rgb(221,215,210); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(221,215,210,1) 0%, rgba(198,194,190,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,215,210,1)), color-stop(100%,rgba(198,194,190,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(221,215,210,1) 0%,rgba(198,194,190,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(221,215,210,1) 0%,rgba(198,194,190,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(221,215,210,1) 0%,rgba(198,194,190,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(221,215,210,1) 0%,rgba(198,194,190,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ddd7d2', endColorstr='#c6c2be',GradientType=0 ); /* IE6-9 */
	color: #756c67;
	font-weight: 700;
	text-decoration: none;
	word-wrap: break-word;
	text-overflow: ellipsis;
	min-height: 72px;
	max-height: 72px; }

#hero #hero-links li a:hover {
	background: #ddd7d2; }

#hero #hero-links li a.selected {
	background: #f36c30;
	color: white; }

#hero #hero-links li a .selected-arrow {
	background-position: center 25px; }

#hero #hero-links li a.selected .selected-arrow {
	display: block;
	height: 12px;
	width: 100%;
	padding: 0px 0px 0px 0px;
	background: url("../image/hero-arrow-up.svg") center center / contain no-repeat;
	position: absolute;
	left: 0px;
	top: -12px;
	transition: background-position ease-in .25s; }


/* ------------------------------------------------------- */
/* LIST VIEW ARTICLES ------------------------------------ */
/* ------------------------------------------------------- */


article.post {
	margin-bottom: 19px;
	padding-bottom: 21px;
	background: url("../image/divider.svg") bottom center / 100% 1px no-repeat; }

article.post:last-of-type {
	background: none; }

article.post .tags {
	float: left;
	width: 85px;
	margin-right: 10px; }

article.post .tags .tag {
	position: relative;
	color: white;
	display: block;
	text-decoration: none;
	text-align: right;
	font-weight: 700;
	font-size: 10px;
	text-transform: uppercase;
	margin-bottom: 2px;
	padding: 4px 6px 4px 30px;
	z-index: 1;
	box-shadow: inset 0px 0px 1px rgba(0, 0, 0, .75); }

article.post .tags .tag:hover {
	opacity: .9; }

article.post .tags .tag.review { background: #333 url("../image/icon-review.svg") 5px center / 16px no-repeat; }
article.post .tags .tag.feature { background: #333 url("../image/icon-feature.svg") 5px center / 16px no-repeat; }
article.post .tags .tag.guide { background: #333 url("../image/icon-guide.svg") 5px center / 16px no-repeat; }
article.post .tags .tag.news { background: #333 url("../image/icon-news.svg") 5px center / 16px no-repeat; }
article.post .tags .tag.platform { background: #333 url("../image/icon-platform.svg") 5px center / 16px no-repeat; }

article.post .tags .tag.platform.android {
	background-color: #99cc00; }

article.post .tags .tag.platform.3ds {
	background-color: #cf181f; }

article.post .tags .tag.platform.vita {
	background-color: #2847f9; }

article.post .tags .tag.platform.iphone {
	background-color: #333; }

article.post .tags .tag.platform.ipad {
	background-color: #555; }

article.post.list-view .post-image {
	float: left;
	display: block;
	text-decoration: none;
	width: 200px;
	height: 100px;
	background-size: cover;
	background-position: center center;
	background-repeat: none; }

article.post.list-view .post-content {
	width: calc(100% - 310px);
	float: right; }

article.post.list-view .post-content h2.post-title {
	padding: 0px;
	margin: 0px;
	font-size: 20px;
	line-height: 24px;
	font-family: sans-serif; }

article.post.list-view .post-content h2.post-title a {
	text-decoration: none; }

article.post.list-view .post-content h2.post-title a:hover {
	color: black;
	text-decoration: underline; }

article.post.list-view .post-content .meta {
	color: #a5a5a5;
	font-size: 12px;
	margin-top: 8px;
	padding-top: 8px;
	font-style: italic; }

article.post.list-view .post-content p {
	margin: 8px 0px 0px; }

article.post.list-view .post-content .meta span a {
	color: #a5a5a5; }

article.post.list-view .post-content .meta span {
	display: inline-block;
	margin-right: 1px; }

article.post.list-view .post-content .meta span:after {
	content: " |"; }

article.post.list-view .post-content .meta span:last-child:after {
	content: ""; }


/* ------------------------------------------------------- */
/* DETAIL VIEW ARTICLES ---------------------------------- */
/* ------------------------------------------------------- */

article.post.detail-view summary {
	margin-bottom: 24px; }

article.post.detail-view .tags {
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 10px 10px 8px;
	margin: 0px;
	/* height: calc(100% - 18px);  */}

article.post.detail-view summary .meta {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ededed+0,ffffff+100&1+0,0+100 */
	background: -moz-linear-gradient(top,  rgba(237,237,237,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(237,237,237,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(237,237,237,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
	border-radius: 3px;
	border-top: 1px solid #ccc;
	padding: 12px;
	float: none; }

article.post.detail-view summary .meta span {
	display: inline-block;
	color: grey;
	margin-right: 2px; }

article.post.detail-view summary .meta span a {
	color: grey; }

article.post.detail-view summary .meta span:after {
	content: "|";
	padding-left: 6px; }

article.post.detail-view summary .meta span:last-child::after {
	content: ""; }

article.post.detail-view summary p.blurb {
	margin: 0px;
	padding: 20px 0px 0px;
	font-size: 18px;
	color: #F36C30;
	font-weight: 500; }

article.post.detail-view main p.video-embed {
	position: relative; }

article.post.detail-view main p img.spacer {
	width: 100%; }

article.post.detail-view main p iframe {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	border: none; }

article.post.detail-view main h3 {
	font-size: 18px;
	line-height: 24px;
	padding: 0px;
	margin: 12px 0px 8px; }

article.post.detail-view main p {
	padding: 0px;
	margin: 1.5em 0px; }

article.post.detail-view main img {
	display: block;
	width: 100%; }

article.post.detail-view .article-pic {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px; }

article.post.detail-view .article-pic img {
	width: calc(100% - 40px);
	width: 100%;
	display: block; }

article.post.detail-view .article-pic.empty img {
	display: none; }

article.post.detail-view .article-pic.empty .tags {
	padding: 0px;
	background: none;
	top: 0px;
	right: 0px;
	overflow: hidden; }

article.post .tags .tag {
	margin-bottom: 3px;
	border-bottom: 1px solid rgba(0, 0, 0, .5); }

article.post.detail-view .article-pic.empty .tags .blur-bg {
	display: none; }

article.post.detail-view .article-pic.empty h1 {
	padding-top: 0px; }

article.post.detail-view .article-pic .tags .blur-bg, article.post.detail-view .article-pic .tags .white-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	height: calc(100% - 20px);
	width: calc(100% - 20px);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: right top;
	background-color: rgba(255, 255, 255, .5);
	-webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }

article.post.detail-view .article-pic h1.post-title {
	position: absolute;
	bottom: 0px;
	font-size: 30px;
	line-height: 32px;
	padding: 20px 20px 0px 0px;
	margin: 0px;
	background: white;
	margin-right: 30%;
	font-family: sans-serif;
	font-weight: 100;
	box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, .5); }

article.post.detail-view .article-pic h1.post-title.no-pic {
	position: relative;
	box-shadow: none;
}

ul.post-tags {
	margin: 0px;
	padding: 6px 0px;
 	border-top: 1px solid #ccc; }

ul.post-tags li {
	display: inline;
	list-style: none; }

ul.post-tags li a {
	display: inline-block;
	padding: 3px 6px;
	background-color: #e2e2e2;
	color: black;
	margin-right: 6px;
}



/* ------------------------------------------------------- */
/* PAGE-FOOTER ------------------------------------------- */
/* ------------------------------------------------------- */

.page-footer {
	padding: 10px 16px 24px;
	background: #f0eeeb;
	border-top: 1px solid rgba(0, 0, 0, .1); }

.page-footer h3 {
	margin-left: 4px; }





/* ------------------------------------------------------- */
/* FOOTER ------------------------------------------------ */
/* ------------------------------------------------------- */


footer#main-footer {
	font-weight: bold; }

footer#main-footer .level-01 {
	background: url("../image/header-level-02.jpg") top center; }

footer#main-footer ul.footer-headlines {
	padding: 0px;
	margin: 0px; }

footer#main-footer ul.footer-headlines li {
	display: block;
	float: left;
	width: calc((100% / 5) - 0px); }

footer#main-footer ul.footer-headlines li a {
	display: block;
	text-align: center;
	padding: 8px;
	border-right: 1px solid #47423E;
	text-decoration: none;
	font-weight: 500;
	color: #3a342e; }

footer#main-footer ul.footer-headlines li a h2 {
	padding: 0px;
	margin: 0px;
	font-weight: normal;
	font-size: 12px; }

footer#main-footer ul.footer-headlines li:last-child a {
	border-right: none; }

footer#main-footer ul.footer-headlines li a:hover {
	background: rgba(255, 255, 255, .25); }

footer#main-footer div.footer-content {
	color: #9f928e;
	padding: 10px 0px 25px; }

footer#main-footer .footer-left {
	float: left;
	width: 30%; }

footer#main-footer .footer-right {
	float: right;
	width: 70%; }

footer#main-footer .footer-right ul {
	margin: 0px;
	padding: 0px;
	text-align: right; }

footer#main-footer .footer-right ul li {
	list-style: none;
	display: inline;
	margin-left: 10px; }

footer#main-footer .footer-right ul li a {
	text-decoration: none; }

/* ------------------------------------------------------- */
/* REVIEW ------------------------------------------------ */
/* ------------------------------------------------------- */

article.post.detail-view main#main-body {
	margin-bottom: 40px; }

article.post.detail-view .post-footer .review-summary {
	background-color: #F36C30;
	background-color: #E0DBDA;
	border-radius: 2px;
	overflow: hidden; }

article.post.detail-view .post-footer .review-summary h3 {
	margin: 0px;
	padding: 0px;
	margin-bottom: 16px; }

article.post.detail-view .post-footer .review-summary .review-summary-content .details h3:nth-child(even) {
	margin-top: 20px; }

article.post.detail-view .post-footer .review-summary p {
	margin: 0px;
	padding: 0px; }

article.post.detail-view .post-footer .review-summary .review-summary-content {
	padding: 20px 20px 20px;
	border: 1px solid #C2B8B5;
	border-top: none;
	border-bottom-width: 2px;
	border-radius: 0px 0px 2px 2px; }

article.post.detail-view .post-footer .review-summary .review-summary-content .score {
	float: left;
	width: 145px;
	height: 145px;
	text-align: center;
	color: #b65930;
	background: white;
	border-radius: 100%;
	overflow: hidden;
	border: 1px solid black;
	border-left: none;
	border-right: none;
	box-shadow: 0px 0px 10px 0px #A7A4A3; }

article.post.detail-view .post-footer .review-summary .review-summary-content .score .score-number {
	margin: 30px 0px 8px;
	letter-spacing: 5px; }

article.post.detail-view .post-footer .review-summary .review-summary-content .score .score-description {
	border-top: 1px solid #b65930;
	display: inline-block;
	padding: 6px 16px 0px;
	font-style: italic; }

article.post.detail-view .post-footer .review-summary .review-summary-content .score .score-number .big {
	font-size: 48px;
	line-height: 48px;
	color: black;
	font-weight: 900; }

article.post.detail-view .post-footer .review-summary .review-summary-content .details {
	float: left;
	width: calc(100% - 165px);
	padding-left: 20px; }

article.post.detail-view .post-footer .review-summary .review-summary-content .details ul {
	padding: 20px 0px 0px;
	margin: 0px; }

article.post.detail-view .post-footer .review-summary .review-summary-content .details ul li {
	margin: 0px;
	margin-bottom: 4px;
	list-style: none;
	padding: 3px 8px 3px 28px;
	border-radius: 1px;
	color: white;
	border-width: 0px;
	border-top-width: 1px;
	border-style: solid;
	background-color: rgba(0, 0, 0, .25);
	background-position: 6px 7px;
	background-size: 10px;
	background-repeat: no-repeat;
	text-shadow: 0px 1px 1px #514b47; }

article.post.detail-view .post-footer .review-summary .review-summary-content .details .the-good {
	margin-bottom: 20px; }

article.post.detail-view .post-footer .review-summary .review-summary-content .details .the-good ul li {
	background-image: url("../image/review-plus.svg");
	border-color: #597b2f }

article.post.detail-view .post-footer .review-summary .review-summary-content .details .the-bad ul li {
	background-image: url("../image/review-minus.svg");
	border-color: #8c4444 }


/* ------------------------------------------------------- */
/* 1024 -------------------------------------------------- */
/* ------------------------------------------------------- */

@media (max-width: 1242px) {

.in {
	max-width: 9999px; }

.ad-rail {
	display: none; }

.out-wrapper .in {
	padding: 0px; }

.out-wrapper {
	margin-top: 0px; }

.out-wrapper .content {
	width: 100%; }

footer#main-footer {
	margin-top: 0px; }

}

/* ------------------------------------------------------- */
/* 768 --------------------------------------------------- */
/* ------------------------------------------------------- */

@media (max-width: 1023px) {

.right-column {
	width: 300px; }

.box-ad {
	padding: 0px;
	box-shadow: none; }

#hero #hero-window {
	width: calc(100% - 301px);
	float: left; }

#hero #hero-window .hero-item {
	height: 350px;
	margin: 0px; }

#hero #hero-window .hero-item .hero-content {
	width: calc(50% - 19px); }

#hero ul#hero-links {
	position: absolute;
	width: 300px;
	height: 100%;
	right: 0px;
	float: right; }

#hero #hero-links li {
	position: relative;
	width: 100%;
	margin: 0px 0px 1px; }

#hero #hero-links li:last-child {
	width: 100%;
	margin-bottom: 0px; }

#hero #hero-links li a .selected-arrow {
	background-position: 25px center; }

#hero #hero-links li a.selected .selected-arrow {
	width: 12px;
	height: 100%;
	background: url("../image/hero-arrow-left.svg") center left / contain no-repeat;
	left: -12px;
	top: 0px; }

#hero #hero-links li a {
	display: block;
	position: absolute;
	padding: 11px 10px;
	width: calc(100% - 20px);
	height: calc(100% - 22px);
	max-height: 9999px;
	min-height: 1px; }

article.post .tags {
	width: 26px;
	margin-right: 10px; }

article.post .tags .tag {
	display: block;
	padding: 4px 6px 4px 6px;
	text-indent: 9999px;
	overflow: hidden; }

article.post.list-view .post-content {
	width: calc(100% - 250px); }

.right-column .article-list li {
	background: #e2dfde;
	position: static;
	overflow: hidden;
	margin-bottom: 1px; }

.right-column .article-list li:nth-child(even) {
	background: #efeceb; }

.right-column .article-list li:last-child {
	margin-bottom: 0px; }

.right-column .article-list li .arrow {
	display: none; }

.right-column .article-list li h3, .right-column .article-list li:last-child h3 {
	padding: 0px 0px 1px; }

.right-column .article-list li:hover h3 a {
	background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.66); }

.right-column .article-list li h3 a:hover {
	background: white; }

.right-column .article-list li .article-wrap {
	position: static;
	height: auto;
	width: auto;
	opacity: 1;
	margin: 0px;
	padding: 9px;
	border: none;
	background: none; }

.right-column .article-list li .article-wrap .widget-content {
	background: none; }

.right-column .article-list li .right-content {
	padding: 0px; }

.right-column .article-list li .article-pic {
	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, .15); }

.right-column .tags {
	display: none; }

}

/* ------------------------------------------------------- */
/* 640 --------------------------------------------------- */
/* ------------------------------------------------------- */


@media (max-width: 767px) {

.out-wrapper {
	padding: 0px; }

.ad.wide-ad {
	display: none; }

article.post.detail-view .article-pic h1.post-title {
	position: relative;
	box-shadow: none;
	margin-right: 48px;
	padding-right: 0px; }

.ad.mobile-content {
	display: block; }

article.post {
	background: none; }

article.post.detail-view .article-pic.empty {
	margin-top: 20px; }

article.post.detail-view .article-pic h1 {
	font-size: 26px;
	line-height: 28px; }

.mo-shell.slide {
	overflow-x: hidden;
	left: calc(100% - 100px); }

nav .close-menu {
	position: absolute;
	height: 100%;
	width: 50px;
	top: 0px;
	right: -50px; }

header#main-header .level-02 .in {
	border-bottom: 1px solid rgba(0, 0, 0, .25);
	padding: 0px 20px; }

header#main-header .level-01 {
	height: auto;
	max-height: 500px; }

header#main-header .level-01 a#logo-main {
	width: auto;
	float: none;
	height: 72px;
	background: url("../image/logo-orange.svg") no-repeat scroll bottom center / 150px transparent;
	margin-bottom: 20px; }

header#main-header .level-01 .header-headlines {
	width: 100%;
	float: none;
	display: none; }

header#main-header .level-01 .header-headlines .widget {
	float: none;
	max-width: 9999px;
	width: auto;
	text-align: center; }

header#main-header .level-02 { }

header#main-header .level-02 .level-mobile {
	width: auto;
	float: none; }

header#main-header .level-02 .level-mobile:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }

header#main-header .level-02 nav {
	margin-left: -100%;
	position: fixed;
	background: #333 url("../image/logo-orange.svg") 50% 25px / 50% no-repeat;
	padding-top: 25%;
	top: 0px;
	bottom: 0px;
	left: 0px;
	float: none;
	z-index: 10;
	height: 100%;
	width: calc(100% - 50px);
	border-bottom: 1px solid rgba(0, 0, 0, .25);
	transition: margin-left ease-in .2s; }

header#main-header .level-02 nav ul {
	border-top: 1px solid rgba(0, 0, 0, .15);
	height: auto;
	margin: 0px;
	padding: 0px; }

header#main-header .level-02 nav ul li {
	width: calc((100% - 7px) / 3);
	display: block;
	width: 100%;
	margin: 0px; }

header#main-header .level-02 nav ul li a {
	background: rgba(0, 0, 0, .15);
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .05);
	border-bottom: 1px solid rgba(0, 0, 0, .15);
	padding: 14px;
	margin: 0px; }

header#main-header .level-02 nav ul li a:hover {
	color: #F36C30;
	background: rgba(0, 0, 0, .1); }

header#main-header .level-02 #search {
	width: 50%;
	float: right; }

header#main-header .level-02 nav.show {
	box-shadow: inset -1px 0px 0px rgba(0, 0, 0, .25);
	margin-left: 0px; }

header#main-header #menu-button {
	display: block; }

.in {
	padding: 0px 10px; }

#hero #hero-window {
	width: calc(100% - 0px);
	margin-bottom: 1px;
	float: none; }

#hero #hero-window .hero-item {
	height: 300px; }

#hero #hero-window .hero-item .hero-content.pos-bot-right, #hero #hero-window .hero-item .hero-content.pos-bot-left, #hero #hero-window .hero-item .hero-content.pos-top-right, #hero #hero-window .hero-item .hero-content.pos-top-left {
	width: calc(100% - 18px);
	top: auto;
	bottom: 0px;
	color: white;
	border: none;
	padding-top: 20px;
	text-shadow: 1px 1px 0px black;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.75) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.75))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.75) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.75) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.75) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.75) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#bf000000',GradientType=0 ); /* IE6-9 */ }

#hero #hero-window .hero-item .hero-content .hero-content-in h1 {
	font-size: 20px;
	line-height: 1.25em;
	margin: 0px; }

#hero #hero-window .hero-item .hero-content .hero-content-in div.soft {
	display: none; }

#hero #hero-window .hero-item .hero-content {
	width: calc(100% - 19px);
	bottom: 0px; }

#hero ul#hero-links {
	position: static;
	width: 100%;
	float: none; }

#hero #hero-links li {
	position: static;
	float: left;
	margin-right: 1px; }

#hero #hero-links li a {
	height: 1px;
	padding: 4px 10px 10px;
	text-indent: -9999px;
	position: relative; }

#hero #hero-links li a .selected-arrow {
	background-position: center 12px; }

#hero #hero-links li a.selected .selected-arrow {
	background: url("../image/hero-arrow-up.svg") center center / contain no-repeat;
	width: 100%;
	height: 12px;
	top: -12px;
	left: 0px; }

.main-column {
	float: none;
	width: auto; }

.right-column {
	width: auto;
	float: none; }

article.post.list-view .tags {
	background: rgba(0, 0, 0, .5);
	padding: 2px 2px 0px;
	border-radius: 2px;
	margin-left: 5px;
	margin-top: 5px; }

article.post.list-view .post-image {
	width: auto;
	height: 168px;
	float: none;
	margin-bottom: 10px; }

article.post.list-view .post-content {
	width: auto;
	float: none; }

footer#main-footer ul.footer-headlines li {
	width: 100%;
	border-bottom: 1px solid rgba(0, 0, 0, .15); }

footer#main-footer ul.footer-headlines li:last-child {
	border: none; }

footer#main-footer ul.footer-headlines li a {
	display: block;
	text-align: left;
	padding: 8px 0px;
	border: none; }

footer#main-footer ul.footer-headlines li a:hover {
	background: transparent;
	color: black; }

footer#main-footer .footer-left, footer#main-footer .footer-right {
	float: none;
	width: auto;
	text-align: center; }

footer#main-footer .footer-right ul {
	text-align: center;
	padding-top: 8px;
	margin-top: 8px;
	border-top: 1px solid rgba(0, 0, 0, .25); }

article.post.detail-view .post-footer .review-summary .review-summary-content .details, article.post.detail-view .post-footer .review-summary .review-summary-content .score {
	float: none;
	width: auto;
	padding: 0px; }

article.post.detail-view .post-footer .review-summary .review-summary-content .score {
	width: 145px;
	margin: 30px auto 40px; }

}



/* ------------------------------------------------------- */
/* 320 --------------------------------------------------- */
/* ------------------------------------------------------- */


@media (max-width: 360px) {

header#main-header .level-02 .in {
	padding: 0px 10px; }

article.post.detail-view .article-pic h1 {
	font-size: 24px;
	line-height: 26px; }

.out-wrapper .content .content-top-pad {
	padding: 10px; }

footer#main-footer .footer-right ul li {
	display: block; }

}