@charset "UTF-8";
@import url(//fonts.googleapis.com/css?family=Lato:100,300,400,700);
/* CSS Document*/
html{
    min-height: 100%;
}
body {
    font-family: 'Lato', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100%;
    width:100vw;
}
ul, ol, dl {
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    color:#414958;
    margin-top: 0;	 
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom:0;
}
h1 {
    color:#272b34;
    font-weight:normal;
}
h2 {
    font-size:12px;
}
a img {
    border: none;
}

a:link {
    color:#414958;
    text-decoration:none; 
}

h1 a:link {
    color:#272b34;
}
a:visited {
    color:#414958;
    text-decoration:none;
}
h1 a:visited {
    color:#272b34;
}
a:hover, a:active, a:focus { 
    text-decoration: none;
}
.container {
    margin: 0 auto; 
    position:relative;
    width: 100vw;
}
.videoWrapper {
    position: relative;
    /* padding-bottom: 75%; /* 4:3 */
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.notonline {
    display: table;
    background-color: rgba(50,50,50,1);
    position:absolute;
    width:300px;
    height:300px;
    z-index:20000;
    top:50%;
    left:50%;
    margin:-150px 0 0 -150px;
    padding: 20px;
    opacity:1;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    transition: opacity 0.8s;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

.modalmiddle {
    display: table-cell;
    vertical-align: middle;
}
.modalinner {
    margin-left: auto;
    margin-right: auto; 
    width: 200px;
    text-align: center;
    font-size: 17px;
    font-weight:200;
    color:#FFF;  
}
.sorry {
    font-size: 45px;
    font-weight:200;
    color:#FFF;
}
.messagehidden {
    opacity:0;
    pointer-events: none;
}
.maincontent {   
    padding: 70px 0;
    position: absolute;
    left: 0px;  
    top: 0px;
    width:100%;
    transform: translateZ(0);
}
.fullpage {
    min-height:690px;
    max-height: 100vh;
    min-width:960px;
    max-width:100vw;

    overflow:hidden;
}
.center-align {
    text-align: center;
}
.value-prop {
    margin-top: 1rem; }
.value-props {
    margin-top: 2rem;
    margin-bottom: 4rem; }
.main-header {
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: .2rem;
    font-weight: 600; 
    margin-bottom:30px;
}
.main-section {
    border-top: 1px solid #eee;
    padding: 4rem 0;
    margin-bottom: 0;}
.value-img {
    display: block;
    text-align: center;
    margin: 2.5rem auto 0;
    height: 150px;
    opacity:0.5;
}

.example-grid .column,
.example-grid .columns {
    background: #EEE;
    text-align: center;
    border-radius: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    height: 30px;
    line-height: 30px;
    margin-bottom: .75rem;
    font-weight: 600;
    letter-spacing: .1rem; }
.main-example .row,
.main-example.row,
.main-example form {
    margin-bottom: 0; }
.main-example h1,
.main-example h2,
.main-example h3,
.main-example h4,
.main-example h5,
.main-example h6 {
    margin-bottom: 1rem; }
.navbar {
    display: none; }


/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
    border-radius: 100px;
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
    padding: 8rem 0 7rem;
    text-align: center;
}
.section-heading,
.section-description {
    margin-bottom: 1.2rem;
}

/* header
––––––––––––––––––––––––––––––––––––––––––––––––––--- */

.header {
    padding-top: calc(((100vh - 480px)/2)*0.8);
    padding-bottom: calc(((100vh - 480px)/2)*0.8);
    background: rgb(255,255,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0px, rgba(255,255,255,1) 450px, rgba(248,248,248,1) 450px, rgba(251,251,251,1) 100vh); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,rgba(255,255,255,1)), color-stop(450px,rgba(251,251,251,1)), color-stop(450px,rgba(248,248,248,1)), color-stop(100vh,rgba(251,251,251,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0px,rgba(255,255,255,1) 450px,rgba(248,248,248,1) 450px,rgba(250,25,251,1) 100vh); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 0px,rgba(255,255,255,1) 450px,rgba(248,248,248,1) 450px,rgba(251,251,251,1) 100vh); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0px,rgba(255,255,255,1) 450px,rgba(248,248,248,1) 450px,rgba(251,251,251,1) 100vh); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0px,rgba(255,255,255,1) 450px,rgba(248,248,248,1) 450px,rgba(251,251,251,1) 100vh); /* W3C */
    width:100%;
        overflow:hidden;
}

.header-icon {
    height:100px;
    margin-left:20px;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}
.title {
    text-transform: uppercase;
    font-size: 60px;
    font-weight: 600;
    letter-spacing: .2rem;
    text-decoration: none;
    color: #222; 
}
.subtitle {
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .2rem;
    text-decoration: none;
    color: #222; 
}
.ICimg {
    height:80vw;
    width: 80vw;
}
.imagecascade {
    height: 80vw;
    margin: 0px;
    

}
.rightimage {
    width:80vw;
    height:80vw;
    margin: 10vw;
    position:relative;
    -webkit-box-reflect: below 30px -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.01)), color-stop(50%, rgba(255,255,255,0.05)), to(rgba(255,255,255,0.3)));
    
}
    

/* About
–––––––––––––––––––––––––––––––––––––––––--––––––––– */
.about {
}
.aboutdetail {
    font-size:13px;
}

/* Projects
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.project {
    margin-top:40px;
    margin-bottom: 40px;
}
.projectbottom {
}
.projectlink {
    font-size:12px;
    border-style: solid;
    border:0px;
    border-left: 1px solid #bbb;
    padding-left:5px;
}
.project-title {
    font-size:20px;
}

.projectkeyword {
    display:none;
    background-color:#999;
    color:#fff;
    font-size: 12px;
    margin-left:3px;
    margin-right:3px;
    padding: 2px 4px 2px 4px;
}
.projectimgcontainer { 
        text-align: center;
}
.projectlogo {

    opacity:0.3;
    height:20px;
    margin:20px;
    display:none;
}
.me-img {
    height:170px;
    width:170px;
    border-radius: 50%;
}
#me-img-main {
    background-image: url(/home/images/ian butterworth 2017.jpg);
        -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.project-img-big {
    height:170px;
    width:170px;
    border-radius: 50%;
}
#project-img-splash {
    background-image: url(/home/data/media-images/splash-man.png);
        -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#project-img-leuko {
    background-image: url(/home/images/projects/leuko_logo.png);
        -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#project-img-earlybird {
    background-image: url(/home/data/media-images/earlybird.png);
        -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#project-img-intelligiblefeedback {
    background-image: url(/home/data/media-images/challenge.png);
        -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#project-img-neosonics {
    background-image: url(/home/data/media-images/lumbar.jpg);
        -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#project-img-ao {
    background-image: url(/home/data/media-images/ao.jpg);
        -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Team
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.person img {
    display:inline-block;
    margin-right:20px;
    margin-bottom:10px;
}
.person a {
    color:#2398c7;
    text-decoration: none;
    font-size: 1rem;
}
.headshot {
    display:inline-block;
    border-radius: 50%;
    background-color:#fff;
    border-style: none;
    width:100%;
    float:left;
}
.person-text {
    margin-left:10px;
    font-size: 1.2rem;
}
.person-text h6 {
    font-size: 1.8rem;
}

/* Collaborators  
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.collablogo-container {
    text-align: center;
    /* May want to do this if there is risk the container may be narrower than the element inside */
    white-space: nowrap;

}
.collablogo-container:before {
    content: '';
    display: inline-block;
    height: 170px;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

.collablogo {
    width:90%;
    display: inline-block;
    vertical-align: middle;
}

/* News
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.date {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .2rem;
    display:inline-block;
}
.story {
    margin-left:10px;
    margin-bottom:30px;
}

/* footer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.footer {
    background-color: #535353;
    color: #919191;
    padding: 6rem 0 5rem;
    text-align: left;
}
.foot-splash-logo {
    height:70px;
    text-align: center;
}
.foot-logo {
    min-width: 100px;
    max-width: 200px;
    text-align: center;
    opacity: 0.5;
}
.footer-listitem {
    color:#a8a8a8;
    font-size:1.2rem;  
    padding-top:5;
    padding-bottom:0;
    margin:0;

}
.footer-listitem-logo {
    color:#a8a8a8;
    font-size:1.2rem;  
    margin:10 10 10 10;
    text-align: center;
}

.footer-copyright {
    color:#808080;
    font-size:1rem;
    text-align: center;
    margin:0;
}

/*other stuff*/
.content ul, .content ol {
    padding: 0 15px 15px 40px; 
}

.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.homeheader {
    text-align: left;
    width:100%;
    font-family: 'Lato', sans-serif;
    font-weight:100;
    font-size:40px;
    color:#777;
}
.hometag {
    width:400px;
    text-align: left;
    margin-top:5px;
    margin-left:3px;
    font-family: 'Lato', sans-serif;
    font-weight:300;
    font-size:15px;
    color:#444;
}
.leftlinks {
    position:absolute;
    left:0px;
    top:30px;
    width:400px;
    height:200px;
    margin-top:20px;
    padding-left:15px;
    font-family: 'Lato', sans-serif;
    font-weight:200;
    font-size:20px;
    -webkit-box-reflect: below 160px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(25%, transparent), to(rgba(255,255,255,0.05)));
}
.link {
    color:white;
    margin-bottom:10px;
    margin-top:10px;
    background-color:#595959;
    padding:0px 5px 2px 5px;
}
.link:hover { 
    color:white;
    margin-bottom:10px;
    background-color:#404040;
    padding:0px 5px 2px 5px;
}
.linkcell {
    height:30px;
}
.bloglink {
    height:60px;

}


.contact {
    text-align:center;
    font-size:12px;
    margin-top:20px;
    display:none;
}
.item {
    width:100%;
    margin-bottom:20px;
}
.itemheader {
    font-size:1.2em;
    /* text-shadow: 5px 5px 20px #C8C8C8; */
    color:#272b34;
}
.itemfooter {
    margin-left:360px;
    padding-top:25px;
    font-size:11px;
    text-align:right;
    width:600;
}
.itemfooter a:link {
    text-decoration:underline;
}
.itemimage {
    height:400px;
    position:relative;
    /* box-shadow: 5px 5px 20px #888888; */

}
.itemoverlay {
    position:absolute;
    top:25px;
    left:80px;
    width: 800px;
    display:none;
    vertical-align:bottom;

}
.greyed {
    color:#8d919a;
}
#Ffuries_sc_ol {
    z-index:3;
}
#Ffuries_vim_ol_thesea {
    z-index:4;
}
#Ffuries_vim_ol_nothingbut {
    z-index:5;
}
#BSD_sc_ol {
    z-index:3;
}
#BSD_vim_ol_deadsea {
    z-index:4;
}
#BSD_vim_ol_shortest {
    z-index:5;
}
.ol_caption {
    color:#c6c8cc;
    background-color:#272b34;
    padding-left:10px;
    padding-right:10px;
    font-size:10px;

}
.ol_caption a:link {
    color:#d9dadd;
}
.ol_caption a:visited {
    color:#d9dadd;
}
.ol_table {
    width:100%;
    border:0;
    cellspacing:0;
    cellpadding:0;
}
.itemlist {
    color:#414958;

    padding-left:15px;

    font-size:10px;
}
.itemleftimage {
    width:150px;
    float:left;
    margin-left:18px;
    margin-right:30px;
}
.itemrighttext {
    padding-top:140px;
}
.ff_imgcontain {
    position:relative;
    height:1200px;
}
.ff_imgsqs1 {
    position:absolute;
    top:0px;
    left:0px;
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}
.ff_imgsqs2 {
    position:absolute;
    top:0px;
    left:200px;
    float:left;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}
.ff_imgsqs3 {
    position:absolute;
    top:0px;
    left:400px;
    float:left;
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
.ff_imgsqs4 {
    position:absolute;
    top:0px;
    left:600px;
    float:left;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}
.ff_imgsqs5 {
    position:absolute;
    top:0px;
    left:800px;
    float:left;
    opacity:0.2;
    filter:alpha(opacity=20); /* For IE8 and earlier */
}
.ff_conent {
    float:right;
    width:750px;
}
.ff_container {
    width: 1000px;
    background: #FFF;
    margin: 0 auto; 
    padding-bottom: 60px;
}
#sunpic {
    -webkit-transition: 2.5s all;
    -o-transition: 2.5s all;
    -moz-transition: 2.5s all; 
    transition: 2.5s all;
}
#sunpic:hover {

    -webkit-filter: brightness(1.5) contrast(0.9) saturate(2.3) sepia(0.1);
    -o-filter: brightness(1.5) contrast(0.9) saturate(2.3) sepia(0.1);
    -moz-filter: brightness(1.5) contrast(0.9) saturate(2.3) sepia(0.1);
    filter: brightness(1.5) contrast(0.9) saturate(2.3) sepia(0.1);
}
.chromexp {
    position:relative;
    top:17px;
}
.a {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    perspective: 480px;
    transform: perspective(480px);

}
.b {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);
}
.c {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);

}
.d {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);

}
.e {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);
}
.f {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);
}
.g {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);
}
.h {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);
}
.i {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    perspective: 480px;
    transform: perspective(480px);
}

.atile { 
    float: left;
    opacity: 1;
    transform: rotateY(0deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.btile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.ctile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.dtile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.etile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.ftile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.gtile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.htile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
.itile { 
    float: left;
    opacity: 1;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    margin: 0px;
    padding:0px;
    border:0px;
}
@supports (overflow:-webkit-marquee) and (justify-content:inherit) 
{
    .atile {margin-top:-1px; margin-left:-1px;}
    .btile {margin-top:-1px; margin-left:-1px;}
    .ctile {margin-top:-1px; margin-left:-1px;}
    .dtile {margin-top:-1px; margin-left:-1px;}
    .etile {margin-top:-1px; margin-left:-1px;} 
    .ftile {margin-top:-1px; margin-left:-1px;} 
    .gtile {margin-top:-1px; margin-left:-1px;} 
    .htile {margin-top:-1px; margin-left:-1px;} 
}


.css3-preload .a .b .c .d .e .f .g .h .i * {
    transition: none !important;
}


/* Bigger than 960   */
@media (min-width: 960px) {
    .container {
        width: 960px;
    }
    .header-heading {
        font-size: 2.6rem;
    }
    .homeheader {
        padding-top: 30px;
    }
    .ICimg {
        height:500px;
        width: 500px;
    }
    .imagecascade {
        height:500px;
        width:500px;
    }
    .rightimage {
        height:500px;
        width:500px;
        margin: 0px;
        position:relative;
    }
    .section {
        padding: 14rem 0 15rem;
    }
    .section-description {
        max-width: 60%;
        margin-left: auto;
        margin-right: auto;
    }
    .finger {
        top: -14rem;
        right: 5rem;
        max-height: 510px;
    }
    .finger + .finger {
        top: -12rem;
        max-height: 472px;
    }
    .categories {
        padding: 15rem 0 8rem;
    }
    /* Navbar  */
    .navbar + .main-section {
        border-top-width: 0; }
    .navbar,
    .navbar-spacer {
        display: block;
        width: 100%;
        height: 6.5rem;
        background: #fff;
        z-index: 99;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee; }
    .navbar-spacer {
        display: none; }
    .navbar > .container {
        width: 100%; }
    .navbar-list {
        list-style: none;
        margin-bottom: 0; }
    .navbar-logo {
        position: relative;
        float: left;
        margin-bottom: 0;
        margin-right:55px;
        text-transform: uppercase;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: .2rem;
        text-decoration: none;
        line-height: 6.5rem;
        color: #222; }
    .navbar-logo-img {
        position: relative;
        float: left;
        display: inline-block;
        margin-bottom: 0;
        margin-right:10px;
        height:25px;
        line-height: 6.5rem;}
    .navbar-item {
        position: relative;
        float: left;
        margin-bottom: 0; }
    .navbar-item lang {
        color:dimgrey;
    }

    .navbar-link {
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .2rem;
        margin-right: 35px;
        text-decoration: none;
        line-height: 6.5rem;
        color: #222; }
    .navbar-link.active {
        color: #33C3F0; }
    .has-docked-nav .navbar {
        position: fixed;
        top: 0;
        left: 0; }
    .has-docked-nav .navbar-spacer {
        display: block; }
    /* Re-overiding the width 100% declaration to match size of % based container */
    .has-docked-nav .navbar > .container {
        width: 80%; }

    /* Popover */
    .popover.open {
        display: block;
    }
    .popover {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        top: 92%;
        left: -50%;
        -webkit-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
        -moz-filter: drop-shadow(0 0 6px rgba(0,0,0,.1));
        filter: drop-shadow(0 0 6px rgba(0,0,0,.1)); }
    .popover-item:first-child .popover-link:after, 
    .popover-item:first-child .popover-link:before {
        bottom: 100%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none; }
    .popover-item:first-child .popover-link:after {
        border-color: rgba(255, 255, 255, 0);
        border-bottom-color: #fff;
        border-width: 10px;
        margin-left: -10px; }
    .popover-item:first-child .popover-link:before {
        border-color: rgba(238, 238, 238, 0);
        border-bottom-color: #eee;
        border-width: 11px;
        margin-left: -11px; }
    .popover-list {
        padding: 0;
        margin: 0;
        list-style: none; }
    .popover-item {
        padding: 0;
        margin: 0; }
    .popover-link {
        position: relative;
        color: #222;
        display: block;
        padding: 8px 20px;
        border-bottom: 1px solid #eee;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 1.0rem;
        font-weight: 600;
        text-align: center;
        letter-spacing: .1rem; }
    .popover-item:first-child .popover-link {
        border-radius: 4px 4px 0 0; }
    .popover-item:last-child .popover-link {
        border-radius: 0 0 4px 4px;
        border-bottom-width: 0; }
    .popover-link:hover {
        color: #fff;
        background: #33C3F0; }
    .popover-link:hover,
    .popover-item:first-child .popover-link:hover:after {
        border-bottom-color: #33C3F0; }
}