/*
Theme Name: Twenty Seventeen
Theme URI: https://wordpress.org/themes/twentyseventeen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Seventeen brings your site to life with header video and immersive featured images. With a focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more. Personalize its asymmetrical grid with a custom color scheme and showcase your multimedia content with post formats. Our default theme for 2017 works great in many languages, for any abilities, and on any device.
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/


/* Custom CSS */
html, body { height: 100%; }
html { font-size:62.5% }
body {
    background-color: #272727;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    color: #fff;
}
img{
    max-width: 100%;
}
.nopadding{
    padding: 0 !important;
}
.invisible{
    opacity:0;
    display: block!important;
}
.visible{
    opacity:1;
}
.hidden-o {
   opacity: 0;
 }
.visible-o {
   opacity: 1;
}
h3 {
    font-family: 'Oswald', sans-serif;
    color: #fff;
    text-align: center;
    font-size: 30px;
    letter-spacing: 6px;
    margin-top: 80px;
    margin-bottom: 80px;
}
a:hover, a:visited, a:focus {
    text-decoration: none;
}
p { font-weight: 500; }
.btn-o {
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    transition: all 0.2s ease-in;
}
.btn-o:hover, .btn-o:focus {
    background-color: #fff;
    color: #272727;
}

/*HEADER*/
header {
    z-index: 999;
}
.navbar {
    background-color: rgba(50, 50, 50, 0);
    border: none;
    transition: all 0.2s ease;
}
.navbar.slideInDown {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.navbar-brand > img {
    height: 100px;
    transition: all 0.2s ease;
    z-index: 999;
}
.navbar-nav {
    margin-top: 45px;
    transition: all 0.2s ease;
}
header .navbar-nav > li > a {
    position: relative;
    font-family: 'Oswald', sans-serif;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 14px;
}
header .navbar-nav > li > a:hover,
header .navbar-nav > li > a:visited,
header .navbar-nav > li > a:focus {
    background-color: transparent;
}
header .navbar-nav > li > a::after {
    content: "";
    height: 1px;
    width: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
}
header .navbar-nav > li > a:hover::after {
    width: 100%;
    transition: width 0.2s linear;
}

.navbar.sticky {
    background-color: rgba(50, 50, 50, 0.95);
    box-shadow: 0 0 35px rgba(0,0,0,0.1);
    padding: 10px 30px;
    transition: all 0.2s ease;
}
.navbar.sticky .navbar-nav{
    margin-top: 12px;
    transition: all 0.2s ease;
}
.navbar.sticky .navbar-brand {
    height: auto;
    padding: 0;
}
.navbar.sticky .navbar-brand > img {
    height: 75px;
    transition: all 0.2s ease;
}
.navbar-toggle {
    border: 1px solid #fff;
    border-radius: 0;
    margin: 50px 30px;
}
.navbar.sticky .navbar-toggle {
    margin: 20px;
}
.navbar-toggle > .icon-bar {
    background-color: #fff;
}


/*For mobile only*/
.selector {
    position: relative;
    display: inline-block;
    padding: 12px;
    margin: 32px 10px 0;
    width: 50px;
    vertical-align: middle;
    cursor: pointer;
    z-index: 9;
    border: 1px solid #fff;
    float: right;
}
.selector .bar-icon {
    display: block;
    margin-top: 6px;
    height: 2px;
    width: 100%;
    background: #fff;
    opacity: 1;
    -webkit-transition: all 0.15s ease-in-out;
    -o-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;


    -webkit-transform-origin: 45% 45%;
    -o-transform-origin: 45% 45%;
    -ms-transform-origin: 45% 45%;
    -moz-transform-origin: 45% 45%;
    transform-origin: 45% 45%;
}

.selector .bar-icon:first-child { margin-top: 0; }

.selector.active .menu-icons-wrapper .bar-icon:first-child {
    transform: rotate(45deg)  translate3d(5px, 4px, 0);
}
.selector.active .menu-icons-wrapper .bar-icon:nth-child(2) {
    transform: rotate(-45deg) translate3d(0, 0, 0);
}
.selector.active .menu-icons-wrapper .bar-icon:last-child { opacity: 0; }

.menu-items {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    min-height: 200vh;
    padding: 40% 10px 0;
    border-radius: 3px;
    opacity: 0;
    background-color: #333;
    transform: translateX(100%);
    -webkit-transition: all 0.3s cubic-bezier(0.680, 0, 0.265, 0);
    -o-transition:      all 0.3s cubic-bezier(0.680, 0, 0.265, 0);
    transition:         all 0.3s cubic-bezier(0.680, 0, 0.265, 0);
}
.menu-items.show {
    opacity: 1;
    transform: translateX(0);
}
.menu-items > ul {
    padding: 0;
}
.menu-items > ul > li {
    text-align: right;
    list-style: none;
}
.menu-items > ul > li > a {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    display: block;
    padding: 10px 20px;
}
/*END HEADER*/

/*SLIDER*/
#projects,
#projects .carousel-inner,
#projects .carousel-inner > .item,
#projects .carousel-inner > .item > .slide-image {
    height: 100%;
}
#projects .slide-image {
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}
#projects .project-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
#projects .slide-image .overlay {
    background-color: #27272a;
    opacity: 0.8;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}
#projects .carousel-caption {
    position: absolute;
    text-align: left;
    left: 5%;
    padding-bottom: 60px;
}
#projects .carousel-caption h2 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 20px;
    line-height: 1.4;
}
#projects .carousel-caption p { font-weight: 400; }
#projects .carousel-caption a {
    background-color: #1c2448;
    color: #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 15px;
    border: 1px solid rgba(0,0,0,0);
    transition: all 0.2s ease-in;
}
#projects .carousel-caption a > .fas {
    margin-left: 15px;
}
#projects .carousel-caption a:hover {
    background-color: transparent;
    border: 1px solid #fff;
}
#projects .carousel-control.left,
#projects .carousel-control.right {
    background: transparent;
    top: initial;
    bottom: 60px;
    left: initial;
    opacity: 1;
    width: auto;
    font-size: 14px;
    font-weight: 600;
}
#projects .carousel-control.left {
    right: 185px;
}
#projects .carousel-control.right {
    right: 100px;
}
#projects .carousel-control .fas {
    margin: 0 5px;
    opacity: .5;
}

#projects .item.active .carousel-caption {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

#projects .item .carousel-caption.fadeInLeft {
  opacity:0;
}

.slide-image .project-img img {
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;
}
.slide-image .project-img img.img-loaded {
    opacity: 1;
}
.img-small {
    filter: blur(50px);
    /* this is needed so Safari keeps sharp edges */
    transform: scale(1);
}
/*END SLIDER*/

/*ABOUT HOME SECTION*/
.about {
    margin-top: 100px;
    margin-bottom: 170px;
}
.about h3 > span {
    color: #9b99a9;
}
.about h4 {
    position: relative;
    font-size: 22px;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 55px;
    line-height: 1.6;
}
.about h4::before {
    content: "About";
    position: absolute;
    left: 0;
    top: 40%;
    z-index: -1;
    color: #373737;
    font-size: 6.5em;
    transform: translate(-20%, -50%);
}
.about p {
    color: #b8c9fb;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}
.about a {
    position: relative;
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}
.about a > .fas {
    margin-left: 15px;
}
.about a::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 1px;
    width: 200%;
    background-color: #fff;
    transform: translateY(-50%);
}
.about a:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
.about img {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: box-shadow 0.2s ease;
}
.about img:hover {
    box-shadow: 0 36px 49px rgba(0,0,0,0.30), 17px 19px 28px rgba(0,0,0,0.22);
}
/*END ABOUT HOME SECTION*/

/*PROJECT HOME SECTION*/
.projects {
    margin-top: 100px;
    margin-bottom: 100px;
    overflow: hidden;
}
.projects h3 {
    padding: 0 50px;
    margin-top: 0;
}
.projects .view {
    position: relative;
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-right: 100px;
}
.projects .view:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
.projects .view::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 1px;
    width: 100%;
    background-color: #fff;
    transform: translateY(-50%);
}
.projects .list {
    display: block;
    clear: both;
    margin: 0;
}
.projects .list .col-md-3 {
    padding: 0;
}
.projects .imgwrap {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}
.projects .imgwrap .overlay {
    background-color: #27272a;
    opacity: 0.8;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.projects .imgwrap .project-img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 2s linear;
}
.projects .col-md-3:hover .project-img {
    transform: scale(1.5);
    transition: transform 8s linear;
}
.projects .list h4, .projects .list .col-md-3 > a {
    position: absolute;
    z-index: 1;
}
.projects .list h4 {
    top: 20px;
    left: 30px;
    right: 30px;
    font-family: 'Oswald', sans-serif;
    font-size: 22px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 2;
}
.projects .list .col-md-3 > a {
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 0;
    z-index: 2;
    bottom: 0;
    left: 20px;
    right: 20px;
    text-align: center;
    transition: all 0.2s ease-in;
}
.projects .list .col-md-3 > a:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
.projects .col-md-3:hover a {
    opacity: 1;
    bottom: 30px;
}
/*END PROJECT HOME SECTION*/

/*STATS SECTION*/
.stats {
    font-family: 'Oswald', sans-serif;
}
.stats h5 {
    color: #b8c9fb;
    font-size: 6em;
    position: relative;
}
.stats small {
    float: left;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    color: #b8c9fb;
    bottom: 10px;
    position: absolute;
}
.stats small > span {
    color: #a7a7a7;
    display: block;
}
/*END STATS SECTION*/

/*SERVICES HOME SECTION*/
.services {
    margin-top: 100px;
    margin-bottom: 170px;
}
.services h4 {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 55px;
}
.services h4::before {
    content: "Practices";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: #373737;
    font-size: 6em;
    transform: translate(-20%, -50%);
}
.services.news h4::before {
    content: "News";
}
.services p {
    color: #b8c9fb;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}
.services a {
    position: relative;
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}
.services a > .fas {
    margin-left: 15px;
}
.services a::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 1px;
    width: 200%;
    background-color: #fff;
    transform: translateY(-50%);
}
.services a:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
.services img {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    transition: box-shadow 0.2s ease;
}
.services img:hover {
    box-shadow: 0 36px 49px rgba(0,0,0,0.30), 17px 19px 28px rgba(0,0,0,0.22);
}
/*END SERVICES HOME SECTION*/

/*CLIENTS SECTION*/
#clients .carousel-control {
    width: 10%;
}
#clients .carousel-control.left,
#clients .carousel-control.right {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}
#clients .item {
    padding: 20px 0 65px;
}
#clients .item img {
    transition: all 0.2s linear;
    filter:         grayscale(100%);
    -webkit-filter: grayscale(100%);
    transform:         scale(1);
    -webkit-transform: scale(1);
}
#clients .item img:hover {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 36px 49px rgba(0,0,0,0.30), 17px 19px 28px rgba(0,0,0,0.22);
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    transform:         scale(1.1);
    -webkit-transform: scale(1.1);
}
/*END CLIENTS SECTION*/

/*VIDEO SECTION*/
.video-section {
    margin-top: 100px;
    margin-bottom: 170px;
}
.video-section h4 {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 55px;
}
.video-section h4:before {
    content: "Excellence";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: #373737;
    font-size: 5em;
    transform: translate(-20%, -40%);
}
.video-section p {
    color: #b8c9fb;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}
/*END VIDEO SECTION*/

/*AFFILIATES SECTION*/
.affiliates .col-sm-3,
.affiliates .col-sm-4 {
    margin-bottom: 20px;
    min-height: 250px;
}
.affiliates .col-sm-3 figure,
.affiliates .col-sm-4 figure {
    width: 100%;
    height: 150px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: filter 0.2s ease-in;
}
.affiliates .col-sm-3:hover figure,
.affiliates .col-sm-4:hover figure {
    filter: grayscale(0);
    -o-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
.affiliates .col-sm-3 a,
.affiliates .col-sm-4 a {
    display: block;
    color: #b8c9fb;
    font-weight: 500;
    text-align: center;
    margin: 10px 0;
    transition: color 0.3s ease-in;
}
.affiliates .col-sm-3:hover a,
.affiliates .col-sm-4:hover a {
    color: #fff;
}
#affiliates .carousel-control.left,
#affiliates .carousel-control.right {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5%;
}
#affiliates .carousel-control.left {
    right: 100%;
    left: auto;
}
#affiliates .carousel-control.right {
    left: 100%;
    right: auto;
}
/*END AFFILIATES SECTION*/


/**********************
    PER PAGE STYLES
**********************/

/*ABOUT PAGE*/
.aboutus .page-title {
    position: relative;
    background: url('assets/images/about-title-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    height: 450px;
}
.aboutus .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 40%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    letter-spacing: 6px;
    transform: translateY(-50%);
}
.aboutus .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(top, rgba(39,39,39,0) 0%, rgba(39,39,39,0.02) 2%, rgba(39,39,39,0.89) 74%, rgba(39,39,39,1) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}
.aboutus h2 {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 55px;
    text-align: center;
    line-height: 1.6;
}
.aboutus h2::before {
    content: "About";
    position: absolute;
    left: 0;
    top: 50%;
    z-index: -1;
    color: #373737;
    font-size: 6em;
    transform: translate(-20%, -50%);
}
.aboutus .intro {
    margin-bottom: 150px;
}
.aboutus .intro p {
    text-align: center;
    color: #b8c9fb;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}
.aboutus h3 {
    font-family: 'Montserrat', sans-serif;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 19px;
    line-height: 1.5;
    letter-spacing: 0;
    text-align: left;
}
.aboutus p {
    color: #b8c9fb;
    line-height: 1.8;
}
.aboutus .stats {
    margin-top: 20px;
}
.aboutus .stats h5 {
    font-size: 5em;
}
.aboutus .history, .aboutus .mission {
    margin-bottom: 100px;
}
.aboutus .mission h4 { font-weight: bold; }
.aboutus .mission p {
    font-size: 20px;
    margin-bottom: 40px;
}
.aboutus .mission img {
    width: 250px;
    display: block;
    margin: 0 auto 10px;
}
.aboutus .history .col-md-4 small {
    background-color: #333;
    display: block;
    padding: 15px;
    color: #b8c9fb;
    font-size: 10px;
}
.aboutus .specialty {
    margin: 100px 0 150px;
}
.aboutus .specialty h2 {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 55px;
}
.aboutus .specialty h2::before {
    content: "Practice";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    color: #373737;
    font-size: 6em;
    transform: translate(-20%, -50%);
}
.aboutus .specialty img {
    height: 100px;
}
.aboutus .specialty h4 {
    font-weight: 700;
    letter-spacing: 2px;
}
.aboutus .clients h2 {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    margin-top: 50px;
    margin-bottom: 55px;
}
.aboutus .clients h2::before {
    content: "Clients";
    position: absolute;
    left: 100px;
    top: 0;
    z-index: -1;
    color: #373737;
    font-size: 6em;
    transform: translate(-20%, -50%);
}
.aboutus .clients img {
    transition: all 0.2s linear;
    filter:         grayscale(100%);
    -webkit-filter: grayscale(100%);
    transform:         scale(1);
    -webkit-transform: scale(1);
}
.aboutus .clients img:hover {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 36px 49px rgba(0,0,0,0.30), 17px 19px 28px rgba(0,0,0,0.22);
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    transform:         scale(1.1);
    -webkit-transform: scale(1.1);
}
.aboutus .company-structure .box {
    background-color: #363636;
    overflow: hidden;
    padding: 40px;
    margin: 0 0 100px;
    position: relative;
    z-index: 1;
}
.aboutus .company-structure .box .icon {
    float: left;
    width: 150px;
    margin-right: 15px;
}
.aboutus .company-structure h4 {
    color: #b8c9fb;
    line-height: 1.6;
    margin-bottom: 20px;
}
.aboutus .company-structure a {
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.aboutus .company-structure a > .fas {
    margin-left: 15px;
}
.aboutus .company-structure a:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
/*END ABOUT PAGE*/

/*PROJECTS PAGE*/
.projs .page-title {
    position: relative;
    background: url('assets/images/projects-title-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    height: 450px;
}
.projs .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 40%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    letter-spacing: 6px;
    transform: translateY(-50%);
}
.projs .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(top, rgba(39,39,39,0) 0%, rgba(39,39,39,0.02) 2%, rgba(39,39,39,0.89) 74%, rgba(39,39,39,1) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}
.projs h2 {
    position: relative;
    font-size: 25px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 55px;
    text-align: center;
    line-height: 1.6;
}
.projs h2::before {
    content: "Projects";
    position: absolute;
    left: 215px;
    top: 50%;
    z-index: -1;
    color: #373737;
    font-size: 6em;
    transform: translate(-50%, -50%);
}
.projs .intro {
    margin-bottom: 50px;
}
.projs .intro p {
    text-align: center;
    color: #b8c9fb;
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 40px;
}
.projs .imgwrap {
    height: 400px;
}
.proj-details #bwg_container1_0 #bwg_container2_0 .bwg-container-0 {
    justify-content: flex-start;
}
.proj-details #bwg_container1_0 #bwg_container2_0 .bwg-container-0 .bwg-item0 {
    border: 5px solid #404040;
}
.proj-details .page-title.fadeIn {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.paginate {
    padding: 40px 0;
    margin: 50px 0;
    overflow: hidden;
    clear: both;
    display: block;
}
.paginate a {
    position: relative;
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}
.paginate a:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
.paginate .prev-post {
    float: left;
    margin-left: 100px;
}
.paginate .next-post {
    float: right;
    margin-right: 100px;
}
.paginate .prev-post::before,
.paginate .next-post::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 200%;
    background-color: #fff;
    transform: translateY(-50%);
}
.paginate .prev-post::before { right: 100%; }
.paginate .next-post::before { left: 100%; }


.proj-details .page-title {
    position: relative;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(50%);
    -webkit-filter: grayscale(50%);
    height: 600px;
}
.proj-details .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 50%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    letter-spacing: 6px;
    text-transform: uppercase;
    transform: translateY(-50%);
}
.proj-details .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(to bottom, rgba(39,39,39,0) -30%,rgba(39,39,39,0.02) -28%,rgba(39,39,39,0.89) 65%,rgba(39,39,39,1) 83%);
    background: -webkit-linear-gradient(to bottom, rgba(39,39,39,0) -30%,rgba(39,39,39,0.02) -28%,rgba(39,39,39,0.89) 65%,rgba(39,39,39,1) 83%);
    background: linear-gradient(to bottom, rgba(39,39,39,0) -30%,rgba(39,39,39,0.02) -28%,rgba(39,39,39,0.89) 65%,rgba(39,39,39,1) 83%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}
.proj-details p, .proj-details ul li {
    color: #b8c9fb;
    font-size: 18px;
    line-height: 1.8;
}
.proj-details h2 {
    font-weight: 700;
    margin: 60px 0 35px;
}
.proj-details .proj-facts strong {
    color: #fff;
    display: block;
}
.proj-details .proj-facts p {
    margin-bottom: 20px;
}
.slideshow figure {
    display: flex;
    justify-content: center;
    align-items: center;
}
.proj-details .bwg_container {
    border: 1px solid #3c3c3c;
    padding: 20px;
}
.proj-details #bwg_container1_0 #bwg_container2_0 .bwg-container-0  .bwg-item > a {
    margin-right: 10px;
    margin-bottom: 10px;
}
#spider_popup_wrap .bwg_close_btn {
    font-size: 3em;
}
/*END PROJECTS PAGE*/

/*NEWS PAGE*/
.news .page-title {
    position: relative;
    background: url('assets/images/news-title-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    height: 450px;
}
/*
.news.single .page-title {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}
*/
.news .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 50%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    letter-spacing: 6px;
    transform: translateY(-50%);
}
.news .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(top, rgba(39,39,39,0) 0%, rgba(39,39,39,0.02) 2%, rgba(39,39,39,0.89) 74%, rgba(39,39,39,1) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}
.news article {
    position: relative;
    margin-bottom: 3em;
    margin-right: 1px;
    background-color: #333;
    box-shadow: 0 1px 15px rgba(0,0,0,0.08);
}
.news article .news-thumb {
    position: static;
}
.news article .image-thumb {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 66.66666667%;
    padding: 0;
    overflow: hidden;
    background-size: cover;
    background-position: 50% 0;
}
.news article .news-info {
    padding: 3.3em 3em;
}
.news .date {
    display: inline-block;
    font-size: 0.75em;
    font-weight: 800;
    line-height: 1;
    padding: 0.77em 1.1em 0.77em;
    border-radius: 2em;
    background-color: #434343;
    text-transform: uppercase;
    color: #6f6f6f;
}
.news .news-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
}
.news .news-details img {
    margin: 20px 0 40px;
}
.news article .news-info p,
.news .news-details p {
    color: #a7a7a7;
    font-size: 13px;
    border-bottom: 1px solid #555555;
    padding-bottom: 20px;
}
.news .news-details p {
    border: none;
    font-size: 14px;
    line-height: 1.8;
}
.news article .news-info .readmore {
    color: #fff;
    text-align: right;
    display: block;
    padding: 20px 0 0;
    font-weight: 700;
    letter-spacing: 4px;
}
.news.single .paginate {
    margin: 20px 0 0;
}
/*END NEWS PAGE*/

/*CONTACT PAGE*/
.contact .page-title {
    position: relative;
    background: url('assets/images/contact-title-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    height: 450px;
}
.contact .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 40%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    letter-spacing: 6px;
    transform: translateY(-50%);
}
.contact .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(top, rgba(39,39,39,0) 0%, rgba(39,39,39,0.02) 2%, rgba(39,39,39,0.89) 74%, rgba(39,39,39,1) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}
.contact h2 {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 5px;
    margin: 50px 0 20px;
}
.contact p {
    color: #b8c9fb;
}
.contact ul {
    padding: 0;
/*    margin-bottom: 100px;*/
    border-top: 1px solid #333;
}
.contact ul li {
    list-style: none;
    border-bottom: 1px solid #333;
    padding: 20px;
/*    overflow: hidden;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact ul li > p {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    float: left;
}
.contact ul li > .btn-o {
    float: right;
    display: inline-block;
    transition: all 0.2s ease-in;
}
.contact ul li > .btn-o:hover {
    background-color: #fff;
    color: #333;
}
.contact ul li > .btn-o > .fas {
    margin-left: 5px;
}
.contact ul li .btn-o .fa-mobile-alt {
    font-size: 20px;
    vertical-align: middle;
    margin-right: 5px;
}
.contact ul li .btn-o .caret {
    margin-left: 20px;
}
.contact .contact-form {
    background-color: #2b2b2b;
    padding: 40px;
}
.contact .contact-form h3 {
    text-transform: uppercase;
    text-align: left;
    margin: 30px 0 40px;
}
.contact .contact-form .form-control {
    border: 1px solid #fff;
    background-color: #2b2b2b;
    color: #fff;
    border-radius: 0;
    box-shadow: 0 0 0;
    padding: 20px;
    height: auto;
    resize: none;
}
.contact .contact-form .radio {
    margin-bottom: 20px;
}
.contact .contact-form button {
    background-color: transparent;
}
.contact .contact-form button:hover,
.contact .contact-form button:focus {
    background-color: #fff;
    color: #2b2b2b;
    transition: all 0.2s ease-in;
}
.contact .contact-form button .fas {
    margin-left: 10px;
}
.contact-details {
    margin-bottom: 100px;
}
.contact iframe {
    width: 100%;
    margin-top: -230px;
    margin-bottom: -106px;
}
.contact .has-accordion iframe {
    margin-top: 0;
}
.contact .panel-group {
    margin-bottom: 100px;
/*    border-top: 1px solid #a7a7a7;*/
}
.contact .panel-default > .panel-heading,
.contact .panel.panel-default {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0;
}
.contact .panel-title a {
    font-size: 20px;
    font-weight: 400;
    display: block;
    padding: 20px 20px 30px;
    border-bottom: 1px solid #333;
}
.contact .panel-title a:focus { text-decoration: none; }
.contact .panel-title a > .fas {
    float: right;
}
.contact .panel-title a[aria-expanded="true"] .fas {
    transform: rotate(180deg);
}
.contact .panel-default > .panel-heading + .panel-collapse > .panel-body {
    padding: 30px;
    border-top: none;
    border-bottom: 1px solid #a7a7a7;
}
.contact .panel-body a {
    color: #fff;
    margin: 10px 0;
    text-transform: uppercase;
    transition: all 0.2s ease;
}
.contact .panel-body a:hover {
    background-color: #fff;
    color: #272727;
}
.contact .panel-body .row {
    margin-bottom: 30px;
}
.contact .scan > strong {
    background-color: #fff;
    color: #7b519c;
    padding: 7px 10px 7px 35px;
    border-radius: 60px;
    margin-left: -30px;
}
.contact .scan > img {
    width: 50px;
    position: relative;
}
/*END CONTACT PAGE*/

/*SERVICES PAGE*/
.service .page-title {
    position: relative;
    background: url('assets/images/services-title-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    height: 450px;
}
.service .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 40%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    letter-spacing: 6px;
    transform: translateY(-50%);
}
.service .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(top, rgba(39,39,39,0) 0%, rgba(39,39,39,0.02) 2%, rgba(39,39,39,0.89) 74%, rgba(39,39,39,1) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}
.service .specialization {
    margin-bottom: 100px;
}
.service .specialization .icon {
    height: 60px;
    margin-right: 10px;
}
.service p, .service ul > li {
    color: #b8c9fb;
    line-height: 1.8;
    font-weight: 500;
}
.service ul {
    padding-left: 20px;
}
.service .specialization .col-sm-6 {
    padding-top: 20px;
    padding-bottom: 20px;
}
.service .specialization h2 {
    margin-bottom: 30px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.service .service-list {
    background-color: #333;
    margin-bottom: 30px;
    padding: 40px 30px;
    display: none;
}
.service .service-list .col-md-4 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.service .service-list h3 {
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 20px;
}
.service .service-list img {
    height: 170px;
}
.service .service-list ul > li {
    font-size: 14px;
}
.service .content .btn-bordered {
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.service .content .btn-bordered > i {
    margin-left: 8px;
}
.service .content .btn-bordered:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
.service .chart {
    position: relative;
    padding-top: 200px;
    margin-bottom: 25%;
}
.service .chart .radial {
    display: block;
    margin: 0 auto;
    width: 500px;
}
.service .chart .data h3 {
    margin: 0 0 10px;
    text-align: left;
    font-size: 2vw;
    line-height: normal;
}
.service .chart .data h3 a,
.service .service-list h3 a {
    color: #fff;
    border-bottom: 2px solid #505050;
    transition: color 0.3s ease;
}
.service .chart .data h3 a:hover,
.service .service-list h3 a:hover {
    color: #b8c9fb;
}
.service .chart .data h3 a:focus,
.service .service-list h3 a:focus {
    text-decoration: none;
}
.service .chart .data ul li {
    font-size: 1vw;
}
.service .chart .data {
    position: absolute;
}
.service .chart .data-one {
    top: 0;
    left: 45%;
    transform: translateX(-50%);
}
.service .chart .data-two {
    top: 60px;
    right: 0;
    width: 369px;
}
.service .chart .data-three {
    bottom: -78px;
    right: 0;
    width: 346px;
}
.service .chart .data-four {
    left: 51%;
    top: 100%;
    width: 346px;
}
.service .chart .data-five {
    left: 25%;
    top: 100%;
    width: 330px;
}
.service .chart .data-six {
    top: 220px;
    left: 0;
    width: 346px;
}
.service .chart .data-seven {
    bottom: 65px;
    left: 0;
    width: 346px;
}
.service .chart li a,
.service-list li a {
    color: #b8c9fb;
    border-bottom: 2px solid #505050;
}
.service .chart li a:hover,
.service-list li a:hover {
    color: #fff;
}
.service .chart li a:focus,
.service-list li a:focus {
    text-decoration: none;
}
/*END SERVICES PAGE*/

/*FLOWCHART PAGE*/
.chart-method .page-title {
    position: relative;
    background: url('assets/images/about-title-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    height: 450px;
}
.chart-method .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 40%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    text-align: right;
    letter-spacing: 6px;
    transform: translateY(-50%);
}
.chart-method .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(top, rgba(39,39,39,0) 0%, rgba(39,39,39,0.02) 2%, rgba(39,39,39,0.89) 74%, rgba(39,39,39,1) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}
.chart-method .container {
    max-width: 900px;
    width: auto;
}
.chart-method .icon {
/*    max-width: 900px;*/
    display: block;
    margin: 0 auto;
}
.chart-method a {
    position: relative;
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-top: 30px;
}
.chart-method a > .fas {
    margin-left: 15px;
}
.chart-method a::before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 1px;
    width: 200%;
    background-color: #fff;
    transform: translateY(-50%);
}
.chart-method a:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
.flowchart .step1 {
    background-color: #ececec;
    z-index: 9;
}
.flowchart .step2 {
    background-color: #dadada;
    z-index: 8;
}
.flowchart .step3 {
    background-color: #ececec;
    z-index: 7;
}
.flowchart .step4 {
    background-color: #f5f5f5;
/*    z-index: 1;*/
}
.flowchart .step5,
.flowchart .step9,
.flowchart .step13,
.flowchart .step17 {
    background-color: #ececec;
/*    z-index: 1;*/
}
.flowchart .step6,
.flowchart .step10,
.flowchart .step14,
#construction .step17,
.flowchart .step18 {
    background-color: #dadada;
/*    z-index: 1;*/
}
.flowchart .step7,
.flowchart .step11,
.flowchart .step15 {
    background-color: #ececec;
/*    z-index: 1;*/
}
.flowchart .step8,
.flowchart .step12,
.flowchart .step16 {
    background-color: #f5f5f5;
/*    z-index: 1;*/
}
.flowchart .icon {
    display: block;
    margin: 0 auto;
}
.flowchart .stepnum {
    background-color: #333;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 50%;
    font-size: 11px;
    margin: 28px 0 10px;
}
.flowchart p {
    color: #333;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
#construction .step17 .icon {
    height: 150px;
}

/*Arrows*/
.flowchart .col-sm-6::before {
    width: 25px;
    height: 25px;
    content: "";
    position: absolute;
    z-index: 1;
}
.flowchart .step1::before {
    top: 50%;
    right: -22px;
    background-color: #ececec;
    transform: rotate(-45deg) translateY(-50%);
}
.flowchart .step2::before {
    bottom: -4px;
    left: 50%;
    background-color: #dadada;
    transform: rotate(-45deg) translateX(-50%);
}
.flowchart .step3::before {
    left: -4px;
    top: 50%;
    background-color: #ececec;
    transform: rotate(-45deg) translateY(-50%);
}
#design .flowchart .step8::before {
    display: none;
}
.flowchart .step4::before,
.flowchart .step8::before,
.flowchart .step12::before,
.flowchart .step16::before{
    bottom: -4px;
    left: 50%;
    background-color: #f5f5f5;
    transform: rotate(-45deg) translateX(-50%);
}
.flowchart .step5::before,
.flowchart .step9::before,
.flowchart .step13::before,
.flowchart .step17::before{
    top: 50%;
    right: -22px;
    background-color: #ececec;
    transform: rotate(-45deg) translateY(-50%);
}
.flowchart .step6::before,
.flowchart .step10::before,
.flowchart .step14::before{
    bottom: -4px;
    left: 50%;
    background-color: #dadada;
    transform: rotate(-45deg) translateX(-50%);
}
.flowchart .step7::before,
.flowchart .step11::before,
.flowchart .step15::before{
    left: -4px;
    top: 50%;
    background-color: #ececec;
    transform: rotate(-45deg) translateY(-50%);
}
@media (min-width: 768px) {
    .methodology .modal-dialog {
        width: 50%;
        margin: 20px auto;
    }
    .aboutus .modal .modal-dialog {
        width: 70%;
        margin: 20px auto;
    }
}
.methodology .modal-content,
.aboutus .modal  .modal-content {
    background-color: #272727;
}
.methodology .modal-body {
    padding: 0;
}
.methodology button.close,
.aboutus .modal button.close {
    position: relative;
    color: #fff;
    text-shadow: 0 0 0;
    opacity: 1;
    font-size: 22px;
    margin: 6px 10px;
    z-index: 1;
}
/*END FLOWCHART PAGE*/

/*ORG CHART PAGE*/
.organizational .page-title {
    position: relative;
    background: url('assets/images/about-title-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    overflow: hidden;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    height: 450px;
}
.organizational .page-title h1 {
    position: absolute;
    right: 30px;
    bottom: 40%;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    text-align: right;
    letter-spacing: 6px;
    transform: translateY(-50%);
}
.organizational .page-title .gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: -moz-linear-gradient(top, rgba(39,39,39,0) 0%, rgba(39,39,39,0.02) 2%, rgba(39,39,39,0.89) 74%, rgba(39,39,39,1) 83%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(39,39,39,0) 0%,rgba(39,39,39,0.02) 2%,rgba(39,39,39,0.89) 74%,rgba(39,39,39,1) 83%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00272727', endColorstr='#272727',GradientType=0 );
}

.organizational h3 {
    text-align: left;
}
.company-chart .board .card {
    background-color: #353535;
    position: relative;
    margin-bottom: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
}
.company-chart .divisions .card {
    background-color: #353535;
    margin-bottom: 20px;
}
.company-chart .card .icon {
    background-color: #cbcbcb;
    float: left;
    margin-right: 20px;
}
.company-chart .card .icon > img {
    height: 100px;
}
.company-chart .divisions {
    overflow: hidden;
}
.company-chart .divisions::before {
    content: "";
    width: 66.7%;
    height: 2px;
    background-color: #484848;
    position: absolute;
    top: 0;
    left: 16.6%;
    transform: translateX(0);
}
.company-chart .divisions h4 {
    margin-bottom: 20px;
    margin-left: 20px;
}
.company-chart .divisions .card .icon > img {
    height: 80px;
}
.company-chart .card p {
    margin: 10px 0;
}
.company-chart .divisions .head {
    overflow: hidden;
    border-bottom: 4px solid #484848;
}
.company-chart .divisions ul {
    display: block;
    padding: 0;
    clear: both;
    margin: 0;
}
.company-chart .divisions ul > li {
    list-style: none;
    width: 100%;
    clear: both;
    overflow: hidden;
    border-top: 1px solid #484848;
}
.company-chart .divisions ul > li p {
    margin-bottom: 0;
    margin-top: 15px;
}
.directors .card::after,
.ceo .card::after,
.coo .card::after {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #484848;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.divisions .card::before {
    content: "";
    width: 2px;
    height: 100%;
    background-color: #484848;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}
/*END ORG CHART PAGE*/


/*VIDEO SECTION*/
.video-section .grid-wrap {
    border: none;
}
.video-section .grid li {
    width: 100%;
}
.video-section .grid li figure {
    padding: 0;
    position: relative;
}
.video-section .grid li figure .cover {
    width: 100%;
    height: 300px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.video-section .grid li figure .overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.3);
    text-align: center;
}
.video-section .grid li figure h2 > i {
    display: block;
    margin-top: 10px;
    color: #b7c8fa;
    font-size: 58px;
}
.video-section .info-keys,
.video-section .slideshow nav span.nav-prev,
.video-section .slideshow nav span.nav-next {
    display: none;
}
.video-section .slideshow li {
    height: auto;
    top: 0;
    left: 0;
    margin: 0;
    bottom: 0;
    right: 0;
    width: 100%;
}
.video-section .slideshow figure {
    height: 100%;
    background: transparent;
    border: none;
}
/*END VIDEO SECTION*/

/*FOOTER*/
.subfooter {
    background: url('assets/images/subfooter-bg.jpg') no-repeat center center/cover;
    background-attachment: fixed;
    padding: 80px 40px;
    margin-top: 100px;
}
.subfooter p {
    font-size: 2em;
    font-weight: 600;
    margin: 0;
}
.subfooter a {
    color: #fff;
    border: 1px solid #fff;
    padding: 20px;
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    float: right;
}
.subfooter a:hover {
    background-color: #fff;
    color: #272727;
    transition: all 0.2s ease-in;
}
footer {
    padding: 40px;
}
footer p {
    color: #a7a7a7;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    margin-top: 32px;
}
footer ul {
    list-style: none;
    overflow: hidden;
    margin-top: 32px;
    padding: 0;
}
footer ul li {
    float: left;
}
footer ul li a {
    color: #fff;
}
footer .footer-menu li a {
    padding: 20px 10px;
    color: #a7a7a7;
    font-size: 12px;
    font-weight: 600;
}
footer .social {
    margin-top: 22px;
}
footer .social li a {
    background-color: #333338;
    padding: 12px;
    display: flex;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    margin-right: 5px;
}
footer .footer-logo {
    float: left;
}
/*END FOOTER*/


/*404 PAGE*/
.not-found {
    text-align: center;
}
.not-found img {
    display: block;
    margin: 100px auto 0;
}
.not-found h2 {
    margin-bottom: 30px;
}
/*END 404 PAGE*/


/*Line Flow*/
.dot {
  position: relative;
  background-color: #fff;
  border: 3px solid #000;
  color: #000;
  width: 0.1px;
  height: 0.1px;
  line-height: 3em;
  font-size: 1em;
  font-weight: bold;
  border-radius: 100%;
  text-align: center;
  z-index: 1;
  display: inline-block;
  opacity: 0;
}

.active .dot {
  background-color: #2b2b2b;
  border-color: #2b2b2b;
  color: #fff;
}

.lineflow {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}

.linear {
  z-index: 0;
  position: absolute;
}

.linear::before {
  color: #2b2b2b;
  content: "";
  display: block;
  position: absolute;
  border-right: 3px solid #2b2b2b;
  top: 0;
  left: 0;
  height: 0;
  transition: all .5s ease 0s;
}

.active .linear::before {
  height: 100%;
  transition: all 1s ease 0s;
}


.revealer {
  text-align: center;
  margin: 0em -4px;
/*  padding: 4em 1em;*/
    height: 153.5px;
    position: relative;
}
/*
.revealer::before {
    background-color: #fff;
    width: 100%;
    height: 2px;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
*/

.revealer:after {
  content: "";
  display: table;
  clear: both;
}

/*
.revealer:first-child {
  padding: 20em 0;
}
*/

/*
.revealer:nth-child(even) {
  background: #f4f4f4;
}
*/

#dot1, #dot4, #dot5, #dot8,
#dot9, #dot12, #dot13, #dot16, #dot17 {
  float: left;
}

#dot2, #dot3, #dot6, #dot7,
#dot10, #dot11, #dot14, #dot15, #dot18 {
  float: right;
}
 #line2.linear::before {
  transition-delay: .5s;
}
#line3.linear::before,
#line5.linear::before,
#line7.linear::before,
#line9.linear::before,
#line11.linear::before,
#line13.linear::before,
#line15.linear::before,
#line17.linear::before {
  transition-delay: 0.5s;
}
.active #line3.linear::before,
.active #line5.linear::before,
.active #line7.linear::before,
.active #line9.linear::before,
.active #line11.linear::before,
.active #line13.linear::before,
.active #line15.linear::before,
.active #line17.linear::before  {
  transition-delay: 1s;
}

/*End Line Flow*/


/*Preloader*/
.preload-bg {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #272727;
    z-index: 99999;
}
.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 60px;
  margin: -30px 0 0 -40px;
}
.preloader .lines {
  width: 80px;
  height: 40px;
  position: absolute;
}
.preloader .lines .line {
  width: 80px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  clip: rect(0, 0, 20px, 0);
}
.preloader .lines .line.line-1 {
  top: 0;
  -webkit-animation: slide 2s ease 0s infinite;
          animation: slide 2s ease 0s infinite;
}
.preloader .lines .line.line-2 {
  top: 15px;
  -webkit-animation: slide 2s ease 0.25s infinite;
          animation: slide 2s ease 0.25s infinite;
}
.preloader .lines .line.line-3 {
  top: 30px;
  -webkit-animation: slide 2s ease 0.5s infinite;
          animation: slide 2s ease 0.5s infinite;
}
.preloader .loading-text {
  position: absolute;
  top: 50px;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 13px;
  font-family: sans-serif;
  letter-spacing: 3px;
  line-height: 10px;
  height: 10px;
  -webkit-animation: fade 1s ease 0s infinite;
          animation: fade 1s ease 0s infinite;
}

@-webkit-keyframes slide {
  0% {
    clip: rect(0, 0, 20px, 0);
  }
  30% {
    clip: rect(0, 80px, 20px, 0);
  }
  50% {
    clip: rect(0, 80px, 20px, 0);
  }
  80% {
    clip: rect(0, 80px, 20px, 80px);
  }
  100% {
    clip: rect(0, 80px, 20px, 80px);
  }
}

@keyframes slide {
  0% {
    clip: rect(0, 0, 20px, 0);
  }
  30% {
    clip: rect(0, 80px, 20px, 0);
  }
  50% {
    clip: rect(0, 80px, 20px, 0);
  }
  80% {
    clip: rect(0, 80px, 20px, 80px);
  }
  100% {
    clip: rect(0, 80px, 20px, 80px);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*MEDIA QUERIES (RESPONSIVE)*/
/* Desktops  */
@media (min-width:1152px) {
    html { font-size:2em }
}
@media (min-width: 1600px) {
    .service .chart .data h3 { font-size: 25px; }
    .service .chart .data ul li {
        font-size: 13px;
    }
}
@media (min-width:1200px) and (max-width:1500px) {
    .service .chart .data-six {
        top: 190px;
    }
    .service .chart .data-seven {
        bottom: 20px;
    }
    .service .chart .data-two {
        top: 15px;
    }
    .service .chart .data-five {
        left: 20%;
    }
    .service .chart .data-three {
        width: 330px;
    }
}
@media (min-width:799px) and (max-width:1199px) {
    .service .chart .data h3 {
        font-size: 1vw;
    }
    .service .chart .data ul li {
        font-size: 0.99vw;
    }
    .service .chart .data-one { top: 70px; }
    .service .chart .data-two {
        top: 65px;
        width: 250px;
    }
    .service .chart .data-three {
        bottom: 0;
        right: -74px;
        width: 221px;
    }
    .service .chart .data-five {
        left: 15%;
        width: 250px;
    }
    .service .chart .data-six { width: 170px; }
    .service .chart .data-seven {
        bottom: 48px;
        width: 200px;
    }
}

/* Tablets */
@media (min-width:768px) and (max-width:1024px) {
    html { font-size:1.6em }
    .container {
        max-width: 750px;
        width: auto;
    }
    header .navbar-nav > li > a {
        padding: 15px 10px;
        font-size: 10px;
    }
}

@media (max-width:1024px) {
    .company-chart .divisions {
        margin-left: 0;
    }
    .coo .card::after {
        left: 14px;
        transform: translateX(0);
    }
    .company-chart .divisions::before {
        visibility: hidden;
    }
    .divisions .card::before {
        left: -1px;
        transform: translateX(0);
        z-index: -1;
    }
    .company-chart .divisions h4 {
        text-align: center;
    }
}

@media (max-width: 768px){
    .container { overflow: hidden; }
    .aboutus .history img {
        width: 100%;
    }
    .aboutus .stats h5 {
        margin: 40px 0;
    }
    footer ul li {
        float: inherit;
        display: inline-block;
    }
    footer .footer-menu li a {
        display: block;
        text-align: center;
    }
    footer p {
        text-align: center;
    }
    footer img {
        display: block;
        margin: 0 auto;
    }
    .contact-details h2, .contact-details p {
        text-align: center;
    }
    .contact-form {
        margin-top: 60px;
    }
    .contact-form p {
        text-align: left;
    }
    .proj-details .page-title h1 {
        text-align: center;
        right: 50%;
        transform: translate(50%,0);
    }
    .proj-details p, .proj-details h2 {
        text-align: center;
    }
    .contact ul li {
        display: block;
    }
    .contact ul li > p {
        display: block;
        float: none;
    }
    .contact ul li > .btn-o {
        display: block;
        float: none;
    }
    .contact ul li > .btn-o > .fas {
        float: right;
        margin-top: 2px;
    }
}

@media (max-width:800px) and (min-width:768px) {
    .service .chart .data ul li {
        font-size: 10px;
    }
    .service .chart .data-six {
        width: 170px;
        top: 190px;
    }
    .service .chart .data-two {
        width: 280px;
    }
    .service .chart .data-one {
        top: 80px;
        left: 42%;
    }
    .service .chart .data-seven {
        width: 170px;
        bottom: 130px;
    }
    .service .chart .data-five {
        left: 6%;
        top: 85%;
        width: 290px;
    }
    .service .chart .data-three {
        bottom: -50px;
        width: 150px;
    }
    .service .chart .data-four {
        left: 50%;
        top: 95%;
    }
    .service .chart .data h3 {
        letter-spacing: 5px;
    }
}

/* Phones */
@media (max-width:767px) {
    html { font-size:1.2em }
    .navbar-collapse {
        max-height: inherit;
        overflow: inherit;
        background-color: rgba(50, 50, 50, 0.95);
        box-shadow: 0 0 35px rgba(0,0,0,0.1);
    }
    .navbar.sticky .navbar-collapse.in {
        background-color: transparent;
        box-shadow: 0 0 0;
    }
    .navbar.sticky {
        padding: 10px;
    }
    .navbar.sticky .selector {
        margin-top: 8px;
    }
    .navbar-brand > img {
        height: 85px;
    }
    .services h4::before,
    .video > .container > .row h4:before {
        left: 0;
    }
    #projects .carousel-caption {
        padding-bottom: 0;
    }
    #projects .carousel-control.left,
    #projects .carousel-control.right {
        bottom: 20px;
    }
    #projects .carousel-control.left {
        right: initial;
        left: 32px;
    }
    #projects .carousel-control.right {
        right: initial;
        left: 112px;
    }
    .about img, .services img {
        margin-top: 40px;
    }
    .subfooter a {
        float: left;
        margin-top: 20px;
        display: block;
        width: 100%;
        text-align: center;
    }
    .projs h2::before,
    .aboutus h2::before{
        display: none;
    }
    .projects .list .col-md-3 > a {
        opacity: 1;
        bottom: 30px;
    }
    header .navbar-nav > li > a {
        text-align: center;
    }
    .projects .imgwrap {
        height: 320px;
    }
    .projects .view {
        margin-top: 30px;
    }
    .stats small {
        position: relative;
        float: inherit;
        display: block;
        text-align: center;
        margin-top: 10px;
    }
    .stats h5 {
        text-align: center;
    }
    .aboutus strong { display: block; }
    .aboutus h3,
    .aboutus p,
    .aboutus strong,
    .aboutus .specialty .col-md-4,
    .subfooter p,
    {
        text-align: center;
    }
    .aboutus .intro {
        margin-bottom: 100px;
    }
    .paginate a {
        margin-bottom: 20px;
    }
    .carousel-caption {
        bottom: 60px;
    }
    #projects .carousel-caption h2 {
        font-size: 16px;
    }
    #projects .carousel-caption p {
        font-size: 10px;
    }
    #projects .carousel-caption a {
        font-size: 11px;
        padding: 14px;
        margin-top: 10px;
    }
    footer .footer-logo {
        display: block;
        float: none;
    }
    .navbar-brand {
        padding: 8px 0;
    }
    .flowchart .step1::before,
    .flowchart .step2::before,
    .flowchart .step3::before,
    .flowchart .step4::before,
    .flowchart .step5::before,
    .flowchart .step6::before,
    .flowchart .step7::before,
    .flowchart .step8::before,
    .flowchart .step9::before,
    .flowchart .step10::before,
    .flowchart .step11::before,
    .flowchart .step12::before,
    .flowchart .step13::before,
    .flowchart .step14::before,
    .flowchart .step15::before,
    .flowchart .step16::before,
    .flowchart .step17::before {
        bottom: -22px;
        left: 50%;
        top: auto;
        right: auto;
        transform: rotate(-45deg) translateY(-50%);
    }
    .flowchart .step3::before {
        background-color: #ececec;
    }
    .flowchart .stepnum {
        margin: 0 auto 10px;
    }
    .flowchart .col-sm-8,
    .flowchart .col-sm-9 {
        text-align: center;
    }
    .flowchart p {
        margin-bottom: 40px;
    }
    .service .service-list {
        display: block;
    }
    .service .service-list h3 {
        text-align: center;
        padding-top: 20px;
    }
    .service .chart {
        display: none;
    }
    .flowchart .icon {
        height: 150px;
    }
    .aboutus .company-structure .box {
        margin-bottom: 0;
    }
    .aboutus .company-structure .box .icon {
        float: initial;
        display: block;
        margin: 0 auto 15px;
    }
    .aboutus .company-structure h4 {
        text-align: center;
    }
}
/*END MEDIA QUERIES (RESPONSIVE)*/