@charset "utf-8";
*{
	margin:0;
	padding:0;
	border:0;
	outline:none;
	list-style:none;
	text-decoration:none;
	text-align:center;
	}
body {
	font-size:62.5%;
	font-family: 'Lato', sans-serif;
	background:#ffffff;

}
img{
	max-width:100%;
}

fieldset{
	color:#af1515;
	margin:15px 0;
	border-top:3px solid #af1515;
	border-bottom:3px solid #af1515;
	/*border-radius:7px;*/	
}

#global{
	width:100%;
}
	
#header{
	position:fixed;
	z-index:1;
	top:0;
	background:rgba(255,255,255, 0.9);
	left:0;
	width:70%;
	padding:0.5% 15%;
}

#logo{
	float:left;
}

#menu{
	float:right;
}

#menu li{
	display:inline;
	/*margin-left:10px;*/
	line-height:100px;
	float:right;
	/*border:1px solid #af1515;
	border-radius:7px;*/
	padding:0 0px;
	margin:3px;
	backgroung-color:#af1515;
}
#menu li a{
	color:#af1515;
	font-size:2em;
	text-transform:uppercase;
}
#menu li a:hover{
	color:#333333;
}

#home{
	float:left;/*on met un float left, car lorsque les li seront en float:left, la troisème partie passera dessous.*/
	width:100%;
	/*height:346px;*/
	/*padding:254px 15% 380px 15%;*/
	text-align:center;
}

/*#home h1{
	text-transform:uppercase;
	font-size:3em;
	color:#ffffff;
	letter-spacing:1px;
	font-weight:lighter;
	margin-bottom:25px;
}
#home a{
	font-weight:900;
	background:#fff;
	color:#333;
	display:inline-block;
	font-size:2.5em;
	text-transform:uppercase;
	line-height:60px;
	width:287px;
	margin-bottom:83px;
}*/

#accueil h1{
	text-transform:uppercase;
	font-size:3em;
	color:#af1515;
	letter-spacing:1px;
	font-weight:300;
	margin-bottom:25px;
	/*margin-top:25px;*/
	padding:20px;
	text-align:center;
	border-top:3px solid #af1515;
	border-bottom:3px solid #af1515;
	background:#ffffff;
}

#slide{
	position:relative;
	text-align:center;
}

#details{
	width:100%;
}

.details{
	background:rgba(255, 255, 255, 1);
	border:1px solid #af1515;
 	width:25%;
	margin:3%;
	padding:1%;
	float:left;
	text-align:center;
	border-radius:15px;
}

.details img, .details h5{
	display:inline-block;
	line-height:50px;
}

.details img{
	vertical-align:middle;
}

.details h5{
	font-weight:normal;
	font-size:3em;
	color:#af1515;
	text-transform:capitalize;
	margin-left:20px;
}

.details p{
	padding-top:10px;
	clear:left;
	font-size:2em;
	text-align:center;
	width:100%;
}

.comp{
	background:rgba(255, 255, 255, 1);
	border:1px solid #af1515;
	width:91.5%;
	margin:1.5% 3%;
	padding:1%;
	float:left;
	text-align:center;
	border-radius:15px;
}

.comp h5{
	font-weight:normal;
	font-size:3em;
	color:#af1515;
	text-transform:capitalize;
	margin-left:20px;
}

.comp li{
	display:inline;
	margin:2% 1%;
}

#work{
	padding-top:25px;/*correspond à la hauteur du header*/
	float:left;
	width:100%;
}

#galerie{
	background-color:#ffffff;
}
	
#galerie h5{
	font-weight:normal;
	font-size:3em;
	color:#af1515;
	text-transform:capitalize;
	text-align:center;
	padding:1.5% 15%;
}	
	
#galerie li ul li{
	float:left;
	width:20%;
}

a.infobulle{
	position:relative;
	display:block;
}

a.infobulle span{
	display:none;
}

a.infobulle:hover span{
	display:inline-block;/*pour permettre le fond de couleur*/
	position:absolute;
	background:rgba(175, 21, 21, 0.3);
	top:0;
	left:0;
	width:60%;
	height:60%;
	font-size:2em;
	text-transform:uppercase;
	text-align:center;
	padding:20%;
	z-index:1;
	color:#ffffff;
}

#about{
	height:700px;
	float:left;
	width:70%;
	padding:0 15%;
	margin:1% 0;
	background:url(../images/sp_01_home_footer.jpg);
	color:#ffffff;
}

#about h2{
    /*margin-top:214px;*/
	text-transform:uppercase;
	font-size:2em;
	font-weight:lighter;
	margin-bottom:34px;
}

#about p{
	width:100%;
	font-size:1.2em;
	line-height:1.5em;
	margin-bottom:28px;
}

.presentation{
	font-size:1.5em;
	line-height:1.8em;
}

.icones li{
	display:inline;
	margin:2% 1%;
}

#propos{
	border:1px solid #ffffff;
	width:100%;
	margin:11% 0;
	padding:1%;
	float:left;
	border-radius:15px;
}

#propos h2{
	text-transform:uppercase;
	font-size:2.5em;
	font-weight:lighter;
	margin-bottom:34px;
}

#formation{
	width:50%;
	float:left;
}

#logiciels{
	float:left;
	width:50%;
	text-align:right;
}

#logiciels p{
	margin:2% -1.5%;
}

#retour{
	position:fixed;
	bottom:10%;
	right:5%;
	background:url(../images/back-top.png) no-repeat;
	width:48px;
	height:48px;
}

#retour:hover{
	background:url(../images/back-top_hover.png)
}

#main{
	margin:15% 15%;
	width:70%;
	background-color:#ffffff;
	padding:50px;
	border:1px solid #af1515;
	border-radius:15px;
}

#vues{
	text-align:center;
}

#vues li{
	display:inline;
}

#vues h2{
	text-transform:uppercase;
	font-size:3em;
	color:#af1515;
	font-weight:lighter;
	margin-bottom:34px;
}

.back{
	background:rgba(255, 255, 255, 1);
	border:1px solid #af1515;
 	width:400px;
	height:200px;
	margin:15% 35%;
	/*margin:2% 8.8%;*/
	padding:1%;
	float:left;
	text-align:center;
	border-radius:15px;
}

.back img, .back h5{
	display:inline-block;
	line-height:50px;
}

.back img{
	vertical-align:middle;
}

.back h5{
	font-weight:normal;
	font-size:3em;
	color:#af1515;
	text-transform:capitalize;
	margin-left:20px;
}

.back a{
	padding-top:10px;
	clear:left;
	font-size:2.5em;
	text-align:center;
	width:100%;
	color:#af1515;
}