.extra-post {
  display:block;
  width:350px;
  height:390px;
  background-color:#ffffff;
  position:relative;
  z-index:1;
}
.extra-post .extra-post-figure {
  display:block;
  width:350px;
  height:240px;
  position:relative;
  cursor:pointer;
  overflow:hidden;
  -webkit-transition:height 0.3s ease-out;
  transition:height 0.3s ease-out;
}
.extra-post .extra-post-figure .extra-post-image {
  position:absolute;
  top:-5px;
  left:0;
  height:250px;
  width:350px;
  -webkit-transform:scale(1.01) translate3d(0,0,0);
  transform:scale(1.01) translate3d(0,0,0);
  -webkit-transition:-webkit-transform 1s ease-out, top 0.3s ease-out, opacity 0.3s ease-out;
  transition:transform 1s ease-out, top 0.3s ease-out, opacity 0.3s ease-out;
}
.extra-post .extra-post-figure .extra-post-image img { width:100%; }
.extra-post .extra-post-figure .extra-post-image:after {
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(4,4,24,0.2);
  opacity:0;
  z-index:1;
  -webkit-transition:opacity 0.3s ease-out;
  transition:opacity 0.3s ease-out;
}
.extra-post .extra-post-figure:before {
  content:'';
  display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(4,4,24,0.15);
  mix-blend-mode:overlay;
  z-index:1;
}
.extra-post .extra-post-figure .extra-post-category {
  position:static;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100%;
  width:100%;
  padding:0 40px;
  text-align:center;
  font-size:14px;
  line-height:30px;
  letter-spacing:0.1em;
  font-weight:300;
  color:#ffffff;
  text-transform:uppercase;
}
.extra-post .extra-post-figure .extra-post-category .text {
  position:relative;
  display:block;
}
.extra-post .extra-post-figure .extra-post-category .text:before {
  content:'';
  display:block;
  height:20px;
  position:absolute;
  top:15px;
  left:-30px;
  width:0;
  background-color:#f50057;
  mix-blend-mode:multiply;
  -webkit-transition:width 0.3s ease-out;
  transition:width 0.3s ease-out;
}
.extra-post .extra-post-figure .extra-post-category .text > .inner { position:relative; }
.extra-post .extra-post-title-wrapper {
  display:block;
  height:110px;
  padding-top:15px;
  text-align:center;
  cursor:pointer;
  position:relative;
  -webkit-transition:height 0.3s ease-out;
  transition:height 0.3s ease-out;
}
.extra-post .extra-post-title {
  text-align:center;
  font-size:18px;
  line-height:30px;
  font-weight:500;
  color:#040418;
  display:block;
  vertical-align:middle;
  width:100%;
  padding:0 30px;
  position:absolute;
  top:50%;
  transform:translate(0,-50%);
  -webkit-transition:color 0.3s ease-out;
  transition:color 0.3s ease-out;
}
.extra-post .extra-post-metas {
  width:100%;
  padding:0 20px 20px 24px;
  position:absolute;
  bottom:0;
  left:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}
.extra-post .extra-post-meta {
  color:#808080;
  font-size:14px;
  line-height:20px;
  font-weight:300;
}
.extra-post .date { display:inline; }
.extra-post .extra-post-author:before {
  content:'\2022';
  display:inline-block;
  margin:0 3px 0 4px;
}
.extra-post.over .extra-post-figure { height:250px; }
.extra-post.over .extra-post-figure .extra-post-image {
  top:0;
  -webkit-transform:scale(1.05) translate3d(0,0,0);
  transform:scale(1.05) translate3d(0,0,0);
  -webkit-transition:-webkit-transform 5s ease-out 0.3s, top 0.3s ease-out;
  transition:transform 5s ease-out 0.3s, top 0.3s ease-out;
}
.extra-post.over .extra-post-figure .extra-post-category .text:before { width:calc(100% + 60px); }
.extra-post.over .extra-post-figure .extra-post-image:after { opacity:1; }
.extra-post.over .extra-post-title-wrapper { height:100px; }
.extra-post.over .extra-post-title { color:#f50057; }
@media only screen and (min-width: 781px) {
  .extra-post.extra-post-big {
    width:100%;
    max-width:810px;
    height:650px;
  }
  .extra-post.extra-post-big .extra-post-figure {
    width:100%;
    max-width:1090px;
    height:450px;
  }
  .extra-post.extra-post-big .extra-post-figure .extra-post-image {
    width:100%;
    max-width:1090px;
    height:470px;
  }
  .extra-post.extra-post-big .extra-post-figure .extra-post-image img {
    width:auto;
    height:100%;
    max-width:none;
    position:absolute;
    top:0;
    left:50%;
    transform:translate(-50%,0);
  }
  .extra-post.extra-post-big .extra-post-title-wrapper { height:160px; }
  .extra-post.extra-post-big.over .extra-post-figure { height:470px; }
  .extra-post.extra-post-big.over .extra-post-title-wrapper { height:140px; }
}
@media only screen and (max-width: 440px) {
  .extra-post .extra-post-title {
    font-size:16px;
    line-height:25px;
  }
}