---
# Only the main Sass file needs front matter (the dashes are enough)
---


@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Sintony:400,700);

$baseurl: '{{site.baseurl}}';

// Our variables
$base-font-family: 'Sintony', sans-serif;
$base-font-size:   16px;
$base-font-weight: 400;
$small-font-size:  $base-font-size * 0.875;
$base-line-height: 1.5;

$spacing-unit:     30px;

$text-color:       #111;
$site-title-color: white;
$background-color: #fdfdfd;
$brand-color:      darken(#c6f, 15%);
$brand-color-light: #c6f;
$brand-color-lightest: lighten($brand-color-light, 20%);

$grey-color:       #828282;
$grey-color-light: lighten($grey-color, 43%);
$grey-color-dark:  darken($grey-color, 25%);

$oldpurple-color : #5c3c7c;
$purple-color : #620062;
$border-color: #ddd;
$white-color: #fff;

// Width of the content area
$content-width:    960px;

$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 992px
);

$font-sans: 'Sintony', sans-serif;
$font-serif: 'Sintony', sans-serif;

//
// Breakpoint mixin with named or pixel values.
//
// Usage:
//
//   @include(600px) { ... }
//     => @media all and (min-width: 600px) { ... }
//
//   @include(400px, 900px) { ... }
//     => @media all and (min-width: 400px) and (max-width: 900px) { ... }
//
@mixin breakpoint($min, $max: null) {
  @if type-of($min) == string {
    $min: map-get($breakpoints, $min);
  }
  @if type-of($max) == string {
    $max: map-get($breakpoints, $max);
  }
  @if ($max) {
    @media all and (min-width: $min) and (max-width: $max - 1px) {
      @content;
    }
  } @else {
    @media all and (min-width: $min) {
      @content;
    }
  }
}

%no-link-style {
    &, &:hover, &:visited {
        text-decoration: none !important;
        color: $text-color;
    }
}

//
// Autogrid CSS framework by Juuso Mikkonen (github.com/juusaw)
//

.auto-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: $content-width;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    &.auto-wide {
        max-width: 1.5 * $content-width;
    }
    &.auto-slim {
        max-width: 0.75 * $content-width;
    }
}
@media screen and (max-width: 600px) {
  .mobile_hide {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}
@media screen and (min-width: 400px) {
    .auto-content {
        width: 80%;
        padding: 0;
    }
}

@include breakpoint (tablet) {
    @for $i from 1 through 12 {
        .auto-col-#{$i} {
            width: $i / 12 * 98%;
            float: left;
            box-sizing: border-box;
    padding: 0 5px;
        }
    }
}

/* Reset after element containers */
.auto-content
.auto-row {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}

// Import partials from `sass_dir` (defaults to `_sass`)
@import
        "base",
        "layout",
        "as-theme",
        "special",
        "syntax-highlighting",
        "contacts",
        "grid",
        "info"
;