/* main.css */

@font-face {font-family: firstFont; src: url(hemi.woff)}

* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

body {
	background-image: url(background.jpg);
	background-color: black;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
	font-family: firstFont, serif;
	font-size: 1.5em;
}

.small {
	font-size: 0.6em;
	vertical-align: text-top;
}

@media only screen and (max-width: 600px) {
	body {
        background: url(bksmall.jpg);
		font-size: 0.7em;
	}
	
	.small {
		font-size: 0.35em !important;
	}
	
	#main {
		width: 100%;
	}
	
	#covid {
		width: 100%;
	}
	
	#col1 {
		width: 98% !important;
	}
	
	#col2 {
		width: 35% !important;
	}
	
	#col3 {
		float: left !important;
		width: 60% !important;
		max-height: 200px !important;
		margin-bottom: 2% !important;
		margin-left: 2%;
	}

	#col3 img {
		max-width: 100%;
		max-height: 180px;
		height: 180px;
		margin: 0 auto;
		vertical-align: text-top;
	}
	
	#myIframe {
		position: relative;	
		height: 780px;
		width: 100%; 
		display: flex;
		clear: both;
	}
	
	footer {
		height: 85px !important;
	}
	
	#div1, #div2 {
		top: 3px !important;
		height:70px !important;
	}
		
	#gallery {
		height: 400px !important;
	}
	
	article {
		position: relative;
		height: auto !important;
		max-height: 100%;
		width: 100%;
		}

	#fig3 {
		height: 300px !important;
		display: inline;
		position: absolute;
		top: 8%;
		left: auto !important;
	}
	
	#leftarrow, #rightarrow {
		width: 25px !important;
		height: 60px !important;
		top: 42% !important;
		padding-top: 20px; 
	}
		
	#leftarrow p, #rightarrow p {
		margin: auto 0 !important;	
	}
	
	#fig1, #fig2, #fig4, #fig5, #fiveButton {
		display: none !important;
	}

	#form {
		width:98% !important;
		max-height: 100%;
		float: none !important;
		clear: both;
		margin: 15px auto; /*centering form*/
	}
	
	#text1, #text2 {
		border: thin solid white !important;
		border-radius: 4px;
	}
	
	#text2 {
		height: 310px !important;
	}
	
	.row {
	clear: both;
	display: block !important;
	}
	
	
	.rad {
		margin-right: 40px !important;
	}
	
	.radtext {
	width: 10px;
	margin-left: 10% !important;
	}
	
	#find {
		float: none !important;
		clear: both !important;
		width: 98% !important;
		margin: 0 auto !important;
	}
	
	#gmap_canvas {
		width: 100% !important;
	}
	
}

.wrapper {
	max-width: 1500px;
	margin: 0 auto;
}

h1 {
	font-size: 3.5em;
	margin: 0;
	padding-top: 5px;
}

nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

nav ul li {
	width: max-content;
	padding-left: 0;
	padding-right: 20px;
	list-style: none;
	float: left;
	font-size: 1.5em;
}

nav ul li a {
	display: block;
	color: white;
	border-right: 1px solid #FFF;
	padding-right: 10px; 
	text-align: center;
	margin-bottom: 15px;

}

#contact {
	display: block;
	min-width: max-content;
}

#oper {
	width: 376px;
	border: thin solid white;
	background: url(hours.jpg);
}

#oper img {
	max-width: none !important;
	max-height: none !important;
}

#col1 {
	clear: both;
	float: left;
	width: 80%;
	padding: 0;
	
}

#col2 {
	clear: both;
	float: left;
	width: 20%;
	position: relative;
	height: max-content;
	margin-bottom: 2%;
}

#col3 {
	float: right;
	width: 78%;
}

#col3 img {
	max-width: 100%;
	max-height: 352px;
	margin: 0 auto;
}

.current {
	color: #1aaaf1;
	text-decoration: underline;
}

a:link { 
	color: white;
}

a:visited {
	color: white;
}

a:hover {
	color: white;
}


footer {
	position: relative;
	width: 1500px;
	height: 130px;
	border: 5px double black;
	border-radius: 4px;
	background-color: #fff;
	overflow: hidden;
	margin-top: 15px;
	margin-bottom: 10px;
	max-height: 100%;
	max-width: 100%;
}

/* gallery main content */
#gallery {
	display: flex;
	clear: both;
	height: 780px;
	width: 100%;
	position: relative;
}

article {
	position: relative;
	height:760px;
	max-height: 100%;
	width: 100%;
}

#leftarrow, #rightarrow {
	background: #696565;
	color: white;
	z-index: 30;
	width: 40px;
	display: inline;
	position: absolute;
	top: 50%;
	cursor: pointer;
	border-radius: 2px;
}


#leftarrow {
	float: left;
	left: 1%;
}

#rightarrow {
	float: right;
	right: 1%;
}

#fiveButton {
	clear: both;
	color: white;
	position: relative;
	top: 92%;
	left: 0;
	right: 0;
	margin: 0 auto;
	cursor: pointer;
}

#fiveButton p {
	width: -moz-max-content;
    width: -webkit-max-content;
    width: -o-max-content;
    width: -ms-max-content;
	margin: 0 auto;
	padding: 0.5%;
	background: #696565;
	border-radius: 2px;
	padding: 0% 2% 0% 2%;
}

.button {
	width: 27%;
	text-align: center;
}


#leftarrow p, #rightarrow p {
	text-align: center;
}

figure {

   -webkit-box-shadow: 10px 0px 5px rgb(50, 50, 50),
                       -10px 0px 5px rgb(50, 50, 50);
   -moz-box-shadow:    10px 0px 5px rgb(50, 50, 50),
                       -10px 0px 5px rgb(50, 50, 50);
	box-shadow:        10px 0px 5px rgb(50, 50, 50),
                       -10px 0px 5px rgb(50, 50, 50);
}


#fig2 {
	z-index: 10;
	display: inline;
	position: absolute;
	top: 36%;
	left: 5%;
}

#fig3 {
	z-index: 20;
	height: auto;
	display: inline;
	position: absolute;
	top: 8%;
	left: 15%;
}

#fig4 {
   z-index: 10;
   display: inline;
   position: absolute;
   top: 36%;
   right: 5%;
}

/* logo marque */
img {
	max-width: 100%;
	max-height: 100%;
}

#div1 {
     position:absolute;
     left:0px;
     top: 10px;
     width: max-content;
     height:106px;
	 max-height: 100%;
}

#div2 {
    position:absolute;
    left:0px;
    top:10px;
    width:max-content;
    height:106px;
	max-height: 100%;
}
 
#logo{
	width: 100%;
    height: 100%;
	max-height: 100%;
}	

#main {
	padding-top: 4px;
	border: 5px double #000;
	border-radius: 4px;
	
}

#covid {
	border: 5px #000;
	border-radius: 4px;
	margin-top: 4px;
}

.row {
	clear: both;
	display: flex; /* equal height of the children */
	border-radius: 4px;
}

.col {
	flex: 1; /* additionally, equal width */
	padding: 1em;
	border: thin solid white;
}
	
/* forms */
#form {
	width:55%;
	max-height: 100%;
	float:left;
	clear: both;
	margin: 15px auto; /*centering form*/

}

#find {
	float:right;
	width: 44%;
	margin: 15px auto;

}

fieldset {
	position: relative;
	margin: 10px 15px 25px 15px;
	border-radius: 4px;
}


legend {
   font-weight: bold;
   font-size: 1.5em;
   position: relative;
   padding: 0;
   color: white;
}

input, label, select, textarea, fieldset p  {
   position: relative;
   border: none;
   border-radius: 4px;
}


input, textarea {
	padding: 4px;
}

.input {
	position: relative;
	height: 1.2em;
	font-size: 0.8em;
	clear: right;
	float: left;
	margin-left: 5%;
	margin-top: 0.5%;
}

#text1 {
	border: none;
	margin: 0 auto;
}

#text2 {
	border: none;
	margin: 10px auto;
}

#selection {
	clear: both;
}

#selector {
	display: grid;
}

.rad {
	width: 15px;
	height: 15px;
	top: 18px;
	position: relative;
}

.radtext {
	width: 10px;
	margin-left: 9%;
}

.honeypot-field {
  display: none;
}

#makeLabel, #yrLabel, #modelLabel, #vinNumLabel, #file{
   width: 8em;
   text-align: right;
   float: left;
   clear: left;
   margin-right: 10px;
}


#queryBox {
   text-align: left;
   height: 4em;
   float: left;
   clear: left;
   margin-top: 5px;
}

.button-success {
  clear: both;
  text-align: center;
  border: none;
  padding: 0% 2% 0% 2%;
  font-family: firstFont;
  font-size: 1em;
  cursor: pointer;
  border-radius: 2px;
}

#buttonContainer {
	clear: both;
	width: 100%;
	text-align: center;
}


#fiveButton p:hover, #orderButton:hover,
#leftarrow:hover, #rightarrow:hover {
    background-color: #1aaaf1;
	color: white;
}

textarea {
	width: 58%;
	font-size: 1em;
	float: left;
	clear: left;
	margin-top: 5px;
	margin-bottom: 10px;
}

label {
   width: 8em;
   text-align: right;
   float: left;
   clear: left;
   margin-right: 10px;
   margin-bottom: 5px;
}

.errorMsg {
	position: relative;
	width: 50%;
	height: 1em;
	font-size: 0.8em;
	clear: right;
	float: left;
	margin-left: 5%;
	margin-top: 0.5%;
	color: red;
	font-size: 0.5em;
}

#thankyou_message {
	font-size: 2em;
	text-align: center;
	color: #1aaaf1;
	border: none;
	margin-top: auto 0 !important;
	}

/* maps */
#trade {
	width: 100%;
	color: white;
	border: thin solid white;
	border-radius: 4px;
	padding: 0 auto;
	background: url(trade.jpg);
	font-size: 0.95em;
}

ul.hrs {
	list-style: none;
	padding-left: 5px;
}

.loca {
background: url(loca.png) no-repeat left 5px;
padding-left: 28px;
display: block;
}

.cont {
background: url(cont.png) no-repeat left 5px;
padding-left: 28px;
display: block;
}

.mail {
background: url(mail.png) no-repeat left 5px;
padding-left: 28px;
display: block;
}

.oper {
background: url(oper.png) no-repeat left 5px;
padding-left: 28px;
display: block;
}

#map {
	height: 435px;
	margin-bottom: 15px;
	border:thin solid #1aaaf1;
	border-radius: 4px;
	color: black;
}

#google {
	color: blue !important;
	text-decoration: none !important;
}

#gmap_canvas {
	height:100%;
	width:100%;
}

#gmap_canvas img {
	max-width:none!important;
	max-height:none!important;
	background:none!important;
}