#portfolio { width:100%; height:100%; position:relative; }

#portfolio-prev { width:14%; position:absolute; left:0px; top:0px; z-index:10; }

#portfolio-next { width:14%; position:absolute; left:84%; bottom:-1px; z-index:10; }

#portfolio-prev a, #portfolio-next a { transition:opacity 0.1s linear; -webkit-transition:opacity 0.1s linear; -moz-transition:opacity 0.1s linear; }

#portfolio-prev a:hover, #portfolio-next a:hover { opacity:0.7; }

#portfolio-slider { width:100%; height:100%; position:relative; text-align:center; }

#portfolio-slider .slide { z-index:5; width:14%; }

#portfolio-slider .slide img { margin-right:2px; }

#portfolio-slider .portfolio-view { display:none; position:absolute; top:200px; left:0px; width:100%; z-index:6; }

#portfolio-slider .active-slide .portfolio-view { display:block; }

#portfolio-slider .portfolio-view a { display:inline-block; height:120px; width:120px; background:url(../img/btn-portfolioview.png) top center no-repeat; }

#portfolio-slider .portfolio-view a:hover { background:url(../img/btn-portfolioview.png) bottom center no-repeat; }

/* portfolio slide styles */

#portfolio-slider .active-slide { width:28%; left:7%; }

#portfolio-slider .next-slide { width:14%; left:28%; top:0px; opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; }

#portfolio-slider .prev-slide { width:14%; left:0px; top:50%; opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; }

#portfolio-slider .off-screen { opacity:0; -webkit-opacity:0; -moz-opacity:0; left:-100%; }

.views {display: none;}

#portfolio-slider .active-slide-two { width:28%; left:35%; }

#portfolio-slider .next-slide-two { width:14%; left:56%; top:0px; opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; }

#portfolio-slider .prev-slide-two { width:14%; left:28%; top:50%; opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; }

#portfolio-slider .active-slide-three { width:28%; left:63%; }

#portfolio-slider .next-slide-three { width:14%; left:84%; top:0px; opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; }

#portfolio-slider .prev-slide-three { width:14%; left:56%; top:50%; opacity:0.3; -webkit-opacity:0.3; -moz-opacity:0.3; }


/* 

-------------------------------------------------------------

GENERAL

*/

#portfolio img { max-width:100%; }

#portfolio a { color:#fe651c; text-decoration:none; }

#portfolio a:hover { color:#ff8b54; }