ul.notes li {
  margin: 10px 40px 50px 0px;
  float: left;
}

ul.notes li, ul.tag-list li {
  list-style: none;
}

ul.notes li div small {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
}

div.rotate {
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
}

div.rotate-1 {
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform: rotate(-6deg);
}

div.rotate-2 {
  -o-transform: rotate(4deg);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  position: relative;
  top: 5px;
}

.lazur-bg {
  background-color: #23c6c8;
  color: #ffffff;
}

.red-bg {
  background-color: #ed5565;
  color: #ffffff;
}

.navy-bg {
  background-color: #1ab394;
  color: #ffffff;
}

.yellow-bg {
  background-color: #f8ac59;
  color: #ffffff;
}

ul.notes li div h6 {
  position: absolute;
  bottom: 5px;
  right: 5px;
  font-size: 12px;
}

ul.notes li div a {
  position: absolute;
  bottom: 10px;
  left: 5px;
  font-size: 12px;
}

ul.notes li div {
  text-decoration: none;
  color: #000;
  display: block;
  height: 210px;
  width: 210px;
  padding: 1em;
  -moz-box-shadow: 5px 5px 7px #212121;
  -webkit-box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  box-shadow: 5px 5px 7px rgba(33, 33, 33, 0.7);
  -moz-transition: -moz-transform 0.15s linear;
  -o-transition: -o-transform 0.15s linear;
  -webkit-transition: -webkit-transform 0.15s linear;
}

.cardcolumn {
  float: left;
  width: 35%;
  margin-bottom: 16px;
  padding: 0 15px;
}

@media (max-width: 250px) {
  .cardcolumn {
    width: 100%;
    display: block;
  }
}

.card {
  box-shadow: 0 8px 12px 0 rgba(78, 2, 4, 0.2);
  height: auto;
}

.cardcontainer {
  padding: 0 18px;
}

.cardcontainer::after, .row::after {
  content: "";
  clear: both;
  display: table;
  background-color: #111;
}

.cardtitle {
  color: grey;
}