.article
  padding 5rem 0 3rem
  .sea-center
    text-align center
    color black
    &::after
      border-bottom: 2px dashed water;
      content: '';
      width: 100px;
      display: block;
      margin: .2em auto 0;
      height: 2px
//.article-inner
//  overflow hidden

.article-topping
  position absolute
  top 0
  left -3rem
  color: #ea434a
  &>i
    font-size 2rem
    line-height 1.7


.article-meta
  clearfix()

.article-date
  @extend $block-caption
  &::before
    content '\eaf2'
    margin-right .5rem
    font-family remixicon
    opacity .5

.article-category
  display inline-block
  margin-left 1.5rem
  &:before
    content "\efde"
    font-family remixicon
    margin-right .5rem
    opacity 0.6
  .article-category-link
    @extend $block-caption

.archive-article-header
  + .article-category
    margin-left 0

.article-entry
  font-size 110%
  margin-top 1rem
  clearfix()
  @extend $base-style
  color body-color
  .pullquote
    text-align left
    width 45%
    margin 0
    &.left
      margin-left 0.5em
      margin-right 1em
    &.right
      margin-right 0.5em
      margin-left 1em
  .caption
    color color-grey
    display block
    font-size 0.9em
    margin-top 0.5em
    position relative
    text-align center
  // http://webdesignerwall.com/tutorials/css-elastic-videos
  .video-container
    position relative
    padding-top (9 / 16 * 100) % // 16:9 ratio
    height 0
    overflow hidden
    iframe, object, embed
      position absolute
      top 0
      left 0
      width 100%
      height 100%
      margin-top 0

.article-header
  position relative
  h1, h2
    margin 0
  .article-title
    display block
    font-size 1.8em
    font-weight bold
    margin-bottom 3rem
    text-decoration none
    color body-color
    padding-left 2rem
    border-left 4px solid body-color 

.article-footer
  clearfix()
  margin-top 3rem

// Tags
.article-tag-list
  list-unstyled()
  margin 0
  &:before
    color: tag-color
    content "\eec3"
    font-family remixicon
    margin-right .5rem
  .article-tag-list-item
    display inline-block
    padding-right 1rem
  .article-tag-list-link
    font-size: 11px
    text-decoration: none
    display: block;
    color: white;
    float: left;
    height 18px
    line-height 18px
    padding 0px 8px;
    position: relative;
    border-radius: 9px;
    background-color tag-color

.article-comment-link
  float right
  &:before
    content "\ee0d"
    font-family remixicon
    padding-right 8px

.article-share-link
  cursor pointer
  float right
  margin-left 20px
  &:before
    content "\ef76"
    font-family remixicon
    padding-right 6px

// Nav  Older & Newer
.article-nav
  clearfix()
  position relative
  padding-top 3rem
  margin-top 5rem
  border-top border-width border-color solid

.article-nav-link
  display block
  text-decoration none
  &:first-child
    float left
  &:last-child
    float right
    text-align right

.article-nav-caption
  color sea-lighter

.article-nav-title
  font-size inherit

// Share
.article-share-box
  position absolute
  display none
  background white
  border-radius(.4rem)
  box-shadow 1px 2px 10px rgba(0, 0, 0, 0.2)
  border-radius 3px
  margin-left -145px
  overflow hidden
  z-index 1
  &.on
    display block

.article-share-input
  width 100%
  background none
  box-sizing border-box
  padding 0 1.5rem
  outline none
  border none
  border-bottom border-width border-color solid
  height 3.6rem
  line-height 3.6rem

.article-share-links
  clearfix()

$article-share-link
  position relative
  display block
  float left
  width 5rem
  height 3.6rem
  color body-color
  text-align center
  text-decoration none
  &:before
    font-size 20px
    font-family remixicon
    absolute-center(font-size-base)
  &:hover
    color white

.article-share-twitter
  @extend $article-share-link
  &:before
    content "\f068"
  &:hover
    background twitter-color
    text-shadow 0 1px darken(twitter-color, 20%)

.article-share-facebook
  @extend $article-share-link
  &:before
    content "\ec30"
  &:hover
    background facebook-color
    text-shadow 0 1px darken(facebook-color, 20%)

.article-share-pinterest
  @extend $article-share-link
  &:before
    content "\eea8"
  &:hover
    background pinterest-color
    text-shadow 0 1px darken(pinterest-color, 20%)

.article-share-google
  @extend $article-share-link
  &:before
    content "\ed15"
  &:hover
    background google-color
    text-shadow 0 1px darken(google-color, 20%)


@import "tocbot"
@import "gallery"
@import "albums"
@import "justifiedGallery"

@media (max-width: 768px)
  .article-entry
      font-size 120%