*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body{font-family:'Josefin Sans', sans-serif;}
.dark{background-color:#212229;}
a{text-decoration:none;}
h1, ul{text-transform:uppercase;}
h1::first-letter, ul::first-letter, h1 span::first-letter, nav div::first-letter{font-size:1.4em;}
h1 span{display:inline-block;}
header{position:relative;}
section{padding:60px 0 80px;
}
#titre{
	position:absolute;
	z-index:2;
	top:30%;
	text-align:center;
	width:100%;
	font-size:1.5em;
}
/*#titre h1, #titre h2{display:inline-block;}*/
#image1{
	position:relative;
	width:auto;
	overflow:hidden;
}
#image1>div{
	width:inherit;
	height:inherit;
}
#image1 img{width:100%;}
#image2{
	position:absolute;
	top:0;
	left:0;
	width:400px;
	height:400px;
	background:url('../images/image2.png');
	background-repeat:no-repeat;
	border-radius:50%;
	/*box-shadow:0px 0px 0px 1px rgba(0,0,0,0.3);*/
}
#projets>p, #tests>p, #contact p{padding-bottom:40px;}
#pres>div, #comp #ter{padding-top:40px;}
#pres{
	background: #031334; /* Old browsers */
	background: -moz-linear-gradient(top, #031334 0%, #212229 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #031334 0%,#212229 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #031334 0%,#212229 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#031334', endColorstr='#212229',GradientType=0 ); /* IE6-9 */
	margin-top: -5px;
}
#pres h1, #projets h1, #tests h1, #tests p, #projets>p{
	color:#f2f2f2;
	margin-left:8%;
	font-size:1.5em;
	margin-bottom:-10px;
}
#comp h1, #contact h1, #contact p{
	margin-left:8%;
	margin-bottom:-10px;
}
.btn{
	padding:15px 50px;
	font-size:1.1em;
}
.btn:hover{
	opacity:0.8;
	transition:1s;
}
.deco{
	width:500px;
	height:3px;
}
#pres div div{	
	display:inline-block;
	vertical-align: middle;
}
#pres div div:first-child{
	width:60%;
	text-align: center;
}
#pres>div>div:first-child img{
	width:300px;
	height:300px;
	background-color:white;
	display:inline-block;
	border-radius:50%;
}
#pres div div:last-child{width:40%;}
#pres p{
	background-color:#f2f2f2;
	padding:60px 40px;
	font-size:1.5em;
}
#pres p span{font-weight:700;}
#comp, #contact{color:#212229;}
#contact .envoie.envoie_error{color: #ff0000;}
#comp{background-color:#f2f2f2;}
#comp>div{text-align:center;}
#comp>div>a{
	background-color:#212229;
	color:#f2f2f2;
}
.ter, footer div{
	width:33.33%;
	display:inline-block;
	vertical-align:top;
}
.ter img{
	width:30%;
	padding-bottom:20px;
}
.ter p{font-size:1.5em;}
#projets{color:#f2f2f2;}
#projets>div{padding:0 5%;}
#projets div{text-align:center;}
#projets>div a, #projets>div>div:not(.btn){
	width:50%;
	display:inline-block;
	vertical-align:bottom;
	background-size:cover;
}
#projets>div>a{margin:10px 0;}

#projets div a img{width:100%;display:block;}
#projets>div>div{padding:0 2.5%;}
#projets .quad{
	width:50%;
	margin:5px 0;
}
#projets .quad:nth-child(4){
	display:inline-block;
	vertical-align: top;
	padding-top: 10%;

}
#projets .quad:nth-child(4) p{margin-bottom:12px;}
#projets a{color:#212229;}
#projets a.scroll_To{
	cursor:pointer;
	background-color:#f2f2f2;
	display:inline-block;
	color:#212229;
}
#tests>div{
	position:relative;
	z-index:1;
}
#tests>div:not(#idee)>a{
	width:20%;
	margin-left:20%;
	display: inline-block;
	vertical-align:middle;
}
#tests>div>a{text-align:center;}
#tests>div>a img{width:100%;}
#idee{
	overflow:hidden;
	position:absolute;
	z-index:5;
	right:0;
	top:0;
}
#idee a{
	color:#212229;
	float: right;
	margin-right:-50px;
}
#idee a:nth-child(2){
	display:block;
	padding:8px;
	background-color:#f2f2f2;
	margin-top:170px;
	padding-right:80px;
	margin-right:-150px;
	font-size: 1.2em;
}
#idee a img{
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	transform:rotate(-30deg);
}

#contact{
	background-image:url("../images/photo_bureau.jpg");
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	min-height:800px;
}
#contact p{font-size: 1.5em;}
#contact form{padding-top:60px;}
#contact form>div{
	width:40%;
	display:inline-block;
	margin-left: 8%;
}
#contact form>div input:last-child{margin-bottom:0;}
textarea, input, button, select{font-family: inherit;}
textarea{font-size:1.6em;margin-top:24px;}
.envoie{
	font-size:1.3em;
	padding-top:20px;
	font-weight:700;
}
#contact input:active, #contact input:focus, #contact textarea:focus, #contact textarea:active{outline:none;}
#contact input:not([type=submit]), textarea{
	border-top:none;
	border-right:none;
	border-bottom:3px solid #212229;
	border-left:3px solid #212229;
}
#contact input:not([type=submit]){
	display:block;
	vertical-align:top;
	width:100%;
	background-color:rgba(0,0,0,0);
	border-left:none;
	margin-bottom:40px;
	font-size:1.3em;
	margin-bottom:170px;
}
#contact input::-webkit-input-placeholder, #contact textarea::-webkit-input-placeholder{color:#212229;}
#contact input::-moz-placeholder, #contact textarea::-moz-placeholder{color:#212229;}
#contact input:-ms-input-placeholder, #contact textarea:-ms-input-placeholder{color:#212229;}
#contact input:-moz-placeholder, #contact textarea:-moz-placeholder{color:#212229;}
#contact input::placeholder, #contact textarea::placeholder{color:#212229;}
#contact input[type=submit]{
	background-color:white;
	border:none;
	margin:20px 4% 0 0;
	float:right;
}
textarea{
	max-width:40%;
	min-width:40%;
	height:400px;
	min-height:400px;
	background-color:rgba(0,0,0,0);
	margin:20px 4% 0 8%;
	display:inline-block;
	vertical-align:top;
}
textarea::placeholder{color:#212229;}
footer{
	height:50px;
	line-height:50px;
	font-size: 1.2em;
}
footer, footer a{color:#f2f2f2;}
footer div:first-child{width: 66.66%;}
footer div:nth-child(2){text-align:center;}
footer p{padding-left:50px;}
footer div img{
	float:right;
	height:30px;
	margin:10px 50px 0 0;
}
.slick-slide{
	width:500px;
	background-color:#f2f2f2;
}
.slick-slide img{
	margin:auto;
	max-width:100%;
}
.fancybox-slide > *{width:50%;}
.fancybox-slide>div{background-color:#f2f2f2;}


/* pendu */
.pendu{
    background:url('../libs/pendu/pendu.png');
    width:250px;
    height:233px;
    transition:2s;
}
#image_pendu{display:inline-block;}
.ie #pendu{display:none;}
#pendu{text-align: center;}
#pendu h1{text-transform:none;}
#pendu1{background-position:-250px 0;}
#pendu2{background-position:-500px 0;}
#pendu3{background-position:-750px 0;}
#pendu4{background-position:0 -250px;}
#pendu5{background-position:-250px -250px;}
#pendu6{background-position:-500px -250px;}
#pendu7{background-position:-750px -250px;}
#pendu8{background-position:0 -500px;}
#pendu9{background-position:-250px -500px;}
#pendu10{background-position:-500px -500px;}
#pendu11{background-position:-750px -500px;}
.pendu.active{transition:2s;}
#pendu,#decouv{
	text-align:center;
	margin:auto;
}
#bouton, .rejouer{
	cursor:pointer;
	background-color:#212229;
	color:#f2f2f2;
}
#lettre,#bouton{height:20px;vertical-align: middle;}
#bouton{
	border-radius:0 20px 20px 0;
	padding:0 15px 0 10px;;
	display:inline-block;
}
.rejouer{
	display:inline-block;
	padding:10px 20px;
	margin-top:20px;
	border-radius:10px;
}
#decouv_hidden,#pendu_hidden{text-align:center;}
/* loupe decouverte image */

.decouv{
	background-size:contain;
	font-size:0;
	position:relative;
	width:50%;
	margin:5% auto;
}
#decouv_1{
	background-image:url('../libs/decouverte-image/enterprise.jpg');
}
#decouv_2{
	background-image:url('../libs/decouverte-image/pont.jpg');
}
.decouv img{
	visibility:hidden;
	left:0;
	width:100%

}
.decouv>div {
	position:absolute;
	display:inline-block;
	vertical-align:top;
}
.colored{
	width:6.25%;
	height:6.25%;
}
.rejouer{font-size:12px;}

#projets .btn{width:auto;}