@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

/*** UNIVERSAL ***/
html { -ms-text-size-adjust: none; -webkit-text-size-adjust: none; }
html, body { width: 100%; padding: 0; margin: 0; }
body {font-family: 'Roboto', sans-serif; font-size: 18px; color: #555;}
img {max-width: 100%; height: auto;}
h1, h2, h3, h4, h5, h6, ul.menu, ul.mobile-menu, .btn, #testimonials, #footer {font-family: 'Montserrat', sans-serif;}
p {letter-spacing: 1px;}
.btn {letter-spacing: 2px; text-transform: uppercase; text-align: center; border-radius: 0px; padding: 15px 30px;}
.btn:hover {-webkit-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.25); box-shadow: 0px 0px 22px 4px rgba(0,0,0,0.25);}
.align-right {text-align: right;}
.ctr { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); text-align: center; z-index: 100; }
.text-center {text-align: center;}
strong {color: #000; font-weight: 900; font-family: 'Montserrat', sans-serif;}
.row {margin: 0;}

/* Universal Main Menu */
ul.menu {text-align: right; font-size: 16px; margin-top: 10px;}
ul.menu li {display: inline-block; padding: 0px 20px;}
ul.menu li a {padding: 0px; position: relative;}
ul.menu li a:after {position: absolute; height: 1px; left: 50%; transform: translateX(-50%); width: 0; background: #956734; content: ""; bottom: -10px; transition: all 0.2s ease-in-out 0s;}
ul.menu li:last-child {padding-right: 0px;}
ul.menu li a:hover, ul.menu li a.active, ul.menu li a:focus {color: #956734;}
ul.menu li a.active:after, ul.menu li a:hover:after {width: 100%;}

/* Universal Scroll Menu */
#scroll-menu {position: fixed; top: 0px; width: 100%; z-index: 30; display: none; background-color: #fff; padding: 30px; 0px; -webkit-box-shadow: 0px 7px 3px -1px rgba(0,0,0,0.17); -moz-box-shadow: 0px 7px 3px -1px rgba(0,0,0,0.17); box-shadow: 0px 7px 3px -1px rgba(0,0,0,0.17);}
.scroll-menu-logo {position: relative;}
.scroll-menu-logo {position: absolute; top: 10px;}
#scroll-menu ul.menu {margin-top: 0px;}
#scroll-menu ul.menu li a {color: #555;}
#scroll-menu ul.menu li a:hover, #scroll-menu ul.menu li a.active, #scroll-menu ul.menu li a:focus {color: #956734;}

/* Universal Mobile Menu */
ul.mobile-menu {list-style-type: none; text-align: center; padding-left: 0px;}
ul.mobile-menu li a {color: #fff; padding: 10px 0px; display: block; border-bottom: 1px solid #956734;}
ul.mobile-menu li:last-child a {border-bottom: 0px;}
ul.mobile-menu li a.active {background-color: #956734;}
.cbp-spmenu h2 {margin-bottom: 10px; font-size: 30px !important;}
#showLeft {display: none; position: absolute; top: 45%; background: none; border: 0 none; font-size: 24px; color: #fff; padding: 0px; right: 15px;}

/* Universal Links and Buttons */
a, .btn {transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; -o-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s;}
a:hover, a:focus {text-decoration: none;}

/* Universal Testimonials */
#testimonials {margin-top: 100px; position: relative;}
#testimonials-wrap {background-image: url("../img/brown-lined-bg.jpg"); background-repeat: repeat; border: 1px solid #fff; height: 350px; color: #fff; padding: 30px; position: relative; z-index: 2;}
#testimonials .crsl-item {padding-left: 30px; padding-right: 30px;}
#testimonials-controls {position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;}
#testimonials-controls a {font-size: 36px; color: #fff;}
img.quotation-mark {width: 70px; height: auto; margin-bottom: 20px;}
p.contributor {text-transform: uppercase; font-weight: 700;}
p.contributor span {font-size: 14px; text-transform: none; font-weight: 400;}
#testimonials-wrap-shadow {height: 350px; -webkit-box-shadow: 0px 2px 0px 12px rgba(231,233,237,1); -moz-box-shadow: 0px 2px 0px 12px rgba(231,233,237,1); box-shadow: 0px 2px 0px 12px rgba(231,233,237,1); position: absolute; left: 15px; right: 15px; top: 0;}

/* Universal Footer */
#footer {text-align: center; background-image: url(../img/footer-bg.jpg); background-size: cover; padding-top: 48px; position: relative; z-index: 1; padding-left: 0px; padding-right: 0px;}
#footer img {margin-bottom: 20px;}
#footer p {color: #fff; letter-spacing: 0px;}
#footer span {color: #956734;}
#footer ul.menu {margin-top: 40px; border-top: 1px solid #fff; text-align: center; padding-top: 40px;}
#footer ul.menu li a {color: #fff;}
#footer ul.menu li a:hover, #footer ul.menu li a.active {color: #956734;}
#footer ul.menu li a.active:after, #footer ul.menu li a:hover:after {display: none;}
#copyright {background-color: rgba(149, 103, 52, .4); padding-top: 40px; padding-bottom: 40px; margin-top: 40px;}
#copyright p {margin-bottom: 0px; font-family: 'Roboto', sans-serif; font-size: 14px;}
#copyright a {color: #fff;}

/*** HOMEPAGE ***/
/* Navigation */
#nav-wrap {position: absolute; width: 100%; z-index: 20; padding-top: 30px;}
body#home #nav-wrap ul.menu li a {color: #fff;}
body#home #nav-wrap ul.menu li a:hover, body#home #nav-wrap ul.menu li a.active, body#home #nav-wrap ul.menu li a:focus {color: #d4993d;}

/* Slideshow */
#slideshow {padding-left: 0px; padding-right: 0px; position: relative;}
.overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; 
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 79%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 79%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 79%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */}
.flexslider {border: 0 none; margin-bottom: 0px;}
#slideshow-thumbs {padding-left: 50px; padding-right: 50px;}
#carousel {margin-top: -100px; position: relative; z-index: 15;}
#carousel ul.slides {width: 100% !important;}
#carousel li {width: 25% !important; background-color: #000; cursor: pointer; border: 1px solid #fff;}
#carousel ul.flex-direction-nav {display: none;}
#carousel li img {opacity: .5; filter: gray; -webkit-filter: grayscale(1); filter: grayscale(1); transition: opacity 0.4s ease-in-out 0s, filter 0.4s ease-in-out 0s; -moz-transition: opacity 0.4s ease-in-out 0s, filter 0.4s ease-in-out 0s; -o-transition: opacity 0.4s ease-in-out 0s, filter 0.4s ease-in-out 0s; -webkit-transition: opacity 0.4s ease-in-out 0s, filter 0.4s ease-in-out 0s;}
#carousel li.flex-active-slide img, #carousel li:hover img {opacity: 1; filter: none; -webkit-filter: none;}
.flex-direction-nav .flex-prev {opacity: 1; left: 100px;}
.flex-direction-nav .flex-next {opacity: 1;right: 100px;}

/* Welcome Box */
#welcome-box {background-image: url("../img/brown-lined-bg.jpg"); background-repeat: repeat; text-align: center; color: #fff; padding: 150px 100px 50px 100px; margin-top: -100px; border: 1px solid #fff; -webkit-box-shadow: 0px 2px 0px 12px rgba(231,233,237,1); -moz-box-shadow: 0px 2px 0px 12px rgba(231,233,237,1); box-shadow: 0px 2px 0px 12px rgba(231,233,237,1); margin-bottom: 120px;}
#welcome-box h4 {font-weight: 300; font-size: 28px; margin-top: 0px;}

/* Est. Text */
#est-text {margin-bottom: 120px;}
#est-text h3 {text-align: center; font-size: 36px; margin-top: 0px; margin-bottom: 0px; position: relative; font-weight: 700;}
#est-text h3:before {content: "EST.1987"; position: absolute; font-size: 160px; font-weight: bold; font-family: "Times New Roman", Times, serif; color: #ccc; z-index: -1; opacity: .5; left: 0; right: 0; top: -65px;}

/* Intro */
#intro {background-color: #e8e8e8; padding-top: 40px; padding-bottom: 90px;}
.intro-text {padding-top: 10px;}
.office-pic {background-color: #cecece; padding: 15px;}
#intro img {border: 1px solid #fff;}
#intro .btn {background-color: #555; color: #fff; margin-top: 30px; display: block;}
#intro .btn:hover {background-color: #fff; color: #555;}

/* Contact Bar */
#contact-bar {position: relative; background-color: #555; padding: 40px 0px;}
#contact-bar h3 {font-size: 36px; color: #fff; margin-top: 0px; margin-bottom: 0px; font-weight: 900;}
#contact-bar img {position: absolute; left: 0; bottom: 0;}
#contact-bar .col-sm-9 {padding-left: 150px;}
#contact-bar .btn {background-color: #fff; color: #956734; width: 100%;}
#contact-bar .btn:hover {background-color: #956734; color: #fff;}

/* Bottom Sections Wrap */
#bottom-sections-wrap {background-image: url("../img/white-lined-bg.jpg"); background-repeat: repeat; padding: 40px 0px 0px; background-attachment: fixed;}
h3.section-title {border: 20px solid rgba(140, 153, 169, .2); position: absolute; color: #956734; font-weight: 900; font-size: 36px; padding: 20px 40px 100px 40px; top: -105px; margin-top: 0px; margin-bottom: 0px; z-index: 10;}

/* Capabilities */
p.intro {text-align: right; font-weight: bold;}
.capability-image {position: relative;}
.capability-image img {width: 100%;}
.first-capability {text-align: right;}
.first-capability img {width: 90%;}
.second-row {margin-top: 20px;}
h4.title {text-align: center; border: 5px solid #956734; padding: 15px; margin-top: 0px; text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 24px; background-color: #fff;}
#capabilities .btn {color: #fff; margin-top: 30px;}
.capability-text .btn {background-color: #956734;}
.capability-text .btn:hover {background-color: #555;}
.view-all .btn {background-color: #555; width: 100%;}
.view-all .btn:hover {background-color: #fff; color: #555 !important;}

/* Gallery */
#gallery .container {padding-left: 70px; padding-right: 70px;}
#galleryCarousel {position: relative;}
#gallery {margin-top: 200px; padding-bottom: 48px;}
#gallery h3.section-title {padding: 20px 60px 100px 60px; left: -57px;}
#gallery .btn {margin-top: 30px; width: 100%; background-color: #956734; color: #fff;}
#gallery .btn:hover {background-color: #555;}
.gallery-controls {text-align: right; padding-top: 30px;}
#gallery-controls a {font-size: 36px;}
#gallery-controls a.previous {color: #956734;}
#gallery-controls a.next {color: #555;}

/*** SECONDARY PAGES ***/
/* Navgigation */
body#secondary #nav-wrap {position: relative;}
body#secondary #nav-wrap ul.menu li a {color: #555;}
body#secondary #nav-wrap ul.menu li a:hover, body#secondary #nav-wrap ul.menu li a.active {color: #956734;}
body#secondary #showLeft {color: #956734;}

/* Page Header */
#page-header {background-image: url("../img/brown-lined-bg.jpg"); background-repeat: repeat; border-bottom: 10px solid #e7e9ed; text-align: center; margin-top: 30px; padding-top: 60px; padding-bottom: 60px;}
#page-header h4, #page-header h1 {color: #fff; margin-top: 0px; margin-bottom: 0px;}
#page-header h1 {text-transform: uppercase; letter-spacing: 2px; font-weight: 700;}
#page-header h4 {font-weight: 300;}

/* Secondary Content */
#secondary-content {padding: 48px 0;}

/* Accordion */
.panel-heading {padding: 0;}
.panel-title {font-weight: 900; color: #000;}
.panel-title a {width: 100%; padding: 12px; display: block;}

/* Projects */
/*** Masonry Grid ***/
.grid {width: 100%;}
.grid-sizer, .grid-item {width: 32%;}
.grid-item {float: left; margin-bottom: 2%;}
.gutter-sizer {width: 2%;}
.grid-item img {width: 100%;}
.work-wrap h2 {text-align: center; margin-top: 40px; margin-bottom: 20px; font-weight: 300; font-size: 24px;}
ul#categories {padding-left: 0px; text-align: center; margin-bottom: 40px;}
ul#categories li {display: inline-block;}
.filterlink {border: 1px solid #956734; color: #956734;}
.filterlink.current {background: #956734; color: #fff;}
.work h2 {text-align: center;}
.work h3 {text-align: center; margin-top: 0px; margin-bottom: 20px;}
.work-wrap {background-color: #cecece; padding: 10px; position: relative; overflow: hidden;}
.work-wrap a {color: #fff;}
.work-caption {width: 85%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); text-align: center; z-index: 100; opacity: 0;}
.work-caption h2 {font-size: 21px; font-weight: 900; margin-top: 0px; margin-bottom: 15px;}
.work-caption .btn {font-size: 12px; padding: 10px; border: 1px solid #956734; color: #956734;}
.work-caption .btn:hover {background: #956734; color: #fff;}
.work-wrap img {border: 1px solid #fff;}
.work-wrap img, .work-caption {-webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; -webkit-transform-style: preserve-3d;}
.work-wrap:hover img {opacity: .05; -webkit-transform:scale(1.25); -moz-transform:scale(1.25); -ms-transform:scale(1.25); -o-transform:scale(1.25); transform:scale(1.25);}
.work-wrap:hover .work-caption {opacity: 1;}

/*** MEDIA QUERIES ***/
@media(max-width: 1199px) {
    #intro p {font-size: 15px;}
    .intro-text {padding-top: 0px;}
    #contact-bar h3 {font-size: 30px; padding-left: 10px; margin-top: 5px;}
    #contact-bar .btn {font-size: 11px;}
    #capabilities h3.section-title {top: -133px;}
}

@media(max-width: 991px) {
    #nav-wrap ul.menu {display: none;}
    #showLeft {display: block;} 
    #carousel ul.slides {transform: translate3d(0px, 0px, 0px) !important;}
    #carousel {margin-top: -55px;}
    #est-text h3 {font-size: 28px;}
    #est-text h3::before {top: -71px;}
    #scroll-menu {background-color: transparent;  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
    #scroll-menu .container {display: none;}
    #intro {padding-bottom: 40px;}
    #intro .col-sm-6 {width: 100%;}
    .office-pic {margin-top: 20px;}
    #contact-bar {text-align: center; padding: 20px 0px 30px 0px;}
    #contact-bar img {display: none;}
    #contact-bar .col-sm-9 {padding-left: 15px;}
    #contact-bar .col-sm-9, #contact-bar .col-sm-3 {width: 100%; margin-top: 10px;}
    #contact-bar .btn {width: 100%; font-size: 14px;}
    #contact-bar h3 {padding-left: 0px; margin-top: 0px;}
    #capabilities img {display: none;}
    #capabilities .col-sm-6 {width: 100%;}
    #capabilities h3.section-title, #gallery h3.section-title {position: relative; top: auto; text-align: center; padding: 20px; margin-bottom: 40px;}
    #capabilities .col-sm-offset-6 {margin-left: 0px;}
    p.intro {text-align: center; padding-bottom: 40px;}
    #capabilities .btn {width: 100%; margin-top: 10px;}
    #capabilities p {text-align: center;}
    #gallery {margin-top: 40px;}
    #gallery h3.section-title {left: auto;}
    #gallery .container {padding-left: 15px; padding-right: 15px;}
    #footer p {font-size: 16px;}
    .grid-sizer, .grid-item {width: 48%;}
}

@media(max-width: 767px) {
    .logo {width: 50%;}
    .main-menu {width: 50%;}
    .logo, .main-menu {float: left;}
    .flex-direction-nav .flex-prev {left: 20px;}
    .flex-direction-nav .flex-next {right: 20px;}
    #welcome-box {border: 0 none;}
    #footer ul.menu {display: none;}
    #coptright {padding-left: 15px; padding-right: 15px;}
    .gallery-controls {text-align: center; padding-top: 0px;}
    .work-caption {display: none;}
    .work-wrap:hover img, #recentWorkCarousel a:hover img {opacity: 1; -moz-transform: none; -webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none;}
    ul#categories li {margin-bottom: 6px;}
}

@media(max-width: 414px) {
    #carousel {margin-top: -25px;}
    #welcome-box {padding: 120px 10px 50px 10px; margin-bottom: 60px;}
    #est-text h3:before {font-size: 85px; top: -24px;}
    #est-text h3 {font-size: 21px;}
    #est-text {margin-bottom: 60px;}
    #testimonials-wrap p {font-size: 14px;}
}

@media(max-width: 375px) {
    .logo {width: 60%;}
    .main-menu {width: 40%;}
    #est-text h3:before {font-size: 77px; top: -20px;}
    #footer p {font-size: 14px;}
}

@media(max-width: 320px) {
    .logo {width: 75%;}
    .main-menu {width: 25%;}
    #est-text h3:before {font-size: 63px; top: -28px;}
    #est-text h3 {font-size: 11px;}
    h3.section-title {font-size: 30px;}
    #footer p {font-size: 12px;}
    #testimonials-wrap p {font-size: 12px;}
}