/*
=====================================================================
*   Woo v1.0 Layout Stylesheet
*   url: styleshout.com
*   05-02-2014
=====================================================================

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. intro Section
   d.  Section
   e. principles Section
   f. Screenshots Section
   g. Call To Action Section
   h. Testimonials Section
   i. Subscribe Section
   j. Footer
   k. lightbox



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

/* ------------------------------------------------------------------ */
/* a. General and Common Styles
/* ------------------------------------------------------------------ */

body { background: #181d21; }

.section-head {
  	padding: 0 4%;
   text-align: center;
}
/* Gros Titres Noirs Who Are We*/
.section-head h1 {
   font: 20px/36px 'montserrat-bold', sans-serif;
   color: #333;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 12px;
}

/* for css animations */
.show { opacity: 1; }
.js #mc_embed_signup input[type="email"],
.js #mc_embed_signup input[type="submit"] {
   opacity: 0;
}


/* ------------------------------------------------------------------ */
/* b. Header Styles
/* ------------------------------------------------------------------ */

header {
   height: 54px;
   width: 100%;
   background: #F7F7F7;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
}

/* header logo */
header .logo {
   margin-left: 36px;
   margin-right: 20px;
   margin-top: 6px;
   float: left;
   width: auto; 
   z-index: 991; 

   /* add position relative since z-index only applies to  
   elements that have been given an explicit position */
   position: relative; 
}
header .logo a {
   display: block;
   margin: 0;
	padding: 0;
	border: none;
	outline: none;
   width: 160px;
   height: 40px;   
}

/* header social */
header .header-social {
	font-size: 20px;
   font-weight: normal;
   line-height: 54px;
   color: #424a56;
   margin: 0 10px 0 0;
   padding: 0;
   float: right;
}
header .header-social li {
   display: inline-block;
   margin-right: 20px;
}
header .header-social li a { color: #fff; }
header .header-social li a:hover { color: #11ABB0; }



/* primary navigation
--------------------------------------------------------------------- */
#nav-wrap, #nav-wrap ul, #nav-wrap li, #nav-wrap a {
	 margin: 0;
	 padding: 0;
	 border: none;
	 outline: none;
}

/* nav-wrap */
#nav-wrap {
   font: 11px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   float: left;
}

/* hide toggle button */
#nav-wrap > a { display: none; }

ul#nav {
   min-height: 54px;
   width: auto;

   /* left align the menu */
   text-align: left;
}
ul#nav li {
	position: relative;
	list-style: none;
	height: 34px;
	display: inline-block;

}

/* Links */
ul#nav li a {

   /* 8px padding top + 8px padding bottom + 38px line-height = 54px */
   display: inline-block;
   padding: 6px 6px;
   line-height: 48px;
   text-align: left;
   color: #58687A;

}
ul#nav li a:hover { color: #8b1801; }
ul#nav li a:active {
	background-color: transparent !important;
}
ul#nav li.current a { color: #8b1801; }




/* LANGUES */

#lang {
	position:absolute;
  display:block;
  top:20px;
  right:30px;
}

.ie6 #lang {
	top:20;
  left:310px;
}

#lang ul {
	position:relative;
  display:block;
  list-style-type:none;
  text-align:right;
}

#lang ul li {
  display:inline-block;
  margin:0 0 0 2px;
}

.ie6 #lang ul li,
.ie7 #lang ul li {
  float:left;
}

#lang ul li a img {
  moz-opacity:.50; filter:alpha(opacity=50); opacity:.50;;
}

#lang ul li a:hover img,
#lang ul li.selected a img {
  moz-opacity:1; filter:alpha(opacity=100); opacity:1;;
}


/* ------------------------------------------------------------------ */
/* c. intro Section
/* ------------------------------------------------------------------ */

#intro {
   padding-top: 66px;
   background: #23292f url("img/intro-bg.png");
   overflow: hidden;
}

/* For high-res devices */
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

	#intro { 
		background: #23292f url("img/intro-bg_@2X.png"); 
		background-size: 1000px 1000px;
	}
  
}

#intro .row {
	max-width: 1040px;
	text-align: left;
	color: #FFFFFF;
}

/* intro Text Tag Line Selfcair*/
.intro-text {
	color: #676e73;
   width: 83%;
   text-align: justify;
   margin: 24px auto 4px auto;
}
/* Gros Titres Intercalaires*/
.intro-text h1 {
   font: 25px/1.2em 'montserrat-regular', sans-serif; 
   color: #fff;
   padding: 0;
   margin: 0;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.intro-text h1 span,
.intro-text a { color: #11ABB0; }

/* Rien*/
.intro-text p {
	font: 16px/30px 'opensans-regular', sans-serif;
	padding: 0;
	margin: 12px 8% 0;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, .2);
   text-align: justify;
	color: #7f7f7f;
}

/* intro Image */
.intro-image {
   width: 100%;
   margin: 0 auto;
}
.intro-image img {
   vertical-align: bottom;
   display: block;
}

/* intro CTA Buttons */
#intro .buttons {
   text-align: center;
   margin: 0 0 18px 0;
}
#intro .buttons .button {
   font: 14px/24px 'montserrat-bold', sans-serif;
   text-transform : uppercase;
   letter-spacing: 2px;
}
#intro .buttons .trial {
   background: #f64b39;
   margin-right: 30px;

   -webkit-animation-delay: 10s;
      -moz-animation-delay: 10s;
       -ms-animation-delay: 10s;
        -o-animation-delay: 10s;
   -webkit-animation-iteration-count: 3;
      -moz-animation-iteration-count: 3;  
}
#intro .buttons .trial:hover { background: #F86A5A; }
#intro .buttons .learn-more {}



/*----------------------------------------------*/
/*	Gros Titres Rouges Flexibility
/*----------------------------------------------*/
.plan-title2 {
	padding: 8px 8px 5px 0px;
	margin-bottom: 0px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-family: 'montserrat-regular', sans-serif;
	font-size: 15px;
	line-height: 25px;
	color: rgb(0,153,255);
	font-weight: bold;
}



/*----------------------------------------------*/
/*	e. Intermede Section
/*----------------------------------------------*/

#interentreprises {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #fff;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#intersoluce {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #fff;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#interoeuvre {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #fff;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#interreseau {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #fff;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#interbilan {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #fff;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}
#interintro {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #FFFFFF;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#interinfos {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #fff;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#interfaq {
	background: #23292f url("img/intro-bg2.png");
   padding-top: 1px;
   padding-bottom: 15px;   
   border-top: 50px solid #fff;
   border-bottom: 1px solid #F0F0F0;
   text-align: center;
}

#interchangeemploi01 {
   text-align: center;
}
#interchangeemploi02 {
   text-align: center;
}

#interchangeeconomie01 {
   text-align: center;
}
#interchangeeconomie02 {
   text-align: center;
}

#interchangesante01 {
   text-align: center;
}
#interchangesante02 {
   text-align: center;
}

#interchangeecologie01 {
   text-align: center;
}
#interchangeecologie02 {
   text-align: center;
}
#interchangeecologie03 {
   text-align: center;
}




/* close button */
#imagelightbox-close {	  
   position: fixed;
   z-index: 999;
   top: 2.5em; /* 40 */
   right: 2.5em; /* 40 */ 
}

#imagelightbox-close i {	  
	display: block;
	background: #fff;
	padding: 10px;
	border-radius: 100%;

	-webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
	-moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
	box-shadow: 0 0 2.5em rgba( 0, 0, 0, .5 ); /* 40 */
}
a#imagelightbox-close { color: #333; }
a#imagelightbox-close:hover, a#imagelightbox-close:focus { color: #11ABB0; }

/* lightbox caption */
#imagelightbox-caption {
	text-align: center;
	color: #fff;
	background-color: #000;
	position: fixed;
	z-index: 999;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 0.625em; /* 10 */
}

#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption {
	-webkit-animation: fade-in .25s linear;
	-moz-animation: fade-in .25s linear;
	-o-animation: fade-in .25s linear;
	animation: fade-in .25s linear;
}

@-webkit-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-moz-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@-o-keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media only screen and (max-width: 41.250em) { /* 660 */

	#container	{ width: 100%; }
	#imagelightbox-close	{
		top: 1.25em; /* 20 */
		right: 1.25em; /* 20 */
	}

} 


/* ------------------------------------------------------------------ */
/* Corrections 22-06-2015
/* ------------------------------------------------------------------ */


#cssmenu ul ul {
  top: 54px;
}


.intro-text h1 {
  color: #fff !important;
}

#imagelightbox-content {
   position: fixed;
   z-index: 995;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow:hidden;
	-webkit-animation: fade-in .25s linear;
	-moz-animation: fade-in .25s linear;
	-o-animation: fade-in .25s linear;
	animation: fade-in .25s linear;
}



#imagelightbox-content img{
	max-width:none;
	height:auto;
	width:100%;
}

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

   
   .fluid-video-wrapper {
  	margin-top: 18px;
  	padding-right: 0;
  	padding-left: 0;
	}

  #cssmenu li:hover > ul {
    left: 9999px;
  }
  
  .touch #cssmenu ul li.touchover > ul {
  	left: 9999px;
	}
  
}