@import url(http://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic&subset=latin,latin-ext);
html {

}
body {
    font-family: 'Dosis', sans-serif;
    font-size: 1em;
    color: #4f4f4f;
    background: #1E1E1E;
}

.left { float:left; }
.right { float:right; }
.none { float: none; }
.clr { clear: both; }

a { color: #4f4f4f!important; }
a:hover { color: #6f160b!important; }

p,
ul,
ol,
dl,
span,
blockquote,
pre,
td,
th,
label,
textarea,
button
input,
select,
select option,
select optgroup,
caption,
details,
figure,
hgroup{
    font-size: 18px;
    line-height:1.35;
    font-family: 'Dosis', sans-serif;
}
p,
ul,
ol,
dl,
blockquote,
pre,
td,
th,
label,
textarea,
caption,
details,
figure,
hgroup {
    margin: 1.5em 0 0;
}

h1, h2, h3, h4, h5, h6
{
    line-height: 1;
    font-weight: bold;
    margin: 20px 0 10px 0;
}
h1{
    font-size: 30px; /* equiv 26px */
    font-weight: 500;
    line-height: 1.6154em;
    margin: .8077em 0 0 0;
    color: #000000;
	text-transform:uppercase;
	}
h2{
    font-size: 18px; /* equiv 24px */
    font-weight: 700;
    line-height: normal;
    margin: 0;
	color:#921f0b;
}
h3{
    font-size: 1.5714em; /* equiv 22px */
    font-weight: normal;
    line-height: 1.2em;
    margin: .9545em 0 5px 0;;
}
h4{
    font-size: 1.4286em; /* equiv 20px */
    font-weight: 700;
    line-height: 1.05em;
    color: #4f4f4f;
    margin:  1.05em 0 0 0;
}

h5{
    font-size: 1.2857em; /* equiv 18px */
    font-weight: normal;
    line-height: 1.1667em;
    margin:  1.1667em 0 0 0;
}
h6{
    font-size: 10px;
    font-weight: normal;
    line-height: 1.3125em;
    margin:  1.3125em 0 0 0;
}

p{
    padding: 10px 0;
    margin: 0px;

}

a, a:link {
    text-decoration: none;
    color: #ffffff;
    transition: all .3s ease;
}


a:active, a:visited, a:hover
{
    color: inherit;
    text-decoration: underline;
    color: #4f4f4f;
}

/* soft reset */
html,
body,
textarea,
figure,
label {
    margin: 0;
    padding: 0;
}
ul,
ol {
    padding-left: 2em;
}
code,
pre,
samp {
    white-space: pre-wrap;
    font-family: 'Dosis', sans-serif;
}
code { line-height: 1em; }
table { margin-bottom: 1.5em; }

/* manala top margins am premier element */
p: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 ul,
li ol {
    margin-top: 0;
    margin-bottom: 0;
}

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

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


/* vous ne passerez pas */
div, textarea, table, td, th, code, pre, samp {
    word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}

/* images */
img {
    width: auto;
    height: auto;
    vertical-align: middle;
}
a img { border: 0; }
a:link,
a:focus ,
input[type=checkbox],
input[type=radio] { border: 0; }

.v-align-top { vertical-align: top !important;}
.v-align-middle { vertical-align: middle !important;}
.v-align-bottom { vertical-align: bottom !important;}


.relative { position: relative;}
/*TEXT FORMAT*/

.uppercase { text-transform: uppercase;}
.lowercase { text-transform: lowercase;}

/*TEXT FORMAT*/
/*TEXT SIZE*/
.f-size-0 { font-size: 0;}
.f-size-10 { font-size: 10px !important;}
.f-size-11 { font-size: 11px !important;}
.f-size-12 { font-size: 13px !important;}
.f-size-13 { font-size: 13px !important;}
.f-size-14 { font-size: 14px !important;}
.f-size-16 { font-size: 16px !important;}
.f-size-18 { font-size: 18px !important;}
.f-size-20 { font-size: 20px !important;}
/*TEXT SIZE*/

/*TEXT COLOR*/
.color-white { color: #ffffff !important;}
.color-grey-black { color: #1e1e1e !important;}
.color-grey-dark { color: #7f7f7f !important;}
.color-grey-white { color: #a3a3a3 !important;}
.color-red { color: #c41230 !important;}
.color-pink { color: #d3818f !important;}

/*TEXT COLOR*/



/*BACK-GROUND COLOR*/
.no-background { background: none !important;}
.background-light-grey{background-color: #e6e6e6 !important;}
.background-white { background-color: #ffffff !important;}
.background-grey-black {  background-color: #1e1e1e !important;}
.background-grey-dark {  background-color: #7f7f7f !important;}
.background-grey-white {  background-color: #a3a3a3 !important;}
.background-red {  background-color: #c41230 !important;}
.background-pink {  background-color: #d3818f !important;}
.background-blue-green{  background-color: #12adc4 !important;}
.background-green{  background-color: #47c920 !important;}

/*BACK-GROUND COLOR*/



/*SPACEMENT RESET*/

/*no padding*/
.no-padding { padding: 0 !important;}
.no-padding-top { padding-top: 0 !important;}
.no-padding-bottom { padding-left: 0 !important;}
.no-padding-left { padding-left: 0 !important;}
.no-padding-right { padding-right: 0 !important;}

/*no-margin*/
.no-margin { margin: 0 !important;}
.no-margin-top { margin-top: 0 !important;}
.no-margin-bottom { margin-left: 0 !important;}
.no-margin-left { margin-left: 0 !important;}
.no-margin-right { margin-right: 0 !important;}

/*padding = 5px*/
.padding-5 { padding: 5px !important;}
.padding-5-top { padding-top: 5px !important;}
.padding-5-bottom { padding-left: 5px !important;}
.padding-5-left { padding-left: 5px !important;}
.padding-5-right { padding-right: 5px !important;}


/*padding = 10px*/
.padding-10 { padding: 10px !important;}
.padding-10-top { padding-top: 10px !important;}
.padding-10-bottom { padding-bottom: 10px !important;}
.padding-10-left { padding-left: 10px !important;}
.padding-10-right { padding-right: 10px !important;}


/*padding = 15px*/
.padding-15 { padding: 15px !important;}
.padding-15-top { padding-top: 15px !important;}
.padding-15-bottom { padding-left: 15px !important;}
.padding-15-left { padding-left: 15px !important;}
.padding-15-right { padding-right: 15px !important;}


/*padding = 20px*/
.padding-20 { padding: 20px !important;}
.padding-20-top { padding-top: 20px !important;}
.padding-20-bottom { padding-bottom: 20px !important;}
.padding-20-left { padding-left: 20px !important;}
.padding-20-right { padding-right: 20px !important;}


/*margin = 5px*/
.margin-5 { margin: 5px !important;}
.margin-5-top { margin-top: 5px !important;}
.margin-5-bottom { margin-bottom: 5px !important;}
.margin-5-left { margin-left: 5px !important;}
.margin-5-right { margin-right: 5px !important;}

/*margin = 10px*/
.margin-10 { margin: 10px !important;}
.margin-10-top { margin-top: 10px !important;}
.margin-10-bottom { margin-bottom: 10px !important;}
.margin-10-left { margin-left: 10px !important;}
.margin-10-right { margin-right: 10px !important;}

/*margin = 15px*/
.margin-15 { margin: 15px !important;}
.margin-15-top { margin-top: 15px !important;}
.margin-15-bottom { margin-bottom: 15px !important;}
.margin-15-left { margin-left: 15px !important;}
.margin-15-right { margin-right: 15px !important;}

/*margin = 20px*/
.margin-20 { margin: 20px !important;}
.margin-20-top { margin-top: 20px !important;}
.margin-20-bottom { margin-bottom: 20px !important;}
.margin-20-left { margin-left: 20px !important;}
.margin-20-right { margin-right: 20px !important;}

/*SPACEMENT RESET*/

/*TEXT ALIGNEMENT*/
.align-ajust { text-align: justify !important;}
.align-center { text-align: center !important;}
.align-left { text-align: left !important;}
.align-right { text-align: right !important;}
/*TEXT ALIGNEMENT*/

.wrapper { width: 100%; position: relative;}
.wrap { max-width: 960px; *width: 960px; margin: 0 auto; position: relative;}


/*FLOAT AND CLEAR*/
.flt-l { float: left;}
.flt-r { float: right;}
.flt-n { float: none !important;}
.clr { clear: both; width: 100%; height: 0; display: block;}
/*FLOAT AND CLEAR*/

.bold { font-weight: bold; }


@media screen and (min-width: 640px) {
    .hidden-desk { display: none !important;}
    .visible-desk { display: block !important;}
}
@media screen and (max-width: 640px) {
    .hidden-mobile { display: none !important;}
    .visible-mobile { display: block !important;}
}
@media screen and (max-width: 768px) and (min-width: 640px) {
    .hidden-tablet { display: none !important;}
    .visible-tablet { display: block !important;}
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
    line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box; /* 2 */
    box-sizing: border-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input[type=search],
input[type=email],
input[type=url],
input[type=date],
input[type=datetime],
input[type=datetime-local],
input[type=color],
input[type=file],
input[type=month],
input[type=number],
input[type=image],
input[type=range],
input[type=password],
input[type=time],
input[type=tel],
input[type=week],
input[type=text],
textarea {
    border: 1px solid #c2c2c2;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    width: 220px;
    background:url("../img/bg-input.png") right top no-repeat #ffffff;
    padding: 10px;
    font-weight: 400;
}



/*COLORBOX reset*/
#cboxWrapper { min-width: 290px;}
#colorbox{ top: 140px !important;}
#cboxOverlay { opacity: 0.5 !important;}
#cboxContent { background: #ffffff !important; }
#cboxLoadedContent { border: 10px solid #ffffff !important;}

@media screen and (max-width: 480px){
    #colorbox{ top: 40px !important;}
    #cboxContent { margin:0  !important;}
    #cboxLoadedContent { border: 10px solid #ffffff !important;}
}

/*COLORBOX reset*/




/*CHECKBoXES*/
.check-radio [type="radio"]:not(:checked),
.check-radio [type="radio"]:checked ,
.check-radio [type="checkbox"]:not(:checked),
.check-radio [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

.check-radio [type="radio"]:not(:checked) + label,
.check-radio [type="radio"]:checked + label ,
.check-radio [type="checkbox"]:not(:checked) + label,
.check-radio [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    float: left;
}

.check-radio [type="radio"]:not(:checked) + label:before,
.check-radio [type="radio"]:checked + label:before ,
.check-radio [type="checkbox"]:not(:checked) + label:before,
.check-radio [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: 2px;
    width: 18px; height: 18px;
    border: 1px solid #c2c2c2;
    background: #f8f8f8;
    border-radius: 1px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.3)
}

.check-radio [type="radio"]:not(:checked) + label:after,
.check-radio [type="radio"]:checked + label:after ,
.check-radio [type="checkbox"]:not(:checked) + label:after,
.check-radio [type="checkbox"]:checked + label:after {
    content: '';
    position: absolute;
    top: 1px; left: 1px;
    width: 18px;
    height: 18px;
    font-size: 14px;
    color: #c41230;
    transition: all .2s;
    font-weight: 200;
    font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    background: url("../img/puce-ckeckbox.png") 0 0 no-repeat;
}
.check-radio [type="radio"]:not(:checked) + label:after ,
.check-radio [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;
    transform: scale(0);
}
.check-radio [type="radios"]:checked + label:after ,
.check-radio [type="checkbox"]:checked + label:after {
    opacity: 1;
    transform: scale(1);
}

.check-radio [type="radio"]:disabled:not(:checked) + label:before,
.check-radio [type="radio"]:disabled:checked + label:before ,
.check-radio [type="checkbox"]:disabled:not(:checked) + label:before,
.check-radio [type="checkbox"]:disabled:checked + label:before {
    box-shadow: none;
    border-color: #bbb;
    background-color: #ddd;
}
.check-radio [type="radio"]:disabled:checked + label:after ,
.check-radio [type="checkbox"]:disabled:checked + label:after {
    color: #999;
}
.check-radio [type="radio"]:disabled + label ,
.check-radio [type="checkbox"]:disabled + label {
    color: #aaa;
}

.check-radio [type="radio"]:checked:focus + label:before,
.check-radio [type="radio"]:not(:checked):focus + label:before ,
.check-radio [type="checkbox"]:checked:focus + label:before,
.check-radio [type="checkbox"]:not(:checked):focus + label:before {
    border: 1px dotted blue;
}
/*CHECKBoXES*/