@font-face { font-family: 'lineto brown pro bold'; font-weight: 500; src: url(fonts/lineto-brown-pro-bold.eot); src: url(fonts/lineto-brown-pro-bold.eot?#iefix) format('embedded-opentype'), url(fonts/lineto-brown-pro-bold.woff) format('woff'), url(fonts/lineto-brown-pro-bold.ttf) format('truetype'), url(fonts/lineto-brown-pro-bold.svg#bold) format('svg') }
/*@font-face { font-family: 'lineto brown pro thin';   font-weight: 100;
src: 	url(fonts/lineto-brown-pro-thin.eot); 
src:	url(fonts/lineto-brown-pro-thin.eot?#iefix) format('embedded-opentype'), 
		url(fonts/lineto-brown-pro-thin.woff) format('woff'), 
		url(fonts/lineto-brown-pro-thin.ttf) format('truetype'), 
		url(fonts/lineto-brown-pro-thin.svg#thin) format('svg') }*/
@font-face { font-family: 'lineto brown pro light'; font-weight: 200; src: url(fonts/lineto-brown-pro-light.eot); src: url(fonts/lineto-brown-pro-light.eot?#iefix) format('embedded-opentype'), url(fonts/lineto-brown-pro-light.woff) format('woff'), url(fonts/lineto-brown-pro-light.ttf) format('truetype'), url(fonts/lineto-brown-pro-light.svg#light) format('svg') }
@font-face { font-family: 'lineto brown pro regular'; font-style: normal; font-weight: 300; src: url(fonts/lineto-brown-pro-regular.eot); src: url(fonts/lineto-brown-pro-regular.eot?#iefix) format('embedded-opentype'), url(fonts/lineto-brown-pro-regular.woff) format('woff'), url(fonts/lineto-brown-pro-regular.ttf) format('truetype'), url(fonts/lineto-brown-pro-regular.svg#regular) format('svg') }
body { font-family: 'lineto brown pro regular'; font-size: 14px; line-height: 1.8; font-wight: normal }
.mTNormal { margin-top: 30px }
a:hover, a:active, a:focus { text-decoration: none }
.header-holder { position: fixed; top: 0; width: 100%; z-index: 1000; transition: all 0.6s ease; }
.header-holder.sticky { background: #010737; transition: all 0.6s ease; height: 80px }
.logo-light, .logo-dark { transition: all 0.4s ease; position: absolute }
.header-holder .logo-light, .header-holder.sticky .logo-dark { opacity: 0; height: 0; visibility: hidden; transition: all 0.4s ease; }
.header-holder.sticky .logo-light, .header-holder .logo-dark { opacity: 1; height: auto; visibility: visible; transition: all 0.4s ease; }
.slider-holder { padding-top: 100px; min-height: 600px; }
.heading-right { margin-top: 30px; transition: all 0.4s ease; }
.heading-right a { display: block; text-align: right }
.heading-right a:hover { color: #09a6ff }
.heading-right i { margin-right: 5px }
.m0-auto{ margin:0 auto}
.float-none{ float:none!important}
.width150{ width:150px}
.width200{ width:200px}
.width250{ width:250px}
.width300{ width:300px}
.color-white{ color:#fff!important}
.featured-h2 { width: 80%; text-align: center; margin: 90px auto 40px; color: #fff; font-size: 40px; font-family: 'lineto brown pro bold'; }
.menu { float: left }
.menu ul { padding-left: 0; margin-bottom: 6px }
.menu li { float: left; list-style: none; margin-top: 40px; transition: all 0.4s ease; position: relative }
.menu li ul { position: absolute; left: -20px; top: 100%; display: none; background: #0e185d; min-width: 200px; z-index:1001 }
.sticky .menu li ul { background: #0e185d }
.menu li:hover ul { display: block }
.menu li li { float: none; margin: 0 }
.menu li:hover a { color: #337ab7 }
.menu li li:hover { background: #cfd1df; }
.menu li li:hover a { color: #010737 }
.menu li li a { float: none; margin: 0; padding: 12px 20px; position: relative; color: #09a6ff; font-size: 16px; }
.menu li li a i { position: absolute; left: 15px; font-size: 29px; }
.sticky .menu li { margin-top: 20px; transition: all 0.4s ease; }
.sticky .menu li li { margin: 0 }
.sticky .menu-ctrl:before { color: #fff; }
.sticky .menu-ctrl { top: 10px }
.sticky .menu li li:hover { background: #cfd1df; }
.sticky .menu li li:hover a { color: #010737 }
.sticky .heading-right { margin-top: 16px; transition: all 0.4s ease; }
.menu a { display: block; padding: 10px 24px 10px 24px; color: #09a6ff; font-size: 18px; font-family: 'lineto brown pro bold'; }
.sticky .menu a, .sticky a { color: #fff }
.header { background: url(../images/pattern.svg) no-repeat center center; background-size: cover; background-color: #000; }
.main-heading h1 { font-size: 45px; line-height: 1; margin: 120px auto 10px; color: #2bd6eb; font-family: 'lineto brown pro regular'; }
.main-heading p { font-size: 18px; line-height: 1.4; font-family: 'lineto brown pro regular'; margin-bottom: 100px; color: #777; }
.hover-element figure { position: relative; float: left; overflow: hidden; height: auto; cursor: pointer; }
.hover-element figure img { position: relative; display: block; max-width: 100%; }
.hover-element figure figcaption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hover-element figure figcaption { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
figure.effect-bubba { background: #3b4277; }
figure.effect-bubba img { opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-bubba:hover img { opacity: .6; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-bubba figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); }
figure.effect-bubba figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); }
figure.effect-bubba h2 { color: #fff; margin-top: 170px; margin-bottom: 0; margin-left: 60px; font-size: 40px; font-family: 'lineto brown pro regular'; -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; }
figure.effect-bubba p { color: #8a8a8a; margin-top: 0px; font-weight: 200; margin-left: 60px; margin-right: 40px; font-size: 22px; line-height: 1; font-family: 'lineto brown pro light'; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
figure.effect-inner { background: #0b0d17; }
figure.effect-inner img { opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner:hover img { opacity: .4; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner figcaption::before, figure.effect-inner figcaption::after { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); }
figure.effect-inner figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); }
figure.effect-inner p { opacity: 0; color: #fff; position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; padding: 23% 40px 0 40px; line-height: 1.2; text-align: center; font-size: 18px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner:hover p { opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner:hover figcaption::before, figure.effect-inner:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.media-element figure.effect-bubba h2 { margin-left: 200px }
.media-element figure.effect-bubba p { margin-left: 200px }
.design-element figure.effect-bubba h2 { margin-left: 84px; color: #fff }
.design-element figure.effect-bubba p { margin-left: 84px }
.digital-element figure.effect-bubba h2 { margin-left: 146px; }
.digital-element figure.effect-bubba p { margin-left: 146px; color: #97d9ff }
figure.effect-inner-portfolio { background: #0b0d17; }
figure.effect-inner-portfolio img { opacity: 1; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner-portfolio:hover img { opacity: .4; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner-portfolio figcaption::before, figure.effect-inner-portfolio figcaption::after { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; content: ''; opacity: 0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; }
figure.effect-inner-portfolio figcaption::before { border-top: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: scale(0, 1); transform: scale(0, 1); }
figure.effect-inner-portfolio figcaption::after { border-right: 1px solid #fff; border-left: 1px solid #fff; -webkit-transform: scale(1, 0); transform: scale(1, 0); }
figure.effect-inner-portfolio p { opacity: 0; color: #fff; position: absolute; z-index: 2;  right: 0; bottom: 0;margin:0;text-align: center; font-size: 14px; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s;top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%); }
figure.effect-inner-portfolio:hover p { opacity: 1; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; }
figure.effect-inner-portfolio p strong{ font-size:24px; display:block }
figure.effect-inner-portfolio:hover figcaption::before, figure.effect-inner-portfolio:hover figcaption::after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
.space--0, .space--1 { background: url(../images/headerBg.png) center center repeat-x; animation: animatedBackground 40s linear infinite; }
.space--0 { padding-top: 80px }
/*.footer-section { margin-top: 60px }*/
.clients-holder { background: #e6e6e5;/* url(../images/pattern.svg) no-repeat center center; background-size: cover*/ }
.clients-holder h2 { padding: 20px 20px 0 0; margin: 0; color: #5a5a5a; line-height: 1.2; font-family: 'lineto brown pro regular'; font-size: 30px; position: relative }
.clients-holder p { font-size: 14px; font-family: 'lineto brown pro regular'; line-height: 1.2; padding-right: 60px }
.clients-holder h2:after { position: absolute; content: '/'; font-size: 120px; right: -32px; top: -7px; z-index: 2; color: #c7c7c7; font-family: 'lineto brown pro light'; }
.patten-holder { background: #000 url(../images/pattern.svg) no-repeat center center; background-size: cover }
.patten-holder-home { overflow: hidden!important; width: 100% }
.content-holder { /*padding-top:100px;*/ position: relative; /*overflow: auto**/ }
.quote-p { width: 70%; margin: 60px auto; text-align: center; color: #fff; font-size: 23px; line-height: 1.6; }
.quote-p2 { width: 80%; margin: 60px auto 0; text-align: center; color: #fff; font-size: 40px; line-height: 1.6; font-family: 'lineto brown pro bold'; }
.quote-p3 { width: 80%; margin: 100px auto 0; text-align: center; color: #fff; font-size: 40px; line-height: 1.6; font-family: 'lineto brown pro bold'; }
.featureholder { background: #0e185d; }
.featured { padding-top: 80px; background: url(../images/why.jpg) no-repeat left bottom }
.feature .feature--left { margin: 60px auto 100px; height: 100px }
.feature--left .icon:before { color: #0c69bc; font-size: 100px }
.feature--right h6 { font-size: 30px; margin: 0px; color: #fff; font-family: 'lineto brown pro light'; }
.feature--right p { font-size: 14px; color: #0b78cf; margin-top: 40px; line-height: 1.2; font-family: 'lineto brown pro regular'; }
.feature--right { margin-bottom: 100px; padding-right: 60px }
.footer-in { padding: 30px 0 }
h6.getintouch { text-align: center; font-size: 3em; color: #777; margin: 55px 0 0 0 }
.getintouch2 { text-align: center; font-size: 14px; color: #fff; margin: 0; line-height: 1.2 }
.getintouch2 a { background-color: #2bd6eb; color: #fff; font-size: 30px; width: 30%; padding: 5px; letter-spacing: -1px; display: block; margin: 15px auto 70px; border-radius: 3px; }
h6.getintouch a { background-color: #2bd6eb; color: #fff; font-size: 30px; padding: 10px; letter-spacing: -1px; display: block; margin: 10px auto 2px; border-radius: 3px; }
h6.getintouch a:hover, .getintouch2 a:hover { background-color: rgba(80,80,80,.9); text-decoration: none }
h6.getintouch span { font-size: 14px; display: block; }
h6.getintouch span b { color: #2bd6eb; }
.footer-in h6.getintouch { width: 500px; margin: 55px auto 0 auto }
.our-customers { padding: 10px 0 }
.footer-in .social-box-line { text-align: center !important; padding: 0px 0 0px 281px; margin: 10px 0 50px 0 }
.footer-in .social-box-bg { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #e9e9e9; font-size: 1.4em !important; color: #fff; background-color: #fff; background-position: -268px -69px; margin: 0px 7px 0 0; float: left; height: 20px; text-align: center; line-height: 17px; }
.footer-in p { font-size: 1.3em; color: #7c7c7c; text-align: center; margin: 55px 0 0 0; line-height: 20px; }
.footer-in p span { display: block; margin: 50px 0 20px 0; font-size: 0.8em; }
.footer-in p a { color: #000; text-decoration: underline; text-transform: uppercase }
.footer-in p a:hover { color: #ee224d!important; }
.copyright-holder { color: #6c6c72; margin-top: 30px; padding-top: 10px; border-top: 1px solid #c7c7cb }
.copyright { padding: 20px 0 10px 0 }
.menu-ctrl { display: block; float: right; position: absolute; top: 30px; right: 30px; cursor: pointer }
.menu-ctrl:before { font-size: 40px; color: #002e5b }
.inner-first { margin-top: 70px }
.inner-main-ctrl { padding: 80px 60px 60px 80px }
.inner-main-h1 { font-size: 55px; line-height: 1; font-family: 'lineto brown pro bold'; position: relative; color: #f5f5f5 }
.inner-main-h2 { font-size: 44px; line-height: 1; font-family: 'lineto brown pro bold'; position: relative; color: #2bd6eb; margin: 0 }
.inner-main-h1:before { background: #f5f5f5; position: absolute; width: 1000px; height: 10px; content: ''; right: 110%; top: 26px; /*animation: colorchange 5s infinite; */ }
.inner-main-p { font-size: 18px; line-height: 1.2; margin-top: 20px; padding-bottom: 20px; font-family: 'lineto brown pro regular'; color: #777; }
.inner-sub-p { font-size: 18px; line-height: 1.2; ; vertical-align: middle; display: table-cell; color: #808080 }
.inner-right-main-bg { background-repeat: no-repeat; background-position: center center; background-size: cover; }
.topleft-inner { min-height: 350px; border-right: 1px solid #fff }
.topright-inner { min-height: 350px; }
.bottomright-inner { min-height: 250px; border-top: 1px solid #fff }
.bottomleft-inner { min-height: 250px; padding: 30px; background: #fff; display: table; opacity: 0.8; }
.right-controll { background: #000; width: 182px; height: 600px; position: absolute; right: 0; top: 0; overflow: hidden; }
.right-controll h3 { color: #ccc; padding: 120px 60px 100px; font-size: 22px; line-height: 1.4; font-style: italic; position: relative }
.right-controll p { text-align: right; color: #fff; margin-right: 30px }
.right-controll h3:before { content: '\201C'; font-family: arial; font-size: 300px; right: 84%; position: absolute; top: -70px; color: #3e4373; }
.video-section-right { padding-left: 30px; padding-top: 20px; padding-bottom: 20px }/*
.video-section-left { padding-right: 30px; padding-top: 20px; padding-bottom: 20px }*/
.video-section-right h3 { margin: 40px 0; font-size: 26px; font-family: 'lineto brown pro bold'; color: #002e5b }
.video-section-right p { margin: 0 0 20px 0 }
.video-section-right p+h3 { margin-top: 30px }
.sub-works-breadcrumb { margin: 0; padding: 0 }
.sub-works-breadcrumb li { list-style: none; float: left; color: #8b8c93 }
.sub-works-breadcrumb li+li:before { content: '/'; color: #8b8c93; padding: 0 10px }
.sub-works-breadcrumb li:last-child { color: #5a4231 }
.sub-works-tag { margin: 0; padding: 0 }
.sub-works-tag li { list-style: none; margin-right: 12px; float: left; }
.sub-works-tag a { padding: 4px 12px; background: #e1d5d1; float: left; display: block; color: #5a4231; font-size: 12px; margin-right: 12px; border-radius: 2px }
.sub-works-tag a:hover { background: #696969; color: #fff; }
.process-holder p { padding: 20px 15px; line-height: 1.6; font-size: 14px; color: #393939; min-height: 180px }
.process-holder h2 { padding: 30px; background: #fff; text-align: center; color: #002e5b; margin: 0; font-size: 24px; font-family: 'lineto brown pro bold'; }
.process-holder:hover h2 { background: #cfd1df; }
.process-holder .img-hldr { position: relative; display: table }
.img-hldr span { display: none; color: #fff; position: absolute; z-index: 2; left: 0; right: 0; top: 0; bottom: 0; padding: 23% 40px 0 40px; line-height: 1.2; text-align: center; font-size: 18px }
.process-holder:hover span { display: block }
.process-holder:hover .img-hldr:before { position: absolute; content: ''; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; background: rgba( 67,75,129,.8) }
.process-holder { margin-bottom: 60px }
.sub-ul { padding-left: 40px }
.sub-ul i:before { position: absolute; left: -24px; top: 4px; }
.sub-ul-h2 { color: #656565; margin-top: 60px; padding: 20px 20px 10px; font-size: 40px; line-height: 1.2; margin-bottom: 0; font-family: 'lineto brown pro bold'; }
.sub-ul-p { padding: 0 40px 20px 20px; line-height: 1.2; font-size: 16px; color: #717171 }
.sub-ul-h3 { margin-bottom: 20px; margin-top: 40px; color: #002e5b }
.sub-ul li { list-style: none; position: relative; }
.sub-ul li i:before { color: #2bd6eb; font-size: 10px; line-height: 1.8; }
.sub-ul li a { color: #141a5b; cursor: default; font-size: 18px; line-height: 1.6 }
.mail-a { font-size: 14px; line-height: 1.2; }
.telephone-a { font-size: 22px; line-height: 1.2; }
.footer-section, footer.second-section { background: #f1ebe9 url(../images/footer-pattern.png) repeat-x top left; }
.third-section { background: #f1ebe9 }
footer { padding-top: 70px }
footer h3 { color: #18093a; }
.footer-li { padding: 0 }
.footer-li li { list-style: none; position: relative }
.footer-li a { color: #18093a;/* padding-left: 20px*/ }
.footer-li a:hover { color: #23527c; }
.footer-li li:hover i { animation: spin .3s linear; }
.footer-li i { margin-right: 5px; color: #ff0084; position: absolute; top: 5px; display: none }
.locations { color: #6c6c72 }
.locations strong { color: #18093a; text-transform: uppercase }
.locations div { margin-bottom: 10px }
.locations-h3 { margin: 0 }
.locations-contact { padding-left: 60px; padding-top: 20px; }
.social .icon { font-size: 20px; margin-right: 5px; margin-top: 5px; }
.social .icon-twitter { color: #00aced; }
.social .icon-facebook { color: #3b5998; }
.social .icon-google-plus { color: #dd4b39; }
.social .icon-behance { color: #0079ff; }
.social .icon-linkedin { color: #007bb6; }
.social .icon-instagram{ color:#fb3958}
.form-group-sub { margin-bottom: 12px; }
registerform-sub .btn { background: #ff0048; border: 0; border-radius: 0; color: #fff; font-weight: 700; text-transform: uppercase; padding: 0 12px 2px; float: right; margin-right: 6px; }
.registerform-sub .form-control { border: none; border: 1px solid #999; box-shadow: none; padding: 10px 12px; border-radius: 0 }
.btn { background: #2bd6eb; color: #fff; }
.content-holder .btn { float: right }
.btn:hover { background: rgb(80,80,80); color: #fff; }
textarea.form-control { resize: vertical; max-height: 200px; min-height: 100px; }
.main-close { position: relative }
.main-close .close { position: absolute; right: 14px; top: 14px; line-height: 40px; width: 40px; height: 40px; text-indent: -200px; overflow: hidden; font-size: 46px; color: #ccc; z-index: 800 }
.close { opacity: 1; transition: opacity .7s .5s }
.close.color-white:after, .close.color-white:before { background-color: #fff }
.close:after, .close:before { content: ""; position: absolute; width: 100%; height: 2px; background-color: #ff0048; top: 50%; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; left: 50%; margin-left: -20px; transition: -webkit-transform .35s ease; transition: transform .35s ease }
.close:after, .close:hover:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg) }
.close:before, .close:hover:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg) }
.main-getintouch { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: #fff; z-index: 999; transform: scale(0, 0); transition: all .4s ease; display: none; overflow: auto }
.overflow-h { overflow: hidden;padding-right: 17px; }
.main-getintouch.show { transform: scale(1, 1); transition: all .4s ease; display: block }
.error { color: #900; font-size: 12px; line-height: 1 }
.explore { padding: 20px 20px 50px 40px; position: relative; display: block; float: left }
.explore2 { margin: 20px 20px 50px 40px; padding: 6px 24px; position: relative; display: block; float: left; border: 1px solid #616161; color: #d64c26  }
.explore2:hover { background: #616161; color: #fff }
.explore3 { padding-right: 20px; position: relative; display: block; float: left  }
.explore:after,.explore3:after { content: "\ea3c"; font-family: 'icomoon'; position: absolute; transition: all .4s ease; right: 20px; opacity: 0; top: 20px }
.explore3:after {  top: 0px;right: 20px; }
.explore:hover:after,.explore3:hover:after { right: 0; opacity: 1 }
.bgctrl-2 { background: #f1ebe9 }
.slider-holder-outer:hover li { transform: scale(1.1, 1.1); transition: transform 1s ease; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(255, 255, 255)!important;
}
.contact-footer { color: #9b9b9b; font-size: 12px }
.main-breadcrumb { border-bottom: 1px solid #e6e9ee; background: #f6f7fb; }
.main-breadcrumb ul { padding: 0; margin: 0 }
.main-breadcrumb li { list-style: none; float: left; position: relative }
.main-breadcrumb li+li { padding-left: 5px }
.main-breadcrumb li+li:before { content: '/'; position: absolute; top: 10px; left: 0; font-size: 16px; color: #656d78; }
.main-breadcrumb a { padding: 10px; font-size: 16px; color: #656d78; display: block }
.main-breadcrumb a:hover { color: #8b94a0 }
.main-breadcrumb li:last-child a:hover { color: #656d78; cursor: default }
.main-breadcrumb li:first-child a { padding-left: 0px; }
.detail-img { margin-top: 126px ;height: 450px; position: relative }
.detail-img .bx-viewport a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.detail-img .bx-wrapper .bx-pager { bottom: 10px }
.detail-img .bx-wrapper .bx-pager.bx-default-pager a { background: transparent; width: 16px; height: 16px; border: 1px solid #ff0048; border-radius: 50% }
.detail-img .bx-wrapper .bx-pager.bx-default-pager a.active { background: #ccc; border: 1px solid #ff0048; }
.horizontal-line { width: 100%; margin-top: 40px; float: left; border-top: 1px solid #e3e3e3; }
.product-holder { padding-top: 40px }
.pdt-description h3 { font-weight: 700; font-size: 22px; line-height: 1.2 }
.panel-title { padding: 0 17%; *zoom:1
}
.panel-title:before, .panel-title:after { content: ''; display: table }
.panel-title:after { clear: both }
.centered { text-align: center }
.centered h1, .centered h2, .centered h3, .centered h4, .centered h5, .centered p, .centered img, .centered a { text-align: center }
.centered img { display: block; margin: 0 auto }
.ltgray { background: #f7f7f7; }
.ltgray img { display: block; margin: 0 auto }
.parbase { padding: 7rem 0 }
.panel-title h2 { text-transform: uppercase; font-size: 32px; font-family: 'lineto brown pro light'; color: #002e5b  }
.panel-title p { font-weight: normal; font-size: 14px }
.cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 100px; right: 10px; z-index: 10; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(43, 214, 235, 0.8) url(../images/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0; -webkit-transition: opacity .3s 0s, visibility 0s .3s; -moz-transition: opacity .3s 0s, visibility 0s .3s; transition: opacity .3s 0s, visibility 0s .3s; }
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { -webkit-transition: opacity .3s 0s, visibility 0s 0s; -moz-transition: opacity .3s 0s, visibility 0s 0s; transition: opacity .3s 0s, visibility 0s 0s; }
.fp-enabled .cd-top{ display:none}
.cd-top.cd-is-visible { 
visibility: visible; opacity: 1; }
.cd-top.cd-fade-out { opacity: .5; }
.no-touch .cd-top:hover { background-color: #e86256; opacity: 1; }
.slider-text-holder { width:50%}
.slider-text-holder.left { float:left}
.slider-text-holder.right {float:right}
.slider-text-holder.black h3,.slider-text-holder.black p{ color:#000}
.slider-text-holder.white h3,.slider-text-holder.white p{ color:#fff}
.slider-text-holder.green h3,.slider-text-holder.green p{ color:#6b7b35}
.slider-text-holder.red h3,.slider-text-holder.red p{ }
.slider-text-holder h3{ font-size:40px;  font-family: 'lineto brown pro light';line-height:1.2; margin-top:80px}
.slider-text-holder p{ font-size:20px;  font-family: 'lineto brown pro light'; line-height:1.2}
.bxslider a{ color:#fff}
.slider-btn{ background:#ff0048; padding:6px 15px; float:left; margin-top:10px; display:block}
.slider-btn.gray{background:#444;}
.slider-btn:hover{background:#db003e;}
.slider-btn.gray:hover{background:#333;}
.portfolio-holder{ margin-top:215px}
.portfolio-heading h1{ font-size:40px; color:#010737; margin-top:30px; margin-bottom:10px;}
.portfolio-heading h4{ font-size:14px; margin-top:0px;color:#010737; margin-bottom:10px;}
.portfolio-heading { padding-left:20px; border-bottom:1px solid #010737; margin-bottom:25px}
.portfolio-detail{        width: 100%;    z-index: 700;   background:rgba(255,255,255,.3);opacity:0; display:none;    overflow: auto; }

.portfolio-detail.show{ display:block}
.portfolio-content{ background:#fff; padding:15px 30px 30px}
.small-one{ margin-top:12px}
.main-a.work-title {font-size: 1.5em; color: #010737; margin-bottom:20px}
.overflow-box{color: #010737; line-height:1.4}
.main-a .dark-color { color: #010737;}
.main-a .light-color { color: #ff0048;}
.main-a{ font-size: 1.25em; margin-bottom: 9px;   margin-top: 0;}
.portfolio-single-image{ display:none}
.latest-works{ position:fixed; top:80px; left:0; right:0; background:#fff; z-index:699}
.portfolio-detail .main-close{top:-90px;right:-15px;}
@media only screen and (min-width: 768px) {
.cd-top { right: 20px; bottom: 20px; }

}

@media only screen and (min-width: 1024px) {
.cd-top { height: 60px; width: 60px; right: 30px; bottom: 30px; }
}
 @keyframes animatedBackground {
 0% {
background-position: 0 0;
}
 50% {
background-position:  0 100%;
}
 100% {
background-position:  0 0;
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(90deg);
transform:rotate(90deg);
}
}

@media (max-width:319px) {
	.main-breadcrumb li+li{ padding-left:0}
.main-breadcrumb a{ padding:2px}
.main-breadcrumb li+li:before{ display:none}
}

@media (min-width:320px) {
}

@media (min-width:320px) and (max-width:479px) {
}

@media (max-width:479px) {
figure.effect-bubba img { opacity: .5 }
figure.effect-bubba { background: #222 }
.inner-main-ctrl { padding: 20px }
.office-element figure.effect-bubba h2, .office-element figure.effect-bubba p { margin-left: 30px; }
.media-element figure.effect-bubba h2, .media-element figure.effect-bubba p { margin-left: 30px; }
.design-element figure.effect-bubba h2, .design-element figure.effect-bubba p { margin-left: 30px; }
.digital-element figure.effect-bubba h2, .digital-element figure.effect-bubba p { margin-left: 30px; }
figure.effect-bubba h2 { margin-top: 60px; font-size: 30px; color: #fff!important }
figure.effect-bubba p { color: #fff!important }
.detail-img{ height:150px}
.detail-img .bxslider{ height:150px!important}
.slider-text-holder h3,.slider-text-holder p,.slider-btn{ display:none}
.main-breadcrumb a{ padding:5px}
.main-breadcrumb li+li:before{ top:5px}
.detail-img { margin-top: 106px ;}
figure.effect-inner-portfolio p strong { font-size: 18px; display: block;  line-height: 1.2;}
figure.effect-inner-portfolio p { font-size: 11px;}
}

@media (min-width:480px) {
}

@media (min-width:480px) and (max-width:767px) {
	.detail-img{ height:250px}
.detail-img .bxslider{ height:250px!important}
.slider-text-holder h3{ font-size:medium;  font-family: 'lineto brown pro light';line-height:1.2}
.slider-text-holder p{ font-size:small;  font-family: 'lineto brown pro light'; line-height:1.2}
}



@media (max-width:767px) {
.video-section-right { padding-left: 0; }
.featured { background-image: none }
.feature .feature--left { margin: 20px; height: auto; }
.feature--right { padding-right: 0; margin-bottom: 20px }
.feature { text-align: center }
.featured-h2 { margin: 20px; width: 90%; font-size: 24px }
.getintouch2 a { width: 100% }
.process-holder p { min-height: auto; }
.quote-p2 { font-size: 28px }
.slider-text-holder h3{ margin-top:20px}
.portfolio-detail{     position:absolute;bottom: 0; top:215px;  right: 0;  left: 0; }
.portfolio-detail .main-close{top:-20px;right:-10px;}
}

@media (min-width:768px) {
.main-getintouch .container { padding-top: 200px!important }
.portfolio-detail{  position: fixed;bottom: 0; top: 0;  right: 0;  left: 0;  padding-top: 205px;}
}

@media (max-height:768px) {
.main-heading h1 { margin: 60px auto 10px; }
.slider-holder { min-height: 380px }
.featured-h2 { margin: 40px auto 10px; font-size: 30px }
.feature .feature--left { margin: 20px auto; }
.feature--right { margin-bottom: 20px }
.quote-p3 { margin: 20px auto 0; font-size: 30px }
.getintouch2 a { margin: 15px auto 30px; }
.content-holder { overflow: auto }
.hover-element { overflow: hidden; }
.copyright-holder { margin-top: 10px }
.feature--right { padding-right: 0 }
.feature { text-align: center }
footer { padding-top: 0px }
.portfolio-detail{     position:fixed;bottom: 0; top: 0;  right: 0;  left: 0; width:100%;padding-top:200px;}
}
@media (min-width:768px) and (max-width:991px) {
figure.effect-bubba h2 { margin-top: 120px; font-size: 30px }
figure.effect-bubba p { font-size: 18px }
.office-element figure.effect-bubba h2, .office-element figure.effect-bubba p { margin-left: 60px; }
.media-element figure.effect-bubba h2, .media-element figure.effect-bubba p { margin-left: 140px; }
.design-element figure.effect-bubba h2, .design-element figure.effect-bubba p { margin-left: 60px; }
.digital-element figure.effect-bubba h2, .digital-element figure.effect-bubba p { margin-left: 60px; }
.main-heading h1 { margin: 80px auto 10px; }
.slider-holder { min-height: 400px }
.featured-h2 { margin: 50px auto 10px; font-size: 30px }
.feature .feature--left { margin: 20px auto 40px; }
.feature--right { margin-bottom: 20px }
.quote-p3 { margin: 20px auto 0; font-size: 30px }
.getintouch2 a { margin: 15px auto 30px; }
.content-holder { overflow: auto }
.hover-element { overflow: hidden; }
.hover-element--reveal h2 { font-size: 24px; margin-top: 100px; margin-left: 10px!important }
.hover-element--reveal h3 { font-size: 18px; margin-left: 10px!important }
.copyright-holder { margin-top: 10px }
.feature--right { padding-right: 0 }
.feature { text-align: center }
footer { padding-top: 0px }
.space--0 { padding-top: 0px }
figure.effect-inner p { font-size: 32px }
.inner-main-ctrl { padding: 40px }
.detail-img{ height:300px}
.detail-img .bxslider{ height:300px!important}
.slider-text-holder { width:70%}
.slider-text-holder h3{ margin-top:30px}

}

@media (max-width:991px) {
.main-heading h1 { padding-left: 0; text-align: center; }
.main-heading p { padding-left: 0; text-align: center; }
.footer-in h6 a { width: 100% }
.menu-module { display: none; width: 100%; background: #0e185d; }
.menu-module.active { display: block;position: absolute;
    left: 0;
    z-index: 1000; }
.menu-ctrl { display: block }
.menu li { margin: 0; display: block; float: none }
.menu { float: none; width: 100% }
.menu a { width: 100%; padding: 10px; text-align: center; color: #fff }
.heading-right { display: none }
.sticky .menu li { margin: 0 }
.clients-holder h2:after { display: none }
.menu li ul { width: 100%; left: 0; z-index: 1000 }
.bottomleft-inner { margin-bottom: -1px; width: 100%; min-height: 120px }
.topright-inner { min-height: 250px }
.inner-sub-p { text-align: center }
.sticky .menu-ctrl{ z-index:1001}
.main-breadcrumb{    top: 80px;
    position: fixed;
    z-index: 99;
    width: 100%;}
}

@media (min-width:992px) {
.main-heading h1 { padding-left: 20%; }
.main-heading p { padding-left: 20%; }
.menu-ctrl { display: none }
.contact-footer { margin-top: 100px }
}

@media (min-width:992px) and (max-width:1199px) {
figure.effect-bubba h2 { margin-top: 70px; font-size: 22px }
figure.effect-bubba p { font-size: 14px }
.office-element figure.effect-bubba h2, .office-element figure.effect-bubba p { margin-left: 60px; }
.media-element figure.effect-bubba h2, .media-element figure.effect-bubba p { margin-left: 60px; }
.design-element figure.effect-bubba h2, .design-element figure.effect-bubba p { margin-left: 60px; }
.digital-element figure.effect-bubba h2, .digital-element figure.effect-bubba p { margin-left: 60px; }
.inner-main-ctrl { padding: 40px }
.detail-img{ height:350px}
.detail-img .bxslider{ height:350px!important}
.slider-text-holder { width:60%}
figure.effect-inner-portfolio p strong { font-size: 18px; display: block;  line-height: 1.2;}
figure.effect-inner-portfolio p { font-size: 11px;}

}

@media (min-width:1200px) {
}

@media (min-width:1200px) and (max-width:1599px) {
figure.effect-bubba h2 { margin-top: 110px; font-size: 24px }
figure.effect-bubba p { font-size: 18px }
.office-element figure.effect-bubba h2, .office-element figure.effect-bubba p { margin-left: 60px; }
.media-element figure.effect-bubba h2, .media-element figure.effect-bubba p { margin-left: 60px; }
.design-element figure.effect-bubba h2, .design-element figure.effect-bubba p { margin-left: 60px; }
.digital-element figure.effect-bubba h2, .digital-element figure.effect-bubba p { margin-left: 60px; }
figure.effect-inner-portfolio br{ display:none}
}

@media (min-width:1600px) {
/*.container { width: 1570px }*/
}

@media (min-height:769px) and (min-width:768px) {
footer.second-section.active { position: absolute; bottom: 0; width: 100% }
}