/*colors*/
/* lightgray #d3d3d3
gray #808080
#f9f9f9
#ff533d
#599bb3
#233237
#43A047
#35484E
*/

/*---entire body styling-----*/
.nav, .pagination, .carousel, .panel-title a {
  cursor: pointer;
}

.container {
  /*min-width: 320px !important;*/
}

/*lazy loading images*/
.lazyContainer{
  width: 100%;
  padding-bottom: 37.3%;
  position: relative;
}

.lazyContainer img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*modal styling--------------------------------------------------------------------------------*/
.modal-image {
  text-align: center;
  max-width:600px;
  height: 250px;
}

.tabbed-info{
  display: inline;
}

.tab-pane{
  margin: 20px;
  margin-top: 40px;
}

/*custom modal tabs*/
.modalCustom .nav-tabs{
  border: none;
}
.modalCustom .nav-tabs>li>a{
  font-weight: 600;
  color: gray;
}

.modalCustom .nav-tabs>li.active>a{
  background-color: transparent;
  border-color: transparent;
  border-bottom: 3px #599bb3 solid;
  color: #233237;
  padding-bottom: 5px;
}

.modalCustom .nav-tabs>li>a:hover{
  background-color: white;
  color: #233237;
  background-color: transparent;
  border-color: transparent;
}
.modalCustom .nav-tabs>li.active>a:hover{
  background-color: transparent;
  border-color: transparent;
  border-bottom: 3px #599bb3 solid;
}

/*custom nested modal tabs----------------------------*/
.sysReqTiles{
  border: 1px solid lightgray;
  margin: 5px;
  min-height: 180px;
  max-width: 160px;
}

.compatibletitle{
  font-weight: 700;
}

.mainFirmware{
  font-weight: 600;
}

/*fixes content moving when modal opens*/
body.modal-open {
  overflow:inherit;
 padding-right:inherit !important;
}

/*create table layout for technical data*/
.table { display: table; }
.modalRow { display: table-row; }
.cell { display: table-cell; }

.odd{
  background-color: #DCDCDC;
}

.even{
  background-color: ##FFFAF0;
}

.learnMore{
  text-align: left;
  font-style: italic;
  cursor: pointer;
  color: #599bb3;
}
/*close modal*/
.closeModal{
  color: gray;
  border: 1px solid lightgray;
}

.closeModal:hover{
  color: white;
  background-color: lightgray;
}


/*--------------------------------------------------------------------------------*/

*{
  font-family: 'Roboto', sans-serif;
}

/*gets rid of gutters*/
.no-gutter {
    padding-right:0;
    padding-left:0;
}

/*smooth scrolling on mobile*/
.scroller {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
 }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body.modal-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
/*styling for nav buttons*/
.activeState{
  color: #ff533d !important;
}

footer{
  /*margin-top: 30px;*/
  padding: 10px;
  text-align: center;
  border-top: 1px gray solid;
}

.navbar-header{
  display: inline-block;
}

.dropdown-head:hover{
  color: #ff533d !important;
  background-color: yellow;
}

a.disable {
  pointer-events: none;
  cursor: default;
}

.navbar{
  border-radius: 0px;
}

.navbar-default .navbar-nav .dropdown-menu li a{
  color: #233237;
}

.page-header{
  color: #233237;
  text-align: center;
  font-weight: 300;
  margin-bottom: 30px;
  border: none;
}


.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -360px;
}
.page-wrap:after {
  content: "";
  display: block;
}

/*adjust to correct footer height, and change margin on page wrap*/
.site-footer, .page-wrap:after {
  height: 360px;
}
.site-footer {
  background: #233237;
}
/*discliamers at bottom*/
.disclaimer{
  margin-top: 20px;
  font-size: 13px;
  font-style: italic;
  color: gray;
}


/*custom sizing for collapse*/

@media (max-width: 1000px) {
    a.disable {
      pointer-events: auto;
      cursor: default;
    }
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
        margin-left: 10px;
        margin-right: 10px;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
   .navbar-nav .open .dropdown-menu {
       position: static;
       float: none;
       width: auto;
       margin-top: 0;
       background-color: transparent;
       border: 0;
       -webkit-box-shadow: none;
       box-shadow: none;
    }
}


@media only screen and (max-width: 1000px) {
  ul.nav li.dropdown:hover > div.dropdown-content {
    display: none;
   }
}

@media only screen and (min-width: 1000px) {
  ul.nav li.dropdown > div.dropdown-menu {
    display: none;
   }
}

/*fixes issue where modal scrolls to top when open*/
body.modal-open {
    overflow: visible !important;
    position: absolute !important;
}

@media (max-width: 860px){
  body{
    width: 100%;
    display: block;
  }
}

@media (max-width: 768px) {
  html, body {
    width: auto !important;
  }

  .lazyContainer img {
    position: relative;
  }

  .lazyContainer{
    width: 100%;
    padding-bottom: 0px;
    position: relative;
  }
}