* {
    box-sizing: border-box;
}

html, body {
    font-size: 4px;
    margin: 0;
}

@media (min-width: 768px) {
    html, body {
        font-size: 5.5px;
    }
}

@media (min-width: 958px) {
    html, body {
        font-size: 6.6px;
    }
}

@media (min-width: 1024px) {
    html, body {
        font-size: 7.2px;
    }
}

@media (min-width: 1440px) {
    html, body {
        font-size: 10px;
    }
}

@media (min-width: 1920px) {
    html, body {
        font-size: 13.5px;
    }
}

@media (min-width: 1440px) and (min-height: 760px) and (min-aspect-ratio: 16/9) {
    html, body {
        font-size: 9px;
    }
}

@media (min-width: 1920px) and (min-height: 900px) and (min-aspect-ratio: 16/9) {
    html, body {
        font-size: 11px;
    }
}

body {
    font-family: 'Open Sans', sans-serif;
    background-repeat: no-repeat;
    background-position: center top;
    color: #444547;
    background-image: none;
    opacity: 1;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    font-family: 'Raleway', sans-serif;
    margin: 0;
}

h3 {
    font-size: 2.4em;
}

p {
    font-size: 1.6667em;
    line-height: 2em;
    margin: 0 0 1rem;
}

a {
    text-decoration: none;
}

ul {
    margin-top: 0;
}

img {
    vertical-align: middle;
    border: 0;
}

address {
    margin-bottom: 2rem;
    font-style: normal;
    line-height: 1.42857143;
}

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav>li>a>img {
    max-width: none;
}

.nav>li>a {
    position: relative;
    display: block;
}

.lead {
    margin-bottom: 2rem;
    font-size: 1.6em;
    font-weight: 300;
    line-height: 1.4;
}

a:hover {
    text-decoration: none;
}

.container {
    width: 117em;
    position: relative;

    padding-right: 1.5em;
    padding-left: 1.5em;
    margin-right: auto;
    margin-left: auto;
}

.row {
    margin-right: -1.5em;
    margin-left: -1.5em;
}

.row:before, .row:after {
    display: table;
    content: " ";
}

.row:after {
    clear: both;
}

.col-lg-6 {
    float: left;
    width: 50%;
    position: relative;
    min-height: 1px;
}

.background {
    position: absolute;
    top: 0;
    height: 600em;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}

.background .titles,
.background .arc-left,
.background .left {
    display: none;
}

.background .top {
    position: absolute;
    top: 0;
    height: 90.2em;
    width: 100%;
    background-color: #f2f2f2;
}

.background .arc {
    position: absolute;
    top: 80.2em;
    width: 60em;
    height: 100%;
    left: calc(50% + 22em);
    z-index: -1;
}

.background .right {
    position: fixed;
    left: calc(50% + 72em);
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #f2f2f2;
}

.background .logo {
	position: absolute;
	top: -18em;
	width: 79em;
	margin-left: -74em;
    left: 50%;
}

.background .banner {
    position: absolute;
	top: 0;
	width: 160em;
	margin-left: -74.2em;
    left: 50%;
}

.background .bg1 {
    position: absolute;
    top: 185.6em;
    left: 50%;
    width: 60em;
    margin-left: -93em;
}

.background .bg2 {
    position: absolute;
    bottom: 233em;
    left: 50%;
    margin-left: 14em;
    width: 67em;
}

.header {
    position: absolute;
    margin-top: 2.625em;
    left: -4em;
	right: -4em;
    font-size: 1.6667em;
}

.header .navbar-header {
    display: inline-block;
    padding-left: 0;
    padding-right: 5.625em;
    float: left;
    line-height: 2.625em;
    margin-right: 0.26em;
}

.header .navbar-header img {
    height: 2.625em;
}

/*.header .nav>li  img {
    height: 2.625em;
}*/

.header .nav>li {
    display: inline-block;
    padding: 0 2.8em;
    line-height: 2.625em;
}

/*.header .nav>li:first-child {
    padding-left: 0;
    padding-right: 5.625em;
}*/

.header .nav>li:last-child {
    padding-right: 0;
    float: right;
}

.header  .nav>li>a {
    padding: 0;
    font-weight: bold;
    color: #00A0EA;
}

.header .nav>li:nth-child(1) a,
.header .nav>li:nth-child(2) a {
    color: #f2f2f2;
    text-shadow: -1px -1px 0 #00A0EA,
        1px -1px 0 #00A0EA,
        -1px 1px 0 #00A0EA,
        1px 1px 0 #00A0EA;
}

.header .nav>li>a:focus,
.header .nav>li>a:hover {
    background-color: transparent;
}

a.email {
    text-decoration: underline;
}

.cover {
    height: 90em;
    padding-top: 17em;
    
    width: 45em;
    color: #f2f2f2;
    
    width: 100%;
    
    text-shadow: -1px -1px 0 #00A0EA,
        1px -1px 0 #00A0EA,
        -1px 1px 0 #00A0EA,
        1px 1px 0 #00A0EA;
        
    margin-bottom: 16.5em;
}

.cover h1 {
    font-size: 7.8em;
    width: 7.7em;
}

.cover p.lead {
    font-size: 1.8em;
    padding-top: 1.1em;
    width: 27.78em;
    color: #f2f2f2;
    font-weight: normal;
    padding-bottom: 0;
}

section h2, .likeh2 {
    margin: 0;
    display: inline-block;
    background-color: #00A0EA;
    color: white;
    padding: 0.04em 0.42em 0 0.13em;
    font-size: 5.4em;
    font-family: 'Raleway', sans-serif;
    position: relative;
    z-index: 1;
}

.column-content {
    display: table;
    position: relative;
    top: -2em;
}

.annotated-photo {
    display: table-row;
}

.annotated-photo  .slide-show, .annotated-photo  .text {
    display: table-cell;
}

.slide-show {
    position: relative;

    width: 60em;
    height: 40em;
}

.photo {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60em auto;

    transition: opacity 3s ease;
    opacity: 0;
}

.photo.visible {
    opacity: 1;
}

.photo.a {
    background-image: url('/images/team/1.jpg?v=1.02');
}

.photo.b {
    background-image: url('/images/team/2.jpg?v=1.02');
}

.photo.c {
    background-image: url('/images/team/3.jpg?v=1.02');
}

.photo.d {
    background-image: url('/images/team/4.jpg?v=1.02');
}

.photo.e {
    background-image: url('/images/team/5.jpg?v=1.02');
}

.photo.f {
    background-image: url('/images/team/6.jpg?v=1.02');
}

.photo .placeholder {
    display: block;
    color: #D8D8D8;
    text-align: center;
    font-size: 3em;
    line-height: 13em;
}

section.company .text {
    padding-left: 5.6em;
    vertical-align: top;
}

p.lead { /* assign to section.company p.lead if this turns out to be wrong */
    font-size: 2.1em;
    padding-bottom: 7.7em;
    font-weight: bold;
    color: #00A0EA;
    padding-bottom: 1.6rem;
}

p.spaced {
    line-height: 1.9em;
}

section.vacancies {
    padding-top: 6.5em;
    padding-bottom: 21.4em;
}

p.qanda {
    font-family: 'Raleway', sans-serif;  
    font-size: 3.2em;
    float: right;
    padding: 0.3125em 0 0.3125em 3.8125em;
    background-image: url('/images/arrow.png');
    background-position: left;
    background-repeat: no-repeat;
    background-size: 2.65625em auto;
    line-height: 1.428em;
}

p.qanda .answer {
    display: inline-block;
    color: #444547;
    border-bottom: solid 0.25em #00A0EA;
    height: 1.1875em;
}

p.qanda .answer:hover {
    text-decoration: none;
}

section.whatwedo {
    margin-bottom: 12.2em;
}

section.whatwedo .samples {
    margin-left: 20em;
    margin-top: 8.8em;
}

section.whatwedo .sample {
    min-height: 32.2em;    
    padding: 1.6em 1.4em 1.6em 10.8em;
    background-repeat: no-repeat;
    background-size: 8em;
    background-position: 0.8em 0.4em;
}

.sample.webapp {
    background-image: url('/images/icons/webapp.png');
}

.sample.mobile-app {
    background-image: url('/images/icons/mobile-app.png');
}

.sample.cloud {
    background-image: url('/images/icons/cloud.png');
}

.sample.consultancy {
    background-image: url('/images/icons/consultancy.png');
}

.sample.data-analysis {
    background-image: url('/images/icons/data-analysis.png');
}

.sample.ods {
    background-image: url('/images/icons/ods.png');
}

.sample.SaaS {
    background-image: url('/images/icons/SaaS.png');
}

section.whatwedo .sample h3 {
    padding-bottom: 0.83em;
}

.sites .site {
    min-height: 50.5em;
    margin-top: 9.8em;
    padding-bottom: 14.4em;
}

.sites .site img.view {
    width: 75em;
    height: 50.5em;
    float: left;
    box-shadow: 0.5em 0.5em 0 0 #e5e5e5;
}

.sites .site .text {
    margin-left: 78em;
    padding-top: 5em;
}

.sites .site h3 {
    font-size: 4.6em;
    margin-left: -2.1739em;
    margin-bottom: 0.65em;
}

.sites .site p:last-child {
    margin-top: 2em;
}

a.visit  {    
    background-image: url('/images/find.png');
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 2.07em 2.07em; 
    padding-bottom: 1em;
}

a.visit .name {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    color: #444547;
    margin-left: 2em;
    font-size: 1.429em;
    height: 1.25em;
    border-bottom: solid 0.25em #00A0EA;
}

a.visit:hover {
    text-decoration: none;
}

section.ourwork {
    margin-bottom: 13.2em;
}

section.getintouch {
    position: relative;
    height: 79.8em;
    width: 100%;
}

#map {
    background-color: #E5E5E5;
    width: 100%;
    height: 79.8em;
    position: absolute;
    z-index: 0;
}

section.getintouch h2 {
    margin-top: 2em;
}

section.getintouch h2, section.getintouch .info {
    position: relative;
    z-index: 1;
}

.info {
    font-size: 1.8em;

    display: block;
    background-color: white;
    min-height: 5.6em;
    width: 27.1em;
    padding: 3.889em 2.889em;
}

a.contact, .contact {
    display: block;
    padding-left: 3.5em;
    color: #444547;
    background-repeat: no-repeat;
    background-size: 1.778em;
    padding-bottom: 2.333em;
}

.contact.mail {
    background-image: url('/images/icons/mail.png');
}

.contact.tel {
    background-image: url('/images/icons/tel.png');
}

.contact.address {
    background-image: url('/images/icons/address.png');
}

a.contact .name {
    display: inline-block;
    color: #444547;
    height: 1.278em;
    border-bottom: solid 0.167em #00A0EA;
}

ul.social {
    padding: 0;
    margin: 0;
    list-style: none;
    padding-top: 0.833em;
}

ul.social li {
    display: inline-block;
    margin: 0 0.444em;
}

ul.social li:first-child {
    margin-left: 0;
}

ul.social li img {
    width: 3.889em;
}

footer {
    background-color: #333333;
    height: 25em;
    text-align: center;
    padding-top: 5em;
}

footer img {
    width: 12em;
}

footer p {
    margin-top: 1em;
    font-size: 1.3em;
    color: #7F7F7F;
}

footer a {
    color: #7F7F7F;
}

footer a:hover {
    color: #7F7F7F;
    text-decoration: none;
}