html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: top;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
margin:0;
list-style: none;
}
input, select, textarea{
color:#666;
border: 1px #CCC solid;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html{
width:100%;
height:100%;
}
body{
font-family:"Oswald",sans-serif;
width:100%;
height:100%;
background:#474747;
color:#777;
}
#wrapper{
width:100%;
height:100%;
}
#content{
width:700px;
height:300px;
margin-left:-350px;
top:10%;
left:50%;
position:absolute;
}
#content-inside{
text-align:center;
padding:20px;
}
h1{
padding:10px 0;
font-size:50px;
text-align: center;
color: #222;
text-align: center;
color: #999;
text-shadow: 0px 1px 5px #111;
}
h2{
padding:10px 0;
font-size:25px;
text-align: center;
color: #131313;
text-shadow: 0px 1px 2px #666;
}
p{
color:#666;
margin-top:10px;
border-radius:20px;
padding:20px;
line-height:20px;
font-size:14px;
background-color: #1C1C1C;
text-shadow: 0px 1px 2px #000;
box-shadow: 0px 1px 2px #666;
}
span.buldge{
text-shadow: 0px 1px 2px #111;
color:#777;
}
a{
color:#999;
}
a:hover{
color:#FFF;
}
#cogs{
margin:0 auto;
width:381px;
height:234px;
}
.gear {
position:absolute;
height:244px;
width:244px;
display:block;
float: none;
text-align: center;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-direction: normal;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-direction: normal;
-ms-animation-delay: 0;
-ms-animation-play-state: running;
-ms-animation-fill-mode: forwards;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}
#gear1 {
-moz-animation-name: ckw;
-moz-animation-duration: 10s;
-webkit-animation-name: ckw;
-webkit-animation-duration: 10s;
-o-animation-name: ckw;
-o-animation-duration: 10s;
-ms-animation-name: ckw;
-ms-animation-duration: 10s;
animation-name: ckw;
animation-duration: 10s;
}
#gear2 {
-moz-animation-name: cckw;
-moz-animation-duration: 10s;
-webkit-animation-name: cckw;
-webkit-animation-duration: 10s;
-o-animation-name: cckw;
-o-animation-duration: 10s;
-ms-animation-name: cckw;
-ms-animation-duration: 10s;
animation-name: cckw;
animation-duration: 10s;
}
@-webkit-keyframes ckw {
0% {
-webkit-transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
}
100% {
-webkit-transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
}
}
@-moz-keyframes ckw {
0% {
-moz-transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
}
100% {
-moz-transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
}
}
@-o-keyframes ckw {
0% {
-o-transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
}
100% {
-o-transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
}
}
@-ms-keyframes ckw {
0% {
-ms-transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
}
100% {
-ms-transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
}
}
@keyframes ckw {
0% {
transform: translate(0, -28px) scale(.85,.85) rotate(0deg);
}
100% {
transform: translate(0, -28px) scale(.85,.85) rotate(360deg);
}
}
@-webkit-keyframes cckw {
0% {
-webkit-transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
}
100% {
-webkit-transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
}
}
@-moz-keyframes cckw {
0% {
-moz-transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
}
100% {
-webkit-transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
}
}
@-o-keyframes cckw {
0% {
-o-transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
}
100% {
-o-transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
}
}
@-ms-keyframes cckw {
0% {
-ms-transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
}
100% {
-ms-transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
}
}
@keyframes cckw {
0% {
transform: translate(180px, -53px) scale(.72,.72) rotate(322deg);
}
100% {
transform: translate(180px, -53px) scale(.72,.72) rotate(-38deg);
}
}