body {
    background-color: #000033;
    height: 100%;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: #444;
    -webkit-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }
  
  h1 {
    color: #E8E8E8;
    padding: none;
    margin: 0;
    text-align: center;
    font-weight: 500;
  }
  
  h2 {
    padding: 0;
    margin: 0;
  }
  
  h3 {
    padding: 0 0 20px 0;
    margin: 0;
  }
  
  h4 {
    font-size: 16px;
    padding: 0 0 20px 0;
    margin: 0;
    color: #777;
  }
  
  p {
    line-height:1.5em;
  }
  
  .pageTopic {
    background-color: #202020;
    padding: 10px;
  }
  
  #wrapper {
    max-width: 1170px;
    padding: 10px 10px 0px 10px;
    margin: 10px auto !important;
    background-color: gray;
    border-color: white;
    border-width: 1px;
    border-style: solid;
  }
  
  .dark  {
    background-color: #F0F0F0;
    padding: 50px;
  }
  
  .light {
    padding: 50px;
    background-color: #F8F8F8; 
  }
  
  header {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  header img {
    padding: 0px;
    margin-bottom: 10px;
    border: 1px solid white;
    width: 100%;
  }
  
  .navbar-default {
    background-color: #f0f0f0;
    border-color: #e7e7e7;
    border-radius: 0;
    border: 1px solid black;
    font-size: 1.1em;
  }
  
  .navbar-nav {
    display: inline-block;
    float: none !important;
    vertical-align: top; 
  }
  
  .navbar .navbar-collapse {
    text-align: center !important;
  }
  
   ul.nav li.dropdown:hover ul.dropdown-menu {
              display: block;
          }
  
  .navbar-default .navbar-nav>li>a {
    background-color: #F0F0F0;
    border-color: white;
    border-width: 1px;
    border-style: solid;
    line-height: 0.4em;
    padding: 12px;
  }
  
  .gallery img {
    cursor: pointer;
  }
  
  .gallery .row {
    margin-top: 25px;
  }
  
  .gallery ul {
    padding:0 0 0 0;
    margin:0 0 0 0;
  }
  
  .gallery ul li {
    list-style:none;
    margin-bottom:25px;
  }
  
  .gallery ul li img {
    cursor: pointer;
  }
  
  .gallery a:link, a:hover, a:visited, a:active {
    text-decoration: none !important;
  }
  
  li.bodylink {
    display: block;
    list-style-type: none;
    
  }
  
  ul.bodylink {
      list-style-type: none;
      padding-top: 15px;
      font-weight: 500;
      text-align: center;
      text-decoration: none;
      margin-top: 25px;
      padding: 0;
  
  }
  
  ul.bodylink a {
      padding: 5px 25px;
  
  }
  
  ul.bodylink a:visited {
      display: block;
      color: #888888;
      background-color: #D1D1D1;
      text-decoration: none;
      border-color: white;
      border-width: 1px;
      border-style: solid;
  }
  
  ul.bodylink a:link {
      display: block;
      color: #444444;
      background-color: #D1D1D1;
      text-decoration: none;
      border-color: white;
      border-width: 1px;
      border-style: solid;
  }
  
  ul.bodylink a:hover {
      background-color: #E8E8E8;
  }
  
  button {
    margin: 25px;
  }
  
  .btn {
      color: #444;
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 16px;
      line-height: 1.42857143;
      white-space: nowrap;
      vertical-align: middle;
      -ms-touch-action: manipulation;
      touch-action: manipulation;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
  }
  
  .btn:hover {
      color: white;
  }
  
  .btn a i {
      margin-left: 10px
  }
  
  #myCarousel {
    margin-left: auto;
    margin-right: auto;
    
  }
  
  #myCarousel img {
    padding: 0;
    width: 100%;
  }
  
  .carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
  }    
  .carousel-fade .carousel-inner .active {
    opacity: 1;
  }    
  .carousel-fade .carousel-inner .active.left,
  .carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
  }    
  .carousel-fade .carousel-inner .next.left,
  .carousel-fade .carousel-inner .prev.right {
    opacity: 1;
  }    
  .carousel-fade .carousel-control {
    z-index: 2;
  }
  
  .right.carousel-control, 
  .left.carousel-control, ol.carousel-indicators
  {
       visibility:hidden;
  }
  
  /*WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
    Need to override the 3.3 new styles for modern browsers & apply opacity*/
  @media all and (transform-3d), (-webkit-transform-3d) {
      .carousel-fade .carousel-inner > .item.next,
      .carousel-fade .carousel-inner > .item.active.right {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      .carousel-fade .carousel-inner > .item.prev,
      .carousel-fade .carousel-inner > .item.active.left {
        opacity: 0;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
      .carousel-fade .carousel-inner > .item.next.left,
      .carousel-fade .carousel-inner > .item.prev.right,
      .carousel-fade .carousel-inner > .item.active {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
      }
  }
  
  footer {
      text-transform: capitalize;
      background-color: gray;
      color: white;
      font-size: medium;
      font-weight: 500;
      text-align: center;
      padding: 15px 0px;
      clear: right;
  }
  
  @media (max-width: 767px) {
      .navbar-nav {display: block;}
      .dropdown-menu {
    left: 50%;
    right: auto;
    text-align: center;
    transform: translate(-50%, 0); }
  }
  
  @media (max-width: 768px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .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;
    }
  }