/*fonts:

font-family: 'Karla', sans-serif; <-- body
font-family: 'Raleway', sans-serif; <-- titles/buttons

*/

/*----------------------
   RESET
----------------------*/
*{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, input, textarea, p, blockquote, th, td {margin:0; padding:0;font-family: 'Karla', sans-serif;color:#333333;}
table {border-collapse:collapse; border-spacing:0;}
img {border:0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style:normal; font-weight:normal;}
strong {font-weight:bold;}
em {font-style:italic;}
li {list-style:none;}
caption, th {text-align: left;}
h1, h2, h3, h4, h5, h6 {padding:0; margin:0;}
q:before, q:after {content: '';}
abbr, acronym {border:0; font-variant:normal;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input, textarea, select {font-family:inherit; font-size:inherit; font-weight:inherit; font-size:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display:block;}
audio, canvas, video {display:inline-block;}
p {font-family: 'Karla', sans-serif;font-size:18px;color:#7c7c7c;margin-top:10px;line-height:2px;}

.reqlink{display:inline-block;font-size:13px;background:#000000;color:#ffffff;padding:2px 8px;border-radius:2px;margin-left:10px;}

/*----------------------
   RESPONSIVE RESET
----------------------*/
img, embed, object, video {max-width:100%; height:auto;	width:auto\9; /* ie8 */}
.ie6 img, .ie6 embed, .ie6 object, .ie6 video {width:100%;}

/*----------------------
   CUSTOM COMMON SELECTORS
----------------------*/
.clear {clear: both;}
.bold {font-weight:700;}
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix {display:inline-block;}
* html .clearfix {height:1%;}
.clearfix {display:block;}
.float_left {float:left;}
.float_right {float:right;}
.text_center {text-align:center;}
.text_right {text-align:right;}
.text_left {text-align:left;}
.inline li {display:inline-block; list-style:none;	padding:0; margin:0;}
.reset {padding:0; margin:0; border:0;}
.reset_list {margin:0; padding:0; list-style:none;}
/* List Styles */
.list_no_style {
	list-style:none;
}

/* Vertical Align Anything */
.v_align {
	position:relative;
	top:50%;
	-webkit-transform:translateY(-50%);
  	-ms-transform:translateY(-50%);
  	transform:translateY(-50%);
}

.no_overflow {
	overflow:visible !important;
}

/*----------------------
   LAYOUT
----------------------*/

body {
	padding:0;
	margin:0;
	text-align:center;
}
.row{
	position: relative;
	margin-left: -11px;
	margin-right: -11px;
}
.row:after{
	content: "";
	clear:both;
	display: block;
}
.col{
	float: left;
	padding: 0 11px;
}
.col_right{
	float: right;
	padding: 0 11px;
}
.col_12{
	width: 12%;
}
.col_one_fifth{
	width: 20%;
}
.col_one_quarter{
	width: 25%;
}
.col_one_third{
	width: 33.33%;
}
.col_two_thirds{
	width: 66.66%;
}
.col_one_half{
	width: 50%;
}
.col_three_quarters{
	width: 75%;
}
.col_16{
	width: 16.666667%;
}
.col_40{
	width: 40%;
}
.col_60{
	width: 60%;
}
.col_65{
	width: 65%;
}
.col_70{
	width: 70%;
}
#clipper {
	width:100%;
	overflow:hidden;
}
.left-section {
	margin-left:15px;
}
.break {display:block;}

.lookup{display:none;border:solid 1px #dedede;box-shadow:2px 2px 4px #dedede;padding:5px;background:#ffffff;max-height:300px;overflow:auto;}
.lookupitem{cursor:pointer;padding:5px;font-family: 'Karla', sans-serif;}
.lookupitem a{display:block;}
.lookupitem:hover{background:#F1F4F8;}

.labelbutton{font-size:12px;padding:4px 6px;background:#111111;color:#ffffff;cursor:pointer;font-family: 'Karla', sans-serif;text-decoration:none;}

#page {
	width:100%;
	text-align:left;
	position: relative;
	margin-left: 0;
	transition: margin-left 0.25s ease-in-out;
}

.cwidth {
	width:1140px;
	margin:auto;
	text-align:left;
}

.hr {
	width:80%;
	border-bottom:solid 1px #d1d1d1;
	margin:20px auto;
}


.quotecol{float:left;width:13%;margin-right:1%;}

.commodityterm{border:solid 1px #dedede;border-radius:4px;padding:10px;margin-bottom:10px;color:#333333;font-family: 'Karla', sans-serif;font-size:14px;}

.carditem{margin-bottom:10px;}

/* ------------------------------------------
	HEADER
------------------------------------------ */
.transition_all{
	transition: all 0.5s ease-in-out;
}

#header {
	background:url('images/header-background.png') top center no-repeat;
}
#header-left{
	background-color:#ffffff;
	float:left;
	width:25%;
	height:65px;
	position:relative;
	overflow:hidden;

}
#header-triangle {
	background-color:#008080;
	width:120px;
	height:120px;
	position:absolute;
	top:0;
	right:-80px;
	-ms-transform: rotate(35deg); /* IE 9 */
    -webkit-transform: rotate(35deg); /* Safari */
    transform: rotate(35deg); /* Standard syntax */
}
#header-right{background-color:#008080;
	float:left;
	width:75%;
	height:65px;
}
#logo img {
	width:144px;
	margin-top:12px;
}

/* ------------------------------------------
	MENU
------------------------------------------ */
#mmenu{
	padding-left:30px;
}

#mmenu:after {
	content: "";
	clear:both;
	display: block;
} 
.menuitem {
	font-family: 'Karla', Arial, sans-serif;
	font-size:18px;
	padding:30px 35px 0 35px;
}

.menuitem a,
.menuitem a:hover,
.menuitem a:visited,
.menuitem a:active{
	color:#9ac7ae;
	text-transform:uppercase;
	font-weight:400;
	text-decoration:none;
	-webkit-transition:color .2s;
	-moz-transition:color .2s;
	transition:color .2s;
}

.menuitem a:hover {
	color:#ffffff;
}

.mobile_nav {
	opacity: 0;
	visibility: hidden;
	position: absolute;
	right: 0;
	z-index: 1000001;
	cursor: pointer;
}

#hidden_close_box{
	width: 100%;
	height: 100%;
	position: fixed;
	left: -250px;
	display: none;
	z-index: 1000002;
	cursor: pointer;
}

#mobile_menu{
	width: 250px;
	height: 100%;
	position: fixed;
	right: -250px;
	top: 0;
	background: #e3e3e3;
	color: #333333;
	z-index: 1000002;
	padding: 25px 0;
	transition: right 0.25s ease-in-out;
}

	.ham {width:30px;height:auto;padding-top:20px;}

#mobile_menu .float_left {float:none;}
#mobile_menu .float_right {float:none;}
#mobile_menu .menuitem {
	padding:10px 0 10px 30px;
}
#mobile_menu .menuitem a{
	color:#333333;
	font-size:20px;
}
.menupolicy{
	text-transform:uppercase;
}
#policydrop{
	color:#9ac7ae;	
	transition:color .2s;
}
#policydrop:hover, #policydrop:active, #policydrop:visited {
	color:#fff;	
}
#policydrop span{
	border:none;	
}
#policydroplist{
	overflow:hidden;	
}
#policydroplist ul{
	margin-top:13px;	
}
/* ------------------------------------------
    FORMS
------------------------------------------ */

.btn {
	display:inline-block;
	line-height:35px;	
	padding:0 10px;
	font-family: 'Raleway', Arial, Helvetica, Sans-Serif;
	font-weight:700;	
	font-size:14px;
	text-transform:uppercase;
	text-decoration:none;
	text-align:center;
	background:#2b3740;
	color:#ffffff;
	cursor:pointer;
	border:none;
	vertical-align:top;
	-webkit-transition:background-color 0.5s ease;
    -moz-transition:background-color 0.5s ease;
    -o-transition:background-color 0.5s ease;
    transition:background-color 0.5s ease;
    padding:10px 50px;
    margin-top:10px;
    margin-bottom:30px;
}

.btn:hover {
	background:#415361;
}


/* ----------------------------------
    LOGIN PAGE
---------------------------------- */
#loginview, #subpage, #passresetview {padding-top:70px;}
.error_message.p3{color:#9B1B30;font-family:Arial,sans-serif;}

.title {
	font-family: 'Raleway', sans-serif;
	font-size:32px;
	font-weight:700;
	text-transform:uppercase;
}
.centerbox_narrow {
	margin:0 auto;
	width:420px;
	text-align:center;
}

.centerbox_narrow .underline {
	margin:10px auto;
}

.underline {
	width:36px;
	border-bottom:solid 1px #E9B44C;
	margin:10px 0;
}

.form_desc {
	font-family: 'Karla', sans-serif;
	font-size:18px;
	color:#7c7c7c;
	margin-top:10px;
	line-height:24px;
}
.label {
	font-family: 'Karla', sans-serif;
	font-size:14px;
	font-weight:700;
	color:#7c7c7c;
	text-align:left;
	padding-top:24px;
	padding-bottom:8px;
}

.single_label {
	width:364px;
	margin:0 auto;
}

.input {
	padding-left:8px;
	font-family: 'Karla', sans-serif;
	font-size:18px;
	color:#333333;
	border:solid 1px #dae0e7;
	background-color:#f1f4f8;
	height:48px;
}

input:disabled{background:#e8e8e8;}

.dropdown{
	color:#333333;
	border:solid 1px #dae0e7;
	height:48px;
	line-height:32px;
	padding-left:5px;
	padding-right:5px;
	box-sizing:border-box;		
}

.input:focus {
	outline-width:1px;
	outline-color:#008080;
}

.single_input {
	width:364px;

}

.second_cta{
	width:364px;
	margin:0 auto;
	text-align:right;
	padding-top:10px;
	padding-bottom:10px;
}

.second_cta a,
.second_cta a:hover,
.second_cta a:visited,
.second_cta a:active{
	color:#008080;
	-webkit-transition:color .2s;
	-moz-transition:color .2s;
	transition:color .2s;
	text-decoration:none;
}

.second_cta a:hover{
	color:#009294;
}

.desc_link{
	color:#008080;
	text-transform:uppercase;
	-webkit-transition:color .2s;
	-moz-transition:color .2s;
	transition:color .2s;
	text-decoration:none;
}

.desc_link:hover {
	color:#789b88;	
}

.thankyou {
	margin-top:20px;
}

/* ----------------------------------
    QUOTE PAGE
---------------------------------- */

.agentinfo{
	margin-bottom:20px;
	background:#f6f6ff;
	border:solid 1px #9999ff;
	padding:20px 10px;
}

#quote {
	margin-top:70px;
}

.red {
	color:#9B1B30;
}

.crest {
	width:100px;
	margin:5px 40px 0 0;
}

#quote .label {
	text-align:right;
	font-size:16px;
	padding:12px 20px 0 0;
	color:#505050;
}

.row {margin-top:20px;}

#quote .input {
	padding-left:8px;
	font-family: 'Karla', sans-serif;
	font-size:18px;
	color:#333333;
	border:solid 1px #dae0e7;
	background-color:#ffffff;
	padding:10px 10px;
	width:100%;
	height: auto;
}

.full_width{
	width:364px;
	margin-right:20px;
}

.half_width {
	width:182px;
	margin-right:20px;
}

.input_description {
	text-align:left;
	font-size:16px;
	padding-top:12px;
	font-family: 'Karla', sans-serif;
	color:#7c7c7c;
}

.auxtext {
	font-family: 'Karla', sans-serif;
	color:#333333;
}
.center {text-align:center;}
.quote-text {
	text-align:center;
	font-family: 'Karla', sans-serif;
	color:#333333;
	font-size:18px;
	margin-top:20px;
}

.quote-amount {
	text-align:center;
	font-family: 'Karla', sans-serif;
	color:#333333;
	font-size:30px;
	margin:10px 0;
}

.editcert-country {
	font-family: 'Karla', sans-serif;15
	color:#333333;
	font-size:18px;
	margin-top:5px;
}

#quotelist {
	font-family: 'Karla', sans-serif;
	margin-left:15%;
}
.quoterow.header {
	font-weight:bold;
}
#emailcertform input.link {
	background:none;
	border:none;
	text-decoration:underline;
}
#emailcertform input.link:hover {
	cursor:pointer;
}
.quotecol.col5 a {
	color: #008080;
    text-transform: uppercase;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    transition: color .2s;
    text-decoration: none;
}
.quotecol.col5 a:hover {
	color:#789b88;
}

.quoterow {
	padding:2px 0;
}

.pager {
	margin-bottom:20px;
}

.pager a {
	color: #008080;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    transition: color .2s;
    text-decoration: none;
}

.pager a:hover {
	color:#789b88;
}

#certlist {
	font-family: 'Karla', sans-serif;
	margin-left:5%;
}
.quotecol.col0{width:9%;}
.quotecol.col4{width:9%;}
.quotecol.col5 {width:35%;}

#policydrop {cursor:pointer;}
#policydrop .dropD_list {width:100px;}
#policydrop .dropD_list li a {color:#008080;}

/* ----------------------------------
    PAYMENT PAGE
---------------------------------- */
#certsummary, .certterms {
	font-family: 'Karla', sans-serif;
	font-size:18px;
}
.certterms{
	margin:0 20px;	
}
.certterms span, .certterms table, .certterms ol{
	font-size:18px !important;	
	line-height:1.3em;
	text-align:left !important;
}
.certterms table{
	width:100% !important;	
}
.certterms li{
	padding-top:10px;	
}
.certsubtitle{
	font-weight:bold;
	font-size:20px;
	padding-top:10px;	
}
#carditem {
	font-family: 'Karla', sans-serif;
}

#payform .row {
	font-family: 'Karla', sans-serif;
}


/* ----------------------------------
    ACCOUNT (PAGE)
---------------------------------- */
#account {
	margin-top:70px;
	font-family: 'Karla', sans-serif;
}
.account_label{
	width:16.667%;
	display:inline-block;
	text-align:right;
	margin-right:7px;
	font-weight:bold;
}
.account_input, .account_disabled_input{
	width:33.333%;	
	display:inline-block;
	margin:0 15px;
    color: #555;
}
.account_input{
	height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
.account_submit{
	margin:0 15px;	
}
.form_group{
	width:100%;	
	margin-bottom:15px;
}
#account .title {
	width:80%;
	margin:0 auto;
}	

/* ----------------------------------
    DROPDOWNS (SELECT)
---------------------------------- */
.dropD_container{
    width: 100%;
    position: relative;
    cursor:  pointer;
    color: #333333;
    font-family: 'Karla', sans-serif;
	font-size:18px;
	/*background-color:#f1f4f8;*/

}
#signup-select.dropD_container{
	width: 364px;
	margin: 0 auto;
}
.dropD_container:before{
    content: "";
    position: absolute;
    right: 10px;
    top: 20px;
    z-index: 9;
    width: 0; 
    height: 0; 
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #000000;
    transition: all 0.25s ease-in-out;
}
.dropD_container > span{
    width: 100%;
    display: block;
    position: relative;
    z-index: 10;
    border:solid 1px #dae0e7;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:10px 10px;
    
    /*background:#ffffff;*/
    -webkit-transition:all 0.5s ease-in-out;
    -moz-transition:all 0.5s ease-in-out;
    -ms-transition:all 0.5s ease-in-out;
    -o-transition:all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
.dropD_list{
    background:#ffffff;
    margin-top: 20px;
    border: solid 1px #dae0e7;
}
.dropD_list li{
    padding:10px 10px;
}
.dropD_list li:hover{
    background:#f1f4f8;
}
.dropD_active .dropD_list{
    max-height: 400px;
    
}
.dropD_active > span{
    background:#000000;
}
.dropD_container_active:before{
    border-top: 7px solid #e1e1e1;
    transform: rotate(180deg);
}

/* ------------------------------------------
	FOOTER
------------------------------------------ */
#footer{
	max-width:660px;
	margin:0 auto;
	text-align:center;
}

#footer p {
	font-size:14px;
	margin-bottom:20px;
	line-height:24px;
}



	#hubnest{float: right; padding-top: 19px;}
	#hubnest a{text-decoration: none;font-size: 12px;color:#ffffff;opacity: 0.3;display: block; outline:0; border:0;}
	#hubnest span{float: left; display: block; margin-top: 3px; margin-right: 8px;}
	#hubnest img{width: 120px; outline:0; border:0;}

	
	/* ------------------------------------------ */

	@media screen and (min-width:20px){
		#page{width:100%;margin:0;}
		.cwidth{width:1100px;margin:0 auto;padding:0;}

	}


	/* ------------------------------------------ */
	
	@media screen and (max-width:1140px){

		.cwidth{width:auto;margin:0 10px;}

	}

	@media screen and (max-width:1100px){
		.menuitem {
			padding-left:20px;
			padding-right:20px;
		}

		#mmenu {padding-left:10px;}
	}

	@media screen and (max-width:980px){

		#header-left{
			width:30%;
		}

		#header-right{
			width:70%;
		}
	}
	@media screen and (max-width:940px){
		#mmenu {padding-left:0;}
		.menuitem {font-size:18px;padding:30px 15px 0 15px;}

	}	
	
@media screen and (max-width:910px){
	
	.quoterow.header{display:none;}
	.quoterow{margin-bottom:10px;border-bottom:solid 1px #dedede;padding-bottom:10px;}
	.col0, .col1, .col2 {width:32%;margin-right:1%;}
	.col3, .col4, .col5 {width:32%;margin-right:1%;}
}
	
@media screen and (max-width:850px){
	.form_desc .break {display:inline;}
	#quote form .col_one_quarter,#quote form .col_three_quarters {
		float:none;
	}
	#quote form .col_one_quarter{
		width:100%;
	}
	#quote form {margin-left:20%;}
	#quote .label {
		text-align:left;
		padding:0 0 8px 10px;
	}

	.form_desc {
		width:100%;
	}
	.menuitem {font-size:16px;padding:30px 10px 0 10px;}
}	


	@media screen and (max-width:750px){
		#account_form {
			width:80%;
			margin:0 auto;	
		}
		.account_label{
			width:100%;	
			text-align:left;
			margin-right:0;
		}
		.account_input{
			width:100%;	
			margin: 0 0;
		}
		
	}
	@media screen and (max-width:730px){
		.mobile_nav {
			display:block;
			opacity: 1;
			visibility: visible;
			right: 20px;
		}
		#header-left{width:45%;}
		#header-right{width:55%;}
		#mmenu {display:none;}
	}
	@media screen and (max-width:700px){
		#header-left{width:35%;}
		#header-right{width:65%;}
	}
	
	
	@media screen and (max-width:640px){
		.footer_col{width:50%;}
		.footerbreak1{display: none;}
		.footerbreak2{clear:both;}
	}


	
@media screen and (max-width:600px){
	.crest {margin-right:10px;}
	#quote form {margin-left:10%;}
	#quote form .col_three_quarters {width:90%;}
}	

@media screen and (max-width:500px){
	#quote .col_one_quarter,#quote .col_three_quarters {float:none;width:90%;}
	.crest{display:none;}
	.quote_heading {margin-left:8%;}
	#quote .title {font-size:30px;}
}

@media screen and (max-width:490px){
	#header-left{width:55%;}
	#header-right{width:45%;}
	.line2{display:block;padding-top:5px;}
	
	.col0, .col1, .col2, .col3, .col4, .col5 {width:48%;margin-right:1%;}	
}


@media screen and (max-width:460px){
	#loginview, #passresetview {margin-top:40px;}
	.centerbox_narrow,.single_label,.single_input,.second_cta{
		width:100%;
	}
	.quote_heading {margin-left:0;}
	#quote form {margin-left:11px;}
	.full_width{
		width:100%;
		margin-right:0;
	}

	.half_width {
		width:100%;
		margin-right:0;
	}
	#quote .col_three_quarters, #quote form .col_three_quarters {width:100%;}
	#quote .btn {width:100%;}
	#quote .title {font-size:24px;}
	
	#signup-select.dropD_container{
		width: 100%;
		margin: 0 auto;
	}
}

	@media screen and (max-width:400px){
		#header-left{width:65%;}
		#header-right{width:35%;}		
	}	

	@media screen and (max-width:320px){
		#header-left{width:70%;}
		#header-right{width:30%;}		
	}