@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic");

body {
		background-color:  	#303736;
		background-attachment: fixed;
		background-image: url("../im/overlay.png");
		background-position: top left;
		background-repeat: repeat;
		background-size: auto;
}


body.is-loading *, body.is-loading *:before, body.is-loading *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-o-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-o-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

	body, input, select, textarea {
		color: #FFFFFF;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 13pt;
		font-weight: 400;
		line-height: 1.5em;
	}


	#header {
		background-color: #59bd99;
		background-attachment: scroll;
		background-image: url("../im/overlay.png");
		background-position: top left;
		background-repeat: repeat;
		background-size: auto;
		color: rgba(255, 255, 255, 0.5);
		height: 100%;
		left: 0;
		padding: 2em 4em 0 4em;
		position: fixed;							
		text-align: center;
		top: 0;
		width: 22%;
	}




/* Image Main */


	.portfolio {
		border-radius: 0.35em;
		border: 0;
		display: inline-block;
		position: relative;
		transform: scale(1);
		transition: all 0.5s;
	}

		.portfolio:before {
			-moz-transition: opacity 0.2s ease-in-out;
			-webkit-transition: opacity 0.2s ease-in-out;
			-o-transition: opacity 0.2s ease-in-out;
			-ms-transition: opacity 0.2s ease-in-out;
			transition: opacity 0.2s ease-in-out;
			background: url("../im/overlay.png");
			border-radius: 0.35em;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			opacity: 0;
			position: absolute;
			top: 0;
			width: 100%;

		}

		.portfolio.thumb {
			text-align: center;
			
		}

			.portfolio.thumb:after {
				-moz-transition: opacity 0.2s ease-in-out;
				-webkit-transition: opacity 0.2s ease-in-out;
				-o-transition: opacity 0.2s ease-in-out;
				-ms-transition: opacity 0.2s ease-in-out;
				transition: opacity 0.2s ease-in-out;
				border-radius: 0.35em;
				border: solid 3px rgba(255, 255, 255, 0.5);
				color: #fff;
				content: 'Voir le projet';
				display: inline-block;
				font-size: 0.8em;
				font-weight: 400;
				left: 46%;
				line-height: 2.25em;
				margin: -1.25em 0 0 -3em;
				opacity: 0;
				padding: 0 1.5em;
				position: absolute;
				text-align: center;
				text-decoration: none;
				top: 50%;
				white-space: nowrap; 
				
			}

			.portfolio.thumb:hover:after {
				opacity: 1.0;

			}

			.portfolio.thumb:hover:before {
				background: url("../im/overlay.png");
				opacity: 1.0;
				
			}
			.portfolio.thumb:hover {
  				transform: scale(1.1);
				z-index: 1;
				transition: all 0.5s;
}

		.portfolio img {
			border-radius: 0.35em;
			display: block;
		}

		.portfolio.left {
			float: left;
			margin: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.portfolio.right {
			float: right;
			margin: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.portfolio.left, .image.right {
			max-width: 40%;
		}

			.portfolio.left img, .image.right img {
				width: 100%;
			}

		.portfolio.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.portfolio.fit img {
				width: 100%;
			}

		.image.avatar {
			border-radius: 100%;
		}

			.image.avatar:before {
				display: none;
			}

			.image.avatar img {
				border-radius: 100%;
				width: 100%;
				max-width:150px;
			}

/* Description Vignettes Hover */

.img__description {
  position: absolute;
  top: 7px;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  opacity: 0;
				transition: all 0.5s;	
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
  transition: all 0.5s;	
}


.img-responsive {
  width: 100%;
  max-width: 600px;
  height: auto;
	vertical-align:baseline;
}

/* Main */

	#main {
		margin-left: 30%;
		max-width: 75em;
		width: calc(100% - 35%);
		text-align: center;
		transition: all 0.5s;
}

		#main > section {
			border-top: solid 2px #efefef;
			margin: 0 0 0 0;
			padding: 2em 0 4em 0;
		}

			#main > section:first-child {
				border-top: 0;
				margin-top: 0;
				padding-top: 0;
			}


/* Demo */
.demo-responsive { 
	overflow:hidden; 
	padding-top:56.25%; 
	position:relative;
	width:100%;
}

.demo-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
 	width: 100%;
 	max-height:600px;
 	height: 100%;
}


/* Footer */
#footer {
		bottom: 0;
		left: 0;
		padding: 0 0 4em 0;
		position: fixed;
		text-align: center;
		width: 25%;
		transition: all 0.5s;
}

	#footer .icons {
			margin: 1em 0 0 0;
}

		#footer .icons a {
				color: rgba(255, 255, 255, 0.4);
}

		#footer .copyright {
			color: rgba(255, 255, 255, 0.4);
			font-size: 0.8em;
			list-style: none;
			margin: 1em 0 0 0;
			padding: 0;
}

		#footer .copyright li {
			border-left: solid 1px rgba(255, 255, 255, 0.25);
			display: inline-block;
			line-height: 1em;
			margin-left: 0.75em;
			padding-left: 0.75em;
}

			#footer .copyright li:first-child {
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
}

			#footer .copyright li a {
					color: inherit;
}


/* Menus Header */

#tablemenu {
	position:relative;
	margin-top: 60px;
}

#tablemenu td{
	opacity:1;
	transition: all 0.5s;
	width: 100px;
	height: 50px;
	border-radius: 5px;
}

#tablemenu td:hover{
 /* background-color: 	#1fa1b8; */
  -webkit-opacity:1;
  -webkit-filter:alpha(opacity=100);
}

#menu-accordeon {
	position:relative;
    list-style:none;
	padding-right: 35px;
}

#menu-accordeon ul {
	position:absolute;
	margin-left:40%;
}



#menu-accordeon li {
	border-radius: 30px;
	width:60px;
	
}

#menu-accordeon li li {
	max-height:0;
	width: 160px;
	margin-left:75px;
	overflow: hidden;
	transition: all .5s;
	background: #d0aa5b;
	margin-top:2px;
	height:50px;
}

#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;

}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em;
}
#menu-accordeon li:hover {
 
}
#menu-accordeon li li:hover {
   background: #D67700;
	
}

#menu-accordeon li:hover li {
  max-height: 15em;
}

/* Menus Archives */

#tablearchive {
	position:relative;
	margin-top: 60px;
	width: 100%;


}

#tablearchive th{
	opacity:1;
	transition: all 0.5s;
	width: 20%;
	height: auto;

	vertical-align: middle;
	border: hidden;
	border-width: thin;

}

#tablearchive	tr:nth-child(even)
{
		background-color: #4D4D4D;
		background-attachment: scroll;
		background-image: url("../im/overlay.png");
		background-position: top left;
		background-repeat: repeat;
		background-size: auto;
}



.fond-annee{
		background-color: #59bd99;
		background-attachment: scroll;
		background-image: url("../im/overlay.png");
		background-position: top left;
		background-repeat: repeat;
		background-size: auto;
		color: rgba(255, 255, 255, 0);
		border:hidden;

}


#tablearchive td:hover{
 /* background-color: 	#1fa1b8; */
  -webkit-opacity:1;
  -webkit-filter:alpha(opacity=100);
}
/* TEXTES */

	h1 {
		font-size: 1.3em;
		line-height: 1.5em;
		font-weight: 500;
		text-align: center;
		color:  #FFFFFF;
	}

	h2 {
		font-family:Helvetica, sans-serif;
		font-size: 1.5em;
		font-weight: 500;
		text-align: center;
		margin-top:12px;
		color: #FFFFFF;
	}

	h3 {
		font-size: 1.15em;
		line-height: 2.6em;
		
		text-align: center;
	}

	h4 {
		font-size: 1.1em;
		line-height: 1.5em;
	}

	h5 {
		font-size: 0.7em;
		line-height: 1.3em;
		text-align:right;
		color: #E0C896;
	}

	h6 {
		font-size: 1.2em;
		line-height: 1.5em;
		text-align:left;
	}

	h7 {
			font-family:Gotham, sans-serif;
		font-size: 1em;
		line-height: 1em;
		font-weight: 50;
		vertical-align: middle;

	}

	h8 {
			font-family:Gotham, sans-serif;
		font-size: 1em;
		line-height: 1em;
		font-weight: 50;
		vertical-align: middle;

	}

	h9 {
		font-size: 1.3em;
		line-height: 1.5em;
		font-weight: 500;
		text-align: center;
		color:  #ABABAB;
	}
a{color:#DDDDDD}   
a:hover{color: #DDDDDD}   
a:active{color:#DDDDDD}
a:visited{color: #DDDDDD}
a:link{color: #DDDDDD}

/* Modal */

.vertical-align-center {
    /* To center vertically */
    display: table;
    vertical-align: super;
}

.modal-dialog > div {
	width:100%;
	height: 100%;
	border-radius: 15px;
	background-image: url("../im/overlay.png");
	background-attachment: fixed;
	background-color:  	#303736  ;
	margin:0;
}

.modal-header {
	width: 100%;
	height:100px;
	background-image: url("../im/overlay.png");
	background-attachment: scroll;
	background-color:#59bd99;
	border-radius: 15px 15px 0 0;
}

.close {
	margin-bottom: 10px;
	
}

/* contenu du Modal*/
.modal-body {
	width: 90%;
	text-align: center;
	margin: auto;
}

.modal-text {
		width: 80%;
	margin: auto;
	margin-top:20px;
	margin-bottom:20px;	
}
.modal-footer {
	padding: 10px 16px;
	text-align: right;
	width:100%;
	height:50px;
	background-image: url("../im/overlay.png");
	background-attachment: scroll;
	background-color:  	#272A2A  ;
	border-radius: 0 0 15px 15px;
}

table {
  text-align: right;
}

.incrust-responsive { 
overflow:hidden; 
padding-bottom:56.25%; 
position:relative; 
height:0;
}

.incrust-responsive iframe {
left:0; 
top:0; 
height:100%;
width:100%;
position:absolute;
}

.img_modal-responsive {
	margin: auto;
    display: inline-block;
}


	.images.thumb {	
		display: inline-block;
		position: relative;
		transform: scale(1);
		transition: all 0.5s;
		}

			.images.thumb:hover {
  				transform: scale(1.1);
				z-index: 1;
				transition: all 0.5s;
}