/* ================================ */
/* By Atypic - www.atypic.be
/* ================================ */

/* Display table/row */

.table {
    display: table;
    height: 100%;
    width: 100%;
    border-collapse: separate;
    /*border-spacing: 10px;*/
}
.row {
    display: table-row;
}

/* ===== Colonnes ===== */

.col {
    float: left;
}
.cell { /* Colonne de même hauteur */
    display: table-cell;
    vertical-align: top;
    height: 100%;
}
.colib {
    display: inline-block;
}

.cell.top,
.col.top,
.colib.top {
    vertical-align: top;
}
.cell.middle,
.col.middle,
.colib.middle {
    vertical-align: middle;
}
.cell.bottom,
.col.bottom,
.colib.bottom {
    vertical-align: bottom;
}

.cell img.width100 { /* Si l'image dans un .cell ne se redimentionne pas correctement, il faut mettre .width100 */
    width: 100%;
}

/* ===== Classes max-width ===== */

.mw1200 { max-width: 1200px; }
.mw1100 { max-width: 1100px; }
.mw1000 { max-width: 1000px; }
.mw900 { max-width: 900px; }
.mw800 { max-width: 800px; }
.mw700 { max-width: 700px; }
.mw600 { max-width: 600px; }
.mw500 { max-width: 500px; }
.mw400 { max-width: 400px; }
.mw300 { max-width: 300px; }
.mw200 { max-width: 200px; }
.mw100 { max-width: 100px; }

/* ===== Largeurs des colonnes ===== */

/*
<div class="cf">
    <div class="col w50">50%</div>
    <div class="col w50">50%</div>
</div>
*/

.w99 { width: 99%; }
.w98 { width: 98%; }
.w97 { width: 97%; }
.w96 { width: 96%; }
.w95 { width: 95%; }
.w94 { width: 94%; }
.w93 { width: 93%; }
.w92 { width: 92%; }
.w91 { width: 91%; }
.w90 { width: 90%; }

.w89 { width: 89%; }
.w88 { width: 88%; }
.w87 { width: 87%; }
.w86 { width: 86%; }
.w85 { width: 85%; }
.w84 { width: 84%; }
.w83 { width: 83%; }
.w82 { width: 82%; }
.w81 { width: 81%; }
.w80 { width: 80%; }

.w79 { width: 79%; }
.w78 { width: 78%; }
.w77 { width: 77%; }
.w76 { width: 76%; }
.w75 { width: 75%; }
.w74 { width: 74%; }
.w73 { width: 73%; }
.w72 { width: 72%; }
.w71 { width: 71%; }
.w70 { width: 70%; }

.w69 { width: 69%; }
.w68 { width: 68%; }
.w67 { width: 67%; }
.w66 { width: 66%; }
.w65 { width: 65%; }
.w64 { width: 64%; }
.w63 { width: 63%; }
.w62 { width: 62%; }
.w61 { width: 61%; }
.w60 { width: 60%; }

.w59 { width: 59%; }
.w58 { width: 58%; }
.w57 { width: 57%; }
.w56 { width: 56%; }
.w55 { width: 55%; }
.w54 { width: 54%; }
.w53 { width: 53%; }
.w52 { width: 52%; }
.w51 { width: 51%; }
.w50 { width: 50%; }

.w49 { width: 49%; }
.w48 { width: 48%; }
.w47 { width: 47%; }
.w46 { width: 46%; }
.w45 { width: 45%; }
.w44 { width: 44%; }
.w43 { width: 43%; }
.w42 { width: 42%; }
.w41 { width: 41%; }
.w40 { width: 40%; }

.w39 { width: 39%; }
.w38 { width: 38%; }
.w37 { width: 37%; }
.w36 { width: 36%; }
.w35 { width: 35%; }
.w34 { width: 34%; }
.w33 { width: 33%; }
.w32 { width: 32%; }
.w31 { width: 31%; }
.w30 { width: 30%; }

.w39 { width: 39%; }
.w38 { width: 38%; }
.w37 { width: 37%; }
.w36 { width: 36%; }
.w35 { width: 35%; }
.w34 { width: 34%; }
.w33 { width: 33%; }
.w32 { width: 32%; }
.w31 { width: 31%; }
.w30 { width: 30%; }

.w29 { width: 29%; }
.w28 { width: 28%; }
.w27 { width: 27%; }
.w26 { width: 26%; }
.w25 { width: 25%; }
.w24 { width: 24%; }
.w23 { width: 23%; }
.w22 { width: 22%; }
.w21 { width: 21%; }
.w20 { width: 20%; }

.w19 { width: 19%; }
.w18 { width: 18%; }
.w17 { width: 17%; }
.w16 { width: 16%; }
.w15 { width: 15%; }
.w14 { width: 14%; }
.w13 { width: 13%; }
.w12 { width: 12%; }
.w11 { width: 11%; }
.w10 { width: 10%; }

.w9 { width: 9%; }
.w8 { width: 8%; }
.w7 { width: 7%; }
.w6 { width: 6%; }
.w5 { width: 5%; }

.w50 { width: 50%; } /* sauto dispo */
.w33 { width: 33.33333%; } /* sauto dispo */
.w30 { width: 30%; } /* sauto dispo */
.w25 { width: 25%; } /* sauto dispo */
.w20 { width: 20%; } /* sauto dispo */

/* ===== Gouttières entre les colonnes ===== */

/*
<div class="cf">
    <div class="col w30">30%</div>
    <div class="col w60 s10">60%</div>
</div>


<div class="cf">
    <div class="col w50 sauto">30%</div>
    <div class="col w50 sauto">60%</div>
</div>
*/

.s99 { margin-left: 99%; }
.s98 { margin-left: 98%; }
.s97 { margin-left: 97%; }
.s96 { margin-left: 96%; }
.s95 { margin-left: 95%; }
.s94 { margin-left: 94%; }
.s93 { margin-left: 93%; }
.s92 { margin-left: 92%; }
.s91 { margin-left: 91%; }
.s90 { margin-left: 90%; }

.s89 { margin-left: 89%; }
.s88 { margin-left: 88%; }
.s87 { margin-left: 87%; }
.s86 { margin-left: 86%; }
.s85 { margin-left: 85%; }
.s84 { margin-left: 84%; }
.s83 { margin-left: 83%; }
.s82 { margin-left: 82%; }
.s81 { margin-left: 81%; }
.s80 { margin-left: 80%; }

.s79 { margin-left: 79%; }
.s78 { margin-left: 78%; }
.s77 { margin-left: 77%; }
.s76 { margin-left: 76%; }
.s75 { margin-left: 75%; }
.s74 { margin-left: 74%; }
.s73 { margin-left: 73%; }
.s72 { margin-left: 72%; }
.s71 { margin-left: 71%; }
.s70 { margin-left: 70%; }

.s69 { margin-left: 69%; }
.s68 { margin-left: 68%; }
.s67 { margin-left: 67%; }
.s66 { margin-left: 66%; }
.s65 { margin-left: 65%; }
.s64 { margin-left: 64%; }
.s63 { margin-left: 63%; }
.s62 { margin-left: 62%; }
.s61 { margin-left: 61%; }
.s60 { margin-left: 60%; }

.s59 { margin-left: 59%; }
.s58 { margin-left: 58%; }
.s57 { margin-left: 57%; }
.s56 { margin-left: 56%; }
.s55 { margin-left: 55%; }
.s54 { margin-left: 54%; }
.s53 { margin-left: 53%; }
.s52 { margin-left: 52%; }
.s51 { margin-left: 51%; }
.s50 { margin-left: 50%; }

.s49 { margin-left: 49%; }
.s48 { margin-left: 48%; }
.s47 { margin-left: 47%; }
.s46 { margin-left: 46%; }
.s45 { margin-left: 45%; }
.s44 { margin-left: 44%; }
.s43 { margin-left: 43%; }
.s42 { margin-left: 42%; }
.s41 { margin-left: 41%; }
.s40 { margin-left: 40%; }

.s39 { margin-left: 39%; }
.s38 { margin-left: 38%; }
.s37 { margin-left: 37%; }
.s36 { margin-left: 36%; }
.s35 { margin-left: 35%; }
.s34 { margin-left: 34%; }
.s33 { margin-left: 33%; }
.s32 { margin-left: 32%; }
.s31 { margin-left: 31%; }
.s30 { margin-left: 30%; }

.s39 { margin-left: 39%; }
.s38 { margin-left: 38%; }
.s37 { margin-left: 37%; }
.s36 { margin-left: 36%; }
.s35 { margin-left: 35%; }
.s34 { margin-left: 34%; }
.s33 { margin-left: 33%; }
.s32 { margin-left: 32%; }
.s31 { margin-left: 31%; }
.s30 { margin-left: 30%; }

.s29 { margin-left: 29%; }
.s28 { margin-left: 28%; }
.s27 { margin-left: 27%; }
.s26 { margin-left: 26%; }
.s25 { margin-left: 25%; }
.s24 { margin-left: 24%; }
.s23 { margin-left: 23%; }
.s22 { margin-left: 22%; }
.s21 { margin-left: 21%; }
.s20 { margin-left: 20%; }

.s19 { margin-left: 19%; }
.s18 { margin-left: 18%; }
.s17 { margin-left: 17%; }
.s16 { margin-left: 16%; }
.s15 { margin-left: 15%; }
.s14 { margin-left: 14%; }
.s13 { margin-left: 13%; }
.s12 { margin-left: 12%; }
.s11 { margin-left: 11%; }
.s10 { margin-left: 10%; }

.s9 { margin-left: 9%; }
.s8 { margin-left: 8%; }
.s7 { margin-left: 7%; }
.s6 { margin-left: 6%; }
.s5 { margin-left: 5%; }
.s4 { margin-left: 4%; }
.s3 { margin-left: 3%; }
.s2 { margin-left: 2%; }
.s1 { margin-left: 1%; }



/* ===== 2 colonnes avec espace (.sauto) ===== */

/*
<div class="cf">
    <div class="col w50 sauto">50%</div>
    <div class="col w50 sauto">50%</div>
</div>
*/

.w50.sauto {
    width: 48%;
    margin-left: 4%;
}
.w50.sauto:first-child {
    margin-left:0;
}

/* ===== 3 colonnes avec espace (.sauto) ===== */

/*
<div class="cf">
    <div class="col w30 sauto">30%</div>
    <div class="col w30 sauto">30%</div>
    <div class="col w30 sauto">30%</div>
</div>
*/

.w30.sauto,
.w33.sauto {
    width: 30%;
    margin-left: 5%;
}
.w30.sauto:first-child,
.w33.sauto:first-child {
    margin-left:0;
}

/* ===== 4 colonnes avec espace (.sauto) ===== */

/*
<div class="cf">
    <div class="col w25 sauto">25%</div>
    <div class="col w25 sauto">25%</div>
    <div class="col w25 sauto">25%</div>
    <div class="col w25 sauto">25%</div>
</div>
*/

.w25.sauto {
    width: 22%;
    margin-left: 4%;
}
.w25.sauto:first-child {
    margin-left:0;
}

/* ===== 5 colonnes avec espace (.sauto) ===== */

/*
<div class="cf">
    <div class="col w20 sauto">20%</div>
    <div class="col w20 sauto">20%</div>
    <div class="col w20 sauto">20%</div>
    <div class="col w20 sauto">20%</div>
    <div class="col w20 sauto">20%</div>
</div>
*/

.w20.sauto {
    width: 16.888888%;
    margin-left: 4%;
}
.w20.sauto:first-child {
    margin-left:0;
}

/* ===== 10 colonnes avec espace (.sauto) ===== */

/* <div class="col w10 sauto"></div> */

/*
<div class="cf">
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
    <div class="col w10 sauto">10%</div>
</div>
*/

.w10.sauto {
    width: 8.2222222%;
    margin-left: 2%;
}
.w10.sauto:first-child {
    margin-left:0;
}