/*================================
=============== Blog Posts Page
==================================*/

.blog-page {}

.main-blog-wrap {
   display: flex;
   flex-wrap: wrap;
}

.blog-page .blog-posts {
   display: inline-block;
   width: 32%;
   vertical-align: top;
   margin: 10px 5px 10px 5px;
   padding: 0px;
   box-sizing: border-box;
   background: #fff;
   border: 1px solid #d7d7d7;
}

.main-content-warp .blog-posts {
   width: 48%;
}

.blog-page .blog-posts img {
   max-width: 100%;
}

.blog-page .blog-posts .blog-content {
   display: block;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   position: relative;
}

.blog-page .blog-posts .blog-post-content {}

.blog-page .blog-posts h2 { 
   margin: 1px 0px 5px 0px;
   padding: 5px 8px 0px 8px;
   color: #2184c9;
   display: inline-block;
}

.blog-page .blog-posts h2 a {
   padding: 0px 4px 0px 4px;
   font-weight: bold;
   font-size: 21px;
   line-height: 28px;
   font-weight: bold;
   color: #1b9df7;
   display: inline-block;
   text-align: center;
   margin: 0px 0px 0px 0px;
   display: block;
}

.blog-page .blog-posts h2 a:hover {
   text-decoration: none;
   color: #1473d0;
}

.blog-page .blog-posts p {
   margin: 0px 0px 5px 0px;
   letter-spacing: 0px;
   color: #8d8d8d;
   padding: 0px 0px 0px 0px;
   font-size: 18px;
}

.blog-page .blog-posts p a:hover {
   text-decoration: underline;
}

.blog-page .blog-post-info {
   display: block;
   padding: 0px 0px 8px 0px;
   margin: -3px 12px 0px 12px;
}

.blog-page .blog-post-info-line {
   display: block;
   padding: 1px 0px 1px 0px;
}

.blog-page .blog-post-info span.video-label {
   padding: 2px 5px 3px 8px;
   margin: 2px 0px 0px 3px;
   font-weight: bold;
   font-size: 11px;
   line-height: 11px;
   color: #fff;
   display: inline-block;
   background: #00afe1;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   position: relative;
   top: -1px;
}

.blog-page .blog-post-info span.video-label span {
   width: 12px;
   height: 12px;
   display: inline-block;
   background: url(../../images/formats/video-icon.png) no-repeat;
   background-position: 0px 0px;
   padding: 0px 0px 0px 0px;
   margin: 0px 0px -2px 5px;
}

.blog-page .blog-posts p.date {
   padding: 0px 2px 0px 6px;
   margin: 3px 0px 0px 0px;
   font-weight: normal;
   display: inline-block;
}

.blog-page .blog-posts p.comments {
   padding: 0px 0px 0px 0px;
   margin: 0px;
   margin-right: -3px;
   font-weight: normal;
   display: inline-block;
}

.blog-page .blog-posts p.date,
.blog-page .blog-posts p.comments {
   font-size: 16px;
   line-height: 16px;
   color: #808080;
}

.blog-page p.page-excerpt {
   color: #646464;
   font-size: 18px;
   padding: 0px 0px 0px 0px;
}

.blog-page .blog-posts p.comments a,
.blog-page .blog-posts p.comments a:visited {
   color: #616161;
}

/*------ Thumbnail Image -------- */

.blog-post-content-thumbnail {}

.blog-post-content-thumbnail h2,
.blog-post-content-thumbnail p {
   display: block;
   clear: none;
}

.blog-post-content-thumbnail .thumbnail-image {
   text-align: center;
   margin: 0 auto;
}

.blog-post-content-thumbnail .thumbnail-image img {
   width: 100%;
}

/*----------------------------------
----------------- Mobile
----------------------------------*/

@media only screen and (max-width: 1600px) {

   .blog-page .blog-posts {
      width: 31.5%;
   }

   .main-content-warp .blog-posts {
      width: 48%;
   }

}

@media only screen and (max-width: 960px) {

   .wpp-list {
      max-width: 270px;
      margin: 20px auto;
   }

}

@media only screen and (max-width: 768px) {

   .main-blog-wrap {
      display: flex;
      flex-wrap: wrap;
   }

   .blog-page .blog-posts {
      width: 47%;
      display: inline-block;
      text-align: center;
   }

   .blog-page .blog-posts .blog-post-content {
      text-align: center;
   }

   .blog-page .blog-post-info { 
      text-align: center;
      margin: 0px 0px 0px 0px;
   }

   .blog-page .blog-posts p {
      text-align: center;
      padding: 2px 15px 2px 15px;
   }

   .blog-page .blog-posts img {
      margin: 0 auto 2px;
   }

}

@media only screen and (max-width: 600px) {

.main-blog-wrap {
   display: block;
}

.blog-page .blog-posts {
   display: block;
   width: 98%;
   margin: 20px 4px 0px 4px;
   min-height: auto;
}

.blog-page .blog-posts-pages {
   text-align: center;
   padding: 0px 5px 10px 5px;
   margin: 5px 0px 10px 0px;
}

.blog-page .blog-posts-pages p {
   display: block;
   text-align: center;
   padding: 0px 0px 9px 0px;
}

}