@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700');



body{ font-family: 'Lato', sans-serif; padding:0; margin:0; overflow-x:hidden;}
.wrapper{  width: 100%; max-width:1170px; padding:0 15px; margin:0 auto; box-sizing: border-box; -moz- box-sizing: border-box; -webkit- box-sizing: border-box; -o- box-sizing: border-box;}

:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fullwidth-row{ width:100%; margin:0; padding:0;}
.clr{ clear:both;}
.clr-20{ height:20px; clear:both;}
.clr-30{ height:30px; clear:both;}
.clr-40{ height:40px; clear:both;}
.clr-60{ height:60px; clear:both;}

.fullwidth-div{ width:100%!important;}

/* top section */

.top-color-bar{ background:url(../images/top-color-bar.jpg) repeat-x; height:5px;}
.logo{ float:left;}
.sml-top-nav{ float:right; margin-top:2%;}
.sml-top-nav .sml-nav{ margin:0; padding:0;}
.sml-top-nav .sml-nav li{ list-style:none; margin:10px 0 0 25px; padding:0; float:left;}
.sml-top-nav .sml-nav li a{text-decoration:none; margin:0; padding:0; color:#000; font-size:16px;}
.space01{ padding-top:20px; padding-bottom:20px;}
.bord-bottom{ border-bottom:#cacaca solid 1px;}



/* Navigation */
.menu-bg{ background-color:transparent;}
nav {
  display: block;
  background: #fff;
}

.menu { display: block; margin:0; padding:0; }

.menu li {
  display: inline-block;
  position: relative;
  z-index: 100; text-align: center;
}

.menu li:first-child { margin-left: 0; }

.menu li a {
  font-weight: normal;
  font-size:18px;
  text-decoration: none;
  padding: 20px 19px;
  display: block;
  color: #005bb6;
  transition: all 0.2s ease-in-out 0s;
}


@-moz-document url-prefix() { 
  .menu li a {  
  padding: 20px 8px;
 
}
}




/*.menu li a:hover,
.menu li:hover>a {
  color: #fff;
  background: #454545;
}*/

.menu ul {
  visibility: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 330px;
  position: absolute;
  left: 0px;
  background: #fff;
  z-index: 99;
  transform: translate(0, 20px);
  transition: all 0.2s ease-out;
}

.menu ul:after {
  bottom: 100%;
  left: 18%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(40, 40, 40, 0);
  border-bottom-color: #282828;
  border-width: 6px;
  margin-left: -6px;
}

.menu ul li {
  display: block;
  float: none;
  background: none;
  margin: 0;
  padding: 0;
  border-bottom: solid #bababa 1px; text-align: left;
}

.menu ul li a {
  font-size: 16px;
  font-weight: normal;
  display: block;
  color: #fff;
  background: #282828;
}

.menu ul li a span {
  font-size: 13px;
  color:#a4a4a4;
 }

.menu ul li a:hover,
.menu ul li:hover>a {
  background: #005bb6;
  color: #fff;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu ul ul {
  left: 169px;
  top: 0px;
  visibility: hidden;
  opacity: 0;
  transform: translate(20px, 20px);
  transition: all 0.2s ease-out;
}

.menu ul ul:after {
  left: -6px;
  top: 10%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-right-color: #fff;
  border-width: 6px;
  margin-top: -6px;
}

.menu li>ul ul:hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.responsive-menu {
  display: none;
  width: 100%;
  padding: 15px 15px;
  background: none;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size:18px;
  box-sizing: border-box; -moz- box-sizing: border-box; -webkit- box-sizing: border-box; -o- box-sizing: border-box;
}

.responsive-menu:hover {
  background: #454545;
  color: #fff;
  text-decoration: none;
}

.responsive-menu:active {
  background: #454545;
  color: #fff;
  text-decoration: none;
}

.responsive-menu:visited {
  background: #454545;
  color: #fff;
  text-decoration: none;
}

a.homer { background:none; }

.web-icon{ background:url(../images/web-design-icon.png) no-repeat; width:50px; height:38px; display: inline-block; margin: 0 37%;}
.nav-icon02{ background:url(../images/nav-icon02.png) no-repeat; width:50px; height:38px; display: inline-block; margin: 0 37%;}
.nav-icon03{ background:url(../images/nav-icon03.png) no-repeat; width:50px; height:45px; display: inline-block; margin: 0 37%;}
.nav-icon04{ background:url(../images/nav-icon04.png) no-repeat; width:50px; height:38px; display: inline-block; margin: 0 37%;}
.nav-icon05{ background:url(../images/graphic-icon.png) no-repeat; width:50px; height:38px; display: inline-block; margin: 0 37%;}


.fa-sort-down:before, .fa-sort-desc:before {
    content: "\f0dd";
    margin-left: 12px;
    font-size: 19px;
}
.resp-menu{ display:none!important;}

 @media (min-width: 768px) and (max-width: 979px) {

.mainWrap { width: 768px; }

.menu ul { top: 100px; }

.menu li a { font-size: 15px; padding: 20px 15px; }

a.homer { background:none; }


}

 @media (max-width: 768px) {
   .menu { display: none; }

.responsive-menu { display: block; background:transparent; text-decoration: none;}
.web-icon, .nav-icon02,.nav-icon03,.nav-icon04,.nav-icon05{ display:none;}

nav {
  margin: 0;
  background: none;
}

.menu li {
  display: block;
  margin: 0;
}

.menu li a {
  background: #fff;
  color: #797979;
}

.menu li a:hover,
.menu li:hover>a {
  background: #454545;
  color: #fff;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}

.menu li>ul ul:hover { transform: initial; }
   }

 @media (max-width: 767px) {

.mainWrap {
  width: auto;
  padding: 50px 20px;
}
.web-icon, .nav-icon02,.nav-icon03,.nav-icon04{ display:none;}

.menu { display: none; }

.responsive-menu { display: block; background:transparent;}

nav {
  margin: 0;
  background: none;
}

.menu li {
  display: block;
  margin: 0;
}

.menu li a {
  background: #fff;
  color: #797979;
}

.menu li a:hover,
.menu li:hover>a {
  background: #454545;
  color: #fff;
}

.menu ul {
  visibility: hidden;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transform: initial;
}

.menu li:hover>ul {
  visibility: visible;
  opacity: 1;
  position: relative;
  transform: initial;
}

.menu ul ul {
  left: 0;
  transform: initial;
}

.menu li>ul ul:hover { transform: initial; }
}




/*slider text*/

.slide-txt{ text-align:center;}
.slider-inner{ width:100%!important;}


/*home page*/

.featured-clients{ width:80%; margin:0 auto;}
.div-container{ width:80%; margin:0 auto;}
.client-list{ list-style:none; width:25%; float:left; display:block; height:100px; cursor:pointer;}
.div-container2 { width: 98%; margin: 0 auto; }
.client01{ background:url(../images/feat-logo01.png) no-repeat center center;}
.client01:hover{background:url(../images/feat-logo-hover.png) no-repeat center center;}
.client02{ background:url(../images/feat-logo02.png) no-repeat center center;}
.client03{ background:url(../images/feat-logo03.png) no-repeat center center;}
.client04{ background:url(../images/feat-logo04.png) no-repeat center center;}
.text-center{ text-align:center; color:#000; line-height:30px; font-size:20px; font-weight:lighter;}
.text-center2{ text-align:center; color:#fff; line-height:30px; font-size:20px; font-weight:lighter;}
.divder{ background:#ccc; height:1px; width:100%;} 
.cent-align{ text-align:center;}
.btn-more{ background:#a6ce39; border-radius:30px; padding:18px 35px; text-decoration:none; font-size:20px; font-weight: lighter; color:#FFF; display: inline-block;}
.btn-more:hover{ background:#1fb2e7; transition:all 0.2s ease-in;}
.btn-more:hover{ text-decoration:none; color:#FFF; outline:none;}
.blue-txt{ color:#1fb2e7; font-size:55px; font-weight:bold;}
.sub-txt{ font-size:20px; color:#000; font-weight:lighter;}
.black-txt{ color:#3b3b3b; font-size:55px; font-weight:bold;}
.container-box-rgt{ width:41%; float:right;}
.container-box-lft{ width:49%; float:left;}
.usp-icons-container { float:left; width:25%; margin-top:10%;}
.usp-icons-container .usp-icons01 {}
.usp-txt{ float:left;    width: 70%;    overflow: hidden;}
.usp-txt h3{ font-size:25px; color:#000; font-weight:bold; clear:both; margin-bottom:20px; text-align:left;}
.usp-txt p{ font-size:18px; color:#000; line-height:30px; font-weight:lighter; text-align:left;}
.grey-strip{ background:#4b4b4b; padding:50px 0;}
.disc-text{ font-size:35px; font-weight:bold; color:#FFF; float:left;}
.disc-btn{ font-size:20px; font-weight:bold; color:#4b4b4b; float:right; border-radius:30px; padding:22px 40px; background:#F7BC00; text-decoration:none;}
.disc-btn:hover{ background:#a6ce39; color:#FFF; transition:all 0.2s ease-in;}
.btn-arrow{ margin-left:10px;}
.disc-btn:hover{ text-decoration:none;}
.facts-record{ width:100%;}
.facts-record-box li{ width:25%; float:left; text-align:center; list-style:none;}
.facts-record-box p{ font-size:80px; text-align:center; font-weight:lighter; }
.facts-record-box { font-size:20px;}
.scroll-div{ background:url(../images/service-bg.jpg) no-repeat; background-size:cover; background-attachment:fixed; background-position:center; color:#FFF;}
.white-txt{color:#fff; font-size:55px; font-weight:bold;}

.service-container-box-rgt{ width:45%; float:right;}
.service-container-box-lft{ width:45%; float:left;}
.serv-icon{ float:left; width:25%;}
.serv-text{ float:left; width:70%; font-size:20px;}
.serv-text p{ font-size:22px; margin-bottom:20px;}
.serv-list{ margin:0; padding:0;}
.serv-list li{ margin:0 0 20px 0; padding:0; list-style:none; background:url(../images/arrow.png) no-repeat left 5px; padding-left:45px; font-size:18px;}
.grey-brd-rgt{ border-right:solid 2px #3f4446;}
.process-list{ width:100%; margin: 0; padding: 0;}
.process-list li{ width:14.28%; float:left; list-style:none; padding:20px; font-size:21px; font-weight:lighter; text-align:center; box-sizing: border-box; -moz- box-sizing: border-box; -webkit-box-sizing: border-box; -o- box-sizing: border-box;}

 

.process-list li span{ background:#c2f046; width:10%; height:2px; display:block; margin:0 auto 10px auto; margin-top:20px;}
.color-green01{ background-color:#a6ce39;}
.color-green02{background-color:#98bf2e;}

.portfolio-box{ width:49%; float:left;  position:relative; border:#fff solid 1px; /* cursor:pointer; */ overflow:hidden; }


.portfolio-box img{ width:100%; -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;}
.portfolio-box .transparent-div{ position:absolute; top:0; left:0; background-color:rgba(0,0,0,0.3); width:100%; height:99%; display:block; z-index:999;}
.portfolio-box .text-over-img{ position:absolute; left:0; z-index:9999; padding:15px; font-size:18px; color:#fff; text-align:left; bottom:0; width:80%;}
.portfolio-box .text-over-img img{ width:auto;}
.portfolio-box:hover img{-webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
   }
  


 .portfolio-box-100{ width:100%; float:left;  position:relative; border:#fff solid 1px;  cursor:pointer; overflow:hidden; }


.portfolio-box-100 img{ width:100%; -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;}
.portfolio-box-100 .transparent-div{ position:absolute; top:0; left:0; background-color:rgba(0,0,0,0.3); width:100%; height:99.5%; display:block; z-index:999;}
.portfolio-box-100 .text-over-img{ position:absolute; left:0; z-index:9999; padding:15px; font-size:18px; color:#fff; text-align:left; bottom:0; width:80%;}
.portfolio-box-100 .text-over-img img{ width:auto;}
.portfolio-box-100:hover img{-webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;}

 
.newsletter-container{ background:#005bab; padding:40px; text-align:center; color:#FFF; font-size:20px;}
.newsletter-input-wrapper{ width:50%; position:relative; margin:0 auto; }
.txt-wrap{ width:80%; font-weight:lighter; margin:0 auto;}
.txt-fild{ width:100%; padding:13px; background:#FFF; color:#333; font-size:16px; font-weight:lighter;}
.submit-btn{ position:absolute; top:0; right:0; font-size:20px; color:#FFF; background:#005bab; border:solid #fff 1px; padding:11px 10px; }
  
 
.footer{ width:100%;}
.footer-lft-sec{ width:30%; float:left; font-size:15px; line-height:25px; font-weight:lighter;}
.footer-logo{ margin-bottom:18px;}
.footer-rgt-sec{ width:60%; float:left; margin-left:10%;}
.footer-rgt-sec .footer-col{ width:50%; float:left; }
.footer-rgt-sec .footer-col-100{ width:100%; float:left; }
.footer-rgt-sec .footer-col-100 ul{ margin:0px; padding:0px;}
.footer-rgt-sec .footer-col-100 ul li{ float:left; padding:0px 43px 0px 0px;  }
.footer-col p{ font-weight:bold; font-size:18px; color:#4d4d4d; margin-bottom:20px;}
.footer-col p a{ font-weight:bold; font-size:18px; color:#4d4d4d; text-decoration:none;}
.footer-col p a:hover{ color:#ccc; transition:all 0.2s ease-in;}
.footer-col p a:hover{ color:#ccc; transition:all 0.2s ease-in;}
.footer-nav01{ font-size:18px; font-weight:bold; color:#4d4d4d; list-style:none;}
.footer-nav01 li{ margin-bottom:10px;}
.footer-nav01 li a{ text-decoration:none; color:#4d4d4d;}

.footer-col ul{ list-style:none; margin:18px 0px 0px 0px; padding:0;}
.footer-col li{ margin-bottom:10px;}
.footer-col li a{ font-size:15px; text-decoration:none; color:#4d4d4d;}
.footer-col li a:hover{ color:#ccc; transition:all 0.2s ease-in;}

.social-icons{ margin:70px 0 20px 0; padding:0;}
.social-icons a{ margin-right:10px;}
.copy-right{}


/*innerpage css start*/

.header-inner{width: 100%; height: auto; max-height: 320px; padding: 70px 0px; }
.header-inner p{ display: block; text-align: center; padding: 10 20px; font-family: 'Lato', sans-serif; font-size: 60px; font-weight: 300; color: #fff; }
.webdesign{background: url(../images/web-design-header.jpg) top center; background-size: cover; }
.e-commerce-solutions{background: url(../images/e-commerce-solutions-header.jpg) top center; background-size: cover; }
.mobile-app{background: url(../images/mobile-app-header.jpg) top center; background-size: cover; }
.digital-marketing{background: url(../images/digital-marketing-header-new.jpg) top center; background-size: cover; }
.ui-ux-header{background: url(../images/ui-ux-header-img.png) top center; background-size: cover; }
.about-us-header{background: url(../images/about-us-banner.jpg) top center; background-size: cover; }
.contact-us-header{background: url(../images/contact-us-banner.jpg) top center; background-size: cover; }
.e-commerce-solutions-inner{background: url(../images/e-commerce-solutions-inner-header.jpg) top center; background-size: cover; }
.mobile-app-inner{background: url(../images/mobile-apps-inner-header.jpg) top center; background-size: cover; }
.digital-marketing-inner{background: url(../images/digital-marketing-inner-header.jpg) top center; background-size: cover; }
.client{background: url(../images/client-banner.jpg) top center; background-size: cover; }
.portfolio{background: url(../images/portfolio-banner.jpg) top center; background-size: cover; }
.brdcrums{ width: 100%; float: left; font-family: 'Lato', sans-serif; font-size: 15px; color: #000000; }
.brdcrums a{ color: #000000; text-decoration: none; }
.brdcrums a:hover{ color: #005bab; text-decoration: none; }
.brdcrums span{  color: #005bab; }
.inner-heading-1{width: 100%; float: left; color: #000; font-size: 30px; font-weight: 300; }
.div-container-inner{ width:100%; margin:0 auto;}
.text-left {text-align: left; color: #000; line-height: 28px; font-size: 18px; font-weight: 300; margin-bottom: 20px;}

.inner-heading-2{width:100%; float:left!important; color:#000!important; font-size:30px!important; font-weight:300!important; }

.inner-banner-01 {background: url(../images/inner-banner-01-new.jpg) top center; background-size: cover; }
.inner-banner-02 {background: url(../images/inner-banner-02.jpg) top center; background-size: cover; }
.inner-banner-03 {background: url(../images/inner-banner-03.jpg) top center; background-size: cover; }
.inner-banner-04 {background: url(../images/mobile-app-banner.jpg) top center; background-size: cover; }
.inner-banner-05 {background: url(../images/website-design-banner.jpg) top center; background-size: cover; }
.inner-banner-06 {background: url(../images/ecommerce-banner-new.jpg) top center; background-size: cover; }
.inner-banner-07 {background: url(../images/mobile-apps-banner-new.jpg) top center; background-size: cover; }
.inner-banner-08 {background: url(../images/mobile-ui-banner.jpg) top center; background-size: cover; }
.inner-banner-09 {background: url(../images/ios-banner.jpg) top center; background-size: cover; }
.inner-banner-10 {background: url(../images/e-commerce-banner.jpg) top center; background-size: cover; }
.inner-banner-11 {background: url(../images/graphic-banner-new.jpg) top center; background-size: cover; }
.inner-banner-12 {background: url(../images/poster-banner.jpg) top center; background-size: cover; }
.inner-banner-13 {background: url(../images/logo-banner.jpg) top center; background-size: cover; }
.inner-banner-14 {background: url(../images/outdoor-banner.jpg) top center; background-size: cover; }
.inner-banner-15 {background: url(../images/videos-banner.jpg) top center; background-size: cover; }
.inner-banner-16 {background: url(../images/careers-banner.jpg) top center; background-size: cover; }

.service-grey-box{width: 100%; background: #f0f0f0; padding: 50px 0px; overflow: auto; margin: 0px 0px 0px 0px; }
.service-grey-text-box{width: 50%; float: left;}
.service-grey-text-box h2{ font-size: 25px; color: #000; font-weight: normal; float: left; }
.service-grey-text-box p{ font-size: 17px; color: #000; font-weight: lighter; float: left; line-height: 30px; }
.service-grey-image-box{width: 50%; float: right;}
.service-grey-image-box img{width: 90%; float: right; margin-top: 28px;}


.service-white-box{width: 100%; background: #fff; padding: 50px 0px; overflow: auto; margin: 0px 0px 0px 0px; }
.service-white-text-box{width: 50%; float: right;}
.service-white-text-box h2{ font-size: 25px; color: #000; font-weight: normal; float: left; }
.service-white-text-box p{ font-size: 17px; color: #000; font-weight: lighter; float: left; line-height: 30px; }
.service-white-image-box{width: 50%; float: left;}
.service-white-image-box img{width: 90%; float: left; margin-top: 28px;}
 

.service-page-box{width: 100%; background: #fff; padding: 50px 0px; overflow: auto; margin: 0px 0px 0px 0px; }
.service-page-text-box{width: 50%; float: left;}
.service-page-text-box h1{ font-size: 30px; color: #000; font-weight: bold; line-height: 40px; float: left; }
.service-page-text-box p{ font-size: 18px; color: #000; font-weight: lighter; float: left; line-height: 28px; }
.service-page-image-box{width: 50%; float: right;}
.service-page-image-box img {width: 90%; float: right; margin-top: 45px;}

.txt{font-size: 18px;
    color: #000;
    font-weight: lighter;
    line-height: 28px;} 



.service-page-box-01{width: 100%; background: #fff; padding: 50px 0px; overflow: auto; margin: 0px 0px 0px 0px; }
.service-page-text-box-01{width: 45%; float: right;}
.service-page-text-box-01 h1{ font-size: 25px; color: #6f6f6f; font-weight: normal; line-height: 40px; float: left; }
.service-page-text-box-01 p{ font-size: 18px; color: #000; font-weight: lighter; float: left; line-height: 28px; }
.service-page-image-box-01{width: 55%; float: left;}
.service-page-image-box-01 img {width: 90%; float: left; margin-top: 15px;}


 


.service-grey-box h1{width: 100%; text-align: center; color: #005bab; font-size: 30px; font-weight: bold;}
.short-description{width: 60%; text-align: center; color: #000; font-size: 18px; font-weight:lighter; line-height: 28px; margin: 0px auto 70px; }

.request-btn{ background:#1fb2e7; border-radius:30px; padding:18px 35px; text-decoration:none; font-size:20px; font-weight: lighter;color:#FFF; display: inline-block; margin-left: 20px;}
.request-btn:hover{ background:#a6ce39; transition:all 0.2s ease-in;}
.request-btn:hover{ text-decoration:none; color:#FFF; outline:none;}
.ser-img{ width:40%; float:left;}
.ser-img img{ width:100%; }
.cont-div{ width:55%; float:left; margin-left:5%;}
.list02{ margin:10px 0 0 0; padding:0;}
.list02 li{ list-style:disc; color: #fff; line-height: 25px; font-weight: lighter; font-size: 20px; margin-left:8%; margin-bottom: 20px; }	

.list03{ margin:10px 0 0 0; padding:0; list-style: none;}
.list03 li{ background: url(../images/arrow-inner.png) 2px 10px no-repeat; color: #000; line-height: 28px; margin-bottom:18px; font-size: 18px; margin-left:0%; padding-left: 20px; }
.add{padding: 0 15px;}
.add li{border-bottom: dashed 1px #c5c5c5;
    padding-bottom: 15px; font-weight: normal;}	

.ser-img2{ width:43%; float:left;}
.ser-img2 img{ width:100%; }
.cont-div2{ width:55%; float:left; margin-left:2%;}


.cntr-img{width: 100%; height: auto; float: left; position: relative; overflow: hidden; margin: 80px 0px 0px 0px; }
.cntr-img .text-over {position: absolute; left: 0; z-index: 9999; padding: 15px; font-size: 40px; color: #fff; text-align: left; bottom: 0; width: 100%; font-weight: bold;}
.benefits-text-box{width: 97%; margin: 0px auto; font-size: 18px; line-height: 30px; color: #000;}


.benefits-points{width: 97%; margin: 30px auto 0px;}
.benefits-points ul{margin: 0px; padding: 0px; float: left; list-style: none;}
.benefits-points ul li{ width: 90%; float: left; margin-bottom: 15px; font-size: 18px; line-height: 30px; font-weight: 300; 
background: url(../images/arrow-inner.png) 5px 10px no-repeat; padding-left: 30px;}
 
 
.text-white{ color:#FFF; font-size:18px; line-height:28px; font-weight:lighter;}
 
.blue-area{width: 100%; float: left; background: #005aaa; margin: 0px 0px 0px 0px; padding: 50px 0px 60px 0px; color: #fff;  }

.whiter-txt-inner { color: #fff; font-size: 55px; font-weight: bold;}
.sub-txt-inner{ font-size:20px; color:#fff; font-weight:lighter; line-height: 30px; }
.text-center-inner{ text-align:center; color:#fff; line-height:30px; font-size:20px; font-weight:lighter;}


.whiter-txt-inner-2 { color: #fff; font-size: 47px; font-weight: bold;}
.sub-txt-inner-2{ font-size:20px; color:#fff; font-weight:lighter;}
.text-center-inner-2{ text-align:left; color:#fff; line-height:30px; font-size:20px; font-weight:lighter;}


.usp-txt-inner{ float:left;    width: 70%;    overflow: hidden;}
.usp-txt-inner h3{ font-size:25px; color:#fff; font-weight:bold; clear:both; margin-bottom:20px; text-align:left;}
.usp-txt-inner p{ font-size:18px; color:#fff; line-height:30px; font-weight:lighter; text-align:left;}
.usp-txt-inner ul{ list-style: none; padding: 0px; margin: 0px;}
.usp-txt-inner ul li{ font-size:18px; color:#fff; line-height:30px; font-weight:lighter; text-align:left; margin-bottom: 20px;}

.testimonial{width: 100%; text-align: center; }
.testimonial p{width: 85%; margin: 30px auto; text-align: center; font-family: 'Roboto Slab', serif; font-size: 30px; line-height: 40px; color: #000;}
.testimonial .name { width: 100%; text-align: center; font-size: 23px; font-weight: bolder; font-family: 'Lato', sans-serif; line-height: 23px; margin: 40px 0px 0px 0px; }
.testimonial .name span { font-size: 18px; font-weight: lighter; }
.testimonial .logo { width: 100%; text-align: center; }
.testimonial .logo img { width: 18%; float: none; }



.service-benefits-area{width: 100%; height: auto; overflow: auto; float: left; background: url(../images/bg-01.png) top center; background-size: cover; padding: 120px 0px;}
.service-page-area { width: 100%; float: left; }
.service-page-heading{ width: 100%; text-align: center; font-size: 40px; font-weight: bold; color: #fff; }

.service-page-area-img{ width: 100%; text-align: center; }
.service-page-area-img img{ width: 40%; }
.service-tab {width: 27%; float: left; margin: 0% 2% 0% 0%; border-right: #96cfb2 1px solid; padding: 0px 19px 0px 19px;}
.service-tab h3{ font-size: 20px; color: #fff; }
.service-tab p{ width: 90%; font-size: 18px; line-height: 28px; font-weight: lighter; color: #fff; }

.process{width: 100%; float: left; text-align: center; padding: 30px 0px 50px 0px;}
.process p{width: 50%; margin: 0px auto; text-align: center; font-size: 18px; line-height: 28px; font-weight: lighter; color: #000000;}
.process img{width: 90%; margin: 80px 0px 0px 0px;}
.process-heading{ font-size: 30px; font-weight: bold; color: #000; text-align: center; }


.work{width: 100%; float: left; text-align: center; padding: 30px 0px 50px 0px;}
.work p{width: 50%; margin: 0px auto; text-align: center; font-size: 18px; line-height: 28px; font-weight: lighter; color: #000000;}
.work-heading{ font-size: 30px; font-weight: bold; color: #000; text-align: center; }

.about-area{width: 100%; float: left;}
.about-area h1{width: 100%; float: left; text-align: center;}
.about-area .short{ width: 80%; margin: 0px auto; font-weight: lighter; text-align: center; font-size: 20px;}
.about-area p{ width: 100%; font-size: 18px; line-height: 28px; font-weight: lighter; color: #000; }
.about-area .big-text{ text-align: center; width: 50%; margin: 0px auto; line-height: 40px; font-size: 30px; font-weight: lighter;}

.clients-area {width: 100%; float: left;}
.clients-area h1{width: 100%; float: left; text-align: center; font-size: 50px; color: #005aaa;}
.short-des{ width: 80%; margin: 0px auto; font-weight: lighter; text-align: center; font-size: 23px; line-height: 30px;}


.error-area {width: 100%; float: left;}
.error-area h1{width: 100%; float: left; text-align: center; font-size: 80px; color:#005aaa;}
.short-des1{ width: 80%; margin: 0px auto; font-weight: lighter; text-align: center; font-size: 23px; line-height: 30px;}


.contact-area {width: 100%; float: left;}
.contact-area h1{width: 80%; text-align: center; font-size: 50px; color: #005aaa; line-height: 60px; margin: 0px auto; }
.short-des2{ width: 80%; margin: 0px auto;  text-align: center; font-size: 25px; line-height: 30px; font-weight: normal;}


.form-area{width: 100%; float: left; background: #005aaa; padding: 60px 0px;}
.form-heading{font-size: 35px; color: #fff; line-height: 5px; font-weight: 700;}

.name-form{width: 42%; float: left; padding: 20px 30px; color: #000; font-size: 20px; font-weight: lighter; border: #005aaa 2px solid; margin: 20px 5px 0px 5px; background: #fff;  transition: all 0.2s;}
.name-form:hover{width: 42%; float: left; padding: 20px 30px; color: #000; font-size: 20px; font-weight: lighter; border: #000 2px solid; margin: 20px 5px 0px 5px; background: #fff;  transition: all 0.2s;}

.text-form{width: 90.5%; float: left; padding: 20px 30px; color: #000; font-size: 20px; font-weight: lighter; border: #005aaa 2px solid; margin: 20px 5px 0px 5px; background: #fff;  transition: all 0.2s;}
.text-form:hover{width: 90.5%; float: left; padding: 20px 30px; color: #000; font-size: 20px; font-weight: lighter; border: #000 2px solid; margin: 20px 5px 0px 5px; background: #fff;  transition: all 0.2s;}


.select-form{width: 47.7%; float: left; padding: 20px 30px; color: #000; font-size: 20px; font-weight: lighter; border: #005aaa 2px solid; margin: 20px 5px 0px 5px; background: #fff;  transition: all 0.2s;}
.select-form:hover{width: 47.7%; float: left; padding: 20px 30px; color: #000; font-size: 20px; font-weight: lighter; border: #000 2px solid; margin: 20px 5px 0px 5px; background: #fff;  transition: all 0.2s;}


.upload-resume{ color: #fff; font-size: 20px; font-weight: 600; }



.btn-submit-form{ border: 0px;  
    background: #ffa300;
    border-radius: 30px;
    padding: 25px 100px;
    text-decoration: none;
    font-size: 25px;
    color: #FFF;
    display:block; 
    font-weight: lighter; 
    margin: 0px auto; 
    transition: all 0.2s; cursor: pointer;}



.btn-submit-form:hover{ border: 0px;    background: #004786;   transition: all 0.2s;}

  

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #000; font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #000; font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif;
}
:-ms-input-placeholder { /* IE 10+ */
   color: #000; font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif;
}
:-moz-placeholder { /* Firefox 18- */
  color: #000; font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif;
}


textarea::-webkit-input-placeholder {
color: #000 !important;  font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif; 
}
 
textarea:-moz-placeholder { /* Firefox 18- */
color: #000 !important;   font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif; 
} 
 
textarea::-moz-placeholder {  /* Firefox 19+ */
color: #000 !important;    font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif; 
}
 
textarea:-ms-input-placeholder {  
color: #000 !important;    font-weight: bold; font-size: 18px; font-family: 'myFont', Lato , Arial, Helvetica, sans-serif; 
}


.address-heading{ width: 100%; text-align: center; font-size: 30px; color: #000; font-weight: bold; margin: 30px 0px 50px 0px; }
.address-inner{width: 31%; float: left; margin: 0px 13px 0px 13px;}
.address-inner img {width: 25%; height: auto; float: left; margin: 70px 35px 0px 0px;}
.address-inner h1{width: 100%; color: #787878; font-size: 20px; text-align: left; text-transform: none; margin: 0px 0px 15px 0px;}
.address-inner p{width: 100%; color: #807f7f; font-size: 18px; text-align: left; text-transform: none;}
.address-inner p a{color: #000;}
.address-inner p a:hover{color: #807f7f; text-decoration: none;}


.green-col-inner {width: 100%; height: auto; padding:100px 0px; text-align: center; background: #1fb2e7;  font-size: 34px; color: #fff; line-height: 30px;}
.green-col-inner a{ color: #fff; transition: all 0.2s ease-in; text-decoration: none;}
.green-col-inner a:hover{ color: #004a43;  transition: all 0.2s ease-in;}
.green-col-inner span{font-size: 20px; color: #004a43; text-transform: uppercase;  }
 


.send-mail-text{width: 22%;  text-align: center; padding: 25px 0px; margin: 16px auto 0px; font-size: 25px; background: #1983aa; color: #fff; transition: all 0.2s ease-in; border-radius: 30px; }
.send-mail-text:hover{background: #1a99c6; color: #fff; transition: all 0.2s ease-out; }




.clients-page{width: 100%; float: left; overflow: hidden;}

.client-logo{ margin:0; padding:0;}
.client-logo ul{ margin:0; padding:0; }
.client-logo ul li{ border:#ccc solid 1px; float:left; width:24%; height:201px; list-style:none; margin: 0px 0px -1px -1px }


.c-logo-01{ background: url(../images/google-logo.png) top center no-repeat;}
.c-logo-01:hover{ background: url(../images/google-logo-grey.png) top center no-repeat; }


.c-logo-02{ background: url(../images/client-logo-02-hover.png) top center no-repeat;}
.c-logo-02:hover{ background: url(../images/client-logo-02.png) top center no-repeat; }



.c-logo-03{ background: url(../images/client-logo-03-hover.png) top center no-repeat;}
.c-logo-03:hover{ background: url(../images/client-logo-03.png) top center no-repeat; }



.c-logo-04{ background: url(../images/client-logo-04-hover.png) top center no-repeat;}
.c-logo-04:hover{ background: url(../images/client-logo-04.png) top center no-repeat; }


.c-logo-05{ background: url(../images/client-logo-05-hover.png) top center no-repeat;}
.c-logo-05:hover{ background: url(../images/client-logo-05.png) top center no-repeat; }


.c-logo-06{ background: url(../images/client-logo-06-hover.png) top center no-repeat;}
.c-logo-06:hover{ background: url(../images/client-logo-06.png) top center no-repeat; }


.c-logo-07{ background: url(../images/client-logo-07-hover.png) top center no-repeat;}
.c-logo-07:hover{ background: url(../images/client-logo-07.png) top center no-repeat; }


.c-logo-08{ background: url(../images/client-logo-08-hover.png) top center no-repeat;}
.c-logo-08:hover{ background: url(../images/client-logo-08.png) top center no-repeat; }


.c-logo-09{ background: url(../images/client-logo-09-hover.png) top center no-repeat;}
.c-logo-09:hover{ background: url(../images/client-logo-09.png) top center no-repeat; }



.c-logo-10{ background: url(../images/client-logo-10-hover.png) top center no-repeat;}
.c-logo-10:hover{ background: url(../images/client-logo-10.png) top center no-repeat; }


.c-logo-11{ background: url(../images/client-logo-11-hover.png) top center no-repeat;}
.c-logo-11:hover{ background: url(../images/client-logo-11.png) top center no-repeat; }



.c-logo-12{ background: url(../images/client-logo-12-hover.png) top center no-repeat;}
.c-logo-12:hover{ background: url(../images/client-logo-12.png) top center no-repeat; }


.c-logo-13{ background: url(../images/client-logo-13-hover.png) top center no-repeat;}
.c-logo-13:hover{ background: url(../images/client-logo-13.png) top center no-repeat; }


.c-logo-14{ background: url(../images/client-logo-14-hover.png) top center no-repeat;}
.c-logo-14:hover{ background: url(../images/client-logo-14.png) top center no-repeat; }


.c-logo-15{ background: url(../images/client-logo-15-hover.png) top center no-repeat;}
.c-logo-15:hover{ background: url(../images/client-logo-15.png) top center no-repeat; }


.c-logo-16{ background: url(../images/client-logo-16-hover.png) top center no-repeat;}
.c-logo-16:hover{ background: url(../images/client-logo-16.png) top center no-repeat; }

.c-logo-17{ background: url(../images/client-logo-17.png) top center no-repeat;}
.c-logo-17:hover{ background: url(../images/client-logo-17-hover.png) top center no-repeat; }

.c-logo-18{ background: url(../images/client-logo-18.png) top center no-repeat;}
.c-logo-18:hover{ background: url(../images/client-logo-18-hover.png) top center no-repeat; }

.c-logo-19{ background: url(../images/client-logo-19.png) top center no-repeat;}
.c-logo-19:hover{ background: url(../images/client-logo-19-hover.png) top center no-repeat; }

.c-logo-20{ background: url(../images/client-logo-20.png) top center no-repeat;}
.c-logo-20:hover{ background: url(../images/client-logo-20-hover.png) top center no-repeat; }

.c-logo-21{ background: url(../images/client-logo-21.png) top center no-repeat;}
.c-logo-21:hover{ background: url(../images/client-logo-21-hover.png) top center no-repeat; }

.c-logo-22{ background: url(../images/client-logo-22.png) top center no-repeat;}
.c-logo-22:hover{ background: url(../images/client-logo-22-hover.png) top center no-repeat; }

.c-logo-23{ background: url(../images/client-logo-23.png) top center no-repeat;}
.c-logo-23:hover{ background: url(../images/client-logo-23-hover.png) top center no-repeat; }

.c-logo-24{ background: url(../images/client-logo-24.png) top center no-repeat;}
.c-logo-24:hover{ background: url(../images/client-logo-24-hover.png) top center no-repeat; }

.c-logo-25{ background: url(../images/client-logo-25.png) top center no-repeat;}
.c-logo-25:hover{ background: url(../images/client-logo-25-hover.png) top center no-repeat; }

.c-logo-26{ background: url(../images/client-logo-26.png) top center no-repeat;}
.c-logo-26:hover{ background: url(../images/client-logo-26-hover.png) top center no-repeat; }

.c-logo-27{ background: url(../images/client-logo-27.png) top center no-repeat;}
.c-logo-27:hover{ background: url(../images/client-logo-27-hover.png) top center no-repeat; }

.c-logo-28{ background: url(../images/client-logo-28.png) top center no-repeat;}
.c-logo-28:hover{ background: url(../images/client-logo-28-hover.png) top center no-repeat; }

.c-logo-29{ background: url(../images/client-logo-29.png) top center no-repeat;}
.c-logo-29:hover{ background: url(../images/client-logo-29-hover.png) top center no-repeat; }

.c-logo-30{ background: url(../images/client-logo-30.png) top center no-repeat;}
.c-logo-30:hover{ background: url(../images/client-logo-30-hover.png) top center no-repeat; }

.c-logo-31{ background: url(../images/client-logo-31.png) top center no-repeat;}
.c-logo-31:hover{ background: url(../images/client-logo-31-hover.png) top center no-repeat; }

.c-logo-32{ background: url(../images/client-logo-32.png) top center no-repeat;}
.c-logo-32:hover{ background: url(../images/client-logo-32-hover.png) top center no-repeat; }

.c-logo-33{ background: url(../images/client-logo-33.png) top center no-repeat;}
.c-logo-33:hover{ background: url(../images/client-logo-33-hover.png) top center no-repeat; }

.c-logo-34{ background: url(../images/client-logo-34.png) top center no-repeat;}
.c-logo-34:hover{ background: url(../images/client-logo-34-hover.png) top center no-repeat; }

.c-logo-35{ background: url(../images/client-logo-35.png) top center no-repeat;}
.c-logo-35:hover{ background: url(../images/client-logo-35-hover.png) top center no-repeat; }

.c-logo-36{ background: url(../images/client-logo-36.png) top center no-repeat;}
.c-logo-36:hover{ background: url(../images/client-logo-36-hover.png) top center no-repeat; }

.c-logo-37{ background: url(../images/client-logo-37.png) top center no-repeat;}
.c-logo-37:hover{ background: url(../images/client-logo-37-hover.png) top center no-repeat; }

.c-logo-38{ background: url(../images/client-logo-38.png) top center no-repeat;}
.c-logo-38:hover{ background: url(../images/client-logo-38-hover.png) top center no-repeat; }

.c-logo-39{ background: url(../images/client-logo-39.png) top center no-repeat;}
.c-logo-39:hover{ background: url(../images/client-logo-39-hover.png) top center no-repeat; }

.c-logo-40{ background: url(../images/client-logo-40.png) top center no-repeat;}
.c-logo-40:hover{ background: url(../images/client-logo-40-hover.png) top center no-repeat; }

.c-logo-41{ background: url(../images/client-logo-41.png) top center no-repeat;}
.c-logo-41:hover{ background: url(../images/client-logo-41-hover.png) top center no-repeat; }

.c-logo-42{ background: url(../images/client-logo-42.png) top center no-repeat;}
.c-logo-42:hover{ background: url(../images/client-logo-42-hover.png) top center no-repeat; }

.c-logo-43{ background: url(../images/client-logo-43.png) top center no-repeat;}
.c-logo-43:hover{ background: url(../images/client-logo-43-hover.png) top center no-repeat; }

.c-logo-44{ background: url(../images/client-logo-44.png) top center no-repeat;}
.c-logo-44:hover{ background: url(../images/client-logo-44-hover.png) top center no-repeat; }
/* Global */

body {
	font-family:'Lato', sans-serif;	
}

.portfolio-section {
    padding-bottom:40px;
}


/* category filter */

.filter-section {
	padding-top:40px;
}


.filter-container {
    text-align:center;
    padding:20px
}


ul.filter > li > a {
    color:#1abc9c;
    font-size:20px;
    line-height:40px
}

ul.filter > li > a:hover,ul.filter > li > a:focus {
    text-decoration:none;
    color:#16a085;
    outline:none
}

ul.filter > li.active a {
    color:#111
}

ul.filter > li span {
    color:#ddd;
    font-size:20px;
    display:inline-block;
    margin:0 5px
}

.filter-section .filter-container .filter > li {
    padding:0;
    margin:0
}

.filter-section h1 {
    text-align:center
}


/* the color of the transparent overlay border */

.portfolio-section.port-col figure .overlay-background {
    background-color:#000;
    background-color:rgba(0,0,0,0.4);
}


/* portfolio images */

.portfolio-section figure {
    float:left;
    width:100%;
    position:relative
}

.portfolio-section figure img {
    width:100%;
    height:auto
}


/* project title under image */

.portfolio-section .article-title {
    text-align:center;
    float:left;
    width:100%;
    font-size:18px;
    line-height:24px;
    padding:10px 0 30px 0;
}

.portfolio-section .article-title a {
    color:#aaa
}


/* transparent overlay */

.portfolio-section figure:hover .overlay {
    opacity:1;
    visibility:visible
}

.portfolio-section figure:hover .overlay-background {
    opacity:.8;
    visibility:visible
}

.portfolio-section figure .overlay-background {
    z-index:1;
    -webkit-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    visibility:hidden;
    width:100%;
    height:100%
}

.portfolio-section figure .overlay-background .inner {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    margin:11px;
    background-color:#c8e9c8;
    background-color:rgba(194,231,194,0.9)
}

.portfolio-section figure .overlay {
    z-index:2;
    transition:all .2s ease-in-out;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    visibility:hidden;
    width:100%;
    height:100%
}

.portfolio-section figure .inner-overlay {
    display:table;
    width:100%;
    height:100%
}

.portfolio-section figure .inner-overlay-content {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    padding:20px 40px
}

.portfolio-section figure .inner-overlay-content.with-icons {
    text-align:center
}


/* icons inside overlay */

.portfolio-section figure .inner-overlay-content.with-icons a {
    width:40px;
    height:40px;
    line-height:42px;
    display:inline-block;
    margin:0 10px;
    text-decoration:none;
    font-size:20px;
	background:rgba(0,0,0,0.9);
    color:#fff;
    border-radius:0
}


/* skew image on hover */ 

.isotopeSelector img {
    -webkit-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -ms-transition:all .4s ease;
    -o-transition:all .4s ease;
    transition:all .4s ease
}

.isotopeSelector:hover img {
    -moz-transform:scale(1.5) rotate(2deg);
    -webkit-transform:scale(1.5) rotate(2deg);
    -o-transform:scale(1.5) rotate(2deg);
    -ms-transform:scale(1.5) rotate(2deg);
    transform:scale(1.5) rotate(2deg);
    -webkit-transition:all .8s ease;
    -moz-transition:all .8s ease;
    -ms-transition:all .8s ease;
    -o-transition:all .8s ease;
    transition:all .8s ease
}

.isotopeSelector figure {
    overflow:hidden
}

.isotopeSelector figure {
    box-shadow:0 0 2px rgba(0,0,0,0.2)
}



.process-text-col{font-size: 18px; color: #000; font-weight: lighter; float: left; line-height: 28px;  }


.mobile-navigation{display: none!important;}
.big-client-text{ width: 100%; margin: 0px auto; color:#1fb2e7; font-size:52px; font-weight:bold; text-align: center; }






button.accordion {
    background-color: #eee;
    color: #444;     
    cursor: pointer; border-bottom: #fff 1px solid; 
    padding: 18px;
    width: 100%;
    border: #fff 1px solid; 
    text-align: left;
    outline: none;
    font-size: 20px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ffa300; 
}

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2212";
}

div.panel {
    
    font-size: 15px;
    line-height: 24px;
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out; color: #000;
    margin: 5px auto 20px;
}

div.panel ul {list-style: none;}

div.panel ul li {
    background: url(../images/right-arrow.png) 2px 5px no-repeat;
    padding-left: 27px;
    margin: 15px 0px;
}

.application-link{display: inline-block; padding: 10px 20px;}
.application-link a{display: inline-block; padding: 10px 20px; color: #fff; background: #004a43; transition: all 0.2s ease-in;}
.application-link a:hover{background-color: #ffa300; transition: all 0.2s ease-in;}



/*
|--------------------------------------------------------------------------
|  Demo Specific Code
|--------------------------------------------------------------------------
|
|
|
*/