.at-post {
  @extend %at-clearfix;
  position: relative;
  margin: 0 0 ($at-vertspace * 2);
  width: 100%;

  &.at-post--mini {
    border-bottom: solid 2px;
    padding: ($at-vertspace) 0;
    &.has-post-thumbnail {
      padding: 0 0 ($at-vertspace);
      .at-post__contentwrap {
        //margin-top: -($at-vertspace);
      }
    }
    .at-post__contentwrap {
      background: #fff;
      //border-bottom: solid 2px;
      padding: $at-vertspace 0 $at-vertspace;
      @media screen and (min-width: 520px){ 
        padding: $at-vertspace 0 $at-vertspace;
      }
    }
  }

  &.at-post--square {
    //border-bottom: solid 2px;
    .at-post__thumb {
      @media screen and (min-width: 520px){ 
       height: 330px;
      }
       height: 250px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      @media screen and (min-width: 880px) {
        height: auto;
        width: 40%;
        position: absolute;
      }
      > a {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
    }
    .at-post__contentwrap {
      padding: 0 0 20px 0;
      
      @media screen and (min-width: 880px){
        padding: 0 0 0 20px;
      }

      @media screen and (min-width: 880px) {
        &.at-post__with-thumbnail{
          float: right;
          width: 60%;
          padding: 0 0 0 25px;
        }
      }
      .at-post__excerpt {
        margin-bottom: 25px;
      }
    }
    .at-post__title {
      text-align: center;
      font-size: 22px;
      line-height: 28px;
      margin: ($at-vertspace / 1.5) 0;
      text-align: left;
      @media screen and (min-width: 880px) { 
        margin: 0 0 ($at-vertspace / 1.5);
      }
    }

    .at-post__readmore {
      margin: 20px 0 0;
    }

    
  }

  &.at-post--single {
    background: $at-secondary-color;    
    padding: 0 0 25px;
    &.has-post-thumbnail {
      padding: 0 0 ($at-vertspace);
    }
    .at-post__contentwrap {
      background: #fff; 
      padding: ($at-vertspace ) 0;
      @media screen and (min-width: 520px){      
        padding: ($at-vertspace * 1.5) 0;
      }
   
    }
  }

  .at-post__contentwrap {
    position: relative;   
    margin: 0;
  }

  .at-post__header {}

  .at-post__thumb {
    //max-height: 350px;
    //margin: 0 0 $at-vertspace;

    a {
      display: block;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        transition: all .3s ease-in-out;
      }
      &:hover {
        &::before {          
          background: rgba(0, 0, 0 , .1)
        }
      }

      img {
      width: 100%;
      }
    }

    > img {
      vertical-align: bottom;
      width: 100%;
    }
  }
  .at-post__title {
    font-size: 28px;
    line-height: 36px;
    margin: 0 0 ($at-vertspace / 2);
    text-align: center;
    transition: color .3s ease-in-out;
    &,
    a {
      color: $at-heading-color;
    }
    a {
      text-decoration: none;
      &:hover {
        color: lighten($at-heading-color, 10%);
        text-decoration: none;
      }
    }
  }
  .at-post__meta {
    @extend %at-clearfix;
    display: table;
    list-style: none;
    padding: 0;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto ($at-vertspace);
    > li {
      display: inline-block;
      &::after {
        content: '/';
        margin: 0 5px;
        display: inline-block;
      }
      &:last-child {
        &::after {
          content: none;
          margin: 0;
        }
      }
    }
    &,
    a {
      color: #999;
    }
    a {
      text-decoration: none;
    }
  }
  .at-post__metaf {
    margin: 20px auto 0;
  }
  .at-post__excerpt {
    p {
      margin: 0 0 $at-vertspace;
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
  .at-post__content {
    margin: 0 0 ($at-vertspace);
  }
  .at-post__readmore {
    display: table;
    padding: ($at-vertspace / 2) ($at-vertspace * 2);
    margin: ($at-vertspace / 1.25) auto 0;
    text-decoration: none;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: ($at-basetypo-size - 3);
    color: $at-main-color;
    border: 1px solid $at-main-color;
    border-radius: 1px;
    transition: all .2s ease-in-out;
    &:hover {
      background: $at-main-color;
      color: #fff;
    }
  }
}

.at-optin-blog{
   margin: 0 0 ($at-vertspace * 1.5);
}

.at-pagewrapper--single.at-pagewrapper--sbright,.at-pagewrapper--single.at-pagewrapper--sbleft{

  .at-optin {
    margin: ($at-vertspace * 1.5) 0;
    .at-container {
      padding:0px;
      .mc4wp-form .mc4wp-form-fields{
        width: 100%;
      }
    } 
  }
}



//STYLE 2
.at-pagewrapper--sbright .at-content-style2, .at-pagewrapper--sbleft .at-content-style2 {
  @media screen and (min-width: 992px) {
    article {
      width: 49%;
      float: left;
      display: flex;
    }
  }
  @media screen and (min-width: 768px) and (max-width: 991px) {
    article {
      width: 100%;
    }
  }

  

}

.at-pagewrapper--sboff .at-content-style2 {
  @media screen and (min-width: 768px) and (max-width: 991px) {
    article {
      width: 49%;
      float: left;
      display: flex;
    }
  }

  @media screen and (min-width: 992px) {
    article {
      width: 32%;
      float: left;
      display: flex;
    }
  }
}


.at-content-style2 {
  @extend %at-clearfix;
  margin: 0 0 25px;
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  @media screen and (min-width: 768px) {
    margin: 0 -15px 25px;
    .at-post {
      margin: 0 15px 50px;
    }
  }
 
  
  .at-post {
     position: relative;
   }

  .at-blog__post {
    @extend %at-clearfix;
    width: 100%;
    margin-bottom: 30px;


    img {
      width: 100%;
      -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    }
    &:hover {
      img {
        transform: scale(1.1);
      -webkit-transform: scale(1.1);
      cursor:pointer;
      }
    }
    .at-blog__contentwrap { 
      background: #fff;
      padding: 15px 0 0;
      
      text-align: left;      
      /*@media screen and (min-width: 520px) {
        padding: 25px 25px;
      }*/
    }
    .at-blog__posttitle {
      margin: 0 0 ($at-vertspace / 1.5);
      //font-weight: normal;
      font-size: 18px;
      line-height: 22px;
      &,
      a {
        color: $at-heading-color;
      }
      a {
        text-decoration: none;
      }
    }
    .at-blog__postthumb {
      overflow: hidden;
      //margin: 0 0 ($at-vertspace / 2);
    }
    .at-blog__excerpt {
      font-size: 14px;
      line-height: 22px;
      p {
        margin: 0 0 ($at-vertspace / 2);
        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }
    .at-blog__link {
      display: block;
      position:absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
    .at-post__meta{
      position: absolute;
      bottom: 0;
      left: 0;
      margin-bottom: 5px;
    }
  }
}

.at-content-style3 {
  .at-post {
    &.at-post--mini { 
      border: none;
    }
    .at-post__meta {
      margin: -5px 0 5px;
      text-align: left;
    }
  }
}

