/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */
html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
footer,
header,
nav,
section {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

figcaption,
figure {
    display: block
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

main {
    display: block
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: button
}

[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
    border-style: none;
    padding: 0
}

[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
    outline: 1px dotted ButtonText
}

input {
    overflow: visible
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    display: table;
    max-width: 100%;
    padding: 0;
    color: inherit;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto
}

details {
    display: block
}

summary {
    display: list-item
}

menu {
    display: block
}

canvas {
    display: inline-block
}

template {
    display: none
}

[hidden] {
    display: none
}

/*!

========================================== Those2Guys Code ==========================================

*/
html {
    width: 100%;
    font-size: 14px;
    font-family: Roboto, sans-serif;
    color: #4a4a4a;
    overflow-x: hidden
}

body {
    overflow-x: hidden;
    position: relative;
    background-color: transparent;
    margin-top: 0 !important
}

h1 {
    font-size: 2.5em;
    text-transform: uppercase;
    color: #4a4a4a
}

h2 {
    font-size: 1.5em;
    text-transform: uppercase
}

img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

nav {
    position: fixed;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    top: -1px;
    right: 0;
    z-index: 999;
    height: 6em;
    width: 100%
}

.scrolled,
.scrolled-override {
    background: rgba(74, 74, 74, .8)
}

#mini-logo-wrap {
    z-index: 999;
    left: 0;
    top: 0;
    position: fixed
}

#mini-logo {
    max-height: 6em;
    opacity: 0
}

#mini-logo.moved {
    animation-duration: 1s;
    animation-name: fadeinlogo;
    opacity: 1
}

#mini-logo.show {
    opacity: 1 !important
}

@keyframes fadeinlogo {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    justify-items: flex-end
}

.btn-nav {
    text-transform: uppercase;
    padding: 2em 2.5em;
    text-decoration: none;
    font-weight: 700;
    font-size: 1em;
    text-shadow: 0 0 4px #000;
    color: #fff;
    text-decoration-color: #fff
}

.btn-nav:hover {
    background-color: rgba(244, 232, 162, .8)
}

.btn-nav[href=""] {
    border-bottom: .3em solid #f4e8a2;
    color: #f4e8a2
}

.burger-nav {
    display: none
}

.burger-txt {
    padding-right: 10px;
    font-size: 1.25em;
    margin: 0
}

.burger-bars {
    cursor: pointer;
    display: block;
    float: right;
    padding: 2em
}

.bar1,
.bar2 {
    -webkit-transition: .2s;
    background-color: #fff;
    height: 3px;
    margin: 6px 0;
    transition: .2s;
    width: 30px
}

.bar3 {
    -webkit-transition: .2s;
    background-color: #fff;
    height: 3px;
    margin: 6px 0;
    transition: .2s;
    width: 20px
}

.bar1.change {
    transform: rotate(-45deg) translate(-7px, 6px)
}

.bar2.change,
.burger-txt.change {
    opacity: 0
}

.bar3.change {
    transform: rotate(45deg) translate(-6px, -6px);
    width: 30px
}

#hero {
    display: flex;
    flex-direction: column;
    background-color: #000;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100)
}

#hero-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-grow: 1
}

#hero-top {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #hero-top {
    background-image: url(../img/hero-top-bg-fb.jpg)
}

.no-webp #hero-top {
    background-image: url(../img/hero-top-bg-fb.jpg)
}

.webp #hero-top {
    background-image: url(../img/hero-top-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #hero-top {
        background-image: url(../img/hero-top-bg-fb.jpg)
    }
}

#hero-logo {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%
}

.yellow-divider {
    background-color: #f4e8a2;
    width: 100%;
    height: 1.5em
}

.btn-go-to {
    grid-area: button;
    border: 1px solid #f4e8a2;
    color: #f4e8a2;
    text-align: center;
    padding: 1em;
    max-height: 4em;
    max-width: 20em;
    text-decoration: none;
    line-height: 2em;
    font-size: 1.25em;
    text-transform: uppercase
}

.btn-go-to:hover {
    background-color: #f4e8a2;
    color: #4a4a4a
}

.btn-yellow {
    border: 1px solid #d4c220;
    color: #d4c220
}

.btn-yellow:hover {
    background-color: #d4c220;
    color: #fff
}

.entry-intro {
    text-align: center;
    background-color: #fff;
    color: #4a4a4a;
    padding-top: 6em
}

.entry-intro h1 {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0;
    margin: 2em 0
}

.entry-intro p {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    font-size: 1.3em;
    line-height: 1.75em;
    padding: 1em
}

.entry-intro p:first-of-type {
    padding-top: 0
}

.entry-intro p:last-of-type {
    padding-bottom: 3em
}

.entry-intro img {
    display: block;
    margin-top: 1.5em;
    background-color: #d4c220;
    min-height: 60vh;
    width: 100%
}

#short-we-do-wrap {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #short-we-do-wrap {
    background-image: url(../img/we-do-bg-fb.jpg)
}

.no-webp #short-we-do-wrap {
    background-image: url(../img/we-do-bg-fb.jpg)
}

.webp #short-we-do-wrap {
    background-image: url(../img/we-do-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #short-we-do-wrap {
        background-image: url(../img/we-do-bg-fb.jpg)
    }
}

#short-we-do {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    padding: 6em 0;
    display: flex;
    color: #fff
}

#short-we-do-text-container {
    width: 40%;
    padding: 0 1.5em 0 3em;
    box-sizing: content-box
}

#short-we-do-text-container h1 {
    margin: auto;
    border-bottom: .1em solid #f4e8a2;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0;
    color: #fff
}

#short-we-do-text-container p {
    margin: 0 auto;
    padding: 0;
    font-size: 1.3em;
    line-height: 1.75em;
    margin: 1em
}

#short-we-do-text-container ul {
    font-size: 1.3em;
    line-height: 1.75em;
    margin-bottom: 2em;
    padding: 0
}

#short-we-do-text-container ul li {
    background: url(../img/list.png) no-repeat 10px 10px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0 0 1px 50px;
    vertical-align: middle
}

#we-do-highlights-container {
    width: 60%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center
}

.btn-we-do-highlights {
    width: 100%;
    max-width: 315px;
    height: 100%;
    max-height: 315px;
    background-color: grey;
    margin: 1em;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    position: relative
}

.btn-we-do-highlights:hover {
    position: relative
}

.btn-we-do-highlights:hover .hero-jump-polygon>div {
    border-color: #f4e8a2
}

.btn-we-do-highlights:hover:after {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0
}

.btn-we-do-highlights:after {
    content: "";
    background-color: #000;
    opacity: .4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0
}

#btn-we-do-1 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-we-do-1 {
    background-image: url(../img/btn-we-do-1-fb.jpg)
}

.no-js #btn-we-do-1:hover {
    background-image: url(../img/btn-hover-we-do-1-fb.jpg)
}

.no-webp #btn-we-do-1 {
    background-image: url(../img/btn-we-do-1-fb.jpg)
}

.no-webp #btn-we-do-1:hover {
    background-image: url(../img/btn-hover-we-do-1-fb.jpg)
}

.webp #btn-we-do-1 {
    background-image: url(../img/btn-we-do-1-fb.jpg)
}

.webp #btn-we-do-1:hover {
    background-image: url(../img/btn-hover-we-do-1-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-we-do-1 {
        background-image: url(../img/btn-we-do-1-fb.jpg)
    }

    .webp #btn-we-do-1:hover {
        background-image: url(../img/btn-hover-we-do-1-fb.jpg)
    }
}

#btn-we-do-2 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-we-do-2 {
    background-image: url(../img/btn-we-do-2-fb.jpg)
}

.no-js #btn-we-do-2:hover {
    background-image: url(../img/btn-hover-we-do-2-fb.jpg)
}

.no-webp #btn-we-do-2 {
    background-image: url(../img/btn-we-do-2-fb.jpg)
}

.no-webp #btn-we-do-2:hover {
    background-image: url(../img/btn-hover-we-do-2-fb.jpg)
}

.webp #btn-we-do-2 {
    background-image: url(../img/btn-we-do-2-fb.jpg)
}

.webp #btn-we-do-2:hover {
    background-image: url(../img/btn-hover-we-do-2-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-we-do-2 {
        background-image: url(../img/btn-we-do-2-fb.jpg)
    }

    .webp #btn-we-do-2:hover {
        background-image: url(../img/btn-hover-we-do-2-fb.jpg)
    }
}

#btn-we-do-3 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-we-do-3 {
    background-image: url(../img/btn-we-do-3-fb.jpg)
}

.no-js #btn-we-do-3:hover {
    background-image: url(../img/btn-hover-we-do-3-fb.jpg)
}

.no-webp #btn-we-do-3 {
    background-image: url(../img/btn-we-do-3-fb.jpg)
}

.no-webp #btn-we-do-3:hover {
    background-image: url(../img/btn-hover-we-do-3-fb.jpg)
}

.webp #btn-we-do-3 {
    background-image: url(../img/btn-we-do-3-fb.jpg)
}

.webp #btn-we-do-3:hover {
    background-image: url(../img/btn-hover-we-do-3-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-we-do-3 {
        background-image: url(../img/btn-we-do-3-fb.jpg)
    }

    .webp #btn-we-do-3:hover {
        background-image: url(../img/btn-hover-we-do-3-fb.jpg)
    }
}

#btn-we-do-4 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-we-do-4 {
    background-image: url(../img/btn-we-do-4-fb.jpg)
}

.no-js #btn-we-do-4:hover {
    background-image: url(../img/btn-hover-we-do-4-fb.jpg)
}

.no-webp #btn-we-do-4 {
    background-image: url(../img/btn-we-do-4-fb.jpg)
}

.no-webp #btn-we-do-4:hover {
    background-image: url(../img/btn-hover-we-do-4-fb.jpg)
}

.webp #btn-we-do-4 {
    background-image: url(../img/btn-we-do-4-fb.jpg)
}

.webp #btn-we-do-4:hover {
    background-image: url(../img/btn-hover-we-do-4-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-we-do-4 {
        background-image: url(../img/btn-we-do-4-fb.jpg)
    }

    .webp #btn-we-do-4:hover {
        background-image: url(../img/btn-hover-we-do-4-fb.jpg)
    }
}

.btn-we-do-highlights-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 24px #000
}

.btn-we-do-highlights-wrap p {
    margin: 0 auto;
    padding: 0;
    z-index: 555;
    position: absolute;
    text-shadow: 0 0 4px #000
}

.we-do-polygon {
    height: 4em;
    width: 4em;
    display: grid;
    grid-template-columns: 2em 2em;
    grid-template-rows: 2em 2em;
    grid-gap: .2em;
    transform: rotate(-45deg)
}

.we-do-polygon div {
    display: inline-block;
    border: .01em solid #f4e8a2
}

.sticky {
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -9999
}

.sticky {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js .sticky {
    background-image: url(../img/sticky-bg-fb.jpg)
}

.no-webp .sticky {
    background-image: url(../img/sticky-bg-fb.jpg)
}

.webp .sticky {
    background-image: url(../img/sticky-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp .sticky {
        background-image: url(../img/sticky-bg-fb.jpg)
    }
}

.ytube {
    width: 95%;
    margin: 0 auto;
    display: block;
    border-style: none;
    min-height: 50vh
}

#testimonials {
    justify-content: center;
    background-color: #4a4a4a;
    margin: 80vh 0
}

#testimonials {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #testimonials {
    background-image: url(../img/testimonials-wrap-bg-fb.jpg)
}

.no-webp #testimonials {
    background-image: url(../img/testimonials-wrap-bg-fb.jpg)
}

.webp #testimonials {
    background-image: url(../img/testimonials-wrap-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #testimonials {
        background-image: url(../img/testimonials-wrap-bg-fb.jpg)
    }
}

#testimonials-wrap {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 100%
}

.testimonials-container {
    display: block;
    margin-top: 3em;
    padding: 3em;
    box-sizing: border-box;
    background-color: rgba(244, 232, 162, .8);
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    width: 47.5%
}

.testimonials-container:nth-of-type(2) {
    position: relative;
    left: 52.5%;
    top: -5em
}

.testimonials-container:nth-of-type(3) {
    position: relative;
    top: -10em
}

.testimonials-container:nth-of-type(4) {
    position: relative;
    left: 52.5%;
    top: -15em
}

.quote {
    position: relative;
    left: 45%;
    font-size: 3.5em;
    font-weight: 700;
    font-family: "Secular One", sans-serif;
    color: #4a4a4a
}

.quote:after {
    content: " ";
    display: inline-block;
    position: relative;
    left: -.825em;
    top: -.025em;
    height: 1em;
    width: 1em;
    margin: 0 auto;
    border: 1px solid #4a4a4a;
    border-radius: 50%
}

.testimonials-text {
    margin: 0 auto;
    padding: 0;
    font-size: 1.5em;
    line-height: 1.5em;
    text-align: center;
    color: #fff;
    margin-bottom: 1em
}

.testimonials-name {
    margin: 0 auto;
    padding: 0;
    font-size: 1.375em;
    font-weight: 700;
    text-align: center;
    color: #4a4a4a;
    margin-bottom: .5em
}

.testimonials-company {
    margin: 0 auto;
    padding: 0;
    font-size: 1.375em;
    text-align: center;
    color: #4a4a4a
}

#footer-top {
    margin: 0 auto;
    padding: 0;
    background-color: #f4e8a2;
    padding: .5em 0;
    color: #4a4a4a;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center
}

#footer-top P {
    margin: 0 auto;
    padding: 0
}

#footer-middle {
    background-color: #4a4a4a;
    display: block;
    text-align: center;
    line-height: 2em;
    color: #fff;
    padding: 4em 1em;
    box-sizing: border-box
}

#footer-middle h1,
#footer-middle h2 {
    margin: 0 auto;
    padding: 0;
    font-weight: 700;
    color: #fff
}

#footer-middle p {
    margin: 0 auto;
    padding: 0;
    font-size: 1.5em;
    margin-top: .75em
}

#footer-middle a {
    margin: 0 auto;
    padding: 0;
    color: #fff;
    text-decoration: none;
    font-size: 1.5em
}

#footer-middle a:hover {
    text-decoration: underline
}

#footer-middle span {
    margin: 0 auto;
    padding: 0;
    color: #f4e8a2;
    font-weight: 700;
    font-size: 1.5em
}

#footer-contact {
    margin: 2em 0
}

#footer-bottom {
    background-color: #000;
    color: #fff;
    font-weight: 700;
    font-size: 1.1em;
    line-height: 1.75em;
    text-align: center;
    padding: 1.5em
}

#footer-bottom a {
    margin: 0 auto;
    padding: 0;
    color: #fff;
    text-decoration: none
}

#footer-bottom a:hover {
    text-decoration: underline
}

#footer-bottom p {
    margin: 0 auto;
    padding: 0
}

.modal-hidden {
    display: none
}

.fancybox-content {
    width: 75%;
    max-width: 1200px
}

.fancybox-slide--html {
    margin: 0 auto;
    padding: 0
}

.fancybox-slide--html .fancybox-close-small {
    padding: 0 !important
}

.compensate-for-scrollbar {
    margin-right: 0 !important
}

@media only screen and (max-width:1300px) {
    .btn-we-do-highlights {
        max-width: 275px;
        max-height: 275px
    }
}

@media only screen and (max-width:1100px) {
    html {
        font-size: 12px
    }

    .no-mobile {
        display: none !important
    }

    nav {
        padding: 0;
        flex-direction: column
    }

    .burger-nav {
        align-content: center;
        align-items: center;
        color: #fff;
        display: flex;
        height: 6em;
        justify-content: flex-end;
        margin: 0 auto;
        width: 100%
    }

    .burger-nav.open {
        background-color: #4a4a4a
    }

    .burger-nav:hover {
        color: #fff;
        text-decoration: none
    }

    .navwrap {
        position: fixed;
        top: 5.5em;
        right: 0;
        height: 100%;
        width: 100%;
        display: none;
        background-color: rgba(74, 74, 74, .8)
    }

    .navwrap.open {
        display: block
    }

    .nav-list {
        margin: 0 auto;
        padding: 0;
        flex-direction: column;
        height: auto;
        overflow: hidden;
        margin: 0;
        padding: 0;
        display: none;
        background-color: #4a4a4a
    }

    .nav-list.open {
        display: block
    }

    .nav-list li {
        flex-basis: 100%;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .nav-list li:hover {
        background-color: #f4e8a2
    }

    .btn-nav {
        font-size: 1.25em;
        width: 100%
    }

    #hero-top {
        height: 100vh;
        text-align: center
    }

    #hero-logo {
        width: 90%
    }

    #short-we-do {
        padding-top: 2em;
        padding-bottom: 3.5em
    }

    #we-do-highlights-container {
        display: none
    }

    #short-we-do-text-container {
        width: 100%;
        text-align: center;
        padding: 2.5%
    }

    #short-we-do-text-container ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    #short-we-do-text-container ul li {
        background: 0 0;
        padding: 0
    }

    #testimonials {
        margin: 35vh 0
    }

    .testimonials-container {
        margin: 3em auto;
        width: 90%
    }
}

@media only screen and (max-width:600px) {
    .fancybox-content {
        width: 95%
    }
}

#hero-bottom {
    height: 20vh;
    min-height: 11em;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly
}

.btn-hero-jump {
    width: 100%;
    background-color: grey;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.btn-hero-jump:after {
    content: "";
    background-color: #000;
    opacity: .4;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0
}

.btn-hero-jump:hover {
    position: relative
}

.btn-hero-jump:hover .hero-jump-polygon>div {
    border-color: #f4e8a2
}

.btn-hero-jump:hover:after {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0
}

#btn-hero-jump-1 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-hero-jump-1 {
    background-image: url(../img/btn_hero-jump-1-fb.jpg)
}

.no-js #btn-hero-jump-1:hover {
    background-image: url(../img/btn-hover_hero-jump-1-fb.jpg)
}

.no-webp #btn-hero-jump-1 {
    background-image: url(../img/btn_hero-jump-1-fb.jpg)
}

.no-webp #btn-hero-jump-1:hover {
    background-image: url(../img/btn-hover_hero-jump-1-fb.jpg)
}

.webp #btn-hero-jump-1 {
    background-image: url(../img/btn_hero-jump-1-fb.jpg)
}

.webp #btn-hero-jump-1:hover {
    background-image: url(../img/btn-hover_hero-jump-1-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-hero-jump-1 {
        background-image: url(../img/btn_hero-jump-1-fb.jpg)
    }

    .webp #btn-hero-jump-1:hover {
        background-image: url(../img/btn-hover_hero-jump-1-fb.jpg)
    }
}

#btn-hero-jump-2 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-hero-jump-2 {
    background-image: url(../img/btn_hero-jump-2-fb.jpg)
}

.no-js #btn-hero-jump-2:hover {
    background-image: url(../img/btn-hover_hero-jump-2-fb.jpg)
}

.no-webp #btn-hero-jump-2 {
    background-image: url(../img/btn_hero-jump-2-fb.jpg)
}

.no-webp #btn-hero-jump-2:hover {
    background-image: url(../img/btn-hover_hero-jump-2-fb.jpg)
}

.webp #btn-hero-jump-2 {
    background-image: url(../img/btn_hero-jump-2-fb.jpg)
}

.webp #btn-hero-jump-2:hover {
    background-image: url(../img/btn-hover_hero-jump-2-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-hero-jump-2 {
        background-image: url(../img/btn_hero-jump-2-fb.jpg)
    }

    .webp #btn-hero-jump-2:hover {
        background-image: url(../img/btn-hover_hero-jump-2-fb.jpg)
    }
}

#btn-hero-jump-3 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-hero-jump-3 {
    background-image: url(../img/btn_hero-jump-3-fb.jpg)
}

.no-js #btn-hero-jump-3:hover {
    background-image: url(../img/btn-hover_hero-jump-3-fb.jpg)
}

.no-webp #btn-hero-jump-3 {
    background-image: url(../img/btn_hero-jump-3-fb.jpg)
}

.no-webp #btn-hero-jump-3:hover {
    background-image: url(../img/btn-hover_hero-jump-3-fb.jpg)
}

.webp #btn-hero-jump-3 {
    background-image: url(../img/btn_hero-jump-3-fb.jpg)
}

.webp #btn-hero-jump-3:hover {
    background-image: url(../img/btn-hover_hero-jump-3-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-hero-jump-3 {
        background-image: url(../img/btn_hero-jump-3-fb.jpg)
    }

    .webp #btn-hero-jump-3:hover {
        background-image: url(../img/btn-hover_hero-jump-3-fb.jpg)
    }
}

#btn-hero-jump-4 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #btn-hero-jump-4 {
    background-image: url(../img/btn_hero-jump-4-fb.jpg)
}

.no-js #btn-hero-jump-4:hover {
    background-image: url(../img/btn-hover_hero-jump-4-fb.jpg)
}

.no-webp #btn-hero-jump-4 {
    background-image: url(../img/btn_hero-jump-4-fb.jpg)
}

.no-webp #btn-hero-jump-4:hover {
    background-image: url(../img/btn-hover_hero-jump-4-fb.jpg)
}

.webp #btn-hero-jump-4 {
    background-image: url(../img/btn_hero-jump-4-fb.jpg)
}

.webp #btn-hero-jump-4:hover {
    background-image: url(../img/btn-hover_hero-jump-4-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #btn-hero-jump-4 {
        background-image: url(../img/btn_hero-jump-4-fb.jpg)
    }

    .webp #btn-hero-jump-4:hover {
        background-image: url(../img/btn-hover_hero-jump-4-fb.jpg)
    }
}

.btn-hero-jump-wrap {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.btn-hero-jump-wrap p {
    margin: 0 auto;
    padding: 0;
    color: #fff;
    z-index: 555;
    position: absolute;
    text-shadow: 0 0 4px #000;
    font-size: 1.25em
}

.hero-jump-polygon {
    height: 7em;
    width: 7em;
    display: grid;
    grid-template-columns: 3.5em 3.5em;
    grid-template-rows: 3.5em 3.5em;
    grid-gap: .2em;
    transform: rotate(-45deg)
}

.hero-jump-polygon div {
    display: inline-block;
    border: .01em solid #4a4a4a
}

.modal-recent-project-wrap {
    display: flex;
    flex-direction: column
}

.modal-recent-project-wrap div {
    display: flex;
    justify-content: space-between;
    flex-basis: 0
}

.modal-recent-project-wrap div img {
    width: 95%;
    height: auto
}

.modal-recent-project-wrap h2 {
    border-bottom: .1em solid #d4c220;
    padding: 1em 0 .4em 0;
    display: inline-block;
    margin-left: 0
}

.modal-recent-project-wrap p {
    font-size: 1.5em;
    line-height: 1.75em
}

#short-projects-wrap {
    position: relative;
    background-color: #fff;
    z-index: 0
}

#short-projects {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 0 0 6em 0
}

#short-projects h1 {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0;
    margin: 2em 0
}

#short-projects p {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    font-size: 1.5em;
    line-height: 1.75em;
    padding: 0 1em 2em 1em;
    text-align: center
}

#short-projects-intro {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around
}

#short-projects-intro div {
    max-width: 30%
}

#short-projects-intro div picture img {
    width: 100%
}

#short-projects-intro div p {
    text-align: left;
    padding: 1em 0 1em 0
}

#short-about-wrap {
    position: relative;
    background-color: #fff;
    z-index: 0;
    margin-top: 40vh
}

#short-about-clip {
    -webkit-clip-path: polygon(100% 0, 45% 0, 100% 100%);
    clip-path: polygon(100% 0, 45% 0, 100% 100%);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #e5e5e5;
    z-index: -555;
    display: table-row
}

#short-about {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 6em 0
}

.short-left {
    padding: 0 1.5em 0 3em;
    width: 40%
}

.short-left h1 {
    margin: auto;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    display: inline-block;
    color: #4a4a4a;
    margin-left: 0
}

.short-left p {
    font-size: 1.5em;
    line-height: 1.75em;
    color: #4a4a4a
}

.short-left p:last-of-type {
    padding-bottom: 1em
}

.short-right {
    width: 60%;
    padding: 0 1.5em 0 0
}

.short-right picture {
    justify-self: end
}

.short-right picture img {
    max-width: 750px
}

#video-home video {
    display: block;
    min-width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    transform: translate(0)
}

#main-display {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex-basis: 20%
}

#main-display div {
    height: 45em;
    width: 20%;
    background-size: cover;
    background-position: center;
    background-color: #4a4a4a;
    background-repeat: no-repeat
}

.no-js #img1,
.no-webp #img1 {
    background-image: url(../img/empireprojectmono_01-fb.jpg);
    transition: background-image .5s linear
}

.no-js #img1:hover,
.no-webp #img1:hover {
    background-image: url(../img/empireproject_01-fb.jpg);
    background-size: 130%
}

.no-js #img2,
.no-webp #img2 {
    background-image: url(../img/empireprojectmono_02-fb.jpg);
    transition: background-image .5s linear
}

.no-js #img2:hover,
.no-webp #img2:hover {
    background-image: url(../img/empireproject_02-fb.jpg);
    background-size: 130%
}

.no-js #img3,
.no-webp #img3 {
    background-image: url(../img/empireprojectmono_03-fb.jpg);
    transition: background-image .5s linear
}

.no-js #img3:hover,
.no-webp #img3:hover {
    background-image: url(../img/empireproject_03-fb.jpg);
    background-size: 130%
}

.no-js #img4,
.no-webp #img4 {
    background-image: url(../img/empireprojectmono_04-fb.jpg);
    transition: background-image .5s linear
}

.no-js #img4:hover,
.no-webp #img4:hover {
    background-image: url(../img/empireproject_04-fb.jpg);
    background-size: 130%
}

.no-js #img5,
.no-webp #img5 {
    background-image: url(../img/empireprojectmono_05-fb.jpg);
    transition: background-image .5s linear
}

.no-js #img5:hover,
.no-webp #img5:hover {
    background-image: url(../img/empireproject_05-fb.jpg);
    background-size: 130%
}

.webp #img1 {
    background-image: url(../img/empireprojectmono_01.webp);
    transition: background-image .5s linear
}

.webp #img1:hover {
    background-image: url(../img/empireproject_01.webp);
    background-size: 115%
}

.webp #img2 {
    background-image: url(../img/empireprojectmono_02.webp);
    transition: background-image .5s linear
}

.webp #img2:hover {
    background-image: url(../img/empireproject_02.webp);
    background-size: 115%
}

.webp #img3 {
    background-image: url(../img/empireprojectmono_03.webp);
    transition: background-image .5s linear
}

.webp #img3:hover {
    background-image: url(../img/empireproject_03.webp);
    background-size: 115%
}

.webp #img4 {
    background-image: url(../img/empireprojectmono_04.webp);
    transition: background-image .5s linear
}

.webp #img4:hover {
    background-image: url(../img/empireproject_04.webp);
    background-size: 115%
}

.webp #img5 {
    background-image: url(../img/empireprojectmono_05.webp);
    transition: background-image .5s linear
}

.webp #img5:hover {
    background-image: url(../img/empireproject_05.webp);
    background-size: 115%
}

#main-montage-display {
    height: 55em;
    width: 100%
}

#main-montage-display {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #main-montage-display {
    background-image: url(../img/empiremontage-fb.jpg)
}

.no-webp #main-montage-display {
    background-image: url(../img/empiremontage-fb.jpg)
}

.webp #main-montage-display {
    background-image: url(../img/empiremontage-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #main-montage-display {
        background-image: url(../img/empiremontage-fb.jpg)
    }
}

#short-sectors-container {
    background-color: #000
}

#short-sectors-wrap {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

#short-sectors {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    padding: 10% 2.5%;
    width: 30%;
    color: #fff
}

#short-sectors h1 {
    margin: auto;
    border-bottom: .1em solid #f4e8a2;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0;
    color: #fff
}

#short-sectors p {
    font-size: 1.5em;
    line-height: 1.75em;
    padding-bottom: 1em
}

#short-sectors-highlights-wrap {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center
}

#short-sectors-highlights-wrap {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #short-sectors-highlights-wrap {
    background-image: url(../img/short-sectors-bg-fb.jpg)
}

.no-webp #short-sectors-highlights-wrap {
    background-image: url(../img/short-sectors-bg-fb.jpg)
}

.webp #short-sectors-highlights-wrap {
    background-image: url(../img/short-sectors-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #short-sectors-highlights-wrap {
        background-image: url(../img/short-sectors-bg-fb.jpg)
    }
}

.short-sectors-polygon {
    height: 19em;
    width: 19em;
    display: grid;
    grid-template-columns: 9.5em 9.5em;
    grid-template-rows: 9.5em 9.5em;
    grid-gap: .2em;
    transform: rotate(-45deg)
}

.short-sectors-polygon a {
    display: inline-block;
    border: .01em solid #f4e8a2;
    text-decoration: none;
    position: relative;
    background-color: rgba(244, 232, 162, .5)
}

.short-sectors-polygon a:hover {
    transform: scale(1.75);
    z-index: 999;
    border: none
}

.short-sectors-polygon a p {
    margin: 0 auto;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    font-size: 1.25em !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    color: #000;
    transform: rotate(45deg)
}

#education-sector-polygon {
    background-color: rgba(244, 232, 162, .5);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

#education-sector-polygon::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 175%;
    height: 175%;
    z-index: -1;
    background-position: center;
    background-size: 90%;
    transform: rotate(45deg);
    background-color: #4a4a4a
}

.no-js #education-sector-polygon::before,
.no-webp #education-sector-polygon::before {
    background-image: url(../img/education-sector-fb.jpg)
}

.webp #education-sector-polygon::before {
    background-image: url(../img/education-sector.webp)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #education-sector-polygon::before {
        background-image: url(../img/education-sector-2x.webp)
    }
}

#commercial-sector-polygon {
    background-color: rgba(244, 232, 162, .5);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

#commercial-sector-polygon::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 175%;
    height: 175%;
    z-index: -1;
    background-position: center;
    background-size: 90%;
    transform: rotate(45deg);
    background-color: #4a4a4a
}

.no-js #commercial-sector-polygon::before,
.no-webp #commercial-sector-polygon::before {
    background-image: url(../img/commercial-sector-fb.jpg)
}

.webp #commercial-sector-polygon::before {
    background-image: url(../img/commercial-sector.webp)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #commercial-sector-polygon::before {
        background-image: url(../img/commercial-sector-2x.webp)
    }
}

#hotel-sector-polygon {
    background-color: rgba(244, 232, 162, .5);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

#hotel-sector-polygon::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 175%;
    height: 175%;
    z-index: -1;
    background-position: center;
    background-size: 90%;
    transform: rotate(45deg);
    background-color: #4a4a4a
}

.no-js #hotel-sector-polygon::before,
.no-webp #hotel-sector-polygon::before {
    background-image: url(../img/hotel-sector-fb.jpg)
}

.webp #hotel-sector-polygon::before {
    background-image: url(../img/hotel-sector.webp)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #hotel-sector-polygon::before {
        background-image: url(../img/hotel-sector-2x.webp)
    }
}

#healthcare-sector-polygon {
    background-color: rgba(244, 232, 162, .5);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

#healthcare-sector-polygon::before {
    content: "";
    position: absolute;
    top: -35%;
    left: -35%;
    width: 175%;
    height: 175%;
    z-index: -1;
    background-position: center;
    background-size: 90%;
    transform: rotate(45deg);
    background-color: #4a4a4a
}

.no-js #healthcare-sector-polygon::before,
.no-webp #healthcare-sector-polygon::before {
    background-image: url(../img/healthcare-sector-fb.jpg)
}

.webp #healthcare-sector-polygon::before {
    background-image: url(../img/healthcare-sector.webp)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #healthcare-sector-polygon::before {
        background-image: url(../img/healthcare-sector-2x.webp)
    }
}

@media only screen and (max-width:1100px) {
    #short-about {
        padding: 2.5em 0
    }

    .short-left {
        width: 100%;
        padding: 2.5%;
        text-align: center
    }

    #short-sectors-container {
        padding-top: 2em;
        padding-bottom: 3.5em
    }

    #short-sectors {
        width: 100%;
        padding: 2.5%;
        text-align: center
    }
}

@media only screen and (max-width:800px) {
    #short-projects-intro {
        flex-wrap: wrap
    }

    #short-projects-intro div {
        max-width: 75%;
        padding: 2em 0 2em 0
    }

    #short-projects-intro div p {
        text-align: center
    }

    #short-projects-intro div a {
        display: block;
        text-align: center;
        max-width: none
    }

    #short-projects-3 {
        display: none
    }

    .modal-recent-project-wrap div:nth-last-child(1) {
        display: none
    }
}

.service-wrap {
    background-color: #4a4a4a
}

.service-wrap:nth-child(2),
.service-wrap:nth-child(5),
.service-wrap:nth-child(7) {
    background-color: #fff
}

.service-wrap:nth-child(2) .service-copy h1,
.service-wrap:nth-child(2) .service-copy p,
.service-wrap:nth-child(5) .service-copy h1,
.service-wrap:nth-child(5) .service-copy p,
.service-wrap:nth-child(7) .service-copy h1,
.service-wrap:nth-child(7) .service-copy p {
    color: #4a4a4a
}

.service-container {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    color: #fff;
    text-align: left;
    padding: 8em 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.service-container.right .service-copy {
    order: 2
}

.service-container.right .service-image {
    order: 1
}

.service-copy {
    width: 45%;
    padding: 0 2em
}

.service-copy h1 {
    border-bottom: .1em solid #d4c220;
    display: inline-block;
    justify-self: start;
    align-self: start;
    font-size: 2.18em;
    line-height: 1.5em;
    color: #fff
}

.service-copy p {
    font-size: 1.5em;
    line-height: 1.75em;
    grid-area: text
}

.service-copy p:last-of-type {
    margin: 0
}

.service-copy p a {
    color: #f4e8a2;
    text-decoration: none
}

.service-copy p a:hover {
    text-decoration: underline
}

.service-image {
    width: 45%
}

.service-image picture img {
    display: block;
    width: 100%;
    max-width: 40em;
    padding: 0 2em
}

#project-management-service {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #project-management-service {
    background-image: url(../img/dedicated-project-management-bg-fb.jpg)
}

.no-webp #project-management-service {
    background-image: url(../img/dedicated-project-management-bg-fb.jpg)
}

.webp #project-management-service {
    background-image: url(../img/dedicated-project-management-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #project-management-service {
        background-image: url(../img/dedicated-project-management-bg-fb.jpg)
    }
}

@media only screen and (max-width:1100px) {
    .service-container {
        flex-direction: column-reverse
    }

    .service-image {
        width: 100%;
        margin-top: 3em
    }

    .service-image picture img {
        margin: 0 auto;
        width: 90%;
        max-width: none;
        max-width: 30em
    }

    .service-copy {
        width: 90%;
        text-align: center
    }
}

#about-hero-wrap {
    width: 100%;
    background-color: #e5e5e5
}

#about-hero-wrap img {
    margin: 0 auto;
    padding: 0;
    margin: 0 auto;
    padding: 2em 0;
    max-width: 50vw;
    min-width: 50vw;
    background-color: #e5e5e5;
    display: block
}

@media only screen and (max-width:1100px) {
    #about-hero-wrap img {
        max-width: 90vw
    }
}

#sectors-list {
    background-color: #4a4a4a;
    padding: 6em 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center
}

#sectors-list h1 {
    margin: 0 auto;
    padding: 0;
    color: #fff;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    margin: 2em 0
}

#sectors-list {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #sectors-list {
    background-image: url(../img/sectors-bg-fb.jpg)
}

.no-webp #sectors-list {
    background-image: url(../img/sectors-bg-fb.jpg)
}

.webp #sectors-list {
    background-image: url(../img/sectors-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #sectors-list {
        background-image: url(../img/sectors-bg-fb.jpg)
    }
}

#sectors-highlights-container {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    width: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center
}

.sectors-highlights {
    width: 40%;
    min-width: 250px;
    background-color: grey;
    margin: 1em;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none
}

.sectors-highlights:hover {
    position: relative
}

.sectors-highlights:hover .hero-jump-polygon>div {
    border-color: #f4e8a2
}

.sectors-highlights:hover:after {
    content: "";
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0
}

#sectors-1 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #sectors-1 {
    background-image: url(../img/education-sector-fb.jpg)
}

.no-webp #sectors-1 {
    background-image: url(../img/education-sector-fb.jpg)
}

.webp #sectors-1 {
    background-image: url(../img/education-sector-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #sectors-1 {
        background-image: url(../img/education-sector-fb.jpg)
    }
}

#sectors-2 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #sectors-2 {
    background-image: url(../img/commercial-sector-fb.jpg)
}

.no-webp #sectors-2 {
    background-image: url(../img/commercial-sector-fb.jpg)
}

.webp #sectors-2 {
    background-image: url(../img/commercial-sector-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #sectors-2 {
        background-image: url(../img/commercial-sector-fb.jpg)
    }
}

#sectors-3 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #sectors-3 {
    background-image: url(../img/hotel-sector-fb.jpg)
}

.no-webp #sectors-3 {
    background-image: url(../img/hotel-sector-fb.jpg)
}

.webp #sectors-3 {
    background-image: url(../img/hotel-sector-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #sectors-3 {
        background-image: url(../img/hotel-sector-fb.jpg)
    }
}

#sectors-4 {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #sectors-4 {
    background-image: url(../img/healthcare-sector-fb.jpg)
}

.no-webp #sectors-4 {
    background-image: url(../img/healthcare-sector-fb.jpg)
}

.webp #sectors-4 {
    background-image: url(../img/healthcare-sector-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #sectors-4 {
        background-image: url(../img/healthcare-sector-fb.jpg)
    }
}

.sectors-highlights-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 24px #000
}

.sectors-highlights-wrap p {
    margin: 0 auto;
    padding: 0;
    z-index: 555;
    position: absolute;
    text-shadow: 0 0 4px #000
}

.sectors-polygon {
    height: 10em;
    width: 10em;
    display: grid;
    grid-template-columns: 5em 5em;
    grid-template-rows: 5em 5em;
    grid-gap: .2em;
    transform: rotate(-45deg);
    margin: 20%
}

.sectors-polygon div {
    display: inline-block;
    border: .01em solid #f4e8a2
}

@media only screen and (max-width:625px) {
    .sectors-highlights {
        width: 100%
    }
}

#gallery {
    margin: 0 auto;
    padding: 0;
    max-width: 100%;
    background-color: #4a4a4a;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 3em 0
}

#gallery a {
    width: 20em;
    margin: .25em;
    display: block;
    box-sizing: border-box;
    overflow: hidden
}

#gallery a img {
    box-sizing: border-box;
    display: block;
    max-width: 100%;
    height: auto;
    transition: all .3s;
    transform: scale(1)
}

#gallery a img:hover {
    transform: scale(1.25)
}

#gallery-hero {
    margin: 0 auto;
    padding: 0
}

#gallery-hero img {
    display: block;
    max-width: 100%;
    background-color: #d4c220
}

#contact-intro {
    text-align: center;
    color: #4a4a4a;
    padding-top: 5em
}

#contact-intro h1 {
    margin: auto;
    margin-bottom: 2em;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0
}

#contact-container {
    background-color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center
}

.no-js #contact-container {
    background-image: url(../img/contact-bg-fb.jpg)
}

.no-webp #contact-container {
    background-image: url(../img/contact-bg-fb.jpg)
}

.webp #contact-container {
    background-image: url(../img/contact-bg-fb.jpg)
}

@media only screen and (-Webkit-min-device-pixel-ratio:1.5),
only screen and (-moz-min-device-pixel-ratio:1.5),
only screen and (-o-min-device-pixel-ratio:3/2),
only screen and (min-device-pixel-ratio:1.5) {
    .webp #contact-container {
        background-image: url(../img/contact-bg-fb.jpg)
    }
}

#contact-wrap {
    margin: 0 auto;
    max-width: 1500px;
    box-sizing: border-box;
    padding: 10em 2.5em 5em 2.5em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around
}

#details {
    background-color: rgba(255, 255, 255, .8);
    width: 45%;
    padding: 2.5%;
    box-sizing: border-box
}

#details h2 {
    margin: auto;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0;
    font-size: 2.2em
}

#details p {
    font-size: 1.5em;
    line-height: 1.75em;
    width: 60%
}

#details p span {
    font-weight: 700
}

#details p a {
    margin: 0 auto;
    padding: 0;
    color: #4a4a4a;
    text-decoration: none
}

#details img {
    background-color: #f4e8a2;
    min-width: 100%;
    max-width: 575px;
    min-height: 25vh;
    max-width: 235px
}

#form {
    background-color: rgba(255, 255, 255, .8);
    width: 45%;
    padding: 2.5%;
    box-sizing: border-box
}

#form h2 {
    margin: auto;
    margin-bottom: .75em;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0;
    font-size: 2.2em
}

#form label {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.75em
}

#form input,
#form textarea {
    padding: .25em .5em;
    border: .05em solid #4a4a4a;
    box-sizing: border-box;
    border-radius: .2em;
    font-size: 1.5em;
    line-height: 1.5em;
    width: 100%;
    resize: none;
    margin-bottom: 1.5em
}

#form p {
    font-size: 1em;
    line-height: 1.75em
}

#form button {
    background-color: #d4c220;
    border: none;
    padding: 1em 2.5em;
    text-align: center;
    color: #4a4a4a
}

#form button:hover {
    box-shadow: 0 0 3px #000;
    text-shadow: 0 0 1px #000
}

#our-map {
    text-align: center
}

#our-map h1 {
    margin: auto;
    margin-top: 2em;
    border-bottom: .1em solid #d4c220;
    padding: 0 0 .4em 0;
    display: inline-block;
    margin-left: 0
}

#our-map iframe {
    height: 65vh;
    max-width: 95%;
    box-sizing: content-box;
    margin-top: 3em;
    margin-bottom: 6em
}

@media only screen and (max-width:1100px) {
    #contact-wrap {
        flex-direction: column;
        padding: 0 5%;
        text-align: center
    }

    #details,
    #form {
        width: 100%;
        margin: 2em 0
    }

    #details p,
    #form p {
        width: 100%
    }
}

@media only screen and (max-width:400px) {
    #contact-wrap {
        padding: 0
    }
}