/* green is #59893C    */
@charset "utf-8";
/* CSS Document */
/*-------------------------------------------------------*/
/* site-wide styles                                      */
/*-------------------------------------------------------*/

/* beweb standard CSS reset */
*, p {
	margin: 0;
	padding: 0;
	outline: 0;
}
/* set everything to 0 margin/padding -> makes it consistent across all browsers, especially p */

*, button, a {
	outline: none;
	-webkit-tap-highlight-color: transparent !important;
	-webkit-tap-highlight-color: rgba(0,0,0,0) !important;
	text-decoration: none;
}
/* turn off click highlight on mobile and desktop */

.normal ol, .mceContentBody ol, .normal ul, .mceContentBody ul {
	margin-left: 16px;
}

img {
	border: 0;
	max-width: 100%;
}

input, select {
	padding: 9px;
	font-family: 'ProximaNova', Arial, sans-serif;
	font-size: 18px;
}

textarea {
	font-size: 18px;
	padding: 5px;
	font-family: 'ProximaNova', Arial, sans-serif;
}

html {
	overflow-y: scroll;
	width: 100%;
}
/* prevent scrollbar disappearing making page jump */
table {
	margin: inherit;
}
/* end beweb standard CSS reset */

.screenreader-summary {
	position: absolute;
	top: -100px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	outline: none; /* Important, don't show an outline on-focus */
}

#thebody.faq #wrapper {
	overflow-x: unset;
	width: 100% !important;
}

/* --------------------------------------------------------------------------------------- */
/* inline document download icons for attachments in html content area */
/* --------------------------------------------------------------------------------------- */

.normal a[href$='.pdf'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/PDF_small.gif) no-repeat left;
}

.normal a[href$='.doc'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/doc_small.gif) no-repeat left;
}

.normal a[href$='.docx'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/doc_small.gif) no-repeat left;
}

.normal a[href$='.xls'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/xls_small.gif) no-repeat left;
}

.normal a[href$='.xlsx'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/xls_small.gif) no-repeat left;
}

.normal a[href$='.ppt'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/ppt_small.gif) no-repeat left;
}

.normal a[href$='.pptx'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/ppt_small.gif) no-repeat left;
}

.normal a[href$='.zip'] {
	padding-left: 20px;
	background: transparent url(images/filetypes/zip_small.gif) no-repeat left;
}

.pdf {
	padding-left: 23px;
	background: transparent url(images/filetypes/PDF_small.gif) no-repeat left;
	color: #10558a;
	font-weight: bold;
}
/* --------------------------------------------------------------------------------------- */

/* Pagingnav Frontend */
.pagination-wrapper {
	clear: both;
	padding: 15px;
}

.pagingnav-wrapper br {
	clear: both;
}

.pagingnav-wrapper .paging-pagestatus {
	display: none;
}

.pagination-wrapper a, .pagination-wrapper span, .pagingnav-wrapper .paging-pagestatus {
	font-family: 'ProximaNova', Arial, sans-serif;
	float: left;
	text-decoration: none;
	font-size: 14px;
	line-height: 24px;
	font-weight: normal;
	text-align: center;
	font-style: normal;
}

.pagination-wrapper a:hover {
	text-decoration: none;
}

/* Pagingnav Light theme */
.pagination-wrapper.pagingnav-light-theme a, .pagination-wrapper.pagingnav-light-theme span {
	color: #666;
	border: 1px solid #BBB;
	min-width: 14px;
	padding: 0 7px;
	margin: 0 5px 0 0;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}

.pagination-wrapper.pagingnav-light-theme span {
	background: #666;
	color: #FFF;
	border-color: #444;
	box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
	cursor: default;
}

.pagination-wrapper.pagingnav-light-theme a:hover {
	background: #FCFCFC;
}

.pagination-wrapper.pagingnav-light-theme .paging-pagestatus {
	color: #666;
	padding: 0 7px;
	margin: 0 5px 0 0;
}

.pagination-wrapper.pagingnav-light-theme .paging-ellipse {
	color: #666;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-weight: bold;
	cursor: default;
}

/* Pagingnav Dark theme */
.pagination-wrapper.pagingnav-dark-theme a, .pagination-wrapper.pagingnav-dark-theme span {
	color: #CCC;
	border: 1px solid #222;
	min-width: 14px;
	padding: 0 7px;
	margin: 0 5px 0 0;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	background: #555; /* Old browsers */
	background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */
	background: linear-gradient(top, #555 0%,#333 100%); /* W3C */
}

.pagination-wrapper.pagingnav-dark-theme span {
	background: #222;
	color: #FFF;
	border-color: #000;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
	cursor: default;
}

.pagination-wrapper.pagingnav-dark-theme a:hover {
	background: #444;
}

.pagination-wrapper.pagingnav-dark-theme .paging-pagestatus {
	color: #CCC;
	padding: 0 7px;
	margin: 0 5px 0 0;
}

.pagination-wrapper.pagingnav-dark-theme .paging-ellipse {
	color: #CCC;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	font-weight: bold;
	cursor: default;
}

/* Pagingnav Compact theme */
.pagination-wrapper.pagingnav-compact-theme a, .pagination-wrapper.pagingnav-compact-theme span,
.pagination-wrapper.pagingnav-compact-theme .paging-pagestatus {
	color: #333;
	border: 1px solid #AAA;
	border-right: none;
	min-width: 14px;
	padding: 0 7px;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}

.pagination-wrapper.pagingnav-compact-theme span {
	background: #bbbbbb; /* Old browsers */
	background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */
	background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */
	cursor: default;
}

.pagination-wrapper.pagingnav-compact-theme a:hover {
	background: #efefef; /* Old browsers */
	background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */
	background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */
}

.pagination-wrapper.pagingnav-compact-theme .pagingnav-previous {
	border-radius: 3px 0 0 3px;
}

.pagination-wrapper.pagingnav-compact-theme .pagingnav-next {
	border-right: 1px solid #AAA;
	border-radius: 0 3px 3px 0;
}

.pagination-wrapper.pagingnav-compact-theme .paging-ellipse {
	color: #333;
	background: #EAEAEA;
	padding: 0 10px;
	cursor: default;
}

/* Hide the pagination numbers on small screens */
@media (max-width: 570px) {
	.pagination-wrapper .paging-number, .pagination-wrapper .paging-ellipse {
		display: none;
	}

	.pagingnav-wrapper .paging-pagestatus {
		display: block;
	}
}

/*end Pagingnav Frontend*/

.breadcrumb ol {
	list-style: none;
}

.breadcrumb ol li {
	display: inline;
}

.breadcrumb ol li::after {
	display: inline;
	content: ">";
}

.breadcrumb ol li:last-child::after {
	display: none;
	content: "";
}

/* begin admin tinymce override */
body#tinymce {
	margin: 10px;
	background: #fff;
}
/* assuming content area has a white background, otherwise change this */
/*body#tinymce table{margin:0 0 10px 0;}*/
body#tinymce a:link {
	/*color:#003f96!important;*/
}

/* content tables */
.normal table {
	padding: 0;
	margin: 0 0 10px 0;
	border: 0;
	border-collapse: collapse;
}

.normal table td {
	padding: 5px;
	border: 0;
}

body#tinymce table, body#tinymce table td {
	border: 1px dashed #ccc; /* Specific for TinyMCE - Not displayed on front end */
}

.normal table.table-no-gridlines {
	padding: 0;
	margin: 0 0 10px 0;
	border: 0;
	border-collapse: collapse;
}

.normal table.table-no-gridlines td {
	padding: 5px;
	border: 0;
}

.normal table.table-small {
	padding: 0;
	margin: 0 0 10px 0;
	border: 0;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-collapse: collapse;
	color: #777;
	font-size: 12px;
}

body#tinymce table.table-small td, div.normal table.table-small td {
	padding: 5px;
	border: 0;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.normal table.table-gridlines {
	padding: 0;
	margin: 0 0 10px 0;
	border: 0;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	border-collapse: collapse;
}

.normal table.table-gridlines td {
	padding: 5px;
	border: 0;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

.normal table td p { /* FF fix */
	margin: 0;
}
/*end content tables*/

/* Not sure if it's needed */

.normal ol,
.normal ul {
	margin-left: 24px;
	padding: 0;
}

.normal ul {
	list-style: none outside none;
	margin-left: 24px;
	padding: 0;
	padding-left: 26px;
}

.content-container .normal ul li {
	font-size: 20px;
	color: #1e2225;
}

.normal ul li {
	list-style-type: disc;
	border-bottom: none !important;
	margin-top: 10px;
	padding: 0 0 0 13px !important;
	margin-left: 0;
}

.normal ol li {
	margin-top: 10px;
	padding-left: 13px;
	margin-left: 0;
}

.normal p.image-caption {
	font-style: italic;
	margin: 5px 0 15px;
	text-align: center;
}
/* end admin tinymce override */


/* savvy validate form validation styles */
.validation {
	display: none;
	position: relative;
}

.validation .validation_outer, .validation .outer {
	background: url(images/error_msg_arrow.png) 15px 19px no-repeat;
	padding-bottom: 12px;
	position: absolute;
	top: -37px;
	left: -35px;
	z-index: 99;
	width: auto !important;
}

.validation .validation_inner, .validation .inner {
	background: #e30418;
	font-weight: bold;
	font-size: 12px;
	line-height: 15px;
	color: #fff;
	padding: 5px 10px;
	border-radius: 4px;
	white-space: nowrap;
}

textarea + .validation .validation_outer {
	top: -29px;
}

.validation.autoPosition {
	position: absolute;
}

.validation.autoPosition .validation_outer, .validation.autoPosition .outer {
	left: auto;
	top: auto;
}
/* end savvy validate form validation styles */

/* Responsive table and image styles for mobile */
.responsive-table-scroll {
	overflow: auto;
}
/* applied automatically in common.js */
.responsive-image-scroll {
	overflow: auto;
}

.responsive-autoshrink {
	max-width: 100%;
}
/* applied automatically in common.js - apply this if you want an image to shrink to fit on small screens */

@media screen and (max-width: 800px) {
	html, body {
		-webkit-text-size-adjust: none;
	}
}

/* stripe along top to show if it is a staging server */
.StagingServer {
	background: yellowgreen;
	color: black;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	margin-bottom: 4px;
	position: relative;
}

.StagingServer.ConnLVE {
	background: red;
}

.OldBrowser {
	background: orange;
	color: black;
	font-size: 12px;
	text-align: center;
	vertical-align: middle;
	padding: 5px;
	margin-bottom: 4px;
}

.StagingServer .close {
	float: right;
	position: absolute;
	right: 5px;
	top: 3px;
	cursor: pointer;
}

/* Auto clearing rows */
.row:before, .row:after {
	display: table;
	line-height: 0;
	content: "";
}

.row:after {
	clear: both;
}

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

/* Grid Layout */
[class*="span"] {
	float: left;
	min-height: 1px;
	margin-left: 20px;
}
/* Default 12 column grid
.span12 { width: 1170px }
.span11 { width: 1070px }
.span10 { width: 970px }
.span9 { width: 870px }
.span8 { width: 770px }
.span7 { width: 670px }
.span6 { width: 570px }
.span5 { width: 470px }
.span4 { width: 370px }
.span3 { width: 270px }
.span2 { width: 170px }
.span1 { width: 70px } 

Custom Span
.spanMain { width: ???; }*/

/* Media Item = thumbail + header + intro. E.g News List */
.media, .media-body {
	overflow: hidden;
	*overflow: visible;
	zoom: 1;
}

.media, .media .media {
	margin-top: 15px;
}

.media:first-child {
	margin-top: 0;
}

.media-object {
	display: block;
}

.media-heading {
	margin: 0 0 5px;
}

.media > .pull-left {
	margin-right: 10px;
}

.media > .pull-right {
	margin-left: 10px;
}

.media-list {
	margin-left: 0;
	list-style: none;
}

.pull-right {
	float: right;
}

.pull-left {
	float: left;
}

/* File drag and paste css - dont really need this here because we will overwrite if we use on front end but is just an example */

.svyAttachmentCntr {
	width: 175px;
}


.svyPasteDragContainer {
	width: 170px;
	height: 200px;
}

.svyFileDragTarget {
	font-weight: bold;
	text-align: center;
	color: #555;
	cursor: default;
	border: 2px dashed #555;
	border-radius: 7px;
	width: 150px;
	height: 120px;
	position: relative;
	padding-top: 10px;
	max-height: 90%;
	max-width: 90%;
	background-size: 140px Auto;
	background-position: center;
	background-color: white;
}

.svyFileDragTarget img {
	max-height: 90%;
	max-width: 90%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.svyFiledragLive {
	font-weight: bold;
	text-align: center;
	color: #555;
	cursor: default;
	border: 2px dashed #555;
	border-radius: 7px;
	width: 150px;
	height: 120px;
	position: relative;
	padding-top: 10px;
	background-color: white;
	display: block;
	max-height: 90%;
	max-width: 90%;
	background-size: 140px Auto;
	background-position: center;
	background-color: white;
}

.svyFiledragLive img {
	max-height: 90%;
	max-width: 90%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* File drag and paste css */

.svyPasteDragContainer {
	width: 170px;
	height: 200px !important;
}

.svypasteLink {
	color: #0083b3 !important;
	clear: both;
}

.svyPasteDragContainer a {
	font-weight: normal !important;
	cursor: default !important;
	color: #0083b3 !important;
}

.svyFileDragTarget, .uploadedImage img {
	max-height: 90% !important;
	max-width: 90% !important;
	position: absolute !important;
	margin: auto !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

.pasteUploadTextContainer {
	width: 140px !important;
	height: 132px !important;
}

.svyFiledragLive, .uploadedImage {
	font-weight: bold !important;
	text-align: center !important;
	color: #555 !important;
	cursor: default !important;
	border: 1px dotted #555 !important;
	border-radius: 7px !important;
	width: 150px !important;
	height: 140px !important;
	position: relative !important;
	background-color: white !important;
	max-height: 90% !important;
	max-width: 90% !important;
	background-size: 140px Auto !important;
	background-position: center !important;
	background-color: white !important;
	margin-bottom: 10px !important;
	display: inline-block;
}

.svyFiledragLive, .uploadedImage p {
	white-space: normal !important;
}

.dragPasteText p {
	margin-top: 50px !important;
	white-space: normal !important;
	text-align: center;
}

.svyPasteArea {
	background-image: url("images/fancypastebg.png");
	background-size: 100px !important;
}

.svyDragArea {
	background-image: url("images/fileUploadBg.png");
}

.svyPasteText p {
	padding: 1px 3px 0px 3px !important;
	width: 100% !important;
	white-space: normal !important;
	text-align: center;
	white-space: normal !important;
	text-align: center;
	font-size: 12px !important;
	width: auto;
	z-index: 999999;
	color: #B5192E;
	font-size: 13px;
}

.svyDragPaste {
	background-image: url("images/fileUploadBg.png");
}

.svyFiledragLive img, .uploadedImage img {
	max-height: 90% !important;
	max-width: 90% !important;
	position: absolute !important;
	margin: auto !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
}

.svyWhiteText {
	color: white !important;
}

.imagePasteContainer {
	width: 164px !important;
}

/*File Upload Example*/
.svyFiledragLive, .uploadedImage {
	border: 3px dotted #ccc !important;
	float: left;
	clear: left;
	display: inline-block;
	width: 144px !important;
	height: 134px !important;
	xbackground-image: url("images/fileUploadBg.png");
}

.svyFiledragProgess {
	font-size: 11px !important;
	width: 140px;
	padding: 2px 5px !important;
	margin: 2px 0 !important;
	border-radius: 8px !important;
	background: #eee !important;
	margin-top: 5px !important;
	background-color: white !important;
	margin-top: 5px !important;
	border: 1px solid #CCC !important;
	clear: both;
}

.svyFiledragProgess p {
	height: 10px !important;
	padding: 3px !important;
	margin-bottom: 5px !important;
	margin-top: 2px !important;
}

.fancyBackground {
	xbackground-image: url(images/fancypastebg.png) !important;
	background-repeat: no-repeat !important;
	color: white !important;
	text-align: center !important;
	font-size: 12px !important;
}

.svyPasteArea {
	background-position: center !important;
	background-repeat: no-repeat !important;
	border: 1px dotted #black !important;
}

.svyPasteAreaText {
	margin-top: -10px !important;
	height: 130px;
	width: 140px;
}

.defaultSkin .svyPasteAreaText {
	margin-top: 0 !important;
}

.svyFiledragProgess p.success {
	background: #0c0 none 0 0 no-repeat !important;
}

.svyFiledragProgess p.failed {
	background: #c00 none 0 0 no-repeat !important;
}

.svyWhiteBg {
	xbackground-color: white !important;
}

.svyFiledragProgess span {
	background: #0c0 !important;
	display: inline-block !important;
	width: 0%;
	height: 10px !important;
	position: relative !important;
}

.svyPasteForm {
	height: 166px !important;
	width: 155px !important;
}

.svyPicContainer {
	width: 400px !important;
	margin-top: 5px;
}

.pasteImageLink {
	float: left !important;
}

.uploadedImage a {
	margin-top: 40px !important;
	display: block !important;
}

.svyAdminBanner {
	height: 45px;
	width: 100%;
	background-color: black;
	color: white;
}

.svyAdminBannerText {
	float: right;
	margin-left: 25px;
	padding-top: 11px;
	margin-right: 20px;
}

.svyAdminBannerNav {
	margin-left: 50px;
	float: left;
}

.svyAdminBannerNavImg {
	margin-top: 12px;
	float: left;
	margin-right: 10px;
}


.svyAdminBannerLink {
	float: left;
	margin-right: 30px;
	padding-top: 12px;
	xmargin-left: 25px;
}

.svyAdminBannerLogoutLink {
	padding-left: 25px;
}

.svyAdminBannerLink a {
	text-decoration: none;
}

.svyAdminBannerLink a:hover {
	color: white;
}

.svyAdminBannerLink img {
	margin-right: 10px;
}

.svyAdminTwichImg img {
	margin-top: -10px;
}

.svyAdminBannerImg {
	margin: 0 10px 0 10px;
	float: left;
	padding-top: 2px;
}

.svyFileUpload {
	opacity: 1;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	right: 0;
}

/*mobile mce views*/

.svyMobileLayout {
	margin: 10px;
	border-right: 3px dotted #aaa;
}

/*Responsive table and image styles for mobile*/
.responsive-table-scroll {
	overflow: auto;
}
/* applied automatically in common.js */

/*Sticky Footer*/
html, body {
	-webkit-overflow-scrolling: touch; /*jc added 20141210 fluid scrolling with footer*/
	z-index: 0; /*same as above*/
	height: 100%;
	background-color: #ffffff;
}

.visible {
	left: 0px;
}

.not-visible {
	left: 980px;
}

#wrapper {
	/*min-height: 100%;*/
	height: auto !important;
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	xmargin-bottom: -420px; /*Master value - make sure to change StickyFooter and StickyFooterPush */
}

#StickyFooter {
	max-height: 420px; /*Should match master value*/
}

#StickyFooterPush {
	height: 420px; /*Should match master value*/
	clear: both;
}
/*End Sticky Footer*/

/* Custom Site */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.cf:after {
	clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
	*zoom: 1;
}

.left {
	float: left;
}

.right {
	float: right;
}

body, .normal {
	font-family: 'ProximaNova', Arial, sans-serif;
	font-size: 17px;
	line-height: 150%;
	color: black;
}

.features {
	display: flex;
	flex-wrap: wrap;
}

.feature-item {
	font-size: 17px;
	line-height: 150%;
}

hr {
	border: none;
	border-bottom: 1px solid #d5d8bf;
}

h1,
.faux-h1 {
	font-family: 'ProximaNova', Arial, sans-serif;
	color: #59893C;
	font-size: 36px;
	padding: 10px 0;
	line-height: 150%;
	font-weight: normal;
}

blockquote h1 {
	font-family: 'ProximaNova', Arial, sans-serif;
	color: black;
	font-size: 26px;
	padding: 10px 0;
	line-height: 130%;
	font-weight: normal;
}

h2 {
	font-family: 'ProximaNova', Arial, sans-serif;
	color: #59893C;
	font-size: 22px;
	margin-bottom: 5px;
	font-weight: 600;
}

h3 {
	font-family: 'ProximaNova', Arial, sans-serif;
	font-weight: bold;
	font-size: 18px;
}

a {
	color: #59893C;
	text-decoration: underline;
}

.stores {
	/*border-top: 1px solid #d5d8bf;*/
	display: block;
	padding: 30px 20px;
	text-align: center;
}

.post-intro.stores {
	border: none;
}


#splash {
	height: 100%;
	min-height: 460px;
	position: relative;
	z-index: 1000;
}

#logo {
	max-width: 750px;
	width: 100%;
	display: block;
	margin: 5px auto;
	text-align: center;
}


#splash h1 {
	color: #ffffff;
	font-family: 'ProximaNova', Arial, sans-serif;
	font-size: 40px;
	font-weight: normal;
	line-height: 75%;
	padding: 0;
	text-align: center;
}

.text-shadow {
	-ms-text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.75);
	text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.75);
}

.image-shadow {
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}

img.app-logo {
	width: 103px;
}



#splash .intro {
	color: white;
	font-size: 18px;
	text-align: center;
	margin: 70px 0 20px;
}

#splash .intro .gradient {
	width: 100%;
	height: 130px;
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 45%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(45%,rgba(0,0,0,0.5)), color-stop(55%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45%,rgba(0,0,0,0.5) 55%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45%,rgba(0,0,0,0.5) 55%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45%,rgba(0,0,0,0.5) 55%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 45%,rgba(0,0,0,0.5) 55%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
	padding-top: 54px;
}

#splash a.cta {
	background-color: #000000;
	background-color: rgba(0,0,0,0.3);
	border: 1px solid white;
	-ms-border-radius: 8px;
	border-radius: 8px;
	color: white;
	display: block;
	font-size: 18px;
	margin: 0 auto;
	padding: 18px 34px;
	text-decoration: none;
	width: 240px;
	position: absolute;
	bottom: 50px;
	left: 0;
	right: 0;
}

#splash .slidedown-arrow {
	background-image: url(images/svg_scrolldown_arrow.svg);
	-webkit-animation: pulsate 2s ease-out;
	-webkit-animation-iteration-count: infinite;
	animation: pulsate 2s ease-out;
	animation-iteration-count: infinite;
	position: absolute;
	bottom: 15px;
	left: 0;
	right: 0;
}

.nav-wrap {
	position: relative;
	display: block;
	border-bottom: 1px solid #d5d8bf;
	padding: 15px 0;
	height: auto;
	background-color: rgba(255, 255, 255, 0.7);
	z-index: 999;
	transition: all 0.3s ease-out;
}

.nav-wrap.black-bg {
	background-color: black !important;
}

.nav-wrap.black-bg .brand-name {
	color: white !important;
	text-decoration: none;
}

@media screen and (min-width: 1024px) {
	.nav-wrap {
		padding: 5px 0;
	}
}

.home .nav-wrap {
	/*display: none;*/
}


.nav-wrap.fixed {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid #F5F5F7;
}

@media screen and (max-width: 768px) {
	.nav-wrap.fixed.stretched-nav {
		bottom: 0;
	}
}

.nav-wrap.fixed.over-black {
	background-color: transparent;
	border-bottom: 1px solid transparent;
}

.nav-wrap.fixed.over-black .brand-name {
	color: white;
}

.navwrap.fixed.over-black #main-nav li {
	background-color: black;
}

#main-nav a,
#footer a {
	transition: color 0.2s ease-in-out;
}

#main-nav a:hover,
#footer a:hover {
	color: #59893C;
}

.nav-wrap .nav-shadow {
	position: absolute;
	bottom: -12px;
	left: 0;
}

.nav-logo {
	color: #000000;
	font-family: 'ProximaNova',Arial,sans-serif;
	font-size: 24px;
	font-weight: bold;
	display: flex;
	align-items: center;
	text-decoration: none;
}

.nav-logo img {
	width: 40px;
	float: left;
}

.nav-logo span {
	float: left;
	font-family: 'ProximaNova';
	font-size: 20px;
}

.navigation-controls-container {
	display: flex;
	flex-basis: 100%;
	padding: 0 20px;
	justify-content: space-between;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	align-self: flex-start;
}

@media screen and (min-width: 1500px) {
	.navigation-controls-container {
		padding: 0;
	}
}

.navigation-items-container {
	width: 100%;
}

ul.nav {
	display: block;
	position: relative;
	background: transparent;
	padding: 20px;
	width: 100%;
	max-height: 660px; /* bigger than ever needed max height */
	z-index: 35;
	/* slide open/close with css3  */
	overflow-y: hidden;
	-webkit-transition-property: all; /* Safari */
	-webkit-transition-duration: 0.5s; /* Safari */
	-webkit-transition-timing-function: ease-in-out;
	transition-property: all;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

@media screen and (min-width: 768px) {
	ul.nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
}

ul.nav.closed {
	display: none;
}




ul.nav li {
	float: none;
	display: block;
	/*border-top: 1px dashed #ffffff;*/
}

@media screen and (min-width: 768px) {
	ul.nav li.search-nav-li {
		flex-basis: 100%;
	}

	ul.nav li {
		flex-basis: 50%;
	}
}

@media screen and (min-width: 1024px) {
	ul.nav li {
		flex-basis: 20%;
	}
}

ul.nav li > a {
	display: block;
	height: auto;
	width: calc(100% - 40px);
	padding: 12px 0;
	margin: 0 20px;
	font-size: 17px;
	line-height: 120%;
	color: white;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	font-family: 'ProximaNova', Arial, sans-serif;
}

ul.nav li.toplevel {
	width: 100%;
	overflow: hidden;
	/*background-color: #59893C;*/
}

ul.nav li.toplevel.active {
}

/*ul.nav li.active .subnav{ background: #666666;background:transparent; display: block; text-decoration: none;}*/
ul.nav li.active .subnav {
	display: block;
	text-decoration: none;
}

#header ul.nav li.active .subnav a {
	border-bottom: 1px solid #59893C;
}

#header ul.nav li.active .subnav li:last-child a {
	border-bottom: 1px dashed #ffffff;
}
/*ul.nav li ul li{ margin:0 10px 0 0;}*/
ul.nav li ul li {
	padding: 0 20px;
}

ul.nav li:hover ul {
	display: none;
}

ul.nav .subnav {
	display: none;
}
/*ul.nav .subnav{ display: none; position: absolute; top: 5px; left:155px; right:0; margin: 0; padding: 0 10px 0 20px; height: 95%;}*/
/*ul.nav .subnav li a{ font-size: 12px; color: #fff; display: block; background: url('images/nav-arrow.png') left 8px no-repeat;padding:0;line-height:13px;padding:6px 6px 6px 10px; }*/
ul.nav .subnav li a {
	color: white;
	font-weight: 400;
	text-decoration: none;
	display: block;
	padding: 12px;
	font-size: 14px;
	line-height: 120%;
	width: auto;
}

.content {
	/*padding: 15px 20px;*/
	/*margin-top: 66px;*/
	display: block;
	width: 100%;
}

.container {
	padding: 0 15px;
	margin: 0 auto;
	max-width: 1064px;
}

.home .content,
.faq .content {
	margin-top: 0;
	margin-bottom: 0;
	max-width: none;
}

.feature-item {
	padding: 20px;
	vertical-align: central;
}

.feature-item h2 {
	margin-bottom: 10px;
}



.feature-item.odd {
	/*background-color: #efeff4;*/
	/*margin: 0 -15px;
		padding: 20px 15px;*/
}

.feature-item img {
	width: 150px;
	/*float: right;*/
	/*margin-left: 30px;*/
	/*	max-width: 50%;  50% of mobile phone width */
	padding-bottom: 10px;
	padding-top: 20px;
}

/*.feature-item.even img {
		float: left;
		margin-left: 0;
		margin-right: 30px;
	}*/

#footer {
	background-color: #1e2225;
	color: #ffffff;
	font-size: 16px;
	text-align: center;
	padding: 12px 12px 60px;
}

.footer-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 1164px;
	margin: 60px auto 0;
	padding-bottom: 10px;
	justify-content: space-between;
}

.footer-logo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-basis: 100%;
	margin-bottom: 30px;
}

.social-icon-container {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	justify-content: center;
	padding: 20px 0;
}

@media screen and (min-width: 768px) {
	.footer-header {
		margin: 20px auto;
	}

	#footer-nav {
		flex-basis: 100%;
		border-bottom: 1px solid rgba(255,255,255,0.5);
	}

	.footer-contact-address {
		text-align: left;
	}
}



.social-icon-container a {
	margin: 0 10px;
	color: white;
}

.footer-contact-details {
	width: 100%;
	margin: 20px 0;
}

.footer-logo {
	width: 40px;
	border-radius: 12px;
	overflow: hidden;
	margin-right: 10px;
}

@media screen and (min-width: 600px) {
	#footer {
		padding: 12px 12px 36px;
	}
}

#footer .backtotop {
	font-family: 'ProximaNova', cursive;
	font-size: 24px;
	margin-bottom: 10px;
}

#footer a {
	color: white;
	text-decoration: none;
}


#footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}

#footer-nav a {
	flex-basis: 50%;
	margin-bottom: 10px;
}

@media screen and (min-width: 480px) {
	#footer-nav a {
		flex-basis: 33%;
	}
}

@media screen and (min-width: 1024px) {
	#footer-nav a {
		flex-basis: auto;
	}
}

#copyright {
	color: #ffffff;
	font-size: 14px;
	width: 100%;
}

a.app-store-btn {
	display: inline-block;
	border: 1px solid white;
	border-radius: 5px;
	background: #111;
	text-decoration: none;
	max-width: 240px;
}

body:not(.carplay-website) a.app-store-btn {
	width: 40%;
}

a.hash {
	display: block;
	margin-top: -72px;
	padding-bottom: 72px;
}

a.app-store-btn img {
	width: 100%;
}

a.app-store-btn:hover {
	transition: background-color 0.5s ease;
	background: #333;
}


#faqwrapper {
	max-width: 1064px;
	width: 100%;
	margin: 0 auto 60px;
	padding: 0 20px;
}

@media screen and (min-width: 768px) {
	#faqwrapper {
		margin: 0 auto;
	}
}

ul.faq {
	list-style: none;
}

.faq li:not(.toplevel):not(.search-nav-li):not(.social-icon-nav-li) {
	border-bottom: 1px solid #d5d8bf;
	padding: 15px 0;
}

.faq li:last-child {
	border-bottom: none;
}

.faq li li {
	border: none;
	padding: 0;
}

.faq li ul {
	padding: 0;
}

.faq li ol li {
	padding: 0;
}

.faq .question {
	font-size: 20px;
	font-weight: bold;
	clear: both;
	cursor: pointer;
	padding-right: 42px;
	position: relative;
	margin: 0;
}

.faq .question.open:before {
	content: '\f078';
	font-family: 'FontAwesome';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: #394015;
}

.faq .question.close:before {
	content: '\f077';
	font-family: 'FontAwesome';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	color: #394015;
}

.faq .answer {
	color: #73775c;
	display: none;
	margin-top: 20px;
}

.faq .question.open span,
.faq .question.close span {
	background-image: url(images/faq-sprite.png);
	background-repeat: no-repeat;
	background-position: 0 -39px;
	filter: grayscale(100%);
	display: block;
	position: absolute;
	right: 0;
	top: -4px;
	width: 38px;
	height: 39px;
}

.faq .question.close span {
	background-position: 0 0;
}

.benefits {
	margin: 0 -15px;
}
/* Carousel */
.carousel-wrapper {
	width: 100%;
	height: 400px;
	clear: both;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
}

.carousel-wrapper .slide {
	position: absolute;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.carousel-wrapper .slide.active {
	display: block;
	z-index: 99;
}

.carousel-wrapper .slide.slide-placeholder {
	background: #ccc url(images/carousel-spinner.gif) no-repeat center center;
	width: 100%;
	height: 480px;
}

.carousel-wrapper .slide .image {
	width: 100%;
	overflow: hidden;
	min-height: 480px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.carousel-wrapper .slide .image img {
	min-height: 480px;
	margin: 0 auto;
}

.carousel-wrapper .moveLeft,
.carousel-wrapper .moveRight {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 100;
	cursor: pointer;
	left: 5px;
}

.carousel-wrapper .moveRight {
	left: auto;
	right: 5px;
}

.carousel-wrapper .arrow {
	background: url('images/carousel-arrows.png') 0 0 no-repeat;
	width: 26px;
	height: 40px;
	position: absolute;
	top: 42%;
	margin-top: -20px;
	margin: 0 auto;
}

.carousel-wrapper .moveRight .arrow {
	background-position: 0 -40px;
	right: 0;
}

#image-slide .photo-title, #image-slide .photo-description {
	top: auto;
	left: 2px;
	right: 2px;
	display: block;
	position: absolute;
	z-index: 200;
	color: #fff;
	font-size: 39px;
	text-align: center;
}

#image-slide .photo-title {
	line-height: 120%;
	top: 120px;
}


@media (min-width: 900px) {
	#image-slide .photo-title {
		top: 166px;
	}
}

#image-slide .photo-description {
	left: 0;
	bottom: 0;
	right: 0;
	font-size: 24px;
	text-align: center !important;
	background-color: rgba(0,0,0,0.4);
	padding: 20px;
	line-height: 150%;
}


.comparetickmark {
	color: #59893C;
}

/* SVG animated menu icon - from https://raygun.io/blog/2014/07/making-svg-html-burger-button/ */

.hamburglar {
	display: block;
	position: relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	cursor: pointer;
}

/*.hamburglar.is-closed {
	-webkit-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);
	box-shadow: 1px 2px 1px 0px rgba(0,0,0,0.5);
}*/

.path-burger {
	position: absolute;
	top: 0;
	left: 0;
	height: 68px;
	width: 68px;
	mask: url(#mask);
	-webkit-mask-box-image: url(images/mask.svg);
}

.animate-path {
	position: absolute;
	top: 0;
	left: 0;
	width: 68px;
	height: 68px;
}

.path-rotation {
	height: 34px;
	width: 34px;
	margin: 34px 34px 0 0;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transform-origin: 100% 0;
	-ms-transform-origin: 100% 0;
	transform-origin: 100% 0;
}

/*.path-rotation:before { removed as this was adding a white block over the menu - ts
		content: '';
		display: block;
		width: 30px;
		height: 34px;
		margin: 0 4px 0 0;
		background: white;
	}*/


.site-map {
	padding: 10px 0px 20px 20px;
}

.site-map li {
	margin: 10px 0px 10px 0px;
}

.site-map li ul {
	padding-left: 30px;
}

.site-map li a {
	font-size: 120%;
}

@-webkit-keyframes rotate-out {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	40% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotate-out {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	40% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotate-in {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	40% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes rotate-in {
	0% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}

	40% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

.hamburglar.is-open .path {
	-webkit-animation: dash-in 0.6s linear normal;
	animation: dash-in 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-open .animate-path {
	-webkit-animation: rotate-in 0.6s linear normal;
	animation: rotate-in 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .path {
	-webkit-animation: dash-out 0.6s linear normal;
	animation: dash-out 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .animate-path {
	-webkit-animation: rotate-out 0.6s linear normal;
	animation: rotate-out 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.path {
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
	stroke-linejoin: round;
}

@-webkit-keyframes dash-in {
	0% {
		stroke-dashoffset: 240;
	}

	40% {
		stroke-dashoffset: 240;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes dash-in {
	0% {
		stroke-dashoffset: 240;
	}

	40% {
		stroke-dashoffset: 240;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

@-webkit-keyframes dash-out {
	0% {
		stroke-dashoffset: 0;
	}

	40% {
		stroke-dashoffset: 240;
	}

	100% {
		stroke-dashoffset: 240;
	}
}

@keyframes dash-out {
	0% {
		stroke-dashoffset: 0;
	}

	40% {
		stroke-dashoffset: 240;
	}

	100% {
		stroke-dashoffset: 240;
	}
}

.burger-icon {
	/*position: absolute;*/
	/*padding: 19px 15px;*/
	/*height: 68px;
	width: 68px;*/
}

.burger-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	position: relative;
	height: 21px;
	width: 25px;
}

.burger-bun-top,
.burger-bun-bot,
.burger-filling {
	display: block;
	height: 1px;
	width: 25px;
	background: black;
}

.nav-wrap.fixed.over-black .burger-bun-top,
.nav-wrap.fixed.over-black .burger-bun-bot,
.nav-wrap.fixed.over-black .burger-filling,
.nav-wrap.fixed.black-bg .burger-bun-top,
.nav-wrap.fixed.black-bg .burger-bun-bot,
.nav-wrap.fixed.black-bg .burger-filling {
	background: white;
}

.burger-bun-top {
	top: 0;
	-webkit-transform-origin: 24px 2px;
	-ms-transform-origin: 24px 2px;
	transform-origin: 24px 2px;
}

.burger-bun-bot {
	bottom: 0;
	-webkit-transform-origin: 20px 0;
	-ms-transform-origin: 20px 0;
	transform-origin: 20px 0;
}

.burger-filling {
	top: 12px;
}

/*.burger-ring {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 68px;
	height: 68px;
}*/

.svg-ring {
	width: 68px;
	height: 68px;
}

.hamburglar.is-open .burger-bun-top {
	-webkit-animation: bun-top-out 0.4s linear normal;
	animation: bun-top-out 0.4s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-open .burger-bun-bot {
	-webkit-animation: bun-bot-out 0.4s linear normal;
	animation: bun-bot-out 0.4s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-top {
	-webkit-animation: bun-top-in 0.4s linear normal;
	animation: bun-top-in 0.4s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-bun-bot {
	-webkit-animation: bun-bot-in 0.4s linear normal;
	animation: bun-bot-in 0.4s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes bun-top-out {
	0% {
		left: 0;
		top: 0;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	20% {
		left: 0;
		top: 0;
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	80% {
		left: -5px;
		top: 0;
		-webkit-transform: rotate(-60deg);
		transform: rotate(-60deg);
	}

	100% {
		left: -5px;
		top: 1px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

@keyframes bun-top-out {
	0% {
		left: 0;
		top: 0;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	20% {
		left: 0;
		top: 0;
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	80% {
		left: -5px;
		top: 0;
		-webkit-transform: rotate(-60deg);
		transform: rotate(-60deg);
	}

	100% {
		left: -5px;
		top: 1px;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}

@-webkit-keyframes bun-bot-out {
	0% {
		left: 0;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	20% {
		left: 0;
		-webkit-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}

	80% {
		left: -5px;
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
	}

	100% {
		left: -5px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}

@keyframes bun-bot-out {
	0% {
		left: 0;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	20% {
		left: 0;
		-webkit-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}

	80% {
		left: -5px;
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
	}

	100% {
		left: -5px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}

@-webkit-keyframes bun-top-in {
	0% {
		left: -5px;
		bot: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	20% {
		left: -5px;
		bot: 0;
		-webkit-transform: rotate(-60deg);
		transform: rotate(-60deg);
	}

	80% {
		left: 0;
		bot: 0;
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	100% {
		left: 0;
		bot: 1px;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes bun-top-in {
	0% {
		left: -5px;
		bot: 0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	20% {
		left: -5px;
		bot: 0;
		-webkit-transform: rotate(-60deg);
		transform: rotate(-60deg);
	}

	80% {
		left: 0;
		bot: 0;
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	100% {
		left: 0;
		bot: 1px;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@-webkit-keyframes bun-bot-in {
	0% {
		left: -5px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	20% {
		left: -5px;
		bot: 0;
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
	}

	80% {
		left: 0;
		bot: 0;
		-webkit-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}

	100% {
		left: 0;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@keyframes bun-bot-in {
	0% {
		left: -5px;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	20% {
		left: -5px;
		bot: 0;
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
	}

	80% {
		left: 0;
		bot: 0;
		-webkit-transform: rotate(-15deg);
		transform: rotate(-15deg);
	}

	100% {
		left: 0;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

.hamburglar.is-open .burger-filling {
	-webkit-animation: burger-fill-out 0.6s linear normal;
	animation: burger-fill-out 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.hamburglar.is-closed .burger-filling {
	-webkit-animation: burger-fill-in 0.6s linear normal;
	animation: burger-fill-in 0.6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

@-webkit-keyframes burger-fill-in {
	0% {
		width: 0;
		left: 36px;
	}

	40% {
		width: 0;
		left: 40px;
	}

	80% {
		width: 36px;
		left: -6px;
	}

	100% {
		width: 36px;
		left: 0px;
	}
}

@keyframes burger-fill-in {
	0% {
		width: 0;
		left: 3px;
	}

	40% {
		width: 0;
		left: 40px;
	}

	80% {
		width: 25px;
		left: -6px;
	}

	100% {
		width: 25px;
		left: 0px;
	}
}

@-webkit-keyframes burger-fill-out {
	0% {
		width: 36px;
		left: 0px;
	}

	20% {
		width: 42px;
		left: -6px;
	}

	40% {
		width: 0;
		left: 40px;
	}

	100% {
		width: 0;
		left: 36px;
	}
}

@keyframes burger-fill-out {
	0% {
		width: 36px;
		left: 0px;
	}

	20% {
		width: 42px;
		left: -6px;
	}

	40% {
		width: 0;
		left: 40px;
	}

	100% {
		width: 0;
		left: 36px;
	}
}

/* end menu button */

.features {
	margin-top: 20px;
}


@media screen and (min-width: 435px) {
	/*.feature-item img {
		width:200px;
	}*/
}

#wrapper.carplay-wrapper .content {
	padding-bottom: 60px;
}

@media screen and (min-width: 980px) {
	#wrapper,
	#wrapper.carplay-wrapper .nav-restrain {
		position: relative;
		width: 980px;
		margin-left: auto;
		margin-right: auto;
	}


	.features {
		margin: 0 -10px;
	}

	.features h2.faux-h1 {
		padding-left: 10px;
	}

	.feature-item,
	.feature-item.first {
		width: 50%;
		/*float:left;*/
		padding: 20px;
	}

	.feature-item.even {
		margin: 0;
		margin-right: -10px;
		background-color: transparent;
		padding: 20px;
	}

	.feature-item.check {
		background-color: #efeff4;
	}

	#image-slide .photo-description {
		/*width:500px;
		margin: 0 auto;*/
	}
}

tr:hover.altrow td {
	background-color: #f7f7f7;
}

.logo-box img {
	vertical-align: middle;
}

.partner-logos {
	margin-bottom: 30px;
}

.partner-logos .logo-box {
	width: 100px;
	height: 100px;
	margin: 10px 35px;
	display: inline-block;
	text-align: center;
	filter: grayscale(1);
}

.user-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.user-logos .logo-box {
	/*flex-basis: 50%;  mn 2023-07-18 removed so 3 up */
	margin: 10px 0 20px;
	display: inline-block;
	text-align: center;
	filter: grayscale(1);
}

@media screen and (max-width: 480px) {
	.user-logos .logo-box {
		flex-basis: auto;
		width: 60px;
		height: 60px;
		margin: 10px 20px;
	}
}


.logos-area {
	clear: both;
	padding-top: 30px;
}

.logos-area h2 {
	/*border-top: 1px solid #d5d8bf;*/
	padding-top: 30px;
	padding-left: 35px;
	text-transform: uppercase;
	font-size: 12px;
}

.normal blockquote {
	padding: 30px;
	border-left: 3px solid #59893C;
	background: #efeff4;
}

.normal blockquote h1 {
	margin: 0;
}

.btn {
	cursor: pointer;
	display: block;
	display: inline-block;
	padding: 10px 40px;
	border-radius: 4px;
	color: white;
	background: #59893c;
	font-size: 18px;
	text-decoration: none;
	font-weight: bold;
	margin: 10px 0;
	text-align: center;
	text-transform: uppercase;
	/*width: 400px;  mn 2022-02-17 removed for search page */
	max-width: 100%;
}

.btn:hover {
	background: #59893ccc;
}

.centre-button-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media screen and (min-width: 1024px) {
	.centre-button-wrap {
		flex-direction: row;
		justify-content: space-between;
	}
}


/* arrow bounce */

.arrow-image {
	position: relative;
	bottom: -2rem;
	left: 50%;
	margin-left: -20px;
	transform: rotate(90deg);
	width: 40px;
	height: 40px;
	/**
   * Dark Arrow Down
   */
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
	background-size: contain;
}

.arrow-bounce {
	opacity: 0;
	animation: arrow-bounce 22s infinite;
}

@keyframes arrow-bounce {
	0%, 38%, 42%, 77%, 63% {
		transform: translateX(0);
	}

	40% {
		transform: translateX(-30px);
	}

	60% {
		transform: translateX(-15px);
	}

	80% {
		opacity: 1;
	}
}

/* arrow bounce end  */

.carplay-mail-logos {
	max-width: 80vw;
}

.carplay-mail-logos img {
	max-width: 30vw !important;
}

.carplay-mail-logos img.gmail-icon {
	padding-left: 45px;
	padding-right: 10px;
}

.carplay-store-button-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.download-arrow-wrap {
	margin-right: 30px;
}

@media (max-width: 500px) {
	.carplay-website .brand-name {
		font-size: 18px;
	}

	.download-arrow-wrap {
		display: none;
	}
}

/* search bar */
.search-nav-li {
	padding: 20px 0;
	margin: 0 20px;
}

ul.nav li.social-icon-nav-li {
	flex-basis: 100%;
}

ul.nav li.social-icon-nav-li .social-icon-container {
	padding: 10px 0;
	justify-content: center;
}

#SearchForm {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 600px;
	margin: 0 auto;
}

#SearchKeywords {
	border-top-left-radius: 9px;
	border-bottom-left-radius: 9px;
	flex-basis: calc(100% - 80px);
	border: none;
	padding-left: 15px;
	font-size: 17px;
	height: 40px;
	background: rgba(255,255,255,0.2);
	color: white;
}

#SearchButton {
	flex-basis: 80px;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 9px;
	border: none;
	background-color: rgba(255,255,255,0.1);
	height: 40px;
	color: white;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
}

#SearchButton:hover {
	color: #59893C;
}

#SearchAgainForm {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 500px;
	margin-bottom: 10px;
}

@media screen and (min-width: 768px) {
	#SearchAgainForm {
		min-width: 400px;
	}
}

#searchText {
	height: 40px;
	border-top-left-radius: 9px;
	border-bottom-left-radius: 9px;
	flex-basis: calc(100% - 100px);
	border: none;
	padding-left: 15px;
	font-size: 17px;
	height: 40px;
	background: rgba(0,0,0,0.05);
}

#SearchAgainForm .btn {
	height: 40px;
	flex-basis: 100px;
	width: 100px;
	margin: 0;
	border-top-right-radius: 9px;
	border-bottom-right-radius: 9px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border: none;
	background-color: #59893C;
	color: white;
	cursor: pointer;
	transition: color 0.2s ease-in-out;
	padding: 0;
	font-weight: normal;
	text-transform: none;
}

#SearchAgainForm .btn:hover {
	color: #59893C;
	background-color: white;
	border: 1px solid #59893C;
}

/*--------------------------------------------------------------- */
/*--------------------------------------------------------------- */
/*-------------------- SPEAKING EMAIL RESKIN -------------------- */
/*--------------------------------------------------------------- */
/*--------------------------------------------------------------- */

.text-centre {
	text-align: center !important;
}

.text-animation {
	will-change: opacity, transform;
	transition: opacity .6s linear,transform .6s cubic-bezier(0.26,0.67,0.48,0.91);
	transform: translate3d(0,50px,0);
}

.white-text {
	color: white !important;
}

.black-text {
	color: black !important;
}

.red-text {
	color: #880F0A !important;
}

@font-face {
	font-family: ProximaNova;
	src: url("fonts/ProximaNovaRegular.ttf");
}


html, body {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

#wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	/*overflow-x: hidden;*/
}

.content {
	padding: 0;
}

@media screen and (max-width: 980px) {
	.content {
		padding: 0;
	}

	.home .content {
		padding: 0;
	}
}

.nav-wrap {
	background-color: white;
	border: none;
}

.nav-restrain {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100% !important;
	max-width: 1440px;
	margin: 0 auto;
}

.nav-wrap.over-black .nav-logo img {
	display: block;
	width: 0;
	margin-right: 0;
}

.nav-wrap .nav-logo img {
	border-radius: 8px;
	overflow: hidden;
	margin-right: 10px;
	width: 30px;
	transition: all 0.2s linear;
}

.section-content {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	max-width: 1064px;
	margin: 0 auto;
	padding: 0 20px;
	z-index: 1;
}

.section-content.wider-content {
	max-width: 1400px;
}

.section-content.side-by-side .partner-section,
.section-content.side-by-side .user-section {
	text-align: center;
	flex-basis: 100%;
	padding: 20px;
}

.hero-container {
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	background-color: #1e2225;
	overflow: hidden;
}

.hero-bg-container {
	position: absolute;
	width: 100%;
	height: calc(100% + 300px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
	transition: transform 0 linear;
	will-change: transform;
	top: 50%;
	transform: translate3d(0,-50%,0);
}

.hero-bg-container.speakingemail-header {
	background-image: url(images/home-banner-4.jpg);
}

.hero-bg-container.carplay-header {
	background-image: linear-gradient(to bottom, rgba(30, 34, 37, 0.7), rgba(0, 0, 0, 0)),url(images/carplay-banner.jpg);
}

.hero-container:before {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: linear-gradient(0deg, rgba(0,0,0,1) 0, rgba(0,212,255,0) 75%);
}

.title-container {
	flex-basis: 100%;
	opacity: 0;
	transition: transform 0.4s ease-out, opacity 0.3s ease-in;
	transform: translateY(15px);
}

.show-animate .title-container {
	opacity: 1;
	transform: translateY(0);
}

.hero-logo {
	display: block;
	margin-bottom: 15px;
	border-radius: 25px;
	width: 70px;
}

.hero-title {
	color: white;
	font-family: 'ProximaNova';
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
	font-size: 50px;
	font-weight: bold;
	line-height: normal;
	margin-bottom: 5px;
}

#page-title {
	padding: 0 20px;
	max-width: 1064px;
	margin: 60px auto 0;
}

.hero-title.standard-page-title {
	color: black;
	text-shadow: none;
}

@media screen and (min-width: 500px) {
	.hero-title {
		font-size: 90px;
	}

	.hero-title.standard-page-title {
		font-size: 50px;
		margin-bottom: 10px;
	}
}

.hero-subtitle {
	color: white;
	font-family: 'ProximaNova';
	font-size: 24px;
	font-weight: normal;
	line-height: normal;
}

.badge-container {
	flex-basis: 100%;
	margin-top: 15px;
	opacity: 0;
	transform: translateY(35px);
	transition: transform 0.4s ease-out 0.6s, opacity 0.3s ease-in 0.6s;
}

.badge-container.inside-content {
	display: block;
	transform: none;
	opacity: 1;
	margin-top: 0;
}

.badge-container.inside-content .store-badge {
	margin: 0 15px 0 0;
}

.badge-container.inside-content .store-badge:last-child {
	margin: 0;
}

.show-animate .badge-container {
	opacity: 1;
	transform: translateY(50px);
}

.badge-container a {
	text-decoration: none;
}

.store-badge {
	height: 45px;
	width: auto;
	margin: 0 5px;
	cursor: pointer;
}

@media screen and (min-width: 500px) {
	.store-badge {
		height: 60px;
	}

	.store-badge.bigger {
		height: 80px;
	}
}

.features {
	margin: 0 !important;
}

.feature-container {
	padding: 20px 20px 50px;
	overflow: hidden;
}

@media screen and (min-width: 1024px) {
	.feature-container {
		padding: 20px 40px 50px;
	}
}

@media screen and (max-width: 768px) {
	.feature-container.fc-odd .img-section {
		order: 1;
	}
}

#benefits,
#features {
	position: absolute;
	pointer-events: none;
	top: -60px;
	width: 1px;
	height: 1px;
}

.standard-header-container {
	display: block;
	width: 100%;
	background-color: #1E2225;
	padding: 116px 0 60px;
	transition: 0.3s padding ease-out;
}

@media screen and (min-width: 768px) {
	.standard-header-container {
		padding: 60px 0;
	}
}

.light-gray-bg {
	background-color: #F5F5F7 !important;
}

.standard-header-inner-container {
	display: block;
	width: 100%;
	max-width: 1064px;
	padding: 0 20px;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
	.standard-header-container {
		display: block;
		padding: 70px 0 30px;
	}
}

.content-container {
	padding: 40px 0 40px 0;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
}

.content-container.link-to-carplay {
	padding: 30px 0;
}

@media screen and (min-width: 768px) {
	.content-container.link-to-carplay h6,
	.content-container.link-to-carplay h2,
	.content-container.link-to-carplay p {
		text-align: center;
	}
}

.content-container.link-to-carplay .news-container {
	flex-basis: 100%;
}

@media screen and (min-width: 768px) {
	.content-container {
		padding: 150px 0 120px;
	}

	.content-container.link-to-carplay {
		padding: 90px 0 0;
	}

	.content-container.link-to-carplay .news-container {
		text-align: center;
	}
}

.content-container.more-padding {
	padding: 240px 0;
}

.heading-container {
	display: flex;
	padding: 60px 0;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, black 25px, white 0);
}

@media screen and (min-width: 768px) {
	.heading-container {
		padding: 120px 0;
	}
}

.heading-black-parallax {
	position: absolute;
	top: calc(-100% );
	transform: translate3d(0,0,0);
	height: calc(100% + 50px);
	width: 100%;
	left: 0;
	background-color: black;
}

.main-heading {
	display: block;
	text-align: center;
	color: white;
	mix-blend-mode: difference;
	width: 100%;
	max-width: 1400px;
	padding: 0 10px;
	margin: 0 auto;
}

.text-section.news-container {
	padding-bottom: 30px;
}

@media screen and (min-width: 768px) {
	.text-section.news-container {
		flex-basis: calc(50% - 1px);
		padding-bottom: 0;
	}
}

.updates-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.border-container {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	background: #86868b;
	width: 1px;
}

@media screen and (min-width: 768px) {
	.border-container {
		display: block;
	}
}

#searchBox {
	display: block;
	width: 100%;
	max-width: 300px;
	padding: 10px 24px;
	border-radius: 24px;
	border: 1px solid #d5d8bf;
}

.filter-container {
	display: flex;
	width: 100%;
	max-width: 1064px;
	margin: 0 auto;
	position: sticky;
	align-items: center;
	padding: 20px 20px 10px;
	flex-wrap: wrap;
	top: 56px;
	background-color: white;
	border-bottom: 1px solid #d5d8bf;
	z-index: 1;
}

@media screen and (min-width: 1024px) {
	.filter-container {
		top: 36px;
	}
}

.filter-container .filter-header {
	display: flex;
	align-items: center;
	flex-basis: 100%;
	margin-bottom: 20px;
}

.filter-container .subheader {
	color: black;
}

@media screen and (min-width: 768px) {
	.filter-container .subheader {
		margin-right: 12px;
	}
}

.filter-container .curve-btn {
	margin: 0 12px 12px 0;
	padding: 6px 18px;
}

@media screen and (max-width: 768px) {
	.filter-container .curve-btn {
		font-size: 12px;
		padding: 0 8px;
		margin: 0 4px 4px 0;
	}
}

.area-result-container {
	margin-top: 20px;
}

.faq-container h6.subheader,
.faq-container h2,
.faq-container p {
	text-align: right !important;
}

.faq-container a {
	display: block;
	width: fit-content;
	margin: 0 0 0 auto;
	align-self: flex-end;
}

.content-container h2 {
	color: black;
}

.centre-title {
	width: 100%;
	flex-basis: 100%;
	text-align: center !important;
	margin-bottom: 60px;
}

.content-container.black {
	background-color: black;
	color: white;
}

.content-container.black h2 {
	color: white;
}

.subheader {
	font-size: 17px;
	font-weight: bold;
	color: #59893C;
	text-transform: uppercase;
	text-align: left;
	line-height: normal;
	letter-spacing: 3px;
}

.title-container .subheader {
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

@media screen and (min-width: 500px) {
	.subheade-title {
		font-size: 20px;
	}
}

.content-container h2,
.main-heading {
	font-family: Georgia;
	font-size: 36px;
	font-weight: normal;
	text-align: left;
	line-height: normal;
	margin-bottom: 15px;
}

@media screen and (min-width: 1024px) {
	.content-container h2,
	.main-heading {
		font-size: 45px;
		/*letter-spacing: 2px;*/
	}
}

.content-container h4 {
	font-family: Georgia;
	font-size: 32px;
	line-height: normal;
}

.content-container p {
	margin: 10px 0;
	font-size: 20px;
	text-align: left;
	color: #1e2225;
}

.black.content-container p {
	color: lightgray;
}

.feature-title {
	margin-bottom: 60px;
	padding: 0 20px;
}

.feature-img {
	border-radius: 50px;
}

.text-section {
	flex-basis: 100%;
	align-self: center;
	transition: opacity .4s linear, transform .4s cubic-bezier(0.26,0.67,0.48,0.91);
	will-change: opacity, transform;
}

@media screen and (min-width: 768px) {
	.text-section {
		padding: 0 30px;
		flex-basis: 50%;
		padding: 0 15px;
	}
}

@media screen and (min-width: 768px) {
	.text-section {
		padding: 0 30px;
	}
}

/*if text is on the right*/
@media screen and (min-width: 768px) {
	.img-section + .text-section {
		padding: 0 30px;
	}
}

@media screen and (min-width: 1140px) {
	.img-section + .text-section {
		padding: 0 30px 0 60px;
	}
}

.full-section {
	position: relative;
	background-color: #F5F5F7;
	border-radius: 25px;
	flex-basis: 100%;
	max-width: 1164px;
	padding: 30px;
	margin: 0 auto;
	overflow: hidden;
}

@media screen and (min-width: 768px) {
	.full-section {
		padding: 60px;
		overflow: initial;
	}

	.text-with-abs-img {
		width: calc(100% - 280px);
	}
}

.abs-img {
	display: none;
}

@media screen and (min-width: 768px) {
	.abs-img {
		display: block;
		position: absolute;
		width: 400px;
		bottom: 0;
		right: 30px;
		margin: 0;
	}
}

@media screen and (min-width: 1024px) {
	.abs-img {
		position: absolute;
		width: 540px;
		bottom: 0;
		right: 30px;
		margin: 0;
	}

	.text-with-abs-img {
		width: calc(100% - 400px);
	}
}

.standard-fade-settings {
	transition: opacity .4s linear, transform .4s cubic-bezier(0.26,0.67,0.48,0.91);
	will-change: opacity, transform;
}

.img-section {
	flex-basis: 100%;
	align-self: center;
	margin: 30px 0 0;
}

@media screen and (min-width: 768px) {
	.img-section {
		flex-basis: 50%;
		align-self: center;
		margin: 0;
	}
}

.bottom-fade {
	opacity: 0;
	transform: translate3d(0,30px,0);
}

.left-fade {
	opacity: 0;
	transform: translate3d(-30px,0,0);
}

@media screen and (min-width: 769px) {
	.left-position {
		order: 0;
	}

	.right-position {
		order: 1;
	}
}

.right-fade {
	opacity: 0;
	transform: translate3d(30px,0,0);
}

.left-fade.show-fade,
.right-fade.show-fade,
.bottom-fade.show-fade {
	opacity: 1;
	transform: translate3d(0,0,0);
}

.img-section-animated {
	/*position: relative;
	top: 50%;
	transform: translate3d(0,-50%,0);*/
}

.img-section img {
	display: block;
	margin: 0 auto;
}

.curve-btn {
	font-family: 'ProximaNova';
	border: 1px solid #59893C;
	border-radius: 24px;
	color: #59893C;
	text-decoration: none;
	padding: 6px 24px;
	text-align: left !important;
	display: inline-flex;
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	cursor: pointer;
}

.curve-btn:hover,
.filter-container .curve-btn.active {
	background-color: #59893C;
	color: white;
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px;
}

.more-feature-list-container {
	display: block;
	column-count: 1;
}

@media screen and (min-width: 768px) {
	.more-feature-list-container {
		column-count: 3;
	}
}

.more-feature-item {
	break-inside: avoid-column;
	margin-bottom: 60px;
}

.more-feature-inner-item {
	padding: 0 20px;
}

/* fixes the issue with fmttml */
.more-features-title .normal p {
	font-size: 21px;
	text-transform: uppercase;
	margin-top: 0;
	font-weight: bold;
}

.more-features-title i {
	font-size: 22px;
}

h3 {
	font-family: Georgia;
	font-size: 24px;
	font-weight: normal;
}

h4 {
	font-family: 'ProximaNova';
	font-size: 24px;
	font-weight: normal;
}

h5 {
	font-family: 'ProximaNova';
	font-size: 24px;
	font-weight: normal;
}

h6 {
	font-family: 'ProximaNova';
	font-size: 17px;
	font-weight: bold;
	color: #59893C;
	text-transform: uppercase;
	text-align: left;
	line-height: normal;
	letter-spacing: 3px;
}

.hidden-overflow {
	overflow: hidden;
}

.margin-btm-10 {
	margin-bottom: 10px !important;
}

.margin-btm-20 {
	margin-bottom: 20px !important;
}


.margin-top-30 {
	margin-top: 30px !important;
}

.margin-btm-30 {
	margin-bottom: 30px !important;
}

.padding-btm-0 {
	padding-bottom: 0 !important;
}

.no-horizontal-padding {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.padding-top-0 {
	padding-top: 0 !important;
}

.padding-top-30 {
	padding-top: 30px !important;
}

.padding-btm-30 {
	padding-bottom: 30px !important;
}

.padding-top-45 {
	padding-top: 45px !important;
}

.padding-btm-45 {
	padding-bottom: 45px !important;
}

.padding-top-60 {
	padding-top: 60px !important;
}

.padding-btm-60 {
	padding-bottom: 60px !important;
}

.center-text {
	text-align: center !important;
}

.space-around {
	justify-content: space-around;
}

.testimonial-container {
	display: block;
	/* flex is causing some gap issues with different heights */
	/*display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;*/
}

@media screen and (min-width: 768px) {
	.testimonial-container {
		column-count: 2;
	}
}

@media screen and (min-width: 1024px) {
		.testimonial-container {
			column-count: 3;
		}
}

.testimonial {
	flex-basis: 100%;
	padding: 30px;
	margin-bottom: 30px;
	border-radius: 25px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,.25);
}

@media screen and (min-width: 768px) {
	.testimonial {
		margin-bottom: 20px;
		-webkit-column-break-inside: avoid;
		page-break-inside: avoid;
		break-inside: avoid;
		/*margin-bottom: 0;
		flex-basis: 30%;*/
	}
}

.testimonial h1 {
	font-family: 'ProximaNova';
	color: #333;
	font-weight: normal;
	font-size: 20px;
}

.testimonial-author {
	margin-top: 15px;
}

.testimonial-author p {
	color: #59893C;
	font-weight: bold;
	margin: 0;
}

.breadcrumb-container {
	display: block;
	flex-basis: 100%;
	margin: 20px 0;
}

.carplay-text-container {
	flex-basis: 100%;
}

@media screen and (min-width: 768px) {
	.carplay-text-container {
		flex-basis: 40%;
	}
}

.email-icons-container {
	display: flex;
	align-items: center;
}

.carplay-badge-container {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	justify-content: center;
}