body{
	font-family:"Lato", Arial;
	margin:0;
    background:#D3D3D3;
    font-weight:400;
}

h1{
    font-size:40px;
    margin:0;
}

h3{ 
    color:#09C5CE;
    font-size:20px;
}

h4{
    font-size:15px;
}

h5{
    font-size:13px;
}

a{
    color:#FFA22B;
    text-decoration: underline;
}

img{
    border:0;
}

#logo{
    position:absolute;
    right:5px;
    bottom:5px;
    z-index:100;
}

#overlay, #overlay_sources, #overlay_share{ background:rgba(0,0,0,0.6); width:100%; height:100%; position: absolute; left:0; top:0; z-index:100; display:none;}
#popin_future, #popin_sources, #popin_share{
    background:#fff;
    padding:20px 40px 30px;
    opacity: 0;
    width:400px;
    margin:80px auto 0;
    text-align:center;
    border-radius:20px;
    color:#333;
}

#popin_sources{
    max-height: 490px;
    overflow: auto;
}

#popin_sources{ margin-top:22px; padding-top:0;}

#popin_sources{ width:600px; text-align:left;}
#popin_future .bt_close, #popin_sources .bt_close, #popin_share .bt_close{position: absolute; right:10px; top:10px;}
#popin_future h2, #popin_sources h2, #popin_share h2{ font-size:37px; font-weight:normal; margin:0 0 10px; text-align:center; text-transform: uppercase;}
#popin_future .text{ font-size:13px; line-height:16px;}
#popin_sources .text{ font-size:12px; line-height:14px;}
#popin_share{ text-align:left; padding-bottom: 80px}
#popin_share h3{ margin:10px 0; color:#333; text-transform: uppercase;}

.social_network{float:left; width:40px; height:40px; margin-right:10px; cursor:pointer;}
#social_twitter{background:url("../img/share_twitter-off.png") no-repeat 0 0;}
#social_facebook{background:url("../img/share_facebook-off.png") no-repeat 0 0;}
#social_renren{background:url("../img/share_renren-off.png") no-repeat 0 0;}
#social_weibo{background:url("../img/share_weibo-off.png") no-repeat 0 0;}

#social_twitter:hover{background:url("../img/share_twitter-on.png") no-repeat 0 0;}
#social_facebook:hover{background:url("../img/share_facebook-on.png") no-repeat 0 0;}
#social_renren:hover{background:url("../img/share_renren-on.png") no-repeat 0 0;}
#social_weibo:hover{background:url("../img/share_weibo-on.png") no-repeat 0 0;}

.small_responsive{display:block;}
.mid_responsive{display:none;}
.large_responsive{display: none;}

#preloading{ display: none;}

.px62{width:40px;}
.px98{ width:63px;}
.px107{ width:69px;}
.px185{ width:119px;}
.px327{ width:210px;}
.px354{ width:227px;}
.px365{width:234px;}
.px384{ width:246px;}
.px389{ width:249px;}
.px439{ width:281px;}
.px471{ width:302px;}
.px585{ width:375px;}
.px597{ width:382px;}
.px660{ width:423px;}
.px675{ width:432px;}
.px704{ width:451px;}
.px706{ width:453px;}
.px730{ width:468px;}
.px837{ width:536px;}
.px871{ width:558px;}
.px928{ width:594px;}
.px959{ width:614px;}
.px1447{ width:927px;}
.px1467{ width:939px;}
.px1478{ width:946px;}
.px1600{    width:1025px; }
.px1800{    width:1160px; }
.px2000{    width:1280px; }
.px2939{width:1881px;}

.fo_2{display:none;}

#positionnement{
    position:absolute;
    left:0;
    top:0;
    opacity: 0.5;
    display:none;
}

#positionnement img{
    position:absolute;
    left:0;
    top:0;
}

#responsive{
    left:576px; /* TRANSITION LEFT PX */
    margin-left: 1px; /* CONGRUENCE PERIOD 1  < 1700 */
    margin-right: 4px; /* CONGRUENCE PERIOD 2  < 1700 */
    margin-top: 2px; /* CONGRUENCE PERIOD 1  > 1700 */
    margin-bottom: 1px; /* CONGRUENCE PERIOD 2  > 1700 */
    padding-left: 20px; /* CONGRUENCE LEGEND 1  < 1700 */
    padding-right: 30px; /* CONGRUENCE LEGEND 2  < 1700 */
    padding-top: 40px; /* CONGRUENCE LEGEND 1  > 1700 */
    padding-bottom: 20px; /* CONGRUENCE LEGEND 2  > 1700 */
    display:none;
    position: relative;
}

#respresent{
    left:1000px;/* SVG CHART WIDTH */
    top:400px;/* SVG CHART HEIGHT */
    width:140px;/* DECAL IN X BETWEEN GROUPS */
    height:70px;/* DECAL IN Y BETWEEN GROUPS */
    display:none;
    position: relative;
}

/*
.per1{width:0.67px;}
.per2{width:0.56px;}
*/

.selected{
    fill:#ffffff;
    fill-opacity:1;
}

.polices{
	font-family: 'Roboto', sans-serif;
	font-family: 'Roboto Condensed', sans-serif;
	font-family: 'Oswald', sans-serif;
}

#application{
	width:1024px;
	height:595px;
	position:relative;
	margin:0 auto;
    font-size:13px;
    color:#fff;
    background:#2C3537;
}

.chart rect{
    fill:#07A09C;
    stroke:#07A09C;
}

.chart rect.hovered{
    fill:#075B57;
}

.chart text{
    fill:#6E8287;
    font-size:9px;
}

.app_block{ display:none; position:relative; height:100%;}
.arrow{cursor: pointer;}

/*MENU*/
.menu{
    position:absolute;
    left:0px;
    top:0px;
    width:120px;
    z-index:20;
}

.menu h1{
    margin:10px;
    cursor:pointer;
    color:#2C3537;
    font-weight:normal;
    font-size:34px;
    line-height: 34px;
}

.menu a{
    background:rgba(255,255,255,0.7);
    color:#333;
    border-radius:0 20px 20px 0;
    height:40px;
    line-height:40px;
    font-size:13px;
    float:left;
    margin-top:3px;
    width:100px;
    text-decoration:none;
    text-indent:7px;
    text-transform: uppercase;
}

.menu a:hover{
    background-position: 80px 13px;
    background-repeat:no-repeat;
    background-image:url("../img/fleche_over.png");
}

.menu a.active{
    background-position: 96px 13px;
    background-repeat:no-repeat;
    background-image:url("../img/fleche_on.png") !important;
    background-color:#fff;
    color:#DD742F;
    width:120px;
    text-indent:10px;
}

.bt_sources, .bt_share{
    cursor:pointer;
    float:left;
    background:url("../img/bt_source.png") no-repeat 0 0;
    color:#333;
    font-size:10px;
    padding-left:24px;
    width:62px;
    height:26px;
    margin:10px 0 0;
    line-height:26px;
    text-transform: uppercase;
    overflow: hidden;
}

.lang-es .bt_sources, .lang-es .bt_share{
    font-size: 8px;
}

.bt_share{
    margin-top:2px;
     background:url("../img/bt_share.png") no-repeat 0 0;
}

/*HOME*/
#home{display:block;}
#home h1, #home h4, #home h3, #home h5{ text-align: center;}
#home h1{ font-size:49px; line-height:50px; padding:10px 0;}
#home h3{ margin:0 0 10px; font-size:18px;}
#home h4{ width:70%; margin:0 auto; font-weight:normal;}
#home h5{ margin:0 10px; font-size:13px;}

#home_blocks{width:90%; margin:10px auto 0; height:400px;}
.home_block{float:left; width:246px; margin-right:80px; cursor:pointer;}
.home_block.last{margin-right:0px;}
.home_img{ width:254px; height:254px; background-repeat:no-repeat; background-position: 0 0;}

#home_past .home_img{ background:url("../img/home_past.png") no-repeat 0 0;}
#home_past .home_img:hover{background-position:0px -264px;}
#home_present .home_img{background:url("../img/home_present.png") no-repeat 0 0;}
#home_present .home_img:hover{background-position:0px -264px;}
#home_future .home_img{background:url("../img/home_future.png") no-repeat 0 0;}
#home_future .home_img:hover{background-position:0px -264px;}

/*PAST*/
.past_block{float:left; width:100%; text-align:center; position:relative;}
#past_timeline{
    height:400px;
    z-index:10;
    background:#7bbcc7;
}

#outer_frise{
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    left:0;
    top:0;
}

#year_title{ font-size:36px; color:#fff; font-weight:bold; position:absolute; width:100%; text-align:center; top:2px;}

#frise{
    width:30000px;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}

#frise .bande{
    position:absolute;
    left:0;
    top:0;
}

.infobulle, .infobulle_future{
    background-color:#fff;
    border-radius:10px;
    position:absolute;
    padding:10px;
    font-size:12px;
    text-align:left;
    line-height:14px;
    color:#333;
    width:300px;
}

.infobulle .title, .infobulle_future .title{
    font-weight:700;
    color:#FFA22B;
    margin:0 0 2px 0;
}

.infobulle .italic, .infobulle_future .italic{
    font-style: italic;
    font-weight:700;
    color:#414141;
    margin:0 0 2px 0;
}

.infobulle .fleche, .infobulle_future .fleche{
    position:absolute;
    left:44%;
    bottom:-14px;
    width:28px;
    height:16px;
    background:url("../img/fleche_infobulle_bas.png") no-repeat 0 0;
}

#background{ top:0;}
#backmidground{top:0;}
#frontmidground{top:0;}
#frontground{top:0; height:100%; width:100%;}

#background img, #backmidground img, #frontmidground img{float:left;}

#frontground img{position:absolute;}
#frontground_01{ left:620px; bottom:-15px;}
#frontground_02{ left:10530px; bottom:-12px;}
#frontground_03{ left:10940px; bottom:-40px;}
#frontground_04{ left:13870px; bottom:-60px;}
#frontground_05{ left:14200px; bottom:-60px;}
#frontground_06{ left:14540px; bottom:-60px;}
#frontground_07{ left:15390px; bottom:-40px;}
#frontground_08{ left:17710px; bottom:-50px;}
#frontground_09{ left:19060px; bottom:0px;}
#frontground_10{ left:20930px; bottom:-26px;}

#moving_01{ top:-51px; max-width:5940px; max-height:7000px; z-index:8160;}
#moving_01.position1{left:5940px;} #moving_01.position2{left:7000px;} #moving_01.position3{left:8160px;}

#moving_05{ top:265px; max-width:17720px; max-height:17300px;}
#moving_05.position1{left:17720px;} #moving_05.position2{left:17300px;}

#moving_02{ position:absolute; left:2000px; top:10px;}
#moving_03{ position:absolute; left:3000px; top:10px;}
#moving_04{ position:absolute; left:4000px; top:10px;}


/* 1: 64% - 2: 76% */


#past_timeline .arrow{
    position:absolute;
    top:373px;
}

#past_timeline .arrow_left{
    left:7%;
    display:none;
}

#past_timeline .arrow_right{
    right:16%;
}

#past_timeline .arrow.arrow_next{
   background:url("../img/bt_next_bg.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
   right:11%;
   display:none;
   font-size:16px;
    line-height:20px;
    color:#3E5453;
    width:250px;
    text-decoration: none;
    height:88px;
    z-index:50;
    top:340px;
}

.arrow_next .text{
    position:relative;
    top:26px;
    font-weight: 700;
    left:24px;
    width:150px;
    display:block;
    text-align:center;
}

.arrow_next .smaller{
    font-size:13px;
    font-weight:400;
}

#you_are_here{
    position:absolute;
    font-weight:700;
    font-size:12px;
    width:62px;
    height: 30px;
    overflow: hidden;
    text-align: center;
    line-height:14px;
    display:none;
    left:0;
    top:0;
    z-index:100;
}

#jauge{
    position:absolute;
    right:15px;
    top:20px;
    background:#fff;
    background:rgba(255,255,255,0.8);
    border-radius:15px;
    width:105px;
    height:540px;
}

#jauge_title{
    position:absolute;
    left:0px;
    top:0px;
    height:36px;
    border-radius:20px 20px 0 0;
    background:rgba(255,255,255,0.9);
    width:100%;
    text-align:center;
    cursor:pointer;
    z-index:10;
    font-size:11px;
    line-height: 14px;
    padding-top:10px;
    color:#333;
    font-weight:700;
}

#tooltip_human{
    display:none;
    position:absolute;
    right:-10px;
    top:60px;
    background:#fff;
    border-radius: 5px;
    padding: 5px;
    width: 120px;
    font-size: 11px;
    box-shadow: 0px 0px 10px 0px #666;
}
    #tooltip_human:after, #tooltip_human:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
    #tooltip_human:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px; }

#jauge_bar{
    width:20px;
    border-radius:20px;
    background:#fff;
    height:84%;
    bottom:20px;
    position:absolute;
    left:44px;
    box-shadow: 0 0 6px 0 #999999;
}

#jauge_bar_inner{
    position:absolute;
    bottom:0;
    left:0;
    border-radius:0 0 20px 20px;
    width:100%;
    height:0;
}

#jauge_pastille{
    position:absolute;
    top:-53px;
    left:-13px;
    background-repeat:no-repeat;
    background-position:0 0;
    background-color:transparent;
    background-image:url("../img/jauge/jauge_pastille1.png");
    text-align:center;
    color:#fff;
    width:46px;
    height:53px;
    font-size:11px;
    line-height:20px;
}

#jauge_pastille .figure{ font-size:13px; top:4px; position:relative;}

#past_barchart_block{
    height:195px;
    position:relative;
}

#past_barchart_title, #future_barchart_title{
    font-size:15px;
    color:#09C5CE;
    width:100%;
    position:relative;
    top:10px;
    text-align: center;
}

#future_barchart_title{
    width:40%;
    margin-left: 30%;
}

#html_barchart{
    width:854px;
    height:120px;
    margin:24px 0 0 20px;
    position: relative;
    background:url("../img/courbe_past1-tailleMin.png") no-repeat 0 0;
}

#html_barchart.per2{
    background:url("../img/courbe_past2-tailleMin.png") no-repeat 0 0;
}

#html_barchart .bar{
    float:left;
    background:#2C3537;
    position:relative;
}

#html_barchart .legend, #future .legend{position: absolute; color:#6E8287; font-size:9px; z-index:10;}

.legend_horiz_bar{
    position:absolute;
    border-top:1px solid #2C3537;
    height:1px;
    background:transparent;
    z-index:5;
    width:100%;
}

.sep{ position: absolute; right:7%; top:0px; border-left:2px solid #2C3537; width:1px; height:130px; z-index:5;}

#legend_horiz_bar1{left:0; top:88px;}
#legend_horiz_bar2{left:0; top:58px;}
#legend_horiz_bar3{left:0; top:28px;}
#legend_horiz_bar4{left:0; top:-8px;}

#legend_ord_0{left:-20px; top:112px;}
#legend_ord_1{left:-30px; top:82px;}
#legend_ord_2{left:-30px; top:52px;}
#legend_ord_3{left:-30px; top:22px;}
#legend_ord_4{left:-30px; top:-14px;}

.legend_abs_period{z-index:20; position: relative;}
.legend_abs, .legend_abs_f { position:absolute; color:#6E8287; font-size:11px; /*transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); */ z-index:20; top:128px; font-weight:700;}
#legend_abs_1_1{left:0px;}#legend_abs_1_2{left:10%;}#legend_abs_1_3{left:20%;}#legend_abs_1_4{left:30%;}#legend_abs_1_5{left:40%;}#legend_abs_1_6{left:50%;}#legend_abs_1_7{left:60%;}#legend_abs_1_8{left:70%;}#legend_abs_1_9{left:80%;}#legend_abs_1_10{left:90%;}#legend_abs_1_11{left:810px;}
#legend_abs_2_1{left:0px;}#legend_abs_2_2{left:10%;}#legend_abs_2_3{left:20%;}#legend_abs_2_4{left:30%;}#legend_abs_2_5{left:40%;}#legend_abs_2_6{left:50%;}#legend_abs_2_7{left:60%;}#legend_abs_2_8{left:70%;}#legend_abs_2_9{left:80%;}#legend_abs_2_10{left:90%;}#legend_abs_2_11{left:810px;}

#legends_abs_period2{ display:none;}

#bt_quick_period2{position:absolute; right:34px; top:75px; text-decoration:none; color:#fff;}
#bt_quick_period2 .text{font-size:11px; color:#fff; position:absolute; top:-18px; left:-24px; width:80px;}
#bt_quick_period2:after{content:">"; position: absolute; right: -18px; top:-5px; font-size:20px;}
#bt_quick_period1{position:absolute; left:60px; top:94px; text-decoration: none; color:#fff;}
#bt_quick_period1 .text{font-size:11px; color:#fff; position:absolute; top:-18px; left:-34px; width:100px;}
#bt_quick_period1:before{content:"<"; position: absolute; left: -18px; top:-5px; font-size:20px;}

.barchart_info{position:absolute; color:#BDF9F4; font-size:11px; text-align:center;}
.pin{ width:2px; height:60%; background:#BDF9F4; margin:0 auto; position:relative;}
.pin_up{ width:4px; border-radius:10px; border:3px solid #BDF9F4; height:4px; position:absolute; left:-4px; top:-10px;}

#barchart_info_1_1{left:558px; top:56px; width:100px; height:60px;}
#barchart_info_1_2{left:658px; top:63px; width:80px; height:48px;}
#barchart_info_1_3{left:610px; top:42px; width:80px; height:30px; display:none;}

#barchart_info_2_1{left:194px; top:40px; width:60px; height:76px;}
#barchart_info_2_2{left:700px; top:18px; width:70px; height:98px;}
#barchart_info_2_3{left:760px; top:9px; width:70px; height:136px;}

.bar.zindexed{
    z-index:50 !important;
}

#past_tooltip{
    background:#fff;
    border-radius:5px;
    text-align:center;
    padding:7px 0 0;
    width:110px;
    height:20px;
    line-height:13px;
    font-size:13px;
    font-weight:700;
    color:#333;
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:110;
}

#past_tooltip img{
    position:absolute;
    bottom:-12px;
    left:42px;
}

.step{
    border-radius:30px;
    width:30px;
    height:30px;
    border:2px solid #fff;
    text-align:center;
    line-height:31px;
    font-size:13px;
    cursor:pointer;
    position:absolute;
    bottom:18px;
    left:5px;
}

.step.selected{
    background:#fff;
    color:#07A09C;
    font-weight:bold;
}

.step_period_2{
    display:none;
}

#step_1{ left:5px; bottom:18px;} #step_2{ left:670px; bottom:24px;} #step_3{ left:696px; bottom:45px;} #step_4{ left:202px; bottom:46px;} #step_5{ left:238px; bottom:47px;} #step_6{ left:276px; bottom:48px;} #step_7{ left:316px; bottom:49px;} #step_8{ left:370px; bottom:49px;} #step_9{ left:470px; bottom:51px;} #step_10{ left:570px; bottom:55px;} #step_11{ left:686px; bottom:62px;} #step_12{ left:756px; bottom:74px;} #step_13{ left:796px; bottom:84px;}

/*PRESENT*/
#present h2{
    text-align:center;
    color:#FFA22B;
    font-size:36px;
    margin:0;
    padding-top:10px;
    font-weight: normal;
}

#switch{
    background:url("../img/switch_bg.png") no-repeat 0 0;
    width:62px;
    margin:4px auto 0;
    height:35px;
    position: relative;
    cursor:pointer;
}

#switch_sofar{ position:absolute; font-size:13px; right:68px; top:5px; width: 130px; text-align: right;}
#switch_in2012{ position:absolute; font-size:13px; left:52px; top:5px; width: 130px; text-align: left;}
.switch_lbl{ color:#9f491c; text-transform: uppercase;}
.switched{ opacity:1; color:#FFA22B;}

#switch img{position:absolute; top:0px;}
#switch #switch_off{ display:block; left:0px;}
#switch #switch_on{ display:none; right:14px;}

.subtitle_present{ margin:0 auto; font-size:13px; color:#fff; width:520px; margin:2px auto 0; position:relative; z-index:10; text-align: center;}
.subtitle_present .bille{display: inline-block; border-radius:10px; width:10px; margin-right:5px; height:10px; background:#FF5B00; position:relative; top:3px;}
#subtilte_present_2012{display:none;}
#subtilte_present_2012 .bille{background:#FF8600;}
.subtitle_present .tix{display: inline-block;}

.explained{ text-decoration: underline; position:relative; cursor:pointer;}
.explained_tooltip{display:none; position:absolute; background:#fff; padding: 5px; border-radius:5px; width:220px; text-align: center; color:#333; top:30px; left:-100px;}
    .explained_tooltip:after, .explained_tooltip:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
    .explained_tooltip:after { border-color: rgba(136, 183, 213, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px; }

#present .submenu{
    width:620px;
    height:55px;
    margin:0 auto;
    position: relative;
    z-index:10;
}

#present #reset{
    color:#fff;
    position:absolute;
    right:270px;
    bottom:20px;
    z-index:10;
}

#present .button{
/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #666666 0%, #939393 100%);
/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #666666 0%, #939393 100%);
/* Opera */ 
background-image: -o-linear-gradient(top, #666666 0%, #939393 100%);
/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, #939393));
/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #666666 0%, #939393 100%);
/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #666666 0%, #939393 100%);
    color:#fff;
    width:140px;
    height:40px;
    border-right:1px solid #333;
    padding:8px 6px 0;
    text-align:center;
    cursor:pointer;
    float:left;
    text-decoration: none;
    margin-top:2px;
    text-transform: uppercase;
}

#present .button:hover{
    background:#666666;
}

.button.first{
    border-radius:5px 0 0 5px;
}

.button.last{
    border-radius:0px 5px 5px 0px;
}

#present .button.selected{
    background:#444 !important;
}

#present #chart{
    height:400px;
    width:100%;
    text-align:center;
    position:relative;
    top:0px;
    z-index:5;
}

.legends{ position:absolute; display:none;}
.chart_legend{ position:absolute; text-transform: uppercase; width:100px; text-align: center; z-index:100;}
.legend_4 .chart_legend{ text-transform:none;}

.text_pop{ position:absolute; bottom:-24px; font-size:11px; color:#fff; padding-left:20px; left:8px; width:80px; text-align:left; height:20px; line-height:20px;}
#legend_2_1 .text_pop{ background:url("../img/pop_asia.png") no-repeat 0 0; padding-left:34px; bottom:-34px; height:34px; line-height:22px; left:0px;}
#legend_2_2 .text_pop{ background:url("../img/pop_northAm.png") no-repeat 0 3px;}
#legend_2_3 .text_pop{ background:url("../img/pop_europe.png") no-repeat 0 2px;}
#legend_2_4 .text_pop{ background:url("../img/pop_centSouthAm.png") no-repeat 0 3px; left:20px;}
#legend_2_5 .text_pop{ background:url("../img/pop_africa.png") no-repeat 0 0;}
#legend_2_6 .text_pop{ background:url("../img/pop_oceania.png") no-repeat 0 7px; padding-left:14px; left:12px;}
#legend_2_7 .text_pop{ background:url("../img/pop_middleEast.png") no-repeat 0 4px;}

.pop_link{ text-decoration:underline; cursor:pointer; position:relative; display:inline;}
.pop_tooltip{ display:none; position:absolute; left:-34px; top:18px;}

.present_note{
    position:absolute;
    right:40px;
    top:180px;
    width:160px;
    height:auto;
    color:#bfc4c4;
    font-size:12px;
    border-left:2px solid #546E72;
    line-height:16px;
    display:none;
    padding:0 0 10px 20px;
}

.white{
    color:#fff;
}

.present_note h5{
    font-weight: 700;
    font-size:18px;
    color:#fff;
    margin:0 0 10px;
}

.present_note:before{
    content:"";
    background:url("../img/note_pointeur.png") no-repeat 0 0;
    width:16px;
    height:28px;
    left:-16px;
    position:absolute;
    top:40%;
}

.present_note.note_4{
    right:20px;
    top:160px;
}

.present_note h4{
    font-size:16px;
    line-height:19px;
    margin:10px 0;
}

#fo_1_1{left:29%; top:54%; width:269px;}
#fo_1_2{left:56%; top:42%; width:375px;}
#fo_1_3{left:55%; top:69%; width:614px;}

/* INTER PRESENT/FUTURE */
#what_next{
    background:url("../img/bt_next_bg.png") no-repeat 0 0;
    font-size:16px;
    line-height:20px;
    color:#3E5453;
    position:absolute;
    right:-20px;
    display:none;
    bottom:30px;
    width:250px;
    text-decoration: none;
    height:88px;
    z-index:50;
}

#what_next .text{
    position:relative;
    top:26px;
    font-weight: 700;
    left:24px;
    width:160px;
    display:block;
    text-align:center;
    text-transform: uppercase;
    font-size: 11px;
}

#what_next .smaller{
    font-size:13px;
    font-weight:400;
    text-transform: none;
}

#inter_present_future{
    position:absolute;
    display:none;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

#inter_present_future h2{
    width:100%;
    text-align:center;
    color:#09C5CE;
    font-size:37px;
    font-weight: normal;
    margin:60px 0 10px;
}

#inter_present_future h5{
    width:380px;
    text-align: center;
    color:#d3d3d3;
    font-weight: 400;
    font-size:15px;
    line-height:18px;
    margin:0 auto;
}

#inter_present_future h5 .bolder{
    color:#fff;
    font-weight:700;
}

#courbe_inter, #courbe_future{
    bottom:40px;
    position:absolute;
    left:100px;
    height:200px;
    width:840px;
}

#courbe_inter{
    height:470px;
    left:80px;
    width:860px;
    background:url("../img/courbe_future1-tailleMin.png") no-repeat 0 0px;
}

.courbe_inter_legend, .courbe_future_legend{
    position: absolute;
    color:#09C5C9;
    font-size: 12px;
    width: 200px;
    text-align: center;
}
    #courbe_inter_legend--1{bottom: 46px; left: 290px;}
    #courbe_inter_legend--2{bottom: 46px; right: 30px;}
    #courbe_future_legend--1{bottom: 17px; left: 300px;}
    #courbe_future_legend--2{bottom: 17px; right: 20px;}


#courbe_future{
    background:url("../img/courbe_future2-tailleMin.png") no-repeat 0 0px;
    bottom:6px;
    height:180px;
}

#courbe_inter.drag0{background-position:0 0px;}
#courbe_inter.drag1{background-position:0 -474px;}
#courbe_inter.drag2{background-position:0 -948px;}
#courbe_inter.drag3{background-position:0 -1422px;}
#courbe_inter.drag4{background-position:0 -1896px;}

#courbe_future.drag1{background-position:0 0px;}
#courbe_future.drag2{background-position:0 -185px;}
#courbe_future.drag3{background-position:0 -370px;}
#courbe_future.drag4{background-position:0 -555px;}


#courbe_future{
    left:70px;
}

#drag_level, #drag_level_future{
    position:absolute;
    left:825px;
    width:40px;
    bottom:72px;
    height:140px;
}

#drag_level{
    left:834px;
    bottom:142px;
    height:350px;
}

#drag_level_future{
    left:825px;
    height:110px;
    bottom:70px;
}

#drag_vertic{
    border-right:1px solid #fff;
    width:1px;
    height:100%;
    position:absolute;
    bottom:0;
    right:0;
}

#drag_vertic_2{
    border-right:1px solid #fff;
    width:1px;
    height:160px;
    position:absolute;
    bottom:16px;
    right:0;
}

#drag_bt, #drag_bt_future{
    background-image:url("../img/bt_level_big_off.png");
    background-position: 17px 7px;
    background-repeat:no-repeat;
    background-color:#fff;
    border-radius:53px;
    width:53px;
    cursor:pointer;
    height:53px;
}

#drag_bt:hover{
    background-image:url("../img/bt_level_big_on.png");
}

#drag_bt_future{
    background-image:url("../img/bt_level_small_off.png");
    background-position: 10px 4px;
    width:29px;
    height:29px;
    border-radius:29px;
}

#drag_bt_future:hover{  background-image:url("../img/bt_level_small_on.png");}
#ppm_indic{ position:absolute; left:-86px; top:18px; font-size:16px; width:80px; text-align:right; display:none;}

#img_courbe_inter, #img_courbe_future{
    width:800px;
    position:absolute;
    bottom:0;
    left:0;
}

.courbe_scenario, .courbe_scenario_future{
    position:absolute;
    bottom:0;
    overflow:hidden;
    left:800px;
    width:35px;
    height:250px;
    display:none;
}

.courbe_scenario .rectangle, .courbe_scenario_future .rectangle{
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:79px;
}

.courbe_scenario_future .rectangle{ height: 39px;}

.courbe_scenario .triangle, .courbe_scenario_future .triangle{
    position:absolute;
    bottom:79px;
    left:0;
}

.courbe_scenario_future .triangle{ bottom:39px;}

#c_s_0, #c_f_1{ display:block;}

#c_s_1{background:url("../img/courbe_inter-800px.png") no-repeat 0 2px;}
#c_s_2{background:url("../img/courbe_inter-800px.png") no-repeat -58px 2px;}
#c_s_3{background:url("../img/courbe_inter-800px.png") no-repeat -116px 2px;}
#c_s_4{background:url("../img/courbe_inter-800px.png") no-repeat -174px 2px;}

#c_s_0 .rectangle{ background:#047A74; height:106px;}
#c_s_1 .rectangle, #c_f_1 .rectangle{ background:#6DC100;}
#c_s_2 .rectangle, #c_f_2 .rectangle{ background:#EAAD00;}
#c_s_3 .rectangle, #c_f_3 .rectangle{ background:#E25B00;}
#c_s_4 .rectangle, #c_f_4 .rectangle{ background:#CE0028;}

#c_s_0 .triangle, #c_f_0 .triangle{ background:#047A74;}
#c_s_1 .triangle, #c_f_1 .triangle{width: 0; height: 0; border-left: 25px solid transparent;border-right: 25px solid transparent;border-bottom: 25px solid #6DC100;}
#c_s_2 .triangle, #c_f_2 .triangle{ width: 0; height: 0; border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 75px solid #EAAD00;}
#c_s_3 .triangle, #c_f_3 .triangle{ width: 0; height: 0; border-left: 75px solid transparent;border-right: 75px solid transparent;border-bottom: 150px solid #E25B00;}
#c_s_4 .triangle, #c_f_4 .triangle{ width: 0; height: 0; border-left: 100px solid transparent;border-right: 100px solid transparent;border-bottom: 275px solid #CE0028;}

#drag_resultext{ width:60%; text-align:center; margin:20px auto 0; display:none; position:relative; z-index:10;}
#drag_resultext .explain{font-size:14px; color:#fff; text-transform: uppercase;}
#drag_resultext .result{font-size:19px; line-height:22px; position:relative; top:4px; text-transform: uppercase;}
.result .explanations{ font-size:13px; line-height:18px; color:#fff; text-transform: none;}

#go_consequences{ background:url("../img/bt_consequences_bg.png") no-repeat 0 0; color:#fff; text-align:center; width:308px; height:40px; line-height:40px; display:inline-block; text-decoration: none; font-size:13px; margin:20px 0 0; text-transform: uppercase;}
#go_consequences:hover{ color:#11D3C9;}

/* FUTURE */
#img_title_1{display:block;}
#img_title_2{display:none;}

.future_block{float:left; width:100%; text-align:center; position:relative;}
#future_timeline{
    height:400px;
    z-index:10;
    background:url("../img/future/sky.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    overflow: hidden;
}

#future_barchart_block{
    height:195px;
    position:relative;
    overflow:hidden;
}

#tc_title{
    width:100%;
    text-align:center;
    color:#fff;
    font-size:36px;
    font-weight:700;
    background:url("../img/bt_overlay_open.png") no-repeat 640px 10px;
    position: relative;
    z-index:10;
    cursor:pointer;
}

#tc_subtitle{
    width:100%;
    text-align: center;
    color:#fff;
    position:relative;
    z-index:100;
    font-size:13px;
}

#tc_consequences{
    width:100%;
    text-align:center;
    color:#fff;
    font-size:13px;
    text-transform: uppercase;
    margin:10px 0 0;
}

#future .submenu {
    height: 55px;
    margin: 0 auto;
    position: relative;
    width: 424px;
    z-index: 10;
}

#deroul_design{
    z-index:500;
    margin-top:20px;
    cursor:pointer;
    font-size:14px;
}

.customSelect{
    background: none repeat scroll 0 0 #576367;
    border: 0 solid;
    border-radius: 10px;
    color: #FFFFFF;
    height: 40px;
    top:20px;
    line-height: 40px;
    width:180px;
    padding:0 20px;
    position:relative;
}

.customSelectInner{
    width:160px;
    font-size:14px;
    background:url("../img/select_arrow.png") no-repeat center right;
}

#future .button{
    background-image: -ms-linear-gradient(top, #93b0cb 0%, #7992a8 100%);
    background-image: -moz-linear-gradient(top, #93b0cb 0%, #7992a8 100%);
    background-image: -o-linear-gradient(top, #93b0cb 0%, #7992a8 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #93b0cb), color-stop(1, #7992a8));
    background-image: -webkit-linear-gradient(top, #93b0cb 0%, #7992a8 100%);
    background-image: linear-gradient(to bottom, #93b0cb 0%, #7992a8 100%);
    color:#fff;
    width:140px;
    height:40px;
    margin-right:1px;
    line-height:40px;
    text-align:center;
    cursor:pointer;
    float:left;
    text-decoration: none;
    margin-top:2px;
    text-transform: uppercase;
}

#future .button.selected{
    background-image: -ms-linear-gradient(top, #8aa6c0 0%, #687e91 100%);
    background-image: -moz-linear-gradient(top, #8aa6c0 0%, #687e91 100%);
    background-image: -o-linear-gradient(top, #8aa6c0 0%, #687e91 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #8aa6c0), color-stop(1, #687e91));
    background-image: -webkit-linear-gradient(top, #8aa6c0 0%, #687e91 100%);
    background-image: linear-gradient(to bottom, #8aa6c0 0%, #687e91 100%);
}

.infobulle_future{ opacity:0;}

#back_future{
    width:200%;
    height:100%;
    position:absolute;
    left:-100%;
    top:0%;
}

#atmo_future{
    width:100%;
    height:100%;
    position:absolute;
    left:0%;
    top:100%;
    overflow:hidden;
}

#back_future_01{position:absolute; left:100px; bottom:0;}
#back_future_02{position:absolute; left:100px; top:10px;}

.deg2, .deg3, .deg4{ display:none;}
.deg1{display:block;}

#frontmid_future_01_1deg{position:absolute; right:0px; bottom:-25px;}
#frontmid_future_01_2deg{position:absolute; right:0px; bottom:-24px;}
#frontmid_future_01_3deg{position:absolute; right:0px; bottom:-22px;}
#frontmid_future_01_4deg{position:absolute; right:0px; bottom:-40px;}

#frontmid_future_02_1deg{position:absolute; right:-30px; bottom:28px;}
#frontmid_future_02_2deg{position:absolute; right:-22px; bottom:27px;}
#frontmid_future_02_3deg{position:absolute; right:-30px; bottom:36px;}
#frontmid_future_02_4deg{position:absolute; right:-30px; bottom:38px;}

#frontmid_future_03{ position: absolute; left:1210px; bottom:158px;}

#front_future_01_1deg{position:absolute; left:1524px; bottom:18px;}
#front_future_01_2deg{position:absolute; left:1524px; bottom:18px;}
#front_future_01_3deg{position:absolute; left:1524px; bottom:18px;}
#front_future_01_4deg{position:absolute; left:1524px; bottom:18px;}

#front_future_02_1deg{position:absolute; left:98px; bottom:60px;}
#front_future_02_2deg{position:absolute; left:98px; bottom:60px;}
#front_future_02_3deg{position:absolute; left:98px; bottom:60px;}
#front_future_02_4deg{position:absolute; left:98px; bottom:60px;}

#front_future_03_1deg{position:absolute; left:518px; bottom:88px;}
#front_future_03_2deg{position:absolute; left:518px; bottom:88px;}
#front_future_03_3deg{position:absolute; left:518px; bottom:88px;}
#front_future_03_4deg{position:absolute; left:518px; bottom:88px;}

#front_future_04_1deg{position:absolute; left:698px; bottom:92px;}
#front_future_04_2deg{position:absolute; left:698px; bottom:92px;}
#front_future_04_3deg{position:absolute; left:698px; bottom:92px;}
#front_future_04_4deg{position:absolute; left:698px; bottom:92px;}

#front_future_05_1deg{position:absolute; left:530px; bottom:0px;}
#front_future_05_2deg{position:absolute; left:530px; bottom:0px;}
#front_future_05_3deg{position:absolute; left:530px; bottom:0px;}
#front_future_05_4deg{position:absolute; left:530px; bottom:0px;}

#atmo_future_01{ position:absolute; bottom:0; left:0;}

#atmo_future_02_1deg{ position:absolute; left:0px; bottom:0px;}
#atmo_future_02_2deg{ position:absolute; left:0px; bottom:0px;}
#atmo_future_02_3deg{ position:absolute; left:0px; bottom:0px;}
#atmo_future_02_4deg{ position:absolute; left:0px; bottom:0px;}

#atmo_future_03_1deg{ position:absolute; left:40px; bottom:0px;}
#atmo_future_03_2deg{ position:absolute; left:40px; bottom:0px;}
#atmo_future_03_3deg{ position:absolute; left:40px; bottom:0px;}
#atmo_future_03_4deg{ position:absolute; left:40px; bottom:0px;}

#atmo_future_04_1deg{ position:absolute; right:0px; bottom:30px;}
#atmo_future_04_2deg{ position:absolute; right:0px; bottom:30px;}
#atmo_future_04_3deg{ position:absolute; right:0px; bottom:30px;}
#atmo_future_04_4deg{ position:absolute; right:0px; bottom:30px;}

#infobulle_future_ice_1{right:0.5%; top:10%; width:230px;}
#infobulle_future_ice_2{right:0.5%; top:10%; width:230px;}
#infobulle_future_ice_3{right:0.5%; top:10%; width:230px;}
#infobulle_future_ice_4{right:0.5%; top:10%; width:230px;}

#infobulle_future_sea_1{left:12%; top:70%; width:250px;}
#infobulle_future_sea_2{left:12%; top:70%; width:250px;}
#infobulle_future_sea_3{left:12%; top:70%; width:250px;}
#infobulle_future_sea_4{left:12%; top:70%; width:250px;}

#infobulle_future_sea_1.infobulle_future .fleche, #infobulle_future_sea_2.infobulle_future .fleche, #infobulle_future_sea_3.infobulle_future .fleche, #infobulle_future_sea_4.infobulle_future .fleche{ bottom:none; top:-14px; background:url("../img/fleche_infobulle_haut.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);}

#infobulle_future_corals_1{left:54%; top:48%; width:260px;}
#infobulle_future_corals_2{left:54%; top:48%; width:260px;}
#infobulle_future_corals_3{left:54%; top:48%; width:260px;}
#infobulle_future_corals_4{left:54%; top:48%; width:260px;}

#infobulle_future_carbon_1{right:13%; top:40%; width:187px;}
#infobulle_future_carbon_2{right:13%; top:40%; width:187px;}
#infobulle_future_carbon_3{right:13%; top:40%; width:187px;}
#infobulle_future_carbon_4{right:13%; top:40%; width:187px;}

#infobulle_future_crop_1{left:17%; top:73%; width:240px;}
#infobulle_future_crop_2{left:17%; top:73%; width:240px;}
#infobulle_future_crop_3{left:17%; top:73%; width:240px;}
#infobulle_future_crop_4{left:17%; top:73%; width:240px;}

#infobulle_future_crop_1.infobulle_future .fleche, #infobulle_future_crop_2.infobulle_future .fleche, #infobulle_future_crop_3.infobulle_future .fleche, #infobulle_future_crop_4.infobulle_future .fleche{ bottom:none; top:40%; background:url("../img/fleche_infobulle_haut.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); right:-20px; left:auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform:rotate(90deg);
}

#infobulle_future_permafrost_1{left:13%; top:40%; width:230px;}
#infobulle_future_permafrost_2{left:13%; top:40%; width:230px;}
#infobulle_future_permafrost_3{left:13%; top:40%; width:230px;}
#infobulle_future_permafrost_4{left:13%; top:40%; width:230px;}

#infobulle_future_biodiversity_1{left:41.5%; top:40%; width:200px;}
#infobulle_future_biodiversity_2{left:41.5%; top:40%; width:200px;}
#infobulle_future_biodiversity_3{left:41.5%; top:40%; width:200px;}
#infobulle_future_biodiversity_4{left:41.5%; top:40%; width:200px;}

#infobulle_future_hurricane_1{right:3%; top:19%; width:175px;}
#infobulle_future_hurricane_2{right:3%; top:19%; width:175px;}
#infobulle_future_hurricane_3{right:3%; top:19%; width:175px;}
#infobulle_future_hurricane_4{right:3%; top:19%; width:175px;}

#infobulle_future_warm_1{left:12%; bottom:14%; width: 190px;}
#infobulle_future_warm_2{left:12%; bottom:14%; width: 190px;}
#infobulle_future_warm_3{left:12%; bottom:14%; width: 190px;}
#infobulle_future_warm_4{left:12%; bottom:14%; width: 190px;}

#infobulle_future_rain_1{left:42%; top:50%;}
#infobulle_future_rain_2{left:42%; top:50%;}
#infobulle_future_rain_3{left:42%; top:50%;}
#infobulle_future_rain_4{left:42%; top:50%;}

#legend_horiz_bar1_f{left:0; top:188px;}
#legend_horiz_bar2_f{left:0; top:176px;}

#legend_ord_0_f{left:-20px; top:195px;}
#legend_ord_1_f{left:-30px; top:183px;}
#legend_ord_2_f{left:-30px; top:170px;}

.legend_abs_f{ top:212px;}

#legend_abs_1_1_f{left:-22px;}#legend_abs_1_2_f{left:10%;}#legend_abs_1_3_f{left:20%;}#legend_abs_1_4_f{left:30%;}#legend_abs_1_5_f{left:40%;}#legend_abs_1_6_f{left:50%;}#legend_abs_1_7_f{left:60%;}#legend_abs_1_8_f{left:70%;}#legend_abs_1_9_f{left:80%;}#legend_abs_1_10_f{left:90%;}#legend_abs_1_11_f{left:94%;} #legend_abs_1_12_f{left:97.5%;}