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

   TOC:
   a. General and Common Styles
   b. Header Styles
   c. accueil Section
   d. presentation Section
   e. offres Section
   f. Screenshots Section
   g. Call To Action Section
   h. temoignages Section
   i. contact Section
   j. Footer
   k. lightbox

   todo: check bug in mobile z-index

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

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

body { background: #181d21; }

.section-head {
  	padding: 0 4%;
   text-align: center;
}
.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: #0099CC;
   position: fixed;
   left: 0;
   top: 0;
   z-index: 990;
}


/* header social */
header .header-social {
   font: 11px 'montserrat-regular', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   color: #424a56;
   margin: 20px 20px 0 0;
   padding: 0;
   float: right;
}
header .header-social li {
   display: inline-block;
   margin-right: 20px;
}
header .header-social li a { color: #000000; }
header .header-social li a:hover { color: #ffffff; }

/* 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: 54px;
   display: inline-block;

}

/* Links */
ul#nav li a {

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

	-webkit-transition: color .2s ease-in-out;
	-moz-transition: color .2s ease-in-out;
	-o-transition: color .2s ease-in-out;
	-ms-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
}
ul#nav li a:hover { color: #fff; }
ul#nav li a:active { background-color: transparent !important; }
ul#nav li.current a { color: #fff; }
/* ------------------------------------------------------------------ */
/* b2. clients Section
/* ------------------------------------------------------------------ */

#clients {
   padding-top: 48px;
   background: #ffffff;
   overflow: hidden;
}

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

	#clients { 
		background: #ffffff; 
		background-size: 200px 200px;
	}
  
}

#clients .row { max-width: 1040px; }

/* ------------------------------------------------------------------ */
/* c. accueil Section
/* ------------------------------------------------------------------ */

#accueil {
   padding-top: 48px;
   background: #ffffff;
   overflow: hidden;
}

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

	#accueil { 
		background: #ffffff; 
		background-size: 200px 200px;
	}
  
}

#accueil .row { max-width: 1040px; }

/* accueil Text */
.accueil-text {
	color: #676e73;
   width: 83%;
   text-align: center;
   margin: 54px auto 24px auto;
}
.accueil-text h1 {
   font: 40px/1.2em 'montserrat-regular', sans-serif; 
   color: #fff;
   padding: 0;
   margin: 0;
   text-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
}
.accueil-text h1 span,
.accueil-text a { color: #0099CC; }
.accueil-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);
}

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

/* accueil CTA Buttons */
#accueil .buttons {
   text-align: center;
   margin: 0 0 18px 0;
}
#accueil .buttons .button {
   font: 14px/24px 'montserrat-bold', sans-serif;
   text-transform : uppercase;
   letter-spacing: 2px;
}
#accueil .buttons .trial {
   background: #0099CC;
   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;  
}
#accueil .buttons .trial:hover { background: #005184; }
#accueil .buttons .learn-more {
   background: #0099CC;
   margin-right: 30px;

}
#accueil .buttons .trial:hover { background: #005184; }
#accueil .buttons .learn-more:hover { background: #005184; }

/* ------------------------------------------------------------------ */
/* d. presentation Section
/* ------------------------------------------------------------------ */

#presentation {
   padding-top: 24px;
   padding-bottom: 48px;
   overflow: hidden;
   background: #ffffff;
}
#presentation .feature {
   margin-top: 30px;
   margin-bottom: 30px;
}
#presentation .right {
   padding-left: 30px;
   float: right;   
}
#presentation .left {
   padding-right: 30px;
   float: left;   
}
#presentation h3 {
   font: 16px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: #222;
}
.fluid-video-wrapper { margin-top: 18px; }

#presentation .row { max-width: 1040px; }


/*----------------------------------------------*/
/*	e. offres Section
/*----------------------------------------------*/

#offres {
   background: #ffffff;
   padding-top: 53px;
   padding-bottom: 12px;   
   border-top: 0px solid #F0F0F0;
   border-bottom: 0px solid #F0F0F0;
   text-align: center;
}
#offres .price-block {
   background: #fff;
   border: 1px solid #000000;
   text-align: center;
   margin-bottom: 18px;
}

#offres .row { max-width: 1040px; }

.plan-title {
  	font: 15px/30px 'montserrat-regular', sans-serif;
  	padding: 30px 20px 6px 20px;
   margin-bottom: 0px;
  	text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px;
}
.plan-title .fa {
  	display: block;
  	margin-bottom: 6px;
   font-size: 26px;
}
.plan-price {
	font-family: 'montserrat-bold', sans-serif;
   font-size: 30px;
   color: #333;
	padding: 6px 30px 6px 30px;
   margin-bottom: 0;
	text-align: center;
   letter-spacing: .5px;
}
.plan-price span {
	font-family: 'opensans-light', sans-serif;
	font-size: 15px;
	color: #999;	
	display: block;
	margin-top: 0;
}

ul.presentation {
   margin: 12px 0 0 0;
   list-style: none;
}
ul.presentation li {
   line-height: 39px;
   margin-bottom: 0;
}
ul.presentation li:nth-child(odd) { }
ul.presentation li:nth-child(even) { }

.plan-sign-up {
  	padding: 24px 15px;
   margin: 0;
   text-align: center;
}
.plan-sign-up .button {
   font: 13px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 2px;
}


/* ------------------------------------------------------------------ */
/* f. Call To Action Section
/* ------------------------------------------------------------------ */

#call-to-action {
   background: #ffffff;
   padding-top: 24px;
   padding-bottom: 64px;
}
#call-to-action .row { max-width: 1040px; }
#call-to-action h1 {
   font: 18px/24px 'montserrat-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #000000;
}
#call-to-action h1 span { display: none; }
#call-to-action .header-col h1:before {
   font-family: 'FontAwesome';
   content: "\f093";
	padding-right: 18px;
	padding-top: 6px;
	font-size: 72px;
   line-height: 72px;
   text-align: center;
   float: right;
   color: #EBEEEE;  
}
#call-to-action .action { margin-top: 18px; }
#call-to-action .action .button { text-align: center; }
#call-to-action h2 {
   font: 28px/36px 'montserrat-bold', sans-serif;
   color: #EBEEEE;
   margin-bottom: 12px;
}
#call-to-action h2 a {
   color: inherit;
}
#call-to-action p {
   color: #697B8B; 
   font-size: 17px; 
   padding-right: 5px; 
}
#call-to-action p span {
	font-family: 'montserrat-bold', sans-serif; 
	color: #0099CC;
}

#call-to-action .buttons .trial {
   background: #0099CC;
   margin-left: 12px;
}
#call-to-action .buttons .trial:hover { background: #005184; }


/* ------------------------------------------------------------------
/* g. temoignages
/* ------------------------------------------------------------------ */

#temoignages {
   background: #ffffff;
   padding-top: 112px;
   padding-bottom: 66px;
   position: relative;
   min-height: 450px;
   width: 100%;
   overflow: hidden;
   text-align: center;
}

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

#temoignages {
		background: #ffffff;
		background-size: 46px 29px;
	}
  
#temoignages .quote-left, 
#temoignages .quote-right {
   position: absolute;
   top: 25%;
   color: #676e73;
   font-size: 40px;
   margin-top: -25px;
}
#temoignages .quote-left { left: 5%; }
#temoignages .quote-right { right: 5%; }

#temoignages .text-container {
   width: 86%;
   margin: 0 auto;
}
#temoignages h1 {
   font: 24px/36px 'montserrat-bold', sans-serif;
   color: #000000;
   text-transform: uppercase;
   letter-spacing: 2px;   
   margin-bottom: 36px;
}

/*	Blockquotes */
#temoignages blockquote {
   margin: 0 0px 30px 0px;
   padding-left: 0;
   position: relative;   
}
#temoignages blockquote:before { content: none; }
#temoignages blockquote p {
   font-family: 'opensans-semibold', sans-serif;
   font-style: normal;
   color: #676e73;
   padding: 0;
   font-size: 22px;
   line-height: 36px;   
}
#temoignages blockquote cite {
   display: block;
   font-size: 14px;
   font-style: normal;
   line-height: 18px;
   color: #676e73;
}
#temoignages blockquote cite:before { content: "\2014 \0020"; }
#temoignages blockquote cite a,
#temoignages blockquote cite a:visited { color: #8B9798; border: none }

/* Flex Slider
/* ------------------------------------------------------------------ */

/* Reset */
.flexslider a:active,
.flexslider a:focus  { outline: none; }
.slides,
.flex-control-nav,
.flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.slides li { margin: 0; padding: 0;}

/* Necessary Styles */
.flexslider {
   position: relative;
   zoom: 1;
   margin: 0;
   padding: 0;
}
.flexslider .slides { zoom: 1; }
.flexslider .slides > li { position: relative; }

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
/* Suggested container for slide animation setups. Can replace this with your own */
.flex-container { zoom: 1; position: relative; }

/* Clearfix for .slides */
.slides:before,
.slides:after {
   content: " ";
   display: table;
}
.slides:after {
   clear: both;
}

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

/* Slider Styles */
.slides { zoom: 1; }
.slides > li {
   /*margin-right: 5px; */
   overflow: hidden;
}

/* Control Nav */
.flex-control-nav {
   width: 100%;
   text-align: center;
}
.flex-control-nav li {
   margin: 0 6px;
   display: inline-block;
   zoom: 1;
   *display: inline;
}
.flex-control-paging li a {
   width: 12px;
   height: 12px;
   display: block;
   background: #8B9798;
   background: rgba(255, 255, 255, .3);
   cursor: pointer;
   text-indent: -9999px;
   border-radius: 20px;
   box-shadow: inset 0 0 3px rgba(139, 151, 152, .3);
}
.flex-control-paging li a:hover {
    background: #8B9798;
    background: rgba(139, 151, 152, .7);
}
.flex-control-paging li a.flex-active {
    background: #8B9798;
    background: rgba(139, 151, 152, .9);
    cursor: default;
}


/* ------------------------------------------------------------------ */
/* h. contact Section
/* ------------------------------------------------------------------ */

#contact {
   background: #ffffff;
   padding-top: 48px;
   padding-bottom: 48px;
   min-height: 300px;
   width: 100%;
   overflow: hidden;
   text-align: center;
}

#contact a, #contact a:visited  { color: #0099CC; }
#contact a:hover, #contact a:focus { color: #005184; }

#contact h1 { color: #000000; }
#contact p {
   color: #676e73;
   text-align: center;
   padding: 0;
}


/* ------------------------------------------------------------------ */
/* i. Footer
/* ------------------------------------------------------------------ */

footer {
   background: #ffffff;
   padding-top: 48px;
   margin-bottom: 60px;
   color: #3c4753;
   font-size: 13px;
   line-height: 24px;
   position: relative;   
}

footer a, footer a:visited { color: #0099CC; }
footer a:hover, footer a:focus { color: #005184; }

footer .info { padding-right: 90px; }

footer .footer-logo a {
   display: block;
   margin-bottom: 6px;
   margin-top: 24px;
   margin-left: 0px;
}
footer .footer-logo a img {
   height: 30px;
   width: 115px;
}

footer .right-cols .columns {
   padding-right: 5px;
   padding-left: 5px;
   width: 33.33333%; ;
}
footer .right-cols .columns p { margin-bottom: 6px; }

footer h3 {
   font: 13px/24px 'opensans-semibold', sans-serif;
   margin-top: 32px;
   margin-bottom: 6px;
   font-weight: normal;
   color: #000000;
   text-transform: uppercase;
   letter-spacing: 1px;
}
footer h3:before {
   font-family: 'FontAwesome';   
	margin: 0 0 6px 3px;
	font-size: 30px;
   line-height: 48px;
   text-align: left;
   color: #738291;
   display: block;
}


footer ul {
   margin: 0;
   padding: 0;
}
footer ul li {
   margin: 0;
   line-height: 24px;
}
footer ul li a,
footer ul li a:visited { color: #3099CC; }
footer ul li a:hover,
footer ul li a:focus { color: #005184; }

/* copyright */
footer .copyright {
   margin: 0;
   padding: 0 18px;
   clear: both;
}

/* Go To Top Button */
#go-top {
	position: absolute;
	top: -24px;
   left: 50%;
   margin-left: -30px;
   text-align: center;
   z-index: 889;
}
#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 60px;
	height: 60px;
	background: #525252;

	-webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;

   color: #fff;
   font-size: 21px;
   line-height: 60px;
 	border-radius: 100%;
}
#go-top a:hover { background: #3099CC; }


/* ------------------------------------------------------------------ */
/* j. lightbox
/* ------------------------------------------------------------------ */

#imagelightbox {
   cursor: pointer;
   position: fixed;
   z-index: 995;
   -ms-touch-action: none;
   touch-action: none;
   -webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
   -moz-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
   box-shadow: 0 0 3.125em rgba( 0, 0, 0, .3 ); /* 50 */
}

/* activity indication */
#imagelightbox-loading,
#imagelightbox-loading div { border-radius: 50%; }
#imagelightbox-loading {
   width: 2.5em; /* 40 */
   height: 2.5em; /* 40 */
   background-color: #444;
   background-color: rgba( 0, 0, 0, .5 );
   position: fixed;
   z-index: 999;
   top: 50%;
   left: 50%;
   padding: 0.625em; /* 10 */
   margin: -1.25em 0 0 -1.25em; /* 20 */
   -webkit-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
   -moz-box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
   box-shadow: 0 0 2.5em rgba( 0, 0, 0, .3 ); /* 40 */
}
#imagelightbox-loading div {
   width: 1.25em; /* 20 */
   height: 1.25em; /* 20 */
   background-color: #fff;

   -webkit-animation: imagelightbox-loading .5s ease infinite;
   -moz-animation: imagelightbox-loading .5s ease infinite;
   -o-animation: imagelightbox-loading .5s ease infinite;
   animation: imagelightbox-loading .5s ease infinite;
}

@-webkit-keyframes imagelightbox-loading {
	from { opacity: .5; -webkit-transform: scale( .75 ); }
	50% { opacity: 1; -webkit-transform: scale( 1 ); }
	to { opacity: .5; -webkit-transform: scale( .75 ); }
}   
@-moz-keyframes imagelightbox-loading {
	from { opacity: .5; -moz-transform: scale( .75 ); }
	50% { opacity: 1; -moz-transform: scale( 1 ); }
	to { opacity: .5; -moz-transform: scale( .75 ); }
}
@-o-keyframes imagelightbox-loading {
	from { opacity: .5; -o-transform: scale( .75 ); }
	50% { opacity: 1; -o-transform: scale( 1 ); }
	to { opacity: .5; -o-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading {
	from { opacity: .5; transform: scale( .75 ); }
	50% { opacity: 1; transform: scale( 1 ); }
	to { opacity: .5; transform: scale( .75 ); }
}

/* lightbox overlay */
#imagelightbox-overlay {
   background-color: #383838;
   background-color: rgba( 0, 0, 0, .8 );
   position: fixed;
   z-index: 994;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
}

/* 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: #3099CC; }

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

}