
/** MAP ANIMATION **/

.btc-icon-s, .btc-icon-r, .ltc-icon-r, .eth-icon-r, .usdt-icon-r, .bch-icon-r, .usdc-icon-r, .xrp-icon-r, .ada-icon-r {
		opacity: 0;
	}
	
	.btc-icon-s {
		opacity: 1;
		animation: coinShow 1s linear forwards;
		animation-delay: 1.2s;
	}
	
	
	.btc-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 1s;
	}
	
	
	
	.btc-icon-s path {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 0.2s;
	}
	
	
	
	.ltc-icon-s {
		opacity: 0;
		animation: coinShowR 1.5s linear forwards;
		animation-delay: 2.5s;
	}
	
	
	.ltc-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 3s;
	}
	
	.ltc-icon-s path {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 2.2s;
	}
	
	
	
	.eth-icon-s {
		opacity: 0;
		animation: coinShowR 1.5s linear forwards;
		animation-delay: 4s;
	}
	
	
	.eth-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 4.5s;
	}
	
	.eth-icon-s g {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 3.7s;
	}
	
	
	
	
	.usdt-icon-s {
		opacity: 0;
		animation: coinShowR 1.5s linear forwards;
		animation-delay: 6.5s;
	}
	
	
	.usdt-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 7s;
	}
	
	.usdt-icon-s path {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 6.2s;
	}
	
	
	.bch-icon-s {
		opacity: 0;
		animation: coinShowR 1.5s linear forwards;
		animation-delay: 8.5s;
	}
	
	
	.bch-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 9s;
	}
	
	.bch-icon-s path {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 8.2s;
	}
	
	
	
	.usdc-icon-s {
		opacity: 0;
		animation: coinShowR 1.5s linear forwards;
		animation-delay: 10.5s;
	}
	
	
	.usdc-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 11s;
	}
	
	.usdc-icon-s path {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 10.2s;
	}
	
	
	.xrp-icon-s {
		opacity: 0;
		animation: coinShowR 1.5s linear forwards;
		animation-delay: 12.5s;
	}
	
	
	.xrp-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 13s;
	}
	
	.xrp-icon-s path {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 12.2s;
	}
	
	
	
	.ada-icon-s {
		opacity: 0;
		animation: coinShowR 1.5s linear forwards;
		animation-delay: 14.5s;
	}
	
	
	.ada-icon-s circle {
		r:0.8%;
		animation: coinShowCircle 2s linear forwards;
		animation-delay: 15s;
	}
	
	.ada-icon-s path {
		opacity: 0;
		animation: coinShowPath 2s linear forwards;
		animation-delay: 14.2s;
	}
	
	
	.btc-line {
	 	stroke-dasharray: 1000;
  		stroke-dashoffset: 1000;
  		animation: dash 2s cubic-bezier(0, 0.15, 0.65, 1) forwards;
		animation-delay: 1.5s;
	}
	
	.ltc-line {
	 	stroke-dasharray: 1000;
  		stroke-dashoffset: 1000;
  		animation: dashR 4s cubic-bezier(0, 0.15, 1, 1) forwards;
		animation-delay: 1s;
	}
	
	.eth-line {
	 	stroke-dasharray: 500;
  		stroke-dashoffset: 500;
  		animation: dashE 2s cubic-bezier(0, 0.15, 0.65, 1) forwards;
		animation-delay: 5s;
	}
	
	.usdt-line {
	 	stroke-dasharray: 800;
  		stroke-dashoffset: 800;
  		animation: dashRR 3.5s cubic-bezier(0, 0.15, 1, 1) forwards;
		animation-delay: 5s;
	}
	
	.bch-line {
	 	stroke-dasharray: 1000;
  		stroke-dashoffset: 1000;
  		animation: dash 3s cubic-bezier(0, 0.15, 0.65, 1) forwards;
		animation-delay: 9.3s;
	}
	
	
	.usdc-line {
	 	stroke-dasharray: 1000;
  		stroke-dashoffset: 1000;
  		animation: dashR 3.5s cubic-bezier(0, 0.15, 1, 1) forwards;
		animation-delay: 9.5s;
	}
	
	
	.xrp-line {
	 	stroke-dasharray: 500;
  		stroke-dashoffset: 500;
  		animation: dashE 2.5s cubic-bezier(0, 0.15, 1, 1) forwards;

		animation-delay: 13.7s;
	}
	
	.ada-line {
	 	stroke-dasharray: 800;
  		stroke-dashoffset: 800;
  		animation: dashRR 4s cubic-bezier(0, 0.15, 1, 1) forwards;
		animation-delay: 13.5s;
	}
	
	.btc-icon-r {
		opacity: 0;
		animation: showSecR 2.5s linear forwards;
		animation-delay: 1.5s
	}
	
	.ltc-icon-r {
		opacity: 0;
		animation: showSecR 2.5s linear forwards;
		animation-delay: 3.5s
	}
	
	.eth-icon-r {
		opacity: 0;
		animation: showSecR 2.5s linear forwards;
		animation-delay: 5.5s
	}
	
	.usdt-icon-r {
		opacity: 0;
		animation: showSecR 2.5s linear forwards;
		animation-delay: 7.5s
	}
	
	.bch-icon-r {
		opacity: 0;
		animation: showSecR 2s linear forwards;
		animation-delay: 10s
	}
	
	.usdc-icon-r {
		opacity: 0;
		animation: showSecR 2.5s linear forwards;
		animation-delay: 12s
	}
	
	.xrp-icon-r {
		opacity: 0;
		animation: showSecR 2.5s linear forwards;
		animation-delay: 14s
	}
	
	.ada-icon-r {
		opacity: 0;
		animation: showSecR 2s linear forwards;
		animation-delay: 16s
	}
	
	
	
	@keyframes coinShow {
		30% {
			opacity: 1;
		}
		
		50% {
			opacity: 1;
		}
		
		to {
			opacity: 0;
		}
	}
	
	@keyframes coinShowR {
		0% {
			opacity: 0;
		}
		
		15% {
			opacity: 1;
		}
		
		85% {
			opacity: 1;
		}
		
		to {
			opacity: 0;
		}
	}
	
	@keyframes coinShowCircle {
		20% {
			r: 2.15%
		}
		
		70% {
			r: 2.15%;
			opacity: 1;
		}
		
		to {
			opacity: 1;
			r: 2.15%;
		}
	}
	
	@keyframes coinShowPath {
		50% {
			opacity: 0;
		}
		
		60% {
			opacity: 1;
		}
		
		to {
			opacity: 1;
		}
	}
	
	@keyframes dash {
	  50% {
		stroke-dashoffset: 0;
	  }
		
		to {
			stroke-dashoffset: -1000;
		}
	}
	
	@keyframes dashR {
	  50% {
		stroke-dashoffset: 1200;
	  }
		
		to {
			stroke-dashoffset: 3000;
		}
	}
	
	@keyframes dashRR {
	  50% {
		stroke-dashoffset: 1000;
	  }
		
		to {
			stroke-dashoffset: 2400;
		}
	}
	
	@keyframes dashE {
	  50% {
		stroke-dashoffset: 0;
	  }
		
		to {
			stroke-dashoffset: -500;
		}
	}
	
	@keyframes dashA {
	  50% {
		stroke-dashoffset: 700;
	  }
		
		to {
			stroke-dashoffset: 1600;
		}
	}
	
	@keyframes show {
	  to {
		opacity: 1;
	  }
	}
	
	@keyframes showSec {
		20% {
			opacity: 1;
		  }

		60% {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
	
	@keyframes circleRaise {
		20% {
			fill:#acc7e5;
			r: 2%
		}
		
		70% {
			fill:#acc7e5;
			r: 2%
		}
		
		to {
			opacity: 0;
		}
	}
	
	@keyframes circleRaiseS {
		0% {
			opacity: 0;
			r:0.5%;
		}
		
		20% {
			opacity: 1;
			r:0.5%;
		}
		
		30% {
			opacity: 1;
			r:0.5%;
		}
		
		50% {
			fill:#acc7e5;
			r: 2%;
			opacity: 1;
		}
		
		70% {
			fill:#acc7e5;
			r: 2%;
			opacity: 1;
		}
		
		to {
			opacity: 0;
		}
	}
	
	@keyframes showSecR {
		20% {
			opacity: 1;
		}
		
		80% {
			opacity: 1;
		}
		
		to {
			opacity: 0;
		}
	}


/** MAP ANIMATION **/