html{color:#222;font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}.hidden{display:none!important}.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;white-space:inherit}.invisible{visibility:hidden}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}@media print{blockquote,img,pre,tr{page-break-inside:avoid}*,:after,:before{background:0 0!important;color:#000!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999}thead{display:table-header-group}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}

body{
    -webkit-font-smoothing: antialiased;
    background-color: #212121;
}

::selection{
    background-color: #212121;
    color: #fff;
}

.col-1 img,
.col-2 img,
.col-3 img,
.col-4 img,
.col-5 img,
.col-6 img,
.col-7 img,
.col-8 img,
.col-9 img,
.col-10 img,
.col-11 img,
.col-12 img{
    width: 100%;
}

h1{
    font-family: Helvetica Neue, Sans-serif;
    font-weight: bold;
    font-size: 6.3em;
    letter-spacing: -4.2px;
    line-height: 120px;
}

h4{
    font-family: monospace;
    font-weight: lighter;
    font-size: 16px;
}

h4 .dim{
    font-family: monospace;
    font-weight: lighter;
    color: inherit;
    opacity: 0.5;
}

h4 a, h4 a:hover, h4 a:visited{
    color: #fff;
    font-family: monospace;
    font-weight: lighter;
    text-decoration: none;
}

#intro, #outro{
    background-color: #212121;
    padding: 100px 0;
}

#intro h1, #outro h1{
    color: #ffffff;
}

#intro h4, #outro h4{
    color: #ffffff;
    font-family: 
}

#whistle{
    padding: 100px 0;
}

#whistle h1, #whistle h4{
    color: #fff;
}

#whistle .prototype, #whistle .badges{
    padding: 0 0 40px 0;
}

#whistle .timeline{
    padding: 40px 0;
}

#whistle .prototype img, #whistle video, #whistle .id img{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#jelly{
    padding: 100px 0;
}

#jelly h1, #jelly h4{
    color: #fff;
}

#jelly .screenshots{
    padding: 30px 0;
}

#jelly .screenshots img{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#twitter h1, #twitter h4{
    color: #fff;
}

#slack{
    padding: 20px 0;
}


.banner__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

    h1{
        font-size: 44px;
        line-height: 44px;
        letter-spacing: -2px;
    }

    .badges{
        display: none;
    }
}