/* MASONRY FOR BLOG POSTS ON HOME PAGE =============================== */

.gg-permalink {
    display: inline-block;
    background: #09C;
    color: #fff;
    margin-top: 20px;
    padding: 10px 10px;
    border: 1px solid #09C;
    border-radius: 5px;
    margin-bottom: 10px!important;
    border:1px solid #fff;
}

.gg-permalink:hover {
    background: #fff!important;
    color: #09C;
    text-decoration: none;
    border:1px solid;
}

.gg-permalink a {
    color: #fff;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
}

.gg-permalink:hover a {
    color: #09C;
    text-decoration: none;
}

#masonry-grid {
  margin: 0 auto;
}

#masonry-grid:after {
  content: '';
  display: block;
  clear: both;
}
//.grid-item h2 { font-family: "Lato";font-weight: 700;font-size:24px}
.grid-item h2 {font-weight: 700;font-size:24px}
.grid-item h2 a {color:#2c3e50 !important;}
.grid-item h2 a:hover { color:#0099CC !important}
.grid-item img { width:100% !important}

.grid-item {
  transition: background-color 1.0s ease;
  background-color:#dbdbdb;
  width: 380px;
  float:left;
  border-radius: 8px;
  padding:0 2% 2%;
  margin-bottom:20px;
}
.grid-item:hover {
  transition: background-color 1.0s ease-in-out;
  background-color:#B5B5B5;
}

@media (max-width:1300px){
  #masonry-grid{ width:800px}
}

@media (max-width:850px){
  #masonry-grid{ width:400px}
}

@media (max-width:450px){
  #masonry-grid{ width:100%}
  .grid-item { width:100%; margin-bottom:2%; }
}

/*
@media (max-width:1350px){
  .grid-item { width:360px}
}
@media (max-width:1280px){
  .grid-item { width:340px}
}
@media (max-width:1210px){
  .grid-item { width:320px}
}
@media (max-width:1140px){
  .grid-item { width:300px}
}
@media (max-width:1070px){
  .grid-item { width:280px}
}
@media (max-width:1000px){
  .grid-item { width:260px}
}
@media (max-width:930px){
  .grid-item { width:360px}
}
@media (max-width:860px){
  .grid-item { width:330px}
}
@media (max-width:790px){
  .grid-item { width:300px}
}
@media (max-width:720px){
  .grid-item { width:270px}
}
@media (max-width:650px){
  .grid-item { width:240px}
}
@media (max-width:590px){
  .grid-item { width:100%}
}
*/