/**
 * Colour palette 
 */
/*-------------------------------------------
    Background Colours
-------------------------------------------*/
.bg-blue-light {
  background-color: #b8dee5; }

.bg-grey-light {
  background-color: #f5f4f0; }

.bg-sky-blue {
  background-color: #6eb2e4; }

/**
 * Forms - Still to be designed

 
 /**
$input-bg                     : #fff;
$input-border                 : #ccc;
$input-disabled-bg            : lighten(#000, 70%);
$form-actions-bg              : #f5f5f5;
$label-color                  : $white;
$input-color                  : $color-text;

// Input placeholder text color
$placeholder-text             : lighten(#000, 70%);

// Tables
$table-bg                     : $color-bg !default; // Default background color used for all tables.
$table-bg-accent              : #f9f9f9 !default; // Background color used for `.table-striped`.
$table-bg-hover               : #f5f5f5 !default; // Background color used for `.table-hover`.
$table-bg-active              : $table-bg-hover !default;
$table-border                 : #ddd; // table and cell border
$table-border-color           : #ddd !default; // Border color for table and cell borders.

 */
/*-------------------------------------------
    START CUSTOM
-------------------------------------------*/
/*-------------------------------------------
    Fonts
-------------------------------------------*/
body {
  font-family: 'Lato', sans-serif; }

/*-------------------------------------------
    General
-------------------------------------------*/
a:link, a:visited, a:hover {
  color: #004769; }

p, ul {
  color: #6e6e6e;
  line-height: 160%; }

.tr-main-content {
  margin-top: 40px; }

.octicon {
  padding-left: 10px; }

.main-heading {
  color: #6dbdcd;
  margin-top: 40px; }

h1 {
  color: #004769; }

h2 {
  color: #004769; }

h3 {
  color: #6dbdcd; }

h5 {
  color: #6dbdcd; }

@media only screen and (max-width: 768px) {
  h3.spaced {
    margin-top: 40px; } }

.text-block, text-block-elements {
  padding-top: 50px;
  padding-bottom: 40px;
  font-weight: 300; }

.text-block-elements h3 {
  padding-top: 70px; }

@media only screen and (min-width: 768px) {
  .text-block {
    padding-top: 60px;
    padding-bottom: 40px;
    font-weight: 300; }
  .text-block h3 {
    float: left;
    width: 28%;
    border-left: solid 1px #6dbdcd;
    padding-left: 20px; }
  .text-block h3.founder {
    float: left;
    width: 28%;
    border: none;
    padding: 0px;
    margin: 0; }
  .text-block p, .text-block ul, .text-block h5 {
    margin-left: 30%; }
  .text-block ul {
    padding-left: 20px; } }

.text-block h5 {
  padding: 0;
  margin-bottom: 0; }

.text-block-border {
  border-top: solid 1px #6dbdcd; }

.strip-image {
  width: 100%; }
  .strip-image img {
    width: 100%; }

.founder {
  margin: 40px; }

.img-med {
  max-width: 100%;
  margin-bottom: 40px; }

.mobile-heading {
  color: #6e6e6e;
  margin: -30px 0 30px 0; }
  @media only screen and (min-width: 768px) {
    .mobile-heading {
      visibility: hidden;
      margin: 0; } }

/*-------------------------------------------
    Navbar
-------------------------------------------*/
.navbar {
  min-height: 90px; }

.navbar-toggler {
  color: #6dbdcd;
  height: 35px;
  padding: 8px;
  background-color: #6dbdcd;
  margin: 5px;
  margin-top: 20px;
  border: none; }

@media only screen and (max-width: 768px) {
  .navbar-collapse {
    overflow-y: auto; } }

.navbar-toggler > span {
  height: 35px;
  padding: 8px;
  color: #ffffff; }

ul.main-nav {
  padding-right: 20px;
  padding-left: 0;
  margin-top: 25px;
  text-transform: uppercase;
  font-weight: 400; }

@media only screen and (min-width: 768px) {
  .navbar-nav {
    position: absolute;
    bottom: 0;
    right: 0; } }

a.active {
  color: #6dbdcd !important; }

/*-------------------------------------------
    Text
-------------------------------------------*/
.text-large {
  font-size: 130%; }

/*-------------------------------------------
    Element box
-------------------------------------------*/
.elements {
  display: table;
  border-collapse: separate;
  border-spacing: 15px;
  padding: 0 0 80px 0;
  margin: 0; }

@media only screen and (max-width: 768px) {
  .elements {
    padding: 0 0 80px 0; } }

.element-box {
  display: table-cell;
  width: 33.3%;
  border: solid 1px #dcdcdc;
  padding: 8px;
  background-color: #fff; }

@media only screen and (max-width: 768px) {
  .element-box {
    display: block;
    width: 100%;
    padding: 10px;
    margin: 15px 0; } }

.element-box p, h5 {
  padding: 4px; }

.element-box h5 {
  color: #6dbdcd;
  text-align: center; }

.element-box p, .element-box ul {
  font-size: 90%;
  margin-bottom: 2px;
  line-height: 130%; }

/*-------------------------------------------
    Callout Images
-------------------------------------------*/
.callout-text-1 {
  background: #fff url("../assets/text-bg-image-1.jpg") top center; }

.callout-text-2 {
  background: #fff url("../assets/text-bg-image-2.jpg") top center; }

.callout-text-3 {
  background: #fff url("../assets/blueprint.jpg") top center; }

.callout-text-4 {
  background: #fff url("../assets/text-bg-image-4.jpg") bottom center; }

.callout-text-5 {
  background: #fff url("../assets/text-bg-image-5.jpg") top center; }

.callout-text-6 {
  background: #fff url("../assets/text-bg-image-6.jpg") top center; }

.callout-text-7 {
  background: #fff url("../assets/text-bg-image-7.jpg") top center; }

.callout-text {
  position: relative;
  height: 600px;
  display: table;
  overflow: hidden;
  width: 100%;
  background-size: cover;
  /* Create the parallax scrolling effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll; }

@media only screen and (min-width: 768px) {
  .callout-text {
    min-height: 550px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; } }

@media only screen and (max-width: 768px) {
  .callout-text {
    height: 300px;
    overflow: hidden; } }

.callout-text p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: #fff;
  font-size: 30px;
  font-weight: 300;
  padding: 0 80px; }

@media only screen and (max-width: 544px) {
  .callout-text p {
    font-size: 20px;
    padding: 0 10px; } }

.word-cloud {
  max-width: 100%; }

/*-------------------------------------------
    Header
-------------------------------------------*/
.wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;
  max-height: 280px;
  background-color: #6dbdcd; }

.wrapper img {
  width: 80%; }

@media only screen and (max-width: 544px) {
  .wrapper {
    max-width: 100%;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    height: 120px; } }

/*-------------------------------------------
    Jumbotrons
-------------------------------------------*/
.jumbotron-home {
  background: #fff url("../assets/home-hero.jpg") top center; }

.jumbotron-community {
  background: #fff url("../assets/community-hero.jpg") top center; }

.jumbotron-programme {
  background: #fff url("../assets/programme-hero.jpg") top center; }

.jumbotron-blueprint {
  background: #fff url("../assets/blueprint-hero.jpg") top center; }

.jumbotron-about {
  background: #fff url("../assets/about-hero.jpg") top center; }

.jumbotron-join {
  background: #fff url("../assets/join-hero.jpg") top center; }

.jumbotron {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0;
  /* Create the parallax scrolling effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll; }

@media only screen and (min-width: 768px) {
  .jumbotron {
    min-height: 500px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; } }

/*-------------------------------------------
    Welcome
-------------------------------------------*/
.welcome {
  position: absolute;
  top: 150px;
  left: 10px;
  color: #004769;
  font-size: 30px; }

@media only screen and (min-width: 768px) {
  .welcome {
    position: absolute;
    top: 240px;
    left: 200px;
    font-size: 55px; } }

.welcome h3, .welcome h6 {
  color: #6dbdcd; }

.welcome p {
  color: #6dbdcd;
  font-size: 12px; }

.quickLinks {
  position: absolute;
  top: 30%;
  right: 2%;
  background-color: transparent; }

@media only screen and (max-width: 544px) {
  .welcome h3 {
    font-size: 1.2rem;
    margin-bottom: 5px; }
  .welcome h6, .welcome p {
    font-size: .8rem;
    margin-bottom: 5px; } }

/*-------------------------------------------
    Tables & Content
-------------------------------------------*/
.tr-block-header p {
  line-height: 16px; }

.tr-block-header {
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 16px 20px 1px;
  text-transform: uppercase; }

.tr-block-header p > a {
  display: block;
  float: right;
  color: #fff; }

.table-header {
  color: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-radius: 30px; }

.header-row {
  background-color: #6dbdcd;
  color: white;
  border-top: solid 3px #fff;
  border-radius: 30px;
  font-weight: 400 !important; }

.header-row > th {
  font-weight: 400 !important; }

.header-hr {
  display: block;
  height: 0px;
  border: 0;
  border-top: 8px solid #6dbdcd;
  margin: 0;
  padding: 0; }

/*-------------------------------------------
    Buttons
-------------------------------------------*/
/*
.btn-log-out {
  @include button-variant($white, $grey, $grey-dark);
}

.btn-purple {
  @include button-variant($white, $purple, $light-purple);
}

.btn-purple-alpha {
  @include button-variant($white, $purple-alpha, $light-purple);
}

.btn-green-alpha {
  @include button-variant($white, $green-alpha, $green);
}

.btn-orange {
  @include button-variant($white, $orange, $light-orange);
}
*/
.tr-button-block {
  margin-top: 5px;
  margin-bottom: 20px; }

/*-------------------------------------------
    Footer
-------------------------------------------*/
footer {
  position: relative;
  display: block;
  width: 100%;
  background: #f5f4f0;
  padding: 30px;
  font-size: 90%;
  font-weight: 300;
  font-color: #44475d;
  overflow: hidden; }

footer p {
  float: left; }

.social {
  float: right; }

.social img {
  width: 50px;
  padding: 5px; }

/*-------------------------------------------
    END CUSTOM
-------------------------------------------*/