/* HEADER */

  .topBand{
    position: relative;
    min-height: 30px;
    padding: 10px 10px 20px 10px;
    background-color: #5A5A5A;
    /* background-color: #E7E9EC; */
    /* background-color: #27232F; */
    background-color: #112646;
    
    background-image: url(../images/tapisserie.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left 49%;
  }

  @media (max-width: 400px) {
    .topBand{
      background-image: none;
    }
  }

  .topBand .title{
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 2%;
    /* right: 2%; */
    height: 40px;
    line-height: 40px;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;*/
  }

  .topBand.search_mode .title{
    width: 65%;
  }

  .topBand .icon,
  .topBand .pageTitle{
    display: inline-block;
    vertical-align: middle;
  }

  .topBand .icon{
    position: absolute;
    left: 0;
    top: 0;
    width: 140px;
  }

  .topBand.search_mode .icon{
    position: static;
    width: 30%;
  }

  .topBand .icon img{
    height: auto;
    width: 100%;
  }

  .topBand .pageTitle{
    display: block;
    margin-left: 150px;
    color: #eee;
    font-family: 'Roboto';
    font-weight: 500;
    font-size: 30px;
    font-size: 3vw;
    text-decoration: none;
    /*text-transform: uppercase;*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topBand.search_mode .pageTitle{
    display: inline-block;
    width: 65%;
    margin-left: 2%;
  }

  .searchForm{
    position: absolute;
    line-height: normal;
    padding: 0;
    margin: 0;
  }

  .topBand .searchForm{
    z-index: 2;
    top: 17px;
    right: 2%;
    width: 30%;
  }

  #menu .searchForm{
    display: none;
  }

  .searchForm .input{
    display: block;
    width: 100%;
    margin: 0;
    padding-right: 30px;
  }

  .searchForm .btn{
    position: absolute;
    right: 1;
    top: 1;
    margin: 0;
    display: inline-block;
    height: 24px!important;
    width: 24px;
    padding: 0!important;

    background-image: url(../images/search.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: center;

    -webkit-border-radius: 0!important;
       -moz-border-radius: 0!important;
            border-radius: 0!important;
  }

  .topBand .menu-trigger {
    visibility: hidden;
    opacity: 0;
  }

  @media (min-width: 680px){
    .topBand.search_mode .title{
      right: 0;
      width: auto;
      margin-right: 250px;
    }

    .topBand .searchForm{
      width: 200px;
    }
  }

  @media (min-width: 745px){
    .topBand .icon{
      position: absolute!important;
      left: 0;
      top: 0;
      width: 140px!important;
    }

    .topBand .pageTitle{
      display: block!important;
      width: auto!important;
      margin-left: 150px!important;
    }
  }

  @media (min-width: 1000px){
    .topBand .pageTitle{
      font-size: 30px!important;
    }
  }

  @media (max-width: 500px){
    .topBand .pageTitle{
      font-size: 15px!important;
    }
  }

  @media (max-width: 900px){
    .topBand .pageTitle{
      font-size: 20px;
      font-size: 3vw;
    }
  }

  @media (max-width: 500px){
    .topBand .title{
      left: 60px;
      right: 10px!important;
      width: auto!important;
      height: 35px;
    }
    
    .topBand .icon{
      display: none;
    }
    
    .topBand .pageTitle{
      display: block!important;
      margin: 0;
      padding: 0;
      width: auto!important;
      text-align: center;
    }

    .topBand .searchForm{
      display: none;
    }

    #menu .searchForm{
      display: block;
      left: 60px;
      right: 10px;
      top: 14px;
      direction: ltr;
    }

    .topBand .menu-trigger {
      visibility: visible!important;
      opacity: 1!important;
      display: inline-block!important;

      position: absolute;
      left: 2%;
      top: 10px;

      background-color: #FE7B5D;
    }
  }

  @media (max-width: 330px){
    .topBand .pageTitle{
      margin-top: 0;
    }
  }



/* MENU */

  #menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #menu {
    position: relative;
    display: block;
    padding-left: 2%;
    /*background-color: #2C2C2C;*/
    background-color: #27232f;
    border-bottom: 5px solid #FE7B5D;
  }

  #menu:before,
  #menu:after {
    content: "";
    display: table;
  }

  #menu:after {
    clear: both;
  }

  #menu li {
    position: relative;
    float: left;
  }

  #menu a {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;

    text-decoration: none;
    font-weight: 400;
    font-size: 13px;
    
    color: #c7c4cd;
    background-color: transparent;
  }

  #menu a:hover{
    color: #fff;
  }

  #menu li a {
    float: left;
    border-right: 1px solid #434045;
  }

  #menu .selected a {
    color: #fff;
    background-color: #FE7B5D;
  }

  #menu .selected ul a {
    color: #c7c4cd;
    background-color: transparent;
  }

  #menu .selected ul .selected a {
    color: #fff!important;
    background-color: #FE7B5D!important;
  }

  #menu .submenus a {
    padding-left: 20px;
    background-image: url(../images/arrow_bottom_b.png);
    background-repeat: no-repeat;
    background-position: 10px center;
  }

  #menu .submenus ul {
    position: absolute;
    z-index: 20;
    top: 50px;
    visibility: hidden;
    opacity: 0;

    background-color: #27232f;
    /* border-top: 5px solid #fff; */

    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
  }

  #menu .submenus ul li {
    position: static;
    float: none;
    display: block;
    width: auto;
  }

  #menu .submenus ul li a {
    float: none;
    display: block;
    white-space: nowrap;

    width: auto;
    height: auto;
    line-height: normal;
    padding: 5px 10px;

    border: none;
    border-top: 1px solid #434045;
    background-image: none;
  }

  #menu .submenus ul li:first-child a {
    border: none;
  }

  #menu .submenus ul li a:hover {
    color: #fff;
    background-color: #FE7B5D;
  }

  #menu .submenus:hover ul{
    visibility: visible;
    opacity: 1;
    top: 30px;
  }

  #menu #userBlkTitle{
    display: none;
  }

  #menu #user_icon{
    position: absolute;
    right: 10px;
    top: 0;
  }

  #menu #user_icon a,
  #menu #user_icon #cart{
    display: inline-block;
  }

  #menu #user_icon a{
    /*max-width: 100px;*/
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;

    color: #fff;
  }

  #menu #user_icon a:hover{
    text-decoration: underline;
  }

  #menu #user_icon a.selected{
    color: #fff;
    background-color: #FE7B5D;
  }

  #menu #user_icon a#us_cart,
  #menu #user_icon a.reg_icon{
    font-weight: bold;
  }

  #menu #user_icon a.men_icon{
    padding-right: 25px;
    background-color: transparent;

    background-image: url(../images/user_icon.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 50%;
  }

  #menu #user_actions,
  #menu #cart_list{
    position: absolute;
    z-index: 105;
    right: 0;
    top: 30px;
    height: 0px;
    overflow: hidden;

    border-top: 0 solid #fff;
    background-color: #2C2C2C;

    -webkit-transition: all .7s ease-in-out;
       -moz-transition: all .7s ease-in-out;
        -ms-transition: all .7s ease-in-out;
         -o-transition: all .7s ease-in-out;
            transition: all .7s ease-in-out;
  }

  #menu #user_actions:target,
  #menu #user_icon.no_js a.men_icon:hover + #user_actions,
  .js #menu #user_actions.showed,
  /*#menu #cart:target #cart_list,
  #menu #user_icon.no_js #cart:hover #cart_list,
  .js #menu #cart_list.showed*/
  #menu #cart:hover #cart_list{
    border-width: 3px;
  }

  #menu #user_actions:target,
  #menu #user_icon.no_js a.men_icon:hover + #user_actions,
  .js #menu #user_actions.showed{
    height: 182px;
  }

  #menu #user_actions li,
  #menu #user_actions a{
    float: none;
  }

  #menu #user_actions li{
    display: block;
    height: auto;
  }

  #menu #user_actions a{
    display: block;
    height: auto;
    line-height: normal;
    padding: 5px 10px 5px  30px;

    border: none;
    border-bottom: 1px solid #434045;

    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 13px auto;
  }

  #menu #user_actions a:hover{
    text-decoration: none;
    background-color: #FE7B5D;
  }

  #menu #user_actions .crt a{
    color: #000;
    background-color: #ccc;
    background-image: url(../images/us_cart_n.png);
  }

  #menu #user_actions .crt a:hover{
    color: #fff;
    background-color: #FE7B5D;
    background-image: url(../images/us_cart_b.png);
  }

  #menu #user_actions .hst a{
    background-image: url(../images/us_history.png);
  }

  #menu #user_actions .fav a{
    background-image: url(../images/us_favorite.png);
  }

  #menu #user_actions .ord a{
    background-image: url(../images/us_order.png);
  }

  #menu #user_actions .msg a{
    background-image: url(../images/us_messenger.png);
  }

  #menu #user_actions .cfg a{
    background-image: url(../images/us_config.png);
  }

  #menu #user_actions .dcn a{
    background-image: url(../images/us_logout.png);
  }

  #menu #cart a#us_cart{
    display: block;
  }

  #menu #cart.separated{
    border-right: 2px solid #434045;
  }

  #menu #cart.visible + a{
    max-width: 80px;
  }

  /*#menu #cart:target #cart_list,
  #menu #user_icon.no_js #cart:hover #cart_list,
  .js #menu #cart_list.showed*/
  #menu #cart:hover #cart_list{
    padding-top: 3px;
    height: 150px;
  }

  #menu #cart_list{
    /*width: 150px;*/
    left: 0;
    padding: 0 3px;
    overflow: auto;
  }

  #menu .cart_item{
    position: relative;
    display: block;
    float: none;
    margin-bottom: 3px;
    padding: 3px 23px 3px 3px;

    font-size: 90%;
    background-color: #ccc;
  }

  #menu .cart_item .nom{
    font-weight: bold;
  }

  #menu .cart_item .quantite{
    font-size: 90%;
  }

  #menu #user_icon .cart_item a.remove{
    position: absolute;
    z-index: 106;

    right: 0;
    top: 0;

    width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0;

    text-align: center;
    font-weight: bold;
    cursor: pointer;

    color: #f00;
  }

  #menu #user_icon .cart_item a.remove:hover{
    color: #fff;
    background-color: #f00;
    text-decoration: none;

    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
  }

  #menu .int_item{
    display: none!important;
  }

  #menu .it_idx_name{
    display: none;
  }

  #menu .it_accueil a{
    width: 30px;
    background-image: url('../images/home-1-b.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
  }
    
  /*#menu .int_projet{
    border-top: 2px solid #fff;
  }*/

  #menu li:hover a{
    color: #000;
    background-color: #FE7B5D;
  }

  #menu li:hover ul a{
    padding-left: 20px!important;
  }
  
  #menu .submenus:hover a{
    background-image: url(../images/arrow_bottom_n.png);
  }
  
  #menu .submenus:hover ul a{
    background-image: none;
  }

  #menu .submenus:hover ul li a{
    border-color: #f2f2f2;
  }

  @media (max-width: 900px) {
    #menu .ext_projet{
      display: none;
    }

    #menu .int_projet,
    #menu .int_realisation,
    #menu .int_oeuvre{
      display: list-item!important;
    }
  }

  @media (max-width: 750px) {
    #menu .ext_formation{
      display: none;
    }

    #menu .int_formation{
      display: list-item!important;
    }
  }

  /*@media (max-width: 650px) {
    #menu .ext_actualites{
      display: none;
    }

    #menu .int_actualites{
      display: list-item!important;
    }
  }*/

  @media (max-width: 500px) {
    
    /* main nav */
    #page,
    #menu,
    #menu *{
      -webkit-transition: all .2s ease-in-out;
         -moz-transition: all .2s ease-in-out;
          -ms-transition: all .2s ease-in-out;
           -o-transition: all .2s ease-in-out;
              transition: all .2s ease-in-out;
    }

    #menu {
      position: fixed;
      z-index: 110;
      left: -2;
      top: 0;
      bottom: 0;

      width: 0;
      padding: 80px 0 0 0;
      overflow-y: auto;
      
      direction: rtl;
      text-align: left;

      background-color: #2C2C2C;
      border: 1px solid black;

      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
    }

    #menu.showed,
    #menu:target{
      width: 250px;
    }

    #menu li {
      display: block;
      position: static;
      float: none;
      margin: 0;

      border: 0;
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;     
    }

    #menu li a{
      display: block;
      float: none;
      height: auto;
      line-height: normal;
      padding: 5px 10px;

      color: #fff;
      background: none;
      border: none;
      border-top: 1px solid #434045;
    }

    #menu .it_idx_name{
      display: block;
    }

    #menu .it_accueil{
      display: none;
    }

    #menu li:last-child a{
      border-bottom: 1px solid #434045;
    }

    #menu li a:hover{
      padding-left: 20px!important;
    }

    #menu .selected a {
      color: #fff;
      background: none;
    }

    #menu .selected ul .selected a {
      color: #c7c4cd!important;
      background-color: transparent!important;
    }

    #menu .menu-trigger {
      visibility: visible!important;
      opacity: 1!important;
      display: inline-block!important;

      position: absolute;
      z-index: 10;
      left: 10px;
      top: 10px;
      height: auto;
      padding: 10px;

      background-color: #2C2C2C;
    }

    #menu .menu-trigger:hover{
      padding-left: 10px;
    }

    #menu .submenus a {
      padding-left: 10px;
      background: none;
    }

    #menu .submenus ul {
      position: static;
      top: 0;
      
      visibility: visible;
      opacity: 1;

      padding-left: 20px;
      border-top: 1px solid #434045;
      background-color: transparent;

      -webkit-transition: none;
         -moz-transition: none;
          -ms-transition: none;
           -o-transition: none;
              transition: none;
    }

    #menu .submenus ul li:first-child a{
      border-top: none;
    }

    #menu .submenus ul li:last-child a{
      border-bottom: none;
    }

    #menu .submenus ul li a:hover {
      /* background-color: transparent; */
    }

    .js #menu #user_icon{
      position: static;
      padding-top: 30px;
      border-top: 1px solid #434045;
    }

    .js #menu #user_icon.loged{
      padding-top: 20px;
      border-bottom: 1px solid #434045;
    }

    .js #menu #user_icon a.men_icon{
      background-position-x: 10px;
      padding: 0 10px 0 35px;
      max-width: none;
    }

    .js #menu #user_icon a#us_cart,
    .js #menu #user_icon a.reg_icon{
      height: auto;
      line-height: normal;
      padding: 5px 10px;
    }

    .js #menu #user_icon a.reg_icon{
      display: block;
      max-width: none;
    }

    .js #menu #user_actions{
      position: static;
      height: auto;
      border-width: 3px;
    }

    .js #menu #user_actions .action a{
      padding-left: 35px;
      border-top: none;
      max-width: none;
    }

    .js #menu #user_actions a:hover{
      background-color: transparent;
      padding-left: 45px;
    }

    .js #menu #user_actions .crt a {
      color: #000;
      background-color: #ccc;
      background-image: url(../images/us_cart_n.png);
    }

    #menu .int_item{
      display: none!important;
    }

    #menu .ext_projet,
    #menu .ext_formation,
    #menu .ext_actualites{
      display: block!important;
    }

    #menu li:hover a{
      color: #000;
    }

    #menu li a:hover{
      color: #fff;
    }

    #menu li:hover ul a{
      padding-left: 10px!important;
    }

    #menu li:hover ul a:hover{
      padding-left: 20px!important;
    }
    
    #menu .submenus:hover a{
      background-image: none;
    }

    #menu li:hover ul a{
      padding-left: 10px!important;
    }
  }



  /* iPad */
  .no-transition {
    opacity: 1;
    visibility: visible;
    display: none;      

    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
  }

  #menu li:hover > .no-transition {
    display: block;
  }



/* FOOTER */
  .page_bottom{
    font-size: 80%;
  }

  .page_bottom #linksBand{
    padding: 1%;
    /*text-align: center;*/
  }

  .page_bottom #linksBand .footGroup{
    padding: 1%;
  }

  .page_bottom #linksBand li{
    display: inline-block;
    vertical-align: top;
    margin: 2px;
  }

  .page_bottom #linksBand li > a:hover,
  .page_bottom #linksBand li a:hover,
  .page_bottom #linksBand li > span:hover,
  .page_bottom #linksBand li span:hover{
    color: white;
  }

  .page_bottom #linksBand li a,
  .page_bottom #linksBand li span{
    color: gray;
  }

  .page_bottom #linksBand li span.footGroupTitle{
    display: block;
    line-height: 26px;
    padding-left: 10px;
    /*margin-bottom: 10px;*/

    font-size: 20px;
    font-weight: 300;

    color: #f2f2f2;
    border-left: 5px solid #F9714A;
  }

  .page_bottom #linksBand li a,
  .page_bottom #linksBand li span{
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
  }

  .page_bottom #linksBand li a{
    /*margin-left: 10px;*/
  }

  .page_bottom #linksBand li ul{
    padding: 10px 0 0 10px;
  }

  .page_bottom #linksBand li ul li{
    display: block;
  }

  .page_bottom #linksBand .footGroupMult{
    /*white-space: nowrap;*/
  }

  .page_bottom #linksBand .footGroupMult ul{
    display: inline-block;
    vertical-align: top;

    padding-right: 10px;
    border-right: 1px solid #434045;
  }

  .page_bottom #linksBand .footGroupMult ul:last-child{
    margin-right: 0;
    border: none;
  }

  .page_bottom #linksBand #socialsBlk ul{
    margin-left: 0;
    padding-left: 0;
    border: none!important;
  }

  .page_bottom #linksBand #socialsBlk ul li{
    display: inline-block;
    margin-left: 2px;
    /*background-color: gray;*/

    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    
    -webkit-transition: all .3s ease-in-out;
       -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
  }

  .page_bottom #linksBand #socialsBlk li:hover{
    background-color: #0066FF;
  }

  .page_bottom #linksBand #socialsBlk li img{
    width: 20px;
    height: 20px;
    margin: 3px;
  }

  .page_bottom #legalsBand{
    background-color: #1b1920;
    /*padding: 2%;*/
    padding: 5px 10px;
    text-align: right;
  }

  .page_bottom #legalsBand .line{
    display: block;
  }

  .page_bottom #legalsBand .line .legals{
    display: inline-block;
    margin-right: 10px;

    font: 10px Arial, Helvetica, sans-serif;
    color: #77757c;
    line-height: 18px;
  }

  .page_bottom #legalsBand .line a.legals{
    color: #F9714A;
    text-decoration: underline;
    outline: none;
  }

  .page_bottom #footGroupParteners li{
    display: inline-block!important;
    vertical-align: middle;
    margin-right: 10px;
    text-decoration: underline;
  }

  @media (max-width: 600px){
    .page_bottom{
      font-size: 90%;
    }
  }

  @media (max-width: 550px){
    .page_bottom #linksBand li ul{
      border-left: 5px solid #F9714A; 
    }
  }

  @media (max-width: 340px){
    .page_bottom #linksBand .footGroupMult ul{
      display: block;
      margin-right: 0;
      border-right: none;
      border-left: 5px solid #F9714A!important; 
    }

    .page_bottom #linksBand .footGroupMult ul+ul{
      padding-top: 0;
      border-top: 1px solid #434045!important;
    }
  }

  @media (max-width: 250px){
    .page_bottom #legalsBand *{
      text-align: center;
    }
  }

  @media (max-width: 230px){
    .page_bottom #linksBand{
      display: none;
    }
  }



/* CONTENT */
  .content{
    margin: 0 10%;
  }

  .content.hasNav{
    margin: 0 320px 0 5%;
    text-align: justify;
  }

  .content img{
    display: block;
    height: auto;
    /*width: 80%;*/
    margin: 0 auto 5% auto;

    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
  }

  .content .desc{
    text-align: justify;
  }

  @media (max-width: 800px){
    .content.hasNav{
      margin-right: 250px!important;
    }

    .rnavigator{
      width: 200px!important;
    }
  }

  @media (max-width: 600px){
    .content.hasNav{
      margin-right: 5%!important;
    }
  }



/* LNAVIGATOR */
  .lnavigator{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 200px;
    direction: rtl;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #0066FF;
  }

  .lnavigator .links{
    direction: ltr;
    display: block;
    margin-top: 50px;
  }

  .lnavigator .links li{
    display: block;
    border-bottom: 1px solid silver;
  }

  .lnavigator .links li:first-child{
    border-top: 1px solid silver;
  }

  .lnavigator .links li a{
    display: block;
    /*height: 30px;
    line-height: 30px;*/
    padding: 10px;
    color: #fff;
    font-size: 90%;
  }

  .lnavigator .links li.selected a{
    color: #0066FF;
    background-color: #fff;
    font-size: 85%;
    font-weight: bold;
  }

  @media (max-width: 800px){
    .lnavigator{
      width: 170px;
    }
  }

  @media (max-width: 600px){
    .lnavigator{
      position: static;
      display: block;
      width: auto;

      direction: normal;
      overflow: auto;

      background: none;
    }

    .lnavigator .links{
      direction: normal;
      margin: 0;
      padding: 2%;
      text-align: center;
    }

    .lnavigator .links li{
      display: inline-block;
      border: none!important;
      margin: 1% 1% 0 0;
    }

    .lnavigator .links li a{
      height: auto;
      line-height: normal;
      padding: 5px 10px;

      color: #333; 
      background-color: #f2f2f2;
      font-size: inherit;
    }

    .lnavigator .links li.selected a{
      color: #fff;
      background-color: #0066FF;
      font-size: inherit;
      font-weight: bold;
    }
  }



/* RNAVIGATOR */
  .rnavigator{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 270px;
    overflow-y: auto;
    overflow-x: hidden;
    /*background-color: #f2f2f2;*/
    background-color: #0066FF;
    -webkit-box-shadow: -1px 2px 10px #000;
    -moz-box-shadow: -1px 2px 10px #000;
    box-shadow: -1px 2px 10px #000;
  }

  .rnavigator .fold,
  .rnavigator .close{
    display: none;
  }

  .rnavigator .links{
    display: block;
    margin: 50px 0;
  }

  .rnavigator .links li{
    display: block;
  }

  .rnavigator .links li a{
    display: block;
    padding: 10px;

    /*color: #000;*/
    color: #fff; 
    font-size: 90%;
    border-bottom: 1px solid silver;
  }

  .rnavigator .links li .info{
    color: #ddd;
  }

  .rnavigator .links li:first-child a{
    border-top: 1px solid silver;
  }

  .rnavigator .links li.selected a{
    color: #000;
    background-color: #fff;
    font-size: 85%;
  }

  .rnavigator .links li.selected .info{
    color: gray;
  }

  .rnavigator .links li .titre{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .rnavigator .links li.more a{
    /*color: #0066FF;
    font-weight: bold;*/
    color: #FFF;
    background-color: #112646;
  }

  @media (max-width: 600px){
    .rnavigator{
      position: static;
      overflow-y: hidden;
      display: block;
      width: auto;
      padding: 30px 5% 5% 5%;
      overflow: auto;
      background: none;
    
      -webkit-box-shadow: none;
         -moz-box-shadow: none;
              box-shadow: none;
    }

    .rnavigator .fold,
    .rnavigator .close{
      color: #fff;
      background-color: #F9714A;

      -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
              border-radius: 4px;
    }

    .rnavigator .fold{
      display: inline-block;
      padding: 7px 20px 7px 10px;
      font-size: 90%;

      background-image: url(../images/arrow_bottom_b.png);
      background-repeat: no-repeat;
      background-position: right 8px center;

      border-bottom-left-radius: 0;
      border-top-right-radius: 0;
    }

    .rnavigator .close{
      display: inline-block;
      position: absolute;
      right: 0;
      top: 10px;
      height: 20px;
      line-height: 20px;
      width: 30px;
      text-align: center;
      border-top-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .rnavigator .links{
      position: absolute;
      z-index: 20;
      left: 5%;
      right: 5%;
      top: 43px;
      margin: 0;
      padding: 0;
      height: 0;
      overflow: hidden;
    }

    .rnavigator .links.folded,
    .rnavigator .links:target{
      height: auto;
      padding-top: 31px;
      overflow: visible;
    }

    .rnavigator .links li a{
      position: relative;
      height: auto;
      line-height: normal;
      padding: 5px 10px;

      color: #333; 
      background-color: #f2f2f2;
      border-left: 1px solid #F9714A;
      border-right: 1px solid #F9714A;
      font-size: inherit;
    }

    .rnavigator .links li:first-child a{
      border-top-color: #F9714A;
    }

    .rnavigator .links li:last-child a{
      border-bottom: 1px solid #F9714A;
    }

    .rnavigator .links li.selected a{
      color: #000;
      /*background-color: #FDA996;*/
      background-color: silver;
      font-size: inherit;
    }

    .rnavigator .links li .info{
      position: absolute;
      left: 10px;
      top: 8px;
      color: #000;
    }

    .rnavigator .links li.selected a .info{
      color: #000;
    }

    .rnavigator .links li .titre{
      margin-left: 85px;
    }

    .rnavigator .links li.more a{
      color: #fff;
      background-color: #F9714A;
      font-weight: normal;
    }
  }

  @media (max-width: 400px){
    .rnavigator{
      padding-top: 15px;
    }

    .rnavigator .links.folded,
    .rnavigator .links:target{
      padding-top: 3px;
    }

    .rnavigator .close{
      top: -18px;
    }
  }

  @media (max-width: 400px){
    .rnavigator .links li .info{
      position: static;
    }

    .rnavigator .links li .titre{
      margin-left: 0;
    }
  }



/* PARAG_TITLE & LIST */
  .paragTitle{
    margin-top: 20px;
    font-size: 120%;
    font-weight: bold;
    font-style: oblique;
    text-decoration: underline;
  }

  .list .it{
    display: block;
    margin-bottom: 10%;
  }

  .list .it:last-child{
    margin-bottom: 5%;
  }

  .list .it .link{
    display: block;
    color: #F9714A;
    font-size: 120%;
    font-weight: bold;
  }

  .list .it .img{
    display: block;
    height: 200px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .list .it .top{
    padding-bottom: 10px;

    border-bottom: 1px solid silver;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
  }

  .list .it .bottom{
    padding: 1% 0;
  }

  .list .it .bottom *{
    display: inline;
  }

  .list .it .bottom .info{
    margin-right: 10px;
  }

  .list .it .desc{
    text-align: justify;
  }

  .list .it .more{
    margin-top: 1%;
  }

  .list .it .more a{
    display: inline-block;
    padding: 10px 30px 10px 20px;
    font-size: 90%;
    
    color: #fff;
    background-color: #F9714A;

    background-image: url(../images/arrow_right_b.png);
    background-repeat: no-repeat;
    background-position: right 20px center;

    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
  }

  @media (min-width: 900px){
    .list{
      width: 700px;
      margin: 0 auto;
    }
  }

  @media (max-width: 600px){
    .list .it .more a{
      padding: 7px 20px 7px 10px;
      background-position: right 8px center;
    }
  }

  @media (max-width: 400px){
    .list .it .bottom *{
      display: block;
    }
  }

  /*@media (max-width: 600px){
    .list .it .more a{
      padding-left: 10px;
      padding-right: 20px;
      background-position: right 8px center;
    }
  }

  @media (max-width: 400px){
    .list .it .more a{
      padding-top: 7px;
      padding-bottom: 7px;
      background-position: right 8px center;
    }
  }*/



/* PHOTOS_LIST */
  .photosList{
    display: block;
  }

  .photosList .photo{
    display: block;
    margin-bottom: 5%;
    padding: 10px;
    border: 1px solid silver;

    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
  }

  .photosList .photo img{
    margin-bottom: 10px;
  }

  .photosList .photo .titre{
    text-align: center;
    font-weight: bold;
    color: #444;
  }