.arrows-down {
	width: 60px;
	height: 72px;
	margin: 0 auto;
	cursor:pointer;
}

.arrows-down path {
	stroke: #8431A6;
	fill: transparent;
	stroke-width: 3px;	
	animation: arrow 3s infinite;
	-webkit-animation: arrow 3s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows-down path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows-down path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows-down path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}

/* END ARROW DOWN */

#sun { animation: rotate 30s linear infinite; }
#sun path, #sun circle { stroke: #fff; stroke-width: 0; fill: #fff;  } 

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* END SUN */

.dashed{
  stroke-dasharray: 13;
  stroke-width: 5;
  vector-effect: non-scaling-stroke;
}
.path {
  stroke-dasharray: 2560;
  stroke-dashoffset: 2560;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  animation: dash 4s linear alternate infinite;
}

.path.once {
  stroke-dasharray: 2560;
  stroke-dashoffset: 2560;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
  animation: dash 3s linear alternate 1;
   animation-fill-mode: forwards; 
    animation-iteration-count: 1;
	 -webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */
    animation-delay: 1.5s;
}
#header-image.orange .dashed { stroke: #F68C29; }
#header-image.purple .dashed { stroke: #8431A6; }
#header-image.green .dashed { stroke: #A5D064; }

body.ie-11 .path {
  stroke-dasharray: 0;
  stroke-dashoffset: 2560;
  animation: dash 4s linear alternate infinite;
}


@keyframes dash {
  from {
    stroke-dashoffset: 2560;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* END DASH */


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

	#header-image svg, #header-image svg path { width:100%; }
	.path.once {
	  stroke-dasharray: 5000;
	  stroke-dashoffset: 5000;
	  stroke-width: 4;
	  vector-effect: non-scaling-stroke;
	  animation: dash 3s linear alternate 1;
	   animation-fill-mode: forwards; 
		animation-iteration-count: 1;
		 -webkit-animation-delay: 1.5s; /* Safari 4.0 - 8.0 */
		animation-delay: 1.5s;
	}
	
	@keyframes dash {
	  from {
		stroke-dashoffset: 5000;
	  }
	  to {
		stroke-dashoffset: 0;
	  }
	}
	
}