/* pour les icones en font */
@font-face { font-family:'AlternateGothic'; src:url('fonts/altgot2n.eot'); src:url('fonts/altgot2n.eot') format('embedded-opentype'),
url('fonts/altgot2n.woff') format('woff'), url('fonts/altgot2n.ttf') format('truetype'), url('fonts/altgot2n.svg#AlternateGothic2BTRegular') format('svg'); }

@font-face { font-family:'robotoCondensedBold'; font-weight:normal; font-style:normal;
src:url('fonts/robotocondensed-bold-webfont.eot');
src:url('fonts/robotocondensed-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/robotocondensed-bold-webfont.woff') format('woff'),
url('fonts/robotocondensed-bold-webfont.ttf') format('truetype'),
url('fonts/robotocondensed-bold-webfont.svg#roboto_condensedbold') format('svg'); }

@font-face { font-family:'robotoCondensedLight'; font-weight:normal; font-style:normal;
src:url('fonts/robotocondensed-light-webfont.eot');
src:url('fonts/robotocondensed-light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/robotocondensed-light-webfont.woff') format('woff'),
url('fonts/robotocondensed-light-webfont.ttf') format('truetype'),
url('fonts/robotocondensed-light-webfont.svg#roboto_condensedlight') format('svg'); }

@font-face { font-family:'robotoCondensedRegular'; font-weight:normal; font-style:normal;
src:url('fonts/robotocondensed-regular-webfont.eot');
src:url('fonts/robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/robotocondensed-regular-webfont.woff') format('woff'),
url('fonts/robotocondensed-regular-webfont.ttf') format('truetype'),
url('fonts/robotocondensed-regular-webfont.svg#roboto_condensedregular') format('svg'); }

@font-face { font-family:'robotoblack'; font-weight:normal; font-style:normal;
src:url('fonts/roboto-black-webfont.eot');
src:url('fonts/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-black-webfont.woff') format('woff'),
url('fonts/roboto-black-webfont.ttf') format('truetype'),
url('fonts/roboto-black-webfont.svg#robotoblack') format('svg'); }

@font-face { font-family:'robotobold'; font-weight:normal; font-style:normal;
src:url('fonts/roboto-bold-webfont.eot');
src:url('fonts/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-bold-webfont.woff') format('woff'),
url('fonts/roboto-bold-webfont.ttf') format('truetype'),
url('fonts/roboto-bold-webfont.svg#robotobold') format('svg'); }

@font-face { font-family:'roboto'; font-weight:normal; font-style:normal;
src:url('fonts/roboto-medium-webfont.eot');
src:url('fonts/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-medium-webfont.woff') format('woff'),
url('fonts/roboto-medium-webfont.ttf') format('truetype'),
url('fonts/roboto-medium-webfont.svg#robotomedium') format('svg'); }

@font-face { font-family: 'robotolight'; font-weight:normal; font-style:normal;
src: url('fonts/roboto-light-webfont.eot');
src: url('fonts/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/roboto-light-webfont.woff') format('woff'),
url('fonts/roboto-light-webfont.ttf') format('truetype'),
url('fonts/roboto-light-webfont.svg#robotolight') format('svg'); }

@font-face { font-family:'fontello'; font-weight:normal; font-style:normal;
src:url('fonts/fontello.eot?69635742');
src:url('fonts/fontello.eot?69635742#iefix') format('embedded-opentype'),
url('fonts/fontello.woff?69635742') format('woff'),
url('fonts/fontello.ttf?69635742') format('truetype'),
url('fonts/fontello.svg?69635742#fontello') format('svg'); }

@font-face { font-family: 'roboto_slabbold'; font-weight:normal; font-style:normal;
src:url('fonts/robotoslab-bold-webfont.eot');
src:url('fonts/robotoslab-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/robotoslab-bold-webfont.woff') format('woff'),
url('fonts/robotoslab-bold-webfont.ttf') format('truetype'),
url('fonts/robotoslab-bold-webfont.svg#roboto_slabbold') format('svg'); }

@font-face { font-family: 'roboto_slabregular'; font-weight:normal; font-style:normal;
src:url('fonts/robotoslab-regular-webfont.eot');
src:url('fonts/robotoslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/robotoslab-regular-webfont.woff') format('woff'),
url('fonts/robotoslab-regular-webfont.ttf') format('truetype'),
url('fonts/robotoslab-regular-webfont.svg#roboto_slabregular') format('svg'); }

.icon-left-open-big:before 	{ content: '\e802'; }
.icon-right-open-big:before { content: '\e801'; }
.icon-user:before 			{ content: '\e809'; }
.icon-phone:before 			{ content: '\e811'; }
.icon-email:before 			{ content: '\e807'; }
.icon-website:before 		{ content: '\e80a'; }
.icon-location:before 		{ content: '\e80d'; }
.icon-sidebar:before 		{ content: '\e815'; }

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

body { background:#ffffff; margin:16px 0 0 0; padding:0; }
* { font-family:"robotolight", sans-serif; color:#000000; font-size:16px; margin:0; padding:0; }
p, a, ul, ul li, h2, h3, h4, i { color:#000000; padding:0; margin:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-weight:normal; }
h2, h3 { font-family:'AlternateGothic'; text-transform:uppercase; }
h2 { font-size:40px; color:#E80000; }
h3 { font-size:32px; color:#17365b; margin:25px 0 15px 0; }
h4 { font-family:'robotoCondensedRegular'; font-size:20px; color:#3d3d3d; }
ul li { list-style:none; }
p { line-height:23px; margin:0 0 6px 0; text-align:justify; }
p strong, ul li strong { font-family:'roboto'; font-weight:normal; color:#17365B; }
em { color:#3d3d3d; display:block; margin:5px auto; }
p a { color:#17365b; font-family:'roboto'; }
form input[type=submit] { -webkit-appearance:none; -webkit-border-radius:0; }
i { font-size:65px; width:62px; height:76px; margin:0 auto 15px auto; display:block; }
i, .msg_error:before, .msg_valid:before, #quote p:before, #quote p:after, .check li:before, .coordonnees li:before, nav ul li:hover:after, nav ul .actif:after, .sitemap li:before,
#slides .next, #slides .prev {
font-family:"fontello"; font-style:normal; font-weight:normal; speak:none; font-variant:normal; text-transform:none; }


	/* GENERAL */

.clear { clear:both; }
.centre { width:1200px; margin:0 auto; display:block; }

.button_grey { background:#a7a7a7; text-align:center; padding:0; display:table;
/* arrondis */ border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; behavior:url(PIE.htc); }
.button_grey a { font-family:"AlternateGothic"; font-weight:normal; font-size:27px; color:#1b2b3f; ; text-decoration:none; text-transform:uppercase; display:block; padding:12px 18px; }

.button { background:#1b2b3f; text-align:center; padding:0; display:table;
/* arrondis */ border-radius:3px; -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; behavior:url(PIE.htc); }
.button a { font-family:"AlternateGothic"; font-weight:normal; font-size:27px; color:#ffffff; text-decoration:none; text-transform:uppercase; display:block; padding:12px 18px; }
.button:hover { background:#E80000;
/* animation */ -webkit-transition:all .25s; -moz-transition:all .25s; -ms-transition:all .25s; -o-transition:all .25s; transition:all .25s; }

.check li { display:table; margin:0 0 4px 0; }
.check li:before { display:table-cell; padding:0 10px 0 0; color:#17365B; }
.puce01 li:before { content:'\e805'; font-size:15px; }
.puce02 li:before { content:'\e808'; font-size:18px; }
.puce03 li:before { content:'\e815'; font-size:16px; }

.coordonnees { display:block; overflow:hidden; margin:10px 0 0 0; }
.coordonnees li, .sitemap li { list-style:none; padding-left:1px; margin:0 0 6px 0; }
.coordonnees li:before, .sitemap li:before { padding:0 12px 0 0; }
.right .coordonnees li:before, .right .coordonnees li, .right .coordonnees li a { color:#17365B; }
.right .coordonnees li, .right .coordonnees li a { font-family:'roboto';  }
.sitemap { margin:0 0 0 15px; }
.sitemap li:before { content:'\e813'; }

.content .icon-user:before 		{ font-size:21px; }
.content .icon-phone:before 	{ font-size:24px; }
.content .icon-email:before 	{ font-size:19px; }
.content .icon-website:before 	{ font-size:20px; }
.content .icon-location:before	{ font-size:22px; }

.content .centre { min-height:350px; padding:40px 30px 60px 30px; background:#efefef; width:1140px; }
.content .left, .content .right { display:inline-block; vertical-align:top; font-size:0; margin-top:25px; }
.content .left h3:first-child, .content .right h3:first-child { margin-top:0; }
.content .right h3 { margin-bottom:8px; }
.content .right .button { margin:10px 0; }
.content .right .button a { font-size:25px; padding:11px 20px; }
.content .left { width:725px; margin:25px 42px 0 0; padding:0; }
.content .right { width:373px; }
.content .right h4 { margin:0 0 10px 0; }

.ico { height:64px; width:64px; display:block; background-color:#17365b; position:absolute;
/* arrondis */ border-radius:50%; -moz-border-radius:50%; -khtml-border-radius:50%; -webkit-border-radius:50%; behavior:url(PIE.htc); }
.ico i { color:#ffffff; font-size:35px; margin:0 auto; padding-top:15px; cursor:default; }
.services li { display:inline-block; vertical-align:top; position:relative; }
.services .ico { background-repeat:no-repeat; background-position:7px 8px; }
.services .innovate .ico  { background-image:url('../img/home/ico-innovate.png'); }
.services .advise .ico 	  { background-image:url('../img/home/ico-advise.png'); }
.services .implement .ico { background-image:url('../img/home/ico-implement.png'); }


	/* HEADER */

header { height:102px; display:block; overflow:hidden; padding:0; }
header nav { float:right; height:42px; margin:60px 0 0 0; }
header h1 { float:left; width:245px; height:100px; background:#17365b; }
header h1 .logo { width:245px; height:100px; display:block; color:#ffffff; text-align:center; }
header h1 .logo img { padding:25px 0 0 0; }
header nav ul li { height:42px; line-height:25px; list-style:none; float:left; margin:0 0 0 30px; }
header nav ul li a { font-family:"AlternateGothic", sans-serif; font-size:28px; color:#737373; display:block; text-decoration:none;
text-transform:uppercase; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; }
header nav ul li a:hover, header nav ul .actif a { color:#e80000; }
header nav ul li:hover:after, header nav ul .actif:after { content:'\e803'; color:#e80000; padding-left:40%; font-size:30px }
header .centre { height:100px; border-bottom:2px solid #e80000; }


	/* FOOTER */
	
footer { width:100%; background:#17365b; }
footer .centre { padding:0 15px; width:1170px; }
footer h3 { font-size:24px; color:#efefef; margin:0 0 10px 0; }
footer ul li, footer a { color:#ffffff; font-size:15px; }
footer p { font-size:15px; color:#ffffff; text-align:left; margin:0; }
footer p b { color:#ffffff; font-size:15px; }
footer .top { border-bottom:1px solid #ffffff; padding:40px 0; }
footer .top div { display:inline-block; width:260px; vertical-align:top; margin:0 21px; }
footer .top div:first-child { margin-left:0; }
footer .top div:last-child { margin-right:0; }
footer .bottom p { height:65px; line-height:65px; }
footer .coordonnees li, footer .coordonnees a { color:#ffffff; font-size:15px; }
footer .icon-user:before 	{ font-size:20px; }
footer .icon-phone:before 	{ font-size:23px; }
footer .icon-email:before 	{ font-size:18px; }
footer .icon-website:before { font-size:19px; }
footer .icon-location:before { font-size:19px; }
footer form input { width:238px; }
footer form textarea { width:238px; height:80px; }
footer form input[type=submit] { height:46px; line-height:46px; border:none; cursor:pointer; margin:10px 0 0 0; font-size:26px; background:#ffffff; color:#17365B; width:80px; }
footer .valid { border:1px solid #17365B; }

	
	/*********************** HOME ***********************/

	#page_home h2 { font-size:32px; color:#17365b; }
	#page_home h3 { font-size:24px; margin:0 0 18px 0; }
	#page_home .slides { padding:0; }
	#page_home .content #services { padding-top:10px; }
	
	.slides { width:1200px !important; height:400px; background:#efefef; }
	.slides h2, .slides p, .slides { text-align:left; }
	.slides h3 { text-transform:none; line-height:33px; }
	.slides h2 { color:#1b2b3f; font-family:'roboto_slabregular'; font-size:34px; margin:0 0 18px 0; }
	.special h2, .special h3 { color:#ffffff !important; }
	.slides .button { margin:20px 0; }
	#container { width:1180px; position:relative; z-index:0; margin:0 auto; padding:10px; }
	#slides { position:absolute; z-index:100; }
	.slides_container { width:1200px; overflow:hidden; position:relative; display:none;}
	.slides_container div.slide { width:1200px; height:400px; display:block; }
	#slides .next, #slides .prev { position:absolute; bottom:20px; width:30px; height:30px; padding:10px; display:block; z-index:101; color:#ffffff; text-decoration:none; }
	#slides .prev { left:10px; }
	#slides .next { right:0px; }
	#slides .prev:before { content:'\e812'; font-size:25px; }
	#slides .next:before { content:'\e813'; font-size:25px; }
	.caption { z-index:500;position:absolute;top:80px;left:40px;height:30px;width:650px;color:#ffffff;}
	.pagination { position:relative;width:60px;z-index:10;bottom:25px;margin:0 auto;padding:0;}
	.pagination li { float:left;list-style:none;margin:0 1px;}
	.pagination li a { display:block;width:12px;height:0;padding-top:12px;background-image:url('../img/slides/pagination.png');background-position:0 0;float:left;overflow:hidden;}
	.pagination li.current a { background-position:0 -12px;}
	
	#page_home #quote .centre { height:60px; min-height:0; padding:24px 30px 28px; margin:0 auto 26px; background:#efefef; }
	#quote p { font-family:'roboto_slabregular'; font-size:20px; text-align:center; line-height:27px; color:#787878; }
	#quote p span { font-family:'roboto_slabbold'; font-size:20px; color:#17365b; }
	#quote p:before, #quote p:after { color:#e80000; font-size:28px; }
	#quote p:before { content:'\e80c'; margin:0 20px 0 0; }
	#quote p:after { content:'\e800'; margin:0 0 0 20px; }
	
	#page_home .content .centre { background:#ffffff; min-height:auto; }
	#page_home .services { padding-top:0; }
	#page_home .services li h2 { margin:0 0 15px 0; }
	#page_home .services li figure { margin:0 0 25px 0; }
	#page_home .services .impair { margin:0 30px; }
	#page_home .services li { width:360px; }
	
	.ico { margin:0 auto 10px auto; top:160px; left:160px; }
	.services li figcaption { font-style:italic; font-size:15px; color:#3d3d3d; }

	
	
	/*********************** SERVICES ***********************/

	#page_services h4 { font-family:'robotoCondensedRegular'; font-size:20px; text-transform:uppercase; color:#17365B; }
	#page_services .left div { width:340px; display:inline-block; margin:20px 10px; }/*
	#page_services .right { border-left:1px dashed #708297; width:px; }*/
	#page_services .ico { top:0; left:30%; }
	#page_services .services { height:108px; text-align:center; text-transform:uppercase; margin:20px auto; }
	#page_services .services li { width:140px; padding-top:85px; color:#17365B; font-family:'robotoCondensedRegular'; font-size:20px; }
	
	
	/*********************** CLIENTS ***********************/

	#page_clients #examples li { width:725px; font-family:'roboto_slabbold'; font-size:17px; color:#17365B; }
	#page_clients #examples li:before { display:inline; }
	#page_clients .cases li { margin:0 0 20px 0; }
	#page_clients .cases .check { width:410px; }
	#page_clients .cases .check li { margin:0 0 4px 0; }
	#page_clients h4 { margin:18px 0 8px 0; color:#E80000; }
	#page_clients .saut { margin:15px 0 3px 0; }
	#page_clients .content .left figure { width:300px; height:auto; float:right; margin:8px 0 0 25px; }
	#page_clients .content .left figure img { width:300px; height:auto; }
	
	
	/*********************** ABOUT ***********************/

	#page_about .content img { float:left; margin:0 42px 0 0; border:1px solid #c4c4c4; }
	#page_about .content .clear { margin:0 0 25px 0; }
	
	
	/*********************** CONTACT ***********************/
	
	form label { display:block; }
	form input, form textarea { font-size:15px; background:#ffffff; padding:5px 10px 6px; margin:3px 0 13px;
	/* arrondis */ border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; behavior:url(PIE.htc); }
	form input { height:21px; width:265px; }
	form textarea { width:703px; height:120px; }
	form img { margin:4px 0 0 10px; }
	form input[type=submit] { height:50px; line-height:50px; font-size:30px; color:#ffffff; float:right; margin:0; width:170px;
	border:none; cursor:pointer; font-family:"AlternateGothic", sans-serif; text-transform:uppercase;
	/* font */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale;
	/* arrondis */ border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; behavior:url(PIE.htc); }
	
	#verif_code { float:left; width:100px; }
	.valid { border:1px solid #bbbbbb; }
	.error { border:1px solid #cc2614; }
	.message { margin:20px 0 15px 0; font-size:15px; width:700px; padding:13px 10px 10px 15px;
	/* arrondis */ border-radius:2px; -moz-border-radius:2px; -khtml-border-radius:2px; -webkit-border-radius:2px; behavior:url(PIE.htc); }
	.msg_error { background:#EE6F6F; color:#994545; text-shadow:1px 1px 0 #ee8e8e; }
	.msg_error:before { content:'\e806'; margin-right:10px; }
	.msg_valid { background:#C5EC93; color:#759945; }
	.msg_valid:before { content:'\e805'; margin-right:10px; }
	
	
	/*********************** MENTIONS LEGALES ***********************/
	
	#page_mentions_legales h3 { margin:15px 0 5px; }
	#page_mentions_legales h3:first-child { margin-top:0; }
	#sitemap { margin:15px 0 0 0; }
	#sitemap li { margin:0 0 0 20px; line-height:24px; }
	#sitemap li a { text-decoration:none; color:#17365b; }
	#sitemap li a:hover { text-decoration:underline; }
	
	
/**
*** Affichage tablette HORIZONTAL
**/
@media screen and (min-width: 600px) and (max-width: 1110px)
{
	.centre, #container, .slides_container, .slides { width:1000px !important; }
	.content .centre, #quote .centre { width:940px !important; }
	footer .centre { width:970px; }
	footer .top div { width:21%; }
	
	#page_home .services li { width:31%; }
	#page_home .services li img { width:100%; height:auto; }
	.ico { left:40%; top:130px; }
	#page_services .content .left, #page_clients .content .left, #page_about .content .left, #page_clients .cases .check { width:100%; }
	#page_services .content .right, #page_clients .content .right, #page_about .content .right, #page_clients figure { display:none; }
	#page_services .left div { width:47%; }
	#page_contact .content .left { width:500px; }
	#page_contact .content .left form textarea { width:478px; }
	#page_contact .message { width:475px; }
}	

/**
*** Affichage tablette VERTICAL
**/
@media screen and (min-width: 660px) and (max-width: 900px)
{
	h2 { font-size:37px; }
	.slides_container { width:754px !important; }
	.centre, #container, .slides { width:96% !important; }
	.content .centre, #quote .centre, footer { width:90% !important; }
	.content .centre, footer { padding-left:3%; padding-right:3%; }
	footer { margin:0 auto; }
	footer .centre { padding:0; width:708px !important; }
	footer h3 { font-size:27px; }
	footer .autre { display:none !important; }
	footer .top div { width:46%; }
	
	#page_home #quote .centre { height:auto; }
	#quote p { font-size:16px; }
	#quote p span { font-size:17px; }
	#quote p:before, #quote p:after { font-size:22px; }
	#quote p:before { margin-right:12px; }
	#quote p:after { margin-left:12px; }
	#page_home .services .impair { margin: 0 1em; }
	.ico { width:50px; height:50px; top:114px; }
	.services .ico { background-position:3px 3px; background-size:89% auto; }
	#services { padding:10px 0 40px; }
	#page_services .services li { padding-top:62px; }
	#page_services .services { height:85px; }
	#page_about .content img { margin:0 20px 0 0; }
	#page_contact .content .right { width:30%; }
	#page_contact .content .left { width:60%; }
	#page_contact form textarea { width:94% !important; }
	#page_contact form input[type=submit] { float:none; margin:20px auto; }
	#page_contact .message { width:399%; }
} 
	
/**
*** Affichage mobile
**/
@media screen and (min-width: 320px) and (max-width: 660px)
{
	.centre { width:96% !important; }
	.content .centre { width:90% !important; padding:1em 3% 2em 3%; }
	
	#page_services .content .left, .content .right, #page_clients .content .left, #page_about .content .left, #page_clients .cases .check { width:100%; }
	
	h2 { font-size:30px; margin:0 0 10px 0; }
	h3 { font-size:28px; }
	h4 { font-size:22px; }
	p, p b, p strong, p span, ul li { font-size:16px; line-height:normal; }
	.content .left, .content .right { margin:0; }
	.slides, nav ul li:first-child { display:none; }
	header { height:auto; }
	header .centre { border:none; height:auto; }
	header h1, header nav { float:none; }
	header h1 { margin:0 auto 2em; }
	header nav { margin:0; }
	header nav ul li { padding:0; margin:0 0.2em; height:24px; }
	header nav ul li a { font-size:26px; }
	header nav ul li:hover:after, header nav ul .actif:after { content:normal; }
	.ico { width:48px; height:48px; background-position:3px 3px; background-size:89% auto; }
	footer .top .autre, footer .top .miniform { display:none; }
	footer .top { margin:0; padding:20px 0; }
	footer .bottom { padding:1.5em 0; }
	footer .bottom p { height:auto; line-height:normal; }
	footer .centre { padding:0; }
	
	#page_home #quote .centre { background:none; height:auto; margin:0; padding:1em; width:90%; }
	#page_home #quote p,#page_home #quote p span { font-size:17px; }
	#page_home #quote p:before, #page_home #quote p:after { font-size:21px; }
	#page_home .services { margin:0; }
	#page_home .services li { margin:0 0 2em 0; width:100%; }
	#page_home .services .impair { margin:0 0 1.5em 0; }
	#page_home .services .ico { top:125px; left:45%; background-size:80% auto; }
	#page_home .services figure { width:98%; }
	#page_home .services figure img { width:100%; height:auto; }
	
	#page_services .services { height:auto; }
	#page_services .services li { display:list-item; padding:0 0 0 60px; text-align:left; height:50px; line-height:50px; margin:0 0 4px 0; }
	#page_services .services .ico { top:0; left:0; background-position:3px; }
	#page_services .left div { display:none; margin:0; width:100%; }
	
	#page_clients figure, #page_about figure { display:none; }
	
	#page_about .content img { display:none; }
	
	#page_contact .content .left { width:100%; margin:0 0 20px 0; }
	#page_contact form label, #page_contact form textarea, #page_contact form #name, #page_contact form #email { width:250px !important; }
	#page_contact form input[type=submit] { float:none; margin:20px auto; }
}