.grid{
    display: block;
    height:calc(100vh);
    width: 100%;
    max-width:100vh;
    /*background-color:#fafafa;*/
    margin:0 auto;
    overflow-x:hidden;
    overflow-y:scroll;
    position: relative;
    padding-bottom: 50px;
}

/*.grid:after {
    content  : "";
    position : fixed;
    z-index  : 1;
    bottom   : 0;
    left     : 0;
    pointer-events   : none;
    background-image : linear-gradient(to bottom,
    rgba(255,255,255, 0),
    rgba(255,255,255, 1) 90%);
    width    : 100%;
    height   : 6em;
    !*max-width:100vh;*!
}*/

.single-post-block{
    position:fixed;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color:black;
    display:none;
    padding:5px;
}

.post-img-holder{
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

#post-content{
    padding: 0 20px;
    color:#E0E0E0;
}

.grid::-webkit-scrollbar{
    display:none;
}

.grid .square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    background-color: #161616;
    overflow:hidden;
    border-radius: 3px;
    transition: all 0.25s;
    -webkit-filter: grayscale(80%);
    filter: grayscale(80%);
    opacity:0.9;
    cursor: pointer;
}

.grid .square:hover{
    transform: scale(1.05, 1.05);
    -webkit-transform:scale(1.05, 1.05);
    -moz-transform:scale(1.05, 1.05);
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity:1;
    box-shadow: 3px 8px 15px rgba(0, 0, 0, 0.2);
}

.grid .content {
    position:absolute;
    height:90%; /* = 100% - 2*5% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 5%;

}

.grid .table{
    display:table;
    width:100%;
    height:100%;
}

.grid .table-cell{
    display:table-cell;
    vertical-align:bottom;
}
/*  For list */
ul{
    text-align:left;
    margin:5% 0 0;
    padding:0;
    list-style-position:inside;
}
li{
    margin: 0 0 0 5%;
    padding:0;
}


/*  For responsive images */

.grid .content .rs{
    width:auto;
    height:auto;
    max-height:90%;
    max-width:100%;
}
/*  For responsive images as background */

.grid .bg{
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; /* you change this to "contain" if you don't want the images to be cropped */
    color:#fff;
    text-shadow: 2px 2px 5px #242424;
}

.grid p{
    margin:0;
    padding:0;
    text-align:left;
}

.grid h3, .grid p{
    background-color:rgba(0, 0, 0, 0.48);
    border-radius:2px;
    padding:3px 5px;
}

.close-btn{
    color:#e0e0e0;
    font-size:30px;
    position: absolute;
    top:10px;
    right:10px;
}

.grid-header {
    margin: 30px 1.66% 0 1.66%;
}