@charset "utf-8";
/* CSS Document */

/* 
- Version: v5 / 2011
- Author: David Fouquère
*/

/*------------GLOBAL STYLES---------------*/

img { border: none; -ms-interpolation-mode: bicubic; image-rendering:optimizeQuality; }

body{font-size:12px; margin:0; background:url("../images/bodybg.jpg") repeat fixed 0 0 #333848; font-family: 'NatzilinoSemiBold', arial, sans-serif; width:100%; height:100%}

a{color:#333; text-decoration:none;}

p{font-size:1.4em; color:#cccddd; line-height:1.6em;}

h1,h2,h3,h4,h5,h6{font-weight:normal;}

/*------------SIDEBAR---------------*/

#sidebar {
right: 0;
padding: 0;
width: 160px;
position: fixed;
height: 100%;
background: #c999c1;
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.6);
z-index:2
}

#sidebar header{
height: 180px;
margin: 0.5em 0 1em;
width: 160px;
cursor:pointer
}

#sidebar hgroup{
height: 180px;
background: url(../images/logo.jpg) no-repeat top center;
text-indent: -9999px;
background-size: 160px;
}

#sidebar hgroup h1{
margin: 0;
}

.mentions{
	position: absolute;
	bottom: 0.3em;
	width: 154px;
	padding: 0 3px;
	text-align: center;
}

.mentions p{
	color: #232323;
	margin: 0.3em 0;
	font-size: 0.9em;
	letter-spacing: 0.1em;
	text-align: right;
	padding-right: 0.3em;
	line-height: 1.4em;
}

.mentions p span {
	word-spacing: 0;
}

/*------------MAIN NAV---------------*/

/* Places */
#nav ul, #navext ul{list-style:none; padding:0; margin:0}

.places .icon {
  float: left;
  height: 30px;
  line-height: 30px;
  text-align: left;
  text-decoration: none;
  width: 50%;
  
}

/* Places */
  .places {
    width: 160px;
	overflow:hidden;
  }
  .places li {
    cursor: pointer;
    height: 38px;
    position: relative;
  }
  
  .places .icon {
    background: #7d2d5e url('../images/menu-icones.png') 0px 3px no-repeat;
    background-color: rgba(125,95,123, .42);
    display: block;
    color: #333848;
    float: none;
    height: 30px;
    line-height: 30px;
    position: relative;
	font-size: 15px;
    text-indent: 50px;
	font-variant:small-caps;
	letter-spacing: 1px;
    white-space: nowrap;
    width: 160px;
    z-index: 5;
    /* If you're poking around here, you're probably wondering how the heck I made those social link hovers, right? Well, look further down! */
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    -webkit-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
    -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
    -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
    box-shadow: rgba(0,0,0, .28) 0 2px 3px;
  }
  
  .places .icon {
    width: 38px;
  }
  .places .portfolio  { background-position: 0 -35px }
  .places .contact    { background-position: 0 -72px }
  .places .blog    	{ background-position: 0 -110px }
  .places .facebook  { background-position: 0 -148px }
  .places .twitter { background-position: 0 -186px }
  .places .viadeo  { background-position: -1px -225px }
  .places .shop  { background-position: 0px -268px } 
   
  .places .donate {
    position: relative;
  }

  .places li:hover .icon, .places .menu-selected .icon    { background-color: #333848; color:#fff; width: 160px; text-indent: 10px;}
  .places li:hover .accueil, .places .menu-selected .accueil { background-position: 120px 3px }
  .places li:hover .portfolio, .places .menu-selected .portfolio { background-position: 120px -35px }
  .places li:hover .contact, .places .menu-selected .contact { background-position: 120px -72px }
  .places li:hover .blog, .places .menu-selected .blog { background-position: 120px -110px }
  .places li:hover .twitter, .places .menu-selected .twitter { background-color: #16afde; color:#fff; background-position: 120px -186px }
  .places li:hover .facebook, .places .menu-selected .facebook  { background-color: #3b5998; background-position: 120px -148px }
  .places li:hover .viadeo, .places .menu-selected .viadeo  { background-color: #333; background-position: 119px -225px }
  .places li:hover .shop, .places .menu-selected .shop  { background-color: #1c3752; background-position: 120px -268px }  
  
  #secondary {
    float: left;
    padding-bottom: 2em;
    width: 100%;
  }

/*------------ACTUS NAV---------------*/
#actu, #apropos, #tweets {
clear: both;
margin: 0.7em auto;
padding: 0 0.8em;
text-align: justify;
margin-right: 142px;
}

#tweets {padding: 0;}

.menu{
color: #7D5F7B;
font-size: 1.6em;
text-transform: uppercase;
padding-left: 80px;
word-spacing: 5px;
float: left;
margin-top: 0.95em;
cursor:pointer;
}

.menu li{display: inline; padding-right: 20px;}

.menu li a{
color: #7D5F7B;
cursor: pointer;
opacity: 0.7;
}
.menu li.ui-tabs-selected a, .menu li a:hover{
color: #C999C1;
opacity: 1;
}

.menu li.ui-tabs-selected a{
cursor: default;
}

ul.lastworks a {
	color: #CCCDDD;
}

ul.lastworks li a hr {
width: 79%;
opacity: 0.2;
position: absolute;
top: 6.5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border: 1px dotted #CCCDDD;
}

ul.lastworks li a:hover hr {
border: 1px inset #C999C1;
opacity: 0.7;
}

h3.empreinte{
color: #272727;
font-size: 3em;
text-align: left;
font-variant: small-caps;
text-transform: capitalize;
margin: 0.5em 0 0.5em 0;
text-shadow: 0px 1px 1px #515973;
opacity: 0.8;
padding-top: 0.15em;
}

ul.lastworks{
padding:0;
font-size: 1em;
color: #CCCDDD;
}

ul.lastworks li{
	width: 100%;
	margin: 0 1% 5em;
	display: block;
	clear: both;
	height: 300px;
	overflow: hidden;
	cursor: pointer;
}

ul.lastworks li p {
padding: 0.6em 0;
font-size: 13px;
margin: 2.5em 0 0;
opacity: 0.3;
letter-spacing: 0.1em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

ul.lastworks li:hover p {
opacity: 1;
}

ul.lastworks li .actu-img{
	width: 65%;
	height: 210px;
	overflow: hidden;
	float: right;
	margin-top: 4em;
	max-width: 1000px;
}

ul.lastworks li .actu-img .cache{
	/*background: url(../images/cachelast.png) no-repeat left top;
	position: absolute;
	z-index: 4;
	height: 300px;
	width: 139px;
	margin-top: -45px;
	margin-left: -65px;*/
position: absolute;
z-index: 4;
height: 217px;
width: 100px;
margin-top: -12.5px;
margin-left: -70px;
background: url(../images/bodybg.jpg) repeat #333848;
border-right: 3px ridge #7D5F7B;
-webkit-transform: rotate(11deg);
-moz-transform: rotate(11deg);
-o-transform: rotate(11deg);
-ms-transform: rotate(11deg);
}

ul.lastworks li .actu-img img{
	margin-left:0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

ul.lastworks li:hover .actu-img img{
	margin-left:-1000px;
}

ul.lastworks li .actu-info{
	width: 45%;
	position: relative;
	height: 300px;
	z-index: 5;
	padding: 2.8em 1em 0 0;
	text-align: left;
}

ul.lastworks li .actu-info span{
position: absolute;
bottom: 6.3em;
color: #CCCDDD;
border-bottom: 1px dotted #CCCDDD;
width: 10%;
text-align: right;
min-width: 65px;
opacity: 0.3;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

ul.lastworks li:hover .actu-info span{
opacity: 1;
width: 70%;
}

.profil, .prestaweb, .prestaprint, .prestagraph{clear: both; margin: 0em 0.5em 10em;}
.prestaprint{margin-bottom: 18em;}
.profil p, .prestaweb p, .prestaprint p, .prestagraph p{
padding: 0 0.8em;
font-size: 1.3em;
line-height: 1.6em;
}
.profil img{float:left; margin:0 -1em -0.4em -3em}
.prestaweb img, .prestagraph img{float:right; margin:0em 1em -2.5em 1.8em}
.prestaprint img{float:left; margin:0em 1em -0.6em}
.prestaweb h3.empreinte, .prestagraph h3.empreinte{text-align:right}

.prestaweb ul, .prestaprint ul, .prestagraph ul {
font-size: 1.1em;
padding: 0 0.8em;
}
.prestaweb li, .prestaprint li, .prestagraph li {
display: inline-table;
margin: 0 2em 0 0;
color: #CCCDDD;
}
.profil span, .prestaweb span, .prestaprint span, .prestagraph span{
color: #c999c1;
}

/*------------PORTFOLIO NAV---------------*/

#portfolio-nav{width:178px; float:left; padding:0 0 24px 0; background:url(../assets/sidebar-borders.png) no-repeat bottom left;}

#portfolio-nav h3{font-size:1.5em; color:#027d8f; margin:22px 0 12px 0;}

#portfolio-nav ul li a{font-size:1.4em; color:#656565; line-height:1.6em; text-shadow:0 1px 0 #FFF;}

#portfolio-nav ul li a:hover{color:#000;}

#portfolio-nav ul .active a{color:#ff0300;}

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

footer{width:150px; float:left; margin:22px 0 0 0; font-size:1em; line-height:1.6em; color:#aaa9a9; text-shadow:0 1px 0 #FFF;}

footer a{color:#f96e76;}

footer a:hover{color:#f96e76; color:#fd4f53;}

footer small{font-size:1.2em;}

footer small a{font-size:1em;}

footer aside p{margin:16px 0 0 0; font-size:1.2em; color:#aaa9a9;}

footer aside p a{font-size:1em;}

/*------------MAIN CONTENT---------------*/

#main-content {
    margin: 0 160px 0 0;
    position: relative;
}

/*------------MAIN SECTION---------------*/

section{

}

.content{
	top: 0px;
	position: absolute;
	width:100%;
}


.panel{
	min-width: 100%;
	height: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	position: fixed;
	margin-left: -200%;
	opacity: 0;
	z-index:1;
	-webkit-transition: opacity .9s ease-in-out;
	-moz-transition: opacity .9s ease-in-out;
	-o-transition: opacity .9s ease-in-out;
	-ms-transition: opacity .9s ease-in-out;
	transition: opacity .9s ease-in-out;
}

.panelselected{
	opacity: 1;
	margin-left: 0%;
}




article p a{
color:#ff0300;
border-bottom:1px dotted #c8c8c8;
}

article p a:hover{
color:#000;
border-bottom:none;
}

article ul {font-size:1.5em; color:#656565; line-height:1.4em;}

article ul li{list-style:none; line-height:1.6em;}

article strong{font-weight:normal; color:#2b2b2b;}

article header{
width: 100%;
margin: 0;
padding: 0;
height: 200px;
background: url("../images/pagetitle.jpg") no-repeat scroll left top transparent;
}

article header hgroup{
width: 100%;
margin: 0;
padding: 4.8em 0;
}

article header hgroup h2 {
color: #AAABBB;
float: left;
font-size: 1.8em;
padding-left: 50px;
width: 150px;
text-align: center;
}

article header hgroup h3 {
color: #7D5F7B;
float: left;
font-size: 1.6em;
padding: 3px 5px 0 80px;
text-transform: uppercase;
width: auto;
word-spacing: 5px;
}

article header hgroup h3 a{
border-bottom:1px dotted #CCC;
color:#b3b3b3;
} 

article header hgroup h3 a:hover{
border-bottom:none;
color:#000;
}

article p{
padding:0 5px 16px 0;
}

article header p {
clear: both;
margin: 0 auto;
padding-top: 1.5em;
width: 90%;
}

article#portfolio div{
width:100%;
padding: 0;
}

article#portfolio #projets ul{
clear: both;
padding: 0 160px 0 5px;
text-align: center;
margin:0;
}

article#portfolio #projets ul li{
display: inline-block;
padding: 0;
width: 185px;
margin: 0.8em 1.5em;
}

#portfolio li.selected{
background: url(../images/portfolio/thumb-select.png) no-repeat center center;
background-size: 80%;
opacity: 0.7;
}

#portfolio li.selected img{
opacity: 0;
cursor: default;
}

article#portfolio div ul li img{
width:100%;
margin:2px 0 0;
image-rendering:optimizeQuality;
opacity: 1;
}

article#portfolio div ul li:first-child a:hover{
color:#2f2f2f;
}

.infos{
width: 85% !important;
margin: 1.5em auto 4em;
color: #CCCDDD;
font-size:1em;
text-align:left;
max-width: 1215px;
}

.infos h2{
margin: 0 0 0.5em -7px;
font-size: 1.3em;
}

.infos span{
color: #C999C1;
padding: 0 0.5em 0 0;
line-height: 1.6em;
}

.infos a{
color: #333848;
background: #CCCDDD;
padding: 8px 12px !important;
border-radius: 5px;
width: 75px;
text-align: center;
position: relative;
float: right;
top: -58px;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);	
}

.infos a:hover{
color: #000;
background: #c999c1;
}

.vide{display:none !important}

/*------------FILTRE PORTFOLIO------------*/

ul#filter li{
opacity: 0.7;
}

ul#filter li.current, ul#filter li:hover{
color: #C999C1;
opacity: 1;
}

ul#filter li.current {
cursor: default;
}

#projets ul.hidden{
display:none;
}

/*------------ Contact ---------------*/
hr{border: 1px inset rgba(255, 255, 255, 0.4); width: 95%;}

#carte{
height: 511px;
margin: 4em auto 0.3em;
border: 2px solid white;
border-left: none;
border-right: none;
margin-right: 142px;
}

.modulesocial{
padding:0.5em 0.5em 0 1.7em;
}

.modulesocial p{
	width: 140px;
	float: left;
	margin: 0;
	padding: 0;
	font-size: 1.1em;
	color: 
	dodgerBlue;
}

.at300b{margin: 0.3em 1px !important;}
	
.modulesocial ul{
margin: 0;
padding: 0 0 0 1.2em;
font-size: 1.2em;
}
.modulesocial ul li{
list-style: none;
display: inline-block;
margin-right:1.9em;
vertical-align: top;
}
.modulesocial .fb_iframe_widget{width:64px; overflow:hidden}
.modulesocial .fb_iframe_widget iframe{vertical-align: top !important}

.quform-outer {
width: 380px;
position: absolute;
z-index: 2;
left: 85px;
background-color: #FAFAFA;
box-shadow: 0 -2px 12px rgba(0,0,0,0.3);
margin: 1.5em 0;
height: 545px;
}
.telmail{
font-size: 13px;
padding: 1em 1.4em 0.3em;
line-height: 2.5em;
}

.telmail span img{vertical-align: middle;margin: -0.3em 0.3em 0 0;}

.loi{
color: #777888;
font-size: 0.9em;
margin: 0.8em auto;
text-align: justify;
margin-right: 142px;
padding: 2px 12px 0 8px;
}

/*------------PROJECT DETAILS SPECIFIC-------------*/

#loaderimgmax{
position: absolute;
top: 135px;
opacity: 0.7;
display: none;
left: 8.5em;
}

.detail{
text-align:center;
width: auto !important;
margin: 0px 140px 0px auto;
display: block;
}

.detail img{
width: 90%;
margin-left: -5px;
max-width:1265px
}

	
.ui-tabs-hide {
		display: none;
		}
		
#footer{
	clear:both
}