@import url(//fonts.googleapis.com/css?family=Days+One|Permanent+Marker|Kaushan+Script);


body, html{
	height: 100%;
}
body {
	background-color: #FFFFFF;
	font-family:  Arial, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: large;
	font-weight: normal;
	color: #333333;
	margin: 0;
	padding: 0;
}
img {
	border: 0;
	max-width: 70vw;
}
h1, h2, h3, .service, .dealers, .tel, header {
	font-family: Days One;
	font-weight: 400;
}
h2 {
	margin-left: 50px;
}
table {
    border-collapse: separate;
	border: 0;
	width: 100%; 
	border-spacing	: 5px;
}
td {
	vertical-align: top;
	padding: 5px 0.5vw;
}
textarea {
	text-align: left;
}
header{
	background-color: #222;
	color: #fff; 
	font-size: 20px;
}
header > div{
		display: grid;
		max-width: 1000px;
		margin: auto;
}
video{
	width: 100%;
	height: auto;
}
#all {
	margin: 0;
	min-height:100%;
	position:relative;
}
#topcontainer {
	padding-bottom: 290px;
}
#base{
	height: 285px;
	width: 100%;
	position: absolute;
	bottom: 0;
	background-color: #4A6C8E;
	border-top: 5px solid #63DBDF;	
} 
#container {
	max-width: 1100px;
	padding: 0px 50px;
	margin: auto;
}
.logo {
	display: grid;
	justify-content: center;
	text-align: center;
	font-size: .95rem;
	font-family:  Arial, Helvetica, sans-serif;
	color: #fff; 
	text-transform: uppercase;
}
.logo span{
	font-size: 2.5rem;
	font-weight: 800;
	display: block;
}
.logo a{
	text-decoration: none;
	color: #60A6D4;

}
.logo img{
	width: 300px; 
	display: block;
	margin: auto;
}
header > div > div{
	padding: 1rem; 
	text-align: center;
}
.tel {
	white-space:nowrap;
	color: #fff;
	font-size: 20px;
	line-height: 200%;
}
.tel a{
	color: #fff;
	text-decoration: none;
}
.service {
	color: #96C53F;	
	font-size: 26px;
	text-align: center; 
}
.service .blue {
 	color: #63DBDF;
}
#maintext{
	max-width: 1200px;
	padding: 25px 5vw;
	font-size: 15px;
	line-height: 180%;
	color: #333;
	margin: auto;
}
#maintext h1 {
	color: #63DBDF;
}
#maintext a{
	text-decoration: none;
	color: #333;
}
#maintext a:hover{
	text-decoration: underline;
	color: #000;
}
.quotelink {
	background-color: #A7CE5F;
	padding: 6px;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	font-size: 20px;
	white-space:nowrap;

}
a.quotelink{
	color: #fff !important;

}
.quotelink:hover{
	background-color:  #63DBDF;
	text-decoration: none !important;
}

.dealers {
 	color: #63DBDF;
	font-size: 26px;
	text-align: center; 
}

.links {
	min-height: 50px;
	background-color: #333;
	color: #fff;
	font-size: 16px;
	line-height: 50px;
	text-align: center; 
	border-top: 5px solid #63DBDF;
}
.links a{
	color: #fff;
	text-decoration:none;
	white-space:nowrap;
	padding: 16px 1vw 16px 1vw;
}
.links a:hover{
	background-color:#63DBDF;
	color: #333;
	border-bottom: 5px solid #333;
	border-radius: 0 0 5px 5px;
}
.blur {
	 background-image:url('images/car-blur.jpg');
	 }
.garage {
	 background-image:url('images/garage.jpg');
	 background-position: bottom center !important;
	 }
.wheel {
	 background-image:url('images/wheel.jpg');
	 }
.check {
	 background-image:url('images/check.jpg');
	 }
.telemarketing {
	 background-image:url('images/telemarketing.jpg');
	 }
.sunset {
	 background-image:url('images/sunset.jpg');
	 }
.car {
	 background-image:url('images/car.jpg');
	 }
.key {
	 background-image:url('images/key.jpg');
	 }
.spanner {
	 background-image:url('images/spanner.jpg');
	 }
.audi {
	 background-image:url('images/audi.jpg');
	 }
.handshake {
	 background-image:url('images/handshake.jpg');
	 }
.blur2 {
	 background-image:url('images/blur.jpg');
	 }
.engine {
	 background-image:url('images/engine.jpg');
	 }
.speedo {
	 background-image:url('images/speedo.jpg');
	 }
.start {
	 background-image:url('images/start.jpg');
	 }
.careers {
	 background-image:url('images/careers.jpg');
	 }
.boot {
	 background-image:url('images/boot.jpg');
	 }
#banner{
	 min-height: 500px;
	 background-size: cover;
	 background-position: center center;
	 box-shadow: inset -3px -135px 166px -81px rgba(0,0,0,0.9);
 	background-repeat: no-repeat;
}

.formspacer {
	 padding: 50px 400px 0 0;	
}	 
.regform{
	max-width: 450px;
	min-height: 100px;
	background-color: rgba(51,51,51,0.7);
	margin:  auto; 
	padding: 30px 50px;
	color: #fff;
	line-height: 180%;
	backdrop-filter: blur(7px);
}
.regform a{
	color: #fff;
} 
.regform a:hover{
	text-decoration: none;
}
.regform h1 {
	line-height: 180%;
}
.regform input, .baseform input, .caps {
	font-size: 24px;
	background-color: #96C53F;
	color: #fff;
	padding: 6px;
	text-transform: uppercase;
	border: 0; 
	margin: 5px;
	border-radius: 5px;
	text-align: center;
}
.regformtxt{
	width: 150px;
	display: inline-block;
	color: #fff;
	font-size: 24px;
}
#arrows{
	padding: 30px 0 0 0;
	max-width:800px;
	margin: auto;
}
.arrow{
	float: left;
	background-image:url('images/arrow.png');
	background-size: contain;
	width: 200px;
	height: 140px;
	background-repeat: no-repeat;
	margin: 0px -10px 0 0;
}
.arrowtxt{
	padding: 25px 40px 0 50px;
	color: #fff;
	font-size: 14px;
	width:  110px;
	height: 90px;
	font-weight:bold;

}
.clr {
		clear: both;
}
.clr2 {
		clear: both;
		border-bottom: 2px dashed #ddd;
		margin-bottom: 5px;
}
.social{
}
.social img{
	margin: 0 15px 15px 0;
	width: 40px; 
}
#box{
	max-width: 800px;
	margin: auto; 
}
.box{
	background-color: #63DBDF;
	height: 150px;
	width: 170px;
	padding: 10px 30px;
	margin: 15px;
	float: left;
	border-radius: 10px;
	text-align: center;
	color: #fff;
	font-size: 15px;
}
.box a{
	color: #fff;
	text-decoration: none;
}
.box a:hover{
	color: #000;
}
#footer {
	min-height: 200px;
	background-color: #333;	
	color: #fff;
	font-size: 14px; 
	line-height: 170%;
}
#footer .block{
	display: grid;
	max-width: 1000px;
	margin: auto;
	gap: 1rem; 
	padding: 2rem 0; 
}
#footer .block > div{
	padding: 1rem 0.25rem; 
}
#footer a{
	text-decoration: none;
	color: #fff;
}
#footer a:hover{
	text-decoration: underline;
	color: #ccc;
}
.terms{
	padding: 20px ;
}
.address{
	padding: 0px ;
}
.copy {
	padding: 10px;
	font-size: 16px;
	background-color: #000;
	color: #fff;
	text-align: center;
}
.heightone td {
	background-color:#63DBDF;
	color: #fff;
	padding: 10px;
	border-radius: 5px;
	height: 100%; 

}
.quote td{
	text-align: center;
	background-color: #A7CE5F;
	border-radius: 5px;
	padding: 0;
} 
.quote .quotelink{
	display: block;
}
.green td{
	text-align: center;
	background-color: #A7CE5F;
	border-radius: 5px;
	color: #fff; 
} 

blockquote {
  background: #96C53F;
  border-left: 10px solid #63DBDF;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #fff;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {
  color: #fff;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
  color: #fff;
}
.baseform{
	background-color: #333;
	padding: 10px;
	text-align: center;
}
.goright {
	text-align: right;
}
.contact{
	width: 100%;
}
.contact td {
	width: 45%;
}
.formtable tr:nth-child(odd) {
	background-color: #f3f3f3; 
}
.formtable tr:nth-child(even) {
	background-color: #fafafa; 
}
.formtable td {
	border-radius: 5px;
	padding: 10px 20px;
}

.formtable input, textarea {
	font-size: 24px;
	background-color: #96C53F;

	padding: 6px;
	border: 0; 
	margin: 5px;
	border-radius: 5px;
	text-align: center;
	font-family:  Arial, Helvetica, sans-serif;
}
textarea {
	text-align: left;
} 
.contactus{
	display: grid;
}
.contactus > div{
	padding: 1rem; 
	border-bottom: 2px dashed #ddd;
}
.contactus h3{
	margin-top: 0; 
}
.contactus img{
	width: 50px; 
}
#dealerlink{
	float: right;
}

.charts img{
	margin: 20px;	
}
.charts {
	text-align: center;
}
.news {	
	border-radius: 5px;
	background-color: #eee;
	color: #000;
	padding: 5px 5vw;
	margin: 0 10px 30px 0;
}
.pics img {
	border-radius: 5px;
} 
/* NAV */


#nav > div.burger a {
	display: none;
}




@media only screen and ( min-width: 640px ){
	/* header > div{
		grid-template-columns: 1fr 1fr;
	} */
	header > div > div{
		padding: 2rem;
	}
	header .tel{
		text-align: right;
		display: grid;
		align-items: end;
	}
	#footer .block{
		grid-template-columns: 1fr 1fr 1fr ;
	}
	.contactus {
		grid-template-columns: 1fr 1fr;
	}
}

@media only screen and ( min-width: 1000px ){
	.regform{
	border-radius: 15px;
}
} 

/* MOBILE STUFF */


.tel2,.tel2:visited { /*for small screens */
color:#fff;
text-decoration:none;
}
.tel2:hover,.tel2:focus {
color:#fff;
}
.tel .tel2:hover,.tel .tel2:focus, .tel .tel2,.tel .tel2:visited {
color:#fff;
}

@media screen and (min-width: 640px) { /* for larger screens */
.tel2,.tel2:visited {
background:none;
cursor:default !important;
}
.tel2,.tel2:focus {
color:#fff;
}
.tel .tel2:hover,.tel .tel2:focus, .tel .tel2,.tel .tel2:visited {
color:#fff;
}

}

@media only screen and ( max-width: 990px )
{

.threecols{
    -webkit-column-count: auto; /* Chrome, Safari, Opera */
    -moz-column-count: auto; /* Firefox */
    column-count: auto;
}
#nav > div.burger a
    {
    width: 2rem; 
    height: 2rem; 
    text-align: center;
    margin: auto;
    background-repeat: no-repeat;
    background-size: 75%;
    background-position: center;
    position: relative;
    padding: 1rem; 
    }
    #nav:target > .links {
        display: grid;
    }
	#nav:target > .links a{
		padding: 0; 
	}
    #nav:not( :target ) > a.open,
    #nav:target > a.close
    {
    display: block;
    }
    #nav > div a.open{
        background-image: url('images/menu.svg');
        text-indent: -9999px; 
    }
    #nav:target > div a.close{
      background-image: url('images/close.svg');
      text-indent: -9999px; 
    }
    #nav:not(:target) > div a.open, #nav:target > div a.close {
        display: block;
    }
    #nav > .links {
        height: auto;
        display: none;
        list-style: none;
        padding: 0; 
    }
    #nav > .burger{
        display: block;
        margin: auto; 
		background-color: #222;
    }

}




@media only screen and ( max-width: 640px )
{
.formspacer {
	 padding: 0px;	
}
.regform{
	min-height: 100px;
	background-color: rgba(61, 86, 111, 0.7);
	margin:  auto; 
	padding: 10px 10px;
	border-radius: 0;
	min-width: 200px;
	width: calc( 100% - 20px); 
	max-width: none;
}
#arrows, #registration {
    display: none;
}
.formtable td{
	padding: 3px 3px;
}
.formtable input, textarea{
	padding: 3px;
	max-width: 200px;
}
.tel {
	font-size: 14px;
}
#maintext{
	padding: 2vw;
}
#container{ 
	padding: 0 2vw;
}

}