@charset "utf-8";
/* CSS Document */

/* --------------------------
Cascading Style Sheets
-------------------------- */

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Lato);

/*Stylsheets*/
@import url("reset.css");
@import url("screen.css");

/* ==========================================================================
   1. HTML > BODY
   2. LAYOUT
   3. FORM
   4. ALTERNATE
   5. MOBILE
   ========================================================================== */


/* ==========================================================================
   1. HTML > BODY
   ========================================================================== */
html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}
body {
	font-family: 'Lato', Arial, Verdana, Helvetica, sans-serif;
	font-size: 14px;
	color: #000;
	overflow-x: hidden;
}


/* ==========================================================================
   2. LAYOUT
   ========================================================================== */
#container {
	display: block;
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: none;
	float: none;
	clear: none;
	overflow: hidden;
}
.wrapper {
	display: block;
	width: 960px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	float: none;
	clear: both;
	position: relative;
}
.item {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 20px;
	padding: 0 0 20px;
	float: left;
	clear: both;
	position: relative;
	background: url(images/hr.png) left bottom scroll no-repeat transparent;
} .item p {margin-top:5px;} .item legend {display:block;margin:0 0 5px;}
.help {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	background: none;
}
.alert {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	background: none;
}
#banner {
	display: block;
	width: 960px;
	height: 145px;
	margin: 0 auto;
	padding: 0;
	float: none;
	clear: both;
	position: relative;
	overflow: hidden;
	background: none;
}
#logo {
	display: block;
	width: 208px;
	height: 106px;
	margin: 19px 0 0;
	padding: 0;
	float: left;
	clear: none;
	position: relative;
	overflow: hidden;
	background: none;
}
#call {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	float: right;
	clear: none;
	position: relative;
	overflow: hidden;
	background: none;
}
#call p {
	display: block;
	width: 300px;
	height: auto;
	margin: 70px 0 0;
	padding: 0;
	float: left;
	clear: none;
	position: relative;
	font: normal 11px 'Lato', Arial, serif;
	color: #000;
}
#call a {
	display: block;
	width: auto;
	height: auto;
	margin: 60px 0 0;
	padding: 8px 0 0 0;
	float: left;
	clear: none;
	position: relative;
	font: normal 33px 'Lato', Arial, serif;
}
#steps {
	display: block;
	width: 100%;
	height: 64px;
	margin: 0 0 20px;
	padding: 0;
	float: none;
	clear: both;
	position: relative;
	background: #d5dce0;
	border: 0 none;
} #steps .item {width:border:0 none;}
#steps .step {
	display: block;
	width: 100%;
	max-width: 215px;
	height: 20px;
	margin: 0 -20px 0 0;
	padding: 22px 20px;
	float: left;
	clear: none;
	position: relative;
	color: #FFF;
	text-align: center;
}
.step#step1 {background:url(images/step1.png) right center scroll no-repeat transparent;background-size:100% 100%;z-index:4;}
.step#step2 {background:url(images/step2.png) right center scroll no-repeat transparent;background-size:100% 100%;z-index:3;}
.step#step3 {background:url(images/step3.png) right center scroll no-repeat transparent;background-size:100% 100%;z-index:2;}
.step#step4 {background:#b4bec4;}
.step.active {background:url(images/step1.png) right center scroll no-repeat transparent;background-size:100% 100%;}

.step a.stepLink {color:#fff!important;text-decoration:none;}
.step a.stepLink:hover {color:#fff!important;text-decoration:none;}



#topInfo {
	display: block;
	width: 90%;
	height: auto;
	margin: 0 0 20px;
	padding: 0 5% 0 5%;
	float: none;
	clear: both;
	position: relative;
	background: none;
}
h1 {
	font: normal 21px 'Lato', Arial, serif;
	color: #f48026;
	margin: 0 0 15px;
}

h2 {
	font: normal 16px 'Lato', Arial, serif;
	color: #f48026;
	margin: 0 0 15px;
}

#content {
	width: 709px;
}
#content .item {width:95%;padding:0 0% 20px 5%;}
#assistance {
	display: block;
	width: 221px;
	height: auto;
	margin: 0 0 20px;
	padding: 15px 10px;
	float: right;
	clear: none;
	position: relative;
	background: url(images/bg-assistance.png) left top scroll repeat transparent;
	
	/* Rounded */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;	
}
#assistance h3 {font-size:19px;margin:0 0 7px 7px;}
#assistance .img {display:block;margin:0 0 20px;}
#assistance  .hr {width:100%;margin:0 auto;}
.tick {
	display: block;
	width: 185px;
	min-height: 14px;
	margin: 0 0 20px;
	padding: 0 0 0 36px;
	float: none;
	clear: both;
	position: relative;
	background: url(images/tick.png) 5px top scroll no-repeat transparent;
}
.email {
	display: block;
	width: 185px;
	min-height: 18px;
	margin: 0 0 20px;
	padding: 10px 0 0 36px;
	float: none;
	clear: both;
	position: relative;
	background: url(images/email.png) left top scroll no-repeat transparent;
}
.question {
	display: block;
	width: 185px;
	min-height: 18px;
	margin: 0 0 20px;
	padding: 10px 0 0 36px;
	float: none;
	clear: both;
	position: relative;
	background: url(images/question.png) left top scroll no-repeat transparent;
}
#footer {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	float: left;
	clear: both;
	position: relative;
	background: url(images/bg-assistance.png) left top scroll repeat transparent;
	border-bottom: 32px solid #202324;
}
#links {
	display: block;
	width: 100%;
	height: auto;
	margin: 43px 0 20px;
	padding: 0;
	float: left;
	clear: both;
	position: relative;
	background: none;
}
#links a {display:block;float:left;margin:0 40px 20px 0;padding:0 0 5px;border-bottom:1px solid #FFF;font-size:11px;}
#details {
	display: block;
	width: 71%;
	height: auto;
	margin: 0 0 20px;
	padding: 0;
	float: left;
	clear: both;
	position: relative;
	background: none;
	font-size: 11px;
}
#payments {
	display: block;
	width: auto;
	height: auto;
	margin: 20px 0 0;
	padding: 0;
	float: left;
	clear: both;
	position: relative;
	background: none;
	font-size: 11px;
}
#payments img {margin:0 30px 20px 0;}
#calliden {
	display: block;
	width: 186px;
	height: 85px;
	margin: 0 auto 0;
	padding: 0;
	float: right;
	clear: both;
	position: relative;
	background: none;
}
.details {
	width: 100%;
	margin: 0 auto 20px;
	padding: 0;
	float: none;
	clear: both;
	position: relative;
	/*background: #FFF;*/
	background:url(images/bg-assistance.png) left top scroll repeat transparent;
}
/*.details tr:nth-child(odd) {background:url(images/bg-assistance.png) left top scroll repeat transparent;}*/
.details tr {border-bottom:20px solid #FFF;/*display:block;*/}
.details tr td {padding:5px 10px;/*display:inline-block;*/}
.details tr td:nth-child(odd) {width:40%;}
.details tr td:nth-child(even) {width:60%/*53%*/;}

# {
	display: block;
	width: 1000px;
	height: 100px;
	margin: 0 auto;
	padding: 0;
	float: none;
	clear: both;
	position: relative;
	overflow: hidden;
	background: none;
}

. {
	display: block;
	width: 1000px;
	height: 100px;
	margin: 0 auto;
	padding: 0;
	float: none;
	clear: both;
	position: relative;
	overflow: hidden;
	background: none;
}

/* Columns */
div.leftcol {
	display: block;
	float: left;
	width: 50%;
}
div.rightcol {
	display: block;
	float: left;
	width: 50%;
}
div.clearcol {
	display: block;
	float: left;
	width: 100%;
	clear: both;
}


/* ==========================================================================
   3. FORM
   ========================================================================== */
label {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 0 10px;
	padding: 0;
	float: left;
	clear: both;
	position: relative;
	background: none;
	font-size: 11px;
	line-height: 15px;
}
.customStyleBox,
.customStyleSelectBox {
	display: block;
	width: 96%;
	height: 20px;
	margin: 0;
	padding: 10px 2%;
	background: none;
	
	/* Rounded */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}
select {
	display: block;
	width: 110px;
	height: 58px;
	margin: 0 15px 10px 0;
	padding: 0 0 0 20px;
	line-height: 58px;
	float: left;
	clear: none;
	position: relative;
	overflow: hidden;
	border: 1px solid #d7d7d7;
	background: /*url(images/input.png) left center/100% 100% scroll no-repeat*/ #f2f4f6;
	vertical-align: middle;

	/*position: absolute;
	top: 0px;
	left: 0px;*/
	
	/* Rounded */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;	
}
/* Firefox */
@-moz-document url-prefix() {
	select {
		height: auto;
		padding: 20px 0 20px 15px;
	}
}
input[type="text"],
textarea {
	display: block;
	width: 395px;
	height: 38px;
	margin: 0;
	padding: 10px 20px;
	float: left;
	clear: both;
	position: relative;
	overflow: hidden;
	border: 1px solid #d7d7d7;
	background: /*url(images/input.png) left center/100% 100% scroll no-repeat*/ #f2f4f6;

	/* Rounded */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
} textarea {height:120px;}
input[type="text"]:hover,
input[type="text"]:focus {
	border: 1px solid #f48026;
	background: #FFF;
}

.small {width:110px;} .medium {width:205px;} .large {width:252px;}

.small input[type="text"] {width:88%;margin-bottom:20px;padding:10px 5%;}
.medium input[type="text"] {width:88%;margin-bottom:20px;padding:10px 5%;}
.large input[type="text"] {width:88%;margin-bottom:20px;padding:10px 5%;}

.error {
	display: block;
	width: 359px;
	min-height: 36px;
	margin: 12px 0 0;
	padding: 10px 20px 10px 56px;
	float: left;
	clear: both;
	position: relative;
	background: #ffffff;
    border: 3px solid #f23d3d;
	font: normal 12px 'Lato', Arial, serif;
	color: #f23d3d;

	/* Rounded */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	white-space: normal;
}
.error .tab {display:block;position:absolute;top:-12px;left:14px;}
.error .icon {display:block;position:absolute;top:10px;left:10px;}
input[type="button"],
input[type="submit"]  {
	display: block;
	width: 321px;
	height: 91px;
	margin: 0 12px 12px 0;
	padding: 0;
	float: left;
	clear: none;
	background: url(images/button.png) left center scroll no-repeat transparent;
	background-size: 100% 100%;
    border: 0 none;
	text-align: center;
	overflow: hidden;
	font: normal 12px 'Lato', Arial, serif;
	color: #000;

	/* TextShadow */
	-webkit-text-shadow: 0px 1px 2pxx #FFF;
	-moz-text-shadow: 0px 1px 2px #FFF;
	-ms-text-shadow: 0px 1px 2px #FFF;
	-o-text-shadow: 0px 1px 2px #FFF;
	text-shadow: 0px 1px 2px #FFF;

	/* Rounded */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	
	white-space: normal;
} input[type="button"].lrg , input[type="submit"].lrg {width:220px;height:70px;font-size:18px;} input[type="button"].sml, input[type="submit"].sml {width:179px;height:45px;}

input[type="button"]:hover ,
input[type="submit"].hover {
	background: url(images/button-hover.png) left center scroll no-repeat transparent;
	background-size: 100% 100%;
	cursor: pointer;
}

input[type="button"].active, 
input[type="submit"].active {
	background: url(images/button-active.png) left center scroll no-repeat transparent;
	background-size: 100% 100%;
	cursor: pointer;
	color: #FFF;
	
	/* TextShadow */
	-webkit-text-shadow: 0px 1px 2px #030303;
	-moz-text-shadow: 0px 1px 2px #030303;
	-ms-text-shadow: 0px 1px 2px #030303;
	-o-text-shadow: 0px 1px 2px #030303;
	text-shadow: 0px 1px 2px #030303;
}
input[type="checkbox"],
input[type="radio"] {
	display: block;
	float: left;
	margin: 0 5px 0 0;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #FFF;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #FFF;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #FFF;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #FFF;
}


/* ==========================================================================
   4. ALTERNATE
   ========================================================================== */
body#alternate #banner {width:100%;height:125px;background:#00aa8f;border-bottom:1px solid #FFF;}
body#alternate #banner .right {width:302px;height:125px;background:#00aa8f;}
body#alternate #logo {margin:25px 0 0 70px;width:188px;height:100px;}
body#alternate #topInfo {width:100%;padding:0;}
body#alternate #call {margin:0 0 25px;}
body#alternate #call p {margin:8px 0 10px;}
body#alternate #call a {margin:0;color:#00aa8f;}
body#alternate #call a:hover {color:#3399CC;}
body#alternate #assistance {background:#f2f4f6;border:1px solid #d5dce0;}
body#alternate .step.active,
body#alternate .step#step1 {background:#00aa8f;}
body#alternate input[type="button"].active {background:url(images/button-active2.png) left center scroll no-repeat transparent;background-size:100% 100%;}
body#alternate input[type="submit"].active {background:url(images/button-active2.png) left center scroll no-repeat transparent;background-size:100% 100%;}
body#alternate .tick {background:url(images/tick2.png) 5px top scroll no-repeat transparent;}
body#alternate .email {background:url(images/email2.png) left top scroll no-repeat transparent;}
body#alternate .question {background:url(images/question2.png) left top scroll no-repeat transparent;}
body#alternate a {color:#3399CC;text-decoration:none;}
body#alternate a:hover {color:#00aa8f;text-decoration:none;}
body#alternate h1 {color:#00aa8f;}
body#alternate h2 {color:#00aa8f;}
body#alternate input[type="text"]:hover,
body#alternate input[type="text"]:focus {border:1px solid #00aa8f;background:#FFF;}
body#alternate #footer {background: #f2f2f2;border:0 none;}
body#alternate #links {text-align:center;}
body#alternate #links a {display:inline-block;float:none;}
body#alternate #details {text-align:center;float:none;margin:0 auto 20px;}
body#alternate #payments {text-align:center;float:none;margin:0 auto 20px;}
body#alternate #calliden {width:188px;height:100px;text-align:center;float:none;margin:0 auto 0;}
a#SUA{
    text-align: center !important;
    margin-bottom: 16px !important;
}

/* ==========================================================================
   5. MOBILE
   ========================================================================== */

/****************** Adjustments ******************/

@media all and (max-width : 708px) {
	.wrapper {width:98%;}
	#content {width:100%;}
	#banner {width:100%;height:auto;}
	#banner .right {display:none;}
	#call {width:100%;float:none;}
	#call a {width:100%;float:none;margin:0 0 20px;text-align:center;}
	#call p {width:100%;float:none;margin:0 0 10px;text-align:center;}
	#logo {margin:0 auto;float:none;width:10px; height:10px}
	body#alternate #logo {margin:25px auto;width:10px; height:10px}
	.item {width:100%;}
	#content .item {width:100%;padding:0 0 20px;}
	#steps .step {max-width:25%;width:25%;padding:22px 0;margin:0;font-size:90%;}
	.step#step1 {background:#f48026;}
	.step#step2 {background:#4f5355;}
	.step#step3 {background:#888f93;}
	.step#step4 {background:#b4bec4;}
	.step.active {background:#f48026 !important;}
	body#alternate .step.active,
	body#alternate .step#step1 {background:#00aa8f !important;}
	.help {display:none;}
	#assistance {width:90%;min-width:221px;margin:0 auto 20px;padding:15px 5%;float:none;clear:both;}
	#assistance h3 {width:145px;font:normal 19px 'Lato', Arial, serif;color:#000;margin:0 auto 7px;padding:0;}
	#assistance .img {margin:0 auto 20px;}
	#assistance  .hr {margin:0 auto -10px;float:none;}
	.tick {width:125px;margin:0 auto 20px;}
	.email {width:125px;margin: 0 auto 20px;}
	.question {width:125px;margin: 0 auto 20px;}
	#details {width:100%;}
	#links a {display:block;width:50%;margin:0 auto 20px;float:none;clear:both;text-align:center;}
	select {
		display: block;
		width: 98%;
		height: 58px;
		margin: 0 auto 10px;
		padding: 0 0 0 2%;
		line-height: 58px;
		float: none;
		clear: both;
	}
	@-moz-document url-prefix() {
		select {
			height: auto;
			padding: 20px 0 20px 15px;
		}
	}
	input[type="text"],
	textarea {
		display: block;
		width: 94%;
		height: 38px;
		margin: 0 auto;
		padding: 10px 2%;
		float: none;
		clear: both;
	} textarea {height:120px;}
	input[type="text"]:focus {
		border: 1px solid #f48026;
		background: #FFF;
	}
	
	.error {width:80%;padding:10px 9% 10px 9%;margin:12px auto 0;float:none;clear:both;}
	.error .icon {display:none;}
	
	input[type="button"],
	input[type="submit"] {
		display: block;
		width: 100%;
		height: 91px;
		margin: 0 auto 12px;
		padding: 0;
		float: none;
	} 
	input[type="button"].lrg, input[type="submit"].lrg{width:100%;height:70px;font-size:18px;} input[type="button"].sml, input[type="submit"].sml {width:100%;height:45px;}
	.left, .right {width:100%;float:none;margin:0 auto;}
	
	#details {text-align:center;}
	#payments {text-align:center;}
	#calliden {float:none;}
}

@media all and (min-width : 709px) and (max-width : 959px) {
	.wrapper {width:98%;}
	#content {width:74%;}
	#assistance {width:23%;padding:15px 1%;}
	#assistance h3 {width:145px;font:normal 19px 'Lato', Arial, serif;color:#000;margin:0 auto 7px;padding:0;}
	#assistance .img {width:100%;margin:0 auto 20px;}
	#assistance  .hr {margin:0 auto -10px;float:none;}
	.item {width:100%;}
	#content .item {width:100%;padding:0 0 20px;}
	#steps .step {max-width:25%;width:25%;padding:22px 0;margin:0;font-size:90%;}
	.step#step1 {background:#f48026;}
	.step#step2 {background:#4f5355;}
	.step#step3 {background:#888f93;}
	.step#step4 {background:#b4bec4;}
	.step.active {background:#f48026 !important;}
	body#alternate .step.active,
	body#alternate .step#step1 {background:#00aa8f !important;}
	.help {display:none;}

	.tick {width:125px;margin:0 auto 20px;}
	.email {width:125px;margin: 0 auto 20px;}
	.question {width:125px;margin: 0 auto 20px;}
}

.mobile-hide		{ display: none; }
.mobile-only 		{ display: block; }




/* ==========================================================================
   6. HELP
   ========================================================================== */

.ui-dialog-title { font-size: 14px;}
.ui-dialog-content { font-family: Arial, serif; font-size: 11px;}


/*  ================================  ALTERNATE: Mobile Devices ============================================  */

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

	.fixed			{ width:100%; background:green; }

/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 and high pixel ratio devices ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* @end */