/*
 * Generic
 */

@font-face {
	font-family: 'wf_SegoeUILight';
	src: url('../fonts/latest.eot');
	src: url('../fonts/latest.eot?#iefix') format('embedded-opentype'), url('../font/latest.woff') format('woff'), url('../fonts/latest.ttf') format('truetype'), url('../fonts/latest.svg#web') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MSHPIconsRegular';
	src: url('../fonts/MSHPIconsRegular/mshpicons-regular-webfont.eot');
	src: url('../fonts/MSHPIconsRegular/mshpicons-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/MSHPIconsRegular/mshpicons-regular-webfont.woff') format('woff'), url('../fonts/MSHPIconsRegular/mshpicons-regular-webfont.ttf') format('truetype'), url('../fonts/MSHPIconsRegular/mshpicons-regular-webfont.svg#web') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'wf_SegoeUI';
	src: url('../fonts/segoeui/latest.eot');
	src: local("Segoe UI"), local("Segoe"), local("Segoe WP"), url('../fonts/segoeui/latest.eot?#iefix') format('embedded-opentype'), url('../fonts/segoeui/latest.woff') format('woff'), url('../fonts/segoeui/latest.ttf') format('truetype'), url('../fonts/segoeui/latest.svg#web') format('svg');
	font-weight: normal;
	font-style: normal;
}
a {
	text-decoration: none;
}
.left {
	float: left;
}
.right {
	float: right;
}
.reset {
	clear: both;
}
.first {
	margin-left: 0 !important;
}
.last {
	margin-right: 0 !important;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.genericMarginTop { 
	margin-top: 10px;
}
.genericMarginBottom { 
	margin-bottom: 10px;
}
.genericMarginLeft { 
	margin-right: 9px;
}
.genericMarginRight { 
	margin-right: 9px;
}
.noBackground {
	background: none !important;
}
.noBold {
	font-weight: normal !important;
}
.tile p {
	margin: 0
}
.tileTitle { 
	display: block;
	margin: 0;
	font-size: 23px;
	bottom: 10px;
	left: 17px;
	color: #ffffff;
}
.tileTextTitle { 
	font-size: 22px;
	color: #ffffff;
}
.tileTextContent { 
	font-size: 17px;
	color: #ffffff;
}
.mediumTileTextContent { 
	font-size: 17px;
	color: #ffffff;
}
.smallTileTextContent { 
	font-size: 16px;
	color: #ffffff;
}
/*
 * Main Template
 */

body {
	background: url('/upload/images/design/repeatImage.jpg') repeat-x;
	background-color: #101010;
	font-family: "wf_SegoeUI", "Segoe UI", "Segoe", "Segoe WP", "Verdana", "Verdana", "Arial", "sans-serif";
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	color: #fefefe;
}

#background-container
{
	width: 1680px;
	height: 930px;
	margin: 0 auto;
	background: url("/upload/images/design/backgroundImage.jpg") no-repeat;;
}

#mainContainer { 
	width: 1150px;
	margin: 0 auto;
}

#logo { 
	width: 342px;
	height: 54px;
	float: left;
	background: url('/upload/images/design/logo.png');
	margin-top: 82px;
}
#logo a { 
	display: block;
	height: 54px;
	text-indent: -9999px;
}
#nav { 
	float: right;
	margin-top: 96px;
}
#nav li { 
	float: left;
	margin-left: 24px;
	color: #969494;
}
#nav li a { 
	font-size: 22px;
	color: inherit;
}

#nav li a:hover { 
	color: #fff;
}

#nav li.menuItemSeparator { /* add to online am css, and class to items */
	margin-top: 5px;
}

#header { 
	height: 143px;
}
#slider { 
	width: 1150px;
	margin: 0 auto;
	overflow: hidden;
}
#contentContainer { /* Slider container */ 
	width: 6000px;
	margin-top: 50px;
        min-height: 400px;
}
/*
 * Tiles icons
 */

.service, .contact, .moreWork, .moreInfos, .references, .visitourwebsite {
	background-image: url('/upload/images/design/tileSprite.jpg');
	background-repeat: no-repeat;
}
.service {
	background-position: 1px -374px;
}
.contact {
	background-position: 1px -562px;
}
.moreWork {
	background-position: 1px -561px;
}
.moreInfos {
	background-position: 0 0;
}
.references {
	background-position: 1px -1123px;
}
.visitourwebsite {
	background-position: 1px -1311px;
}
/*
 * 958 Home Grid & Home
 */

#home {
	float: left;
}
#introBlock { 
	background: #2556a3;
	color: #fefefe;
	padding: 10px 12px; /* Problem of undesirable margin on SegoeUi, at the top of the letters. 2px more than left / right */
	width: 353px;
	height: 164px;
}
#introBlock h2 { 
	font-size: 17px;
}
#introBlock p { 
	font-size: 14px;
}
.threeColumnsBlock { 
	width: 377px;
	height: 377px;
	margin-right: 10px;
	overflow: hidden;
}
.smallThreeColumnsInnerBlock, .smallThreeColumnsInnerBlock a { /* ret ok */
	display: block;
	width: 184px;
	height: 184px;
}
.mediumThreeColumnsInnerBlock, .mediumThreeColumnsInnerBlock a { /* ret ok */
	display: block;
	width: 378px;
	height: 184px;
}
.largeThreeColumnsInnerBlock, .largeThreeColumnsInnerBlock a { /* ret ok */
	display: block;
	width: 378px;
	height: 378px;
}
/*
 * 958 Who We Are & What we Do Grid & Portfolio Grid
 */

#whoweare { 
	width: 1150px;
	color: #fff;
	float: left;
}
#whatwedo { 
	width: 1150px;
	color: #fff;
	float: left;
}
#project { 
	width: 1150px;
	color: #fff;
	float: left;
}
#whoweare .mainTwoColumnsBlock, #project .mainTwoColumnsBlock { 
	width: 473px;
	height: 377px;
	float: left;
	margin-right: 10px;
	background: #191a1a;
}
#whoweare .mainTwoColumnsBlockLittleBro, #project .mainTwoColumnsBlockLittleBro { 
	float: right;
	width: 184px;
	height: 377px;
}
#whoweare .innerTextBlock, #whatwedo .innerTextBlock, #project .innerTextBlock { 
	height: 304px;
	margin: 12px 22px;
	padding-right: 18px; /* For the scrollbar to don't be "glued" to the text  */
	overflow: scroll;
}

#whoweare .innerTextBlock{
width: 415px;
}

#whatwedo .innerTextBlock
{
width: 610px;
}


#whoweare .innerTextBlock p, #whatwedo .innerTextBlock p, #project .innerTextBlock p { 
	margin: 0px;
	font-size: 16px;
    line-height: 20px;
}
#project .innerTextBlock p
{
line-height: 22px;
}
#whoweare .mainTwoColumnsBlock h1, #project .mainTwoColumnsBlock h1 { 
	font-size: 22px;
	margin: 12px 22px;
}
/* For this page, the text blocks are positionned in absolute / relative */

#project .mainTwoColumnsBlock {
	position: relative;
}
#project .mainTwoColumnsBlock h1 { 
	position: absolute;
	margin: 0;
	left: 30px;
	top: 30px;
}
#project .mainTwoColumnsBlock .brandsLogo { 
	position: absolute;
height: 20px;
	top: 39px;
	right: 36px;
}
#project .innerTextBlock { 
	position: absolute;
	height: 245px;
	width: 407px;
	top: 85px;
	left: 30px;
	margin: 0;
}
/*
 * Portfolio with video section
 */

#project .hasVideo .mainTwoColumnsBlock { 
	height: 762px;
}
#project .hasVideo .innerTextBlock { 
	height: 610px;
}
#project .hasVideo .mainTwoColumnsBlockLittleBro { 
	height: 754px;
}

/*
 * What We Do
 */

#whatwedo .mainTextBlock {  
	width: 668px;
	height: 377px;
	float: left;
	margin-right: 10px;
	background: #191a1a;
}
#whatwedo .mediumPicturesBlock { 
	width: 469px;
	height: 377px;
	float: left;
	background: #191a1a;
}
/* For the TextBlock styles, please have a look at the end of the "whoweare" style section. */

#whatwedo .mainTextBlock h1 { 
	font-size: 22px;
	margin: 12px 22px;
}
/*
 * FlexSlider
 */

/*
 * jQuery FlexSlider v1.8
 * http://flex.madebymufffin.com
 *
 * Copyright 2011, Tyler Smith
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

#whoweare .flex-container, #project .flex-container { 
	width: 473px;
	height: 377px;
	margin: 0 auto;
}
#project .hasVideo .flex-container { 
	margin-top: 5px;
}
#whatwedo .flex-container { 
	width: 469px;
	height: 377px;
	margin: 0 auto;
}
/* Browser Resets */
.flex-container a:active, .flexslider a:active {
	outline: none;
}
.slides, .flex-control-nav, .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
/* FlexSlider Necessary Styles
 *********************************/
.flexslider {
	width: 100%;
	margin: 0;
	padding: 0;
}
.flexslider .slides > li {
	display: none;
}/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
	max-width: 100%;
	display: block;
}
.flex-pauseplay span {
	text-transform: capitalize;
}
/* Clearfix for the .slides element */
.slides:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
html[xmlns] .slides {
	display: block;
}
* html .slides {
	height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
	display: block;
}
/* FlexSlider Default Theme
 *********************************/
.flexslider {
	background: #fff;
	position: relative;
	zoom: 1;
}
.flexslider .slides {
	zoom: 1;
}
.flexslider .slides > li {
	position: relative;
}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {
	zoom: 1;
	position: relative;
}
/* Caption style */
/* IE rgba() hack */
.flex-caption {
	background: none;
	-ms-filter: progid :DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
	filter: progid :DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
	zoom: 1;
}
.flex-caption {
	width: 96%;
	padding: 2%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,.3);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	font-size: 14px;
	line-height: 18px;
}
/* Direction Nav */
.flex-direction-nav {
	display: none;
}
.flex-direction-nav li a {
	width: 52px;
	height: 52px;
	margin: -13px 0 0;
	display: block;
	background: url(/upload/images/design/bg_direction_nav.png) no-repeat 0 0;
	position: absolute;
	top: 35%;
	cursor: pointer;
	text-indent: -9999px;
}
.flex-direction-nav li .next {
	background-position: -52px 0;
	right: -21px;
}
.flex-direction-nav li .prev {
	left: -12px;
}
.flex-direction-nav li .disabled {
	opacity: .3;
	filter: alpha(opacity=30);
	cursor: default;
}
/* Control Nav */
.flex-control-nav {
	width: 100%;
	position: absolute;
	text-align: center;
	bottom: 8px;
}
.flex-control-nav li {
	margin: 0 0 0 5px;
	display: inline-block;
	zoom: 1; *
	display: inline;
}
.flex-control-nav li:first-child {
	margin: 0;
}
.flex-control-nav li a {
	width: 9px;
	height: 9px;
	display: block;
	background: url(/upload/images/design/bg_control_nav.png) no-repeat 0 0;
	cursor: pointer;
	text-indent: -9999px;
}
.flex-control-nav li a:hover {
	background-position: 0 -9px;
}
.flex-control-nav li a.active {
	background-position: 0 -18px;
	cursor: default;
}
/*
 * Categories
 */

.categories { 
	width: 1150px;
	height: 377px;
	float: left;
}
.categories .workCategoriesLink, .categories .workCategoriesTitle/* H1 */ {
	top: -40px;
	font-size: 20px;
	font-weight: normal;
}
.categories .workCategoriesLink a {
	color: #fff;
	display: block;
	background: url("/upload/images/design/plus-icon.png") right 9px no-repeat;
	padding-right: 24px;
}
.categories .fiveColumnsBlock { 
	width: 223px;
	height: 377px;
	float: left;
	margin-right: 8px;
}

.categories .fiveColumnsBlock ul li, .categories .fiveColumnsBlock ul li a { 
	width: 223px;
	height: 182px;
	display: block;
	margin-bottom: 10px;
}

.categories .fiveColumnsBlock ul li div h2, .categories .fiveColumnsMainBlock div.categoriesTile h2, .categories .fiveColumnsBlock ul li a span, .fiveColumnsMainBlock div.categoriesTile a span{ 
	font-weight: 600;
	font-size: 18px;
	color: #fefefe;
	bottom: 12px;
	left: 12px;
}

.categories .fiveColumnsMainBlock, .categories .fiveColumnsLargeMainBlock { 
	width: 455px;
	height: 377px;
	float: left;
	margin-right: 8px;
}

.categories .fiveColumnsLargeMainBlock
{
	width: 686px;
	margin: 0;
}

.categories .fiveColumnsMainBlock div.categoriesTile
{
	float: left;
	position: relative;
	margin-right: 8px;
}

.categories .fiveColumnsMainBlock div.categoriesTile, .categories .fiveColumnsMainBlock div.categoriesTile a
{
	width: 223px;
	height: 182px;
	display: block;
	margin-bottom: 10px;
}

.categories .fiveColumnsMainBlock .mainTextBlock
{
clear: both;
width: 454px;
height: 154px;
padding-top: 28px;
background: #191a1a;
}

.categories .fiveColumnsMainBlock .innerTextBlock
{
	width: 378px;
	height: 130px;
	margin-left: 28px;
	padding-right: 18px; /* For the scrollbar to don't be "glued" to the text  */
	overflow: scroll;
}

.categories .fiveColumnsMainBlock .innerTextBlock p
{
	margin: 0px;
	font-size: 16px;
}

/* Categories icons sprite */
.seeMoreCats {
	background-position: 0 0px;
}
.backToCats {
	background-position: 0 -156px;
}
/* In a category */

.categories .fiveColumnsMainBlock ul li, .categories .fiveColumnsMainBlock ul li a { 
	width: 455px;
	height: 377px;
	display: block;
}

.categories .fiveColumnsLargeMainBlock ul li, .categories .fiveColumnsLargeMainBlock ul li a { 
	width: 686px;
	height: 377px;
	display: block;
}

.categories .fiveColumnsMainBlock ul li div h2, .categories .fiveColumnsMainBlock ul li a span { 
	font-weight: 600;
	font-size: 18px;
	color: #FEFEFE;
	bottom: 16px;
	left: 14px;
}

.categories .fiveColumnsLargeMainBlock ul li div h2, .categories .fiveColumnsLargeMainBlock ul li a span { 
	font-weight: 600;
	font-size: 18px;
	color: #FEFEFE;
	bottom: 16px;
	left: 14px;
}

.categories .fiveColumnsMainBlock ul li a {
	margin: 0;
	background-image: url('/upload/images/design/applicationstiles/spriteApplicationsTiles.jpg');
	background-repeat: no-repeat;
}
.restoTouchTile {
	background-position: 0 0px;
}

/*
 * Contact
 */

#contact img {
	vertical-align: bottom;
}

.contactUsLink
{
	font-size: 16px!important;
}
.contactLinks {
	display: block;
	height: inherit;
	color: #fff;
}

.largeContactCol {
	width: 570px;
	height: 494px;
	margin-right: 10px;
}
.mediumContactCol {
	width: 377px;
	height: 494px;
	margin-right: 8px;
}
.smallContactCol {
	width: 184px;
	height: 492px;
	margin-right: 10px;
}
.smallContactTile {
	width: 184px;
	height: 158px;
	margin-top: 10px;
	float: left;
	margin-right: 9px;
}
.smallContactCol .smallContactTile {
	margin: 0 0 10px 0;
}
.smallContactTile h1, .smallContactTile h2, .smallContactTile p {
	padding-left: 6px;
}
.smallContactTile h1 {
	font-size: 26px;
	font-weight: normal;
	padding-top: 7px;
}
.smallContactTile h2 {
	font-size: 19px;
	font-weight: normal;
}
.smallContactTile p {
	font-size: 13px;
}
.smallContactTile p {
	font-size: 13px;
	margin-top: 24px;
	margin-bottom: 12px;
}
.smallContactTile p.contactUsLink {
	margin: 0;
}
.smallContactTile p.contactUsLink a {
	font-size: 16px;
	color: #fff;
}

.visitwebsite a {
	display: block;
	width: inherit;
	height: inherit;
}

#contact .tileTitle 
{
	font-size: 23px;
}
.mediumContactTile {
	width: 377px;
	height: 158px;
	margin-bottom: 10px;
}
.mediumContactTile h1, .mediumContactTile h2, .mediumContactTile p {
	padding-left: 6px;
}
.mediumContactTile h1 {
	font-size: 31px;
	font-weight: normal;
	padding-top: 11px;
}
.mediumContactTile h2 {
	font-size: 24px;
	font-weight: normal;
}
.mediumContactTile p.smallContactTileRightContent {
	left: 168px;
	top: 46px;
	font-size: 14px;
}
.mediumContactTile p.smallContactTileRightContent span{
	position: relative;
	top: 6px;
	font-size: 19px;
	color: #fff;
}


.mediumContactCol .smallContactTile
{
	margin-top: 0px !important;
}

/* Tile sprite */

.brown, .red, .pink, .orange, .yellow, .green, .cyan, .darkBlue, .lightBlue, .purple
{
	background: url('/upload/images/design/contact/contactTilesSprite.jpg'); 
	background-repeat: no-repeat;
}

.brown{
	background-position: -387px 0;
}

.red{
	background-position: -387px -162px;
}

.pink{
	background-position: 1px -324px;
}

.orange{
	background-position: -193px -324px;
}

.yellow{
	background-position: -386px -324px;
}

.green{
	background-position: -193px -486px;
}

.cyan{
	background-position: 0 -486px;
}

.darkBlue{
	background-position: 0 0;
}

.lightBlue{
	background-position: -386px -486px;
}

.purple{
	background-position: 0 -162px;
}

/*
 * References
 */

#contentContainer.references
{
	width: 1150px;
	background: none;
	margin-top: 70px;
}

#slider ul#logos-references li
{
	float: left;
	margin-right: 12px;
	margin-bottom: 12px;
}

/*
 * Footer
 */

#footer { 
	height: 40px;
	margin-top: 80px;
	color: #969494;
}
#footer ul { 
	width: 550px;
	font-size: 12px;
	margin: 0 auto;
    overflow: hidden;
}
#footer ul li {
	float: left;
}
.copyright {
	margin-right: 60px;
	padding-top: 0px;
}
#footer .twitter a, #footer .facebook a, #footer .linkedin a, #footer .youtube a {
	display: block;
	height: 17px;
	background-image: url('/upload/images/design/footerSprite.png');
	background-repeat: no-repeat;
	text-indent: -9999px;
	margin-right: 24px;
}
.twitter a { 
	width: 18px;
	background-position: 0 top;
}
.facebook a {
	width: 10px;
	background-position: 0 -17px;
}
.linkedin a {
	width: 20px;
	background-position: 0 -34px;
}
.youtube a {
	width: 43px;
	background-position: 0 -50px;
	margin-right: 0 !important;
}