@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400);

*,
*:before,
*:after{
	 -webkit-box-sizing:border-box;
	 -khtml-box-sizing:border-box;
	 -moz-box-sizing:border-box;
	 -ms-box-sizing:border-box;
	 box-sizing:border-box;
}

body{
   background-color: #ececec;
   font-family: 'Open Sans', Arial, Tahoma, Verdana, serif;
   font-size: 12px;
   color: black;
   margin: 0;
   margin-left: auto;
   margin-right: auto;
   min-width: 400px;
}

.loader {
	position : fixed;
	z-index: 9999;
	background-image: url('../images/335.GIF');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: white;
	top : 0px;
	left : 0px;
	height : 100%;
	width : 100%;
	cursor : wait;
}

#header_pic {
	background-image: url('../images/header2.jpg');
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: fixed;
	border-bottom: 8px #ececec solid;
	padding-top: 20px;
	-moz-box-shadow: inset 0px -10px 100px 0px #000000;
	-webkit-box-shadow: inset 0px -10px 100px 0px #000000;
	-o-box-shadow: inset 0px -10px 100px 0px #000000;
	box-shadow: inset 0px -10px 100px 0px #000000;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=90, Strength=100);
}

.content {
	margin-left: auto;
	margin-right: auto;
	width: 950px;
}

.headerfont a, .headerfont a:active, .headerfont a:visited {
	color: white;
	font-size: 12px;
}

#headernavigation li {
	list-style-type: none;
	display: inline;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 8px;
}

#headernavigation li:hover {
	border-bottom: 2px #693e1a solid;
}

ul#headernavigation {
	margin: 0;
}

.headertwitter {
	margin-top: -3px;
}

.headertwitter a{	
	font-size: 15px;
}

#contentsite {
	width: 100%;
}

#avatar {
	background-image: url('../images/pic_avatar_new.jpg');
	width: 150px;
	height: 150px;
	border-radius: 300px;
	border: white 10px solid;
	margin-top: 120px;
	margin-left: auto;
	margin-right: auto;
}

#name {
	color: white;
	font-size: 30px;
	width: 100%;
	text-align: center;
	margin-top: 10px;
	text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
}

#description {
	text-align: center;
	color: white;
	font-size: 15px;
	margin-top: 10px;
	text-shadow: 0px 0px 7px rgba(0, 0, 0, 1);
}

#apropos {
	background-color: white;
	width: 100%;
	overflow: hidden;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: justify;
}

#citation {
	width: 100%;
	background: black;
	height: 200px;
}

#citation .content {
	height: 200px;
	background-image: url('../images/stevejobs.jpeg');
	background-repeat: no-repeat;
	color: white;
	font-size: 20px;
	text-align: right;
	font-style: italic;
	padding: 40px;
	padding-right: 30px;
	line-height: 1.5em;
}

.parallax {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: calc((100% - 400px) / 2) 0;
	height: 200px;
	position: relative;
}

#author {
	background-color: white;
	color: black;
	padding: 2px;
	padding-left: 10px;
	padding-right: 10px;
	font-style: normal;
	font-size: 15px;
	width: 103px;
	float: right;
	margin-top: 60px;
	margin-right: -30px;
}

#messites {
	background-color: white;
	width: 100%;
	padding-top: 40px;
	padding-bottom: 60px;
	overflow: hidden;
}

.contenttitle {
	font-size: 25px;
	color: #525252;
	padding-left: 15px;
	padding-right: 15px;
	border-bottom: 1px solid #693e1a;
	padding-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
}

.contentdescription {
	color: #aaaaaa;
	text-align: center;
	margin-top: 15px;
}

#compafone img {
	width: 450px;
	height: auto;
	-moz-box-shadow: 0px 0px 10px 0px #656565;
	-webkit-box-shadow: 0px 0px 10px 0px #656565;
	-o-box-shadow: 0px 0px 10px 0px #656565;
	box-shadow: 0px 0px 10px 0px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=10);
	-webkit-transform: rotateY(5deg);
    transform: rotateY(5deg);
}

#compafone .left {
	margin-top: 50px;
	-webkit-perspective: 150px;
    perspective: 150px;
	margin-left: 30px;
}

#compafone .right {
	width: 400px;
	margin-top: 75px;
	text-align: justify;
}

#compafone .right a, #compafone .right a:active, #compafone .right a:visited {
	color: #693e1a;
	font-weight: normal;
}

#competences {
	padding-top: 40px;
	padding-bottom: 40px;
	overflow: hidden;
}

.link:hover {
	opacity: 0.8;
}

.competence_rond {
	width: 100px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.competence_pic {
	width: 70px;
	height: 70px;
	background-color: #693e1a;
	color: white;
	border-radius: 50px;
	font-size: 35px;
	padding-top: 9px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.competence_desc {
	color: #525252;
	margin-top: 10px;
	width: 150px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.competence_content {
	color: white;
	font-size: 13px;
	background-image: url('../images/opacity.png');
	padding: 10px;
	margin-top: -135px;
	width: 200px;
	margin-left: auto;
	margin-right: auto;
}

.competence_arrow {
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #8d8d8d transparent transparent transparent;
	width: 20px;
	height: 10px;
	margin-left: auto;
	margin-right: auto;
}

#controls {
	width: 100%;
	margin: 0 auto;
	list-style-type: none;
	padding-top: 40px;
	padding-left: 0;
}
#controls li {
	width: calc((100% - 10px) / 4);
	display: inline-block;
}

#controls li .link {
	display: block;
}
#controls li .hover_controls {
	float: right;
	margin: 10px 10px 0 0;
	display: none;
	width: calc(100% - 15px);
}
#controls li:hover .hover_controls {
	display: block;
}

#realisations {
	width: 100%;
	background-color: white;
	padding-top: 40px;
	padding-bottom: 100px;
	overflow: hidden;
}

.real {
	-moz-box-shadow: 0px 0px 10px 0px #656565;
	-webkit-box-shadow: 0px 0px 10px 0px #656565;
	-o-box-shadow: 0px 0px 10px 0px #656565;
	box-shadow: 0px 0px 10px 0px #656565;
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=10);
	overflow: hidden;
	margin-top: 30px;
}

.real .left, .real .right {
	width: 475px;
}

.contentreal {
	color: white;
	font-size: 12px;
	background-image: url('../images/opacity.png');
	margin-top: 0px;
	width: 100%;
	height: 110px;
	overflow: hidden;
	position: relative;
	z-index: 9;
}

.headereal {
	background-color: #525252;
	width: 100%;
	padding: 5px;
	padding-left: 10px;
	margin-bottom: 5px;
}

.headereal2 {
	display: none;
	background-color: #525252;
	width: 100%;
	padding: 5px;
	padding-left: 10px;
	margin-bottom: 5px;
	color: white;
}

.headereal2 a, .headereal2 a:active, .headereal2 a:visited {
	color: white;
	font-weight: normal;
}

.contentboxreal {
	padding: 10px;
	width: 100%;
	overflow: hidden;
}

.contentreal a, .contentreal a:active, .contentreal a:visited {
	color: white;
	font-weight: normal;
}

.realpic {
	height: 300px;
	overflow: hidden;
}

#contact {
	padding-bottom: 40px;
	width: 100%;
}

#arrobase {
	font-size: 80px;
	color: #693e1a;
	text-align: center;
	margin-top: -60px;
}

input {
	width: 300px;
	padding: 10px;
	color: #693e1a;
	border: 0;
	margin-top: 10px;
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 11px;
	outline: none;
	-webkit-appearance: none;
}

#formulairecontact {
	width: 650px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

textarea#message {
	width: 650px;
	height: 150px;
	padding: 10px;
	color: #693e1a;
	border: 0;
	margin-top: 10px;
	margin-bottom: 20px;
	font-weight: bold;
	resize: vertical;
	outline: none;
}

#formsubmit {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
}

footer {
	background-color: white;
	padding: 10px;
	overflow: hidden;
	color: #693e1a;
	border-bottom: 20px solid #ececec;
}

#messageenvoye {
	padding: 40px;
	color: green;
	text-align: center;
}

.left{
   float: left;
}

.right{
   float: right;
}

img { border:0px; }
 
 a
{
   color: #693e1a;
   text-decoration: none;
   font-weight: bold;
}
a:visited
{
   color: #693e1a;
   text-decoration: none;
   font-weight: bold;
}
a:active
{
   color: #693e1a;
   text-decoration: none;
   font-weight: bold;
}

/*media queries*/  

    /* Tablette */
	@media only screen and (max-width: 970px) {
	
		.content { width: 100%; padding-left: 10px; padding-right: 10px; }
		#apropos .right { position: absolute; right: 10px; z-index: 9; background-color: white; padding-left: 20px;padding-top:8px; padding-bottom: 20px; margin-top: 0!important;}
		.competence:nth-child(3), .competence:nth-child(4), .competence:nth-child(5) { margin-right: calc((100% - 801px) / 3); }
		.real { padding: 0; }
		.real .left, .real .right { width: 50%; height: auto; }
		.realpic img { width: 100%; height: auto; }
		.contentreal { display: none; }
		.headereal2 { display: block; }
		.realpic { height: auto; margin-bottom: -5px; }
	}
	
	@media only screen and (max-width: 930px) {
	
		#compafone img { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); width: 100%; height: auto; }
		#compafone .left { width: 50%; margin-left: 0; }
		#compafone .right { width: 45%; margin-top: 50px;}
		
	}
	
	@media only screen and (max-width: 710px) {
	
		#apropos .left { display: none; }
		#apropos .right { width: 100%!important; padding-left: 0; margin: 0; position: static }
		#citation .content { font-size: 15px; }
		
	}
	
		@media only screen and (max-width: 695px) {
	
		#formulairecontact { width: 100%; }
		input { width: 100%; }
		form .left, form .right { width: calc((100% - 30px) / 2); }
		textarea#message { width: 100%; }
		
		#controls li { width: calc((100% - 10px) / 2); margin-bottom: 40px; }
		
	}
	
	/* Menu off */
	@media only screen and (max-width: 540px) {
	
		.headerfont { display: none; }
		#citation .content { font-size: 11.5px; }
		#compafone .left { width: 100%; }
		#compafone .right { width: 100%;}
		.real .left, .real .right { width: 100%; height: auto; }
		footer { font-size: 8px; }
		#citation { display: none; }
		
	}