/*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;
}