@import url(slippry.css);

/*
blue:  #2A2766	rgb(42, 39, 102)
lblue: #3F64AF	rgb(63, 100, 175)
red:   #b42124	rgb(180, 33, 36)
grey:  #cdcdcd	rgb(205, 205, 205)
*/

/* HEADER ********************************************/
header .sy-box {
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
}
header .sy-list img {
	display:block;
	width:100%;
}
header .sy-list h1 {
	position:absolute;
	margin:0;
	right:50%;
	bottom:4%;
	left:8%;
	color:#fff;
	font-size:12.7em;
	font-weight:300;
	font-family:Oswald;
	text-transform:uppercase;
	line-height:1;
	text-align:right;
	padding:0 0.32em 0.15em 0;
}
	header .sy-slide + .sy-slide  h1 { color:#fff; font-size: 11em; line-height:.9;}
header .sy-list h1 strong {
	font-size:0.47em;
	color:#fff;
	display:block;
	font-weight:normal;
	line-height:1.1;
}
header .sy-list span {
	display:block;
	position: absolute;
	left:50%;
	right:8%;
	bottom:4%;
}
header .sy-list span p {
	display:block;
	margin:0;
	background:#2A2766;
	padding:0.95em 30% 0.95em 0.95em;
	font-size:2.2em;
	color:#fff;
	line-height:1.55;
}
header .sy-list span a {font-weight:normal; color:#9a9a9a; display:block; padding:7px 0 0; text-decoration:none;}
header .sy-list span a:hover {color:#fff; text-decoration:underline;}
header .sy-list span em {
	position:absolute;
	bottom:10px;
	right:0;
	width:30%;
	display:block;
	line-height:1.3;
font-size: 90%;
}
header .sy-list span strong {
	opacity:.4;
	font-size:5.2em;
	color:#fff;
	margin:0;
	text-transform:uppercase;
	font-family:Oswald;
	text-align:right;
	padding: 0 32% 0 0;
	display:block;
	font-weight:normal;
}

/* MAIN ********************************************/
main {
	display:block;
	background:#c2c2c2;
	border-top:2px solid #fff;
	overflow:hidden;
}
main section {
	width:33.3%;
	display:inline-block;
	padding:20px 30px;
	overflow:hidden;
	float:left;
	color:#3f4040;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
main section:nth-child(2n) {background:#a6a6a6;}
main section > a, main section > img {
	width:45%;
	float:right;
	padding: 0;
	text-decoration:none;
	color:#fff;
	max-width:276px;
}
main section > div {
	width:55%;
	float:left;
	padding: 0 20px 0 0;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
main section h2, main section h3 {
	text-transform:uppercase;
	font-size:1.9em;
	margin:0;
	padding:0 0 8px;
}
main section h3 {
	font-family:Oswald;
	font-size:3.3em;
	margin:0;
	padding:0;
}
main section p {
	margin:0;
	padding:0;
	font-size:2.3em;
}
main section > a strong {
	margin:10px 0 0;
	text-align:center;
	background:#2A2766;
	display:block;
	padding:10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-family:Oswald;
	text-transform:uppercase;
	font-size:2.2em;
	font-weight:normal;
}
main section > a:hover strong {opacity:.7;}



/* RESPONSIVE ************************************/
@media screen and (max-width:1200px) {
	header .sy-list span strong {display:none;}
	header .sy-list span {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		margin:-10px 0 0;
	}
	header .sy-list span p {
		padding:20px 200px 20px 20px;
	}
	header .sy-list span em {width:200px;}
	header .sy-list h1 strong {
		display: inline;
		font-size: inherit;
		line-height: inherit;
		font-weight:normal;
	}
	header .sy-list h1 {
		top:0;
		right:0;
		bottom:0;
		left:0;
		position:relative;
		margin-top:-150px;
		font-size:8em;
		padding:20px 200px 20px 20px;
	}
	header .sy-list span, main section {font-size:6.5px;}
}
@media screen and (max-width:1100px) {
	main section > a, main section > div {
		width:100%;
		float:none;
		padding: 0;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}
	main section > a {padding-top:20px; display:block;}
	main section > a img { margin:0 auto; display:block;}
}
@media screen and (max-width:740px) {
	header .sy-list h1 {margin-top:-90px; background:#636363; text-align:left;}
	header .sy-list li > img {width:140%; max-width:none; margin-left:-10%;}
	header .sy-list li {overflow:hidden;}
}
@media screen and (max-width:630px) {
	main section {width:100%;}
	.sy-controls {display:none !important;}
}
@media screen and (max-width:630px) and (min-width:360px) {
	main section > a {
		width:45%;
		float:right;
		padding:0;
	}
	main section > div {
		width:55%;
		float:left;
		padding: 0 20px 0 0;
	}
}
@media screen and (max-width:430px) {
	header .sy-list h1 {margin-top:-50px; padding:20px;}
	header .sy-list span p {padding-right:0; overflow:hidden;}
	header .sy-list span em {position:relative; top:0; right:0; bottom:0; left:0; padding-left:10px; width:40%; float:right; margin-top:-10px;}
}