@charset "UTF-8";

/* **************************************************************************************************** */
/* Elements de base */

body{ background-color: #eeeeee; }
h1{ margin: 0; color: #ffffff; line-height: 30px; font-size: 26px; }
h2{ margin: 0; color: #333333; }
h3{ color: #666666; line-height: 30px; text-align: center; font-size: 26px; }

/* **************************************************************************************************** */
/* Elements */

.header{ width: 100%; overflow: hidden; background: #404658 url(band.png) repeat-x center center; }
.title{ display: inline-block; padding: 6px 18px; background-color: #0092cb; }
.subtitle{ display: inline-block; padding: 6px 18px; background-color: #ffffff; }
.anim{ position: relative; display: block; margin: 0 auto; width: 166px; height: 166px; }
.anim .big-pignon{ position: absolute; animation: spin1 13.8s infinite linear; }
.anim .small-pignon{ position: absolute; bottom: 0; right: 0; animation: spin2 6s infinite linear; }

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

/* **************************************************************************************************** */
/* Classes spécigfiques */

.content-center{ margin: 0 auto; width: 900px; }
.content-margin{ margin: 40px; }