* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face{
	font-family: 'BG';
	src: url('j-light.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
}

@font-face{
	font-family: 'BG';
	src: url('j-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
}

@font-face{
	font-family: 'BG';
	src: url('j-black.woff2') format('woff2');
	font-weight: 800;
	font-style: normal;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-Italic.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}

@font-face{
	font-family: 'Fira Sans';
	src: url('FiraGO-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
}

/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
	line-height: 1.7em;
	color: rgb(147,161,161);
	font-size: 13px;
	background-color:rgb(8,22,23)
}

.pure-g [class*=pure-u], .story-content {
	font-family: 'Fira Sans';	
}

h1,
h2 {
	font-family: 'BG';
	weight:500;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
	color: rgb(226,185,57);
}

.pure-img-responsive {
	max-width: 100%;
	height: auto;
}

/*
 * -- LAYOUT STYLES --
 * These are some useful classes which I will need
 */
.l-box {
	padding: 1em;
}

.l-box-lrg {
	padding: 2em;
	border-bottom: 1px solid rgba(226,185,57,0.75);
}

.is-center {
	text-align: center;
}

.is-right {
	text-align: right;
}



/*
 * -- PURE FORM STYLES --
 * Style the form inputs and labels
 */
.pure-form label {
	margin: 1em 0 0;
	font-weight: bold;
	font-size: 100%;
}

.pure-form input[type] {
	border: none;
	background-color: rgba(8,22,23,0.5);
	color: rgb(147,161,161);
	box-shadow: none;
	font-size: 100%;
	width: 100%;
	margin-bottom: 1em;
}

.pure-form input[type]::placeholder {
	color: rgba(147,161,161,0.5);
	font-style: italic;
}

/*
 * -- PURE BUTTON STYLES --
 * I want my pure-button elements to look a little different
 */
.pure-button {
	background-color: rgb(226,185,57);
	color: rgb(253,246,227);
	padding: 0.5em 2em;
	border-radius: 5px;
}

a.pure-button-primary {
	background: white;
	color: #1f8dd6;
	border-radius: 5px;
	font-size: 120%;
}


/*
 * -- MENU STYLES --
 * I want to customize how my .pure-menu looks at the top of the page
 */
 
.header {
}

.home-menu {
	padding: 0.5em;
	text-align: center;
	font-family: 'BG';
	text-transform: uppercase;
	font-weight: 200;
	opacity: 0.5;
	transition: all ease 1s;
}
.home-menu.down {
	box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
	background-color: rgb(48,50,30);
	opacity: 1;
}
.pure-menu.pure-menu-fixed {
	/* Fixed menus normally have a border at the bottom. */
	border-bottom: none;
	/* I need a higher z-index here because of the scroll-over effect. */
	z-index: 4;
}

.home-menu .pure-menu-heading {
	color: rgb(253,246,227);
	font-weight: 800;
	letter-spacing: 0.05em;
}

.home-menu .pure-menu-selected a {
	color: rgb(253,246,227);
	font-weight: 400;
}

.home-menu a {
	color: rgb(253,246,227);
}
.home-menu li a:hover,
.home-menu li a:focus {
	background: none;
	border: none;
	color: #AECFE5;
}

/*
 * -- SPLASH STYLES --
 * This is the blue top section that appears on the page.
 */

.splash-container {
	z-index: 1;
	overflow: hidden;
	/* The following styles are required for the "scroll-over" effect */
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	position: fixed !important;
	background: url(cxo.svg) center center rgb(0,0,0);
	background-size: 50%;
	background-repeat: no-repeat;
}

.splash {
	/* absolute center .splash within .splash-container */
	width: 80vw;
	height: 20vh;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	text-align: center;
	text-transform: uppercase;
	font-family: 'BG';
}
.splash * {transition: all ease 1s;}

/* This is the main heading that appears on the blue section */
.splash-head:not(:empty) {
	font-size: 20px;
	font-weight: 800;
	color: rgb(253,246,227);
	padding: 1em 1.6em;
	background-color:#f1b94590;
	text-shadow: 0px 0px 6px #000000;
	border-radius: 5px;
	line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
	color: rgb(253,246,227);
	letter-spacing: 0.05em;
	opacity: 0.8;
	font-weight: 500;
	text-shadow: 0px 0px 4px #000000;
}

/*
 * -- CONTENT STYLES --
 * This represents the content area (everything below the blue section)
 */
.content-wrapper {
	/* These styles are required for the "scroll-over" effect */
	position: absolute;
	top: 99.5vh;
	width: 100%;
	min-height: 12%;
	z-index: 2;
}

.scroll-prompt {
	position: absolute;
	bottom: 10.5vh;
	left: 50%;
	z-index: 100;
	transition: 1s opacity ease-out;
}

.scroll-prompt .scroll-prompt-shape {
	position: relative;
	animation: slidedown 2.25s infinite;
}

.scroll-prompt .scroll-prompt-shape:before,
.scroll-prompt .scroll-prompt-shape:after {
	content: "";
	display: block;
	position: absolute;
	width: 2em;
	height: .45em;
	top: 0;
	left: 0;
	background: rgb(149,112,29);
	border-radius: 0 .25em .25em 0;
	transform-origin: bottom left;
}

.scroll-prompt .scroll-prompt-shape:before {
	transform: scaleX(-1) rotate(-45deg);
}
.scroll-prompt .scroll-prompt-shape:after {
	transform: rotate(-45deg);
}

@keyframes slidedown {
	0% {opacity: 0;} 
	75% {opacity: 0.25;transform: translate(0, 5vh);}
	100% {opacity: 0;transform: translate(0, 5vh);}
}

/* We want to give the content area some more padding */
.content,.ribbon {
	padding: 1em 1em 3em;
	margin:0 auto;
	max-width: 1000px;
}

.content:not(.story-content):nth-of-type(even) {
	background-color: rgb(0,43,54);	
}

.content:not(.story-content):nth-of-type(odd) {
	background-color: rgb(7,54,66);
}

.content::last-of-type {padding-bottom: 6em;}

/* This is the class used for the main content headers (<h2>) */
.content-head {
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 2em 0 1em;
}

/* This is a modifier class used when the content-head is inside a ribbon */
.content-head-ribbon {
	color: white;
}

/* This is the class used for the content sub-headers (<h3>) */
.content-subhead {
	color: rgb(227,199,113);
}

/* This is the class used for the dark-background areas. */
.ribbon {
	background-color: rgba(8,22,23,0.75);
}

/* This is the class used for the footer */
.footer {
	color: #f1b945ff;
	position: fixed;
	bottom: 0;
	width: 100%;
	font-family: 'BG';
	text-transform: uppercase;
	font-weight: 200;
	opacity:0.5;
	transition: all ease 1s;
}
.footer.down {
	background: rgba(8,22,23,0.8);
	opacity:1;
} 

.content,.ribbon {
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
}

.fragments {
	padding: 0;
	position:relative;
	overflow:hidden;
	line-height: 0.5;
}


.fragments .frag {
	background-size:50% auto;
	background-repeat: repeat;
	background-position: center center;
}

.fragments .pure-g div {
	overflow: hidden;
	position: relative;	
}

.fragments aside {
	position: absolute;
	bottom: 0;
	right: 0;
	color: rgb(253,246,227);
	letter-spacing: 0.05em;
	text-shadow: 0px 0px 6px black;
	width: 100%;
	height: 100%;
	font-size: 80%;
	text-align: center;
	font-family: 'BG';
	text-transform: uppercase;
}

.fragments aside div {
	position: relative;
	top: 50%;
	transform: translateY(-50%);	
	background-color:rgba(226,185,57,0.2);
	transition: all 1s ease;
	margin:0 6.25%;
	border-radius: 0.5em;
	line-height: 1.5em;
}

.fragments aside:hover > div {
	background-color:rgba(226,185,57,0.65);
}

.fragments img {
	background-repeat: repeat;
	background-size: 100% 100%;
	background-position: center center;	
	background-image:var(--n);
	opacity:1;
	z-index: 10;
}

.universe {
	background-image: url(/site/img/wp-uol.png);
}

.newsletter {
	background-image: url(/site/img/wp-ca.png);
}

/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 48em) {

	/* We increase the body font size */
	body {
		font-size: 16px;
	}

	/* We can align the menu header to the left, but float the
	menu items to the right. */
	.home-menu {
		text-align: left;
	}
	.home-menu {
	}
	.home-menu ul {
		float: right;
	}

	/* We increase the height of the splash-container */
/*	.splash-container {
		height: 500px;
	}*/

	/* We decrease the width of the .splash, since we have more width
	to work with */
	.splash {
		width: 50vw;
		height: 20vh;
	}

	.splash-head:not(:empty) {
		font-size: 250%;
	}


	/* We remove the border-separator assigned to .l-box-lrg */
	.l-box-lrg {
		border: none;
	}

}

@media (max-width: 48em) {


	/* We decrease the width of the .splash, since we have more width
	to work with */
	.splash {
		width: 80vw;
		height: 17.5vh;
	}

	.splash-head:not(:empty) {
		font-size: 225%;
	}

}
/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large devices, we want to over-ride some
 * of the mobile and tablet styles.
 */
@media (min-width: 78em) {
	/* We increase the header font size even more */
	.splash-head:not(:empty) {
		font-size: 300%;
	}
}