/* 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 {
	padding: 5px;
	font-family: 'Roboto', Arial, sans-serif;
}

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

html {
	overflow-y: scroll;
}
/* 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 */
}

/* --------------------------------------------------------------------------------------- */
/* 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: 'Roboto', 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;
}

.normal ul li {
	list-style-type: disc;
	margin-top: 10px;
	padding-left: 13px;
	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: 'Roboto', 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%;
}



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

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

	h3 {
		font-family: 'Roboto', 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: 'Roboto', 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: 4px 0 8px;
		height: 72px;
		background-color: rgba(255, 255, 255, 0.7);
		z-index: 999;
	}

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

	.nav-wrap.fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: block;
	}

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

	.nav-logo {
		color: #000000;
		font-family: 'Roboto',Arial,sans-serif;
		font-size: 24px;
		font-weight: bold;
		margin-left: 4px;
	}

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

	.nav-logo span {
		padding-top: 17px;
		float: left;
		padding-left: 28px;
	}

	ul.nav {
		position: absolute;
		display: block;
		top: 71px;
		left: 0;
		background: transparent;
		padding-top: 0;
		width: 100%;
		max-height: 620px; /* 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;
	}

	ul.nav.closed {
		max-height: 0;
	}

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

	ul.nav li a {
		display: block;
		height: auto;
		width: 100%;
		padding: 10px;
		padding-left: 60px;
		font-size: 20px;
		line-height: 120%;
		color: white;
		text-decoration: none;
	}

	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;
		margin-top: 66px;
	}

	.home .content {
		margin-top: 0;
	}

	.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: #59893C;
		color: #ffffff;
		font-size: 16px;
		text-align: center;
		padding: 12px 12px 60px;
	}

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

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

	#footer a {
		color: white;
	}

	#footer-nav {
		margin-bottom: 10px;
	}

	#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;
	}

	ul.faq {
		list-style: none;
	}

	.faq 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;
		min-height: 32px;
		padding-right: 42px;
		position: relative;
	}

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

	.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 {
		-webkit-transform: scale(0.75);
		-ms-transform: scale(0.75);
		transform: scale(0.75);
		/*margin: 40px auto;*/
		/*position: relative;*/
		position: absolute;
		right: 4px;
		top: 2px;
		display: block;
		width: 66px;
		height: 66px;
		/*background: rgba(46, 46, 46, 0.5);*/
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
		background-color: transparent;
		border-radius: 50px;
		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 {
		position: relative;
		height: 28px;
		width: 36px;
	}

	.burger-bun-top,
	.burger-bun-bot,
	.burger-filling {
		position: absolute;
		display: block;
		height: 4px;
		width: 36px;
		border-radius: 2px;
		background: #59893C;
	}

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

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

	.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.6s linear normal;
		animation: bun-top-out 0.6s linear normal;
		-webkit-animation-fill-mode: forwards;
		animation-fill-mode: forwards;
	}

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

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

	.hamburglar.is-closed .burger-bun-bot {
		-webkit-animation: bun-bot-in 0.6s linear normal;
		animation: bun-bot-in 0.6s 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: 36px;
		}

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

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

		100% {
			width: 36px;
			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;
	}*/
}

@media screen and (min-width: 980px) {
	#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 .logo-box {
	width: 100px;
	height: 100px;
	margin: 10px 35px;
	display: inline-block;
	text-align: center;
}

.user-logos .logo-box {
	width: 60px;
	height: 60px;
	margin: 10px 35px;
	display: inline-block;
	text-align: center;
}

@media screen and (max-width: 390px) {
	.user-logos .logo-box {
		margin: 10px 31px;
	}

	.partner-logos .logo-box {
		margin: 10px 40px;
	}
}

@media screen and (max-width: 360px) {
	.user-logos .logo-box {
		margin: 10px 22px;
	}

	.partner-logos .logo-box {
		margin: 10px 29px;
	}
}

.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 {
	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;
	max-width: 100%;
}

.btn:hover {
	background: #59893ccc;
}
.centre-button-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}


/* 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;
	}
}