/* watson loader */
/* ============= */

.watson_loader {
	left:50%;
	top:50%;
	width:60px;
	height:60px;
	margin-top:-30px;
	margin-left:-30px;
	position:absolute;
}

.watson_loader .grey {
	width:100%;
	height:100%;
	position:absolute;
}

.watson_loader .grey .dot {
	width:30%;
	height:30%;
	background-color:white;
	border-radius:50%;
	position:absolute;
	box-shadow: 0 0 5px rgba(0,0,0,0.4);
}

.watson_loader .grey .dot:nth-child(1) {
	top:15%;
}

.watson_loader .grey .dot:nth-child(2) {
	left:17%;
	top:48%;
}

.watson_loader .grey .dot:nth-child(3) {
	top:15%;
	left:35%;
}

.watson_loader .grey .dot:nth-child(4) {
	right:17%;
	top:48%;
}

.watson_loader .grey .dot:nth-child(5) {
	top:15%;
	right:0;
}

.watson_loader .grey .dot.mover {
	-webkit-animation-name: blob_move;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-name: blob_move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.watson_loader .coloured {
	width:100%;
	height:100%;
	position:absolute;
}

.watson_loader .coloured .dot {
	width:20%;
	height:20%;
	margin:5%;
	background-color:green;
	border-radius:50%;
	position:absolute;
}

.watson_loader .coloured .dot.mover {
	-webkit-animation-name: sharp_move;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    
    animation-name: sharp_move;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@-webkit-keyframes blob_move {
    0%   {left:0; top:15%;}
    20%  {left:17%; top:48%;}
    40%  {left:35%; top:15%;}
    60%  {left:53%; top:48%;}
    80%  {left:70%; top:15%;}
    100% {left:0; top:15%;}
}

@-webkit-keyframes sharp_move {
    0%   {background-color:#f40f97;left:0; top:15%;}
    20%  {background-color:#7bd400;left:17%; top:48%;}
    40%  {background-color:#7bd400;left:35%; top:15%;}
    60%  {background-color:#00c1f6;left:53%; top:48%;}
    80%  {background-color:#00c1f6;left:70%; top:15%;}
    100% {background-color:#f40f97;left:0; top:15%;}
}


@keyframes blob_move {
    0%   {left:0; top:15%;}
    20%  {left:17%; top:48%;}
    40%  {left:35%; top:15%;}
    60%  {left:53%; top:48%;}
    80%  {left:70%; top:15%;}
    100% {left:0; top:15%;}
}

@keyframes sharp_move {
    0%   {background-color:#f40f97;left:0; top:15%;}
    20%  {background-color:#7bd400;left:17%; top:48%;}
    40%  {background-color:#7bd400;left:35%; top:15%;}
    60%  {background-color:#00c1f6;left:53%; top:48%;}
    80%  {background-color:#00c1f6;left:70%; top:15%;}
    100% {background-color:#f40f97;left:0; top:15%;}
}






@media screen and (max-width: 591px) {
	.watson_loader {
		width:40px;
		height:40px;
		margin-top:-20px;
		margin-left:-20px;
	}
}