/**

* Site header
*/

.site-header {

// border-top: 5px solid $grey-color-dark;
// border-bottom: 1px solid $grey-color-light;
min-height: $spacing-unit * 1.865;
// line-height: $base-line-height * $base-font-size * 2.25;

// Positioning context for the mobile navigation icon
position: relative;

}

.top-bar {

height: $spacing-unit * 1.365;
line-height: $spacing-unit * 1.365;
border-bottom: 1px solid $grey-color-light;
background-color: $grey-color-extra-light;

.contact {
  a {
    color: $grey-color;

    &:hover {
      text-decoration: none;
    }
  }
}

.social-links {
  float: right;
}

&:after {
  clear: both;
}

}

.logo-wrapper {

padding: $spacing-unit * 0.865 0 $spacing-unit * 0.865 0;
text-align: center;

.logo-text {
  font-size: 18pt;
  color: $text-color;
  @include relative-font-size(2.382);
}

a {
  &:hover {
    text-decoration: none;
  }
}

img {
  width: 50%;
  height: auto;
  margin: 0 auto;
  display: block;
}

@media screen and (min-width: $on-medium) {
  padding: $spacing-unit * 1.865 0 $spacing-unit * 1.865 0;

  img {
    width: 50%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
}

}

.site-nav {

border-top: 1px solid $grey-color-light;
border-bottom: 1px solid $grey-color-light;
text-align: center;

.page-link {
  display: inline-block;
  color: $grey-color;
  padding: ($spacing-unit / 2);

  &:hover {
    color: $grey-color-dark;
    text-decoration: none;
  }

  margin-left: 20px;

  &:first-child {
    padding-left: 0;
    margin-left: 0;
  }

  &:last-child {
    padding-right: 0;
    margin-right: 0;
  }
}

@media screen and (min-width: $on-medium) {
  // position: static;
  // float: right;
  // border: none;
  // background-color: inherit;

  // label[for="nav-trigger"] {
  //   display: none;
  // }

  // .menu-icon {
  //   display: none;
  // }

  // input ~ .trigger {
  //   display: block;
  // }

  // .page-link {
  //   display: inline;
  //   padding: 0;

  //   &:not(:last-child) {
  //     margin-right: 20px;
  //   }
  //   margin-left: auto;
  // }
}

}

/**

* Site footer
*/

.site-footer {

border-top: 1px solid $grey-color-light;
padding: $spacing-unit 0;

}

.footer-heading {

@include relative-font-size(1.125);
margin-bottom: $spacing-unit / 2;

}

.contact-list, .social-media-list {

list-style: none;
margin-left: 0;

}

.footer-col-wrapper {

@include relative-font-size(0.9375);
color: $grey-color;
margin-left: -$spacing-unit / 2;
@extend %clearfix;

}

.footer-col {

width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));
margin-bottom: $spacing-unit / 2;
padding-left: $spacing-unit / 2;

}

.footer-col-1, .footer-col-2 {

width: -webkit-calc(50% - (#{$spacing-unit} / 2));
width: calc(50% - (#{$spacing-unit} / 2));

}

.footer-col-3 {

width: -webkit-calc(100% - (#{$spacing-unit} / 2));
width: calc(100% - (#{$spacing-unit} / 2));

}

@media screen and (min-width: $on-large) {

.footer-col-1 {
  width: -webkit-calc(35% - (#{$spacing-unit} / 2));
  width: calc(35% - (#{$spacing-unit} / 2));
}

.footer-col-2 {
  width: -webkit-calc(20% - (#{$spacing-unit} / 2));
  width: calc(20% - (#{$spacing-unit} / 2));
}

.footer-col-3 {
  width: -webkit-calc(45% - (#{$spacing-unit} / 2));
  width: calc(45% - (#{$spacing-unit} / 2));
}

}

@media screen and (min-width: $on-medium) {

.footer-col {
  float: left;
}

}

/**

* Page content
*/

.page-content {

padding: $spacing-unit 0;
flex: 1 0 auto;

}

.page-heading {

@include relative-font-size(2);

}

.post-list-heading {

@include relative-font-size(1.75);

}

.post-list {

margin-left: 0;
list-style: none;

>li {
  // margin-bottom: $spacing-unit;
  padding: $spacing-unit 0;
  border-bottom: 1px solid $grey-color-light;
}

.post-content {
  @include relative-font-size(1);
  margin-top: $spacing-unit * 0.191;
}

}

.post-meta {

font-size: $small-font-size;
color: $grey-color;
margin-bottom: $spacing-unit * 0.382;

i {
  color: $brand-color;
}

}

.post-title {

.post-link {
  display: block;
  color: $text-color;
  @include relative-font-size(1.5);

  &:hover {
    text-decoration: none;
  }
}

margin: 0 0 $spacing-unit * 0.382 0;

}

.post-store {

display: flex;
margin-top: $spacing-unit * 0.382;

a {
  flex: 1;
  margin: $spacing-unit * 0.382;
}

@media screen and (min-width: $on-medium) {
  a {
    margin: $spacing-unit * 0.382 $spacing-unit * 2.618 $spacing-unit * 0.382 $spacing-unit * 2.618;
  }
}

}

/**

* Posts
*/

.post {

.post-store {
  margin-bottom: $spacing-unit;
}

.post-header {
  margin-bottom: $spacing-unit;
}

.post-landing-image {
  margin: 0 0 $spacing-unit * 0.618 0;
}

.post-title,
.post-content h1 {
  @include relative-font-size(2.625);
  letter-spacing: -1px;
  line-height: 1;

  @media screen and (min-width: $on-large) {
    @include relative-font-size(2.625);
  }
}

.post-content {
  margin-bottom: $spacing-unit;

  h2 {
    @include relative-font-size(1.75);

    @media screen and (min-width: $on-large) {
      @include relative-font-size(2);
    }
  }

  h3 {
    @include relative-font-size(1.375);

    @media screen and (min-width: $on-large) {
      @include relative-font-size(1.625);
    }
  }

  h4 {
    @include relative-font-size(1.125);

    @media screen and (min-width: $on-large) {
      @include relative-font-size(1.25);
    }
  }
}

}

.social-media-list {

display: table;
margin: 0 auto;

li {
  float: left;
  margin: 0 5px;

  &:first-of-type {
    margin-left: 0;
  }

  &:last-of-type {
    margin-right: 0;
  }

  a {
    display: block;
    padding: $spacing-unit / 4;
    border: 1px solid $grey-color-light;
  }

  &:hover .svg-icon {
    fill: currentColor;
  }
}

}

/**

* Grid helpers
*/

@media screen and (min-width: $on-large) {

.one-half {
  width: -webkit-calc(50% - (#{$spacing-unit} / 2));
  width: calc(50% - (#{$spacing-unit} / 2));
}

}

/**

* Etc
*/

.brand-bg a i {

display: inline-block;
text-decoration: none;
text-align: center;
margin-right: 5px;
color: #fff;
font-size: 14px;
-webkit-transition: background 2s ease;
-moz-transition: background 2s ease;
-o-transition: background 2s ease;
-ms-transition: background 2s ease;
transition: background 2s ease;

}

.brand-bg a i:hover {

-webkit-transition: background 2s ease;
-moz-transition: background 2s ease;
-o-transition: background 2s ease;
-ms-transition: background 2s ease;
transition: background 2s ease;

}

.brand-bg a.facebook i {

background: #3280e7;

}

.brand-bg a.facebook i:hover {

background: #134fa0;

}

.brand-bg a.twitter i {

background: #32c8de;

}

.brand-bg a.twitter i:hover {

background: #188392;

}

.brand-bg a.telegram i {

background: #32c8de;

}

.brand-bg a.telegram i:hover {

background: #188392;

}

.brand-bg a.google-plus i {

background: #f96f4a;

}

.brand-bg a.google-plus i:hover {

background: #eb6440;

}

.brand-bg a.linkedin i {

background: #729fda;

}

.brand-bg a.linkedin i:hover {

background: #3069b6;

}

.brand-bg a.keybase i {

background: #729fda;

}

.brand-bg a.keybase i:hover {

background: #3069b6;

}

.brand-bg a.microdotblog i {

background: #f8a841;

}

.brand-bg a.microdotblog i:hover {

background: #cc7607;

}

.brand-bg a.pinterest i {

background: #ed5441;

}

.brand-bg a.pinterest i:hover {

background: #b72411;

}

.brand-bg a.dropbox i {

background: #32c8de;

}

.brand-bg a.dropbox i:hover {

background: #188392;

}

.brand-bg a.bitcoin i {

background: #f8a841;

}

.brand-bg a.bitcoin i:hover {

background: #cc7607;

}

.brand-bg a.foursquare i {

background: #22bed4;

}

.brand-bg a.foursquare i:hover {

background: #146f7c;

}

.brand-bg a.flickr i {

background: #ff61e7;

}

.brand-bg a.flickr i:hover {

background: #fa00d4;

}

.brand-bg a.github i {

background: #666666;

}

.brand-bg a.github i:hover {

background: #333333;

}

.brand-bg a.instagram i {

background: #d6917a;

}

.brand-bg a.instagram i:hover {

background: #b35637;

}

.brand-bg a.skype i {

background: #32c8de;

}

.brand-bg a.skype i:hover {

background: #188392;

}

.brand-bg a.tumblr i {

background: #84a1c8;

}

.brand-bg a.tumblr i:hover {

background: #476d9f;

}

.brand-bg a.vimeo i {

background: #32c8de;

}

.brand-bg a.vimeo i:hover {

background: #188392;

}

.brand-bg a.dribbble i {

background: #ff2edf;

}

.brand-bg a.dribbble i:hover {

background: #c700a9;

}

.brand-bg a.youtube i {

background: #ed5441;

}

.brand-bg a.youtube i:hover {

background: #b72411;

}

.brand-bg a.youtube_channel i {

background: #ed5441;

}

.brand-bg a.youtube_channel i:hover {

background: #b72411;

}

.brand-bg a.email i {

background: #32c8de;

}

.brand-bg a.email i:hover {

background: #188392;

}

.brand-bg a.rss i {

background: #d6917a;

}

.brand-bg a.rss i:hover {

background: #b35637;

}

.brand-bg a.mastodon i {

background: #3280e7;

}

.brand-bg a.mastodon i:hover {

background: #134fa0;

}

/* Circle */ .circle-1 {

display: inline-block;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
border-radius: 100%;

}

.circle-2 {

display: inline-block;
height: 25px;
width: 25px;
line-height: 25px;
text-align: center;
border-radius: 100%;

}

.circle-3 {

display: inline-block;
height: 35px;
width: 35px;
line-height: 35px;
text-align: center;
border-radius: 100%;

}

.circle-4 {

display: inline-block;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
border-radius: 100%;

}

.circle-5 {

display: inline-block;
height: 70px;
width: 70px;
line-height: 70px;
text-align: center;
border-radius: 100%;

}