*,
:after,
:before {
 -webkit-box-sizing:border-box;
 box-sizing:border-box
}

.last img {
 position:relative;
 left:50%;
 -webkit-transform:translate(-50%);
 -ms-transform:translate(-50%);
 transform:translate(-50%);
 border-radius:50%;
 padding:4rem 0;
 max-width:450px
}
@media screen and (max-width:768px) {
 .last img {
  position:relative;
  max-width:400px;
  left:50%;
  -webkit-transform:translate(-50%);
  -ms-transform:translate(-50%);
  transform:translate(-50%);
  border-radius:50%;
  padding:4rem 0
 }
}
@media screen and (max-width:400px) {
 .last img {
  position:relative;
  max-width:200px;
  left:50%;
  -webkit-transform:translate(-50%);
  -ms-transform:translate(-50%);
  transform:translate(-50%);
  border-radius:50%;
  padding:4rem 0
 }
}
.post__container h1 {
 margin-top:0;
 margin-bottom:0;
 font-size:2em;
 font-weight:900;
 line-height:1.1em;
 padding:17px 0
}
.post__container h2 {
 margin-top:0;
 margin-bottom:.25em;
 font-size:1.2em;
 font-weight:900;
 line-height:.9
}
.post__container p {
 margin:0;
 color:#606060;
}
.post__container a {
 padding:.5em 1em;
 font-size:.8em;
 color:#595f61;
 text-decoration:none;
 text-transform:uppercase;
 letter-spacing:.3em;
 border:1px solid #a9b1b3;
 -webkit-transition:.3s ease-in;
 -o-transition:.3s ease-in;
 transition:.3s ease-in
}
a:active,
a:focus,
a:hover {
 color:orange
}
.post__container figure {
 margin:0
}
::-moz-selection {
 color:#fff;
 background-color:#ededed;
 text-shadow:none
}
::selection {
 color:#fff;
 background-color:#ededed;
 text-shadow:none
}
.post {
 min-height:100vh;
 width:100%;
 border:.5em solid #ededed;
}
.post>:first-child {
 position:relative;
 height:14em;
 background-color:#ededed.
}
@media (min-width:30em) {
 .post>:first-child {
  height:18em
 }
 .post__text {
  font-weight:300;
  -webkit-animation:.8s ease-in-out .5s both fade-in;
  animation:.8s ease-in-out .5s both fade-in;
  font-size:16px
 }
 .post__container h1 {
  margin-top:0;
  margin-bottom:0;
  font-size:3em;
  font-weight:900;
  line-height:1.1em;
  padding:17px 0
 }
 .post__container h2 {
  margin-top:0;
  margin-bottom:.25em;
  font-size:2em;
  font-weight:900;
  line-height:.9
 }
}
.post__category,
.post__time {
 font-weight:600;
 text-transform:uppercase
}
@media (min-width:54em) {
 .post {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  height:100vh;
  min-height:40em;
  /*! background: #ededed; */
 }
 .post>:first-child {
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
  max-width:50%;
  height:auto
 }
 .post>:last-child {
  -ms-flex-preferred-size:50%;
  flex-basis:50%;
  max-width:50%
 }
}
@media (min-width:76.5em) {
 .post>:first-child {
  -ms-flex-preferred-size:60%;
  flex-basis:60%;
  max-width:60%
 }
 .post>:last-child {
  -ms-flex-preferred-size:40%;
  flex-basis:40%;
  max-width:40%
 }
}
.post__container {
 display:-webkit-box;
 display:-ms-flexbox;
 display:flex;
 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -ms-flex-direction:column;
 flex-direction:column;
 -webkit-box-pack:justify;
 -ms-flex-pack:justify;
 justify-content:space-between;
 padding:2em;
 overflow-y:auto;
 background-color: #ededed;
}
.absolute-bg,
.post__category,
.post__header {
 overflow:hidden
}
.post__category {
 position:relative;
 font-size:.9em;
 letter-spacing:.3em
}
.post__category:before {
 content:"";
 position:absolute;
 left:0;
 bottom:0;
 height:2px;
 width:2em;
 background-color:#000;
 -webkit-animation:1s ease-in .5s both slide-in;
 animation:1s ease-in .5s both slide-in
}
.post__content {
 padding:0
}
.post__content header {
 padding-bottom:20px;
 background:#ededed;
}
@media (min-width:54em) {
 .post__content {
  padding:0 1.2em
 }
}
.post__time {
 display:inline-block;
 margin-bottom:.5em;
 font-size:.8em;
 letter-spacing:.1em
}
.post__header span {
 display:inline-block;
 -webkit-animation:.8s ease-in-out both slide-up;
 animation:.8s ease-in-out both slide-up
}
.post__header span:first-child {
 -webkit-animation-delay:.1s;
 animation-delay:.1s
}
.post__header span:nth-child(2) {
 -webkit-animation-delay:.2s;
 animation-delay:.2s
}
.post__header span:nth-child(3) {
 -webkit-animation-delay:.3s;
 animation-delay:.3s
}
.post__text {
 font-weight:300;
 -webkit-animation:.8s ease-in-out .5s both fade-in;
 animation:.8s ease-in-out .5s both fade-in;
 font-size:14px
}
.post__link {
 text-align:right;
 padding-top:1em
}
.absolute-bg {
 position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
 background-position:50%;
 background-repeat:no-repeat;
 background-size:contain;
 background-color:#ededed;
 -webkit-animation:.8s ease-in-out 1s both fade-in;
 animation:.8s ease-in-out 1s both fade-in
}
@-webkit-keyframes slide-in {
 0% {
  -webkit-transform:translate3d(-100%,0,0);
  transform:translate3d(-100%,0,0)
 }
 100% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0)
 }
}
@keyframes slide-in {
 0% {
  -webkit-transform:translate3d(-100%,0,0);
  transform:translate3d(-100%,0,0)
 }
 100% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0)
 }
}
@-webkit-keyframes slide-up {
 0% {
  opacity:0;
  -webkit-transform:translate3d(0,100%,0);
  transform:translate3d(0,100%,0)
 }
 90% {
  opacity:1
 }
 100% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0)
 }
}
@keyframes slide-up {
 0% {
  opacity:0;
  -webkit-transform:translate3d(0,100%,0);
  transform:translate3d(0,100%,0)
 }
 90% {
  opacity:1
 }
 100% {
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0)
 }
}
@-webkit-keyframes fade-in {
 0% {
  opacity:0
 }
 100% {
  opacity:1
 }
}
@keyframes fade-in {
 0% {
  opacity:0
 }
 100% {
  opacity:1
 }
}
@-webkit-keyframes fade-out {
 0% {
  opacity:1
 }
 100% {
  opacity:0
 }
}
@keyframes fade-out {
 0% {
  opacity:1
 }
 100% {
  opacity:0
 }
}