body,
html {
    -webkit-text-size-adjust: 100%
}

body,
header,
sub,
sup {
    position: relative
}

#hero,
img {
    max-width: 100%
}

#default-theme,
svg:not(:root) {
    overflow: hidden
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden] {
    display: none
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    height: 100%
}

a:focus {
    outline: dotted thin
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019"
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

figure {
    margin: 0
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}

button,
input {
    line-height: normal
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
input[disabled] {
    cursor: default
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=search] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}
.addpad { padding: 10px; }
.button,
.topcoat-button,
.topcoat-button--cta,
.topcoat-button--large,
.topcoat-button--large--cta,
.topcoat-button--large--quiet,
.topcoat-button--quiet {
    position: relative;
    display: inline-block;
    vertical-align: top;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-background-clip: padding-box;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    background: 0 0;
    border: 0;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none
}

.button--quiet {
    background: 0 0;
    border: 1px solid transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.button--disabled,
.topcoat-button--cta:disabled,
.topcoat-button--large--cta:disabled,
.topcoat-button--large--quiet:disabled,
.topcoat-button--large:disabled,
.topcoat-button--quiet:disabled,
.topcoat-button:disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none
}

.topcoat-button,
.topcoat-button--cta,
.topcoat-button--large,
.topcoat-button--large--cta,
.topcoat-button--large--quiet,
.topcoat-button--quiet {
    padding: 0 1.25rem;
    font-size: 16px;
    font-weight: 400;
    line-height: 3rem;
    letter-spacing: 1px;
    color: #454545;
    text-shadow: 0 1px #fff;
    vertical-align: top;
    background-color: #e5e9e8;
    -webkit-box-shadow: inset 0 1px #fff;
    box-shadow: inset 0 1px #fff;
    border: 1px solid #9daca9;
    border-radius: 6px
}

.topcoat-button--large--quiet:hover,
.topcoat-button--large:hover,
.topcoat-button--quiet:hover,
.topcoat-button:hover {
    background-color: #eff1f1
}

.topcoat-button--cta:focus,
.topcoat-button--large--cta:focus,
.topcoat-button--large--quiet:focus,
.topcoat-button--large--quiet:hover:focus,
.topcoat-button--large:focus,
.topcoat-button--quiet:focus,
.topcoat-button--quiet:hover:focus,
.topcoat-button:focus {
    border: 1px solid #0036ff;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, .36), 0 0 0 2px #6fb5f1;
    box-shadow: inset 0 1px rgba(255, 255, 255, .36), 0 0 0 2px #6fb5f1;
    outline: 0
}

.topcoat-button--large:active,
.topcoat-button:active {
    border: 1px solid #9daca9;
    background-color: #d2d6d6;
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px rgba(0, 0, 0, .1)
}

.topcoat-button--quiet {
    background: 0 0;
    border: 1px solid transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.topcoat-button--large--quiet:hover,
.topcoat-button--quiet:hover {
    text-shadow: 0 1px #fff;
    border: 1px solid #9daca9;
    -webkit-box-shadow: inset 0 1px #fff;
    box-shadow: inset 0 1px #fff
}

.topcoat-button--large--quiet:active,
.topcoat-button--large--quiet:focus:active,
.topcoat-button--quiet:active,
.topcoat-button--quiet:focus:active {
    color: #454545;
    text-shadow: 0 1px #fff;
    background-color: #d2d6d6;
    border: 1px solid #9daca9;
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, .1);
    box-shadow: inset 0 1px rgba(0, 0, 0, .1)
}

.topcoat-button--large,
.topcoat-button--large--quiet {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 4.375rem;
    padding: 0 1.25rem
}

.topcoat-button--large--quiet {
    background: 0 0;
    border: 1px solid transparent;
    -webkit-box-shadow: none;
    box-shadow: none
}

.topcoat-button--cta,
.topcoat-button--large--cta {
    border: 1px solid #134f7f;
    background-color: #288edf;
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, .36);
    box-shadow: inset 0 1px rgba(255, 255, 255, .36);
    color: #fff;
    font-weight: 500;
    text-shadow: 0 -1px rgba(0, 0, 0, .36)
}

h1,
h1 a,
h3 {
    color: #464646
}
h3 { padding: 10px; margin: auto; text-align: center; }
.topcoat-button--cta:hover,
.topcoat-button--large--cta:hover {
    background-color: #4ca1e4
}

.topcoat-button--cta:active,
.topcoat-button--large--cta:active {
    background-color: #1e7dc8;
    -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, .12);
    box-shadow: inset 0 1px rgba(0, 0, 0, .12)
}

.topcoat-button--large--cta {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 4.375rem;
    padding: 0 1.25rem
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizeing: border-box;
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: "Source Sans Pro", source-sans-pro, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 100;
    color: #666;
    font-size: 16px;
    line-height: 1.375em;
    background: #fff;
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 120px
}

a {
    color: #308dde;
    text-decoration: none
}

a:hover {
    color: #065cbb
}

h1,
h2,
h3,
h4 {
    margin: 0;
    padding: 0;
    font-style: normal
}

h1,
h2,
h3,
h4,
header p {
    text-rendering: optimizeLegibility
}

h1,
h1 a {
    font-size: 2.05em;
    line-height: .6em;
    font-weight: 600
}

h3 {
    font-size: 1.6em;
    font-weight: 300
}

#wrapper {
    max-width: 1036px;
    padding: 40px 40px 0;
    margin: 0 auto
}

header {
    margin-bottom: 50px
}

#side-nav,
#slide-menu-button {
    display: none
}

header p {
    color: #999
}
.heroimg { width: 30%; }
.confessimg { width: 50%; padding: 3em; }
.hero { margin: auto; text-align: center; }
#hero ul,
.features ul,
footer ul,
nav ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.features ul li h3 { text-align: left; }

.features ul li,
nav.main ul li {
    float: left
}

nav.main ul li {
    margin: 0 0 0 55px
}

nav.main ul {
    position: absolute;
    top: 9px;
    right: 0
}

nav a {
    color: #7f7f7f;
    font-size: 1.3em;
    line-height: 3rem
}

h1 a:hover,
nav.main ul li a:hover {
    color: #000
}

#hero {
    display: block;
    height: 310px;
    margin: 80px 0 120px;
    background: url(../img/hero-devices.png) right 50% no-repeat;
    background-size: contain
}

#default-theme,
.features ul li a.bincdn,
.features ul li a.callmeprivate,
.features ul li a.ghbubble,
.features ul li a.htmlposts,
.features ul li a.mypost,
.features ul li a.scamshare,
.features ul li a.textprivately,
.features ul li a.wpbubble,
.features ul li a.notetotext,
.features ul li a.notetoemail,
.features ul li a.notetovoice,
.features ul li a.baremetalhost,
.features ul li a.edithours, 
.features ul li a.writetufte,
.features ul li a.ectochat,
.features ul li a.notetocall,
.features ul li a.youtrippy,
.features ul li a.retiretheory,
.features ul li a.justcounts,
.features ul li a.invodue,
.features ul li a.bunnyapi,
.features ul li a.dreamapi,
.features ul li a.pixle,
.features ul li a.wordpress,
.features ul li a.rewindwp,
.features ul li a.pidata
{
    background-color: #f9f9f9;
    outline: #eee solid 1px
}

#hero ul li,
#hero ul li a {
    display: block;
    height: 310px;
    text-align: center
}

#hero ul li {
    float: left
}

#hero ul li#desktop-preview {
    width: 56%
}

#hero ul li#mobile-preview {
    width: 44%
}

#hero ul li a {
    width: 100%
}

#hero ul li .popover {
    top: -20px;
    opacity: 0;
    -moz-transition-property: opacity, top;
    -moz-transition-duration: .14s;
    -moz-transition-timing-function: ease-out;
    -webkit-transition-property: opacity, top;
    -webkit-transition-duration: .14s;
    -webkit-transition-timing-function: ease-out
}

#hero ul li:hover .popover {
    top: -34px;
    opacity: 1
}

.features ul li {
    width: 50%;
    display: block;
    padding-bottom: 50px
}

.features ul li a.bincdn,
.features ul li a.callmeprivate,
.features ul li a.ghbubble,
.features ul li a.htmlposts,
.features ul li a.mypost,
.features ul li a.scamshare,
.features ul li a.textprivately,
.features ul li a.wpbubble,
.features ul li a.notetoemail,
.features ul li a.notetotext,
.features ul li a.notetovoice,
.features ul li a.baremetalhost,
.features ul li a.edithours, 
.features ul li a.writetufte,
.features ul li a.ectochat,
.features ul li a.notetocall,
.features ul li a.youtrippy,
.features ul li a.retiretheory,
.features ul li a.justcounts,
.features ul li a.invodue,
.features ul li a.bunnyapi,
.features ul li a.dreamapi,
.features ul li a.pixle,
.features ul li a.wordpress,
.features ul li a.rewindwp,
.features ul li a.pidata,
.features ul li a.trackmybot,
.features ul li a.artsy
{
    width: 120px;
    height: 120px;
    margin: 0 30px 30px 0;
    background-size: cover;
    float: left;
    background-repeat: no-repeat;
    display: block;
    text-align: left
}

.features ul li p {
    padding: 0 55px 0 0
}

.features ul li#callmeprivate a.callmeprivate {
    background-image: url(../img/callmeprivate.png)
}

.features ul li#textprivately a.textprivately {
    background-image: url(../img/textprivately.png)
}

.features ul li#wpbubble a.wpbubble {
    background-image: url(../img/wpbubble.png)
}

.features ul li#mypost a.mypost {
    background-image: url(../img/mypost.png)
}

.features ul li#bincdn a.bincdn {
    background-image: url(../img/bincdn.png)
}

.features ul li#scamshare a.scamshare {
    background-image: url(../img/scamshare.png)
}

.features ul li#htmlposts a.htmlposts {
    background-image: url(../img/html5.png)
}

.features ul li#ectochat a.ectochat {
    background-image: url(../img/ectosym.png)
}

.features ul li#ghbubble a.ghbubble {
    background-image: url(../img/coming-soon.jpg)
}

.features ul li#justcounts a.justcounts {
    background-image: url(../img/justcounts.png)
}

.features ul li#bunnyapi a.bunnyapi {
    background-image: url(../img/bunnyapi_logo.jpg)
}

.features ul li#dreamapi a.dreamapi {
    background-image: url(../img/dreamapi.jpg)
}

.features ul li#notetoemail a.notetoemail {
    background-image: url(../img/notetoemail.png)
}

.features ul li#notetotext a.notetotext {
    background-image: url(../img/notetotext.png)
}

.features ul li#notetovoice a.notetovoice {
    background-image: url(../img/notetovoice.png)
}

.features ul li#baremetalhost a.baremetalhost {
    background-image: url(../img/baremetalhost.png);
    width: 28%;
}

.features ul li#edithours a.edithours {
    background-image: url(../img/edithours.png);
}

.features ul li#pixle a.pixle {
    background-image: url(../img/pixle.png);
}

.features ul li#writetufte a.writetufte {
    background-image: url(../img/tufte.png)
}

.features ul li#notetocall a.notetocall {
    background-image: url(../img/notetocall.png)
}

.features ul li#youtrippy a.youtrippy {
    background-image: url(../img/prism.png)
}

.features ul li#retiretheory a.retiretheory {
    background-image: url(../img/retiretheory.png)
}

.features ul li#invodue a.invodue {
    background-image: url(../img/invodue.png)
}


.features ul li#wordpress a.wordpress {
    background-image: url(../img/wordpress.jpg)
}

.features ul li#rewindwp a.rewindwp {
    background-image: url(../img/rewindwp-logo.png)
}

.features ul li#pidata a.pidata {
    background-image: url(../img/pi-data-logo.png)
}


.features ul li#trackmybot a.trackmybot {
    background-image: url(../img/trackmybot.png)
}


.features ul li#artsy a.artsy {
    background-image: url(../img/artsy.png)
}
    #default-theme {
        clear: left;
        width: 100%;
        height: 226px;
        margin-bottom: 80px
    }
    #default-theme img {
        width: 1036px;
        height: 226px
    }
    footer.site {
        bottom: 40px;
        width: 100%;
        left: 0
    }
    footer.site ul {
        max-width: 500px;
        min-width: 320px;
        margin: 0 auto
    }
    footer.site ul li {
        float: left;
        width: 33.333333333%;
        margin: 0;
        text-align: center
    }
    footer.site ul li a {
        display: block;
        width: 100%;
        height: 44px;
        background-repeat: no-repeat;
        background-color: transparent;
        background-size: contain;
        background-position: 50% 50%
    }
    footer.site ul li#twitter a {
        background-image: url(../img/icn-twitter.png)
    }
    footer.site ul li#github a {
        background-image: url(../img/icn-github.png)
    }
    footer.site ul li#adobe a {
        background-image: url(../img/icn-adobe.png)
    }
    .popover {
        position: relative;
        margin: 0 auto;
        display: block;
        border: 1px solid rgba(0, 0, 0, .35);
        border-radius: 5px;
        background: #dfe2e2;
        box-shadow: 0 9px 18px 0 rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(255, 255, 255, .75);
        width: 200px
    }
    .popover .arrow,
    .popover .bottom-arrow,
    .popover .left-arrow,
    .popover .right-arrow,
    .popover .top-arrow {
        position: absolute;
        top: 0;
        width: 30px;
        height: 14px;
        background: -webkit-image-set(url(../img/popover_arrow.png) 1x, url(../img/popover_arrow@2x.png) 2x)
    }
    .popover .top-arrow {
        top: 0;
        left: 47%;
        margin: -13px 0 0
    }
    .popover .bottom-arrow {
        top: 100%;
        left: 47%;
        margin: -1px 0 0;
        -webkit-transform: rotate(180deg)
    }
    .popover .left-arrow {
        top: 40%;
        left: -21px;
        margin: 0;
        -webkit-transform: rotate(-90deg)
    }
    .popover .right-arrow {
        top: 38%;
        left: 97%;
        margin: 0;
        -webkit-transform: rotate(90deg)
    }
    .popover .content {
        padding: 15px
    }
    @media screen and (max-width:1000px) and (min-width:522px) {
        nav.main,
        nav.main ul {
            position: relative
        }
        header.main,
        nav.main ul {
            text-align: center
        }
        nav.main ul {
            margin: 0 auto;
            height: auto
        }
        nav.main ul li {
            display: inline-block;
            margin: 0 25px;
            float: none
        }
        nav.main ul li.download {
            display: none
        }
        #hero {
            margin: 10px 0 40px
        }
    }
    @media screen and (max-width:550px) {
        footer.site ul,
        footer.site ul li,
        header.main {
            text-align: center
        }
        body {
            padding-bottom: 0
        }
        #wrapper {
            padding: 0;
            width: 100%;
            overflow-x: hidden
        }
        #site {
            background: #fff;
            top: 0;
            left: 0;
            padding: 40px 0 0;
            width: 100%;
            position: relative;
            z-index: 10;
            transition: all .2s ease-out;
            -webkit-transition: all .2s ease-out;
            transform: translate3d(0, 0, 0);
            -webkit-transform: translate3d(0, 0, 0)
        }
        #site.open {
            transform: translate3d(250px, 0, 0);
            -webkit-transform: translate3d(250px, 0, 0)
        }
        header.main h1,
        header.main p {
            display: block
        }
        header.main h1 {
            font-size: 1.4em
        }
        #hero ul li .popover,
        .git-ribbon,
        nav.main {
            display: none
        }
        .features ul li h3 {
            line-height: 1.2em;
            margin: 0
        }
        .features ul li {
            display: block;
            float: none;
            width: 100%;
            clear: left;
            padding: 20px;
            text-align: left; 
        }
        .features ul li p {
            padding: 0;
            width: 60%;
            float: left;
            margin-bottom: 55px
        }
        .features ul li a.callmeprivate {
            width: 80px;
            height: 80px
        }
        #slide-menu-button {
            position: absolute;
            top: 0;
            left: 10px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-background-clip: padding;
            -moz-background-clip: padding;
            margin: 0;
            font: inherit;
            background: 0 0;
            cursor: default;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            padding: 0 .5rem;
            letter-spacing: 1px;
            color: #454545;
            text-shadow: 0 1px #fff;
            vertical-align: baseline;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            width: 2.6rem;
            height: 2.6rem;
            line-height: 2.6rem;
            border: 1px solid transparent;
            -webkit-box-shadow: none;
            box-shadow: none
        }
        #slide-menu-button.is-disabled,
        #slide-menu-button:disabled {
            opacity: .3;
            cursor: default;
            pointer-events: none
        }
        #slide-menu-button.is-active,
        #slide-menu-button:active {
            color: #454545;
            text-shadow: 0 1px #fff;
            background-color: #d3d7d7;
            border: 1px solid #a5a8a8;
            -webkit-box-shadow: inset 0 1px rgba(0, 0, 0, .12);
            box-shadow: inset 0 1px rgba(0, 0, 0, .12)
        }
        #slide-menu-button span {
            background-repeat: no-repeat;
            background-image: url(../img/listview_icon.svg);
            position: relative;
            top: -2px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            width: 24px;
            height: 24px
        }
        #side-nav {
            display: block;
            background: #4a4d4e;
            position: fixed;
            width: 100%;
            z-index: 1;
            height: 100%;
            left: 0;
            top: 0
        }
        #side-nav ul {
            list-style: none;
            margin: 0;
            padding: 0
        }
        #side-nav li a {
            color: #f0f1f1;
            display: block;
            height: 46px;
            font-size: 16px;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 12px 0 0 20px;
            text-decoration: none
        }
        #side-nav #sideNav .combo,
        #side-nav nav.site {
            border-bottom: 1px solid #58595a;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 10px;
            display: block
        }
        footer.site ul li {
            display: inline-block;
            margin: 0;
            float: none;
            width: 85px;
            height: 85px
        }
    }
    section#content {
        margin-top: 80px
    }
    section#content article {
        font-size: 18px;
        font-weight: 200;
        line-height: 180%;
        border-bottom: 1px solid #eaeaea;
        max-width: 940px;
        box-sizing: border-box;
        padding: 0 60px 50px;
        margin-bottom: 40px
    }
    section#content article img {
        width: 100%;
        height: auto
    }
    section#content article footer {
        float: none;
        clear: both;
        height: auto
    }
    section#content article h2 {
        font-weight: 100;
        font-size: 37px;
        letter-spacing: -2px;
        margin-bottom: 28px
    }
    section#content article h2 a {
        color: #373435
    }
    section#content article p {
        margin: 20px 0
    }
    section#content article .published {
        font-size: 16px;
        color: #a7a7a7
    }
    #required,
    .error label {
        color: red;
        font-weight: 700
    }
    #disqus_thread {
        box-sizing: border-box;
        padding: 0 20px 60px;
        width: 100%
    }
    iframe.video {
        max-width: 480px;
        width: 100%;
        position: relative;
        margin: 20px auto;
        height: 360px;
        display: block
    }
    @media screen and (max-width:522px) {
        section#content article {
            padding: 0 30px 30px
        }
    }
    #content.narrow {
        max-width: 500px
    }
    label.control-label {
        display: inline-block;
        width: 120px;
        text-align: right;
        margin-right: 10px
    }
    .control-group {
        margin-bottom: 10px
    }
    .control-group.submit {
        margin: 20px 132px 0
    }
    form {
        padding: 10px
    }
    #required {
        padding-bottom: 5px
    }
    .clearfix:after,
    .clearfix:before {
        content: " ";
        display: table
    }
    .clearfix:after {
        clear: both
    }

@media only screen and (max-width: 768px) {
section { margin: 20px; }
}