/*
Theme Name: Okpai
Theme URI: https://webizzoo.com/okpai
Author: the Webizzoo team
Author URI: https://webizzoo.com/
Description: Okpai is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Okpai will make your WordPress look beautiful everywhere.
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: okpai

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
@font-face {
  font-family: Meriva;
  src: url(fonts/7f9808ac9539f93f02c45a7ece0330b5.eot);
  src: url(fonts/7f9808ac9539f93f02c45a7ece0330b5.eot?#iefix) format("embedded-opentype"),url(fonts/ee81fac97b72c6e8df222a2d34b70336.woff2) format("woff2"),url(fonts/8423a707264ae5106da66cf6c410986b.woff) format("woff"),url(fonts/6c48d5b8d76c0b03e62c0f7624eef34d.ttf) format("truetype"),url(fonts/00eb96e663e1d57e5be5774a75bf8972.svg#merivaregular) format("svg");
  font-weight: 400;
  font-style: normal;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family:Meriva;src:url(fonts/27ae733a765e2196c243eae5e8f8aa5b.eot);src:url(fonts/27ae733a765e2196c243eae5e8f8aa5b.eot?#iefix) format("embedded-opentype"),url(fonts/c943e335ba3837933c4ec2c0cb42e531.woff2) format("woff2"),url(fonts/503c1c124f18e62b4e0f2bc835b117e8.woff) format("woff"),url(fonts/b7e48db00b361248394c98acaa89fabe.ttf) format("truetype"),url(fonts/a30a04c648a067bf53d535e81f621214.svg#merivaitalic) format("svg");font-weight:400;font-style:italic;text-rendering:optimizeLegibility;
}

@font-face {
  font-family:Meriva;src:url(fonts/d7defea82c5fd25f9b51477e44de5020.eot);src:url(fonts/d7defea82c5fd25f9b51477e44de5020.eot?#iefix) format("embedded-opentype"),url(fonts/a33cf5ecfecda9eda5ac9ead97785aff.woff2) format("woff2"),url(fonts/00195ab0272329cadb5b3b8acc4d3a09.woff) format("woff"),url(fonts/7063db1da247839a82f2b84b3a7fb0e1.ttf) format("truetype"),url(fonts/39285f2b05d66c50734720666bb438b8.svg#merivamedium) format("svg");font-weight:700;font-style:normal;text-rendering:optimizeLegibility;
}

@font-face {
  font-family:Meriva;src:url(fonts/7e812a143cad2d3387177edce247677a.eot);src:url(fonts/7e812a143cad2d3387177edce247677a.eot?#iefix) format("embedded-opentype"),url(fonts/c8ff6a0b6e9278d16df33ccb9287f747.woff2) format("woff2"),url(fonts/1ce63227dbc690ef97d3394fe1da2b11.woff) format("woff"),url(fonts/f5610efe191e0c727cdddd1e37cb9030.ttf) format("truetype"),url(fonts/9851373e3cc627ce6b7e671d520afde4.svg#merivamedium_italic) format("svg");font-weight:700;font-style:italic;text-rendering:optimizeLegibility;
}

@font-face {
    font-family: 'univers';
    src: url('fonts/univers-webfont.woff2') format('woff2'),
         url('fonts/univers-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


html{ }
body{ background:#111111; padding:0px; margin:0px; font-family: Meriva; font-size: 16px; font-weight:400; line-height: 25px; color: #222; letter-spacing:0; font-weight:400; }
html,body{padding:0;margin:0; }
*{ padding:0px; margin:0px;}

ul{ padding:0px; margin:0px; list-style-type:none; text-decoration:none;}

a{ padding:0px; margin:0px; text-decoration:none; border:0px; color:#222; outline:none;}

a img{ border:0px; padding:0px; margin:0px;}

.clear{ clear:both; font-size:0px; line-height:0px;}

p{font-size:16px; line-height:24px; font-weight:400; color:#222; letter-spacing:0; }
h1{ font-size:60px; line-height:normal; }
h2{ font-size:50px; line-height:normal; }
h3{ font-size:30px; line-height:normal; }
h4{ font-size:20px; line-height:normal; }
h5{ font-size:18px; line-height:normal; }
h6{ font-size:15px; line-height:normal; }

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(images/logo.svg) center no-repeat #111111;
	background-size:200px auto;
}

.preloader-wrap {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; 
  bottom: 0;
 background: url(images/logo.svg) center no-repeat #111111;
	background-size:200px auto;
  z-index : 2; 
}

.percentage {
  z-index: 100;
  text-align:center;
  color: #f16a38;
  line-height: 30px;
  font-size : 1px;
}

.loader,
.percentage{
  height: 10px;
  font-weight: 300;
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0;
  margin : auto; 
}
.loader:after,
.percentage:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.trackbar {
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 30px;
  overflow: hidden;
  position: relative;
  opacity: 0.99;
}

.loadbar {
  width: 0%;
  height: 100%;
  background: #f16a38; 
  position: absolute;
  top: 0;
  left: 0;
  animation: flicker 5s infinite;
  overflow: hidden;
}


@keyframes animation {
  10% {
    opacity: 0.9;
  }
  30% {
    opacity: 0.86;
  }
  60% {
    opacity: 0.8;
  }
  80% {
    opacity: 0.75;
  }
}





/*end common css*/
.wrapper{ margin:0px; padding:0px; height:auto;  transition:all 0.5s ease-in-out; position:relative; transition: all ease-in 0.5s;}
.wrapper.is-active-menu{transform: translate(100%, 0%) matrix(1, 0, 0, 1, 0, 0);}
.page-slide{ transform:translateX(-540px)}
.header{width: 100%;height: 100px;margin: 0px;z-index: 1; position: fixed;}

/*nav{ width:100%; margin:0px; pa0px; height:auto;  }
.nav-icon{ width:48px; height:26px; float:left;margin: 40px 0 0 40px;}
.nav-icon a{width: 50px;display: inline-block; height: 30px;}
.nav-icon a:before{ content:""; width:48px; height:5px; background:#f16a38;  position:absolute;}
.nav-icon a:after{ content:""; width:48px; height:5px; background:#f16a38;  position:absolute; margin-top:20px; left:40px;}*/

.menu_button{ position:absolute; width:150px; z-index:333; left:30px; top:20px; z-index:2222; font-size:22px; color:#a7a7a7; transition:all .8s ease-in-out; }
.hamburger { padding: 15px 15px; display: inline-block; font-size:22px; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; }
.hamburger:hover { opacity: 0.7; }
.menu_text{line-height:32px; font-size:24px; transform:translateX(20px); color:#fff; display:inline-block; opacity:0; transition:all .3s ease-in-out;}
.hamburger:hover .menu_text{opacity:1; transform:translateX(0);}
.hamburger-box { width: 40px; height: 32px; float:left; margin-right:15px; display: inline-block; position: relative; transform-origin: center center; transition: all 0.3s;}

.hamburger-inner { display: block; top: 50%; margin-top: -2px; }
.hamburger-inner span{width:100%; height:2px; background-color:#f16a38; position:absolute; left:0; transition: all 1s cubic-bezier(1,.02,0,.96);}
.hamburger-inner span.first{top:0;}
.hamburger-inner span.second{top:50%; margin-top: -1px;}
.hamburger-inner span.third{bottom:0;}


.hamburger--spin.is-active .hamburger-box{transform:rotate(90deg); color:#fff;} 
.hamburger--spin.is-active .hamburger-inner span{background:#fff;}
.hamburger--spin.is-active span.first{transform: rotate(60deg) translateX(50%); top:-4px;}
.hamburger--spin.is-active span.second{transform: rotate(-60deg) translateX(-50%); top:-4px;}
.hamburger--spin.is-active span.second{bottom:-1px;}
/*.hamburger--spin.is-active .hamburger-inner::before{transform: rotate(60deg) translateX(50%); bottom: 34px;}
.hamburger--spin.is-active .hamburger-inner::after{transform: rotate(-60deg) translateX(-50%); top: 34px;}*/

/*.hamburger--spin.is-active .hamburger-inner {  -webkit-transform: rotate(225deg); transform: rotate(225deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before { width: 60px; top: -20px; left: -10px; transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out; opacity: 1; transform: rotate(45deg); }
.hamburger--spin.is-active .hamburger-inner::after { bottom: 20px; left:-20px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); }
*/
#navigation{ height:100vh; position:fixed; width:100%; left:-100%; top:0; bottom:0; z-index:999; background:rgba(0,0,0,1); overflow: auto; transition:all ease-in 0.5s;}
#navigation:after{content:""; display:block; position:absolute; left:0; top:0; height:100%; width:100%; background-color:#f16a38; transition:all ease-in 0.5s;}
#navigation .nav{padding:0 50px; height:100%; left:-100%; right:100%; text-align:left; position:absolute; top:0; background:#000; transition:all ease-in 0.5s; transition-delay:0.5s; z-index:2; }
#navigation.slideIn{left:0;}
#navigation.slideIn .nav{left:0; right:0; transition-delay:0.8s;}
#navigation .nav ul.menu{ list-style:none; display:block; padding:100px 0; }
#navigation .nav ul.menu li{ font-size: 40px; line-height: 55px; font-family: Meriva; font-weight: 400; text-transform:uppercase; position:relative; opacity:0; transform:translateY(30px); transition:all ease-in 0.3s; }
#navigation .nav ul.menu li.home {margin-bottom:15px; }
#navigation .nav ul.menu li.sub{ padding-left:15px; }
#navigation .nav ul.menu li a{display:inline-block; padding-bottom:5px; position:relative; color:#bfbfbf; overflow:hidden; transition: all .5s ease-in-out; }
#navigation .nav ul.menu li a.active{ color:#fff; }
#navigation .nav ul.menu li a:after{ content:""; width:100%; height:1px; background:#bfbfbf; position: absolute; left: -100%; bottom:0; display: block; transition: all .5s ease-in-out; }
#navigation .nav ul.menu li a:hover:after, #navigation .nav ul.menu li a.active:after{ left:0; }
#navigation .nav ul.menu li a.active:after{ background:#fff; }
#navigation .nav ul.menu li a.onhover{ position: absolute; top: 0; left: 228px; font-size: 18px; line-height:26px; color:#9b9b9b; visibility: hidden; transition: all .5s ease-in-out; }
#navigation .nav ul.menu li:hover a.onhover{ visibility: visible; }
#navigation .nav ul.menu li:hover a.onhover:hover{ color:#fff; }
#navigation .nav ul.menu li:hover a.onhover:hover:after, #navigation .nav ul.menu li:hover a.onhover.active:after{ display:none; }

#navigation .nav ul.menu li:nth-child(2){transition-delay:1.5s;}
#navigation .nav ul.menu li:nth-child(3){transition-delay:1.8s;}
#navigation .nav ul.menu li:nth-child(4){transition-delay:2.1s;}
#navigation .nav ul.menu li:nth-child(5){transition-delay:2.4s;}
#navigation .nav ul.menu li:nth-child(6){transition-delay:2.7s;}
#navigation .nav ul.menu li:nth-child(7){transition-delay:3s;}
#navigation .nav ul.menu li:nth-child(8){transition-delay:3.3s;}
#navigation .nav ul.menu li:nth-child(9){transition-delay:3.6s;}
#navigation.slideIn .nav ul.menu li{opacity:1; transform:translateY(0);}

#navigation .nav ul.social { list-style: none; display:block; margin-top:20px; }
#navigation .nav ul.social li { float:left; padding:0 20px 0 0; position: relative; }
#navigation .nav ul.social li a { text-decoration: none; display: inline-block; vertical-align: middle;
  -webkit-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  transition: 0.3s all ease; }
#navigation .nav ul.social li a i{ font-size:50px; line-height: 50px; color: #fff; }
#navigation .nav ul.social li a:hover { opacity:.7; }



.click-btn{ position:fixed; z-index:3; right:40px;top: 40px; color:#fff; font-size:18px; transition: all ease-in 0.5s;} 
.header.pull-left .click-btn{right:620px;}
.click-btn .four_lines{float:right; margin-left:10px; margin-top:8px; width:40px; height:18px; position:relative;}

.menu_text{transform:translateX(-20px); color:#fff;}
.click-btn:hover .menu_text{opacity:1; transform:translateX(0);}

.four_lines span{width:18px; position:absolute; height:3px; background:#f16a38; transition: all ease-in 0.3s; transition-delay:0.5s;}
.four_lines span.half-left1{left:0; top:0;}
.four_lines span.half-left2{left:0; bottom:0;}
.four_lines span.half-right1{right:0; top:0;}
.four_lines span.half-right2{right:0; bottom:0;}


.header.pull-left .four_lines span.half-left1{transform:rotate(45deg); left:3px; top:2px;}
.header.pull-left .four_lines span.half-left2{ transform:rotate(-45deg); left:3px; bottom:2px;}
.header.pull-left .four_lines span.half-right1{transform:rotate(-45deg); right:3px; top:2px;}
.header.pull-left .four_lines span.half-right2{transform:rotate(45deg); right:3px; bottom:2px;}

.sidenav.sidebar {right:0px; }
.sidenav{ width:600px; height:100vh; right:-620px; position:fixed; z-index:2; overflow:auto; transition: all 0.5s;}
.side-nav-pic{ width:100%; margin:0px; padding:0px; position:relative;  display:block; overflow:hidden; background-color:#000;}
.side-nav-pic:nth-child(2n){background-color:#0e0e0e;}
.side-nav-pic img{ width:90%; margin:5%; }
.transparent-box-side{width:100%; position:absolute; display:block; background:rgba(0,0,0,.5); top:0; bottom:0; left:0; right:0; opacity:0; transition:all 0.3s ease-in-out;}
.side-nav-pic:hover .transparent-box-side{ opacity:1;}
.project-text-side{width:100%; margin:0px; padding:0px; height:100%; position:relative;}
.title-side{ position:absolute; bottom:20px; left:20px; transition: all 0.5s;}
.title-side h4{ font-size:18px; line-height:22px; color:#FFF;font-family: Meriva; font-weight:400; transform:translateY(80px); transition: all 0.3s;}
.title-side p{ font-size:18px; line-height:22px; color:#ae512e; font-family: Meriva; font-weight:400; transform:translateY(80px); transition: all 0.3s; transition-delay:0.3s; }

.side-nav-pic:hover .title-side h4, .side-nav-pic:hover .title-side p{transform:translateY(0);}

#scrollbar::-webkit-scrollbar{
width:10px;
background-color:#cccccc;
} 

#scrollbar::-webkit-scrollbar-thumb{
background-color:#222;
border-radius:0;
}
#scrollbar#ex3::-webkit-scrollbar-thumb:hover{
background-color:#222;
border:1px solid #333333;
}
#scrollbar#ex3::-webkit-scrollbar-thumb:active{
background-color:#777;
border:1px solid #333333;
} 
#scrollbar::-webkit-scrollbar-track{
border:1px gray solid;
border-radius:0;
-webkit-box-shadow:0 0 6px gray inset;
} 

/*.header.sticky{ background:rgba(0,0,0,.5)}*/

/*banner*/
.banner{width:100%; margin:0px; padding:0px; height:auto; border-bottom:1px solid#f16a38; position:relative; overflow:hidden; }
.banner .overlay_logo{position:absolute; left:0; top:0; width:100%; height:100%; transition:transform 0.5s  ease-in-out, opacity 0.5s  ease-in-out; background:url(images/logo.svg) no-repeat center center; opacity:0.7; background-size: 200px auto;}
/*digital-product-sec*/
.banner .overlay_logo.sticky{transform:translateY(-100px); opacity:0;}
.digital-product-sec{ margin:0px; padding:70px 60px; height:auto; background:#171717; float:none;}
.digital-pro{width:50%; margin:0px; padding:0px; float:left;}
.digital-pro p{ font-size:22px; color:#FFF; line-height:34px;font-family: Meriva;}
.meet-our-people{width:50%; float:right; margin: 30px 0px; padding:0px;}
.our-btn{ width:380px; height:40px; border:1px solid#95989a; padding:0px; font-size:15px; line-height:40px; text-transform:uppercase; text-align:center;display:block; color:#f16a38; font-weight:300; transition:all 0.5s ease-in-out; margin:0 auto;}
.our-btn:hover{ background:#f16a38; color:#FFF; border-color:#f16a38;}
/*us-design-section*/
.ux-design-section{width:100%; margin:0px; padding:0px; height:auto;}
.ux-design-section ul{ width:100%; margin:0px; padding:0px; height:auto;}
.ux-design-section ul li{width:50%; float:left; margin:0px; padding:0px; height:auto;}
.ux-box{width: calc(100% - 140px); position:relative; display:block; margin:0px; padding:70px; height:auto;  background:linear-gradient(#2a2a2a, #1e1e1e);}
.ux-box:hover .transparent-box{ opacity:1;}
.ux-box img{width:100%; margin:0px; height:auto; margin:0px; display:block;}
.transparent-box{width:100%; position:absolute; display:block; background:rgba(0,0,0,.5); top:0; bottom:0; left:0; right:0; opacity:0; transition:all 0.3s ease-in-out;}
.project-text{width:100%; margin:0px; padding:0px; height:100%; position:relative;}
.title{ position:absolute; bottom:20px; left:20px;}
.title h4{ font-size:20px; line-height:24px; color:#FFF;font-family: Meriva; font-weight:400;}
.title p{ font-size:20px; line-height:24px; color:#ae512e; font-family: Meriva; font-weight:400; }
/*digital-develop-sec*/
.digital-develop-sec{ width:100%; background:#171717; margin:0px; padding:108px 0px; height:auto; text-align:center; }
.develop{width:100%; margin:0px; padding:0px; height:auto;}
.develop h4{ font-size:24px; line-height:28px; color:#FFF; margin:10px 0px 40px 0px; padding:0px;font-family: Meriva; font-weight:400;}
/*footer*/
.footer{width:100%; margin:0px; padding:0px; height:auto; background:#171717; border-bottom:1px solid#8b4b33; border-top: 1px solid#4e4f50;}
.footer-inn{ padding:35px 40px; margin:0px; height:auto;}
.footer-box{width:25%; margin:0px; padding:0px; float:left;}
.footer-box h3{ font-size:20px; line-height:30px; color:#9b9fa1; text-transform:uppercase; margin:15px 0 20px 0px; font-family: Meriva; font-weight:400;}
.footer-box ul{margin:0px; padding:0px; height:auto; }
.footer-box ul li{ font-size:12px; line-height:20px; color:#ff733a; font-family: Meriva; font-weight:400; margin:3px 0px; }
.footer-box ul li a{color:#ff733a; transition:all 0.2s ease-in-out;}
.footer-box ul li a:hover{color:#9b9fa1;}
/*PORTFOLIO PAGE*/
.inner-banner{ background:#111111; padding: 280px 45px 0 45px; height:100%;}
.inner-banner h3{color:#f16a38; font-size:24px; line-height:30px; margin:25px 0px;font-family: Meriva; font-weight:400; }
.inner-banner p{color:#95989a; font-size:20px; line-height:24px; font-family: Meriva; font-weight:400;}
.inner-banner h4{ color:#FFF; font-size:20px; line-height:24px; margin:50px 0px; font-family: Meriva; font-weight:400;}
.portfolio-main{ background:#111111; padding:0px 45px; height:100%;}
.portfolio-main p{ color:#95989a; font-size:20px; line-height:24px; margin:15px 0px; font-family: Meriva; font-weight:400;}
.portfolio-main h4{ color:#FFF; font-size:20px; line-height:24px; margin-bottom:60px; font-family: Meriva; font-weight:400;}
.portfolio-wrap{ width:100%; margin:0px; padding:0px; height:auto;}
.portfolio-wrap img{ width:100%; display:block;}
.last-next{ text-align:center; width:100%; padding:60px 0px 145px 0px;}
.last-next a{    width:608px;height: 40px;border: 1px solid#95989a;padding: 0px; font-size: 15px;line-height: 40px;text-transform: uppercase;text-align: center;
color: #f16a38;font-weight: 300;transition: all 0.5s ease-in-out; display:inline-block;}
.last-next a:hover{ background:#f16a38; border-color:#f16a38; color:#FFF;}
.last{ float:left;}
.next{ float:right;}

/*case page*/
.section-case{ width:100%; margin:0px; padding:0px 0 0 0px; height:auto;}
.item-view-see{position: relative; float:left; display:block;width:33.33%; height: 100%; overflow:hidden;}
.item-view-see:after{content:""; width:100%; height:100%; position:absolute; left:0; top:0; z-index:999; background:#000; transition: 0.75s all cubic-bezier(.19,1,.22,1);}
.item-view-see.anim:after{left:100%;}
.item-work-bg{ width:100%; margin:0px; padding:0px; position:relative; background-color:#000;}
.item-work-bg img{ width:100%; display:block; transition: 0.75s all cubic-bezier(.19,1,.22,1);}
.work-detail{ position:absolute; left:25px; bottom:40px; top:auto; right:auto;}
.work-detail h4{ font-size:36px; line-height:40px; color:#FFF; text-transform:uppercase; font-family: Meriva; font-weight:700;
margin:20px 0px;}
.work-detail span.sub-head{ font-size:18px; line-height:22px; display:block; text-transform:capitalize; color:#f16a38;font-family: Meriva; font-weight:400; }
.work-detail p{ font-size:14px; line-height:20px; color:#FFF; font-family: Meriva; font-weight:400; margin-bottom:20px;}

.description{overflow:hidden;}
.description p{transform: translateY(65px); overflow: hidden; transition: 0.75s all cubic-bezier(.19,1,.22,1);}
.work-detail h4{transform: translateY(40px); transition: 0.75s all cubic-bezier(.19,1,.22,1); margin:10px 0;}
.work-detail span.sub-head{transform: translateY(-24px); transition: 0.75s all cubic-bezier(.19,1,.22,1); margin:10px 0;}
.item-view-see:hover .description p, .item-view-see:hover .work-detail h4, .item-view-see:hover .work-detail span.sub-head{transform: translateY(0);}
.item-view-see:hover .item-work-bg img{opacity:0.2;}
.view_m{opacity:0; transition:all 0.5s;}
.view_m.inview{opacity:1;}
.ux-design-section ul li:nth-child(2n){transition-delay:0.3s;}
@media only screen and (max-width:700px){
/*index page*/
.header {height: 60px;}
.menu_button { width: 40px;left: 20px;top: 10px;}
.hamburger-box{width:30px; height:24px;margin-right:10px; margin-top:5px;}
.hamburger{ padding:0px; width:100px;}
.menu_text {font-size: 14px; opacity: 1;  transform: translateX(0);}
.click-btn {right: 20px;top: 20px;}
#navigation .nav ul.menu li { font-size: 25px; line-height: 40px; }
	
.sidenav { width: 100%; }
.side-nav-pic .transparent-box-side{opacity:1}
.side-nav-pic .title-side h4, .side-nav-pic .title-side p {transform: translateY(0);}
.page-slide { transform: translateX(-80%); }
.header{z-index:3;}
.header.pull-left .click-btn { right: 20px; }
.side-nav-pic { height:150px; }
.side-nav-pic img { height: 100%; }
.title-side h4 { font-size: 15px; }
.title-side p { font-size: 13px; font-weight: bold; }

.banner {}
.banner img {}
.banner .overlay_logo{background-size:100px auto;}
.digital-product-sec { padding:20px;}
.digital-pro {width:100%;}
.digital-pro p {font-size: 12px;line-height: 22px;}
.meet-our-people { width:100%; margin:10px 0;}
.our-btn { width:100%;}
.ux-design-section ul li { width:100%; float:none;}
.ux-box {width: calc(100% - 60px); padding: 30px;}
.ux-box .transparent-box{opacity:1;}
.digital-develop-sec { padding:0px;}
.develop { width:auto; padding: 30px 20px;}
.develop h4{font-size:18px; line-height:24px; margin-bottom:15px;}
.footer-inn{padding:15px;}
.footer-inn:after{content:""; display:block; clear:both;}
.footer-box { width:100%; text-align:center;}
.footer-box img{width:80px;}
.footer-box h3{font-size:14px; margin-bottom:0; margin-top:5px;}
.inner-banner{padding:100px 15px 15px;}
.inner-banner img{width:80px;}
.inner-banner h3, .inner-banner h4{font-size:18px; line-height:24px; margin:10px 0;}
.inner-banner p{font-size:14px; line-height:22px;}
.portfolio-main{padding:0 15px;}
.portfolio-main p{margin:20px 0; font-size:14px; line-height:22px;}
.portfolio-main h4{font-size:18px; line-height:24px; margin-bottom:20px;}
.last-next{padding:10px 0;}
.last-next a{width:100%; float:none !important; margin:10px 0;}
.section-case{padding-top:0;}
.section-case .item-view-see{float:none; width:auto;}
.item-view-see .description p, .item-view-see .work-detail h4, .item-view-see .work-detail span.sub-head {
    transform: translateY(0);
}
.work-detail h4{font-size:24px; line-height:30px; margin:5px 0;}
.work-detail p{margin-bottom:10px;}
.work-detail span.sub-head{font-size:14px;}
}