@charset "UTF-8";
/* CSS Document */
* {
	font-family: 'Lato', sans-serif;
} 

html,body { 
	height: 100%; margin: 0px; padding: 0px; /**/
}

html { 
	margin-bottom:-25px;
}

.contact {
	background-color:#000;
}

.example figure {
	float: left;
	background: #17A781;
	width: 20%;
	height: 159px;
	margin: 0 2px 4px;
}
.example .item-w2 {
	width: 40%;
	background: #ED9393;
}
.example .item-h2 {
	height: 322px;
	background: #7CB744;
}
.example .item-h3 {
	height: 485px;
	background: #38B5E5;
}

@media only screen and (max-width: 640px){	
/* percentage-based widths for fluid/responsive layout */

	.example {
		padding-top:70px;
	}
	
	

/*
.example .item {
	width:100%;
}
*/

}

@media only screen and (min-width: 641px){	
	.example {
		padding-top:92px;
	}
	
	
}

.isotope .isotope-item {
	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	transition-duration: 0.8s;
	-webkit-transition-property: -webkit-transform, opacity;
	-moz-transition-property: -moz-transform, opacity;
	transition-property: transform, opacity;
}

.example .item img {
	width: 100%;
	height:auto;
	position:absolute;
	z-index:1;
	}

.item figcaption {
	z-index:2;
	/*background-color:#c2c2c2;*/
	position:absolute;
	height:100%;
	width:100%;
	/*display:none;*/
	cursor:pointer;
	display:block;
}

.item  figcaption div {
	display:table;
	height:100%;
	width:100%;
}

@media only screen and (min-width: 641px){	
.item  figcaption div {
	/*background-color: rgb(224, 223, 0);  alternative solide 
    background-color: rgba(224, 223, 0, 0.4);*/
			background-color: rgb(215, 215, 196); /* alternative solide */
			background-color: rgba(215, 215, 196, 0.4);
}
}


.item figcaption div div {
	display: table-cell;
    vertical-align: middle;
	text-align:center;
}

.item figcaption div div div {
	display:inline-block;
	vertical-align:top;
	background-color:#fff;/**/
	margin-left:auto;
	margin-right:auto;
	width:80%;
	max-width:210px;
	height:100%;
	max-height:120px;
	padding-top:20px;
	padding-top:10px;
}



figcaption h2 {
	font-size:14px;
	font-weight:bold;
	padding-bottom:14px;
	margin-bottom:6px;
	display:block;
	background: url(../images/trait.png) bottom center no-repeat;
	}
	


figcaption span {
	font-size:10px;
	}
	
span.trait {
	color:#e0df00;
	font-weight:bold;
	font-size:40px;
	line-height:10px;
	padding-bottom:0;
	margin-bottom:0;
	display:none;
	}



/*
#menu {
	position: absolute;
	top: 0px;
	right: 0px;
	height: 100%;
	z-index:1031;*/
	/*background-color: #54541a;*/
    /*background-color: rgb(84, 84, 26); /* alternative solide */
    /*background-color: rgba(84, 84, 26, 0.8);
}
*/
/* Reset responsive Bootstrap elements */
/*
#navbar2 .navbar-header {
    float: none;
}

#navbar2 .navbar-toggle {
    display: block;
}

#navbar2 .navbar-nav {
    float: none !important;
    margin: 7.5px -15px;
}

#navbar2 .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

#navbar2 .navbar-form {
    float: none !important;
    padding: 0;
}

#navbar2 .navbar-nav>li {
    float: none;
}
*/

/* Reposition elements affected by the sliding menu */
#wrapper {
    position: relative;
    right: 0;
    transition: right 0.35s ease;
}

/*
#navbar2 .navbar-collapse {
    position: fixed;
    top: 0;
    right: -30%;
    display: block;
    width: 30%;
    height: 100% !important;
    /*max-height: 100%;*//*
    margin: 0;
    background-color: #f8f8f8;
    transition: right 0.35s ease;
}

#navbar2 .navbar-collapse.collapsing {
    transition: right 0.35s ease;
}

#navbar2 .navbar-collapse.in {
    right: 0;
}

body.menu-slider.in {
    overflow: hidden;
}

body.menu-slider #wrapper {
    transition: right 0.35s ease;
}

body.menu-slider.in #wrapper {
    right: 30%;
}

*/
.navbar-brand {
	padding-bottom:5px;
}

.navbar {
	min-height:69px;
	margin-bottom:0px;
}

.navbar-inverse {
	background-color:#fff;
	border-color:#fff;
	border:0;
}

.navbar-inverse .navbar-toggle .icon-bar {
	background-color:#333;
}

.navbar-inverse .navbar-toggle:focus .icon-bar {
	background-color:#e0df00;
}
.navbar-inverse .navbar-toggle:hover .icon-bar {
	background-color:#e0df00;
}

.navbar-inverse .navbar-nav>li>a {
	color:#333;
}

.navbar-inverse .navbar-nav>li>a.active, .navbar-inverse .navbar-nav>li>a.hover, .navbar-inverse .navbar-nav>li>a.focus {
	background-color:#e0df00;
	color:#fff;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus {
    color: #fff;
    background-color: #080808;
	/*background-color:#e0df00;*/
}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus {
	background-color:#e0df00;
	color:#fff;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover {
    color: #fff;
    background-color: #e0df00;
	
	}
.navbar-toggle {
	border:0;
}
	
#logo {
	/*background:#09F;*/
	float:right;
	padding-right:88px;
	padding-top:21px;
	z-index:1031;
	padding-left:16px;
}


@media only screen and (max-width: 640px){	
/* percentage-based widths for fluid/responsive layout */

	#logo {
		display:none;
	}
	
	#menu-bar {
		display:none;
	}

}

@media only screen and (min-width: 641px){	

	.navbar {
		display:none;
	}

}




/*
    these are just the default styles used in the Cycle2 demo pages.  
    you can use these styles or any others that you wish.
*/


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { 
-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}


.cycle-slideshow {
	/*
	width: 45%; min-width: 200px; max-width: 500px; margin: 10px auto; padding: 0; position: relative;
    background: url(http://malsup.github.com/images/spinner.gif) 50% 50% no-repeat;
	*/

 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
	/*
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
	*/
	width:100%;
	height:auto;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; 
	z-index: 100;
}

/* pager */
.cycle-pager { 
    text-align: center; 
	width: 100%; 
	z-index: 500; 
	position: absolute; 
	top: 10px; 
	overflow: hidden;
}
.cycle-pager span { 
    font-family: arial; 
	font-size: 50px; 
	width: 16px; 
	height: 16px; 
    display: inline-block; 
	color: #ddd; 
	cursor: pointer; 
}
.cycle-pager span.cycle-pager-active { 
color: #D69746;
}
.cycle-pager > * { 
cursor: pointer;
}


/* caption */
.cycle-caption { 
position: absolute; 
color: white; 
bottom: 15px; 
right: 15px; 
z-index: 700; 
}


/* overlay */
.cycle-overlay { 
    font-family: tahoma, arial;
    position: absolute; bottom: 0; width: 100%; z-index: 600;
    background: black; color: white; padding: 15px; opacity: .5;
}

.cycle-prev span, .cycle-next span{ 
display:none;
}

/* prev / next links */
.cycle-prev, .cycle-next { 
position: absolute; 
top: 50%; 
width: 30%; 
opacity: 0.8; 
filter: alpha(opacity=80); 
z-index: 800; 
height: 50%; 
cursor: pointer; 
color:#fff;
text-transform:uppercase;
}
.cycle-prev { 
left: 0;  
padding-left:50px;
padding-top: 10px;
background: url(../images/btn-prev.png) 20px 0 no-repeat;
}
.cycle-next { 
right: 0; 
text-align:right;
padding-right:50px;
padding-top: 10px;
background: url(../images/btn-next.png) 95% 0 no-repeat;
}
.cycle-prev:hover, .cycle-next:hover { 
/*opacity: .7; 
filter: alpha(opacity=70) */
opacity: 1; 
filter: alpha(opacity=100)
}

@media only screen and (min-width: 641px){
	
.cycle-prev:hover span, .cycle-next:hover span { 
display:inline;
}

}
/*
.disabled { 
opacity: .5; 
filter:alpha(opacity=50); 
}
*/

/* display paused text on top of paused slideshow */
.cycle-paused:after {
    content: 'Paused'; 
	color: white; 
	background: black; 
	padding: 10px;
    z-index: 500; 
	position: absolute; 
	top: 10px; 
	right: 10px;
    border-radius: 10px;
    opacity: .5; 
	filter: alpha(opacity=50);
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/
/*
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    .cycle-slideshow { width: 200px;}
    .cycle-overlay { padding: 4px }
    .cycle-caption { bottom: 4px; right: 4px }
}
*/


.projet h1 {
	display:block;
	text-align:center;
	font-size:16px;
	letter-spacing:2px;
	padding-bottom:14px;
	margin-bottom:6px;
	background: url(../images/trait.png) bottom center no-repeat;
			}

.projet h1 + p {
	font-size:13px;
	padding-top:8px;
	text-align:justify;
}

.projet h2 {
	display:block;
	text-align:center;
	font-size:12px;
	color:#e0df00;
	text-transform:uppercase;
	padding-bottom:0;
	margin-bottom:0;
	font-weight:700;
}

.projet h2 + p {
	font-size:14px;
	letter-spacing:2px;
	text-align:center;
}

#navprojets {
	/*
	position:absolute;
	left:0;
	*/
}

#btn-project-close {
	position:absolute;
	right:0;
	top:0;
	z-index:101;
}

#col2 {
	position:relative;
}

.container.page {
	padding-bottom:60px;
}

@media only screen and (min-width: 961px){	

	.projet {
		padding-top:110px;
	}
	
	#col1 {
		float:left;
		padding-top:0;
		height:100%;
		/*background-color:#e0df00;*/
		background-color:#d7d7c4;
	}
	
	#col2 {
		float:left;
		width:429px;
		background:#fff;
		height:100%;
	}

}
@media only screen and (max-width: 960px){
	
	.projet {
		padding-top:30px;
	}
	
	#col1 {
		padding-top:80px;
		width:100% !important;
		background-color:#fff;
	}
	
	#col2 {
		padding-bottom:30px;
		width:100% !important;
	}
	
	#btn-project-close {
		display:none;
	}
	
	.row {
		padding-left:16px;
		padding-right:16px;
	}
}

@media (min-width: 1200px){
	.container.page {
		width: 970px;
		width: 820px;
	}
}


.container.page h1 {
	font-size:33px;
	font-weight:300;
	color:#e0df00;
}

h1 {
	padding-left:15px;
}

@media only screen and (min-width: 960px){
	.container.page h1 {
		font-size:43px;
		padding-left:15px;
		padding-bottom:30px;
		padding-top:20px;
	}
}


.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 65px;
  /* background-color: #e0df00;*/
}

.pprev, .pnext {
	display:block;
	float:left;
	height:32px;
	padding-top:14px;
}

.pnext {
	float:right;
}


.pprev:hover, .pnext:hover, .pprev, .pnext {
	text-decoration:none;
	text-transform:uppercase;
  	color: #e0df00;
	font-size:12px;
}

.pnext:hover {
	background-color: rgb(255, 255, 255); /* alternative solide */
    background-color: rgba(255, 255, 255, 0.8);
}


.pprev:hover span, .pnext:hover span{
	display:inline;
}

.pprev {
	background:url(../images/btn-projet-prev.png) no-repeat top right;
	width:166px;
}

.pnext {
	background-image:url(../images/btn-projet-next.png);
	background-repeat:no-repeat;
	width:110px;
	padding-left:50px;
}


#nav_projets {
	margin-left:auto;
	margin-right:auto;
	width:326px;
}
	
@media only screen and (min-width: 961px){
	#nav_projets {
	position:absolute;
	left:-166px;
	z-index:801;
	padding-left:0;
	margin-left:0;
	margin-right:0;
	bottom:46px;
	}
	
	.pprev span, .pnext span{
		display:none;
	}
	
	.pprev:hover {
		color: #fff;
		color: #c5c300;
	}

}




.panel-default>.panel-heading {
    color: #fff;
    background: #e0df00 url(../images/arrow-white.png) no-repeat 0px 9px;
	padding-left:40px;
}
.panel-group .panel-heading {
    border-bottom: 0;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
	
}

.panel-group .panel {
	border-radius:0;
}

.panel {
	border:0;
	box-shadow: none;
}
a:focus, a:hover {
	outline: none;
	text-decoration:none;
}

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

.list_arrow a{
	display:block;
	padding-bottom:14px;
	padding-left:46px;
    background: url(../images/arrow-green.png) no-repeat 0px 0px;
	color:#333;
}

.list_arrow a:hover{
	color:#e0df00;
	text-decoration:underline;
}


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

.list_arrow2 li{
	display:block;
	padding-bottom:14px;
	padding-left:46px;
    background: url(../images/arrow-green.png) no-repeat 0px 0px;
}





.panel-default>.panel-heading+.panel-collapse .panel-body {
	border-top:0;
}
.panel-group .panel-heading+.panel-collapse .panel-body{
	border-top:0;
}

.link_top {
	color:#e0df00;
	padding-left:20px;
	display:block;
    background: url(../images/arrow-green3.png) no-repeat 0px 0px;
	width:70px;
	font-size:11px;
}
.link_top:hover {
	color:#e0df00;
}


h2 {
	color:#e0df00;
}

.row a {
	color:#e0df00;

}


@media only screen and (max-width: 640px){	

	
	.item figcaption div div div {
				background-color: rgb(255, 255, 255); /* alternative solide */
				background-color: rgba(255, 255, 255, 0.7);
	}
	
	figcaption h2 {
		color:#000;
	}

}