/* =================DARK VERSION================= */
/* =================reset css starts here================= */
* { margin:0; padding:0; }
h1, h2, h3, h4, h5, h6, p, ul, li, body, html, form, fieldset { margin:0; padding:0; outline:none; border:0 }
form, fieldset { width:100% }
img { border:0; }
a { text-decoration:none; border:0; outline:0; }
.clear { clear:both; width:auto !important }
ul { list-style:none; }
a:focus, input:focus, textarea:focus, *:focus { outline:0 !important; box-shadow:none !important; }
.nobg { background:transparent !important; }
/* =================reset css ends here================= */
html{overflow-x:hidden !important; overflow-y:auto !important; height:100%;}
body {padding-left:270px; font-size:12px; line-height:20px;  font-weight:400; font-family:'open sans'; color:#666; background:#141518; min-height:100%;  height:100%;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;  }
.container { width:100%; float:left; }
a, input, button { text-decoration:none; color: inherit; outline:none; transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; }
a img { border: 0px none; }
a:hover { outline: none; color:#ce9f51; text-decoration: none;}
a:active { outline: none; text-decoration: none; }
a:focus { outline: none; outline-offset: 0px; text-decoration: none; color:inherit; }
::-webkit-input-placeholder {color:#999; opacity: 1;}
::-moz-placeholder {color:#999; opacity: 1;}
:-moz-placeholder {color:#999; opacity: 1;}
:-ms-input-placeholder {color:#999; opacity: 1;}
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { margin:0px; padding:0px; margin-bottom:15px; line-height:150%; font-weight:700; font-family:'Montserrat'; text-transform:uppercase; color: #ce9f51;}
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 16px;}
h6 {font-size: 13px;}
p { margin:0px; padding:0px; margin-bottom:25px; }
b{font-weight:600;}
strong{font-weight:700;}
p:last-child { margin-bottom:0; }
.large-para{font-size:18px; line-height:27px; color:#fff; color:rgba(255,255,255,0.6);}
.mar-40{margin-bottom:40px !important;}
.mar-30{margin-bottom:30px !important;}
.no-mar{margin:0 !important;}
.btn{border-radius:0;font-weight:700;padding: 12px 24px;font-size: 14px;box-shadow:none; text-transform:uppercase;}
.btn:after{content:"\f209"; font-family:"Ionicons"; margin-left:0; display:inline-block; vertical-align:top; width:0; overflow:hidden; transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in; }
.btn:hover:after{width:30px;}
.btn-default {color: #fff; background-color:#ce9f51;  border:0;  }
.btn-default:hover, .btn-default:focus, .btn-default:active{ color: #fff; background-color: #ce9f51; border-color: #ce9f51;}
.btn.btn-lg{padding:18px 40px !important;}
.btn + .btn{margin-left:10px;}
.os-animation{opacity: 0;}
.os-animation.animated{opacity: 1;}
iframe{border:0; width:100%; height:auto;}
/* ================= Header start ================= */
header{   background:#1c1d22; color:#999; border-right:solid 1px rgba(255,255,255,0.02); position: fixed;  top: 0; left: 0;  width: 271px; height:100%; z-index: 999;  box-shadow:0 0 15px rgba(0,0,0,0.2);}
header a:hover {  color:#ce9f51;  }
.header-upper{width:100%; display:inline-block; height:60px; padding:13px;}
.logo{display:inline-block; width:90px; position:relative;}
.logo:before{content:'A web Development Agency';position:absolute;top:100%;left: 24px;width: 100%;white-space: nowrap;text-transform: uppercase;font-size: 9px; line-height:10px;}
.header-lower{width:100%;display:inline-block;height:150px;position: relative;padding: 15px;padding-bottom: 30px; color:rgba(255,255,255,0.3); position:absolute; left:0; bottom:0;}
ul.quick-contact{width:100%; display:inline-block;}
ul.quick-contact li{margin-bottom:8px; }
ul.quick-contact li b{font-weight:700; font-size:11px; font-family:'Montserrat';}
ul.quick-contact li a{display:inline-block; font-weight:400;}
.social-links a{padding:0 7px;}
header .copyright {  position: absolute; left: 0; bottom: 0; border-top: solid 1px rgba(255,255,255,0.02); width: 100%; line-height: 15px; padding: 10px 15px; margin:0; }
/* ================= Header end ================= */
.icon { font-family: 'Ionicons'; font-weight: normal; font-style: normal; font-variant: normal; line-height: 1; text-transform: none;  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none; }
.icon--arrow-left:before { content: "\f3d5"; }
.icon--menu:before { content: "\f20e"; }
.icon--cross:before { content: "\f129"; }
/* Menu styles */
.menu { background:#1c1d22;  position: fixed; top: 60px; left: 0; width: 270px; height: calc(100vh - 210px);  font-size:11px; text-transform:uppercase;font-weight:400; font-family:'Montserrat'; z-index:9999; }
.menu__wrap { position: absolute; top: 3.5em; bottom: 0; overflow: hidden; width: 100%; }
.menu__level { position: absolute; top: 0; left: 0; visibility: hidden; overflow: hidden; overflow-y: scroll; width: calc(100% + 35px); height: 100%; margin: 0; padding: 0; list-style-type: none; }
.menu__level--current { visibility: visible; }
.menu__item { display: block; width: calc(100% - 35px); border-bottom:solid 1px rgba(255,255,255,0.02); }
.menu__link { font-weight: 700; position: relative; display: block; padding: 1em 2.5em 1em 1.5em; color: #999; -webkit-transition: color 0.1s; transition: color 0.1s; }
 .menu__link[data-submenu]::after {  content: "\f46a"; font-family: "Ionicons"; position: absolute; right: 0; padding: 0.25em 1.25em; color: #bdbdbd;}
 .menu__link:hover, .menu__link[data-submenu]:hover::after {color: #ce9f51;}
 .menu__link--current{ color: #ce9f51;}
  .menu__link--current::before {content: "\f21b";font-family: "Ionicons"; font-size: 5px; line-height: 0; position: absolute; top: 50%; left: 8px; height: 4px; color: #ce9f51; margin-top:1px;}
 [class^='animate-'], [class*=' animate-'] {visibility: visible;}
.animate-outToRight .menu__item { -webkit-animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); }
@-webkit-keyframes outToRight { to {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}}
@keyframes outToRight { to {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}}
.animate-outToLeft .menu__item { -webkit-animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: outToLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); }
@-webkit-keyframes outToLeft { to {opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
 @keyframes outToLeft { to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}}
.animate-inFromLeft .menu__item { -webkit-animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromLeft 0.6s both cubic-bezier(0.7, 0, 0.3, 1); }
@-webkit-keyframes inFromLeft { from {opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}
 @keyframes inFromLeft { from {opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0);}
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}
.animate-inFromRight .menu__item { -webkit-animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1); }
@-webkit-keyframes inFromRight { from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform:translate3d(100%, 0, 0);}
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}
 @keyframes inFromRight { from {opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0);}
to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }}
.menu__breadcrumbs { font-size: 0.65em; line-height: 1; position: relative; padding: 2.5em 3.75em 1.5em 2.5em; }
.menu__breadcrumbs a { font-weight: bold; display: inline-block; cursor: pointer; vertical-align: middle; letter-spacing: 1px; text-transform: uppercase; color: #ce9f51; }
.menu__breadcrumbs a:last-child { pointer-events: none; }
.menu__breadcrumbs a:hover{ color: #ce9f51; }
 .menu__breadcrumbs a:not(:last-child)::after,  .menu__breadcrumbs a:not(:last-child):hover::after { content: "\f3d6";  font-family: 'Ionicons'; display: inline-block; padding: 0 0.5em;
 color: #ce9f51 !important;}
.menu__breadcrumbs a:not(:last-child):hover::after { color: #33353e;}
.menu__back {font-size: 20px;position: absolute;z-index: 100;top: 0;right: 0;margin: 0;padding: 13px 10px 0 0;cursor: pointer; border: none;background: none;color: #ce9f51;}
.menu__back--hidden { pointer-events: none; opacity: 0; }
.menu__back:hover, .menu__back:focus { color: #fff; outline: none; }
/* Open and close buttons */
.action { position: absolute; display: block; margin: 0; padding: 0; cursor: pointer; border: none; background: none; }
.action:focus { outline: none; }
.action--open { font-size: 1.5em; top: 1em; left: 1em; display: none; color: #fff; position: fixed; z-index: 1000; }
.action--close {font-size: 15px;top: 13px;right: 1em;display: none;color: #ce9f51;}
.hero-container{ padding:30px; height:100%; width:100%;   background:#141518; position:relative; }
.hero-container.video-box{background:transparent;}
.hero-image:before { content: ''; background: #000; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.5;}
.hero-image{position:relative; width: 100%;height: 100%; background-size:cover; background-position:center center; box-shadow: 0 0 15px rgba(0,0,0,1);}
.hero-image .hero-image-content{padding:50px; color:#fff; position:relative;}
.hero-image h6{font-weight:400; overflow:hidden; margin:0; color:#fff;}
.hero-image h2{overflow:hidden; margin:5px 0 15px 0;  color:#fff;}
.hero-image h2 span, .hero-image h6 span{display:inline-block;}
.hero-image p{margin-bottom:15px;}
.hero-image-text {width: 400px; float: left; position: absolute;  bottom: 20px; right: 10px; padding: 40px; background: #141518;  color:#999;}
.hero-image-text h4{font-size:20px; line-height:26px; margin:0; padding:0; margin-bottom:10px; text-transform:uppercase; color:#ce9f51;}
.hero-image .hero-image-slides:before { content: ''; background: #000; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.7;}
.hero-image.hero-slider1{background:#333;;}
.hero-image .hero-image-slides, .hero-image .slick-list, .hero-image .slick-track{height:100% !important;}
.hero-image-slides{background-size:cover; background-repeat:no-repeat; background-position:center center;}  
footer{padding:15px 0; clear:both; width:100%; display:none; float:left;}
footer .social-links{float:left;}
footer .copyright{float:right;}
.main-container-outer{padding:0 20px 0 0; width:100%; display:inline-block; vertical-align:top;}
.top-bar-container{position:fixed; left:269px; top:0; right:0; z-index:999; background:#1c1d22; border-bottom:solid 1px rgba(255,255,255,0.02);}
.top-bar{float:left;padding:20px 5px; color:#fff; font-weight:700;  font-family:'Montserrat';  text-transform:uppercase; color:#999;}
.top-bar span{color:#ce9f51;}
.share-box{float:right; position:relative; padding:13px 25px 7px;}
.breadcrumb{padding:0; margin:0; border-radius:0; background:transparent; font-size:10px;  vertical-align:top;}
.breadcrumb > li + li:before{color:#999; vertical-align:top;}
.breadcrumb > li:last-child span{width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display: inline-block;vertical-align: top;} 
.share-trigger, .share-trigger:focus{float:left; color:#ce9f51; border-radius:50%; text-align:center; line-height:34px; font-size:13px; font-weight:700;}
ul.share-list{float:left; margin-right:15px; display:none;  transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in; }
.active ul.share-list{display:block; }
ul.share-list li{float:left; padding:0 10px 0 0;}
ul.share-list li a{float:left; line-height:34px; padding:0 10px; text-align:center; font-size:15px; color:#999; }
ul.share-list li a:hover{color:#ce9f51;}
.main-container{display:inline-block; width:100%; vertical-align:top; box-shadow:0 0 15px rgba(0,0,0,0.6); background:#1c1d22; }
.inner-banner{position:relative; width: 100%;background:#666 url(../images/banner.jpg) no-repeat center top;background-size:cover;padding:180px 50px 120px; }
.inner-banner h2{color:#fff;position:relative;color:rgba(255,255,255,0.3);font-size:100px;text-align:right;margin:0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.inner-banner:before { content: ''; background: #000; position: absolute; left: 0; right: 0; top: 0; bottom: 0; opacity: 0.5;}
.content-holder{padding:50px 25px; position:relative;}
.content-holder + .content-holder{padding-top:0;}
.content-title{position:relative;padding-bottom: 10px;margin-bottom:30px;padding-left: 30px;}
.content-title:before{content:'';position:absolute;left:0;top:100%;width:80px;height:1px;background:#ce9f51;}
.content-title:after{content:'';position:absolute;left: 10px;top:100%; width:1px; height: 40px;background:#ce9f51;margin-top: -30px;}
.stat-container{width:100%; display:inline-block; vertical-align:top; margin:30px 0;}
ul.stat-list{width:100%; display:inline-block; vertical-align:top; }
ul.stat-list li{width:33.3%; float:left;}
ul.stat-list li h3{font-size:40px; line-height:48px; margin:0; color:#666;}
ul.stat-list li h6{font-size:12px;}
ul.team-list{width:100%; display:inline-block;}
ul.team-list li{width:33.3%; float:left; padding:10px; position:relative; margin-bottom:50px;}
ul.team-list li .team-box{position:relative; background:#1c1d22; box-shadow:0 0 10px rgba(0, 0, 0, 0.6); width:100%; display:inline-block; vertical-align:top; }
ul.team-list li figure{width:100%; display:inline-block; vertical-align:top; }
ul.team-list li figure img{width:100%;  -webkit-filter: grayscale(1); filter: grayscale(1);}
ul.team-list li .team-box:hover figure img{ -webkit-filter: grayscale(0);filter: grayscale(0);}
ul.team-list li figcaption{width: 90%;display:inline-block;vertical-align:top;padding:10px;background: #1c1d22;position: absolute;left: 5%;top: 100%;margin-top: -30px; box-shadow: 0 0 10px rgba(0,0,0,0.3);padding: 10px 20px;text-align: center;}
ul.team-list li figcaption h6, ul.team-list li figcaption p{margin-bottom: 0;}
ul.team-list li figure figcaption .more{opacity:0; z-index:9;position: absolute;width: 22px;height: 22px;border-radius:50%;text-align:center; left:40px;top: -11px;background:#ce9f51;color:#1c1d22;padding: 3px 5px;font-weight:700;font-size: 15px;line-height: 17px;box-shadow:0 0 10px rgba(0, 0, 0, 0.6);transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;  transform:rotate(0deg); }
ul.team-list li .team-box:hover figure figcaption .more{opacity:1; transform:rotate(90deg); left:10px; }
.member-social{float:left; position:absolute; top:-10px; right:0px; z-index:9; opacity:0; box-shadow:0 0 10px rgba(0, 0, 0, 0.6); transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in;}
.member-social a{float:left; width:40px; height:40px; background:#1c1d22; color:#ce9f51; line-height:40px; text-align:center; border-left:solid 1px rgba(0,0,0,0.1);}
ul.team-list li .team-box:hover .member-social{opacity:1; right:-10px;}
ul.history-list{width:100%;display:inline-block;position:relative;margin-top:25px;/* padding-top: 7px; */}
ul.history-list:before{content:'';width:1px;height:100%;position:absolute;top:0;left:50%;border-left: solid 1px #444;}
ul.history-list li{width:100%; float:left;  position:relative; margin-bottom:110px;}
ul.history-list li:last-child{background:#1c1d22; margin:0; padding:40px;}
ul.history-list li:last-child .history-image{margin:0 25%;}
ul.history-list li:last-child .history-box{width:100%; text-align:center; padding-top:30px;}
ul.history-list li:last-child .history-icon:before{display:none;}
.history-icon{width: 32px;height: 32px;float:left;border-radius:50%;position:absolute;top:-6px; left:50%; margin-left: -16px;border: solid 1px #444; background:#1c1d22; text-align: center;line-height: 30px;font-size: 17px;color: #ce9f51; outline:solid 5px #1c1d22;}
.history-icon:before{content:'';width: 60px;height:1px;border-bottom: solid 1px #444;position:absolute;top: 50%;right: -15px;z-index:-1;}
.history-image{width:50%;float:left;padding: 0px 30px;position:relative;margin-top: 0px;}
.history-box{width:50%; float:right; padding:0 30px;}
.history-date{float:left;position:absolute;top: 10px; left:0px; background:#1c1d22;color:#ce9f51;box-shadow:0 0 10px rgba(0,0,0,0.6);padding: 10px 20px;margin: 0;}
ul.history-list li:nth-child(even) .history-image{float:right;}
ul.history-list li:nth-child(even) .history-image .history-date{left:auto; right:0;}
ul.history-list li:nth-child(even) .history-box{text-align:right;}
ul.history-list li:nth-child(even) .history-image:before{right:auto; left:0;}
ul.history-list li:nth-child(even) .history-image:after{right:auto; left:-6px;}
ul.skill-list{width:100%;display:inline-block;position:relative;margin-top:25px;}
ul.skill-list li{width:100%; float:left;  position:relative; margin-bottom:10px;}
ul.skill-list li h6{color:rgba(255,255,255,0.6); margin-bottom:5px;}
ul.skill-list li h6 b{color:#ce9f51; float:right;}
.progress{height:2px; margin-bottom:20px; background:#111;}
.progress-bar{background:#ce9f51;}
.single-member .member-social {opacity:1; top:-20px; right:15px; }
ul.member-contact-list{width:100%;display:inline-block; margin-top:25px;}
ul.member-contact-list li{width:100%; float:left;  position:relative; margin-bottom:10px;}
ul.member-contact-list li h6{color:rgba(255,255,255,0.6); margin-bottom:5px;}
ul.bottom-nav{width:100%; display:inline-block; vertical-align:top; font-weight:700; border-top:solid 1px #333;}
ul.bottom-nav li{width:33.3%; float:left; overflow:hidden;}
ul.bottom-nav li:nth-child(2){text-align:center; font-size:20px; border-left:solid 1px #333; border-right:solid 1px #333;}
ul.bottom-nav li a{width:100%; float:left; padding:20px 20px; position:relative;  height:60px;}
ul.bottom-nav li:last-child{text-align:right;}
ul.bottom-nav li a span{display:inline-block; vertical-align:top; float:left; margin:0 10px;  position:relative; opacity:0; line-height:20px; transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in;  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
ul.bottom-nav li a:hover span{opacity:1;}
ul.bottom-nav li:first-child a span{left:50px;}
ul.bottom-nav li:first-child a:hover span{left:0;}
ul.bottom-nav li:last-child a span{right:50px; float:right;}
ul.bottom-nav li:last-child a:hover span{right:0;}
ul.bottom-nav li:first-child a i{position:absolute; top:50%; left:15px; margin-top:-10px; line-height:20px;}
ul.bottom-nav li:last-child a i{position:absolute; top:50%; right:15px;  margin-top:-10px; line-height:20px;}
.quote-box{width:100%;display:inline-block;vertical-align:top;border-top: solid 1px #333;padding:25px;background: rgba(0,0,0,0.1);}
.quote-box h6{margin:0;  line-height:44px; float:left;}
.quote-box .btn{float:right;}
/* ========== SERVICE PAGE START ============= */
ul.service-list{ display:inline-block; vertical-align:top; margin:0 0 40px;}
ul.service-list li{width:100%; float:left; padding:35px 25px; border-bottom:solid 1px rgba(255,255,255,0.01);}
ul.service-list li:nth-child(even){background:rgba(0,0,0,0.1);}
.service-box{width:100%; min-height:140px; position:relative;padding-top:80px;}
.service-num{font-size:140px; line-height:140px; font-weight:700; color:rgba(255,255,255,0.03); position:absolute; left:0; top:0; transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in;}
.service-icon{ font-size:50px; line-height:50px; color:rgba(255,255,255,0.06); position:absolute; right:0; top:0;  transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in;}
.service-box h6{margin:0; font-size:30px; line-height:60px; color:#666; transition: all  1s ease-in; -moz-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; -webkit-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in;}
ul.service-list li a:hover h6{color:#ce9f51;  font-size:36px; }
ul.service-list li a:hover .service-icon{font-size:80px;}
ul.service-list li a:hover .service-num{font-size:60px; line-height:60px;}
.panel{border:0; border-radius:0; background:transparent; margin:0; box-shadow:none;}
ul.sub-service-list{ display:inline-block; vertical-align:top; margin:0 0 40px; width:100%;}
ul.sub-service-list > li{width:100%; float:left; border-bottom:solid 1px rgba(255,255,255,0.01);}
ul.sub-service-list > li:nth-child(even){background:rgba(0,0,0,0.1);}
.panel .panel-heading{ padding:35px 25px; cursor:pointer; position:relative;}
.panel .panel-heading:before{content:"\f3d0";font-family:'Ionicons';position:absolute;right: 35px;bottom:20px;color: #333;font-size: 30px;line-height: 30px;}
.panel.active .panel-heading:before{content:"\f3d8";}
.panel .panel-body{padding:25px; padding-top:0; margin-bottom:30px; display:none;}
.recent-work-box{width:100%; display:inline-block; margin-bottom:30px;}
ul.recent-work-list{display:block; margin:0 -3px;}
ul.recent-work-list li{width:20%; float:left; padding:3px;}
ul.recent-work-list li a{float:left;}
.panel.active .panel-heading h6{color:#ce9f51; }
.panel.active .panel-heading .service-icon{font-size:80px;}
.panel.active .panel-heading .service-num, .panel .panel-heading:hover .service-num{font-size:60px; line-height:60px;}
/* ========== SERVICE PAGE START ============= */
/* ================= PORTFOLIO PAGE START ================= */
.portfolio-container{width:100%; display:inline-block; vertical-align:top;}
ul.project-category{width:100%; display:inline-block; margin-bottom:20px; position:relative; vertical-align:top;  }
ul.project-category li{float:left; margin:0 3px;}
ul.project-category li a{float:left; position:relative; padding:10px; font-weight:700; text-transform:uppercase; border-bottom:solid 1px #333;}
ul.project-category li a.active, ul.project-category li a:hover{color:#ce9f51; border-bottom-color:#ce9f51;}
 .grid-sizer, .grid-item {width: 33.3%; }
.gutter-sizer { width: 1%; }
.grid-item {float: left; padding:10px;}
.box-item a{float:left; position:relative;}
.box-item a:hover:before{opacity:1;}
.box-item {float:left; width:100%; position:relative; overflow:hidden;}
.box-item a:before{content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:9; opacity:0;  transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in;}
.grid-item:hover a:before{opacity:1;}
.box-item a:after {content:"\f1fe"; font-family:'Ionicons'; position:absolute; top:50%; opacity:0; z-index:10; left:50%; width:30px; height:30px; line-height:30px; margin:-15px 0 0 -15px; color:#fff; font-size:24px; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4);-ms-transform: scale(0.4); transform: scale(0.4); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear;  -ms-transition: all 200ms linear; transition: all 200ms linear; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s;}
.grid-item:hover a:after{ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity:1;-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
.grid-item img {width:100%; position:relative; z-index:1; -webkit-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms; -moz-transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms; transition: all 2000ms cubic-bezier(.19,1,.22,1) 0ms;}
.grid-item:hover img{-webkit-transform: scale(1.15); -moz-transform:scale(1.15); transform: scale(1.15);}
.project-heading{width:100%; display:inline-block; vertical-align:top; padding:15px 10px;}
.project-heading h6{margin-bottom:0;}
.simple-slider{margin-bottom:40px;}
.slick-slide img{width: 100%;}
.det-list, .quick-contact-list  , .det-list li, .quick-contact-list li , .det-list li span, .quick-contact-list li span {float:left; width:100%; }
.det-list li, .quick-contact-list li {margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #333; font-family: 'Montserrat', sans-serif; font-weight: 700; text-transform:uppercase;}
.det-list li span, .quick-contact-list li span {color:#ce9f51;}
.det-list li:last-child, .quick-contact-list li:last-child{border-bottom:0;}
.project-slider .slick-slide{padding:5px; position:relative;}
.project-slider .slick-slide a:before{content:"\f25e"; font-family:'Ionicons'; position:absolute; top:40px; opacity:1; z-index:10; right:20px; width:30px; height:30px; line-height:30px; margin:-15px 0 0 -15px; color:#fff; font-size:24px;   -webkit-transition: all 100ms linear; -moz-transition: all 100ms linear; -o-transition: all 100ms linear;  -ms-transition: all 100ms linear; transition: all 100ms linear; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; background:#1c1d22; box-shadow:0 0 10px rgba(0,0,0,0.5); text-align:center; opacity:0;}
.project-slider .slick-slide a:hover:before{-webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity:1;-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
/* ================= PORTFOLIO PAGE END ================= */
/* ================= CONTACT PAGE START ================= */
.map-container{height: 350px;width:100%;margin:0;padding:0;margin-top: 60px;}
#map-canvas{height:100%;}
.form-group{margin-bottom:20px;}
.form-control::-moz-placeholder {color: #666; opacity: 1;}
.form-control:-ms-input-placeholder {color: #666;}
.form-control::-webkit-input-placeholder {color: #666;}
.form-control{background:transparent; border:0; height:48px; border-bottom:solid 1px #333; box-shadow:none; border-radius:0; color:#666; padding:0; font-size:12px;}
select{-webkit-appearance:none;}
.form-control:focus{border-color:#ce9f51;}
textarea.form-control{resize:none; height:120px;}
label.error{font-weight:400; font-size:10px; color:#f40d59;}
#success, #error {display: none;}
#success h6, #error h6{margin-bottom:0;}
#success p {color: #019620; padding: 0;}
#error p {color: #f40d59; padding: 0; margin: 0;}
.loading{display:inline-block; vertical-align:middle; margin:0 10px;}
.loading img{width:16px;}
/* ================= CONTACT PAGE START ================= */
/* ================= BLOG PAGE START ================= */
.blog-post, .blog-post-upper, .blog-post-lower{width:100%; display:inline-block; vertical-align:top; position:relative;}
.blog-post-upper{overflow:hidden;}
.blog-post-upper a:before{content:''; position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.4); z-index:9; opacity:0;  transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in;}
.blog-post-upper:hover a:before{opacity:1;}
.blog-post-upper a:after {content:"\f1fe"; font-family:'Ionicons'; position:absolute; top:50%; opacity:0; z-index:10; left:50%; width:30px; height:30px; line-height:30px; margin:-15px 0 0 -15px; color:#fff; font-size:24px; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -o-transform: scale(0.4);-ms-transform: scale(0.4); transform: scale(0.4); -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear;  -ms-transition: all 200ms linear; transition: all 200ms linear; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -moz-transition-delay: 0.3s; transition-delay: 0.3s;}
.blog-post-upper:hover a:after{ -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity:1;-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
 .blog-post-lower{padding:20px 10px;}
.post-date{background:#1c1d22; color: #999;display:inline-block;  position: absolute; right: -2px;top: -2px; padding: 7px; font-size:10px; line-height:16px; text-align:center; font-weight:400; box-shadow:0 0 10px rgba(0,0,0,0.5); z-index:9;}
.post-date span{display:block; font-size:14px; font-weight:700;}
.blog-post-lower h6 a{color:#999;}
.blog-post-lower h6 a:hover{color:#ce9f51;}
.pagination-container{width:100%; display:inline-block; vertical-align:top; text-align:center;}
.pagination > li > a, .pagination > li > span{background:transparent; border:0; border-bottom:solid 1px #333; color:#999; font-weight:700; padding:12px 17px;  margin:3px;}
.pagination > li:first-child > a, .pagination > li:first-child > span {margin-left: 0; border-radius:0;}
.pagination > li:last-child > a, .pagination > li:last-child > span {border-radius:0;}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus,
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{color: #ce9f51;background-color: transparent;border-bottom-color:#ce9f51;}
.comment-respond{margin-top:50px;}
blockquote{border-left:solid 1px #666;}
.tags-container{width:100%; display:inline-block;}
.tags-container a{display:inline-block; margin:4px; font-weight:700; text-transform:uppercase; border-bottom:solid 1px #666;}
.comments { margin:0; padding:0; margin-bottom:15px }
.comments ul { margin-left:0px }
.comments ul li ul { margin-left:65px; margin-top:15px }
.comments ul>li { padding:0 }
.comments ul > li ul li { padding:0 }
.comments ul > li .post-comment { margin:0 }
.comment-body {min-height:80px;position:relative;padding:15px;margin-left: 30px;margin-bottom:20px;padding-left: 45px;}
.comment-body .comment-author img{width:60px;height: 60px;left: -30px;top: 10px;z-index:1;position:absolute; }
.comment-body .desc { position:relative }
.comment-body .desc h5 { margin-bottom:5px; font-size:18px }
.comment-body .desc .date { margin-bottom:10px }
.reply{text-align:right;}
.comment-reply-link{ color:#999; padding:5px; font-size: 12px; font-weight:700; }
.comment-author{font-weight:700; color:#999;}
.commentmetadata{font-size:80%;}
/* ================= BLOG PAGE END ================= */
/* ================= 404 PAGE START ================= */
.error-container .hero-image{display:table;}
.error-container .hero-image .hero-image-content{display:table-cell; vertical-align:middle; text-align:center;  position:relative; z-index:999;}
/* ================= 404 PAGE END ================= */
/* ================= TESTIMONIAL PAGE START ================= */
.testimonial-box{width:100%; display:inline-block; vertical-align:top; position:relative;}
.testimonial-box:before{content:"\f347";font-family:'Ionicons';font-size:30px;line-height: 34px;float:left;position:absolute;left: 10px;top: -17px;background:#1c1d22;padding:0 10px;z-index:9;color:rgba(255,255,255,0.05);}
.testimonial-box-upper{width:100%;display:inline-block;padding:15px;position:relative;border: solid 1px #333;color: #999;font-size: 14px;line-height: 26px;}
.testimonial-box-upper:before{content:'';border-top: solid 10px #333;border-left:solid 10px transparent;border-right:solid 10px transparent;position:absolute;top:100%;left:20px;}
.testimonial-box-upper:after{content:'';border-top: solid 9px #1c1d22;border-left: solid 9px transparent;border-right: solid 9px transparent;position:absolute;top:100%;left: 21px;}
.testimonial-box-lower{width:100%; display:inline-block; padding:20px;}
.testimonial-box-lower h6{margin-bottom:5px;}
.testimonials .grid-sizer, .testimonials .grid-item{width:50%;}
.testimonials .grid-item {padding:15px;}
/* ================= TESTIMONIAL PAGE START ================= */
/* ============================= */
/* ! Layout for ipad lanscape */
/* ============================= */
@media only screen and (max-width: 1050px) {
.inner-banner{background-attachment:scroll;}
.inner-banner h2{font-size:60px;}
.member-social{opacity:1; right:-10px;}
ul.team-list li figure figcaption .more{opacity:1; left:10px;}
.grid-sizer, .grid-item{width:50%;}
}
/*============================= 
! Layout for ipad portrait  
============================= */
@media only screen and (max-width: 992px) {
body{padding:60px 0 0;}
.action--open, .action--close { display: block;}
.menu { z-index: 1000;  top: 0; width: 100%; height: 100vh; -webkit-transform: translate3d(-100%, 0, 0);  transform: translate3d(-100%, 0, 0);  -webkit-transition: -webkit-transform 0.3s;  transition: transform 0.3s;}
.menu--open { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
.menu__back{margin-right:30px;}
.menu__level{width:100%;}
.menu__item{width:100%;}
header .copyright{display:none;}
header{width:100%; height:60px; border-bottom:solid 1px rgba(255,255,255,0.05);}
.header-upper{width:auto; float:left; padding:9px 10px 9px 50px; height:auto;}
.header-lower{width:auto; float:right; height:auto; position:relative; left:auto; bottom:auto; padding:13px;}
ul.quick-contact{margin-top:8px;}
ul.quick-contact li{float:left; margin:0 0 0 25px;}
ul.quick-contact li b{display:none;}
.main-container-outer{padding:0;}
.main-container-outer > .container{padding:0;}
footer{display:block;}
.top-bar-container{position:relative; top:auto; left:auto; right:auto; width:100%; display:inline-block; vertical-align:top; z-index:99; background:#141518;}
.inner-banner{padding:80px 20px;}
.top-bar{padding:20px 0;}
.share-box{padding:13px 0 7px;}
 ul.team-list li{width:50%;}
 .hero-container{padding:15px; padding-bottom:50px; margin-bottom:-50px;}
 .map-container{margin-top:0;}
}
/* ============================= */
/* ! Layout for mobile(lanscape) version   */
/* ============================= */
@media handheld, only screen and (max-width: 767px) {
header ul.quick-contact li a span, header ul.quick-contact li.social-links{display:none;}
header ul.quick-contact li{font-size:20px; margin:0 10px; color:#ce9f51;}
.hero-container{height:auto; padding:0; padding-bottom:30px; float:left;}
.hero-container.error-container{height:100%; margin-bottom:-50px; padding:0;}
.hero-image .hero-image-content{padding:70px 15px;}
.hero-image-text{width:90%; margin:0 0 0 5%; top:-20px; bottom:auto; right:auto; position:relative; padding:20px; box-shadow:0 0 30px rgba(0,0,0,1);}
.hero-image-text h4{font-size:16px;}
.logo{margin-top:7px;}
.logo:before{display:none;}
.share-box{ position: fixed; bottom:60px; right:0; padding:5px 5px; width:80px; background:#141518; text-align:center; box-shadow:-5px -5px 40px rgba(0,0,0,1);}
ul.share-list{width:100%; margin:0; text-align:center; vertical-align:top;}
ul.share-list li{float:none; width:100%; padding:0;}
ul.share-list li a{float:none; display:inline-block; vertical-align:top;}
.share-trigger, .share-trigger:focus{float:none; display:inline-block; }
ul.stat-list li{width:100%;}
.quote-box{padding:20px 15px;}
.quote-box h6, .quote-box .btn{float:none;}
.large-para{font-size:15px; line-height:24px;}
.btn{font-size:12px; padding:10px 16px;}
.hero-container .slick-arrow{font-size:11px; padding:6px 12px; display:none !important;}
.content-holder{padding:40px 15px;}
ul.bottom-nav li a span{display:none;}
ul.service-list li{padding:15px;}
.panel .panel-heading{padding:20px 15px;}
.service-box h6{font-size:18px !important; line-height:26px !important;}
.service-num{font-size:60px; line-height:60px;}
.det-list, .quick-contact-list{margin-top:30px;}
.comments ul li ul{margin-left:32px;}
.top-bar{ width:100%; overflow:hidden;}
.breadcrumb > li:last-child span{width:120px;}
ul.project-category{text-align:center;}
ul.project-category li{float:none; display:inline-block;}
.content-title{font-size:18px;}
ul.history-list{width:98%; margin-left:2%;}
ul.history-list:before{left:0;}
.history-icon{left:0;}
.history-date{left:auto; top:-20px; right:-10px;}
.history-image{float:left !important; margin-bottom:30px;}
.history-image .simple-slider{margin-bottom:0;}
.history-box{width:100%; text-align:left !important; padding-right:0;}
ul.history-list li:last-child{padding:0;}
ul.history-list li:last-child .history-image{margin:0;}
.history-icon:before{display:none;}
.map-container{height:240px;}
.error404{padding:0;}
.error404 header{border:0; background:transparent;}
}

@media only screen and (max-width: 650px) {
.grid-sizer, .grid-item{width:100% !important;}
.grid-item{padding:10px 0 !important;}
.history-image{width:100%; padding-right:0;}
ul.recent-work-list li{width:33.3%;}
.panel-body .btn, .panel-body .btn + .panel-body .btn{margin:4px;}
.panel .panel-body{padding:15px;}
.service-box{min-height:1px; padding-right:35px;}
}
/* ============================= */
/* ! Layout for mobile(portrait) version   */
/* ============================= */
@media only screen and (max-width: 479px) {
 ul.team-list li{width:100%;}
 .inner-banner h2{font-size:36px}
}