/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

.container {
	/*border:solid 1px #444;*/
}




#language {
	margin:0;
	padding:0;
	width:100%;
	text-align:right;

	
}

#language, a {
	text-decoration:none;
	margin:10px 0;
	
		
}

#head_shadow {
	/*-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);*/
}
.navcontainer  {
	
	height:auto;
	padding:0;
	margin:-5px auto 0 auto;
}

#logo {
	margin:-260px 0 0 50px;
	float:left;
}



/*====================================================
navigation
====================================================*/

nav.primary {
	/*float:right;*/
	text-align:right;
	margin-top:-54px;
	padding-right:90px;
	background:url(../images/menu_bg.png) right no-repeat;
}



nav.primary ul,
nav.primary ul li {
	margin: 0px;
	
	/*border:solid 1px #03F;*/
}

nav.primary select {
	display: none;
	width:  100%;
	height: 28px;
	margin: 21px 0;
}

nav.primary ul li {
	display: inline-block;
	/*float:right;*/
	position: relative;
}

nav.primary ul li a {
	
	/*line-height: 49px;*/
	/*padding:  0 14px;*/
	color:#003150;
	/*text-transform: uppercase;*/
	text-decoration: none;
	/*font-weight: bold;*/
	/*letter-spacing: 0.08em;*/
	font-family: 'MavenProBold';
	font-size:16px;
	padding-right:10px;
	display:inline-block;
	margin:12px;
	text-shadow: 0 1px rgba(255, 255, 255, .75);
	text-align:center;
}

nav.primary ul li a:hover {
	/*background: #424242;*/
	cursor: pointer;
	color:#275E37;
}

/*sub menu*/
nav.primary ul ul {
	opacity: 0; 
  	filter: alpha(opacity=0); 
	position: absolute;
	top:100%;
	left: 0;
	z-index: 999;
	/*background: url(../images/bg_bottom.png);*/
	background:#FFF;
	height: 0px;
	overflow: hidden;
	width: 100%;
	-webkit-transition: opacity 0.4s ease-out;
	-moz-transition: opacity 0.4s ease-out;
	-o-transition: opacity 0.4s ease-out;
	-ms-transition: opacity 0.4s ease-out;
	transition: opacity 0.4s ease-out;
	-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);	
}

nav.primary ul li span {
	display: none;
}

nav.primary ul li:hover ul {
	opacity: 10; 
  	filter: alpha(opacity=100); 
  	
	height: auto;
	overflow: auto;
}

nav.primary ul ul li {
	float: none;
	display: list-item;
	/*border-bottom: 1px solid #383737;*/
	border-bottom: 1px solid #E1E1E1;
}

nav.primary ul ul li a {
	display: block;
	text-align:center;
	font-size:12px;
	/*line-height: 35px;*/
	text-transform: none;
}

nav.primary ul li:hover > a {
	/*background: #424242;*/
	/*background:#E1E1E1;*/
}

/*====================================================*/


/*====================================================
Slider
====================================================*/

/*
 * jQuery FlexSlider v1.8
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* 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 {width: 100%; margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%; display: block;}
.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;}

/*my own flexslider styles*/
.flexslider {
	
}

.flex-control-nav {
	display:none;
	/*width: 100%;
	text-align: center;*/
}


.flex-control-nav li {
	
	/*display: inline;
	margin: 0 5px;*/
}

.flex-control-nav li a {
	
	/*display: inline-block;
	width: 14px;
	height: 14px;
	background: #d5d5d5;
	border: 1px solid#d5d5d5;
	
	cursor: pointer;
	
	font: 0/0 a;
	text-shadow: none;
	color: transparent;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;*/
}

.flex-control-nav li a.active,
.flex-control-nav li a:hover {
	
	/*background: #f1f1f1;*/
}

/*====================================================*/

/*====================================================
Contact form
====================================================*/




#captcha {
	margin:-45px 0 20px 0;
	display:inline;
	float:right;	
}


/*====================================================*/


.full_wrap {
	min-height:100%;
  	position:relative;
}

.content_wrap {
	width:100%;
	background: url(../images/content_bg.png) center top no-repeat;
	/*height:100%;*/
	padding-bottom:200px; /* footer height */
	/*min-height:500px;*/
	/*min-height:100%;*/
}

.spacer {
	height:40px;
	width:100%;
	clear:both;	
}

.head_wrap {
	margin:auto;
	width:100%;
	height:50px;
	background:url(../images/top_bg.png) bottom center no-repeat;
}

/*====================================================
Contenu
====================================================*/
.entypo {
	font-family: 'Entypo';
	font-size:36px;
	text-align:center;
	display:inline-block;
	float:left;
	clear:both;
	margin:-5px 5px 5px 0; /*on peut enlever la marge à gauche pour garder le p aligné*/
	width:20px;
	
}

.entypo-icons {
	font-family: 'Entypo';
	color:#275E37;
	margin:0 5px 0 15px;
	font-size:80px;
	min-height:20px;
	vertical-align:text-top;
	line-height:1px;
	text-align:left;
	display:inline-block;
	float:left;
	clear:both;
	/*border:solid 1px #333;*/
	
}


.one-third.column img  {
	float:left;
	margin:-5px 15px 0 -5px;
	clear:both;
	z-index:100;
	
}

.one-half.column img  {
	float:left;
	margin:-5px 15px 0 -5px;
	clear:both;
	z-index:100;
	
}



.articles_border {
	/*text-align:justify;*/
	background:#FFF;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);
	margin:15px 10px;
	border: solid 2px #003150;
	padding:10px;
}

.eight.columns {
	margin:0 0 20px 0;
	/*min-height:180px;*/

		
}

.eight.columns .button {
	margin-left:20px;
		
}

.eight.columns p, .eight.columns h4 {
	text-align:justify;
	margin:0 25px 10px 20px;
			
}

.eight.columns li {
	margin:0 20px 5px 20px;
	list-style:none;
	
		
}

.eight.columns.left {
	background:url(../images/footer_border.png) right center no-repeat;		
}

#left_about {
	background:url(../images/footer_border.png) right center no-repeat;	
}

#left_contact {
	background:url(../images/contact_border.png) right center no-repeat;	
}


#left_contact iframe {
	width:85%;
	height:350px;
	border:none;
	-moz-box-shadow:0 0 4px #aaa;
	-webkit-box-shadow:0 0 4px #aaa;
	box-shadow:0 0 4px #aaa;
	margin:10px 20px;
}

#left_contact hr {
	margin-right:20px;
}


#flash_container {
	margin:20px auto;
	/*text-align:center;*/

}
object {
	width:700px;
	height:500px;
	/*overflow:hidden;*/
	float:left;
	border: solid 1px #003150;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);	
}

.flash_articles_border {
	background:#FFF;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);
	float:right;
	width:200px;
	/*margin:15px 10px;*/
	border: solid 2px #003150;
	padding:10px;
}
/*====================================================*/

/*====================================================
Products
====================================================*/
.layers_border {
	/*text-align:justify;*/
	background:#FFF;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);
	margin:15px 10px;
	border: solid 2px #003150;
	padding:10px;

}

.layers_border h3, .articles_border h3 {
	display:inline-block;
	margin-bottom:15px;
	
	max-width:425px;
	line-height:36px;
}

.product_logo {
	height:45px;
	width:165px;
	float:right;
	margin:-5px -5px 0 0;	
}

.layers_border p {
	min-height:100px;
	display:block;
	
	margin-left:290px;
	
}
.product_layers {
	float:left;
	margin:-20px 10px -25px 0;
	/*clear:both;*/
	/*display:block;*/
	/*z-index:100;*/
	display:inline-block;
	
}

a.layers_detail {
	font-family: 'Entypo';
	color:#CCC;
	font-size:60px;
	float:left;
	margin-top:-25px;
	cursor:pointer;	
}

.layers_detail:hover {
	color:#275E37;
		
}

.real_thumb {
	float:right;
	width:60px;
	height:60px;
	margin:0 10px 20px 0;
	
	
}

.real_thumb.client_thumb {
	width:100px;
	height:100px;	
}

.real_thumb img {
	width:60px;
	height:60px;
	background:#E1E1E1;
	margin:auto;
	float:right;
	position:relative;
	overflow:hidden;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
	box-shadow:  0 0 3px rgba(0,0,0,.2);
	
}

.zoom {
	font-family: 'Entypo';
	color:#fff;
	font-size:72px;
	margin:17px 10px;
	position:absolute;
	float:left;
	z-index:999;
	opacity:0.2;
	-webkit-opacity:0.2;
	-moz-opacity:0.2;
	cursor:pointer;
	
}

.zoom:hover {
	font-family: 'Entypo';
	color:#FFF;
	font-size:72px;
	margin:17px 10px;
	position:absolute;
	float:left;
	z-index:999;
	opacity:0.9;
	-webkit-opacity:0.9;
	-moz-opacity:0.9;
	cursor:pointer;
	
}







label.thumb {
	float:left;
	margin-left:10px;
	
}


.client_logo {
	/*background:#999;*/
	margin:10px;
	width:210px;
	height:190px;
	display:inline-block;
}

/*====================================================*/



/*====================================================
404
====================================================*/
#404error {
	border:solid 1px;
}


/*====================================================*/

/*====================================================
Footer
====================================================*/
.footer_wrap {
	position:absolute;
	bottom:0;
	width:100%;
	/*margin-top:-100px;*/ /* negative value of footer height */
	clear:both;
	background: url(../images/textures/irongrip.png);
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
	height:200px;

		
}

.footer_wrap h4 {
	font-size:18px;
	color:#999;
	text-shadow: 0 1px #666;
	margin:10px 0 5px 0;
}

.footer_wrap p {
	color:#999;
	/*border:solid 1px #093;*/
	margin:5px 0 5px 5px;
	
	
}


.footer_wrap .entypo {
	/*line-height:20px;*/
	/*border:solid 1px #f00;*/
	margin-left:5px;
	
	
}

.footer_wrap a, .footer_wrap a:visited {
	display:block;
	margin: 0 0 1px 5px;
	color:#999;
	
}

.footer_wrap a:hover, .footer_wrap a:focus {
	color:#275E37;
	
}


.footer_wrap span, .footer_wrap strong {
	color:#777;
	margin-bottom:0;
	
	
}







.columns.left, #center.columns  {
	background:url(../images/footer_border.png) right top no-repeat;
	min-height:180px;
}

#center.columns h4 {
	margin:10px 0 10px 0;
}



.social {
	background:none;
	font-family:Entypo-Social;
	font-size:60px;
	width:auto;
	height:auto;
	float:right;
	color:#333;
	text-shadow: 0 1px #666;
	cursor:pointer;
}



.social a {
	margin:20px 10px;
}

.social a:hover {
	margin:20px 10px;
	/*color:#F00;*/
	text-shadow: 0 1px #030;
}

/*====================================================
Colorbox
====================================================*/
/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff;}
#colorbox{outline:0;}
    #cboxTopLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 0;}
    #cboxTopCenter{height:25px; background:url(images/border1.png) repeat-x 0 -50px;}
    #cboxTopRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px 0;}
    #cboxBottomLeft{width:25px; height:25px; background:url(images/border1.png) no-repeat 0 -25px;}
    #cboxBottomCenter{height:25px; background:url(images/border1.png) repeat-x 0 -75px;}
    #cboxBottomRight{width:25px; height:25px; background:url(images/border1.png) no-repeat -25px -25px;}
    #cboxMiddleLeft{width:25px; background:url(images/border2.png) repeat-y 0 0;}
    #cboxMiddleRight{width:25px; background:url(images/border2.png) repeat-y -25px 0;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:20px;}
        #cboxTitle{position:absolute; bottom:0px; left:0; text-align:center; width:100%; color:#999;}
        #cboxCurrent{position:absolute; bottom:0px; left:100px; color:#999;}
        #cboxLoadingOverlay{background:#fff url(images/loading.gif) no-repeat 5px 5px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxSlideshow{position:absolute; bottom:0px; right:42px; color:#444;}
        #cboxPrevious{position:absolute; bottom:0px; left:0; color:#444;}
        #cboxNext{position:absolute; bottom:0px; left:63px; color:#444;}
        #cboxClose{position:absolute; bottom:0; right:0; display:block; color:#444;}

/*
  The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.  This style is not applied to or needed in IE9.
  See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
  Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(images/ie6/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(images/ie6/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(images/ie6/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(images/ie6/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(images/ie6/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(images/ie6/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(images/ie6/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(images/ie6/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

/*====================================================*/

/*====================================================
Layers focus
====================================================*/
.layers_focus {
	padding:20px;
	
	
}

.layers_focus img {
	float:left;
	
}

.focus_desc {
	/*height:175px;*/
	width:auto;
	float:left;
	padding:0;
	
}

.focus_desc label {
	font-size:14px;
	line-height:13px;
	padding:1px 10px;
	
}

label.impair {
	background:#666;
	color:#E1E1E1;

	
}






/*====================================================*/


/* #Page Styles
================================================== */

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
	
		
		@font-face {
    font-family: 'MavenProBlack';
    src: url('../fonts/Black/maven_pro_black-webfont.eot');
    src: url('../fonts/Black/maven_pro_black-webfont.eot?#iefix') format('eot'),
         url('../fonts/Black/maven_pro_black-webfont.woff') format('woff'),
         url('../fonts/Black/maven_pro_black-webfont.ttf') format('truetype'),
         url('../fonts/Black/maven_pro_black-webfont.svg#webfontXhB2DgBK') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MavenProBold';
    src: url('../fonts/Bold/maven_pro_bold-webfont.eot');
    src: url('../fonts/Bold/maven_pro_bold-webfont.eot?#iefix') format('eot'),
         url('../fonts/Bold/maven_pro_bold-webfont.woff') format('woff'),
         url('../fonts/Bold/maven_pro_bold-webfont.ttf') format('truetype'),
         url('../fonts/Bold/maven_pro_bold-webfont.svg#webfontNOU7iUTL') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MavenProMedium';
    src: url('../fonts/Medium/maven_pro_medium-webfont.eot');
    src: url('../fonts/Medium/maven_pro_medium-webfont.eot?#iefix') format('eot'),
         url('../fonts/Medium/maven_pro_medium-webfont.woff') format('woff'),
         url('../fonts/Medium/maven_pro_medium-webfont.ttf') format('truetype'),
         url('../fonts/Medium/maven_pro_medium-webfont.svg#webfontNj5iy4Dl') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MavenProRegular';
    src: url('../fonts/Regular/maven_pro_regular-webfont.eot');
    src: url('../fonts/Regular/maven_pro_regular-webfont.eot?#iefix') format('eot'),
         url('../fonts/Regular/maven_pro_regular-webfont.woff') format('woff'),
         url('../fonts/Regular/maven_pro_regular-webfont.ttf') format('truetype'),
         url('../fonts/Regular/maven_pro_regular-webfont.svg#webfontOM8fITNz') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Entypo';
    src: url('../fonts/Entypo/entypo.eot');
    src: url('../fonts/Entypo/entypo.eot?#iefix') format('eot'),
         url('../fonts/Entypo/entypo.woff') format('woff'),
         url('../fonts/Entypo/entypo.ttf') format('truetype'),
         url('../fonts/Entypo/entypo.svg#font') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Entypo-Social';
    src: url('../fonts/Entypo_Social/entypo-social.eot');
    src: url('../fonts/Entypo_Social/entypo-social.eot?#iefix') format('eot'),
         url('../fonts/Entypo_Social/entypo-social.woff') format('woff'),
         url('../fonts/Entypo_Social/entypo-social.ttf') format('truetype'),
         url('../fonts/Entypo_Social/entypo-social.svg#font') format('svg');
    font-weight: normal;
    font-style: normal;

}