/*****************css*********************/
body{
	margin : 0;
	padding: 0;
	background-color: white;
	background:url("images/motif.png") repeat top center;
	/*background-attachment: fixed;*/
	}


@media (max-width: 840px){
.clear2{
/*display: none;*/
}


/* apparation d'une icone responsive en haut a droite a partir de 840px display : block;
au moyn d'une MEDIA QUERIES et layer transparente avec z-index:1* pour le menu responsive/

}

.exemple{
	background-color: rgba(255,120,45,0.5);	
	/*display: none;*/

}
.lead{
	font-size: 16px;
	font-family: helvetica,arial;
}
.posi{
	display : inline-block;
	/*display: none;*/	
	list-style-type: none;	
	padding: 6px 10px;
	background-color: transparent;
	border-bottom: 8px solid white;
}

#perso a{
	font-weight: bold;
	text-decoration: none;
	color:white;
	text-align: center;
}

.rouge{
	background-color: orange;
	width:100px;
}

#lien a{
	text-decoration: none;
	color:white;
	line-height: 30px;
}

.niveau1{
	padding-left: 0px;
}

.posi2{
	display : block;
	/*display: none;*/	
	list-style-type: none;	
	padding: 6px 10px;
	background-color: rgba(125,140,45,0.5);
}

.posi3{
	display : block;
	/*display: none;*/	
	list-style-type: none;	
	padding: 6px 10px;
	background-color: rgba(125,140,45,0.5);
}


.niveau2{
display:none;/********fermé********/
}

li.posi{
	position:relative;
	width:160px;
	text-align: center;

}

ul.niveau2{
	position:absolute;
	left:-40px;
	top:32px;
}

li.posi2{
	width:160px;
	font-weight: inherit;
	text-align: left;
	border-bottom: 1px solid rgba(255,255,245,0.5);/*sauf le dernier en scss*/
}

li.posi3 {
		width:160px;
	font-weight: inherit;
	text-align: left;
	border-bottom: none;
}

#lien{
	padding-top: 8px;
}

li:hover ul.niveau2{
display: block;/********ouvert********/
}

.clear{
	width:100%;
	background-color: rgba(5,220,45,0.8);
}

.clear2{
	width:100%;
	background-color: none;
	text-align: center;
	margin: 15px 0px;
	padding: 0;
}


.clear4{
	text-decoration: center;
	width:960px;
	height:10px;
	margin-top: 70px;
}




/****************transition**************/

.fade
{
        opacity:0.5;
}
.fade:hover
{
        opacity:1;
}


div.clear3 {/*******cette façon de nommer la transition est moins bien, je prefere avoir une classe qui porte directement le nom de l effet souhaiter et le chainer a une autre classe : ya moins de code a taper surtout pour simplement changer le background, l opacité ou la bordure*****/;
	background-color:red;
    line-height: 50px;
    width: 1000px;
    height:30px;
    text-align: center;
    cursor: pointer;
    transition: border .8s ease-in-out;
    -webkit-transition: border .8s ease-in-out;
    -moz-transition: border .8s ease-in-out;
    border-bottom: 8px solid white;
    margin-top: 110px;
}

div:hover.clear3 {
    border-bottom: 8px solid yellow;
}

.color:hover
{
        background:#53a7ea;
}

.colorborder:hover
{
        border-bottom: 8px solid #337AB7;
        transition-duration : 0.5s, 0.5s;/* delai et duree*/
        /*toujours sur un :hover*/
}
.colorborder2:hover
{
        border-bottom: 8px solid red;
        transition-duration : 0.5s, 0.5s;/* delai et duree*/
        /*toujours sur un :hover*/
}
.colorborder3:hover
{
        border-bottom: 8px solid yellow;
                transition-duration : 0.5s, 0.5s;/* delai et duree*/
        /*toujours sur un :hover*/
}
.encours1
{
        border-bottom: 8px solid #337AB7;
}
.encours2
{
        border-bottom: 8px solid red;
}
.encours3
{
        border-bottom: 8px solid yellow;
}
.encours4
{
        border-bottom: 8px solid green;
}
.colorborder4:hover
{
        border-bottom: 8px solid green;
                transition-duration : 0.5s, 0.5s;/* delai et duree*/
        /*toujours sur un :hover*/
}

.toggle{
/*ouverture de div en volet roulant au click en css ou en jquery*/
}
.fade{
	
}
.outils{
	font-weight: bold;
	color:red;
	font-size: 18px;

}
.stylus{
	color: black;
	font-size: 16px;
	padding-bottom:20px;
	text-align: left;
}

.stylus2{
	color: black;
	font-size: 16px;
	padding-bottom:20px;
	padding-left: 0px;
	text-align: left;
}

.presentation{
	color: black;
	font-size: 16px;
	padding-bottom:20px;
	text-align: center;
}

#front-end{
	padding-top:35px;
}

#back-end{
	padding-top:35px;
}

#cms{
	padding-top:35px;
}

.font{
color:white;
}

.ordi{
	position: relative;
}

.font:hover{

color: #336699; 
transition-duration : 0s, 0s;/* delai et duree*/
}
.left{
  text-align:left;
}
.right{
  text-align:right;
}
#titreh2 h2{
	font-size: 26px;
}