/*
* www.KNACSS.com V2.2 @author: Raphael Goetter, Alsacreations
* Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
*/


/* ----------------------------- */
/* summary */
/* ----------------------------- */
/*
1- colors
2- reset
3- layout and modules
4- header
5- sidebar
6- footer
7- forms
8- main
9- iefix
10- print
11- desktop medias
12- mobile
*/

/* ----------------------------- */
/* ==colors */
/* ----------------------------- */


/* ----------------------------- */
/* ==reset */
/* ----------------------------- */




/* font-sizing for content */
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea
{
    font-size: 1em;
    line-height: 1.5em;
    margin: 21px 0;
}



h5, .h5-like
{
    font-size: 1.2em;
    font-weight: normal;
    line-height: 1.1667em;
    margin: 42px 0 21px 0;
}

h6, .h6-like
{
    font-size: 1.1em;
    font-weight: normal;
    line-height: 1.3125em;
    margin: 42px 0 21px 0;
}

/* alternate font-sizing */
.smaller
{
    font-size: .7143em;
    line-height: 2.1em;
}

.small
{
    font-size: .8571em;
    line-height: 1.75em;
}

.big
{
    font-size: 1.1429em;
    line-height: 1.3125em;
}

.bigger
{
    font-size: 1.2857em;
    line-height: 1.1667em;
}

.biggest
{
    font-size: 1.8em;
    line-height: 1.05em;
}

/* soft reset */
html,
body,
label
{
    margin: 0;
    padding: 0;
}

ul,
ol
{
    padding-left: 30px;
}

code,
pre,
samp
{
    white-space: pre-wrap;
    font-family: consolas, 'DejaVu Sans Mono', courier, monospace;
}

code
{
    line-height: 1em;
}

table
{
    margin-bottom: 21px;
}

.m-reset
{
    margin: 0 !important;
}

.p-reset
{
    padding: 0 !important;
}

/* avoid collapsing margins on headings */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child
{
    margin-top: 0;
}

/* avoid margins on nested elements */
li p,
li ul,
li ol
{
    margin-top: 0;
    margin-bottom: 0;
}

/* HTML5 tags */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{
    display: block;
}

/* max values */
img, table, td, blockquote, code, pre, textarea, input, video
{
    max-width: 100%;
   font-size: inherit;
}

/* you shall not pass */
textarea, table, td, th, code, pre, samp, div
{
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

/* pictures */
img
{
    vertical-align: middle;
}

a img
{
    border: 0;
}


/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */

/* switching box model for all elements */
*
{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* float layout */
/* ----------- */

/* block that can contain several .mod , can contain floats */
.line
{
}

/* module, contains floats */
.mod
{
    padding: 14px;
}

/* generaly inside .mod, can contain .item */
.items
{
}

/* fluid, contains floats, can be placed next to a float */
.item
{
    overflow: hidden;
}

/* table layout */
/* ------------------ */
.row
{
    display: table;
    table-layout: fixed;
    width: 100%;
}

    .row > *,
    .col
    {
        display: table-cell;
        vertical-align: top;
        padding: 14px 14px 14px 0;
    }

/* blocks that needs to be placed under floats */
.clear,
.line,
.row
{
    clear: both;
}

    /* blocks that can contain floats */
    .clearfix:before, .clearfix:after,
    .line:before, .line:after,
    .mod:before, .mod:after
    {
        content: "";
        display: table;
    }

    .clearfix:after,
    .line:after,
    .mod:after
    {
        clear: both;
    }

/* alignments (blocks and inline) */
/* ------------------------------ */

/* left elements */
.left
{
    float: left;
    margin-right: 14px;
}

.mod.left,
.col.left
{
    margin-right: 0;
}

/* right elements */
.right
{
    float: right;
    margin-left: 14px;
}

.mod.right,
.col.right
{
    margin-left: 0;
}

.center
{
    margin: auto;
}

.txtleft
{
    text-align: left;
}

.txtright
{
    text-align: right;
}

.txtcenter
{
    text-align: center;
}

/* 1em gutter between elements if parent is .gut */
.row.gut > * + *
{
    border-left: 14px solid #fff; /* must be color of parent background */
}

.line.gut > .left
{
    margin-right: 14px;
}

.line.gut > .right
{
    margin-left: 14px;
}

/* "multicolumns" with % gutter */
.line.gut2 > *
{
    width: 49%;
}

    .line.gut2 > * + *
    {
        margin-left: 2%;
    }

.line.gut3 > *
{
    width: 32.333%;
}

    .line.gut3 > * + *
    {
        margin-left: 1.5%;
    }

.line.gut4 > *
{
    width: 24%;
}

    .line.gut4 > * + *
    {
        margin-left: 1.333%;
    }

/* just inline-block */
.inbl
{
    display: inline-block;
    vertical-align: top;
}
/* blocks widths (percentage and pixels) */
.w10
{
    width: 10%;
}

.w20
{
    width: 20%;
}

.w25
{
    width: 25%;
}

.w30
{
    width: 30%;
}

.w33
{
    width: 33.333%;
}

.w40
{
    width: 40%;
}
.w45
{
    width: 45%;
}
.w50
{
    width: 50%;
}

.w60
{
    width: 60%;
}

.w66
{
    width: 66.666%;
}

.w70
{
    width: 70%;
}

.w75
{
    width: 75%;
}

.w80
{
    width: 80%;
}

.w90
{
    width: 90%;
}

.w100
{
    width: 100%;
}

.w50p
{
    width: 50px;
}

.w100p
{
    width: 100px;
}
.w120p
{
    width: 120px;
}
.w150p
{
    width: 150px;
}

.w200p
{
    width: 200px;
}
.w250p
{
    width: 250px;
}
.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;
}

/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small(10px),medium(20px),large(30px),none(0)
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
*/
.mt0, .mtn
{
    margin-top: 0;
}

.mt05
{
    margin-top: 5px;
}

.mt1, .mts
{
    margin-top: 10px;
}

.mt2, .mtm
{
    margin-top: 20px;
}

.mt3, .mtl
{
    margin-top: 30px;
}

.mt6, .mtxl
{
    margin-top: 60px;
}


.mr0, .mrn
{
    margin-right: 0;
}

.mr1, .mrs
{
    margin-right: 10px;
}

.mr2, .mrm
{
    margin-right: 20px;
}

.mr3, .mrl
{
    margin-right: 30px;
}

.mb0, .mbn
{
    margin-bottom: 0;
}

.mb1, .mbs
{
    margin-bottom: 10px;
}

.mb2, .mbm
{
    margin-bottom: 20px;
}

.mb3, .mbl
{
    margin-bottom: 30px;
}

.ml0, .mln
{
    margin-left: 0;
}

.ml1, .mls
{
    margin-left: 10px;
    width: 49px;
}

.ml2, .mlm
{
    margin-left: 20px;
}

.ml3, .mll
{
    margin-left: 30px;
}

.ml4
{
    margin-left: 40px;
}


.pt0, .ptn
{
    padding-top: 0;
}

.pt1, .pts
{
    padding-top: 10px;
}

.pt2, .ptm
{
    padding-top: 20px;
}

.pt3, .ptl
{
    padding-top: 30px;
}

.pr0, .prn
{
    padding-right: 0;
}

.pr1, .prs
{
    padding-right: 10px;
}

.pr2, .prm
{
    padding-right: 20px;
}

.pr3, .prl
{
    padding-right: 30px;
}

.pb0, .pbn
{
    padding-bottom: 0;
}

.pb1, .pbs
{
    padding-bottom: 10px;
}

.pb2, .pbm
{
    padding-bottom: 20px;
}

.pb3, .pbl
{
    padding-bottom: 30px;
}

.pb4
{
    padding-bottom: 40px;
}

.pl0, .pln
{
    padding-left: 0;
}

.pl1, .pls
{
    padding-left: 10px;
}

.pl2, .plm
{
    padding-left: 20px;
}

.pl3, .pll
{
    padding-left: 30px;
}

/* hiding content */
.visually-hidden
{
    position: absolute;
    left: -7000px;
    overflow: hidden;
}

[dir=rtl] .visually-hidden
{
    left: auto;
    right: -7000px;
}

.desktop-hidden
{
    display: none;
}
/* hidden on desktop */
.mobile-hidden
{

}
/* hidden on mobile */
.tablet-hidden
{
}
/* hidden on tablets */
.phone-hidden
{
}
/* hidden on smartphones */

/* ----------------------------- */
/* ==header */
/* ----------------------------- */

/* ----------------------------- */
/* ==sidebar */
/* ----------------------------- */

/* ----------------------------- */
/* ==footer */
/* ----------------------------- */

/* ----------------------------- */
/* ==forms */
/* ----------------------------- */

form,
fieldset
{
    border: none;
}

input,
button,
select,
label
{
    vertical-align: middle; /* @bugfix alignment */
}

/* ----------------------------- */
/* ==main */
/* ----------------------------- */

/* ----------------------------- */
/* ==iefix */
/* ----------------------------- */

/* haslayout for IE6/IE7 */
.ie67 .clearfix,
.ie67 .line,
.ie67 .mod,
.ie67 .row,
.ie67 .col
{
    zoom: 1;
}

/* inline-block and table-cell for IE6/IE7 */
/* warning: .col needs width on IE6/IE7 */
.ie67 .btn,
.ie67 .col,
.ie67 .inbl
{
    display: inline;
    zoom: 1;
}

.ie8 img
{
    width: auto; /* @bugfix for IE8 */
}

/* box-sizing for IE6/IE7 */
/* @source https://github.com/Schepp/box-sizing-polyfill */
/*
.ie67 * {
behavior: url(/js/boxsizing.htc);
}
*/

/* ----------------------------- */
/* ==print */
/* ----------------------------- */

/* quick print reset */
@media print
{
    p,
    blockquote
    {
        orphans: 2;
        widows: 2;
    }

    blockquote,
    ul,
    ol
    {
        page-break-inside: avoid;
    }

    h1,
    h2,
    h3,
    caption
    {
        page-break-after: avoid;
    }
}

/* ----------------------------- */
/* ==desktop medias */
/* ----------------------------- */

@media (min-width: 641px)
{
    /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
}

/* ----------------------------- */
/* ==mobile */
/* ----------------------------- */

/* quick tablet reset */
@media (max-width: 768px)
{
    .tablet-hidden
    {
        display: none;
    }

    [class*="mw"],
    [class*="w9"],
    [class*="w8"],
    [class*="w7"],
    [class*="w6"]
    {
        width: auto;
    }
}

/* quick smartphone reset */
@media (max-width: 640px)
{
    .phone-hidden
    {
        display: none;
    }

    .mod,
    .col,
    label,
    fieldset
    {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border: 0;
        float: none !important;
        width: auto !important;
    }

    [class*="w5"],
    [class*="w4"],
    [class*="w3"]
    {
        width: auto;
    }

    .row
    {
        width: 100% !important;
    }
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)
{
    /* Style adjustments for high resolution devices */
}

/* orientation iOS font-size fix */
@media (orientation: landscape) and (max-device-width: 640px)
{
    html,
    body
    {
        -webkit-text-size-adjust: 100%;
    }
}