@charset "utf-8";
/******************** Entête UTF-8 ******************\
*
*	fichier			: public/projet/css/main.css
*	projet			: EMB
*	version			: 1.0.11 2015-04-07 14:21 NC
*
\****************************************************/

@import "reset.css";
@import "960.css";

/****************************************************************/
/*	Constance													*/
/*	color: #887f6f;												*/
/*	font: 700 15px/18px 'Source Sans Pro', sans-serif; Bold		*/
/*	font: 600 15px/18px 'Source Sans Pro', sans-serif; SemiBold	*/
/*	font: 400 15px/18px 'Source Sans Pro', sans-serif; Normal	*/
/*	font: 300 15px/18px 'Source Sans Pro', sans-serif; Light	*/
/****************************************************************/

/* gen CSS */
.ultraBrown {background:#b2aa7e; color:white;font-weight: 300; padding:30px 0;}
.lightBrown {background:#887f6f; color:white;font-weight: 300; padding:30px 0;}
.darkBrown {background :#585144; color:white;font-weight: 300; padding:30px 0;}
.newBrown {background:#706859; color:white;font-weight: 300; padding:30px 0; border-bottom:60px solid #887f6f;}
.petitGrisPale {background: #FCFAF5;}
body {background:#fff; font: 400 15px/18px 'Source Sans Pro', sans-serif;}

p {margin:1em 0 1.5em;}
.ultraBrown strong,
.lightBrown strong,
.darkBrown strong,
.newBrown strong{font-weight: 600;}
.ultraBrown a,
.lightBrown a,
.darkBrown a,
.newBrown a  {color:white;}
.lightBrown a:hover,
.darkBrown a:hover {color:#b2aa7e;}
.ultraBrown a:hover,
.newBrown a:hover {color:#585144;}

a {color: #887f6f;}
a:hover {color:#585144;}
a.clickHere {font: 300 15px/18px 'Source Sans Pro', sans-serif; text-transform:uppercase; padding:5px 10px; background:white;color: #887f6f;}
a:hover.clickHere {background:#b2aa7e; color:white;}
a.clickHere.lightBrown {color:#fff;background:#887f6f;}
a:hover.clickHere.lightBrown {color:#fff;background:#b2aa7e;}

/* HEADER */
.main_menu {height:33px; line-height:33px;}
.menuright {float:right; width:398px;}
.main_menu li {float:left; margin-right:15px;}
.menuright li {float:right;}
.main_menu li.last {margin-right:0;}
.main_menu li a {font-size:12px; text-transform:uppercase;}
header .facebook {background: url(../img/sprite.png) no-repeat -2px 0; display:block; width:14px; height:23px; text-indent: -9999px;margin-top: 4px;}
header a:hover.facebook {background: url(../img/sprite.png) no-repeat -18px 0;}
.thumbrap {text-align: center; text-transform: uppercase; font-size:12px; margin:0 26px; cursor:pointer;}
.thumbrap h2 {margin:5px 0;}
.thumbrap .thumb {position: relative;width: 140px;overflow: hidden;height: 140px;}
.thumbrap .thumb .mask {background: url(../img/mask.png) no-repeat left top; position:absolute; top:0; left:0; z-index: 20; height: 140px; width:140px;}
.thumbrap .thumb .border { position:absolute; top: -10px;left: -10px;z-index: 10;height: 160px;width: 160px;
	-webkit-transition: all 200ms ease-in;
	-moz-transition   : all 200ms ease-in;
	-ms-transition    : all 200ms ease-in;
	-o-transition     : all 200ms ease-in;
	transition        : all 200ms ease-in;
}
a:hover.thumbrap .thumb .border {top: 0px;left: 0px;height: 140px;width: 140px;}
.thumbrap .thumb .imgbot {position:absolute; top:0; left:0; z-index: 5; width:100%;
	-webkit-transition: all 200ms ease-in;
	-moz-transition   : all 200ms ease-in;
	-ms-transition    : all 200ms ease-in;
	-o-transition     : all 200ms ease-in;
	transition        : all 200ms ease-in;
}
a:hover.thumbrap .thumb .imgbot {width:105%;}

/* FOOTER */
footer {margin-top: 30px;}
footer .sousmenu2 h3,
footer .sousmenu a {font: 600 14px/16px 'Source Sans Pro', sans-serif; display:block; margin:0 0 30px; text-transform:uppercase;}
footer .sousmenu2 h3 {margin:0 0 10px; color: #887f6f;}
footer .sousmenu2 a {font: 300 14px/16px 'Source Sans Pro', sans-serif; display:block; margin:0 0 10px;}
footer .sousmenu2 a strong {font: 600 14px/16px 'Source Sans Pro', sans-serif;}
footer h4,
footer p {font: 400 16px/20px 'Source Sans Pro', sans-serif;color: #887f6f;}
footer h4 {text-transform:uppercase;}
footer .facebook {background: url(../img/sprite.png) no-repeat 0 -109px; display:block; width:44px; height:45px; text-indent: -9999px;margin-left: 105px;}
footer .APCHQ {background: url(../img/apchq.png) no-repeat left top; display:block; width:150px; height:66px; text-indent: -9999px;margin-left: 15px;margin-top: 65px;}
footer .ultraBrown {height:60px;  margin:30px 0; font: 300 15px/60px 'Source Sans Pro', sans-serif; padding:0;}
footer .ultraBrown a {color:white;}
/* MENU */


/*slider*/
.slider { overflow: hidden; position: relative; width: 1200px; margin:0 auto;height: 530px;}
.slider .viewport { float: left; width: 1200px; height: 530px; overflow: hidden; position: relative;background: #ccc8b3; }
.slider .overview { list-style: none; position: absolute; left: 0; top: 0; }
.slider .overview .slide { overflow: hidden; width:1200px; float:left; position:relative; text-align: center;}
.slider .bullets {position:absolute; bottom: 20px; z-index: 30; left:130px;}
.slider .bullets li {float:left; margin-right:4px;}
.slider .bullets a {background: url(../img/sprite.png) no-repeat -23px -55px; width:13px; height:13px; display:block; text-indent:-9999px;}
.slider .bullets a.active,
.slider .bullets a:hover {background: url(../img/sprite.png) no-repeat -2px -55px; }
.slider .logo,
.slider .slogan {background: url('../img/bgCar.png') repeat; position:absolute; z-index: 10;width: 100%;}
.slider .logo {text-align: center;top: 0;height: 79px; padding:15px 0;left:0;}
.slider .slogan {bottom:0; height:60px;}
.slider .slogan h2,
.slider .slogan h3 {position:absolute; bottom:7px; color:#887f6f; right:130px; height:20px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:15px;
	font-weight: 300;
	line-height:20px;
}
.slider .slogan h2 {font-size:32px; text-transform:uppercase;  bottom:27px; height:25px; line-height:30px;}

.fixSlider .slogan {width: 682px; bottom: 155px; right:-1200px; height: 90px;}
.fixSlider .slogan h2,
.fixSlider .slogan h3 {right: inherit; left: 10px; text-transform:uppercase;}
.fixSlider .slogan h2{font: 700 40px/44px 'Source Sans Pro'; bottom: 59px;}
.fixSlider .slogan h3 {font: 400 40px/44px 'Source Sans Pro'; bottom: 27px;}

.realisations {height: 780px;}
.realisations .logo {overflow: hidden; height:51px; background: none; padding: 0;}
.realisations .viewport { height: 640px;}
.realisations .slogan {background:#887f6f; color:#fff; height:60px; bottom: 80px;}
.realisations .slogan h2,
.realisations .slogan h3 {color:#fff; left:130px;;bottom:4px;}
.realisations .slogan h2 {font-size:30px; text-transform:uppercase;  bottom:28px;}
.realisations .desc {font-size: 14px; position: absolute; top : 645px; left: 436px; width: 640px; height: 50px; z-index: 50; color: #fff; overflow:hidden; display:table; text-transform: none}
.realisations .cell {display:table-cell; vertical-align: middle;}
.realisations .bullets {background:#ccc8b3; height:80px; width:1200px; bottom: 0; left: 0;}
.realisations .wrapBullets {margin-left: auto;margin-right: auto; overflow:hidden; width: 960px; height:80px; position:relative;}
.realisations .wrapBullets ul{position: absolute; left:0; top:0;}
.realisations .bullets li {float:left; margin-right:0;}
.realisations .bullets a {background:none; width:80px; height:80px; text-indent:0; position:relative;}
.realisations .bullets a span {background: url('../img/bgCar2.png') repeat; position:absolute; top:0; left:0; width:80px; height:80px; display:none;}
.realisations .bullets a.active,
.realisations .bullets a:hover {background:none;}
.realisations .bullets a.active span,
.realisations .bullets a:hover  span{display:block;}
.realisations .bullets .btn {position:absolute; top:0; width:31px; display:none; text-indent:-9999px; z-index: 9; }
.realisations .bullets .btn.active {display:block;}
.realisations .bullets .btn.previous {left:105px;background: url(../img/sprite.png) no-repeat 0 -244px}
.realisations .bullets .btn.next {right:105px; background: url(../img/sprite.png) no-repeat 0 -324px}

.slider .btn2 {position:absolute; top:40%; width:46px; display:none; text-indent:-9999px; height:80px; z-index: 999; }
.slider .btn2.active {display:block;}
.slider .btn2.previous {left:100px;background: url(../img/sprite.png) no-repeat 0 -405px}
.slider .btn2.next {right:100px; background: url(../img/sprite.png) no-repeat 0 -485px}

/*contact_form*/
#contact_form label {float:left; width:140px; margin-right:20px; margin: 2px 0;}
#contact_form input[type='text'],
#contact_form textarea {float:left; width:300px; border:none; padding:5px;margin: 2px 0;}
#contact_form a, #contact_form button {font: 300 15px/18px 'Source Sans Pro', sans-serif; cursor:pointer; padding: 5px 0;margin-top: 2px; text-transform:uppercase; text-align:center; display:block; width:152px; float:left; background:white; color: #887f6f;}
#contact_form button {height: 28px;padding: 0;}
#contact_form a.remove {margin-right:6px;}
#contact_form a:hover { background:#b2aa7e; color: #fff;}
#contact_form textarea {height: 150px; margin: 2px 0;}
.erreur {margin: 20px 0; font-size: 19px; color: rgb(255, 190, 108);}
.notification {width: 420px; height: 300px; background: #fff; color: #887f6f; padding: 20px 60px; font: 300 30px/30px 'Source Sans Pro', sans-serif;}
.errorform{background:#f8d2d2}
.errorformCaptcha, .erreurCaptcha {color:#f8d2d2}
.erreurCaptcha {margin-top: 10px !important;}
.asterform{float: right;margin-top: 20px;margin-right: 90px;}

.whiteSpacer {height:460px; width:3px; background:white; position:absolute; top:0; left:598px; z-index: 9}


.unTemoignage {position: relative; margin: 50px 0;}
.bracket {font: 700 160px/45px 'Source Sans Pro', sans-serif; color:#887f6f; position:absolute; width:80px; height:80px;}
.rightB {left:-80px;top: -30px;}
.leftB {right:-80px;bottom: -30px;}
.leTemoignage {font: 400 16px/20px 'Source Sans Pro', sans-serif; color:white;}
.laPersonne {font: 300 16px/20px 'Source Sans Pro', sans-serif; color:white; text-align:right;}