.modal1 {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
        url('http://i.stack.imgur.com/FhHRx.gif') 
        50% 50% 
        no-repeat;
}
/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}
/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal1 {
    display: block;
}

.grid-container {
display: grid;
grid-template-columns: auto auto auto;

/* padding: 10px; */
}

@media only screen and (max-width: 900px) {
.grid-container {
display: grid;
grid-template-columns: auto auto;

/* padding: 10px; */
}
}
@media only screen and (max-width: 500px) {
.grid-container {
display: grid;
grid-template-columns: auto ;

/* padding: 10px; */
}
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
/* border: 1px solid rgba(0, 0, 0, 0.8); */
/* padding: 20px; */
/* font-size: 30px; */
/* text-align: center; */
}

@media only screen and (max-width: 750px) {
.all-cat {
/* visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%; */
display: none;
}
.all-cat2 {
/* visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%; */
display: none;
}
}