@charset "utf-8";
/* CSS Document */
body {background-color: #F2F2F2;	}
.page{	background-color: #FFFFFF;	}
.main {width:100%;padding: 2% 1% 2% 1%; }
.wrapper{width:100%;padding: 2% 0 2% 0; }
#works {
   margin:1% auto 1% auto;padding:0;
   width:100%!important;max-width:100%!important;text-align:center;
  }
#works .spip_logos {border:none;float: none;margin:0;}

#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:auto;
	height:auto;
	/*border: 4px solid #999;*/
    border: medium solid #FFFBF0;
	
	-webkit-border-radius:19px;
	border-radius:19px;
	-moz-box-shadow:0px 0px 11px #000000;
	-webkit-box-shadow:0px 0px 11px #000000;
	box-shadow:0px 0px 11px #000000;
    cursor: pointer;
	position: relative;
    -moz-transition: all .6s; 
    -webkit-transition: all .5s; 
    -o-transition: all .6s; 
    transition: all .6s;
	float: left;
	margin:25px;
}
	  
#works .work:hover {
	border: medium solid #222;
}

#works .work .triangle-droite {
    background: url(../images_communes/triangle-droite.png);
    width: 100%;
    height:100%;
    position: absolute;
    /* décalage du triangle à droite lorsqu'on n'est pas en :hover */
    right: -100%;
    bottom: -100%;
    -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(../images_communes/triangle-gauche.png);
    width: 100%;
    height: 100%;
    position: absolute;
    /*décalage du triangle à gauche lorsqu'on n'est pas en :hover */
    left: -100%;
    top: -100%;
    -moz-transition: all .6s; 
    -webkit-transition: all .6s; 
    -o-transition: all .6s; 
    transition: all .6s;
}

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

#works .work span {
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 18px;
	text-align: center;
	position: absolute;
	/*  position du span lorsqu'on n'est pas en :hover */
    top: 25%;
	left: -200%;
	font-family: 'Din';
	background: #222;
	padding-left: 70px;
	padding-right: 8px;
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s;
}

#works .work:hover span {
	/*  position du span  en :hover */
    left: 0px;
}

@media (max-width: 690px) {
#works .work   {width:90%!important;float:none;}
.main   {width:100%;padding:1% 0 1% 0; }
.wrapper{width:100%;padding:2% 0 2% 0; }
}
@media only screen and (min-width:691px)and (max-width: 1024px) {
#works .work {width:42%!important; }
}
@media only screen and (min-width:1024px)and (max-width: 1399px) {
#works .work {width:28%!important; }
}
@media   (min-width: 1400px) {
#works .work {width:20%!important; }
}