@media (max-width: 1024px), (max-device-width: 1024px) and (orientation: landscape), (max-device-width: 1024px) and (orientation: landscape) {
.fullWidth .container {
    width: 100% !important;
}
#main-content {
    margin-top: 0px;
    padding-top: 0px;
}
.content_sec {
    padding-top: 60px !important;
}
.less_padding {
    padding-left: 15px;
    padding-right: 15px;
}
#mainNav {
    background: transparent;
  }
#mainNav .navbar-header h3 {
    line-height: 40px !important;
    font-family: "Open Sans" !important;
    color: #000000 !important;
    font-size: 24px !important;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis !important;
    padding-right: 100px !important;
}
#mainNav.navbar-fixed-top {
    border-width: 0 0 1px;
    border-color: #e7e7e7;
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.3) !important;
}
#mainNav .navbar-header .navbar-toggle {
    margin-top: 13px !important;
    margin-right: 10px !important;
}
  #mainNav .navbar-collapse {
    position: fixed;
    width: 100%;
    height: 100% !important;
    display: block !important;
    max-height: initial;
    overflow: hidden;
    display: none !important;
  }
  #mainNav .navbar-collapse .overlay-style {
    /* // z-index bgnav 1/2 */
    z-index: 4;
    background: rgba(0, 0, 0, 0.5);
    display: none !important;
  }
  #mainNav .navbar-collapse.fix-delay {
    display: block !important;
  }
  #mainNav .navbar-collapse.toggle-fix .navbar-left.visible-xs {
    -o-transform: translate(0, 0px);
    -webkit-transform: translate(0, 0px);
    -ms-transform: translate(0, 0px);
    transform: translate(0, 0px);
  }
  #mainNav .navbar-collapse.toggle-fix .overlay-style {
    display: block !important;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
  }
  #mainNav .navbar-collapse .navbar-left.visible-xs {
    /* // DIMENSION */
    height: 100%;
    width: 300px;
    padding-top: 20px;
    /* // BG - COLOR */
    background: rgba(0, 39, 52, 0.9);
    /* // SHADOW */
    -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.5) !important;
    box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.5) !important;
    /* // transition */
    /* // Transition for .3 sec */
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    /* // Translating from left to right */
    -o-transform: translate(-400px, 0px);
    -webkit-transform: translate(-400px, 0px);
    -ms-transform: translate(-400px, 0px);
    transform: translate(-400px, 0px);
    /* // z-index bgnav  2/2 */
    z-index: 5;
    /* // Relative navbar style */
    overflow: auto;
    position: relative;
    margin-top: 0px;
  }
  #mainNav .navbar-collapse .navbar-left.visible-xs > li > a {
    color: #d0d0d0;
    border-bottom: 1px solid #134b5a;
  }
  #mainNav .navbar-collapse .navbar-left.visible-xs > li > a:hover {
    color: #ffffff;
    background: #014557;
  }
  #mainNav .navbar-header {
    /* // NAV TOP BG COLOR */
    background: #66a71a;
    /* // NAV TOP TEXT COLOR */
    color: #66a71a;
    min-height: 50px;
  }
  #mainNav .navbar-header button.navbar-toggle:focus,
  #mainNav .navbar-header button.navbar-toggle:active {
    background-color: transparent;
  }
  #mainNav .navbar-header h3 {
    /* NAV HEADER */
    /* margin start  */
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    /* margin end  */
    color: #ffffff;
    /* // color */
    font-size: 2.2rem;
    /* // font size */
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #mainNav .navbar-header .navbar-toggle {
    float: left;
    margin-right: 0px;
    margin-left: 10px;
    border: 0px;
  }
  #mainNav .navbar-header .navbar-toggle:hover {
    background: transparent;
    border: 0px;
  }
  #mainNav .navbar-header .navbar-toggle:hover span.icon-bar {
    background: #ffffff;
  }
  #mainNav .navbar-header .navbar-toggle span.icon-bar {
    background: #ffffff;
  }
  #mainNav .navbar-collapse .navbar-left.visible-xs {
    background: rgba(0, 0, 0, 0.9) !important;
  }
  #mainNav .navbar-collapse .navbar-left.visible-xs > li > a {
    color: #ffffff !important;
    ignore: a;border-bottom: 1px solid #4d4d4d !important;
  }
  #mainNav .navbar-collapse .navbar-left.visible-xs > li > a:hover {
    ignore: a;background:  #333333 !important;
    color: #ffffff !important;
  }
  #mainNav .navbar-header {
    background: #ffffff !important;
    color: #000000 !important;
    background-image: none !important;
  }
  #mainNav .navbar-header h3 {
    color: #111111 !important;
  }
  #mainNav .navbar-header h3::after {
    background-image: url("https://bis-branding-cdn.s3.ca-central-1.amazonaws.com/1037/uploads/bis-website-logo-jansen.png") !important;
    background-color: rgba(0, 0, 0, 0) !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    background-position: right center !important;
    background-size: contain !important;
    content: "";
    display: table;
    height: 55px;
    position: absolute;
    right: 15px;
    top: 3px;
    width: 100px;
  }
  #mainNav .navbar-header .navbar-toggle:hover span.icon-bar {
    background-color: #e84a37 !important;
  }
  #mainNav .navbar-header .navbar-toggle span.icon-bar {
    background-color: #e84a37 !important;
  }
}

@media (min-width: 1024px){
    
    /* Remove main content background and borders */
    #main-content .content_sec{
        -moz-box-shadow:none !important;
        box-shadow:none !important;
        -webkit-box-shadow:none !important;
        background:none;
    }
    
    /* Use default font for nav text and links */
    .navbar-nav li a{
        font-family:arial, verdana, sans-serif !important;
    }
}

/* On screens that are 992px wide or less */
@media (max-width: 992px), (max-device-width: 992px) and (orientation: landscape), (max-device-width: 1024px) and (orientation: landscape){
    
    /* Hide the company text as heading when viewed on small screens */
    #mainNav .navbar-header h3 {
        height:0;
    }
    
    /* Use the logo instead of company text when viewed on small screens. Moves logo from right-aligned to left-aligned in the nav. */
    #mainNav .navbar-header h3::after{
        right:auto;
        top:0;
    }

}

/* General styling */
body{
    font-family: arial, verdana, sans-serif !important;
}

/* Hyperlinks */
a {
    font-weight: normal;
}

/* Style for tabs */
.nav.nav-tabs li a {
    background-color: #777777 !important;
    color: #ffffff !important;
    padding:8px;
}

/* Style for 'Instructions' row on Training table */
#instruction_wrap #instruction_head{
    background: #222222;
}

#instruction_wrap #instruction_cont .well{
    background: #eeeeee;
    color: #000000;
}

#instruction_wrap .blueText{
    color: #000000 !important;
}

/* Style table title rows */
.title-bar {
    background: #222222 !important;
    border-bottom: 3px solid #000000 !important;
}

/* Lock icon in title bar rows */
.title-bar i {
    color: #e0be02 !important;
}

/* Style the table subheader rows */
html > body .headerBar, html > body .headerBar td, html > body.fullWidth .headerBar{
    background-color: #d9d9d9 !important;
    background: #d9d9d9 !important;
    border-bottom: 1px solid #aaa !important;
    color:#000000;
}

/* Style for table even rows */
.table-responsive .table-striped tbody tr:nth-child(even){
    background-color:#f9f9f9;
    color:#333333;
}

/* Style for table odd rows */
.table-responsive .table-striped tbody tr:nth-child(odd){
    background-color:#eeeeee;
    color:#333333;
}

/* Style for hyperlinks in the table rows */
.table-responsive .table-striped tbody tr td:first-child a {
    color:#177dbd !important;
}

/* Style for hover hyperlinks in the table rows */
.table-responsive .table-striped tbody tr td:first-child a:hover {
    color:#1b5a82 !important;
}