/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/


.blogposts {
margin-bottom: 30px;
}

.homepageblog {
margin: 0 auto;
text-align: center;
}

.homeblogcontainer {
margin: 70px auto;
}

.homeblogcontainer .titlesection {
padding: 0 15px;
}

.blogthumbnails {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 15px;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
}

.readmore {
display: block;
margin-top: 15px;
}

.bloglist2 p {
display: inline;
}

.thumbnail {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
border: none;
background-color: #f7f7f7;
border-radius: 4px;
-webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
margin-bottom: 25px;
padding: 0;
}

.thumbnail.twoarticles {
width: 47.5%;
-webkit-box-flex: 0;
    -ms-flex: none;
        flex: none;
}

.thumbnailimagecontainer.stockblogbg{
background-image: url(../../../images/white_keyboard.jpg);
background-size: cover;
background-position: center;
}

.thumbnail.twoarticles:nth-child(odd) {
margin-right: 2.5%;
}

.thumbnail.twoarticles:nth-child(even) {
margin-left: 2.5%;
}

.thumbnail.onearticle {
max-width: 500px;
margin-left: auto;
margin-right: auto;
}

.thumbnailimage {
overflow: hidden;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 200px;
}

.thumbnailimagecontainer {
width: 100%;
height: 200px;
background-size: cover;
background-position: center center;
-webkit-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;
}

.thumbnailimagecontainer:hover {
-webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
        transform: scale(1.05);
}

.thumbnail .thumbnailimage a {
height: 200px;
width: 100%;
-webkit-box-shadow: none;
        box-shadow: none;
}

.thumbnail .caption {
padding: 30px;
text-align: left;
}

.blogtitle {
font-size: 20px;
font-weight: 600;
color: #333;
}

.articledate {
font-size: 12px;
color: #8b8b8b;
margin-top: 15px;
}

.blogbody {
text-align: left;
}

.blogtitle a {
line-height: 1.2em;
}

.blogtitle a, .blogbody a {
color: #525252;
}

.blogtitle a:hover, .blogbody a:hover {
color: #818181;
}

.bloglink {
padding: 5px 10px;
background-color: #d2d2d2;
display: inline-block;
border-radius: 3px;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
color: white;
float: right;
border-bottom-right-radius: 4px;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
}

.bloglink:hover {
background-color: #b5b5b5;
}

.homepageblog .thumbnail {
margin-bottom: 0;
}

@media (max-width: 767px) {
    
    .thumbnail.twoarticles:nth-child(odd) {
    margin-right: 0;
    margin-bottom: 25px;
    }

    .thumbnail.twoarticles:nth-child(even) {
    margin-left: 0;
    }


    .blogthumbnails {
    display: block;
    }

    .thumbnail.twoarticles {
    width: 100%;
    }

}

@media (max-width: 480px) {

    .blogtitle {
    font-size: 16px;
    }

    .blogthumbnails {    
    margin: 0;
    }

}

@media (max-width: 400px) {

    .thumbnailimage, .thumbnailimagecontainer {    
    height: 150px;
    }

}