@charset "utf-8";
@import url("reset.css");
/*------------------------------------------------------------------------- FONTS 
*/
@font-face {
    font-family: 'rambla-regular';
    src: url('font/rambla-regular.woff') format('woff');
    font-weight: 				normal;
    font-style: 				normal;
}
@font-face {
    font-family: 'rambla-bold';
    src: url('font/rambla-bold.woff') format('woff');
    font-weight: 				normal;
    font-style: 				normal;
}


/*------------------------------------------------------------------------- CORE 
*/
body {
	font-family: 				'rambla-regular', sans-serif;
	text-align:					left;
	background:					#000;
	margin:						0;
	color:						#fff;
	overflow-x:					hidden;
}
a {
	color:						#6c7788;
	text-decoration:			none;
	transition:					0.2s linear color;
	font-weight:				600;
	border-bottom:				1px solid rgba(108,119,136,0.1);
	transition:					0.2s linear;
}
a:hover {
	color:						#000;
	border-color:				rgba(0,0,0,0.4);
}
h1,h2,h3,h4,h5,h6 {
	font-family: 				'rambla-bold', sans-serif;
    font-weight: 				normal;
    font-style: 				normal;	
} 
strong, b {
    font-weight: 				normal;
    font-style: 				normal;	
	font-family: 				'rambla-bold', sans-serif;	
}
div#page {
	width:						100%;
	height:						100%;
	position:					relative;
	min-width:					320px;
	overflow:					hidden;
	margin:						0 auto;
}

@media screen and (max-width: 320px)
{
	body {
		overflow-x:				hidden;
	}
	div#page {
		width:					320px;	
		left: 					50%;
		margin-left: 			-160px; /* Negative margin half of the element width */
	}
}
.xdebug-error, .xe-warning {
	font-size:					16px;
	color:						#000;
}

/*------------------------------------------------------------------------- CSS STEPPED ANIMATIONS
*/
.animated:nth-child(n+1) {
	animation-delay: 			0s;
}
.animated:nth-child(n+2) {
	animation-delay: 			0.125s;
}
.animated:nth-child(n+3) {
	animation-delay: 			0.25s;
}
.animated:nth-child(n+4) {
	animation-delay: 			0.375s;
}
.animated:nth-child(n+5) {
	animation-delay: 			0.5s;
}
.animated:nth-child(n+6) {
	animation-delay: 			0.625s;
}
.animated:nth-child(n+7) {
	animation-delay: 			0.75s;
}
.animated:nth-child(n+8) {
	animation-delay: 			0.875s;
}
.animated {
	animation-duration: 		1.5s;
}
/*------------------------------------------------------------------------- DEFAULT LAYOUT BEHAVIOURS
*/
div.wrapper {
	position:					relative;
	width:						100%;
	box-sizing:					border-box;
	background: 				#fff;
}
div.container {
	width:						100%;
	max-width:					960px;
	margin:						0 auto;
	box-sizing:					border-box;
	position:					relative;
}
/*------------------------------------------------------------------------- HEADER
*/
div.header {
	background:					#000;
	height:						480px;
}
div.header div.container {
	max-width:					100%;
	width:						100%;
	position:					fixed;
}
div.header div.row {
	position:					absolute;
	font-size:					0;
	white-space: 				nowrap;
	text-align:					center;
	left: 						50%;
    transform: 					translate(-50%,0);
	width: 						2160px;
}
div.header div.row:last-of-type {
	top: 						240px;
}
div.box {
	display:					inline-block;
	width:						240px;
	height:						240px;
	position:					relative;
	margin:						0;
	padding:					0;
	box-sizing:					border-box;
	vertical-align: 			top;
	white-space: 				normal;
	background:                 #000;
}
div.box img {
	display:					block;
	width:						100%;
	height:						100%;
}
div.header h1 {
	width:						80%;
	height:						auto;
	margin:						auto;
	text-indent:				-9999px;
	transition:					0.2s ease-in;
	position:					absolute;
	left:						0;
	right:						0;
	top:						0;
	bottom:						0;
}
div.header h1 a {
	background:					url(../images/atlas-publications.svg) center center no-repeat;
	background-size:			100%;
	display:					block;
	width:						100%;
	height:						100%;
}
div.header h2 {
	color:						#fff;
	font-size:					28px;
	text-align:					center;
	text-transform:				uppercase;
	font-family:				'rambla-regular';
	padding:					0;
	position:					absolute;
	left:						0;
	right:						0;
	top:						0;
	bottom:						0;
	margin: 					auto;
	height: 					140px;
	word-spacing:				9999px;
}
div.header h2 strong {
	font-family:				'rambla-bold';
}

@media (max-width: 1200px)
{
	div.box {
		display:				inline-block;
		width:					192px;
		height:					192px;
	}
	div.header {
		height: 				384px;
	}
	div.header div.row:last-of-type {
		top: 					192px;
	}
}

@media (max-width: 960px)
{
	div.box {
		display:				inline-block;
		width:					128px;
		height:					128px;
	}	
	div.header {
		height: 				256px;
	}	
	div.header div.row:last-of-type {
		top: 					128px;
	}
	div.header h2 {
		font-size:				16px;
		height: 				75px;
	}
}

@media (max-width: 650px)
{
	div.header div.row {
		left: 					-256px;
		transform: 				none;
		width:					100%;
	}
}

/*------------------------------------------------------------------------- CONTENT
*/
div.content {
	background:					#efefef url(../images/content-bg.jpg) left 40vw top -50px no-repeat;
	color:						#000;
	min-height:					calc(100vh - 480px);
}
div.content div.container {
	font-size:					0;
}
div.content div.column {
	display:					inline-block;
	width:						50%;
	position:					relative;
	box-sizing:					border-box;
	vertical-align: 			top;
	padding: 					60px 40px 20px;	
	min-width:					380px;
}
div.content h3 {
	font-size:					31px;
	position:					relative;
	margin:						0 0 60px;
	color:						#444;
	line-height:				1.1em;
}
div.content h3::after {
	content:					'';
	display:					block;
	width:						30%;
	height:						30px;
	max-width:					150px;
	border-bottom:				5px solid #444;
}
div.content p {
	line-height:				1.2em;
	color:						#000;
	font-size:					16px;
	margin:						0 0 20px;	
}
div.content div.panel {
	background:					#6c7788;
	padding:					30px 40px;
	width:						calc(100% + 40px);
	box-sizing:					border-box;
	margin:						60px 0 40px -40px;
	position:					relative;
}
div.content div.panel::before {
	content:					'';
	position:					absolute;
	right: 						100%;
	top:						0;
	height:						100%;
	box-sizing:					border-box;
	width:						calc((100vw - 960px) / 2);
	background:					#6c7788;
}
div.content div.panel p {
	color:						#fff;
	margin:						0;
}
div.content div.panel p a {
	color:						#fff;
	font-family:				'rambla-bold';
	border-bottom:				1px solid rgba(255,255,255,0.1);
}
div.content div.panel p a:hover {
	border-color:				rgba(255,255,255,0.5);
}

@media (max-width: 480px)
{
	div.content div.column {
		width: 					100%;
		min-width: 				100%;
	}
	div.content h3 {
		font-size:				24px;	
	}
}