html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}



/*GALLERY 4, 5, 6, 7*/

.kd-gallery .box1 {
	width: 100%;
	height: 100%;
	opacity: 1;
	border: 0;
	left: 0;
	z-index: 1;
	margin: 0;
}

.kd-gallery .item {
	display: inline-block;
	position: relative;
	z-index: 0;
	width: 120px;
	height: 120px;
	overflow: hidden;
	background: #000;
}

.kd-gallery .item .box2 {
	position: absolute;
	top: 100%;
	left: 0px;
	width: 100%;
	height: 100%;
	display: table;
	margin: 0;
	background: rgba(0,0,0,0.7);
	color: #FFF;
	transition: 0.5s;
	z-index: 2;
}

.kd-gallery .item .box2 .text {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
}

.kd-gallery .item:hover .box2 {
	top: 0;
}

.kd-gallery .item {
	width: 300px;
	height: 180px;
	margin: -2.2px;
	/*text-transform: uppercase;*/
	font-family: Verdana;
	font-weight: 700;
	letter-spacing: 1px;
}




/*GALLERY 1*/

.kd-gallery.typ1 .box1 {
	opacity: 1;
	transition: 0.6s;
	margin: 0;
	width: 100%;
	height: 100%;
}

.kd-gallery.typ1 .item:hover .box1 {
	opacity: 0.4;
	margin-left: -30px;
	margin-top: -30px;
	width: calc(100% + 60px);
	height: calc(100% + 60px);
}

.kd-gallery.typ1 .item {
	display: inline-block;
	position: relative;
	overflow: hidden;
	background: #000;
}

.kd-gallery.typ1 .item .box2 {
	position: absolute;
	width: 100%;
	height: 100%;
	display: table;
	z-index: -1;
	background: transparent;
	top: 100%;
	transition: 0.6s;
}

.kd-gallery.typ1 .item .box2 .text {
	text-align: center;
	vertical-align: middle;
	display: table-cell;
	transition: 0.6s;
}

.kd-gallery.typ1 .item:hover .box2 {
	z-index: 2;
	top: 0;
}


.kd-gallery.typ2 .box1, .kd-gallery.typ3 .box1 {
	opacity: 1;
	transition: 0.6s;
	margin: 0;
	width: 100%;
	height: 100%;
}

.kd-gallery.typ2 .item:hover .box1, .kd-gallery.typ3 .item:hover .box1 {
	opacity: 0.4;
	margin-left: -30px;
	margin-top: -30px;
	width: calc(100% + 60px);
	height: calc(100% + 60px);
}

.kd-gallery.typ2 .item, .kd-gallery.typ3 .item {
	display: inline-block;
	position: relative;
	overflow: hidden;
	background: #000;
}

.kd-gallery.typ2 .item .box2, .kd-gallery.typ3 .item .box2 {
	position: absolute;
	width: 100%;
	height: 100%;
	display: table;
	z-index: -1;
	background: transparent;
	top: 0;
	transition: 0.6s;
}


.kd-gallery.typ2 .item:hover .box2, .kd-gallery.typ3 .item:hover .box2 {
	z-index: 2;
}



.kd-gallery.typ3 .item .box1 {
	margin-left: -30px;
	margin-top: -30px;
	width: calc(100% + 60px);
	height: calc(100% + 60px);
}

.kd-gallery.typ3 .item:hover .box1 {
	margin: 0;
	width: 100%;
	height: 100%;
}


/*GALLERY 5*/
.kd-gallery.typ5 .item .box2 {
	top: -100%;
}

.kd-gallery.typ5 .item:hover .box2 {
	top: 0;
}

/*GALLERY 6*/
.kd-gallery.typ6 .item .box2  {
	top: 0;
	left: -100%;
}

.kd-gallery.typ6 .item:hover .box2  {
	left: 0;
}

/*GALLERY 7*/
.kd-gallery.typ7 .item .box2 {
	top: 0;
	left: 100%;
}

.kd-gallery.typ7 .item:hover .box2 {
	left: 0;
}


/*GALLERY 8*/
.kd-gallery.typ8 .item .box2 {
	top: 0;
	left: 0;
	transform: perspective(450px)  rotateX(-90deg);
	transform-origin: 50% 0%;
	transition: 0.5s;
}

.kd-gallery.typ8 .item:hover .box2 {
	transform: rotateX(0deg);

}



/*GALLERY 9*/

.kd-gallery.typ9 .item .box2 {
	top: 0;
	left: 0;
	transform: perspective(450px)  rotateX(90deg);
	transform-origin: 50% 100%;
	transition: 0.5s;
}

.kd-gallery.typ9 .item:hover .box2 {
	transform: rotateX(0deg);

}

/*GALLERY 10*/

.kd-gallery.typ10 .item .box2 {
	top: 0;
	left: 0;
	transform: perspective(450px)  rotateY(90deg);
	transform-origin: 0% 50%;
	transition: 0.5s;
}

.kd-gallery.typ10 .item:hover .box2 {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);

}

/*GALLERY 11*/

.kd-gallery.typ11 .item .box2 {
	top: 0;
	left: 0;
	transform: perspective(450px)  rotateY(-90deg);
	transform-origin: 100% 50%;
	transition: 0.5s;
}

.kd-gallery.typ11 .item:hover .box2 {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);

}

/*GALLERY 12*/

.kd-gallery.typ12 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transition: 0.5s;
}

.kd-gallery.typ12 .item:hover .box1 {
	top: 0;
	left: -100%;
}

.kd-gallery.typ12 .item .box2 {
	top: 0;
	left: 100%;
	transition: 0.5s;
}

.kd-gallery.typ12 .item:hover .box2 {
	top: 0;
	left: 0;
}

/*GALLERY 13*/

.kd-gallery.typ13 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transition: 0.5s;
}

.kd-gallery.typ13 .item:hover .box1 {
	top: 0;
	left: 100%;
}

.kd-gallery.typ13 .item .box2 {
	top: 0;
	left: -100%;
	transition: 0.5s;
}

.kd-gallery.typ13 .item:hover .box2 {
	top: 0;
	left: 0;
}

/*GALLERY 14*/

.kd-gallery.typ14 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transition: 0.5s;
}

.kd-gallery.typ14 .item:hover .box1 {
	top: 100%;
	left: 0;
}

.kd-gallery.typ14 .item .box2 {
	top: -100%;
	left: 0;
	transition: 0.5s;
}

.kd-gallery.typ14 .item:hover .box2 {
	top: 0;
	left: 0;
}

/*GALLERY 15*/

.kd-gallery.typ15 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transition: 0.5s;
}

.kd-gallery.typ15 .item:hover .box1 {
	top: -100%;
	left: 0;
}

.kd-gallery.typ15 .item .box2 {
	top: 100%;
	left: 0;
	transition: 0.5s;
}

.kd-gallery.typ15 .item:hover .box2 {
	top: 0;
	left: 0;
}

/*GALLERY 16*/

.kd-gallery.typ16 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transform: rotateZ(0deg);
	transition: 0.5s;
}

.kd-gallery.typ16 .item {
	background: #333;
}

.kd-gallery.typ16 .item:hover .box1 {
	top: -50%;
	left: 100%;
	transform: rotateZ(90deg);
}

.kd-gallery.typ16 .item .box2 {
	top: -50%;
	left: -100%;
	transform: rotateZ(-90deg);
	transition: 0.5s;	
}

.kd-gallery.typ16 .item:hover .box2 {
	top: 0;
	left: 0;
	transform: rotateZ(0deg);
}

/*GALLERY 17*/

.kd-gallery.typ17 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transform: rotateZ(0deg);
	transition: 0.5s;
}

.kd-gallery.typ17 .item {
	background: #333;
}

.kd-gallery.typ17 .item:hover .box1 {
	top: -50%;
	left: -100%;
	transform: rotateZ(-90deg);
}

.kd-gallery.typ17 .item .box2 {
	top: -50%;
	left: 100%;
	transform: rotateZ(90deg);
	transition: 0.5s;	
}

.kd-gallery.typ17 .item:hover .box2 {
	top: 0;
	left: 0;
	transform: rotateZ(0deg);
}

/*GALLERY 18*/

.kd-gallery.typ18 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transform: rotateY(0deg);
	transition: 0.5s;
}

.kd-gallery.typ18 .item {
	background: #333;
}

.kd-gallery.typ18 .item:hover .box1 {
	/*transform: rotateY(-90deg);*/
}

.kd-gallery.typ18 .item .box2 {
	top: 0;
	left: 0;
	transform: rotateZ(-45deg) rotateX(-90deg);
	transition: 0.5s;	
	background: #000;
}

.kd-gallery.typ18 .item:hover .box2 {
	transform: rotateZ(0deg) rotateX(0deg);
}

/*GALLERY 19*/

.kd-gallery.typ19 .item .box1 {
	top: 0;
	left: 0;
	position: absolute;
	transform: rotateY(0deg);
	transition: 0.5s;
}

.kd-gallery.typ19 .item {
	background: #333;
}

.kd-gallery.typ19 .item .box2 {
	top: initial;
	left: initial;
	bottom: -100%;
	height: initial;
	padding: 10px 0;
	transition: 0.5s;	
}

.kd-gallery.typ19 .item:hover .box2 {
	bottom: 0;
}

/*GALLERY 20*/

.kd-gallery.typ20 .item .box2 {
	top: initial;
	left: initial;
	bottom: 0;
	height: initial;
	padding: 10px 0;
	transform: perspective(450px)  rotateX(90deg);
	transform-origin: 50% 100%;
	transition: 0.5s;
}

.kd-gallery.typ20 .item:hover .box2 {
	transform: rotateX(0deg);
	bottom: 0;
}

.wrapper {
	min-width: 320px;
	width: 100%;
	max-width: 1190px;
	margin: 30px auto;
	text-align: center;
}

.kd-gallery img {
	width: 100%;
	height: 100%;
}

.kd-gallery {
	width: 300px;
	margin: 15px;
	padding: 30px;
	border-radius: 20px;
	background: #DDD url("bg_button.png") no-repeat scroll center bottom 7px / 18px auto;
	display: inline-block;
	border: 1px solid #BBB;
}

.kd-gallery .item  {
	border: 1px solid #BBB;
}