body{
    font-family:"Trebuchet MS","DejaVuSans";
    font-size:14px;
    background:url('../img/logotrans2.png');
    background-repeat:repeat-y;
    background-position: right top;
    overflow:hidden 
}
ol, ul, li {
    font-size:11px;
    color:#4c4c4c;
}
img{ border:0px; }

#header_img {
    float:left;
    z-index:auto;
/*    background:url('/img/logotrans2.png') 60%  ;
    background-repeat:no-repeat;*/
    position:absolute;
    right:100px;
}
.slogan h1{
    font-size:15px;
    color:#555;
    font-style:italic;
    margin-left:2%;
}
#title{
    font-size:44px;
    font-weight:bold;
    padding-top:60px;
}
#container{ 
    padding:5%;
    height:800px
}
#main{
    height:2000px
}

#content{
    width:790px;
}
.columns{
    width:375px;
    padding:5px;
}
#footer{
    width:792px;
    height:27px;
    background:url('img/footer.png');
}
.separator{
    clear:both;
}
.bande{
    height:40px;
}
.grey{color:#666666;}
.blue{color:#0068B1;}
.lrBorder{
    border-left:1px solid #B7B7B7;
    border-right:1px solid #B7B7B7;
}
.fs14{
    font-family:"Trebuchet MS","DejaVuSans";
    font-size:14px;
}
.fs16{
    font-family:"Trebuchet MS","DejaVuSans";
    font-size:16px;
}
.fs24{
    font-family:"Trebuchet MS","DejaVuSans";
    font-size:1.5em;
}
.left90{ padding-left:90px; }
.left30{ padding-left:30px; }
.top3{ padding-top:3px; }
.top30{ padding-top:30px; }
.center{ text-align:center; }
.fleft{ float:left; }

#informatique {
    cursor:pointer;
    width:361px;
    height:106px;
    margin-top:100px;
    background:url('../img/info_sprite.png') no-repeat 0px 0px;
/*    background-position:center;*/
}
#informatique:hover{
    background:url('../img/info_sprite.png') no-repeat 0px -106px;
/*    background-position:center;  */
}

#electrotechnique {
    cursor:pointer;
    width:450px;
    height:104px;
    background:url('../img/electro_sprite.png') no-repeat 0px 0px;
 /*   background-position:center;*/
}
#electrotechnique:hover{
    background:url('../img/electro_sprite.png') no-repeat 0px -104px;
/*    background-position:center;  */
}

#productions a {
    display:block;
    cursor:pointer;
    width:407px;
    height:109px;
    background:url('/img/prod-sprite.png') no-repeat 0px 0px;
/*    background-position:center; */
}
#productions a:hover{
    background:url('/img/prod-sprite.png') no-repeat 0px -109px;
  /*  background-position:center;  */
}
.description{
		display: none;
    position:absolute;
    top:30%;
    left:50%;
    width:364px; 
    z-index:10;
    text-align:center;
}
.cadre{
    width:464px;

}
.cadre_cbg{
    width:90px;
    height:90px;
    background:url('../img/cadre_cbg.png');
    float:left;
}
.cadre_cbd{
    width:90px;
    height:90px;
    background:url('../img/cadre_cbd.png');
    float:left;
}
.cadre_chd{
    width:90px;
    height:90px;
    background:url('../img/cadre_chd.png');
    float:left;
}
.cadre_chg{
    width:90px;
    height:90px;
    background:url('../img/cadre_chg.png');
    float:left;
}
.cadre_h{
    background:url('../img/cadre_h.png') ;
    background-repeat:repeat-y;
    width:50px;
    float:left;
}
.cadre_v{
    background:url('../img/cadre_v.png') ;
    background-repeat:repeat-x;
    height:50px;
    width:284px;
    float:left;
}
.cadre_vb{
    background:url('../img/cadre_v.png') ;
    background-repeat:repeat-x;
    height:94px;
    width:284px;
    float:left;
    background-position:bottom;
}
.comment{
    color:rgba(105,155,155,0.6);
    width:344px;
    float:left;
    background:url('../img/cadre_t.png') ;
    background-repeat:repeat-y;
    padding-right:60px;
    padding-left:60px;
}
.contact{
    float:right;
    width:220px;
    margin-top:50px;
    position:relative;
    bottom:0px;
/*    background:url("../img/text3775.png") no-repeat 80%; */
    
}
.clien{
 cursor:pointer;   
}
a{
 text-decoration:none   
}
@media (max-width: 640px) {

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

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
 img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 main, header {
   float: none;
   width: auto;
 }

 /* masquer les éléments superflus */
 .hide_mobile {
   display: none !important;
 }

 /* Un message personnalisé 
 body:before {
   content: "Version mobile";
   display: block;
   color: #777;
   text-align: center;
   font-style: italic;
 }*/
#title{
    padding-top:20px
}
#informatique{
    margin-top:0;
}
.contact{
    margin-top:0;
}
.cadre{
    width:384px;
    background-color:rgba(250,250,250,0.7);
}

.cadre_v,.cadre_vb{
     width:204px;
}
.description{
    left:10%;
    width:384px;

}
.comment{
    width:264px;
    background:url('../img/cadre_tmob.png') ;
    color:#000
}

#informatique {
    cursor:pointer;
    width:180px;
    height:53px;
    margin-top:10px;
    background:url('../img/info_over.resized.png') no-repeat;
}
#informatique:hover {
    background:url('../img/info_over.resized.png') no-repeat;
}
#electrotechnique {
    cursor:pointer;
    width:225px;
    height:52px;
    background:url('../img/electro_over.resized.png') no-repeat;
}
#electrotechnique:hover {
     background:url('../img/electro_over.resized.png') no-repeat;
}
#productions a {
    display:block;
    cursor:pointer;
    width:204px;
    height:55px;
    background:url('/img/prod-hover.resized.png') no-repeat;
}
#productions a:hover {
     background:url('/img/prod-hover.resized.png') no-repeat;
}

}
@media (max-width:640px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio:2) {
  body {
   -webkit-text-size-adjust: 70%;
  }
}