<style>
		.jo_image
		{
			width:100%;
			height:246px;
		}
		.jo_display
		{
			width:100%;
			overflow:hidden;
		}
		@media (max-width: 650px) {
			.jo_image
			{
				width:auto;

			}
			.jo_display
			{

				width:100%;
				float:left;
			}
		}
		.jo_over
		{
		    position:absolute;
		    width:100%;
		    height:100%;
		    text-align: center; /*handles the horizontal centering*/
		}
			/*handles the vertical centering*/
		.jo_over span
		{
		    display: inline-block;
		    height: 100%;
		    vertical-align: middle;
		}
		.jo_over img
		{
		    display: inline-block;
		    vertical-align: middle;
		}
		.jo_over .onhover{ display: none; }
		.jo_over .nohover{ display: inline-block; }
		.jo_over:hover .onhover{ display: inline-block; }
		.jo_over:hover .nohover{ display: none; }
		.jo_item
		{
			display: inline-block;
			vertical-align: top;
			position:relative;
			text-align:left;
			margin : 0px -15px 0px -4px;
			width:155px;
			height:240px;
			border: 2px solid rgba(255, 255, 255, 0);;
		}
		.jo_item:hover
		{
			width:155px;
			margin:0px -15px 0px -4px;
			border:2px solid red;
		}
		.jo_in-item
		{
			height:155px;
		}
		.jo_ori-price
		{
			display :block;
			font-size:13px;
		}
.flex-direction-nav a {
    display: block;
    width: 40px;
    height: 40px;
    margin: -20px 0 0;
    position: absolute;
    top: 50%;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.8);
    text-shadow: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    color: #909;
    border-radius: 50%;
    text-align: center;
}
.flex-direction-nav a:before {
    font-family: "flexslider-icon";
    font-size: 20px;
    display: inline-block;
    content: '\f001';
    color: #555;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
    line-height: 40px;
}
.flex-prev,
.flex-next {
  font-size: 0px;
}
.flex-direction-nav .flex-next {
    right: 10px;
    text-align: center;
}
.fadecontainer {
  position: relative;
  width: 100%;
}

.fadeimage {
  display: block;
  width: 100%;
  height: auto;
}

.fadeoverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000;
   overflow: hidden;
}

.fadecontainer:hover .fadeoverlay{
  opacity: 1;
}
.fadeoverlay2 {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000;
   overflow: hidden;
}

.fadecontainer:hover .fadeoverlay2{
  opacity: 0.2;
}
.fadetext
 {
  color: black;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity : 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  transition: .5s ease;  
}
.fadecontainer:hover .fadetext{
  opacity: 1;
}

	</style>
