/*
Gutenberg: A Meaningful Web Typography Starter Kit
Website ....... http://matejlatin.github.io/Gutenberg/
Version ....... 1.2.3
Github ........ https://github.com/matejlatin/Gutenberg
Authors ....... Matej Latin (@matejlatin)
License ....... Creative Commmons Attribution 3.0
License URL ... https://raw.githubusercontent.com/matejlatin/Gutenberg/master/license.txt
*/
/* Configuration
   ========================================================================== */
/* Calculations
   ========================================================================== */
/* Font themes
   ========================================================================== */
   @import url("https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic");
   @media screen and (min-width: 40em) {
     .floatLeft {
       float: left;
     }
   }
   
   @media screen and (min-width: 40em) {
     .floatCenter {
       margin-left: auto;
       margin-right: auto;
     }
   }
   
   @media screen and (min-width: 40em) {
     .floatRight {
       float: right;
     }
   }
   
   /* Grid
      ========================================================================== */
   .grid, .grid-double {
     background-image: linear-gradient(to bottom, rgba(0, 170, 255, 0.3) 1px, transparent 1px);
     background-position: left top;
     background-repeat: repeat;
     background-size: 100% 26px;
     background-size: 100% 1.625rem;
   }
   @media screen and (min-width: 40em) {
     .grid, .grid-double {
       background-size: 100% 31px;
       background-size: 100% 1.722222222222222rem;
     }
   }
   
   .grid-double {
     background-image: linear-gradient(to bottom, rgba(0, 170, 255, 0.3) 1px, transparent 1px, transparent 13px, rgba(0, 170, 255, 0.2) 13px, transparent 14px, transparent 26px);
   }
   @media screen and (min-width: 40em) {
     .grid-double {
       background-image: linear-gradient(to bottom, rgba(0, 170, 255, 0.3) 1px, transparent 1px, transparent 15.5px, rgba(0, 170, 255, 0.2) 15.5px, transparent 16.5px, transparent 31px);
     }
   }
   
   .toggleWrapper {
     display: block;
     position: fixed;
     top: 26px;
     right: 26px;
     background-color: #231F20;
     border-radius: 25px;
     padding: 0 10px 0 20px;
     height: 32px;
   }
   @media screen and (min-width: 40em) {
     .toggleWrapper {
       right: 31px;
       top: 31px;
     }
   }
   
   .btnToggleGrid {
     background: url("../../assets/images/grid-icons.png") top right no-repeat;
     background-size: 32px;
     display: block;
     font-size: 14px;
     text-decoration: none;
     padding-right: 35px;
     height: 32px;
     line-height: 34px;
     font-family: Helvetica, Arial, sans-serif;
     text-transform: uppercase;
     font-weight: 700;
     color: #fff;
   }
   @media screen and (min-width: 40em) {
     .btnToggleGrid {
       top: 31px;
       right: 31px;
     }
   }
   .btnToggleGrid:hover {
     color: #fff;
   }
   .btnToggleGrid:active {
     color: #f00;
   }
   
   .double-grid {
     background-position-y: -32px;
   }
   
   .grid-off {
     background-position-y: -64px;
   }
   
   aside {
     display: block;
   }
   
   /* Defaults
      ========================================================================== */
   @media screen and (min-width: 40em) {
     body,
     html {
       margin: 0;
       width: 100%;
       max-width: none;
     }
   }
   
   html {
     box-sizing: border-box;
     font-size: 16px;
     font-size: 100%;
     font-family: Merriweather, Georgia, serif;
     color: #222;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
   }
   @media screen and (min-width: 40em) {
     html {
       font-size: 18px;
       font-size: 1.125rem;
     }
   }
   
   * {
     line-height: 26px;
     line-height: 1.625rem;
     margin: 0px 0px 26px;
     margin: 0rem 0rem 1.625rem;
   }
   @media screen and (min-width: 40em) {
     * {
       line-height: 31px;
       line-height: 1.722222222222222rem;
       margin-bottom: 31px;
       margin-bottom: 1.722222222222222rem;
       max-width: 630px;
       max-width: 35rem;
       margin-left: auto;
       margin-right: auto;
     }
   }
   
   *,
   *::before,
   *::after {
     box-sizing: inherit;
   }
   
   body {
     margin: 0;
   }
   
   footer {
     display: block;
   }
   body > footer {
     margin: 0 auto;
     width: 80%;
   }
   
   header {
     display: block;
   }
   
   main {
     display: block;
   }
   
   section {
     display: block;
   }
   
   /* Links
      ========================================================================== */
   a {
     background: transparent;
     color: #222;
     transition: all .3s;
   }
   a:active, a:hover {
     outline: 0;
   }
   a:hover {
     color: #222;
   }
   a:visited {
     color: #888;
   }
   a:visited:hover {
     color: #222;
   }
   a:active {
     color: #f00;
   }
   
   article {
     display: block;
     margin: 0 auto;
     /* width: 80%; */
   }
   @media screen and (min-width: 40em) {
     article {
       max-width: 945px;
       max-width: 52.5rem;
     }
   }
   
   audio {
     display: inline-block;
     vertical-align: baseline;
   }
   audio:not([controls]) {
     display: none;
     height: 0;
   }
   
   canvas {
     display: inline-block;
     vertical-align: baseline;
   }
   
   pre {
     overflow: auto;
   }
   
   code,
   kbd,
   pre,
   samp {
     font-family: monospace, monospace;
   }
   
   code {
     padding: 26px;
     padding: 1.625rem;
     display: block;
   }
   @media screen and (min-width: 40em) {
     code {
       padding: 31px;
       padding: 1.722222222222222rem;
     }
   }
   
   details {
     display: block;
   }
   
   summary {
     display: block;
   }
   
   figcaption {
     line-height: 26px;
     line-height: 1.625rem;
     color: #222;
     display: block;
     font-size: .8125rem;
     font-style: italic;
     margin-bottom: 0;
     text-align: center;
   }
   @media screen and (min-width: 40em) {
     figcaption {
       line-height: 31px;
       line-height: 1.722222222222222rem;
       margin-bottom: 0;
     }
   }
   
   figure {
     display: block;
   }
   
   @media screen and (min-width: 40em) {
     figure.floatLeft,
     figure.floatRight {
       max-width: 315px;
       max-width: 17.5rem;
       padding: 0px 31px;
       padding: 0rem 1.722222222222222rem;
     }
   }
   @media screen and (min-width: 40em) {
     figure.floatLeft blockquote,
     figure.floatRight blockquote {
       padding: 0px;
       padding: 0rem;
       text-align: left;
     }
   }
   @media screen and (min-width: 40em) {
     figure.floatLeft blockquote p,
     figure.floatRight blockquote p {
       font-size: 19.2px;
       font-size: 1.2rem;
       line-height: 31px;
       line-height: 1.722222222222222rem;
     }
   }
   
   /* Headings
      ========================================================================== */
   h1 {
     font-size: 40px;
     font-size: 2.5rem;
     line-height: 52px;
     line-height: 3.25rem;
     margin-top: 104px;
     margin-top: 6.5rem;
     margin-bottom: 26px;
     margin-bottom: 1.625rem;
   }
   
   h2 {
     font-size: 27px;
     font-size: 1.6875rem;
     line-height: 39px;
     line-height: 2.4375rem;
     margin-top: 65px;
     margin-top: 4.0625rem;
     margin-bottom: 13px;
     margin-bottom: 0.8125rem;
   }
   
   h3 {
     font-size: 22px;
     font-size: 1.375rem;
     line-height: 26px;
     line-height: 1.625rem;
     margin-top: 52px;
     margin-top: 3.25rem;
     margin-bottom: 13px;
     margin-bottom: 0.8125rem;
   }
   
   h4 {
     font-size: 19.2px;
     font-size: 1.2rem;
     line-height: 26px;
     line-height: 1.625rem;
     margin-top: 39px;
     margin-top: 2.4375rem;
     margin-bottom: 13px;
     margin-bottom: 0.8125rem;
   }
   
   h5 {
     font-size: 16px;
     font-size: 1rem;
     line-height: 26px;
     line-height: 1.625rem;
     margin-top: 65px;
     margin-top: 4.0625rem;
     margin-bottom: 13px;
     margin-bottom: 0.8125rem;
   }
   
   h6 {
     font-size: 16px;
     font-size: 1rem;
     line-height: 26px;
     line-height: 1.625rem;
     margin-top: 65px;
     margin-top: 4.0625rem;
     margin-bottom: 13px;
     margin-bottom: 0.8125rem;
   }
   
   @media screen and (min-width: 40em) {
     h1 {
       font-size: 40px;
       font-size: 2.5rem;
       line-height: 62px;
       line-height: 3.444444444444445rem;
       margin-top: 124px;
       margin-top: 6.888888888888889rem;
       margin-bottom: 31px;
       margin-bottom: 1.722222222222222rem;
     }
   
     h2 {
       font-size: 27px;
       font-size: 1.6875rem;
       line-height: 46.5px;
       line-height: 2.583333333333334rem;
       margin-top: 77.5px;
       margin-top: 4.305555555555556rem;
       margin-bottom: 15.5px;
       margin-bottom: 0.861111111111111rem;
     }
   
     h3 {
       font-size: 22px;
       font-size: 1.375rem;
       line-height: 31px;
       line-height: 1.722222222222222rem;
       margin-top: 62px;
       margin-top: 3.444444444444445rem;
       margin-bottom: 15.5px;
       margin-bottom: 0.861111111111111rem;
     }
   
     h4 {
       font-size: 19.2px;
       font-size: 1.2rem;
       line-height: 31px;
       line-height: 1.722222222222222rem;
       margin-top: 46.5px;
       margin-top: 2.583333333333334rem;
       margin-bottom: 15.5px;
       margin-bottom: 0.861111111111111rem;
     }
   
     h5 {
       font-size: 16px;
       font-size: 1rem;
       line-height: 31px;
       line-height: 1.722222222222222rem;
       margin-top: 77.5px;
       margin-top: 4.305555555555556rem;
       margin-bottom: 15.5px;
       margin-bottom: 0.861111111111111rem;
     }
   
     h6 {
       font-size: 16px;
       font-size: 1rem;
       line-height: 31px;
       line-height: 1.722222222222222rem;
       margin-top: 77.5px;
       margin-top: 4.305555555555556rem;
       margin-bottom: 15.5px;
       margin-bottom: 0.861111111111111rem;
     }
   }
   h1 + h2 {
     margin-top: 26px;
     margin-top: 1.625rem;
   }
   @media screen and (min-width: 40em) {
     h1 + h2 {
       margin-top: 31px;
       margin-top: 1.722222222222222rem;
     }
   }
   
   h2 + h3,
   h3 + h4,
   h4 + h5 {
     margin-top: 13px;
     margin-top: 0.8125rem;
   }
   @media screen and (min-width: 40em) {
     h2 + h3,
     h3 + h4,
     h4 + h5 {
       margin-top: 15.5px;
       margin-top: 0.861111111111111rem;
     }
   }
   
   h5 + h6 {
     margin-top: -13px;
     margin-top: -0.8125rem;
   }
   @media screen and (min-width: 40em) {
     h5 + h6 {
       margin-top: -15.5px;
       margin-top: -0.861111111111111rem;
     }
   }
   
   h6 {
     font-style: italic;
     font-weight: normal;
   }
   
   hgroup {
     display: block;
   }
   
   hr {
     margin-top: 52px;
     margin-top: 3.25rem;
     margin-bottom: 52px;
     margin-bottom: 3.25rem;
     box-sizing: content-box;
     border: 0;
     color: #222;
     display: block;
     height: 26px;
     height: 1.625rem;
     margin-right: auto;
     margin-left: auto;
     background-size: 100% 26px;
     background-size: 100% 1.625rem;
     background-image: linear-gradient(to bottom, transparent 1px, transparent 11px, #222 11px, #222 15px, transparent 15px, transparent 26px);
     width: 100px;
   }
   @media screen and (min-width: 40em) {
     hr {
       margin-top: 62px;
       margin-top: 3.444444444444445rem;
       margin-bottom: 62px;
       margin-bottom: 3.444444444444445rem;
       height: 31px;
       height: 1.722222222222222rem;
     }
   }
   @media screen and (min-width: 40em) {
     hr {
       background-size: 100% 31px;
       background-size: 100% 1.722222222222222rem;
       background-image: linear-gradient(to bottom, transparent 1px, transparent 13.5px, #222 13.5px, #222 17.5px, transparent 17.5px, transparent 31px);
     }
   }
   
   img {
     border: 0;
     max-width: 100%;
     display: block;
     margin: inherit auto;
   }
   
   svg:not(:root) {
     overflow: hidden;
   }
   
   ul li,
   ol li {
     margin-bottom: 0;
   }
   
   nav {
     display: block;
   }
   
   progress {
     display: inline-block;
     vertical-align: baseline;
   }
   
   blockquote {
     font-style: italic;
     padding-left: 1.4375rem;
   }
   @media screen and (min-width: 40em) {
     blockquote {
       padding-left: 2rem;
     }
   }
   
   cite {
     display: block;
     font-style: normal;
   }
   
   figure blockquote {
     padding: 26px 0px;
     padding: 1.625rem 0rem;
   }
   @media screen and (min-width: 40em) {
     figure blockquote {
       padding: 62px 0px 31px;
       padding: 3.444444444444445rem 0rem 1.722222222222222rem;
       text-align: center;
     }
   }
   figure blockquote p {
     font-size: 27px;
     font-size: 1.6875rem;
     line-height: 39px;
     line-height: 2.4375rem;
   }
   @media screen and (min-width: 40em) {
     figure blockquote p {
       font-size: 27px;
       font-size: 1.6875rem;
       line-height: 46.5px;
       line-height: 2.583333333333334rem;
     }
   }
   
   table {
     border-collapse: collapse;
     border-spacing: 0;
   }
   
   td,
   th {
     padding: 0;
   }
   
   [hidden],
   template {
     display: none;
   }
   
   br {
     margin-bottom: 0;
   }
   
   abbr {
     letter-spacing: 0.1em;
   }
   
   abbr[title] {
     border-bottom: 1px dotted;
   }
   
   b,
   strong {
     font-weight: bold;
   }
   
   dfn {
     font-style: italic;
   }
   
   em,
   i {
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
   
   mark {
     background: #ff0;
     color: #000;
   }
   
   small {
     line-height: 13px;
     line-height: 0.8125rem;
     font-size: 70%;
   }
   @media screen and (min-width: 40em) {
     small {
       line-height: 15.5px;
       line-height: 0.861111111111111rem;
     }
   }
   
   sub,
   sup {
     font-size: 75%;
     line-height: 0;
     position: relative;
     vertical-align: baseline;
   }
   
   sup {
     top: -0.5em;
   }
   
   sub {
     bottom: -0.25em;
   }
   
   /* Paragraph
   ========================================================================== */
   .attention-grabber {
     font-size: 19.2px;
     font-size: 1.2rem;
   }
   
   .alignLeft {
     text-align: left;
   }
   
   .alignCenter {
     text-align: center;
   }
   
   .alignRight {
     text-align: right;
   }
   
   .uppercase {
     letter-spacing: .1em;
     text-transform: uppercase;
   }
   
   video {
     display: inline-block;
     vertical-align: baseline;
   }
   
   /* TODOs:
    - some line heights produce margins with .5 results, seemingly breaking the gird (?),
    - add table and side comments elements,
    */
   
   /*# sourceMappingURL=gutenberg.css.map */