/* entire container, keeps perspective */
.flip-container {
	perspective: 1000px;
	transform-style: preserve-3d;
	margin-bottom:20px;
	width:46%;
	float:left;
	margin: 0px 2% 30px 2%;
	font-size:11px;

}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	max-width: 100%;
	height: 160px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}

/*
	Some vertical flip updates
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
		transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
		transform: rotateX(180deg);
	}

.front {
	width:100%;
}

.front h5 {
	position:absolute;
	left: 0;
	top: 120px;
	background:#019DD0;
	padding:5px 5px 5px 10px;
	color:#fff;
	text-transform:uppercase;
	width:100%;
	font-size:12px;
	text-shadow: 0 0 4px #000;

}

.front img {

	border:none;

	height:160px;
}

.back {
	padding:15px;
	background:#019DD0;
	color:#fff;
	/*overflow:hidden;*/
}

.back h5 {
	text-transform:uppercase;
}

.back a {
	display:block;
	position:absolute;
	left: 10px;
	bottom:10px;
}

@media screen and (max-width: 992px) {

	.flip-container, .front, .back {

	}

	 .back p {
		font-size:10px;
	}

	.front, .back {
		width:100%;
	    border-bottom: 4px solid #fff;
	}

	.front img {
		width: 100%;
	}

	.bt_header_container {
		width: 100%;
	}
	/*.bt_header_row {
		display:inline-block;
		text-align:center;
		width: 100%;
	}*/

}

@media screen and (max-width: 800px) {
	.back p {
		display: none;
	}

}
.container2{
    width:200px;
    height:59px; /* высота видимой части (одной картинки) */
    display:block; 
    overflow:hidden; /* чтобы нижнюю картинку не было видно */
}
 
 .container:hover{
    font-size:100%; /* специально для IE6 */
}
 
.container2:hover img{
    margin-top:-59px;
}

  a.rollover {
    background: url("http://www.uspeh.ua/images/sampledata/logo.jpg"); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 455px; /* Ширина рисунка в пикселах */
    height: 137px; /* Высота рисунка */
   }
   a.rollover:hover {
    background-position: 0 -137px; /* Смещение фона */
   }