/* CSS Document */

.jigsaw1, .jigsaw2, .jigsaw3, .jigsaw4{
  width: 6em;
  height: 6em;
  margin: 50px;
  position: relative;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  cursor: pointer;
}

.jigsaw1,
.jigsaw1 span {
 background-color: #0284cf; 
}

.jigsaw2,
.jigsaw2 span {
 background-color: #00008B; 
}

.jigsaw3,
.jigsaw3 span {
 background-color: #84cf00; 
}

.jigsaw4,
.jigsaw4 span {
 background-color: #cf008B; 
}


.text {
  display: block;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  padding: 1.9em 0 0 1.2em;
  position: relative;
  background: transparent !important;
}

.jigsaw1 .t, .jigsaw2 .t, .jigsaw3 .t, .jigsaw4 .t {
 width: 2em;
  height: 2em;
  position: absolute;
  top: -1.5em;
  left: 2em;
  -webkit-border-radius: 4em;
  -moz-border-radius: 4em;
  border-radius: 4em;
}

.jigsaw1 .r, .jigsaw2 .r, .jigsaw3 .r, .jigsaw4 .r {
 width: 2em;
  height: 2em;
  position: absolute;
  top: 2em;
  left: 5.5em;
  -webkit-border-radius: 4em;
  -moz-border-radius: 4em;
  border-radius: 4em;
}

.jigsaw1 .b, .jigsaw2 .b, .jigsaw3 .b, .jigsaw4 .b { 
 width: 1.8em;
  height: 1.8em;
  position: absolute;
  top: 4.5em;
  left: 2.2em;
  -webkit-border-radius: 4em;
  -moz-border-radius: 4em;
  border-radius: 4em;
  background-color: #fff;
}

.jigsaw1 .l, .jigsaw2 .l, .jigsaw3 .l, .jigsaw4 .l { 
 width: 1.8em;
  height: 1.8em;
  position: absolute;
  top: 2.2em;
  left: -.4em;
  -webkit-border-radius: 4em;
  -moz-border-radius: 4em;
  border-radius: 4em;
  background-color: #fff;
}