:root { /* -- Variables -- */
  /* --Colours-- */
  --main-color: #0072c6; /* Sets the main colour to use throughout the system. */
  --alt-color-dark: #0072C6; /* Dark colour to complement the main colour. */
  --alt-color-light: #ecf0f1; /* Light colour to complement the main colour. */
  --alt-mode: var(--alt-color-light); /* Sets what alt mode to use primarily */
  --alt-mode-2: var(--alt-color-dark); /* Sets what alt mode to use secondarily, this should be the opposite of the variable above. */

  --nav-text-color: white;
  --nav-text-color-hover: black;

  --standard-link-color: #2980b9;

  --heading-bg-color: var(--main-color);
  --heading-text-color: white;
  --heading-border-width: 0px;
  --heading-border-color: transparent;

  --footer-bg: #333;
  --footer-text: white;
  --footer-links: #6fabfe;
  --transition-time: 0.25s; /* General animation length. */
}

/* --Navigation Styles-- */
    .navbar-brand {
        white-space: wrap;
        max-width: 350px;
    }

  .wjps-nav{
    background-color: var(--main-color);
  }
  .nav-link{
    border-radius: .25rem;
    transition: background var(--transition-time);
  }
  .nav-link:not(.wjps-nav-button):not(.tab-link):not(.wjps-tabs):not(.nav-pills > .nav-item > .nav-link){
    color: var(--nav-text-color)!important;
  }
  .nav-link:hover:not(.wjps-nav-button):not(.tab-link):not(.wjps-tabs):not(.nav-pills > .nav-item > .nav-link){
    color: var(--nav-text-color-hover)!important;
    background-color: var(--alt-mode);
  }
  .dropdown-menu{
    background-color: var(--alt-mode);
  }
  .dropdown-item:hover{
    background-color: var(--main-color);
    color: var(--nav-text-color);
  }
  .wjps-toggler{
    color: var(--nav-text-color)!important;
  }
  .wjps-toggler > i{
    font-size: 30px;
  }
/* --End of Navigation Styles-- */

/* --General Styles-- */
  a:link:not(.btn, .dropdown-item){
    color: var(--standard-link-color);
  }
  a:visited:not(.btn, .dropdown-item){
    color: var(--standard-link-color);
  }
  .wrap-title{
    background-color: var(--heading-bg-color);
    color: var(--heading-text-color);
    border-width: var(--heading-border-width);
    border-color: var(--heading-border-color);
  }
  @media only screen and (max-width: 768px){
    .col-12 {
    display: unset;
  }
}
/* --End of General Styles-- */

/* --Footer Styles-- */
  html{
    background-color: var(--footer-bg);
  }
  footer{
    background-color: var(--footer-bg);
    color: var(--footer-text);
  }
  #footer a {
    color: var(--footer-links);
}
  .social-link{
    color: var(--footer-text)!important;
  }

  .footer-logo g {
    fill: var(--footer-text);
  }
/* --End of Footer Styles-- */

/* --SQCL Custom Logo Styling-- */
  .wjpslogo{
    max-height: 75px!important;
    max-width: 70%!important;
  }
  .secondaryLogo{
    max-height: 50px!important;
    margin-top: 1%;
    margin-bottom: 1%;
    max-width: 20%!important;
  }
  .container{
    max-width: 100%!important;
  }
  #header-title{
    padding-top: 5px;
  }
/* --End of SQCL Custom Logo Styling-- */