@import url(//fonts.googleapis.com/css?family=Roboto|Days+One);


body, html{
	height: 100%;
}
body {
	background-color: #FFFFFF;
	font-family:  Arial, Helvetica, 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 {
	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;
}

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: #333;
	border-top: 5px solid #63DBDF;	
} 
#container {
	max-width: 1100px;
	padding: 0px 50px;
	margin: auto;
}
.logo {
	
}
.tel {
	float: right;
	white-space:nowrap;
	color: #333;
	font-size: 20px;
	padding: 90px 0 0 30px ;
	line-height: 200%;
}
.tel a{
	color: #333;
	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: 15px 1vw 16px 1vw;
}
.links a:hover{
	background-color:#63DBDF;
	color: #333;
	border-bottom: 5px solid #333;
	border-radius: 0 0 5px 5px;
}

#footer {
	min-height: 200px;
	background-color: #333;	
	color: #fff;
	font-size: 14px; 
	line-height: 170%;
}
#footer .block{
	max-width: 800px;
	margin: auto;
	padding: 30px 50px;
}
#footer a{
	text-decoration: none;
	color: #fff;
}
#footer a:hover{
	text-decoration: underline;
	color: #ccc;
}
.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;
	color: #fff;
	padding: 6px;
	border: 0; 
	margin: 5px;
	border-radius: 5px;
	text-align: center;
	font-family:  Arial, Helvetica, sans-serif;
}
textarea {
	text-align: left;
} 
.lefttd{
	width: 250px;
	float: left;
	margin: 0 20px 25px 0px;
	min-width: 25vw;
	
}

#loginbox{
	max-width: 600px;
	margin: 50px auto;
}
.contactform{
	background-color: #00a7c9;	
	border-radius: 10px; 
	padding: 20px; 
	color: #fff; 
}
#form tr:nth-child(odd){
    background-color: #f0f0f0 !important;
}
#form tr:nth-child(even) {
    background-color: #fff !important;

}
#form .dates select{
	width: auto;
}





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



@media screen and (min-width: 800px) { /* 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:#333;
}

.contactform input:not([type="submit"]),
.contactform textarea {
	border: 3px solid transparent !important;
	width: 210px; 
 
}
.contactform:focus-within input:not([type="submit"]):invalid,
.contactform:focus-within textarea:invalid {
	border: 3px solid red !important;
	margin-bottom: 0; 
}
.contactform:focus-within input:not([type="submit"]):valid,
.contactform:focus-within textarea:valid {
	border: 3px solid green !important;
	margin-bottom: 0; 
}
.contactform:focus-within, .contactdiv > div:focus-within {
	background-color: #1c3361;
}
.newpassword {
	position: relative; 
}
input.newpassword:invalid::after{
  content: "more than 8 characters, must contatin one upper case, one lower case, one number";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-color: red;
	color: #fff;
	padding: 10px; 
}
input, textarea, select {
	font-family:Roboto, "Open Sans", Calibri, "Trebuchet MS", Arial, Helvetica, sans-serif, Sans;
	font-size: 15px;
	border-radius: 5px;
	padding: 7px;
//	border: 2px solid transparent;
	background-color: #fff;
	max-width: 80vw;
	width: 230px; 
} 
select{
	width: 250px; 
}
}

@media only screen and ( max-width: 990px )
{
.tel {
	padding: 10px 0 20px 0;
}

}




@media only screen and ( max-width: 640px )
{
.formspacer {
	 padding: 10px;	
}
.regform{
	width: auto;
	min-height: 100px;
	background-color: rgba(61, 86, 111, 0.7);
	margin:  auto; 
	padding: 10px 10px;
	border-radius: 5px;
	min-width: 200px;
}
#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;
}
.address, .terms, .social{
	width: 100%;
}
}