/* @override 
	http://square.local/css/square_photo.css */

	section#photos {
		background-color: #323332;
		color: white;
		padding-top: 50px;
	}

	#photos h1 {
		position: fixed;
		left: 0;
		font-style: normal;
		font-weight: 300;
		font-size: 24px;
		padding: 10px 20px 0;
		width: 100%;
		background-color: #a0bc07;
		top: 0;
		height: 40px;
		-moz-box-shadow: 0 0 10px #000000;
		box-shadow: 0 0 10px #000000;
		z-index: 3;
		display: block;
	}
	
	#photos a.direct {
		position: fixed;
		top: 0;
		right: 0;
		text-decoration: none;
		color: black;
		font-size: 16px;
		display: block;
		line-height: 1.3em;
		height: 35px;
		padding: 15px 20px 0;
		z-index: 3;
	}
	#photos a.direct:hover {
		background-color: white;
		color: #566507;
	}
	#photos h2 {
		font-size: 18px;
		margin-top: 20px;
		margin-left: 20px;
	}
	
	#photos ul.liste_photos {
		padding: 10px 0 15px 20px;
		display: block;
	}

	#photos ul.liste_photos li {
		display: block;
		position: relative;
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
	}

	#photos ul.liste_photos li a {
		display: block;
		color: white;
		text-decoration: none;
		text-align: right;
		background-color: #7b7b7b;
	}
	
	#photos ul.liste_photos li a img {
		display: block;
		width: 150px;
		height: 150px;
	}
	#photos ul.liste_photos li a.img_zoom:after {
		content: "\f06e  ";
		font: 60px 'FontAwesome';
		position: absolute;
		left: 0;
		top: 44px;
		color: white;
		width: 100px;
		text-shadow: 0 0 9px #999999;
		opacity: 0;
		-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;
	}
	#photos ul.liste_photos li a.img_zoom:hover:after{
		opacity: 1;
	}
	
	html {
		background-color: #313331;
	}
	#photos ul.liste_photos li a.download {
		padding: 6px 10px 5px;
	}
	#photos ul.liste_photos li a.download:hover {
		background-color: #9fbb08;
	}
	
	#photos ul.liste_photos li:hover {
		-moz-box-shadow: 0 0 10px #000000;
		box-shadow: 0 0 10px #000000;
	}
	@media (max-width:640px) {
		section#photos {
			padding-top: 0;
		}
		#photos h1 {
			font-size: 36px;
			position: relative;
			height: auto;
			padding-bottom: 10px;
		}
		#photos a.direct {
			position: relative;
			top: auto;
			right: auto;
			color: black;
			font-size: 21px;
			margin-left: 20px;
			margin-right: 20px;
			margin-top: 30px;
			background-color: silver;
			padding: 10px 15px;
			height: auto;
		}
		#photos a.direct:hover {
			background-color: #9fbb08;
			color: black;
		}
	}