/*CONTAINER STYLES*/
.container {
	width: 98%;
	margin: auto;
	overflow: hidden;
	text-align: center;
}

/*GALLERY STYLES*/
.galleryItem {
	color: #797478;
	font: 12px/1.5 Verdana, Helvetica, sans-serif;
	width: 16%;
	margin:  3% 2% 1% 2%;
	float: left;
	-webkit-transition: color 0.5s ease;
}

.item {
	color: #797478;
	font: 12px/1.5 Verdana, Helvetica, sans-serif;
	text-align: center;
}

.galleryItem h3, .item h3 {
	text-transform: uppercase;
	line-height: 2;
}

.item:hover {
	color: #000;
}

.item img {
	max-width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.galleryItem img {
	max-width: 100%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	-webkit-transform: scale(1); /*Webkit: уменьшаем размер до 0.8*/
	-moz-transform: scale(1); /*Mozilla: масштабирование*/
	-o-transform: scale(1); /*Opera: масштабирование*/
	-webkit-transition-duration: 0.5s; /*Webkit: длительность анимации*/
	-moz-transition-duration: 0.5s; /*Mozilla: длительность анимации*/
	-o-transition-duration: 0.5s; /*Opera: длительность анимации*/
	opacity: 0.9; /*Начальная прозрачность изображений*/
}

.galleryItem img:hover {
	-webkit-transform: scale(1.1); /*Webkit: увеличиваем размер до 1.2x*/
	-moz-transform: scale(1.1); /*Mozilla: масштабирование*/
	-o-transform: scale(1.1); /*Opera: масштабирование*/
	box-shadow: 0px 0px 20px gray; /*CSS3 тени: 30px размытая тень вокруг всего изображения*/
	-webkit-box-shadow: 0px 0px 20px gray; /*Webkit: тени*/
	-moz-box-shadow: 0px 0px 20px gray; /*Mozilla: тени*/
	opacity: 1;
}

.galleryItem h3 {
	padding-right: 2px;
}

.galleryItem a:link, .galleryItem a:visited {
	color: #797478;
    text-decoration: none;
}

.galleryItem a:hover {
	color: #000;
}

/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
	.galleryItem {width: 21%;}
}

@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
	.galleryItem {width: 29.33333%;}
}

@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
	.galleryItem {width: 46%;}
}

@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
	.galleryItem {width: 96%;}
	.galleryItem img {width: 96%;}
	.galleryItem h3 {font-size: 18px;}
}

.img {
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}