@import url("//fonts.googleapis.com/css?family=Lato:400,700");

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {  
    margin:0; 
    padding:0; 
}

body {
    font-family: "Lato", Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 200%;
    color: #4b4b57;
    background: #f7f7f8;
}

html>body {
    font-size: 24px;
}

p {
    line-height: 1.5em;
    font-size: 1em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

h1 {
    font-size: 2em;
    line-height: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

h3 {
    font-size: 1.5em;
    line-height: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

h1, h2, h3 {
    font-weight: 700;
    color: #1c1c21;
}

#content {
    width: 600px;
    background: #fff;
    margin: 1em auto;
    border: 1px dotted #000;
}

#content h1, h3, p {
    text-align: center;
}


#svgcontainer {

        margin: 50px auto;
-webkit-animation: 120s normal 1s linear infinite rotate-fast;
   -moz-animation: 120s normal 1s linear infinite rotate-fast;
    -ms-animation: 120s normal 1s linear infinite rotate-fast;
     -o-animation: 120s normal 1s linear infinite rotate-fast;
	animation: 120s normal 1s linear infinite rotate-fast;
	width: 72px;
	height: 72px;
}

#svgcontainer:hover {
-webkit-animation-play-state: paused;
   -moz-animation-play-state: paused;
    -ms-animation-play-state: paused;
     -o-animation-play-state: paused;
	animation-play-state: paused;
}

.ray {
	/*fill: #f10c49;*/
        fill: #ff0000;
	opacity: 0.5;
}

svg {
-webkit-animation: 120s normal 1s linear infinite rotate-reverse;
   -moz-animation: 120s normal 1s linear infinite rotate-reverse;
    -ms-animation: 120s normal 1s linear infinite rotate-reverse;
     -o-animation: 120s normal 1s linear infinite rotate-reverse;
	animation: 120s normal 1s linear infinite rotate-reverse;
}

@-webkit-keyframes rotate {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
@-moz-keyframes rotate {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(360deg);
	}
}
@-ms-keyframes rotate {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
	}
}
@-o-keyframes rotate {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(360deg);
	}
}
@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@-webkit-keyframes rotate-reverse {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(-360deg);
	}
}
@-moz-keyframes rotate-reverse {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(-360deg);
	}
}
@-ms-keyframes rotate-reverse {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(-360deg);
	}
}
@-o-keyframes rotate-reverse {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(-360deg);
	}
}
@keyframes rotate-reverse {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}

@-webkit-keyframes rotate-fast {
	0% {
		-webkit-transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(720deg);
	}
}
@-moz-keyframes rotate-fast {
	0% {
		-moz-transform: rotate(0deg);
	}
	100% {
		-moz-transform: rotate(720deg);
	}
}
@-ms-keyframes rotate-fast {
	0% {
		-ms-transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(720deg);
	}
}
@-o-keyframes rotate-fast {
	0% {
		-o-transform: rotate(0deg);
	}
	100% {
		-o-transform: rotate(720deg);
	}
}
@keyframes rotate-fast {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(720deg);
	}
}