body { font-family: 'Lato', sans-serif !important; }
.pos-rel{ position:relative;}

.portfoliostabs { display: block; background: url(../jpg/tabbg.jpg) center top no-repeat; background-size:cover; height: 74px; width: 100%; }
.portfoliostabs ul { padding: 0; list-style: none; margin: 0; z-index: 998; position: relative }
.portfoliostabs ul li { margin: 0; display: inline-block; text-align: center; width: 16.4%; border-left: 1px solid #4e2c61; padding: 12px 0 12px 18px; font-size: 18px; position: relative }
.portfoliostabs ul li img { float: left; margin-top: 7px }
.portfoliostabs ul li a { display: inline-block; text-align: center; line-height: 50px; vertical-align: top; position: relative }
.portfoliostabs ul li .arrow_bottom { float: right; display: block; background: url(../png/dropdown_arrow_down.png) no-repeat 10px 20px; width: 30px; height: 30px; margin: 2px 0 0; }
.portfoliostabs ul li:last-child { border-right: 1px solid #4e2c61 }
.portfoliostabs ul li a:hover { color: #1866b1 }
.portfoliostabs ul li .open_arrow { position: absolute; width: 100%; left: 0; z-index: 222; display: none }
.portfoliostabs ul li:hover .open_arrow { display: block }
.dropdown_div { background: #fff; display: none; left: -1px; -webkit-box-shadow: 0 2px 8px rgba(0,0,0,.14); -moz-box-shadow: 0 2px 8px rgba(0,0,0,.14); box-shadow: 0 2px 8px rgba(0,0,0,.14); border-top: none; position: absolute; top: 74px; z-index: 22 }
.portfoliostabs ul li:hover .dropdown_div { display: block; overflow: visible; width:240px;}
.dropdown_div ul.lisitng { float: left; margin-right: 10px; width: 100% }
.dropdown_div ul.lisitng li { display: block; float: left; font-size: 14px; color: #919191; text-align: left; border: none; padding: 0; width: 24% }
.dropdown_div ul.lisitng li .styledCheckbox { float: left; margin-bottom: 10px }
.dropdown_div ul.lisitng li label { font-size: 14px; font-family: 'Open Sans', sans-serif; margin-left: 10px; line-height: 23px; float: left; color: #919191 }
.dropdown_div ul.lisitng li a { line-height: normal }
.dropdown_div ul.lisitng li label:hover { color: #000 }
.dropdown_div ul.lisitng li a { color: #919191 }
.dropdown_div ul.lisitng li a:hover { color: #000 }
.dropdown_div { width: 100%; padding: 0; overflow: hidden; -moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s; transition: all linear .3s }
.portfoliostabs ul li .dropdown_div ul li { border: 0px; }
.portfoliostabs ul li:hover .dropdown_div { -moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s; transition: all linear .3s }
.portfoliostabs ul li a { margin-left: 13px; color: #cec8d5 }
.portfoliostabs ul li.web { background: url(../png/web_icon.png) no-repeat 0 50%; cursor: pointer; }
.portfoliostabs ul li.web.active, .portfoliostabs ul li.web:hover { background: url(../png/active-icon1.png) no-repeat 0 50% rgba(255, 255, 255, 0.26); z-index: 999; color: #fff; }
.portfoliostabs ul li.web.active a, .portfoliostabs ul li.web:hover a { color: #FFF }
.portfoliostabs ul li.web.active .arrow_bottom, .portfoliostabs ul li.web:hover .arrow_bottom { background: url(../png/arrow_hover.png) no-repeat 10px 20px }
.portfoliostabs ul li.mobile { background: url(../png/mobile_icon.png) no-repeat 20px 50%; cursor: pointer }
.portfoliostabs ul li.mobile.active, .portfoliostabs ul li.mobile:hover { background: url(../png/mobile_icon_active.png) no-repeat 20px 50% rgba(255, 255, 255, 0.26); z-index: 999 }
.portfoliostabs ul li.mobile.active a, .portfoliostabs ul li.mobile:hover a { color: #FFF }
.portfoliostabs ul li.mobile.active .arrow_bottom, .portfoliostabs ul li.mobile:hover .arrow_bottom { background: url(../png/arrow_hover.png) no-repeat 10px 20px }
.portfoliostabs ul li.ecommerce { background: url(../png/ecommerce_icon.png) no-repeat 7px 50%; cursor: pointer }
.portfoliostabs ul li.ecommerce.active, .portfoliostabs ul li.ecommerce:hover { background: url(../png/ecommerce_active.png) no-repeat 7px 50% rgba(255, 255, 255, 0.26); z-index: 999 }
.portfoliostabs ul li.ecommerce a { margin-left: 31px }
.portfoliostabs ul li.ecommerce.active a, .portfoliostabs ul li.ecommerce:hover a { color: #FFF }
.portfoliostabs ul li.ecommerce.active .arrow_bottom, .portfoliostabs ul li.ecommerce:hover .arrow_bottom { background: url(../png/arrow_hover.png) no-repeat 10px 20px }

.portfoliostabs ul li.cms { background: url(../png/cms_icon.png) no-repeat 12px 50%; cursor: pointer }
.portfoliostabs ul li.cms.active, .portfoliostabs ul li.cms:hover { background: url(../png/cms_iconactive.png) no-repeat 12px 50% rgba(255, 255, 255, 0.26); z-index: 999 }
.portfoliostabs ul li.cms a { margin-left: 0 }
.portfoliostabs ul li.cms.active a, .portfoliostabs ul li.cms:hover a { color: #FFF }
.portfoliostabs ul li.cms.active .arrow_bottom, .portfoliostabs ul li.cms:hover .arrow_bottom { background: url(../png/arrow_hover.png) no-repeat 10px 20px }

.portfoliostabs ul li.other { background: url(../png/other-icon.png) no-repeat 12px 50%; cursor: pointer; padding-left:40px;}
.portfoliostabs ul li.other.active, .portfoliostabs ul li.other:hover { background: url(../png/other-active.png) no-repeat 12px 50% rgba(255, 255, 255, 0.26); z-index: 999 }
.portfoliostabs ul li.other a { margin-left: 0 }
.portfoliostabs ul li.other.active a, .portfoliostabs ul li.other:hover a { color: #FFF }
.portfoliostabs ul li.other.active .arrow_bottom, .portfoliostabs ul li.other:hover .arrow_bottom { background: url(../png/other-active.png) no-repeat 10px 20px }



.portfoliostabs ul li.industries { background: url(../png/industries_icon.png) no-repeat 0px 50%; cursor: pointer }
.portfoliostabs ul li.industries.active, .portfoliostabs ul li.industries:hover { background: url(../png/industries_hover.png) no-repeat 0px 50% rgba(255, 255, 255, 0.26); z-index: 999 }
.portfoliostabs ul li.industries a { margin-left: 31px }
.portfoliostabs ul li.industries.active a, .portfoliostabs ul li.industries:hover a { color: #FFF }
.portfoliostabs ul li.industries.active .arrow_bottom, .portfoliostabs ul li.industries:hover .arrow_bottom, .portfoliostabs ul li.other:hover .arrow_bottom { background: url(../png/arrow_hover.png) no-repeat 10px 20px }
.portfoliostabs ul li.active { background-color: #1866b1 }
.portfoliostabs ul li.active a { color: #FFF }
.portfoliostabs ul li ul.drop-menu { width: 100%; list-style: none }
.portfoliostabs ul li ul.drop-menu li { width: 100%; box-sizing: border-box; list-style: none; display: block; padding: 0 0 0 33px; text-align: left; background: url(../png/menu-down-arrow.png) no-repeat 17px 50%; border-bottom: solid 1px #e5e5e5; transition: all 0.5s ease-in-out; }
.portfoliostabs ul li ul.drop-menu li a { font-size: 14px; color: #737373 !important; margin-left: 0 }
.portfoliostabs ul li ul.drop-menu li.active, .portfoliostabs ul li ul.drop-menu li:hover { background: #f2f1f1 url(../png/menu-down-arrow.png) no-repeat 22px 50%; cursor: pointer; padding: 0 0 0 40px; }
.portfoliostabs ul li ul.drop-menu li.active a, .portfoliostabs ul li ul.drop-menu li:hover a { color: #737373; margin-left: 0 }
.portfoliostabs ul li.active li a { font-size: 14px; color: #737373 }
.portfoliostabs ul li.active li.active, .portfoliostabs ul li.active li:hover { background-color: #e7e7e7; cursor: pointer }

.portfoliostabs ul li.active li.active a, 
.portfoliostabs ul li.active li:hover a, 
.portfoliostabs ul li.cms ul.drop-menu li a, 
.portfoliostabs ul li.ecommerce ul.drop-menu li a, 
.portfoliostabs ul li.industries ul.drop-menu li a,
.portfoliostabs ul li.mobile ul.drop-menu li a,
.portfoliostabs ul li.other ul.drop-menu li a, 
.portfoliostabs ul li.web ul.drop-menu li a 

{ color: #737373 }


#site-header { display: none; }
.portfoliostabs .drop-menu { left: 0; top: 0px; }
/* Portfolio Content */
.portfoliowrap { padding: 40px 0; position: relative; }
.portfoliowrap h1 { margin-bottom: 15px; color: #222222; font-size: 28px; font-weight: bold; font-family: "Lato", sans-serif !important; }
.portfoliowrap h1 span{ font-size:14px; font-weight:normal;}


.portfoliowrap h2 { margin-bottom: 15px; color: #222222; font-size: 32px; text-align: center; font-weight: bold; font-family: "Lato", sans-serif !important; }
.portfoliowrap h3 { margin-bottom: 15px; color: #222222; font-size: 28px; font-weight: bold; font-family: "Lato", sans-serif !important; }
.portfoliowrap h3 span{ font-size:14px; font-weight:normal;}
.portfoliowrap .prot-txt { font-size: 18px; color: #474646; line-height: 34px; margin-bottom: 30px; }
.portfoliowrap .prot-txt span { font-weight: bold; color: #262525; }
.portfolio-heading { position: relative; }
.portfolio-heading:before { background: #d6d6d6; height: 2px; position: absolute; content: ""; left: 0; right: 0; width: 100%; top: 14px; z-index: -1; }
.portfolio-heading h4 { display: inline-block; background: #fff; padding: 0 30px; z-index: 99; font-family: "Lato", sans-serif !important; font-weight: bold; font-size: 24px; color: #323232; position: relative; }
.portfolio-heading h4:before { position: absolute; left: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #d6d6d6; content: ""; }
.portfolio-heading h4:after { position: absolute; right: 0; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #d6d6d6; content: ""; }
.portfolio-content { padding: 40px 0; }
.portfolio-content li { float: left; margin: 0 20px 40px; position: relative; width: 21%; }
.portfolio-content li .mobile-listbox { background: #fff; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -ms-border-radius: 50%; padding: 10px; -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.25); -moz-box-shadow: 0 1px 7px rgba(0,0,0,.25); box-shadow: 0 1px 7px rgba(0,0,0,.25); width: 100%; height: auto;}

.app-logo{ width:100%; height:auto;}

.mobile-listbox .appbg { border-radius: 50%; width: 100%; height: auto; }
.mobile-listbox .app-logo { height: auto; left: 18px; margin: 0 auto; oerflow: hidden; position: absolute; top: 30px; width: 85%; z-index: 10; }
/*.mobile-listbox .app-hoverse { animation-duration: 0s; border-radius: 50%; left: 0; height: 73%; margin: 0 auto; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 10; transform:skew(0)}*/

.mobile-listbox .app-hoverse { border-radius: 50%; height: 68%; left: 0; margin: 0 auto; opacity:0 ; position: absolute;  top: 0; transform: scale(0); transition: all 0.5s ease-in-out 0s; width: 100%; z-index: 10;}




.mobile-listbox:hover .app-hoverse { background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0; opacity: 1; transition: all 0.3s linear 0s; transform: scale(1);}



.mobile-listbox .point { animation-duration: 0s; color: #ffffff; font-size: 135px; line-height: 80px; opacity: 0; text-align: center; }
.mobile-listbox:hover .point { opacity: 1; transition: all 0.5s linear 0s; left: 0; margin: 0 auto; position: absolute; right: 0; top: 80px; transition: all 0.5s linear 0s; width: 80px; text-align: center; }
.portfolio-content li .portfolio-title { padding: 15px 0 0;height:72px; }
.portfolio-content li .portfolio-title a { color: #222; font-size: 20px; font-weight: 700; }
.portfolio-content li .device-logo { margin: 20px auto 0; width: 100%; height: 30px; text-align: center;}
.portfolio-content li .device-logo ul{ text-align:center;}
.device-logo li{float:none; display:inline-block; padding:0 8px; border-left:1px solid #e9e9e8; width:auto; margin:0px; }
.device-logo li:first-child{ border-left:0px;}

.browse-link { margin: 0 0 30px; }
.browse-link a { -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: #fff; border: solid 2px #5c43d7; background-image: -webkit-linear-gradient(bottom, #5c43d7, #bc0ff5); background-image: -moz-linear-gradient(bottom, #5c43d7, #bc0ff5); background-image: -o-linear-gradient(bottom, #5c43d7, #bc0ff5); background-image: -ms-linear-gradient(bottom, #5c43d7, #bc0ff5); background-image: linear-gradient(to top, #5c43d7, #bc0ff5); text-align: center; display: inline-block; font-size: 24px; font-weight: bold; color: #fff; font-family: "Lato", sans-serif; padding: 7px 40px 8px; transition: all 0.5s ease-in-out; }
.browse-link a:hover { background-color: #fff; border: solid 2px #5c43d7; background-image: -webkit-linear-gradient(top, #5c43d7, #bc0ff5); background-image: -moz-linear-gradient(top, #5c43d7, #bc0ff5); background-image: -o-linear-gradient(top, #5c43d7, #bc0ff5); background-image: -ms-linear-gradient(top, #5c43d7, #bc0ff5); background-image: linear-gradient(to bottom, #5c43d7, #bc0ff5); }
.portfolio-desktop { padding: 40px 0 0; }
.portfolio-desktop li { float: left; margin: 0 40px 40px 0; position: relative; width: 45%; }
.portfolio-desktop li:nth-child(2n+2) { margin-right: 0; float: right; }
.portfoliobox .desk-hoverse { height: 100%; margin: 0 auto; opacity: 0; position: absolute; top: 0; transition: all 0.5s linear 0s; width: 100%; z-index: 10; }
.portfoliobox .point { color: #ffffff; font-size: 68px; line-height: 80px; opacity: 0; }
.portfoliobox .point { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; border-radius: 50%; height: 80px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 50px; transition: all 0.5s linear 0s; width: 80px; z-index: 10; text-align: center; }
.portfoliobox:hover .desk-hoverse { opacity: 1; transition: all 0.5s linear 0s; }
.portfoliobox:hover .point { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; border-radius: 50%; height: 80px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 50px; width: 80px; text-align: center; }
.portfoliobox:hover .point { opacity: 1; transition: all 0.5s linear 0s; }
.desktop-title { padding: 15px 0 0; }
.desktop-title a { color: #4a4747; font-size: 20px; font-weight: 700; }
.desktop-title a span { color: #222222; font-weight: bold;}
.desktop-txt { padding:10px 0 40px; }
.desktop-txt a { color: #4a4747; font-size: 16px;}
.desktop-txt a span { color: #222222; font-weight: bold;}

.desktop-web .mouse-hover {  opacity: 0; position:absolute; height: 80px; width:80px; border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -webkit-border-radius:50%;}
.desktop-web:hover .mouse-hover {position: absolute; top: 50px; transition: all 0.5s linear 0s; z-index: 10; color: #ffffff; font-size: 60px; line-height: 80px; opacity: 1; height: 80px; width:80px; background:rgba(0, 0, 0, 0.54); border-radius:50%; -moz-border-radius:50%; -ms-border-radius:50%; -webkit-border-radius:50%; text-align:center; left:0; right:0; margin:0 auto;}

.portfoliobox .point { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; border-radius: 50%; height: 80px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 50px; transition: all 0.5s linear 0s; width: 80px; z-index: 10; text-align: center; }
.portfoliobox:hover .desk-hoverse { opacity: 1; transition: all 0.5s linear 0s; }
.portfoliobox:hover .point { background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0; border-radius: 50%; height: 80px; left: 0; margin: 0 auto; position: absolute; right: 0; top: 50px; width: 80px; text-align: center; }
.portfoliobox:hover .point { opacity: 1; transition: all 0.5s linear 0s; }







/* menu */
#menu ul { margin: 0; padding: 0; }
#menu .main-menu { display: none; }
#tm:checked + .main-menu { display: block; /*background: #114d86;*/ margin: 0 -15px; /*background-image: url("../images/588-copy5.jpg");*/ background-image:url(../jpg/588.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; }
#menu input[type="checkbox"], #menu ul span.drop-icon { display: none; }
#menu li, #toggle-menu, #menu .sub-menu { border-style: solid; border-color: #7b5477; }
#menu li, #toggle-menu { border-width: 0 0 1px; }
#menu .sub-menu { /*background: #1866b1;*/  background-image:url(../jpg/588.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; border-width: 1px 1px 0; margin: 0; }
#menu .sub-menu li:last-child { border-width: 0; }
#menu li, #toggle-menu, #menu a { position: relative; display: block; color: #e7bcde; text-shadow: 1px 1px 0 rgba(0, 0, 0, .125); width: 100%; text-align: left; }
#toggle-menu, #menu a { padding: 1em 1.5em; }
#menu a { transition: all .125s ease-in-out; -webkit-transition: all .125s ease-in-out; }
#menu a:hover { background-color: #603a5e; color: #fff; }
#menu .sub-menu { display: none; }
#menu input[type="checkbox"]:checked + .sub-menu { display: block; }
#menu .sub-menu a:hover { color: #444; }
#toggle-menu .drop-icon, #menu li label.drop-icon { position: absolute; right: 0; top: 0; }
#menu label.drop-icon, #toggle-menu span.drop-icon { padding: 15px; font-size: 1em; text-align: center; background-color: rgba(0, 0, 0, .125); text-shadow: 0 0 0 transparent; color: rgba(255, 255, 255, .75); }
/* Pagingbox */
.pagingbox { clear: both; height: 52px; position: relative; text-align:center; margin-top:55px;}
.pagingbox:before { content:""; position:absolute; height:1px; background:#e6e7e8 ; left:0; width:100%; top:18px; z-index:-1;}
.pagingbox a.next { background: #adadad none repeat scroll 0 0; color: #ffffff; display:inline-block; font-size: 18px; height: 35px; line-height: 35px; text-align: center; width: 35px; margin-left:5px; z-index:99;}
.pagingbox a.next:hover { background: #e52e2f none repeat scroll 0 0;}
.pagingbox a.prev { background: #adadad none repeat scroll 0 0; color: #ffffff; display:inline-block; font-size: 18px; height: 35px; line-height: 35px; text-align: center;  width: 35px; margin-right:5px; z-index:99;}
.pagingbox a.prev:hover { background: #e52e2f none repeat scroll 0 0;}


.desk-title a{ color: #4a4747; font-size: 16px; font-weight:normal; }
.desk-title a span { color: #222222; font-weight: bold; }




@media only screen and (min-width:320px) and (max-width:767px) {
#site-header { display: block; }
.portfolio-dropdown { display: none; }
}
@media (min-width:1024px) and (max-width:1100px) {
.portfolio-dropdown { width: 100%; }
.portfolio-dropdown ul li { width: 195px; }
}
@media screen and (max-width:1023px) {
.portfolio-content li { margin: 0 20px 40px; width: 27.50%; }
.portfolio-content li .mobile-listbox { padding: 5px; }
.mobile-listbox .app-logo { height: auto; left: 8px; top: 18px; width: 185px; }
.mobile-listbox .app-hoverse { height: 82%; }
.mobile-listbox:hover .point { top: 60px; }
.mobile-listbox .point { font-size: 90px; }
.desktop-title a { font-size: 18px; font-weight: normal }
.portfoliostabs ul li { width: 19.5%; }
.portfoliostabs ul li.web, .portfoliostabs ul li.mobile, .portfoliostabs ul li.ecommerce, .portfoliostabs ul li.cms, .portfoliostabs ul li.industries { background: none; padding: 12px 0; }
.portfoliostabs ul li a { margin: 0px; }
.portfoliostabs ul li.web.active, .portfoliostabs ul li.web:hover, .portfoliostabs ul li.mobile.active, .portfoliostabs ul li.mobile:hover, .portfoliostabs ul li.ecommerce.active, .portfoliostabs ul li.ecommerce:hover, .portfoliostabs ul li.cms.active, .portfoliostabs ul li.cms:hover, .portfoliostabs ul li.industries.active, .portfoliostabs ul li.industries:hover { background: none; }
.portfoliostabs ul li.industries a, .portfoliostabs ul li.ecommerce a { margin: 0; }
.portfoliostabs ul li:hover .dropdown_div { width: 210px; }
.portfoliostabs ul li:hover.industries .dropdown_div { left: auto; right: 1px; }
.fashipn-image { margin: 10px 0 0; }
.fot-mensu { padding: 10px 5px; }
.fot-mensu a { padding: 0 5px; }
.botm-shape h5 { font-size: 16px; font-weight: 600; }
.test-image { display: block; padding: 20px 0 0; text-align: center; vertical-align: middle; width: 100%; }
.test-texts { overflow: hidden; padding: 10px; text-align: center; vertical-align: middle; width: 100%; }
.test-texts > p { color: rgb(81, 81, 81); line-height: 20px; margin: 10px 0 0; }
.testim-mon { border-radius: 20px; padding: 0 0 15px; }
h5.po-titt { font-size: 20px; font-weight: 500; line-height: normal; }
.inp-files > input { float: left; width: 100%; }
.cha-radio { display: block; overflow: visible; text-align: left; }
.cha-radio { display: table; overflow: visible; padding: 15px 0 0; text-align: left; }
.cha-radio > input { display: table-cell; vertical-align: middle; }
.cha-radio > p { display: table-cell; padding: 0 0 0 10px; vertical-align: middle; }
.fashipn-image { display: inline-block; margin: 10px 0 0; }
.top-banner-sec { padding: 140px 0 30px; }
.botm-shape h5 { font-size: 16px; font-weight: 400; line-height: normal; }
.fot-mensu { padding: 10px 5px; }
.fot-mensu a { font-size: 13px; padding: 0 5px; }
.por-secion { margin: 50px 0; }
h5.po-titt { font-size: 16px; }
.contact- h5.po-titt::before { bottom: -55px; }
.por-folio { margin: 0; }
}
@media screen and (max-width:767px) {
.portfoliowrap { padding: 20px 0; }
.portfoliowrap h2 { font-size: 24px; }
.portfoliowrap .prot-txt { font-size: 15px; line-height: 24px; margin-bottom: 20px; }
.portfolio-heading h4 { font-size: 18px; padding: 5px 25px 0; }
.scroll { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.portfolio-content li { margin: 0; width: 230px; margin: 0 30px auto; float: none; display: inline-table; }
.portfolio-content li .mobile-listbox { width: 230px;margin: auto; }
.mobile-listbox .app-hoverse { width: 230px; }
.mobile-listbox .app-hoverse { height: 230px; }
.mobile-listbox .app-logo { width: 100%; left: 8px; top: 20px; }
.portfolio-content { padding: 40px 0 30px; }
.browse-link a { width: 100%; display: block; }
.portfolio-desktop li { width: 100%; }
.portfoliobox:hover .point { top: 50px; }
.portfoliostabs { height: 55px; }
#toggle-menu { padding: 18px 0; margin: 0 0 -1px; border: 0px; }
#menu a { padding: 15px; line-height: normal; font-size: 16px; }
#menu ul li { padding: 0; }
#menu input[type="checkbox"]:checked + .sub-menu a { font-size: 14px; opacity: 0.8; }

.mobile-page-listing{ text-align:center;}
.mobile-page-listing.portfolio-content li{ margin: 0 auto 30px;}
.device-logo ul li {
width: auto;
display: inline-block;
vertical-align: middle;
margin: 0;
}
.portfoliowrap.mobile-page h1{ margin-bottom:35px;}

.portfoliowrap.mobile-page h1 span { float:left !important; display:block; margin-top:8px;}

}
@media only screen and (min-width: 1024px) {
#menu .main-menu { display: block; }
#toggle-menu, #menu label.drop-icon { display: none; }
#menu ul span.drop-icon { display: inline-block; }
#menu li { float: left; border-width: 0 1px 0 0; }
#menu a { padding: 5px 0; }
#menu .sub-menu li { float: none; }
#menu .sub-menu { border-width: 0; margin: 0; position: absolute; top: 100%; left: 0; width: 12em; z-index: 3000; }
#menu .sub-menu, #menu input[type="checkbox"]:checked + .sub-menu { display: none; }
#menu .sub-menu li { border-width: 0 0 1px; }
#menu .sub-menu .sub-menu { top: 0; left: 100%; }
#menu .sub-menu .drop-icon { position: absolute; top: 0; right: 0; padding: 1em; }
#menu li:hover > input[type="checkbox"] + .sub-menu { display: block; }
}

/*--------------Framework sprite---------------*/

.sprite_1{ background:url(../png/sprite.png) left top no-repeat; display: inline-block; font-size: 0; line-height: 0;vertical-align: middle; }

.cake{ background-position:-238px -118px; width:55px; height:54px;}
.php{ background-position:-179px -118px; width:55px; height:54px;}
.asp-net{ background-position:-120px -118px; width:55px; height:54px;}
.codeigniter{ background-position:-61px -118px; width:55px; height:54px;}
.zend{ background-position:-2px -118px; width:55px; height:54px;}

.yii{ background-position:-415px -60px; width:55px; height:54px;}
.rubirails{ background-position:-356px -60px; width:55px; height:54px;}
.laravel{ background-position:-297px -60px; width:55px; height:54px;}
.android{ background-position:-238px -60px; width:55px; height:54px;}
.ios{ background-position:-179px -60px; width:55px; height:54px;}
.ipad{ background-position:-120px -60px; width:55px; height:54px;}
.phonegap{ background-position:-61px -60px; width:55px; height:54px;}
.blackberry{ background-position:-2px -60px; width:55px; height:54px;}

.window{ background-position:-415px -2px; width:55px; height:54px;}
.prestashop{ background-position:-356px -2px; width:55px; height:54px;}
.shopify{ background-position:-297px -2px; width:55px; height:54px;}
.magento{ background-position:-238px -2px; width:55px; height:54px;}
.opencart{ background-position:-179px -2px; width:55px; height:54px;}
.wordpress{ background-position:-120px -2px; width:55px; height:54px;}
.joomla{ background-position:-61px -2px; width:55px; height:54px;}
.drupal{ background-position:-2px -2px; width:55px; height:54px;}

.work-framework{ width:40px; position:absolute; top:-5px; right:25px; z-index:1;}



.sprite_1{ background:url (../png/sprite.png) left top no-repeat; display: inline-block; font-size: 0; line-height: 0;vertical-align: middle; }

.cake{ background-position:-238px -118px; width:55px; height:54px;}
.php{ background-position:-179px -118px; width:55px; height:54px;}
.asp-net{ background-position:-120px -118px; width:55px; height:54px;}
.codeigniter{ background-position:-61px -118px; width:55px; height:54px;}
.zend{ background-position:-2px -118px; width:55px; height:54px;}

.yii{ background-position:-415px -60px; width:55px; height:54px;}
.rubirails{ background-position:-356px -60px; width:55px; height:54px;}
.laravel{ background-position:-297px -60px; width:55px; height:54px;}
.android{ background-position:-238px -60px; width:55px; height:54px;}
.ios{ background-position:-179px -60px; width:55px; height:54px;}
.ipad{ background-position:-120px -60px; width:55px; height:54px;}
.phonegap{ background-position:-61px -60px; width:55px; height:54px;}
.blackberry{ background-position:-2px -60px; width:55px; height:54px;}

.window{ background-position:-415px -2px; width:55px; height:54px;}
.prestashop{ background-position:-356px -2px; width:55px; height:54px;}
.shopify{ background-position:-297px -2px; width:55px; height:54px;}
.magento{ background-position:-238px -2px; width:55px; height:54px;}
.opencart{ background-position:-179px -2px; width:55px; height:54px;}
.wordpress{ background-position:-120px -2px; width:55px; height:54px;}
.joomla{ background-position:-61px -2px; width:55px; height:54px;}
.drupal{ background-position:-2px -2px; width:55px; height:54px;}


/* 22 March */


.fashipn-image {
  margin: 10px 0 0;
  text-align: center;
  width: 100%;
}
.fashipn-image img {
  display: inline-block;
}
.client-p-img.img-circle {
  border-radius: 50%;
  display: inline-block;
  height: 135px;
  margin-top: 4px;
  overflow: hidden;
  width: 135px;
}
.mobile-app-detail .top-banner-sec {
  background-size: 100% auto !important;
}
.device-logo li img {
  width: 23px;
}
.por-folio {
  margin: 30px 0 40px;
}
.mobile-page hr {
  display: none;
}

.portfoliowrap h2 {
  color: #565656;
  position:relative;
  font-family: "Oswald",sans-serif !important;
  font-size: 26px;
}
.portfoliowrap h2::before {
  background-color: #0bb8f0;
  bottom: -15px;
  content:'';
  display: inline-block;
  height: 4px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width:60px;
}
.portfoliowrap h1 {
  background-color: #f2f2f2;
  border-left: 3px solid #cccccc;
  border-radius: 5px;
  color: #222222;
  font-family: "Oswald",sans-serif !important;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 35px;
  padding: 10px 15px;
  text-transform: uppercase;
}


.mobile-page-listing .mobile-listbox .app-hoverse {
    height: 68%;
}