.blog {
  padding-top: 26px;
}

.blog-posts {
  position: relative;
}

.blog-posts .post-number {
  width: 100%;
  position: absolute;
  bottom: 0;
}


.blog-posts h2 {
  font-size: 16px;
  letter-spacing: -0.4px;
  line-height: 20px;
  text-transform: uppercase;
}

.blog-posts h3 {
  font-size: 10px;
  letter-spacing: 0;
  line-height: 20px;
  margin-bottom: 24px;
  text-transform: uppercase;
}

.blog-posts .h3 {
  color: #1b1b1b;
  font-family: 'NHaasGroteskTXStd-75Bd';
  font-size: 10px;
  letter-spacing: 0;
  line-height: 12px;
  text-transform: uppercase;
}

.blog-posts .post-card{
  height: 100%;
  position: relative;
}

.blog-posts .post-card-date{
  display: flex;
  position: absolute;
  bottom: 0px;
  width: 100%;
  color: #999999;
  left: 0;
  padding: 0 15px 0 5px;
}

.blog-posts .post-date {
  margin-bottom: 0;
  margin-right: auto;
  color:  #999999;
  
}

.blog-posts .post-read-more {  
  color:  #999999;
}

.blog-posts .post-category {
  margin-bottom: 5px;
  margin-right: auto;
  line-height: 12px;
}

.blog-posts .post-title {
  width: 303px;
  margin-bottom: 0;
  margin-right: auto;
  padding-top: 5px;
  
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 25px;
  text-transform: uppercase;
  
}

.blog-posts .mb-0 {
  margin-bottom: 0;
}

.blog-posts p {
  font-family: 'NHaasGroteskTXStd-55Rg';
  font-size: 10px;
  letter-spacing: 0;
  line-height: 12px;
  color: #1C1C1C;
}

.blog-posts .post-description p {
  font-family: 'NHaasGroteskTXStd-55Rg';
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  color: #3A3A3A;
}

.blog .divider {
  width: 100%;
  height: 1px;
  background-color: #E3E3E3;
  margin-top: 40px;
  margin-bottom: 40px;
}

.blog-section-01 img,
.blog-section-02 img,
.blog-section-03 img{
  width: 100%;
  object-fit: cover;
}

.blog-section-01 { overflow: auto; }

.blog-section-01 > div:nth-child(1) img {
  height: 413px;
  min-height: 413px;
}

.blog-section-01 > div:nth-child(2) img {
  height: 199px;
  min-height: 199px;
}

.blog-section-02 img {
  height: 305px;
  min-height: 305px;
}

.blog-section-03 .divider{
  margin-top: 34px;
}

.blog-section-03 > div:first-child img {
  height: 199px;
  min-height: 199px;
}

.blog-section-03 > div:last-child img {
  height: 413px;
  min-height: 413px;
}

.blog-pager {
  margin-bottom: 20px;
}

.blog-pager .divider {
  margin-bottom: 17px;
}

.blog-pager h5 {
  font-family: 'NHaasGroteskTXStd-75Bd';
  font-size: 10px;
  color: #1C1C1C;
  letter-spacing: 0;
  line-height: 12px;
}

.blog .pager .divider {
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog .end-divider {
  margin-top: 34px;
  margin-bottom: 0;
}

.featured-title {
  padding-top: 52px;
  text-align: center;
  margin-bottom: 36px;
}

.featured-title h3 {
  font-size: 12px;
  color: #1C1C1C;
  letter-spacing: 0;
  line-height: 20px;
  font-family: "NHaasGroteskTXStd-75Bd";
  text-transform: uppercase;
}

.featured-posts {
  padding-bottom: 96px;
}

.posts-slash {
  margin-left: 2px;
  margin-right: 2px;
  font-family: 'NHaasGroteskTXStd-55Rg';
}

.featured-posts .divider{
  margin-top: 0;
  margin-bottom: 0;
}

.featured-posts .featured-post-info h1 {
  text-align: center;
  font-size: 22px;
  color: #1C1C1C;
  letter-spacing: -0.55px;
  line-height: 20px;
  margin-bottom: 4px;
}

.featured-posts .featured-post-info p {
  font-family: "NHaasGroteskTXStd-55Rg";
  font-size: 10px;
  color: #1C1C1C;
  letter-spacing: 0;
  line-height: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.featured-posts .btn-black {
  background-color: #000;
  border-radius: 0;
  display: block;
  width: 132px;
  margin: 0 auto;
  margin-top: 18px;
}

.featured-posts .btn-black h4 {
  color: #FFFFFF;
  font-family: "NHaasGroteskTXStd-75Bd";
  font-size: 12.03px;
  letter-spacing: 0;
  line-height: 20.06px;
}

.post-wrap a{
  display: block;
  margin-bottom: 15px;
}

.blog .pager .previous {
  float: left;
}

.blog .pager .next {
  float: right;
}

.blog .pager .previous_page {
  float: left;
  padding-left: 15px;
  font-family: "NHaasGroteskTXStd-75Bd";
  font-size: 10px;
  color: rgb(28, 28, 28);
  letter-spacing: 0px;
  line-height: 12px;
  margin-top: 6px;
}
.blog .pager .next_page {
  float: right;
  padding-right: 15px;
  font-family: "NHaasGroteskTXStd-75Bd";
  font-size: 10px;
  color: rgb(28, 28, 28);
  letter-spacing: 0px;
  line-height: 12px;
  margin-top: 6px;
}

.blog .pager .pagination-container a,
.blog .pager .pagination-container .current {
  font-family: "NHaasGroteskTXStd-75Bd";
  font-size: 10px;
  color: rgb(28, 28, 28);
  letter-spacing: 0px;
  font-style: normal;
  line-height: 12px;
}

.blog .pager .pagination-container em,
.blog .pager .pagination-container a {
  padding-left: 5px;
  padding-right: 5px;
}

.blog .pager .pagination-container em {
  position: relative;
}

.blog .pager .divider-top {
  margin-top: 0 !important;
}

.blog .pager .divider-bottom {
  margin-bottom: 0 !important;
}

.blog .pager .pagination-container em:after{
  content: "";
  left: 0px;
  margin-top: calc(0.300em / 2 * -1);
  position: absolute;
  width: 80%;
  right: 0;
  left: 10%;
  color: black;
  top: 50%;
  height: 2px;
  background-color: black;
  transform: translate(0, -50%);
  animation: stroke 0.3s linear;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
  color: black;
  background-color: #fff;
}

.filter-menu{
  display: flex;
  justify-content: center;
  align-items: center;  

}

.filter-label{
  margin-right: 7px;
  color: #999999;
}

.nav>li>a:hover {
  text-decoration: none;
  background-color: #eee;
}

.nav>li>a:focus{
  background-color: #ffffff;
}

.nav-content{
  font-family: 'NHaasGroteskTXStd-75Bd';  
  font-size: 10px;
  letter-spacing: 0;
  line-height: 30px;
  margin-bottom: 24px;
  text-transform: uppercase;
  width: 700px;
  
}

.nav-content .link{
  color: #999;

  height: 30px;
    border: 1px solid #E3E3E3;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 11px;
    margin-right: 7px;
}

.nav-content .nav-item.active a{
  color: black;
  border: 1px solid black;

}

.nav-content .nav-item .nav-link .qty{
  color: #999;
	display: inline-block;
	font-family: 'NHaasGroteskTXStd-55Rg';
  font-size: 8px;
  letter-spacing: 0.5px;
  line-height: 20px;
  
	margin-left: 3px;
}

.nav-content .nav-item.active .nav-link .qty{
  color: black;
	display: inline-block;
	font-family: 'NHaasGroteskTXStd-55Rg';
  font-size: 8px;
  letter-spacing: 0.5px;
  line-height: 20px;
  
	margin-left: 3px;
}

.nav-content a{
  color: inherit;
}

.padding-divider{
  padding-left: 0;
  padding-right: 0;
}

.col-padding-10{
  padding-left: 5px;
}

.post-list {
  margin-top: 50px;
}

.blog-section-image{
  height: 415px;
  object-fit: cover;
}

.blog-section-image-large{
  
  height: 630px;
  object-fit: cover;
}

.nav-pills>li {
  float: none;
  display: inline-block;
}

.nav-content{
  text-align: center;
}

.nav-item{
  margin-bottom: 10px;
}

.filter-label{
  white-space: nowrap;
}

.filters-row{
  text-align: center;
}

.filters-row .filter-label{
  margin-bottom: 10px;
}

.featured-posts .featured-title h3{
  font-size: 14px;
  letter-spacing: -0.35px;
  line-height: 20px;
}

.featured-posts .featured-post-info h1{
  font-size: 32px;
  letter-spacing: -0.8px;
  line-height: 33px;
}

.featured-posts .featured-post-info p{
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
}

.featured-posts .post-item{
  margin-bottom: 40px;
}

.blog-section img {
  opacity: 1;
  transition: opacity 0.3s;
}

.blog-section img[data-src] {
  opacity: 0;
}

.blog-section .row.m-0{
  width: 100%;
} 


@media (min-width: 1200px) {
  .blog-posts .container {
      width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
      width: 970px !important;
      max-width: 970px !important;
  }
}

@media (min-width: 1300px) {
  .blog-posts .container {
      width: 1170px;
  }

  .blog-section-01 > div:nth-child(1) img {
    height: 543px;
    min-height: 543px;
  }

  .blog-section-01 > div:nth-child(2) img {
    height: 240px;
    min-height: 240px;
  }

  .blog-section-02 img {
    height: 370px;
    min-height: 370px;
  }

  .blog-section-03 .divider{
    margin-top: 34px;
  }

  .blog-section-03 > div:nth-child(1) img {
    height: 240px;
    min-height: 240px;
  }

  .blog-section-03 > div:nth-child(2) img {
    height: 543px;
    min-height: 543px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .blog-section-01 > div:nth-child(1) img {
    height: 320px;
    min-height: 320px;
  }

  .blog-section-01 > div:nth-child(2) img {
    height: 150px;
    min-height: 150px;
  }

  .blog-section-02 img {
    height: 242px;
    min-height: 242px;
  }

  .blog-section-03 > div:nth-child(1) img {
    height: 150px;
    min-height: 150px;
  }

  .blog-section-03 > div:nth-child(2) img {
    height: 320px;
    min-height: 320px;
  }

  .blog .pager .divider {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .blog .pager .pagination-container em:after {
    top: 65%;
  }

  .blog-posts h2, .blog-posts .post-title{  
    width: auto;      
    font-size: 32px;
    font-weight: bold;
    letter-spacing: -0.8px;
    line-height: 33px;
  }
  
  .blog-section-image{
    height: 330px;
    object-fit: cover;
  }
  
  .blog-section-image-large{
    height: 500px;
    object-fit: cover;
  }

  .nav-content{
    width: 600px;
  }

}

@media (min-width: 320px) and (max-width: 767px) {

  .blog {
    padding-top: 80px;
  }

  .row-eq-height {
    display: block;
  }

  .blog-section-01 > div:nth-child(1) img,
  .blog-section-01 > div:nth-child(2) img,
  .blog-section-02 img,
  .blog-section-03 > div:nth-child(1) img,
  .blog-section-03 > div:nth-child(2) img {
    height: calc(100vw - 118px);
    min-height: calc(100vw - 118px);
  }

  .post-number p {
    text-align: right;
    margin-bottom: 19px;
  }

  .post-wrap a{    
    margin-bottom: 0;
  }

  .post-wrap, .mb-13{    
    margin-bottom: 13px;
  }
  
  .mb-sm{
    margin-bottom: 30px;

  }

  .blog-posts .post-title {   
    width: auto;
    padding-top: 0;   
  }


  .blog .divider {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .featured-posts .featured-post-info h1 {
    font-size: 14px;
    letter-spacing: -0.35px;
    line-height: 18px;
  }

  .blog-pager {
    margin-bottom: 30px;
  }

  .featured-title {
    padding-top: 77px;
  }

  .blog .pager {
    border-top: solid 1px #E3E3E3;
    border-bottom: solid 1px #E3E3E3;
    margin-left: 15px;
    margin-right: 15px;
    padding-top: 29px;
    padding-bottom: 30px;
    margin-bottom: 0;
  }

  .blog-posts h2 {
    font-size: 12px;
    letter-spacing: -0.3px;
    line-height: 20px;
  }

  .blog-posts h3 {
    font-size: 10px;
    letter-spacing: 0;
    line-height: 20px;
  }

  .featured-posts {
    padding-bottom: 74px;
  }

  .post-source,
  .post-date {
    margin: 0 !important;
  }

  .blog-posts .row:last-child .post-wrap:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .blog-posts .post-number {
    position: initial;
    float: right;
  }

  .blog .pager .divider {
    margin-top: 30px;
  }

  .blog .pager .previous-wrap,
  .blog .pager .next-wrap {
    padding: 0;
  }

  .blog .pager .previous_page {
    padding-left: 0;
  }
  .blog .pager .next_page {
    padding-right: 0;
  }

  .blog .pager .divider {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .blog .pager .pagination-container em:after {
    top: 50%;
  }

  .row.m-0 {
    margin: 0;
  }

  .blog-posts h2, .blog-posts .post-title{        
    font-size: 22px;
    font-weight: bold;
    letter-spacing: -0.5px;
    line-height: 20px;
  }

  .nav-pills{
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
    display: inline-flex;
  }

  .filter-menu::before{    
    content: " ";
    height: 44px;
    width: 59px;
    background: linear-gradient(270deg, #FFFFFF 0%, rgba(255,255,255,0.29) 100%);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    
  }

  .blog-posts .post-card-date{    
    padding: 0;
    justify-content: space-between;
    position: relative;
    margin-top: 30px;
  }

  .filter-label{
    width: 70px;    
  }


  .blog-section-image{
    height: 200px;
    object-fit: cover;
  }
  
  .blog-section-image-large{
    height: 200px;
    object-fit: cover;
  }
  
  .featured-posts .featured-post-info h1{
    font-size: 22px;
    
    letter-spacing: -0.55px;
    line-height: 20px
  }
  
  .featured-posts .featured-post-info p{
    font-size: 12px;
    letter-spacing: 0;
    line-height: 20px;
  }

}