@charset "utf-8";
/* CSS Document */

.grid {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	padding-bottom:50px;
}

.grid::after {
  content: "";
  display: block;
  clear: both;
}

.grid-item {
  width: 21.833%;
  padding-bottom: 21.833%;
  overflow: hidden;
  float: left;
  background: #BBB;
  transform: rotate(45deg);
  margin: 5.5%;
  margin-top: -11%;
}

.grid-item:nth-child(1),
.grid-item:nth-child(2),
.grid-item:nth-child(3) {
   margin-top: 5%;
}

.grid-item:nth-child(5n+4) {
    margin-left: 21.9%;
}

.grid-item:nth-child(5n+6) {
    clear:left;
}

.grid-item:nth-child(5n+6):last-of-type {
  margin-left: 38.25%;
}

.grid-item:hover {
  background: #FFF;
}

.grid-inner {
	box-sizing: border-box;
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-45deg) scale(2);
	text-align: center;
	padding-top: 44%;
	font-size: 2em;
	background-image:url(gfx/hpmaron-compressor.jpg);
	color:#fff;
	font-size:18px;
	font-weight:700;
	cursor:default;
}
.grid-inner.rosso {
	background-image:url(gfx/hparancio-compressor.jpg);
}
.grid-inner.chiaro {
	background-image:url(gfx/hpmaron2-compressor.jpg);
}
.grid-inner:hover {
	/*background-image:url(gfx/hparancio-compressor.jpg);*/
}