@charset "UTF-8";
/* CSS Document */

/*===========Star Mark SVG Animation============*/

svg#starmark {
	width: 80px;
	height: 80px;
}
svg#starmark g#paths .st0 {
	fill: transparent;
	stroke: #fff;
	stroke-width: 10;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
}
svg#starmark g#fill .st1 {
	fill: transparent;
}

svg#starmark g#paths polyline[id^="inner"] {
	animation: INNER 4s ease-in 0s forwards;
	-webkit-animation: INNER 4s ease-in 0s forwards;
}
@keyframes INNER {
	0% { stroke-dashoffset: 1000; }
	20% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}
@-webkit-keyframes INNER {
	0% { stroke-dashoffset: 1000; }
	20% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

svg#starmark g#paths path[id^="outer"] {
	animation: OUTER 4s ease-in 0s forwards;
	-webkit-animation: OUTER 4s ease-in 0s forwards;
}
@keyframes OUTER {
	20% { stroke-dashoffset: 1000; }
	50% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}
@-webkit-keyframes OUTER {
	20% { stroke-dashoffset: 1000; }
	50% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 0; }
}

svg#starmark g#paths line#height1 {
	animation: FIRST 4s ease-in 0.1s forwards;
	-webkit-animation: FIRST 4s ease-in 0s forwards;
}
svg#starmark g#paths line#height2 {
	animation: FIRST 4s ease-in 0.25s forwards;
	-webkit-animation: FIRST 4s ease-in 0s forwards;
}
svg#starmark g#paths line#height3 {
	animation: FIRST 4s ease-in 0.4s forwards;
	-webkit-animation: FIRST 4s ease-in 0s forwards;
}
svg#starmark g#paths line#height4 {
	animation: FIRST 4s ease-in 0.55s forwards;
	-webkit-animation: FIRST 4s ease-in 0s forwards;
}
svg#starmark g#paths line#height5 {
	animation: FIRST 4s ease-in 0.7s forwards;
	-webkit-animation: FIRST 4s ease-in 0s forwards;
}

svg#starmark g#paths path#circle1 {
	animation: FIRST 4s ease-in 0.2s forwards;
	-webkit-animation: FIRST 4s ease-in 0.2s forwards;
}
svg#starmark g#paths path#circle2 {
	animation: FIRST 4s ease-in 0.35s forwards;
	-webkit-animation: FIRST 4s ease-in 0.35s forwards;
}
svg#starmark g#paths path#circle3 {
	animation: FIRST 4s ease-in 0.5s forwards;
	-webkit-animation: FIRST 4s ease-in 0.5s forwards;
}
svg#starmark g#paths path#circle4 {
	animation: FIRST 4s ease-in 0.65s forwards;
	-webkit-animation: FIRST 4s ease-in 0.65s forwards;
}
svg#starmark g#paths path#circle5 {
	animation: FIRST 4s ease-in 0.8s forwards;
	-webkit-animation: FIRST 4s ease-in 0.8s forwards;
}
@keyframes FIRST {
	0% { stroke-dashoffset: 1000; }
	20% { stroke-dashoffset: 0; }
	40% { stroke-dashoffset: 1000; }
}
@-webkit-keyframes FIRST {
	0% { stroke-dashoffset: 1000; }
	20% { stroke-dashoffset: 0; }
	40% { stroke-dashoffset: 1000; }
}

svg#starmark g#fill path.st1 {
	animation: FILL 4s ease-in 0s forwards;
	-webkit-animation: FILL 4s ease-in 0s forwards;
}
@keyframes FILL {
	60% { stroke-dashoffset: 1000; fill: transparent; }
	100% { stroke-dashoffset: 0; fill: #fff; }
}
@-webkit-keyframes FILL {
	60% { stroke-dashoffset: 1000; fill: transparent; }
	100% { stroke-dashoffset: 0; fill: #fff; }
}

@media only screen and (max-width: 599px) {
	svg#starmark {
		width: 45px;
		height: 45px;
	}
}

/*======================================*/