/* Show only active category */
 .index .grid .cellgrid {
     display: none;
}
 .index .grid .active {
     display: block;
}
 .index .grid {
     margin-top: 30px;
     margin-bottom: 20px;
}
 .index .grid .cell {
     height: 250px;
     margin-bottom: 20px;
     float: left;
     background: #fff;
     background-position: 50% 50%;
     background-repeat: no-repeat;
     position: relative;
     background-size: cover;
}
/* Post Title */
 .index .cell h2 {
     bottom: 25px;
     color: #94ac50;
     padding: 8px 6px 0 8px;
}
/* Author/Time */
 .index .cell .meta {
     bottom: 0;
     color: #666;
     padding: 3px 6px 10px 8px;
     height: 25px;
}
/* Author */
 .index .cell .meta .author {
     color: #333;
     font-weight: 700;
}
/* Both */
 .index .cell h2, .index .cell .meta {
     position: absolute;
     margin: 0;
     width: 100%;
     background: white;
     text-align: left;
     font-size: 12px;
}
/* Block hover color */
 .index .grid a:hover h2, .index .grid a:active h2, .index .grid a:focus h2, .index .grid a:hover .meta, .index .grid a:active .meta, .index .grid a:focus .meta {
     background-color: #d9e8ad;
     color: #333;
}
/* GRID WIDTHS */
/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */
/* YELLOW */
 .main-container-outer .container {
     width: 100%;
}
 .index .grid {
     width: 300px;
     margin-left: auto;
     margin-right: auto;
}
 .index .grid .one, .index .grid .two, .index .grid .three, .index .grid .four, .index .grid .five, .index .grid .six, .index .grid .seven, .index .grid .eight, .index .grid .nine, .index .grid .ten {
     width: 300px;
     height: 140px;
}
/* Small devices (landscape phones, 576px and up) */
/* RED */
 @media (min-width:576px){
     .index .grid {
         width: 488px;
    }
     .index .grid .cell {
         margin-right: 20px;
    }
     .index .grid .one {
         width: 184px;
    }
     .index .grid .two {
         margin-top: 0;
         margin-left: 304px;
         width: 184px;
    }
     .index .grid .three {
         margin-top: -320px;
         margin-left: 204px;
         width: 284px;
    }
     .index .grid .four {
         margin-top: 0;
         margin-left: 304px;
         width: 184px;
         height: 300px;
    }
     .index .grid .five {
         margin-top: -160px;
         margin-left: 0;
         width: 284px;
    }
     .index .grid .six {
         margin-top: -480px;
         margin-left: 0;
         width: 284px;
         height: 300px;
    }
     .index .grid .seven {
         width: 184px;
    }
     .index .grid .eight {
         margin-top: -160px;
         margin-left: 204px;
         width: 284px;
    }
     .index .grid .nine {
         margin-top: 0;
         margin-bottom: 0;
         width: 284px;
    }
     .index .grid .ten {
         margin-top: -140px;
         margin-left: 304px;
         width: 184px;
    }
}
/* Medium devices (tablets, 768px and up) */
/* GREEN */
 @media (min-width:768px){
     .index .grid {
         width: 692px;
    }
     .index .grid .two {
         margin-top: 0;
         margin-left: 0;
    }
     .index .grid .three {
         margin-top: 0;
         margin-left: 0;
         margin-right: 0;
    }
     .index .grid .four {
         margin-top: 160px;
         margin-left: 510px;
    }
     .index .grid .five {
         width: 184px;
    }
     .index .grid .five, .index .grid .six {
         margin-top: -480px;
    }
     .index .grid .six {
         margin-left: 204px;
    }
     .index .grid .seven {
         margin-top: -320px;
    }
     .index .grid .eight {
         margin-top: -480px;
         margin-left: 508px;
         width: 184px;
    }
     .index .grid .nine {
         margin-top: -160px;
         margin-left: 0;
         width: 284px;
    }
     .index .grid .ten {
         display: inline-block;
         margin-top: -160px;
         margin-left: 304px;
    }
}
/* Large devices (desktops, 992px and up) */
/* BLUE */
 @media (min-width:992px){
     .index .grid {
         width: 896px;
    }
     .index .grid .three {
         margin-top: 0;
         margin-left: 0;
         margin-right: 20px;
    }
     .index .grid .four {
         margin-top: 0;
         margin-left: 0;
         margin-right: 0;
    }
     .index .grid .five {
         margin-top: -320px;
    }
     .index .grid .five, .index .grid .six, .index .grid .seven, .index .grid .eight, .index .grid .nine {
         margin-top: -160px;
    }
     .index .grid .six {
         margin-left: 204px;
    }
     .index .grid .eight {
         margin-top: 0;
         margin-left: -508px;
         width: 184px;
    }
     .index .grid .nine {
         margin-left: 508px;
         width: 388px;
         margin-right: 0;
    }
     .index .grid .ten {
         display: none;
    }
}
/* Extra large devices (large desktops, 1200px and up) */
/* BLACK */
 @media (min-width:1200px){
     .index .grid {
         width: 896px;
    }
}
 .index .main-container-outer {
     border-bottom: 5px #f5f5f5 solid;
}