@font-face {
    font-family : "Frutiger";
    src : url("/fonts/lte50331.ttf");
}

html {
    height : 100%;
}

body {
    margin : 0;
    font-family : "Frutiger", Arial;
    background-repeat : no-repeat;
    background-position : center center;
    background-attachment : fixed;

    -webkit-background-size : cover;
    -moz-background-size : cover;
    -o-background-size : cover;
    background-size : cover;
}

img, a img {
    border : none;
}

.bold{
    font-weight : bold;
}

.opaque {
    -moz-opacity : 0.9;
    opacity : 0.9;
    filter: alpha(opacity=90);
}

.link {
    color: #003787;
    text-decoration : none;
}

.link:hover {
    text-decoration : underline;
}

.linkTitleReference {
    text-decoration : none;
    color : #003787;
}

.hidden {
    display : none;
}

.mobile {
   display : none;
}

/* HEADER */

#header-accueil, #header {
    position : fixed;
    top : 0;
    left:0;
    width : 100%;
    height : 70px;
    background : transparent;
    padding : 5px 5px 5px 5px;
}

#header-accueil div, #header div {
    float : left;
    height : 70px;
    background : #fff;
    color : #003787;
    margin : 0 5px 0 0;
    padding : 0 0 0 20px;
    font-size : 13px;
}

#header-accueil #header-1, #header #header-1 {padding : 0;}
#header-accueil #header-2, #header #header-2 {padding : 0;}
#header-accueil #header-3 {width : 16%; height : 60px; padding-top : 10px;}
#header-accueil #header-4 {width : 16%; height : 52px; padding-top : 18px;}
#header-accueil #header-5 {width : 16%; height : 52px; padding-top : 18px;}
#header-accueil #header-6 {padding : 0;}
#header-accueil #header-7 {width : auto; overflow : hidden; float : none; margin : 0 10px 0 0; height : 48px; padding-top : 22px;}
#header-accueil #header-7 a {margin : 0 7px 0 0;}

#header-accueil #header-mobile {width : auto; overflow : hidden; float : none; margin : 0 5px 0 0;}
#header-accueil #header-mobile div {display : inline-block; margin : 0 20px 0 0; height : 60px; padding : 10px 0 0 0;}
#header-accueil #header-mobile #header-mobile-lux {height : 70px; padding : 0 0 0 0;}
#header-accueil #header-mobile #header-social {height : 50px; padding : 20px 0 0 0;}

/* PARTICULARITES DES HEADERS HORS PAGE D'ACCUEIL */
#header {
    background : #fff;
}

#header #header-titre {
    z-index : 1;
    position : fixed;
    top : 0;
    left : 0;
    width : 776px;
    margin : 0 0 0 284px;
    background : #fff;
    border-collapse : collapse;
}

#header #header-titre tr {
    height : 73px;
}

#header #header-titre tr.trTitre {
    height : 50px;
}

#header #header-titre tr.trTitre td {
    font-size : 20px;
    color : #003787;
    border-top : 4px solid #003787;
    font-weight : bold;   
}


/* MENU */

#menu {
    z-index : 1;
    position : fixed;
    bottom : 0;
    left : 0;
    width : 100%;
    height : 50px;
    background : #003787;
    padding : 0;
}

#menu ul {
    width : 100%;
    list-style : none;
    margin : 0;
    padding : 0;
}

#menu ul li {
    float : left;
    width : 14%;
    height : 50px;
    line-height : 50px;
    font-size : 14px;
    text-align : center;
    margin : 0;
    padding : 0;
}

#menu ul li a {
    position : relative;
    display : block;
    margin : 0;
    padding : 0;
    color : #fff;
    font-weight : normal;
    text-decoration : none;
    
    -o-transition : .5s;
    -moz-transition : .5s;
    -ms-transition : .5s;
    -webkit-transition : .5s;
    transition : .5s;
}

#menu ul li a:hover {
    color : #b8d3fd;
}

#menu ul li a img {
  position : relative;
  top : 7px;
  margin : 0 5px 0 0;
}

/* PAGE ACCUEIL*/

/* ACTUALITE DE L'ACCUEIL */
#div-nouveautes-accueil {
    position : absolute;
    left : 80px;
    bottom : 130px;
    width : 854px;
    padding : 0 0 0 20px;
    background : #fff;
    font-size : 13px;
}

#div-nouveautes-accueil .nouveaute {
    margin : 20px 0;
    width : 854px;
}

#div-nouveautes-accueil .nouveaute .div-lien-actus{
  margin: 8px 0 0 0;
  color: #003787;
  text-align: right;
}

/* PAGE ACTUALITES */

#div-nouveautes {
    width : auto;
    margin : 130px 0 80px 80px;
    background : #fff;
    font-size : 14px;
    padding : 0;
}

.nouveaute {
    width : 1000px;
    height : 180px;
    margin : 0 0 50px 0;
    border-collapse : collapse;
}

.nouveaute .nouveaute-photo {
	padding : 0;
	width : 184px;
	vertical-align: top;
}

.nouveaute .nouveaute-photo img {
	width : 184px;
	margin-top: 6px;
}

.nouveaute .nouveaute-description {
	padding : 5px 20px;
	vertical-align: top;
}

.nouveaute .nouveaute-description .titre1 {
    margin : 0 0 5px 0;
    font-size : 16px;
    color : #003787;
	border-top : 1px solid #003787;
    font-weight : bold;
}

.nouveaute .nouveaute-description .titre2 {
    margin : 0 0 5px 0;
}

.nouveaute .nouveaute-description .titre2 a {
    font-size : 18px;
    color : #003787;
    font-weight : bold;
    text-decoration : none;
}

.nouveaute .nouveaute-description .content {
    text-align : justify;
}

/* PAGE BUREAU */

.div-panel-gauche {
    float : left;
    width : 184px;
    margin : 160px 0 100px 80px;
    background : #fff;
}

.popupInfo {
  
  position : fixed;
  top : 686px;
  margin : 0px;
  list-style : none;
  font-size : 13px;

  border-top : 1px solid #003787;

  display:none; 
  height: 38px; 
  width:188px; 
  opacity:1; 
  text-align:left; 
  background:#fff; 
  z-index:15; 
  padding:0px
}

.popupInfo  h4 {
    color : #003787;
    font-size :15px;
    font-weight : bold;
    margin : 0px 0 0px 0;
}

#ppTable {
  width:100%;
}

#ppTable tr .col1, #ppTable tr .col3 {
  width : 16px;
}

#ppTable tr .leftright {
  width : 164px;
}

#ppTable tr td h4 {
  margin-bottom:-5px;
}

.deuxiemeligne{
  margin-top : -2px;
}

.wlink {
    color: #003787;
    text-decoration : none;
    font-size : 11px;
}

.wlink:hover {
    text-decoration : underline;
}

.div-panel-gauche ul {
  position : fixed;
  margin : 0;
  padding : 0;
  list-style : none;
}

.div-panel-gauche ul li {
    margin : 20px 0 40px 0;
}

.div-panel-gauche ul li a {
    position : relative;
    display : block;
    font-weight : normal;
    color : #003787;
    font-size : 15px;
    text-decoration : none;
}

.div-panel-gauche ul li a:before {
    content : "";
    position : absolute;
    left : 0;
    top : -7px;
    height : 3px;
    width : 30px;
    border-top : 4px solid #003787;
}

.div-panel-droite {
    float : left;
    width : 776px;
    margin : 160px 0 100px 20px;
    background : #fff;
    font-size : 15px;

text-align : justify;

}

.div-panel-droite  h2 {
    color : #707070;
    font-size :18px;
    font-weight : bold;
    margin : 40px 0 20px 0;
}

.div-panel-gauche .first-title, .div-panel-droite .first-title {
    margin-top : 0;
}

.div-panel-droite  h3 {
    color : #707070;
    font-size :16px;
    font-weight : bold;
    margin : 20px 0 20px 0;
}

.div-panel-droite ul {
    margin : 0 0 0 16px;
    padding : 0;
    list-style : outside none;
}

.div-panel-droite ul li {
     
    padding : 0;

text-align : justify;

}

.div-panel-droite ul li:before {
     
    top : -1px;
    left : -15px;
    content : "> ";
}

.organigramme {
    width : 700px;
    margin : 0 20px;
}

.presentation .titre1 {
	font-size : 16px;
	color : #003787;
	border-top : 1px solid #003787;
	font-weight : bold;
	margin-top: 50px;
	margin-right: 0;
	margin-bottom: 15px;
	margin-left: 0px;
}

.awards .titre1 {
	font-size : 16px;
	color : #003787;
	border-top : 1px solid #003787;
	font-weight : bold;
	margin-top: 20px;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: -15px;
}

/********************************/

/* REFERENCES */

/* ATTRIBUTS COMMUNS */

#divReferences .categorieReference {
	width : 100%;
	margin : 0;
	text-align : left;
	font-weight : bold;
	font-size : 15px;
	text-align : left;
	padding : 15px 0;
	border-top : 1px solid #1a72b0;
	color : #003787;
	cursor : pointer;
}

#divReferences table {
	width : 100%;
	padding : 0;
	margin : 0 0 10px 0;
	border-collapse : collapse;
}

#divReferences table tr {
	text-align : center;
}

#divReferences table tr td {
	padding : 5px 0 15px 0;
}

a.linkReference {
	display : inline-block;
	width : 175px;
 	height : 138px;
	padding : 0;
	margin : 0;
	border : 1px solid #e3e3e3;
	text-decoration : none;
}

a.linkReference img {
	display : block;
	width : 175px;
 	height : 125px;
	margin : 0;
}

.bottomImage {
	display : block;
	margin : 0;
	background : url("/images/bottom_image.gif") bottom left;
	width : 175px;
	height : 13px;
	font-size : 9px;
	color : #33455f;
}

.tdLinkToutesReferences {
	color : #003787;
	font-size : 13px;
}

/* LISTE */

#menuAlphabet {
	width : 785px;
	height : 100px;
	position:fixed;
	top:80px;
	background-color : #FFF;
	border-collapse: collapse;
}

#menuAlphabet tr td {
    padding : 50px 0 0 0;
    text-align : center;
    width : 3.84%;
}

#menuAlphabet a {
	color : #0a5387;
	font-weight : bold;
	text-decoration : none;
	font-size : 17px;
}

#listeReferences {
	padding: 70px 0 0 0;	
}

.lienListeReference {
    margin : 0 0 30px 0;
}

.lienListeReference a {
      color : #003787;
      text-decoration : none;
}

.lienListeReference a:hover {
    text-decoration : underline;
}

/* REFERENCES PAR ANNEE */

#divReferences .categorieReferenceAnnee {
	width : 100%;
	margin : 0;
	text-align : left;
	padding : 15px 0;
	border-top : 1px solid #1a72b0;
	cursor : pointer;
}

#divReferences .categorieReferenceAnnee a {
	font-weight : bold;
	font-size : 15px;
	text-align : center;
	color : #003787;
}

/* REFERENCES PAR DOMAINE */

#divReferences .categorieReferenceDomaine {
	width : 100%;
	margin : 0;
	padding : 15px 0;
	text-align : left;
	border-top : 1px solid #1a72b0;
	cursor : pointer;
}

#divReferences .categorieReferenceDomaine .domaine {
	display : inline-block;
	margin : 0;
	width : 12%;
	height : 13px;
	text-align : left;
	font-size : 10px;
	font-weight : bold;
}

#divReferences .categorieReferenceDomaine .sousDomaine {
	display : inline-block;
	width : 88%;
	height : 20px;
	text-align : left;
	font-size : 15px;
	color : #003787;
}

.carreDomaine {
	position : relative;
	top : 1px;
	margin : 0 5px 0 0;
}

.structures {color : #0086a8;}
.infrastructures {color : #a72c32;}
.ingenierie {color : #408d52;}
.services {color : #f36f32;}

/* Attribut commun devant être déclaré en dernier */

#divReferences .firstCat {
	border : none;
}

/* NOUVELLE PAGE REFERENCE */

#link-previous-ref {
  position : absolute;
  top : 45%;
  left : 10px;
}

#link-next-ref {
  position : absolute;
  top : 45%;
  right : 10px;
}

#div-copyright {
    position : fixed;
    top : 0;
    right : 0;
    height : 20px;
    padding : 0 5px 0 0;
    text-align : right;
    color : #cdcdcd;
    font-size : 13px;
}

#reference {
    z-index : 1;
    position : absolute;
    bottom : 50px;
    left : 0;
    width : 100%;
    height : 53px;
    overflow : hidden;
    color : #fff;
    
    background : rgb(83,83,83);
    background : transparent\9;
    background : rgba(83,83,83,0.8);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc535353, endColorstr=#cc535353);
    zoom: 1;
}

#reference:nth-child(n){
    filter:none;
}

#reference .bloc-contenu {
    width : 29%;
    float : left;
    padding : 0 0.5% 0 0.5%;
    font-size : 14px;
    text-align : justify;
}

#reference .first-bloc {
    width : 9%;
}

#reference .bloc-contenu span {
    display : inline-block;
    margin : 0 0 15px 0;
}

#reference .bloc-contenu span ul {
    margin : 0 0 0 16px;
    padding : 0;
    list-style : outside none;
}

#reference .bloc-contenu span ul li {
    position : relative;
    padding : 0;
}

#reference .bloc-contenu span ul li:before {
    position : absolute;
    top : -1px;
    left : -15px;
    content : ">";
}

#reference h2 {
    position : relative;
    display : block;
    width : 100%;
    font-size : 17px;
    margin : 0 0 15px 3px;
    text-align : left;
}

#reference h2.barre a {
    text-decoration : none;
    color : #fff;
  
    -o-transition : .5s;
    -moz-transition : .5s;
    -ms-transition : .5s;
    -webkit-transition : .5s;
    transition : .5s;
}

#reference h2.barre a:hover {
    color : #b8d3fd;
}

#reference h2.barre:before {
    content : "";
    position : absolute;
    left : 0;
    top : -7px;
    height : 3px;
    width : 28px;
    border-top : 4px solid #fff;
}

#reference h3 {
    margin : 0 0 5px 0;
    padding : 3px 0 0 0;
    font-weight : bold;
    font-size : 14px;
    text-align : left;
    border-top : 1px solid #fff;
}

#reference #reference-arrow {
    width:100%;
    height:25px;
    margin : 0;
    padding : 3px 0 0 0;
    text-align : center;
}

.showReference {
    cursor: pointer;
}
/*************************************/



/* les photos dans les anciennes pages de références */

.photo {
  margin: 0 0 30px 20px;
  padding: 0;
}

a.photoReference {
	display : inline-block;
	padding : 0;
	margin : 0;
	border : 1px solid #e3e3e3;
}

.bottomImageZoom {
	display : block;
	margin : 0 auto;
	background : url("/images/zoom.gif");
	width : 175px;
	height : 12px;
}


/*************************************/


/* PAGE CONTACT */
#planGoogleMaps {
    position : absolute;
    top : 125px;
    left : 610px;
    width : 250px;
    height : 230px;
}

/* PAGE ACCES CLIENT */

#div-acces-client {
    width : auto;
    margin : 160px 0 80px 80px;
    background : #fff;
    font-size : 15px; 
    padding : 0;
}

.application {
    width : 950px;
    height : 80px;
    margin : 0 0 50px 0;
    border-collapse : collapse;
}

.application .app-icone {
    background : #fafafa;
    padding : 5px 0;
    width : 184px;
    text-align : center;
}

.application .app-icone img {
    height : 75px;
}

.application .app-description {
    padding : 5px 0 5px 20px;
}

.application .lienApp {
     color : #707070;
     text-decoration : none;
     font-weight : bold;
}

.application .lienAppAcces {
     display : block;
     margin : 10px 60px 0 0;
     text-align : left;
     color : #707070;
     text-decoration : underline;
     font-weight : normal;
}

#accountSAID {
  z-index : 2;
  width : 265px;
  font-size : 14px;
  position : absolute;
  top : 20px;
  left : 800px;
}

/*************************************/

/*

    Colorbox Core Style:

    The following CSS is consistent between example themes and should not be altered.

*/

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}

#cboxWrapper {max-width:none;}

#cboxOverlay{position:fixed; width:100%; height:100%;}

#cboxMiddleLeft, #cboxBottomLeft{clear:left;}

#cboxContent{position:relative;}

#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}

#cboxTitle{margin:0;}

#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}

#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}

.cboxIframe{width:100%; height:100%; display:block; border:0;}

#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}



/* 

    User Style:

    Change the following styles to modify the appearance of Colorbox.  They are

    ordered & tabbed in a way that represents the nesting of the generated HTML.

*/

#cboxOverlay{background:#fff;}

#colorbox{outline:0;}

    #cboxContent{margin-top:32px; overflow:visible; background:#000;}

        .cboxIframe{background:#fff;}

        #cboxError{padding:50px; border:1px solid #ccc;}

        #cboxLoadedContent{background:#000; padding:1px;}

        #cboxLoadingGraphic{background:url("/images/loading.gif") no-repeat center center;}

        #cboxLoadingOverlay{background:#000;}

        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}

        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}



        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */

        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url("/images/controls.png") no-repeat 0 0;}

        

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */

        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}



        #cboxPrevious{background-position:0px 0px; right:42px;}

        #cboxPrevious:hover{background-position:0px -25px;}

        #cboxNext{background-position:-25px 0px; right:20px;}

        #cboxNext:hover{background-position:-25px -25px;}

        #cboxClose{background-position:-50px 0px; right:0;}

        #cboxClose:hover{background-position:-50px -25px;}

        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}

        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}

        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}

        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}

        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}



/*************************************/

/* correction d un bug affectant les iPhones/iPads */
@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}

@media (max-width: 1100px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
 body {
   width: auto;
   margin: 0;
   padding: 0;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, textarea, input {
   max-width: 100%;
 }
 
.desktop {
  display : none;
}

 .mobile {
   display : block;
}

.div-panel-droite {
  width : 600px;
  
}

}