.portfolio-banner{padding-bottom:20px;}
.portfolio-banner .portfolio-count-container{height:auto;min-height:initial!important;}
.portfolio-banner .single-portfolio-count{position:relative;bottom:0;padding:0;height:initial;max-height:0;transition:padding 350ms ease 1s,max-height 350ms ease 1s;}
.portfolio-banner .single-portfolio-count.show{padding:25px 0;max-height:75px;}
.portfolio-wrapper{padding-top:250px;opacity:0;}
.portfolio-item .project-info,.portfolio-project .project-info{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.portfolio-item{position:relative;z-index:10;float:left;display:block;margin-bottom:20px;animation-delay:20s;}
.portfolio-item:nth-child(3n+1){clear:both;transform:translateX(0);}
.portfolio-item:nth-child(3n+1) .project-info.animation-in{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.portfolio-item:nth-child(3n+1) .project-info.animation-out{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;transform:translate(-180px,50%);}
.portfolio-item:nth-child(3n+2){margin-left:-1px;transform:translate(50%,130px);}
.portfolio-item:nth-child(3n+2).animation-in{animation:animationlusTwo .5s forwards;}
@keyframes animationlusTwo{0%{transform:translate(20%,130px);}
	100%{transform:translate(0,130px);}
}
.portfolio-item:nth-child(3n+2) .project-info{transform:translateX(-180px);}
.portfolio-item:nth-child(3n+3) .project-info{transform:translateX(400px);}
.portfolio-item:nth-child(3n+3) .project-info .x-btn{right:40px;left:auto;}
.portfolio-item:hover .project-info .x-btn{transition:all 1.2s ease;transform:scale(1);}
.portfolio-item:hover h4:after{transition:transform .25s ease-out,width .25s ease-out,height .25s ease-out .25s;}
.portfolio-item:hover h4:before{transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .7s;border-top-color:#facc16;border-left-color:#facc16;}
.portfolio-item img{display:block;transition:all .8s cubic-bezier(.21,.73,.62,.99);}
.portfolio-item .project-info{position:absolute;bottom:0;left:0;transition:all .8s cubic-bezier(.21,.73,.62,.99);}
.portfolio-item .project-info .x-btn{position:absolute;top:-185px;left:40px;transition:all .4s ease;transform:scale(0);}
.portfolio-item .project-info .x-btn:after,.portfolio-item .project-info .x-btn:before{content:none;}
.portfolio-item h4{position:relative;margin:0;padding:0 60px 40px 40px;width:100%;font-size:38px;line-height:1;}
.portfolio-item h4:after,.portfolio-item h4:before{position:absolute;display:block;height:0;content:'';}
.portfolio-item h4:before{top:-135px;right:0;width:0;border-top:2px solid transparent;border-left:2px solid transparent;}
.portfolio-item h4:after{bottom:20px;left:0;width:150px;border-right:2px solid #facc16;border-bottom:2px solid #facc16;transform:translateX(40px);}
.portfolio-item p{margin:0;padding:0 60px 20px 40px;}
.portfolio-project{position:relative;z-index:10;float:left;display:block;margin-bottom:180px;}
.portfolio-project .project-thumbnail{overflow:hidden;background-color:#fef5d0;}
.portfolio-project:nth-child(3n+1){clear:both;}
.portfolio-project:nth-child(3n+1) .project-info{top:-30%;transform:translate(-80px,20%);}
.portfolio-project:nth-child(3n+2){margin-left:-1px;transform:translate(50%,130px);}
.portfolio-project:nth-child(3n+2) .project-info{transform:translateX(-180px);}
.portfolio-project:nth-child(3n+3){margin-top:180px;transform:translateX(25%);}
.portfolio-project:nth-child(3n+3) .project-info{transform:translateX(400px);}
.portfolio-project:nth-child(3n+3) .project-info .x-btn{right:40px;left:auto;}
.portfolio-project img{transition:all .8s cubic-bezier(.21,.73,.62,.99);}
.portfolio-project .project-info{position:absolute;bottom:0;left:0;transition:all .8s cubic-bezier(.21,.73,.62,.99);}
.portfolio-project .project-info .x-btn{position:absolute;top:-110px;left:40px;transition:all .4s ease;transform:scale(0);}
.portfolio-project .project-info .x-btn:after,.portfolio-project .project-info .x-btn:before{content:none;}
.portfolio-project h2{position:relative;margin:0;padding:0 60px 40px 40px;font-size:48px;line-height:1.2;}
.portfolio-project h2:after,.portfolio-project h2:before{position:absolute;display:block;height:0;content:'';}
.portfolio-project h2:before{top:-225px;right:0;width:0;border-top:2px solid transparent;border-left:2px solid transparent;}
.portfolio-project h2:after{bottom:20px;left:0;width:150px;border-right:2px solid #facc16;border-bottom:2px solid #facc16;transform:translateX(40px);}
.portfolio-project p{margin:0;padding:0 60px 20px 40px;opacity:0;}
.portfolio-project p{padding:40px 60px 60px 40px;background:linear-gradient(to left,#facc16e0 50%,rgba(255,255,255,.9) 0);background-position:left bottom;background-size:200% 100%;transition:all .8s ease-out;}
.portfolio-project:hover p{opacity:1;}
.portfolio-project:hover .project-info .x-btn{transition:all 1.2s ease;transform:scale(1);}
.portfolio-project:hover h2:after,.portfolio-project:hover h2:before{width:100%;height:300px;transform:translateX(0);}
.portfolio-project:hover h2:after{transition:transform .25s ease-out,width .25s ease-out,height .25s ease-out .25s;}
.portfolio-project:hover h2:before{transition:border-color 0s ease-out .5s,width .25s ease-out .5s,height .25s ease-out .7s;border-top-color:#facc16;border-left-color:#facc16;}
.portfolio-project:active p,.portfolio-project:focus p,.portfolio-project:hover p{background-position:right bottom;box-shadow:inset 0 0 12px 2px #f8b309;}
.portfolio-count{position:absolute;bottom:0;overflow:hidden;padding-left:1rem;height:25px;color:#333;text-transform:uppercase;font-weight:600;font-size:14px;}
.portfolio-count *{display:inline-block;}
.portfolio-count .portfolio-cat{transition:all .5s ease;transform:translateY(120%);}
.portfolio-count.show{height:initial;}
.portfolio-count.show .portfolio-cat.active:after,.portfolio-count.show .portfolio-cat.focus:after,.portfolio-count.show .portfolio-cat:hover:after{transform:translate(102%,-50%);}
.portfolio-count.show .portfolio-cat.active span,.portfolio-count.show .portfolio-cat.focus span,.portfolio-count.show .portfolio-cat:hover span{transform:translateY(-25px);}
.portfolio-count.show .portfolio-cat.active span small,.portfolio-count.show .portfolio-cat.focus span small,.portfolio-count.show .portfolio-cat:hover span small{top:21px;background-color:#facc16;color:#fff;}
.portfolio-count.show .portfolio-cat:after{position:absolute;top:50%;left:0;display:block;width:100%;height:1px;background-color:#333;content:'';transition:all .3s ease;transform:translate(-102%,-50%);}
.portfolio-count .portfolio-cat span{position:relative;transition:all .3s ease-out .1s;}
.portfolio-count .portfolio-cat span:after{position:absolute;top:25px;left:-51px;display:block;width:150px;color:#facc16;content:attr(data-hover-text);}
.portfolio-count span{margin-right:80px;cursor:pointer;}
.portfolio-count span:last-child{margin-right:0;}
.portfolio-count span small{position:relative;top:-3px;width:17px;height:17px;border-radius:50px;text-align:center;font-size:10px;line-height:20px;transition:all .3s ease-out .3s;}
.portfolio-count{position:absolute;bottom:0;overflow:hidden;height:25px;color:#333;text-transform:uppercase;font-weight:600;font-size:14px;}
.portfolio-count *{display:inline-block;}
.portfolio-count .portfolio-cat{transition:all .5s ease;transform:translateY(120%);}
.portfolio-count.show .portfolio-cat{position:relative;overflow:hidden;width:150px;transform:none;text-align:center;}
.portfolio-count.show .portfolio-cat.active:after,.portfolio-count.show .portfolio-cat.focus:after,.portfolio-count.show .portfolio-cat:hover:after{transform:translate(100%,-50%);}
.portfolio-count.show .portfolio-cat.active span,.portfolio-count.show .portfolio-cat.focus span,.portfolio-count.show .portfolio-cat:hover span{transform:translateY(-25px);}
.portfolio-count.show .portfolio-cat.active span small,.portfolio-count.show .portfolio-cat.focus span small,.portfolio-count.show .portfolio-cat:hover span small{top:21px;background-color:#facc16;color:#fff;}
.portfolio-count.show .portfolio-cat:after{position:absolute;top:50%;left:0;display:block;width:100%;height:1px;background-color:#333;content:'';transition:all .3s ease;transform:translate(-100%,-50%);}
.portfolio-count .portfolio-cat span{position:relative;transition:all .3s ease-out .1s;}
.portfolio-count span{margin-right:80px;cursor:pointer;}
.portfolio-count span:last-child{margin-right:0;}
.portfolio-count span small{position:relative;top:-3px;width:17px;height:17px;border-radius:50px;text-align:center;font-size:10px;line-height:20px;transition:all .3s ease-out .3s;}
@keyframes bounce{20%,53%,80%,from,to{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.215,.61,.355,1);}
	40%,43%{transform:translate3d(0,-30px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);}
	70%{transform:translate3d(0,-15px,0);animation-timing-function:cubic-bezier(.755,.05,.855,.06);}
	90%{transform:translate3d(0,-4px,0);}
}
.portfolio-page .bounce{transform-origin:center bottom;animation-name:bounce;}
@keyframes flash{50%,from,to{opacity:1;}
	25%,75%{opacity:0;}
}
.portfolio-page .flash{animation-name:flash;}
@keyframes pulse{from{transform:scale3d(1,1,1);}
	50%{transform:scale3d(1.05,1.05,1.05);}
	to{transform:scale3d(1,1,1);}
}
.portfolio-page .pulse{animation-name:pulse;}
@keyframes rubberBand{from{transform:scale3d(1,1,1);}
	30%{transform:scale3d(1.25,.75,1);}
	40%{transform:scale3d(.75,1.25,1);}
	50%{transform:scale3d(1.15,.85,1);}
	65%{transform:scale3d(.95,1.05,1);}
	75%{transform:scale3d(1.05,.95,1);}
	to{transform:scale3d(1,1,1);}
}
.portfolio-page .rubberBand{animation-name:rubberBand;}
@keyframes shake{from,to{transform:translate3d(0,0,0);}
	10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0);}
	20%,40%,60%,80%{transform:translate3d(10px,0,0);}
}
.portfolio-page .shake{animation-name:shake;}
@keyframes headShake{0%{transform:translateX(0);}
	6.5%{transform:translateX(-6px) rotateY(-9deg);}
	18.5%{transform:translateX(5px) rotateY(7deg);}
	31.5%{transform:translateX(-3px) rotateY(-5deg);}
	43.5%{transform:translateX(2px) rotateY(3deg);}
	50%{transform:translateX(0);}
}
.portfolio-page .headShake{animation-timing-function:ease-in-out;animation-name:headShake;}
@keyframes swing{20%{transform:rotate3d(0,0,1,15deg);}
	40%{transform:rotate3d(0,0,1,-10deg);}
	60%{transform:rotate3d(0,0,1,5deg);}
	80%{transform:rotate3d(0,0,1,-5deg);}
	to{transform:rotate3d(0,0,1,0deg);}
}
.portfolio-page .swing{transform-origin:top center;animation-name:swing;}
@keyframes tada{from{transform:scale3d(1,1,1);}
	10%,20%{transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);}
	30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);}
	40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);}
	to{transform:scale3d(1,1,1);}
}
.portfolio-page .tada{animation-name:tada;}
@keyframes wobble{from{transform:translate3d(0,0,0);}
	15%{transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);}
	30%{transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);}
	45%{transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);}
	60%{transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);}
	75%{transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .wobble{animation-name:wobble;}
@keyframes jello{11.1%,from,to{transform:translate3d(0,0,0);}
	22.2%{transform:skewX(-12.5deg) skewY(-12.5deg);}
	33.3%{transform:skewX(6.25deg) skewY(6.25deg);}
	44.4%{transform:skewX(-3.125deg) skewY(-3.125deg);}
	55.5%{transform:skewX(1.5625deg) skewY(1.5625deg);}
	66.6%{transform:skewX(-.78125deg) skewY(-.78125deg);}
	77.7%{transform:skewX(.39063deg) skewY(.39063deg);}
	88.8%{transform:skewX(-.19531deg) skewY(-.19531deg);}
}
.portfolio-page .jello{transform-origin:center;animation-name:jello;}
@keyframes heartBeat{0%{transform:scale(1);}
	14%{transform:scale(1.3);}
	28%{transform:scale(1);}
	42%{transform:scale(1.3);}
	70%{transform:scale(1);}
}
.portfolio-page .heartBeat{animation-name:heartBeat;animation-duration:1.3s;animation-timing-function:ease-in-out;}
@keyframes bounceIn{20%,40%,60%,80%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);}
	0%{opacity:0;transform:scale3d(.3,.3,.3);}
	20%{transform:scale3d(1.1,1.1,1.1);}
	40%{transform:scale3d(.9,.9,.9);}
	60%{opacity:1;transform:scale3d(1.03,1.03,1.03);}
	80%{transform:scale3d(.97,.97,.97);}
	to{opacity:1;transform:scale3d(1,1,1);}
}
.portfolio-page .bounceIn{animation-duration:.75s;animation-name:bounceIn;}
@keyframes bounceInDown{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);}
	0%{opacity:0;transform:translate3d(0,-3000px,0);}
	60%{opacity:1;transform:translate3d(0,25px,0);}
	75%{transform:translate3d(0,-10px,0);}
	90%{transform:translate3d(0,5px,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .bounceInDown{animation-name:bounceInDown;}
@keyframes bounceInLeft{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);}
	0%{opacity:0;transform:translate3d(-3000px,0,0);}
	60%{opacity:1;transform:translate3d(25px,0,0);}
	75%{transform:translate3d(-10px,0,0);}
	90%{transform:translate3d(5px,0,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .bounceInLeft{animation-name:bounceInLeft;}
@keyframes bounceInRight{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);}
	from{opacity:0;transform:translate3d(3000px,0,0);}
	60%{opacity:1;transform:translate3d(-25px,0,0);}
	75%{transform:translate3d(10px,0,0);}
	90%{transform:translate3d(-5px,0,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .bounceInRight{animation-name:bounceInRight;}
@keyframes bounceInUp{60%,75%,90%,from,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);}
	from{opacity:0;transform:translate3d(0,3000px,0);}
	60%{opacity:1;transform:translate3d(0,-20px,0);}
	75%{transform:translate3d(0,10px,0);}
	90%{transform:translate3d(0,-5px,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .bounceInUp{animation-name:bounceInUp;}
@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9);}
	50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1);}
	to{opacity:0;transform:scale3d(.3,.3,.3);}
}
.portfolio-page .bounceOut{animation-duration:.75s;animation-name:bounceOut;}
@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0);}
	40%,45%{opacity:1;transform:translate3d(0,-20px,0);}
	to{opacity:0;transform:translate3d(0,2000px,0);}
}
.portfolio-page .bounceOutDown{animation-name:bounceOutDown;}
@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0);}
	to{opacity:0;transform:translate3d(-2000px,0,0);}
}
.portfolio-page .bounceOutLeft{animation-name:bounceOutLeft;}
@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0);}
	to{opacity:0;transform:translate3d(2000px,0,0);}
}
.portfolio-page .bounceOutRight{animation-name:bounceOutRight;}
@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0);}
	40%,45%{opacity:1;transform:translate3d(0,20px,0);}
	to{opacity:0;transform:translate3d(0,-2000px,0);}
}
.portfolio-page .bounceOutUp{animation-name:bounceOutUp;}
@keyframes fadeIn{from{opacity:0;}
	to{opacity:1;}
}
.portfolio-page .fadeIn{animation-name:fadeIn;}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-100%,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInDown{animation-name:fadeInDown;}
@keyframes fadeInDownBig{from{opacity:0;transform:translate3d(0,-2000px,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInDownBig{animation-name:fadeInDownBig;}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-100%,0,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInLeft{animation-name:fadeInLeft;}
@keyframes fadeInLeftBig{from{opacity:0;transform:translate3d(-2000px,0,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInLeftBig{animation-name:fadeInLeftBig;}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(100%,0,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInRight{animation-name:fadeInRight;}
@keyframes fadeInRightBig{from{opacity:0;transform:translate3d(2000px,0,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInRightBig{animation-name:fadeInRightBig;}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,100%,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInUp{animation-name:fadeInUp;}
@keyframes fadeInUpBig{from{opacity:0;transform:translate3d(0,2000px,0);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .fadeInUpBig{animation-name:fadeInUpBig;}
@keyframes fadeOut{from{opacity:1;}
	to{opacity:0;}
}
.portfolio-page .fadeOut{animation-name:fadeOut;}
@keyframes fadeOutDown{from{opacity:1;}
	to{opacity:0;transform:translate3d(0,100%,0);}
}
.portfolio-page .fadeOutDown{animation-name:fadeOutDown;}
@keyframes fadeOutDownBig{from{opacity:1;}
	to{opacity:0;transform:translate3d(0,2000px,0);}
}
.portfolio-page .fadeOutDownBig{animation-name:fadeOutDownBig;}
@keyframes fadeOutLeft{from{opacity:1;}
	to{opacity:0;transform:translate3d(-100%,0,0);}
}
.portfolio-page .fadeOutLeft{animation-name:fadeOutLeft;}
@keyframes fadeOutLeftBig{from{opacity:1;}
	to{opacity:0;transform:translate3d(-2000px,0,0);}
}
.portfolio-page .fadeOutLeftBig{animation-name:fadeOutLeftBig;}
@keyframes fadeOutRight{from{opacity:1;}
	to{opacity:0;transform:translate3d(100%,0,0);}
}
.portfolio-page .fadeOutRight{animation-name:fadeOutRight;}
@keyframes fadeOutRightBig{from{opacity:1;}
	to{opacity:0;transform:translate3d(2000px,0,0);}
}
.portfolio-page .fadeOutRightBig{animation-name:fadeOutRightBig;}
@keyframes fadeOutUp{from{opacity:1;}
	to{opacity:0;transform:translate3d(0,-100%,0);}
}
.portfolio-page .fadeOutUp{animation-name:fadeOutUp;}
@keyframes fadeOutUpBig{from{opacity:1;}
	to{opacity:0;transform:translate3d(0,-2000px,0);}
}
.portfolio-page .fadeOutUpBig{animation-name:fadeOutUpBig;}
@keyframes flip{from{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,-360deg);animation-timing-function:ease-out;}
	40%{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);animation-timing-function:ease-out;}
	50%{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);animation-timing-function:ease-in;}
	80%{transform:perspective(400px) scale3d(.95,.95,.95) translate3d(0,0,0) rotate3d(0,1,0,0deg);animation-timing-function:ease-in;}
	to{transform:perspective(400px) scale3d(1,1,1) translate3d(0,0,0) rotate3d(0,1,0,0deg);animation-timing-function:ease-in;}
}
.portfolio-page .animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;animation-name:flip;}
@keyframes flipInX{from{opacity:0;transform:perspective(400px) rotate3d(1,0,0,90deg);animation-timing-function:ease-in;}
	40%{transform:perspective(400px) rotate3d(1,0,0,-20deg);animation-timing-function:ease-in;}
	60%{opacity:1;transform:perspective(400px) rotate3d(1,0,0,10deg);}
	80%{transform:perspective(400px) rotate3d(1,0,0,-5deg);}
	to{transform:perspective(400px);}
}
.portfolio-page .flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInX;}
@keyframes flipInY{from{opacity:0;transform:perspective(400px) rotate3d(0,1,0,90deg);animation-timing-function:ease-in;}
	40%{transform:perspective(400px) rotate3d(0,1,0,-20deg);animation-timing-function:ease-in;}
	60%{opacity:1;transform:perspective(400px) rotate3d(0,1,0,10deg);}
	80%{transform:perspective(400px) rotate3d(0,1,0,-5deg);}
	to{transform:perspective(400px);}
}
.portfolio-page .flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipInY;}
@keyframes flipOutX{from{transform:perspective(400px);}
	30%{opacity:1;transform:perspective(400px) rotate3d(1,0,0,-20deg);}
	to{opacity:0;transform:perspective(400px) rotate3d(1,0,0,90deg);}
}
.portfolio-page .flipOutX{animation-duration:.75s;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;}
@keyframes flipOutY{from{transform:perspective(400px);}
	30%{opacity:1;transform:perspective(400px) rotate3d(0,1,0,-15deg);}
	to{opacity:0;transform:perspective(400px) rotate3d(0,1,0,90deg);}
}
.portfolio-page .flipOutY{animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;animation-name:flipOutY;}
@keyframes lightSpeedIn{from{opacity:0;transform:translate3d(100%,0,0) skewX(-30deg);}
	60%{opacity:1;transform:skewX(20deg);}
	80%{transform:skewX(-5deg);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out;}
@keyframes lightSpeedOut{from{opacity:1;}
	to{opacity:0;transform:translate3d(100%,0,0) skewX(30deg);}
}
.portfolio-page .lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in;}
@keyframes rotateIn{from{opacity:0;transform:rotate3d(0,0,1,-200deg);transform-origin:center;}
	to{opacity:1;transform:translate3d(0,0,0);transform-origin:center;}
}
.portfolio-page .rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn;}
@keyframes rotateInDownLeft{from{opacity:0;transform:rotate3d(0,0,1,-45deg);transform-origin:left bottom;}
	to{opacity:1;transform:translate3d(0,0,0);transform-origin:left bottom;}
}
.portfolio-page .rotateInDownLeft{animation-name:rotateInDownLeft;}
@keyframes rotateInDownRight{from{opacity:0;transform:rotate3d(0,0,1,45deg);transform-origin:right bottom;}
	to{opacity:1;transform:translate3d(0,0,0);transform-origin:right bottom;}
}
.portfolio-page .rotateInDownRight{animation-name:rotateInDownRight;}
@keyframes rotateInUpLeft{from{opacity:0;transform:rotate3d(0,0,1,45deg);transform-origin:left bottom;}
	to{opacity:1;transform:translate3d(0,0,0);transform-origin:left bottom;}
}
.portfolio-page .rotateInUpLeft{animation-name:rotateInUpLeft;}
@keyframes rotateInUpRight{from{opacity:0;transform:rotate3d(0,0,1,-90deg);transform-origin:right bottom;}
	to{opacity:1;transform:translate3d(0,0,0);transform-origin:right bottom;}
}
.portfolio-page .rotateInUpRight{animation-name:rotateInUpRight;}
@keyframes rotateOut{from{opacity:1;transform-origin:center;}
	to{opacity:0;transform:rotate3d(0,0,1,200deg);transform-origin:center;}
}
.portfolio-page .rotateOut{animation-name:rotateOut;}
@keyframes rotateOutDownLeft{from{opacity:1;transform-origin:left bottom;}
	to{opacity:0;transform:rotate3d(0,0,1,45deg);transform-origin:left bottom;}
}
.portfolio-page .rotateOutDownLeft{animation-name:rotateOutDownLeft;}
@keyframes rotateOutDownRight{from{opacity:1;transform-origin:right bottom;}
	to{opacity:0;transform:rotate3d(0,0,1,-45deg);transform-origin:right bottom;}
}
.portfolio-page .rotateOutDownRight{animation-name:rotateOutDownRight;}
@keyframes rotateOutUpLeft{from{opacity:1;transform-origin:left bottom;}
	to{opacity:0;transform:rotate3d(0,0,1,-45deg);transform-origin:left bottom;}
}
.portfolio-page .rotateOutUpLeft{animation-name:rotateOutUpLeft;}
@keyframes rotateOutUpRight{from{opacity:1;transform-origin:right bottom;}
	to{opacity:0;transform:rotate3d(0,0,1,90deg);transform-origin:right bottom;}
}
.portfolio-page .rotateOutUpRight{animation-name:rotateOutUpRight;}
@keyframes hinge{0%{transform-origin:top left;animation-timing-function:ease-in-out;}
	20%,60%{transform:rotate3d(0,0,1,80deg);transform-origin:top left;animation-timing-function:ease-in-out;}
	40%,80%{opacity:1;transform:rotate3d(0,0,1,60deg);transform-origin:top left;animation-timing-function:ease-in-out;}
	to{opacity:0;transform:translate3d(0,700px,0);}
}
.portfolio-page .hinge{animation-duration:2s;animation-name:hinge;}
@keyframes jackInTheBox{from{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom;}
	50%{transform:rotate(-10deg);}
	70%{transform:rotate(3deg);}
	to{opacity:1;transform:scale(1);}
}
.portfolio-page .jackInTheBox{animation-name:jackInTheBox;}
@keyframes rollIn{from{opacity:0;transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);}
	to{opacity:1;transform:translate3d(0,0,0);}
}
.portfolio-page .rollIn{-webkit-animation-name:rollIn;animation-name:rollIn;}
@keyframes rollOut{from{opacity:1;}
	to{opacity:0;transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);}
}
.portfolio-page .rollOut{animation-name:rollOut;}
@keyframes zoomIn{from{opacity:0;transform:scale3d(.3,.3,.3);}
	50%{opacity:1;}
}
.portfolio-page .zoomIn{animation-name:zoomIn;}
@keyframes zoomInDown{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}
	60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);}
}
.portfolio-page .zoomInDown{animation-name:zoomInDown;}
@keyframes zoomInLeft{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}
	60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);}
}
.portfolio-page .zoomInLeft{animation-name:zoomInLeft;}
@keyframes zoomInRight{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}
	60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);}
}
.portfolio-page .zoomInRight{animation-name:zoomInRight;}
@keyframes zoomInUp{from{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}
	60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.175,.885,.32,1);}
}
.portfolio-page .zoomInUp{animation-name:zoomInUp;}
@keyframes zoomOut{from{opacity:1;}
	50%{opacity:0;transform:scale3d(.3,.3,.3);}
	to{opacity:0;}
}
.portfolio-page .zoomOut{animation-name:zoomOut;}
@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}
	to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);}
}
.portfolio-page .zoomOutDown{animation-name:zoomOutDown;}
@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0);}
	to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center;}
}
.portfolio-page .zoomOutLeft{animation-name:zoomOutLeft;}
@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);}
	to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center;}
}
.portfolio-page .zoomOutRight{animation-name:zoomOutRight;}
@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);animation-timing-function:cubic-bezier(.55,.055,.675,.19);}
	to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;animation-timing-function:cubic-bezier(.175,.885,.32,1);}
}
.portfolio-page .zoomOutUp{animation-name:zoomOutUp;}
@keyframes slideInDown{from{visibility:visible;transform:translate3d(0,-100%,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .slideInDown{animation-name:slideInDown;}
@keyframes slideInLeft{from{visibility:visible;transform:translate3d(-100%,0,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .slideInLeft{animation-name:slideInLeft;}
@keyframes slideInRight{from{visibility:visible;transform:translate3d(100%,0,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .slideInRight{animation-name:slideInRight;}
@keyframes slideInUp{from{visibility:visible;transform:translate3d(0,100%,0);}
	to{transform:translate3d(0,0,0);}
}
.portfolio-page .slideInUp{animation-name:slideInUp;}
@keyframes slideOutDown{from{transform:translate3d(0,0,0);}
	to{visibility:hidden;transform:translate3d(0,100%,0);}
}
.portfolio-page .slideOutDown{animation-name:slideOutDown;}
@keyframes slideOutLeft{from{transform:translate3d(0,0,0);}
	to{visibility:hidden;transform:translate3d(-100%,0,0);}
}
.portfolio-page .slideOutLeft{animation-name:slideOutLeft;}
@keyframes slideOutRight{from{transform:translate3d(0,0,0);}
	to{visibility:hidden;transform:translate3d(100%,0,0);}
}
.portfolio-page .slideOutRight{animation-name:slideOutRight;}
@keyframes slideOutUp{from{transform:translate3d(0,0,0);}
	to{visibility:hidden;transform:translate3d(0,-100%,0);}
}
.portfolio-page .slideOutUp{animation-name:slideOutUp;}
.portfolio-page .animated{animation-duration:1s;animation-fill-mode:both;}
.portfolio-page .animated.infinite{animation-iteration-count:infinite;}
.portfolio-page .animated.delay-1s{animation-delay:1s;}
.portfolio-page .animated.delay-2s{animation-delay:2s;}
.portfolio-page .animated.delay-3s{animation-delay:3s;}
.portfolio-page .animated.delay-4s{animation-delay:4s;}
.portfolio-page .animated.delay-5s{animation-delay:5s;}
.portfolio-page .animated.fast{animation-duration:.8s;}
.portfolio-page .animated.faster{animation-duration:.5s;}
.portfolio-page .animated.slow{animation-duration:2s;}
.portfolio-page .animated.slower{animation-duration:3s;}

.project-thumbnail{overflow:hidden;max-height:500px;background-color:#fef5d0;}
.project-info{transform:translate(-180px,50%);}
.project-info{transform:translate(-180px,0);}
.portfolio-page{padding-top:100px;}




/*媒体查询--------------------------------------------------------------*/
@media only screen and (max-width:1900px){
	.portfolio-project:nth-child(3n+1) .project-info{transform:translate(-150px,10%);}
	.portfolio-project:nth-child(3n+2){transform:translate(30%,130px);}
	.portfolio-project:nth-child(3n+2) .project-info{transform:translateX(-150px);}
	.portfolio-project:nth-child(3n+3) .project-info{transform:translateX(300px);}
	.portfolio-item:nth-child(3n+1) .project-info{transform:translate(-150px,50%);}
	.portfolio-item:nth-child(3n+2){transform:translate(30%,130px);}
	.portfolio-item:nth-child(3n+2) .project-info{transform:translateX(-150px);}
	.portfolio-item:nth-child(3n+3) .project-info{transform:translateX(300px);}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:1650px){
	.portfolio-item{width:45%;}
	.portfolio-item:nth-child(3n+2){margin-left:10%;}
	.portfolio-item:nth-child(3n+3){margin-top:100px;}
	.portfolio-item h4{padding:0 40px 40px;font-size:38px;}
	.portfolio-item p{padding:0 40px 20px;font-size:14px;}
	.portfolio-item:hover h4:after,.portfolio-item:hover h4:before{height:283px;}
	.portfolio-project:nth-child(3n+3){margin-top:100px;}
	.portfolio-project h2{padding:0 40px 40px;font-size:38px;}
	.portfolio-project p{padding:20px 40px;font-size:14px;}
	.portfolio-project:hover h2:after,.portfolio-project:hover h2:before{height:290px;}
	.portfolio-banner .single-portfolio-count.show{margin-bottom:100px;}
	.portfolio-wrapper{margin-bottom:150px;}
	.portfolio-count span{margin-right:0;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:1600px) {
	.portfolio-page {
		padding-bottom: 60px;
	}
}
/*----------------------------------------------------------------------*/
@media (max-width:1440px){
	.project-thumbnail{margin-top:50px;max-height:370px;}
	.portfolio-wrapper{margin-bottom:0;}
	.portfolio-page{padding-right:30px;padding-bottom:160px;padding-left:30px;}
	.portfolio-item h4:before{top:-188px;}
	.portfolio-item:nth-child(3n+2){transform:translate(0,150px)!important;}
	.portfolio-item h4:after,.portfolio-item h4:before{display:none;}
	.portfolio-project:nth-child(3n+1) .project-info{top:-15%;transform:translate(0,0)!important;}
	.portfolio-project .project-info .x-btn{display:none;}

	.portfolio-wrapper{padding:0!important;}
	.portfolio-banner{padding-bottom:0!important;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:1370px){
	.portfolio-count{font-size:13px;}
}
/*----------------------------------------------------------------------*/
@media (max-width:1024px){.portfolio-page{padding-top:0!important;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:800px){
	.project-thumbnail{margin-top:0;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:770px){
	.portfolio-banner .portfolio-count-container{padding-bottom:0;}
	.portfolio-project p{padding:30px 15px 30px 15px;}
}
/*----------------------------------------------------------------------*/
@media (max-width:768px){
	.portfolio-page{padding-top:0;}
	.portfolio-banner .portfolio-count-container{padding-bottom:0;background-color:transparent;}
	.portfolio-wrapper{padding-top:0!important;}
	.portfolio-wrapper{padding-top:90px;}
	.portfolio-item{margin-bottom:0;padding:15px;width:50%;}
	.portfolio-item .project-thumbnail{overflow:hidden;background-color:#fef5d0;}
	.portfolio-item:nth-child(3n+2){margin-left:0;}
	.portfolio-item:nth-child(3n+1){bottom:auto;clear:none;}
	.portfolio-item:nth-child(3n+2){transform:none;}
	.portfolio-item:nth-child(3n+3){margin-top:0;transform:none;}
	.portfolio-item .project-info{position:relative;bottom:auto;left:auto;margin-top:15px;padding:0 15px;transform:none!important;}
	.portfolio-item h4{padding:0 0 20px;font-size:32px;}
	.portfolio-item h4:after{bottom:7px;transform:none;}
	.portfolio-item h4:before{content:none;}
	.portfolio-item p{padding:0 0 20px;font-size:14px;}
	.portfolio-item:hover h4:after{height:initial;}
	.portfolio-item h4{padding:0 0 20px;font-size:30px;}
	.portfolio-item h4:after{bottom:8px;}
	.portfolio-item p{font-size:12px;}
	.portfolio-item .x-btn{display:none;}
	.portfolio-project{margin-bottom:0;padding:15px;}
	.portfolio-project:nth-child(3n+1){bottom:auto;clear:none;}
	.portfolio-project:nth-child(3n+2){transform:none;}
	.portfolio-project:nth-child(3n+3){margin-top:0;transform:none;}
	.portfolio-project .project-info{position:relative;bottom:auto;left:auto;margin-top:15px;padding:0 15px;transform:none!important;}
	.portfolio-project h2{padding:0 0 20px;font-size:32px;}
	.portfolio-project h2:after{bottom:7px;transform:none;}
	.portfolio-project h2:before{content:none;}
	.portfolio-project p{padding:0 0 20px;font-size:14px;}
	.portfolio-project:hover h2:after{height:initial;}
	.portfolio-project h2{padding:0 0 20px;font-size:30px;}
	.portfolio-project h2:after{bottom:8px;}
	.portfolio-project p{font-size:12px;}
	.portfolio-project .x-btn{display:none;}
	.portfolio-project:nth-child(3n+1) .project-info{position:relative!important;bottom:0;}

	.portfolio-banner .single-portfolio-count.show{display:block;border-radius:40px;}
	.portfolio-count{font-size:12px;}
	.portfolio-count-container{margin-bottom:-1px;padding-top:30px;width:100%;background-color:#fff;}
	.portfolio-page{padding-bottom:0;word-wrap:break-word;}

	.portfolio-item h4{width:100%!important;}
	.portfolio-item:nth-child(3n+2){transform:translate(0,0)!important;}
	.portfolio-item img{margin:0 auto;width:auto;height:200px;}
	.portfolio-item h4{font-size:24px;}
	.portfolio-project:nth-child(3n+1) .project-info{transform:translate(0,0)!important;}
	.portfolio-project p{display:none;}
	.portfolio-project .project-info{width:100%;}
	.portfolio-project .project-info{height:140px;}
	.portfolio-project .project-info{width:100%!important;}
	.project-thumbnail{margin-top:0;background:0 0!important;}
	.portfolio-wrapper{padding-top:0!important;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:650px){
	.portfolio-banner .single-portfolio-count.show{max-height:100%;display:block;padding:0;margin:0;background-color:transparent;border-radius:0;}
	.portfolio-banner .single-portfolio-count.show a{line-height:30px;background-color:#facc16;border-radius:25px;text-align:center;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:580px){
	.project-thumbnail{margin-top:0;}
	.portfolio-project:nth-child(3n+1) .project-info{position:relative!important;bottom:0;}
}
/*----------------------------------------------------------------------*/
@media(max-width:568px){
	.portfolio-item{float:none;width:100%;}
	.portfolio-item h4{padding:0 0 15px;font-size:26px;}
	.portfolio-project{float:none;width:100%;}
	.portfolio-project h2{padding:0 0 15px;font-size:26px;}
	.portfolio-item{display:contents;}
	.portfolio-item h4{font-size:18px;}
	.portfolio-project .project-info{height:auto!important;}
	.portfolio-item img{width:100%;height:auto;}
	.page-banner:not(.home_top)>.container {margin-top:0;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:550px){
	.portfolio-wrapper{padding-top:40px!important;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:400px){
	.portfolio-wrapper{padding-top:0;}
}
/*----------------------------------------------------------------------*/
@media only screen and (max-width:320px){
	.portfolio-page{padding-top:90px;}
}



/*----------------------------------------------------------------------*/
@media (min-width:1440px){
	.portfolio-item:nth-child(3n+1) .project-info{transform:translate(-80px,20%);}
	.portfolio-project .project-info{width:100%;}
	.portfolio-project:nth-child(3n+1) .project-info{top:-45%;}
}