/* aeroxqs.com - CSS Document
Powered by www.KNACSS.com V3.0.5 (2014-07-10) @author: Raphael Goetter, Alsacreations */
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
html, body {
margin:0;
padding:0;}
ul, ol {
padding-left:2em}
ul.unstyled {
list-style:none}
img {
height:auto;
vertical-align:middle;
border:0}
blockquote, figure {
margin-left:0;
margin-right:0}
audio, canvas, video {
display:inline-block}
svg:not(:root) {
overflow:hidden}
html {
font-size: 62.5%;
font-size: -webkit-calc(.625em);
font-size: calc(.625em);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%}
body {
width:90%;
background-color:#F1F1EF;
font-size:1.4em;
color:#000;
font-family:Helvetica, Arial, sans-serif;
line-height:1.5;
margin:auto;}
a {
color:#333}
a:hover, a:focus, a:active {
color:rgba(255,255,255,0.8);
text-decoration:none;}
p, .p-like, ul, ol, dl, blockquote, pre, td, th, label, textarea, caption, details, figure {
margin-top:0.75em;
margin-bottom:0.75em;
line-height:1.5}
h1, .h1-like {
font-size:3.2rem;
font-family:Helvetica, Arial, sans-serif}
h2, .h2-like {
font-size:2.8rem;
font-family:Helvetica, Arial, sans-serif;}
h3, .h3-like {
font-size:2.4rem;}
h4, .h4-like {
font-size:2rem;
font-family:Helvetica, Arial, sans-serif;
background:linear-gradient(rgba(220,220,220,0.9),rgba(246,246,246,0.9));
background:-webkit-linear-gradient(220,220,220,0.9),rgba(246,246,246,0.9));
background:-moz-linear-gradient(rgba(220,220,220,0.9),rgba(246,246,246,0.9));
background:-ms-linear-gradient(rgba(220,220,220,0.9),rgba(246,246,246,0.9));
color:rgba(200,0,0,0.7);
text-transform:uppercase;
text-align:center;
padding:2px;
border-radius:4px;
box-shadow:0 0 5px #666;
border:rgba(245,245,245,0.8) solid;
vertical-align:bottom;}
h5, .h5-like {
font-size:1.8rem}
h6, .h6-like {
font-size:1.6rem}
.smaller {
font-size:.71em}
.small {
font-size:.86em}
.big {
font-size:1.14em}
.bigger {
font-size:1.29em}
.biggest {
font-size:1.43em}
code, pre, samp, kbd {
white-space:pre-line;
white-space:pre-wrap;
font-family:Consolas, 'DejaVu Sans Mono', Courier, monospace;
line-height:normal}
em, .italic, address, cite, dfn, i, var {
font-style:italic}
strong, .bold {
font-weight:bold}
small, sub, sup {
font-size:smaller}
.visually-hidden {
position:absolute !important;
border:0 !important;
height:1px !important;
width:1px !important;
padding:0 !important;
overflow:hidden !important;
clip:rect(1px, 1px, 1px, 1px) !important}
body>script {
display:none !important}
@media (max-width:480px) {
.no-small-screen {
display:none}
}
@media (min-width:1024px) {
.no-large-screen {
display:none}
}
p:first-child, .p-like:first-child, ul:first-child, ol:first-child, dl:first-child, blockquote:first-child, pre:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top:0}
li p, li .p-like, li ul, li ol {
margin-top:0;
margin-bottom:0}
img, img a, table, td, blockquote, code, pre, textarea, input, video {
max-width:100%;}
table {
margin-bottom:2em;}
.mod {
overflow:hidden}
.clear, .line, .row {
clear:both}
.clearfix:after, .line:after {
content:"";
display:table;
clear:both}
.row {
display:table;
table-layout:fixed;
width:100%}
.row>*, .col {
display:table-cell;
vertical-align:top}
.inbl {
display:inline-block;
vertical-align:middle}
.left, .start {
float:left}
img.left, img.start {
margin-right:1em}
.right, .end {
float:right}
img.right, img.end {
margin-left:1em}
img.left, img.right, img.start, img.end {
margin-bottom:.5em}
.center {
margin-left:auto;
margin-right:auto}
.txtleft {
text-align:left}
.txtright {
text-align:right}
.txtcenter {
text-align:center}
.w5 {
width:5%;}
.w10 {
width:10%}
.w20 {
width:20%}
.w25 {
width:25%}
.w30 {
width:30%}
.w33 {
width:33.3333%}
.w40 {
width:40%}
.w50 {
width:50%}
.w60 {
width:60%}
.w66 {
width:66.6666%}
.w70 {
width:70%}
.w75 {
width:75%}
.w80 {
width:80%}
.w90 {
width:90%}
.w100 {
width:100%}
.w50p {
width:50px}
.w100p {
width:100px}
.w150p {
width:150px}
.w200p {
width:200px}
.w300p {
width:300px}
.w400p {
width:400px}
.w500p {
width:500px}
.w600p {
width:600px}
.w700p {
width:700px}
.w800p {
width:800px}
.w960p {
width:960px}
.mw960p {
max-width:960px}
.w1140p {
width:1140px}
.mw1140p {
max-width:1140px}
.wauto {
width:auto}
.man {
margin:0}
.pan {
padding:0}
.mas {
margin:1em}
.mam {
margin:2em}
.mal {
margin:4em}
.pavt {
padding:0.2em}
.pat {
padding:0.5em}
.pas {
padding:1em}
.pam {
padding:2em}
.pal {
padding:4em}
.mtn {
margin-top:0}
.mts {
margin-top:1em}
.mtm {
margin-top:2em}
.mtl {
margin-top:4em}
.mrn {
margin-right:0}
.mrs {
margin-right: 1em}
.mrm {
margin-right: 2em}
.mrl {
margin-right: 4em}
.mbn {
margin-bottom: 0}
.mbs {
margin-bottom: 1em}
.mbm {
margin-bottom: 2em}
.mbl {
margin-bottom: 4em}
.mln {
margin-left: 0}
.mls {
margin-left: 1em}
.mlm {
margin-left: 2em}
.mll {
margin-left: 4em}
.ptn {
padding-top: 0}
.pts {
padding-top: 1em}
.ptm {
padding-top: 2em}
.ptl {
padding-top: 4em}
.prn {
padding-right: 0}
.prs {
padding-right: 1em}
.prm {
padding-right: 2em}
.prl {
padding-right: 4em}
.pbn {
padding-bottom: 0}
.pbs {
padding-bottom: 1em}
.pbm {
padding-bottom: 2em}
.pbl {
padding-bottom: 4em
}
.pln {
padding-left: 0
}
.pls {
padding-left: 1em
}
.plm {
padding-left: 2em
}
.pll {
padding-left: 4em
}
.grid {
overflow:hidden
}
.grid>* {
display:block;
padding:0;
margin-left:-20px;
text-align:left
}
.grid>*>* {
display:inline-block;
padding-left:20px;
margin-left:0;
vertical-align:top
}
:root .grid {
font-size:0;
text-justify:distribute-all-lines
}
:root .grid>*>* {
font-size:14px;
font-size:1.4rem
}
.opera:-o-prefocus, .grid>* {
word-spacing:-0.43em
}
.grid2>* {
width:50%
}
.grid3>* {
width:33.333%
}
.grid4>* {
width: 25%
}
.grid5>* {
width: 20%
}
.grid6>* {
width: 16.667%
}
.grid8>* {
width: 12.5%
}
.grid10>* {
width: 10%
}
.grid12>* {
width: 8.333%
}
.grid2-1>*:first-child, .grid1-2>*+* {
width: 66.666%
}
.grid1-2>*:first-child, .grid2-1>*+* {
width: 33.333%
}
.grid1-3>*:first-child, .grid3-1>*+* {
width: 25%
}
.grid3-1>*:first-child, .grid1-3>*+* {
width: 75%
}
@media (max-width:1024px) {
.grid5>*, .grid6>*, .grid8>*, .grid10>*, .grid12>* {
width: 33.333%
}
}
@media (max-width:480px) {
.grid3>*, .grid4>*, .grid5>*, .grid6>*, .grid8>*, .grid10>*, .grid12>* {
width: 50%
}
}
@media (max-width:320px) {
.grid>*>* {
width: 100% !important
}
}
[class*="autogrid"] {
text-align:justify
}
[class*="autogrid"]:after {
content: "";
display: inline-block;
width: 100%
}
[class*="autogrid"]>* {
display:inline-block;
vertical-align:top;
text-align:left
}
:root [class*="autogrid"] {
font-size: 0;
text-justify: distribute-all-lines
}
:root [class*="autogrid"]>* {
font-size: 14px;
font-size: 1.4rem
}
[class*="autogrid"]:-o-prefocus {
word-spacing:-0.43em
}
.autogrid2>* {
width: 49%
}
.autogrid3>* {
width: 32%
}
.autogrid4>* {
width: 23.6%
}
.autogrid5>* {
width: 19%
}
.autogrid6>* {
width: 15%
}
.autogrid8>* {
width: 10.8%
}
.autogrid10>* {
width: 9%
}
.autogrid12>* {
width: 6.4%}
@media (max-width:1024px) {
.autogrid5>*, .autogrid6>*, .autogrid8>*, .autogrid10>*, .autogrid12>* {
width: 32%}
}
@media (max-width:480px) {
.autogrid5>*, .autogrid6>*, .autogrid8>*, .autogrid10>*, .autogrid12>* {
width: 49%}
}
@media (max-width:320px) {
[class*="autogrid"]>* {
width:100%}
}
/* TABLEAUX */
table {
width:100%;
max-width:100%;
border-collapse:collapase;
table-layout:fixed;
vertical-align:middle;
border:1px solid #ccc;
border-radius:20px;}
.table {
display:table}
table#recaptcha_table, table.table-auto {
table-layout: auto}
caption {
padding:1em;
color:#555;
font-style:italic}
td, th {
padding:0.3em 0.8em;
border:1px #aaa dotted;
vertical-align:middle;
min-width:2em;
cursor:default;
text-align:left}
.btn {
display:inline-block}
form, fieldset {
border:none}
input, button, select, label, .btn {
vertical-align:middle;
font-family:inherit;
font-size:inherit}
label {
display:inline-block;
vertical-align:middle;
cursor:pointer}
legend {
border:0;
white-space:normal}
textarea {
min-height: 5em;
vertical-align: top;
font-family: inherit;
font-size: inherit;
resize: vertical}
button, input[type="button"], input[type="reset"], input[type="submit"] {
cursor: pointer;
-webkit-appearance: button
}
input[type="search"] {
-webkit-appearance: textfield
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration {
display:none
}
::-webkit-input-placeholder {
color:#777
}
input:-moz-placeholder, textarea:-moz-placeholder {
color:#777
}
button::-moz-focus-inner, input[type='button']::-moz-focus-inner, input[type='reset']::-moz-focus-inner, input[type='submit']::-moz-focus-inner {
border:0;
padding:0
}
/* ICONS */
.icon {
display:inline-block;}
a.icon {
text-decoration:none;
padding:.5em;
margin:0.2em .5em 0;
border-radius: 4px;}
a:hover.icon {
background:rgba(255,255,255,.3);}
.icon:before, .icon.after:after {
content: "";
display: inline-block;
vertical-align: middle;
position: relative;
top: -0.1em;
margin: 0 0.3em 0 0;
font: 1.4em/1 sans-serif;
color:rgba(255,255,255,.8);
text-shadow: 1px 1px 0 rgba(0,0,0,0.1);
speak: none}
@media (min-device-width:480px) {
.icon:before, .icon.after:after {
font: 1em/.6 sans-serif;
-webkit-transform: rotateZ(.05deg)
}
}
.icon.after:after {
margin: 0 0 0 8px
}
.icon.after:before {
content: "" !important
}
.icon-rate:before, .icon-rate.after:after {
content: "\2605"
}
.icon-unrate:before, .icon-unrate.after:after {
content: "\2606"
}
.icon-check:before, .icon-check.after:after {
content: "\2713"
}
.icon-uncheck:before, .icon-uncheck.after:after {
content: "\2717"
}
.icon-cloud:before, .icon-cloud.after:after {
content: "\2601"
}
.icon-dl:before, .icon-dl.after:after {
content: "\21E3";
font-weight: bold
}
.icon-cross:before, .icon-cross.after:after {
content: "\2716";
font-weight: bold
}
.icon-arrow1:before, .icon-arrow1.after:after {
content: "\2192";
position: relative;
top: -0.15em
}
.icon-arrow2:before, .icon-arrow2.after:after {
content: "\279E"
}
.icon-arrow3:before, .icon-arrow3.after:after {
content: "\279A"
}
.icon-bracket1:before, .icon-bracket1.after:after {
content: "\2039";
font-weight: bold;
font-size: 1.6em;
position: relative;
top: -0.15em
}
.icon-bracket2:before, .icon-bracket2.after:after {
content: "\203A";
font-weight: bold;
font-size: 1.6em;
position: relative;
top: -0.15em
}
.icon-up:before, .icon-up.after:after {
content: "\25B2";
font-size:1.6em;
color:rgba(255,255,255,0.8)}
.icon-down:before, .icon-down.after:after {
content: "\25BC"}
.icon-bull:before, .icon-bull.after:after {
content: "\2022";
font-size: 1.2em;
top: -0.05em
}
.icon-bull2:before, .icon-bull2.after:after {
content: "\25E6";
top: -0.05em
}
.icon-bull3:before, .icon-bull3.after:after {
content: "\2023";
font-size: 1.6em;
top: -0.05em
}
.icon-nav:before, .icon-nav.after:after {
content: "\2261";
font-weight: bold
}
.icon-losange:before, .icon-losange.after:after {
content: "\25C6"
}
.icon-asteri:before, .icon-asteri.after:after {
content: "\2731";
font-weight: bold
}
.icon-mail:before, .icon-mail.after:after {
content: "\2709";
font-size: 1.6em;
top: -0.05em
}
/* >= 1024 */
@media (min-width:1024px) {
.large-hidden {
display: none !important
}
.large-visible {
display: block !important
}
.large-no-float {
float: none
}
.large-inbl {
display: inline-block;
float: none;
vertical-align: top
}
.large-row {
display: table;
table-layout: fixed;
width: 100% !important
}
.large-col {
display: table-cell;
vertical-align: top
}
.large-w25 {
width: 25% !important
}
.large-w33 {
width: 33.3333% !important
}
.large-w50 {
width: 50% !important
}
.large-w66 {
width: 66.6666% !important
}
.large-w75 {
width: 75% !important
}
.large-w100, .large-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0
}
.large-man {
margin: 0 !important
}
}
/* <= 480 */
@media (max-width:480px) {
.w600p, .w700p, .w800p, .w960p, .mw960p {
width: auto;
float: none}
.small-hidden {
display: none !important}
.small-visible {
display: block !important}
.small-no-float {
float: none}
.small-inbl {
display: inline-block;
float: none;
vertical-align: middle}
.small-row {
display: table !important;
table-layout: fixed !important;
width: 100% !important
}
.small-col {
display: table-cell !important;
vertical-align: middle !important
}
.small-w25 {
width: 25% !important
}
.small-w33 {
width: 33.3333% !important
}
.small-w50 {
width: 50% !important
}
.small-w66 {
width: 66.6666% !important
}
.small-w75 {
width: 75% !important
}
.small-w100, .small-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0
}
.small-man {
margin: 0 !important
}
.small-pan {
padding: 0 !important
}
}
/* <= 320 */
@media (max-width:320px) {
.mod, .col, fieldset {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0
}
.w300p, .w400p, .w500p {
width: auto;
float: none
}
.row {
display: block !important;
width: 100% !important
}
.tiny-hidden {
display: none !important
}
.tiny-visible {
display: block !important
}
.tiny-no-float {
float: none
}
.tiny-inbl {
display: inline-block;
float: none;
vertical-align: top
}
.tiny-row {
display: table !important;
table-layout: fixed !important;
width: 100% !important
}
.tiny-col {
display: table-cell !important;
vertical-align: top !important
}
th, td {
display: block !important;
width: auto !important;
text-align: left !important
}
thead {
display: none
}
.tiny-w25 {
width: 25% !important
}
.tiny-w33 {
width: 33.3333% !important
}
.tiny-w50 {
width: 50% !important
}
.tiny-w66 {
width: 66.6666% !important
}
.tiny-w75 {
width: 75% !important
}
.tiny-w100, .tiny-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0
}
.tiny-man {
margin: 0 !important
}
.tiny-pan {
padding: 0 !important
}
}
/* FLEXS */
.flex {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display: flex
}
.flex-w {
flex-wrap:wrap;}
.flex-h {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row
}
.flex-v {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column
}
.flex-fluid {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.flex-start {
-webkit-box-ordinal-group: 0;
-webkit-order: -1;
-ms-flex-order: -1;
order: -1
}
.flex-mid {
-webkit-box-ordinal-group: 2;
-webkit-order: 1;
-ms-flex-order: 1;
order: 1
}
.flex-end {
-webkit-box-ordinal-group: 43;
-webkit-order: 42;
-ms-flex-order: 42;
order: 42
}
/* PRINT */
@media print {
* {
background: transparent !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important
}
body {
width: auto !important;
margin: auto !important;
font-family: serif;
font-size: 12pt;
background-color: #fff !important;
color: #333 !important
}
p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol {
color: #000 !important;
margin: auto !important
}
.print {
display: block
}
.no-print {
display: none
}
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%)
}
p, blockquote {
orphans: 3;
widows: 3
}
blockquote, ul, ol {
page-break-inside: avoid
}
h1 {
page-break-before: always
}
h1, h2, h3, caption {
page-break-after: avoid
}
a {
color: #000 !important;
text-decoration: underline !important
}
a[href]:after {
content: " (" attr(href) ")"
}
a[href^="javascript:"]:after, a[href^="#"]:after {
content: ""
}
}
.skip-links {
position: absolute
}
.skip-links a {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
padding: 0.5em;
background: black;
color: white;
text-decoration: none
}
.skip-links a:focus {
position: static;
overflow: visible;
clip: auto
}
/* <= 480 */
@media (max-width:480px) {
div, textarea, table, td, th, code, pre, samp {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto
}
}
.gm-style img {
height: 100%
}
:not(.gm-style) img {
height: auto
}
.gm-style img, .gmnoscreen img, .gmnoprint img {
max-width: none !important
}
.ie67 * {
behavior: url(/js/boxsizing.htc)
}
.ie678 h1, .ie678 .h1-like {
font-size: 2.29em
}
.ie678 h2, .ie678 .h2-like {
font-size: 2em
}
.ie678 h3, .ie678 .h3-like {
font-size: 1.71em
}
.ie678 h4, .ie678 .h4-like {
font-size: 1.43em
}
.ie678 h5, .ie678 .h5-like {
font-size: 1.29em
}
.ie678 h6, .ie678 .h6-like {
font-size: 1.14em
}
.ie678 img {
width: auto
}
.ie678 .gm-style img {
height: 100%
}
.clearfix, .line, .mod, .row, .col {
*zoom:1
}/*! inline-block and table-cell for IE6/IE7 *//*! warning: .col needs width on IE6/IE7 */
.btn, .col, .inbl {
*display:inline;
*zoom:1
}
.visually-hidden {
*clip:rect(1px 1px 1px 1px)
}
.ie8 .grid>*, .ie8 [class*="autogrid"]>* {
letter-spacing: -0.31em;
text-rendering: optimizespeed
}
.ie8 .grid>*>*, .ie8 [class*="autogrid"]>*>* {
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto
}
.grid>*>*, [class*="autogrid"]>*>* {
*display:inline;
*zoom:1
}
.ie678 input[type="checkbox"], .ie678 input[type="radio"] {
padding: 0
}
.ie678 textarea {
overflow: auto
}
code, kbd, mark {
border-radius: 2px
}
kbd {
padding: 0 2px;
border: 1px solid #999
}
code {
padding: 2px 4px;
background: rgba(0,0,0,0.04);
color: #b11
}
pre code {
padding: none;
background: none;
color: inherit;
border-radius: 0
}
mark {
padding: 2px 4px;
background: #ff0
}
sup, sub {
vertical-align: 0;
position: relative
}
sup {
bottom: 1ex
}
sub {
top: 0.5ex
}
blockquote {
position: relative;
padding-left: 3em
}
blockquote:before {
content: "\201C";
position: absolute;
left: 0;
top: 0;
font-family: georgia, serif;
font-size: 5em;
line-height: 0.9;
color: rgba(0,0,0,0.3)
}
blockquote>footer {
margin-top: .75em;
font-size: 0.9em;
color: rgba(0,0,0,0.7)
}
blockquote>footer:before {
content: "\2014 \0020"
}
q {
font-style: normal
}
q, .q {
quotes: "“\00a0" "\00a0”"
}
q:lang(fr), .q:lang(fr) {
quotes: "«\00a0" "\00a0»"
}
hr {
display: block;
clear: both;
height: 1px;
margin: 1em 0 2em;
padding: 0;
border: 0;
color: #ccc;
background-color: #ccc
}
.alternate {
border: 0
}
.alternate tbody {
border: 1px solid #ccc
}
.alternate thead tr>*+* {
border-left: 0
}
.alternate tbody tr>*+* {
border-left: 1px solid #ccc
}
.alternate-vert {
border: 0;
border-right: 1px solid #ccc
}
.alternate-vert tr>:first-child {
border-bottom: 0
}
.alternate-vert tr>*+* {
border-top: 1px solid #ccc
}
.striped tbody tr:nth-child(odd) {
background: #eee;
background: rgba(0,0,0,0.05)
}
.striped-vert tr>:first-child {
background: #eee;
background: rgba(0,0,0,0.05)
}
/* INDEX */
#enconstruction {
margin:auto;
width:400px;
height:50px;}
#progression {
float:left;
border:1px #666 solid;
width:350px;
height:50px;
background-image:url(../img/progression.png);
background-size:25% 100%;
background-position:right;
background-repeat:no-repeat;}
#pourcentage {
float:right;}
h1 {
margin-top:7px;
text-align:center;}
h2 {
text-align:center;
margin-bottom:50px;}
h3 {
text-align:center;
font-weight:normal;}
#separation {
margin:auto;
width:1000px;}
#separation img {
margin-top:10px;
width:1000px;
height:20px;}
#video {
margin-top:50px;
margin:auto;
width:560px;}
#texte {
margin:auto;
margin-top:30px;
margin-bottom:30px;}
/* HEADER */
#header {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background:linear-gradient(rgba(145,0,0,0.9),rgba(200,0,0,0.9));
background:-webkit-linear-gradient(rgba(145,0,0,0.9),rgba(200,0,0,0.9));
background:-moz-linear-gradient(rgba(145,0,0,0.9),rgba(200,0,0,0.9));
background:-ms-linear-gradient(rgba(145,0,0,0.9),rgba(200,0,0,0.9));
background-position:initial initial;
background-repeat:intial initial;
box-shadow:10px 0 10px #B6B6B6, -10px 0 10px #B6B6B6;
-webkit-box-shadow:10px 0 10px #B6B6B6, -10 0 10px #B6B6B6;
-moz-box-shadow:10px 0 10px #B6B6B6, -10 0 10px #B6B6B6;
margin:auto;}
.headerBlock > div, .headerBlock > .menu {
margin:auto;}
.headerBlock {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;}
#banniere {
display:table-row;}
/* Typo / Logo */
#pad a {
width:320px;
height:70px;
opacity:1;
transition:transform .6s, opacity .6s;
-webkit-transition:-webkit-transform .6s, -webkit-opacity .6s;
-moz-transition:-moz-transform .6s, -moz-opacity .6s;
-ms-transition:-ms-transform .6s, -ms-opacity .6s;}
#pad a:hover, #typo a:hover {
opacity:0.9;}
#pad, #typo, #logo {}
#typo a {
width:300px;
height:70px;
opacity:1;
transition:transform .6s, opacity .6s;
-webkit-transition:-webkit-transform .6s, -webkit-opacity .6s;
-moz-transition:-moz-transform .6s, -moz-opacity .6s;
-ms-transition:-ms-transform .6s, -ms-opacity .6s;}
#logo a {
transition:transform .6s, opacity .6s;
-webkit-transition:-webkit-transform .6s, -webkit-opacity .6s;
-moz-transition:-moz-transform .6s, -moz-opacity .6s;
-ms-transition:-ms-transform .6s, -ms-opacity .6s;}
#logo a:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);}
/* Réseaux sociaux */
#facebook a, #twitter a, #youtube a, #twitch a {
opacity:1;
display:block;
background-repeat:no-repeat;
border-radius:15px 0 15px 0;
width:35px;
height:35px;
transition:transform .6s, opacity .6s;
-webkit-transition:-webkit-transform .6s, -webkit-opacity .6s;
-moz-transition:-moz-transform .6s, -moz-opacity .6s;
-ms-transition:-ms-transform .6s, -ms-opacity .6s;}
#facebook a:hover, #twitter a:hover, #youtube a:hover, #twitch a:hover {
opacity:0.9;}
#facebook a {
background-image:url(../img/socials/facebook35.png);}
#twitter a {
background-image:url(../img/socials/twitter35.png);}
#youtube a {
background-image:url(../img/socials/youtube35.png);}
#twitch a {
background-image:url(../img/socials/twitch35.png);}
/* Menus */
ul.menu {
padding:0;
margin-bottom:0; /* Sous-menu aligné avec le menu */}
ul.menu li {
position:relative;
padding:0.3em;
/*background:linear-gradient(#666, #CCC);*/} /* Dégradé de gris */
ul.menu li a {
background:#F9F9F9;
box-shadow:0 0 0 #333 inset;
-moz-box-shadow:0 0 0 #333 inset;
-webkit-box-shadow:0 0 0 #333 inset;
transition:0.3s;}
ul.menu li a:hover {
background: #333;
color: #FFF;
box-shadow: 0 -4em 0 #333 inset;
-moz-box-shadow: 0 -4em 0 #333 inset;
-webkit-box-shadow: 0 -4em 0 #333 inset;}
ul.menu li ul li:hover a {
background-color:#333;
color:#FFF}
ul.menu li {
text-align:center;
list-style:none;
width:120px;
/*border-bottom:1px solid #333*/}
ul.menu li:hover ul {
display:block;
color:#000}
ul.menu li ul {
position:absolute;
top:0px;
display:none;}
ul.menu li a {
display:block;
text-decoration:none;
color:#000;
background:#fff;
padding:5px;
border:1px solid #333;
border-bottom:0;}
/* BODY */
#main {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding:15px 10px 15px 10px;
border-top:3px solid white;
border-bottom:3px solid white;
box-shadow:10px 0 10px #B6B6B6, -10px 0 10px #B6B6B6;
-webkit-box-shadow:10px 0 10px #B6B6B6, -10 0 10px #B6B6B6;
-moz-box-shadow:10px 0 10px #B6B6B6, -10 0 10px #B6B6B6;
background:radial-gradient(circle at 50% 50%,rgba(245,245,245,0.9),rgba(210,210,210,0.9));
background:-webkit-radial-gradient(circle at 50% 50%,rgba(245,245,245,0.9),rgba(210,210,210,0.9));
background:-moz-radial-gradient(circle at 50% 50%,rgba(245,245,245,0.9),rgba(210,210,210,0.9));
background:-ms-radial-gradient(circle at 50% 50%,rgba(245,245,245,0.9),rgba(210,210,210,0.9));
background-position:top;
background-attachment:scroll;
background-repeat:repeat}
#main > .line > .inbl {
vertical-align:top;}
.page {
text-align:left;
border-bottom:1px #666 solid;}
.titre {
background:rgba(200,0,0,0.9);
color:#FFF;
font-weight:bold;
text-transform:uppercase;
width:220px;
text-align:center;
padding:5px;
box-shadow:0 0 5px #CCC;
border: #333 1px solid;}
/* CONTENT */
/* INDEX */
.news {
margin:auto;
width:90%;}
.newsTexte {
margin:auto;
background-color:#FFF;
text-align:justify;
padding:20px;
width:750px;
border:#666 1px solid;
border-radius:10px;}
.newsDate {
margin:auto;
padding-top:5px;
text-align:right;
font-style:italic;
width:750px;
height:100%;}
/* PAGES FIFA ET MEDIA */
/* Fifa */
.fifaBanniere {
margin:auto;
margin-bottom:20px;}
.fifaBanniere img {
border-radius:10px 10px 0 0;
opacity:0.50}
.fifaIntro {
margin:auto;
text-align:justify;
width:750px;
height:185px;
background:#FFF;
border:1px #999 solid;
padding:20px;}
.fifaIntro a {
color:#BB1917;
text-decoration:none;}
.fifaIntro a:hover {
color:#BB1917;
text-decoration:underline}
.fifaLexique {
width:1000px;
margin:auto;}
.fifaLexiqueTexte {
margin:0;
text-align:justify;
width:750px;
height:100%;
background:#FFF;
border:1px #999 solid;}
.fifaLexiqueTitre {
width:150px;}
.fifaLexiqueDescription {
padding:10px;}
.fifaMenus {
margin:auto;
width:1000px;}
.fifaMenus table {
margin: auto;
margin-top: 20px;}
a.clubs {
display:block;
background-image:url(../img/fifa/fifaClubsOff.png);
width:400px;
height:225px;
border-radius:10px;
border:1px #333 solid;
box-shadow: 0 0 10px #CCC}
a.clubs:hover {
background-image:url(../img/fifa/fifaClubsOn.png);
width:400px;
height:225px;}
a.palmares {
display:block;
background-image:url(../img/fifa/fifaPalmaresOff.png);
width:400px;
height:225px;
margin-left:50px; /*Décalage*/
border-radius:10px;
border:1px #333 solid;
box-shadow: 0 0 10px #CCC}
a.palmares:hover {
background-image:url(../img/fifa/fifaPalmaresOn.png);
width:400px;
height:225px;}
/* Media */
/* PAGE CLUBS */
.introImage {
text-align:center;
margin-top:10px;
margin-bottom:20px;
border-radius:10px 10px 0 0;}
.introImage img {
border-radius:10px 10px 0 0;}
.clubs {
margin:auto;
width:90%;}
.clubTableau { /* Ligne complète */
margin:auto;
margin-bottom:10px;}
.clubKA, .clubTF, .clubJB, .clubGF, .clubWWRY {
background-position:left;
background-repeat:no-repeat;}
.clubWEN, .clubIFVPA, .clubWET, .clubWES, .clubFCG {
background-position:right;
background-repeat:no-repeat;}
.clubKA {
background-image:url(../img/clubs/kickeraddictfond.png);}
.clubWEN {
background-image:url(../img/clubs/winningelevenfond.png);}
.clubTF {
background-image:url(../img/clubs/teamfamousfond.png);}
.clubIFVPA {
background-image:url(../img/clubs/ifvpasuissefond.png);}
.clubJB {
background-image:url(../img/clubs/jogabonitofond.png);}
.clubWET {
background-image:url(../img/clubs/winningelitefond.png);}
.clubGF {
background-image:url(../img/clubs/goalfathersfond.png);}
.clubWES {
background-image:url(../img/clubs/weswanselonafond.png);}
.clubWWRY {
background-image:url(../img/clubs/wwryfond.png);}
.clubFCG {
background-image:url(../img/clubs/fcgloubyfond.png);}
.clubLogo {
width:160px;
text-align:center;}
.clubNom {
width:250px;
text-align:center;
font-size:1.6em;
font-weight:bold;}
.clubFond {
background:rgba(246,246,246,0.4);
padding:5px;
border-radius:10px;}
.clubOpus {
width:190px;
font-size:1.3em;
text-align:center;
font-weight:bold;}
.clubDescription {
width:550px;
padding:15px;
text-align:justify;
background:#FFF;
border-radius:10px;
border:1px #999 solid;}
/* PAGE PALMARES */
.palmares {
margin:auto;
width:90%;
margin-bottom:40px;
}
.palmaresTableau {
margin:auto;
margin-bottom:10px;
border-radius:10px}
.palmaresTableauOr {
margin:auto;
margin-bottom:20px}
.palmaresOr, .palmaresArgent, .palmaresBronze {
border-radius:10px;
border:1px solid #999}
.palmaresOr {
background-color:#FFF6E2;}
.palmaresArgent {
background-color:#F5F5F5;}
.palmaresBronze {
background-color:#F8EAE0;}
.palmaresPlace {
margin:auto;
margin-top:30px;
margin-bottom:20px;
width:250px;
line-height:25px;
text-align:center;
font-weight:bold;
padding:2px;
border:#333 1px solid;
background:#BC1818;
color:#FFF;}
.palmaresTitres td {
height:40px;
vertical-align:top;
text-align:center;}
.palmaresBackground td {
background:#666;
color:#FFF;}
.palmaresOpus {
text-align:center;
width:200px;
padding:5px;}
.palmaresClub {
width:290px;
padding:5px;
padding-left:5%;}
.palmaresCompet {
width:420px;
padding:5px;
padding-left:5%;}
.palmaresCompet a {
color:#BC1818;
text-decoration:none;}
tr.palmaresBackground > td.palmaresTrophee {
background:transparent;
width:170px;
text-align:center;}
.palmaresLexique {
margin-top:40px;
margin:auto;
width:90%;}
.palmaresLexiqueTableau {
margin:auto;}
.palmaresLexiqueTitre {
width:150px;
font-size:0.8em;}
.palmaresLexiqueTexte {
width:850px;
padding:5px;
text-align:justify;
font-size:0.8em}
/* PAGE MEDIA */
/* Youtube */
/* Compils' */
/* PAGE A PROPOS */
/* Contenu */
.contenu {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 40em;
-ms-flex: 1 0 40em;
flex: 1 0 40em;
max-width:100%;
display: block;}
.contenuTexte, .bioTexte {
background:#FFF;
text-align:justify;
padding:20px;
padding-bottom:0px;
border:#666 1px solid;
border-radius:10px;}
.contenuTexte a, .bioTexte a, .newsTexte a {
color:#BB1917;
text-decoration:none;}
.contenuTexte a:hover, .bioTexte a:hover, .newsTexte a:hover {
color:#BB1917;
text-decoration:underline}
/* Info */
.infoType {
text-align:right;
margin-top:0.75em;
text-align:right;
border-bottom:#666 1px solid;}
a.infoLogos img {
height:30px;
width:30px;
padding:.9em .9em 0 0;
transition:transform .6s, opacity .6s;
-webkit-transition:-webkit-transform .6s, -webkit-opacity .6s;
-moz-transition:-moz-transform .6s, -moz-opacity .6s;
-ms-transition:-ms-transform .6s, -ms-opacity .6s;}
a:hover.infoLogos img {
transform:rotate(-20deg);
-webkit-transform:rotate(-20deg);
-moz-transform:rotate(-20deg);
-ms-transform:rotate(-20deg);}
.infoTexte {
text-align:left;
line-height:30px;}
/* Coup d'oeil */
.oeil {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 30em;
-ms-flex: 1 0 30em;
flex: 1 0 30em;
max-width:100%;
display:block;}
/* ID portable */
.idPortable {
text-align:center;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 35em;
-ms-flex: 1 0 35em;
flex: 1 0 35em;
max-width:100%;
display:block;}
.idPortableImage a img {
opacity:0.9;
transition:transform .6s, opacity .6s;
-webkit-transition:-webkit-transform .6s, -webkit-opacity .6s;
-moz-transition:-moz-transform .6s, -moz-opacity .6s;
-ms-transition:-ms-transform .6s, -ms-opacity .6s;}
.idPortableImage a img:hover {
border-radius:15px;
opacity:0.8;
/*box-shadow:0px 0px 10px 10px rgba(236,236,236,1);
-moz-box-shadow:px 0px 10px 10px #FFF;
-webkit-box-shadow:0px 0px 5px 5px rgba(145,145,145,1);
-ms-box-shadow:0px 0px 10px 15px #FFF;*/}
/* Biographie */
/* le biotexte est identique au contenu */
.bio {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 40em;
-ms-flex: 1 0 40em;
flex: 1 0 40em;
max-width:100%;
display:block;}
/* Membre */
.membre, .chaine {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 40em;
-ms-flex: 1 0 40em;
flex:1 0 40em;
max-width:100%;
display:block;}
.membreContainer, .chaineContainer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content:center;}
.membreContainer > .membreLogo, .membreContainer > .membreInfo, .chaineContainer > .chaineLogo, .membreContainer > .chaineInfo {
margin:auto;}
.membreBox {
}
/*.membreTitre {
margin:auto;
background:#333;
color:#FFF;
font-weight:bold;
text-align:left;
margin-top:10px;
margin-bottom:20px;
padding:5px;
border:#CCC 1px solid;}*/
.membreLogo, .chaineLogo {
width:100px;
padding:3px;
display:inline-block;}
.membreLogo a img, .chaineLogo a img {
background:#FFF;
border:1px #333 solid;
border-radius:10px;}
.membreLogo a:hover img, .chaineLogo a:hover img {
box-shadow: #666 0px 0px 15px;
-webkit-box-shadow: #666 0px 0px 15px;
-moz-box-shadow: #666 0px 0px 15px;}
.membreInfo, .chaineInfo {
width:210px;
text-align:left;
line-height:1.5em;
font-style:italic;
display:inline-block;
vertical-align:middle;}
.membreInfo a, .chaineInfo a {
font-style:normal;
color:#BB1917;
text-decoration:none;}
/* ID portable et contacts */
.idPortable img, .contactBlockImage img {
border:0;}
/* Partenaires */
.partenaires {
float:right;
width:300px;
height:100%;}
.partenaireTitre {
margin:auto;
background:#333;
color:#FFF;
font-weight:bold;
width:250px;
text-align:center;
margin-top:30px;
margin-bottom:20px;
padding:5px;
border:#CCC 1px solid;}
.partenaireLogo {
margin:auto;
margin-top:10px;
width:100px;
height:100px;}
.partenaireLogo a img {
background:#FFF;
border:1px #333 solid;
border-radius:10px;}
.partenaireNom {
margin:auto;
text-align:center;
font-style:italic;
font-size:small;
margin-top:8px;
width:250px;
height:20px;}
/* Contact */
.contact {
max-width:100%;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 40em;
-ms-flex: 1 0 40em;
flex:1 0 40em;
display:block;
text-align:center;}
/*.contact > :first-child {
width:55em;
max-width:100%;}*/
.contactBlock {
text-align:center;
background-color:#FFF;
background-image:linear-gradient(white,rgba(255,255,255,0));
background-image:-webkit-linear-gradient(white,rgba(255,255,255,0));
background-image:-moz-linear-gradient(white,rgba(255,255,255,0));
background-image:-ms-linear-gradient(white,rgba(255,255,255,0));
transition:background-color .6s;
margin:1em;
width:175px;
border-radius:10px;
border:#666 1px solid}
.contactBlock:hover {
background-color:#C10101;
color:rgba(255,255,255,1)}
a.contactLien {
text-decoration:none;
color:#000}
.contactBlockImage {
text-align:center;
margin-top:1em;
height:100px;}
.contactBlockTexte {
text-align:center;
margin-top:1em;
margin-bottom:1em;
height:20px;}
.contactInfo {
text-align:center;
font-style:italic;
font-size:small;}
/* FOOTER */
#footer {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: stretch;
-moz-box-align: stretch;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background:linear-gradient(rgba(50,50,50,.9),rgba(10,10,10,.9));
background-position:initial initial;
background-repeat:initial initial;
box-shadow:10px 0 10px #B6B6B6, -10px 0 10px #B6B6B6;
-webkit-box-shadow:10px 0 10px #B6B6B6, -10 0 10px #B6B6B6;
-moz-box-shadow:10px 0 10px #B6B6B6, -10 0 10px #B6B6B6;
}
#footer > * {
margin:auto;}
#footer div {
color:#CCC;
line-height:2em;
text-align:center;
-webkit-box-flex: 10;
-moz-box-flex: 10;
-webkit-flex: 10 0 30em;
-ms-flex: 10 0 30em;
flex:10 0 30em;
max-width:90%;}
#footer span {
max-width:100%;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 0 7em;
-ms-flex: 1 0 7em;
flex:1 0 7em;
/*padding:1.6em 1.6em 0 0;*/
text-align:center}
#footer span a {
color:rgba(255,255,255,.8);
transition:transform .6s, opacity .6s;
-webkit-transition:-webkit-transform .6s, -webkit-opacity .6s;
-moz-transition:-moz-transform .6s, -moz-opacity .6s;
-ms-transition:-ms-transform .6s, -ms-opacity .6s;}