/*================================
=============== Regular Disply (Columns)
==================================*/

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

.blog-section-wrap .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;
   box-sizing: border-box;
   vertical-align: top;
}

.blog-section-wrap .blog-articles-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

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

.blog-section-wrap .post-text-inside {
   padding: 0px 20px 10px 20px;
}

.blog-section-wrap .post-text-inside h2 {
   margin: 0px;
   padding: 8px 0px 2px 0px;
   display: inline-block;
}

.blog-section-wrap .post-text-inside h2 a {
   padding: 6px 0px 5px 0px;
   font-weight: bold;
   font-size: 22px;
   line-height: 28px;
   font-weight: bold;
   display: inline-block;
   margin: 0px 0px 0px 0px;
   display: block;
}

.blog-section-wrap .blog-posts h2, 
.blog-section-wrap .blog-posts h2 a {
   color: #1b9df7;
}


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

.blog-section-wrap .blog-post-info-line {
   display: block;
   padding: 1px 0px 1px 0px;
   margin: -5px 0px 0px 0px;
}

.blog-section-wrap .blog-post-info-line span.video-label {
   padding: 2px 5px 3px 8px;
   margin: 2px 0px 0px 6px;
   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-section-wrap .blog-post-info-line 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-section-wrap .blog-posts p.date,
.blog-section-wrap .blog-posts p.comments {
   padding: 0px 0px 0px 5px;
   margin: 0px 0px 0px 0px;
   font-weight: bold;
   display: inline-block;
   font-size: 13px;
   line-height: 16px;
}

.blog-section-wrap .blog-posts p.date {
   color: #808080;
}

.blog-section-wrap .blog-posts p.comments,
.blog-section-wrap .blog-posts p.comments a {
   color: #484848;
}

.blog-section-wrap .page-excerpt p {
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 0px;
   display: block;
}

.blog-section-wrap .page-excerpt,
.blog-section-wrap .page-excerpt p {
   color: #646464;
}

.blog-section-wrap .page-excerpt p a:hover {
   text-decoration: underline;
}

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

.blog-section-wrap .thumbnail-image {
   display: block;
   text-align: center;
   margin: 0 auto;
}

.blog-section-wrap .thumbnail-image img {
   width: 100%;
   margin: 0px;
   padding: 0px;
   display: block;
}

/*------ Dealing With Blog Page With Sidebar -------- */

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

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

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

   .blog-section-wrap .blog-posts,
   .main-content-warp .blog-column-posts .blog-posts {
      width: 48%;
   }

}

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

   .blog-section-wrap .blog-posts,
   .main-content-warp .blog-column-posts .blog-posts {
      width: 98%;
      display: block;
      margin: 20px auto 5px;
   }

}

/*================================
=============== Line Blog Display
==================================*/

.blog-column-long .blog-posts {
   width: 47%;
}

/*================================
=============== Line Blog Display
==================================*/

.blog-full-width .blog-posts {
   width: 99%;
}


/*================================
=============== Line Blog Display
==================================*/

.blog-line-posts .blog-posts {
   display: block;
   width: 99%;
   margin: 10px 5px 20px 5px;
}

.blog-line-posts .thumbnail-image {
   float: right;
   width: 25%;
   margin: 15px 14px 15px 14px;
}

.blog-line-posts .post-text-inside {
   float: right;
   width: 72%;
   box-sizing: border-box;
   padding: 0px 3px 12px 7px;
}

.blog-line-posts .page-excerpt p {
   padding: 0px 0px 0px 0px;
}

.blog-line-posts .post-text-inside h2 {
   padding: 8px 0px 2px 0px;
}

/*------ Dealing With Blog Page With Sidebar -------- */

.main-content-warp .blog-line-posts .thumbnail-image {
   float: right;
   width: 33%;
   margin: 15px 14px 15px 14px;
   box-sizing: border-box;
}

.main-content-warp .blog-line-posts .post-text-inside {
   float: right;
   width: 63%;
   box-sizing: border-box;
   padding: 0px 3px 12px 7px;
}

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

@media only screen and (max-width: 1100px) {
   
   .blog-line-posts .post-text-inside {
      width: 70%;
   }
   
   .main-content-warp .blog-line-posts .thumbnail-image {
      width: 30%;
   }

   .main-content-warp .blog-line-posts .post-text-inside {
      width: 60%;
   }
   
}

@media only screen and (max-width: 1000px) {
 
   .blog-line-posts .post-text-inside {
      width: 70%;
   }

}


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

   .blog-line-posts .blog-posts {
      margin: 10px 5px 10px 5px;
   }
   
   .blog-line-posts .thumbnail-image,
   .main-content-warp .blog-line-posts .thumbnail-image {
      float: none;
      width: auto;
      margin: 0px;
   }

   .blog-line-posts .post-text-inside,
   .main-content-warp .blog-line-posts .post-text-inside {
      width: 100%;
      float: none;
      padding: 0px 20px 12px 20px;
   }
   
   .blog-line-posts .post-text-inside h2 {
      padding: 8px 0px 0px 0px;
   }

   .blog-line-posts .blog-posts,
   .main-content-warp .blog-line-posts .blog-posts {
      width: 48%;
      display: inline-block;
   }
   
   .blog-line-posts .page-excerpt p {
      padding: 0px 0px 3px 0px;
   }
   
}

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

   .blog-line-posts .blog-posts,
   .main-content-warp .blog-line-posts .blog-posts,
   .blog-column-long .blog-posts,
   .blog-full-width .blog-posts {
      width: 98%;
      display: block;
      margin: 20px auto 5px;
   }

}