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

body {
	padding:0;
	margin:0;
	font-family: Arial, Helvetica, sans-serif;
}

a img {
    border: none;
}

/* #works contient tous les travaux, le margin-top est élevé pour ne pas apparaitre sous le menu flottant */

#works {
	margin-bottom: 0px;
	overflow: hidden;
	margin-top: 0px;
	width: 450px;
	margin-left: 88px;
	margin-right: 108px;
	float: left;
	height: 440px;
}

#works .work {
	/* Voici le overflow:hidden qui permet de cacher les triangles et de ne les voir apparaitre que lorsqu'ils sont dedans la div */
    overflow: hidden;
	width:132px;
	height: 132px;
	border: 4px solid #FFF;
	cursor: pointer;
	position: relative;





    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
	float: left;
	margin-right: 5px;
	margin-bottom:5px;
}

#works .work:hover {
	border: 4px solid #222;
}

#works .work img {
    
}

#works .work .triangle-droite {
	background: url(../img/triangle-droite.png);
	width: 132px;
	height: 132px;
	position: absolute;
	/* Voici le décalage du triangle à droite lorsqu'on n'est pas en :hover */
    right: -132px;
	bottom: -132px;









    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-droite {
	/* Voici la position du triangle à droite lorsqu'on est en :hover */
    right: 0;
    bottom: 0;
}

#works .work .triangle-gauche {
	background: url(../img/triangle-gauche.png);
	width: 132px;
	height: 132px;
	position: absolute;
	/* Voici le décalage du triangle à gauche lorsqu'on n'est pas en :hover */
    left: -132px;
	top: -132px;













    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

#works .work:hover .triangle-gauche {
	/* Voici la position du triangle à gauche lorsqu'on est en :hover */
    left: 0px;
	top: 0px;
}

#works .work span {
	color: #FFF;
	text-transform: none;
	font-size: 10px;
	text-align: right;
	position: absolute;
	/* Voici la position du span lorsqu'on n'est pas en :hover */
    top: 60px;
	left: -180px;
	font-family: 'Din';
	background: #222;
	padding-left: 20px;
	padding-right: 8px;











    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}

#works .work:hover span {
	/* Voici la position du span lorsqu'on est en :hover */
    left: 0px;
}

/*//////// FONTS /////////*/

@font-face{
        font-family: "Din";
        src: url("../fonts/din-webfont.eot");
        src: local("@"),url("../fonts/din-webfont.ttf") format("truetype");
}

@font-face{
        font-family: "Din-medium";
        src: url("../fonts/din_medium-webfont.eot");
        src: local("@"),url("../fonts/din_medium-webfont.ttf") format("truetype");
}
a {
	text-decoration: none;
}