body{
    background:#fff;
    font-family: 'Overpass', sans-serif;
    color:#404040;
    font-size:12pt;
    padding:0;
    margin:0;
    font-weight:300;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.block{
    min-height:50vh;
    display:flex;
    width:100%;
    position:relative;
    padding:40px;
}
.header,
.footer{
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e01279+0,990d4e+100 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#671e79+0,990d4e+100 */
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#671e79+0,1e0860+100 */
    background: rgb(103,30,121); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(103,30,121,1) 0%, rgba(30,8,96,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(103,30,121,1) 0%,rgba(30,8,96,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(103,30,121,1) 0%,rgba(30,8,96,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#671e79', endColorstr='#1e0860',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color:#fff;
}
@media (orientation: landscape) {
    .header > div{
        width:50%;
        display:flex;
        align-items:center;
        justify-content:center;
    }
}
@media (orientation: portrait) {
    .header{
        flex-direction:column;
    }
    .header > div{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    code{
        max-width: 320px;
    }
}
*{
    box-sizing:border-box;
}
img{
    max-width:100%;
}
h1,h2,h3,h4,h5,h6{
    margin-top:0;
    font-family: 'Montserrat', sans-serif;
}
h1{
    font-size:3em;
    font-weight:600;
}
h2{
    font-size:2em;
    font-weight:600;
}
h3{
    font-size:2em;
    font-weight:300;
}
h4{
    font-size:1.6em;
    font-weight:300;
}
a, a:hover{
    color:#fff;
    padding:2px 8px;
    margin:4px 4px 4px 0;
    border-radius:24px;
    background:#b86ad8;
    text-decoration:none;
    display:inline-block;
}
.info h2,
.info h3{
    color:#000;
    margin-top:10px;
}
.info,
.footer{
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.info > div,
.footer > div{
    text-align:left;
    width:80vw;
    max-width:720px;
}
.info.alt{
    background:#efefef;
    color:#000;
}
#logo{
    width:54%;
    max-width:420px;
}
.intro{
    flex-direction:column;
}
/* Animation */

@keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

@-webkit-keyframes fadeInUp {
    from {
        transform: translate3d(0,40px,0)
    }

    to {
        transform: translate3d(0,0,0);
        opacity: 1
    }
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
    opacity: 0
}

.fadeInUp {
    opacity: 0;
    animation-name: fadeInUp;
    -webkit-animation-name: fadeInUp;
}

ul{
    list-style:none;
    padding:20px 0;
    font-size:1em;
}
ul.what-we-do li{
    display:inline-block;
    padding:6px 12px;
    border-radius:4px;
    background:rgba(103,30,121,1);
    color:#fff;
    margin:4px;
}
ul.logos li{
    max-width:140px;
    display:inline-block;
    margin:8px;
    padding:8px;
    border-radius:4px;
    vertical-align:middle;
}
ul.logos li img{
    max-height:60px;
}
@media only screen
and (-webkit-min-device-pixel-ratio: 2) {
   #logo{
       width:80%;
   }
}
code{
    background:#222;
    color:#d8d8d8;
    padding:20px;
    display:block;
    margin:20px 0;
    overflow-y:scroll;
}
code p{
    white-space: nowrap;
}
.tabbed{
    margin-left:40px;
}
.variable{
    color:#f90;
}
.function{
    color:#b3ff00;
}