$width: 40px;
$height: 40px;
$dark: #3C993E  ;
$light: #93FF41;
$flower1: #FFF;
$flower2: #B63762;

body {
  background: lighten($light, 15%);
}

.container {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  width: 19*$width;
  min-width: 19*$width;
  height: 14*$width;
  overflow: hidden;
  position: relative;
}

.content:hover {
  .diag1:before,
  .diag1:after,
  .diag2:before,
  .diag2:after,
  .diag3:before,
  .diag3:after,
  .diag4:before,
  .diag4:after,
  .up:before,
  .up:after,
  .left:before,
  .left:after,
  .right:before,
  .right:after,
  .down:before,
  .down:after
    {
      display: none;
    }
}

.box {
  width: $width;
  height: $height;
  background: $dark;
  padding: 0;
  margin: 0;
  float:left;
  position: relative;
}

$minibox: 0.25 * $width;
@mixin littlebox {
  width: $minibox;
  height: $minibox;
  position: absolute;
  content: "";
  margin: 0 * $width;
  border-radius: 0px 0px;
  transform: rotate(45deg);
  z-index: 10;
}

@mixin lower-right {
  @include littlebox;
  bottom: -0.1*$width;
  right: -0.1*$width;
}

.pink:after {
  @include lower-right;
  background: $flower2;
}
.white:after {
  @include lower-right;
  background: $flower1;
}

// Alternating the colors.
.box:nth-child(2n) {
  background: $light;
}

@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans);

body {
  color: #000;
  font-size: 1.25em;
  text-align: center;
  width: 100%;
  font-family: Open Sans, sans-serif; 
  margin: 0%;
}
a, 
a:hover, 
a:visited {
  color: blue;
  text-decoration: none;
}

.caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 20;
  text-align: center;
  background: lighten($light, 20%);
}