/* 1  */
.jigsaw1 {
 font-size: 12px; 
  width: 6em;
  height: 6em;
  margin: 50px;
  position: relative;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
}

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

.jigsaw1 .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 {
 width: 2em;
  height: 2em;
  position: absolute;
  top: 2em;
  left: 5.5em;
  -webkit-border-radius: 4em;
  -moz-border-radius: 4em;
  border-radius: 4em;
}

.jigsaw1 .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 { 
 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;
}	
	
	
/* 2 */	
.jigsaw2 {
 font-size: 12px;
  width: 6em;
  height: 6em;
  margin: 50px;
  position: relative;
  border-radius: 6%;
  background-color: #0284cf;
}

.jigsaw2:before {
  content: "";
  width: 1.8em;
  height: 1.8em;
  position: absolute;
  top: 2.2em;
  left: -.4em;
  border-radius: 50%;
  background-color: #fff;
}

.jigsaw2:after {
  content: "";
  width: 2em;
  height: 2em;
  position: absolute;
  top: 2em;
  left: 5.5em;
  border-radius: 50%;
  background-color: #0284cf;
}

.jigsaw2 span {
  display: block;
  position: absolute;
  width: 2em;
  height: 2em;
  position: absolute;
  top: -1.5em;
  left: 2em;
  border-radius: 50%;
  background-color: #0284cf;
}

.jigsaw2 span:before {
  content: "";
  width: 1.8em;
  height: 1.8em;
  position: absolute;
  top: 6em;
  left: .2em;
  border-radius: 50%;
  background-color: #fff;
}	

/* 3 */	
.jigsaw3 {
 font-size: 12px;
  width: 6em;
  height: 6em;
  background-color: #0284cf;
  margin: 50px;
  border-radius: 6%;
  position: relative;
}

.jigsaw3:before {
  position: absolute;
  top: -13px;
  left: -15px;

  width: 370px;
  height: 444px;
  content: ".";
  font-size: 175px;
  letter-spacing: 50px;
  line-height: 0;
  color: #fff;

  background:
    -webkit-radial-gradient(91px 50px, circle, #0284cf 2px, transparent 0px);
}

.jigsaw3:after {
  position: absolute;
  top: -83px;
  left: 15px;

  width: 370px;
  height: 444px;
  content: ".";
  font-size: 175px;
  color: #fff;

  background:
    -webkit-radial-gradient(21px 77px, circle, #0284cf 2px, transparent 0);
}