/*CSS RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

select {
	max-width: 170px !important;
	width:100% !important;
}


/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
 header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	font-family: "Open Sans", sans-serif;
	opacity: 0;
	transition: opacity 1ms ease-in-out;
}
body.loaded {
	opacity:1;
}
ol, ul {

	width: 90%;
	margin: 0 auto;
	padding-left:70px;
}

footer {
  background-color: #333; /* Dark background color */
  color: #fff; /* Light text color */
  text-align: center; /* Center align text */
  position: fixed; /* Fixed positioning at the bottom */
  width: 100%; /* Full width */
  bottom: 0; /* Stick to the bottom */
  padding: 10px 0; /* Padding top and bottom */
}

/* Styling for the links in the footer */
.footer-content {
  display: flex; /* Flexbox for horizontal and vertical centering */
  justify-content: center; /* Center align items horizontally */
  align-items: center; /* Center align items vertically */
  height: 100%; /* Full height of the footer */
}

.footer-content p {
  margin: 0 20px; /* Add space between links */
}

.footer-content a {
  color: #fff; /* Link color */
  text-decoration: none; /* Remove underline */
  font-size: 14px; /* Adjust font size */
}
@media print {
  * {
    display: none;
  }
  #printableTable {
    display: block;
  }
 
  
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	max-width:80vw !important;
}
/*END CSS RESET*/

table td {
	text-align:center;
}

.mainimage {
width:200px;	
}

.paragraph {
	width:90%;
	margin: 0 auto;
	text-indent:1.2em;
	padding-bottom:10px;
}

.div1 img {
	width:200px;
	max-height: 250px;
  width: auto;
  object-fit: contain;
  max-width: 150px;
  border: 2px solid black;
 box-shadow: 5px 5px 10px black;
  border-radius: 20px;
}

 table tr:nth-child(even) {
    background-color: #f5f5f5; /* Light gray background color */
  }

  /* Style for even rows */
  table tr:nth-child(odd) {
    background-color: white; /* White background color */
  }

table.gsc-search-box td {
	border: none !important;
}
/*GRID*/
.container {
	display:grid;
	grid-template-columns: 21% 79%;
	grid-template-rows: auto auto;
	grid-template-areas:
	"nav content content";
	min-height: 100vh;

}
/*END GRID*/

.Button {
	border-radius:5px;
	background-color: #0022F1;
	color: white;
	cursor: pointer;
	  -webkit-box-shadow: 0 10px 6px -6px #777;
     -moz-box-shadow: 0 10px 6px -6px #777;
          box-shadow: 0 10px 6px -6px #777;
	border: 1px solid black;
	padding:5px 10px;
	margin-bottom:5px;
}

.Button:hover {
	background-color: white;
	color: black;
}

.Button:active {
	  -webkit-box-shadow: 0 5px 6px -6px #777;
     -moz-box-shadow: 0 5px 6px -6px #777;
          box-shadow: 0 5px 6px -6px #777;
  transform: translate(2px, 2px);
}
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 999;
  backdrop-filter: blur(5px); /* Add this line for background blur */
}

.modal-content {
  background-color: #0022F1;
  color: white;
  padding: 30px;
  border-radius: 5px;
  z-index: 1000;
  border: 2px solid #000;
}

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
.title {
  grid-row: 1 / 2 !important;
  grid-column: 1 / 3 !important;
  text-align: center !important;
  padding-top: 1em !important;
  margin-right: 0px;
  padding-bottom:25px !important;


}
.container1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 130px;
  padding: 20px;
  margin: 0 auto;
  place-items:center;
}

.parent {
display: grid;
grid-template-columns: auto 700px auto;
grid-template-rows: repeat(4, auto);
grid-column-gap: 40px;
grid-row-gap: 5px;
width: 94%;
margin-left: auto;
margin-right: auto;
}

.div1 { grid-area: 1 / 1 / 5 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 2 / 4; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 2 / 3 / 3 / 4; }
.div6 { grid-area: 3 / 2 / 4 / 3; }
.div7 { grid-area: 3 / 3 / 4 / 4; }
.div8 { grid-area: 4 / 2 / 5 / 3; }
.div9 { grid-area: 4 / 3 / 5 / 4; }
  
#select1 {
max-width: 200px;
overflow: hidden;
}	

.block {
  text-align: center;
  display: flex;
  flex-direction: column;
  /*height:350px !important;*/
  width: 350px !important;
  margin: 20px auto 60px;
}
.block img {
  height: 100%;
  height:250px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 5px 5px 10px black;
 
}
.block h3 {
	padding-bottom:20px !important;
	margin-top:0px;
}

figcaption {
padding-top:20px;	
}

.block p {
  margin-bottom: 0px;
  margin-top: 10px;
}

.creditcards {
	margin-top:5px;
}

figure {
padding-top:10px;	
}
#menuToggle a:hover {
	color:red !important;
}
html, body {
scroll-behavior: smooth;
height: 100%;	
}

h1 {
	font-size: 2em;
	font-family: "Roboto Slab", serif;
  font-weight: 500;
  text-align: center;

}

h2 {
	font-size: 1.5em;
	font-family: "Roboto Slab", serif;
  font-weight: 500;
  text-align: center;
  margin-bottom: 1em;

}

h3 {
	font-size: 1.3em;
	font-family: "Roboto Slab", serif;
  font-weight: 500;
  text-align: center;
}

h4 {
	font-size: 1.1em;
	font-family: "Roboto Slab", serif;
  font-weight: 500;
  text-align:center;
}

h5 {
	font-size: .83em;
	font-family: "Roboto Slab", serif;
  font-weight: 500;
}
body {
	line-height: 1.65;
}

p {
		margin: 0 0 2em 0;
	}	
nav {
	grid-area: nav;
	padding: .5rem;
		background-color: #0022F1;
}
div.creditcards .gsc-clear-button {
	display:none;
}


article > h2 {
	margin: 0 auto;
}
@media screen and (max-width: 900px) {
	.mainnav {
		display: none !important;
	}
}
	hr {
		border: 0;
		border-bottom: solid 2px rgba(210, 215, 217, 0.75);
		margin: 2em auto 2em auto;
		width: 70%;
	}
	



 #menuToggle
{
  display: block;
  position: relative;  
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;
  
  transition: color 0.3s ease !important;
}

#menuToggle a:hover
{
  color: red !important;

}


#menuToggle input
{
  display: block;
  width: 25px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  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;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 40px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

.caret-icon {
  display: block;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  font-size: 12px; /* Adjust the font size as needed */
}

.dropbtn {
letter-spacing: 0.075em;	
}


.subnav .dropbtn {
	border: none;
	outline: none;
	background-color: inherit;
	font-family: inherit;
	font-size: inherit;
	margin: 0;
	margin-left: -4px;
}

.logo {
display:block;
margin: 0 auto;
height: auto;
width: 100%;
max-width: 600px;	
margin-top:10px;
}

.creditcard {
	display:block;
	height: auto;
	width: 100%;
	max-width:330px;
	margin: 0 auto;
	margin-top: 14px;
}


.phone{	
height: auto;
display:block;
color:white;
width: 100%;
max-width: 40px;

}

.phone1 {
height: auto;
display:block;
color:white;
width: 100%;
max-width: 40px;
}

.call {
		color:white;
		font-size:18px;
		display:block;
		width:150px;
	}
	

.contactall {
display: flex;
width: 25%;
}
.contact-link {
text-align: center;
z-index: 100 !important;
color:white;
text-decoration: none !important;
}
.contact-link2 {
text-align: center;
z-index: 100 !important;
color:white;
text-decoration: none !important;
}	

.header {
	display: flex;
	background-color: #0022F1;
	justify-content: space-around;
	padding: 20px;
	border-bottom:7px solid white; 
	border-top:7px solid white;
}
.container1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 160px;
  row-gap:20px;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}
.logo-container {
width: auto;
display: flex;
}

.right {
	width: 100%; 
	max-width:40px; 
	display: block; 
	margin: 0 auto;
}


.flexRow {
display: flex;
width: auto;
}
.link, .link1 {
width: 70%;
}


/* Styles for the dropdown menu */
.navbar {
  list-style: none;
  padding: 0;
  margin: 0;

}

.navbar li {
  display: block;
  position: relative;
  margin-right: 20px; /* Adjust the spacing between menu items */
  color: white; /*THIS LINE OF CODE IS EFFECTING THE DROPDOWN MENU TOO AND IDK WHY*/
}


/* Center the dropdown menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* Position below the parent li */
  left: 40%; 
  transform: translateX(-50%); /* Center horizontally */
  text-align: center;

}
/* Style the caret icon to be centered underneath the text */
.dropdown-menu .caret {
  display: block;
  text-align: center;
  font-size: 16px; /* Adjust the size as needed */
  margin-top: 10px; /* Adjust the spacing between text and caret */
}
/* Change text color to black */
.dropdown-menu li {
  color: #0022F1 !important;
  background-color:white;
border: 1px solid #0022F1;
  width: 100%; /* Take up the entire width of the container */
  display: block; /* Display as block to take up entire height */
}

/* Change background color to black and text color to white on hover */
.dropdown-menu li:hover {
color: white !important;
background-color: #0022F1;
border: 1px solid white;
transition: .5s ease-in-out;
}
.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropdown-menu {
  display: block;
}
#navi ul a, #navi ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 1.07em;
  padding: 0.625em 0;
color: white;
text-decoration: none;
}
#navi ul {
  color: #3d4449;
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  letter-spacing: 0.075em;
  list-style: none;
}
#navi ul a, #navi ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  padding: 0.625em 0;

}
.fa-solid {
	color:white;
}
 .fas {
	 padding-left: 120px;
 }
.subnav-content ul{
	background-color:black;
	
}
.subnav-content a {
	z-index:100;
}

p {
	font-size: 13pt;
}

a:hover {
  border-bottom-color: #0000F7;
}

.content {
  display: grid !important;
  grid-template-rows: auto auto;
  grid-template-columns: auto auto;
width: 90% !important;
margin: 0 auto !important;
column-gap: 50px !important;
}				


.ptext {
  grid-row: 2 / 3 !important;
  grid-column: 1 / 2 !important;
}

		.top {
  place-self:end;
  position:sticky;
  bottom:20px;
  margin-right:20px;
  margin-top:150vh;
  
  /* visual styling */
  text-decoration: none;
  padding: 10px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space:nowrap;
  margin-left:89%;
  z-index:100;
}		



#navi > ul > li {
	border-top: 1px solid rgba(210, 215, 217, 0.75);
	margin: 0.5em 0 0 0;
	padding: 0.5em 0 0 0;
}
#pic1 {
  max-width: 400px;
  height: auto;
  margin: 0 auto;
  display: block;
  border-radius: 20px;
  box-shadow: 5px 5px 10px black;
}


.subnav-content {
  display: none;

  background-color: black;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  margin:0 auto;
}
	.motors {
width: 90%;
margin: 0 auto;
}
.subnav-content a {
  float: none;
  color: black !important;
  background-color:white;
  text-decoration: none;
  display: block;
  text-align: center;
    padding: 10px !important;
}

.subnav-content a:hover {
  background-color: black;
 
color: white !important;
}

.subnav:hover .subnav-content {
  display: block;

}
.subnav {
	position:absolute;
}
.subnav > .subnav-content {
	 position: relative;
}

/* Features */
/* Styles for the custom dropdown */
.custom-select {
  position: relative;
  display: inline-block;
  width: 200px; /* Adjust width as needed */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
}

.selected {
  display: block;
  padding: 8px;
  cursor: pointer;
}

.options {
  position: absolute;
  display: none;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.options div {
  padding: 8px;
  cursor: pointer;
}

.options div:hover {
  background-color: #f4f4f4;
}

.price {
  float: right;
}


.specialty {
	width: 400px;
	height:200px;
	overflow:hidden;
	position:relative;
	border-radius:20px;
	box-shadow: 5px 5px 10px black;
}

.specialty img {
	width:100%;
	height:auto;
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	
}


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

			.features {
				margin: 0 0 2em 0;
				width: 100%;
			}

				.features article {
					margin: 0 0 3em 0;
					width: 100%;
				}

					.features article:nth-child(2n - 1) {
						margin-right: 0;
					}

					.features article:nth-child(2n) {
						margin-left: 0;
					}

					.features article:nth-last-child(1), .features article:nth-last-child(2) {
						margin-bottom: 3em;
					}

					.features article:last-child {
						margin-bottom: 0;
					}

					.features article .icon {
						height: 8em;
						line-height: 8em;
						width: 8em;
					}

						.features article .icon:before {
							font-size: 2.25rem;
						}

						.features article .icon:after {
							height: 6em;
							margin: -3em 0 0 -3em;
							width: 6em;
						}

		}

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

			.features article {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				-moz-align-items: -moz-flex-start;
				-webkit-align-items: -webkit-flex-start;
				-ms-align-items: -ms-flex-start;
				align-items: flex-start;
			}

				.features article .icon {
					height: 6em;
					line-height: 6em;
					margin: 0 0 1.5em 0;
					width: 6em;
				}

					.features article .icon:before {
						font-size: 1.5rem;
					}

					.features article .icon:after {
						height: 4em;
						margin: -2em 0 0 -2em;
						width: 4em;
					}

		}

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

			.features article .icon:before {
				font-size: 1.25rem;
			}

		}
		
		/* Contact */

.contact li {
	color:white;
	font-size: 0.8em;
}






@media screen and (max-width: 900px){
.container {
display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  min-height: 100vh;
}
}
@media screen and (min-width: 900px) {
  .hide {
    display:none !important;
  }
}






/* MEDIA QUERIES FOR REFERENCE */

/* Larger iPad Landscape */
@media only screen and (max-width: 1080px) {
	
}










/* Smaller iPad Landscape */
@media only screen and (max-width: 1024px) {
	
}











/* Larger iPad Portrait */
@media only screen and (max-width: 810px) {
	.smodal .cmodal{
display:none;	
}
 .parent {
        display: grid;
        grid-template-columns: 1fr; /* Switch to a single column */
        grid-template-rows: auto; /* Reset grid rows */
      }

      /* Reset grid areas to show items in a single column */
      .div1,
      .div2,
      .div3,
      .div4,
      .div5,
      .div6,
      .div7,
      .div8,
      .div9 {
        grid-area: unset; /* Remove grid area */
      }
	    .content {
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
  }
  .container1 {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .div1 {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
  }

  .div1 img {
    max-width: 100%; /* Ensure the image doesn't overflow */
    height: auto;
  }
  .title,
  .ptext {
    grid-row: auto;
    grid-column: auto;
    text-align: left;
    margin: 0;
    margin-bottom: -30px;
    padding: 10px;
  }
}



.title {
	text-decoration:underline !important;
}






/* Smaller iPad Portrait */
@media only screen and (min-width: 768px) {
  .content {
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
  }


  .title,
  .ptext {
    grid-row: auto;
    grid-column: auto;

    margin: 0;
  }
  .smodal .cmodal{
display:none;	
}
}













/* Standard Mobile Break */
@media only screen and (max-width: 600px) {
	.contactall, .creditcard, .link1, .contacttext {
		display: none;
	}
	.right {
		margin-left: 20px;
	}
	.top {
	margin-left: 70% !important;
}
	.logo-container {
		width: 100% !important;
		padding-left: 10px;
		
	}
	.header {
		border: none !important;
	}
	
	#menu {
		width: 100vw;
	margin: -55px 0 0 -48px !important;
	  list-style: none;
  padding-top: 50px;
  margin: 0;
}

#menu li {
	  display: block;
  position: relative;
  margin-right: 20px; /* Adjust the spacing between menu items */
}
.content {
  display: block !important;
width: 90% !important;
margin: 0 auto !important;

}
.title {
	margin-right: 0px !important;
}

#pic1 {
	width:90%;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom:30px;
}

.smodal .cmodal{
display:none;	
}
	.motors {
width: 90%;
margin: 0 auto;
}

  .container1 {
    grid-template-columns: 1fr;
  }
		.logo {

margin-top: 0 !important;	 
	}

main {
	width:100vw;
}

#menuToggle a {
	text-transform: none;
}
.contact-link2 h4 {
	display:none !important;
}
}













/* Larger iPhone Portrait */
@media only screen and (max-width: 414px) {

#menuToggle a {
	text-transform: none;
}

#menu {
	margin: -110px 0 0 -60px !important;
	padding-top: 100px;
	overflow-x: hidden;
}
.smodal .cmodal{
display:none;	
}
	.logo {

margin-top: 0 !important;	 
	}
	.hidealso {
	display: none;
}
.gsc-control-cse {
	display: none;
}
.contact-link2 h4 {
	display:none !important;
}
.fa-2x {
	font-size: 2.3em !important;
}
.top {
	margin-left: 70% !important;
}
}






















/* Smaller iPhone Portrait */
@media only screen and (max-width: 376px) {
	.contactall, .creditcard {
		display:none !important;
	}
.top {
	margin-left: 70% !important;
}
	.contacttext {
		display:none !important;
	}
	
	.contact-link {
		display: none !important;
	}
	.right {
		width: 70% !important;
	}
	.title {
		margin-bottom:3px;
	}
	.header {
		border-bottom: none !important;
		border-top: none !important;
	}
	
	#menuToggle span {
	width: 29px !important;
	height: 3px !important;
	}
	
	.creditcards {
		padding-top:5px !important;
	}
	
	.logo {
	 width: 80% !important;	
margin-top: 0 !important;	 
	}

	.logo-container {
		width: 80% !important;
	}
	

	div.flexRow {
		display: none !important;
	}
	
	div.creditcards {
		display: none !important;
	}
	
#menuToggle a {
	text-transform: none;
}

#menu {
	margin: -110px 0 0 -60px !important;
}

.hidealso {
	display: none;
}
.gsc-control-cse {
	display: none;
}
.contact-link2 h4 {
	display:none !important;
}
.fa-2x {
	font-size: 2.3em !important;
}
}