@charset "UTF-8";

input[type="radio"] {
    display:none;
}
label.filtr {
  width:23%;
  float:left;
  text-align:center;
  background:none;
  color:#BBBBBB;
  padding:0.5%;
  margin:0.5%;
  margin-bottom:30px;
  margin-top:20px;
  cursor:pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
transform:rotate(340deg); -webdesignkit-transform:rotate(340deg); 
-moz-transform:rotate(340deg); -o-transform:rotate(340deg);
}
input[type="radio"][id="identyfikacja"]:checked + label {
  color:#000;
}
input[type="radio"][id="identyfikacja"]:checked ~ .druk, input[type="radio"][id="identyfikacja"]:checked ~ .webdesign {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="druk"]:checked + label {
  color:#000;
}
input[type="radio"][id="druk"]:checked ~ .identyfikacja, input[type="radio"][id="druk"]:checked ~ .webdesign {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}
input[type="radio"][id="webdesign"]:checked + label {
  color:#000;
}
input[type="radio"][id="webdesign"]:checked ~ .identyfikacja, input[type="radio"][id="webdesign"]:checked ~ .druk {
  width:0;
  height:0;
  padding:0;
  margin:0;
  opacity:0;
}

.tile {
  width:300px;
  height:300px;
  float:left;
  transition:all 0.5s;
  margin:8px;
  padding:0;
}

.webdesign {
  background:none;
}
.identyfikacja {
  background:none;
}
.druk {
  background:none;
}


@media screen and (max-width: 980px) {

.tile {
  float:left;
  width:42%;
  height:42%;  
  margin:4%;
}

}

@media screen and (max-width: 500px) {

.tile {
  width:300px;
  height:300px;
  float:none;
  margin:8px auto;
  padding:0;
}

label.filtr {
  font-size: 12px;
  transform:rotate(300deg); -webdesignkit-transform:rotate(300deg); 
-moz-transform:rotate(300deg); -o-transform:rotate(300deg);
  }

}