/*
Theme Name: Do The Green Thing
Theme URI: http://dothegreenthing.com/
Author: Pentagram
Author URI: http://pentagram.com/
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dothegreenthing

*/

/* box sizing */
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
/* typography */
@font-face {
    font-family: 'Tstar';
    src: url('assets/webfonts/t-star/TSTAR-RegularWeb.eot');
    src: url('assets/webfonts/t-star/TSTAR-RegularWeb.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Tstar';
    src: url('assets/webfonts/t-star/TSTAR-MediumWeb.eot');
    src: url('assets/webfonts/t-star/TSTAR-MediumWeb.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Freight Text Pro';
    src: url('assets/webfonts/freight-text-pro/FreigTexProMedWeb.eot');
    src: url('assets/webfonts/freight-text-pro/FreigTexProMedWeb.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
html {
    font-size: 8px;
    -webkit-font-smoothing: antialiased;
}
@media only screen and (min-width: 768px) {
	html {
        font-size: 10px;
    }
}
body {
    font-family: 'Tstar';
    font-size: 1.6rem;
    font-weight: 400;
}
h1, h2, h3, h4, h5 {
    margin: 0 0 0.5em 0;
}
h1 {
    font-size: 4.0rem;
    font-weight: 400;
}
@media only screen and (min-width: 768px) {
    h1 {
        font-size: 5.6rem;
    }
}
h2 {
    font-size: 3.0rem;
    font-weight: 400;
}
@media only screen and (min-width: 768px) {
    h2 {
        font-size: 4.8rem;
    }
}
h3 {
    font-size: 2.2rem;
    font-weight: 400;
}
@media only screen and (min-width: 768px) {
    h3 {
        font-size: 4.0rem;
    }
}
h4 {
    font-size: 2rem;
    font-weight: 400;
}
@media only screen and (min-width: 768px) {
    h4 {
        font-size: 3.0rem;
    }
}
h5 {
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.2;
}
@media only screen and (min-width: 768px) {
    h5 {
        font-size: 2.2rem;
    }
}
h5 b,
h5 strong {
    font-weight: 400;
}
p {
    margin-top: 0.5em;
}
.fontweight-bold {
    font-weight: 500;
}
.fontsize-small {
    font-size: 1.4rem;
    line-height: 1.8rem;
}
.fontsize-medium {
    font-size: 1.8rem;
    line-height: 2rem;
}
.texttransform-uppercase {
    text-transform: uppercase;
}
.fontfamily-freight {
    font-family: 'Freight Text Pro';
}

/* html */
html {
    min-height: 100%;
}

/* body */
body {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* pure css */
.pure-g [class *= "pure-u"] {
    font-family: 'Tstar';
}
.pure-g.padded {
    margin-right: -25px;
    margin-left: -25px;
}
.pure-g.padded > div {
    padding: 0 25px 0 25px;
    margin-bottom: 25px;
}
@media only screen and (min-width: 568px) {
    .pure-g.padded > div {
        margin-bottom: 50px;
    }
}
.pure-g.padded-small {
    margin-right: -15px;
    margin-left: -15px;
}
.pure-g.padded-small > div {
    padding: 0 15px 0 15px;
}

/* anchor */
a {
    position: relative;
    outline: none;
    border: 0;
    text-decoration: none;
    color: rgba(0, 0, 0, 1.0);
    -webkit-transition: color 300ms ease-out 0ms;
    -moz-transition: color 300ms ease-out 0ms;
    -ms-transition: color 300ms ease-out 0ms;
    -o-transition: color 300ms ease-out 0ms;
    transition: color 300ms ease-out 0ms;
}
a:hover .color-white,
a:hover .color-green {
    /*color: rgb(19, 168, 22);*/
    color: rgb(0, 0, 0);
}

/* figure and img */
figure {
    position: relative;
    margin: 0;
    padding: 0;
}
figure.overlay.green::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(36, 222, 40, 0.9);
    z-index: 1;
}
figure.overlay figcaption {
    position: relative;
}
@media (min-width: 1024px) {
    figure.overlay figcaption {
        position: absolute;
        bottom: 60px;
        right: 0;
        left: 0;
        padding: 0;
        z-index: 2;
    }
}
figure.overlay figcaption .box {
    position: relative;
    margin: 0 auto;
    padding: 0;
    max-width: 1040px;
}
figure.overlay figcaption .box > div {
    padding: 20px;
}
@media (min-width: 1024px) {
    figure.overlay figcaption .box > div {
        padding: 40px;
        max-width: 640px;
    }
}
.ri {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}
.lazy {
    opacity: 0;
    -webkit-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
.lazy.loaded {
    opacity: 1;
}

/* ul */
ul.stripped {
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.stripped li {
    padding: 5px 0;
}
ul.stripped.horizontal li {
    display: inline-block;
}
ul.stripped.horizontal li + li {
    margin-left: 10px;
}

/* blockquote */
blockquote {
    margin: 0;
    padding: 0;
}

/* clear float */
.group:after {
    content: "";
    display: table;
    clear: both;
}

/* wrappers */
.inner {
    position: relative;
    margin: 0 auto;
    padding: 0 2rem;
    max-width: 1080px;
}
.inner.narrow {
    max-width: 680px;
}

/* alignment */
.textalign-center {
    text-align: center;
}
.textalign-right {
    text-align: right;
}

/* margin */
.no-margintop {
    margin-top: 0;
}
.no-marginbottom {
    margin-bottom: 0;
}
.margintop-small {
    margin-top: 0.5em;
}
.marginbottom-small {
    margin-bottom: 0.5em;
}

/* padding */
.no-paddingtop {
    padding-top: 0 !important;
}
.no-paddingbottom {
    padding-bottom: 0 !important;
}
.paddingtop-small {
    padding-top: 0.5em !important;
}
.paddingbottom-small {
    padding-bottom: 0.5em !important;
}

/* colors */
.color-white {
    color: rgb(250, 250, 250);
    -webkit-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
.color-lightgrey {
    color: rgb(160, 160, 160);
    -webkit-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
.color-green {
    color: rgb(36, 222, 40);
    -webkit-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}

/* background colors */
.bgcolor-green {
    background-color: rgb(36, 222, 40);
}
.bgcolor-black {
    background-color: rgb(0, 0, 0);
}

/* borders */
.border-green {
    border: 1px solid rgb(36, 222, 40);
}
.border-green.medium {
    border: 4px solid rgb(36, 222, 40);
}
.border-green.large {
    border: 8px solid rgb(36, 222, 40);
}
.border-grey {
    border: 1px solid rgb(230, 230, 230);
}
.bordertop-green {
    border-top: 1px solid rgb(36, 222, 40);
}

/* spacer */
section.spacer {
    position: relative;
    height: 6rem;
}

/* section hero */
section.hero {}
section.hero.zoom figure img:hover {
    cursor: url(assets/images/general/plus-cursor.png) 25 25, auto;
}
section.hero h1 {
    position: relative;
    max-width: 640px;
    margin: 4rem auto 0 auto;
}
@media only screen and (min-width: 1080px) {
    section.hero h1 span.issue-number {
        position: absolute;
        top: -6.5rem;
        left: -200px;
        font-size: 14rem;
    }
}
section.hero .author {
    position: relative;
    max-width: 640px;
    margin: 1.5rem auto 0rem auto;
}
section.hero .byline {
    position: relative;
    max-width: 640px;
    margin: 1.5rem auto 4.0rem auto;
}


/* section hero-slideshow */
section.hero-slideshow {
    position: relative;
}
section.hero-slideshow .carousel-cell {
    width: 100%;
}
section.hero-slideshow .carousel-cell-image {
    opacity: 0;
    -webkit-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
section.hero-slideshow .carousel-cell-image.lazyloaded,
section.hero-slideshow .carousel-cell-image.lazyerror,
section.hero-slideshow .carousel-cell-image.flickity-lazyloaded,
section.hero-slideshow .carousel-cell-image.flickity-lazyerror {
    opacity: 1;
}
section.hero-slideshow .button-previous,
section.hero-slideshow .button-next {
    position: absolute;
    top: 50%;
    padding: 20px;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -ms-transform: translate3d(0, -50%, 0);
    -o-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 2;
    display: none;
}
@media (min-width: 1180px) {
    section.hero-slideshow .button-previous,
    section.hero-slideshow .button-next {
        display: block;
    }
}
section.hero-slideshow .button-previous {
    left: 0;
}
section.hero-slideshow .button-next {
    right: 0;
}
    
/* blogposts */
section.blogposts {
    position: relative;
    padding: 6rem 0 0 0;
}
section.blogposts .blogpost {
    padding-top: 3rem;
    margin-bottom: 6rem;
}
section.blogposts .blogpost .date {
    margin-bottom: 4rem;
}
section.blogposts .pagination {
    padding-top: 6rem;
    padding-bottom: 2rem;
}
section.blogposts .pagination .previous {
    display: block;
    height: 20px;
    padding-top: 3px;
    padding-left: 3rem;
    background-image: url(assets/images/general/arrow-left-20x20.svg);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 20 20;
}
section.blogposts .pagination .next {
    display: block;
    height: 20px;
    padding-top: 3px;
    padding-right: 3rem;
    background-image: url(assets/images/general/arrow-right-20x20.svg);
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 20 20;
    float: right;
}

/* grid frontpage */
section.masonry.frontpage {
    position: relative;
    padding: 6rem 0 0 0;
}
section.masonry.frontpage .grid .grid-sizer,
section.masonry.frontpage .grid .grid-item {
    float: left;
    width: 47%;
    margin-bottom: 6%;
}
@media (min-width: 568px) {
    section.masonry.frontpage .grid .grid-sizer,
    section.masonry.frontpage .grid .grid-item {
        width: 31%;
        margin-bottom: 3.5%;
    }
}
section.masonry.frontpage .grid .gutter-sizer {
    width: 6%;
}
@media (min-width: 568px) {
    section.masonry.frontpage .grid .gutter-sizer {
        width: 3.5%;
    }
}
section.masonry.frontpage .grid .grid-item.grid-item--width2 {
    width: 100%;
}
@media (min-width: 568px) {
    section.masonry.frontpage .grid .grid-item.grid-item--width2 {
        width: 65.5%;
    }
}

/* grid resources */
section.masonry.resources {
    position: relative;
    margin: 3rem 0;
}
@media (min-width: 1024px) {
    section.masonry.resources .grid .grid-item {
        max-height: 258px !important;
    }
}
section.masonry.resources .grid .grid-sizer,
section.masonry.resources .grid .grid-item {
    float: left;
    width: 47%;
    margin-bottom: 6%;
}
@media (min-width: 568px) {
    section.masonry.resources .grid .grid-sizer,
    section.masonry.resources .grid .grid-item {
        width: 17.6%;
        margin-bottom: 3%;
    }
}
section.masonry.resources .grid .gutter-sizer {
    width: 6%;
}
@media (min-width: 568px) {
    section.masonry.resources .grid .gutter-sizer {
        width: 3%;
    }
}
section.masonry.resources .grid .grid-item.grid-item--width2 {
    width: 100%;
}
@media (min-width: 568px) {
    section.masonry.resources .grid .grid-item.grid-item--width2 {
        width: 38.2%;
    }
}

/* grid searchresults */
section.masonry.searchresults {
    position: relative;
    margin: 3rem 0;
}
section.masonry.searchresults .grid {}
section.masonry.searchresults .grid .grid-sizer,
section.masonry.searchresults .grid .grid-item {
    float: left;
    width: 48%;
    margin-bottom: 2%;
}
section.masonry.searchresults .grid .gutter-sizer {
    width: 4%;
}

/* grid tumblr */
section.masonry.tumblr {
    position: relative;
    margin: 3rem 0;
}
section.masonry.tumblr .grid {
    opacity: 0;
    -webkit-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -moz-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -ms-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -o-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
}
section.masonry.tumblr .grid.show {
    opacity: 1;
}
section.masonry.tumblr .grid .grid-sizer,
section.masonry.tumblr .grid .grid-item {
    float: left;
    width: 48%;
    margin-bottom: 4%;
}
section.masonry.tumblr .grid .gutter-sizer {
    width: 4%;
}
section.masonry.tumblr .grid-item article {
    text-align: center;
    color: black;
    background-color: white;
}
section.masonry.tumblr .grid-item article small {
    position: absolute;
    right: 2rem;
    left: 2rem;
    bottom: 4rem;
    text-transform: uppercase;
    font-weight: 500;
    color: black;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -webkit-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -moz-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -moz-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -ms-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -ms-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -o-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -o-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
}
section.masonry.tumblr .grid-item article:hover small {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}
section.masonry.tumblr .grid-item article.green {
    color: white;
    background-color: rgba(36, 222, 40, 1.0);
}
section.masonry.tumblr .grid-item article.dropshadow {
    -webkit-box-shadow: 10px 10px 16px 0px rgba(122,122,122,0.75);
    -moz-box-shadow: 10px 10px 16px 0px rgba(122,122,122,0.75);
    box-shadow: 10px 10px 16px 0px rgba(122,122,122,0.75);
}
section.masonry.tumblr .grid-item article figure {
    margin: 0;
}
@media only screen and (min-width: 768px) {
    section.masonry.tumblr .grid-item article blockquote p {
        padding-right: 4rem;
        padding-left: 4rem;
    }
}
@media only screen and (min-width: 1024px) {
    section.masonry.tumblr .grid-item article blockquote p {
        padding-right: 8rem;
        padding-left: 8rem;
    }
}
@media only screen and (min-width: 768px) {
    section.masonry.tumblr .grid-item.grid-item--fullwidth {
        width: 100%;
    }
}

/* grid elements */
section.masonry .grid .grid-item .text {}
section.masonry .grid .grid-item .text.missionstatement a:hover .color-green {
    color: rgba(36, 222, 40, 1.0);
}
section.masonry .grid .grid-item .image {}
section.masonry .grid .grid-item .pagelink {}
section.masonry .grid .grid-item .signup  {}
section.masonry .grid .grid-item .signup form {}
section.masonry .grid .grid-item .signup form input {
    width: 100%;
    height: 100%;
    padding: 1rem;
    background-color: transparent;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    text-transform: uppercase;
    -webkit-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
section.masonry .grid .grid-item .signup form input[type=submit] {
    border: 1px solid rgb(36, 222, 40);
    background-color: rgb(36, 222, 40);
}
section.masonry .grid .grid-item .signup form input:hover,
section.masonry .grid .grid-item .signup form input:focus {
    background-color: rgb(36, 222, 40);
    border-color: rgb(36, 222, 40);
}
section.masonry .grid .grid-item .instagram a {
    position: relative;
    display: block;
}
section.masonry .grid .grid-item a figure:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(36, 222, 40);
    opacity: 0;    
    -webkit-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);    
    z-index: 1;
}
section.masonry .grid .grid-item a:hover figure:first-child::after {
    opacity: 0.85;
}
section.masonry .grid .grid-item .instagram figure:last-child {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 8rem;
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    -moz-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    -o-transform: translate3d(-50%, -50%, 0) rotate(0deg);
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
    z-index: 2;
}
section.masonry .grid .grid-item .videoembed {}
section.masonry .grid .grid-item .twitter {
    padding: 4rem;
    background-color: rgb(36, 222, 40);
}
section.masonry .grid .grid-item .twitter figure img {
    max-width: 6rem;
    margin: 0 auto;
}
section.masonry .grid .grid-item .twitter h5 a {
    color: rgb(250, 250, 250);
    word-break: break-word;
}
section.masonry .grid .grid-item .twitter h5 a .u-hiddenVisually {
    display: none;
}
section.masonry .grid .grid-item .quote {
    padding: 4rem;
    background-color: rgb(36, 222, 40);
}
section.masonry .grid .grid-item .quote p {
    margin: 0;
}
section.masonry .grid .grid-item .article {
    padding-top: 1rem;
}

/* search */
section.search {
    margin-top: 2rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) {
    section.search {
        margin-top: 0;
    }
}
section.search form input {
    width: 100%;
    height: 100%;
    padding: 1rem;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    text-transform: uppercase;
    -webkit-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
section.search form input:hover,
section.search form input:focus {
    background-color: rgb(36, 222, 40);
    border-color: rgb(36, 222, 40);
}
section.search form input[type=submit] {
    border: 0;
    border: 1px solid rgb(36, 222, 40);
    background-image: url(assets/images/general/search-28x28.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
}

/* most popular */
section.mostpopular {
    margin-bottom: 6rem;
}
section.mostpopular article {
    margin-bottom: 3rem;
    padding-top: 2rem;
}

/* signup */
section.signup {
    position: relative;
    margin-bottom: 6rem;
}
section.signup .box {
    position: relative;
    padding: 3rem;
}
@media only screen and (min-width: 568px) {
    section.signup .box.square {
        height: 0;
        padding: 0 0 100% 0;
    }
}
@media only screen and (min-width: 568px) {
    section.signup .box > div {
        position: absolute;
        top: 50%;
        right: 20px;
        left: 20px;
        -webkit-transform: translate3d(0, -50%, 0);
        -moz-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
        -o-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}
section.signup .box div figure img {
    margin: 0 auto;
    max-width: 4rem;
}
@media only screen and (min-width: 568px) {
    section.signup .box div figure img {
        max-width: 6rem;
    }
}
section.signup form input {
    width: 100%;
    height: 100%;
    padding: 1rem;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
    text-transform: uppercase;
    -webkit-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: background-color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
section.signup form input:hover,
section.signup form input:focus {
    background-color: rgb(36, 222, 40);
    border-color: rgb(36, 222, 40);
}
section.signup form input[type=submit] {
    border: 0;
    border: 1px solid rgb(36, 222, 40);
}

/* twitter */
section.twitter {
    position: relative;
}
section.twitter .box {
    padding: 4rem;
}
section.twitter .box figure img {
    margin: 0 auto;
    max-width: 4rem;    
}
@media only screen and (min-width: 568px) {
    section.twitter .box figure img {
        max-width: 6rem;
    }
}
section.twitter .box h5 a {
    color: rgb(250, 250, 250);
    word-break: break-word;
}
section.twitter .box h5 a .u-hiddenVisually {
    display: none;
}

/* modules */
section.modules {
    position: relative;
}
section.modules article {}
section.modules article .image {
    position: relative;
    margin: 6rem 0;
}
section.modules article .image figcaption {
    margin: 2rem auto;
}
section.modules article .text {
    margin: 2rem auto;
    max-width: 640px;
    font-family: 'Freight Text Pro';
    font-size: 1.9rem;
    line-height: 3.0rem;
}
section.modules article .text p {}
section.modules article .text a {
    background-image: url(assets/images/general/square.svg);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: 20px;
    -webkit-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    -moz-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    -ms-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    -o-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
}
section.modules article .text a:hover {
    background-size: 2px;
}
section.modules article .subheader {
    margin: 4rem auto 0 auto;
    max-width: 640px;
}
section.modules article .videoembed {
    margin: 4rem auto;
}
section.modules article .videoembed .caption {
    margin: 2rem auto;
}
section.modules article .videoembed .caption a {
    color: rgb(36, 222, 40);
    text-decoration: underline;
}
section.modules article .blockquote {
    margin: 2rem auto 3rem auto;
    max-width: 468px;
}
section.modules article .blockquote.large {
    margin: 4rem auto 6rem auto;
    max-width: 860px;
}
section.modules article .blockquote .quote {
    font-size: 1.9rem;
    font-family: 'Freight Text Pro';
    line-height: 3.0rem;
}
section.modules article .blockquote.large .quote {
    font-size: 3rem;
    font-family: 'Tstar';    
    line-height: 4.0rem;
}
section.modules article .blockquote .citation {
    margin: 0 auto;
    max-width: 468px;
    font-style: italic;
}
section.modules article .pullout {
    position: relative;
    margin: 0 auto 2rem auto;
    width: 100%;
    max-width: 180px;
}
@media (min-width: 1080px) {
    section.modules article .pullout.left {
        float: left;
    }
    section.modules article .pullout.right {
        float: right;
    }
    section.modules article .push-none {
        margin-top: 0.5rem;
    }
    section.modules article .push-up-one {
        margin-top: -4.5rem;
    }
    section.modules article .push-up-two {
        margin-top: -7.5rem;
    }
    section.modules article .push-up-three {
        margin-top: -10.5rem;
    }
    section.modules article .push-up-four {
        margin-top: -13.5rem;
    }
    section.modules article .push-down-one {
        margin-top: 3.7rem;
    }
    section.modules article .push-down-two {
        margin-top: 6.7rem;
    }
    section.modules article .push-down-three {
        margin-top: 9.7rem;
    }
    section.modules article .push-down-four {
        margin-top: 12.7rem;
    }
}
section.modules article .pullout img,
section.modules article .pullout h4 {
    margin-bottom: 0.5rem;
}
section.modules article .pullout p {
    font-size: 1.4rem;
    line-height: 1.8rem;
    margin-top: 0;
}
section.modules article .pullout p a {
    color: rgb(36, 222, 40);
    text-decoration: underline;
}
section.modules article .slideshow {
    position: relative;
    margin: 6rem 0;
}
section.modules article .slideshow .carousel {
    opacity: 0;
    -webkit-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
section.modules article .slideshow .carousel.flickity-enabled {
    opacity: 1;
}
section.modules article .slideshow .carousel .carousel-cell {
    width: 100%;
}
section.modules article .slideshow .carousel .carousel-cell:not(:first-child) .carousel-cell-image {
    display: none;
}
section.modules article .slideshow .carousel.flickity-enabled .carousel-cell:not(:first-child) .carousel-cell-image {
    display: block;
}
section.modules article .slideshow .buttons {
    position: relative;
    margin: 2rem auto;
    display: none;
}
@media (min-width: 1180px) {
    section.modules article .slideshow .buttons {
        display: block;
    }
}
section.modules article .slideshow .buttons .button-previous {}
section.modules article .slideshow .buttons .button-next {
    float: right;
}
section.modules article .comparison {
    position: relative;
    margin: 6rem auto;
}
section.modules article .comparison figure .comparison-slider {
    position: relative;
    overflow: hidden;
}
section.modules article .comparison figure .comparison-slider img {
    width: 100%;
    height: auto;
    display: block;
}
section.modules article .comparison figure .comparison-slider .resize {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    overflow: hidden;
}
section.modules article .comparison figure .comparison-slider .handle {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: rgb(36, 222, 40);
    cursor: ew-resize;
}
section.modules article .comparison figure .comparison-slider .handle:after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "Drag";
    width: 4.4rem;
    height: 4.4rem;
    font-size: 1.2rem;
    line-height: 4.8rem;
    color: white;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50%;
    background-color:  rgb(36, 222, 40);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
section.modules article .comparison figure figcaption {
    margin: 2rem auto;
}
section.modules article .comparison figure figcaption a {
    color: rgb(36, 222, 40);
    text-decoration: underline;
}

section.modules article div.masonry {
    padding: 2rem 0 0 0;
}
section.modules article div.masonry .grid {
    opacity: 0;
    -webkit-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -moz-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -ms-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -o-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
}
section.modules article div.masonry .grid.show {
    opacity: 1;
}
section.modules article div.masonry .grid-sizer,
section.modules article div.masonry .grid-item {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    section.modules article div.masonry .grid-sizer,
    section.modules article div.masonry .grid-item {
        width: 48%;
    }
}
section.modules article div.masonry .gutter-sizer {
    width: 4rem;
}
@media only screen and (min-width: 768px) {
    section.modules article div.masonry .gutter-sizer {
        width: 4rem;
    }
}
section.modules article div.masonry .grid-item {
    float: left;
    margin-bottom: 4rem;
}
section.modules article div.masonry .grid-item article {
    text-align: center;
    color: black;
    background-color: white;
}
section.modules article div.masonry .grid-item article small {
    position: absolute;
    right: 2rem;
    left: 2rem;
    bottom: 4rem;
    text-transform: uppercase;
    font-weight: 500;
    color: black;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    -webkit-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -webkit-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -moz-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -moz-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -ms-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -ms-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -o-transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, -o-transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    transition: opacity 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms, transform 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
}
section.modules article div.masonry .grid-item article:hover small {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}
section.modules article div.masonry .grid-item article.green {
    color: white;
    background-color: rgba(36, 222, 40, 1.0);
}
section.modules article div.masonry .grid-item article.dropshadow {
    -webkit-box-shadow: 10px 10px 16px 0px rgba(122,122,122,0.75);
    -moz-box-shadow: 10px 10px 16px 0px rgba(122,122,122,0.75);
    box-shadow: 10px 10px 16px 0px rgba(122,122,122,0.75);
}
section.modules article div.masonry .grid-item article figure {
    margin: 0;
}
@media only screen and (min-width: 768px) {
    section.modules article div.masonry .grid-item article blockquote p {
        padding-right: 4rem;
        padding-left: 4rem;
    }
}
@media only screen and (min-width: 1024px) {
    section.modules article div.masonry .grid-item article blockquote p {
        padding-right: 8rem;
        padding-left: 8rem;
    }
}
@media only screen and (min-width: 768px) {
    section.modules article div.masonry .grid-item--fullwidth {
        width: 100%;
    }
}

/* section sharing */
section.sharing {
    margin: 4rem auto;
    font-family: 'Freight Text Pro';
    font-size: 1.9rem;
    line-height: 3.0rem;
}

/* section page-top */
section.page-top {
    padding: 6rem 0 0 0;
}

/* section page-decription */
section.page-description {
    padding: 6rem 0;
}
section.page-description .box {
    padding: 6rem;
}
.back-button img {
    margin-right: 5px;
    vertical-align: bottom;
}
.download-button img {
    margin-left: 5px;
    vertical-align: middle;
}

/* section page-taxonomies */
section.page-taxonomies {}
section.page-taxonomies a.selected {
    color: black;
}

/* section page-content */
section.page-content {}
section.page-content h1,
section.page-content h2,
section.page-content h3,
section.page-content h4,
section.page-content h5 {
    color: rgb(36, 222, 40);
}
section.page-content h1 {
    padding: 6rem 0 0 0;
}
section.page-content h5 {
    margin: 4.5rem 0 0 0;
}
section.page-content .byline {
    font-size: 1.6rem;
    margin: 1.5rem 0 4.0rem 0;
}
section.page-content p,
section.page-content ol,
section.page-content ul {
    font-family: 'Freight Text Pro';
    font-size: 1.9rem;
    line-height: 2.8rem;
    color: rgba(0, 0, 0, 1.0);
    margin-top: 2rem;
    margin-bottom: 2rem;
}
section.page-content p a,
section.page-content ul:not(.social) li a,
.remodal a {
    background-image: url(assets/images/general/square.svg);
    background-repeat: repeat-x;
    background-position: bottom center;
    background-size: 20px;
    -webkit-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    -moz-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    -ms-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    -o-transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
    transition: background-size 300ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 50ms, color 300ms ease-out 0ms;
}
section.page-content p a:hover,
section.page-content ul li a:hover,
.remodal a:hover {
    background-size: 2px;
}
section.page-content p img {
    width: 100%;
    height: auto;
    display: block;
}

/* section page-bottom */
section.page-bottom a {
    display: block;
}
section.page-bottom .box {
    position: relative;
    padding: 25px;
    text-align: center;
}
@media only screen and (min-width: 768px) {
    section.page-bottom .box {
        padding: 50px;
    }
}
@media only screen and (min-width: 568px) {
    section.page-bottom .box.square {
        height: 0;
        padding: 0 0 100% 0;
    }
}
section.page-bottom .box.equalheight {
    height: 100%;
}
section.page-bottom .box h3 {
    margin: 0;
    -webkit-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
@media only screen and (min-width: 568px) {
    section.page-bottom .box h3 {
        position: absolute;
        top: 50%;
        right: 40px;
        left: 40px;
        -webkit-transform: translate3d(0, -50%, 0);
        -moz-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
        -o-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

/* divider */
section.divider {
    padding: 6rem 0 10rem 0;
    text-align: center;
}
section.divider figure {
    position: relative;
    height: 80px;
    margin: 0;
    padding: 0;
}
section.divider figure img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    -webkit-transform: translate3d(-40px, -40px, 0) rotate(0deg);
    -moz-transform: translate3d(-40px, -40px, 0) rotate(0deg);
    -ms-transform: translate3d(-40px, -40px, 0) rotate(0deg);
    -o-transform: translate3d(-40px, -40px, 0) rotate(0deg);
    transform: translate3d(-40px, -40px, 0) rotate(0deg);
    -webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	-ms-transform-origin: center center;
	-o-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: rotation 5s linear infinite;
    -moz-animation: rotation 5s linear infinite;
    -o-animation: rotation 5s linear infinite;
    animation: rotation 5s linear infinite;
}
section.divider hr {
    padding: 6rem 0 0 0;
    border: 0;
    height: 1px;
    background-color: rgb(248, 248, 246);
}

@-webkit-keyframes rotation {
    from { -webkit-transform: translate3d(-40px, -40px, 0) rotate(0deg); }
    to { -webkit-transform: translate3d(-40px, -40px, 0) rotate(360deg); }
}
@-moz-keyframes rotation {
    from { -moz-transform: translate3d(-40px, -40px, 0) rotate(0deg); }
    to { -moz-transform: translate3d(-40px, -40px, 0) rotate(360deg); }
}
@-o-keyframes rotation {
    from { -o-transform: translate3d(-40px, -40px, 0) rotate(0deg); }
    to { -o-transform: translate3d(-40px, -40px, 0) rotate(360deg); }
}
@keyframes rotation {
    from { transform: translate3d(-40px, -40px, 0) rotate(0deg); }
    to { transform: translate3d(-40px, -40px, 0) rotate(360deg); }
}

/* section.issues */
section.issues {
    padding: 6rem 0;
}
section.issues section.issue + section.issue {
    margin-top: 4rem;
}
section.issues section.issue a img {
    -webkit-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
section.issues section.issue a:hover img {
    opacity: 0.1;
}
section.issues section.issue h4 {
    position: relative;
    max-width: 640px;
    margin: 2rem auto 0 auto;
    line-height: 3rem;
}
@media only screen and (min-width: 768px) {
    section.issues section.issue h4 {
        padding-left: 10rem;
        max-width: 62%;
    }
}
@media only screen and (min-width: 768px) {
    section.issues section.issue h4 span.issue-number {
        position: absolute;
        top: -1.0rem;
        left: 0;
        width: 9rem;
        font-size: 7rem;
    }
}
section.issues section.issue .byline {
    max-width: 640px;
    font-size: 1.6rem;
    margin: 1.5rem auto 0 auto;
}
@media only screen and (min-width: 768px) {
    section.issues section.issue .byline {
        max-width: 62%;
    }
}

/* section.campaigns */
section.campaigns {
    padding: 6rem 0;
}
section.campaigns section.campaign + section.campaign {
    margin-top: 4rem;
}

section.campaigns section.campaign a figure:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(36, 222, 40);
    opacity: 0;    
    -webkit-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);    
    z-index: 1;
}
section.campaigns section.campaign a:hover figure:first-child::after {
    opacity: 0.9;
}
section.campaigns section.campaign h4 {
    position: relative;
    max-width: 640px;
    margin: 2rem auto 0 auto;
    line-height: 3rem;
}
@media only screen and (min-width: 768px) {
    section.campaigns section.campaign h4 {
        max-width: 62%;
    }
}
section.campaigns section.campaign .byline {
    max-width: 640px;
    font-size: 1.6rem;
    margin: 1.5rem auto 0 auto;
}
@media only screen and (min-width: 768px) {
    section.campaigns section.campaign .byline {
        max-width: 62%;
    }
}

/* loader */
section.loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(36, 222, 40, 0.95);
    opacity: 1;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    z-index: 9999;
    
}
body.ready section.loader {
    opacity: 0;
    -webkit-transition: opacity 500ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 500ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 500ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: opacity 500ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 500ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
section.loader::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    background-color: white;
    background-image: url(assets/images/general/feet-300x300.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 300px;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}

/* sitesearch */
section.sitesearch {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(36, 222, 40);
    z-index: 5;
    display: none;
}
section.sitesearch form {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    padding: 30px;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}
section.sitesearch form fieldset {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0;
    border: 0;
}
section.sitesearch form fieldset input {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 10px 40px 10px 0;
    border: 0;
    border-bottom: 1px solid white;
    background-color: transparent;
    color: white;
    font-size: 2em;
    outline: none;
}
section.sitesearch form fieldset input::-webkit-input-placeholder {
    color: rgb(250, 250, 250);
    opacity: 1;
}
section.sitesearch form fieldset input::-moz-placeholder {
    color: rgb(250, 250, 250);
    opacity: 1;
}
section.sitesearch form fieldset input:-ms-input-placeholder {
    color: rgb(250, 250, 250);
    opacity: 1;
}
section.sitesearch form fieldset input:-moz-placeholder {
    color: rgb(250, 250, 250);
    opacity: 1;
}
section.sitesearch form fieldset .close {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -ms-transform: translate3d(0, -50%, 0);
    -o-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
}

/* header */
header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 80px;
    background-color: rgb(248, 248, 246);
    -webkit-transition: -webkit-transform 300ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: -moz-transform 300ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: -ms-transform 300ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: -o-transform 300ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: transform 300ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    z-index: 2;
}
@media only screen and (min-width: 1024px) {
    header {
        height: 160px;
    }
}
header.header-scrolling {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
}
/* primary and social */
#primary,
#social {
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -ms-transform: translate3d(0, -50%, 0);
    -o-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 3; /* above logo */
    display: none;
}
@media only screen and (min-width: 1024px) {
    #primary,
    #social {
        display: block;
    }
}
/* primary */
#primary {
    left: 2rem;
}
#primary ul li a {
    position: relative;
    display: block;
}
#primary ul li a:after {
    position: absolute;
    bottom: -12px;
    left: -10%;
    content: '';
    width: 120%;
    height: 12px;
    background-image: url(assets/images/general/primary-current.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    -webkit-transition: opacity 300ms ease-out 0ms;
    -moz-transition: opacity 300ms ease-out 0ms;
    -ms-transition: opacity 300ms ease-out 0ms;
    -o-transition: opacity 300ms ease-out 0ms;
    transition: opacity 300ms ease-out 0ms;
}
#primary ul li a:hover:after,
#primary ul li.current-menu-item a:after {
    opacity: 1;
}
/* logo */
.logo {
    position: relative;
    margin: 0 auto;
    padding: 0;
    max-width: 180px;
}
@media only screen and (min-width: 1024px) {
    .logo {
        max-width: 360px;
    }
}
.logo .base {
    position: relative;
    margin: 0 auto;
    z-index: 3;
}
.logo .icons {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-perspective: 200px;
    -moz-perspective: 200px;
    perspective: 200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
}
.logo .icons img {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: translate3d(-50%, -50%, -50px);
    -moz-transform: translate3d(-50%, -50%, -50px);
    transform: translate3d(-50%, -50%, -50px);
    -webkit-transition: opacity 250ms ease-in-out, -webkit-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms ease-in-out, -moz-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms ease-in-out, -ms-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: opacity 250ms ease-in-out, -o-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms ease-in-out, transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.logo .icons img.active {
    opacity: 1;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
}
/* social */
#social {
    right: 2rem;
}
#social ul li:last-child {
    margin-left: 20px;
}
#social ul li a {
    display: block;
}
#social ul li a:before {
    position: absolute;
    top: -10px;
    left: -10px;
    content: '';
    width: 40px;
    height: 40px;
    background-image: url(assets/images/general/scribble.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-transition: opacity 500ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -moz-transition: opacity 500ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -ms-transition: opacity 500ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    -o-transition: opacity 500ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    transition: opacity 500ms cubic-bezier(0.120, 0.680, 0.220, 0.815) 0ms;
    opacity: 0;
    z-index: 2;
}
#social ul li a:hover:before {
    opacity: 1;
}
#social ul li a img {
    max-width: 15px;
    z-index: 3;
}
#mobile {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgb(255, 255, 255);
    z-index: 4;    
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    opacity: 0;
    -webkit-transition: opacity 250ms ease-in-out, -webkit-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: opacity 250ms ease-in-out, -moz-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: opacity 250ms ease-in-out, -ms-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: opacity 250ms ease-in-out, -o-transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: opacity 250ms ease-in-out, transform 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
#mobile.show {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
#mobile ul:first-child {
    margin: 6em 0 1em 0;
}
#burger {
    position: absolute;
    top: 50%;
    right: 2rem;
    -webkit-transform: translate3d(0, -50%, 0);
    -moz-transform: translate3d(0, -50%, 0);
    -ms-transform: translate3d(0, -50%, 0);
    -o-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
    z-index: 4; /* above logo */
}
@media only screen and (min-width: 1024px) {
    #burger {
        display: none;
    }
}

/* main */
main {
    margin-top: 80px;
}
@media only screen and (min-width: 1024px) {
    main {
        margin-top: 160px;
    }
}

/* footer */
footer {
    position: relative;
    padding: 3em 0;
    background-color: rgb(248, 248, 246);
}
#secondary ul li a {
    color: rgb(160, 160, 160);
    -webkit-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -moz-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -ms-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    -o-transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
    transition: color 250ms cubic-bezier(0.410, 0.870, 0.410, 1.000);
}
#contact {
    margin-bottom: 1rem;
}
#contact ul li a img {
    width: 100%;
    height: auto;
    max-width: 25px;
    margin-right: 10px;
    vertical-align: bottom;
}