body
{
    margin:0;
    padding:0;
}
.Gcontainer
{
    max-width:1200px;
    margin:auto;
 
}
.Gcontainer td
{
    display:inline-block;
 
}

.Gcontainer .box
{
    position:relative;
    width:300px;
    height:auto;
    background-color:#fff;
    margin:5px;
    box-sizing:border-box;
    display:inline-block;
 border:2px rgba(0,0,0,0.2);
    border-radius:10px;

    box-shadow:2px 2px 5px 2px rgba(0,0,0,0.2);
}
.Gcontainer .box .imgbox
{  border-radius:10px;
    position:relative;
    overflow:hidden;
}
.Gcontainer .box .imgbox img,iframe
{
     border-radius:10px;
    width:100%;
    height:auto;
    transition:transform 2s;
}
.Gcontainer .box:hover .imgbox img,iframe
{
    
    transform:scale(1.2);
}
.Gcontainer .box .details
{
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
       border-radius:10px;
    background-color:rgba(0,0,0,0.7);
   text-align:center;
    transform:scaleX(0);
    transition:transform .5s;
}
    .Gcontainer .box:hover .details {
        transform:scaleY(1);
    }
.Gcontainer .box .details .content
{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    padding:15px;
    color:#fff;
    width:100%;
}
    .Gcontainer .box .details .content h2 {
         text-align:center;
        margin:0;
        padding:0;
         font-size:15px;
       color:#f5ff00;

    }
     .Gcontainer .box .details .content p {
       margin:10px 0 0;
       padding:0;
       font-size:13px;
       
       
    }


  
@media (max-width: 500px)
{
    .Gcontainer 
    { 
       
        width:100%;
        margin:0;
        /*padding:10px;*/
       
    }
    .Gcontainer .box 
    {
       margin:0;
       margin-top:15px;
        width:100%;
     height:auto;
    }
    .Gcontainer .box .imgbox img
{
    width:100%;
    height:auto;
   
}

}