@font-face {
	font-family: Inter;
	src: url(/fonts/Inter-Regular.ttf);
}

@font-face {
	font-family: ProximaNova;
	src: url('/fonts/ProximaNova-Regular.woff2') format('woff2'), url('/fonts/ProximaNova-Regular.woff') format('woff');
}
@font-face {
	font-family: ProximaNovaSemibold;
	src: url('/fonts/ProximaNova-Semibold.woff2') format('woff2'), url('/fonts/ProximaNova-Semibold.woff') format('woff');
}
@font-face {
	font-family: ProximaNovaBold;
	src: url('/fonts/ProximaNova-Bold.woff2') format('woff2'), url('/fonts/ProximaNova-Bold.woff') format('woff');
}
@font-face {
	font-family: ProximaNovaItalic;
	src: url('/fonts/ProximaNova-RegularIt.woff2') format('woff2'), url('/fonts/ProximaNova-RegularIt.woff') format('woff');
}
@font-face {
	font-family: ProximaNovaBoldItalic;
	src: url('/fonts/ProximaNova-BoldIt.woff2') format('woff2'), url('/fonts/ProximaNova-BoldIt.woff') format('woff');
}

.title {
	font-family: ProximaNovaSemibold, sans-serif;
	color: #041417;
	font-size: 20px;
	line-height: 20px;
	text-transform: uppercase;
	margin: 48px 0 24px 0;
}

.intro {
	font-family: ProximaNovaBold, sans-serif;
	color: #041417;
	font-size: 40px;
	line-height: 49px;
	max-width: 675px; /* was 600, but the About page needs it longer */
	min-height: 191px;
}

/* rename this to heading? the existing heading style is used on the press page's featured headlines, the privacy policy and various product pages */
.big_heading, .big_heading_small {
	font-family: ProximaNovaBold, sans-serif;
	color: #041417;
	font-size: 40px;
	line-height: 49px;
	margin: 0;
}
.big_heading_small {
	font-size: 32px;
	line-height: 39px;
}
#footer .big_heading {
	font-size: 28px;
	line-height: 34px;
	margin: 0px 0px 18px 0px;
}

.heading, .heading_small, .product_link {
	font-family: ProximaNovaBold, sans-serif;
	color: #004B8D;
	font-size: 18px;
	line-height: 140%;
	text-transform: uppercase;
}
.heading_small {
	color: #041417;
	font-size: 16px;
	margin-bottom: 0;
}
.product_link {
	margin: 0;
}
.product_link a {
	color: #041417;
	text-decoration: none;
}

.subheading, .subheading_small, .contemplate_search_results_heading {
	font-family: ProximaNovaBold, sans-serif;
	color: #041417;
	font-size: 18px;
	line-height: 140%;
	margin: 0px 0px 8px 0px;
}
.subheading_small {
	font-size: 16px;
}
.contemplate_search_results_heading {
	margin-bottom: 14px;
}

.body, .body_big, .body_small, .body_smaller, .contemplate_search_results_preview { /* body_smaller is only used in one section on the home page */
	font-family: ProximaNova, Arial, Helvetica, sans-serif;
	color: #041417;
	font-size: 18px;
	line-height: 140%;
	margin-top: 0px;
}
.body a, .body_big a, .body_small a, .body_smaller a {
	color: #041417;
}
.body_big {
	font-size: 28px;
	line-height: 34px;
}
.body_small {
	font-size: 16px;
	line-height: 140%;
}

.faq_question, .faq_answer {
	font-family: Inter, Arial, Helvetica, sans-serif;
	color: #041417;
	font-size: 16px;
	line-height: 140%;
	margin-top: 0px;
}
.faq_question {
	font-weight: bold;
	margin-top: 24px;
}
.faq_answer a {
	color: #041417;
}

.list_name, .list_item {
	font-family: Inter, Arial, Helvetica, sans-serif;
	color: #041417;
	font-size: 16px;
	line-height: 140%;
	margin-top: 0px;
}
.list_name {
	color: #345FDF;
}
.list_item a {
	color: #041417;
}

.text_constraint, .contemplate_search_results_preview {
	max-width: 500px;
}

.background_alt {
	background-color: rgba(181, 208, 255, 0.4); /* was #E2EDFE, but that doesn't show the squiggle behind it */
}

.background_alt_curved {
	background-image: url(../graphics/templates/bg_content_small.png);
	background-size: 1440px 448px; /* we're not stretching this one because the pixellation looks obvious if we do */
	background-repeat: no-repeat;
	background-position: top;
}

.background_alt_squiggle {
	background-image: url(../graphics/templates/bg_squiggle.png);
	background-size: 100% 856px;
	background-repeat: no-repeat;
	background-position: 0px 50px;
}
.background_alt_squiggle.flipped {
	background-image: url(../graphics/templates/bg_squiggle_flipped.png);
}
.background_alt_squiggle.squeezed {
	background-size: 100% 100%;
}

.background_alt_squiggle_large {
	background-image: url(../graphics/templates/bg_squiggle_large.png);
	background-size: 100% 3769px;
	background-repeat: no-repeat;
	background-position: 0px 200px;
}

.background_alt_inverse {
	background: #F9F9FD;
}

.feature_box_full {
	background-color: #F8F9FD;
	height: 332px; /* 452 - padding */
	padding: 60px 60px; /* was 64px 104px */
}

.feature_box_half {
	background-color: #F8F9FD;
	height: 156px; /* 216 - padding */
	padding: 30px 60px; /* was 52px 60px */
}

.feature_box_half.top {
	margin-bottom: 20px; /* same as column_half, but it should really be 2% of the width */
}

.feature_box_half .body_big {
	margin-bottom: 10px;
}

.callout_box {
	padding: 24px;
	border: 2px solid #CFE7FF;
	border-radius: 10px;
}

.slider {
	display: flex;
	justify-content: space-between;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}

.slider_item {
	width: 260px; /* 350 - padding */
	height: 260px; /* 360 - padding */
	padding: 50px 45px 50px 45px;
	margin-right: 2%; /* was 24px */
	overflow: auto;
	flex-shrink: 0;
	scroll-snap-align: start;
}

div.button {
	background: url(../graphics/site/button_main_bg.gif);
	width: 210px;
	height: 39px;
	text-align: center;
}

a.button, input.button {
	/* the "important" flags here are needed because we're putting some buttons inside the top submenus */
	display: block; /* this lets us control the width of the buttons */
	/* float: left; this lets us place more than one on a line, which we can also do with the inline style, below */
	text-decoration: none;
	background: #FFC947 !important;
	border-radius: 8px;
	color: #041417 !important;
	width: 211px; /* 243 - 32 padding (padding is ignored for inline elements); this is a default; we may have to override it for particular buttons */
	padding: 16px !important; /* added to the line height, this gives a total height of 48px */
	font-family: ProximaNovaSemibold, sans-serif;
	font-size: 16px;
	line-height: 16px;
	text-align: center;
}
a.button.inverse, input.button.inverse {
	background: #FFFFFF !important;
	border: 4px solid #FFC947;
	padding: 12px !important; /* subtract the border width from the padding */
}
input.button {
	border: 0;
	cursor: pointer;
}
a.button.inline, input.button.inline {
	display: inline !important;
	width: auto !important;
}
.button.center {
	margin-left: auto;
	margin-right: auto;
}
.button.small {
	width: 168px; /* 200 - padding */
}
.button.large {
	width: 255px; /* 287 - padding */
}

/* we can use this when it's obvious that some text is a link */
a.text_button {
	color: #041417;
	text-decoration: none;
}
.hover_supported a.text_button:hover {
	color: #041417;
	text-decoration: underline;
}

.div_margins {
	margin-top: -12px;
}

.footer_link {
	font-family: ProximaNovaSemibold, sans-serif;
	font-size: 18px;
	line-height: 18px;
	color: #041417;
	margin: 0;
	padding: 0 0 16px 0;
}

.footer_link a {
	color: #041417;
	text-decoration: none;
}

.hover_supported .footer_link a:hover {
	color: #2849AB;
}


/* top menu */

#menu_top ul {
	list-style: none;
	font-family: ProximaNovaSemibold, sans-serif;
	font-size: 18px;
	line-height: 18px;
	color: #041417;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
}

#menu_top ul li {
	list-style: none;
	padding-bottom: 50px; /* this creates a hover area that extends to the top of the submenu */
	/* cursor: pointer; we need this if the main menu items aren't always links */
}

#menu_top ul li a {
	padding: 12px 24px;
	color: #041417;
	text-decoration: none;
}
/* #menu_top ul li:hover, #menu_top ul li a:hover, #menu_top ul li.active, #menu_top ul li.active a { we need double rules if the menu items aren't always links */
.hover_supported #menu_top ul li:hover a, #menu_top ul li a.active { /* active is used when using clicks instead of hovers on touchscreen devices */
	background: #0454A8;
	color: #FFFEFC;
}

/* top submenus */

#menu_top ul li ul {
	position: absolute;
	top: 76px; /* 120 - 44 header margin */
	left: -1000px; /* this plus the side padding makes the menu extend past the page edges to the window edges */
	width: 100%;
	padding: 34px 1000px;
	font-family: ProximaNovaSemibold, sans-serif;
	font-size: 18px;
	line-height: 18px;
	color: #FFFEFC;
	background: #0454A8;
	z-index: 10;
	display: none; /* we'll change this to flex from the hover rule or the click_menu_item function to show the submenu */
	justify-content: space-around;
}
.hover_supported #menu_top ul li:hover ul {
	display: flex;
}

/* the store submenu has a different design */
#menu_top ul li ul#top_store_desktop {
	padding-top: 40px;
	padding-bottom: 40px;
	color: #041417;
	background: #FFFFFF;
}

#menu_top ul li ul li {
	margin: 0;
	padding: 0;
}

#menu_top ul li ul li a {
	padding: 8px 12px 4px 12px;
	color: #FFFEFC !important;
}
#menu_top ul li ul#top_store_desktop li {
	text-align: center;
}
#menu_top ul li ul#top_store_desktop li a {
	color: #041417 !important; /* this handles the text links and the .button style */
	background: none;
}
#menu_top ul li ul#top_store_desktop strong {
	display: inline-block;
	padding: 40px 0 8px 0; /* this puts space above and below the product name */
}
.hover_supported #menu_top ul li ul li a:hover, #menu_top ul li ul li a.active { /* active is used when using clicks instead of hovers on touchscreen devices */
	color: #B5D0FF !important;
}

/* these were used for the custom mailing list form */
form#mailing_list {
	width: 420px;
	margin: 0 auto;
}
form#mailing_list p {
	text-align: left; /* in case the form is placed in a container that's centered */
}
form#mailing_list input.button {
	margin: 0 auto;
	padding: 16px; /* this overrides the input padding to match the button padding */
}


/* Shopify overrides */

.shopify-buy__product {
	width: 100%;
}
.shopify-buy__product-img-wrapper {
	width: 42% !important;
}
.shopify-buy__layout-horizontal:not(.no-image) .shopify-buy__product__title, .shopify-buy__layout-horizontal:not(.no-image) .shopify-buy__product__variant-title, .shopify-buy__layout-horizontal:not(.no-image) .shopify-buy__product__price, .shopify-buy__layout-horizontal:not(.no-image) .shopify-buy__product-description, .shopify-buy__layout-horizontal:not(.no-image) .shopify-buy__btn-and-quantity, .shopify-buy__layout-horizontal:not(.no-image) > .shopify-buy__btn-wrapper, .shopify-buy__layout-horizontal:not(.no-image) > .shopify-buy__quantity-container, .shopify-buy__layout-horizontal:not(.no-image) .shopify-buy__product__variant-selectors {
	margin-left: calc(42% + 25px)
}

.shopify-buy__product__title {
	font-family: ProximaNovaBold, sans-serif;
	color: #041417;
	font-size: 32px;
}

.shopify-buy__product__actual-price {
	font-family: ProximaNova, Arial, Helvetica, sans-serif;
	color: #041417;
	font-size: 22px;
}

.shopify-buy__product-description {
	font-size: 18px;
	color: #041417;
}

.shopify-buy__btn {
	font-family: ProximaNovaBold, sans-serif;
	font-size: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
	color: #041417;
	background-color: #FFC947;
	border-radius: 8px;
}
.shopify-buy__btn:hover {
	background-color: #FFC947;
}

.shopify-buy__quantity {
	font-family: ProximaNovaBold, sans-serif;
	font-size: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
	color: #041417;
	border-radius: 8px;
}


.contentfile_title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #004B8D;
	font-size: 18px;
	font-weight: bold;
}

.contentfile_fieldlabel {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	background: #004B8D;
	font-size: 12px;
	font-weight: bold;
}

.caption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 12px;
	margin-top: 0;
}

.search_results_heading {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #004B8D;
	font-size: 12px;
	font-weight: bold;
}

.search_results_preview {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: italic;
	color: #222222;
	font-size: 12px;
	line-height: 18px;
	margin-top: 0px;
}

.search_results_link {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
	color: #222222;
	font-size: 12px;
	line-height: 18px;
	margin-top: 0px;
}

ul, ol {
	padding-left: 20px;
}

li {
	margin-bottom: 5px;
}

.distribute {
	display: flex;
	justify-content: space-around;
}

table.list {
	border: none;
	border-collapse: collapse;
	margin-bottom: 10px;
}
table.list th {
	text-align: left;
}
table.list th.right {
	text-align: right;
}
table.list th, table.list td {
	border: none;
	padding: 2px;
}

table.borders {
	border-collapse: collapse;
}
table.borders td {
	padding: 10px;
	border: 2px solid #CCCCCC;
}

.row_heading {
	background: #CCCCCC;
}
.row_colored {
	background-color: #EEEEEE;
}
.row_clear {
	background-color: #FFFFFF;
}
.row_express {
	background-color: #66FF66;
}
.row_usps {
	background-color: #FFFF66;
}
.row_total {
	border-top: 1px solid #000000;
}

.form input, .form textarea, .form select {
	font-size: 16px;
	padding: 4px;
}

.form_element_full {
	width: 388px; /* 400 - padding - border */
	margin: 0;
}

.form_element_twothirds {
	width: 255px; /* 267 - padding - border */
	margin: 0;
}

.form_element_half {
	width: 188px; /* 200 - padding - border */
	margin: 0;
}

.form_element_third {
	width: 121px; /* 133 - padding - border */
	margin: 0;
}

.form_element_quarter {
	width: 88px; /* 100 - padding - border */
	margin: 0;
}

.form_element_date_menus {
	width: 64px;
	margin: 0;
}
.form_element_time_menus {
	width: 62px; /* this is a little smaller because of the colon between the hours and minutes */
	margin: 0;
}

/* position accessory buttons across from the field label and right-aligned with the field */
.field_label_with_buttons {
	position: relative;
}
.field_label_buttons {
	/* if we also add a form_element_* class to this element, we'll get the correct width */
	position: absolute;
	left: 0;
	text-align: right;
	font-size: 10px;
}

/* format the accessory buttons and the Today and Clear links in the date and time menus */
.field_label_buttons a, .date_menus a, .time_menus a {
	font-size: 10px;
	text-decoration: none;
}
.date_menus span, .time_menus span {
	top: -20px !important;
}

.progress_icon {
	padding: 80px 0;
	background: url(/graphics/site/progress.gif) center center no-repeat;
}

.stack_left {
	float: left;
	margin-right: 20px;
	margin-bottom: 14px; /* this matches the bottom margin of a body paragraph */
}
.stack_left.divider {
	margin-right: 10px;
	padding-right: 10px;
	border-right: 1px solid #CCCCCC;
}
.stack_left.divider_left {
	margin-left: -10px;
	padding-left: 10px;
	border-left: 1px solid #CCCCCC;
}

.stack_left.stack_tight {
	margin-right: 5px;
	margin-bottom: 5px;
}

.stack_left.stack_tighter {
	margin-right: 2px;
	margin-bottom: 2px;
}

.stack_left.stack_flush {
	margin-right: 0;
	margin-bottom: 0;
}

.stack_left.stack_last {
	margin-right: 0 !important;
}

.stack_right {
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
}

.stack_right.stack_tight {
	margin-left: 5px;
	margin-bottom: 5px;
}

.stack_right.stack_tighter {
	margin-left: 2px;
	margin-bottom: 2px;
}

.stack_right.stack_flush {
	margin-left: 0;
	margin-bottom: 0;
}

.stack_right.stack_last {
	margin-left: 0 !important;
}

.stack_flush_container {
	/* make a container that exceeds its normal size by the amount of the stack margin, to give the appearance of removing the final margin */
	margin-right: -16px;
}

.column_half img {
	/* this is awesome; thanks http://www.w3schools.com/css/css_rwd_images.asp */
	max-width: 100%;
	height: auto;
}

.column_half {
	float: left;
	margin-right: 2%;
	width: 48%; /* this is also set in the IE tweaks file */
	margin-bottom: 20px;
}

.column_third {
	float: left;
	margin-right: 2% !important;
	width: 31%;
	margin-bottom: 20px;
}

.column_fourth {
	float: left;
	margin-right: 2%;
	width: 23%;
	margin-bottom: 20px;
}

.column_fifth {
	float: left;
	margin-right: 2%;
	width: 18%;
	margin-bottom: 20px;
}

.column_last {
	margin-right: 0 !important;
}

.columns_flush_container {
	/* make a container that exceeds its normal size by the amount of the column gutter, to give the appearance of removing the final gutter */
	margin-right: -2%;
}

.shrink_to_fit {
	float: left;
}

.center {
	/* this centers the contents of a container, not the container itself */
	text-align: center;
}

.right {
	text-align: right;
}

.centered_fixed {
	margin-left: auto !important;
	margin-right: auto !important;
}

.centered_float {
	position: relative;
	float: right;
	left: -50%;
}

.centered_float_inner {
	position: relative;
	float: left;
	left: 50%;
}

.centered_vertical {
	position: relative;
}

.centered_vertical_inner {
	position: absolute;
	top: 50%;
}

.reset {
	clear: both;
}

.reset_left {
	clear: left;
}

.reset_right {
	clear: right;
}

.no_top {
	margin-top: 0px;
}

.no_bottom {
	margin-bottom: 0px;
}

.big_top {
	margin-top: 20px;
}

.big_bottom {
	margin-bottom: 20px;
}

.huge_top {
	margin-top: 50px;
}

.huge_bottom {
	margin-bottom: 50px;
}

.hide, .desktop_hide {
	display: none;
}

.transparent {
	opacity: 0.0;
	filter: alpha(opacity=0); /* IE */
}

.submit_hack {
	/* this allows us to add a standard submit button to all our forms so that IE and Firefox will submit when pressing Enter, and hide the button from users but not from the browsers */
	width:0px;
	height:0px;
	position: absolute;
	top: -1000px;
	left: -1000px;
}

.feedback_positive, .feedback_negative {
	font-family: Inter, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
	margin: 10px 0 10px 0;
}

.feedback_positive img, .feedback_negative img {
	margin: -1px 6px 0 0;
}

.feedback_positive {
	color: #00CC00;
}
.feedback_positive a {
	color: #00CC00;
}

.feedback_negative {
	color: #CC0000;
}
.feedback_negative a {
	color: #CC0000;
}

.highlight {
	color: #C507C8;
}

.mediumlight {
	color: #345FDF;
}

.debug {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	color: #999999;
}
.debug a {
	color: #999999;
}