h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2.25rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.75rem;
}

h5 {
    font-size: 1.5rem;
}

h6 {
    font-size: 1.25rem;
}

p {
    font-size: 1rem;
}
kbd {
  background-color: #375D96;  // Changes background color
  color: #333;                  // Changes text color
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 480px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 16px;
    }
}
.button {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #467DD0;
  border: none;
  border-radius: 10px;
}


.button:active {
  background-color: #375D96;
  transform: translateY(4px);
}
.jumbotron {
  background-image: url("images/laser.jpg");
  background-size: cover;
  filter: brightness(1.20);
}
@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  .jumbotron1 {
    background-image: url("images/port-ios.jpg");
  width:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    height: 150px;
    filter: brightness(1.20);
  }
}
@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */
  .jumbotron1 {
    background-image: url("images/port.jpg");
    width:100%;

    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 150px;
    filter: brightness(1.20);
  }
}
@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  .jumbotron2 {
    background-image: url("images/keppel-ios.jpg");
  width:100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    height: 150px;
  }
}
@supports not (-webkit-overflow-scrolling: touch) {
  /* CSS for other than iOS devices */
  .jumbotron2 {
    background-image: url("images/keppel.jpg");
    width:100%;

    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 150px;
  }
}
/*
.rounded {
    border-radius:.25rem!important;
    height: 100%;

}
*/

body {
  background-image: url("images/background.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding-top: 56px;
}
body:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url("images/background.jpg") center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

#nav_bar ul li a.active-page
{
  background-color:blue;
}
@media only screen and (max-width: 766px) {
.collapsing, .in {background-color: #f7f7f7;}
.collapsing ul li a, .in ul li a {color: #555!important;}
.collapsing ul li a:hover, .in ul li a:hover {color: #f1f1f1!important;}
}
@@font-face {
  text-rendering: optimizeLegibility;
}

.fa {
  color: #467DD0;
  text-shadow: 2px 4px 6px black;
}
li:hover a{
  border-radius: 5rem;
  background-color:#467DD0;
}