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


/*------------------------------------------------------------------------- CORE 
*/
body {
	font-family: 				'lato-regular', sans-serif;
	text-align:					left;
	background:					#000;
	margin:						0;
	color:						#fff;
	overflow-x:					hidden;
}
a {
	color:						#fff;
	text-decoration:			none;
	transition:					0.2s linear color;
	font-weight:				600;
}
a:hover {
	text-shadow:				0 0 3px rgba(255,255,255,0.7);
}
h1,h2,h3,h4,h5,h6 {
	font-family: 				'lato-black', sans-serif;
    font-weight: 				normal;
    font-style: 				normal;	
} 
strong, b {
    font-weight: 				600;
    font-style: 				normal;	
	font-family: 				'lato-black', 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 {
		position:				absolute;
		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 BANNER
*/
div.header {
	background:					#17163e url(../images/header-gradient.jpg) center top repeat-x;
	height:						760px;
	transition: 				0.3s ease-out;
}
div.header div.container {
	font-size:					0;
	height: 					100%;
	vertical-align:				top;
	display:					table;
	background:					#17163e url(../images/header-bg.jpg) center top no-repeat;
	background-attachment:		fixed;
	max-width: 					1160px;
	transition: 				0.2s ease-in;
}
div.header div.column {
	display:					table-cell;
	box-sizing:					border-box;
	height:						100%;
}
div.header div.column:first-of-type {
	width:						calc(100% - 320px);
	padding:					0 10px 40px 20px;	
	vertical-align:				bottom;
}
div.header div.column:last-of-type {
	width:						320px;
	padding:					0 20px 0 10px;	
	vertical-align:				top;
}
div.header h1 {
	width:						240px;
	height:						240px;
	margin:						40px auto;
	text-indent:				-9999px;
}
div.header h1 a {
	background:					url(../images/sds-digital-archives.svg) center center no-repeat;
	background-size:			100%;
	display:					block;
	width:						100%;
	height:						100%;
}
div.header h2 {
	color:						#fff;
	font-size:					21px;
	padding:					20px;
	text-align:					center;
	line-height:				1.4em;
	transition:					0.3s ease-out;
}
div.header p {
	font-size:					17px;
	color:						#fff;
	padding:					0;
	line-height:				1.2em;
	text-align:					center;
}
div.header img {
	width:						150%;
	max-width:					450px;
}

@media (min-width: 961px)
{
	div.header div.container {
		padding: 				0 100px;
	}
}

@media (max-width: 580px)
{
	div.header {
		height: 				auto;
	}
	div.header div.column {
		width: 					100% !important;
		display:				block;
		padding: 				0 20px 30px !important;
	}
	div.header div.column:first-of-type {
		position:				absolute;
		z-index:				0;
	}
	div.header div.column:last-of-type {
		z-index:				2;
	}	
	div.header img {
		opacity: 				0.2;
		z-index:				-1;
		width: 					100%;
	}
	div.header h1 {
		margin: 				30px auto 10px;
	}
	div.header h2 {
		padding: 				0 20px 10px;
		font-size: 				18px;
		z-index:				2;
	}
	div.header p {
		font-size: 				15px;
	}
}

/*------------------------------------------------------------------------- SERVICES
*/
div.services {
	background:					#333 url(../images/services-bg.jpg) center center no-repeat;
	padding:					40px 0;
	font-size:					0;
	text-align:					center;
}
div.services h3 {
	padding:					0 40px;
	font-family:				'lato-regular';
	font-size:					18px;
	color:						#fff;
	max-width:					640px;
	width:						100%;
	box-sizing:					border-box;
	margin:						0 auto;
	line-height:				1.3em;
}
div.services div.row {
	width: 						100%;
	display: 					flex;
	padding: 					0 0 40px;
}

div.service {
	flex: 						1;
	display:					inline-block;
	box-sizing:					border-box;
	padding:					0;
	width: 						calc((100% / 3) - 20px);
	margin:						0 10px;
	text-align:					center;
	vertical-align:				top;
	font-size:					0;	
	background:					rgba(83,153,220,0.4);
}
div.service div {
	display:					block;
	position:					relative;
	box-sizing:					border-box;
	width:						100%;
	padding:					15px 20px;
}
div.service div.image {
	background:					rgba(83,153,220,0.4);
}
div.service h4 {
	padding:					10px 0;
	text-transform:				uppercase;
	font-size:					18px;
	font-weight:				600;
}
div.service p {
	line-height:				1.2em;
	padding:					0;
	font-size:					16px;
}
div.service div.image {
	padding:					20px 0 10px;
}
div.service img {
	width:						64px;
	display:					block;
	margin:						0 auto;
}

@media (min-width: 1160px)
{
	div.services {
		background-size:		cover;
	}	
}

@media (max-width: 840px)
{
	div.services {
		background-size:		auto 100%;
	}

}
@media (max-width: 720px)
{
	div.services div.row {
		display: 				block;
	}
	div.services {
		background-size:		auto 100%;
	}
	div.service {
		display:				table;
		width:					calc(100% - 40px);
		margin:					0 20px 15px;
		background: 			none;
	}
	div.service div {
		display:				table-cell;
		vertical-align:			top;
	}
	div.service div.image {
		width:					30%;
		background:				rgba(83,153,220,0.6);
	}
	div.service div.description {
		width: 					70%;
		background:				rgba(83,153,220,0.4);
		text-align:				left;
	}
}

@media (max-width: 480px)
{
	div.service div.image,
	div.service div.description	{
		width:					100%;
		text-align:				center;
		display:				block;
	}
}

/*------------------------------------------------------------------------- FOOTER
*/
div.footer {
	background:					#000;
	padding:					20px;
	text-align:					center;
}
div.footer p {
	font-size:					13px;
	color:						#fff;
	margin:						0 auto 5px;
	text-transform:				uppercase;
}