style.scss

---
---

//
// IMPORTS
//

@import "_reset";
@import "_variables";
// Syntax highlighting @import is at the bottom of this file
// -------------------------- ORIGINAL grayscale.css
/*
    ██  ██     ██████  ███████ ███████  █████  ██    ██ ██   ████████ ███████
   ██  ██      ██   ██ ██      ██      ██   ██ ██    ██ ██      ██    ██
  ██  ██       ██   ██ █████   █████   ███████ ██    ██ ██      ██    ███████
 ██  ██        ██   ██ ██      ██      ██   ██ ██    ██ ██      ██         ██
██  ██         ██████  ███████ ██      ██   ██  ██████  ███████ ██    ███████
*/

body {
  width: 100%;
  height: 100%;
  font-family: Lora, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  background-color: #000;
  overflow-x: hidden;
}

html {
  width: 100%;
  height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 35px;
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  font-size: 3em;
}

h2 {
  text-align: center;
  font-size: 34px;
}

h3 {
  font-size: 26px;
}

em {
  font-style: italic;
  color: $primary;
}

strong {
  font-weight: bold;
}

ul,
ol {
  margin: 0 0 35px;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  list-style: disc;
  list-style-position: inside;
  text-align: center;
  list-style-type: none;
}

code {
  color: $clr-code;
  background-color: $clr-code-bg;
  padding: 4px 8px;
}

p {
  margin: 0 0 25px;
  font-size: 18px;
  line-height: 1.5;
}

section,
footer {
  background-color: #000;
}

@media (min-width: 768px) {
  p {
    margin: 0 0 35px;
    font-size: 20px;
    line-height: 1.6;
  }
}

a {
  color: $primary;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

a:hover,
a:focus {
  text-decoration: none;
  color: $secondary;
}

.light {
  font-weight: 400;
}

/*
    ██  ██     ███    ██  █████  ██    ██ ██  ██████   █████  ████████ ██  ██████  ███    ██
   ██  ██      ████   ██ ██   ██ ██    ██ ██ ██       ██   ██    ██    ██ ██    ██ ████   ██
  ██  ██       ██ ██  ██ ███████ ██    ██ ██ ██   ███ ███████    ██    ██ ██    ██ ██ ██  ██
 ██  ██        ██  ██ ██ ██   ██  ██  ██  ██ ██    ██ ██   ██    ██    ██ ██    ██ ██  ██ ██
██  ██         ██   ████ ██   ██   ████   ██  ██████  ██   ██    ██    ██  ██████  ██   ████
*/

.navbar-custom + p {
  margin: 0; // fix jekyll rendering of empty p tags
}
.navbar-custom {
  margin-bottom: 0;
  border-bottom: $clr-navbar-border-thickness $clr-navbar-border-type
    $clr-navbar-border;
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: $clr-navbar-bg;
}

.navbar-custom .navbar-brand {
  font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
  outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
  padding: 4px 6px;
  font-size: 16px;
  color: $clr-navbar;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
  outline: 0;
}

.navbar-custom a {
  color: $clr-navbar-link;
}

.navbar-custom .nav li a {
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

.navbar-custom .nav li a:hover {
  outline: 0;
  color: rgba(255, 255, 255, 0.8);
  background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
  outline: 0;
  background-color: transparent;
}

.navbar-custom .nav li.active {
  outline: 0;
}

.navbar-custom .nav li.active a {
  background-color: rgba(255, 255, 255, 0.3);
}

.navbar-custom .nav li.active a:hover {
  color: #fff;
}

@media (min-width: 768px) {
  .navbar-custom {
    padding: 30px 0;
    border-bottom: 0;
    letter-spacing: 1px;
    background: 0 0;
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
  }

  .navbar-custom.top-nav-collapse {
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    background: #000;
  }
}

/*
    ██  ██     ██ ███    ██ ████████ ██████   ██████
   ██  ██      ██ ████   ██    ██    ██   ██ ██    ██
  ██  ██       ██ ██ ██  ██    ██    ██████  ██    ██
 ██  ██        ██ ██  ██ ██    ██    ██   ██ ██    ██
██  ██         ██ ██   ████    ██    ██   ██  ██████
*/

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: #fff;
  background-color: $panel1-bg-tint;
}
.intro::after {
  content: "";
  background: url($panel1-bg) no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: auto 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.intro .intro-body {
  display: table-cell;
  vertical-align: middle;
}
.fa-terminal {
  background: rgba(0, 0, 0, 0.6);
  padding: 0 0.15em 0.1em;
  border-radius: 0.1em;
}
.intro .intro-body .brand-heading {
  font-size: 40px;
  text-shadow: 0.03em 0.03em 0.12em rgba(0, 0, 0, 0.8);
}

.intro .row > div,
.download-section .container-fluid > div {
  //background-color: darken(rgba($panel1-bg-tint,.4),40%);
  border-radius: 20px;
  padding: 20px;
}

.intro .intro-body {
  .intro-text {
    font-size: 18px;
    text-shadow: 0.02em 0.02em 0.01em rgba(0, 0, 0, 1),
      0.25em 0.25em 0.2em rgba(0, 0, 0, 1);
  }

  .call-to-action-text {
    font-size: 16px;
    margin-bottom: 0;
  }
}

/*
    ██  ██     ██ ███    ██ ████████ ██████   ██████      ███████  ██████   █████
   ██  ██      ██ ████   ██    ██    ██   ██ ██    ██          ██ ██       ██   ██
  ██  ██       ██ ██ ██  ██    ██    ██████  ██    ██         ██  ███████   █████
 ██  ██        ██ ██  ██ ██    ██    ██   ██ ██    ██        ██   ██    ██ ██   ██
██  ██         ██ ██   ████    ██    ██   ██  ██████         ██    ██████   █████
*/

@media (min-width: 768px) {
  .intro {
    height: 100%;
    padding: 0;
  }

  .intro .intro-body .brand-heading {
    font-size: 100px;
  }

  .intro .intro-body .intro-text {
    font-size: 26px;
  }
}

/*
    ██  ██     ██████  ████████ ███    ██      ██████ ██ ██████   ██████ ██      ███████
   ██  ██      ██   ██    ██    ████   ██     ██      ██ ██   ██ ██      ██      ██
  ██  ██       ██████     ██    ██ ██  ██     ██      ██ ██████  ██      ██      █████
 ██  ██        ██   ██    ██    ██  ██ ██     ██      ██ ██   ██ ██      ██      ██
██  ██         ██████     ██    ██   ████      ██████ ██ ██   ██  ██████ ███████ ███████
*/

.btn-circle {
  width: 70px;
  height: 70px;
  margin-top: 15px;
  padding: 7px 16px;
  border: 2px solid #fff;
  border-radius: 100% !important;
  font-size: 40px;
  color: #fff;
  background: 0 0;
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background 0.3s ease-in-out;
}

.btn-circle:hover,
.btn-circle:focus {
  outline: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.btn-circle i.animated {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -moz-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
  }
}

/*
    ██  ██     ██ ███    ██ ██ ████████ ██  █████  ████████ ██ ██    ██ ███████ ███████
   ██  ██      ██ ████   ██ ██    ██    ██ ██   ██    ██    ██ ██    ██ ██      ██
  ██  ██       ██ ██ ██  ██ ██    ██    ██ ███████    ██    ██ ██    ██ █████   ███████
 ██  ██        ██ ██  ██ ██ ██    ██    ██ ██   ██    ██    ██  ██  ██  ██           ██
██  ██         ██ ██   ████ ██    ██    ██ ██   ██    ██    ██   ████   ███████ ███████
*/

#initiatives {
  //background-color: $brand-c1;
}
.content-section {
  padding-top: 0;
}

.banner-section {
  width: 100%;
  height: 300px;
  padding: 50px 0;
  color: #fff;
  background: url($panel3-bg) no-repeat center center scroll;
  background-color: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

/*
    ██  ██  ██████  ███████ ████████      ██ ███    ██ ██    ██  ██████  ██     ██    ██ ███████ ██████
   ██  ██  ██       ██         ██         ██ ████   ██ ██    ██ ██    ██ ██     ██    ██ ██      ██   ██
  ██  ██   ██   ███ █████      ██         ██ ██ ██  ██ ██    ██ ██    ██ ██     ██    ██ █████   ██   ██
 ██  ██    ██    ██ ██         ██         ██ ██  ██ ██  ██  ██  ██    ██ ██      ██  ██  ██      ██   ██
██  ██      ██████  ███████    ██ ███████ ██ ██   ████   ████    ██████  ███████  ████   ███████ ██████
*/

#get_involved {
  h2 {
    margin-top: 50px;
  }
}

.get-involved {
  margin-top: 35px;
}

#map {
  width: 100%;
  height: 200px;
  margin-top: 0;
  margin-bottom: 50px;
}

.events {
  margin: 0 25px;
  margin-top: 50px;
  clear: both;

  .event {
    width: 30%;
    padding: 0 2% 50px 2%;
    display: inline-block;
    vertical-align: top;

    &.wapro {
    }

    h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    h3 {
      height: 120px;
      margin-top: 30px;
      margin-bottom: 35px;
    }

    h4 {
      margin-bottom: 10px;
      line-height: 20px;
    }

    .date {
      font-size: 16px;
    }

    .description {
      font-size: 16px;
      min-height: 150px;
    }
  }
}

@media (max-width: 767px) {
  .events {
    margin: 0 15px;
    .event {
      width: 44%;
      padding-left: 4%;
      padding-right: 4%;
    }
  }
}

@media (max-width: 550px) {
  .events {
    .event {
      width: 100%;
      padding: 0;
      padding-bottom: 50px;

      h3 {
        margin-bottom: 0;
      }

      &.wwt {
        h3 {
          margin-bottom: 10px;
        }
      }

      .description {
        min-height: inherit;
      }
    }
  }
}
//------------------------------------------------------------------------------
section#about-us {
  background-color: transparent;
}
section#about-us::after {
  content: "";

  background: url(/img/pike-02.jpg) no-repeat top center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -4;
}

#board-divider {
  width: 100%;
  height: 200px;
  margin-top: 0;
  margin-bottom: 50px;
}
.us {
  //margin: 0 25px;
  margin-top: 200px;
  clear: both;
  background-color: transparentize(#000, 0.1);
  padding: 40px 10% 40px;
  width: 100%;

  .person {
    width: 30%;
    padding: 0px 2% 50px 2%;
    display: inline-block;
    vertical-align: top;

    .avatar-i {
      max-width: 200px;
      .big {
        max-width: 350px;
      }
    }

    h2 {
      font-size: 24px;
      margin-bottom: 20px;
    }

    h3 {
      height: 20px;
      margin-top: 30px;
      margin-bottom: 10px;
      font-size: 18px;
    }

    h4 {
      margin-bottom: 10px;
      line-height: 20px;
    }

    .description {
      font-size: 16px;
      //min-height: 150px;
    }
  }
}

@media (max-width: 767px) {
  .us {
    //margin: 0 15px;

    .person {
      width: 44%;
      padding-left: 4%;
      padding-right: 4%;
    }
  }
}

@media (max-width: 550px) {
  .us {
    .person {
      width: 100%;
      padding: 0;
      padding-bottom: 50px;

      h3 {
        margin-bottom: 0;
      }

      &.wwt {
        h3 {
          margin-bottom: 10px;
        }
      }

      .description {
        min-height: inherit;
      }
    }
  }
}

//------------------------------------------------------------------------------
@media (min-width: 767px) {
  .content-section {
    clear: both;
  }

  .download-section {
    padding: 100px 0;
  }

  #map {
    height: 400px;
    margin-top: 0;
  }
}

.btn {
  border-radius: 0;
  text-transform: uppercase;
  font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn-default {
  border: 1px solid $primary;
  color: $primary;
  background-color: transparent;
}

.btn-default:hover,
.btn-default:focus {
  border: 1px solid $secondary;
  outline: 0;
  color: #000;
  background-color: $secondary;
}

ul.banner-social-buttons {
  margin-top: 0;
}

@media (max-width: 1199px) {
  ul.banner-social-buttons {
    margin-top: 15px;
  }
}

@media (max-width: 767px) {
  ul.banner-social-buttons li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }

  ul.banner-social-buttons li:last-child {
    margin-bottom: 0;
  }
}

footer {
  padding: 50px 0;
}

footer p {
  margin: 0;
}

::-moz-selection {
  text-shadow: none;
  background: $clr-selection-bg;
}

::selection {
  text-shadow: none;
  background: $clr-selection-bg;
}

img::selection {
  background: 0 0;
}

img::-moz-selection {
  background: 0 0;
}

body {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
}

/*
    ██  ██     ██    ██ ██ ███████ ██  ██████  ███    ██
   ██  ██      ██    ██ ██ ██      ██ ██    ██ ████   ██
  ██  ██       ██    ██ ██ ███████ ██ ██    ██ ██ ██  ██
 ██  ██         ██  ██  ██      ██ ██ ██    ██ ██  ██ ██
██  ██           ████   ██ ███████ ██  ██████  ██   ████
*/

#vision {
  width: 100%;
  .row {
    padding-top: 20px;
  }
  h2 {
    padding-top: 40px;
  }
}

/*
    ██  ██     ██      ███████  █████  ██████  ███    ██     ███    ███  ██████  ██████  ███████
   ██  ██      ██      ██      ██   ██ ██   ██ ████   ██     ████  ████ ██    ██ ██   ██ ██
  ██  ██       ██      █████   ███████ ██████  ██ ██  ██     ██ ████ ██ ██    ██ ██████  █████
 ██  ██        ██      ██      ██   ██ ██   ██ ██  ██ ██     ██  ██  ██ ██    ██ ██   ██ ██
██  ██         ███████ ███████ ██   ██ ██   ██ ██   ████     ██      ██  ██████  ██   ██ ███████
*/

.video1 {
  position: absolute;
  z-index: -99;
  width: 100%;
  height: 100%;
}

#learn_more {
  background-color: rgba(darken($primary, 50%), 1);
  //height: 100%;
  min-height: 100%;
  .banner-section {
    width: 100%;
    height: 300px;
    padding: 50px 0;
    color: #fff;
    background: url() no-repeat center center scroll;
    //background-color: rgba(255,255,255,.8);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  }
  .row > div {
    background-color: darken(rgba(255, 255, 255, 0.5), 60%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 50px;
  }
  dt {
    padding: 20px;
  }
}

// -------------------------- ORIGINAL JEKYLL-NOW SCSS SKELTON
// Fixes images in popup boxes from Google Translate
.gmnoprint img {
  max-width: none;
}

.date {
}

// Specify the color of the selection
::-moz-selection {
}
::selection {
}

// Nicolas Gallagher's micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

/*********************/
/* LAYOUT / SECTIONS */
/*********************/

//
// .masthead
//

.wrapper-masthead {
}

.masthead {
  @include mobile {
    //  text-align: center;
  }
}

.logo-i {
  max-width: 120px;
  .big {
    max-width: 200px;
  }
}

.site-avatar {
  @include mobile {
  }
  img {
  }
}

.site-info {
  @include mobile {
    // float: none;
    // display: block;
    // margin: 0 auto;
  }
}

.site-name {
}

.site-description {
  @include mobile {
    // margin: 3px 0;
  }
}

nav {
  @include mobile {
    // float: none;
    // margin-top: 9px;
    // display: block;
    // font-size: 16px;
  }
  a {
    @include mobile {
      // margin: 0 10px;
      // color: $secondary;
    }
  }
}

//
// .main
//

.posts > .post {
}

.posts > .post:last-child {
}

.post {
  blockquote {
  }
  .comments {
  }
  .read-more {
  }
}

.wrapper-footer {
}

footer {
}

// for tag cloud and archives
.tag-cloud {
  list-style: none;
  padding: 0;
  text-align: justify;
  font-size: 16px;
  li {
    display: inline-block;
    margin: 0 12px 12px 0;
  }
}
#archives {
  padding: 5px;
}
.archive-group {
  margin: 5px;
  border-top: 1px solid #ddd;
}
.archive-item {
  margin-left: 5px;
}
.post-tags {
  text-align: right;
}

// Pages

@media (min-width: 768px) {
  .page {
    padding-top: 12em;
  }
}

// Settled on moving the import of syntax highlighting to the bottom of the CSS
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
@import "_highlights";
@import "_svg-icons";