@charset "utf-8";
/*------------------------------------------------------------------------- FONTS 
*/
@font-face {
    font-family: 'montserrat';
    src: url('font/montserrat-medium.woff') format('woff');
    font-weight: 			normal;
    font-style: 			normal;
}
@font-face {
    font-family: 'montserrat-italic';
    src: url('font/montserrat-medium-italic.woff') format('woff');
    font-weight: 			normal;
    font-style: 			normal;
}
@font-face {
    font-family: 'montserrat-bold';
    src: url('font/montserrat-bold.woff') format('woff');
    font-weight: 			normal;
    font-style: 			normal;
}
@font-face {
    font-family: 'montserrat-black';
    src: url('font/montserrat-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: 			'montserrat', sans-serif;
	text-align:				left;
	background: 			linear-gradient(90deg, rgba(198,85,151,1) 50%, rgba(185,29,30,1) 50%);
	margin:					0;
	color:					#fff;
	overflow-x:				hidden;
}
#page {
	width:					100%;
	height:					100%;
	position:				relative;
	min-width:				320px;
	margin:					0 auto;
}
#page::after {
	content:				'';
	display:				block;
	position:				absolute;
	top:					0;
	left:					0;
	right:					0;
	width:					100%;
	max-width:				1440px;
	height:					100%;
	background:				url(../images/stripe-bg.svg) center top / 100% auto repeat-y;
	pointer-events: 		none;
	margin: 				0 auto;
	z-index:				-1;
}
a {
	text-decoration:		none;
	color:					#f6ac26;
	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 #ee8818;
	transition:				0.3s linear;
}
a:hover {
	color:					#ee8818;
}
a:hover::after {
	width: 					100%;
}

h1,h2,h3,h4,h5,h6  {
	font-family: 			'montserrat-black', sans-serif;	
    font-weight: 			normal;
    font-style:				normal;	
	letter-spacing:			-0.08em;
}
h2 {
	font-size:				48px;	
}
h3 {
	font-size:				36px;
	position:				relative;
	width:					100%;
	max-width:				440px;
}	 	
strong, b {
    font-family: 			'montserrat-bold', sans-serif;
    font-weight: 			normal;
    font-style:				normal;	
}
em, i {
    font-family: 			'montserrat-italic', sans-serif;
    font-weight: 			normal;
    font-style:				normal;	
}
sup {
	vertical-align: 		super;
	font-size:				70%;
}
p {
	line-height:			1.5em;
	font-size:				14px;
	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:				15px;
}
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:				15px;	
}
@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 {
	padding:				180px 20px 0;
}

#header h1 {
	margin:					0 auto 10px;
	font-size:				80px;
	text-shadow: 			0 2px 2px #000;
	color:					#fff;
	text-align:				center;
	line-height:			0.9em;
}
#header h1 a {
	display:				block;
	width:					100%;
	height:					100%;
	position:				relative;
	color:					#fff;
}
#header h1 a::after {
	display:				none;
}

#header h2 {
	width:					100%;
	margin:					0 auto;
	text-align:				center;
	font-size:				21px;
	text-shadow:			0 2px 1px #000;
}
@media (min-width: 1280px)
{
	#header {
		padding:			220px 20px 0;
	}
}
@media (max-width: 920px)
{
	#header h2 {
		margin:				30px auto 0;
	}
}
@media (max-width: 640px)
{
	#header {
		padding:			100px 20px 0;
	}
	#header h1 {
		font-size: 			64px;
	}
	#header h2 {
		font-size:			17px;
	}
}

/*------------------------------------------------------------------------- TIMELINE BACKGROUND
*/
#timeline {
	position:				absolute;
	width:					100%;
	height:					100%;
	left:					0;
	right:					0;
	top:					0;
	bottom:					0;
	display:				flex;
	flex-flow: 				row wrap;
	justify-content:		center;
	align-items:			stretch;
	
}
#timeline .strip {
	flex:					1;
	height:					100%;
	max-width:				240px;
	position:				relative;
}
#timeline .strip.d1900 { background: #c65597 url(../images/1900.jpg) center top / 100% auto no-repeat;	}
#timeline .strip.d1920 { background: #576aaf url(../images/1920.jpg) center top / 100% auto no-repeat;	}
#timeline .strip.d1940 { background: #f7ae27 url(../images/1940.jpg) center top / 100% auto no-repeat;	}
#timeline .strip.d1960 { background: #ee8818 url(../images/1960.jpg) center top / 100% auto no-repeat;	}
#timeline .strip.d1980 { background: #e6361f url(../images/1980.jpg) center top / 100% auto no-repeat;	}
#timeline .strip.d2000 { background: #B91d1e url(../images/2000.jpg) center top / 100% auto no-repeat;	}

#timeline-markers {
	width:					calc(100% - 40px);
	max-width:				1480px;
	height:					300px;
	background:				url(../images/timeline.svg) center top / 100% auto no-repeat;
	position:				absolute;
	top:					20px;
	left:					0;
	right:					0;
	margin:					auto;
	animation-delay: 		1.2s;
}


/*------------------------------------------------------------------------- INTRODUCTION SECTION
*/
#introduction {
	padding:				0 0 60px;
	background:				transparent;
}

#introduction .container {
	z-index:				1;
}

#introduction p.emphasis {
	font-size:				15px;
	font-family:			'montserrat-bold';
	line-height:			1.2em;
}
#introduction h3 {
	font-size:				44px;
	line-height:			0.9em;
	margin-bottom:			30px;
}
#introduction .main-image-container {
	min-height:				400px;
	position:				relative;
	overflow: 				hidden;
	width:					calc(100% + 40px);
	margin:					0 -20px;	
	z-index:				2;
}
#introduction img {
	display:				block;
	width: 					100%;
}
#introduction::after {
	content:				'';
	display:				block;
	position:				absolute;
	left:					0;
	right:					0;
	bottom:					0;
	height:					500px;
	width:					100%;
	background: 			linear-gradient(0deg, rgba(85,85,85,1) 0%, rgba(85,85,85,0) 100%);
	pointer-events:			none;
	z-index:				0;
}

h6.blob {
	background:				#000;
	width:					180px;
	height:					180px;
	position:				absolute;
	left:					0;
	top:					120px;
	font-family:			'montserrat-bold';
	color:					#fff;
	font-size:				19px;
	text-align:				center;
	padding:				40px 20px;
	transform:				rotate(-5deg);
	border-radius:			50%;
	z-index:3;
}
.text-container {
	position:				relative;
	background:				rgba(229,54,31,0.9);
	width:					100%;
	padding:				60px 40px;
	margin-top: 			-50px;
	z-index:				1;
}
.text-container * {
	width:					100%;
	max-width:				640px;
	margin:					0 auto 20px;
}
.text-container::after {
	content:				'';
	display:				block;
	position:				absolute;
	left:					100%;
	top:					0;
	width:					calc((100vw - 960px) / 2); 
	height:					100%;
	background:				rgba(229,54,31,0.9);
}

@media (max-width: 980px)
{
	.text-container::after {
		width:				calc((100vw - 880px) / 2); 
	}
}

@media (max-width: 640px)
{
	#introduction img {
		width: 				640px;
		height: 			auto;
		position:			absolute;
		width:				auto;
		height:				400px;
		left: 				65%;
		top: 				50%;
		transform: 			translate(-65%,-50%);
		margin:				auto;
	}
	h6.blob {
		width:				140px;
		height:				140px;	
		top:				200px;
		left:				20px;
		padding-top: 		30px;
		font-size:			15px;	
	}
}

@media (max-width: 480px)
{
	h6.blob {
		left: 				0;
		right: 				0;
		margin: 			auto;
	}
}


/*------------------------------------------------------------------------- QUESTIONS PANEL
*/
.footer-page #introduction::before,
#questions::before {
	content:				'';
	display:				block;
	position:				absolute;
	right:					0;
	bottom:					-100px;
	height:					0;
	width:					0;	
	border-style:			solid;
	border-width:			0 50vw 100px 0;
	border-color:			transparent #555 transparent transparent;
}

#questions {
	padding:				80px 0 40px;
	background:				#555;
	z-index:				2;
}
.footer-page #introduction::after,
#questions::after {
	content:				'';
	display:				block;
	position:				absolute;
	left:					0;
	bottom:					-100px;
	height:					0;
	width:					0;	
	border-style:			solid;
	border-width:			100px 50vw 0 0;
	border-color:			#555 transparent transparent transparent ;
	
}
#questions h3 {
	margin:					0 0 20px;
}

#questions .column:first-of-type {
	padding:				0 40px 0 0;
}
#questions .column:last-of-type {
	padding:				0 0 0 40px;
}

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

#ysa-banner {
	background:				url(../images/ysa-banner.png) left top / 100% auto no-repeat;
	width:					100%;
	max-width:				768px;
	height:					300px;
	padding:				70px 20px 100px;
	color:					#fff;
	margin-top:				20px;
}
#ysa-banner h5, 
#ysa-banner p {
	width:					100%;
	margin-bottom:			15px;
}
#ysa-banner h5 {
	font-size:				38px;	
	max-width:				380px;	
	text-shadow:			0 1px 8px #000;
	margin-bottom:			10px;
}

#ysa-banner p {
	font-size:				15px;
	max-width:				320px;	
	line-height:			1.2em;	
	text-shadow:			0 1px 8px #000;	
	font-family:			'montserrat-bold';
}			
#ysa-banner a {
	display:				block;
	width:					180px;
	height:					40px;
	background-color:		rgba(0,0,0,0.5);
	color:					#fff;
	font-family:			'montserrat-black';
	letter-spacing:			-0.08em;
	padding:				0;
	font-size:				17px;
	transition:				0.3s linear;
	text-align:				center;
	line-height:			40px;
}
#ysa-banner a::after {
	height:					2px;
	border-bottom:			2px solid rgba(255,255,255,0.1);
}
#ysa-banner a:hover {
	background-color:		#f6ac26;
}

@media (max-width: 800px)
{
	#ysa-banner h5, 
	#ysa-banner p { 
		text-align:			center;
		max-width:			100%;
	}
	#ysa-banner a {
		margin:				0 auto;
	}
	#ysa-banner {
		background:			url(../images/ysa-banner-mobile.png) center top / cover no-repeat;
		width:				100%;
		max-width:			480px;
		height:				auto;
		padding:			200px 20px 20px;
		margin:				0 auto;
	}
}
/*------------------------------------------------------------------------- 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 #eee;
	background:				transparent;
	width:					100%;
	height:					36px;
	padding:				5px 10px;
	font-family:			'montserrat';
	transition:				0.2s linear;
	color:					#eee;
	font-size:				15px;
}
textarea {
	min-height:				140px;
	padding:				10px;
	resize:					none;
}
input:hover,
textarea:hover {
	border-color:			#ee8818;
	background:				rgba(0,0,0,0.1)
}
textarea:focus::placeholder,
input:focus::placeholder {
	color:					#555;
}
input:focus,
textarea:focus {
	border-color:			#576aaf;
	background:				#fff;
	color:					#121212;
	box-shadow: 			0 0 16px 2px rgba(0,0,0,0.3);
}
label {
	display:				none;
}
textarea::placeholder,
input::placeholder {
	font-family:			'montserrat';
	color:					#eee;
	font-size:				13px;
}
label[for=confirm] {
	display: 				inline-block;
	width: 					calc(100% - 40px);
	padding-left: 			10px;
	font-size: 				13px;
	font-family: 			'montserrat';
	color:					#fff;
	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:				#000;
	text-align:				left;
	color:					#fff;
	font-size:				30px;
	width:					100%;
	max-width:				240px;
	height:					44px;
	border:					1px solid rgba(238,238,238,0.20);
	transition:				0.2s linear;
	position:				relative;
	padding:				0 0 0 40px;
	font-family:			'montserrat-black';
	letter-spacing:			-0.08em;
}
button span::before {
	background:				url(../images/icon-send.svg) center center / 100% auto no-repeat;
	width:					20px;
	height:					20px;
	content:				'';
	display:				block;
	position:				absolute;
	left: 					10px;
	top:					10px;
	transition:				0.2s linear;
}
button:hover {
	cursor:					pointer;
	background:				#ee8818;
}
button:hover span::before {
	transform:				rotate(45deg);
}
fieldset.recaptcha {
	padding:				0 0 10px;
}
div.g-recaptcha {

}

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

/*------------------------------------------------------------------------- FOOTER
*/
#footer {
	background:				rgba(0,0,0,0.8) center top / auto 100% repeat-x;
	padding:				110px 0 20px 0;
	color:					#fff;
	z-index:				1;
	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:					#fff;
}
#footer a:hover {
	color:					#f6ac26;
}
#footer p {
	margin:					0;
	font-size:				13px;
	line-height:			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:				#fff;
	margin: 				0px 5px 0 10px;
}
#footer ul li:last-of-type::after {
	display:				none;
}
#footer ul li a {
	text-transform:			lowercase;
	font-size:				13px;
	font-family:			'montserrat-black';
}
#footer .since-1994 {
	font-size:				13px;
	font-family:			'montserrat';
	line-height:			1.15em;
	color:					#fff;
	margin:					0 auto;
	padding:				0 0 0 70px;
	background:				url(../images/25-years.png) left center / 54px 50px no-repeat;
	min-height:				50px;
	width:					100%;
	max-width:				240px;
	text-align:				left;
}
#footer .sds-group {
	width:					112px;
	height:					21px;
	text-indent:			-9999px;
	background:				url(../images/sds-group-footer-logo.svg) center center / 100% no-repeat;
	margin:					0 0 10px;
}
#footer .sds-group a {
	display:				block;
	width:					100%;
	height:					100%;
}

@media (max-width: 767px)
{
	#footer .column {
		display: 			block;	
		width:				100% !important;
		padding-bottom: 	20px;
	}
	#footer .column:nth-of-type(1) {
		order: 				3;
	}
	#footer p, #footer .sds-group {
		margin-left:		auto;
		margin-right:		auto;
		text-align: 		center;
		max-width: 			100% !important;
	}
	#footer .sds-group {
		margin-top:			10px;
		margin-bottom: 		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 15px;
	}
	#footer ul li a {
		text-transform:		none;	
	}
	#footer p {
		font-size: 			12px;
	}
}
/*------------------------------------------------------------------------- FOOTER CONTENT PAGE STYLES 
*/
.footer-page #timeline-markers {
	display:				none;
}
.footer-page #introduction {
	background: #555;
	background: linear-gradient(0deg, rgba(85,85,85,1) 70%, rgba(85,85,85,0) 100%);
	padding:	40px;
	z-index:	10;
}
.footer-page #introduction .row {
	max-width:				640px;
		margin: 0 auto;

}

.footer-page #header {
    padding: 60px 20px 0;
}
.footer-page #header h1 {
	transform:				scale(0.8);
}

.footer-page #header h2 {
	width:					100%;
	max-width:				100%;
	font-size:				30px;
	text-align:				center;
	margin:					40px auto 0;
	font-family:			'montserrat';
}

.footer-page #introduction h3 {
	width:					100%;
	max-width:				100%;
	font-size:				20px;	
	text-align:				left;
	margin-top:				10px;
	margin-bottom: 20px;
}


@media (max-width: 640px) 
{
	.footer-page #introduction {
		padding:			40px 10px;
	}
}/*
@media (max-width: 767px) 
{
	.footer-page #header h2 {
		margin-top:			0;
	}
}
@media (max-width: 510px) 
{
	.footer-page #header h2 {
		margin-top:			0;
		font-size:			28px;
	}
}
@media (max-width: 440px) 
{
	.footer-page #header h2 {
		margin:				30px 0 ;
		font-size:			24px;
	}
}*/

/*------------------------------------------------------------------------- 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;
	background:				#000 url(../images/back-to-top.svg) center center / 16px 21px no-repeat;
	border: 				1px solid rgba(238,238,238,0.20);	
}
a#top.show {
	opacity:				0.6;
	bottom:					20px;
}
a#top:hover {
	background:				#ee8818 url(../images/back-to-top.svg) center center / 12px 16px no-repeat;
	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:				#000;
}
.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;	
}