html, body { margin:0; width:100%; font-family:'Roboto Condensed', sans-serif; height:100%; /*background:url('imgs/bg-ga/GA_ES1.jpg') no-repeat; */ background-position:fixed; }

body.fullbg { background:no-repeat #000 top center fixed; background-size:cover; padding-bottom:40px;}

#wrapper { height:100%; position:relative; }
#wrapper, #header { width:100%; min-width:100%; }
#header { position:relative; z-index:1000; }

#top { width:100%; text-align:center; background-color:#000; padding:18px 0 16px 0; }
#top .logo { margin-left:251px; }
#social { width:251px; float:right; margin-top:5px; }
#social a { display:block; float:left; margin-right:32px; }
#social span { margin-top:15px; background:url('imgs/sprite-social.png') 0 0; height:14px; width:15px; display:block; }
#social span.twitter { background-position:-42px 0; }
#social span.vimeo { background-position:-88px 0; }
#top:after { content:''; clear:both; display:block;}

#back { display:none; }

#menu { text-align:center; background:url('imgs/bg-menu.png') repeat-x; }
.blackbg #menu { text-align:center; /*background:#fff url('imgs/bg-menu-blk.png') repeat; */}
#menuwrap { margin:0 auto; display:block; width:1440px; height:137px; max-width:100%; }
#menu div.item { float:left; height:137px; }
#menu div.item div { background:url('imgs/sprite-menu.png') 0 0 no-repeat; height:73px; width:120px; padding-top:14px; }
#menu div.item.at div { background-position:0px 0;}
#menu div.item.pb div { background-position:-120px 0;}
#menu div.item.ga div { background-position:-240px 0;}
#menu div.item.rt div { background-position:-360px 0;}
#menu div.item.tp div { background-position:-480px 0;}
#menu div.item.es div { background-position:-600px 0;}
#menu div.item.sdg div { background-position:-720px 0;}
#menu div.item.lp div { background-position:-840px 0;}
#menu div.item.vf div { background-position:-960px 0;}
#menu div.item.sf div { background-position:-1080px 0;}
#menu div.item.ep div { background-position:-1200px 0;} 
#menu div.item.as div { background-position:-1320px 0;}

#menu div.active.item.at div, #menu div.item.at:hover div { background-position:0px -100px; background-color:#000;}
#menu div.active.item.pb div, #menu div.item.pb:hover div { background-position:-120px -100px; background-color:#000;}
#menu div.active.item.ga div, #menu div.item.ga:hover div { background-position:-240px -100px; background-color:#000;}
#menu div.active.item.rt div, #menu div.item.rt:hover div { background-position:-360px -100px; background-color:#000;}
#menu div.active.item.tp div, #menu div.item.tp:hover div { background-position:-480px -100px; background-color:#000;}
#menu div.active.item.es div, #menu div.item.es:hover div { background-position:-600px -100px; background-color:#000;}
#menu div.active.item.sdg div, #menu div.item.sdg:hover div { background-position:-720px -100px; background-color:#000;}
#menu div.active.item.lp div, #menu div.item.lp:hover div { background-position:-840px -100px; background-color:#000;}
#menu div.active.item.vf div, #menu div.item.vf:hover div { background-position:-960px -100px; background-color:#000;}
#menu div.active.item.sf div, #menu div.item.sf:hover div { background-position:-1080px -100px; background-color:#000;}
#menu div.active.item.ep div, #menu div.item.ep:hover div { background-position:-1200px -100px; background-color:#000;}
#menu div.active.item.as div, #menu div.item.as:hover div { background-position:-1320px -100px; background-color:#000;}

#menu div.item a { text-decoration:none; }

#menu div.item a span.wraptxt { background-color:transparent; width:110px; height:40px; padding:5px; display:block; position:relative; z-index:100;}
#menu div.item a span.wraptxt span { display:none; }
#menu div.item.active a span.wraptxt, #menu div.item a:hover span.wraptxt { background-color:#000; }
#menu div.item.active a span.wraptxt span, #menu div.item a:hover span.wraptxt span { text-transform:uppercase; color:#fff; font-family:'Roboto Condensed', sans-serif; font-size:14px; display:inline; }

#menu:after { content:''; clear:both; display:block;}

/*.blackbg #contentWrapper { margin-top:40px; }*/
#contentWrapper { position:relative; }
#contentWrapper:after { content:''; clear:both; display:block;}
.page-container { margin:0 auto; width:1440px; }
.gaintro { margin:0 auto 40px auto !important; width:1440px; display:block;}
.page-container#athome { margin:0 auto; width:100%; }


.blackbg { background-color:#000; }
.clear:after, .content:after { content:''; clear:both; display:block;}

.homeIntro { color:#fff; background:rgba(0, 0, 0, 0.6); padding:14px; font-size:14px; margin:0px 40px 40px 40px; -moz-border-radius:10px; border-radius:10px; text-align:left; line-height:1em; }
.homeIntro span { color:#56d1ff; }
.homeIntro:before { content:''; clear:both; display:block;}
.homeIntro a { color:#56d1ff; }

#homewrapper { margin:0 auto; width:719px; border:1px solid #00aeef; background:url('imgs/bg-transp.png') repeat; color:#fff; font-size:16px; }
#homewrapper div { padding:20px 40px; }
#homewrapper div.bwsp { padding:20px 40px 0 40px;; }
#homewrapper p { margin:20px 0; }
.source { color:#56d1ff; font-size:14px; }
.source a { color:#56d1ff !important;}
#homewrapper a { color:#fff; }



#videowrapper { margin:0 auto; width:1272px; }
.videoHolder { float:left; width:300px; margin:0 24px 40px 0; background:url('imgs/bg-transp.png') repeat; min-height:340px; }
.videoHolder:last-child { margin-right:0; }
.videoHolder iframe { height:168px; border-bottom:2px solid #bababa; }
.videoHolder h2 { color:#56d1ff; padding:20px; font-size:16px; margin:0; }
.videoHolder p { color:#fff; font-size:13px; padding:0 20px 20px 20px; margin:0; }
.videoHolder.vimeo1 { border-top:3px solid #4d8714; border-bottom:1px solid #4d8714; }
.videoHolder.vimeo2 { border-top:3px solid #0070b1; border-bottom:1px solid #0070b1; }
.videoHolder.vimeo3 { border-top:3px solid #d5aa00; border-bottom:1px solid #d5aa00; }
.videoHolder.vimeo4 { border-top:3px solid #c20000; border-bottom:1px solid #c20000; }

#gahome { width:1600px; }
#gahome .setrends { float:left; background:url('imgs/bg-ga-se-lrg.png') no-repeat center top; padding:60px 0 60px 20px; width:745px; }
#gahome .estrends { float:right; background:url('imgs/bg-ga-es-lrg.png') no-repeat center top; padding:60px 0px 60px 20px; width:745px; }
#gahome img { margin:8px 0; border:0; }


#pbhome .content, #sdghome .content { text-align:center; /*margin-top:40px;*/ }
#vfhome { height:100%; position:relative; max-height:100%; }

/*#pbhome .sliderzone { background-color:#000; border:1px solid #fff; margin:-100px auto 0 auto; width:800px; padding:10px; color:#fff; text-align:left;}  
#pbhome .sliderzone span.txt { padding:0 82px 0 29px; }
#pbhome .sliderzone span.txt5 { padding:0 0px 0 29px; }
#pbhome .sliderzone span.txt.on { color:#fe8a00; }
#pbhome .sliderdiv { width:750px; margin:10px auto; }*/

/*#pbhome #pbselectperiod { width:464px; margin:0 auto; background:rgba(0, 0, 0, 0.6); color:#fff; padding:20px;}
#pbhome #pbselectperiod:after { content:''; clear:both; display:block;}
#pbhome #pbselectperiod span { display:block; width:92px; float:left; text-align:center; text-transform:uppercase;}
#pbhome #pbselectperiod span span { 
    background-color: #fff;
    border: 2px solid #000;
    height:40px;
    width:40px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
    display:block; 
    margin:0 0 10px 24px; 
}
#pbhome #pbselectperiod span.on span { background-color:#f49011; }*/

#pbhome #pbselectperiod { position:relative; z-index:100; width:855px; height:67px; margin:-60px auto 20px auto; background:url('imgs/pb-bg-slider.png') no-repeat top center; color:#fff; padding:16px 20px; text-align:center;} 
#pbhome #pbselectperiod:after { content:''; clear:both; display:block;}
#pbhome #pbselectperiod span { display:block; width:100px; float:left; text-align:center; text-transform:uppercase; font-size:13px; }
#pbhome #pbselectperiod span span { 
    background-color: #fff;
    border: 2px solid #000;
    height:34px;
    width:34px;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    display:block; 
    margin:0 31px 10px 31px; 
}
#pbhome #pbselectperiod span.on span { background-color:#f49011; } 

#pbhome #pbselectperiod div { width:500px; margin:0 187px; }



.morecontent { float:left; /*width:400px;*/ display:none; }
/*.morecontent img { margin-top:40px; }*/
.morecontent a.linkkm { float:left; width:178px; margin:-40px 0 0 40px; text-decoration:none; font-size:12px; }
.morecontent a.linkkm img { height:205px; width:178px; border:1px solid #878787; border-top:0; }
.morecontent a.linkkm span { background:url('imgs/bg-transp.png') repeat; margin:0; display:block; padding:4px 0; color:#fff; text-decoration:none; text-align:center; border:1px solid #878787; width:178px;}

body.ga .morecontent, body.pb .morecontent { /*width:400px;*/ display:inline; max-width:50%;}
.morecontent img { margin:0 0 40px 40px; float:left; display:inline;}


.content.km { margin:0px; float:right; width:493px; max-width:493px; color:#00aeef; background-image: url('imgs/bg-content.png'); background-position: left top; background-repeat: repeat; padding:20px; font-size:20px; line-height:1.5em; overflow-y:auto; padding-bottom:0px; }
.content.km p { font-size:17px; line-height:1.5em; margin:20px 0;}
.content.km.first { margin:0 0 0 814px; float:left; padding-left:40px; width:473px; }
.content.km.second { margin-left:-1px; float:left; }
.content.km a { color:#fff; }
.content.km.short { height:500px !important; margin-bottom:390px;}
.content.km h2 { color:#fff; font-size:22px; text-transform:uppercase; font-weight:bold; line-height:1em; margin:26px 0;}
h3 { color:#ff6600; font-size:22px; text-transform:uppercase; font-weight:normal; margin-top:0; }
.content.km .unit { text-transform:uppercase; }
.content.km .unit span { text-transform:none; color:#fff; }
.content.km .sources { font-size:12px; color:#fff; }
.content.km .sources span { text-transform:uppercase; }
.content.km .sources a { color:#fff; }
.content.km .caption { color:#fff; padding:26px 20px; font-size:14px; margin:52px -20px 0px -20px; border-top:1px solid #00aeef; line-height:1.5em; }
.content.km .caption span { color:#00aeef; text-transform:uppercase; font-weight:bold; }

.content.km .navkm { padding-bottom:26px; border-bottom:1px solid #00aeef; margin:-20px -20px 26px -20px; }
.content.km .navkm .navkmwrap { width:263px; margin:0 auto; }
.content.km .navkm .arrow { padding-top:2px; }
.sdg .content.km .navkm .arrow, .rt .content.km .navkm .arrow, .tp .content.km .navkm .arrow, .es .content.km .navkm .arrow, .pb .content.km .navkm .arrow { padding-top:6px; }
.lp .content.km .navkm .arrow { padding-top:18px; }
.content.km .navkm img { border:0; }
.content.km .navkm .circle { display:block; background:url('imgs/circle.png') no-repeat center top; color:#fff; width:95px; height:65px; text-align:center; margin:-10px auto 0 auto; padding-top:30px; font-size:27px; }
.content.km .navkm .xclose { width:15px; height:15px; margin:12px 0 0 12px; background:url('imgs/close.png') no-repeat; cursor:pointer; }
.content.km .navkm a.grid { width:114px; height:54px; float:left; margin-left:48px; }
.content.km .navkm span.grid { display:block; background:url('imgs/ico-grid.png') no-repeat center bottom; width:114px; height:54px; padding-top:0px;}

.content.km .navkm a.ico { width:70px; height:70px; float:left; margin-left:70px; }
.content.km .navkm span.ico { display:block; float:left; background:url('imgs/pb-ico-1.png') no-repeat center bottom; width:70px; height:70px; margin-top:-6px;}
.content.km .navkm span.ico.pb1 { background-image:url('imgs/pb-ico-1.png'); } 
.content.km .navkm span.ico.pb2 { background-image:url('imgs/pb-ico-2.png'); }
.content.km .navkm span.ico.pb3 { background-image:url('imgs/pb-ico-3.png'); }
.content.km .navkm span.ico.pb4 { background-image:url('imgs/pb-ico-4.png'); }
.content.km .navkm span.ico.pb5 { background-image:url('imgs/pb-ico-5.png'); }
.content.km .navkm span.ico.pb6 { background-image:url('imgs/pb-ico-6.png'); }
.content.km .navkm span.ico.pb7 { background-image:url('imgs/pb-ico-7.png'); }
.content.km .navkm span.ico.pb8 { background-image:url('imgs/pb-ico-8.png'); }
.content.km .navkm span.ico.pb9 { background-image:url('imgs/pb-ico-9.png'); } 

.content.km .navkm span.ico.es1 { background-image:url('imgs/bg-es/1.png'); } 
.content.km .navkm span.ico.es2 { background-image:url('imgs/bg-es/2.png'); }
.content.km .navkm span.ico.es3 { background-image:url('imgs/bg-es/3.png'); }
.content.km .navkm span.ico.es4 { background-image:url('imgs/bg-es/4.png'); }
.content.km .navkm span.ico.es5 { background-image:url('imgs/bg-es/5.png'); }
.content.km .navkm span.ico.es6 { background-image:url('imgs/bg-es/6.png'); }
.content.km .navkm span.ico.es7 { background-image:url('imgs/bg-es/7.png'); }
.content.km .navkm span.ico.es8 { background-image:url('imgs/bg-es/8.png'); }

.content.km .navkm span.ico.rt1 { background-image:url('imgs/bg-rt/1.png'); } 
.content.km .navkm span.ico.rt2 { background-image:url('imgs/bg-rt/2.png'); }
.content.km .navkm span.ico.rt3 { background-image:url('imgs/bg-rt/3.png'); }
.content.km .navkm span.ico.rt4 { background-image:url('imgs/bg-rt/4.png'); }
.content.km .navkm span.ico.rt5 { background-image:url('imgs/bg-rt/5.png'); }
.content.km .navkm span.ico.rt6 { background-image:url('imgs/bg-rt/6.png'); }
.content.km .navkm span.ico.rt7 { background-image:url('imgs/bg-rt/7.png'); }

.content.km .navkm span.ico.tp1 { background-image:url('imgs/bg-tp/1.png'); } 
.content.km .navkm span.ico.tp2 { background-image:url('imgs/bg-tp/2.png'); }
.content.km .navkm span.ico.tp3 { background-image:url('imgs/bg-tp/3.png'); }
.content.km .navkm span.ico.tp4 { background-image:url('imgs/bg-tp/4.png'); }
.content.km .navkm span.ico.tp5 { background-image:url('imgs/bg-tp/5.png'); }
.content.km .navkm span.ico.tp6 { background-image:url('imgs/bg-tp/6.png'); }
.content.km .navkm span.ico.tp7 { background-image:url('imgs/bg-tp/7.png'); }
.content.km .navkm span.ico.tp8 { background-image:url('imgs/bg-tp/8.png'); }
.content.km .navkm span.ico.tp9 { background-image:url('imgs/bg-tp/9.png'); }

.content.km .navkm span.ico.sdg1 { background-image:url('imgs/bg-sdg/1.jpg'); } 
.content.km .navkm span.ico.sdg2 { background-image:url('imgs/bg-sdg/2.jpg'); }
.content.km .navkm span.ico.sdg3 { background-image:url('imgs/bg-sdg/3.jpg'); }
.content.km .navkm span.ico.sdg4 { background-image:url('imgs/bg-sdg/4.jpg'); }
.content.km .navkm span.ico.sdg5 { background-image:url('imgs/bg-sdg/5.jpg'); }
.content.km .navkm span.ico.sdg6 { background-image:url('imgs/bg-sdg/6.jpg'); }
.content.km .navkm span.ico.sdg7 { background-image:url('imgs/bg-sdg/7.jpg'); }
.content.km .navkm span.ico.sdg8 { background-image:url('imgs/bg-sdg/8.jpg'); }
.content.km .navkm span.ico.sdg9 { background-image:url('imgs/bg-sdg/9.jpg'); }
.content.km .navkm span.ico.sdg10 { background-image:url('imgs/bg-sdg/10.jpg'); }
.content.km .navkm span.ico.sdg11 { background-image:url('imgs/bg-sdg/11.jpg'); } 
.content.km .navkm span.ico.sdg12 { background-image:url('imgs/bg-sdg/12.jpg'); }
.content.km .navkm span.ico.sdg13 { background-image:url('imgs/bg-sdg/13.jpg'); }
.content.km .navkm span.ico.sdg14 { background-image:url('imgs/bg-sdg/14.jpg'); }
.content.km .navkm span.ico.sdg15 { background-image:url('imgs/bg-sdg/15.jpg'); }
.content.km .navkm span.ico.sdg16 { background-image:url('imgs/bg-sdg/16.jpg'); }
.content.km .navkm span.ico.sdg17 { background-image:url('imgs/bg-sdg/17.jpg'); }

#closedcontent { display:none; }
#closedcontent { background-image: url('imgs/bg-content.png'); float:right; }
#closedcontent div { background:url('imgs/open.png') no-repeat; margin:10px; width:69px; height:18px; }

div.infoBox { opacity:1 !important; background-color:#000 !important; color:#fff; padding:10px; border:1px solid #666; }
div.infoBox h2 { color:#56d1ff; margin-top:4px; }
div.infoBox img.ico { width:200px; margin-top:-14px; }
div.infoBox a { color:#fff; }


#timeline-embed * { color:#fff; text-shadow:none; }
#timeline-embed, .tl-slider-container-mask { background:url('imgs/bg-timeline-sml.jpg') repeat-x #1c1c1c center left; color:#fff; }
.tl-slidenav-content-container .tl-slidenav-title { color:#fff; }
.tl-slidenav-previous .tl-slidenav-title, .tl-slidenav-next .tl-slidenav-title, .tl-slidenav-previous .tl-slidenav-description, .tl-slidenav-next .tl-slidenav-description { filter: alpha(opacity=85); -khtml-opacity: .85; -moz-opacity: .85; opacity: .85; }

#timeline-embed .tl-timenav * { color:#000; }
#timeline-embed .tl-timenav { background-color:#aaa; }
#timeline-embed .tl-menubar-button { color:#000; }

#homewrapper.about h3 { font-size:16px; margin:40px 0 0 0px; }
#homewrapper.about .logos { padding:0; margin-bottom:20px;}
.about .logos img { float:left; padding:20px 10px 0px 0; max-height:37px; }
.about .logos:after { content:''; clear:both; display:block;}

.home-row { text-align:center; margin:20px auto; color:#fff; text-shadow: 0px 0px 7px rgba(0, 0, 0, 1); width:auto;}
.home-row:after { content:''; clear:both; display:block;}
.home-row .item { text-align:center; width:200px; display:inline-block; padding:20px; }
.home-row .item img { display:block; margin:0 auto; padding-bottom:6px;}
.home-row a { color:#fff; text-decoration:none; }

#sdghome .home-row .item { text-align:center; width:163px; display:inline-block; padding:10px; }
#sdghome .home-row .item img { padding-bottom:0px;}

.left { float:left; }
.right { float:right; } 



/* VERSIONS MOBILES */

@media screen and (min-width: 1600px) {
    #menu { text-align:center; background:url('imgs/bg-menu.png') repeat-x; }
    .blackbg #menu { text-align:center; /*background:#fff url('imgs/bg-menu-blk.png') repeat; */}
    #menuwrap { margin:0 auto; display:block; width:1440px; height:137px; max-width:100%; }
    #menu div.item { float:left; height:137px; }
    #menu div.item div { background:url('imgs/sprite-menu.png') 0 0 no-repeat; height:73px; width:120px; padding:0px 0px 15px 0; margin-top:-5px;}

    #menu div.item a span.wraptxt { background-color:transparent; width:110px; height:40px; padding:10px 5px 5px 5px; display:block; position:relative; z-index:100;}
}

/* Tous les écrans plus petits que 1600px (GA accueil) */
@media screen and (max-width: 1600px) {
    #gahome { width:1090px; }
    #gahome .setrends { float:left; background:url('imgs/bg-ga-se.png') no-repeat center top; padding:60px 0 60px 20px; width:520px; }
    #gahome .estrends { float:right; background:url('imgs/bg-ga-es.png') no-repeat center top; padding:60px 0px 60px 20px; width:520px; }
    #gahome img { margin:8px 0; border:0; width:160px; height:119px;}
}

/* Tous les écrans plus petits que 1455px */
@media screen and /*(min-width: 1010px) and*/ (max-width: 1455px) {
    #menu { background:url('imgs/bg-menu1007.png') repeat-x; }
    #menuwrap { width:1010px; height:100px; }
    #menu div.item { height:100px; }
    #menu div.item div { background:url('imgs/sprite-menu1007.png') 0 0 no-repeat; height:51px; width:84px; padding-top:7px; }
    #menu div.item a span.wraptxt { width:80px; height:26px; padding:8px 2px; }
    #menu div.item.active a span.wraptxt span, #menu div.item a:hover span.wraptxt span { font-size:10px; }
    
    #menu div.item.at div { background-position:0px -4px;}
    #menu div.item.pb div { background-position:-84px -4px;}
    #menu div.item.ga div { background-position:-168px -4px;}
    #menu div.item.rt div { background-position:-252px -4px;}
    #menu div.item.tp div { background-position:-336px -4px;}
    #menu div.item.es div { background-position:-420px -4px;}
    #menu div.item.sdg div { background-position:-504px -4px;}
    #menu div.item.lp div { background-position:-588px -4px;}
    #menu div.item.vf div { background-position:-672px -4px;}
    #menu div.item.sf div { background-position:-756px -4px;}
    #menu div.item.ep div { background-position:-840px -4px;} 
    #menu div.item.as div { background-position:-924px -4px;}

    #menu div.active.item.at div, #menu div.item.at:hover div { background-position:0px -74px; background-color:#000;}
    #menu div.active.item.pb div, #menu div.item.pb:hover div { background-position:-84px -74px; background-color:#000;}
    #menu div.active.item.ga div, #menu div.item.ga:hover div { background-position:-168px -74px; background-color:#000;}
    #menu div.active.item.rt div, #menu div.item.rt:hover div { background-position:-252px -74px; background-color:#000;}
    #menu div.active.item.tp div, #menu div.item.tp:hover div { background-position:-336px -74px; background-color:#000;}
    #menu div.active.item.es div, #menu div.item.es:hover div { background-position:-420px -74px; background-color:#000;}
    #menu div.active.item.sdg div, #menu div.item.sdg:hover div { background-position:-504px -74px; background-color:#000;}
    #menu div.active.item.lp div, #menu div.item.lp:hover div { background-position:-588px -74px; background-color:#000;}
    #menu div.active.item.vf div, #menu div.item.vf:hover div { background-position:-672px -74px; background-color:#000;}
    #menu div.active.item.sf div, #menu div.item.sf:hover div { background-position:-756px -74px; background-color:#000;}
    #menu div.active.item.ep div, #menu div.item.ep:hover div { background-position:-840px -74px; background-color:#000;}
    #menu div.active.item.as div, #menu div.item.as:hover div { background-position:-924px -74px; background-color:#000;}

    .page-container, .gaintro { width:auto; }
    .gaintro { margin:0 40px 40px 40px !important; }
    .home-row { display:inline; text-align:left; }
    .home-row:after { content:''; clear:none; display:none;}
    
    #homewrapper { margin-top:10px; }
    .homeIntro { margin-top:10px; } 
}

/* Tous les écrans entre 624px et 1272px (vidéos accueil, 2 cols) */
@media screen and (min-width : 624px) and (max-width : 1272px) {
    #videowrapper { margin:0 auto; width:624px; display:block; }
    .videoHolder { float:left; width:300px; margin:0 24px 40px 0; background:url('imgs/bg-transp.png') repeat; min-height:340px; }
    .videoHolder:last-child, .videoHolder:nth-child(2) { margin-right:0; }
}


/* Tous les écrans plus petits que 1090px (GA accueil) */
@media screen and (max-width: 1090px) {
    #gahome { width:745px; }
    #gahome .setrends { float:none; background:url('imgs/bg-ga-se-lrg.png') no-repeat center top; padding:60px 0 60px 20px; width:745px; }
    #gahome .estrends { float:none; background:url('imgs/bg-ga-es-lrg.png') no-repeat center top; padding:60px 0px 60px 20px; width:745px; }
    #gahome img { margin:8px 0; border:0; width:230px; height:172px; }
}

/* Tous les écrans entre 300px et 1024px */
@media screen and (min-width : 300px) and (max-width : 1024px) {
    #menu div.item a span.wraptxt span { display:block; text-transform:uppercase; color:#fff; font-family:'Roboto Condensed', sans-serif; font-size:10px; display:inline; }
    #menu, .blackbg #menu { text-align:center; background:url('imgs/bg-menu-mobile.png') repeat; margin-bottom:40px; padding-bottom:10px;}
    .content.km { margin:25px auto; float:none; width:auto; }
    .page-container { width:100%; }
    
    #pbhome #pbselectperiod { width:300px; margin:0 auto; background:rgba(0, 0, 0, 0.6); color:#fff; padding:20px;}
    #pbhome #pbselectperiod:after { content:''; clear:both; display:block;}
    #pbhome #pbselectperiod span { display:block; width:60px; float:left; text-align:center; text-transform:uppercase;}
    #pbhome #pbselectperiod span span { 
        background-color: #fff;
        border: 2px solid #000;
        height:20px;
        width:20px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        display:block; 
        margin:0 0 4px 18px; 
    }
    #pbmainimg, #ImageMap-pbmainimg { zoom:50%; }
    #pbhome #pbselectperiod div { width:auto; margin:0; }
    
}

/* Tous les écrans entre 504px et 1007px */
@media screen and (min-width : 504px) and (max-width : 1007px) {
    #menu { padding-bottom:0; }
    #menu #menuwrap { width:504px; margin:0 auto; height:200px;}
    #top .logo { margin-left:0; }
    #social { float:none; margin:20px auto; width:109px; }
    #social a:last-child { margin-right:0; }
}
    

@media screen and (max-width : 624px) /*(vidéos accueil, 1 col)*/ {
    #videowrapper { width:300px; }
    .videoHolder { float:none; width:300px; margin:0 0 40px 0; min-height:0; }
}

/* Tous les écrans plus petits que 745px (GA accueil ET homepage) */
@media screen and (max-width: 745px) /*(GA accueil)*/ {
    #gahome { width:540px; }
    #gahome .setrends { float:none; background:url('imgs/bg-ga-se.png') no-repeat center top; padding:60px 0 60px 20px; width:520px; }
    #gahome .estrends { float:none; background:url('imgs/bg-ga-es.png') no-repeat center top; padding:60px 0px 60px 20px; width:520px; }
    #gahome img { margin:8px 0; border:0; width:160px; height:119px;}
    
    #homewrapper { margin:0 5%; width:90%; }
    #homewrapper img { max-width:100%; }
}

@media screen and (max-width : 540px) /*(GA accueil)*/ {
    #gahome { width:300px; }
    #gahome .setrends { float:none; background:url('imgs/ttl-socio-economic-trends.png') no-repeat center top; padding:60px 0 60px 0px; width:300px; margin:0 auto; }
    #gahome .estrends { float:none; background:url('imgs/ttl-earth-system-trends.png') no-repeat center top; padding:60px 0px 60px 0px; width:300px; margin:0 auto; }
    #gahome img { margin:8px 0; border:0; width:140px; height:104px;}
}

@media screen and (max-width : 503px) {
    #menu { padding-bottom:0; }
    #menu #menuwrap { width:340px; margin:0 auto; height:200px;}
    #top .logo { margin-left:0; }
    #social { float:none; margin:20px auto; text-align:center; width:109px;}
    #social a:last-child { margin-right:0; }
    
    .content.km { margin:25px; font-size:16px; }
    /*.content.km .navkm .xclose { background-image:none; cursor:default;  } */
    
    #home #map_canvas { display:none; }
    #home { background:url('imgs/Background_Mobile_0.jpg') no-repeat #000 fixed; background-size:cover; }
    
    #pbhome #pbselectperiod { width:280px; margin:0 auto; background:rgba(0, 0, 0, 0.6); color:#fff; padding:20px; font-size:10px;}
    #pbhome #pbselectperiod:after { content:''; clear:both; display:block;}
    #pbhome #pbselectperiod span { display:block; width:56px; float:left; text-align:center; text-transform:uppercase;}
    #pbhome #pbselectperiod span span { 
        background-color: #fff;
        border: 2px solid #000;
        height:20px;
        width:20px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        display:block; 
        margin:0 0 0 16px; 
    }
    #pbmainimg, #ImageMap-pbmainimg { zoom:35%; }
    
    /*#supersized img { min-height:1000px; }*/
    
    /*#supersized { background-color:#000; }
    #supersized img { }*/
    
    #explore #menu { display:none; }
    #explore #social { display:none; }
    #explore .homeIntro { display:none; }
    #explore #back { display:block; float:none; margin:10px auto; text-align:center; width:109px;}
    #explore #back a { color:#00aeef; text-decoration:none; font-weight:bold; }
    
    .bwsp img { float:none !important; }
    
    .homeIntro { min-height:12px; }
    .homeIntro .txt { visibility:hidden; height:0; }
    .homeIntro .txt:before { content:'Read intro'; color:#56d1ff; text-decoration:underline; text-align:center; cursor:pointer; visibility:visible; display:block; }
    .homeIntro.show .close:before { content:'Close'; color:#56d1ff; text-decoration:underline; text-align:center; cursor:pointer; visibility:visible; display:block; padding-top:8px; }
    
    .homeIntro.show .txt { visibility:visible; height:auto; }
    .homeIntro.show .txt:before { content:''; display:none; visibility:hidden; }
    
    .morecontent { margin-top:500px; position:absolute; }
    .morecontent:after { clear:both; content:''; display:block; }
}