/*Mobile First-ReOrder Divs*/
@media (max-width: 750px) and (orientation:portrait){
#flex { display: flex; flex-direction: column; height: auto/*92vh*/; }
#one { order: 2; margin-top: 0px; padding-top: 0px; margin-bottom: 10px;}
#two { order: 1; margin-bottom: 10px; padding-bottom: 0px;}
}
@media (max-width: 750px) and (orientation:landscape){
#flex { display: flex; flex-direction: column; height: auto; }
#one { order: 2; margin-top: 0px; padding-top: 0px; margin-bottom: 10px;}
#two { order: 1; margin-bottom: 10px; padding-bottom: 0px;}
}
.noDispMobile{
    
}
@media (max-width: 750px){
    .noDispMobile{
        display: none;
    }
}
.mainLogo img{
    width:80%;
    height: 60%;
}
@media (max-width: 750px){
    .mainLogo img{
        width: 100%;
        height: 90%;
    }
}
.navbar-inverse{ 
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 1%;
}
/*@media (max-width: 750px){
    .navbar-inverse{
        color: white;
        background: #005587;
    }
}*/
.navbar-inverse a{
    font-weight: bold !important;
    color: white !important;
    border-color: black !important;
    border-style: solid !important;
    border-width: .5px !important;
}
 .selected {
	background-color: #005587  !important;
}
/*@media (max-width: 750px){
    .selected{
        background: black !important;
    }
}*/
.nav-item a:hover {
background-color: #005587  !important;            
}
.btn{
background-color: #005587  !important;    
}        
.navbar-fixed-left {
  /*position: static;*/
  border-style: solid;
  border-color: black;
  border-width: 4px;
  background-color: white;
  /*margin-left: 12%;*/
  height: 40%;
  width: 80%;
  margin: 0 auto;
  float: none;
  margin-bottom: 5%;
}
@media (max-width: 750px){
    .navbar-fixed-left{
         margin-bottom: 0px;
         padding-bottom: 0px;
         height: auto;
    }
}
.no-gutter > [class*='col-'] {
    padding: 0px;
}

@media (max-width: 768px){
    .navbar-form{
        margin: 0 auto;
        
    }
}

.rSwitchNavBtn{
    
    visibility: hidden;
}
@media (max-width: 1024px){
    .rSwitchNavBtn{
        
        visibility: visible;
    }
}
.fakeH1{
    display: none;
    visibility: hidden;
    margin: 0px;
    padding: 0px;
}

/*.navbar-fixed-left .navbar-nav > li {*/
  /*float: none;   Cancel default li float: left */
  /*width: 139px;*/
/*}*/

/*.navbar-fixed-left + .container {
  padding-left: 160px;
}*/

a{
    text-align: center;
}
.sidebarHead{
    margin: 0px;
    background-color: black;
    color: white;
    font-weight: bold;
/*    border-style: solid;
    border-width: 3px;*/
    text-align: center;
}
/* Dropdown Button */
.dropbtn {
    background-color: white;
    color: black;
    font-size: 18px;
    font-weight: bold;
    /*border: none;*/
    border-bottom: 2px;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    /*padding: 14px 40px;*/
    border-style: solid;
    border-color: black;
/*    border-radius: 2px;
    width: 99%;*/
width: 100%;
    display: block;   
/*    margin: 1.5px;
    margin-top: 5px;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {

    /*position: relative;*/
    /*display: inline-block;*/
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    margin-left: 100%;
    top: 0%;
}

@media (max-width: 768px){
    .dropdown-content{
        margin-left: 0%;
        width: 50%;
    }
}

@media (max-width: 800px){
    .dropdown-content{
        margin-left: 0%;
        width: 50%;
    }
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 10px 14px;
    text-decoration: none;
    display: block;
}
.dropdown-content div{
    display: none;
}
.dropdown-content a:hover + div{
    display: block;
    position: absolute;
    top: -50%;
  background-color: white;
 border-style: solid;
     border-color: black;
    border-width:  1px;
    margin-left: 100%; 
    width: 200%;
}
@media (max-width: 768px){
    .dropdown-content a:hover + div{
        margin-left: 100%;
        width: 100%;
        /*z-index: 1;*/
    }
}
@media (max-width: 800px){
    .dropdown-content a:hover + div{
        margin-left: 100%;
        width: 100%;
    }
}



/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #005587  !important;
    color: white;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    border-style: solid;
     border-color: black;
    border-width:  1px;

}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #005587  !important;
    color: white;
}

/****************Left Nav Work 7/19******************/

.dropdown-content ul{
    list-style: none;
    text-align: center;
    margin-bottom: 0px;
    padding: 0px;
    color: black;
}
.dropdown-content li{
    width: 100%;
    /*display: block;*/
}
.dropdown-content ul ul{
    display: none;
   margin-left: 100%;
   min-width: 160px;
   /*top: 0px;*/
   list-style: none;
   text-align: center;
   border: 1px solid black;
   /*position: absolute;*/
}
.dropdown ul li:hover ul{
   display: block;
    background-color: white;
    position: absolute;
}
.dropdown ul li:hover ul a{
  border: 1px solid white;  
}

/**************End Left Nav Work 7/19****************/

.featureBox{
margin-top: 0%;
padding: 0px;
width:auto;
height: 40%;
border: none;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.featureBox #ind5{
    padding-left: 29px;
   display: inline-block;
}
.featureBox #ind7{
    padding-left: 44px;
   display: inline-block;
}
.navbar-fixed-right {
  border-style: solid;
  border-color: black;
  border-width: 4px;
  background-color: white;
  /*margin-right: 12%;*/
  height: 40%;
 width: 80%;
 margin: 0 auto;
 float: none;
}

.body {
    /*
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color:#fff
    */
}
@media (max-width: 750px){
    .body{
   font-size: 17px !important;
    }
}

.container a {
    /*
  padding: .2em;
    */
}
/*@media (pointer: coarse) {*/
/*
@media (max-width: 750px){
  .container a {
    padding: 1em !important;
  }
}
*/
.center{
    /*width: 100%;*/
    display: flex;
    justify-content: center !important;
    align-items: center !important;
}
@media (max-width: 750px){
    .center{
   padding: 1em !important;
    }
}
.center-block{
   margin: 0 auto;
}
@media (max-width: 750px){
    .center-block{
   width: 100%;
   display: block !important;
    }
}
.options{
    margin-right: 50%;
    Display: inline;
    font-weight: bold;
}
.options li{
  Display: inline;
/*margin: 0;
padding: 0;  */
}
/*tabular data layout for listing part numbers */
table.products {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
width:95%;
border-style: solid;
border-color: black;
border-width: 2px;
border-collapse: collapse;
border-bottom-width: 4px;
border-top-width: 4px;
border-radius: 4px;
border-collapse: separate;
}
table.products th{
padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    background-color: #005587;
    color: white;
     border: 1px solid black;
}
table.products tr:hover{
    color: white;
 background-color: #005587;   
}
table.products td {
text-align: center;
vertical-align: middle;
border-width: 1px;
padding: 4px;
border-style: solid;
border-color: black;
}
/*Make larger tables render vertically*/
table.verTable{
    width: 100%;
    border-collapse: collapse;
    border: none;
    font-weight: bold;
}
.verTable th{
    display: none;
}
.verTable td{
 text-align: center;
 border: 1px solid black;
 border-left: 1px solid black;
 border-right: 2px solid black;
}
.verTable tr td:hover{
 background-color: #005587;
    color: white;
}

/*verTable tr{
    border-right: 3px solid black;
    border-left: none;
}*/
.verTable tr td{
    display: block;
    /*overflow: hidden;*/
    height: 46px; /*For Larger Font Size Required By Google Mobile*/
    /*white-space: nowrap;*/
}
.verTable td[data-title]:before{
    content: attr(data-title);
    float: left;
    background-color: #005587;
    color: white;
    width: 40%;
    height: 100%;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    font-weight: bold;
}
@media (max-width: 760px){
    .verTable td[data-title]:before{
        content: attr(data-title);
    float: left;
    background-color: #005587;
    color: white;
    width: 50%;
    height: 100%;
    border-left: 2px solid black;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    font-weight: bold;
    }
}
.verTable td:nth-child(even) {
  background-color: #f2f2f2; 
}
.verTable td:first-of-type{
    border-top: 3px solid black;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
.verTable td:last-of-type{
    border-bottom: 3px solid black;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
@media (max-width: 800px){
    .verTable{
        /*font-size: 0.6em;*//*Google Thinks Text To Small*/
        font-size: 1em; 
    }
}
.ftr{
float: left;
vertical-align: middle;
text-align:center;
height: auto;
Width: 100%;
}
.ftr li{
Display: inline;
margin: 0;
padding: 0;
}
/*.slideshow-container {
    width: 100%;
  max-width: 100%;
  max-height: 80%;
  position: relative;
  margin: auto;
}*/

/*Responsive Slides Plugin*/
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  z-index: -1;
  }
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  }
.centered-border{
      border-left: 2px solid black;
      border-right: 2px solid black;
  }
.categoryListing{
width: 48%;
margin-bottom: 2%;
margin-left: .5%;
margin-right: .5%;
display: inline-block;
}

@media (max-width: 750px){
.categoryListing{
 width: 100%;
    }
}

.categoryListing a{
/*text-decoration: none;*/
}

div.categoryListing h5{
text-align: left;
color:#005587  !important;  
font-weight: bolder;
/*text-decoration: none;*/

}
div.categoryListing img{
float:left;

}

.vidOverlay{
    position: absolute;
    font-weight: bold;
    font-size: large;
    color: #005587;
    text-align: right;
    right: 4%; 
    top:10%; 
    z-index: 1;
}
@media (max-width: 750px){
    .vidOverlay{
    position: absolute;
    font-weight: bold;
    font-size: xx-small;
    color: #005587;
    text-align: right;
    right: 4%; 
    top:10%; 
    z-index: 1;
}
}

.paragraphPic{
 float: right;   
}
@media (max-width: 750px){
    .paragraphPic{
        height: 45%;
        width: 45%;
    }
}
.promoVid{
    width: 560px;
    height: 315px;
    
}
@media (max-width: 750px){
 .promoVid{
     max-width: 100%;
     height: auto;
     border-style: solid;
    border-width: 4px;
    border-color: #005587;
 }   
}
.syPic{
    padding-top: 65%;
}

@media (max-width: 750px){
 .syPic{
     padding-top: 2%;
 }   
}
/***RW Tables***/
/***Commented out are for dev server purpose only***/
.axial:before{
    background: white url("../images/R+W/axial.gif") no-repeat 93%;
   /* width: 40px;
    height: 12px;
    padding: 2px;*/
    display: inline-block;
    top: 1px;
}
@media (max-width: 800px){
    .axial:before{
       Background: #005587;
    }
}
.lateral:before{
    background: url("../images/R+W/lateral.gif") no-repeat 93%;
    /*width: 40px;
    height: 12px;
    padding: 2px;*/
    display: inline-block;
   top: 1px;
}
@media (max-width: 800px){
    .lateral:before{
       Background: #005587;
    }
}
.angular:before{
    background: url("../images/R+W/angular.gif") no-repeat 96%;
   /*width: 40px;
   height: 12px;
   padding: 2px;*/
    display: inline-block;
    top: 1px;
}
@media (max-width: 800px){
    .angular:before{
       Background: #005587;
    }
}
/*Video with z-index 0; for now*/
.vidOverlay{
    position: absolute;
    text-align: right;
    font-weight: bold;
    font-size: large;
    color: #005587;
    right: 4%; 
    top:10%; 
    z-index: 1;
}
@media (max-width: 750px){
    .vidOverlay{
    position: absolute;
    font-weight: bold;
    font-size: xx-small;
    color: #005587;
    text-align: right;
    right: 4%; 
    top:10%; 
    z-index: 1;
}
}

.eventBanner {
    background: black;
    width: 96%;
    height: 4.25em;
    border: .5em solid;
    border-color: #005587;
    border-radius: 4px;
    border-top: none;
    border-left: none;
    border-right: none;
    margin-left: 2%;
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 1.5s;
}
@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.eventBanner h3{
    font: segoe ui;
    color: white;
    float: left;
    margin-top: 1%;
    padding-left: 3em;
}
.eventBanner p{
  font:  segoe ui; 
    font-weight: bold; 
    color: white; 
    margin-left: 18%; 
    padding-top: .7%;  
}

@media (max-width: 750px){
    .eventBanner{
        height: 11em;
        
    }
}
@media (max-width: 750px){
    .eventBanner h3{
        padding: 0;
        padding-right: 30%;
        margin: 0;
        margin-left: 35%;
       
    }
}
@media (max-width: 750px){
    .eventBanner hr{
        padding-right: 10%;
        display: none;
       
    }
}
@media (max-width: 750px){
    .eventBanner p{
        margin-left: 10%;
    }
}
.noDispDesk{
    display: none;
}
@media (max-width: 750px){
    .noDispDesk{
        display: initial;
    }
}