.sizing {
    box-sizing: border-box;
   
}

/*body {
    margin: 0;
    font-family: Arial;
}*/

/* The grid: Four equal columns that floats next to each other */

.Gcontainer {
    padding-right: 0px;
    padding-left: 5px;
   /* margin-right: auto;
    margin-left: auto;*/
    width: 590px;
    display: table;
    content: " ";
   
}



@media only screen and (max-width: 768px) {
    .Gcontainer {
        width: 580px;
      
    }
}
@media only screen and (max-width: 600px) {
    .Gcontainer {
        width: 400px;
       
       
    }
}
 @media only screen and (max-width: 400px) {
      .Gcontainer {
            width: 100%;
           
      }
    }
    /*@media only screen and (max-width: 300px) {
    .Gcontainer {
        width: 290px;
    }
}*/
.columnG {
        float: left;
        width: 20%;
        padding: 10px;
    }
    .columnG:hover {
        width: 22%;
        transition: width 1s;
    }

        /* Style the images inside the grid */
    .columnG img {
            opacity: 0.8;
            cursor: pointer;
        }

        .columnG img:hover {
            opacity: 1;
           
        }
@media only screen and (max-width: 600px) {
    .columnG {
        padding: 4px;
    }
}
@media only screen and (max-width: 400px) {
    .columnG {
        padding: 2px;
    }
}
        /* Clear floats after the columns */
        .rowG:after {
        content: "";
        display: table;
        clear: both;
    }

    /* The expanding image container */
.containerG {
    position: absolute;
   /* top: 315px;*/
    display: none;
    left:-10px
   
}


    /* Expanding image text */
    #imgtext {
        position: absolute;
        bottom: 15px;
        left: 15px;
        color: white;
        font-size: 20px;
    }

    /* Closable button inside the expanded image */
    .closebtn {
        position: absolute;
        top: 10px;
        left: 10px;
        color: white;
        font-size: 35px;
        cursor: pointer;
    }