/*
Theme Name: iiiem-child-theme-148-02
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: iiiem
Text Domain: iiiem-child-theme-148
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


.singleBlog{
  position: relative;
  overflow: hidden;
  max-height: 580px;
  height: 100%;
  box-sizing: border-box;
  box-shadow: 0 2px 10px #ccc;
  transition: all .5s;
}
.singleBlog:hover{
  box-shadow: 0 2px 13px #ccc;
  transition: all .5s;
}
.singleBlog:hover img{
  transform: scale(1.1);
  transition: all .4s;
}
.blogContent{
  position: absolute;
  left: 0;
  bottom: -45px;
  width: 100%;
  color: #fff;
  padding: 10px 5px;
  background: linear-gradient(45deg, rgba(21,82,153,1) 0%,rgba(144,192,229,.4) 100%);
  transition: all .5s;
}
.singleBlog:hover .blogContent{
  bottom: 0;
  transition: all .5s;
}

.blogContent h3{
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}
.blogContent h3 span{
  display: block;
  font-size: 60%;
  margin-top: 5px;
  font-weight: 600;
  color: rgba(52, 73, 94,1.0)
}

.blogContent a{
  font-size: 14px;
  font-weight: 500;
}
.blogContent .btn{
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid #fff;
  border-radius: 3px;
  font-weight: 400;
}
.blogContent .btn:hover{
  background: rgba(52, 152, 219,1.0);
  transition: all .5s;
  text-decoration: none;
}
.blogContent a:hover{
  text-decoration: underline;
}

@media (max-width:992px) {
  main{
    grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  }
}
@media (max-width:767px) {
  main{
    grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  }
  header{
    width: 95%;
  }
  .blogContent{
    bottom: 0;
  }
}
@media (max-width:500px) {

    main{
      grid-template-columns: repeat(1, 1fr);
    }
}