/* Header */
body>header {overflow: hidden; background: #000; line-height: 70px}
body>header nav {float: right}
body>header nav li {float: left}
body>header nav ul {overflow: hidden; list-style: none; border-right: 1px solid #131313}
body>header nav a {display: block; padding: 0 28px !important; border-left: 1px solid #131313}
body>header nav a:hover,
body>header nav a.active {background: #0d0d0d}
body>header nav a.icon {font-size: 23px; line-height: 70px}

main {overflow: scroll}

/* Slider */
.slider {position: relative; height: 100%; max-height: 760px; color: #fff; font-size: 14px; text-align: center}
.slider h2 {position: relative; display: inline-block; overflow: visible; color: #ccc5b7; font-size: 72px; white-space: nowrap}
.slider h2:before {content: ''; position: absolute; left: -170px; top: 50%; margin-top: -1px; width: 140px; height: 2px; background: transparent url('../images/separator.png') no-repeat 0 0}
.slider h2:after {content: ''; position: absolute; right: -170px; top: 50%; margin-top: -1px; width: 140px; height: 2px; background: transparent url('../images/separator.png') no-repeat 0 0}
.slider p {width: 45%; margin: 0 auto; padding-top: 2em; line-height: 30px}
.slider>div {position: relative; min-height: 100%}
.slider>div {background-size: cover; background-repeat: no-repeat; height: 100%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d}
.slider>div>div {position: relative; z-index: 2; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%)}
.slider>div+div {position: absolute; top: -999em; left: -999em}
.slider p.nav {position: absolute; bottom: 5%; left: 0; width: 100%; text-align: center}
.slider p.nav a {display: inline-block; width: 14px; height: 14px; background: #8f867e; border: 2px solid transparent; border-radius: 14px; text-indent: -999em; text-align: left}
.slider p.nav a[class] {overflow: visible}
.slider p.nav a.active,
.slider p.nav a:hover {background: transparent; border-color: #fff}
.slider p.nav a+a {margin-left: 13px}




html, body, .container {
    height: 100%;
}

.js .boxgallery,
.js .boxgallery div {
    position: absolute;
}

.js .boxgallery,
.js .panel {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.js .boxgallery,
.bg-tile,
.bg-img {
    overflow: hidden;
}

.panel {
    z-index: 0;
    perspective: 1200px;
}

.bg-tile {
    width: 50%;
    height: 50%;
}

.bg-tile:nth-child(2),
.bg-tile:nth-child(4) {
    left: 50%;
}

.bg-tile:nth-child(3),
.bg-tile:nth-child(4) {
    top: 50%;
}

.bg-img {
    width: 100%;
    height: 100%;
    background: #000;
}

.bg-img img {
    position: absolute;
    display: block;
    height: 200%;
}

.bg-tile:nth-child(2) .bg-img img,
.bg-tile:nth-child(4) .bg-img img {
    left: -100%;
}

.bg-tile:nth-child(3) .bg-img img,
.bg-tile:nth-child(4) .bg-img img {
    top: -100%;
}

.panel.current {
    z-index: 2;
}

.panel.active {
    z-index: 1;
}

.panel.current .bg-img {
    -webkit-transition: -webkit-transform 1.1s ease-in-out;
    transition: transform 1.1s ease-in-out;
}

.boxgallery[data-effect="effect-1"] .panel.active .bg-tile,
.boxgallery[data-effect="effect-2"] .panel.active .bg-tile {
    -webkit-animation: scaleDown 1.1s ease-in-out;
    animation: scaleDown 1.1s ease-in-out;
}

@-webkit-keyframes scaleDown {
    from { -webkit-transform: translate3d(0,0,380px); transform: translate3d(0,0,380px); }
    to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}

@keyframes scaleDown {
    from { -webkit-transform: translate3d(0,0,380px); transform: translate3d(0,0,380px); }
    to { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); }
}

/* Variation 2 */
.boxgallery[data-effect="effect-2"] .panel.current .bg-img {
    -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.7,0,0.3,1);
    transition: transform 0.9s cubic-bezier(0.7,0,0.3,1);
}

.boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(2) .bg-img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(3) .bg-img {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.boxgallery[data-effect="effect-2"] .panel.current .bg-tile:nth-child(4) .bg-img {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}

/* Variation 3 */
.boxgallery[data-effect="effect-3"] .panel::after {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    content: '';
    -webkit-transition: opacity 1.1s ease-in-out;
    transition: opacity 1.1s ease-in-out;
}

.boxgallery[data-effect="effect-3"] .panel.current::after,
.boxgallery[data-effect="effect-3"] .panel.active::after {
    opacity: 0;
}

.boxgallery[data-effect="effect-3"] .panel.current::after {
    -webkit-transition: none;
    transition: none;
}

.boxgallery[data-effect="effect-3"] .panel.current .bg-img {
    -webkit-transition: -webkit-transform 1.1s cubic-bezier(0.7,0,0.3,1);
    transition: transform 1.1s cubic-bezier(0.7,0,0.3,1);
}

.boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(2) .bg-img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

.boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(3) .bg-img {
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
}

.boxgallery[data-effect="effect-3"] .panel.current .bg-tile:nth-child(4) .bg-img {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s;
}

.boxgallery p.nav {z-index: 3; position: absolute; bottom: 5%; left: 0; width: 100%; text-align: center}
.boxgallery p.nav a {display: inline-block; width: 14px; height: 14px; background: #8f867e; border: 2px solid transparent; border-radius: 14px; text-indent: -999em; text-align: left}
.boxgallery p.nav a[class] {overflow: visible}
.boxgallery p.nav a.active,
.boxgallery p.nav a:hover {background: transparent; border-color: #fff}
.boxgallery p.nav a+a {margin-left: 13px}

.boxgallery div.description {position: relative; opacity: 0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -ms-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
.boxgallery .current div.description {opacity: 1}
.boxgallery h2.slide1 {position: relative; display: inline-block; overflow: visible; color: #fff; font-size: 72px; white-space: nowrap; text-shadow: 2px 2px #000; width: 550px;}
.boxgallery h2.slide2 {position: relative; display: inline-block; overflow: visible; color: #fff; font-size: 72px; white-space: nowrap; text-shadow: 2px 2px #000; width: 550px;}
.boxgallery h2.slide3 {position: relative; display: inline-block; overflow: visible; color: #fff; font-size: 72px; white-space: nowrap; text-shadow: 2px 2px #000; width: 550px;}
.boxgallery h2.slide4 {position: relative; display: inline-block; overflow: visible; color: #fff; font-size: 72px; white-space: nowrap; text-shadow: 2px 2px #000; width: 550px;}
/* .boxgallery h2:before {content: ''; position: absolute; left: -170px; top: 50%; margin-top: -1px; width: 140px; height: 2px; background: transparent url('../images/separator.png') no-repeat 0 0}
.boxgallery h2:after {content: ''; position: absolute; right: -170px; top: 50%; margin-top: -1px; width: 140px; height: 2px; background: transparent url('../images/separator.png') no-repeat 0 0} */
.boxgallery p {width: 45%; margin: 0 auto; padding-top: 1em; line-height: 30px; text-shadow: 1px 1px #000;}

.boxgallery-wrapper {position: relative; height: 100%; max-height: 760px; color: #fff; font-size: 14px; text-align: center}

.boxgallery div.panel {-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d}
.boxgallery div.panel div.description {top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); background: transparent url('../images/50.png') no-repeat center}


/* Sidebar */
.sidebar {float: right; max-width: 510px; height: 100%}
.sidebar ul {display: block; height: 100%}
.sidebar li {overflow: hidden; display: block; position: relative; float: left; height: 32.5%; max-height: 250px; margin-left: 5px; text-align: center}
.sidebar li:nth-child(2+1n) {clear: left}
.sidebar li+li+li {margin-top: 5px}
.sidebar li img {vertical-align: middle; max-width: 100%; max-height: 100%}
.sidebar li span {position: absolute; bottom: 30px; left: 0; width: 100%}

/* Scrollable main */
body>header {position: absolute; top: 0; left: 0; width: 100%; height: 70px}
body>main {overflow: auto; position: absolute; top: 70px; bottom: 140px; width: 100%}
body>footer {position: absolute; bottom: 0; left: 0; width: 100%; height: 140px}

/* Footer */
body>footer {overflow: hidden; height: 140px; padding: 0 60px; line-height: 140px; background: #000}
body>footer p.logo {float: left; padding-left: 35px}
body>footer p.links {float: right; font-size: 40px}
body>footer p.links a+a {margin-left: 30px}
body>footer img {vertical-align: middle}

/* Careers */
.careers {background: transparent url('../images/careers.jpg') no-repeat 0 0; background-size: cover}
.grid.careers  ul div {background: none}

/* Grid */
.grid {overflow: visible}
.grid ul {display: block; height: 100%; overflow: hidden; list-style: none; text-align: center}
.grid ul div{background: transparent url('../images/small-25.png') no-repeat center}
.grid ul li {position: relative; float: left; width: 50%; height: 50%; background-size: cover; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d}
.grid ul li.hover,
.grid ul li.hover:after {background-color: rgba(0, 0, 0, .65)}
.grid ul div {position: relative; z-index: 2; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%)}
.grid div h2 {color: #fff; font-size: 32px; word-spacing: 3px}
.grid div h2 a {display: inline-block; padding: 0 10px; color: #fff; border: 2px solid rgba(255, 255, 255, .3); line-height: 40px}
.grid div h2 a:hover {border-color: #8e1414}
.grid div h2+p {color: #fff; width: 45%; margin: 0 auto; padding: 18px 0 26px 0; font-weight: 300; font-family: 'Lato', 'Montserrat', 'Arial', sans-serif}
.grid .details {z-index: 3; position: absolute; top: 0; right: -36%; width: 36%; height: 100%; background: #1a1a1a}
.grid.projects .details {right: -65%; width: 65%}
.grid .details figure {float: left; width: 40%; height: 100%; margin: 0; overflow: hidden}
.grid .details figure img {height: 100%}
.grid .details>div {overflow: hidden; height: 100%; margin-top: 110px; padding: 0 50px 140px 80px}
.grid .details>div p {padding-bottom: 2em; font-family: 'Lato', 'Montserrat', 'Arial', sans-serif; font-weight: 300; line-height: 30px; width: 90%}
.grid .details>div>div {height: 90%}
.grid .details h2 {padding-bottom: .6em; font-size: 40px; line-height: 42px}
.grid .details h3 {font-size: 22px; width: 90%}
.grid .details h4 {font-size: 18px; width: 90%}
.grid .details h5 {font-size: 15px; width: 90%}
.grid .details h3,
.grid .details h4 {color: #fff}
.grid .details p.close {display: none; position: absolute; top: 36px; right: 24px;}
.grid .details.active p.close {display: block}
.grid .details p.close a {display: inline-block; border: 2px solid #fff; color: #fff; font-size: 38px}
.grid .details p.close a:hover {color: #6c6c6c; border-color: #6c6c6c}
.grid .details {overflow: visible}
.grid .details  ul {list-style: circle; text-align: left; width: 100%; height: 100%; list-style-position: inside;}
.grid .details  ul li {text-align: left; width: 90%; height: 100%;}

.grid.fluid {overflow: scroll}
.grid.fluid ul {overflow: visible; height: auto}
.grid.fluid ul li {height: 300px}
.grid.fluid ul li.wide {width: 100%}

.grid.scroll-pane ul>li.border {height: 300px}
.grid.jspScrollable.pushed,
.grid.jspScrollable.pushed .jspContainer,
.grid.jspScrollable.pushed .jspPane {overflow: visible !important}

@media(min-width: 1137px) {
    .grid {
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -webkit-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s
    }
    .grid.pushed {
        transform: translate3d(-36%, 0, 0);
        -webkit-transform: translate3d(-36%, 0, 0);
        -ms-transform: translate3d(-36%, 0, 0)
    }
    .grid.projects.pushed {
        transform: translate3d(-65%, 0, 0);
        -webkit-transform: translate3d(-65%, 0, 0);
        -ms-transform: translate3d(-65%, 0, 0)
    }
    .grid:after {
        -webkit-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s
    }
    .grid.pushed:after {
        z-index: 3;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .55);
        -webkit-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s
    }
    .grid .details.active {display: block; z-index: 4}
}

/* Contact */
.contact {background: transparent url('../images/contact.jpg') no-repeat 0 0; background-size: cover}
.contact .border {position: relative; float: left; width: 50%; height: 100%}
.contact .border+.border {margin-left: 5px; margin-right: -5px; padding: 80px 40px 20px 140px}
.contact p {position: relative; z-index: 2; font-family: 'Lato', 'Montserrat', 'Arial', sans-serif; padding-bottom: 2em; font-weight: 300; line-height: 25px}
.contact h1 {padding-top: 65px; text-align: center}
.contact h2 {padding-bottom: .5em}
.contact h1,
.contact h2,
.contact h3 {color: #fff}
.contact h2 {font-size: 24px}
.contact h3 {font-size: 16px}
.contact .border+.border p a:hover {color: #8e1414}
.contact form {max-width: 580px; margin: 0 auto}
.contact form input,
.contact form textarea {width: 100%; height: 46px; padding: 0 20px; border: 1px solid #1e1e1e; color: #9a9a9a; background: #1e1e1e}
.contact form textarea {max-width: 100%; min-height: 146px; line-height: 1.6}
.contact form input:focus,
.contact form textarea:focus {border-color: #484847; background: #131313; outline: none}
.contact form select {width: 100%}
.contact form p.submit {text-align: center}
.contact form button {background: none}
.contact form p.disabled {opacity: .3}

/* Select2 */
.select2-container .select2-choice {height: 46px; line-height: 46px; padding: 0 0 0 20px; border-radius: 0; border-color: #1e1e1e; background: #1e1e1e; color: #9a9a9a}
.select2-container .select2-choice .select2-arrow {width: 50px; border-radius: 0; background: #1e1e1e; color: #9a9a9a; border-left: 0}
.select2-container .select2-choice .select2-arrow b:before {display: block; text-align: center; font-family: 'bloober'; content: '\e602'; font-size: 33px; background: none}
.select2-container .select2-choice > .select2-chosen {margin-right: 50px}
.select2-container.select2-dropdown-open .select2-choice {border-color: #484847; box-shadow: none}
.select2-container.select2-dropdown-open .select2-choice,
.select2-container.select2-dropdown-open .select2-arrow {background: #131313}
.select2-results .select2-result-label {padding-left: 16px}
.select2-drop-active {color: #9a9a9a; border-color: #484847; background: #131313; font-weight: 300; font-family: 'Lato', 'Montserrat', 'Arial', sans-serif;}
.select2-results .select2-highlighted {color: #fff; background: #131313}

/* About */
.about img {width: 100%; height: 100%; vertical-align: top}
.about .left {width: 65%; height: 50%}
.about .wide {overflow: hidden; width: 100%; height: 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d}
.about .wide .info {float: left; width: 35%; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); text-align: center}
.about .wide p.border {float: left; width: 65%; height: 100%}
.about p.border {position: relative; height: 100%}
.about .info {color: #9a9a9a; font-size: 47px; letter-spacing: 2px; line-height: 48px}
.about .info span {color: #fff; font-weight: 300; font-size: 22px; font-family: 'Lato', 'Montserrat', 'Arial', sans-serif; letter-spacing: 9px}
.about .info strong {color: #fff; font-size: 34px; font-weight: 400}
.about .right {position: absolute; top: 50%; right: 0; width: 35%; height: 100%}
.about .right>div.incentive {position: relative; height: 50%; text-align: center; color: #9a9a9a; font-size: 16px; font-family: 'Lato', 'Montserrat', 'Arial', sans-serif; cursor: pointer}
.about .right>div.incentive span {display: block; z-index: 2; position: absolute; top: 50%; width: 100%; margin-top: -60px; text-align: center}
.about .right>div.incentive span:after {content: '\e602'; z-index: 2; position: absolute; left: 50%; bottom: -50px; margin-left: -19px; color: #363431; font-family: 'bloober'; font-size: 40px}
.about .right>div.incentive:after {content: ''; position: absolute; top: 0; left: 50%; margin-left: .5px; width: 1px; height: 100%; background: #1a1a1a}
.about .right>div.incentive:before {z-index: 2; content: '\e604'; position: absolute; top: 50%; left: 50%; margin-top: 0; margin-left: -15px; font-family: 'bloober'; font-size: 33px; color: #393633}
.about .right>div.content {position: relative; height: 100%; margin-top: 100px; padding: 0 50px 140px 80px}
.about .right>div.content .scroll-pane {height: 100%}
.about .right h1 {color: #fff; font-size: 40px}
.about .right h2 {padding-top: 0; color: #fff; font-size: 22px}
.about .right h1+p {margin-top: -45px; padding-bottom: 3px}
.about .right h2+p {margin-top: -8px}
.about .right p {padding-bottom: 2em; font-family: 'Lato', 'Montserrat', 'Arial', sans-serif; font-weight: 300; line-height: 30px}

header .mobile,
header p.links {display: none}
header.active nav {display: block}
header .mobile .icon-menu {float: right; color: #fff; font-size: 45px; border: 2px solid transparent}
header.active .mobile .icon-menu:after {content: '\e601'; border: 2px solid #fff}
header.active p.links {display: block}

header p.links {font-size: 40px; text-align: center}
header p.links a+a {margin-left: 30px}

@media(max-width: 1136px) {
    body {overflow: auto !important}
    header nav {display: none}
    footer {display: none}
    body>main {position: relative; top: 0}
    body>header {position: static; height: auto}
    body>header nav {float: none; text-align: center}
    body>header nav ul {border-top: 1px solid #131313}
    body>header nav li {float: none; border-bottom: 1px solid #131313}
    body>header nav li a {line-height: 62px}
    body>header .mobile {display: block; padding: 20px 23px}
    body>header .mobile .logo {position: relative; top: 10px}
    body>header .mobile .logo img {width: auto; height: 70px}

    .boxgallery-wrapper {position: absolute; top: 0; width: 100%; height: 440px; max-height: 440px}
    .boxgallery-wrapper .boxgallery .bg-img img {width: 200%}
    .sidebar {float: none; margin-top: 442px; max-width: 100%; height: auto}
    .sidebar ul {height: auto}
    .sidebar li {width: 33.2%; height: auto; margin-left: .1%}
    .sidebar li img {width: 100%; height: 100%; max-width: none; max-height: none}

    .contact form {max-width: 80%}
    .contact>.border {width: 100%; height: auto; margin-left: 0}
    .contact>.border+.border {margin: 0; padding-left: 40px}

    .mobile-center {text-align: center}

    .mobile-two-columns {overflow: hidden}
    .mobile-two-columns>div {float: left; width: 50%; text-align: center}

    .about .left {width: 100%; height: auto}
    .about .wide .info {float: none; width: 100%; position: static; top: auto; margin: 1em 0 2em 0; transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0)}
    .about p.border {float: none !important; width: 100% !important; height: 250px !important; margin-top: .5em}
    .about .right {width: 100%; position: static}
    .about .right>div {margin-top: 25px; padding: 0 50px 50px 50px}

    .grid ul li {width: 100%; height: 300px; margin-bottom: 5px}
    .grid .details {right: auto; left: -999em}
    .grid .details.active,
    .grid.projects .details.active {display: block; left: 0; width: 100%}
    .grid .details figure {width: auto; float: none; height: 40%; margin-left: 50px; margin-top: 50px; text-align: center}
    .grid .details figure img {margin-left: -50px; height: 100%}
    .grid .details>div {overflow: visible; width: 100%; height: auto; padding: 0 50px 50px 50px}
    .grid .details>div>div {overflow: visible !important; height: auto}
    .grid .details p.close {position: fixed; top: 190px}
}

@media(max-width: 640px) {
    .boxgallery-wrapper h2 {font-size: 54px}
    .boxgallery-wrapper p {padding-top: .5em; padding-bottom: .5em}

    .sidebar li {height: auto; max-height: 175px}
    .sidebar li img {height: 175px !important}
}

@media(max-width: 320px) {
    /*body>header .mobile .logo img {width: 190px}*/
    .boxgallery-wrapper h2 {font-size: 30px}
    .boxgallery-wrapper p {width: 60%; font-size: 10px; line-height: 20px}
    .boxgallery-wrapper {height: 300px; max-height: 300px}
    .sidebar {margin-top: 302px}
    .sidebar li {width: 49.9%; height: auto; max-height: 150px; margin-left: .1%}
    .sidebar li img {height: 150px !important}
    .about .right>div {margin-top: 15px; padding: 0 25px 25px 25px}

    .grid .details {overflow: hidden}
    .grid .details figure {width: 100%; height: auto; text-align: left}
    .grid .details figure img {width: 60%; margin-left: 0; height: auto}

    .grid div h2 {font-size: 28px}
    .grid div h2+p {width: 75%}
    .grid div h2 a {max-width: 80%; font-size: 24px}
}