@import url(https://fonts.googleapis.com/css?family=Lato:400,700,300);

/* HARD FIX DESKTOP */
.layout--full.article--video .infography-hydrocarbures-nn ul:not(.pane-selectors) li {
	width: auto;
	padding: 0;
}

.infography-hydrocarbures-nn .second-filter-level label {
	float:none;
	color: white;
}

/* DESKTOP */
/* general */
#gazoduc-juin .clearBoth {
    clear: both !important;
}
#gazoduc-juin .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
#gazoduc-juin .clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
#gazoduc-juin .clearfix { display: block; }
/* close commented backslash hack */

/* Infographie */
#gazoduc-juin {
    width: 900px;
    background-color: #fff;
    font-family: Lato;
    font-weight: 400;
    margin: 0 auto;
    color: #515253;
    box-sizing: border-box;
}

#gazoduc-juin .pp-title {
    background: #77478d;
    color: #fff;
    font-size: 21px;
    line-height: 50px;
    padding-left: 40px;
    margin: 0;
    font-family: Lato;
    font-weight: 700;
}

#gazoduc-juin .footer {
    padding: 23px 25px 22px 20px;
    margin-top: 0;
}

#gazoduc-juin .source {
    font-family: Lato, Helvetica, Arial;
    font-weight: 400;
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: #515253;
    max-width: 70%;
    float: left;
}

#gazoduc-juin .copyright {
    font-family: Lato, Helvetica, Arial;
    font-weight: 400;
    font-size: 14px;
    padding: 0;
    margin: 0;
    color: #737373;
    max-width: 30%;
    float: right;
}

#gazoduc-juin .visuels {
    position: relative;
    width: 900px;
    height: 720px;
    overflow: hidden;
}

#gazoduc-juin .visuels .legende {
    position: absolute;
    bottom: 0;
    left:0;
    z-index: 10;
}

#gazoduc-juin .gazo-item {
    position: absolute;
    top: 0; left: 0;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#gazoduc-juin .gazo-item-labels {
    z-index: 4;
}

#gazoduc-juin .gazo-item.gazo-item-labels {
    z-index: 3;
}

#gazoduc-juin .gazo-item .trait, #gazoduc-juin .gazo-item .trait-h  {
    z-index: 2;
}

#gazoduc-juin .fond_map {
    display: block;
    z-index: 1;
}

#gazoduc-juin .map-legend {
    z-index: 3;
}

#gazoduc-juin .gazo-item.actif {
    display: block;
}

#gazoduc-juin .gazo-item-in, #gazoduc-juin .gazo-item-in * {
    position: absolute;
    top: 0;
    left: 0;
}

#gazoduc-juin .label:hover {
    cursor: pointer;
}

#gazoduc-juin .label.item-hover:hover {
    opacity: 1;
}

#gazoduc-juin .label:hover + .label.item-hover {
    opacity: 1;
}

#gazoduc-juin .gazo-item-in .item-hover {
    opacity: 0;
    transition: all .2s ease-out;
}

/*#gazoduc-juin .gazo-item .gazo-item-in:hover .item-hover {
    opacity: 1;
}*/








#gazoduc-juin .gazo-item .gazo-item-in.northStream {
    top: 41.2%;
    left: 23.5%;
}

#gazoduc-juin .gazo-item-in.northStream .label {
    top: 275px;
    left: 210px;
}

#gazoduc-juin .gazo-item .gazo-item-in.yamal {
    top: 9.5%;
    left: 24%;
}

#gazoduc-juin .gazo-item-in.yamal .label {
    top: 245px;
    left: 500px;
}

#gazoduc-juin .gazo-item .gazo-item-in.brotherhood {
    top: 19%;
    left: 21%;
}

#gazoduc-juin .gazo-item-in.brotherhood .label.brotherhoodTxt {
    top: 350px;
    left: 620px;
}

#gazoduc-juin .gazo-item-in.brotherhood .label.soyouzTxt {
    top: 460px;
    left: 420px;
}

#gazoduc-juin .gazo-item-in.brotherhood .label.asieCentrale {
    top: 515px;
    left: 705px;
}

#gazoduc-juin .gazo-item .gazo-item-in.blueStream {
    top: 61.5%;
    left: 50.5%;
}

#gazoduc-juin .gazo-item-in.blueStream .label {
    top: 405px;
    left: 578px;
}

#gazoduc-juin .gazo-item .gazo-item-in.SCP {
    top: 83.5%;
    left: 62.5%;
}

#gazoduc-juin .gazo-item-in.SCP .label {
    top: 580px;
    left: 641px;
}

#gazoduc-juin .gazo-item .gazo-item-in.nabucco {
    top: 68%;
    left: 22%;
}

#gazoduc-juin .gazo-item-in.nabucco .label {
    top: 10px;
    left: 150px;
}

#gazoduc-juin .gazo-item .gazo-item-in.southStream {
    top: 64.5%;
    left: 23%;
}

#gazoduc-juin .gazo-item-in.southStream .label {
    top: 16px;
    left: 338px;
}

#gazoduc-juin .gazo-item .gazo-item-in.turkStream {
    top: 78%;
    left: 40.5%;
}

#gazoduc-juin .gazo-item-in.turkStream .label {
    top: -35px;
    left: 150px;
    width: 111px;
}

#gazoduc-juin .gazo-item .gazo-item-in.TAP {
    top: 84%;
    left: 31%;
}

#gazoduc-juin .gazo-item-in.TAP .label {
    top: 30px;
    left: -35px;
}

#gazoduc-juin .gazo-item .gazo-item-in.TANAP {
    top: 83.5%;
    left: 42%;
}

#gazoduc-juin .gazo-item-in.TANAP .label {
    top: 55px;
    left: 100px;
}








#gazoduc-juin .desc-template {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 15;
}

#gazoduc-juin .desc-template h3 {
    margin-bottom: 10px;
    font-weight: 400;
    font-size: 18px;
    padding-left: 0;
}

#gazoduc-juin .desc-template .goBack {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 16;
    background: #FFFFFF;
    padding: 20px;
    color: #94adca;
    font-size: 12px;
    text-transform: uppercase;
    cursor: pointer;
}

#gazoduc-juin .desc-template .goBack .arrow-retour {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

#gazoduc-juin .desc-template .desc-img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
}

#gazoduc-juin .desc-template .desc-txt{
    display: block;
    z-index: 17;
    background: white;
    position: absolute;
    top: 0;
    right: 0;
    width: 30%;
    height: 100%;
    padding: 30px;
    line-height: 1.5em;
    overflow: auto;
}

#gazoduc-juin .desc-template .desc-txt .subtitle {
    font-weight: 300;
    text-transform: uppercase;
    font-size: 1em;
}

#gazoduc-juin .desc-template .desc-txt .content {
    padding-top: 25px;
    padding-bottom: 25px;
}

#gazoduc-juin .gazo-item.gazo-actif, #gazoduc-juin .gazo-item.gazo-proj {
    display: block;
}

#gazoduc-juin .slide-title {
    padding: 0 0 0 25px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding-top: 40px;
    z-index: 1;
    font-size: 25px;
    font-family: Lato;
    font-weight: 300;
    color: #474747;
    text-align: center;
    font-weight: normal !important;
}

#gazoduc-juin .filter_button {
    position: absolute;
    z-index: 14;
    top: 0;
    right: 0;
    background: #fff;
    padding: 0px 40px;
    height: 67px;
    line-height: 65px;
    font-size: 12px;
    font-family: Lato;
    font-weight: 700;
    cursor: pointer;
}

#gazoduc-juin .filter_button .icon {
    background: url(./img/filter_btn.png) no-repeat 0 -30px;
    margin-top: 25px;
    display: inline-block;
    float: left;
    padding-right: 10px;
    height: 20px;
    width: 20px;
}

#gazoduc-juin .filter_button.opened .icon {
    background: url(./img/filter_btn.png) no-repeat;
    margin-top: 25px;
    display: inline-block;
    float: left;
    padding-right: 10px;
    height: 20px;
    width: 20px;
}

#gazoduc-juin aside.filters {
    display: none;
    height: 100%; /*100%*/
    position: absolute;
    z-index: 13;
    top: 0;
    right: 0;
    padding: 0px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
}

#gazoduc-juin aside.filters .container {
    width: 330px;
    overflow: hidden;
}

#gazoduc-juin  .filters .donnees-titre {
    padding-top: 90px;
    padding-bottom: 30px;
    font-size: 18px;
    font-family: Lato;
    font-weight: 400;
    padding-left: 20px;
    padding-right: 25px;
    margin: 0px;
    border-bottom: 1px solid #fff;
}

#gazoduc-juin .animation--globale .filters span {
    padding-top: 75px;
    font-size: 18px !important;
    font-family: Lato;
    font-weight: 400;
    padding-left: 20px;
    padding-right: 25px;
}

#gazoduc-juin .menu-filtres {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#gazoduc-juin .menu-filtres label:hover {
    cursor: pointer;
}

#gazoduc-juin .first-filter {
    position: relative;
    font-family: Lato;
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: #fff;
    border-bottom: 1px solid #fff;
}

#gazoduc-juin input[type=checkbox] {
    overflow: hidden;
    -webkit-appearance: none;
    background: url(./img/radio.png) no-repeat;
    height: 14px;
    width: 14px;
    outline:none;
    margin-right: 10px;
    vertical-align: middle;
}

#gazoduc-juin input[type=checkbox]:checked {
    background: url(./img/radio_on.png) no-repeat;
    outline:none;
}

#gazoduc-juin .filter-title {
    display: block;
    background: rgba(0, 0, 0, 0.3);
    font-family: Lato;
    font-weight: 400;
    text-align: left !important;
    height: 50px;
    line-height: 50px;
}

#gazoduc-juin .filter-title label {
    display: block;
    padding-left: 20px;
    color: #FFFFFF;
    float: none;
    padding-top: 0;
}

/* MOBILE */
.container_mobile * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container_mobile {
    margin: 0 auto;
}

.container_mobile .clear {
    clear: both;
    height: 0;
}

.container_mobile select {
    padding: 20px;
}
/*  Header  */

.container_mobile .header {
    text-align: left;
    height: 110px;
    background-color: #77478d;
    color: white;
    font-size: 32px;
    font-family: Lato;
    font-weight: 700;
}

.container_mobile .header .wording {
    padding-top: 23px;
    line-height: 26px;
}
/*  Footer  */

.container_mobile .footer {
    height: 94px;
    color: black;
    padding-left: 40px;
    font-size: 16px;
    font-family: Lato;
    font-weight: 400;
}

.container_mobile .footer .wording {
    padding-top: 26px;
}
/*  Page selection  */

.container_mobile .page_selection {
    background-color: #9bbadb;
    text-align: center;
    color: white;
    font-family: Lato;
    font-weight: 700;
}

.container_mobile .page_selection .wording {
    font-size: 25px;
    padding-top: 140px;
}

.container_mobile .page_selection .selection_box select {
    outline: none;
    border: none;
    color: #adadad;
    height: 80px;
    width: 440px;
    margin-top: 25px;
    font-family: Lato;
    font-weight: 700;
    font-size: 20px;
    text-transform: none !important;
}

.container_mobile .page_selection .selection_box select option {
    color: black;
    margin-left: 30px;
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
}

.container_mobile button.submit {
    text-decoration: none;
    color: white;
    height: 80px;
    width: 440px;
    line-height: 80px;
    margin: 0px auto 0 auto;
    background-color: #d10060;
    font-size: 25px;
    outline: none;
    border: none;
    box-shadow: none;
    margin-bottom: 120px;
}
/*  Retour page selection  */

.container_mobile .retour {
    color: white;
    font-size: 22px;
    padding-top: 35px;
    margin-left: 30px;
}

a {
    text-decoration: none;
}

.container_mobile .arrow {
    padding-right: 12px;
    display: inline-block;
    vertical-align: middle;
}

.container_mobile .wording_return {
    display: inline-block;
    vertical-align: middle;
}

.container_mobile .block_description .titre {
    height: 40px;
    color: white;
    background-color: #cb0079;
    line-height: 40px;
    font-family: Lato;
    font-weight: 700;
    font-size: 20px;
    padding-left: 15px;
}
/*  Page petrole lourd  */

.container_mobile .page_petrole_lourd {
    font-family: Lato;
    font-weight: 700;
}

.container_mobile .page_petrole_lourd .wording {
    text-align: center;
    margin: 0 auto;
    color: #4c595c;
    font-size: 30px;
    font-family: Lato;
    font-weight: 400;
    margin-top: 35px;
}

.container_mobile .page_petrole_lourd .block_description {
    margin-top: 240px;
    float: right;
    margin-right: 43px;
    width: 277px;
    background-color: white;
    height: 280px;
}

.container_mobile .page_petrole_lourd .block_description .description {
    padding-left: 15px;
    font-size: 19px;
    padding-top: 10px;
    color: #515253;
}

.container_mobile .page_petrole_lourd .legende {
    margin-top: 15px;
    margin-left: 113px;
}

.container_mobile .page_petrole_lourd .marge {
    height: 192px;
}
/*  Les sables bitumineux (>100m)  */

.container_mobile .page_sable_1 {
    font-family: Lato;
    font-weight: 700;
}

.container_mobile .page_sable_1 .wording {
    text-align: center;
    margin: 0 auto;
    color: #4c595c;
    font-size: 30px;
    font-family: Lato;
    font-weight: 400;
    margin-top: 35px;
}

.container_mobile .page_sable_1 .block_description {
    margin-top: 205px;
    float: right;
    margin-right: 43px;
    width: 277px;
    background-color: white;
    height: 305px;
}

.container_mobile .page_sable_1 .block_description .description {
    padding-left: 15px;
    font-size: 19px;
    padding-top: 10px;
    color: #515253;
}

.container_mobile .page_sable_1 .legende .legende_1 {
    margin-top: 23px;
    margin-left: 63px;
}

.container_mobile .page_sable_1 .legende .legende_2 {
    margin-top: 20px;
    margin-left: 152px;
}

.container_mobile .page_sable_1 .legende .legende_3 {
    margin-top: 88px;
    display: block;
    margin-left: 361px;
}

.container_mobile .page_sable_1 .legende .legende_texte {
    text-transform: uppercase;
    font-family: Lato;
    font-weight: 700;
    font-size: 16px;
    color: #827a6d;
    margin-top: 28px;
    margin-left: 11px;
}

.container_mobile .page_sable_1 .legende .legende_4 {
    margin: 0 auto;
    display: block;
    margin-top: 1px;
}

.container_mobile .page_sable_1 .marge {
    height: 22px;
}
/*  Les sables bitumineux (<100m)  */

.container_mobile .page_sable_2 {
    font-family: Lato;
    font-weight: 700;
}

.container_mobile .page_sable_2 .wording {
    text-align: center;
    margin: 0 auto;
    color: #4c595c;
    font-size: 30px;
    font-family: Lato;
    font-weight: 400;
    margin-top: 35px;
}

.container_mobile .page_sable_2 .legende_texte_1 {
    font-size: 16px;
    color: white;
    margin-top: 243px;
    margin-left: 407px;
}

.container_mobile .page_sable_2 .legende_1 {
    margin-top: 70px;
    margin-left: 244px;
}

.container_mobile .page_sable_2 .legende_texte_2 {
    color: #996a25;
    text-transform: uppercase;
    margin-top: 55px;
    margin-left: 350px;
}

.container_mobile .page_sable_2 .block_description {
    margin: 0 auto;
    margin-top: 54px;
    width: 277px;
    background-color: white;
    height: 206px;
}

.container_mobile .page_sable_2 .block_description .description {
    padding-left: 15px;
    font-size: 19px;
    padding-top: 10px;
    color: #515253;
}

.container_mobile .page_sable_2 .marge {
    height: 28px;
}
/*  Les gaz de reservoirs compacts  */

.container_mobile .page_gaz {
    font-family: Lato;
    font-weight: 700;
}

.container_mobile .page_gaz .wording {
    text-align: center;
    margin: 0 auto;
    color: #4c595c;
    font-size: 30px;
    font-family: Lato;
    font-weight: 400;
    margin-top: 35px;
}

.container_mobile .page_gaz .legende_texte_1 {
    font-size: 16px;
    color: white;
    margin-top: 169px;
    margin-left: 405px;
}

.container_mobile .page_gaz .block_description {
    margin-top: 13px;
    float: right;
    margin-right: 43px;
    width: 277px;
    background-color: white;
    height: 305px;
}

.container_mobile .page_gaz .block_description .description {
    padding-left: 15px;
    font-size: 19px;
    padding-top: 10px;
    color: #515253;
}

.container_mobile .page_gaz .legende_texte_2 {
    font-size: 16px;
    color: white;
    margin-top: 20px;
    margin-left: 373px;
}

.container_mobile .page_gaz .legende_texte_3 {
    color: #827a6d;
    text-transform: uppercase;
    margin-top: -9px;
    margin-left: 91px;
}

.container_mobile .page_gaz .legende_1 {
    margin-top: 24px;
    margin-left: 140px;
}

.container_mobile .page_gaz .legende_2 {
    display: block;
    margin-top: 8px;
    margin-left: 57px;
}

.container_mobile .page_gaz .legende_3 {
    display: block;
    margin-top: 9px;
    margin-left: 118px;
}

.container_mobile .page_gaz .legende_4 {
    margin-top: 119px;
    margin-left: 379px;
}

.container_mobile .page_gaz .marge {
    height: 4px;
}
/*  Les gaz de schistes  */

.container_mobile .page_schistes {
    font-family: Lato;
    font-weight: 700;
}

.container_mobile .page_schistes .wording {
    text-align: center;
    margin: 0 auto;
    color: #4c595c;
    font-size: 30px;
    font-family: Lato;
    font-weight: 400;
    margin-top: 35px;
}

.container_mobile .page_schistes .legende_texte_1 {
    font-size: 16px;
    color: white;
    margin-top: 207px;
    margin-left: 394px;
}

.container_mobile .page_schistes .block_description {
    margin-top: 13px;
    float: right;
    margin-right: 43px;
    width: 277px;
    background-color: white;
    height: 279px;
}

.container_mobile .page_schistes .block_description .description {
    padding-left: 15px;
    font-size: 19px;
    padding-top: 10px;
    color: #515253;
}

.container_mobile .page_schistes .legende_texte_2 {
    font-size: 16px;
    color: white;
    margin-top: 41px;
    margin-left: 359px;
}

.container_mobile .page_schistes .legende_texte_3 {
    color: #827a6d;
    text-transform: uppercase;
    margin-top: -9px;
    margin-left: 91px;
}

.container_mobile .page_schistes .legende_1 {
    margin-top: 46px;
    margin-left: 140px;
}

.container_mobile .page_schistes .legende_2 {
    display: block;
    margin-top: 8px;
    margin-left: 57px;
}

.container_mobile .page_schistes .legende_3 {
    display: block;
    margin-top: 9px;
    margin-left: 118px;
}

.container_mobile .page_schistes .legende_4 {
    margin-top: 119px;
    margin-left: 379px;
}

.container_mobile .page_schistes .marge {
    height: 4px;
}

.container_mobile .pages {
    display: none;
    position: relative;
}

.container_mobile {
    margin: 0 auto;
    text-align: center;
    width: auto;
    position: relative;
}
.container_mobile .retour {
    color: white;
    font-family: Lato;
    font-weight: 700;
    font-size: 22px;
    padding-top: 35px;
    margin-left: 30px;
    position: absolute;
    left: 0;
    top: 0;
}
.container_mobile .retour:hover {
    cursor: pointer;
}
.container_mobile .page-main {
    position: relative;
    display: none;
}
.container_mobile .page-main-title {
    font-family: Lato;
    font-weight: 400;
    font-weight: 500;
    font-size: 30px;
    color: #474747;
    text-align: center;
    margin-top: 90px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.container_mobile .sources-text {
    padding: 20px 30px;
    width: 100%;
    font-family: Lato;
    font-weight: 400;
    font-weight: 500;
    font-size: 12px;
    color: #566c7f;
    background-color: #ffffff;
    position: relative;
}
.container_mobile .inside-sources {
    position: relative;
}
.container_mobile .sources-text .left-infos {
    display: block;
    float: left;
    text-align: left;
    font-weight: bold;
}
.container_mobile .sources-text .right-infos {
    display: block;
    float: right;
}

.container_mobile .img_fondPage {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.container_mobile #page-un {
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
.container_mobile #page-deux {
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
.container_mobile #page-trois {
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
.container_mobile #page-quatre {
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
.container_mobile #page-cinq {
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}

.container_mobile .page-main .mobile {
    display: none;
}

@media all and (max-width: 960px) {
    .container_mobile img {
        max-width:100%;
    }
    .container_mobile .page-main .ipad {
        display: block;
    }
    .container_mobile .retour {
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .container_mobile .page-main {
        display: none;
    }
    .container_mobile .retour {
        margin-left: 20px;
        padding-top: 15px;
    }
    .container_mobile .page-main-title {
        margin-top: 50px;
    }
    .container_mobile .page_selection .wording {
        padding: 10px 20px 0 10px;
        font-size: 22px;
    }
    .container_mobile .sources-text .right-infos {
        clear: both;
        float: left;
        padding-top: 5px;
    }
    .container_mobile .carte {
        background-color: #9bbadb;
        padding: 0 20px;
        padding-top: 60px;
        padding-bottom: 10px;
        margin: 0 auto;
    }
    .container_mobile .carte .ombre-carte {
        padding-top: 20px;
        padding-bottom: 10px;
    }
    .container_mobile .page_selection .wording {
        text-align: left;
    }
    .container_mobile .select_page {
        -moz-appearance: none;
        -webkit-appearance: none;
        border-radius: 0px;
        position: relative;
        border: none;
        outline: none;
        width: 80%;
        height: 80px;
        font-family: Lato;
        font-size: 14px;
        color: #adadad;
        margin-bottom: 20px;
    }
    .container_mobile .select_page:after {
        content: "";
        width: 10px;
        height: 10px;
        display: block;

    }
    .container_mobile .page_selection .selection_box select {
        width: 90%;
        height: 60px;
        font-size: 16px;
        text-transform: none !important;
    }
    .container_mobile button.submit {
        text-transform: uppercase;
        width: 80%;
        margin-bottom: 40px;
        background-color: #77478d;
    }
    .container_mobile .sources-text {
        padding: 20px;
    }
    .container_mobile .pages-all {
        display: none;
    }
    .container_mobile .page-mobile {
        position: relative;
        display: none;
        background-color: #9bbadb;
        padding-bottom: 40px;
    }
    .container_mobile .page-mobile-text-header, .container_mobile .page-mobile-text-content {
        background-color: #ffffff;
        color: #515253;
        width: 90%;
        margin: 0 auto;
        padding: 30px 50px 50px 40px;
        text-align: left;
    }
    .container_mobile .page-mobile-text-header {
        margin-top: 0px;
        border-bottom: 1px solid #ebebeb;
        padding-bottom: 30px;
    }
    .container_mobile .page-mobile-sup-title {
        display: block;
        text-transform: uppercase;
        font-family: Lato;
        font-weight: 700;
        font-size: 18px;
        color: #474747;
    }
    .container_mobile .page-mobile-sub-title {
        display: block;
        text-transform: uppercase;
        font-family: Lato;
        font-weight: 400;
        font-size: 23px;
        color: #474747;
        padding-top: 20px;
    }
    .container_mobile .page-mobile-sub-intro {
        display: block;
        font-family: Lato;
        font-weight: 400;
        font-size: 18px;
        color: #474747;
        padding-top: 20px;
    }
    .container_mobile .page-mobile-info-row {
        margin-bottom: 10px;
        font-size: 18px;
        font-family: Lato;
    }
    .container_mobile .page-mobile-main-text {
        font-family: Lato;
        font-size: 18px;
        padding-top: 20px;
    }
    .container_mobile .page-mobile-key {
        font-weight: bold;
    }
    .container_mobile .page-mobile-value {
        font-weight: 400px;
    }
    .container_mobile .page-selection {
        background-color: #9bbadb;
    }
    .container_mobile .wording {
        color: #ffffff;
        font-family: Lato;
        font-weight: bold;
        font-size: 18px;
        padding-bottom: 20px;
        width: 80%;
        margin: 0 auto;
        text-align: left;
    }
    .container_mobile .mobile-back-home {
        position: absolute;
        display: block;
        color: #ffffff;
        font-family: Lato;
        font-size: 16px;
        top: 20px;
        left: 10px;
    }
    .container_mobile .mobile-back-home:hover {
        cursor: pointer;
    }
    .container_mobile .mobile-arrow-back {
        background: url(./img/mobile/mobile-back-arrow.png) no-repeat center;
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 10px;
        content: "";
    }
    .container_mobile .selection_box {
        position: relative;
    }
    .container_mobile .selection_box:after {
        content: "";
        display: block;
        background: url(./img/mobile/mobile-arrow-down.png) no-repeat center;
        width: 19px;
        height: 11px;
        position: absolute;
        right: 15%;
        top: 35px;
    }
}

@media all and (max-width: 640px) {
    .container_mobile .page-main .ipad {
        display: none;
    }
    .container_mobile .page-main .mobile {
        display: block;
    }
    .container_mobile #page-un {
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .container_mobile #page-deux {
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .container_mobile #page-trois {
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .container_mobile #page-quatre {
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .container_mobile #page-cinq {
        background-size: 100%;
        background-repeat: no-repeat;
        position: relative;
    }
    .container_mobile .sources-text {
        width: 100%;
        font-family: Lato;
        font-weight: 400;
        font-weight: 500;
        font-size: 12px;
        color: #566c7f;
        background-color: #ffffff;
        position: relative;
    }
    .container_mobile .inside-sources {
        position: static;
    }
    .container_mobile .sources-text .left-infos {
        display: block;
        float: none;
        clear: both;
        text-align: left;
    }
    .container_mobile .sources-text .right-infos {
        display: block;
        float: none;
        clear: both;
        text-align: left;
    }
    .container_mobile .header {
        font-size: 22px;
    }
    .container_mobile button.submit {
        height: 60px;
        line-height: 60px;
    }
    .container_mobile .page-main-title {
        padding: 0 20px;
        font-size: 20px;
        margin-top: 50px;
    }
    .container_mobile .arrow {
        width: 17px;
        height: auto;
        padding-right: 3px;
    }
    .container_mobile .retour {
        margin-left: 15px;
        padding-top: 15px;
    }
    .container_mobile .wording {
        width: 90%;
    }
    .container_mobile .select_page {
        width: 90%;
    }
    .container_mobile button.submit {
        width: 90%;
    }
    .container_mobile .wording {
        font-size: 17px;
    }
    .container_mobile .select_page {
        height: 60px;
        font-size: 11px;
    }
    .container_mobile .selection_box:after {
        right: 10%;
        top: 15px;
    }
}


/* Responsive */
.infography-hydrocarbures-nn .show-mobile {
    display: none;
}
.infography-hydrocarbures-nn .show-desktop {
    display: block;
}

@media screen and (max-width: 960px) {
    .infography-hydrocarbures-nn .show-mobile {
        display: block;
    }
    .infography-hydrocarbures-nn .show-desktop {
        display: none;
    }
}