* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 16px;
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}
a:link, a:active, a:visited {
    text-decoration:  none;
    color: maroon;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* embedded videos are fluid */
.video-container {    
    overflow: hidden;
    position: relative;
    width:100%;
}
.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
video {
  max-width: 100%;
  max-height:100%;
  float: none;
  position: relative; 
  display: block;
}
/* SVG and IMG images are fluid*/
img[src$=".svg"] {
  width: 100%;
  height: auto;
  max-width: none;
}
img[width], picture[width] {
  width: auto; /* Defer to max-width */
}
img[width][height], picture[width][height] {
  height: auto; /* Preserve aspect ratio */
}

video[width] {width: auto;}
video[width][height] {height: auto;}

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: .2em;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }
tr {color:black;}
.specsTable {
  max-width: 100%;
  box-sizing: border-box; }
/* responsive code*/
.dataTable {
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .5em;
}
/* /Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="search"],
input[type="text"],
input[type="password"],
textarea,
select {
  border: 1px solid #D1D1D1;
  height: 36px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  border-radius: 4px;
  box-shadow: none;
  background: #fff; }
/* Removes awkard default styles on some inputs */
input[type="email"],
input[type="search"],
input[type="text"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem; }
fieldset {
  border-width: 0;
  padding: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  font-weight: normal;
  margin-left: .5rem; }
/* /Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* start nav */
header {
    width: 100%;
    overflow: hidden;
    background-color: white;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
}
#nav-bar {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5em;  
}
#nav-bar .nav-link {
    order: 2;
    text-align: center;
    padding: 0.5em;
    text-decoration: none;
}

#nav-bar #header-img {
    flex: 1 2 auto;
    order: 1;
    align-self: strech;
    margin:0 1em;}
/* end nav */

.container {margin: auto;}

#hero {text-align: center;}
#hero img {max-width: 100%;}

/* start Specs */
#specs {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 1em;
    margin: 1em 0;
}
    .hero-heading {
        font-size: 2em;
        display: inline;
    }
    .boltsHeading {
        width: 100%;
        margin: 1em 0;
    }
    .specsShot {max-width: 100%;}
/* start Specs */
/* start Features*/
#features {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        gap: 1em;
        margin: 1em 0;
    }
    .feature-title p {
        order: 1;
        margin: 1em;
        font-size: 1.5em;
    }
    .feature {
        order: 2; 
        flex: 1;
    }
    .slugTitle, .value-heading {text-align: center; font-size: 1.2em;}
    .slugTitle {font-weight: 600;}
    .graphic {margin: auto; text-align: center;}
/* start Features*/
/* start More Information */
#more-information { margin: 2em 1em; }
#more-information .data{}
    .section-description {font-size: 1.3rem; margin: 1em 0;}
    .section-link {font-size: 1.3rem;}
    form {
        display: block;
        text-align: center;
    }
    .formLabel {font-size: 1.15rem; }
    #email {}
    .formSubmit {
        font-size: 1.15rem;
        padding: .5rem;
        text-align: center;
    }
#more-information .display {order: 1; margin:0 1em;}
    
/* start More Information */

/* one layout for mobile and one for large landscape mode*/
@media screen and (min-width: 500px) {
    .container {
        margin: 10% auto 0 auto;
        min-width: 500px;
        max-width: 1000px;
    }
    #nav-bar {
        display: flex;
        align-items: flex-start;
        width: 100%;
        
    }
    #nav-bar .nav-link {
        flex: 2;
        text-align: center;
        margin: 1em;
        padding: 0.5em;
        text-decoration: none;
    }
    #nav-bar .nav-link {
        flex: 2;
        text-align: center;
        margin: 1em;
        padding: 0.5em;
        text-decoration: none;
    }   
    #nav-bar .logo {
        max-width: 5%;
        margin: 1em;
    }
    .hero-heading {
        font-size: 3em;
    }
    th,td {
        font-size: 1.5em;
    }
    #features {gap: 2em;}
    .feature-title {
        width: 100%;
        text-align: center;
    }
    #more-information {
        display: flex;
        justify-content: space-evenly;
        padding: 0 3em;
    }
    #more-information .data {flex: 2; order: 2;}
    #more-information .display {flex: 1; order: 1;}
    #more-information .display img {max-width: 50%;}
}