body {
	margin: 0;
	padding: 0;
	display: block;
}
@media (min-width: 0px) {
	
div.cta h4 {
	font-size: 1rem !important;
}

/* users find the labels below results confusing */
div.gs-per-result-labels {
	display: none;
}

/* the url is never actually a url above results and adds noise plus green */
div.gsc-url-top {
	display: none !important;
}
}

/* as recommended at https://bitsofco.de/the-new-system-font-stack/ from https://systemfontstack.com/ which was shared on HTML Energy discord"
body {
   font-family: -apple-system, 
                BlinkMacSystemFont, 
                "Segoe UI", 
                Roboto, 
                Oxygen-Sans, 
                Ubuntu, 
                Cantarell, 
                "Helvetica Neue", 
                sans-serif;
}

/* a tag sequencing from https://blog.hubspot.com/website/remove-underline-from-links-css */
a {color: #1f8aff;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: none; }

b:active { background-color: #0057b7; }

a.card:hover { text-decoration: none; }

a.card {color: inherit;}

div {
	display: block;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
}

div.flex {
	display:flex;
}

div.banner {
	display: flex;	
	position: sticky;
	top: 0;
	z-index: 2;

	background-color: #ff9900;

	width: 100%;
	height: 64px;
}

div.header {
	display: flex;
	position: sticky;
	/* top: 64px; removing while no banner */
	top: 0px; 
	z-index: 1;
	
	background-color: white;

	width: 100%;
	height: auto;

	margin: 0;
	padding: 20px 8% 24px 8%;
}

div.brand {
	display: flex;
	justify-content: left;
	width: 50%;
}

div.menu {
	margin: 0;
	display: flex;
	width: 50%;
	justify-content: right;
}

div.mainWrapper {
	display: block;
	text-align: center;	
}

div.main {
	display: block;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 100px;
	width: min(90%, 1200px);
	text-align: center;
}

div.gsc-promotion {
	display: none;
}

@media (min-width: 576px) {
	div.gsc-wrapper {
		display: flex;
		flex-direction: row-reverse;
		align-items: flex-start;
	}

	div.gsc-tabsArea {
		text-align: left;
	}
		
	div.gsc-adBlock {
		width: 40%;
		text-align: left;
	}

	div.gsc-resultsbox-visible {
		width: 60%;
		text-align: left;
	}
}

/* placeholder via https://stackoverflow.com/a/66391922/625754 */
div.gsc-tabsArea div {
	font-size: 0;
}

div.gsc-tabsArea div:after {
	font-size: 13px;
}

div.gsc-tabsArea div:nth-child(1):after {
	content: 'web';
}

div.gsc-tabsArea div:nth-child(3):after {
	content: 'images';
}

div.gsc-refinementBlock {
	text-align: left;
}

div.gsc-refinementBlock div:nth-child(1) {
	font-size: 0;
}

div.gsc-refinementBlock div:after {
	font-size: 13px;
}

div.gsc-refinementBlock div:nth-child(1):after {
	content: 'all';
}

div.gsc-orderby-label {
	font-size: 0;
}

div.gsc-tabHeader {
	border-radius: 10px 10px 0 0;
	text-decoration: none;
	border: none;
	height: 28px;
}

div.gsc-refinementHeader {
	border-radius: 10px 10px 0 0;
	text-decoration: none;
	border: none;
	height: 28px;
}

div.gsc-tabhInactive {
	background-color: black !important;
	color: white !important;
	border: none !important;
}

div.gsc-refinementhInactive {
	background-color: black !important;
	color: white !important;
	border: none !important;
}

div.gsc-tabhActive {
	background-color: #0057b7 !important;
	color: white !important;
	border: none !important;
}

div.gsc-refinementhActive {
	background-color: #ffe474 !important;
	color: black !important;
	border: none !important;
}

div.gsc-orderby-label:after {
	font-size: 13px;
}

div.gsc-orderby-label:after {
	content: 'sort:';
}

td.gsc-result-info-container {
	display: none;
	width: 0;
}

td.gsc-orderby-container{
	display: flex;
	align-items: left;
	/* flex-grow: 1; */
	/* justify-content: start; */
}

.hideMe {
	display: none;
	visibility: hidden;
}


@media (min-width: 768px) {

div.gsc-promotion {
	display: block;
}

div.gsc-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
}

div.gsc-adBlock {
	width: 30%;
}
	
div.gsc-resultsbox-visible {
	width: 70%;
}

div.cta h4 {
	font-size: 1.5rem !important;
}
}

@media (min-width: 992px) {

div.gsc-wrapper {
	display: flex;
	flex-direction: row-reverse;
	align-items: flex-start;
}

div.gsc-adBlock {
	width: 25%;
}
	
div.gsc-resultsbox-visible {
	width: 75%;
}

}

div.gcsc-find-more-on-google {
	display: none;
	visibility: hidden;
}

div.card {
	background: black;
	border-radius: 0 0 5px 5px !important;
	border-width: 1px !important;
	border-color: black;
}

div.card-body {
	background: white;
	border-radius:0 0 3px 3px;
	color: black;
}

div.card-header {
	background-color: #0057b7;
	border-radius: 0 !important;
	color: white;
	margin: -2px
}

div.card-image {
	height: 112px;
	width: 100%;
	font-size: 2rem;
	background-color: black;
	color: white;
}

div.card:hover {
	background-color: #blue;
	color: black;
}

div.card:hover div.card-header {
	/* color: #ffd700; */
	/* background-color: #1f8aff; */
	
}

/* div.card:hover form { */
	/* background-color: white; */
/* } */

div.card:hover button.card-button {
	background-color: #0057b7;
}

div.card:hover button {
	background-color: #0057b7;
}
div.card:hover div.card-image {
	background-color: #0057b7;
	color: whitesmoke;
}

div.card:hover div.card-body {
	background-color: whitesmoke;
}
	
a.card:hover {
	color: #1f8aff;
}

/* div.card-image:hover { */
	/* color: #1f8aff; */
/* } */

div.search {
	width: auto;
	height: auto;
}

div.footer, div.footer-soil, div.footer-grass, div.footer-buffer {
	display: flex;
	align-items: center;
	justify-content: center;
	
	overflow: auto;
	position: fixed;
	bottom: 0;
	z-index: 1;
	
/*	background-color: #d6f2f1; */
	background-color: black;
	color: white;

	height: 54px;
	width: 100%;
}


div.footer-soil {
	bottom: 54px;
	background-color: #806245;
	height: 16px;	
}


div.footer-grass {
	bottom: 70px;
	background-color: #348C31;
	height: 32px;	
}

div.footer-buffer {
/*	bottom: 92px; */
	bottom: 54px;
	background-color: white;
	height: 32px;	
}

a.footer-icons {
	font-size: 0.8rem;
	color: white;
}

a.footer-icons:hover {
	color: #1f8aff;
}

div.mobile-portrait, div.mobile-landscape {
		display: none;
	}	
	
@media (max-width: 991px) {
	div.mobile-portrait {
		display: block;
	}
}

@media (min-width: 992px) {
	div.mobile-landscape {
		display: block;
	}	
}

button {
	/* background-color: #0d6efd; */
	background-color: black;
	background-image: none;
	outline: none;
	border-color: none;
	border-width: 0;
	border-radius: 11px;
	display: block;
	padding: 0 12px;
	margin: 0 12px;
	width: auto;
	height: 2em;
	color: whitesmoke;
}

img.search-buddy {
	width: 180px;
	object-fit: scale-down;
}

img.div-fill{
	width: 100%;
	height: 100%;
	object-fit:fill;	
}

button:hover {
  background-color: #0057b7;
  /* background-color: #ff3503; */
  color: white;
}

button.menu {
	border: none;
	padding: 0;
	margin: 0 7px;
	font-weight: 700;
}

button.gsc-search-button, button.gsc-search-button-v2 {
	height: auto;
	/* background-color: #0d6efd;	 */
	background-color: black;
	border-color: black;
}

button.gsc-search-button:hover, button.gsc-search-button-v2:hover {
	background-color: #0057b7;
	border-color: #0057b7;
	/* background-color: #ff3503; */
	/* border-color: #ff3503; */
}

i {
	margin: 0 5px;
	padding: 0 0px;
	transform: scale(1.6);
}

i.filters {
	color: black;
	font-size: 1.2rem;
	padding: 0 8px;
}

@media (min-width: 768px) {
	i.filters {
		color: black;
		font-size: 2.4rem;
		padding: 0 16px;
	}
}

@media (min-width: 768px) {
	i {
	margin: 0 16px;
	transform: scale(2.0);
	}

.nomargin {
	margin: 0;
}

/* display: none */
/* todo can we disable spellcheck in embed element cse */

div.gs-spelling {
	display: none !important;
}