/*CARD */

.card {

position: relative;
float: left;
width: 29%;
height: 0;
margin: 2%;
padding-bottom: 20%;

}

.card__container {

position: fixed;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;

}

.card__container–closed {

position: absolute;
overflow: hidden;

}

.card__image {

position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;

}

.card__container–closed .card__image {

position: relative;
cursor: pointer;

} /* Fix IE */

.card__container–fix-image .card__image {

position: fixed;

}

.card__content {

position: relative;
width: 100%;
max-width: 800px;
height: auto;
margin: 400px auto 60px;
padding: 30px 40px 22px;
background: #fff;

}

.card__container–closed .card__content {

margin-top: 0;
padding: 0 16px;
pointer-events: none;
background: transparent;

}

.card__caption {

font-size: 2em;
max-width: 800px;
margin: 0 auto;
padding: 35px 30px 0px;

}

.card__container–closed .card__caption {

font-size: 1em;
max-width: auto;
padding: 10px 10px 25px;
-webkit-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);

}

.card__title {

font-size: 1.5em;
line-height: 1;
margin: 5px 0 0 0;
color: #3b393d;

}

.card__container–closed .card__title {

color: #fff;

}

.card__subtitle {

font-size: .95em;
line-height: 1;
margin: 5px 0 0;
color: #777778;

}

.card__container–closed .card__subtitle {

color: #f5f5f5;

}

.card__copy {

font-size: 1.25em;
max-width: 900px;
margin: 0 auto;
padding: 25px 30px 100px;
color: #3b393d;

}

.card__copy p:first-of-type {

font-size: 1.5em;
padding: 0 0 1em 0;

}

.card__btn-close {

font-size: 18px;
position: absolute;
top: 0;
right: 0;
padding: 36px;
cursor: pointer;

}

.card__container–closed .card__btn-close {

display: none;

}

.meta {

font-size: .85em;
display: -webkit-flex;
display: flex;
padding: 0 0 35px 0;

-webkit-align-items: center;
align-items: center;

}

.meta__avatar {

border-radius: 50%;
height: 50px;
width: 50px;

}

.meta__author {

font-weight: bold;
padding: 0 15px;

}

.meta__date {

margin: 0 0 0 auto;

}

@media only screen and (max-width: 980px) {

.card {
        width: 46%;
        padding-bottom: 32.2%;
}
.card__content {
        margin-bottom: 0;
        padding-right: 20px;
        padding-left: 20px;
}

}

@media only screen and (max-width: 580px) {

.card {
        width: 96%;
        padding-bottom: 67.2%;
}

}

@media only screen and (max-width: 400px) {

.card__caption {
        font-size: 1.25em;
        padding: 35px 0px 0px;
}
.meta {
        padding: 0 0 25px 0;
}
.card__copy {
        font-size: 90%;
        padding: 25px 0px 100px;
}

}

*, *:after, *:before {

-webkit-box-sizing: border-box;
box-sizing: border-box;

}

.clearfix:before, .clearfix:after {

content: '';
display: table;

}

.clearfix:after {

clear: both;

}

body {

font-family: Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
line-height: 1.5;
color: #3b393d;
background: #f0f0f0;
background-size: cover;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow: hidden;
overflow-y: scroll;

}

body.body–hidden {

overflow: hidden;

}

body.body–hidden .header {

opacity: 0;

}

.header{

-webkit-transition: opacity 300ms ease-in-out;
transition: opacity 300ms ease-in-out;

}

a {

text-decoration: none;
color: #de6551;
outline: none;

}

a:hover, a:focus {

color: #3b393d;

}

.body {

background: #acaad1;

}

.body a {

color: #4f4c4c;

}

.body .header h1 span {

color: #4f4c4c;

}

.hidden {

position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;

} /* Header */

.header {

padding: 2em 1em;
text-align: center;

}

.header h1 {

font-size: 3em;
font-weight: 400;
line-height: 1.2;
margin: .5em 0 0;

}

.header h1 span {

font-size: .45em;
display: block;
padding: .5em 0 1em;
color: #999;

} /* Top Navigation Style */

.links {

margin: 2em 0 0;

}

.links a {

display: inline-block;
margin: 0 .5em;

}

/* cards wrapper and close btn */

.wrapper {

overflow: auto;
width: 95%;
max-width: 1366px;
margin: 0 auto;

}

@media screen and (max-width: 50em) {

.header {
        padding: 3em 10% 4em;
}

}

@media screen and (max-width: 40em) {

.header h1 {
        font-size: 2.4em;
        line-height: 1.2;
}

}

/* PATTERN */

.pattern {

position: fixed;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: no-repeat center center / cover;

}

.pattern–hidden {

visibility: hidden;
opacity: 0;

}

.pattern–hidden .polygon {

transition-duration: 0ms;

}

.pattern svg {

width: 100%;
height: 100%;

}

.polygon {

transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out;
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center bottom;
transform-origin: center bottom;

}

.polygon–hidden {

opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);

} /* disable scale on firefox */

.ff .polygon {

-webkit-transform: scale(1)!important;
transform: scale(1)!important;

}