/* CSS Document */

/*
BLEU CLAIR 		#99a3b1  / 9cacba
DEFAUT 			#404040
ORANGE 			#e9520e
BLEU				#3cbedd  / 1062a8 
VERT				#6eb22d
BLEU 2 0baed4
*/

body, html{ margin:0; padding:0; height:100%}
body { font-family: 'Source Sans Pro',  Arial, sans-serif; font-weight:400; font-size:14px;  color:#474747}
.container, .containerLarge {display:block; position:relative; margin:0 auto; width:1200px; max-width:92%; }
.containerLarge { width:1380px}
.noDisplay {display:none !important; height:0}

.bloc1-2, .bloc2-2{display:inline-block; width:48%; vertical-align:top}
.bloc1-2{ margin-right:2%;}
.bloc2-2{margin-left:2%}
.bloc1-3, .bloc2-3{display:inline-block; width:30%; margin:0 1.5%; vertical-align:top}
.bloc1-4{display:inline-block; width:23%; margin:0 1%; vertical-align:top}
.bloc60, .bloc40{width:60%; display:inline-block; vertical-align: middle; position:relative }
.bloc40{width:40%; }
/*.bloc60 p{max-width:95% !important}*/
.tabs {width:100%;}
.tabs tr td {width:50%}
img {max-width: 100%}
.spacer {display:block; border:0; height:30px}
.aRight {text-align:right !important}

.lang { float:right; opacity:0.4;  filter: alpha(opacity=40); margin:5px 0 0 10px; }
.langActive {opacity:1; filter: alpha(opacity=100); }

hr.classic {width:96%; border:0; border-bottom:1px  dashed  #9cacba; margin:20px 0; padding:0}
cite { font-style:italic; padding:5px 30px 5px 15px; margin-left:15px; border-left:1px solid  #efefef; display:block; color:#99a3b1; text-align:left}

.icoUp { position: fixed; right:30px; bottom:40px;cursor:pointer; display:none; z-index:600}
.icoUp:hover { opacity:0.8}

section.bgGrey {width:100%;  padding:30px 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+24,ededed+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+32,f2f2f2+100 */
background: rgb(255,255,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 32%, rgba(242,242,242,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,1) 32%,rgba(242,242,242,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 32%,rgba(242,242,242,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

section.bgGrey2{width:100%;  padding:30px 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,ffffff+62 */
background: rgb(244,244,244); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(244,244,244,1) 0%, rgba(255,255,255,1) 62%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 62%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(244,244,244,1) 0%,rgba(255,255,255,1) 62%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */



}
/*TYPOGRAPHIES & GENERALITES*/
h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 * {font-family: 'Economica',  Arial, sans-serif; font-weight:400}
h1 , h1 span{ color:#ffffff; font-family:'Montserrat'; font-weight:700; font-size:62px; letter-spacing:2px; text-transform:uppercase}
h2 { font-size:35px; text-transform:uppercase; line-height:42px; margin-top:8px}
h2 big {line-height:54px}
h3 {font-size:35px; letter-spacing:0; margin: 20px 0 0 0}
h3 i {display:block !important; margin:0 auto 10px auto; font-size:50px !important}

h4 {font-size:25px}
/*.subTitle{font-family: 'Source Sans Pro',  Arial, sans-serif; font-weight:300; font-size:24px; display:block; letter-spacing:1px; line-height:32px; margin:14px 0; color:#9cacba}*/
.subTitle{font-family: 'Source Sans Pro',  Arial, sans-serif; font-weight:400; font-size:22px; display:block; letter-spacing:0; line-height:32px; margin:14px 0; color:#4e4e4e}
.subTitle2{ font-style:italic; text-align:center; font-weight:400; font-size:16px; display:block; letter-spacing:1px; line-height:24px; margin:14px 0; color:#9cacba; max-width:450px; display:block; margin:15px auto}
a, a:visited {text-decoration:none; }
.BgOrange {background-color:#e9520e !important;  color:#ffffff;}
.BgBlue {background-color:#0baed4;  color:#ffffff;}
.BgGreen{background-color:#6eb22d;  color:#ffffff;}
.BgWhite {background-color:#ffffff !important}
.tOrange {color:#e9520e;}
.tBlue {color:#0baed4;}
.tGreen {color:#6eb22d;}



p {font-size:15.5px; line-height:25px; display:block;  max-width:100%; letter-spacing:0; margin:8px 0 16px 0; font-weight:400; text-align:left}
p.italic {font-size:14px; line-height:20px;   letter-spacing:0; margin:8px 0 16px 0; font-style:italic}
p.small {font-size:12px; line-height:18px;   letter-spacing:0; margin:5px 0 10px 0; }
p.large {font-size:15px !important;  line-height:21px;   letter-spacing:0; margin:15px 0 ; color:#909eac }

img {max-width:100%;}
.photo {max-width:92%; margin:15px 0; display:block; border:1px solid #efefef; padding:2%}

ul , ul li{position:relative; text-align:left !important}
ul.defaut {margin:0; padding:0 0 0 25px}
ul.defaut  li { margin:0 0 5px 0; font-size:100%; font-size:15.5px !important;  line-height:25px !important; }
ul.medium, {margin:0; padding:0 0 0 15px; opacity:0.9}
ul.medium  li { margin:0 0 5px 0; font-size:100%; font-size:14px !important;  line-height:18px !important; }
ul.icons  {margin:0 0 0 5%; padding:8px 0  !important; vertical-align:top}
 ul.half {margin:0 0 0 4%; padding:8px 0 !important ; vertical-align:top}
ul.half {margin:0 0 0 6%; padding:0 ; display:inline-block; width:44%; vertical-align:top}
ul.icons li {  list-style:none; margin:0 0 10px 0; font-size:100%; font-size:15px !important;  line-height:17px !important; }
ul.icons  i{color:#3cbedd}

p strong { font-weight:700}
p.lineUp {border-top:0px solid #f1f1f1; padding-top:10px; font-weight:700 !important; font-size:24px !important; line-height:26px !important; width:auto}
p.lineUp small {font-size:18px}
p.lineUp i {display:inline-block; margin:15px; font-size:40px}
.bloc60 p, .bloc40 p {max-width:90%}

/*FORM*/
#formNews  {position:relative}
#formNews input {margin-top:20px;}
.formNews {background-color: rgba(255, 255, 255, 0.8); font-size:15px; padding:8px 10px;  border:1px solid #ffffff; color:#ffffff}
.formNews:focus { background:#0baed4;  border:1px solid #0baed4; c}

::-webkit-input-placeholder { color:#0baed4; font-weight:100; font-size:11px; letter-spacing:1px; text-transform:uppercase }
::-moz-placeholder  { color:#0baed4; font-weight:100; font-size:11px; letter-spacing:1px; text-transform:uppercase  }
:-ms-input-placeholder  { color:#0baed4; font-weight:100; font-size:11px; letter-spacing:1px ; text-transform:uppercase }
input:-moz-placeholder { color:#0baed4; font-weight:100; font-size:11px; letter-spacing:1px; text-transform:uppercase  }

/*BOUTON ET LIEN*/
.btBig, .btMedium, .btSmall {display: inline-block; line-height:36px; font-size:15px; text-transform:uppercase; letter-spacing:1px;  border:1px solid #404040; padding:0 18px}
.btMedium {line-height:28px; font-size:13px; text-transform:uppercase; letter-spacing:1px;  border:1px solid #404040; padding:0 10px}
.btSmall {line-height:22px; font-size:11px; text-transform:uppercase; letter-spacing:0.5px;  border:1px solid #404040; padding:0  12px}
.btBlue, .btBlue:visited, .btBlueInv:hover  { background:#0baed4; color:#ffffff ; border:1px solid #0baed4}
.btBlue:hover, .btBlueInv { background:#ffffff; color:#0baed4 ; border:1px solid #0baed4}
.btOrange, .btOrange:visited, .btOrangeInv:hover { background:#e9520e; color:#ffffff ; border:1px solid #e9520e}
.btOrange:hover, .btOrangeInv { background:#ffffff; color:#e9520e ; border:1px solid #e9520e}
.btGreen, .btGreen:visited, .btGreenInv:hover { background:#6eb22d; color:#ffffff ; border:1px solid #6eb22d}
.btGreen:hover, .btGreenInv { background: none; color:#6eb22d ; border:1px solid #6eb22d}
.btGrey, .btGrey:visited, .btGreyInv:hover { background:#99A3B1; color:#ffffff ; border:1px solid #99A3B1}
.btGrey:hover, .btGreyInv { background:#ffffff; color:#99A3B1 ; border:1px solid #99A3B1}



/*HEADER & MENU*/
.logo, header ul  { display:inline-block; vertical-align:top}
.logo { position:absolute; bottom:auto; left:3%; top:0; width:185px; margin-top:-18px}
header{position:absolute; top:28px; height:96px; width:100%;  vertical-align: top; text-align:right; z-index:100;}
nav  {display:block; width:100%; vertical-align:top}
nav a, nav a:visited{ display: inline-block; height:67px; padding:29px 25px 0 25px; border-right:1px solid #f1f5f9; vertical-align:top; text-transform:uppercase; font-size:15px; letter-spacing:0.5px ; line-height:20px; 
text-align:left;  background-color: rgba(255, 255, 255, 0.9); max-width:15% ; overflow:hidden;  color:#0b63a5;  }
nav a  small { display:block; font-size:11.5px; color:#99a3b1; letter-spacing:0.5px;}
nav a:hover, nav a.activated {background-color: rgba(255, 255, 255, 1); margin-top:8px}

.sub{position: relative}
.subMenu { display:block; position:absolute; left:0; top:100px;  display:1; overflow:hidden}
/*.subMenu a {display:block;   padding:6px  30px 6px 10px  !important;  width:130px; max-width:none; height:30px; line-height:30px; font-size:13.5px;background-color: rgba(255, 255, 255, 1); border-bottom:1px solid #ffffff ; margin-top:-100px;}*/
.subMenu a {display:block;   padding:6px  4px 6px 10px  !important;  width:220px; max-width:none !important; height:30px; line-height:30px; font-size:13.5px;background-color: rgba(255, 255, 255, 1); border-bottom:1px solid #ffffff ; margin-top:-100px; overflow:visible; letter-spacing:0.5px}
/*.subMenu a:hover{ margin:0; background-color: rgba(255, 255, 255, 0.85);}*/
.subMenu a:hover, .sub a.ispage{ background:#0b63a5; color:#ffffff }
.sub:hover .subMenu { display:1; }
.sub:hover .subMenu a { margin-top:0;}
.sub:hover a.Up{margin-top:4px; background-color: rgba(255, 255, 255, 1); cursor:default}
.sub i{ margin:0 8px 0 2px; width:18px; text-align:center; display:inline-block; font-size:12px}

/*nav a.activated, nav a.activated:hover{background-color: rgba(11, 99, 165, 0.6); margin-top:0; color:#ffffff; }
nav a.activated * {color:#ffffff}*/
#topBan{ width:100%; height:28px;  position:absolute; top:0; z-index:100; }
#topBan, header{
	background:#ffffff
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+43,0.35+63,1+87 
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 46%, rgba(255,255,255,0.35) 63%, rgba(255,255,255,1) 80%, rgba(255,255,255,1) 100%); 
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 46%,rgba(255,255,255,0.35) 63%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); 
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 46%,rgba(255,255,255,0.35) 63%,rgba(255,255,255,1) 80%,rgba(255,255,255,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}


/* SLIDE ACCEUIL*/
.cover, .coverPage { height:700px;   max-height:70%; min-height:480px; padding:0; margin:0; overflow:hidden}
.coverPage {background:url(../img/log-s_visuelNb.jpg) top center no-repeat; background-size:cover; position:relative; height:600px;   max-height:55%; min-height:480px; }
.coverMasq { position:absolute; width:100%; min-width:100%; height:36px; bottom:0; left:0; background:url(../img/mask_white.png) bottom center repeat; }
.coverMasq2 { position:absolute; width:100%; min-width:100%; height:16px; bottom:0; left:0; background:#ffffff; }
#le-groupe .coverMasq {background:url(../img/mask_white.png) bottom center repeat;}
#le-groupe .coverPage {background:url(../medias/photos/ban_groupe.jpg) center center no-repeat; background-size:cover;}
#e-commerce .coverMasq  {background:url(../img/mask_orange.png) bottom center repeat;}
#e-commerce .coverPage {background:url(../medias/photos/ecommerce.jpg) center center no-repeat; background-size:cover;}
#retail .coverMasq  {background:url(../img/mask_blue.png) bottom center repeat;}
#retail .coverPage {background:url(../medias/photos/retail.jpg) center center no-repeat; background-size:cover;}
#industrie .coverMasq  {background:url(../img/mask_green.png) bottom center repeat;}
#industrie .coverPage {background:url(../medias/photos/industrie.jpg) center center no-repeat; background-size:cover}
#services .coverPage {background:url(../medias/photos/ban_camion_log-s.jpg) center center no-repeat; background-size:cover;}
#actualites .coverPage {background:url(../medias/photos/ban_laptop.jpg) center right no-repeat; background-size: cover; }
#contactus .coverPage {background:url(../medias/photos/contact.jpg) center center no-repeat; background-size: cover; }
#industrie-automobile .coverPage {background:url(../medias/photos/indus-automobile.jpg) center center no-repeat; background-size: cover;height:auto;   max-height:55%; min-height:480px;}
#textile .coverPage {background:url(../img/ban_textile.jpg) center center no-repeat; background-size: cover;height:auto;   max-height:55%; min-height:420px; }
#maison .coverPage {background:url(../img/ban_maison.jpg) center center no-repeat; background-size: cover;height:auto;   max-height:55%; min-height:480px; }
#agroalimentaire .coverPage {background:url(../img/ban_alimentaire.jpg) center center no-repeat; background-size: cover;height:auto;   max-height:55%; min-height:480px; }




/* COVER*/
.coverContent {position:absolute; width:100%;  top:40%; text-align:left}
.coverContent h1, .coverContent .bigIco, .coverContent  p { position:absolute; top:15px; left:43%;}
.coverContent .bigIco { margin-left:-220px; margin-top:-50px; height:auto}
.coverContent  .moreleft { margin-left:-260px; margin-top:-50px;}
.coverContent h1 {  margin-top:-25px}
.coverContent h1.titleBg { font-size:22px; line-height:22px;  color:#ffffff; padding:10px 12px; background-color:#0b63a5; margin-top:0}
.coverContent  p {margin-top:60px;
font-size:38px; line-height:44px; text-transform:uppercase; letter-spacing:0.5px; color:#ffffff;  font-family:'Montserrat'; font-weight:700; width:600px; max-width:50%; text-align:left}
.coverContent  p.long {margin-top:60px;
font-size:20px; line-height:28px; text-transform:uppercase; letter-spacing:0.5px; color:#ffffff;  font-family:'Montserrat'; font-weight:700; width:600px; max-width:50%; text-align:left}

.coverContentCenter  h1, .coverContentCenter p {width:100% !important; left:0 !important; text-align:center !important; display:inline-block; max-width:none}

.overlay {width:100%; height:100%; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.4+0,0+31 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 31%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

.overlay2 {width:100%; height:100%;   background-color: rgba(0, 0, 0, 0.18);}

.navMobile{ display: none; position:absolute; right:5px; top:40px; z-index:1000; min-height:100%; }
.navMobile .openMenu{width:40px; cursor:pointer; margin-top:-15px}
.navMobile .closeMenu { position:absolute; right:15px; top:30px; z-index:300}
.navMobile ul.menuMobile { display: none; position: fixed; top:0; right:0; z-index:150; width:100%; margin:0; padding:0; z-index:500; min-height:100%; background:#444444 }
.navMobile ul.menuMobile li{ display:block; background:#444444; color:#fff; padding:8px 5px 8px 25px; font-size:140%; border-bottom:#454545 solid 1px; }
.navMobile ul.menuMobile li a, .navMobile ul.menuMobile li a:hover {color:#ffffff; display:block}
.navMobile ul.menuMobile li:hover,.navMobile ul.menuMobile li.active {background:#3cbedd}

/*ACCUEIL*/
.activities { width:100%; text-align:center; margin-top:-90px; margin-bottom:30px; z-index:500}
.activities div { height:240px; width:240px; text-align:center; vertical-align:middle; display:inline-block; margin:0 2.5%; position:relative; max-width:240px !important; z-index:100  }
.activities div  h3 {margin-top:30px !important; }
.activities div  *{ color:#ffffff !important}
.activities div   img {display:block; margin:20px  auto 8px auto; width:120px; height:120px;  max-width:90%; }
.activities div p {font-size:14px; line-height:20px; display:block; margin:5px auto 10px auto ; max-width:90%; letter-spacing:0.5px;  }
.absBloc { display:block; margin:0; padding:0; position:absolute; height:100%; width:100%; }
.absBloc:hover{ transform: scale(0.94); }

.icoSlider {float:left; margin-right:20px; margin-left:-50px; margin-top:-20px;}

/*BLOG accueuil}*/
#blog { margin:60px 0 0 0; padding:50px 0 25px 0; 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f6f6+5,ffffff+100&1+39,0+94 */}

.grey3 {background: -moz-linear-gradient(top,  rgba(246,246,246,1) 5%, rgba(249,249,249,1) 39%, rgba(254,254,254,0) 94%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(246,246,246,1) 5%,rgba(249,249,249,1) 39%,rgba(254,254,254,0) 94%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(246,246,246,1) 5%,rgba(249,249,249,1) 39%,rgba(254,254,254,0) 94%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */}

#blog  h2 {text-align:center}
#blog  h4 { font-size:20px; font-weight:700; letter-spacing:0; line-height:24px; margin:10px 0; color:#242424; text-align:left}
#blog article { display:inline-block;vertical-align:top; height:320px; position:relative; margin-bottom:30px; overflow:hidden; text-align:left }
#blog article figure {width:100%;border-radius:0; overflow: hidden; max-height:180px;  position:relative}
#blog article figure img.main {min-height: 100%;  min-width: 100%;  width: auto;  height: auto;  max-width: none;  max-height: none;  display: block; }
 #blog article .content { font-size:13.5px; color:#545454; line-height:19px; font-weight:400; text-align:justify; margin-bottom:0; text-overflow: ellipsis; position:relative }
#blog article .content  p{ font-size:13.5px; color:#545454; line-height:19px; font-weight:400; text-align:justify; margin-bottom:0; text-overflow: ellipsis;}

#blog article .info { color:#99a3b1; font-size:12px; text-transform:uppercase; margin-right:18px;}
#blog article .info i { font-size:14px; margin-right:4px;}

#blog article .infoCont{display:block; position:absolute; bottom:0; padding:8px; padding: 6px 10px;width: 100%;}
#blog article .infoCont .right{ float:right}
#blog article .infoCont * {color:#ffffff !important}

#blog article figure .maskArt{ display:block; width:100%; height:100%;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+67,0.4+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.2) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#66000000',GradientType=0 ); /* IE6-9 */
)}

.more {display:block; position:absolute; bottom:0; text-align:left; padding:30px 0 10px 0; width:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+15,1+54 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 15%, rgba(255,255,255,1) 54%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 15%,rgba(255,255,255,1) 54%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.more a {padding:2px 6px; font-size:11px; text-transform:uppercase; color:#ffffff; background:#424242; opacity:0.8 }
.more a:hover { opacity:1 }
.more a i {font-size:11px; margin-right:5px; }

.blogAnn { background:#3cbedd; color:#ffffff; border-radius:0 !important; max-height:none !important}
.blogAnn span { text-align:center; display: block; padding:12% 10% 10% 10%; font-size:28px;  font-style:italic; font-weight:200} 
.blogAnn i {position:absolute; top:15px; left:15px; font-size:40px; opacity:0.5} 

#blog article figure.rsBlog{height:210px; max-width:100%; margin:0; padding:0; }
#blog article figure.rsBlog  .rsArrow  {position:absolute; top:50%; left:5px; margin-top:-20px; background:url(../img/rsBlog_arrow_left.png) center center no-repeat; z-index:200; height:40px; width:40px; opacity:0.85;  transform: scale(0.95);}
#blog article figure.rsBlog  .rsArrowRight { left:auto; right:5px; background:url(../img/rsBlog_arrow_right.png) center center no-repeat}  
#blog article figure.rsBlog  .rsArrow:hover {opacity:1;  transform: scale(1);}



.tabBlog {
 -moz-column-width: 300px;
 -webkit-column-width: 300px;
 -moz-column-gap: 35px;
 -webkit-column-gap: 35px; 
 max-width:100%;
 overflow:hidden
  
}

.tabBlog  article {
 display: inline-block;
 margin: 20px 0 15px 0  !important;
 /*padding:  1rem;*/
 min-width:100%;
 max-width:100%;
padding-bottom:25px;
 border-bottom:1px dashed #e1e1e1
/* width:  300px !important; */
}


.mapWorld {margin-left:-50px}

/*dataKeys*/
#dataKeys { background:#3cbedd; padding:15px 0 10px 0; text-align:center; margin-top:25px}
#dataKeys .container { width:80%}
#dataKeys  h2, #dataKeys  p {text-align:center; color:#ffffff}
.keyBox {display:inline-block; vertical-align:top;  color:#ffffff; max-width:17%; width:17%; margin:0 1%}
.keyBox  span {display:block; text-align:center}
.keyBox  .chiffres , keyBox  .chiffres  i{font-size:88px; font-weight:200; letter-spacing:-4px;}
.keyBox  .chiffres  sup {font-size:30px; margin-left:2px; top:-35px; font-weight:200; letter-spacing:0 }
.keyBox  .txt {font-family: 'Economica',  Arial, sans-serif; font-weight:400; font-size:21px; line-height:26px; text-transform:uppercase; letter-spacing:1px; margin-top:-100px}
.keyBox  .txt sub {font-size:38px; line-height:0;   font-family: 'Source Sans Pro',  Arial, sans-serif;  font-weight:200; letter-spacing:-2px;}
.keyBox  img {display:block; margin:40px auto 0 auto;}


/*LOG Verte*/
#log_verte { background:#6aab2b; padding:40px 0; text-align:left; }
#log_verte  * {color:#ffffff}
#log_verte cite {opacity:0.7}

/*SAVOIR-FAIRE*/
#savoir-faire .bloc1-3 {text-align:center}
#savoir-faire .bloc1-3  p{text-align:center;  margin:10px auto}
.round1, .round2, .round3 {display:block; width:150px; height:150px;/* border-radius:75px; */margin:15px auto; 
background-image:url(../img/ico_e-commerce.svg) ; background-position:center center; background-repeat:no-repeat; background-size:70%}
.round2 {background-image:url(../img/ico_retail.svg) ; }
.round3{background-image:url(../img/ico_industrie.svg) ;  }

/*HISTORIQUE */
#historic { margin:0 0 -340px 0; padding:40px 0}
#historic  h2 {text-align:center}
#historic .container { padding:200px 0; text-align:center; overflow: hidden; width:100%; max-width:100%}
#historic  article {display:inline-block;  position:relative; margin:0 2px 355px 2px; width:90px;   height: 35px; text-align:left ; max-width:5.8%}
#historic  article .date {position:absolute; z-index:101;   height: 35px; line-height:35px; text-align:center; width:100px; font-size:18px; letter-spacing:1px; font-weight:200; color:#ffffff}
#historic  article .bg { position:absolute;z-index:101; left:0; top:0;
   width: 100px;    height: 35px;   border-radius:6px;   text-align:center; vertical-align:middle;
   /* Skew */   -webkit-transform: skew(28deg);    -moz-transform: skew(28deg);    -o-transform: skew(28deg);   transform: skew(28deg);   border:2px solid #ffffff;}
#historic  article .about{position:absolute; width:170px; margin-left:-25px}
#historic  article .about p{ display:block; font-size:13px; line-height:15px; letter-spacing:0px; color:#99a3b1;max-width:85%;  margin-top:4px}
#historic  article .aboutTop {position:absolute; z-index:100; height:80px;  top:-140px; padding-bottom:70px;  background: url(../img/historic_hashTop.png) 42% 70px no-repeat}
#historic  article .TopPlus {   background: url(../img/historic_hashTop.png) 45%  90px no-repeat}
#historic  article .TopPlus2 {   background: url(../img/historic_hashTop.png) 50%  98px no-repeat}
#historic  article .aboutBottom { z-index:100; height:auto;  top:35px; padding-top:70px;  background: url(../img/historic_hashBottom.png) 45% -34px no-repeat}
#historic  article.actived .aboutTop { height:0 !important; top:-15px; overflow:hidden; padding:0 }
#historic  article.actived .aboutBottom { height:0 !important; top:0px; overflow:hidden; padding:0 }



/*small icon list*/
ul.smallIconList { display:block; margin:0; padding:0}
ul.smallIconList li  { display:block; margin:0; padding:12px 0;  font-family: 'Montserrat'; font-weight:500; font-size:15px; border-bottom:1px dotted #eeee}
ul.smallIconList li  i { float:left; width:30px; text-align:center; font-size:18px; margin-right:12px; color:#6eb22d}



/*ICON_LIST*/
.iconList { padding:4px 0 30px 0; text-align: center; position:relative; display:block; width:100%;}
.iconList .bloc, .iconList .blocImg {display:inline-block; width:18%; margin:0 0.5%; vertical-align:top}
/*.iconList .bloc i {display:block; margin:0 auto 20px auto; font-size:76px}*/
.iconList .bloc i {display:block; margin:0 auto 14px auto; font-size:55px}
.iconList .bloc span , .iconList .blocImg span {font-family: 'Economica',  Arial, sans-serif; font-weight:400; }
.iconList .bloc span {font-size:19px; line-height:23px; text-transform:uppercase; display:block; padding:0 10%; letter-spacing:0px}

.iconList .blocImg { width:22%; margin:0 1%; }
.iconList .blocImg2 { width:22%; margin:0 1% 15px 1%; display:inline-block; vertical-align:top;  min-width:260px ; overflow:hidden}

.iconList .blocImg span {font-size:22px; line-height:26px; text-transform:uppercase; display:block; padding:0 4%; letter-spacing:1px}
.iconList .blocImg .imgCt {width:180px; height:180px; border-radius:100px; display:block; margin:20px auto; background:none; overflow:hidden; }
.iconList .blocImg .imgCt img { min-height:180px ; max-height:180px; max-width:none; margin-left:-20%}

.iconList .blocImg2 span { font-size: 15px; display: block;font-family: 'Montserrat'; font-weight:500}
.iconList .blocImg2 span small { display:block; font-size:14px;}
.iconList .blocImg2 .imgCt {width:100%; height:160px; border-radius:4px; display:block; margin:20px auto 10px auto; background:none; overflow:hidden; }
.iconList .blocImg2 .imgCt img { max-width:100%; margin:0 }

.iconList .blocImg2 p { text-align:center; font-size:14px; line-height:16px; margin: 4px 0 0 0}

.sticky {position:fixed; top:0; z-index:900; padding:4px 0 20px 0; }
.sticky .bloc  i {display:block; margin:17px auto 8px auto; font-size:38px}
.sticky .bloc span {font-size:16px; line-height:20px; text-transform:uppercase; display:block; padding:0 4%; letter-spacing:0px}
#bottomIconList.anim{ height:210px !important; }

/*SAVOIR FAIRE*/
#savoir-faire-logistic { background:#f5f5f5; padding:40px 0; text-align:left; }


/*contact*/
#contact { padding:50px 0}
#contact h2 { font-size:56px; line-height:30px}
#contact h2 small { font-size:25px; color:#9cacba}
#contact .bloc1-2 p {font-size:20px; margin: 20px 0 0 25px}
#contact .bloc1-2 p i {float:left; margin-left:-30px; margin-top:2px; font-size:20px; color:#9cacba}

#contact input, textarea, select, input:invalid, textarea:invalid {display:block;  margin:0 0 15px 0; padding:2%; width:96%; text-align:left; border:1px solid #c0c0c0}
#contact textarea {height:150px; text-align:left}
#contact select {text-align:left; width:100%}
#contact select  *{text-align:left; }

#contact input.checkBox {display:inline-block; width:20px; line-height:0px; height:10px;  margin:-10px 4px 0 0}
#contact label {line-height:1px; display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:1px; cursor:pointer}
#contact  .btMedium { display:block !important; margin:0 auto !important; width:75%; text-align:center !important}
#formAjax  *{ text-align:center}
::-webkit-input-placeholder { color:#666666; font-weight:100; font-size:11px; letter-spacing:1px; text-transform:uppercase }
::-moz-placeholder  { color:#666666; font-weight:100; font-size:11px; letter-spacing:1px; text-transform:uppercase  }
:-ms-input-placeholder  { color:#666666; font-weight:100; font-size:11px; letter-spacing:1px ; text-transform:uppercase }
input:-moz-placeholder { color:#666666; font-weight:100; font-size:11px; letter-spacing:1px; text-transform:uppercase  }

input:invalid, textarea:invalid {    box-shadow: none;}



/*SINGLE*/
.p-article  .blocInfo {display:block;  margin-bottom:10px; padding:6px 0; }
.p-article  .blocInfo .info, aside .info {color:#0b63a5;font-family: 'Roboto Condensed', sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0;}

.p-article  .articleContent {margin:0 0 0 0; padding-bottom:25px; border-bottom:1px dotted #f0f0f0}
.p-article  .articleContent  p  { font-size:14px; line-height:21px; font-weight:400; text-align:justify; margin:10px 0 5px 0;  text-align:left !important; width:97%;  color:#0a0e27; }
.p-article .articleContent  p.subTitle { font-size:17px; color:#66729b; font-weight:300; line-height:25px; display:block; margin:0 0 15px 0; width:auto; max-width:90%; padding-right:10% ;letter-spacing:0px; padding-bottom:25px; margin-bottom:25px; border-bottom:1px solid #e4e6eb}
.p-article  .articleContent  ul * { font-size:13px; color:#0a0e27; line-height:22px; font-weight:400 }
.p-article  .articleContent a {color:#6cb8cf;border-bottom:1px dashed #6cb8cf}
.p-article  h1 { max-width:92%; margin:34px 0 0 0; font-size:32px; line-height:40px; color:#474747; letter-spacing:0.5px}

.p-article  .articleContent em { font-style: italic; display:block; padding-left:15px; border-left:2px dotted #bcbcbc; margin:10px 0;}

article footer  *{ color:#969cb1 !important; background:#ffffff }
article footer { display:block;margin-bottom:40px; color:#777 !important;  font-size:12px;  padding-top:16px; background:#ffffff }
article footer .Artsocial {text-transform:uppercase; font-size:12px; color:#777 !important; margin-left:6px; padding:4px 6PX; background:#f1f1f1; display:inline-block; margin-bottom:10px}
 article footer .Artsocial i {font-size:12px; color:#969cb1}
 article footer .Artsocial:hover, .p-article article footer .Artsocial:hover  * { color:#777 !important; }
 article footer a:hover, .p-article article footer a:hover *{ color:#777 !important; }

figure.rsBlog{height:160px;  }
figure.rsBlog  .rsArrow  {position:absolute; z-index:4; top:48%; left:-12px; margin-top:-20px; background:#ffffff url(../img/ico-arrow-left.png) center center no-repeat; z-index:200; padding:10px; height:80px; width:40px; transform: scale(0.7); opacity:1}
figure.rsBlog  .rsArrowRight { left:auto; right:-12px; background:#ffffff url(../img/ico-arrow-right.png) center center no-repeat}  
figure.rsBlog  .rsArrow:hover {opacity:1; transform: scale(0.8) }
.imgArticle  {height:auto; margin:4px 0 20px 0; max-height:370px; background: none; padding:0; overflow:hidden}
.imgArticle img {max-height:410px; display:block; min-width:99%; max-width:100%}


aside{display:inline-block;width:24%!important;padding:0 15px!important;vertical-align:top;position:relative;margin:10px 0 10px 2%;border-left:1px solid #f2f2f2;-moz-box-shadow:inset 10px 0 20px 0 #fafafa;-webkit-box-shadow:inset 10px 0 20px 0 #fafafa;-o-box-shadow:inset 10px 0 20px 0 #fafafa;box-shadow:inset 10px 0 20px 0 #fafafa;filter:progid:DXImageTransform.Microsoft.Shadow(color=#fafafa,Direction=90,Strength=20)}
aside .info{display:block;margin:6px 0}

.module{border-bottom:10px solid #fff;padding-bottom:10px;position:relative}
.module .titre{font-size:13px;line-height:24px;text-transform:uppercase;color:#fff;letter-spacing:1px;margin:10px 0;display:block;font-weight:400;background:#434343;padding:4px 0; text-align:center}
.module ul{margin:0;padding:0}
.module ul li{display:block;list-style:none;clear:both;margin:0 0 8px;width:100%;text-align:left;vertical-align:middle;cursor:pointer;position:relative}
.module ul li img{display:inline-block;margin-right:14px;padding:0;border:0 solid #eee;float:left}
.module ul li *{vertical-align:middle}
.module ul li p{padding:0 15px 0 0;color:#545454;margin:0;font-size:13px; line-height:15px;height:56px;vertical-align:middle; text-transform:uppercase}
.module .count{position:absolute;right:2px;top:20px;display:block;height:19px;width:19px;border:1px solid #3f3f3f;border-radius:19px;background:none;color:#3f3f3f;text-align:center;font-size:9px;letter-spacing:-1px;line-height:20px;text-align:center;padding:0;margin:0;opacity:1}
.pageArticle .blocInfo{display:block;margin-bottom:10px;padding:6px 0;border-top:1px solid #f0f0f0}
.pageArticle .blocInfo .info,aside .info{color:#0b63a5;font-size:10px;text-transform:uppercase;letter-spacing:0;font-weight:400}

.newsletter input[type=email]{width:80%;display:inline-block;margin:0;padding:8px}
.newsletter .submit{display:inline-block;margin:0;padding:2px 5px 3px 5px}

/*FOOTER*/
footer { width:100%; background:#0b63a5; padding-top:40px;}
footer .bloc1-3{ text-align:center}
footer .bloc1-3 .imgFooter, footer .bloc1-3 ul {display:inline-block; vertical-align:middle}
footer .bloc1-3 ul { text-align:left; margin:0 0 0 10px; padding:0}
footer .bloc1-3 ul li  { list-style:none; font-size:12px; line-height:30px; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,0.3); padding:0 6px 0 0;}
footer .bloc1-3 ul li  a { display:block; color:#ffffff}
footer .bloc1-3 ul li:hover  {  background-color: rgba(255, 255, 255, 0.5)}
.subFooter {background:#ffffff; margin-top:40px; text-align:left; height:40px}
.subFooter a , .subFooter span{ font-size:11px; text-transform:uppercase; color:#a8a8a8; line-height:48px; margin-right:25px;  padding-right:25px; letter-spacing:0.5px; border-right: 1px solid#e7e7e7}
.subFooter span {float:right; margin:0; border:0}

footer .bloc1-3 .imgFooter {
	filter: grayscale(100%); max-width:37%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);}
footer:hover .imgFooter {filter: grayscale(20%);
    -webkit-filter: grayscale(20%);
    -moz-filter: grayscale(20%);
    -ms-filter: grayscale(20%);
    -o-filter: grayscale(20%);}


.blur {
    filter: blur(18px);
    -webkit-filter: blur(18px);
    -moz-filter: blur(18px);
    -o-filter: blur(18px);
    -ms-filter: blur(18px);
}


.noblur {
    filter: blur(0px);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
}


/* CssOver*/
.last {border:0 !important}
.tCenter, tCenter * {text-align:center !important} 
.tLeft , .tLeft  *{text-align:left !important} 
.tRight {text-align: right !important} 
.overMap {position:absolute; right:0; top:40%; margin-right:70px;}
.noBorder {border:0 !important}

/* TRANSITIONS CSS3*/
#historic  article {-webkit-transition: all 0.1s ; -moz-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s;}
.lcourt, #blog article figure.rsBlog  .rsArrow  , .subMenu a  , #slider-with-blocks-1  .rsArrow {-webkit-transition: all 0.2s ; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;}
 .about, .chiffres , .txt {-webkit-transition: all 0.8s ; -moz-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s;}
.imgFooter  {-webkit-transition: all 2.0s ; -moz-transition: all 2.0s; -o-transition: all 2.0s; transition: all 2.0s;}

.absBloc, .btBig , .btMedium, .btSmall, nav a, footer .bloc1-3 ul li,  .sticky,  .sticky *  , a
  {-webkit-transition:all 0.2s ease-in;  -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in;  transition: all 0.2s ease-in; }