/* Base font sizes  */
  @media (min-width: 858px) {
  html {
    font-size: 12px;
  }
}
@media (min-width: 780px) {
  html {
    font-size: 11px;
  }
}
@media (min-width: 702px) {
  html {
    font-size: 10px;
  }
}
@media (min-width: 724px) {
  html {
    font-size: 9px;
  }
}
@media (min-width: 623px) {
  html {
    font-size: 9px;
  }
}

/* General style settings for html elements */
  body {
    position: relative; 
    background-color: #f8f8f8; /* Styles the whole background with the same colour as the site's navbar */
  }
  h1 {
    font-family: 'Josefin Sans';
    font-size: 4.5rem;
    font-weight: 'lighter';
  }
  h2 {
    font-family: 'Josefin Sans';
    font-size: 4.5rem;
    font-weight: 'lighter';
  }
  h3 {
    font-family: 'Josefin Sans';
    font-size: 2.0rem;
    font-weight: 'lighter';
  }
  h4 {
    font-family: 'Josefin Sans';
    font-size: 1.6rem;
    font-weight: 'lighter';
  }
  p { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1.5rem;
  }

  .footer-text {
      font-size: 1.25rem;
  }
  
  @media (max-width: 767px) {
    h1 {
      font-size: 3.25rem;
    }
    h2 {
      font-size: 3.25rem;
    }

    .footer-text {
      font-size: 1.0rem;
    }
  }

  @media (min-width: 768px) {
    h3 {
      font-size: 3.0rem;
    }
    h4 {
      font-size: 2.2rem;
    }
    p {
      font-size: 1.8rem;
    }

    .section-text {
      padding-right: 80px;
      padding-left: 80px;
    }

  }

  @media (min-width: 1024px) {
    h1 {
      font-size: 6.0rem;
    }

    h2 {
      font-size: 6.0rem;
    }

    h3 {
      font-size: 5.0rem;
    }

    h4 {
      font-size: 3.0rem;
    }

    p {
      font-size: 2.0rem;
    }
  }
  
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }

  .scroll-padding {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .row-centered {
    text-align:center;
  }

  .vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
  }

  .img-responsive {
    border-radius: 2px;
  }

  .img-social {
    height:44px;
    width: 44px;
  }

  /*Overrides the colour scheme for list items in the Bootstrap navbar. No background and underlined text */
  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #555;
    text-decoration:underline;
    background-color:transparent;
  }

/* General and common styling across all sections */
#section1 {
  height: 100%;
  color: #f2e4c3; 
  background-color: #242326;
  background-repeat: no-repeat;
  background-size: 100%;
}

#section2 {
  color: #242326; 
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: 50% 100% ;
}

#section3 {
  color: #f2e4c3; 
  background-color: #242326;
}

#section3 p {
  color: #ffffff;
}
#section3 h3 {
  margin-top: 0.5rem;
  margin-bottom: 3.0rem;
  color: #ffffff;
}
#section3 h4 {
  margin-bottom: 0;
}

#section5 {
  color: #242326; 
  background-color: #f2e4c3;
  background-repeat: no-repeat;
  background-size: 100%
}

#section6 {
  color: #f2e4c3; 
  background-color: #242326;
}

@media (max-width: 767px) {
  .navbar-brand {
    transform: translateX(-50%);
    left: 50%;
    position: absolute;
    padding: 0px;
  }
}

@media (max-width: 767px) {
  .img-responsive {
    margin-left: 15px; 
    margin-bottom: 15px; 
    max-width: 40%
  }
  .img-social {
    height:30px;
    width: 30px;
  }
}

@media (min-width: 768px) and (max-width: 992px) {
  .img-responsive {
    padding-left: 40px;
  }
}

/* E.g. Desktops */
@media (min-width: 1024px) and (min-height: 768px) {
    .navbar {
    height: 80px; /* 25px top and bottom plus 30 for the logo */ 
  }

  p {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  .navbar-nav > li > a {
    line-height: 60px;
  }

  #section1 {
    padding-top: 250px;
    height: 690px;
    background-image: url("images/section1.png");
    background-position: 0px 80px;
  }

  #section2 {
    padding-top: 80px;
    height: auto;
    padding-bottom: 80px;
    background-image: url("images/section2.png");
    background-position: 100%;
  }

  #section3 {
    padding-top: 80px;
    height: auto; 
    padding-bottom: 80px;
  }

  #section5 {
    padding-top:200px;
    height: 610px;
    background-image: url("images/section5.png")
  }

  #section6 {
    padding-top: 1.0em;
    height: auto;
    padding-bottom: 1.0em;
  }
}


/* E.g. Lanscape tablets */
@media (min-width: 1024px) and (max-height: 768px) {
    .navbar {
    height: 80px; /* 25px top and bottom plus 30 for the logo */
  }

  .navbar-nav > li > a {
    line-height: 60px;
  }

  #section1 {
    padding-top:180px;
    height: 580px;
    background-image: url("images/section1.png");
    background-position: 0px 80px;
  }

  #section2 {
    padding-top: 100px;
    height: auto;
    padding-bottom:100px;
    background-image: url("images/section2d.png");
    background-position: 100%;
  }

  #section3 {
    padding-top: 100px;
    height: auto;
    padding-bottom:100px;
  }

  #section5 {
    padding-top:150px;
    height: 500px;
    background-image: url("images/section5.png")
  }

  #section6 {
    height: auto;
  }
}

/* E.g. Tablet with portrait orientation */
@media (min-width: 768px) and (max-width: 1023px) {
  .navbar {
    height: 80px; /* 25px top and bottom plus 30 for the logo */
  }

  .navbar-nav > li > a {
    line-height: 60px;
  }

  .col-push-6 {
    left: 50%;
  }
  .col-pull-6 {
    right: 50%;
  }
  #section1 {
    padding-top:150px;
    height:450px;
    background-image: url("images/section1.png");     
    background-position: 0px 80px; 
  }
  #section2 {
    padding-top:80px;
    height:auto;
    padding-bottom:80px;
    background-image: url("images/section2t.png");     
    background-position: 100%;     
  }
  #section3 {
    padding-top:100px;
    height:auto;
    padding-bottom:100px;
  }
  #section5 {
    padding-top:100px;
    height:380px;
    background-image: url("images/section5.png"); 
  }
  #section6 {
    padding-top: 1.0em;
    height:auto;
    padding-bottom: 1.0em;
  }
}

/* E.g. Mobile with landscape orientation */
@media (min-width: 480px) and (max-width: 767px) {
  h1 {
    font-size: 2.75rem;
  }

  h2 {
    font-size: 2.75rem;
  }
    p { 
    font-size: 1.5rem;
  }
  .col-xs-12-landscape { /** Pushes extra padding around heading to avoid branding overlap **/
    padding-left: 100px;
    padding-right: 100px;
  }
  .col-xs-landscape-6 {
    width:50%;
    float:left;
  }
  .col-push-6 {
    left: 50%;
  }
  .col-pull-6 {
    right: 50%;
  }
  #section1 {
    padding-top:100px;
    height:300px;
    background-image: url("images/section1.png"); 
    background-position: 0px 50px; 
  }
  #section2 {
    height:auto;
    padding-bottom:50px;
  }
  #section3 {
    padding-top:50px;
    height:auto;
    padding-bottom: 50px;
  }
  #section5 {
    padding-top:50px;
    height:250px;
    background-image: url("images/section5.png"); 
  }
  #section6 {
    padding-top: 1.0em;
    height:auto;
    padding-bottom:1.0em;
  }
}

/* E.g. Mobile with portrait orientation */
@media (max-width:479px) {
  #section1 {
    padding-top:30vh;
    height:100vh; /*E.g. 100% of the viewport height */
    background-image: url("images/section1m.png"); 
    background-size: cover;
  }
  #section2 {
    height:auto;
    background-image: none; 
    background-position: 100%; 
  }
  #section3 {
    padding-top:60px;
    height:auto;
    padding-bottom:60px; 
  } 
  #section5 {
    padding-top:20vh;
    height: 80vh; 
    background-image: url("images/section5m.png");
    background-size: cover;
  }
  #section6 {
    padding-top:20px;
    height:auto; 
    padding-bottom: 10px; /* Since p margin is already 10px */
  }
}