@import "../base/variables.less";
@import "../base/mixins.less";



.blog {

  &.wrap {
    h1 {
      font-size: 75px !important;
      text-align: left;
    }
  }

  .blog-content {
    .blog-post-preview {
      padding: 0 20px 20px 20px;
      box-sizing: border-box;
      float: left;
      width: 33.333333%;
      height: 400px;

      @media @tablet {
        width: 50%;
      }

      @media @mobile {
        width: 100%;
      }

      .img-wrapper {
        height: 13em;
        overflow: hidden;
      }

      img {
        width: 100%;
        margin-bottom: 20px;
      }

      p {
        font-size: 15px;
      }
    }
  }

  line-height: 150%;

  h1 {
    text-align: center;
    margin-top: 0.67em;
  }

  article {
    h2 {
      font-size: 25px;
    }

    h3 {
      font-size: 20px;
    }

    ol, ul {
      margin: 1em 2.5em;
      text-align: justify;
    }

    ul {
      list-style: circle;
    }

    img {
      padding: 3px;
      border: solid 1px #CCC;
    }
  }

  .blog-title-image {
    text-align: center;
    img {
      max-height: 20em;
    }
  }

  .buttons {
    .fb_iframe_widget span {
      vertical-align: top !important;
    }
  }

}