.port-wide{position:relative;z-index:3;float:left;padding:50px 0 0 0;width:100%;direction:rtl;transition:all 1s;overflow:hidden;z-index:10000;visibility:visible!important}.port-wide:first-child .port-item{padding-top:10px}.port-wide:nth-child(2n){position:relative;margin-top:0;direction:ltr;z-index:10000;visibility:visible!important}.port-item{margin:auto;width:100%;text-align:center;line-height:20px}.port-info{display:inline-block;padding:0 0 0 60px;width:450px;vertical-align:middle;text-align:left;direction:rtl}.port-info h2{margin:0;text-transform:capitalize;font-weight:900;line-height:110%}.port-info h3{margin:14px 0;color:silver;text-transform:uppercase;font-weight:400;font-size:14px}.port-info img{max-width:100%}.port-wide:nth-child(2n) .port-info{padding:0 60px 0 0}.port-img{display:inline-block;height:490px;overflow:hidden;width:650px;vertical-align:middle;box-shadow:0 0 15px 0 rgba(0,0,0,.05);position:relative;margin-bottom:-4px}.browser{width:100%;height:16px;border:1px solid #eaeaea;border-radius:4px 4px 0 0;background:#ddd url(../images/dots.svg) no-repeat 6px 5px}.img-source{height:96%;position:relative;background-position:top center}.port-info .btn{margin-top:20px;display:inline-block;text-transform:capitalize;border:2px solid #666;color:#666}.port-info .btn:hover{border-color:#000;color:#000}.img-andrei .port-info .btn,.img-cfait .port-info .btn,.img-ewb .port-info .btn,.img-hex .port-info .btn,.img-otg .port-info .btn{border:2px solid rgba(256,256,256,.5);color:rgba(256,256,256,.5)}.img-andrei .port-info .btn:hover,.img-cfait .port-info .btn:hover,.img-ewb .port-info .btn:hover,.img-hex .port-info .btn:hover,.img-otg .port-info .btn:hover{border:2px solid #fff;color:#fff}.img-andrei .port-info .btn{border:2px solid rgba(256,256,256,.5);color:rgba(256,256,256,.5)}.img-andrei .port-info .btn:hover{border:2px solid #fff;color:#fff}.port-section-img .img-browser{width:100%;padding-top:16px;border:1px solid #eaeaea;border-radius:4px 4px 0 0;background:#ddd url(../images/dots.svg) no-repeat 6px 5px;max-width:640px}p.p-lead{font-size:1.2rem;font-family:"Noto Sans",Helvetica,Arial,sans-serif;color:#a3a3a7}@media (max-width:1024px){.port-img,.port-info{width:50%;margin-left:-3px}.port-item{padding:0 20px}.port-wide{padding-top:20px}}@media (max-width:460px){.port-wide{padding-top:40px}.port-info{width:100%;padding:0}.port-img{width:100%}.port-img{height:360px}.port-info h2{font-size:1.4rem}.port-info h3{margin-bottom:20px;font-size:.6rem}}.img-otg{background-color:#aa8862}.img-dq{background-color:#fbbb0b}.img-cfait{background-color:#27348f}.img-ewb{background-color:#252632}.img-hex{background-color:#013d5f}.img-ux{background-color:#e7ecef}.img-panda{background-color:#eaeaea}.img-andrei{background-color:#e23723}.img-hydro{background-color:#013d5f}.img-otg .img-source{background:url(../images/work/otg.png);background-size:cover}.img-1st .img-source{background:url(../images/work/1st.jpg);background-size:cover}.img-dq .img-source{background:url(../images/work/dq-produce-v2.jpg);background-size:cover}.img-castle .img-source{background:url(../images/work/castle.jpg);background-size:cover}.img-ewb .img-source{background:url(/images/work/5-min.png);background-size:cover}.img-panda .img-source{background:url(/images/work/1-min.jpeg);background-size:cover}.img-hex .img-source{background:url(/images/work/3-min.png);background-size:cover}.img-ux .img-source{background:url(/images/work/4-min.png);background-size:cover}.img-andrei .img-source{background:url(/images/work/2-min.jpeg);background-size:cover}.img-hydro .img-source{background:url(http://www.84colors.com/images/work/hydrosol/hydrosol.png);background-size:cover}.on-btn .img-source{animation:move 4s ease-in;animation-delay:0s}@keyframes move{0%,100%{background-position:top center}60%{background-position:bottom}80%{background-position:bottom}}.in-view .port-info h2,.in-view .port-info h3{color:#fff}.port-info h2,.port-info h3{color:#fff}.port-info p{color:rgba(256,256,256,.7)}.img-ux .port-info h2{color:#313131}.img-ux .port-info h3{color:#666}.img-ux p{color:#999}.img-panda .port-info h2{color:#313131}.img-panda .port-info h3{color:#666}.img-panda p{color:#999}.img-andrei .port-info h2{color:#fff}.img-andrei .port-info h3{color:#fff}.img-andrei p{color:#fff}