﻿
body {
  font-family: Helvetica, Verdana, Arial, Sans-Serif;
	font-size:15px;
	color:#fff;
	text-align:justify;
	
	}

p{
	font-size:14px;
}
.no-line-wrap{
	word-break:keep-all;
}

h1{
  	font-family: "aktiv-grotesk-std",sans-serif;
  	font-size:34px;
	font-weight:700;
}

h2{
  	font-family: "aktiv-grotesk-std",sans-serif;
	font-size:30px;
	font-weight:700;
}

h3{
  	font-family: "aktiv-grotesk-std",sans-serif;
	font-size:22px;
}

.wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading h5, .wf-loading h6   {
  font-family:sans-serif;
}
 
.wf-active h1, .wf-active h2, .wf-active h3, .wf-active h4, .wf-active h5, .wf-active h6 {
  font-family: "aktiv-grotesk-std",sans-serif;
}


.glue-word{
	white-space:nowrap;
}

h1,h2{
	text-transform:uppercase;
}

.valign{
	height:200px;
	line-height:200px;
	vertical-align:middle;
}

.valign span{
	display:inline-block;
	vertical-align:middle;
	line-height:18px;
}

/*.valign{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
	margin-top:40px;
	}
*/
.content-holder-main p,
.content-holder-main h1,
.content-holder-main h2{
	color:#333;
}

.fll{
	float:left;
}

.flr{
	float:right;
}

.fln{
	float:none;
}

.tal{
	text-align:left;
}

.tar{
	text-align:right;
}

.tac{
	text-align:center;
}

.centerize{
text-align:center;
}

.list-none{
	list-style-type:none;
	list-style:none;
	padding:0px;
}

.list-none li{
	display:block;
	line-height:26px;
}

.list-float-left li{
	float:left;
}


.list-float-right li{
	float:right;
}

blockquote.text-quote{
	font-weight:700;
	font-size:30px;
	padding: 5px 20px;
	border-left: 5px solid #E82429;
}

/* ==================================================
   Margin related CSS.
================================================== */

.ms{ /* Margin small */
	margin:10px;
}

.mm{ /* Margin medium */
	margin:20px;
	}
	
.mb{ /* Margin big */
	margin:30px;
	}
	
.mh{ /* Margin huge */
	margin:50px;
	}

.mts{ /* Margin top Small*/
	margin-top:10px;
}

.mtm{ /* Margin top Medium*/
	margin-top:20px;
}

.mtb{ /* Margin top Big*/
	margin-top:30px;
}

.mth{ /* Margin top Huge*/
	margin-top:50px;
}

.mbs{ /* Margin bottom Small*/
	margin-bottom:10px;
}

.mbm{ /* Margin bottom Medium*/
	margin-bottom:20px;
}

.mbb{ /* Margin bottom Big*/
	margin-bottom:30px;
}

.mbh{ /* Margin bottom Huge*/
	margin-bottom:50px;
}

.mrs{ /* Margin right Small*/
	margin-right:10px;
}

.mrm{ /* Margin right Medium*/
	margin-right:20px;
}

.mrb{ /* Margin right Big*/
	margin-right:30px;
}

.mrh{ /* Margin right Huge*/
	margin-right:50px;
}

.mls{ /* Margin left Small*/
	margin-left:10px;
}

.mlm{ /* Margin left Medium*/
	margin-left:20px;
}

.mlb{ /* Margin left Big*/
	margin-left:30px;
}

.mlh{ /* Margin left Huge*/
	margin-left:50px;
}

/* ==================================================
   Padding related CSS.
================================================== */


.ps{ /* padding small */
	padding:10px;
}

.pm{ /* padding medium */
	padding:20px;
	}
	
.pb{ /* padding big */
	padding:30px;
	}
	
.ph{ /* padding huge */
	padding:50px;
	}

.pts{ /* padding top Small*/
	padding-top:10px;
}

.ptm{ /* padding top Medium*/
	padding-top:20px;
}

.ptb{ /* padding top Big*/
	padding-top:30px;
}

.pth{ /* padding top Huge*/
	padding-top:50px;
}

.pbs{ /* padding bottom Small*/
	padding-bottom:10px;
}

.pbm{ /* padding bottom Medium*/
	padding-bottom:20px;
}

.pbb{ /* padding bottom Big*/
	padding-bottom:30px;
}

.pbh{ /* padding bottom Huge*/
	padding-bottom:50px;
}

.prs{ /* padding right Small*/
	padding-right:10px;
}

.prm{ /* padding right Medium*/
	padding-right:20px;
}

.prb{ /* padding right Big*/
	padding-right:30px;
}

.prh{ /* padding right Huge*/
	padding-right:50px;
}

.pls{ /* padding left Small*/
	padding-left:10px;
}

.plm{ /* padding left Medium*/
	padding-left:20px;
}

.plb{ /* padding left Big*/
	padding-left:30px;
}

.plh{ /* padding left Huge*/
	padding-left:50px;
}


/* ==================================================
   Header CSS.
================================================== */

#logo-red-bar{
	height:34px;
	overflow:hidden;
	background:#E82429;
	z-index:1000;
	position:absolute;
	top:40px;
	left:0px;
}

#inner-red-bar{
	height:34px;
	overflow:hidden;
	background:#E82429;
	color:#fff;
	padding-top:5px;
}


.header-info{
	padding-right:0px;
}

.header-info p{
	font-size:10px;
	color:#999;
	text-align:right;
	padding-top:10px;
	line-height: 12px;
}

.language{
			text-align:right;
}

.language a{
		color:#ccc !important;
		margin-right:20px;

}
.language a:hover{
	text-decoration:none;
	color:#fff !important;
}


.nav-pills>li{
	float:right;
}

.dropdown-menu,
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus, #responsive-menu .nav li
{
	background:#000;
}

#responsive-menu .nav .dropdown, #responsive-menu .nav .dropdown:hover,
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus, .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus
#responsive-menu .nav li a, .nav>li>a:hover, .nav>li>a:focus{
			background:#E82429;
}

#responsive-menu .nav li a{
	color:#ccc;
}

#responsive-menu .dropdown-menu>.active>a{
	color:#fff;
}



#responsive-menu .nav li a:hover{
	color:#fff;
}

.nav-pills>li>a{
	border-radius:0;
}



#main-menu .nav a{
	margin:0px 15px;
	padding:10px 5px;
	color:#999;
	background:none;
}


/* ==================================================
   Color related CSS.
================================================== */

	body{
		background:url(../img/tiles.png) repeat fixed;	
		background-size:10%;
	}

	.white{
		background-color:#FFF;	
		color:#000;
	}
	
	.black{
		background-color:#000;	
		color:#fff;		
	}
	
	.black1{
		background-color:#262C40;	
		color:#fff;		
	}
	
	.black2{
		background-color:#0054A8;	
		color:#fff;		
	}
	
	.black3{
		background-color:#2D2D5B;	
		color:#fff;		
	}
	
	
	.black-tiles{
		background:#000;	
		background:rgba(0,0,0,.9);
		color:#fff;		
	}
	
	.grey{
		background-color:#58595b;
		color:#fff;
	}

	.grey1{
		background-color:#21433D;
		color:#fff;
	}

	
	.grey-tiles{
		background-color:#58595b;
		background:rgba(88,89,91);
		color:#fff;
	}
	
	.grey-tiles1{
		background-color:#21433D;
		background:rgba(33,67,61,.95);
		color:#fff;
	}
	
	.grey-tiles2{
		background-color:#790000;
		background:rgba(121,0,0,.95);
		color:#fff;
	}
	
	.grey-tiles3{
		background-color:#2D2D5B;
		background:rgba(45,45,91);
		color:#fff;
	}
	
	
	.lighter-grey{
		background-color:#c5cace;
		color:#4d4d4f;
	}
	
	
	.red-color{
		background-color:#E82429;	
		color:#fff;
	}
	
	.red-color-tiles{
		background-color:#E82429;	
		background-color:rgba(231,39,50,.9);
		color:#fff;
	}
	
	.off-color{
		color:#057b8c;
	}
	
/* Home Variant */
	#home .color{
		background-color:#E82429;	
		color:#fff;
	}
	
	#home .colorcc{
		background-color:#808080;	
		color:#fff;
	}

	
	#home .colorpp{
		background-color:#800080;	
		color:#fff;
	}

	
	#home .colorm{
		background-color:#1F4298;	
		color:#fff;
	}

	
	#home .colorc{
		background-color:#505984;	
		color:#fff;
	}
	
	#home .colori{
		background-color:#00527D;	
		color:#fff;
	}


    #home .colorr{
		background-color:#008080;	
		color:#fff;
	}
	
    #home .colorp{
		background-color:#F24F00;	
		color:#fff;
	}	

	#home .color1{
		background-color:#A8D3FF;	
		color:#fff;
	}

	
	#home .color.pre-footer{
		color:#650000;
	}
	#home .color-tiles{
		background-color:#E82429;	
		background-color:rgba(231,39,50,.9);
		color:#fff;
	}
	
	#home .text-color{
		color:#E82429;
	}

/* Lettrage Variant */
	#lettrage .color{
		background-color:#dc9932;	
		color:#fff;
	}
	#lettrage .color.pre-footer{
		color:#992600;
	}
	#lettrage .color-tiles{
		background-color:#dc9932;	
		background-color:rgba(220,153,50,.9);
		color:#fff;
	}
	#lettrage .text-color{
		color:#dc9932;
	}
	
	
/* Graphisme Variant */
	#graphisme .color{
		background-color:#00a9c2;	
		color:#fff;
	}
	#graphisme .color.pre-footer{
		color:#004a5b;
	}
	#graphisme .color-tiles{
		background-color:#44a5ac;	
		background-color:rgba(68,165,172,.9);
		color:#fff;
	}
	#graphisme .text-color{
		color:#44a5ac;
	}

/* Enseigne Variant */
	#enseigne .color{
		background-color:#f26922;	
		color:#fff;
	}
	#enseigne .color.pre-footer{
		color:#860000;
	}
	#enseigne .color-tiles{
		background-color:#47c46d;	
		background-color:rgba(71,196,109,.9);
		color:#fff;
	}
	#enseigne .text-color{
		color:#f26922;
	}
	
/* Impression Grand Format Variant */
	#impression-grand-format .color{
		background-color:#7FD3FF;	
		color:#fff;
		
	}
	#impression-grand-format .color.pre-footer{
		color:#004b10;
	}
	#impression-grand-format .color-tiles{
		background-color:#1f4298;	
		background-color:rgba(173,46,151,.9);
		color:#fff;
	}
	#impression-grand-format .text-color{
		color:#7FD3FF;
	}
	
/* Photos Variant */
	#photos .color{
		background-color:#1f4298;	
		color:#fff;
	}
	#photos .color.pre-footer{
		color:#00003f;
	}
	#photos .color-tiles{
		background-color:#1f4298;	
		background-color:rgba(70,86,232,.9);
		color:#fff;
	}
	#photos .text-color{
		color:#1f4298;
	}
	
/* Contact Variant */
	#contact .color{
		background-color:#efef3a;	
		color:#000;
	}
	#contact .color.pre-footer, #contact .color.pre-footer a{
		color:#b04a00;
	}
	#contact .color-tiles{
		background-color:#efef3a;	
		background-color:rgba(239,239,58,.9);
		color:#000;
	}
	#contact .text-color{
		color:#efef3a;
	}
	
	#contact a{
		color:#000;
	}
	
	#contact a:hover{
		text-decoration:none;
	}
	
	.text-color{
		color:#E82429;
	}
	
#main-menu .nav>li>a:hover,
#main-menu .nav>.active>a{
	-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
	transition: color 1s;
}


#main-menu .nav .home a{
	border-radius:0px;
	border-bottom:3px solid #E82429;
}

#main-menu .nav .lettrage a{
	border-radius:0px;
	border-bottom:3px solid #FF8040;
}

#main-menu .nav .graphisme a{
	border-radius:0px;
	border-bottom:3px solid #44a5ac;
}

#main-menu .nav .enseigne a{
	border-radius:0px;
	border-bottom:3px solid #f26922;
}

#main-menu .nav .impression-grand-format a{
border-radius:0px;
border-bottom:3px solid #7FD3FF;
}


#main-menu .nav .photos a{
	border-radius:0px;
	border-bottom:3px solid #1f4298;
}

#main-menu .nav .photos1 a{
	border-radius:0px;
	border-bottom:3px solid #44887B;
}

#main-menu .nav .photos2 a{
	border-radius:0px;
	border-bottom:3px solid #505984;
}

#main-menu .nav .photos3 a{
	border-radius:0px;
	border-bottom:3px solid #800080;
}


#main-menu .nav .contact a{
	border-radius:0px;
	border-bottom:3px solid #FFD300;
}

#main-menu .nav .english a{
	border-radius:0px;
	border-bottom:3px solid #838383;
}

.dropdown-menu{
	z-index:2000;
}

.bx-wrapper .bx-controls-direction a{
	z-index:1000;
}
	
/* ==================================================
   Icon related CSS.
================================================== */

.icon{
	height:22px;
	width:22px;
	display:block;
	float:left;
	overflow:hidden;
	margin-right:15px;
}

.contact-phone{
	background:url(../img/contact-phone.png);
}

.phone{
	background:url(../img/phone.png);
}

.email{
	background:url(../img/email.png);
}

.location{
	background:url(../img/location.png);
}

.info{
	background:url(../img/information.png);
}

.fax{
	background:url(../img/fax.png);
}

		
.shake-hand{
	background:url(../img/shake-hand.png);
}
		
/* ==================================================
   Diagonal Layout Handle
================================================== */
	
	#wrapper header{
		padding:40px 0px 20px 0px;	
	}

	/*
	FEATURE: Diagonal Lines
	*/
	.offset{
		margin-top:-32px;	
		padding-top:20px;
		padding-bottom:20px;
	}	
	.padding-plus{
		padding-top:52px;
	}
	
	.padding-plus-bottom{
		padding-bottom:52px;
	}
	
	.padding-less{
		padding-bottom:0px;
		padding-top:0px;
	}
	
	.sep{
		width:100%;
		height:32px;
	/*overflow:hidden; */	
	}
	
	.sep .diag{
		width:100%;
		left:0px;
		height:50px;
		margin-top:-25px;
		-ms-transform: skewY(1deg); /* IE 9 */
        -webkit-transform: skewY(1deg); /* Safari */
        transform: skewY(1deg); /* Standard syntax */
		position:absolute;
	-webkit-backface-visibility:hidden;
	}
	.sep .diag.rev{
		transform:skewY(-1deg);
		-moz-transform:skewY(-1deg);
		-webkit-transform:skewY(-1deg);
	}
	.sep.over{
		position:absolute;
		z-index:1;	
	}

	/*
	CAROUSEL:
	*/
	.carousel img{
		width:100%;
		height:auto;	
	}




/* ==================================================
   Slider related CSS.
================================================== */
.bx-wrapper .bx-prev{
	left:15%;
}

.bx-wrapper .bx-next{
	right:15%;
}

.bx-wrapper .bx-viewport{
	border:0px;
	left:0px;
}

.bx-viewport{
	padding-top:5px;
}



/* ==================================================
   Map Layout CSS
================================================== */

#map-canvas{
	width:100%;
	height: 200px;
	color:#333;
}

/* ==================================================
   Testimonial CSS 
================================================== */

.quovolve-box{
	width:100%;
	height:300px;
margin:0 auto;
}




#quote_wrap ul{
	list-style:none;
	padding:0px;
}

.temoin-title{
	font-style:italic;
	font-size:14px;
}

.quovolve-box blockquote{
	border:0px;
	font-size:14px;
	padding:0px;
}

.quovolve-box blockquote p{
	padding:10px;
}

.quovolve-nav:before, .quovolve-nav:after {
  content: "\0020"; display: block; height: 0; visibility: hidden;  
} 
.quovolve-nav:after { clear: both; }
.quovolve-nav {
  margin: 10px 0;
  line-height: 30px;
  zoom: 1;
}
.quovolve-nav-above {
  margin-bottom: 20px;
}
.quovolve-nav-below {
  margin-top: 20px;
}

.quovolve-nav span {
  margin-right: 5px;
}

.quovolve-nav .nav-prev{
	position:absolute;
	left:0px;
	top: 50%;
}

.quovolve-nav .nav-next{
	position:absolute;
	right:0px;
	top: 50%;
}


.nav-numbers{
	list-style-type:none;
	list-style:none;
	position:relative;
	right:-50%;
}


.nav-numbers li{
	display:inline-block;
}

.quovolve-nav a {
  background: #aaa;
  line-height: 32px;
  color: #fff;
	height:32px;
	width:32px;
  display: block;
  padding: 5px 15px;
  border: 0 none;
  text-align: center;
  /* Border Radius */
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  /* Box Shadow */
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
  box-shadow: inset 0 1px 2px rgba(0,0,0, 0.15);
}

.quovolve-nav .nav-numbers li a{
	background:#414042;
  line-height: 16px;
	height:16px;
	width:16px;
  padding: 0px;
	margin:5px;
}

.quovolve-nav .nav-numbers .active a, .quovolve-nav .nav-numbers li a:hover{
	background: #636466;
}



.dn{
	display:none;
}

.quovolve-nav .nav-prev a{
	background:url(../img/prev-white.png) no-repeat;
}

.quovolve-nav .nav-next a{
	background:url(../img/next-white.png) no-repeat;
}

.quovolve-nav .nav-prev a:hover{
	background:url(../img/prev-grey.png) no-repeat;
}

.quovolve-nav .nav-next a:hover{
	background:url(../img/next-grey.png) no-repeat;
}

/* ==================================================
   Social Media CSS.
================================================== */


.social-media a{
	margin: 20px 10px 0px 10px;
}

/* ==================================================
   Photos with isotope CSS.
================================================== */

#photos-container .gutter-sizer{
	width:3%;
}

#photos-container .grid-sizer{
	width:20%;
}

#photos-container .item { 
	width:340px;
	 margin-bottom: 20px;
	 overflow:hidden;
	 max-height:176px;
	 }
	 
#photos-container .item img{ 
	width:340px;
	position:relative;
	bottom:15px;
}


#photos-container .item.w2 { 
	width: 50%; 
}

.button-group{
	text-align:center;
}

#filters button{
	background:none;
	border:none;
	padding:5px 0px;
	margin: 0px  5px;
	color:#fff;
	font-weight:700;
	font-size:16px;
}

#filters button:focus{
	outline:none;
}


#filters .button-all{
	border-radius:0px;
	border-bottom:5px solid #E82429;
}
#filters .button-lettrage{
	border-radius:0px;
	border-bottom:5px solid #dc9932;
}
#photos-container .item.lettrage{
		border-radius:0px;
		border-top:10px solid #dc9932;
}

#filters .button-graphisme{
	border-radius:0px;
	border-bottom:5px solid #44a5ac;
}
#photos-container .item.graphisme{
		border-radius:0px;
		border-top:10px solid #44a5ac;
}

#filters .button-enseigne{
	border-radius:0px;
	border-bottom:5px solid #f26922;
}

#photos-container .item.enseigne{
	border-radius:0px;
	border-top:10px solid #f26922;
}

#filters .button-logo{
	border-radius:0px;
	border-bottom:0;
}

#photos-container .item.logo{
	border-radius:0px;
	border-top:10px solid #44a5ac;
}
#filters .button-papeterie{
	border-radius:0px;
	border-bottom:0;
}

#photos-container .item.papeterie{
	border-radius:0px;
	border-top:10px solid #44a5ac;
}

#filters .button-autre{
	border-radius:0px;
	border-bottom:5px solid #7FD3FF;
}

#photos-container .item.autre{
	border-radius:0px;
	border-top:10px solid #7FD3FF;
}

.groupe-graphisme .sgraphisme, .groupe-lettrage .slettrage, .groupe-enseigne .senseigne {
	display:none;
}
.groupe-graphisme:hover .sgraphisme, .groupe-lettrage:hover .slettrage, .groupe-enseigne:hover .senseigne {
	display:block;
}
.galeriephoto {
	min-width: 300px;
	max-width: 500px;
	margin: auto;
}

.galeriephoto li {
	list-style-type: none;
	float: left;
}
.galeriephoto .groupe-graphisme .sgraphisme {
	position:absolute;
	top: 32px;
	width: 150px;
	height:auto;
	margin:0 0 0 125px;
	padding: 0;
	background: #44a5ac;
	z-index: 50;
}
.galeriephoto .groupe-graphisme .sgraphisme button {
	
}
.galeriephoto .groupe-graphisme .sgraphisme li {
	display:list-item;
	padding: 0 5px;
	border-bottom: 1px solid #7BCDF3;
	height:auto;
	text-align:center;
	width: 150px;
}

.galeriephoto .groupe-lettrage .slettrage {
	position:absolute;
	top: 32px;
	width: 150px;
	height:auto;
	margin:0 0 0 48px;
	padding: 0;
	background: #dc9932;
	z-index: 50;
}

.galeriephoto .groupe-lettrage .slettrage li {
	display:list-item;
	padding: 0 5px;
	border-bottom: 1px solid #F5C276;
	height:auto;
	text-align:center;
	width: 150px;
}

.galeriephoto .groupe-enseigne .senseigne {
	position:absolute;
	top: 32px;
	width: 150px;
	height:auto;
	margin:0 0 0 218px;
	padding: 0;
	background: #f26922;
	z-index: 50;
}

.galeriephoto .groupe-enseigne .senseigne li {
	display:list-item;
	padding: 0 5px;
	border-bottom: 1px solid #FA9F71;
	height:auto;
	text-align:center;
	width: 150px;
}
/* ==================================================
   Prettyphoto CSS.
================================================== */


.pp_gallery {
display: block;
left: 50%;
margin-top: 10px;
position: absolute;
z-index: 10000;
}

div.pp_default a.pp_arrow_next,.pp_play, div.pp_default a.pp_arrow_previous {
	display:none;
}

div.pp_default .pp_nav .currentTextHolder{
	display:none;
}




/* ==================================================
   Footer CSS.
================================================== */

.footer-info{
	color:#999;
}

.footer-info a{
	color:#666;
}

.footer-info a:hover{
	color:#333;
	text-decoration:none;
}

/* ==================================================
   General CSS.
================================================== */

.trio-img img{
	padding:10px;
}

.special-quote{
	border:none;
	font-weight:700;
	font-size:30px;
	padding: 5px 20px;
	text-align:center;
}

.circle-list li:before{
	width:32px;
	height:32px;
	background-image:url(../img/text-content/circle.png);
	display:inline-block;
}

.negPos img{
	position:relative;
	bottom:-40px;
}

h2 small{
	color:inherit;
	font-size:15px;
	text-align:left;
	text-transform:none;
}

.adjust-size img{
	width:150px;
}

.adjust-size-2 img{
	width:175px;
}

.img-margin img{
	margin:30px;
}

.img-margin-2 img{
	margin:15px;
}

.nav-numbers{
	display:none;
}

.contact-display{
	position: relative;
	bottom: 7px;
}

.bx-wrapper img{
	width:100%;
}
