.wheel svg {
	display: none;
}

#circle {
	display: none;
}


@media only screen and (min-width : 768px) {

	.wheel {
		width: 300px;
		height: 300px;
	    margin: 150px auto 140px auto;
		position: relative;
	}

	.wheel svg {
		position: absolute;
		display: block;
	}

	.wheel ul li:before {
		content: "";
		border: 0;
	}

	.wheel-inner {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
		width: 100%;
	}

	.wheel-inner h3 {
		font-size: 18px;
		font-weight: bold;
		line-height: 20px;
		color: #004A7C;	
		margin: 0 0 10px;
		text-transform: uppercase;
		text-align: center;
		max-width: 200px;
		margin: 0 auto 10px;
	}

  	.wheel-inner img {
  		margin: 0 0 10px 0!important;
      	vertical-align: initial;
	}

	.wheel-inner p {
		font-size: 14px;
		line-height: 16px;
		margin-bottom: 5px;
	}


	/*
	=====================================================================================================
		Lines
	=====================================================================================================

	*/

	#circle { 
		display: block;
		list-style: none; 
		position: relative;
		top: 150px;
		left: 150px;
		z-index: -1;
	}

	#circle li {
		position: absolute;
		top: 0;
		left: 0;
		width: 0px;
		height: 4px;
		background: #0096d7;
		-moz-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	#circle li.line4,
	#circle li.line6,
	#circle li.line8 {
		background: #004b7d; 
	}


	/*
	=====================================================================================================
		Animate lines 
		first arc 0° - first line 45°
	=====================================================================================================
	*/

	.running .line1 {
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);

		-moz-animation: move-m 0.8s linear forwards;
		-webkit-animation: move-m 0.8s linear forwards;
		animation: move-m 0.8s linear forwards;

		-moz-animation-delay: 0.7s;
		-webkit-animation-delay: 0.7s;
		animation-delay: 0.7s;
	}

	.running .line3 {
		-moz-transform: rotate(135deg);
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);

		-moz-animation: move-m 0.8s linear forwards;  
		-webkit-animation: move-m 0.8s linear forwards;
		animation: move-m 0.8s linear forwards;

		-moz-animation-delay: 0.6s; 
		-webkit-animation-delay: 0.6s; 
		animation-delay: 0.6s;	
	}

	.running .line4 {
		-moz-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg); 

		-moz-animation: move-s 0.8s linear forwards;  
		-webkit-animation: move-s 0.8s linear forwards;
		animation:move-s 0.8s linear forwards;

		-moz-animation-delay: 0.5s;
		-webkit-animation-delay: 0.5s; 
		animation-delay: 0.5s;	
	}

	.running .line5 {
		-moz-transform: rotate(225deg);  
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);

		-moz-animation: move-l 0.8s linear forwards; 
		-webkit-animation: move-l 0.8s linear forwards;
		animation: move-l 0.8s linear forwards;

		-moz-animation-delay: 0.4s; 
		-webkit-animation-delay: 0.4s; 
		animation-delay: 0.4s;	
	}

	.running .line6 {
		-moz-transform: rotate(-90deg); 
		-webkit-transform: rotate(-90deg);
		transform: rotate(-90deg);

		-moz-animation: move-xl 0.7s linear forwards; 
		-webkit-animation: move-xl 0.7s linear forwards;
		animation: move-xl 0.7s linear forwards;

		-moz-animation-delay: 0.35s; 
		-webkit-animation-delay: 0.35s; 
		animation-delay: 0.35s;
	}

	.running .line7 {
		-moz-transform: rotate(-45deg); 
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg); 

		-moz-animation: move-m 0.7s linear forwards;  
		-webkit-animation: move-m  0.7s linear forwards;
		animation: move-m  0.7s linear forwards;

		-moz-animation-delay: 0.2s; 
		-webkit-animation-delay: 0.2s; 
		animation-delay: 0.2s;
	}

	.running .line8 {
		-moz-transform: rotate(0deg); 
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg); 

		-moz-animation: move-xs 0.6s linear forwards;  
		-webkit-animation: move-xs  0.6s linear forwards;
		animation: move-xs  0.6s linear forwards;

		-moz-animation-delay: 0.1s; 
		-webkit-animation-delay: 0.1s; 
		animation-delay: 0.1s;
	}


	/*
	=====================================================================================================
		Dots: positioning & animation delay 
		
		dot delay = Line animation duration + line animation delay
	=====================================================================================================
	*/

	.dot {
		width: 10px;
		height: 10px;
		border-radius: 100%;
		position: absolute;
		top: -3px;
		z-index: 99;
		-moz-transform: scale(0);
		-moz-animation: point 0.1s linear forwards;
		-webkit-transform: scale(0);
		-webkit-animation: point 0.1s linear forwards;
		transform: scale(0);
		animation: point 0.1s linear forwards; 
	}

	.line1 .dot,
	.line3 .dot,
	.line5 .dot,
	.line7 .dot {
		background-color: #0096d7;
	}

	.line2 .dot,
	.line4 .dot,
	.line6 .dot,
	.line8 .dot {
		background-color: #004b7d;
	}

	#layerdot1 { 
		left: 220px;
		-moz-animation-delay: 1.5s;
		-webkit-animation-delay: 1.5s;
		animation-delay: 1.5s;
	}

	#layerdot3 {
		left: 219px;
		-moz-animation-delay: 1.4s;
		-webkit-animation-delay: 1.4s;
		animation-delay: 1.4s;
	}

	#layerdot4 {
		left: 194px;
		-moz-animation-delay: 1.3s;
		-webkit-animation-delay: 1.3s;
		animation-delay: 1.3s;
	}

	#layerdot5 {
		left: 244px;
		-moz-animation-delay: 1.2s;
		-webkit-animation-delay: 1.2s;
		animation-delay: 1.2s;
	}

	#layerdot6 {
		left: 270px;
		-moz-animation-delay: 1.05s;
		-webkit-animation-delay: 1.05s;
		animation-delay: 1.05s;
	}

	#layerdot7 {
		left: 220px; 
		-moz-animation-delay: 0.9s;
		-webkit-animation-delay: 0.9s;
		animation-delay: 0.9s;
	}	

	#layerdot8 {
		left: 170px;
		-moz-animation-delay: 0.7s;
		-webkit-animation-delay: 0.7s;
		animation-delay: 0.7s;
	}


	/*
	=====================================================================================================
		Labels
	=====================================================================================================
	*/

	ul#services {
		list-style: none;
	}

	ul#services > li { 
		position: absolute; 
		text-decoration: none;
		opacity: 0;
		font-weight: bold;
		font-size: 16px;
		width: 170px;
	}

	ul#services > li a {
		color: #333;
	}
	
	ul#services li .num {
		color: #0096d7;
		font-weight: bold;
		font-size: 22px;
		display: inline-block;
	}

	ul#services li .bigNum {
		font-size: 42px;
		float: left;
		line-height: 36px;
		margin-right: 5px;
	}

	ul#services #serviceLabel2 .num,
	ul#services #serviceLabel4 .num,
	ul#services #serviceLabel6 .num,
	ul#services #serviceLabel8 .num {
		color: #004b7d;
	}


	/*
	=====================================================================================================
		Animate labels
	=====================================================================================================
	*/

	#serviceLabel1 {
		-moz-animation: tooltip 1s 1.6s linear forwards; 
		-webkit-animation: tooltip 1s 1.6s linear forwards;
		animation: tooltip 1s 1.6s linear forwards;
		top: 300px;
    	left: 321px
	}

	#serviceLabel3 {
		-moz-animation: tooltip 1s 1.5s linear forwards; 
		-webkit-animation: tooltip 1s 1.5s linear forwards;
		animation: tooltip 1s 1.5s linear forwards;
   	 	top: 296px;
    	left: -182px;
	}

	#serviceLabel4 {
		-moz-animation: tooltip 1s 1.4s linear forwards; 
		-webkit-animation: tooltip 1s 1.4s linear forwards;
		animation: tooltip 1s 1.4s linear forwards;
		top: 137px;
		left: -200px;
	}

	#serviceLabel5 {
		-moz-animation: tooltip 1s 1.3s linear forwards;  
		-webkit-animation: tooltip 1s 1.3s linear forwards;
		animation: tooltip 1s 1.3s linear forwards; 
		top: -39px;
		left: -182px;
	}

	#serviceLabel6 {
		-moz-animation: tooltip 1s 1.15s linear forwards;  
		-webkit-animation: tooltip 1s 1.15s linear forwards;
		animation: tooltip 1s 1.15s linear forwards;
		top: -136px;
		left: 166px;
	}

	#serviceLabel7 { 
		-moz-animation: tooltip 1s 1s linear forwards;  
		-webkit-animation: tooltip 1s 1s linear forwards;
		animation: tooltip 1s 1s linear forwards;
		top: -20px;
		left: 325px;
	}

	#serviceLabel8 { 
		-moz-animation: tooltip 1s 0.8s linear forwards;  
		-webkit-animation: tooltip 1s 0.8s linear forwards;
		animation: tooltip 1s 0.8s linear forwards;
		top: 141px;
		left: 339px;		
	}	

	.cws-detail {
		font-weight: 400;
		font-size: 14px;
		padding: 0;
		list-style: none;
		margin-top: 5px;
		color: #333;
	}

	.cws-detail li {
		line-height: 18px;
		margin-bottom: 5px;
	}

}

/*
=====================================================================================================
	Lines animation
=====================================================================================================
*/

@-moz-keyframes move-xs {
	0%   { width: 0px;}
	100% { width: 175px; }
}

@-moz-keyframes move-s {
	0%   { width: 0px;}
	100% { width: 200px; }
}

@-moz-keyframes move-m {
	0%   { width: 0px;}
	100% { width: 225px; }
}

@-moz-keyframes move-l {
	0%   { width: 0px;}
	100% { width: 250px; }
}

@-moz-keyframes move-xl {
	0%   { width: 0px;}
	100% { width: 275px; }
}

@-webkit-keyframes move-xs {
	0%   { width: 0px;}
	100% { width: 175px; }
}

@-webkit-keyframes move-s {
	0%   { width: 0px;}
	100% { width: 200px; }
}

@-webkit-keyframes move-m {
	0%   { width: 0px;}
	100% { width: 225px; }
}

@-webkit-keyframes move-l {
	0%   { width: 0px;}
	100% { width: 250px;}
}

@-webkit-keyframes move-xl {
	0%   { width: 0px;}
	100% { width: 275px; }
}

@keyframes move-xs {
	0%   { width: 0px;}
	100% { width: 175px; }
}

@keyframes move-s {
	0%   { width: 0px;}
	100% { width: 200px; }
}

@keyframes move-m {
	0%   { width: 0px;}
	100% { width: 225px; }
}

@keyframes move-l {
	0%   { width: 0px;}
	100% { width: 250px;}
}

@keyframes move-xl {
	0%   { width: 0px;}
	100% { width: 275px; }
}

/*
=====================================================================================================
	Dots animation
=====================================================================================================
*/

@-moz-keyframes point {
	0%  {-moz-transform: scale(0,0);}
	100%{-moz-transform: scale(1,1);}	
}

@-webkit-keyframes point {
	0%  {-webkit-transform: scale(0,0);}
	100%{-webkit-transform: scale(1,1);}	
}

@keyframes point {
	0%  {transform: scale(0,0);}
	100%{transform: scale(1,1);}	
}

/*
=====================================================================================================
	Label animation
=====================================================================================================
*/

@-moz-keyframes tooltip {
	0%  { opacity: 0;}
	100%{ opacity: 1;}
}

@-webkit-keyframes tooltip {
	0%  { opacity: 0;}
	100%{ opacity: 1;}
}

@keyframes tooltip {
	0%  { opacity: 0;}
	100%{ opacity: 1;}
}