/* https://itnext.io/how-to-build-a-responsive-navbar-using-flexbox-and-javascript-eb0af24f19bf */

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  margin-top: 72px;
}

body {
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: -0.063px;
  line-height: 28px; /* was 33.18px */
  text-rendering: optimizeLegibility;
}

p {
  /* from medium.com */
  font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
  font-size: 21px;
  font-weight: 400;
}

p + p {
  margin-top: 16px;
}

h1 {
  margin-top: 32px;
  margin-bottom: 8px;
}

p + h2 {
  margin-top: 16px;
}

/* jfront.com */
#footer {
  margin: 96px 16px 16px;
}

.tagline-text
{
  text-align: center;
  font-family: arial;
  font-size: 1.1em;
  color: #7f7f7f;
}

.copyright-text
{
  text-align: right;
  font-family: arial;
  font-size: 0.6em;
  color: silver;
}

table > caption {
  padding: 10px;
  caption-side: bottom;
}

/* https://meyerweb.com/eric/thoughts/2017/11/27/generating-wireframe-boxes-with-css-and-html5/ */
[wire-frame] {outline: 2px solid gray;
  position: relative; z-index: 1;}
[wire-frame]::before {
  position: absolute; z-index: 8675309;
  top: 0; bottom: 0; right: 0; left: 0;
  background:
     linear-gradient(to top right,
        transparent calc(50% - 1px), gray calc(50% - 1px),
        gray calc(50% + 1px), transparent calc(50% + 1px)),
     linear-gradient(to bottom right,
        transparent calc(50% - 1px), gray calc(50% - 1px),
        gray calc(50% + 1px), transparent calc(50% + 1px)),
     #FFF9;
     content: attr(wire-frame);
     font: bold 2em Jubilat, Georgia, serif;
     color: gray;
     display: flex; justify-content: center; align-items: center;
}

.active {
  display: block;
}

#top {
  background-color: rgb(72, 73, 63);
}

#lead-intro {
  padding-right: 16px;
  padding-top: 32px;
}

#lead p {
  display: inline-block;
  vertical-align: middle;

  text-align: center;
/*
  font-size: 28px;
  color: white;
  line-height: 32px;
  letter-spacing: 0.09px;
*/
  color: black;
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 150%;
  line-height: 1.4;
  font-family: Questrial, sans-serif;
}

img {
  max-width: 100%;
  max-height: 100%;
}
/*
  font-family: medium-content-serif-font,Georgia,Cambria,"Times New Roman",Times,serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.063px;
  line-height: 28px;
  text-rendering: optimizeLegibility;
*/

#lead {
  height: 384px;
  background: black url( "/res/banner.jpg" ) no-repeat right top;
  background-size: 100%;
}

/* https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01 */
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.column+.column{
  margin-left: 16px;
 }

.section {
  margin: 16px auto;
  max-width: 768px;
  justify-content: center;
  align-items: center;
}

.code {
  font-size: 1em;
  margin-top: 16px;
  margin-bottom: 16px;

  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.063px;

  /* background-color:#EEEEEE; */
  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
}

.product-lead {
  margin-top: 16px;
  margin-bottom: 16px;
}

.product-lead p {
  display: inline-block;
  text-align: center;
  padding-top: 32px;
}

.product-image > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.product-image > figcaption {
  font-size: 85%;
  font-variant-caps: small-caps;
  text-align: right;
}

li.nav-request-quote {
  background-color: yellow;
  padding-left: 18px;
  padding-right: 18px;
  margin-left: 32px;

  position: absolute;
  border: 0px;
  top: 0px;
  right: 0px;
}

.nav-request-quote > a {
  color: black;
  text-decoration: none;
}

.nav-hover {
  border:1px solid green;
  position: relative;
  top: 72px;
  right: 0px;
}

table {
  border-collapse: collapse;
  border-radius: 1em;
  overflow: hidden;
}

th, td {
  padding: 12px;
  background: #ddd;
  border-bottom: 2px solid white; 
  border-right: 2px solid white; 
}

.driver {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 8px;

  border: 1px solid;
  border-radius: 16px;
  border-style: rounded;

  padding-bottom: 8px;
}

a.anchor {
  display: block;
  position: relative;
  top: -84px;
  visibility: hidden;
}

div.driver + h2 {
  margin-top: 32px;
}

p + div.driver {
  margin-top: 16px;
}

.driver>div.label {
  margin-left: 8px;
}

.driver>div.detail {
  margin-right: 8px;
}

.driver>div.model {
  grid-column: 1 / 3;
  font-weight: bold;
  padding: 8px;

  background: linear-gradient( to right, rgb(228, 228, 0), #ddd );
  color: black;

  border-style: rounded;
  border-radius: 16px 16px 0px 0px;
}

.driver + .driver {
  margin-top: 16px;
}

.attention {
  color: black;
  background-color: yellow;
}

.spinner {
  height: 48px;  
  position: relative;
  display: none;
  opacity: 0%;
  transition: opacity 250ms ease-in;
}

.spinner::before {
  animation: 2s linear infinite spinner;
  border: solid 3px white;
  border-bottom-color: black;
  border-radius: 50%;
  content: "";
  height: 32px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 32px;
}

@keyframes spinner {
  0%   { transform: translate3d(-50%, -50%, 0) rotate(0deg);   }
  100% { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}

form > input {
  font-size: 21px;

  border-radius: 8px;
  border-style: solid;
  padding: 8px 12px 8px 12px;
}

form > input[type=submit] {
  color: black;
  border-color: yellow;
  background-color: yellow;
}

/* https://www.w3schools.com/howto/howto_css_dropdown.asp */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightgrey;
  min-width: 160px;
  right: 0px;
  line-height: 60px;
  text-align: right;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  padding: 0px 24px 0px 24px;
  display: block;
}

.dropdown-content a:hover {
  background-color: yellow;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media (max-width: 1079px) {
  .product-list {
    display: none;
  }
  .wide {
    display: none;
  }
}

@media (min-width: 1080px) {
  .narrow {
    display: none;
  }
}

.product-list {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 148px;
  margin-top: 16px;
}

.product-list .attention {
  background-color: yellow;
}

.product-list div {
  text-align: right;
  background-color: white;
  margin-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-top: 8px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-radius: 8px 0px 0px 8px;
}

.product-list a {
  color: black;
  text-decoration: none;
}