/*
   Spezific styling for salvattore
   Feel free to edit it as you like
   More info at http://salvattore.com
 */

/* Base styles */
.column {
	float: left;
}

@media screen and (max-width: 350px) {
	.column {
		float: none;
		position: relative;
		clear: both;
	}
}
.size-1of4 {
	width: 25%;
}
.size-1of3 {
	width: 33.333%;
}
.size-1of2 {
	width: 50%;
}
#image-page[data-columns]::before {
	content: '4 .column.size-1of4';
}

/* Configurate salvattore with media queries */
@media screen and (max-width: 350px) {
	#image-page[data-columns]::before {
		content: '1 .column';
	}
}

@media screen and (min-width: 351px) and (max-width: 600px) {
	#image-page[data-columns]::before {
		content: '2 .column.size-1of2';
	}
}

@media screen and (min-width: 601px) and (max-width: 850px) {
	#image-page[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}

@media screen and (min-width: 851px) {
	#image-page[data-columns]::before {
		content: '4 .column.size-1of4';
	}
}
#image-page .item {
	margin: 10px 5px;
	height: 1;
	line-height: 1;
	overflow: hidden;
}
#image-page .item a {
	display: block;
}
#image-page .item img {
	width: 100%;
	height: 100%;
	-webkit-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
	-webkit-border-radius: 2.5px;
	-moz-border-radius: 2.5px;
	-ms-border-radius: 2.5px;
	border-radius: 2.5px;
	overflow: hidden;
}
.js .animate-box {
	opacity: 0;
}
pre {
	background: #e9e9e9;
	border: 1px solid #ccc;
}