@font-face {
    font-family: 'Proxima Nova';
    font-weight: normal;
    src: url('../fonts/proximanova-regular-webfont.woff');
}

@font-face {
    font-family: 'Proxima Nova';
    font-weight: 300;
    src: url('../fonts/proximanova-light-webfont.woff');
}

@font-face {
    font-family: 'Proxima Nova';
    font-weight: 700;
    src: url('../fonts/ProximaNova-Bold.otf');
}

html {font-family: 'Proxima Nova', sans-serif; font-weight: 300;}
html, body {font-family: 'Proxima Nova', sans-serif; font-weight: 300;}
body { background: #FDFDFF;background: #1d1e21; color: #2d3465;}


*,
*:after,
*:before {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #2d3465;
    outline: none;
}

a:hover {
    color: #2d3465;
}

a[href^=tel] {
    color: #2d3465;
}

.part {opacity:0; transition: opacity 1.1s;}
.part.active {opacity:1;}

.container {margin:auto; width: 85%;}

h1, h2, h3, h4, h5 {position:relative; font-family: 'Work Sans', sans-serif; font-weight: 600; text-align: center; color: #2d3465; }
h1 {font-size: 3em; text-transform: uppercase;}
h2 {font-size: 2em;}
h2.intro {font-size: 1.4em;  font-weight: 400; text-align: center;  margin-top:0; margin-bottom: 80px; font-family: 'Proxima Nova';}
h2 .emphasis {font-weight: 500;}

h1.header {margin-top:80px; margin-bottom: 40px;}
h1::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 150px;
    height: 4px;
    margin: 0px 0 0px 0px;
    background: #ce3434;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

/***** FRONT PAGE *****/

video::-webkit-media-controls {display: none !important}
figure { margin:0px; padding: 0px;}
figure video {margin: 0px;}

.frontpage {position:relative; width: 100vw; height: 100vh; overflow: hidden; background: url('../img/background.jpg'); background-size: cover; background-position: center top; background-repeat: none; background-attachment: top;}
.frontpage video.fullscreen { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translate(-50%, -50%); opacity: 0.7; z-index:-1; filter: brightness(210%) contrast(340%) blur(110px);}
.frontpage .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #00011b; background-blend-mode: overlay; z-index:-1;}
.frontpage .overlay {background: #00155f;}
.frontpage .halo {position:absolute; left:50%; top: 55%; transform: translate(-50%,-50%); width:80%; text-align: center; z-index:1;}
.frontpage svg.logo {position:absolute; top:20px; left:20px; height:80px;}
.frontpage .logo img {height:80px;}
.frontpage .halo .logo {display: inline-block;}
.frontpage .halo .logo img {width:330px; max-width:100%; opacity: 0.85;}
.frontpage .halo .claim {font-family: 'Work Sans'; font-weight: 800; font-size: 4.6vw; line-height: 1.2em; color: white; margin-top: 10px; color: #FFF; opacity: 1; text-transform: uppercase; text-shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px;}
.frontpage .halo .intro {font-size: 1.3em; line-height: 1.3em; margin-top:60px; color:#EFEFEF}

.whyus {padding: 40px 0px; text-align: center;}
.whyus .item {margin-bottom: 100px;}
.whyus h1 {margin-bottom:80px;}

.checkmore {margin-bottom:60px; padding: 40px 0px;}


/***** CTA *****/

.cta {text-align: center; }
.cta .text {font-family: 'Work Sans'; font-size: 2.3em; font-weight: 700; margin: 15px 0px;}
.cta .btn {cursor: pointer; font-family: 'Proxima Nova'; font-weight: 700; display:inline-block; padding: 5px 40px; font-size: 2em; background: #ce2d30; border-radius: 12px; color: white; text-transform: uppercase; box-shadow: 0px 0px 10px rgba(0,0,0,0.2)}

.frontpage .cta {margin-top: 80px;}

.frontpage .readmore {position: absolute; bottom: 40px; left: 50%; margin-left:-35px; text-align: center; }
.readmore .button { font-size: 3em; background: transparent; display: inline-block; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; text-align: center; color: #FAFAFA; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.25);}
.readmore .button i {line-height: 70px;}



/***** SERVICES *****/

.services {}
// .services h1.header {margin-top:80px; margin-bottom: 10px;}

// .services h2 {margin: 40px 0px 60px 0px;}

.services .toplevel {background: transparent; text-align: center; margin: 0px 60px 80px 60px;}
.services .toplevel .item {float:left; width: 20%; margin:0; padding:0px 0px 40px 0px;}
.services .toplevel .item h4 {font-size: 1.25em; margin-bottom:15px;}
.services .toplevel .item .text {padding: 0px 20px 20px 20px; font-size: 1.1em;}
.services .toplevel .item .icon {text-align: center; font-size: 5em; width: 80px; height:80px; line-height: 80px; margin:0px auto 30px auto; }

.services .software {text-align: center; margin: 0px 60px 80px 60px;}
.services .software .item {display:inline-block; width: 400px; margin:5px; padding:0; height: 100px; line-height: 100px; background: #F3F3F9; font-weight: 400;}

.services .infrastructure {text-align: center; margin: 0px 60px 120px 60px;}
.services .infrastructure .item {display:inline-block; width: 400px; margin:5px; padding:0; height: 100px; line-height: 100px; background: #F3F3F9; font-weight: 400;}

.services .business {text-align: center; margin: 0px 60px 120px 60px;}
.services .business .item {display:inline-block; width: 400px; margin:5px; padding:0; height: 100px; line-height: 100px; background: #F3F3F9; font-weight: 400;}

#servicescta {margin-bottom: 80px;}

/***** TECHNOLOGY *****/

.technologies {}
.technologies .items {margin:0px 60px; text-align: center;}
.technologies .items .item {display:inline-block; margin:25px 50px;}
.technologies .items .item img {max-height:120px; transition: all 1s;}
.technologies .items .item img:hover {}

/***** HOW WE WORK *****/

#work {}
#work .icon {text-align: center; margin: 40px;}
#work .icon i {font-size: 4em; color: #AAA;}
#work .text {width: 80%; margin: auto;}

#work .items {text-align: center; margin: 80px 0px 200px 0px; text-align: center; display:flex;}
#work .items .item {flex:1; background: rgba(0,0,0,0.04);  margin: 10px 5px; display:block; padding: 10px 10px 50px 10px;}

/***** ENTERPRISES *****/

.enterprises {margin-bottom: 80px; transition: opacity 1.3s;}
.enterprises .icon {text-align: center; margin: 40px;}
.enterprises .icon i {font-size: 4em; color: #AAA;}
.enterprises .text {width: 80%; margin: auto;}

/***** STARTUPS *****/

.startups {margin-bottom: 80px; transition: opacity 1.3s;}
.startups .icon {text-align: center; margin: 40px;}
.startups .icon i {font-size: 4em; color: #AAA;}
.startups .text {width: 80%; margin: auto;}

/***** VALUES *****/
#values.page {background: #FFF; color: white; transition: transform 0.45s, opacity 0.45s, background .9s;}
#values.page.bgValues {background: #161519;}
body.bgValues {background: #161519;}
html.bgValues {background: #161519;}

.values {position:relative; margin-bottom: 1vh;}
.values.active {}
#values .values .top {padding-bottom: 100px;}
#values .values h1.header {font-size: 6em;  margin-top: 35vh;  color: #252b59;}
#values .values h1.header::before {content:none;}
.values .icon {text-align: center; margin: 40px;}
.values .icon i {font-size: 4em; color: #AAA;}
.values .text {}
.values .items {margin:auto; text-align: right; margin-top: 100vh; }
.values .item {height: 100vh; font-size: 1.3em; transition: opacity 1.1s;  margin:20px 0px; margin-bottom:105vh; opacity:0;}
.values .safari-bugfix{height: 20px;}
.values .item-container {}
.values .item-container .claim {position:absolute; opacity:1; font-size: 10em; text-align: left; color: rgba(200,200,255,0.05); padding-left:10%; margin-top: 20vh; font-weight: 700; text-transform: uppercase; }
.values .item .header {font-size: 2.5em; font-weight: 700; padding-top:25vh; font-family: 'Proxima Nova'; line-height: 1em;}
.values .item .header .dot {color: #8a0909; font-family: 'Proxima Nova';}
.values .item .header .matters {color: #EEE;}
.values .item .text div {margin:20px 0px; color: #BBB;}
.values .item.innovation {margin-bottom: 100vh;}
.values .disp {display:none; padding:0px 10%; position: fixed; top:0; bottom:0; left:0; right:0; width:100%; height:100vh; text-align: right; color:white; z-index:-1; background-color: transparent; }
.disp .item {opacity:1}

.values .follow {position: absolute; margin-top: 40px; margin-bottom:100vh; left: 50%; margin-left:-35px; text-align: center;  width: 70px; height:70px;}
.values .follow .button {position:absolute; font-size: 6em; background: transparent; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; text-align: center; transition: color .5s; animation: scrl 2.2s infinite cubic-bezier(0.38, 0.07, 0.43, 0.88);}
.values.active .follow .button {color: #252b59;}
.values .follow .button i {line-height: 70px;}


/***** REFERENCES *****/

.references {position: relative; margin-bottom: 80px;  text-align: center;}
.references .icon {text-align: center; margin: 40px;}
.references .icon i {font-size: 4em; color: #AAA;}
// .references h1.header {margin-bottom: 40px;}
.references .text {width: 80%; margin: auto;}

.references .clients {opacity:0.9;}
.references .logo {position:relative; width:200px; display:inline-block; margin: 40px 80px; text-align: center;}
.references .logo img {width:100%;}
.references .logo a {position:absolute; top:0; left:0; width:100%; height:100%; z-index:111211; background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);}

.references .logo.fortune500 img {max-width:140px;}
.references .logo.hammerquist img {max-width:170px;}
.references .logo.onet img {max-width:210px;}
.references .logo.corton img {max-width:100px;}
.references .logo.pzm img {max-width:100px;}
.references .logo.salsalibre img {max-width:160px;}
.references .logo.zbiorowepozwy img {max-width:300px;}

.references .follow {position: absolute; margin-top: 50vh; left: 50%; margin-left:-35px; text-align: center;  }
.references .follow .button {position:absolute; font-size: 6em; background: transparent; display: inline-block; width: 70px; height: 70px; line-height: 70px; border-radius: 50%; text-align: center; color: #FAFAFA; transition: color .5s; animation: scrl 1.6s infinite cubic-bezier(0.38, 0.07, 0.43, 0.88);}
.references.active .follow .button {color: #1D1D22;}
.references .follow .button i {line-height: 70px;}

/***** CONTACT *****/

.contact {margin-bottom: 80px;}
.contact .icon {text-align: center; margin: 40px;}
.contact .icon i {font-size: 4em; color: #AAA;}
.contact .text {width: 80%; margin: auto;}

#contact #map {height:50vh; width:100%;}
#contact .container.contact {padding: 100px 0px 50px 0px; text-align: center; }
#contact .col {display:block; float:left; width: 50%; margin: 0px 0px; padding: 0px 10px; text-align: left; vertical-align: text-top;}

#contact .next {margin-top:0px;}
#contact .right {float:right;}
#contact .left {float:left;}
#contact .pic {max-height: 150px; overflow: hidden; border-radius: 100%; margin-top:0px; float:left;}
#contact .pic img {height:150px; width:auto;}
#contact .enquire {padding-left: 180px; margin-top: 0px; text-align: left; font-size: 1.5em;}
#contact .enquire .header {font-weight: 700;}

#contact .contact {margin-bottom:20px;}
#contact .contact .header {font-weight: 800; }
#contact .address {margin-bottom: 20px;}
#contact .address .header {font-weight: 800; font-size: 1.5em;}
#contact .address .company {font-size: 1.5em; font-weight: 700;}
#contact .smaller {font-size: 1em;}
#contact .brighter {color: #CCC; font-weight: 400;}
#contact .details {}

#contact .container.webchat {padding: 50px 0px 100px 0px;}
#contact .container.webchat .header {text-align: center; font-size: 1.5em; font-weight: 500;}

/***** MENU *****/
ul.menu {padding:0; margin:25px 15px; display: inline-block; float:right; font-size: 1.1em; font-family: 'Istok Web', sans-serif;}
ul.menu li {display:inline-block; padding: 5px 20px; margin: 0px 5px; color: #bbc1d2; font-weight: 300; cursor:pointer; transition: color .6s;}
ul.menu li:hover {color: #FFF;}
ul.menu li a {display:block; text-decoration: none; color: #bbc1d2;}
ul.menu li a:hover {color: #FFF;}


/***** NEXT *****/
.next {color:white; margin-top:40px; padding: 40px 2px; text-align: center; line-height: 80px; font-size: 2em; font-family: 'Work Sans'; font-weight: 500; box-shadow: inset 0px 0px 5px rgba(0,0,0,.3); cursor:pointer; text-shadow: 0px 1px 3px rgba(0,0,0,0.2);}
.next {background: #314db3; background: url('../img/bg_next.jpg'); background-size: cover; background-position: center center; background-repeat: none;}
.next span {font-weight: 700;}

/***** FOOTER *****/
.footer { background: #ECECEE; color: #2d3465; font-weight: 500; padding: 40px 0px;}
.footer a {color:#2d3465;}
.footer a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important;}
.footer a[href^=tel] {
    color: #2d3465;
}


.footer .right {float:right;}
.footer .left {float:left;}
.footer .pic {max-height: 150px; overflow: hidden; border-radius: 100%; margin-top:20px; float:right;}
.footer .pic img {height:150px; width:auto;}
.footer .enquire {padding-right: 180px; margin-top: 40px; text-align: right; font-size: 1.2em;}
.footer .enquire .header {font-weight: 700;}

.footer .contact {margin-bottom:20px;}
.footer .contact .header {color: #CCC; font-weight: 400; font-size: 1.3em;}
.footer .address {margin-bottom: 20px;}
.footer .address .company {font-size: 1.2; font-weight: 700;}
.footer .smaller {font-size: 0.85em;}
.footer .brighter {color: #CCC; font-weight: 400;}
.footer .details {}


/******* PAGE STACK ********/
html.js,
.js body {
    overflow: hidden;
    height: 100vh;
}

/* Pages nav */

.pages-nav {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    background: #0e0f0f;
}

.js .pages-nav {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 35vh;
    padding: 30px;
    pointer-events: none;
    opacity: 0;
    background: transparent;
    -webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
}

.js .pages-nav--open {
    pointer-events: auto;
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.pages-nav__item {
    width: 33%;
    padding: 0em;
}

.js .pages-nav__item {
    padding: 0 0;
}

.pages-nav .pages-nav__item--social {
    width: 100%;
    opacity: 0;
    line-height: .6em;
    -webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
    transition: transform 1.2s, opacity 1.2s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.pages-nav--open .pages-nav__item--social {
    opacity: 1;
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.link {
    font-size: 1.2em;
    font-weight: 600;
    position: relative;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.link:hover,
.link:focus {
    color: #fff;
}

.link--page {
    display: block;
    color: #cecece;
}

.link--page:not(.link--faded)::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 80px;
    height: 2px;
    margin: 5px 0 0 -40px;
    background: #ce3434;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
}

.link--page:hover:before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.link--faded {
    transition: color .5s;
    color: #4f4f64;
}

.link--faded:focus{
    color: #47465E;
}

.link--faded:hover{
    color: #ce3434;
    // #5c5edc;
}

.link--page.link--faded {
    font-size: 0.65em;
}

.link--social {
    font-size: 1.5em;
    margin: 0 0.75em;
}

.text-hidden {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 0;
    height: 0;
    color: transparent;
}

/* Pages stack */

.js .pages-stack {
    z-index: 100;
    pointer-events: none;
    -webkit-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% -50%;
    perspective-origin: 50% -50%;
}

.js .page {
    position: relative;
    z-index: 5;
    overflow: scroll;
    width: 100%;
    height: 100vh;
    pointer-events: auto;
    background: #fcfcff;//#F2F3F8;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
    -webkit-overflow-scrolling: touch;

}

.js .pages-stack--open .page {
    // cursor: pointer;
    -webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
    transition: transform 0.45s, opacity 0.45s;
    -webkit-transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
    transition-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.js .page--inactive {
    position: absolute;
    z-index: 0;
    top: 0;
    opacity: 0;
}

/* page content */

.info {
    font-size: 1.25em;
    max-width: 50%;
    margin-top: 1.5em;
}

.poster {
    position: absolute;
    bottom: 4vh;
    left: 60%;
    max-width: 100%;
    max-height: 80%;
}

/* Menu button */

.menu {
    position: absolute;
    z-index: 1000;
    top: 0px;
    right: 0px;
    display: inline-block;
    padding: 20px 20px 10px 10px;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
}

.menu .box {background: rgba(1,0,6,0.3); padding: 0px 7px; display:inline-block; border-radius: 4px; right:30px;}

.menu-button {
    position: relative;
    z-index: 1000;
    // top: 30px;
    // right: 30px;
    width: 40px;
    height: 48px;
    padding: 10px;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
}

.no-js .menu-button {
    display: none;
}

.menu-button::before,
.menu-button::after,
.menu-button span {
    background: #EFEFEF;
    //#868692;
    //#4f4f64; //#5A5666; //#AAA;//#5f656f;
}

.menu-button::before,
.menu-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    pointer-events: none;
    -webkit-transition: -webkit-transform 0.25s;
    transition: transform 0.25s;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.menu-button span {
    position: absolute;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 3px;
    text-indent: 200%;
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}

.menu-button::before {
    -webkit-transform: translate3d(0, -13px, 0) scale3d(0.8, 1, 1);
    transform: translate3d(0, -13px, 0) scale3d(0.8, 1, 1);
}

.menu-button::after {
    -webkit-transform: translate3d(0, 13px, 0) scale3d(0.8, 1, 1);
    transform: translate3d(0, 13px, 0) scale3d(0.8, 1, 1);
}

.menu-button--open span {
    opacity: 0;
}

.menu-button--open::before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
}

.menu-button--open::after {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
}

@media screen and (max-width: 60em) {
    .info {
        max-width: 100%;
    }
    .poster {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        max-width: 100%;
        max-height: 50vh;
        margin: 0 0 0 50%;
    }
    .pages-nav__item {
        width: 50%;
        min-height: 20px;
    }
    .link--page {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .link--social {
        margin: 0 0.1em;
    }
}

@media screen and (max-width: 40em) {
    .js .pages-nav {
        display: block;
        padding: 10px 20px 0 20px;
        text-align: left;
    }
    .js .pages-nav__item {
        width: 100%;
        padding: 4px 0;
    }
    .js .pages-nav__item--small {
        display: inline-block;
        width: auto;
        margin-right: 5px;
    }
    .pages-nav__item--social {
        font-size: 0.9em;
    }
    .info {
        font-size: 0.85em;
    }
    .poster {
        margin: 1em;
    }
}
/*********/





@-webkit-keyframes scrl {
    0%   {top: -80px; opacity:0; color:#EDECF0;}
    15% {opacity:1;}
    75% {top: 0px; color:#252b59}
    80% {opacity:1;}
    100% {opacity:0;color:#252b59}
}

@keyframes scrl {
    0%   {top: -80px; opacity:0; color:#EDECF0;}
    15% {opacity:1;}
    75% {top: 0px; color:#252b59}
    80% {opacity:1;}
    100% {opacity:0;color:#252b59}
}

@media (max-width: 1200px) {
    .frontpage .cta {font-size: 1.5vw;}
    .values .item-container .claim {font-size: 8em;}
}

@media (max-width: 991px) {
    h1 {font-size: 3em;}
    h2 {font-size: 2em;}
	.frontpage .halo .claim {font-size:3em;}
    .frontpage .halo .intro {font-size:1.2em;}

    .next {font-size: 2em;}

    .footer {text-align: center;}
    .footer .right {float:none; margin-bottom:80px; text-align: center;}
    .footer .left {float:none; margin-bottom:80px; text-align: center;}
    .footer .pic {float:none;border-radius: 100%;display:inline-block;}

    .footer .enquire {text-align: center; padding: 10px; margin-top: 15px;}


    .contact {text-align: center;}
    #contact .col {display:block; float:none; width: 100%; }
    .contact .right {float:none; margin-bottom:80px; text-align: center;}
    .contact .left {float:none; margin-bottom:80px; text-align: center;}
    .contact .pic {float:none;border-radius: 100%;display:inline-block;}

    .contact .enquire {text-align: center; padding: 10px; margin-top: 15px;}


    .menu-button {width: 40px; height: 48px;}
    .menu-button::before,
    .menu-button::after {height: 3px;}
    .menu-button span {height: 3px;}
    .menu-button::before {
        -webkit-transform: translate3d(0, -12px, 0) scale3d(0.8, 1, 1);
        transform: translate3d(0, -12px, 0) scale3d(0.8, 1, 1);
    }

    .menu-button::after {
        -webkit-transform: translate3d(0, 12px, 0) scale3d(0.8, 1, 1);
        transform: translate3d(0, 12px, 0) scale3d(0.8, 1, 1);
    }
    .menu-button--open::before {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }
    .menu-button--open::after {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
    }


    .services .toplevel .item {float:none; width:100%}
    .services .software {text-align: center; margin: 0px 20px 80px 20px;}
    .services .software .item {display:inline-block; width: 100%; margin:5px;height: 60px; line-height: 60px;}

    .services .infrastructure {text-align: center; margin: 0px 20px 120px 20px;}
    .services .infrastructure .item {display:inline-block; width: 100%; margin:5px; padding:0; height: 60px; line-height: 60px;}

    .services .business {text-align: center; margin: 0px 20px 120px 20px;}
    .services .business .item {display:inline-block; width: 100%; margin:5px; padding:0; height: 60px; line-height: 60px;}

    .technologies .items .item {margin:15px 25px;}
    .technologies .items .item img {max-height:40px;}

    #work .items {display:block}
    #work .items .item {display:block; padding: 10px 10px 30px 10px; margin-bottom: 20px;}

    .values .item-container .claim {font-size: 6em; color: rgba(200,200,255,0.15); }

    #contact .col {width:auto;text-align: center; margin-bottom: 40px;}
    #contact .pic {float:none; }
    #contact .enquire {padding-left: 0px; margin-top: 20px; text-align: center;}
    #contact .enquire .header {font-weight: 700;}

    #contact .contact {margin-bottom:20px;}
    #contact .contact .header {font-weight: 800; }


}

@media (max-width: 767px) {
    h1 {font-size: 2.5em;}
    h2 {font-size: 1.8em;}
	.frontpage .halo .claim {font-size: 2.2em;}
    .frontpage .halo .intro {font-size:1.1em;}
    .frontpage .cta {font-size: 2vw;}
    .next {font-size: 1.7em;}
    .whyus .item {margin-bottom: 90px;}

    #values .values h1.header {font-size: 3em;  margin-top: 35vh;}
    .values .item {font-size: 1.1em;}
    .values .item-container .claim {font-size: 4.5em;}
    .values .item .header {padding-top:20vh}

}


@media (max-width: 479px) {
    h1 {font-size: 2em;}
    h2 {font-size: 1.5em;}

    .frontpage svg.logo {top:20px; left:0px;}
	.frontpage .halo .claim {font-size:2em;}
    .frontpage .halo {top: 50%;}
    .frontpage .halo .intro {font-size:1em; margin-top: 40px}
    .frontpage .cta {font-size: 3vw; margin-top: 40px;}

    .next {font-size: 1.5em;}

    .whyus .item {margin-bottom: 80px;}

    .menu-button {width: 30px; height: 38px;}
    .menu-button::before,
    .menu-button::after {height: 2px;}
    .menu-button span {height: 2px;}
    .menu-button::before {
        -webkit-transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
        transform: translate3d(0, -10px, 0) scale3d(0.8, 1, 1);
    }

    .menu-button::after {
        -webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
        transform: translate3d(0, 10px, 0) scale3d(0.8, 1, 1);
    }
    .menu-button--open::before {
        -webkit-transform: rotate3d(0, 0, 1, 45deg);
        transform: rotate3d(0, 0, 1, 45deg);
    }
    .menu-button--open::after {
        -webkit-transform: rotate3d(0, 0, 1, -45deg);
        transform: rotate3d(0, 0, 1, -45deg);
    }

    .pages-nav__item {text-align: center; padding: 5px 0px;}
    .js .pages-nav__item {text-align: center; padding: 5px 0px;}


    .values .item-container .claim {font-size: 3.2em;}

    .values .item .header {padding-top:10vh; font-size: 2em;}

}