@charset "UTF-8";
.hide-me {
	zoom:1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;/* IE8 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0) !important;
	filter: alpha(opacity=0) !important;
	-khtml-opacity: 0 !important;
	-moz-opacity: 0 !important;
	opacity: 0 !important;
	visibility:hidden !important;
	z-index:-100000 !important;/* adjust this */
}
/*
#portfolio {
	width:100%;
	height:800px;
	text-align:center;
	background-color:#4CC5E0;
	background:url(../../img/portfolio/bg-portfolio.jpg) center center no-repeat;
}
*/
#portfolio {width:100%;height:800px;text-align:center;background:#4cc5e0 url(../img/portfolio/bg-portfolio.jpg) center center no-repeat;}
#portfolio .container {width:912px;margin:0 auto;}
#portfolio .title {width:auto;height:166px;background:#4cc5e0 url(../img/portfolio/cameras.png) 90% no-repeat;text-align:left;}
#portfolio .title h1 {font-size:40px;color:#000;line-height:166px;text-indent:7px;}

#portfolio-base {
	position:relative;
	width:912px;
	height:499px;
	margin:0 auto;
}
.portfolio-base {
	position:absolute;
	top:0;
	left:0;
	width:912px;
	height:499px;
}
.slider-base {
	position:relative;
	width:912px;
	height:499px;
	overflow:hidden;
}
.slider-nav {
	position:relative;
	width:100%;
}
ul.portfolio {
	position:absolute;
	top:0;
	left:0;
	width:912px;
	height:353px;
	padding:73px 0 73px 0;
	list-style-type:none;
}
ul.portfolio li {
	position:relative;
	float:left;
	width:138px;
	height:79px;
	margin-left:7px;
	padding-right:7px;
	list-style-type:none;
}
ul.portfolio li > a {
	position:absolute;
	top:-39px;
	left:0;
	width:138px;
	height:158px;
	background-position:center center;
	background-repeat:no-repeat;
	display:block;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1000;
	-webkit-transform: translate3d(0,0,0);
	-webkit-transform: translateZ(0);
	-webkit-transform-style: preserve-3d;
	-webkit-animation-duration: 400ms;
	   -moz-animation-duration: 400ms;
	     -o-animation-duration: 400ms;
	        animation-duration: 400ms;
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
ul.portfolio li a > img {
	position:relative;
	top:0;
	left:0;
	width:138px;
	height:158px;
	opacity: 0;
	-webkit-transition: all 400ms ease-in-out;
	-moz-transition: all 400ms ease-in-out;
	-o-transition: all 400ms ease-in-out;
	-ms-transition: all 400ms ease-in-out;
	transition: all 400ms ease-in-out;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
ul.portfolio li > a:hover img {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 0.5;
}
ul.portfolio li:nth-child(17n+7) {margin-top:57px;margin-left:83px;}
ul.portfolio li:nth-child(17n+8),
ul.portfolio li:nth-child(17n+9),
ul.portfolio li:nth-child(17n+10),
ul.portfolio li:nth-child(17n+11),
ul.portfolio li:nth-child(17n+12),
ul.portfolio li:nth-child(17n+13),
ul.portfolio li:nth-child(17n+14),
ul.portfolio li:nth-child(17n+15),
ul.portfolio li:nth-child(17n+16),
ul.portfolio li:nth-child(17n+17) {margin-top:57px;}

.slider-nav .thumb-prev,
.slider-nav .thumb-next {position:absolute;top:-290px;z-index:10000;width:53px;height:79px;display:block;text-decoration:none;}
.slider-nav .thumb-prev {left:-26px;background:url(../img/portfolio/prev.png) center no-repeat;}
.slider-nav .thumb-next {right:-26px;background:url(../img/portfolio/next.png) center no-repeat;}
.slider-nav .grad-lf {position:absolute;top:-499px;left:-4px;z-index:5000;}
.slider-nav .grad-rg {position:absolute;top:-499px;right:-4px;z-index:5000;}

#portfolio-nav {position:relative;margin:0 auto;margin-top:20px;}
#portfolio-nav > a {
	width:47px;
	padding-top:40px;
	text-decoration:none;
	background-position:center top;
	background-repeat:no-repeat;
}
#portfolio-nav > a.all {background-image: url(../img/portfolio/icon-all.png);}
#portfolio-nav > a.print {margin-left:15px;background-image: url(../img/portfolio/icon-print.png);}
#portfolio-nav > a.web {margin-left:20px;background-image:url(../img/portfolio/icon-web.png);}
#portfolio-nav > a.tv {margin-left:27px;background-image:url(../img/portfolio/icon-tv.png);}
#portfolio-nav > a.event {margin-left:30px;background-image:url(../img/portfolio/icon-event.png);}
#portfolio-nav > p {position:absolute;bottom:0;left:-100px;color:#006e82;}

#portfolio-nav > a.on {color:#056f81;}
#portfolio-nav > a.all.on {background-image: url(../img/portfolio/icon-all-on.png);}
#portfolio-nav > a.print.on {background-image:url(../img/portfolio/icon-print-on.png);}
#portfolio-nav > a.web.on {background-image:url(../img/portfolio/icon-web-on.png);}
#portfolio-nav > a.tv.on {background-image:url(../img/portfolio/icon-tv-on.png);}
#portfolio-nav > a.event.on {background-image:url(../img/portfolio/icon-event-on.png);}

.portfolio-nav {position:absolute;top:-99999px;left:-99999px;background:red;width:300px;z-index:1000000;}


@-webkit-keyframes li1 {
	0% {
		-webkit-transform: translateY(136px) translateX(379px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li1 {
	0% {
		transform: translateY(136px) translateX(379px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li1 {
	-webkit-animation-name: li1;
	-moz-animation-name: li1;
	-o-animation-name: li1;
	animation-name: li1;
}

@-webkit-keyframes li2 {
	0% {
		-webkit-transform: translateY(136px) translateX(227px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li2 {
	0% {
		transform: translateY(136px) translateX(227px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li2 {
	-webkit-animation-name: li2;
	-moz-animation-name: li2;
	-o-animation-name: li2;
	animation-name: li2;
}

@-webkit-keyframes li3 {
	0% {
		-webkit-transform: translateY(136px) translateX(76px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li3 {
	0% {
		transform: translateY(136px) translateX(76px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li3 {
	-webkit-animation-name: li3;
	-moz-animation-name: li3;
	-o-animation-name: li3;
	animation-name: li3;
}

@-webkit-keyframes li4 {
	0% {
		-webkit-transform: translateY(136px) translateX(-76px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
}
}
@keyframes li4 {
	0% {
		transform: translateY(136px) translateX(-76px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li4 {
	-webkit-animation-name: li4;
	-moz-animation-name: li4;
	-o-animation-name: li4;
	animation-name: li4;
}

@-webkit-keyframes li5 {
	0% {
		-webkit-transform: translateY(136px) translateX(-227px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li5 {
	0% {
		transform: translateY(136px) translateX(-227px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li5 {
	-webkit-animation-name: li5;
	-moz-animation-name: li5;
	-o-animation-name: li5;
	animation-name: li5;
}

@-webkit-keyframes li6 {
	0% {
		-webkit-transform: translateY(136px) translateX(-379px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li6 {
	0% {
		transform: translateY(136px) translateX(-379px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li6 {
	-webkit-animation-name: li6;
	-moz-animation-name: li6;
	-o-animation-name: li6;
	animation-name: li6;
}


@-webkit-keyframes li7 {
	0% {
		-webkit-transform: translateY(0) translateX(304px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li7 {
	0% {
		transform: translateY(0) translateX(304px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li7 {
	-webkit-animation-name: li7;
	-moz-animation-name: li7;
	-o-animation-name: li7;
	animation-name: li7;
}

@-webkit-keyframes li8 {
	0% {
		-webkit-transform: translateY(0) translateX(152px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
			opacity:1;
	}
}
@keyframes li8 {
	0% {
		transform: translateY(0) translateX(152px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
			opacity:1;
	}
}
.li8 {
	-webkit-animation-name: li8;
	-moz-animation-name: li8;
	-o-animation-name: li8;
	animation-name: li8;
}

@-webkit-keyframes li9 {
	0% {
		opacity:0;
	}
	
	100% {
			opacity:1;
	}
}
@keyframes li9 {
	0% {
		opacity:0;
	}
	
	100% {
			opacity:1;}
}
.li9 {
	-webkit-animation-name: li9;
	-moz-animation-name: li9;
	-o-animation-name: li9;
	animation-name: li9;
}

@-webkit-keyframes li10 {
	0% {
		-webkit-transform: translateY(0) translateX(-152px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
			opacity:1;}
}
@keyframes li10 {
	0% {
		transform: translateY(0) translateX(-152px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
			opacity:1;}
}
.li10 {
	-webkit-animation-name: li10;
	-moz-animation-name: li10;
	-o-animation-name: li10;
	animation-name: li10;
}

@-webkit-keyframes li11 {
	0% {
		-webkit-transform: translateY(0) translateX(-304px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
			opacity:1;}
}
@keyframes li11 {
	0% {
		transform: translateY(0) translateX(-304px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
			opacity:1;}
}
.li11 {
	-webkit-animation-name: li11;
	-moz-animation-name: li11;
	-o-animation-name: li11;
	animation-name: li11;
}

@-webkit-keyframes li12 {
	0% {
		-webkit-transform: translateY(-136px) translateX(379px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li12 {
	0% {
		transform: translateY(-136px) translateX(379px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li12 {
	-webkit-animation-name: li12;
	-moz-animation-name: li12;
	-o-animation-name: li12;
	animation-name: li12;
}

@-webkit-keyframes li13 {
	0% {
		-webkit-transform: translateY(-136px) translateX(227px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li13 {
	0% {
		transform: translateY(-136px) translateX(227px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li13 {
	-webkit-animation-name: li13;
	-moz-animation-name: li13;
	-o-animation-name: li13;
	animation-name: li13;
}

@-webkit-keyframes li14 {
	0% {
		-webkit-transform: translateY(-136px) translateX(76px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li14 {
	0% {
		transform: translateY(-136px) translateX(76px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li14 {
	-webkit-animation-name: li14;
	-moz-animation-name: li14;
	-o-animation-name: li14;
	animation-name: li14;
}

@-webkit-keyframes li15 {
	0% {
		-webkit-transform: translateY(-136px) translateX(-76px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li15 {
	0% {
		transform: translateY(-136px) translateX(-76px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li15 {
	-webkit-animation-name: li15;
	-moz-animation-name: li15;
	-o-animation-name: li15;
	animation-name: li15;
}

@-webkit-keyframes li16 {
	0% {
		-webkit-transform: translateY(-136px) translateX(-227px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li16 {
	0% {
		transform: translateY(-136px) translateX(-227px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li16 {
	-webkit-animation-name: li16;
	-moz-animation-name: li16;
	-o-animation-name: li16;
	animation-name: li16;
}

@-webkit-keyframes li17 {
	0% {
		-webkit-transform: translateY(-136px) translateX(-379px);
		-webkit-animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		-webkit-transform: translateY(0) translateX(0);
		-webkit-animation-timing-function: ease-in-out;
		opacity:1;
	}
}
@keyframes li17 {
	0% {
		transform: translateY(-136px) translateX(-379px);
		animation-timing-function: ease-in-out;
		opacity:0;
	}
	
	100% {
		transform: translateY(0) translateX(0);
		animation-timing-function: ease-in-out;
		opacity:1;
	}
}
.li17 {
	-webkit-animation-name: li17;
	-moz-animation-name: li17;
	-o-animation-name: li17;
	animation-name: li17;
}