@charset "utf-8";
/*------------------------------------------------------------------------- FONTS 
*/
@font-face {
    font-family: 'lato';
    src: url('font/lato-regular.woff') format('woff');
    font-weight: 			normal;
    font-style: 			normal;
}
@font-face {
    font-family: 'lato-italic';
    src: url('font/lato-italic.woff') format('woff');
    font-weight: 			normal;
    font-style: 			normal;
}
@font-face {
    font-family: 'lato-light';
    src: url('font/lato-light.woff') format('woff');
    font-weight: 			normal;
    font-style: 			normal;
}
@font-face {
    font-family: 'lato-bold';
    src: url('font/lato-bold.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;
}
/*------------------------------------------------------------------------- RESET 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 				0;
	padding: 				0;
	border: 				0;
	font-size: 				100%;
	font: 					inherit;
	vertical-align: 		baseline;
	outline: 				0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: 				block;
}
body {
	line-height: 			1;
}
ol, ul {
	list-style: 			none;
}
blockquote, q {
	quotes: 				none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: 					'';
	content: 				none;
}
table {
	border-collapse: 		collapse;
	border-spacing: 		0;
}
:focus {
	outline: 				0;
}
*,
*::before,
*::after {
	box-sizing: 			border-box;
}
.xdebug-error, .xe-warning {
	font-size:				16px;
	color:					#000;
}

/*------------------------------------------------------------------------- CORE STYLES
*/
body {
	font-family: 			'lato', sans-serif;
	text-align:				left;
	background: 			#dbeaef;
	margin:					0;
	overflow-x:				hidden;
}
#page {
	width:					100%;
	height:					100%;
	position:				relative;
	min-width:				320px;
	margin:					0 auto;
}

a {
	text-decoration:		none;
	color:					#000;
	transition:				0.1s linear;
	display:				inline-block;
	position:				relative;
}
a::after {
	content:				'';
	width: 					1%;
	height: 				1px;
	display: 				block;
	position: 				absolute;
	left: 					0;
	right: 					0;
	bottom: 				-3px;
	border-bottom:			1px dotted #63a4c3;
	transition:				0.3s linear;
}
a:hover {
	color:					#63a4c3;
}
a:hover::after {
	width: 					100%;
}

h1,h2,h3  {
	font-family: 			'lato-light', sans-serif;	
    font-weight: 			normal;
    font-style:				normal;	
}
h4,h5,h6  {
	font-family: 			'lato-bold', sans-serif;	
    font-weight: 			normal;
    font-style:				normal;	
}
h3 {
	font-size:				30px;
	margin-bottom:			40px;
}	
strong, b {
    font-family: 			'lato-bold', sans-serif;
    font-weight: 			normal;
    font-style:				normal;	
}
em, i {
    font-family: 			'lato-italic', sans-serif;
    font-weight: 			normal;
    font-style:				normal;	
}
sup {
	vertical-align: 		super;
	font-size:				70%;
}
p {
	line-height:			1.5em;
	font-size:				16px;
	margin:					0 0 20px;
	position:				relative;
}
ul {
	margin:					10px 0 20px 15px;
	list-style:				disc;
}
ul li {
	margin:					0 0 10px;
	line-height:			1.3em;
	font-size:				16px;
}
ol {
	margin:					10px 0 20px 15px;
	list-style:				decimal;
}
ol li {
	padding:				0 0 0 22px;
	margin:					0 0 10px;
	line-height:			1.3em;
	font-size:				16px;
}
ul.tick-list {
	list-style:				none;
	margin:					10px 0 20px;
}
ul.tick-list li {
	background:				url(../images/tick.svg) left 1px / 20px 20px no-repeat;
	padding:				0 0 0 35px;
	min-height:				30px;
}
.tab-right {
	width: 					0;
	height: 				0;
	border-width: 			0 240px 240px 0;
	border-color: 			transparent rgba(0,0,0,0.8) transparent transparent;
	border-style: 			solid;
	overflow:				visible;
	position:				relative;
	display:				block;
}
.tab-right::after {
	content:				'';
	display:				block;
	position:				absolute;
	left:					-10px;
	top:					10px;
	width: 					0;
	height: 				0;
	border-width: 			0 240px 240px 0;
	border-color: 			transparent rgba(0,0,0,0.2) transparent transparent;
	border-style: 			solid;	
}
.tab-right span {
	color:					#fff;
	font-size:				16px;
	font-family:			'lato-light';
	text-align:				center;
	width: 					240px;
	transform:				rotate(45deg);
	display:				block;
    left: 					50px;
    position: 				absolute;
    top: 					70px;
    width: 					200px;
	z-index:				2;
}

@media screen and (max-width: 320px)
{
	#page {
		width:				320px;	
		left: 				50%;
		margin-left: 		-160px;
	}
}


/*------------------------------------------------------------------------- DEFAULT LAYOUT BEHAVIOURS
*/
.wrapper {
	position:				relative;
	width:					100%;
	background: 			transparent;
}
.container {
	width:					100%;
	max-width:				960px;
	margin:					0 auto;
	position:				relative;	
}
.row {
	display:				flex;
	flex-flow: 				row wrap;
	justify-content:		space-between;
	align-items: 			stretch;
	position:				relative;
	width:					100%;
	padding:				0 0 20px;
}
.row__no-padding {
	padding:				0!important;
}
.column {
	flex:					1;
	padding:				0;
}

@media (max-width: 979px)
{
	.row {
		padding:			0 20px 20px 20px;
	}
}
@media (max-width: 767px)
{
	.column {
		flex: 				auto;
	}
	.column:first-of-type {
		padding:			0 0 20px;
	}
	.column:last-of-type {
		padding:			0;
	}
	.row {
		padding:			0 20px;
	}
}

/*------------------------------------------------------------------------- HEADER SECTION
*/
header {
	position:				fixed;
	top:					0;
	z-index:				100;
	width:					100%;
	transition: 			0.2s linear;
	height:					70px;
	overflow: 				visible;
}
header h1 {
	width:					292px;
	height: 				137px;
	background: 			url(../images/sds-themis-logo.svg) left top / 100% no-repeat;
	text-indent: 			-999px;
	transition: 			0.2s linear;
	position: 				relative;
	margin: 				0 20px;
	top:					50px;
}
header h1 a {
	display: 				block;
	width: 					100%;
	height: 				100%;
}
header h2.tab-right {
	position:				absolute;
	right: 					calc(0px - ((100vw - 960px) / 2));
	top:					0;
}
header h2.tab-right::after {
	border-color: 			transparent rgba(0,0,0,0.1) transparent transparent;
}
header h2.tab-right span {
	font-size: 				18px;
	left: 					55px;
    top: 					60px;	
	z-index:				2;
	display: 				block;
}

#page.fixed header {
	background:				rgba(255,255,255,0.95);
	box-shadow:				0 1px 10px 0 rgba(0,0,0,0.2);
	padding: 				10px 0;
}
#page.fixed header h1 {
	width: 					106px;
	height: 				50px;
	top: 					auto;
}
#page.fixed header h2 {
	position:				absolute;
	right: 					20px;
	top: 					15px;
}

@media (max-width: 960px)
{
	header h2.tab-right {
		right: 				0;
	}
}

@media (max-width: 640px)
{
	#page.fixed header h2 {
		width: 				50%; 
		top: 				10px;
		font-size: 			14px;
		text-align: 		right;
	}
}

@media (max-width: 560px)
{
	header h2.tab-right,
	header h2.tab-right::after {
		border-width: 		0 160px 160px 0;
	}
	header h2.tab-right span {
		font-size: 			13px;
		left: 				55px;
		top: 				29px;
		width: 				106px;
	}
	header h1 { 
		width: 				200px;
		height: 			94px;
		top: 				30px;
	}
}

@media (max-width: 430px)
{
	#page.fixed header h2 {
		top: 				5px;
	}
}

/*------------------------------------------------------------------------- HEADER BANNER
*/
#bg-banner {
	position:				sticky;
	z-index:				-1;
	top:					0;
	width:					100%;
	height: 				600px;
	background: 			url(../images/banner-bg.jpg) center center / 100% auto no-repeat;
	overflow:				hidden;
}
#bg-banner::after {
	content:'				';
	display: 				block;
	position:				absolute;
	z-index:				10;
	top:					0;
	width:					100%;
	height: 				600px;
	background: 			url(../images/themis.png) center center / auto 800px no-repeat;
	transition: 			0.2s linear;
}
#bg-banner::before {
	content:				'';
	display: 				block;
	position:				absolute;
	z-index:				10;
	top:					0;
	width:					100%;
	height: 				600px;
	background: 			url(../images/section-bg.png) center right / cover no-repeat;
	transition: 			0.2s linear;	
}
.photobox-slide {
	transition:				7.5s ease-out opacity;
	width:					100%;
	height:					100%;
	position:				absolute;
	left:					0;
	top:					0;
	overflow:				hidden;
	opacity:				0;
	z-index:				1;
}
.photobox-slide.active {
	z-index:				9;
	opacity:				1;	
}
.photobox-slide img {
	position:				absolute;
	width:					150%;
	display:				block;
	left: 					50%;
    top: 					50%;
    transform: 				translate(-60%,-50%);	
	filter:					blur(10px);
	margin:					auto;
	transition:				7.5s ease-out width, 7.5s ease-out height, 1s linear filter, 5s linear transform;
}
.photobox-slide.active img {
	filter:					blur(0);
	width:					100%;
    transform: 				translate(-50%,-50%);	
	
}

@media (max-width: 1020px)
{
	#bg-banner {
		background-size: 	auto 100%;
	}
	.bg-banner-slide img {
		height:				100%;
		width: 				auto;
	}
}
@media (max-width: 880px)
{
	#bg-banner::after {
		background-size: 	auto 100%;
	}
}
@media (max-width: 640px)
{
	#bg-banner::after {
		background-size: 	 auto 80%;
		background-position: center bottom;
	}	
}
@media (max-width: 640px)
{
	#bg-banner::after {
		background-position: 80% bottom;
	}
}

/*------------------------------------------------------------------------- INTRODUCTION SECTION
*/
#introduction {
	padding:				0;
	background: 			linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(238,238,238,0) 60%), url(../images/section-bg.png) right top / auto auto no-repeat;
	position: 				relative;
}
#introduction::before {
	content:				'';
	position:				absolute;
	left:					0;
	top:					0;
	width:					100%;
	height: 				100%;
	background: 			#dbeaef;
	z-index:				-1;
}
#introduction .row:first-of-type {
	justify-content:		center;
	padding:				0 20px;
}
#introduction h3 {
	text-align:				center;
	margin:					0 auto 50px;
    width: 					100%;	
}
#introduction p {
	text-align: 			center;
}
#introduction .main-image-container {
	min-height:				600px;
	position:				relative;
	overflow: 				visible;
	width:					100vw;
	margin:					-340px auto 20px;	
	z-index:				2;
	display:				flex;
	align-items:			center;
}
#introduction img {
	display:				block;
	width: 					1080px;
	height:					auto;
}
#key-features {
	display:				flex;
	flex-flow:				row wrap;
	justify-content:		center;
	margin: 				20px auto 30px;
}
#key-features .key-feature {
	flex:					0 1 180px;
	margin:					0 20px 20px;
}
#key-features .key-feature img {
	display:				block;
	margin:					0 auto 20px;
	width:					100%;
	max-width:				100px;
}
#key-features .key-feature h5 {
	font-family:			'lato-bold';
	text-align:				center;
	font-size:				15px;
}


@media (max-width: 1100px)
{
	#introduction img {
		margin-left: 		calc( (100vw - 1030px) / 2);
	}
}
@media (min-width: 1280px)
{
	#introduction {
		background-size: 	cover;
	}
}
@media (max-width: 680px)
{
	#introduction h3 br {
		display:			none;
	}
	#introduction img {
		width:				calc(100vw + 280px);
		margin-left: 		-140px;	
	}
}
@media (max-width: 540px)
{	 
	#introduction .main-image-container {
		margin-bottom: 		-40px;
	}
}

/*------------------------------------------------------------------------- FEATURES AND BENEFITS
*/

#benefits {
	background: 			#eee;
	padding:				40px 0 0;
}
#benefits .row:nth-of-type(4) {
	margin-bottom: 			10px;
}
#benefits .row:nth-of-type(5) {
	background: 			rgba(255,255,255,0.25);
	padding:				5px 30px;
	border-top: 			1px solid #ccc;
}
#benefits h3 {
	margin:					0 auto 50px;
	text-align:				center;
}
#key-benefits {
	display:				flex;
	flex-flow:				row wrap;
	margin:					0 auto  30px;
}
#key-benefits .key-benefit {
	flex:					1;
	width:					140px;
	margin:					0 10px 20px;
}
#key-benefits .key-benefit img {
	display:				block;
	margin:					0 auto 10px;
}
#key-benefits .key-benefit h5 {
	font-family:			'lato-bold';
	text-align:				center;
	font-size:				15px;
}
#benefits ul {
	margin:					0;
}
#benefits ul li {
	background:				url(../images/tick-bg.svg) left top / 30px auto no-repeat;
	min-height:				35px;
	padding: 				3px 0 0 45px;
	font-family: 			'lato-bold';
}

#benefits ul.doc-list li {
	background:				url(../images/icons/document.svg) left top / 24px auto no-repeat;
	min-height:				30px;
	padding: 				3px 0 0 45px;
	font-family: 			'lato-bold';
}
#benefits ul.doc-list {
	list-style-type:		none;
	margin-top:				15px;
}
#benefits .column:first-of-type {
	padding:				0 40px 0 0;
}
#benefits .column:last-of-type {
	padding:				0 0 0 40px;
}
#benefits p {
	width:					100%;
	max-width:				640px;
	margin:					30px auto 0;
	text-align:				center;
}

@media (max-width: 767px) 
{
	#benefits .column {
		padding: 			0 !important;
	}
	#benefits .row {
		padding: 			0 40px !important;
	}
}
/*------------------------------------------------------------------------- SYSTEM OPTIONS 
*/
#system-options {
	background: 			linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(244,244,244,1) 80%, rgba(238,238,238,1) 100%);
	padding:				40px 0;
}
#system-options h3 {
	margin:					0 auto 50px;
	text-align:				center;
}
#system-options p, #system-options ul.centred-list {
	margin:					0 auto;
	text-align:				center;
}
#system-options ul.centred-list {
	list-style-type: 		none;
	margin:					20px auto;
}
#system-options ul.centred-list li::before {
	content: 				'';
	width:					5px;
	height: 				5px;
	border-radius: 			5px;
	background: 			#111;
	display:				inline-block;
	margin: 				0 10px 0 0 ;
	top:					-3px;
	position:				relative;
}

/*------------------------------------------------------------------------- SYSTEM OPTIONS TABLE
*/
#options-table {
	display:				flex;
	justify-content:		center;
	flex-flow:				row wrap;
	margin:					20px auto 0;
	
}
#options-table .option {
	flex:					1;
	max-width:				100%;
	min-width:				240px;
	background:				#fff;
	margin:					0 10px 40px;
	box-shadow:				0 0 20px 0 rgba(0,0,0,0.05);
	position:				relative;
}
#options-table .option h6 {
	width: 					0;
	height: 				0;
	border-width: 			100px 100px 0 0;
	border-color: 			rgba(0,0,0,0.9) transparent transparent transparent;
	border-style: 			solid;
	overflow:				visible;
	position:				absolute;
	display:				block;
	left:					-10px;
	top:					-10px;
}
#options-table .option h6 span {
	color:					#fff;
	font-size:				14px;
	text-transform:			uppercase;
	font-family:			'lato-light';
	text-align:				center;
	width: 					80px;
	transform:				rotate(-45deg);
	display:				block;
	left: 					0px;
    position: 				relative;
    top: 					-70px;
}
#options-table .option h6::after {
	content:				'';
	display:				block;
	position:				absolute;
	left:					10px;
	top:					-90px;
	width: 					0;
	height: 				0;
	border-width: 			100px 100px 0 0;
	border-color: 			rgba(0,0,0,0.1) transparent transparent transparent;
	border-style: 			solid;	
}
#options-table .option h3 {
	margin:					0 auto;
	height:					80px;
	line-height:			80px;
	text-align:				center;
	color:					#fff;
	font-size:				36px;
}
#options-table .option.standard h3 {
	background-color:		#63a4c3;
}
#options-table .option.professional h3 {
	background-color:		#4483a3;
}
#options-table .option.enterprise h3 {
	background-color:		#3c5f73;
}
.option-features {
	padding:				20px;
}
.option-features li {
	font-size:				14px;
}
.option-description {
	background:				#F7F7F7;
	text-align:				center;
	padding:				20px;
	font-size:				14px;
	min-height:				140px;
	display:flex;
	align-items:center;
	flex-flow:row wrap;
	justify-content: space-evenly;
	
}
.option-description p {
	line-height:			1.05em;
	font-size:				14px;
	color:					#000;
	margin:					0;
}
#quote-button {
	background:				#63a4c3 url(../images/get-a-quote.svg) 10px 5px / 30px auto no-repeat;
	text-align:				left;
	color:					#fff;
	font-size:				24px;
	width:					100%;
	max-width:				300px;
	height:					40px;
	border:					1px solid #555;
	transition:				0.2s linear;
	position:				relative;
	padding:				0 0 0 60px;
	font-family:			'lato-light';
	margin:					20px auto;
	line-height:			38px;
}
#quote-button:hover {
	cursor:					pointer;
	background-color:		#3c5f73;
	padding:				0 0 0 65px;
}

/*------------------------------------------------------------------------- PRODUCT DETAIL
*/
#product-detail {
	background:				#fff;
	padding:				0 0 40px;
}
#product-detail .column:first-of-type {
	padding:				0 20px 0 0;
}
#product-detail .column:last-of-type {
	padding:				0 0 0 20px;
}
#product-detail .row {
	align-items:			center;
}
.caption {
	position:				absolute;
	right:					-10px;
	top:					-10px;
}
.side-photo-container {
	position:				relative;
	min-height:				400px;
}
.side-photo-container img {
	display:				block;
    position: 				absolute;
    right: 					0;
    top: 					0;
}

@media (max-width: 1280px)
{
	.side-photo-container img {
		max-width: 			600px;
		width: 				60vw;
	}
}
@media (max-width: 767px)
{
	.side-photo-container {
		min-height:			0;
	}
	.side-photo-container img {
		width: 				calc(100% + 80px);
		max-width:			calc(100% + 80px);
		margin: 			20px -40px 40px;
		position:			relative;
	}
	.caption {
		position:			absolute;
		right:				-40px;
		top:				0;
	}
	#product-detail .column {
		padding: 			0 20px !important;
	}
}

/*------------------------------------------------------------------------- QUESTIONS PANEL
*/
#questions {
	padding:				0 0 140px;
	background: 			linear-gradient(0deg, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%), url(../images/section-bg.png) right top / cover  no-repeat; 
	margin-bottom:			-120px;
	position:				relative;
}
#questions::before {
	content:				'';
	position:				absolute;
	left:					0;
	top:					0;
	width:					100%;
	height: 				100%;
	background: 			#fff;
	z-index:				-1;
}
#questions h3 {
	margin:					0 auto 50px;
}
#questions .column:first-of-type {
	padding:				0 40px 0 0;
}
#questions .column:last-of-type {
	padding:				0 0 0 40px;
}

@media (max-width: 767px)
{
	#questions .column {
		padding: 			20px 0 0 !important;
	}
	#questions .row {
		padding: 			0 40px !important;
	}		
}

/*------------------------------------------------------------------------- FORM ELEMENTS
*/
form {
	width:					100%;
	padding:				0;
	position:				relative;
	margin:					0;
}
fieldset {
	padding:				0 0 10px;
	max-width:				480px;
	margin:					0 auto;	
	position:				relative;
}
input,
textarea {
	border:					1px solid #555;
	background:				rgba(255,255,255,0.8);
	width:					100%;
	height:					36px;
	padding:				5px 10px;
	font-family:			'montserrat';
	transition:				0.2s linear;
	color:					#eee;
	font-size:				13px;
	color:					#555;
}
textarea {
	min-height:				140px;
	padding:				10px;
	resize:					none;
}
input:hover,
textarea:hover {
	border-color:			#63a4c3;
	background:				rgba(255,255,255,0.9)
}
textarea:focus::placeholder,
input:focus::placeholder {
	color:					#999;
}
input:focus,
textarea:focus {
	border-color:			#63a4c3;
	background:				#fff;
	color:					#000;
	box-shadow: 			0 0 16px 2px rgba(0,0,0,0.1);
}
label {
	display:				none;
}
textarea::placeholder,
input::placeholder {
	font-family:			'montserrat';
	color:					#555;
	font-size:				13px;
}
label[for=confirm] {
	display: 				inline-block;
	width: 					calc(100% - 40px);
	padding-left: 			10px;
	font-size: 				13px;
	line-height:			1.1em;
	margin: 				10px 0;
}
input[type=checkbox] {
	padding:				0;
	width:					16px;
	height:					16px;
	display:				inline-block;
	vertical-align:			top;	
	margin: 				10px 0;
}
button {
	background:				#63a4c3;
	text-align:				left;
	color:					#fff;
	font-size:				24px;
	width:					100%;
	height:					44px;
	border:					1px solid #555;
	transition:				0.2s linear;
	position:				relative;
	padding:				0 0 0 60px;
	font-family:			'lato-light';
}
button span::before {
	background:				url(../images/mail-send.svg) center center / 100% auto no-repeat;
	width:					39px;
	height:					20px;
	content:				'';
	display:				block;
	position:				absolute;
	left: 					10px;
	top:					10px;
	transition:				0.2s linear;
}
button:hover {
	cursor:					pointer;
	background:				#3c5f73;
	padding:				0 0 0 65px;
}
button:hover span::before {
	left:					15px;
}
fieldset.recaptcha {
	padding:				0 0 10px;
}
div.g-recaptcha {

}

@media (max-width: 767px)
{
	fieldset {
		margin: 			0;
	}
}

/*------------------------------------------------------------------------- FOOTER PAGES HEADER
*/
#footer-header {
	padding:				20px 0;	
	background:				#eee;
	position:				relative;
}
#footer-header::after {
	content:				'';
	display:				block;
	background:				linear-gradient(0deg, rgba(238,238,238,0) 0%, rgba(238,238,238,1) 100%);
	position:				absolute;
	top:					100%;
	left:					0;
	width:					100%;
	height:					300px;
	z-index:				1;
}
#footer-header h1 {
	width:					170px;
	height:					80px;
	text-indent:			-9999px;
	background:				url(../images/sds-themis-logo.svg) center center / 100% auto no-repeat;
	margin-bottom:			20px;
}
#footer-header h1 a {
	display:				block;
	width:					100%;
	height:					100%;
}
#footer-header h2 {
	font-size:				30px;
}
.footer-page #introduction p {
	text-align:				left;
}
.footer-page #introduction .row:first-of-type {
    justify-content: 		flex-start;
}

.footer-page #introduction h3 {
    text-align: 			left;
	margin: 				0 0 20px;
	font-size:				24px;
}
.footer-page #introduction {
	padding:				20px 0 40px;
	background: 			linear-gradient(0deg, rgba(219,234,239,1) 0%, rgba(238,238,238,0) 100%), url(../images/section-bg.png) right top / auto auto no-repeat;
	position: 				relative;
}
.footer-page #introduction * {
	z-index:				2;
}

/*------------------------------------------------------------------------- FOOTER
*/
#footer {
	background:				transparent url(../images/footer-bg.png) center top / 100% auto no-repeat;
	padding:				110px 0 20px 0;
	color:					#000;
	z-index:				2;
	min-height:				240px;
}
#footer .row {
	padding-bottom:			0;
}
#footer .column {
	display: 				flex;	
	align-items: 			center;
	text-align:				center;
}
#footer .column:nth-of-type(2){
	min-width: 				50%;
	justify-content: 		center;
}
#footer .column:nth-of-type(3) {
	flex-flow: 				row wrap;
	justify-content: 		flex-end;
}
#footer .column:nth-of-type(3) * {
	max-width: 				200px;
}
#footer ul {
	margin:					0 auto;
}
#footer a {
	color:					#111;
}
#footer a:hover {
	color:					#63a4c3;
}
#footer .sds-themis {
	width:					200px;
	height:					115px;
	background:				url(../images/sds-themis-logo.svg) center center / 100% no-repeat;
	text-indent:			-9999px;
	margin:					0 0 20px;
}
#footer p {
	margin:					0;
	font-size:				13px;
	line-height:			1.1em;
	text-align:				right;
}
#footer p.copyright {
	margin-top:				10px ;
}
#footer ul li {
	font-size:				13px;
	margin:					0;
	background:				none;
	padding:				0;
	position:				relative;
	display:				inline-block;
}
#footer ul li::after {
	content:				'';
	display:				inline-block;
	width:					7px;
	height:					7px;
	border-radius:			50%;
	background:				#000;
	margin: 				0px 5px 0 10px;
}
#footer ul li:last-of-type::after {
	display:				none;
}
#footer ul li a {
	text-transform:			lowercase;
	font-size:				14px;
	font-family:			'lato-black';
}
#footer .since-1994 {
	font-size:				12px;
	font-family:			'lato-bold';
	line-height:			1.2em;
	margin:					0 auto;
	padding:				5px 0 0 70px;
	background:				url(../images/25-years.svg) left center / 55px 50px no-repeat;
	min-height:				50px;
	width:					100%;
	max-width:				240px;
	text-align:				left;
}

@media (max-width: 980px)
{
	#footer {
		background-size:	auto 100%;
	}
}


@media (max-width: 767px)
{
	#footer .column {
		display: 			block;	
		width:				100% !important;
		padding-bottom: 	20px;
	}
	#footer .column:nth-of-type(1) {
		order: 				3;
	}
	#footer .column:nth-of-type(2) {
		order: 				1;
	}	
	
	#footer p {
		margin-left:		auto;
		margin-right:		auto;
		text-align: 		center;
		max-width: 			100% !important;
	}
	#footer .sds-themis {
		margin:				0 auto 20px;
	}
}

@media (max-width: 440px)
{
	#footer ul {
		width:				100%;
	}
	#footer ul li::after {
		display:			none;
	}
	#footer ul li {
		display:			block;
		text-align:			center;
		margin:				0 0 10px;
	}
	#footer ul li a {
		text-transform:		none;	
	}

}

/*------------------------------------------------------------------------- FOOTER CONTENT PAGE STYLES 
*/


/*------------------------------------------------------------------------- BACK TO TOP BUTTON 
*/
a#top {
	position:				fixed;
	bottom:					-60px;
	right:					20px;
	width:					32px;
	height:					32px;
	z-index:				99;
	opacity:				0;
	text-indent:			-9999px;
	transition:				0.2s linear, 0s linear background-size;
	background:				#fff url(../images/back-to-top.svg) center center / 10px auto no-repeat;
	border: 				2px solid rgba(0,0,0,0.20);	
	border-radius:			5px;
}
a#top.show {
	opacity:				0.6;
	bottom:					20px;
}
a#top:hover {
	border-color: 			#000;	
	background-size:		14px;
	opacity:				1;
}

/*------------------------------------------------------------------------- CSS ANIMATIONS
*/
.step__animate:nth-child(n+1) {
	animation-delay: 		0;
}
.step__animate:nth-child(n+2) {
	animation-delay: 		0.1s;
}
.step__animate:nth-child(n+3) {
	animation-delay: 		0.2s;
}
.step__animate:nth-child(n+4) {
	animation-delay: 		0.3s;
}
.step__animate:nth-child(n+5) {
	animation-delay: 		0.4s;
}
.step__animate:nth-child(n+6) {
	animation-delay: 		0.5s;
}
.step__animate:nth-child(n+7) {
	animation-delay: 		0.6s;
}
.step__animate:nth-child(n+8) {
	animation-delay: 		0.7s;
}
.step__animate:nth-child(n+9) {
	animation-delay: 		0.8s;
}
.step__animate:nth-child(n+10) {
	animation-delay: 		0.9s;
}
.step__animate:nth-child(n+11) {
	animation-delay: 		1s;
}
.step__animate {
	animation-duration: 	1s;
}

/*------------------------------------------------------------------------- GENERIC ALERT BOX
*/
.alert {
	background:				#B91d1e;
	padding:				15px 20px;
	margin:					0 auto 30px;
	color:					#fff;
	max-width:				480px;
	border:					1px solid rgba(238,238,238,0.20);
}
.alert.success {
	background:				#63a4c3;
}
.alert h4 {
	font-size:				18px;
	vertical-align:			top;
	margin-bottom:			15px;
}
.alert h4::before {
	content:				'!';
	display:				inline-block;
	width:					24px;
	height:					24px;
	line-height:			24px;
	font-size:				20px;
	letter-spacing:			0;
	margin-right:			10px;
	text-align:				center;
	background:				#fff;
	color:					#B91d1e;
	border-radius:			50%;
}
.alert p {
	margin:					10px 0 0;
	font-size:				13px;
	padding: 				0 0 0 40px;
}
.alert ul {
	margin-top:				0;
	margin-bottom:			0;
}
.alert ul li {
	margin:					0 0 4px;
	font-size:				13px;	
}