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

/* Reset CSS */
@import url("reset.css");

/* Base */
body {
	color: #fff;
	background:#000;
	font-size: 1.1em;
	font-family: "police", Arial, Helvetica, FreeSans, sans-serif;
}

/* buttons */
.buttons a {
	padding: 4px 10px 0;
	margin: 10px;
	border-radius: 3px;
	border: 1px solid #cfcfcf;
	display: inline-block;
	opacity: 0.7;
	-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter: alpha(opacity = 70);
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}
.buttons a:hover {
	opacity: 1;
}

/* title */
#title {
	width: 90%;
	margin: 0 auto 50px;
	text-align: center;
}
h1 {
	font-size: 2.3em;
	line-height: 1.3em;
	margin: 40px 0 20px;
}
h1 p {
	font-size: .7em;
	line-height: 1em;
}
.buttons li {
	display: inline-block;
}

/* Expertise */
#expertise {
	clear: both;
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
}
h2 {
	position: relative;
	top: 17px;
	padding: 0 15px;
	text-align: center;
}
h2 span {
	background: #000;
	padding: 0 15px
}
#expertise article {
	width: 33.33%;
	margin: 50px 0 50px;
	float: left;
	min-width: 315px;
	min-height: 155px;
}
#expertise article ul{
	height:86px;
}
#expertise article img {
	margin-top: 20px;
}
#expertise article.acces h3, #expertise article.acces ul, #expertise article.acces img {
	padding-left: 37px;
}
#expertise article li, #expertise article h3 {
	margin: 0 auto;
	width: 100%;
	font-size: 1em;
}

/* experience */
#experience {
	width: 90%;
	margin: 0 auto;
	overflow: hidden;
}
#experience ul {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .7em;
	margin: 70px auto 0;
	max-width: 977px;
	overflow: hidden;
}
#experience li {
	float: left;
	min-height: 100px;
	position: relative;
}
#experience li.sqli1, #experience li.sqli2 {
	padding-top: 40px;
}
#experience li.sqli1 p {
	padding-right: 65px;
	margin-bottom: 10px;
}
#experience li.sqli2 p {
	margin-bottom: 10px;
	padding-right: 45px;
}
#experience li.dsquare {
	padding-top: 27px;
	padding-bottom: 13px;
}
#experience li.dsquare p {
	padding-right: 75px;
	margin-bottom: 24px;
}
#experience li.blizzard {
	padding-top: 13px;
	padding-bottom: 27px;
}
#experience li.blizzard p {
	padding-right: 20px;
	margin-bottom: 24px;
}
#experience li.free p {
	padding-right: 50px;
	margin-bottom: 24px;
}
#experience li.sqli1 .time {
	margin-left: 30px;
	width: auto;
}
#experience li.sqli1 .time, #experience li.sqli2 .time {
	background: #da1014
}
#experience li.dsquare .time {
	background: #6c217f
}
#experience li.blizzard .time {
	background: #1277c4
}
#experience li.free .time {
	background: #FF0
}
#experience .time {
	display: block;
	background: #fff;
	width: 100%;
	height: 6px;
	border-radius: 4px;
}
#experience .date {
	color: #999;
	font-size: .9em;
}
#experience li strong {
	font-size: 1.4em;
	font-weight: normal;
}
.sqli1 strong {
	color: #da1014;
}
.sqli2 strong {
	color: #da1014;
}
.dsquare strong {
	color: #6c217f;
}
.blizzard strong {
	color: #1277c4
}
.free strong {
	color: #FF0;
}
#experience .poi {
	position: absolute;
	width: 6px;
	height: 6px;
	bottom: 25px;
	left: 5px;
}
.diplome {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .7em;
	clear: both;
	margin-top: 20px;
}
.hrDiplome {
	width: 30%;
	margin: 20px auto 0;
	opacity: 0.2;
}
.poiDiplome {
	width: 6px;
	height: 6px;
	background: #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	display: inline-block;
	margin: 0 8px 1px 5px;
}
.diplome strong {
	color: #0F0;
}
.diplome img {
	vertical-align: top;
}

/* En savoir plus */
#plus {
	width: 90%;
	margin: 70px auto 100px;
	clear: both;
	overflow: hidden;
}
#plus h2{
	background:url(../img/chevronOn.png) 190px 9px no-repeat;
	top: 8px;
	left: -10px;
	text-align: left;
	padding-right:20px;
}
#plus h2.active{
	background:url(../img/chevron.png) 190px 9px no-repeat;
}
#plus h2 a{
	color:#fff;
	text-decoration:none;
}
#plus hr {
	opacity: 0.5;
}
#plus li {
	padding: 4px 5px 0;
	margin: 10px;
	border-radius: 3px;
	display: inline-block;
	opacity: 0.5;
	-ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)";
	filter: alpha(opacity = 25);
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	-o-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;
}
#plus li:hover {
	opacity: 1;
}