:root { /* -- Variables -- */
  /* --Colours-- */
  --main-color: #182850; /* Sets the main colour to use throughout the system. */
  --alt-color-dark: #c00000; /* 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: #0175E4;
  
  --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: #fff;
  --transition-time: 0.25s; /* General animation length. */
}

/* --Navigation Styles-- */
  .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){
    color: var(--nav-text-color)!important;
  }
  .nav-link:hover:not(.wjps-nav-button):not(.tab-link):not(.wjps-tabs){
    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(--alt-color-dark);
    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(max-width: 1025px){
    .boxed, .animated{
      margin-left: unset!important;
      margin-right: unset!important;
    }
  }

  @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);
}
  #footer{
 /*   margin-top: -50px!important;*/
  }
  .social-link{
    color: var(--footer-text)!important;
  }
/* --End of Footer Styles-- */

/* --BTC Custom Logo & Video Styling-- */

  body{
    background-image: url('../../../Images/bedale-town-hall-and-church.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }
  .boxed, .animated{
    margin-left: 15%;
    margin-right: 15%;
  }
  .wjps-bg{
    background-color: transparent!important;
  }
  .wjps-container{
    padding-left: 0px;
    margin-left: 0px;
  }
  .boxed > .container{
    background-color: #fff;
    margin: 0px;
    margin-top: -20px;
    padding-top: 20px;
    padding-bottom: 20px;
    max-width: 100%;
  }
  .homecontainer{
    margin-top: 0px!important;
  }
  html, body{
    height: 100%;
  }
  .wjps-edit-version-panel{
    margin-left: 15px!important;
  }

  @media (max-width: 900px){
  	footer {
  		min-height: auto!important;
	}
  }

  @media(max-width: 705px){
  	footer{
  		min-height: auto!important;
  	}
  }
/* --End of BTC Custom Logo & Video Styling-- */