@font-face {
  font-family: 'Roboto';
  src:  url('../fonts/Roboto/Roboto-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans Bold';
  src:  url('../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
  font-display: swap;
}
html {
	scroll-behavior: smooth;
}
html, body {
	hyphens: auto;
	margin: 0;
	background: rgba(252,252,252,1);
}
html body * {
	font-family: Roboto, sans-serif;

}
html body h1, html body h2, html body h3 {
	font-family: 'Open Sans Bold', Roboto, sans-serif;
}
body.modal_active {
	overflow: hidden;
}
.formfidelity {
	display: none;
}
.full {
	width: 100%;
}
.text-center {
	text-align: center;
}
.text-left {
	text-align: left;
}
.text-right {
	text-align: right;
}
.solo {
	width: 100%;
	box-sizing: border-box;
	padding: 5vh 1vw;
	line-height: 150%;
	margin: 0;
}
.soloshort {
	width: 100%;
	box-sizing: border-box;
	padding: 0vh 1vw 5vh 1vw;
	line-height: 150%;
	margin: 0;
}
.soloshortb {
	width: 100%;
	box-sizing: border-box;
	padding: 5vh 1vw 0vh 1vw;
	line-height: 150%;
	margin: 0;
}
.sololess {
	width: 100%;
	box-sizing: border-box;
	padding: 5vh 8vw;
	line-height: 150%;
	margin: 0;
}
.mutedbg {
	background-color: rgb(250 250 250);
}
.whitebg {
	background-color: white;
}
.muted {
	color: rgba(90,90,90,1);
}
.blue {
	color: rgb(0,49,186);
}
.bgblue {
	background-color: rgb(0,49,186);
}
.green {
	color: rgb(17 131 76);
}
.red {
	color: rgba(165,50,50,1);
}
.bggreen {
	background-color: rgb(17 131 76);
}
.largetext {
	font-size: 1.5em;
}
.mediumtext {
	font-size: 1.2em;
}
.smalltext {
	font-size: 0.8em;
}
.mobileMenuBurger{ 
	display: none;
	position: fixed;
	z-index: 999;
	right: 0;
	padding: 4vw;
}
.mobileMenuBurger span {
	display: block;
	width: 10vw;
	height: 1.2vw;
	margin-bottom: 5px;
	position: relative;
	background: white;
	border-radius: 3px;
	transform-origin: 4px 0px;
	transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;
}
#hamburger1 {
	transform-origin: 0% 0%;
}
#hamburger1.page, #hamburger2.page, #hamburger3.page {
	background: rgba(50,100,50,1);
}
#hamburger3 {
	transform-origin: 0% 100%;
}
.transformed1 {
	transform: rotate(45deg);
}
.transformed2 {
	opacity: 0;
	transform: rotate(0deg) scale(0.2, 0.2);
}
.transformed3 {
	transform: rotate(-45deg) translate(-0.25rem, 0.25rem);
}
#mobileNavMenu {
	visibility: hidden;
	overflow: auto;
	position: fixed;
	width: 100%;
	min-height: 100%;
	z-index: 998;
	background-color: rgba(250,250,250,1);
}
#mobileNavMenu.active{
	visibility: visible;
	transition: all 500ms ease-in-out;
}
#mobileNavMenu.active a{
	opacity: 1;
	transition: all 750ms ease-in-out;
}
#mobileNavMenu ul {
	list-style-type: none;
}
#mobileNavMenu a{
	display: block;
	box-sizing: border-box;
	opacity: 0;
	padding: 2.5vh 1vw;
	color: rgb(17 131 64);
	font-size: 5vw;
	text-decoration: none;
	font-weight: bold;
}
#mobileNavMenu a.cta {
	color: rgba(0,186,99,1);
}
#mobileNavMenu div.phone {
	box-sizing: border-box;
	bottom: 0;
	width: 100%;
	text-align: center;
}
#mobileNavMenu a.phone {
	width: 100%;
	box-sizing: border-box;
	background: rgb(17 131 64);
	padding: 4vh 2vw;
	color: rgba(250,250,250,1);
	font-size: 8vw;
}
#mobileNavMenu span.taptocall {
	display: block;
	font-size: 5vw;
	font-weight: bold;
	padding: 1vh 1vw;
}
.closeMobileNavMenu {
	color: rgba(0,49,186,1);
	font-size: 5vw;
	padding: 1vw;
	width: 100%;
	text-align: right;
}
.closeMobileNavMenu:hover{
	cursor: pointer;
}
#videobg {
	position: absolute;
	min-width: 100%;
	min-height: 100%;
	right: 0;
	bottom: 0;
	z-index: 1;
}
.overlay {
	box-sizing: border-box;
	position: relative;
	height: 100vh;
	width: 100%;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	align-items: flex-end;
	flex-wrap: wrap;
	background: rgba(0,0,0,0.6);
	color: rgba(250,250,250,1);
	z-index: 1;
}
.overlay h1, h2, h3 {
	text-align: center;
}
.overlay h1{
	font-size: 4vmax;
}
.overlay h2{
	font-size: 2.3vmax;
}
.overlay .overlaybtn{
	box-sizing: border-box;
	padding: 15px 50px;
	color: rgba(250,250,250,1);
	font-weight: bolder;
	min-width: 33%;
	border: none;
	background: rgb(0 49 186);
	margin: 0px 50px;
	line-height: 200%;
	font-size: 1.75vmax;
	border-radius: 6px;
	border: solid 1px rgb(0 49 186);
}
.overlay .overlaybtn:hover {
	cursor: pointer;
	color: rgb(0 49 186);
	background: rgba(250,250,250,1);
	border: solid 1px rgb(0 49 186);
}
.overlay .buttons {
	width: 100%;
	padding: 10vh 0vh;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.navbar {
	position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    z-index: 2;
}
.navbar.page {
	background: rgba(255,255,255,1);
	border-bottom: solid 1px rgba(100,125,100,0.5);
	transition: all 250ms ease-in-out;
}
.navbar.page a {
	border-right: solid 1px rgba(250,250,250,1);
}
.navbar a {
	display: flex;
    flex: 1;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    padding: 20px;
    text-decoration: none;
    align-self: stretch;
    font-weight: 800;
    color: rgb(255 255 255);
    transition: all 250ms ease-in-out;
}
.navbar.page a:last-of-type {
	border: none;
}
.navbar.page a {
	color: rgb(17 131 64);
	transition: all 250ms ease-in-out;
}
.navbar.page #navlogo {
	padding: 0px;
	transition: all 250ms ease-in-out;
}
.navbar a:hover {
	color: rgba(0,49,186,1);
	transition: all 250ms ease-in-out;
}
.navbar a.cta {
	color: rgba(0,186,99,1);
	transition: all 250ms ease-in-out;
}
.navlogo {
	box-sizing: border-box;
	height: 110px;
	width: auto;
	transition: all 250ms ease-in-out;
}
.modal {
	display: none;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(200,200,200,0.5);
}
.modal.active {
	display: block;
}
.modal_body {
	position: relative;
    box-sizing: border-box;
    width: 50%;
	min-width: 250px;
    margin: 10% 25%;
    height: 50%;
    padding: 7% 1%;
	text-align: center;
    background: rgba(240,240,240, 1);
}
.modal_close {
	position: absolute;
	top: 0;
	right: 0;
	background: red;
	color: white;
	border: solid 1px red;
	box-sizing: border-box;
	padding: 20px 30px;
	line-height: 150%;
	font-weight: 600;
	font-size: 2rem;
}
.modal_close:hover {
	background: white;
	color: red;
	cursor: pointer;
}
.modal_body .instruction {
	position: absolute;
	font-size: 1rem;
	width: 100%;
	text-align: center;
	bottom: 0;
	padding: 10px;
}
.content {
	padding: 0px 10vw;
	box-sizing: border-box;
	width: 100%;
	margin-top: -3px;
}
.content .header {
	box-sizing: border-box;
	display: inline-block;
	width: 100%;
    background-size: cover;
	padding : 5vh;
}
.content .header h1 {
	font-size: 2.5rem;
	width: 100%;
}
.content .pageNavigation {
    display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: stretch;
    width: 90%;
    text-align: center;
    background: white;
    box-sizing: border-box;
}
.content .pageNavigation a {
	color: rgb(17 131 76);
	font-weight: 600;
	text-decoration: none;
	padding: 5vh 0px;
	text-align: center;
	display: flex;
	align-self: stretch;
	justify-content: center;
	align-items: center;
	flex: 1;
	border-right: solid 1px rgba(250,250,250,1);
}
.content .pageNavigation a:last-child{
	border: none;
}
.content .page {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-around;
	box-sizing: border-box;
}
.content h3.pic {
	width: 100%;
	color: rgba(0,49,186,1);
}
.content .meet {
	width: 50%;
	min-width: 250px;
	background: white;
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 10vh 5vw;
	align-self: stretch;
	justify-self: stretch;
	align-items: center;
	justify-content: center;
}
.content .meet h2 {
	width: 100%;
	text-align: left;
}
.content .meet p {
	font-weight: 600;
	color: rgba(75,75,75,1);
}
.content img {
	max-width: 45vw;
	box-shadow: 5px 5px 15px rgb(125 125 125);
}
.content .tip-trick {
 display: inline-block;
 box-sizing: border-box;
 padding: 25px;
 width: 100%;
 font-size: 1.1rem;
 line-height: 150%;
 text-align: center;
}
.content .tip-trick img {
	padding: 0px 25px 25px 25px;
	box-shadow: none;
}
.content .tip-trick p {
	text-align: left;
	display: inline-block;
	padding: 5px;
}
/* The actual timeline (the vertical ruler) */
.timeline {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background-color: #474e5d;
	box-sizing: border-box;
	padding: 50px 0px;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: white;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
  box-sizing: border-box;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid rgb(17 131 76);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
.container.espring::after {
	border-color: rgb(0 49 186);
}
.container.spring::after {
	border-color: rgb(17 131 64);
}
.container.summer::after {
	border-color: rgb(172 98 3);
}
.container.fall::after {
	border-color: rgb(160 109 100);
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.container .content {
	padding: 0px;
	position: relative;
	border-radius: 6px;
	font-weight: 600;
	line-height: 150%;
	border: solid 3px white;
}
.bgoverlay {
	padding: 10px 40px;
    background-color: rgba(100,100,100,0.5);
    width: 100%;
    height: 100%;
	box-sizing: border-box;
	color: white;
	border-radius: 6px;
}

span.strong {
	font-weight: 600;
}
img.serviceimg {
}
.service {
	width: 100%;
	text-align: center;
	padding: 0vh 25px 10vh 25px;
	background: white;
	margin-top: -3px;
	margin-bottom: 10vh;
	border-top: solid 1px rgba(150,150,150,1);
    border-bottom: solid 1px rgba(150,150,150,1);
}
.service h2.title {
	padding: 5vh 0vh;
}
.service p {
	font-size: 1.1em;
	text-align: center;
	line-height: 150%;
}
.service p:last-of-type {
	margin-bottom: 5vh;
}
.button {
	margin: 0 auto;
	width: 50%;
	border: solid 1px;
	padding: 20px;
	display: block;
	text-decoration: none;
	font-size: 1.1em;
	text-align: center;
}
.button.cta {
	box-sizing: border-box;
	background-color: rgb(17 131 76);
	color: white;
	border-color: rgb(17 131 76);
}
.button.cta:hover {
	background-color: white;
	color: rgb(17 131 76);
	border-color: rgb(17 131 76);
}
.locallyowned{
	width: 100%;
	text-align: center;
	margin: 0; 
	display: inline-block;
	box-sizing: border-box;
	padding-top: 5vh;
	padding-bottom: 8vh;
}
.locallyowned h1:hover {
	cursor: pointer;
}
.refercta {
	font-weight: 800;
	text-decoration: none;
	font-size: 2rem;
	color: rgba(217,220,23,1);
}
.poq {
	min-height: 450px; 
	width: 100%;
	text-align: center;
	margin: 0; 
	display: inline-block;
	box-sizing: border-box;
	padding-top: 0;
	padding-bottom: 0;
}
.poq .before, .poq .after  {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: contain;
	width: 50%;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(195,195,195,1);
	font-size: 5vmax;
}
.poq .before {
	background-position: left;
}
.poq .after {
	background-position: right;
}
img.sizeadjust{
	height: 720px;
	width: 50%;
	visibility: hidden;
	padding-top: 1vh;
}
.poq .banner {
	width: 100%; 
	background: white; 
	padding: 5vh 10vw 10vh 10vh;
	color: rgba(80,80,80,1); 
	font-weight: bolder; 
	font-size: 2vmax; 
	display: flex;
	flex-wrap: wrap;
	align-items: center; 
	justify-content: center;
	box-sizing: border-box;
}
.notability {
	width: 100%;
	background: url(../media/mainlinevan.webp?v=1);
	background-attachment: fixed;
	background-size: cover;
	height: 90vh;
}
.advantages{
	background: white;
	min-height: 450px; 
	width: 100%;
	text-align: center;
	margin: 0; 
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	box-sizing: border-box;
	margin: 0 auto;
}

.quickcontact {
	background: rgb(0 49 186);
	width: 100%;
	text-align: center;
	margin: 0; 
	display: inline-block;
	box-sizing: border-box;
	padding-top: 50px;
	color: rgba(252,252,252,1);
	padding: 50px 25px;
	border-top: solid 1px rgb(50 103 50);
}
.quickcontact h1 {
	font-size: 3vmax;
	color: rgba(252,252,252,1);
	padding-bottom: 50px;
}
.quickcontact h2 {
	margin-bottom: 50px;
}
.quickcontact input[type=text], .quickcontact input[type=tel].quickcontact input[type=email], .quickcontact textarea, .quickcontact input[type=submit] {
	padding: 15px;
	box-sizing: border-box;
	line-height: 150%;
	font-size: 1.5vmax;
	border: solid 1px rgba(78,105,71,1);
	width: 100%;
	font-weight: bold;
	color: rgb(0 49 186);
	text-align: center;
	transition: all 250ms ease-in-out;
}
.quickcontact input[type=text]::placeholder, .quickcontact input[type=tel]::placeholder, .quickcontact input[type=email]::placeholder, .quickcontact textarea::placeholder {
	color: rgba(0,49,186,0.5);
}
.quickcontact textarea {
	width: 85%;
	font-size: 1.5vw;
}
.quickcontact input[type=submit] {
	width: 60%;
	margin: 25px auto;
	background-color: rgba(255,255,255,1);
}
.quickcontact input[type=submit]:hover {
	cursor: pointer;
	transform: scaleX(1.045);
}
span.label {
	width: 100%;
	display: block;
	font-size: 1.1vmax;
	font-weight: bolder;
	padding-bottom: 1vh;
}
.inputwrapper {
	text-align: left;
	padding: 15px;
	width: 26%;
}
.locallyowned h1 {
	font-size: 2vmax;
	color: rgba(0,49,186,1);
	padding-top: 50px;
	padding-bottom: 100px;
	width: 100%;
}
.poq h1, .advantages h1 {
	font-size: 1.75vmax;
	color: rgba(0,49,186,1);
	width: 100%;
	padding-bottom: 2vh;
}
#grass {
		background-image: url(../media/grass.webp);
}
#clock {
	background-image: url(../media/clock.webp);
}
#optimal {
	background-image: url(../media/optimal.webp);
}
#glass {
	background-image: url(../media/glass.webp);
}
#hoses {
	background-image: url(../media/hoses.webp);
}
#bylaw {
	background-image: url(../media/bylaw.webp);
}
.whychoose {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.75vmax;
	font-weight: bolder;
	color: rgba(80,80,80,1);
	padding: 5vmax 15px;
}
.whychoose:hover {
		cursor: pointer;
}
.repairanduse {
	box-sizing: border-box;
	background: white;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-size: 1.75vmax;
	font-weight: bolder;
	color: rgba(80,80,80,1);
	padding: 10vh 6vw;
	text-align: center;
	line-height: 150%;
}
.repairanduse h1 {
	font-size: 2vmax;
}
.repairanduse span {
	margin-bottom: 10vh;
}
.productpictures {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	padding-bottom: 10vh;
}
.repairanduse img.brand {
	height: 100px;
	padding: 100px 50px 0px 50px;
}
#google-reviews {
	padding: 10vh 0px;
	display: flex;
	color: rgb(32,33,35);
	font-family: Roboto, sans-serif;
	font-weight: 400;
	font-size: 1.1vmax;
	line-height: 150%;
	flex-wrap: wrap;
}
.review-item {
	box-sizing: border-box;
	background: white;
	border: solid 1px rgba(128,128,128,0.38);
	flex: 1 1 0;
	border-radius: 0.5vw;
	box-sizing: border-box;
	padding: 3vh 2vw;
	margin: 1vh 1vw;
}
.review-stars {
	display: inline-block;
}
.review-stars ul {
	list-style-type: none;
	color: rgb(226,226,45);
	margin: 0;
	padding: 0;
	margin-left: 1vw;
}
.review-stars ul li {
	display: inline-block;
	padding: 2px;
}
.review-date {
	font-style: italic;
	color: rgba(150,150,150,1);
	font-size: 0.6vmax;
	font-weight: initial;
}
.advantage {
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	min-width: 350px;
	color: rgba(50,103,50,1);
	font-weight: bolder;
	font-size: 2vmax;
}
.advantage .alignfix {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 0px 50px;
	text-align: center;
	width: 50%;
}
.advantage .img {
	height: 720px;
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;		}
.advantage h2 {
	color: rgba(95,211,95,1);
	font-size: 2.75vmax;
}
.advantage img {
	width: 50%;
	vertical-align: middle;
}
.referFriend {
	width: 75%;
	min-width: 250px;
	padding: 5vh 8vw; 
	margin: 0 auto;
	text-align: left;
}
.contactInfo {
	box-sizing: border-box;
	width: 50%;
	padding: 0px 8vw;
	padding-bottom: 10vh;
}
.consultation {
	width: 50%;
	min-width: 250px;
	padding: 0px 8vw; 
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	padding-bottom: 10vh;
}
.socials {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 5vh 8vw;
}
.socials img {
	width: 100px;
	box-shadow: none;
}
.contactInfo p {
	font-size: 1.3rem;
}
label.main {
	padding: 10px 5px 5px 5px;
	display: block;
	width: 100%;
	text-align: left;
}
label.main span {
	font-weight: bold;
}
input[type=text], input[type=tel], input[type=email], textarea {
	padding: 16px;
	width: 100%;
	text-align: left;
	margin-bottom: 2vh;
}
input[type=checkbox] {
	margin-top: 10px;
	width: 15px;
	height: 15px;
}
input[type=radio] {
	margin-top: 10px;
	width: 15px;
	height: 15px;
}
.referFriend p {
	line-height: 150%;
	text-align: left;
}
input[type=submit] {
	display: block;
	cursor: pointer;
	width: 80%;
	padding: 16px;
	color: white;
	font-size: 1.1em;
	background: rgb(17 131 64);
	margin: 0 auto;
	margin-top: 25px;
	border: solid 1px rgb(17 131 64);
}
input[type=submit]:hover { 
	color: rgb(17 131 64);
	background: white;
	border: solid 1px rgb(17 131 64);
}
footer {
	font-size: 1vw;
	border-top: solid 1px rgba(0,0,0, 0.2);
	min-height: 600px;
	width: 100%;
	background: rgba(50,50,50,1);
	color: rgb(175,175,175);
	letter-spacing: 1px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: normal;
	padding-top: 5vh;
}
footer .btncta {
	margin-top: 4vh;
	padding: 2vh 1vw;
	background: rgb(38 154 96);
	width: 90%;
	color: rgba(255,255,255,1);
	font-size: 1.5vw;
	font-weight: bolder;
	border-radius: 3px;
	border: solid 1px rgb(38 154 96);
	transition: all 200ms ease-in-out;
}
footer .btncta:hover {
	cursor: pointer;
	background: rgba(255,255,255,1);
	color: rgb(38 154 96);
	border: solid 1px rgb(38 154 96);
	transition: all 200ms ease-in-out;
}
footer a{
	text-decoration: none;
	color: rgba(255,255,255,1);
	font-weight: bolder;
}
footer h3 {
	color: rgb(100,100,100);
	font-size: 2vw;
	text-align: left;
}
ul {
	list-style-type: none;
}
ul li {
	padding: 1vh 1vw;
	max-width: 301px;
}
footer .footabout {
	font-size: 1vw;
	line-height: 150%;
}
.footcontacttitle{
	font-weight: 800;
	font-size: 1.4vw;
}
#mapframe {
	width: 100%;
}
.mobileonly {
	display: none;
}
.desktoponly {
	display: block;
}
.desktoponly:hover {
	cursor: pointer;
}
/* Set the size of the div element that contains the map */
#map {
  height: 300px;
  width: 300px;
}
@media screen and (max-height: 1285px){
	.overlay{
		padding-top: 150px;
	}
}
@media screen and (max-width: 641px){
	/* Place the timelime to the left */
	.timeline::after {
		left: 31px;
	}
	
	input[type=submit] {
		padding: 16px 0px;
		width: 100%;
	}

	/* Full-width containers */
	.container {
		width: 100%;
		padding-left: 70px;
		padding-right: 25px;
	}

	/* Make sure that all arrows are pointing leftwards */
	.container::before {
		left: 60px;
		border: medium solid white;
		border-width: 10px 10px 10px 0;
		border-color: transparent white transparent transparent;
	}

	/* Make sure all circles are at the same spot */
	.left::after, .right::after {
		left: 15px;
	}

	/* Make all right containers behave like the left ones */
	.right {
		left: 0%;
	}
	.modal_body {
		padding: 20vh 10vw;
		margin: 10vh 5vw;
		width: 90vw;
		height: 80vh;
	}
	#videobg{
		background: url('../media/pgpflowers.webp') no-repeat center;
		background-size: cover;
		right: 0;
		bottom: 0;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
	}
	.navlogo {
		height: 30vw;
		padding: 1vh 1vw;
	}
	.mobileMenuBurger {
		display: block;
		right: 1.5vw;
		top: 1.5vh;
	}
	.navbar .navbuttons{
		display: none;
	}
	.overlay {
		padding-top: 150px;
	}
	.overlay .buttons {
		padding-top: 1vh;
		padding-bottom: 1vh;
	}
	.overlay .overlaybtn {
		font-size: 5vw;
		width: 100%;
		margin: 10px 25px;
		line-height: 150%;
	}
	.refercta {
		font-size: 1.5rem
	}
	.poq {
		padding-top: 10vh;
	}
	.poq .before, .poq .after  {
		background-attachment: initial;
		background-size: contain;
		width: 100%;
	}
	.notability {
		background-attachment: initial;
		background-size: contain;
		width: 100%;
		height: auto;
		background-repeat: no-repeat;
	}
	.poq .before {
		background-position: left;
	}
	.poq .after {
		background-position: right;
	}
	.advantages, .poq {
		padding-top: 50px;
		padding-bottom: 50px;
		width: 100vw;
	}
	img.sizeadjust{
		height: auto;
		width: 100%;
		visibility: hidden;
	}
	.poq .banner {
		height: auto;
		padding: 20vh 5vw;
		font-size: 3vmax;
		line-height: 150%;
	}
	.whychoose {
		font-size: 3vmax;
	}
	.repairanduse {
		font-size: 3vmax;
	}			
	.repairanduse img {
		width: 80%;
		height: auto;
	}
	.repairanduse img.brand {
		padding: 100px 5px;
	}
	.locallyowned h1, .advantages h1 {
		padding-top: 25px;
		padding-bottom: 50px;
	}
	.poq h1, .advantages h1 {
		padding-bottom: 4vh;
		margin: 0;
		font-size: 7vw;
	}
	#grass {
		background-image: url(../media/grass400h.webp);
	}
	#clock {
		background-image: url(../media/clock400h.webp);
	}
	#optimal {
		background-image: url(../media/optimal400h.webp);
	}
	#glass {
		background-image: url(../media/glass400h.webp);
	}
	#hoses {
		background-image: url(../media/hoses400h.webp);
	}
	#bylaw {
		background-image: url(../media/bylaw400h.webp);
	}
	.locallyowned h1 {
		font-size: 6vw;
	}
	#google-reviews {
		font-size: 2.3vmax;
		font-weight: 600;
		color: rgb(102 102 102);
		padding: 0px 1vw;
	}
	.review-item {
		border-radius: 2vw;
		padding: 5vh 10vw;
	}
	.review-date {
		font-size: 1.8vmax;
	}
	.button {
		width: 80%;
	}
	.content .header a {
		display: block;
	}
	.content .header h1 {
		font-size: 1.5rem;
	}
	.content .pageNavigation a {
		width: 100%;
		display: block;
		flex: unset;
	}
	.content .meet {
		width: 100%;
		padding-top: 5vh;
		padding-bottom: 5vh;
	}
	.content .meet div:first-of-type {
		text-align: center;
	}
	.content img {
		max-width: 75vw;
	}
	.tipfix {
		font-size: 0.9rem;
	}
	.content .tip-trick {
		padding: 25px 0px;
	}
	.content .tip-trick img {
		width: 75vw;
		padding: 25px 0px;
	}
	.consultation {
		width: 100%;
	}
	.contactInfo {
		width: 100%;
		padding-bottom: 0vh;
	}
	input[type=text], input[type=tel], input[type=email], textarea {
		width: 90%;
	}
	.advantage {
		flex-wrap: wrap;
		margin-bottom: 1vh;
		width: 100%;
		min-width: 100%;
	}
	.advantages {
		width: 100%;
	}
	.advantage .alignfix {
		padding: 75px 15px 100px 15px;
		width: 100vw;
		height: 35vh;
		font-size: 3vmax;
	}
	.advantage .img {
		height: 65vh;
		background-position: center center;
		background-repeat: no-repeat;
	}
	.advantage h2 {
		margin-top: 0;
	}
	.productpictures img {
		width: 125px;
		padding: 20px;
	}
	.quickcontact input[type=text], .quickcontact input[type=tel], .quickcontact input[type=email], .quickcontact textarea, .quickcontact input[type=submit] {
		width: 100%;
		font-size: 2vmax;
	}
	.quickcontact textarea {
		width: 100%;
		min-height: 175px;
	}
	span.label {
		font-size: 2vmax;
	}
	.inputwrapper {
		width: 100%;
	}
	footer {
		font-size: 5vw;
		justify-content: left;
		
	}
	footer .btncta {
		font-size: 5vw;
		width: 100%;
	}
	footer h3 {
		font-size: 6vw;
	}
	footer ul {
		box-sizing: border-box;
		width: initial;
		margin: 0vw 10vw;
		max-width: 90%;
		padding-inline-start: 0px;
	}
	footer .footabout {
		font-size: 5vw;
	}
	.footcontacttitle{
		font-weight: 800;
		font-size: 6vw;
	}
	#mapframe {
		width: 100%;
	}
	.mobileonly {
		width: 100vw;
		display: block;
	}
	.desktoponly {
		display: none;
	}
}