/*	Copyright: (c) 2013 Alexander "Alx" Agnarson
	License: GNU General Public License v3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html*/

 @import url("specifique.css");

/* ------------------------------------------------------------------------- *
 *  Reset - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
 * ------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, 
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, 
canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, 
section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

 
/*  Base Styles
================================================== */
body { background: #eaeaea; font-size: 16px; line-height: 1.5em; color: #666; font-weight: 300;font-family: 'Roboto', sans-serif; }
::selection { background: #3b8dbd; color: #fff; }
.lebody{background: url('img/Marathon-Page-Accueil.jpg') top center;}
::-moz-selection { background: #3b8dbd; color: #fff; }
a { color: #3b8dbd; text-decoration: none; outline: 0; }
a:hover { color: #444; }
img { max-width: 100%; height: auto; }
a,
a:before,
a:after {
-webkit-transition-property: background color; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease;
-moz-transition-property: background color; -moz-transition-duration: 0.2s; -moz-transition-timing-function: ease;
-o-transition-property: background color; -o-transition-duration: 0.2s; -o-transition-timing-function: ease; 
transition-property: background color; transition-duration: 0.2s; transition-timing-function: ease; }
a img {
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-o-transition: opacity 0.2s ease;
transition: opacity 0.2s ease; }
.left,.alignleft { float: left; }
.right,.alignright { float: right; }
.aligncenter { margin-left: auto; margin-right: auto; }
.textcenter{text-align: center;}
.posrel{position: relative;}



/*  Base clear
================================================== */
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.group:before, .group:after { content: ""; display: table; }
.group:after { clear: both; }
.group { zoom: 1; }


/*  Base awesome
================================================== */
.fa { width: 1em; text-align: center; }


/*  Base formulaire
================================================== */
input, textarea, button, select, label { font-family: inherit; }
input,
textarea,
button,
select,
label { font-size: 14px; }
input::-moz-focus-inner, 
button::-moz-focus-inner { border: 0; padding: 0; }
input[type="text"],
input[type="password"],
input[type="email"],
input[type="submit"],
button,
select,  
textarea { margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; border-radius: 0; width:100%;}
input, 
textarea,
select, 
button { -moz-appearance: none; -webkit-appearance: none; -moz-transition: all .2s ease; -webkit-transition: all .2s ease; transition: all .2s ease; }
input[type="checkbox"] { -moz-appearance: checkbox; -webkit-appearance: checkbox; }
input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; }
label { font-weight: 600; color: #444; }
input[type="text"], 
input[type="password"], 
input[type="email"], 
select, 
textarea { background: #fff; border: 2px solid #ddd; color: #777; display: block; max-width: 100%; outline: none; padding: 7px 8px; }
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
select:focus, 
textarea:focus { border-color: #ccc; color: #444; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.1); box-shadow: 0 0 3px rgba(0,0,0,0.1); }
label .required { color: #3b8dbd; }
input[type="submit"],
button[type="submit"] { background: #3b8dbd; color: #fff; padding: 8px 14px; font-weight: 600; display: inline-block; border: none; cursor: pointer; -webkit-border-radius: 3px; border-radius: 3px; }
input[type="submit"]:hover,
button[type="submit"]:hover { background: #444; }




/*  base : headings
================================================== */
h1, h2, h3, h4, h5, h6 { color: #444; font-weight: 600; -ms-word-wrap: break-word; word-wrap: break-word; }
 h1 span,  h2 span,  h3 span,  h4 span,  h5 span,  h6 span { color: #bbb; }
 h1, h2, h3, h4, h5, h6  { margin-bottom: 14px; font-weight: 400; line-height: 1.3em; }
 h1 { font-size: 38px; letter-spacing: -1px; }
 h2 { font-size: 34px; letter-spacing: -0.7px; }
 h3 { font-size: 28px; letter-spacing: -0.5px; }
 h4 { font-size: 24px; letter-spacing: -0.3px; }
 h5 { font-size: 20px; font-weight: 600; }
 h6 { font-size: 18px; font-weight: 600; text-transform: uppercase; }




/*  Base Grid
================================================== */

.container { max-width: 1000px; min-width: 220px; margin: 0 auto; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
		.container .row, .col, .rowbot { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
		.row { margin-bottom: 0px; }
		.rownobot { margin-bottom: 0px; }

		.col, .colnomargin { display: block; float: left; width: 100%;  }
		.colnomargin {margin-left:0%;}
		.col:first-child { margin-left: 0 }
		.row:after,.rownobot:after, .col:after, .colnomargin:after, .clr:after, .group:after { display: block; height: 0; clear: both; content: ""; visibility: hidden; }
		.onlymobile{display: none;}


/*  common : nav
================================================== */
.nav-container { background: #888; z-index: 99; position: relative; }
.nav-toggle { display: none; background: #777; cursor: pointer; float: right; height: 50px; width: 60px; color: #fff; text-align: center; }
.nav-toggle i { font-size: 29px; padding: 10px 0; }
.nav-text { display: none; float: right; font-size: 16px; line-height: 24px; padding: 13px 20px; }
.nav li > a:after,
.nav > li > a:after { font-family: FontAwesome; display: inline-block; }



  
/*  RESPONSIVE
================================================== */


/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) {

		/*NAVIGATION*/
		.nav-wrap { height: auto!important; }
		/* common */
		.nav { font-size: 0; position: relative; }
		.nav li a { color: #ccc; display: block; line-height: 20px; }
		/* dropdown arrows */
		.nav li > a:after { content: "\f0da"; float: right; opacity: 0.5; }
		.nav > li > a:after {content: "\f0d7"; float: none; margin-left: 6px; font-size: 14px; line-height: 1.2em; }
		.nav li > a:only-child:after {content: ""; margin: 0; }
		#footer .nav li > a:after { content: "\f0da"; }
		#footer .nav > li > a:after { content: "\f0d8"; }
		#footer .nav li > a:only-child:after { content: ""; }
		/* level 1 */
		.nav > li { font-size: 16px; /*border-right: 1px solid #999;*/ display: inline-block; position: relative; }
		.nav > li > a { padding: 15px 14px; }
		.nav > li > a:hover, 
		.nav > li:hover > a { background: #777; }
		.nav li > a:hover, 
		.nav li:hover > a, 
		.nav li.current_page_item > a, 
		.nav li.current-menu-item > a,
		.nav li.current-menu-ancestor > a,
		.nav li.current-post-parent > a { color: #fff; }
		/* level 2 & 3 */
		.nav li:hover > ul { display: block; }
		.nav ul { display: none; background: #777; position: absolute; left: 0; top: 50px; width: 180px; padding: 10px 0; z-index: 2; -webkit-transform: translateZ(0);
		-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.15);
		box-shadow: 0 2px 2px rgba(0,0,0,0.15); }
		.nav ul li { font-size: 14px; position: relative; display: block; padding: 0; }
		.nav ul li a { padding: 10px 20px; }
		.nav ul li:last-child { border-bottom: 0!important; }
		/* level 3 */
		.nav ul ul { position: absolute; top: -10px; left: 180px; }
		/*NAVIGATION*/


    	/*GRID*/
		.col { margin-left: 2.1276595744680851063829787234043% }
		.span-1  { width: 2.1276595744680851063829787234043%; } 
		.span-2, .span-twelfth  { width: 6.3829787234042553191489361702128%; } 
		.span-3, .span-eighth  { width: 10.638297872340425531914893617021%; } 
		.span-4, .span-sixth  { width: 14.89361702127659574468085106383%; } 
		.span-5  { width: 19.148936170212765957446808510638%; } 
		.span-6, .span-quarter  { width: 23.404255319148936170212765957447%; } 
		.span-7  { width: 27.659574468085106382978723404255%; } 
		.span-8, .span-third  { width: 31.914893617021276595744680851064%; } 
		.span-9  { width: 36.170212765957446808510638297872%; } 
		.span-10  { width: 40.425531914893617021276595744681%; } 
		.span-11  { width: 44.680851063829787234042553191489%; } 
		.span-12, .span-half  { width: 48.936170212765957446808510638298%; } 
		.span-13  { width: 53.191489361702127659574468085106%; } 
		.span-14  { width: 57.446808510638297872340425531915%; } 
		.span-15  { width: 61.702127659574468085106382978723%; } 
		.span-16  { width: 65.957446808510638297872340425532%; } 
		.span-17  { width: 70.21276595744680851063829787234%; } 
		.span-18  { width: 74.468085106382978723404255319149%; } 
		.span-19  { width: 78.723404255319148936170212765957%; } 
		.span-20  { width: 82.978723404255319148936170212766%; } 
		.span-21  { width: 87.234042553191489361702127659574%; } 
		.span-22  { width: 91.489361702127659574468085106383%; } 
		.span-23  { width: 95.744680851063829787234042553191%; } 
		.span-24  { width: 100%; margin-left: 0; clear: left; }

		.spannomargin-4, .span-quarter  { width: 16.66666666666667%;}
		.spannomargin-5, .span-quarter  { width: 20.83333333333333%;} 
		.spannomargin-6, .span-quarter  { width: 25%; } 
		.spannomargin-8  { width: 33,333%; }
		.spannomargin-9  { width: 37.5%; }
		.spannomargin-10  { width: 41.66%; }
		.spannomargin-12  { width: 50%; }
		.spannomargin-15  { width: 62.5%; }
		.spannomargin-16  { width: 66.66%; }
		.spannomargin-18  { width: 75%; }
		/*GRID*/
		
    }

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
    	/*NAVIGATION*/
    .nav { font-weight: 600; }
	.nav-container { text-transform: none; }
	.nav-toggle,
	.nav-text { display: block; }
	.nav-wrap { position: relative; float: left; width: 100%; height: 0; overflow: hidden; }
	.nav-wrap.transition {
	-webkit-transition: height 0.35s ease;
	-moz-transition: height 0.35s ease;
	-o-transition: height 0.35s ease;
	transition: height 0.35s ease; }
	.expand .nav-wrap { height: auto; }
	/* common */
	.nav { float: left; width: 100%; }
	.nav li a { line-height: 20px; display: block; padding: 8px 20px; }
	.nav li li a { padding-left: 15px; padding-right: 15px; }
	/* dropdown arrows */
	.nav li > a:after { content: '\f0d7'; opacity: 0.5; margin-left: 6px; }
	.nav > li > a:after { content: '\f0d7'; font-size: 14px; }
	.nav li > a:only-child:after { content: ''; }
	/* level 1 */
	.nav > li { font-size: 15px; }
	.nav li > a:hover, 
	.nav li.current_page_item > a, 
	.nav li.current-menu-item > a,
	.nav li.current-post-parent > a { color: #fff; }	
	/* level 2 & 3 */
	.nav ul { display: block!important; margin-left: 40px; }
	.nav ul li { font-size: 13px; font-weight: 300; }
	.nav ul li a { padding-top: 6px; padding-bottom: 6px; }
	/*NAVIGATION*/

	#wrapper{padding:0 10px 0 10px;}

	.lebody{background-image: none;}
	.encartgal{margin-top: 10px;}

	 .nomobile{display: none;}
	 .onlymobile{display: block;}

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    .nomobile{display: none;}
    .onlymobile{display: block;}
    .lebody{background-size: cover;}

    }


/*  Base Elements
================================================== */

 blockquote { position: relative; color: #777; font-style: italic; margin: 0 0 20px 0; padding-left: 50px; }
 blockquote p { margin-bottom: 0.75em; }
 blockquote:before { content: "\f10d"; color: #ccc; font-size: 32px; font-style: normal; font-family: FontAwesome; text-align: center; position: absolute; left: 0; top: 0; }


/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */

 
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: auto; padding: 0;width:100%;display: block;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; position:relative} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block; border:solid #000 2px;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}


/* FlexSlider Default Theme
*********************************/
.flexslider {position: relative;  zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}


/* Direction Nav */
.flex-direction-nav {*height: 0;}
.flex-direction-nav a {width: 33px; height: 33px;  display: block; background: url(../img/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 5000; cursor: pointer; text-indent: -9999px;}
.flex-direction-nav .flex-next {background-position: 100% 0; right:0; }
.flex-direction-nav .flex-prev {left:0;}
.flexslider:hover .flex-next {opacity: 0.8; right: 0px;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 0px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
.flex-direction-nav .flex-disabled { cursor: default;}

/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; display: inline;}
.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background:#cfcfcf; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;}
.flex-control-paging li a:hover { background:#58C0E6;}
.flex-control-paging li a.flex-active { background: #58C0E6; cursor: default; }

.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
}

a.flex-caption{ background: url(../img/fleche-txt.png) no-repeat;  padding-left:25px; ; padding-right:15px; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
div.flex-caption{ background: url(../img/fleche-txt.png) no-repeat;  padding-left:25px; ; padding-right:15px; font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }
.etiquette-slogan{padding-top: 5px;}
a.flex-caption:hover{background: url(../img/fleche-txt.png) no-repeat 5px 12px #e2003b;color:#fff;text-decoration:none;}


@media screen and (max-width: 480px) {

 a.flex-caption{ background: url(../img/fleche-txt.png); font-family: 'PT Sans Narrow', sans-serif; font-size: 18px; color:#000; display:block; width:auto; position:absolute; bottom: 0px; width: 60%; left:22%; text-decoration:none; height: 36px; }

a.flex-caption:hover{background: url(../img/fleche-txt.png) no-repeat 5px 5px #e2003b;color:#fff;text-decoration:none;}
}
