@import url('https://use.typekit.net/ywn1djp.css');

html {
	background: #eee;
	margin: 0;
	padding: 0;
	overflow-y: scroll; /* so show/hides don't shift page horizontally */
}
body {
	background: white;
	color: #555;
	max-width: 960px;
	margin: 0 auto;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	padding: 0;
	font-size: 18px;
}

/*---------------------------------------------------------------------------*/
/* General Default Styles */
/*---------------------------------------------------------------------------*/

/* block elements */
h1 { font-size: 2.058823529411765rem; margin-top: 0.5em;   margin-bottom: 0.5em;   }
h2 { font-size: 1.411764705882353rem; margin-top: 0.625em; margin-bottom: 0.625em; }
h3 { font-size: 125%; margin-top: 0.8em;   margin-bottom: 0.8em;   }
h4 { font-size: 100%; margin-top: 1em;     margin-bottom: 1em;     }
h5 { font-size: 100%; margin-top: 1em;     margin-bottom: 1em;     }
h6 { font-size: 100%; margin-top: 1em;     margin-bottom: 1em;     }
h1, h2, h3, h4, h5  {
	color: #092c74;
	font-weight: 700;
	font-family: Effra, Arial, Helvetica, sans-serif !important;
}
h1,h2{text-transform: none;}

h1.inspira, h2.inspira, h3.inspira, h4.inspira, h5.inspira, h6.inspira {
	font-weight: 900;
	line-height: 110%;
}
h4.inspira, h5.inspira, h6.inspira {
	font-size:     112%;
	margin-top:    0.893em;
	margin-bottom: 0.893em;
}

/* most block elements */
p, ul, ol, dl, table.dataTable, table.formTable { margin-top: 1em; margin-bottom: 1em; }

/* lists with additional spacing between each of their elements */
ul.halfSpaced > li { margin-top: 0.5em; margin-bottom: 0.5em; }
ol.halfSpaced > li { margin-top: 0.5em; margin-bottom: 0.5em; }
ul.spaced     > li { margin-top: 1em;   margin-bottom: 1em;   }
ol.spaced     > li { margin-top: 1em;   margin-bottom: 1em;   }
dl.halfSpaced > dt, dl.halfSpaced > dd { margin-top: 0.5em; margin-bottom: 0.5em; }
dl.spaced     > dt, dl.spaced     > dd { margin-top: 1em;   margin-bottom: 1em;   }

ul.lessIndent {
	margin-left: 0;
	padding-left: 0;
}
ul.lessIndent > li {
	margin-left: 1.5em;
	padding-left: 0;
}

/* links */
a:link, a:visited { color: #c54b25; font-family: Arial; font-size:18px; text-decoration: none; }
a:link img, a:visited img { border: 0; }
a:hover { color: #652713; text-decoration: underline; }
a:active { color: black; }

/* forms */
form {
	margin-top: 0;
	margin-bottom: 0;
}
input, button, select, textarea {
	font-family: "Arial", "Helvetica", sans-serif;
	font-size: 100%;
	color: #555;
}
select, input[type='text'], input[type='password'], textarea {
	border: 1px solid #e4e4e4;
	padding: 5px;
}

table {
	border-spacing: 0; /* analogous to cellspacing="0" on a <table>. */
}
td {
	padding: 0;   /* analogous to cellpadding="0" on a <table>. */
}

/* data tables */
table.dataTable {
	border-left: 1px solid #ccc;
	border-top: 1px solid #ccc;
}
table.dataTable th, table.dataTable td {
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 2px 8px;
}
table.dataTable th {
	vertical-align: bottom;
	text-align: left;
}
table.dataTable td {
	vertical-align: baseline;
}

/* tables within forms */
table.formTable td {
	vertical-align: baseline;
	padding-right: 1em;
}
table.formTable textarea {
	vertical-align: top;
}

/* our nifty rounded-corner buttons */
.blueButton {
	background: #3b73b9;
	border-radius:         0.5em;
	-moz-border-radius:    0.5em;
	-webkit-border-radius: 0.5em;
	-ms-border-radius:     0.5em;
	line-height: 2em;
	padding-left: 0.75em;
	padding-right: 0.75em;
	color: white;
	border-width: 0;
	cursor: pointer;
}
a.blueButton {
	display: inline-block;
	text-decoration: none;
	color: white;
}
.blueButton:hover {
	color: white;
	background: #89abd5;
}
.blueButton:active {
	background: black;
}

.blueButton2 {
		font-size: 0.9411764705882353rem;
    font-family: Effra, Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
    background-color: #1a63a2;
    padding: 0.875em 2em 0.9375em;
    color: #fff !important;
    text-align: center;
    max-width: 100%;
    text-decoration: none !important;
    display: inline-block;
    margin: 0 0 1em;
    border: 0;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    text-transform: uppercase;
    -webkit-transition: background-color 300ms ease-out;
    -moz-transition: background-color 300ms ease-out;
    -ms-transition: background-color 300ms ease-out;
    -o-transition: background-color 300ms ease-out;
    transition: background-color 300ms ease-out;
    line-height: normal;
    border-radius: 0;
}

.blueButton2:hover {
  background-color: #103B62;
}

.whiteButton {
	background: white;
	border-radius:         0.5em;
	-moz-border-radius:    0.5em;
	-webkit-border-radius: 0.5em;
	-ms-border-radius:     0.5em;
	line-height: 2em;
	padding-left: 0.75em;
	padding-right: 0.75em;
	color: #3b73b9;
	border-width: 0;
	cursor: pointer;
}
a.whiteButton {
	display: inline-block;
	text-decoration: none;
	color: #3b73b9;
}
.whiteButton:hover {
	color: #89abd5;
	background: white;
}
.whiteButton:active {
	background: black;
}

/*---------------------------------------------------------------------------*/
/* Styles for Everything Except For The Content */
/*---------------------------------------------------------------------------*/

.masthead {
	padding: 20px 40px;
}

@media screen and (max-width: 700px) {
	.masthead {
		padding: 10px 5%;
	}
	.masthead img.mainMastheadImage {
		width: 80%;
		height: auto;
	}
}

@media screen and (max-width: 400px) {
	.masthead {
		padding: 10px 5%;
	}
	.masthead img.mainMastheadImage {
		width: 80%;
		height: auto;
	}
}

.topNavigation {
  font-size: 0.803rem;
	
	padding: 16px 40px; /* adjust right/left padding as menu changes. */
	background-color: #092c74;
}

@media screen and (min-width: 641px) {
	.topNavigation {
	  font-size: 0.9rem;
	}
}

.topNavigation a:link, .topNavigation a:visited {
	text-decoration: none;
	text-transform: none;
	font-family: Effra, Arial, Helvetica, sans-serif !important;
	font-weight: 900;
	font-size:20px;
	color: white;
	position: relative;
}

.topNavigation a:hover:after {
		content: '';
    width: 100%;
    background: #FFF;
    height: 2px;
    position: absolute;
    bottom: -4px;
    left: 0;
    display: block;
}

/* for initial implementation of topNavigation */
.topNavigation ul {
	display: block;
	margin: 0; padding: 0;
}
.topNavigation ul > li {
	display: inline-block;
	margin: 0 0 0 20%;  /* adjust left margin as menu changes. */
	padding: 0;
}
.topNavigation ul > li:first-child {
	margin-left: 0;
}

/* for second implementation of topNavigation */
.topNavigation table {
	width: 100%;
	table-layout: auto;
	margin: 0;
}
.topNavigation table td {
	padding: 0 5rem 0 0;
	white-space: nowrap;
	display: inline-block;
}

@media screen and (max-width: 540px) {
	.topNavigation table td {
		padding: 5px 3rem 0 0;
	}
}


.topNavigation table td.space {
	display: none;
	visibility: hidden;
	width: 50%; /* will collapse as needed and still be equal spacing between regular cells */
}

@media screen and (max-width: 640px) {
	.topNavigation {
		padding: 10px 5%;
		font-size: 100%;
	}

	/* first implementation */
	.topNavigation ul > li {
		margin-left: 2em;
	}
}

.breadcrumbs {
	border-bottom: 1px solid #e8e8e8;
	background: #f7f7f7;
	border-top: 1px solid white;
	padding: 10px 40px;
}
.breadcrumbs p {
	margin-top: 0;
	margin-bottom: 0;
	text-indent: -2em;
	margin-left: 2em;
}
.breadcrumbs a:link,
.breadcrumbs a:visited {
	text-decoration: none;
	white-space: nowrap;
}
.breadcrumbs .separator {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

@media screen and (max-width: 640px) {
	.breadcrumbs {
		padding: 10px 5%;
	}
	.breadcrumbs p {
		text-indent: -1em;
		margin-left: 1em;
	}
}

.footer {
	margin-top: 1em;
	font-size: 12px;
}
.footer #footerlinks {
	text-align:center;
	background:#eee;
	padding-top:2em;
}
.footer #footerlinks a {
	font-size:14px;
}
.footer .copyright {
	border-top: 1px solid #eee;
	background: #eee;
	padding-bottom: 1em;
	text-align: center;
}

/*---------------------------------------------------------------------------*/
/* Gross Layout of Content */
/*---------------------------------------------------------------------------*/

.section {
	padding: 20px 40px;
}
.section.withNoHorizontalPadding {
	padding-left: 0;
	padding-right: 0;
}
.section.withNoVerticalPadding {
	padding-top: 0;
	padding-bottom: 0;
}
.section.withNoPadding {
	padding: 0;
}

@media screen and (max-width: 640px) {
	.section {
		padding: 10px 5%;
	}
}

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

.floatProductType {
	float: left;
	width: 14.5%;
	padding-left: 1%;
	padding-right: 1%; 
	text-align: center;
	height: 196px;
	margin-top: 1em;
	margin-bottom: 1em;
}
.floatProductType img.thumb {
	display: block;
	margin: 0 auto;
}
.floatProductType span.title {
	display: block;
	font-family: Effra, Arial, Helvetica, sans-serif !important;
	font-size: 17px;
	line-height: 16px;
	font-weight: bold;
	text-transform: none;
}
.floatProductType a:link,
.floatProductType a:visited {
	text-decoration: none;
}
@media screen and (max-width: 800px) {
	.floatProductType {
		width: 112px;
		padding-right: 8px;
		padding-left: 8px;
		height: 156px;
	}
	.floatProductType img.thumb {
		margin-bottom: -40px;
	}
}

/*---------------------------------------------------------------------------*/
/* Tabs */
/*---------------------------------------------------------------------------*/

table.tabs {
	border-bottom: 1px solid #ccc;
	table-layout: fixed;
	font-size: 18px;
	min-height: 2em;
	border-left: 1px solid #ccc;
}
table.tabs td.tab {
	border-right: 1px solid #ccc;
	padding: 0.5em 1em;
	vertical-align: bottom;
}
table.tabs td.tab.selected {
	font-weight: bold;
	color: black;
}
table.tabs td.tab a {
	text-decoration: none;
}
table.tabs td.tab.selected a {
	color: black;
}

/*---------------------------------------------------------------------------*/
/* Support page content */
/*---------------------------------------------------------------------------*/

div.support h2.country {
	font-size: 18px;
	padding-bottom: 0.5em;
	border-bottom: 1px dotted #ccc;
	margin-bottom: 1em;
	margin-top: 2em;
	font-weight: 900;
	text-transform: uppercase;
}
div.support h3 {
	font-size: 17px;
	color: #111;
	font-family: "Escrow", "Palatino Linotype", "Book Antiqua", Palatino, serif !important;
	font-style: italic;
	margin-bottom: 0.25em;
}

div.support h3 + p {
	margin-top: 0;
}
div.support h3 span.note {
	font-weight: normal;
	font-size: 14px;
	display: block;
}


/*---------------------------------------------------------------------------*/
/* Show/hides.  We use vertical padding instead of margins within in
   order to avoid sudden vertical shifts while show/hiding. */
/*---------------------------------------------------------------------------*/

ul.withShowHides {
	margin-top: 1em;
	margin-bottom: 1em;
}
ul.withShowHides > li {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 1em;
}
ul.withShowHides > li .answer {
	font-size: 18px;
}
ul.withShowHides p {
	margin-top: 0;
	margin-bottom: 0;
	padding-bottom: 1em;
}

.withShowHides .showHideDiv {
	display: none;
}
a.showHideToggle {
	cursor: pointer;
	font-size: 18px;
	color: #c54b25;
	font-family: Effra, Arial, Helvetica, sans-serif;
	text-transform: none;
}

/*---------------------------------------------------------------------------*/
/* Products */
/*---------------------------------------------------------------------------*/

h2.productSection {
	font-size: 14px;
	color: black;
	margin-top: 2em;
	margin-bottom: 1em;
	text-transform: uppercase;
}
div.productModel {
	float: left;
	width: 23%;
	padding-right: 1.75%;
	height: 250px;
	overflow: none;
	font-size: 12px;
	margin-top: 1em;
	margin-bottom: 2em;
}
div.productModel p.photo {
	text-align: center;
}
div.productModel p.sku {
	margin-bottom: 0;
}
div.productModel ul {
	margin-top: 0;
	margin-bottom: 0;
}

/*---------------------------------------------------------------------------*/
/* Contact Form */
/*---------------------------------------------------------------------------*/

table.contactUsFormTable {
	width: 100%;
}

table.contactUsFormTable td {
	padding: 0.45em 1em 0.45em 0;
}
table.contactUsFormTable td.fieldName {
	width: 30%;
	white-space: nowrap;
	text-align: right;
	font-family: Effra, Arial, Helvetica, sans-serif !important;
	font-weight: 800;
    text-transform: none;
    font-size: 0.8823529411764706rem;
    color: #092c74;
}
table.contactUsFormTable .almostFullWidth {
	width: 95%;
}


/*---------------------------------------------------------------------------*/
/* Utility CSS Classes */
/*---------------------------------------------------------------------------*/

.inspira          { 	font-family: Effra, Arial, Helvetica, sans-serif !important;}
.blue             { color: #3b73b9; }
.center           { text-align: center; }
.right            { text-align: right; }
.bold             { font-weight: bold; }
.italic           { font-style: italic; }
.emphasis         { font-style: italic; }
.strong           { font-weight: bold; }

.font12           { font-size: 12px; }
.font16           { font-size: 16px; }

.show-for-small { display: none; }

/* for most simple two-column, three-column, and four-column layouts
   that we can let collapse on narrower screens. */
.oneHalfColumn    { float: left; padding-right: 3%; width: 46.50%; }
.oneThirdColumn   { float: left; padding-right: 3%; width: 30.00%; }
.oneQuarterColumn { float: left; padding-right: 3%; width: 21.75%; }
.oneFifthColumn   { float: left; padding-right: 2%; width: 17.80%; }
.oneSixthColumn   { float: left; padding-right: 2%; width: 14.50%; }

.oneHalfColumn.borderRight    { width: 43.50%; margin-right: 3%; }
.oneThirdColumn.borderRight   { width: 27.00%; margin-right: 3%; }
.oneQuarterColumn.borderRight { width: 18.75%; margin-right: 3%; }
.oneFifthColumn.borderRight   { width: 15.80%; margin-right: 2%; }
.oneSixthColumn.borderRight   { width: 12.50%; margin-right: 2%; }

.oneHalfColumn.borderLeft     { width: 40.50%; margin-left: 3%; padding-left: 3%; }
.oneThirdColumn.borderLeft    { width: 24.00%; margin-left: 3%; padding-left: 3%; }
.oneQuarterColumn.borderLeft  { width: 15.75%; margin-left: 3%; padding-left: 3%; }
.oneFifthColumn.borderLeft    { width: 13.80%; margin-left: 2%; padding-left: 2%; }
.oneSixthColumn.borderLeft    { width: 10.50%; margin-left: 2%; padding-left: 2%; }

@media screen and (max-width: 640px) {
	.oneHalfColumn    { float: none; padding-right: auto; width: auto; }
	.oneThirdColumn   { float: none; padding-right: auto; width: auto; }
	.oneQuarterColumn { float: none; padding-right: auto; width: auto; }
	.oneFifthColumn   { float: none; padding-right: auto; width: auto; }
	.oneSixthColumn   { float: none; padding-right: auto; width: auto; }

	.oneHalfColumn.borderRight    { width: auto; margin-right: auto; }
	.oneThirdColumn.borderRight   { width: auto; margin-right: auto; }
	.oneQuarterColumn.borderRight { width: auto; margin-right: auto; }
	.oneFifthColumn.borderRight   { width: auto; margin-right: auto; }
	.oneSixthColumn.borderRight   { width: auto; margin-right: auto; }

	.oneHalfColumn.borderLeft     { width: auto; margin-left: auto; padding-left: auto; }
	.oneThirdColumn.borderLeft    { width: auto; margin-left: auto; padding-left: auto; }
	.oneQuarterColumn.borderLeft  { width: auto; margin-left: auto; padding-left: auto; }
	.oneFifthColumn.borderLeft    { width: auto; margin-left: auto; padding-left: auto; }
	.oneSixthColumn.borderLeft    { width: auto; margin-left: auto; padding-left: auto; }

	.show-for-small { display: block; }
}

.floatLeft        { float: left;  }
.floatRight       { float: right; }
.clear            { clear: both; }
.clearLeft        { clear: left; }
.clearRight       { clear: right; }

.uppercase        { text-transform: uppercase; }

/* Add the "noBottomMargin" or "halfBottomMargin" CSS class to
   something like a heading, and the next block-level element (might
   be a paragraph) is moved closer! */
.noBottomMargin       { margin-bottom: 0     ; }
.noBottomMargin + *   { margin-top:    0     ; }
.halfBottomMargin     { margin-bottom: 0     ; }
.halfBottomMargin + * { margin-top:    0.5em ; }
.noTopMargin          { margin-top:    0     ; }

.borderRight  { border-right:  1px dotted #ccc; }
.borderLeft   { border-left:   1px dotted #ccc; }

.highlight { color: #73cecf !important; }