/*	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;  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 { font-size: 14px; line-height: 1.5em; color: #3c3c3b; font-family: 'Open Sans', sans-serif; }
::selection { background: #3b8dbd; color: #fff; }
::-moz-selection { background: #3b8dbd; color: #fff; }
a { color: #888888; text-decoration: none; outline: 0; }
a:hover { color: #000; }
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; font-size:13px; 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: #cf0311; }
input[type="submit"],
button[type="submit"] { background: #cf0311; color: #fff; font-family: 'Conv_SWZ721M'; font-size:20px; text-transform: uppercase; padding: 8px 14px;  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 Grid
================================================== */

.container { max-width: 1500px; 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; }


/*  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: #3c3c3b; font-family: 'Open Sans', sans-serif; font-size:14px; 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: 0px 8px; }
		.nav > li > a:hover, 
		.nav > li:hover > a { }
		.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: #cf0311; }
		/* level 2 & 3 */
		.nav li:hover > ul { display: block; }
		.nav ul { display: none; background: #777; position: absolute; left: 0; top: 20px; 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*/

		.fondGris { background-color: #fff; }
		a.lien-charpente-home { color: #3c3c3b; font-family: 'Open Sans', sans-serif; font-size:24px; text-transform: uppercase; z-index: 60; position: absolute; top: 20%; left: 10%;}
		a.lien-charpente-home img { width: 70px; height: 90px; }
		.nomobile{ display: block; }
    }

/*  #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; color: #fff;}
	.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;}


		.blocReference { float: left; width: 120px; height: 150px ; margin-left: 8px; margin-right: 8px; margin-bottom: 20px; }
		.blocReference .gallery-item {
		  float: left;
		  margin-top: 10px;
		  text-align: center;
		  width: 120px !important;
		  height: 120px !important;
		}
		.blocReference .gallery{ height: 120px; }
		.blocReference .gallery img{ width: 115px !important; border: none !important; }

		a.lien-ssmenu { color: #cf0311; font-family: 'Open Sans', sans-serif; font-size:11px; text-transform: uppercase; padding-left:5px; padding-right:5px;}
		.fondGris { background-color: #777; }
		a.lien-charpente-home { color: #3c3c3b; font-family: 'Open Sans', sans-serif; font-size:24px; text-transform: uppercase; z-index: 60; position: absolute; top: 10%; left: 0%;}
    	h2.sstitre-home { font-size: 16px; }
    	.nomobile{ display: none; }
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {


    }


/*  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; }