@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
*{ margin: 0; padding: 0; border: none; box-sizing: border-box; font-family: 'Open Sans', sans-serif; font-size:15px; }
ul, li{ list-style: none; }

a{ text-decoration: none; }
.btn, .fromWYSIWYG a.btn { background-color: #ae5a47; color: #fff; font-size: 15px; text-transform:uppercase; border-radius: 5px; padding:10px 20px; display: inline-block; }
.arrowLink{ color:#ae5a47; display: inline-block; background: url(../_img/arrow.png) no-repeat right center; padding-right: 40px; }
h2{ font-weight:800; font-size: 28px; }
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, *:focus{
	outline: none;
}
.table { display:table; width:100%; height:100%; z-index:1; }
.cell { display:table-cell; vertical-align:middle; z-index:300; }

.wrapper{ padding: 0 2%; margin: 0 auto; }
.wrapper80{ max-width: 80%}
.articleWrapper{ padding: 0 3%}
.mobileOnly{ display: none; }
header{ background-color: #fff; }
header .logo{ float: left;     margin: 15px 0 0 20px;}
header .logo a{}
header .logo a img{     width: 150px;}
header:after{ content:'.'; width: 100%; clear: both; display: block;    font-size: 0; }
header nav{ float: right; margin: 30px }
header nav ul{}
header nav ul li{ display:inline-block; position: relative; }
header nav ul li.selected, header nav ul li:hover{}
header nav ul li.selected:after, header nav ul li:hover:after{     content: '.';
    position: absolute;
    top: -10px;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: #ae5a47;
    display: block;
    font-size: 0;  }

header nav ul li a, .homepage header.stickytop nav ul li > a{ color: #000; font-size:17px; padding: 0 20px 10px 20px }
header nav ul li.selected  a, header nav ul li:hover a{}
header.stickytop, .homepage header.stickytop{ position: fixed; top: 0; left: 0; background-color: #fff; width: 100%; opacity: 0.95 ; z-index: 2;}

.burgerMenu{    display: none;
    right: 4%;
    position: fixed;
    width: 20px;
    height: 20px;
    background: url(../_img/menu.svg) no-repeat center center / 100%;
    top: 31px;
    font-size: 0px; }

body.stickytop{ margin-top: 85px; }
body.homepage.stickytop{ margin-top:0; }
.homepage header{position:absolute; top: 0; left: 0; width: 100%; background: transparent; z-index: 2}
.homepage header .logo a img{ -webkit-filter: brightness(10);
  filter: brightness(10);
}
.homepage header.stickytop .logo a img{-webkit-filter: none;
  filter: none;}

.homepage  header nav ul li > a{ color: #fff; }


.subNav{ background-color: #fafafa; text-align: center; padding: 30px 0;}
.subNav ul{ display:inline-block; }
.subNav ul li{  display:inline-block;     opacity: 0.4; }
.subNav ul li a{ padding: 40px 20px 0 20px;
    text-transform: uppercase;
    font-size: 13px;
    color: #000;
    display: block;
    background: url(../_img/icons/food.svg) no-repeat top center / 30px;  }

/*.noIcon a{ background: none!important}*/

.subNav ul li.iconEu a{ background: url(../_img/icons/europe.svg) no-repeat left center / 45px; padding: 15px 0 15px 60px; margin: 0 20px }
.subNav ul li.iconAfrica a{ background: url(../_img/icons/africa.svg) no-repeat left center / 40px; padding: 15px 0 15px 50px; margin: 0 20px }
.subNav ul li.iconAmerica a{ background: url(../_img/icons/america.svg) no-repeat left center / 40px; padding: 15px 0 15px 50px; margin: 0 20px }
.subNav ul li.iconLongfood a{ background: url(../_img/icons/longfood.svg) no-repeat left center / 30px; padding: 15px 0 15px 50px; margin: 0 20px }

.subNav ul li.iconFood a{background: url(../_img/icons/food.svg) no-repeat top center / 30px; }
.subNav ul li.iconAgro a{background: url(../_img/icons/agroeco.svg) no-repeat top center / 30px; }
.subNav ul li.iconHealth a{background: url(../_img/icons/health.svg) no-repeat top center / 30px; }
.subNav ul li.iconAgri a{background: url(../_img/icons/agribusiness.svg) no-repeat top center / 30px; }
.subNav ul li.iconMeat a{background: url(../_img/icons/meat.svg) no-repeat top center / 30px; }
.subNav ul li.iconUrban a{background: url(../_img/icons/urban.svg) no-repeat top center / 30px; }
.subNav ul li.iconDigit a{background: url(../_img/icons/digit.svg) no-repeat top center / 30px; }
.subNav ul li.iconMoney a{background: url(../_img/icons/money.svg) no-repeat top center / 30px; }
.subNav ul li.iconAbout a{background: url(../_img/icons/question.svg) no-repeat top center / 25px; }
.subNav ul li.iconExpert a{background: url(../_img/icons/bulb.svg) no-repeat top center / 30px; }

.subNav ul li.iconFormerpanel a{background: url(../_img/icons/user.svg) no-repeat top center / 25px; }

.subNav ul li.iconSecretariat a{background: url(../_img/icons/computer.svg) no-repeat top center / 30px; }
.subNav ul li.iconContact a{background: url(../_img/icons/phone.svg) no-repeat top center / 25px; }

.subNav ul li:hover,.subNav ul li.selected{ opacity: 1; }    

.subNav ul li.iconFood:hover a, .subNav ul li.iconFood.selected a{background: url(../_img/icons/food_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconAgro:hover a, .subNav ul li.iconAgro.selected a{background: url(../_img/icons/agroeco_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconHealth:hover a, .subNav ul li.iconHealth.selected a{background: url(../_img/icons/health_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconAgri:hover a, .subNav ul li.iconAgri.selected a{background: url(../_img/icons/agribusiness_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconMeat:hover a, .subNav ul li.iconMeat.selected a{background: url(../_img/icons/meat_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconUrban:hover a, .subNav ul li.iconUrban.selected a{background: url(../_img/icons/urban_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconDigit:hover a, .subNav ul li.iconDigit.selected a{background: url(../_img/icons/digit_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconMoney:hover a, .subNav ul li.iconMoney.selected a{background: url(../_img/icons/money_green.svg) no-repeat top center / 30px; }


.subNav ul li.iconAbout:hover a,
.subNav ul li.iconAbout.selected a{background: url(../_img/icons/question_green.svg) no-repeat top center / 25px; }
.subNav ul li.iconExpert:hover a,
.subNav ul li.iconExpert.selected a{background: url(../_img/icons/bulb_green.svg) no-repeat top center / 30px; }

.subNav ul li.iconFormerpanel:hover a,
.subNav ul li.iconFormerpanel.selected a{background: url(../_img/icons/bulb_green.svg) no-repeat top center / 25px; }

.subNav ul li.iconSecretariat:hover a,
.subNav ul li.iconSecretariat.selected a{background: url(../_img/icons/computer_green.svg) no-repeat top center / 30px; }
.subNav ul li.iconContact:hover a,
.subNav ul li.iconContact.selected a{background: url(../_img/icons/phone_green.svg) no-repeat top center / 25px; }


.subNav ul li.iconEu:hover a, .subNav ul li.iconEu.selected a{ background: url(../_img/icons/europe_green.svg) no-repeat left center / 45px; padding: 15px 0 15px 60px; margin: 0 20px }
.subNav ul li.iconAfrica:hover a, .subNav ul li.iconAfrica.selected a{ background: url(../_img/icons/africa_green.svg) no-repeat left center / 40px; padding: 15px 0 15px 50px; margin: 0 20px }

.subNav ul li.iconAmerica:hover a, .subNav ul li.iconAmerica.selected a{ background: url(../_img/icons/america_green.svg) no-repeat left center / 40px; padding: 15px 0 15px 50px; margin: 0 20px }
.subNav ul li.iconLongfood:hover a, .subNav ul li.iconLongfood.selected a{ background: url(../_img/icons/longfood_green.svg) no-repeat left center / 30px; padding: 15px 0 15px 50px; margin: 0 20px }


.smallIco{     width: 15px!important;
    display: inline-block!important;
    vertical-align: bottom;
    margin: 0 5px; }

.sect-pageIntro h1.iconFood {background: url(../_img/icons/food_green.svg) no-repeat top center / 40px; padding-top:40px; }
.sect-pageIntro h1.iconAgro {background: url(../_img/icons/agroeco_green.svg) no-repeat top center / 40px; padding-top:40px; }
.sect-pageIntro h1.iconHealth {background: url(../_img/icons/health_green.svg) no-repeat top center / 40px; padding-top:40px; }
.sect-pageIntro h1.iconAgri {background: url(../_img/icons/agribusiness_green.svg) no-repeat top center / 40px; padding-top:40px; }
.sect-pageIntro h1.iconMeat {background: url(../_img/icons/meat_green.svg) no-repeat top center / 40px; padding-top:40px; }
.sect-pageIntro h1.iconUrban {background: url(../_img/icons/urban_green.svg) no-repeat top center / 40px; padding-top:40px; }
.sect-pageIntro h1.iconDigit {background: url(../_img/icons/digit_green.svg) no-repeat top center / 40px; padding-top:40px; }
.sect-pageIntro h1.iconMoney {background: url(../_img/icons/money_green.svg) no-repeat top center / 40px; padding-top:40px; }


.sect-pageIntro h1.iconAfrica {background: url(../_img/icons/africa_green.svg) no-repeat top center / 50px; padding-top:50px; }
.sect-pageIntro h1.iconEu {background: url(../_img/icons/europe_green.svg) no-repeat top center / 50px; padding-top:50px; }

.sect-pageIntro h1.iconAmerica {background: url(../_img/icons/america_green.svg) no-repeat top center / 50px; padding-top:50px; }

.sect-pageIntro h1.iconLongfood {background: url(../_img/icons/longfood_green.svg) no-repeat top center / 40px; padding-top:50px; }


.nav2{
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 7px 0px rgba(37, 37, 37, 0.11);
    position: absolute;
    width: 200px;
    font-size: 16px;
	display: none;
	z-index: 300; 
	    top: 30px;
	
}
.nav2 a{ display: block;  
    font-size: 15px;
    padding: 10px 32px;
    border-bottom: 1px solid #eee;
}
.aboutNav.open .nav2{ display: block; }

.nav2 a.selected, .nav2 a:hover{ background-color:#f7f7f7; }

main.greyBg{ background-color: #f7f7f7; padding: 3%}
.wrapperInside{ background-color: #fff;  }
#hp-slider{position: relative;    margin-bottom: 80px;     height: 100vh; }
#hp-slider .nextSlide{ position: absolute;
    right: 0;
    bottom: 0;
    width: 40%;
}
#hp-slider .mainPict{ display: block; width: 100%}

#hp-slider .slide{}
#hp-slider .slideContent{     position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 10%;
    width: 65%;  }
#hp-slider .slideContent h1{     font-weight: 800;
    color: #fff;
    font-size: 60px;
    line-height: 57px;
    margin-bottom: 30px; }
#hp-slider .slideContent  .fromWYSIWYG { color: #fff;
    font-size: 15px;
	position: relative; 
    line-height: 29px; margin-bottom: 40px;  }
#hp-slider .slideContent  .fromWYSIWYG p{ color: #fff;   line-height: 29px; font-size: 15px; }

#hp-slider .slideContent a{}
.prevNext{ position: absolute;
    right: 30px;
       top: -80px;
}
.prevNext a{ display: inline-block; width: 35px; height: 35px; font-size: 0; margin: 0 5px;  }
.prevNext a.prev{ background: url(../_img/prev.svg) no-repeat center center / cover}
.prevNext a.next{ background: url(../_img/next.svg) no-repeat center center / cover}


.slideVignette{ background-color: #f8F8F8; overflow: hidden}
.vignContent{ float: left; padding: 30px 10% 0 10%; width: 70% }
.vignVisu{ float: left; width: 30%   }
.vignVisu img{ display: block; width: 100% }
.vignContent strong{ font-size: 15px; margin-bottom: 5px; display: block; color: #000!important }
.vignContent p{ color:#333; font-size: 11px; margin-bottom: 20px; }
#sect-hgArticles{ overflow: hidden; padding-right: 4%}
#sect-hgArticles #lastArticle{ width: 60%; float: left; position: relative; margin-bottom: 80px; }

#sect-hgArticles #lastArticle .contentText{       position: absolute;
    bottom: 0;
    left: 4%;
    width: 60%;
    height: 100%; }
#sect-hgArticles #lastArticle .contentText h3{ font-size: 30px; margin-bottom: 20px; color: #fff; font-weight: 400; }
#sect-hgArticles #lastArticle .labels{     position: absolute;
    right: 3%;
    bottom: 3%;
    text-transform: uppercase;
    color: #fff; font-size: 14px;  }
#sect-hgArticles #lastArticle .labels a{ color: #fff; }
#sect-hgArticles #lastArticle .contentText p{ color:#fff; font-size: 13px;  line-height: 19px;   margin-bottom: 10px; }
#sect-hgArticles .visual, #sect-hgArticles .visual img{ display:block; width: 100%; position: relative}
#sect-hgArticles .visual:after{     content: '.';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.9;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#131313',GradientType=0 ); /* IE6-9 */ }
.labels{}
.labels a{ font-size: 10px; color: #000}

#sect-hgArticles #lastArticle2{     float: right;
    width: 31%; margin: 0 1%}
#sect-hgArticles #lastArticle2 article.publi{ width: 100%;}
#sect-articles article.publi{ border-bottom: 1px solid #f0f0f0; }
#sect-articles{ padding: 0 3%;     margin-bottom: 50px; }


#sect-introTopic { margin-bottom: 70px; overflow: hidden; }
#sect-introTopic .contentVisu {
    width: 50%;
    float: left;
}
#sect-introTopic .contentVisu img{ display: block; width: 100%}
#sect-introTopic .contentText {
       width: 50%;
    float: left;
    padding: 0 4%;
}




article.publi{ width: 33%; padding: 0 15px;  display: inline-block; margin-bottom: 20px; padding-bottom:30px;
vertical-align: top;}
article.publi .contentVisu{ margin-bottom:20px;width: 100% }
article.publi .contentVisu img{ display: block; width: 100%}
article.publi .contentText{ padding:0 10px; width: 100% }
article .contentText .labels{ margin-bottom: 10px; font-size:10px; text-transform:uppercase;  }
article.publi .contentText h4{ font-size:17px; font-weight: 700; margin-bottom:10px;  }

article.publi .contentText h2{    font-size: 19px;
    line-height: 27px;  font-weight: 700; margin-bottom:10px;  }

article .contentText p{ color:#333; margin-bottom:30px }
 .contentVisu.video{ position: relative; }

.articleSlider article.publi{ width: 100%; display: block; padding: 0 15px;     margin-bottom: 50px;}
 
.contentVisu.video div:after {     content: '.';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    background: url(../_img/video.png) no-repeat center / cover;
    font-size: 0;
    margin-top: -25px;
    margin-left: -25px;  }
article.publi h3{     font-size: 20px;
    font-weight: 700; line-height: 30px; margin-bottom: 20px }

#sect-hpAboutUs{}

#sect-hpAboutUs.sect-boxed .introAbout p{ font-size: 25px; color: #333; font-weight: 100; margin-bottom: 20px; padding-left: 120px; position: relative}

#sect-hpAboutUs.sect-boxed .introAbout p:before{ content: '.';
    width: 80px;
    height: 2px;
    background-color: #000;
    font-size: 0;
    display: block;
    position: absolute;
    left: 0;
    top: 15px;
}
#sect-hpAboutUs.sect-boxed .introAbout a{  margin-left: 120px;}

.sect-boxed{     margin-bottom: 80px; }
.sect-boxed .wrapperBox{ 
	width: 96%; 
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 68px 0px rgba(102, 102, 102, 0.2);
	overflow: hidden; 
	display: table

}
.sect-boxed .wrapperBox .contentText{    vertical-align: middle; padding: 0 10%; display: table-cell; width: 60% }
.sect-boxed .wrapperBox .contentText h2{ margin-bottom:10px; }
.sect-boxed .wrapperBox .contentVisual{ display: table-cell;; width: 40%  }
.sect-boxed .wrapperBox .contentVisual img{ display: block; width: 100%; }

.sect-pageIntro{ text-align: center; padding: 30px 3% }
.sect-pageIntro h1{ font-size:40px; font-weight:900; text-transform:uppercase; margin-bottom: 20px;  }
.sect-pageIntro p{ font-size:23px; font-weight:300 }

.sect-mainVisual{ margin-bottom: 80px;  overflow: hidden;}
.sect-mainVisual img{ display: block; width: 100%; }

article.artPress{ background-color: #fff;width:31%;     margin: 0 1% 20px 1%; }
article.artPress:hover{ transform: scale(1.1); }
article.artPress h2{ font-size: 18px; margin-bottom: 10px;     font-weight: 700; }
article.artPress h4{ font-size: 13px; text-transform: uppercase; font-weight: 500; margin-bottom: 10px;  }
article.artPress .contentText{ padding: 20px}

article.artPress .contentVisu img{ display: block; width: 100%}
#sect-map{ overflow: hidden; }
#sect-map .mapDetail{ width:40%; float: right;    padding: 0 4%; }
#sect-map .mapDetail .notSelected{ padding: 80px 0 }
#sect-map .mapDetail .notSelected h1{ color: #333; text-transform: none;  font-size: 33px; font-weight: 300 }
#sect-map .mapDetail .notSelected h1 b.arrowLink{     width: 40px;
    height: 20px; }

#sect-map  .mainMap{ width:60%; float: right; }

#sect-map .caseDetail{ padding: 40px 30px 0 0; height: 80vh; overflow: scroll  }
#sect-map .caseDetail h1 { font-size: 40px; line-height: 40px; margin-bottom: 5px; font-weight: 800; text-transform: uppercase;   }
#sect-map .caseDetail h2 { font-size: 23px; font-weight: 400; margin-bottom: 30px; }
#sect-map .caseDetail img{ display: block; width: 100%;     margin-bottom: 30px; }

#sect-aboutProcess{ margin-bottom: 50px; }

#sect-about{ padding:0 0 70px 0; }

#sect-reports{ padding: 0 10%; overflow: hidden; }
#sect-reports article{ overflow: hidden; margin-bottom: 30px; }
#sect-reports article:nth-child(even) .contentVisu{ float:right}
#sect-reports article .contentVisu{ width: 30%; float: left; 
}
#sect-reports article .contentVisu img{ display: block; width: 100%; }
#sect-reports article .contentText{     width: 70%;
    float: left;
     padding: 0 0 0 5%; }
#sect-reports article .contentText p{ text-align: justify; }
#sect-reports article:nth-child(even) .contentText{ padding: 0 5% 0 0;  }
#sect-reports article .contentText h2{  font-size: 30px; font-weight: 400; margin-bottom: 30px; line-height: 35px;  }

#sect-reports article .wrapperLinks a{ margin-bottom: 10px; }

#sect-HgReport{ margin-bottom: 70px; }
#sect-HgReport article{ overflow: hidden; }

#sect-HgReport .contentVisu{ width:50%; float: left; max-height: 450px;
    overflow: hidden; }
#sect-HgReport .contentVisu img{ display:block; width: 100%}
#sect-HgReport  .contentText{     width: 50%;
    float: left;
    padding: 0 4%;}
#sect-HgReport  .contentText h2{ margin-bottom: 20px; }
#sect-hpEvents{     padding-bottom: 80px; overflow: hidden}
#sect-hpEvents .eventsIntro{ margin-left: 10%;  margin-bottom: 40px; }
#sect-hpEvents .eventsIntro h2{ margin-bottom: 20px; }
#sect-hpEvents .eventsIntro p{ color:#333; margin-bottom: 10px; }

#sect-hpEvents .eventsSlider{ width: 100%; padding: 0 5%;}
.eventsSlider .event{
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 24px 0px rgba(102, 102, 102, 0.1);
	display:inline-block; margin: 0 0.3% ; width: 22.5%; text-align: center; 
	vertical-align: top;

 }
.eventsSlider .event:hover{  transform: scale(1.1);}

.eventsSlider .event .eventDate{ border-bottom:1px solid #eeeeee; padding: 20px; 
min-height: 150px;
}
.eventsSlider .event .eventDate .month{ color: #af5b47; font-size: 15px; text-transform:uppercase; display: block }
.eventsSlider .event:hover .eventDate{

  background-image: -moz-linear-gradient( 90deg, rgb(174,90,71) 0%, rgb(205,117,97) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(174,90,71) 0%, rgb(205,117,97) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(174,90,71) 0%, rgb(205,117,97) 100%);

}
.eventsSlider .event .eventDate p strong{ font-size:20px;    color: #af5b47;  }

.eventsSlider .event:hover .eventDate .month,
.eventsSlider .event:hover .eventDate .day,
.eventsSlider .event:hover .eventDate .year,
.eventsSlider .event:hover .eventDate p strong{ color: #fff; }

.eventsSlider .event .eventDate .day{      color: #af5b47;
    font-size: 65px;
    display: block;
    font-weight: 800;
    line-height: 50px;}
.eventsSlider .event .eventDate .year{  color: #af5b47; font-size: 29px; display: block}
.eventsSlider .event .eventContent{ padding: 30px 20px;    min-height: 250px; }
.eventsSlider .event .eventContent h4{ font-size:17px; margin-bottom: 5px;  }
.eventsSlider .event .eventContent h6{ font-size: 13px; color: #333; margin-bottom: 20px; font-weight: 400}
.eventsSlider .event .eventContent .fromWYSIWYG p{ color: #000; line-height: 20px; margin-bottom: 0
}
/*.eventsSlider .slick-next { right: -2%; }
 .eventsSlider .slick-prev { left: -2%; }*/
.title{ padding: 0 4%; margin-bottom: 50px; text-align: left; position: relative;   }
.title h4{font-size:23px; font-weight:300; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; }
.title a{ position: absolute; right: 4%; top: 0}
.fromWYSIWYG {}
.fromWYSIWYG h1{}
.fromWYSIWYG h2{}
.fromWYSIWYG h3{ font-size:17px; }
.fromWYSIWYG a{ color: #ae5a47; }
.fromWYSIWYG img{ max-width: 100%!important; height: auto!important;     margin: 0 auto;
    display: block;}
.fromWYSIWYG p{ color: #333; font-size: 15px; margin-bottom: 20px; line-height: 27px; text-align:justify  }
.fromWYSIWYG p big{ font-size:25px; font-style: normal; font-weight: 300}
.fromWYSIWYG p big a{ font-size:25px;  }
.fromWYSIWYG ul{ list-style: disc inside; margin-bottom:20px;  }
.fromWYSIWYG ul li{color: #333;
	list-style: disc inside;
   font-size: 15px;
    margin-bottom: 5px;
    line-height: 27px; }
.wrapperRessources .articleLine { padding: 20px 4%; border-bottom:1px solid #f0f0f0; background: url(../_img/arrow.png) no-repeat right 3% center;  }
.wrapperRessources { margin-bottom: 50px; border-top:1px solid #f0f0f0 }
.wrapperRessources .articleLine .label{ background-color: #497552; color: #fff; font-size:10px; border-radius:5px; padding:7px 15px; display: inline-block;    margin-right: 30px; }
.wrapperRessources .articleLine  p{ text-decoration: underline; color:#333; }
.wrapperRessources .articleLine {}
.wrapperRessources .articleLine p{ display: inline-block; }
.labelWrapper{ display: inline-block;  width: 160px; }

#sect-experts{ padding: 0 10%; margin-bottom: 50px;  }

#sect-peopleDetail{ overflow: hidden; margin-bottom: 50px; }

#sect-peopleDetail aside {  width: 25%;
    float: left;
    margin-left: 4%;
    border-right: 1px solid #f0f0f0; }
#sect-peopleDetail aside .BackLink{ font-size:13px; text-decoration: underline; margin-bottom: 30px; display:block; color: #000;  }

#sect-peopleDetail aside ul li a{ color:#333; font-size:13px; margin-bottom: 3px; display: block}
#sect-peopleDetail aside ul li.selected a, #sect-peopleDetail aside ul li:hover a{ color: #000; }
#sect-peopleDetail .detailContent{
padding: 0 4%;
    float: left;
    width: 70%;
	}
#sect-peopleDetail .detailContent h1{ font-size: 35px; font-weight:400; margin-bottom: 30px}
.peopleContact{     color: #333;
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 27px; }
.peopleContact strong, .peopleContact strong a{ color: #000; }

article.people{ 
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 24px 0px rgba(102, 102, 102, 0.1);
 width: 30%; margin: 0 1%;  
	display: inline-block; 
	margin-bottom: 30px;
	    vertical-align: top;
}

article.peopleformer { 
  background-color: rgb(255, 255, 255);
  box-shadow: 0px 1px 24px 0px rgba(102, 102, 102, 0.1);
 width: 100%; margin: 0 1%;  
	display: flex; 
	margin-bottom: 30px;
	    vertical-align: top;
}
article.peopleformer .formerIntro{ margin-top: 10px}

article.peopleformer .contentText {
    text-align: left;
   
	align-self: center;
	padding: 0 5%;
}

article.peopleformer p{ 
font-size: 13px;
    color: #333;
	}
article.peopleformer img{ 
    max-width: 290px;
	}

article.people:hover{  transform: scale(1.1);}

article.people .contentVisu{}
article.people .contentVisu img{ display: block; width: 100%; }
article.people .contentText{ text-align:center; padding: 10% }
article.people .contentText h5{ font-size:18px; margin-bottom: 5px; }
article.people .contentText h6{ font-size:13px; color:#333; font-weight: 300; margin-bottom: 20px; }


#sect-peopleBanner{ position: relative; margin-bottom: 80px }
#sect-peopleBanner .profil{ position: absolute; bottom: 0; left: 5%; width: 22%; overflow: hidden; border-radius: 10px 10px 0 0   }
#sect-peopleBanner .profil img{ display: block; width:100%; }
#sect-peopleBanner .backgroundProfil{ display: block; width: 100%; }



#sect-contact{ overflow: hidden; padding:80px 0 }
.contactAside{width: 40%;
    float: left; padding-left: 4%; padding-right: 6%;}
.contactAside h1{     font-size: 33px;
    font-weight: 400;
    background: url(../_img/arrow.png) no-repeat right center;
    display: inline-block;
    padding-right: 50px; }
.contactAside p{ font-size: 33px; color: #333;  font-weight: 100 }

.mainContact{ width: 60%; float: left; padding-right: 4%}
.mainContact h5{ text-transform: uppercase;
	margin-bottom: 15px; }
.mainContact .col1{ margin-bottom: 30px}

.wrapperMore{ padding: 40px ; text-align: center; }
 b.dot{ 
  border-radius: 50%;
  background-color: rgba(174, 90, 71,0.38);
  width: 20px;
  height: 20px;
	display: block; 
	position: relative;
	 z-index: 3; 
	 cursor: pointer; 
}
 b.dot:after{ content:'.'; width: 8px; height: 8px;  background-color: rgba(174, 90, 71,1); position: absolute; margin-left: -4px; margin-top: -4px;  left: 50%; top: 50%;   border-radius: 50%; font-size: 0; }


 b.dot.dotgreen{ background-color: rgba(0, 109, 104,0.38); }
 b.dot.dotgreen:after{ background-color: rgba(0, 109, 104); }

b.dot.dotBlue1{  background-color: rgba(11, 152, 208,0.38);  }
b.dot.dotBlue1:after{  background-color: rgba(11, 152, 208);  }

b.dot.dotBlue2{  background-color: rgba(91, 139, 35,0.38);  }
b.dot.dotBlue2:after{  background-color: rgba(91, 139, 35);  }

b.dot.dotYellow{  background-color: rgba(226,190,10,0.38);  }
b.dot.dotYellow:after{  background-color: rgba(226,190,10,1.00);  }

b.dot:hover{  transform: scale(1.1);}

.aboutDot .hover{    border-radius: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 1px 3px 0px rgba(98, 98, 98, 0.32);
    width: 145px;
    padding: 10px;
    text-align: center;
    margin-left: -60px;
    margin-top: 10px;
	display: none;
	z-index: 10;
	position: relative;
}
.aboutDot .hover strong{ font-size: 11px; text-transform: uppercase; font-weight: 600 }
.aboutDot .hover span{ color: #333; font-size: 12px;  }

.map{ position: relative; }
.map .aboutDot{ position:absolute; top: 0; left:0 }
.map .aboutDot:hover .hover{ display: block; }
#mapBg img{ display: block; width: 100%}

.legend b.dot span{ margin-left:30px; }
.legend > div{ display: inline-block; vertical-align: top; margin: 20px; text-transform: uppercase;     font-size: 12px;  }
.legend > div a{ color: #000; }
.legend .iconAfrica{     background: url(../_img/icons/africa_green.svg) no-repeat top left / 36px; padding-left: 45px; display: block; line-height: 19px; }
.legend .iconEu{ background: url(../_img/icons/europe_green.svg) no-repeat top left / 40px; padding-left: 50px; display: block; line-height: 19px; }
.legend b.dot{ display: inline-block; margin-right: 10px; vertical-align: middle;}
.legend span{  display: inline-block;vertical-align: middle; }

footer{ border-top:3px solid #f6f6f6; overflow: hidden; padding:50px 4% }
footer #foot-sitemap{    width: 40%;
    float: left;
    margin-right: 5%; }

footer #foot-sitemap ul li a{ color:#333; }
footer #foot-sitemap ul li{ display: inline-block;    width: 30%; margin-bottom:10px;  }

footer #foot-contact{ width:30%; float: left;  }

footer #foot-contact .foot-contactus{     color: #333;
    font-size: 16px;
    margin-bottom: 10px;
    display: block; }
footer #foot-contact .foot-col1{ width: 30%; display: inline-block; vertical-align: top }
.contact-item{ margin-bottom:20px;     line-height: 28px;  color: #333; }
.contact-item strong, .contact-item a{ color:#000; }
.contact-item h5{ margin-bottom: 0px; text-transform:uppercase;  color:#000; font-weight:600}
 ul.socials li{ display:inline-block; margin-right:10px; }
footer #foot-newsletter{ width: 25%; float: right }
footer #foot-newsletter input[type="email"]{     border: 1px solid #000;
    border-radius: 5px 0 0 5px;
    display: block;
    float: left;
    padding: 10px;
    font-size: 12px;
       width: 80%;}
footer #foot-newsletter input[type="submit"]{     border: 1px solid #000;
	background-color:#000; 
	color:#fff; 
    border-radius: 0 5px 5px 0;
    display: block;
    float: left;
    padding: 10px;
    font-size: 12px;
	color: #FFF; 
    width: 20%; }
footer h5{ text-transform:uppercase; font-weight:700; margin-bottom:20px; }
footer .privacyLink{clear: both;
    padding-top: 10px;
    display: block;
}
footer .privacyLink a{ text-decoration: underline; color: #000; }
.sect-simplepage{ padding: 0 4% 80px 4%; }
.sect-simplepage .event{ margin-bottom: 20px; width: 24%; }

#bxpager a{ display: none; }
#bxpager a.active2{ display: block; }

.bx-wrapper{ margin: 0; padding: 0; border: none; box-shadow:none; background:transparent;   }
.bx-controls{ display: none; }
#sect-HgReportTopics {     text-align: center;}
#sect-HgReportTopics .articleWrapper{     margin: 0 4%;}

#sect-HgReportTopics article {
        width: 48%;
	width: 33%;
    margin: 0 15px 0 0;
    display: inline-block;
    margin-bottom: 20px;
    padding-bottom: 30px;
    vertical-align: top;
    text-align: left;
}
#sect-HgReportTopics article:nth-child(even){ margin: 0 0 0 15px}
#sect-HgReportTopics article .contentVisu img{ display: block; width: 100%}
#sect-HgReportTopics article .contentVisu {  margin-bottom: 30px; }
#sect-HgReportTopics article .contentText h2{ 
    font-size: 30px;
    font-weight: 400;
    margin-bottom: 30px;
    line-height: 35px;
}

@media only screen and (max-width:1200px){
	#sect-hpAboutUs.sect-boxed .introAbout p { font-size:17px; }
}
@media only screen and (max-width:900px){
	.mobileOnly{ display: block; }
	#sect-introTopic .contentVisu{ width: 100%; }
	#sect-introTopic .contentText{ width: 100%; }
	#sect-hpEvents .eventsSlider{ padding: 0 4%; width: 100%}
	#bxpager{ display: none; }
	#sect-hgArticles #lastArticle{ width: 100%}
	.eventsSlider .event{ width: 49%}
	#sect-hgArticles{ padding: 0 3%; }
	#sect-hgArticles #lastArticle2 article.publi,
	#sect-articles article.publi{
    float: none;
    width: 100%;
    padding: 0 ;
    margin: 0;
		 margin-bottom: 20px;
}
	#sect-hgArticles #lastArticle2{ width:100%; margin: 0; }
	#sect-articles article.publi{ padding: 0; border: none; }
	.sect-boxed .wrapperBox .contentText{ padding: 20px 7%; }
	footer #foot-sitemap, 
	footer #foot-contact, 
	footer #foot-newsletter{ width: 100%; margin: 0 0 20px 0; }
	.sect-boxed .wrapperBox .contentVisual{ display:none}
	article.people{ width: 100%}
	.homepage header .logo a img{ filter: none}
	.homepage header{ position: fixed; }
	.homepage header nav ul li > a{ color: #000; }
	header .logo{ float: none; }
	header nav ul{ display: none; }
	header nav.open ul{ display: block; }
	header nav ul li {
    display: block;
    position: relative;
    width: 100%;
    padding: 20px;
    text-align: center;
		border-bottom: 1px solid #ccc;
}
	.burgerMenu{ display: block; }
	header nav{ float: none; }
	.nav2{ display: none!important}
	header nav ul li.selected:after, header nav ul li:hover:after{ display: none; }
	#hp-slider .slideContent{ width: 100%; }
	#hp-slider .slideContent h1 {
    font-size: 25px;
    line-height: 26px;
    margin-bottom: 30px;
}
	#hp-slider .slideContent .fromWYSIWYG:before{ display: none;}
	#sect-hgArticles #lastArticle .contentText {
    position: relative;
    bottom: auto;
    left: auto;
    width: 100%;
}
	#sect-hgArticles #lastArticle .contentText h3{ color: #000; }
	#sect-hgArticles #lastArticle .contentText p{ color:#333 }
	body{     margin-top: 85px; }
	header, .homepage header{ background-color: #fff; position:fixed; top: 0; width: 100%; z-index: 100 }
	#sect-reports article .contentVisu{ width: 100%}
	#sect-reports{ padding: 0; }
	#sect-reports article .contentText,
	#sect-reports article:nth-child(even) .contentText{
    width: 100%;
    float: left;
    padding: 20px 5%;
}
	#sect-HgReport .contentVisu{ width: 100%}
	article.publi, #sect-HgReportTopics article{ width: 100%; }
	#sect-HgReport .contentText{ width: 100%; padding: 20px 5%}
	article.artPress{ width: 100%}
	#sect-map .caseDetail, #sect-map .mapDetail, #sect-map .mainMap{ width: 100%; height: auto}
	#mobileCases{ margin: 30px 0; }
	#mobileCases .contentCase{ display: none; padding: 10px 2%;  }
	#mobileCases .contentCase img{ display: block; width: 100%}
	#mobileCases  .titleCase{     padding: 10px 80px 10px 2%;
    color: #333;
    cursor: pointer;
    background: url(../_img/arrow.png) no-repeat right 14px center;}
	#mobileCases  .titleCase.active + .contentCase{ display: block}
	.oneCase{ border-bottom: 1px solid #ccc}
	#sect-map .mapDetail{ display: none!important}
}
@media only screen and (max-width:700px){
	.subNav ul li{ display: block; width: 100%; text-align: center}
	.subNav ul li a{ background: none!important; padding: 10px!important; }
	.eventsSlider .event { width: 100%; }
	/*b.dot{ display: none; }
	.map .aboutDot{ 
		position: relative;
   		top: auto!important;
    	left: auto!important;
	}
	.aboutDot .hover{ display: block; width: 100%; margin: 0; }
	*/
	.contactAside, .mainContact{ width:100%; padding: 0 4%; margin-bottom: 30px }
	
article.peopleformer{ display: block}
article.peopleformer .contentVisu img {
    display: block;
    width: 100%;
	max-width: 100%
}


article.peopleformer .contentText {
    text-align: center;
    padding: 10%;
}


}

.slick-arrow{ position: absolute; top: 50%; width:40px; height: 40px; font-size: 0; margin-top: -20px;   }
.slick-prev{ left :1%; background: url(../_img/prevArticle.png) no-repeat center center / cover ; }
.slick-next{ right :1%; background: url(../_img/nextArticle.png) no-repeat center center/ cover ;}

.articlePage .sect-pageIntro h1{ text-transform: none; }
.articlePage  .sect-simplepage {
    padding: 0 4% 80px 4%;
    max-width: 1100px;
    margin: 0 auto;
}
.bx-viewport{ min-height: 500px}

#popNews{ position: fixed;padding: 10px;  bottom:0; width:90%; left:5%; background-color: #ae5a47; display: block;  text-align:center;    box-shadow: 0 -5px 10px -5px rgba(5,5,5,.5); }

#popNews p{ color: #fff; font-size: 28px; display: inline-block; margin-right: 20px }
#popNews form{ display: inline-block; }
#popNews input[type="text"], #popNews input[type="email"]{ font-family: 'Open Sans', sans-serif; font-size: 15px; padding: 10px; width: 200px; background-color: #fff;  }

#popNews input[type="submit"]{
    background-color: #fff;
    color: #ae5a47;
    margin-left: 10px;
}

#popNews .closeNewsletter{ width: 25px; height: 25px; font-size: 0;  position: absolute; top: 5px; right: 5px; background:  url(../_img/close.svg) no-repeat center center / cover}


/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    z-index: 10;
}



/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}