#venn-diagram ul {
left: -535px;
position: absolute;
top: 285px;
}

#venn-diagram ul li {
display: inline-block;
font-size: 14px;
height: 32px;
padding-left: 38px;
padding-right: -124px;
padding-top: 9px;
width: 80px;
}

.legend-brian {background: url(../img/legend-brian.png) no-repeat;}
.legend-danny {background: url(../img/legend-danny.png) no-repeat;}
.legend-jonny {background: url(../img/legend-jonny.png) no-repeat;}
.legend-outsider {background: url(../img/legend-outsider.png) no-repeat;}

.circle {
width: 64px;
height: 64px;
position: absolute;
-webkit-border-radius: 64px;
-moz-border-radius: 64px;
border-radius: 64px;
background: no-repeat;
}

.Danny {
background-color: rgba(51,51,51,1);
background-image: url(../img/d.png);
background-position: center;
top: 0px;
left: 0px;
opacity:1;
-webkit-animation-name: danny;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

.Brian {
background-color: rgba(61,169,245,1);
background-image: url(../img/b.png);
background-position: center;
top: 257px;
left: 173px;
opacity:1;
-webkit-animation-name: brian;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

.Jonny {
background-color: rgba(255,91,112,1);
background-image: url(../img/j.png);
background-position: center;
left: 342px;
top: 0px;
opacity:1;
-webkit-animation-name: jonny;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

.other {
background-color: rgba(255,174,110,1);
background-image: url(../img/o.png);
background-position-x: 22px;
background-position-y: 18px;
opacity:0;
top:5px;
left:340px;
-webkit-animation-name: other;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

.venn {
position: absolute;
border: 3px dashed rgba(206,206,206,1);
background-color: rgba(206,206,206,0.2);
}

.one {
top: 0px;
left: 80px;
z-index: 1;
width: 154px;
height: 154px;
-webkit-border-radius: 154px;
-moz-border-radius: 154px;
border-radius: 154px;
-webkit-animation-name: venn1;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

.two {
top: 0px;
left: 160px;
z-index: 2;
width: 154px;
height: 154px;
-webkit-border-radius: 154px;
-webkit-border-radius: 154px;
-moz-border-radius: 154px;
border-radius: 154px;
opacity:1;
-webkit-animation-name: venn2;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

.three {
top: 80px;
left: 120px;
z-index: 3;
width: 154px;
height: 154px;
-webkit-border-radius: 154px;
-webkit-border-radius: 154px;
-moz-border-radius: 154px;
border-radius: 154px;
opacity:1;
-webkit-animation-name: venn3;
-webkit-animation-duration: 15s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}


@-webkit-keyframes 'venn1' {
 
      from {
      	top: 0px;
		left: 80px;
        width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
        -webkit-animation-timing-function: ease-out;
      }
      
      10% {
      	width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
        -webkit-animation-timing-function: ease-out;
      }
      
      15% {
      	top: 0px;
		left: 70px;
      	width: 236px;
		height: 236px;
		-webkit-border-radius: 236px;
        -webkit-animation-timing-function: ease-out;
      }
      
      35% {
      	top: 0px;
		left: 70px;
      	width: 236px;
		height: 236px;
		-webkit-border-radius: 236px;
        -webkit-animation-timing-function: ease-out;
      }
      
      40% {
      	top: 0px;
		left: 60px;
      	width: 266px;
		height: 266px;
		-webkit-border-radius: 266px;
        -webkit-animation-timing-function: ease-out;
      }
      
      60% {
      	top: 0px;
		left: 60px;
      	width: 266px;
		height: 266px;
		-webkit-border-radius: 266px;
        -webkit-animation-timing-function: ease-out;
      }
      
      65% {
      	top: 0px;
		left: 50px;
      	width: 306px;
		height: 306px;
		-webkit-border-radius: 306px;
        -webkit-animation-timing-function: ease-out;
      }
      
      85% {
      	top: 0px;
		left: 50px;
      	width: 306px;
		height: 306px;
		-webkit-border-radius: 306px;
        -webkit-animation-timing-function: ease-out;
      }
 
      to {
      	top: 0px;
		left: 80px;
        width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
        -webkit-animation-timing-function: ease-in;
      }
      
}

@-webkit-keyframes 'venn2' {
 
      from {
        top: 0px;
		left: 160px;
		z-index: 2;
		width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      10% {
      	top: 0px;
		left: 160px;
		z-index: 2;
		width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      15% {
      	top: 123px;
		left: 206px;
		z-index: 2;
		width: 143px;
		height: 143px;
		-webkit-border-radius: 143px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      35% {
      	top: 123px;
		left: 206px;
		z-index: 2;
		width: 143px;
		height: 143px;
		-webkit-border-radius: 143px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      40% {
      	top: 69px;
		left: 280px;
		z-index: 2;
		width: 98px;
		height: 98px;
		-webkit-border-radius: 98px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      60% {
      	top: 69px;
		left: 280px;
		z-index: 2;
		width: 98px;
		height: 98px;
		-webkit-border-radius: 98px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      65% {
      	top: 69px;
		left: 280px;
		z-index: 2;
		width: 98px;
		height: 98px;
		-webkit-border-radius: 98px;
		opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
      85% {
      	top: 69px;
		left: 280px;
		z-index: 2;
		width: 98px;
		height: 98px;
		-webkit-border-radius: 98px;
		opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
 
      to {
        top: 0px;
		left: 160px;
		z-index: 2;
		width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
}

@-webkit-keyframes 'venn3' {
 
      from {
        top: 80px;
		left: 120px;
		z-index: 3;
		width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      10% {
      	top: 80px;
		left: 120px;
		z-index: 3;
		width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
		opacity:1;
        -webkit-animation-timing-function: ease-out
      }
      
      15% {
      	top: 119px;
		left: 254px;
		z-index: 2;
		width: 130px;
		height: 130px;
		-webkit-border-radius: 130px;
      	opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
      35% {
      	top: 119px;
		left: 254px;
		z-index: 2;
		width: 130px;
		height: 130px;
		-webkit-border-radius: 130px;
      	opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
      40% {
      	top: 119px;
		left: 254px;
		z-index: 2;
		width: 130px;
		height: 130px;
		-webkit-border-radius: 130px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      60% {
      	top: 119px;
		left: 254px;
		z-index: 2;
		width: 130px;
		height: 130px;
		-webkit-border-radius: 130px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      65% {
      	top: 119px;
		left: 254px;
		z-index: 2;
		width: 130px;
		height: 130px;
		-webkit-border-radius: 130px;
      	opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
      85% {
      	top: 119px;
		left: 254px;
		z-index: 2;
		width: 130px;
		height: 130px;
		-webkit-border-radius: 130px;
      	opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
 
      to {
        top: 80px;
		left: 120px;
		z-index: 3;
		width: 154px;
		height: 154px;
		-webkit-border-radius: 154px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
}

@-webkit-keyframes 'danny' {
 
      from {
        top: 0px;
		left: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      10% {
        top: 0px;
		left: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      15% {
      	top: 0px;
		left: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      35% {
      	top: 0px;
		left: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      40% {
      	top: 0px;
		left: 0px;
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
      
      60% {
      	top: 0px;
		left: 0px;
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
      
      65% {
      	top: 0px;
		left: 0px;
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
      
      85% {
      	top: 0px;
		left: 0px;
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
 
      to {
        top: 0px;
		left: 0px;
		opacity:1;
		-webkit-animation-timing-function: ease-in;
      }
      
}

@-webkit-keyframes 'brian' {
 
      from {
        top: 257px;
		left: 173px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      10% {
        top: 257px;
		left: 173px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      15% {
      	top: 257px;
		left: 340px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      35% {
      	top: 257px;
		left: 340px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      40% {
      	top: 257px;
		left: 340px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      60% {
      	top: 257px;
		left: 340px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      65% {
      	top: 257px;
		left: 340px;
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
      
      85% {
      	top: 257px;
		left: 340px;
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
 
      to {
        top: 257px;
		left: 173px;
		opacity:1;
		-webkit-animation-timing-function: ease-in;
      }
      
}

@-webkit-keyframes 'jonny' {
 
      from {
        left: 342px;
		top: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      10% {
        left: 342px;
		top: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-out;
      }
      
      15% {
      	left: 342px;
		top: 0px;
		opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
      35% {
      	left: 0px;
		top: 0px;;
		opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
      40% {
      	top: 0px;
		left: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      60% {
      	top: 0px;
		left: 0px;
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      65% {
      	top: 0px;
		left: 0px;
		opacity:1
        -webkit-animation-timing-function: ease-in;
      }
      
      85% {
      	top: 0px;
		left: 0px;
		opacity:1
        -webkit-animation-timing-function: ease-in;
      }
 
      to {
        left: 342px;
		top: 0px;
		opacity:1;
		-webkit-animation-timing-function: ease-in;
      }
      
}

@-webkit-keyframes 'other' {
 
      from {
		opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
      35% {
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
      
      40% {
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      60% {
		opacity:1;
        -webkit-animation-timing-function: ease-in;
      }
      
      65% {
		opacity:0;
        -webkit-animation-timing-function: ease-in;
      }
 
      to {
        opacity:0;
        -webkit-animation-timing-function: ease-out;
      }
      
}