html, body,
h1, h2, h3, h4, h5, h6,
a, p, span,
em, small, strong,
sub, sup,
mark, del, ins, strike,
abbr, dfn,
blockquote, q, cite,
code, pre,
ol, ul, li, dl, dt, dd,
div, section, article,
main, aside, nav,
header, hgroup, footer,
img, figure, figcaption,
address, time,
audio, video,
canvas, iframe,
details, summary,
fieldset, form, label, legend,
table, caption,
tbody, tfoot, thead,
tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

body{
  background: #fafafa;

}
header{
  width:100%;

  padding-bottom:40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

header svg{
  display: block;
  width: 80px;
  height:auto;
}
main {
  padding-left:4%;
  padding-right:4%;
  max-width:1400px;
  margin:0 auto;
  display:block;
  padding-top:40px;
}
main ul{
  padding:0;
  margin:0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

main ul li{
 padding: 1.5%;
  width:25%;
  box-sizing: border-box;
}
@media(max-width: 1199px){
  main ul li{
    width:33.33333333333%;
  }
}

main ul li img{
  width: 100%;
  height: auto;
  border:solid 1px #ccc;
  display: block;
}
main ul li a.disabled{
  opacity: 0.3;
  pointer-events: none !important;
}
main ul li a{
  display:block;
}
main ul li a[data-versione]{
  position:relative;
}
main ul li a[data-versione]::after{
  content:'V. 'attr(data-versione);
  position:absolute;
  bottom: 1px;
  right: -1px;
  font-family: 'Arial', sans-serif;
  background:#000;
  color:#fff;
  font-weight: bold;
  font-size: 10px;
  padding:4px 8px;
  pointer-events: none;
}
main ul li a[data-versione="DEMO"]::after{
    content:attr(data-versione);
}
main ul li a[data-versione="0.0"] img,
main ul li a[data-versione="DEBUG"] img{
    filter:grayscale(100%);
}
main ul li a[data-versione="COMING SOON"]{
  overflow: hidden;
  border:solid 1px #ccc;
}
main ul li a[data-versione="COMING SOON"] img{
  filter:blur(5px) grayscale(100%);
}

main ul li a[data-versione="DEBUG"]::after{
    background:#f00;
}

main ul li a[data-chant]::before{
  content:attr(data-chant);
  position:absolute;
  bottom: 0;
  left: 0;
  font-family: 'Arial', sans-serif;
  background:#ccc;
  color:#333;
  font-weight: bold;
  font-size: 10px;
  padding:4px 8px;
  pointer-events: none;
  text-transform: uppercase;
  z-index:1;
}