/* STI Gages Custom Styles  */

.specVer{
  display: none;
}

/* Smaller devices (phones, 300px and up) */
@media (min-width: 300px) {

  .specHor{
     display: none;
   }

   .specVer{
     display: block;
     height: 600px;
   }
}

/* Small devices (tablets, 600px and up) */
@media (min-width: 600px) {

  .specVer{
     display: none;
   }

   .specHor{
     display: block;
     height: auto;
   }
}


@media (min-width: 700px){
   #gages{
    background: url('../img/STI-Gages-xs.jpg') no-repeat;
    background-size: 100% auto;
    height: 500px;
}
}

@media (min-width: 992px){
   #gages{
    background: url('../img/STI-Gages-sm.jpg') no-repeat;
    background-size: 100% auto;
    height: 500px;
}
}

@media (min-width: 1199px){
   #gages{
    background: url('../img/STI-Gages-md.jpg') no-repeat;
    background-size: 100% auto;
    height: 500px;
}
}


@media (min-width: 1472px){
   #gages{
    background: url('../img/STI-Gages-lg.jpg') no-repeat;
    background-size: 100% auto;
    height: 500px;
}
}

.header-fixed {
    width: 100% 
}

.header-fixed > thead,
.header-fixed > tbody,
.header-fixed > thead > tr,
.header-fixed > tbody > tr,
.header-fixed > thead > tr > th,
.header-fixed > tbody > tr > td {
    display: block;
}

.header-fixed > tbody > tr:after,
.header-fixed > thead > tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

.header-fixed > tbody {
    overflow-y: auto;
    height: 150px;
}

.header-fixed > tbody > tr > td,
.header-fixed > thead > tr > th {
    width: 20%;
    float: left;
}