* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
margin-top: 30px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  display: block;
  width: 160px;
  height: 120px;
  float: left;
  /* vertical gutter */
  margin-bottom: 20px;
  border: 7px solid white;
  border-radius: 0px;
  overflow: hidden;
   background: url(http://winnerhun.uw.hu/vigyorpofa.gif) no-repeat center center;
  background-color: ;
        -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
    color: black;
    

}



.grid-item--width2 { width: 340px; }
.grid-item--width3 { width: 220px; }
.grid-item--width4 { width: 780px; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }



.gri-item-img {
    height: 70%;
    overflow: inherit;
    border-bottom: 2px solid #2D3071;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;

}

.grid-item:hover {
  -webkit-opacity: 0.50;
  -moz-opacity: 0.50;
  opacity: 0.50;
}

@media (max-width: 560px) {
    .grid-item {
        width: 90%;
        height: 200px;
    }
}