.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;}
.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{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;}
.links{margin:2em 0 0;}
.links a{display:inline-block;margin:0 .5em;}
.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{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);}
.ff .polygon{-webkit-transform:scale(1)!important;transform:scale(1)!important;}