/*
WebDesigner : Charlotte Téchy (charlotte@charlin.be)
Integrator & Developper : Julien Winant (julien@charlin.be)
Company Name: Charlin
Company URL: http://www.charlin.be
*/


/**************************************************************************
* FONT-FACE *
**************************************************************************/
@import url("../fonts/Aller/stylesheet.css");


/**************************************************************************
* GENERALS STYLES *
**************************************************************************/

body {
	font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
	background: #fcfcfc url(../img/bandesCotes.png) center top repeat-x;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
}

strong {
	font-weight: bold;
}

.hiddenZone { display: none; }

.container {
	width: 960px;
	margin: 0 auto;
	position: relative;
}

.clear { clear: both; }

.col-3 {
	width: 300px;
	margin-right: 20px;
	float: left;
}

#mainContactUs {
	position: fixed;
	margin-left: 920px;
	top: 180px;
	z-index: 10;
	width: 129px;
	height: 67px;
	background: url(../img/contactUs.png) no-repeat;
	text-indent: -9999px;
}

.mobile #mainContactUs {
	display: none;
}

/**************************************************************************
* BANNER *
**************************************************************************/

#banner {
	position: relative;
	background: url(../img/bandesMilieu.png) center top no-repeat;
	height: 262px;
}

#banner .container {
	height: 262px;
}

#banner #bigLogo { display: inline-block; }

#banner #bigLogo a {
	display: block;
	text-indent: -9999px;
	width: 122px;
	height: 90px;
	background: url(../img/logoCharlin.png) no-repeat;
	position: absolute;
	top: 15px;
	left: 162px;
}

#banner h1 { display: inline-block; }

#banner h1 a {
	display: block;
	text-indent: -9999px;
	width: 128px;
	height: 36px;
	background: url(../img/textLogo.png) no-repeat;
	position: absolute;
	top: 198px;
	left: 77px;
}

#banner h2 {
	font-family: 'Aller';
	position: absolute;
	top: 15px;
	left: 312px;
	text-align: center;
	font-size: 47px;
	width: 500px;
	color: #fff;
	text-shadow: 0 4px 0 #a8a8a8, 0 7px 2px rgba(0,0,0,.5);
	text-transform: lowercase;
}

#banner #main-menu {
	position: absolute;
	top: 214px;
	right: 80px;
}

#banner #main-menu li {
	display: inline-block;
	font-family: 'Aller';
	margin-left: 20px;
}

#banner #main-menu li a {
	text-decoration: none;
	color: #545454;
	font-size: 16px;
	text-transform: lowercase;
}

#banner #main-menu li a:hover {
	color: #000;
}

#banner #main-menu li.active a {
	color: #e04c1b;
}


/**************************************************************************
* SLIDER *
**************************************************************************/


#navSlider li a {
	display: block;
	width: 23px;
	height: 39px;
	background-repeat: no-repeat;
	background-position: center center;
	
	position: absolute;
	top: 110px;
	z-index: 3;
	
	opacity: .5;
}

#navSlider li#leftArrow a { background-image: url(../img/leftArrow.png); left: 15px; }
#navSlider li#rightArrow a { background-image: url(../img/rightArrow.png); right: 15px; }

#navSlider li a:hover {
	opacity: .7;
}

#slider {
	position: relative;
}

#slider .container {
	width: 960px;
	margin: 20px auto 0;
	position: relative;
}

#slider #bgSlider {
	position: absolute;
	top: -12px;
	left: 50%;
	
	width: 864px;
	height: 300px;
	
	margin-left: -432px;
	
	background: #393939;
	border-radius: 5px 5px 0 0;
	
	z-index: 1;
}

#slider .col_left {
	width: 432px;
	float: left;
	margin-left: 65px;
}

#slider .col_right {
	width: 350px;
	float: right;
	margin-right: 50px;
}

#slider h1 {
	font-family: 'Aller';
	color: rgba(255,255,255,.6);
	font-size: 32px;
	background: url(../img/starTitle.png) 20px 5px no-repeat;
	padding-left: 55px;
	text-transform: lowercase;
}

#slider h2 {
	font-family: 'Aller';
	color: #fff;
	font-size: 16px;
	margin: 20px 0;
	text-transform: lowercase;
}

#slider ul#realSlider {
	position: relative;
	border-top: 4px solid rgba(0,0,0,.33);
	z-index: 2;
}

#slider ul#realSlider > li {
	padding: 20px 0 0 0;
	width: 960px;
	height: 256px;
	
}

#slider ul#realSlider h1 {
	margin-left: 50px;
} 


/**************************************************************************
* SLIDER - CONTACT SLIDE *
**************************************************************************/

#slider .contactSlide {
	background: #5a4964 url(../img/motifSlide.png);
}

#slider .contactSlide .staff {
	display: inline-block;
	width: 187px;
	height: 82px;
}

#slider .contactSlide .staff.online {
	background: url(../img/staffZoneNormal.png);
	cursor: pointer;
}

#slider .contactSlide .staff.online:hover {
	background: url(../img/staffZoneHover.png);
}

#slider .contactSlide .julien {
	margin-right: 15px;
}

#slider .contactSlide .staff ul {
	margin: 13px;
	padding-left: 48px;
	font-size: 13px;
	line-height: 150%;
	color: #fff;
}

#slider .contactSlide .julien ul { background: url(../img/mediumJulien.png) left top no-repeat; }
#slider .contactSlide .charlotte ul { background: url(../img/mediumCharlotte.png) left top no-repeat; }

#slider .contactSlide .staff li.offline { color: #c7acd6; }
#slider .contactSlide .staff li.online { color: #89cd28; }

#slider .contactSlide .legend {
	color: #bdacc6;
	font-size: 12px;
	margin: 20px 0;
	line-height: 150%;
}

#slider .contactSlide h3.mailLink {
	font-weight: bold;
	color: #fff;
	font-size: 13px;
}

#slider .contactSlide h3.mailLink a {
	display: inline-block;
	background: url(../img/mailIcon.png) left center no-repeat;
	line-height: 20px;
	height: 18px;
	padding-left: 35px;
	color: #fff;
	text-decoration: none;
	margin-left: 5px;
}

#slider .contactSlide h3.mailLink a:hover {
	text-decoration: underline;
}


#slider .contactSlide a.bigBtn {
	margin-top: 10px;
	margin-bottom: 30px;
}

#slider .realisationsSlide { background: #4d5b69 url(../img/motifSlide.png); }

#slider .realisationsSlide .col_left { width: 576px; }

#slider .realisationsSlide .col_right { width: 256px; position: relative; top: -33px; }

#slider .realisationsSlide h2 {
	line-height: 150%;
	margin-bottom: 12px;
}

#slider .realisationsSlide p {
	color: #fff;
	font-size: 13px;
	line-height: 150%;
	margin-bottom: 12px;
}

#slider .realisationsSlide #screens li {
	position: relative;
	width: 240px;
	height: 173px;
	margin-right: 48px;
	float: left;
	margin-top: 40px;
}

#slider .realisationsSlide #screens li .imac {
	position: absolute;
	display: block;
	width: 189px;
	height: 173px;
	background: url(../img/little-imac.png) no-repeat;
}

#slider .realisationsSlide #screens li .mobile {
	position: absolute;
	display: block;
	width: 94px;
	height: 78px;
	background: url(../img/little-ipad.png) no-repeat;
	top: 84px;
	left: 147px;
}

#slider .realisationsSlide #screens img {
	position: relative;
}

#slider .realisationsSlide #screens .imac img { width: 168px; top: 9px; left: 9px; }
#slider .realisationsSlide #screens .mobile img { width: 78px; top: 7px; left: 8px; }

#slider .realisationsSlide a.bigBtn {
	font-size: 14px;
	height: 23px;
	line-height: 20px;
}

/**************************************************************************
* PACKS *
**************************************************************************/

#packs {
	margin-top: 55px;
}

#packs h1 {
	font-family: 'Aller';
	color: #535353;
	font-size: 32px;
	background: url(../img/3lines.png) center 8px repeat-x;
	padding-left: 55px;
	text-transform: lowercase;
}

#packs h1 span {
	display: inline-block;
	background: #fff url(../img/shakerIcon.png) 13px center no-repeat;
	padding: 0 8px 0 42px;
}

#packsList {
	margin-top: 30px;
	margin-left: 5px;
}

#packsList li {
	float: left;
	display: block;
	width: 168px;
	margin: 0 10px;
	margin-bottom: 50px;
}

#packsList .title {
	display: block;
	font-size: 19px;
	color: #545454;
	text-align: center;
	margin-bottom: 15px;
	font-weight: bold;
}

#packsList .description {
	text-align: center;
	font-size: 12px;
	line-height: 150%;
	color: #8c8c8c;
	margin-bottom: 10px;
}

#packsList .description .img {
	display: block;
	margin: 0 auto 10px;
	text-align: center;
	height: 50px;
}

#packsList a {
	margin: 0 auto;
	display: block;
	width: 137px;
	font-family: 'Aller';
	text-transform: lowercase;
	font-size: 13px;
	color: #fff;
	background: #d4195b;
	border-radius: 3px;
	height: 20px;
	line-height: 18px;
	text-decoration: none;
	text-align: center;
	box-shadow: 0 4px 0 #880835, 0 8px 0 rgba(0,0,0,.2);
}

#packsList a:active {
	position: relative;
	top: 4px;
	box-shadow: inset 0 4px 0 rgba(0,0,0,.2);
}


/**************************************************************************
* QUI SOMMES-NOUS - BECHARLIN *
**************************************************************************/

#whoAreWe {
	position: relative;
	margin-top: 20px;
	padding-top: 70px;
	margin-bottom: 105px;
}

#bg1WhoAreWe {
	position: absolute;
	background: #39a89f;
	width: 864px;
	height: 426px;
	top: 0;
	left: 50%;
	margin-left: -432px;
	border-radius: 0 0 7px 7px;
}

#bg2WhoAreWe {
	position: absolute;
	background: #414141 url(../img/bgRightWhoAreWe.png) center top repeat-y;
	height: 360px;
	width: 1000px;
	top: 36px;
	left: 50%;
	margin-left: -500px;
	box-shadow: 0 -4px 0 rgba(0,0,0,.5);
}

#whoAreWe .col_left {
	width: 400px;
	float: left;
	padding-left: 80px;
}

#whoAreWe .col_right {
	width: 254px;
	padding-right: 50px;
	float: right;
}

#whoAreWe h2 {
	font-size: 32px;
	color: #e3a121;
	font-family: 'Aller';
	text-shadow: 0 3px 0 #986d17, 0 6px 0 rgba(0,0,0,.5);
	text-transform: lowercase;
}

#whoAreWe p {
	font-size: 13px;
	line-height: 18px;
	color: #fff;
	margin-top: 18px;
}

#whoAreWe .col_right  p {
	font-size: 12px;
	width: 240px;
	margin-top: -10px;
	margin-bottom: 10px;
}

#whoAreWe a {
	color: #fce156;
	text-decoration: none;
	font-size: 16px;
}

#whoAreWe a:hover {
	text-decoration: underline;
}

#whoAreWe a.mail {
	display: inline-block;
	margin-top: 10px;
	background: url(../img/mailIcon.png) left center no-repeat;
	line-height: 20px;
	height: 18px;
	padding-left: 40px;
}

#whoAreWe ul li {
	font-weight: bold;
	font-size: 12px;
	color: #fce156;
	height: 32px;
	margin-top: 24px;
}

#whoAreWe ul.details {
	margin-left: 41px;
}

#whoAreWe ul.details li {
	height: auto;
	margin-top: 0;
}

#whoAreWe .phoneNumber {
	color: #ffffff;
	font-size: 18px;
}

#whoAreWe ul li.charlotte { background: url(../img/smallCharlotte.png) left center no-repeat; }
#whoAreWe ul li.julien { background: url(../img/smallJulien.png) left center no-repeat; margin-bottom: 18px; }



/**************************************************************************
* FEEDBACK ZONE *
**************************************************************************/

#happyWithUs h2 {
	font-size: 33px;
	font-family: "Aller";
	text-align: center;
}

#happyWithUs p {
	font-size: 14px;
	line-height: 150%;
	text-align: center;
	width: 644px;
	margin: 20px auto;
	color: #545454;
}



/**************************************************************************
* FOOTER *
**************************************************************************/

#colorfullBand {
	margin-top: 70px;
	background: url(../img/colorfullBand.png) repeat-x;
	height: 11px;
	width: 100%;
	position: relative;
	z-index: 6;
}

#footer {
	background: #2e2e2e;
	border-top: 8px solid #2a2a2a;
	padding: 40px 0;
	position: relative;
	z-index: 6;
}

#footer .col_left {
	width: 350px;
	float: left;
	padding-bottom: 20px;
}

#footer .col_right {
	width: 600px;
	float: right;
	position: relative;
	padding-bottom: 20px;
}

#footer a {
	color: #ddd;
	font-family: 'Aller';
	text-decoration: none;
	font-size: 16px;
	line-height: 21px;
	text-transform: lowercase;
}

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

#footer #nav-footer li {
	display: inline-block;
	margin-left: 30px;
}

#footer #nav-footer li:first-child {
	margin-left: 0;
}

#footer #packsNav {
	margin-top: 20px;
}

#footer .staff {
	position: absolute;
	right: 0;
	top: 40px;
	color: #bcbcbc;
	font-size: 13px;
	line-height: 20px;
}

#footer .staff li {
	display: inline-block;
	padding-left: 45px;
	margin-right: 40px;
}

#footer .staff li.julien { background: url(../img/mediumJulien.png) left center no-repeat; }
#footer .staff li.charlotte { background: url(../img/mediumCharlotte.png) left center no-repeat; }

#footer .staff .details li {
	display: block;
	padding-left: 0;
	margin-right: 0;
}

#footer .staff .skypeStatus {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	position: relative;
	top: 4px;
	margin-left: 5px;
}

#footer .staff .skypeStatus.online { background-image: url('../img/skypeOnline.png'); cursor: pointer; }
#footer .staff .skypeStatus.offline { background-image: url('../img/skypeOffline.png'); }

#footer .col_left ul, #footer .col_left a {
	font-family: 'Aller';
	font-size: 14px;
	line-height: 21px;
	color: #afafaf;
	text-transform: lowercase;
}

#footer #logoCharlinFooter {
	display: block;
	width: 144px;
	height: 32px;
	background: url(../img/logoWhite.png) no-repeat;
	text-indent: -9999px;
	margin-bottom: 25px;
}



/**************************************************************************
* MINI-FOOTER *
**************************************************************************/

#miniFooter {
	position: fixed;
	bottom: 0;
	z-index: 5;
	width: 100%;
	height: 60px;
	background: #2e2e2e;
	border-top: 8px solid #2a2a2a;
	font-size: 13px;
	line-height: 150%;
	color: #bcbcbc;
}

.mobile #miniFooter { display: none; }

#miniFooter .copyright p {
	text-align: center;
	margin-top: 6px;
}

#miniFooter .copyright a {
	color: #fce156;
	text-decoration: none;
}

#miniFooter .copyright a:hover {
	text-decoration: underline;
}

#miniFooter .staff {
	height: 37px;
	margin-top: 6px;
}

#miniFooter .julien { background: url(../img/mediumJulien.png) left center no-repeat; }
#miniFooter .charlotte { background: url(../img/mediumCharlotte.png) left center no-repeat; }

#miniFooter .staff ul {
	margin-left: 40px;
	display: inline-block;
	padding-right: 45px;
}

#miniFooter .staff ul.skypeStatus.online { background: url(../img/mediumSkypeOnline.png) right center no-repeat; cursor: pointer; }
#miniFooter .staff ul.skypeStatus.offline { background: url(../img/mediumSkypeOffline.png) right center no-repeat; }



/**************************************************************************
* MINI FORM TO SEND NUM OF CELL *
**************************************************************************/

.speedTel {
	position: absolute;
	/* right: 0; */
	left: 240px;
	top: 105px;
	width: 360px;
}

.speedTel h1 {
	color: #fff;
	font-family: 'Aller';
	margin-bottom: 10px;
	text-transform: lowercase;
}

form.theTelForm li {
	position: relative;
	display: inline-block;
}

form.theTelForm li.inputZone {
	width: 140px;
	height: 36px;
	margin-right: 13px;
}

form.theTelForm label, form.theTelForm input[type=text] {
	position: absolute;
	width: 125px;
	height: 34px;
	line-height: 34px;
	font-size: 13px;
	padding-left: 15px;
	border: none;
	outline: none;
}

form.theTelForm input[type=text] {
	color: #5d5d5d;
	z-index: 4;
	top: 0;
}

form.theTelForm label {
	display: inline-block;
	color: #8e8e8e;
	line-height: 36px;
	z-index: 5;
	cursor: pointer;
}

form.theTelForm input[type=submit]{
	position: absolute;
	left: -9999px;
}


form.theTelForm li.submitZone {
	width: 40px;
	height: 36px;
	position: relative;
}

form.theTelForm a.submitBtn, #newsletterForm form a.submitBtn {
	display: inline-block;
	background: #6fbf27;
	font-family: "Aller";
	font-size: 13px;
	text-align: center;
	width: 40px;
	height: 34px;
	line-height: 36px !important;
	color: #fff;
	text-decoration: none;
	border-radius: 2px;
	position: absolute;
	top: 0;
	box-shadow: 0 2px 0 #528920, 0 4px 0 rgba(0,0,0,.33);
}

#newsletterForm {
	margin-top: 15px;
	height: 60px;
	position: relative;
}

#newsletterForm form a.submitBtn {
	position: relative;
	margin-left: 15px;
}

#newsletterForm ul#socialBtn li {
	float: left;
	margin-left: 10px;
	margin-top: 10px;
}

#newsletterForm ul#socialBtn li a {
	display: block;
	width: 76px;
	height: 16px;
	text-indent: -9999px;
}

#newsletterForm ul#socialBtn li a.twitter { background: url(../img/twitter_text.png) center 0 no-repeat; }
#newsletterForm ul#socialBtn li a.facebook { background: url(../img/facebook_text.png) center 0 no-repeat; }

#newsletterForm ul#socialBtn li a:hover {
	background-position: center -16px;
}

#newsletterForm form input[type=submit]{ display: none; }

#newsletterForm form li {
	position: relative;
	float: left;
}

#newsletterForm form li label {
	position: absolute;
	left: 10px;
	display: block;
	color: #8e8e8e;
	font-size: 13px;
	line-height: 36px;
	cursor: pointer;
}

#newsletterForm form li input[type=text]{
	display: block;
	width: 191px;
	line-height: 36px;
	height: 32px;
	padding: 0;
	padding: 0 10px;
	font-size: 13px;
	color: #8e8e8e;
	border: 0px solid #a8a8a8;
	border-top: 2px solid #a8a8a8;
	box-shadow: inset 0 2px 5px rgba(0,0,0,.25);
}

#newsletterForm form li input[type=text].error {
	box-shadow: 0 0 10px rgba(255,0,0,.75), inset 0 2px 5px rgba(0,0,0,.25);
	border: inherit;
}

#successNewsletter {
	position: absolute;
	display: none;
	top: 0;
	left: 0;
	line-height: 150%;
	margin: 0;
	font-size: 12px;
	background: #b5e56f;
	padding: 10px;
	width: 300px;
}

#successNewsletter p {
	margin: 0;
	padding: 0;
	width: 300px;
}

form.theTelForm a.submitBtn:hover {
	background: #74d024;
}

form.theTelForm a.submitBtn:active {
	top: 2px;
	box-shadow: inset 0 0 10px rgba(0,0,0,.7) , 0 2px 0 rgba(0,0,0,.33);
}

form.theTelForm .legend {
	margin: 10px 0 0;
	color: #717171;
	font-size: 12px;
}

.speedTel .success,
#contentForm .success { display: none; line-height: 150%; margin: 0; font-size: 12px; background: #b5e56f; padding: 10px; }

#feature-form input[type=text]{
	background: #333;
	color: #fff;
}

#feature-form label {
	color: #fff;
}

/**************************************************************************
* BIG BUTTON STYLES *
**************************************************************************/

a.bigBtn {
	display: inline-block;
	font-family: 'Aller';
	font-size: 24px;
	height: 54px;
	line-height: 50px;
	color: #fff;
	padding: 0 20px;
	border-radius: 3px;
	cursor: pointer;
	text-decoration: none;
	text-transform: lowercase;
}

a.bigBtn.blue {
	background: #186ec4;
	box-shadow: 0 4px 0 #104a83, 0 8px 0 rgba(0,0,0,.15);
}

a.bigBtn.blue:hover {
	background: #257dd5;
}

a.bigBtn.blue:active {
	background: #15599e;
}

a.bigBtn.green {
	background: #6fbf27;
	box-shadow: 0 4px 0 #528920, 0 8px 0 rgba(0,0,0,.15);
}

a.bigBtn.green:hover {
	background: #74d024;
}

a.bigBtn.green:active {
	background: #62af1d;
}

a.bigBtn.white {
	color: #545454;
	background: #ffffff;
	box-shadow: 0 4px 0 #ababab, 0 8px 0 rgba(0,0,0,.15);
}

a.bigBtn.white:hover {
	color: #666;
	background: #fff;
}

a.bigBtn.white:active {
	color: #545454;
	background: #ddd;
}

a.bigBtn.orange {
	background: #c44318;
	box-shadow: 0 4px 0 #832d10, 0 8px 0 rgba(0,0,0,.15);
}

a.bigBtn.orange:hover {
	background: #e85a2b;
}

a.bigBtn.orange:active {
	background: #b33c14;
}

a.bigBtn.lightBlue {
	color: #2a2a2a;
	background: #b9b9b9;
	box-shadow: 0 4px 0 #737373, 0 8px rgba(0,0,0,.2);
}

a.bigBtn.lightBlue:hover {
	background: #dadada;
}

a.bigBtn.lightBlue:active {
	background: #afafaf;
	position: relative;
	top: 4px;
	box-shadow: inset 0 2px 0 rgba(0,0,0,.2) !important;
}

a.bigBtn.getMore {
	background: #dd4527;
	box-shadow: 0 4px 0 #8a2d1b, 0 8px 0 rgba(0,0,0,.15);
	font-size: 13px;
	padding: 0 5px;
	height: 15px;
	line-height: 15px;
	width: 10px;
	text-align: center;
	position: relative;
	top: -2px;
	margin-left: 5px;
}

a.bigBtn.getMore:hover {
	background: #ea6a50;
}

a.bigBtn.getMore:active {
	background: #cb3719;
}

a.bigBtn:active {
	position: relative;
	top: 4px;
	box-shadow: 0 4px 0 rgba(0,0,0,.15);
}

a.bigBtn.getMore:active {
	top: 0px;
}

#content { width: 800px; margin: 30px auto 0; }

#content h1 {
	font-family: 'Aller';
	text-transform: lowercase;
	font-size: 32px;
	text-align: center;
	margin-bottom: 30px;
}

.specialList, .specialDiv {
	border-radius: 9px;
	box-shadow: 0 -8px #dfdfdf, 0 -12px 0 #a9a9a9;
	border: 1px solid #dfdfdf;
	overflow: hidden;
	
}

.specialList > li {
	border-top: 1px solid #dfdfdf;
	background: #f8f8f8;
	padding: 40px 95px;
	overflow: hidden;
}

.specialList li:first-child { border-top: 0; }

.specialList h2, .specialList h3, .specialList h4 {
	font-family: 'Aller';
	color: #383838;
	font-size: 24px;
	text-transform: lowercase;
}


.specialList li h2, .specialList li h4 {
	text-align: center;
}

.specialList h2 {
	color: #2ba802;
}

.specialList.contact h2 {
	color: #de0909;
}

.specialList.packsList h2 {
	color: #683287;
}

.specialList.packsList strong {
	color: #0b88e0;
}
  
.specialList p {
	font-size: 13px;
	line-height: 150%;
	color: #707070;
	width: 446px;
	margin-top: 10px;
}

.specialList .rightContent h3, .specialList .rightContent p, .specialList .rightContent #newsletterForm {
	margin-left: 170px;
}

.specialList li#feature-heart { background: url(../img/feature-heart.png) right 20px no-repeat; }
.specialList li#feature-rocket { background: url(../img/feature-rocket.png) left 15px no-repeat; }
.specialList li#feature-details { background: url(../img/feature-details.png) right 0px no-repeat; }
.specialList li#feature-puzzle { background: url(../img/feature-puzzle.png) left 15px no-repeat; }
.specialList li#feature-paquebot { background: url(../img/feature-paquebot.png) right 10px no-repeat; }
.specialList li#feature-likeit { background: #189fd7; border-top: 0; text-align: center; }
.specialList li#feature-skype { background: url(../img/feature-skype.png) 620px center no-repeat; }
.specialList li#feature-form { background: url(../img/feature-tel.png) 35px center no-repeat; }
.specialList li#feature-postal { background: url(../img/feature-postal.png) 617px center no-repeat; }
.specialList li#feature-print { background: url(../img/feature-print.png) -10px -20px no-repeat; }
.specialList li#feature-web { background: url(../img/feature-web.png) 620px center no-repeat; }
.specialList li#feature-ecommerce { background: url(../img/feature-ecommerce.png) 35px center no-repeat; }
.specialList li#feature-starter { background: url(../img/feature-starter.png) 580px center no-repeat; }
.specialList li#feature-surmesure { background: url(../img/feature-surmesure.png) 520px center no-repeat; }
.specialList li#feature-newsletter { background: url(../img/feature-newsletter.png) 50px center no-repeat; }

.specialList.packsList li#feature-likeit { background: #c10636; }

.specialList.packsList li#feature-likeit .bigBtn { margin: 0 10px }

.specialList li#feature-likeit h4 {
	color: #fff;
}

.specialList li#feature-likeit p {
	text-align: center;
	color: #fff;
	margin: 10px auto 20px;
	width: 513px;
}

.specialList .feature-box {
	margin-top: 20px;
}

.specialList .feature-box .col_left,
.specialList .feature-box .col_right {
	width: 240px;
	float: left;
}

.specialList .feature-box.skypePerson a {
	display: block;
	text-decoration: none;
	margin-right: 20px;
	padding: 20px 15px;
	border: 1px solid transparent;
}

.specialList .feature-box.skypePerson a:hover {
	border: 1px solid #ccc;
	background: #eee;
	border-radius: 3px;
}

.specialList .feature-box.skypePerson a.disabled {
	cursor: default;
}

.specialList .feature-box.skypePerson a.disabled:hover {
	background: none;
	border: 1px solid transparent;
}

.specialList .feature-box.skypePerson a img {
	float: left;
	margin-right: 20px;
}

.specialList .feature-box.skypePerson a h4 {
	font-size: 16px;
	text-align: left;
	color: #e4680d;
}

.specialList .feature-box.skypePerson a span {
	font-size: 14px;
	display: block;
	margin-top: 7px;
	color: #707070;
}

.specialList a.enabled .skypeStatusText { color: #89cd28 !important; }

.specialList #contentForm {
	margin-left: 170px;
}

.specialList #contentForm p {
	margin-left: 0;
	margin-top: 0;
	width: auto;
}

.specialList .feature-box ul li {
	color: #707070;
	font-size: 14px;
	line-height: 150%;
}

.specialList .feature-box ul li a {
	color: #707070;
	text-decoration: none;
}

.specialList .feature-box ul li a:hover {
	color: #333;
	text-decoration: underline;
}


#theTeam {
	box-shadow: 0 -8px #324b4a, 0 -12px 0 #a9a9a9;
	border-radius: 7px;
	background: #35504e url(../img/motifSlide.png);
	color: #fff;
	overflow: hidden;
}

#theTeam h2 {
	font-family: 'Aller';
	color: #e9bd48;
	font-size: 24px;
	text-align: center;
	line-height: 200%;
	/* text-shadow: 0 4px 0 #9c7f30, 0 8px 0 rgba(0,0,0,.10); */
	text-transform: lowercase;
}

#theTeam .intro {
	margin-top: 15px;
	text-align: center;
	font-size: 13px;
	line-height: 150%;
	background: #c04218;
	padding: 25px 0;
	border-top: 2px solid #832d10;
}

#theTeam .intro p {
	width: 544px;
	margin: 0 auto;
}

#theTeam .last {
	background: #e0e0e0;
	color: #545454;
	text-align: center;
	padding: 30px 0;
}

#theTeam .last h3 {
	font-size: 26px;
	color: #000;
	font-family: 'Aller';
	text-transform: lowercase;
	margin-bottom: 10px;
}

#theTeam .last p {
	font-size: 13px;
	line-height: 150%;
	width: 544px;
	margin: 0 auto 20px;;
}

#peopleOfTeam {
	position: relative;
	height: 520px;
	top: -30px;
}

#peopleOfTeam li {
	width: 384px;
	float: left;
	position: relative;
	padding-left: 16px;
	padding-top: 210px;
	height: 280px;
}

#peopleOfTeam li.julien { background: url(../img/face-julien.png) left top no-repeat; }
#peopleOfTeam li.charlotte { background: url(../img/face-charlotte.png) right top no-repeat; }

#peopleOfTeam li h3 {
	position: absolute;
	width: 164px;
	height: 121px;
	text-indent: -9999px;
	top: 60px;
}

#peopleOfTeam li.julien h3 { background: url(../img/text-julien.png) no-repeat; right: 0; }
#peopleOfTeam li.charlotte h3 { background: url(../img/text-charlotte.png) no-repeat; left: 15px; }

#peopleOfTeam li p {
	font-size: 13px;
	line-height: 150%;
	margin-bottom: 30px;
}

#peopleOfTeam li.julien p { text-align: right; float: right; }
#peopleOfTeam li.charlotte p { text-align: left; }

#peopleOfTeam li.julien p.paraph1 { width: 200px; }
#peopleOfTeam li.julien p.paraph2, #peopleOfTeam li.julien p.paraph3 { width: 322px; }



#peopleOfTeam li.charlotte p.paraph1 { width: 200px; }
#peopleOfTeam li.charlotte p.paraph2 { width: 352px; }

form .errorInput {
	box-shadow: 0 0 15px #ff0000;
	border: 1px solid #fb7272 !important;
}

.specialDiv {
	overflow: inherit !important;
	padding-bottom: 50px;
	overflow: hidden;
	position: relative;
}

.specialDiv #gradientTop,
.specialDiv #gradientBottom {
	position: absolute;
	left: 0;
	width: 110%;
	margin-left: -5%;
	height: 93px;
	z-index: 1;
}

.specialDiv #gradientTop {
	top: 0;
	background: url(../img/gradientTop.png) repeat-x;
}

.specialDiv #gradientBottom {
	bottom: 0;
	background: url(../img/gradientBottom.png) repeat-x;
}

.specialDiv h2 {
	color: #de0909;
	font-size: 25px;
	font-family: 'Aller';
	text-align: center;
	line-height: 250%;
	position: relative;
	z-index: 2;
	text-transform: lowercase;
}

.specialDiv ul#listWorks {
	width: 900px;
	margin-left: -45px;
	overflow: hidden;
	position: relative;
	z-index: 2;
	background: #fcfcfc;
}

.specialDiv ul#listWorks li {
	float: left;
	padding: 20px 28px;	
}

.specialDiv ul#listWorks li a.workLink {
	display: block;
	width: 236px;
	height: 146px;
	border: 3px solid #fff;
	box-shadow: 0 1px 5px rgba(0,0,0,.33);
	background: #fff url(../img/zoom.png) center center no-repeat;
}

.specialDiv ul#listWorks li a.workLink:hover {
	box-shadow: 0 1px 10px rgba(0,0,0,.33);
}

.specialDiv ul#listWorks li h3 {
	font-weight: bold;
	font-size: 14px;
	color: #545454;
	line-height: 150%;
	margin-top: 5px;
}

.specialDiv ul#listWorks li p {
	color: #707070;
	font-size: 14px;
	line-height: 150%;
}

.specialDiv ul#listWorks li a {
	color: #0b88e0;
	text-decoration: none;
}


.specialDiv ul#listWorks li a:hover {
	text-decoration: underline;
}

#navIntoWorksHide { display: none; }

#navIntoWorks {
	position: absolute;
	bottom: 0px;
}

#navIntoWorks li { display: inline-block; margin: 0 20px; }

#navIntoWorks li a, #navIntoWorks li > span.disabled {
	display: inline-block;
	width: 32px;
	height: 39px;
	background: blue;
	border-radius: 3px;
}

#navIntoWorks li a.prev,
#navIntoWorks li a.next {
	position: relative;
	width: 32px;
	background: #7cb02f;
	box-shadow: 0 4px 0 #5a7f22, 0 8px 0 #c5c5c5;
}

#navIntoWorks li a.prev:hover,
#navIntoWorks li a.next:hover {
	background: #8bb030;
}

#navIntoWorks li a.prev:active,
#navIntoWorks li a.next:active {
	background: #7cb02f;
	top: 4px;
	box-shadow: none;
}

#navIntoWorks li a span.icon {
	text-indent: -9999px;
	display: block;
	width: 32px;
	height: 39px;
}

#navIntoWorks li a.prev span.icon { background: url(../img/arrowWorkLeft.png) center center no-repeat; }
#navIntoWorks li a.next span.icon { background: url(../img/arrowWorkRight.png) center center no-repeat; }

#navIntoWorks li a.center {
	position: relative;
	width: 44px;
	background: #186ec4;
	box-shadow: 0 4px 0 #104a83, 0 8px 0 #c5c5c5;
}

#navIntoWorks li a.center:hover {
	background: #3b8fda;
}

#navIntoWorks li a.center:active {
	background: #186ec4;
	top: 4px;
	box-shadow: none;
}

#navIntoWorks li a.center span.icon {
	background: url(../img/returnWorks.png) center center no-repeat;
	width: 44px;
}

#navIntoWorks li span.disabled { background: #ccc; text-indent: -9999px; }


#wrapper { position: relative; }

#wrapper #canvasLoader {
	position: absolute;
	left: 47%;
	top: 47%;
}

#subWrapper {
	width: 960px;
	margin: 50px auto 0;
	background: #fcfcfc;
	margin-left: -80px;
	height: 467px;
	margin-bottom: 20px;
	position: relative;
	z-index: 5;
}

#theMac {
	position: absolute;
	width: 471px;
	height: 435px;
	background: url(../img/imac.png);
	right: 0;
	top: 11px;
}

#theMac #macGlass {
	width: 215px;
	height: 313px;
	background: url(../img/glass_imac.png) no-repeat;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
}

#theMac ul {
	position: relative;
	top: 21px;
	left: 21px;
}

#theMac ul li {
	position: absolute;
	top: 0;
}

#theiPad {
	position: absolute;
	width: 490px;
	height: 516px;
	background: url(../img/ipad.png) no-repeat;
	top: 211px;
	left: 250px;
	z-index: 10;
}

#theiPad ul {
	position: absolute;
	top: 23px;
	left: 139px;
}

#theiPad ul li {
	position: absolute;
	top: 0;
}

.specialDiv.workDetails { height: 510px; }

.specialDiv.workDetails #leftContent { width: 450px; }

.specialDiv.workDetails #leftContent a {
	color: #0b88e0;
	text-decoration: none;
}

.specialDiv.workDetails #leftContent a:hover {
	text-decoration: underline;
}

.specialDiv.workDetails h2 {
	color: #545454;
	text-align: left;
	line-height: 100%;
}

.specialDiv.workDetails p.description {
	margin: 20px 0 15px;
}

.specialDiv.workDetails p {
	color: #707070;
	font-size: 14px;
	line-height: 150%;
}

.specialDiv.workDetails #temoignage {
	margin: 30px 0;
}

.specialDiv.workDetails #leftContent #socialIcons li {
	float: left;
	margin-left: 11px;
	margin-top: 5px;
}

.specialDiv.workDetails #leftContent #socialIcons li a {
	display: block;
	width: 18px;
	height: 18px;
	text-indent: -9999px;
}

.specialDiv.workDetails #leftContent #socialIcons li.facebook a {
	background: url(../img/facebookAuthor.png) center center no-repeat;
}

.specialDiv.workDetails #leftContent #socialIcons li.twitter a {
	background: url(../img/twitterAuthor.png) center center no-repeat;
}

.specialDiv.workDetails #leftContent #socialIcons li.linkedin a {
	background: url(../img/linkedinAuthor.png) center center no-repeat;
}

.contentTemoignage {
	display: block;
	width: 312px;
	background: url(../img/bgTestiBottomRight.png) right bottom no-repeat;
	padding: 13px 11px;
	font-size: 12px !important;
	font-style: italic;
	position: relative;
	z-index: 9;
}

.contentTemoignage .contentTesti {
	position: relative;
	z-index: 2;
}

.contentTemoignage .quoteLeft {
	display: block;
	position: absolute;
	width: 31px;
	height: 25px;
	background: url(../img/bgTestiTopLeft.png) no-repeat;
	content: '';
	left: -10px;
	top: 0px;	
	z-index: 1;
}

.auteurTemoignage {
	padding: 0 11px;
	font-weight: bold;
	font-size: 12px !important;
	color: #545454;
}

#pager {
	position: absolute;
	top: 351px;
	left: 825px;
}

#pager a {
	display: inline-block;
	text-indent: -9999px;
	width: 16px;
	height: 13px;
	background: #a6a6a6;
	margin: 0 5px;
	border-radius: 3px;
	box-shadow: 0 4px 0 #6f6f6f, 0 8px 0 #c5c5c5;
}

#pager a:hover {
	background: #b9b9b9;
}

#pager a.activeSlide {
	background: #0c96ed;
	box-shadow: 0 4px 0 #0464a0, 0 8px 0 #c5c5c5;
}

#pager a.activeSlide:hover {
	background: #49adeb;
}

#pager a:active {
	position: relative;
	top: 4px;
	box-shadow: none;
}

.specialDiv.detailsPack {
	padding-bottom: 0;
}

.specialDiv .section {
	border-bottom: 1px solid #e0e0e0;
	padding: 35px;
	position: relative;
}

.specialDiv .section.title {
	padding: 10px;
}

.specialDiv.detailsPack h2 {
	color: #00a2b0;
	text-transform: lowercase;
}

.detailsPack #startPrice {
	width: 195px;
	text-align: center;
	margin-right: 35px;
	float: left;
}

.detailsPack #startPrice img {
	max-width: 176px;
}

.detailsPack #contentPack {
	width: 498px;
	float: left;
}

.detailsPack #startPrice h3 {
	font-family: Aller;
	font-size: 22px;
	color: #737373;
	text-transform: lowercase;
	width: 110px;
	margin: 30px auto 0;
	line-height: 120%;
}

.detailsPack #contentPack h4 {
	font-family: Aller;
	font-size: 25px;
	color: #383838;
	text-transform: lowercase;
}

.detailsPack #contentPack p {
	color: #707070;
	font-size: 14px;
	line-height: 19px;
	margin: 10px 0;
}

.detailsPack #contentPack ul li {
	color: #707070;
	font-size: 14px;
	line-height: 170%;
	padding-left: 15px;
	background: url(../img/bluePuce.png) left 5px no-repeat;
}

.detailsPack #prosAndCons {
	margin-top: 35px;
/* 	padding: 0 15px; */
	color: #707070;
	font-size: 14px;
	line-height: 19px;
}

.detailsPack #prosAndCons h4 {
	font-family: Aller;
	font-size: 25px;
	color: #383838;
	margin-bottom: 10px;
}

.detailsPack #prosAndCons p {
	margin: 10px 0;
}

.detailsPack #prosAndCons .prosList {
	float: left;
	/* width: 330px; */
	margin-right: 35px;
}

.detailsPack #prosAndCons .prosList li {
	padding-left: 15px;
	background: url(../img/greenPuce.png) left 5px no-repeat;
	line-height: 170%;
}

.detailsPack #prosAndCons .consList {
	float: left;
	width: 330px;
}

.detailsPack #prosAndCons .consList li {
	padding-left: 15px;
	background: url(../img/redPuce.png) left 5px no-repeat;
	line-height: 170%;
}

.detailsPack #prosAndCons .consList p {
	margin-left: 15px;
	line-height: 150%;
}

.detailsPack #prosAndCons .postScript {
	font-size: 12px;
}

.detailsPack .exampleWorks h4 {
	font-family: Aller;
	font-size: 25px;
	color: #383838;
	text-align: center;
	text-transform: lowercase;
	position: relative;
	z-index: 2;
}

.detailsPack .exampleWorks #listWorks {
	margin-left: -85px;
}

.detailsPack .endSection {
	background: #c94d09;
	border-radius: 0 0 9px 9px;
	color: #fff;
	text-align: center;
	padding: 40px;
}

.detailsPack .endSection h4 {
	font-family: Aller;
	font-size: 25px;
	text-transform: lowercase;
}

.detailsPack .endSection p {
	font-size: 14px;
	margin: 15px 0;
	line-height: 150%;
}

.detailsPack .endSection .bigBtn {
	margin: 0 8px;
}