/* -------------------------------------------
--> Cascade Style Sheet - CSS by dvL-den <--
------------------------------------------ */



/* -------------------------------------------
--> Body Settings and Imports - OPEN
------------------------------------------ */

@import url(reset.css);
@import url(//fonts.googleapis.com/css?family=Strait);

body {
	
	background: url(../img/bg.jpg) #ccc fixed;
	font: 10pt 'Strait', Tahoma, Verdana;
	font-weight: 400;
	color: #555;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}


.blur {
	-ms-filter: blur(2px);
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=2);
}

a {
	color: #fff;
	text-decoration: none;
}

a:focus, input:focus, img:focus, li:focus {
	outline: none;
}

li {
	list-style-type: none;
}

ul {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 12pt;
}

h2 {
	font-weight: 400;
}

.clearfix:before, .clearfix:after {
	content: "";
	display: block;
	height: 0;
	overflow: hidden;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1;
	
}


#content {
	display: none;
	position:relative;
	width:800px;
	height:auto;
	margin:auto;
	margin-top:70px;
	margin-bottom:70px;
	border-radius:6px;
}

.margin_bottom {
	margin-bottom: 50px !important;
}

/* -------------------------------------------
<-- Body Settings and Imports - CLOSE
------------------------------------------ */


/* -------------------------------------------
--> Header Styling - OPEN
------------------------------------------ */

header {
/*	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%); 
	*/
	width: 100%;
	max-height: 176px;
	padding: 8px 0 16px;
	position: relative;
	z-index: 55;
	overflow: hidden;
}


header.default {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

/*	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0 2px 5px -2px rgba(0, 0, 0, .8), inset 160px 0 120px -40px rgba(87, 167, 218, .6), inset -160px 0 120px -40px rgba(87, 167, 218, .6); */
	/* box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0), inset 0 0 0 2px rgba(255, 255, 255, .2), 0 2px 5px -2px rgba(0, 0, 0, .8), inset 160px 0 120px -40px rgba(87, 167, 218, .6), inset -160px 0 120px -40px rgba(87, 167, 218, .6); */
} 

header.fixed {
	width: 200px;
	height: 176px;
	position: fixed;
	top: 0;
	left: 120px;
	display: none;
	z-index: 100;

/*	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0 2px 5px -2px rgba(0, 0, 0, .8), inset 0 60px 60px -10px rgba(87, 167, 218, .6); */
/*	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0 2px 5px -2px rgba(0, 0, 0, .8), inset 0 60px 60px -10px rgba(87, 167, 218, .6); */
} 

.logo {
	background: url(../img/logo.png) no-repeat;
	width: 200px;
	height: 176px;
	position: relative;
	margin-left: 500px;
	display: block;
	margin: auto;
}



/* -------------------------------------------
<-- Header Styling - CLOSE
------------------------------------------ */


/* -------------------------------------------
--> Middle Styling - OPEN
------------------------------------------ */

#middle {
	background: rgba(255, 255, 255, .97);

	background: -webkit-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -moz-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -o-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -ms-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	width: 100%;
	height: auto;
	margin: auto;
	padding: 40px 0;

	-webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, .4), inset -1px 0 0 rgba(0, 0, 0, .4), inset 2px 0 0 rgba(255, 255, 255, .5), inset -2px 0 0 rgba(255, 255, 255, .5);
	box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .4), inset -1px 0 0 rgba(0, 0, 0, .4), inset 2px 0 0 rgba(255, 255, 255, .5), inset -2px 0 0 rgba(255, 255, 255, .5);
}

.video_wrap {
	background: rgba(250, 249, 245, .5);

	background: -webkit-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: -moz-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: -o-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: -ms-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	width: 560px;
	height: 315px;
	margin: auto;
	padding: 5px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	border-radius: 5px;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
}

.video_frame {
	width: 560px;
	height: 315px;
	position: relative;
}

.video_cover {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 22;
}

.video_overlay {
	background: rgba(0, 0, 0, .4);
	display: none;
	text-align: center;
	color: rgba(255, 255, 255, 1);
}

.video_block, .video_overlay {
	width: 560px;
	height: 315px;
	position: absolute;
	z-index: 33;
}

.video_overlay span {
	position: absolute;
	width: 560px;
	height: 315px;
	margin-top: 220px;
	font-size: 22pt;
	left: 0;
}

.play_button {
	background: rgba(30, 30, 30, .6);
	width: 76px;
	height: 76px;
	border-radius: 75px;
	position: absolute;
	margin: 120px 242px;
	z-index: 33;
	cursor: pointer;

	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 5px 1px rgba(0, 0, 0, .3);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 5px 1px rgba(0, 0, 0, .3);
}

.play_button:before {
	content: "";
	background: rgba(30, 30, 30, .6);
	width: 60px;
	height: 60px;
	margin: 8px;
	border-radius: 36px;
	position: absolute;

	-webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 5px 1px rgba(0, 0, 0, .3);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 5px 1px rgba(0, 0, 0, .3);
}

.button_reflect {
	background: transparent;

	background: -webkit-linear-gradient(-69deg, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
	background: -moz-linear-gradient(-69deg, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
	background: -o-linear-gradient(-69deg, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
	background: -ms-linear-gradient(-69deg, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
	background: linear-gradient(-69deg, rgba(255, 255, 255, .1) 10%, rgba(255, 255, 255, .1) 50%,rgba(255, 255, 255, 0) 50%);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 100%;
}


.inner_arrow {
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 22px solid rgba(255, 255, 255, 1);
	margin: 18px 28px;
	position: absolute;
}

#choice_title {
	font-size: 16pt;
	text-align: center;
}

.cardChoice_holder {
	width: 735px;
	margin: auto;
	position: relative;
}

.card_holder {
	position: relative;
	width: 215px;
	height: 200px;
	margin: 0 15px;
	float: left;
	border-radius: 5px;
}

.card_wrap {
	background: rgba(250, 249, 245, .5);

	background: -webkit-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: -moz-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: -o-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: -ms-linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	background: linear-gradient(bottom, rgba(240, 240, 240, .6) 0%, rgba(255, 255, 255, .6) 100%);
	border-radius: 5px;
	width: 100%;
	height: 100%;
	cursor: default;
	padding-top: 1px;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
}


.change_pointer {
	cursor: pointer;
}

.card_frame {
	position: relative;
	width: 215px;
	height: 168px;
	margin: 0px;

}

.card_inner {
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(150deg, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(150deg, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(150deg, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(150deg, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(150deg, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	width: 100%;
	height: 100%;
	position: relative;
	border-radius: 5px;
	z-index: 33;

	-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

.card_logotype {
	background: url(http://androidgta5.com/img/card.png) no-repeat;
	width: 172px;
	height: 102px;
	position: absolute;
	z-index: 22;
}

.card_logotype1 {
	background: url(http://androidgta5.com/img/thumbnail-1.jpg) no-repeat;
	width: 210px;
	height: 165px;
	position: absolute;

	
border-radius: 5px 5px 5px 5px;
z-index: 33;
margin-left: 2.4px;
margin-top: 2px;
}

.card_logotype2 {
	background: url(http://androidgta5.com/img/thumbnail-2.jpg) no-repeat;
	width: 210px;
	height: 165px;
	position: absolute;

	
border-radius: 5px 5px 5px 5px;
z-index: 33;
margin-left: 2.4px;
margin-top: 2px;}

.card_logotype3 {
	background: url(http://androidgta5.com/img/thumbnail-3.jpg) no-repeat;
	width: 210px;
	height: 165px;
	position: absolute;

	
border-radius: 5px 5px 5px 5px;
z-index: 33;
margin-left: 2.4px;
margin-top: 2px;}

.card_amount {
	position: absolute;
	bottom: 3px;
	left: 5px;
	text-align: left;
	margin: auto;
	font-size: 13pt;
	font-weight: 600;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	z-index: 66;
}

.card_frame-shadow {
	background: transparent;
	width: 100%;
	height: 0;
	margin: auto;
	position: absolute;
	border-radius: 100%;
	bottom: 0;

	-webkit-box-shadow: 0 -2px 13px 5px rgba(0, 0, 0, .2);
	box-shadow: 0 -2px 13px 5px rgba(0, 0, 0, .2);
}

.card_frame-shadow:before {
	content: "";
	width: 90%;
	height: 0;
	position: absolute;
	left: 9px;
	border-radius: 100%;

	-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4), 0 0 20px 1px rgba(0, 0, 0, .5);
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, .4), 0 0 20px 1px rgba(0, 0, 0, .5);
}

.card_frame-shadow:after {
	content: "";
	background: transparent;

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .4) 0%, rgba(22, 76, 148, 0) 100%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .4) 0%, rgba(22, 76, 148, 0) 100%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .4) 0%, rgba(22, 76, 148, 0) 100%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .4) 0%, rgba(22, 76, 148, 0) 100%);
	background: linear-gradient(top, rgba(22, 76, 148, .4) 0%, rgba(22, 76, 148, 0) 100%);
	width: 100%;
	height: 25px;
	border-radius: 5px;
	top: 0;
	position: absolute;
}

.card_reflection {
	background: transparent;

	background: -webkit-linear-gradient(-61deg, rgba(255, 255, 255, .02) 10%, rgba(255, 255, 255, .05) 50%,rgba(255, 255, 255, 0) 50%);
	background: -moz-linear-gradient(-61deg, rgba(255, 255, 255, .02) 10%, rgba(255, 255, 255, .05) 50%,rgba(255, 255, 255, 0) 50%);
	background: -o-linear-gradient(-61deg, rgba(255, 255, 255, .02) 10%, rgba(255, 255, 255, .05) 50%,rgba(255, 255, 255, 0) 50%);
	background: -ms-linear-gradient(-61deg, rgba(255, 255, 255, .02) 10%, rgba(255, 255, 255, .05) 50%,rgba(255, 255, 255, 0) 50%);
	background: linear-gradient(-61deg, rgba(255, 255, 255, .02) 10%, rgba(255, 255, 255, .05) 50%,rgba(255, 255, 255, 0) 50%);
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 5px;
	z-index: 33;
}

.card_proceed, .card_proceed_after {
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	width: 100%;
	padding: 5px 0;
	font-weight: 600;
	position: absolute;
	bottom: 0px;
	font-size: 12pt;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
}

.card_proceed:hover, .available_code:hover {
	background: rgba(22, 76, 148, .8);

	background: -webkit-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
}

.stop_animation {
	opacity: .7;
}

.content_holder {
	position: relative;
	width: 660px;
	margin: auto;
	text-align: center;
	border-radius: 5px;
}

.content_title {
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	width: 100%;
	position: relative;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
}

.content_title-text {
	padding: 5px;
	font-size: 11pt;
	font-weight: 400;
	text-transform: uppercase;
}

.content_title-text span {
	font-weight: 600;
}

.content_description span, li h1 {
	color: #426da6;
}

.content_description {
	background: rgba(255, 255, 255, .97);

	background: -webkit-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -moz-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -o-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -ms-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	width: 100%;
	height: auto;
	margin-top: -1px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
}

.content_description ul {
	padding: 15px;
}

.content_description li {
	margin-bottom: 20px;
}
.content_description a{color:#333;}

.proceed {
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);

	width: auto;
	height: auto;
	border: none;
	display: block;
	padding: 8px 16px;
	border-radius: 5px;
	font-weight: 400;
	color: white;
	text-align: center;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, .3);
	cursor: pointer;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
}

.proceed[disabled] {
	cursor: default;
}

.proceed:hover:not([disabled]) {
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(bottom, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
}

.proceed:active:not([disabled]) {
	color: #000;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}

/* -------------------------------------------
<-- Middle Styling - CLOSE
------------------------------------------ */


/* -------------------------------------------
--> Footer Styling - OPEN
------------------------------------------ */

footer {
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	width: 100%;
	position: relative;
	overflow: hidden;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	overflow: hidden;
	font-weight: 600;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0 2px 5px -2px rgba(0, 0, 0, .8), inset 160px 0 120px -40px rgba(87, 167, 218, .6), inset -160px 0 120px -40px rgba(87, 167, 218, .6);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0 2px 5px -2px rgba(0, 0, 0, .8), inset 160px 0 120px -40px rgba(87, 167, 218, .6), inset -160px 0 120px -40px rgba(87, 167, 218, .6);
}

footer li {
	position: relative;
	display:inline-block;
	padding: 6px 8px;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	text-align: center;
}

footer li:nth-child(1) {
	text-align: left;
}

footer li:nth-child(n+2) {
	float: right;
}

footer a:hover {
	color: #003d63;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}

/* -------------------------------------------
<-- Footer Styling - CLOSE
------------------------------------------ */


/* -------------------------------------------
--> Fileice Gateway Override - OPEN
------------------------------------------ */

#fancybox-close, #fancybox-bg-nw, #fancybox-bg-w,
#fancybox-bg-sw, #fancybox-bg-s, #fancybox-bg-se,
#fancybox-bg-e, #fancybox-bg-ne, #fancybox-bg-n {
    background: none repeat scroll 0 0 transparent !important;
    display: none !important;
}

#fancybox-outer {
    background: none repeat scroll 0 0 transparent !important;
}

#fancybox-overlay {
    display: none !important;
}


/* -------------------------------------------
<-- Fileice Gateway Override - CLOSE
------------------------------------------ */


/* -------------------------------------------
--> CleanFiles Gateway Override - OPEN
------------------------------------------ */

.cf_w {
	background-color: transparent !important;
}

.cf_w_bg {
	background-color: #555 !important;
	opacity: .7 !important;
	filter: alpha(opacity = 70) !important;
}

.cf_w_check {
	display: none;
}

/* -------------------------------------------
<-- CleanFiles Gateway Override - CLOSE
------------------------------------------ */


/* -------------------------------------------
--> Miscellaneous Styling - OPEN
------------------------------------------ */

::selection {
	background: rgba(22, 76, 148, .5);
	color: #fff !important;
}

::-moz-selection {
	background: rgba(22, 76, 148, .5);
	color: #fff !important;
}

.custom_overlay {
	position: fixed;
	height: 100%;
	width: 100%;
	background: #ccc;
	z-index: 100;
	display: none;
	opacity: 0.7;
	top: 0;
	left: 0;
}

/* -------------------------------------------
<-- Miscellaneous Styling - CLOSE
------------------------------------------ */



/* -------------------------------------------
--> Miscellaneous Styling for JS Plugins <--
------------------------------------------ */



/* -------------------------------------------
--> Plugin 1 OPEN - 'denPop'
------------------------------------------ */


#den-bg {
	display:none;
	position:fixed;
	_position:absolute; /* hack for IE 6*/
	height:100% !important;
	width:100%;
	top:0;
	left:0;
	background: #ccc;
	z-index:998;
}
#den-main {
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	border-radius: 5px;
	position:fixed;
	top:220px;
	_position:absolute;
	display:none;
	width:370px;
	z-index:999;
	padding:0;
	text-align:center;
	font-size:12px;
	top: 34% !important;
	left: 0 !important;
	margin: 0 auto !important;
	right: 0 !important;
}
#den-wrap {
	background: rgba(255, 255, 255, .97);

	background: -webkit-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -moz-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -o-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -ms-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	width: 100%;
	height: auto;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	margin: auto;
	margin-top: -1px;
	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
}
#den-title{
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	width: 100%;
	position: relative;
	color: #fff;
	height: 30px;
	overflow: hidden;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 7px 0px;
	text-transform: uppercase;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
}
#den-buttons {
	margin: 0 auto;
	padding: 25px 0px 5px 5px;
	position: relative;
	width: 240px;
	height: 20px;
}
#den-bottom{
	padding:15px 0;
}
#den-counter{
	padding: 9px 5px 3px;
	font-size: 9pt;
	font-weight:400;
	line-height:10px;
	font-style: italic;
	text-align: center;
}

#den-count { color: #426da6; }

.den-button{
	float:left;
	width:120px;
}
.step-clear{
	clear:both !important;
}

#denPop-logo {
	background: url(../img/denPop/logo.png);
	width: 337px;
	height: 31px;
	margin: auto;
	position: relative;
}

/* -------------------------------------------
<-- Plugin 1 CLOSE - 'denPop'
------------------------------------------ */


/* -------------------------------------------
--> Plugin 2 OPEN - 'Modalbox'
------------------------------------------ */

#modal {
	visibility: hidden;
	width: 360px;
	height: auto;
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	margin-top: -100px !important;
	margin-left: -180px !important;
	z-index: 101;
	border-radius: 3px;
}

#modalContent {
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	border-radius: 5px;
	text-align: center;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
	box-shadow: 0 0 5px rgba(0, 0, 0, .3);
}

#modalTitle {
	background: rgba(22, 76, 148, .9);

	background: -webkit-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -moz-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -o-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: -ms-linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	background: linear-gradient(top, rgba(22, 76, 148, .8) 50%, rgba(22, 76, 148, .9) 50%);
	width: 100%;
	position: relative;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), inset 0 0 0 2px rgba(255, 255, 255, .2), 0px 2px 5px -2px rgba(0, 0, 0, .4);
}

#modalTitle li {
	padding: 5px;
	font-size: 11pt;
	font-weight: 600;
	text-transform: uppercase;
}

#modalDescription {
	background: rgba(255, 255, 255, .97);

	background: -webkit-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -moz-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -o-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: -ms-linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	background: linear-gradient(bottom, rgba(240, 240, 240, .95) 0%, rgba(255, 255, 255, .97) 100%);
	width: 100%;
	height: auto;
	margin-top: -1px;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;

	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 2px rgba(255, 255, 255, .5);
}

#modalDescription li {
	margin: 0 auto;
	height: auto;
	padding: 10px;
}

.warning {
	font-size: 9pt;
	font-style: italic;
	font-weight: 400;
	color: #426da6;
	padding: 0 !important;
}

.lang_en .iAgree, .lang_en .iDisagree {
	position: relative;
	margin: 14px 40px;
	display: inline-block;
}

.lang_fr .iAgree, .lang_fr .iDisagree {
	position: relative;
	margin: 14px 23px;
	display: inline-block;
}

#buttonBlock {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 99;
}

/* -------------------------------------------
<-- Plugin 2 CLOSE - 'Modalbox'
------------------------------------------ */



.button {
  width: 231px;
  margin: 50px auto;
  position: relative;
    z-index: 2;

}

.button a {
  display: block;
  height: 60px;
  width: 231px;
  
  /*TYPE*/
  text-align: center;
	font: 10pt 'Strait', Tahoma, Verdana;
	font-weight: 400;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
  color: #fff;
  
  /*GRADIENT*/  
  background: url(../img/download.png);

}

.button a, p {
}

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 25px;
  	border-radius:6px;

  
  /*TYPE*/
  text-align: center;
	font: 10pt 'Strait', Tahoma, Verdana;
	font-weight: 400;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
  color: #fff;
  
  /*POSITION*/
  position: absolute;
  z-index: -1;
  
  /*TRANSITION*/  
  -webkit-transition: margin 0.5s ease;
     -moz-transition: margin 0.5s ease;
       -o-transition: margin 0.5s ease;
      -ms-transition: margin 0.5s ease;
          transition: margin 0.5s ease;
}

/*HOVER*/
.button:hover .bottom {
  margin: -10px 0 0 25px;
}

.button:hover .top {
  margin: -95px 0 0 25px;
  line-height: 35px;
}


/*ACTIVE*/
.button a:active {
	  background: url(../img/download.png);


}

.button:active .bottom {
  margin: -20px 0 0 25px;
      z-index: -1;
	  	border-radius:6px;


}

.button:active .top {
  margin: -70px 0 0 25px;
  	  	border-radius:6px;
		      z-index: -2;


}


<!-------- image pop up --------->



    /***Style the unordered list with the class 'enlarge'***/
    ul.enlarge{
    list-style-type:none; /*remove the bullet point*/
    }
    ul.enlarge li{
    display:inline-block; /*places the images in a line*/
    position: relative; /*allows precise positioning of the popup image when used with position:absolute - see support section */
    z-index: 0; /*resets the stack order of the list items - we'll increase in step 4. See support section for more info*/
    margin:10px 20px 0 20px; /*space between the images*/
    }



    /***In the HTML in step one we placed the large image inside a <span>, now we move it off the page until it's required***/
    ul.enlarge span{
    position:absolute; /*see support section for more info on positioning*/
    left: -9999px; /*moves the span off the page, effectively hidding it from view*/
    }



    /***Note: This styling will apply to both the thumbnail and popup image, unless you override these styles in step five***/
    ul.enlarge img{
    /*give the thumbnails a frame*/
    background-color:#fff; /*frame colour*/
    padding: 6px; /*frame size*/
    /*add a drop shadow to the frame*/
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    /*and give the corners a small curve*/
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }

 ul.enlarge li:hover{
z-index: 50; /*places the popups infront of the thumbnails, which we gave a z-index of 0 in step 1*/
cursor:pointer; /*changes the cursor to a hand*/
}
/***We bring the large image back onto the page by reducing left from -9999px (set in step 2) to figures below***/
ul.enlarge li:hover span{ /*positions the <span> when the <li> (which contains the thumbnail) is hovered*/
top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
/***To make it look neater we used :nth-child to set a different left distance for each image***/
ul.enlarge li:hover:nth-child(2) span{
left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px;
}



    /***Override the styling of images set in step 3 to make the frame smaller and the background darker***/
    ul.enlarge span img{
    padding: 2px; /*size of the frame*/
    background: #ccc; /*colour of the frame*/
    }

    /***Style the <span> containing the framed images and the caption***/
    ul.enlarge span{
    /**Style the frame**/
    padding: 10px; /*size of the frame*/
    background:#eae9d4; /*colour of the frame*/
    /*add a drop shadow to the frame*/
    -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
    -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
    box-shadow: 0 0 20px rgba(0,0,0, .75);
    /*give the corners a curve*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:8px;
    /**Style the caption**/
    font-family: 'Strait', sans-serif; /*Droid Sans is available from Google fonts*/
    font-size:.9em;
    text-align: center;
    color: #495a62;
    }