/* hiphop.css

Do not steal this code.
Pleace buy a license over at:
----------------------------------------------------
http://codecanyon.net/user/maxvarlson?ref=maxvarlson
----------------------------------------------------
if you want to use it.
*/

/*
If you want HipHop to jump and dim faster replace all "1s" with a smaller value like "0.5s", if you want HipHop to be slower replace it with a bigger value
*/

/********************************************************* STYLES */
.hiphop .item {
	width: 60px; /* The width of the items */
	padding-top: 10px; /* The padding to the top; This value should be This value should be equal or bigger then the jump-height (see line 114 and following) */
	padding-bottom: 0px;
	float: left;
}

.hiphop .item:not(:first-child) {
	padding-left: 40px; /* The distance between the items */
}
/******************* Styling for the Item Image */
.hiphop .item img.image {
	opacity: 1.0; /* The opacity of the item image when the item is not jumping or dimming */

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;

	position: relative;
	z-index: 999;	/* The item image should be above the item image */
	padding-bottom: 10px; /* Some distance to the Item title */
}

/******************* Styling for the Item Shadow */
.hiphop .item img.shadow {
	top: -12px;	/* This is pulls up the shadow; the value normally is around 1,5 x the height of your shadow image, but depends on where you want to have the shadow */
	opacity: 1.0; /* The opacity of the shadow when the item is not jumping or dimming */

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;

	position: relative;
	z-index: 33;	/* The shadow should be above the background, but below the item image */
}

/******************* Styling for the Item Heading */
.hiphop .item h2 {
	text-align: center; /* Centers the More-Text; If you want the text to be on the left side the value would be "left", if you want the text to be on the right side the value would be "right" */
	opacity: 1.0; /* The opacity of the Heading when the item is not jumping or dimming */

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

/******************* Styling for the More-Text (also could be an image) */
.hiphop .item .more {
	background-image:url(../img/opal.png)
	
	width: inherit;
	position: absolute;
	text-align: center; /* Centers the More-Text; If you want the text to be on the left side the value would be "left", if you want the text to be on the right side the value would be "right" */
	opacity: 0.0; /* The More-Text is invisible until you hover the item */

	-webkit-transition: opacity 1s linear;
	-moz-transition: opacity 1s linear;
	-o-transition: opacity 1s linear;
	-ms-transition: opacity 1s linear;
	transition: opacity 1s linear;

	padding-bottom: 20px; /* Some padding to the bottom */
}

.hiphop .item a {color: #cccccc;} /* The color for the More-Text */
.hiphop .item a:hover,
.hiphop .item a:focus,
.hiphop .item a:active {text-decoration: none;} /* Removes the underlining of the More-Text when you hover it */

/********************************************************* HOVER STYLES */
/********************************************************* #basis:hover */
.hiphop.dim:hover .item img.image,
.hiphop.dim:hover .item img.shadow,
.hiphop.dim:hover .item h2 {
	opacity: 0.5; /* Dimming the Item-Image, the Shadow and the Heading when dimming is active and another item is selected */

	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}

/********************************************************* .item:hover */
.hiphop.dim .item:hover h2,
.hiphop.dim .item:hover img.image {
	opacity: 1.0; /* The opacity of the Item-Image and the Shadow that you are hovering should be 100%, even if the other items are dimming; Opacity: 100% = 1.0 , 0% = 0.0  */
}

.hiphop .item:hover .more {
	opacity: 1.0; /* The More-Text should become visible when you hover an item; Opacity: 100% = 1.0 , 0% = 0.0 */
}

.hiphop.jump .item:hover img.image {
	-webkit-transform: translate(0px,-20px); /* Moving the Item-Image upwards; translate( x-Value, y-Value ) in Pixels; Negative value means moving upwards */
	-moz-transform: translate(0px,-20px);
	-o-transform: translate(0px,-20px);
	-ms-transform: translate(0px,-20px);
	transform: translate(0px,-20px);
}

.hiphop.jump .item:hover img.shadow {
	opacity: 0.5; /* The Shadow is dimming a bit when the item is up; Opacity: 100% = 1.0 , 0% = 0.0 */
	-webkit-transform: scale(0.9); /* Shrink the Shadow a bit; Scale: 1.0 = 100% of the original size, 0.0 = 0% of the original size */
	-moz-transform: scale(0.9);
	-o-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
}