.colorBox {
  display: block;
  text-decoration: none;
  color: black;
}

.colorBox-img {
  position: relative;
  overflow: hidden;
  margin-bottom: 3px;
}

.colorBox-img img {
  max-width: 100%;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.colorBox-mask {
  position: absolute;
  top: -60px;
  left: -10px;
  z-index: 2;
  height: 521px;
  width: 888px;
  opacity: 0.4;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -webkit-transform-origin: 90px 60px;
          transform-origin: 90px 60px;
}

.colorBox-title {
  text-align: center;
  font-weight: 600;
}

.colorBox:hover .colorBox-mask {
  -webkit-transform: scale(3);
          transform: scale(3);
}

.colorBox:hover .colorBox-img img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

.colorBox.colorBox-aktzent-a .colorBox-mask {
  fill: #E72B70;
}

.colorBox.colorBox-aktzent-b .colorBox-mask {
  fill: #baab2c;
}

.colorBox.colorBox-aktzent-c .colorBox-mask {
  fill: #e9a555;
}

.colorBox.colorBox-aktzent-d .colorBox-mask {
  fill: #2fb0de;
}

.colorBox.colorBox-aktzent-e .colorBox-mask {
  fill: #A12581;
}

.colorBox.colorBox-aktzent-f .colorBox-mask {
  fill: #53eb93;
}

.colorBox.colorBox-aktzent-g .colorBox-mask {
  fill: #29645e;
}

.colorBoxLinksBlock {
  overflow: hidden;
}

@media (min-width: 381px) {
  .colorBoxLinksBlock .colorBoxGrid {
    overflow: hidden;
    margin-left: -5px;
  }
}

@media (min-width: 651px) {
  .colorBoxLinksBlock .colorBoxGrid {
    float: left;
    margin-right: 20px;
    width: calc(100% - 225px);
  }
}

@media (min-width: 651px) {
  .colorBoxLinksBlock .linkList {
    float: left;
    width: 210px;
  }
}

.colorBoxGrid > .colorBox {
  margin-bottom: 30px;
}

@media (min-width: 381px) {
  .colorBoxGrid > .colorBox {
    float: left;
    margin-right: 5px;
    margin-left: 5px;
    width: calc(50% - 10px);
  }
}

@media (min-width: 881px) {
  .colorBoxGrid > .colorBox {
    width: calc(33.33% - 10px);
  }
}