/* Thumbnail Effects Style */

.tj_nav{
	
	float:right;
    width:10%;
	top:0%;
	margin-top:0px;
	height:380px;
	
}
.tj_nav span{
	width:125px;
	height:25px;
	background:transparent url(../img/uparrow.jpg) no-repeat top left;
	position:absolute;
	top:0px;
	left:0px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	/*-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	*/
}
.tj_nav span.tj_next{
	background-image:url(../img/downarrow.jpg);
	top:auto;
	bottom:0px;
	left:0px;
}
.tj_nav span:hover{
	opacity:1.0;
}
.tj_container{
	width:100%;
	height:400px;
	position:relative;
	margin:0px auto;
}

.tj_wrapper{
	float:left;
    width:85%;
	position:relative;
	margin:0px auto;
}
.tj_wrapper ul li{
	float:left;
	width:23%;
	margin:1%;
}
.tj_wrapper ul li a{
	outline:none;
	display: block;
	width: 100%;
	margin: 5px;
	background:transparent url(../img/bg_thumb.jpg) no-repeat center center;
}
.tj_wrapper ul li a img{
	display: block;
	width: 100%;
	border:none;
	opacity:0.7;
	-moz-box-shadow:2px 2px 4px #8e8e8e;
	-webkit-box-shadow:2px 2px 4px #8e8e8e;
	box-shadow:2px 2px 4px #8e8e8e;
	/*
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	*/
}
.tj_wrapper ul li a img:hover{
	opacity:1.0;
}


/* ipad(portrait and landscape) ----------- */
@media only screen and (max-device-width: 768px) {
.tj_container{
	width:100%;
	height:300px;
	position:relative;
	margin:0px auto;
}

.tj_nav{
	
	float:right;
    width:10%;
	top:0%;
	margin-top:0px;
	height:265px;
}
.tj_nav span{
	width:75px;
	height:25px;
	background:transparent url(../img/uparrow.jpg) no-repeat top left;
	background-size:75px;
	position:absolute;
	top:0px;
	left:0px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	/*-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	*/
}

}



/* iphone(portrait and landscape) ----------- */
@media only screen and (max-device-width: 500px) {
.tj_container{
	width:100%;
	height:150px;
	position:relative;
	margin:0px auto;
}

.tj_nav{
	
	float:right;
    width:10%;
	top:0%;
	margin-top:0px;
	height:160px;
}

.tj_nav span{
	width:50px;
	height:25px;
	background:transparent url(../img/uparrow.jpg) no-repeat top left;
	background-size:50px;
	position:absolute;
	top:0px;
	left:0px;
	text-indent:-9000px;
	opacity:0.7;
	cursor:pointer;
	/*-webkit-transition: all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-transition: all 0.2s ease-in-out;
	*/
}

}