#zoom {
	list-style:none;
	/*margin-left:-20px; /* Компенсируем отступ слева */
	text-align:center;
	font: 1.5em/1em Helvetica,sans-serif;
	margin: 0 auto;
	padding:0;
}

#zoom li {
    /* Ширина размера изображения с учетом рамки в 1px */
/* width:252px; 
 height:189px;*/
 float:left;
 margin-left:20px;
 margin-top:5px;
 margin-bottom:200px;
 overflow:visible;
 display: block;
}

.zoom_it {
 position:relative;
 width:240px;
 height:188px;
 top:0;
 left:0;
 border:1px solid #ccc;
}

.zoom_it:hover {
 width:300px; /* Увеличиваем ширину изображения */
 height:225px; /* Увеличиваем высоту изображения */
 top:-16px; /* Сдвигаем изображение вверх на значение (новая ширина - старая)/2 */
 left:-25px; /* Сдвигаем изображение влево на значение (новая высота - старая)/2 */
 z-index:9999; /* Располагаем изображение над всеми элементами */
 box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Добавляем тень */
 -webkit-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Safari и Chrome */
 -moz-box-shadow: 0 20px 30px rgba(0,0,0,0.5); /* Для Firefox */
 transition: all 0.3s ease; /* Изменяем значения всех свойств плавно в течение 0,3 сек */
 -webkit-transition: all 0.3s ease; /* Для Safari и Chrome */
 -o-transition: all 0.3s ease; /* Для Opera */
 -moz-transition: all 0.3s ease; /* Для Firefox */
}

.holder p {
    background-color:#FFFFFF;
    padding: 1px;
    width: 240px;
    font-family:Arial,sans-serif;
    font-size:0.75em;
    margin:10px 0 10px 0;
}

#footer {
	position: relative;
	height: 50px;
	clear: both;
/*
	background-color: #668284;
	font-family: Verdana, sans-serif;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
*/
}

#footer p {
	position: relative;
	padding-top: 15px;
}

#images-box {
	/* The total width of the image-box, mainly for centering */
	width: 850px;
	margin: 0px auto;
	position: relative;
	top: 70px;
}
 


.holder {
	/* The width and height, you can change these */
	width: 252px;
	height: 189px;
	/* Float left, so everything aligns right */
	/*float: left;*/
	margin: 0 20px 0 0;
}


.image-lightbox {
	
	font-family: Arial, sans-serif;

    position:relative;
    width:240px;
    height:188px;
    top:0;
    left:0;
    
	border-radius: 5px;
	border:1px solid black;
    
    overflow:hidden;
    
    -webkit-box-shadow: 3px 3px 5px #ccc;
    -moz-box-shadow: 3px 3px 5px #ccc;
    box-shadow: 3px 3px 5px #ccc;
}

.image-lightbox img {
	/* Inherit the width and height from the parent element */
	width: inherit;
	height: inherit;
	z-index: 3000;
	/*border-radius: 5px;*/
	/*border:1px solid black;*/
	margin: 1px auto;
	opacity:.8;
	-webkit-transition: all .7s;
    -moz-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;

}

.image-lightbox :hover{
    /*-webkit-box-shadow: 7px 7px 15px #aaa;*/
    /*-moz-box-shadow: 7px 7px 15px #aaa;*/
    box-shadow: 7px 7px 15px #aaa;
}



.image-lightbox img:hover{
    opacity:1;
    transform: scale(1.02);
}



.image-lightbox span {
	display: none;
}

.image-lightbox .expand {
	width: 100%;
	height: 100%;
    position: absolute;
	top: 0;
	/*z-index: 4000;*/
    left: 0;
	background: rgba(0,0,0,0); /* Fixes an IE bug */
}

.image-lightbox .close {
	position: absolute;
	width: 20px; height: 20px;
	right: 20px; top: 20px;
}

.image-lightbox .close a {
	height: auto; width: auto;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	background: #22272c;
	box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
	border-radius: 5px;
	font-weight: bold;
	float: right;
}

.image-lightbox .close a:hover {
	box-shadow: inset 0px -24px 20px -15px rgba(255, 255, 255, 0.01), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 20px rgba(255,255,255,0.4);
}

.big-image{
	/*width: 700px;*/
	/*height: 525px;*/
	width: 0;
	height: 0;
	max-width:90%;
	z-index: 5000;
    left: 50%;
    top: 50%;
    position: fixed;
    margin-top: -200px; /* ADDED */
    margin-left: -350px; /* ADDED */
    animation: big-image-anim .5s forwards;
}

@keyframes big-image-anim{
    0% {width:0; height: 0;}
    100% {width:700px; height: 525px;}
}

.big-image img{
    width:100%;
	transition: all .7s;
	border-radius: 5% 0 5% 5%;
	box-shadow: 3px 3px 5px #ccc;
}

.big-image img:hover{
	box-shadow: 5px 5px 7px #aaa;
}

@media screen and (max-width:700px)
{
	.big-image{
		width:500px;
		height:375px;
		margin-top: -187px; /* ADDED */
		margin-left: -250px; /* ADDED */
	}
}

@media screen and (max-width:500px)
{
	.big-image{
		/*width:300px;*/
		/*height:225px;*/
		width:80%;
		height:auto;
		margin: 1px auto;
		position:static;
/*		margin-top: -112px; 
		margin-left: -150px; */
	}
}


.big-image .close {
	display: block;
}

.big-image .close a{
	position:absolute;
	top:0;
	right:0;
	height: auto; width: auto;
	padding: 5px 10px;
	color: #fff;
	text-decoration: none;
	background: #22272c;
	box-shadow: inset 0px 24px 20px -15px rgba(255, 255, 255, 0.1), inset 0px 0px 10px rgba(0,0,0,0.4), 0px 0px 30px rgba(255,255,255,0.4);
	border-radius: 5px;
	font-weight: bold;
	float: right;
}

.big-image .expand {
	display: none;
}

.descr {
    background-color:#f0ffff;
    padding: 1px;
    width: 100%;
    font-family:Arial,sans-serif;
    font-size:1.5em;
    margin:0;
}