/* CSS Document */

body {
	background-color : #fff;
	font-family: 'OpenSansRegular', Verdana, Geneva, sans-serif;
	font-size:12px;
}

/************************** Header **************************/
#header{
	font-family:'OstrichSansRoundedMedium', Helvetica, Arial, sans-serif;
	font-size : 24px;
	line-height: 24px;
}

#header img {
	margin : 20px;	
}

#bt0, #bt1, #bt2, #bt3, #bt4, #bt5 {
	border-right:1px solid #888c92;	
}

#bt0 a:link, #bt1 a:link,#bt2 a:link,#bt3 a:link,#bt4 a:link,#bt5 a:link, #bt6 a:link {background-repeat:no-repeat; background-position:center top; height:40px; }
#bt0 a:hover, #bt1 a:hover,#bt2 a:hover,#bt3 a:hover,#bt4 a:hover,#bt5 a:hover, #bt6 a:hover {background-position:center -42px;}

#bt0 a:link {width:40px; background-image:url(/img/interface/n-home.gif); }
#bt1 a:link {width:45px; background-image:url(/img/interface/n-news.gif); }
#bt2 a:link {width:110px; background-image:url(/img/interface/n-karma.gif); }
#bt3 a:link {width:95px; background-image:url(/img/interface/n-competence.gif); }
#bt4 a:link {width:55px; background-image:url(/img/interface/n-client.gif); }
#bt5 a:link {width:70px; background-image:url(/img/interface/n-portfolio.gif); }
#bt6 a:link {width:65px; background-image:url(/img/interface/n-contact.gif); }

#header .nav-tabs > li, #header .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
	 height:25px;
	 overflow:visible;
}

#header .nav-tabs, #header .nav-pills {
    text-align:center;
	margin-bottom:30px;
}
.nav-tabs > li > a, .nav-pills > li > a {
	padding-right: 15px;
	padding-left: 15px;
	
}
.nav-pills > li > a {
	padding-top: 0px;
	padding-bottom: 0px;	
}

.nav > li > a {
	color: #888c92; 
}
.nav > li > a:hover, .nav-pills > .active > a, .nav-pills > .active > a:hover {
	
	background : none;
	color : #4bb9d8;
	background-position:center -42px;
}	
#bt0.active a:link {background-position:center -42px; }
#bt1.active a:link {background-position:center -42px; }
#bt2.active a:link {background-position:center -42px; }
#bt3.active a:link {background-position:center -42px; }
#bt4.active a:link {background-position:center -42px; }
#bt5.active a:link {background-position:center -42px; }
#bt6.active a:link {background-position:center -42px; }

/****************************************************/
h1, #slogan {
	font-family:'OstrichSansRoundedMedium', Helvetica, Arial, sans-serif;	
	color: #000;
	font-weight:normal;
}

h1 {
	font-size: 34px;
	line-height: 24px;
	color : #4bb9d8;
	}
	
#contact h1, #portfolio-right h1 {
	font-size: 50px;
	line-height: 48px;
	}

#contact h1 {
	border-bottom : #000 1px solid;
}
#contact h2, #portfolio-left h2 {
	color : #fff;
	font-size : 12px;
	line-height: 14px;
	}
	
#contact h2, #portfolio-right h1, #portfolio-right h2 {
	text-align : right;
	color : #fff;
}

#slogan { 
	font-size: 22px;
	line-height: 24px;
	text-align:right;
	}

h2 {
	font-family:'OpenSansBold', Helvetica, Arial, sans-serif;	
	color: #000;
	font-size:13px;
	line-height: 16px;
	text-transform:uppercase;
	}
	
.col-text h2 {
	color: #fff;
	margin-bottom:3px;	
	margin-top : 25px;
}

#blocs h2 {
	margin-bottom : 3px;	
}

h3 {
	font-family:'OpenSansLight', Helvetica, Arial, sans-serif;	
	color: #fff;
	font-size:14px;
	line-height: 14px;
	text-transform:uppercase;
	}
	
h4 {
	font-family:'OpenSansBoldItalic', Helvetica, Arial, sans-serif;	
	color: #000;
	font-size:14px;
	line-height: 15px;
	margin-bottom: 2px;
	margin-top:0;
	}

p {
	font-size : 12px;
	line-height:14px;	
}

a {
	text-decoration : none;	
	color : #4bb9d8;
}

a:hover {
	text-decoration : none;	
	color : #333;
}
/************************** content **************************/

#content .container {
	background : repeat center top;
	color: #fff;
	min-height: 540px;
}
.slider img.slide {
	max-width :1403px;
	max-height:446px;
	margin:0 auto;	
}
#video {
	position: absolute;
}
#content-text{
	position:relative;	
}
.col-text {
	padding : 50px 40px 0 30px ;	
}

.col-text ul li { font-size:12px; line-height:14px;}

#clients {
	padding : 10px 0;
	color: #888c92;
	font-size : 12px;
	line-height:18px;
	text-transform:uppercase;
	background:url(/img/illu/opacity.png) repeat;
	
}

#clients ul {
	list-style-type: none; 
}

#slogan2 {
	text-align:right;
	padding:170px 30px 0 30px;
 }
#slogan2-a {
	font-family:'OpenSansBold', Helvetica, Arial, sans-serif;	
	color: #fff;
	font-size:18px;
	line-height: 20px;
	text-transform:uppercase;
	}
#slogan2-b {
	font-family:'OstrichSansRoundedMedium', Helvetica, Arial, sans-serif;	
	color: #fff;
	font-size:60px;
	line-height: 48px;
	text-transform:uppercase;
	}

#portfolio-left {
	padding : 0 0 15px 30px;
	margin-top : 20px;
	
}
	
#portfolio-right  {
	padding : 0 30px 0 20px;
	margin-top: 20px;	
	margin-bottom : 15px;
	border-left: 1px #fff solid;
	text-align:justify;
}

.portfolio-img {
	padding : 0 20px;	
	margin-bottom : 15px;
}

.form-horizontal .controls {
	margin-left: 0px;
}

.form-horizontal .control-label {
	text-align: left;
}

.input-xlarge {
width: 350px;
}

.form-horizontal .control-label {
	width: 90px;
}
/****** news******/
.listElt {padding:11px 0;}
.listElt h3 {margin-top:0;}
.date {font-size:11px;}
.pagination ul > li > a {padding:0 7px; line-height:22px;}
img.pull-left {margin-right: 15px;}
img.pull-right {margin-left: 15px;}

.liste a {color: #888c92;display:block; }
.liste li {background-color:#fff;
 -webkit-transition-property: background-color;
 -webkit-transition-duration: 1s;
 -moz-transition-property: background-color;
 -moz-transition-duration: 1s;
 transition-property: background-color;
transition-duration: 1s;}

.liste li:hover {background-color:#efefef;}
/************************** blocs **************************/
#blocs {
	color : #888c92;
	margin:20px 20px 0 20px;	
}

#blocs .border {
	border-bottom : #000 1px dotted;
}

.bouton {
	/*padding: 10px 0;*/
	margin:10px 0 0 0;
	text-align:right;
	height:20px;
}

.bouton a {
	display:block;
	float:right;
	width:16px;
	height:16px;
	overflow:hidden;
	background-image:url(../img/interface/icone-plus.png); background-repeat:no-repeat;
	-webkit-transition: all  0.3s ease-out; 
	-moz-transition: all  0.3s ease-out; 
	-ms-transition: all  0.3s ease-out; 
	-o-transition: all  0.3s ease-out; 
	 transition: all  0.3s ease-out; 
	}
	
.bouton a:hover {
	padding-right:80px;
	background-color:#4bb9d8;
}

/**************** TEST **************/

.boutontest a {
	display:block;
	width:14px;
	height:14px;
	overflow:hidden;
	text-indent:18px;
	color:#fff; font-size:11px; font-style:italic; line-height:14px;
	white-space: nowrap;

	background-image:url(../img/interface/icone-moins.jpg); background-repeat:no-repeat;
	-webkit-transition: all  0.3s ease-out; 
	-moz-transition: all  0.3s ease-out; 
	-ms-transition: all  0.3s ease-out; 
	-o-transition: all  0.3s ease-out; 
	 transition: all  0.3s ease-out; 
	}
	
.boutontest a:hover {
	padding-right:145px;
	background-color:#4bb9d8;
}


#bloc1, #bloc2, #bloc3{
	padding-right : 10px;	
	padding-left : 6px;
}

/************************** footer **************************/


#footer {
	background: url('/img/interface/footer-fd.jpg') no-repeat top center;
	color : #888c92;
	padding-bottom:20px;
	padding-top : 15px;
}

#footer .nav {
	font-size : 9px;
	text-transform:uppercase;
	margin-top: 30px;	
}

#footer .nav-tabs > li > a, #footer .nav-pills > li > a {
	padding-right: 4px;
	padding-left: 4px;
}

#footer #slogan {
	margin-top: 30px;		
}

#footer span {
	color : #888c92;
}

#footer #adresse {
	font-size : 11px;
	line-height:14px;	
}

#footer #réseaux img {
	padding-top: 75px;	
}

/* Responsive
-------------------------------------------------- */

/* Desktop large
------------------------- */
@media (min-width: 1200px) {
}

@media (min-width: 980px) {
  .container{max-width:920px; margin: 0 auto;} 
}

/* Desktop
------------------------- */
@media (max-width: 980px) {
	
}

/* Tablet to desktop
------------------------- */
@media (min-width: 768px) and (max-width: 980px) {
  /* Remove any padding from the body */
  body {
    padding-top: 0;
  }
  .nav-pills > li > a{
	/*font-size:12px;*/
  }
  #blocs div.container div.row-fluid {background:none !important;}
}

/* Tablet
------------------------- */
@media (max-width: 767px) {
  /* Remove any padding from the body */
  body {
    padding-top: 0;
  }
  .nav-pills{
	float:none;
	padding-right:1px;
  }
  
  #bt0, #bt1, #bt2, #bt3, #bt4, #bt5 { border-right:none;} 
  
  #slogan2 {padding: 30px;} 
  
  .nav-pills li{
    width: 100%;
	float:none;
	background-color:#f7f7f7;
  }
  .nav-pills > li > a{
	border-bottom:0px;
	border-right:none;
  }
  #footer div div div {
	display:inherit;  
  }
  #footer img {
	margin:3px 10px 0;  
  }
  #subfooter {
	padding-left:10px;
	padding-right:10px;
  }
  #blocs div.container div.row-fluid {background:none !important;}
  #content div.container {background:none ; }
  #portfolio-left, #portfolio-left h3, #portfolio-left h2 {color:#888c92;}
  #portfolio-right {color:#888c92;}
  #portfolio-right h1 {color:#4bb9d8;}
  #portfolio-right h2 {color:#888c92;}
  
}

/* Landscape phones
------------------------- */
@media (max-width: 480px) {
  /* Remove padding above jumbotron */
  body {
    padding-top: 0;
  }
  #blocs div.container div.row-fluid {background:none !important;}
  #content div.container {background:none ;}
  #portfolio-left, #portfolio-left h3, #portfolio-left h2 {color:#888c92;}
  #portfolio-right {color:#888c92;}
  #portfolio-right h1 {color:#4bb9d8;}
  #portfolio-right h2 {color:#888c92;}
  
}