@charset "utf-8";
/* Reset default styles */
body {background-size: cover !important; background-attachment: fixed !important; background-position: right top !important}
#header {padding-right: 60px}
#nav-site, #breadcrumbs, #nav-section, #asides {display: none !important}
#page-container {padding: 0}
#content-container, .article, #meta-wrapper {width: 100%}
#page-container>.max-width, #content .section {max-width: none}
#page-container .max-width, #content-container, .article .box-sizing, .article .box-sizing .border {background: none}
.article .box-sizing .border {padding: 0}
#content * {box-sizing: border-box}
#meta-wrapper {z-index: 1; position: relative;}
#footer {z-index: 2 !important; padding-top: 100px; background: linear-gradient(to bottom, #fff 100px, #4c4d4f 100px) !important;}
/* End reset default styles */

/* Scroll reveal effect */
.reveal {background-repeat: no-repeat; background-position: center top; background-size: cover; width: 100%; position: relative;/* opacity: 0; transition: opacity 0.5s 0.5s;*/ overflow: hidden; /*min-height: 550px;*/}
.reveal > .revealInner {position: relative; transform: translate(0, 30%); opacity: 0; transition: opacity 0.5s 0.5s, transform 0.5s ease-out 0.5s; max-width: 82em; margin: 0 auto; padding: 1em 60px 8em 1em; width: 100%; overflow: hidden;}
.reveal.inView > .revealInner {transform: none; opacity: 1;}
.reveal.sticky > .revealInner {position: fixed; top: 0; left: 0; right: 0; transition: none}
.reveal.fadeOut > .revealInner {filter: blur(15px);}
.reveal .overlay {position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: none}
/*.slideShow.sticky > .slides {position: fixed; top: 20%;}*/
/* End Scroll reveal effect */

iframe {border: none; }
h1 {color: #fff; text-align: right;}
h1 span.title {width: 400px; display: inline-block; text-align: left; margin-right: 50px; max-width: 100%}
h1 img {width: 100%}
h1 span.subText {font-size: 15px; display: inline-block}
h1 span.issue {font-weight: normal}
.reveal h2 {font-size: 30px; text-shadow: 1px 1px 5px rgba(0,0,0,0.8);}
.reveal img {max-width: 100%}
.row {overflow: hidden}
.col2 {float: left; width: 50%; padding-right: 20px}
.col2:nth-child(even) {float: left; padding-left: 20px; padding-right: 0}
.row.col2-35-65 .col2, .row.col2-65-35 .col2:nth-child(even) {width: 35%}
.row.col2-65-35 .col2, .row.col2-35-65 .col2:nth-child(even) {width: 65%}
.slideShow, .slides {z-index: 0}
.slideShow .slide {padding: 0.5rem 1rem 0; background: rgba(0,0,0,0.2)}
.slideShow .slide p {margin-top: 0; margin-bottom: 0.5rem}
.slideShowControl {background: rgba(0,0,0,0.2); padding: 0.5rem 0 0}
.slideShowControl span {position: absolute; left: -9999em}
.activateSlide a {width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.6)}
.activateSlide .active a {background: rgba(255,255,255,1)}
#article .toggles a {color: rgba(255,255,255,1); text-shadow: 0 0 3px rgba(0,0,0,0.6)}
#featuredMenu {position: fixed; right: 0; top: 0; bottom:0; width: 50px; background: rgba(0,0,0,0.6); z-index: 10000}
#featuredMenu ul, #featuredMenu li {margin: 0; padding: 0; list-style: none}
#featuredMenu ul {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; width: 100%}
#featuredMenu li {margin: 15px 0; position: relative; height: 20px; display: block}
#featuredMenu a {display: inline-block; width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,0.6); box-shadow: 0 0 3px rgba(0,0,0,0.6); transition: background 0.2s, height 0.2s, width 0.2s}
#featuredMenu a.nav {background: none; box-shadow: none; text-shadow: 0 0 3px rgba(0,0,0,0.6); width: 20px; height: 20px}
#featuredMenu a.nav i {font-size: 25px; color: rgba(255,255,255,0.6); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
#featuredMenu a.nav:hover {background: none}
#featuredMenu a.nav:hover i {color: rgba(255,255,255,1)}
#featuredMenu a:hover {background: rgba(255,255,255,1)}
#featuredMenu a.active {background: #f5f0a1; width: 20px; height: 20px}
#featuredMenu a span {width: 350px; z-index: -1; color: #f5f0a1; padding: 1px 12px 3px 12px; background: #000; top: 50%; transform: translateY(-50%); position: absolute; right: 75px; display: inline-block; /*white-space: nowrap;*/ font-size: 85%; opacity: 0; transition: opacity 0.2s, right 0.2s, visibility 0.2s; text-align: right; visibility: hidden;}
#featuredMenu a.active span {}
#featuredMenu a:hover.active span {}
#featuredMenu a:hover span {right: 50px; opacity: 1; visibility: visible;}
#intro h2 {margin-top: 1rem}
#intro .col2:nth-child(odd) {text-align: right}
#intro .download a {display: inline-block; background: rgba(198,132,75,0.7); color: #fff !important; box-shadow: 1px 1px 20px rgba(0,0,0,0.3); position: relative}
#intro .download a:hover {background: rgba(198,132,75,1); text-decoration: none !important}
#intro .download a i {font-size: 110%; margin-right: 5px}
#intro .download a img, #intro .download a span {display: block}
#intro .download a span {padding: 0.5rem 1rem; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,0.5)}
#intro .download a span.meta {font-size: 80%; padding: 0.25em 0 0}
#issueMenu ul li:nth-child(1), #issueMenu ul li:nth-child(2), #issueMenu ul li:last-child {display: none}
.vid-container {
	position: relative;
	padding-bottom: 52%;
	padding-top: 0px; 
	height: 0; 
	clear: both;
	background: rgba(0,0,0,0.2);
	margin: 1.5em
}

.vid-container iframe,
.vid-container object,
.vid-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1rem;
}
@media screen and (max-width: 650px) {
	.col2 {width: 100% !important; padding: 0 !important;}
}