@charset "UTF-8";

#dot-box {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	z-index: 0;
    top: 0;
}

.layer {
    position: absolute;
	display: block;
    left:50%;
    top:50%;
}
#l1 {
	z-index: 1;
}
#l2 {
	z-index: 2;
}
#l3 {
	z-index: 3;
}
#l4 {
	z-index: 4;
}

.layer > [class*='dot-']{
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position:absolute;
}
.layer#l1 > [class*='dot-']{
	width: 8px;
	height: 8px;
}
.layer#l2 > [class*='dot-']{
	width: 12px;
	height: 12px;
}
.layer#l3 > [class*='dot-']{
	width: 20px;
	height: 20px;
}
.layer#l4 > [class*='dot-']{
	width: 26px;
	height: 26px;
}

.red{
    background: #5b1ca5;
}
.blue{
    background: #075470;
}
.green{
    background: #16afbf;
}
.yellow{
    background: #fffbc6;
}
.orange{
    background: #ed4e06;
}
#l1 .dot-1{
	left:350px;
  top:303px;
}
#l1 .dot-2{
	left:380px;
  top:230px;
}
#l1 .dot-3{
	left:-650px;
  top:350px;
}
#l1 .dot-4{
	left:480px;
  top:256px;
}
#l1 .dot-5{
	left:390px;
  top:120px;
}
#l1 .dot-6{
	left:440px;
  top:220px;
}
#l1 .dot-7{
	left:-604px;
  top:217px;
}
#l2 .dot-1{
	left:420px;
  top:332px;
}
#l2 .dot-2{
	left:290px;
  top:280px;
}
#l2 .dot-3{
	left:380px;
  top:250px;
}
#l2 .dot-4{
	left:-530px;
  top:190px;
}
#l2 .dot-5{
	left:110px;
  top:150px;
}
#l2 .dot-6{
	left:330px;
  top:139px;
}
#l3 .dot-1{
	left:-690px;
  top:120px;
}
#l3 .dot-2{
	left:450px;
  top: 144px;
}
#l3 .dot-3{
	left: 480px;
    top: 183px;
}
#l3 .dot-4{
	left:130px;
  top:150px;
}
#l3 .dot-5{
	left:-650px;
  top:240px;
}
#l3 .dot-6{
	left:750px;
  top:334px;
}
#l4 .dot-1{
	left:350px;
  top:260px;
}
#l4 .dot-2{
	left:310px;
  top:180px;
}
#l4 .dot-3{
	left:280px;
  top:247px;
}
#l4 .dot-4{
	left:430px;
  top:343px;
}
#l4 .dot-5{
	left:160px;
  top:160px;
}
#l4 .dot-6{
	left:610px;
  top:290px;
}