/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* Fonts */

@font-face {
    font-family: 'Museosans_100';
    font-weight: 100;
    font-style: normal;
    src: url('../css/fonts/museosans/museosans_100-webfont.eot') format('embedded-opentype'),
    url('../css/fonts/museosans/museosans_100-webfont.woff') format('woff'),
    url('../css/fonts/museosans/museosans_100-webfont.ttf') format('truetype')
}

@font-face {
    font-family: 'Museosans_300';
    font-weight: 300;
    font-style: normal;
    src: url('../css/fonts/museosans/museosans_300-webfont.eot') format('embedded-opentype'),
    url('../css/fonts/museosans/museosans_300-webfont.woff') format('woff'),
    url('../css/fonts/museosans/museosans_300-webfont.ttf') format('truetype')
}

@font-face {
    font-family: 'Museosans_500';
    font-weight: 500;
    font-style: normal;
    src: url('../css/fonts/museosans/museosans_500-webfont.eot') format('embedded-opentype'),
    url('../css/fonts/museosans/museosans_500-webfont.woff') format('woff'),
    url('../css/fonts/museosans/museosans_500-webfont.ttf') format('truetype')
}

@font-face {
    font-family: 'Museosans_700';
    font-weight: 700;
    font-style: normal;
    src: url('../css/fonts/museosans/museosans_700-webfont.eot') format('embedded-opentype'),
    url('../css/fonts/museosans/museosans_700-webfont.woff') format('woff'),
    url('../css/fonts/museosans/museosans_700-webfont.ttf') format('truetype')
}

@font-face {
    font-family: 'Museosans_900';
    font-weight: 900;
    font-style: normal;
    src: url('../css/fonts/museosans/museosans_900-webfont.eot') format('embedded-opentype'),
    url('../css/fonts/museosans/museosans_900-webfont.woff') format('woff'),
    url('../css/fonts/museosans/museosans_900-webfont.ttf') format('truetype')
}

@font-face {
    font-family: 'Droid Serif';
    font-style: normal;
    font-weight: 400;
    src: local('Droid Serif'), local('DroidSerif'), url('https://fonts.gstatic.com/s/droidserif/v6/0AKsP294HTD-nvJgucYTaIgp9Q8gbYrhqGlRav_IXfk.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* END Fonts */

/* Font Classes */

.ff1 {
    font-family: 'Museosans_100', sans-serif;
}

.ff3 {
    font-family: 'Museosans_300', sans-serif;
}

.ff5 {
    font-family: 'Museosans_500', sans-serif;
}

.ff7 {
    font-family: 'Museosans_700', sans-serif;
}

.ff9 {
    font-family: 'Museosans_900', sans-serif;
}

.ff-droid {
    font-family: 'Droid Serif', serif;
}

.text-white {
    color: #ffffff;
}

a {
    text-decoration: none;
    color: #000000;
}

a:hover {
    opacity: .9;
}

.text-red {
    color: #e24347;
}

.text-red:visited,
.text-red:focus,
.text-red:active {
    color: #e24347;
}

.fs130 {
    font-size: clamp(42px, 6.771vw, 130px);
}

.fs111 {
    font-size: clamp(52px, 5.781vw, 111px);
}

.fs80 {
    font-size: clamp(40px, 4.167vw, 80px);
}

.fs40 {
    font-size: clamp(24px, 2.083vw,40px);
}

.fs35 {
    font-size: clamp(23px, 1.823vw,35px);
}

.fs26 {
    font-size: clamp(20px, 1.354vw, 26px);
}

.fs24 {
    font-size: clamp(18px, 1.250vw, 24px);
}

.lh12 {
    line-height: 1.2;
}

.lh13 {
    line-height: 1.3;
}

.lh14 {
    line-height: 1.4;
}

.lh15 {
    line-height: 1.5;
}

.ls-40 {
    letter-spacing: -0.04em;
}

h1, h2, h3 {
    text-transform: uppercase;
}


/* Section Styles */

body {
    /*max-width:1920px;*/
    /*margin: 0 auto;*/
}

.img-container {
    margin: 0 -20px;
}

img {
    max-width: 100%;
    height: auto;
    position: relative;
    z-index:1;
}

h2, .text {
    position:relative;
    z-index:2;
}

/* Header */
.header .bg-container {
    /*background-attachment: fixed;*/
    background-position:center;
    background-image: url('../images/header.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
    display:flex;
    flex-wrap: wrap;
}

.header .bg-container .top-bar {
    align-self: flex-start;
    flex: 0 0 100%;
    z-index: 10;
    position:relative;
}

.header .bg-container .logo-container {
    width:120px;
    margin: 0 auto;
    padding-top: max(4vh, 30px);
}

.header .bg-container .text-container {
    align-self: flex-end;
    margin: 0 auto;
    text-align: center;
    padding-bottom: max(4vh, 30px);
    position: relative;
    z-index: 10;
}

.header .bg-container .text-container h1 {
    margin-bottom: max(4vh, 30px);
}

.header .bg-container .text-container div.ff-droid {
    margin-bottom: max(4vh, 30px);
}

.header .scroll-to {
    cursor: pointer;
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 0 10px;
}

.header .scroll-to i {
    color: #fff;
    font-style: normal;
}

.main {
    padding: max(6vh, 50px) 20px;
    max-width:1920px;
    margin: 0 auto;
}


/* Commercial, Contract & Workplace */

.comm {
    margin-bottom: max(6vh, 50px);
}

.comm .content .text h2 {
    display: none;
}

.comm .top h2 {
    text-align:center;
}

.comm .content .img-container {
    padding: max(4vh, 30px) 0 0;
}

/* Our Capabilities */

.caps {
    margin-bottom: max(6vh, 50px);
}

.caps .content .text h2 {
    display: none;
}

.caps .top h2 {
    text-align:center;
}

.caps .content .img-container {
    padding: max(4vh, 30px) 0 0;
}

/* Our Experience */

.exp {
    margin-bottom: max(6vh, 50px);
}

.exp .top h2 {
    text-align:center;
}

.exp .content .img-container {
    padding: max(6vh, 50px) 0 0;
}

/* Our Process */

.process {
    margin-bottom: max(6vh, 50px);
}

.process .top h2 {
    text-align:center;
}

.process .content .img-container {
    padding: max(6vh, 50px) 0 0;
}

/* Reimagining retail environments */

.retail {
    margin-bottom: max(6vh, 50px);
}

.retail .content .text h2 {
    display: none;
}

.retail .top h2 {
    text-align:center;
}

.retail .content .img-container {
    padding: max(4vh, 30px) 0 0;
}

/* Discover, Partner & Connect */

.disc {
    margin-bottom: max(6vh, 50px);
}

.disc .content .text h2 {
    display: none;
}

.disc .top h2 {
    text-align:center;
}

.disc .content .img-container {
    padding: max(4vh, 30px) 0 0;
}

/* Page Bottom */
.bottom {
    margin: 0 -20px;
    padding: max(4vh, 30px) 0 0;
    text-align:center;
}

.bottom h3,
.bottom .link,
.bottom .contact {
    border-bottom: 1px solid rgba(0,0,0,.23);
    padding: max(4vh, 30px) 20px;
}

.top-banner-wrapper     {position: relative; display: block; width: auto; height: auto; padding: 60px 0px 60px 0px;}
.top-banner             {position: relative; display: flex; width: 100%; max-width: 1400px; margin: 0px auto 0px auto;}
.col                 {display: flex; flex: 0 0 50%; min-width: 0; background-color: #000000; color: #ffffff; align-items: center; justify-content: center;}
.col img             {position: relative; display: block; width: 100%; height: auto;}

.col span      {position: relative; display: block; color: #AAAAAA; font-family: 'Museosans_500'; font-size: 12px; line-height: 27px;}
.col strong    {position: relative; display: block; font-size: 26px; line-height: 33px; font-family: 'Droid Serif'; margin-bottom: 40px; font-weight: 400;}
.col strong em {font-style: normal; font-family: 'Museosans_900';}
.col .button   {position: relative; display: inline-block; width: auto; height: 40px; line-height: 40px; border-radius: 70px; border: 1px solid #494949; font-family: 'Museosans_700'; font-size: 14px; color: #ffffff; padding: 0px 25px 0px 50px; background: url(images/arrow-right.svg) 18px center no-repeat;}

.col > div     {position: relative; display: block; width: auto; height: auto; max-width: 500px; box-sizing: border-box; padding-left: 20px; padding-right: 20px;}

/* Footer */

footer .sm-icons {
    display: flex;
    justify-content: space-evenly;
    padding: 0 20px max(4vh, 30px);
}

footer .sm-icons .sm-icon i {
    font-size: 20px;
}

@media(max-width:767px) {
   .top-banner    {flex-direction: column-reverse;}  
   .col           {flex: 0 0 100%;}
   .col > div     {padding-top: 40px; padding-bottom: 40px;}
}

@media(max-width:767px) {
   .top-banner-wrapper  {padding-top: 0px; padding-bottom: 20px;}
    .col > div      {max-width: 400px;}
    .col strong    {font-size: 18px; line-height: 25px; margin-bottom: 20px;}
    .col .button  {height: 30px; line-height: 30px; font-size: 12px;}
}

@media(min-width:768px) and (max-width: 990px) {
   .row {
        margin: max(11vh, 100px) 0;
    }
    .top-banner-wrapper  {padding-top: 0px; padding-bottom: 20px;}
    .col > div      {max-width: 400px;}
    .col strong    {font-size: 20px; line-height: 27px;}

    .header .bg-container {
        background-position:center;
        background-size: cover;
        background-attachment: fixed;
    }

    .row.comm {
        margin-top: max(6vh, 50px);
    }

    .caps .img-container img {
        margin: 0 auto;
        display:block;
    }

    .headquarters {
        margin-bottom: max(3vh, 20px);
    }

    .bottom {
        margin: 0 -20px;
    }
}


@media(min-width: 991px) {

    .img-container {
        margin: 0 0;
    }

    .main {
        padding: max(6vh, 50px) 0;
    }

    .row {
        margin: max(11vh, 100px) 0;
    }

    .header .bg-container {
        background-position:center;
        background-size: auto;
        background-attachment: fixed;
    }

    /* Commercial, Contract & Workplace */

    .comm .top {
        display:none;
    }

    .comm .content {
        display: flex;
        justify-content: flex-end;
    }

    .comm .content .img-container {
        flex: 0 1 auto;
        order: 2;
        padding-top: 0;
    }

    .comm .content .text {
        flex: 0 0 50%;
        order: 1;
        max-width:800px;
        padding-left:20px;
        display:flex;
        flex-wrap: wrap;
    }

    .comm .content .text h2 {
        display: flex;
        margin-bottom: max(6vh, 50px);
    }

    .comm .content .text div {
        max-width:675px;
        padding-right:40px;
    }

    /* Our Capabilities */

    .caps .top {
        display:none;
    }

    .caps .content {
        display: flex;
        justify-content: space-between;
    }

    .caps .content .text h2 {
        display: flex;
        padding-left:40px;
        margin-bottom: max(6vh, 50px);
    }

    .caps .content .img-container {
        flex: 0 1 auto;
        order: 1;
        justify-self: flex-start;
        padding-top: 0;
    }

    .caps .content .text {
        flex: 0 0 54%;
        order: 2;
        /*max-width:820px;*/
        padding-right:20px;
        display:flex;
        flex-wrap: wrap;

    }

    .caps .content .text div {
        max-width:675px;
        padding-left:40px;
    }

    /* Our Experience */

    .exp .content .img-container {
        padding: max(6vh, 50px) 0;
    }

    .exp .img-container img {
        margin: 0 auto;
        display: block;
    }

    .exp .text {
        max-width:900px;
        margin: 0 auto;
        text-align:center;
    }

    /* Our Process */

    .process .top h2 {
        margin-bottom: max(6vh, 50px);
    }

    .process .content {
        display:flex;
    }

    .process .content .img-container {
        flex: 0 0 50%;
        padding-top: 0;
    }

    .process .content .text {
        flex: 0 0 50%;
        align-self: center;
    }

    .process .content .text div {
        max-width: 700px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Retail */

    .retail .top {
        display:none;
    }

    .retail .content {
        display: flex;
        justify-content: flex-end;
    }

    .retail .content .img-container {
        flex: 0 0 43.49%;
        order: 2;
        padding-top: 0;
    }

    .retail .content .text {
        flex: 0 0 50%;
        order: 1;
        max-width:808px;
        padding-left:20px;
        display:flex;
        flex-wrap: wrap;
    }

    .retail .content .text h2 {
        display: flex;
        margin-bottom: max(6vh, 50px);
    }

    .retail .content .text div {
        max-width: 720px;
        padding-right: 40px;
    }

    /* Discover */

    .disc .top {
        display:none;
    }

    .disc .content {
        display:flex;
    }

    .disc .content .img-container {
        flex: 0 0 calc(56.51% - 40px);
        padding-top: 0;
    }

    .disc .content .text {
        flex: 0 0 calc(43.49% + 40px);
        align-self: center
    }

    .disc .content .text h2 {
        display: block;
        padding: 0 20px;
        margin-bottom: max(6vh, 50px);
    }

    .disc .content .text div {
        padding: 0 20px;
        max-width:575px;
    }

    .headquarters .img-container img {
        display:block;
        margin: 0 auto;
    }

    .bottom {
        margin: 0;
    }

    .bottom .contact  {
        display:flex;
        /*justify-content: space-evenly;*/
    }

    .bottom .contact div {
        flex: 0 0 33.33333%;
        /*text-align: center;*/
    }

    .bottom .contact .addr {
        flex: 0 0 37%;
        text-align:right;
    }

    .bottom .contact .phone {
        flex: 0 0 26%;
        text-align:center;
    }

    .bottom .contact .email {
        flex: 0 0 37%;
        text-align:left;
    }

    .bottom .contact .phone a {
        display:block;
    }

    footer .sm-icons {
        justify-content: center;
    }

    footer .sm-icons .sm-icon {
        margin: 20px 50px;
    }
}

@media(min-width: 1921px) {
    .header .bg-container {
        background-image: url('../images/header.jpg');
    }
}