img {
    border: none;
}

table p {
    margin: 10px 0px 15px 0px;
    font-weight: 300;
    font-size: 15px;
    line-height:24px;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

#about .row, #buy .row, #why .row, #invoice .row {
    width: 750px;
    margin: 0 auto;
}

#about .row, #buy .row, #why .row {
    padding: 60px 0;
}

#invoice .row {
    padding: 10px 0;
}


#about .row {
    padding-bottom: 0;
}


#about img {
    max-width: 750px;
    margin-top: 20px;
}

.row ul, .row ol {
    padding-right: 100px;
}

#about:after {
    content: "";
    display: block;
    width: 750px;
    margin: 50px auto 0 auto;
}

.feature-matrix {
    width: 750px;
    margin: 0 auto 60px auto;
    text-align: center;
    border-spacing: 0;
    border-collapse: separate;
}

    .feature-matrix span {
        font-weight: bold;
        margin: 0;
    }

    .feature-matrix p {
        margin: 5px 0;
    }

    .feature-matrix i {
        color: #1bb058;
        font-size: 25px;
    }

tr td:nth-of-type(2n) i {
    color: #29abe2;
}

tr td:nth-of-type(3n) i {
    color: #f9a41a;
}

tr td:nth-of-type(4n) i {
    color: #1bb058;
}
.feature-matrix th {
    padding: 10px;
}

th.standard {
    background: #29abe2;
    color: #fff;
    width: 100px;
}

th.business {
    background: #f9a41a;
    color: #fff;
    width: 100px;
}

th.enterprise {
    background: #1bb058;
    color: #fff;
    width: 100px;
}

td.feature {
    text-align: left;
    width: 50%;
    vertical-align: top;
    border-bottom: 1px solid #e6e6e6;

}
.feature span {
    font-size: 20px;
}
.feature-matrix td {
    padding: 50px 0;
}
.feature-matrix tr:last-of-type td {
  border-bottom: 0;
}


/* portrait tablet tweaks */
@media only screen and (min-width: 768px) and (max-width: 959px) {

    /* homepage, most other pages seem fine? */

    .row {
        width: auto !important;
        height: auto;
        margin-top: 30px !important;
        padding: 20px 20px !important;
        border-bottom: none !important;
    }

        .row h2, .row p {
            width: auto !important;
            float: none !important;
            padding-right: 10px;
        }

        .row .box {
            position: inherit !important;
            width: 100% !important;
            height: auto !important;
        }

    #first {
        padding-top: 40px !important;
    }

    #second .row, #third .row, #fourth .row {
        margin: auto 30px;
        height: auto;
    }

        #second .row p, #third .row p, #fourth .row p {
            padding: 0;
        }

        #second .row h2, #third .row h2, #fourth .row h2 {
            padding: 0;
        }

        #second .row:first-of-type, #third .row:first-of-type, #fourth .row:first-of-type {
            margin-right: 30px;
        }

    div.box video {
        width: 100%;
        height: auto;
    }

    div.box img {
        width: 100%;
        height: auto;
    }

    .twoColumn {
        width: 100%;
        margin: 0;
        margin-bottom: 30px;
    }

        .twoColumn .box {
            border-top: 15px solid #bbb;
        }

    #icons .row {
        float: inherit;
        width: 100%;
        height: auto;
        padding-bottom: 10px;
        margin-right: 10px;
        margin-top: 0 !important;
    }

        #icons .row .icon {
            margin: 0 20px 0 10px;
            margin-top: -5px;
        }

    #icons .twoColumn {
        margin: 30px 0 30px 0;
    }

    #icons .row:nth-child(2n) {
        float: none;
    }

    /* about page */
    .feature-matrix {
        width: auto;
        margin: 0 20px 60px 20px;
    }

    h1.intro {
        margin-bottom: 0;
    }
}

/* stuff only necessary on larger screens */
@media only screen and (min-width: 768px) {

    .feature-matrix td:nth-of-type(odd) {
        padding-right: 50px;
    }

    .feature-matrix tr:first-of-type td.feature {
      padding-top: 0;
    }

    .feature-matrix td:nth-of-type(even) {
        padding-left: 50px;
    }


}

/* mobile tweaks */
@media only screen and (max-width: 767px) {

  .feature span {
      font-size: 20px;
  }

  td.feature {
      border-bottom: 1px solid #aaa;
      padding: 15px 0;

  }

  tr:first-of-type td:first-of-type{
    padding-top: 0;
  }

  tr:last-of-type td.feature:last-of-type{
    border-bottom: 0;
  }

  td.feature img {
    margin-top: 20px;
  }

    /* top nav stuff */
    nav div {
        width: 100%;
    }

    nav a.nav-link {
        min-width: 50px;
        width: 14%;
    }

    #about img, #faq img {
        max-width: 750px;
        width: 100%;

    }

    nav a.nav-link img {
        margin-left: -10px;
    }


    nav a.fork-us {
        display: none;
    }

    /* footer stuff */

    footer #foot {
        width: 100%;
    }

    footer .links {
        height: auto;
    }


    /* other pages */

    article h1, article h1 a {
        font-size: 25px;
    }

    #about:after, #faq:after, #buy:after {
        width: 100%;
        margin: 30px auto 0 auto;
    }

    #about .row, #buy .row, #why .row {
        width: 90%;
        padding: 20px 10px;
    }

    .biglogo {
        width: 90%;
        padding-top: 20px;
    }

        .biglogo img {
            width: 100%;
            height: auto;
        }

    header {
        height: auto;
    }

    header #tabs {
        height: auto;
    }

    /* about page */

    section#first {
        padding: 20px 0 10px 0;
    }
    div.box {
      margin: 20px;
      width: auto;

    }

    div.box video {
        height: auto;
        width: 100%;
    }

    div.box img {
        width: 100%;
        height: auto;
    }

    #first .row {
        width: auto;
        padding: 20px 0;
        border-bottom: none;
    }

    #first .box {
        width: auto;
        height: auto;
    }

    #first .row h2, #first .row p {
        width: auto;
        float: none;
        padding: 0 20px;
    }

    .twoColumn {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        padding: 20px;
    }

    #second .row {
        width: 100%;
        height: auto;
        margin-top: 30px;
        padding-top: 20px;
    }

    #second .box {
        position: inherit;
    }

    #second .row h2, #second .row p {
        width: auto;
        float: none;
        padding: 0 20px;
    }

    #third .row {
        width: 100%;
        height: auto;
        margin-top: 30px;
        padding-top: 20px;
    }

    #third .box {
        position: inherit;
    }

    #third .row h2, #third .row p {
        width: auto;
        float: none;
        padding: 0 20px;
    }

    #fourth .row {
        width: 100%;
        height: auto;
        margin-top: 30px;
        padding-top: 20px;
    }

    #fourth .box {
        position: inherit;
    }

    #fourth .row h2, #fourth .row p {
        width: auto;
        float: none;
        padding: 0 20px;
    }

    #icons .row {
        float: inherit;
        width: 100%;
        height: auto;
        padding-bottom: 20px;
        margin-right: 10px;
    }

    #icons .row .icon {
        margin: 0 10px 0 10px;
        margin-top: -5px;
    }

    #icons .twoColumn {
        margin: 30px 0 30px 0;
    }

    #icons .row:nth-child(2n) {
        float: none;
    }

    .tagline {
        font-size: 32px;
    }

    .onepointoh {
      position: absolute;
      top: 35px;
      right: 0;
      float: right;
      -ms-transform: scale(.8); /* IE 9 */
      transform: scale(.8);
    }

    h1.intro {
        margin: 0;
        margin-top: 10px;
        line-height: auto;
    }

    .feature-matrix table,
    .feature-matrix tbody,
    .feature-matrix td,
    .feature-matrix tr {
        display: block;
    }

    .feature-matrix td {
        width: auto;
    }

    .feature-matrix {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .feature-matrix td img {
        text-align: center;
    }

    #faq h1 {
        margin-top: 20px;
    }

    #faq img {
        width: 100%;
        height: auto;
    }

    #faq .row {
        width: 90%;
    }

    /* buy page */

    #buy h1.intro {
        font-size: 16px;
        margin-bottom: 0;
        margin-left: 5px;
        margin-right: 5px;
        padding: 10px;
    }

    #buy .row {
        width: 99%;
        padding: 0;
    }

    #buy .pricing {
        margin: 10px 0;
    }

    #buy .pricing .tier-title {
        padding-left: 10px;
        font-size: 15px;
        margin-top: -47px;
        margin-bottom: 15px;
    }

    #buy span.dollar {
        font-size: inherit !important;
        line-height: inherit !important;
        vertical-align: inherit !important;
    }

    #buy .pricing .tier .price {
        font-size: 23px;
    }

    #buy span.per-mo {
        font-size: 15px;
    }

    #buy .pricing .price div {
        height: 80px;
    }

    #buy .pricing .tier {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 33.33%;
    }

    #buy #standard-tier {
        border: none;
    }

    #buy #business-tier {
        border: none;
    }

    #buy #enterprise-tier {
        border: none;
    }

    #buy .tier-details ul {
        padding: 0;
        height: auto;
    }

    #buy .tier-details li {
        font-size: 14px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.5;
    }

    #buy .btn-small {
        margin: 5px;
    }

    #buy .wide-tier {
        margin-top: 25px;
    }

    #buy .wide-tier .price-and-title {
        width: auto;
        float: inherit;
        height: auto;
    }

    #buy .pricing #install-tier .price div {
        font-size: 40px;
        height: 60px;
        padding-top: 0;
        padding-bottom: 38px;
    }

    #buy .wide-tier .tier-details {
        float: inherit;
        width: 95%;
        margin-left: 5%;
    }

    #buy .wide-tier .btn-small {
        width: 88%;
        margin-bottom: 15px;
    }

    .customerblock {
        width: 182px;
    }
}

/* teeny TINY smartphone tweaks, seriously get a bigger damn phone already */
@media only screen and (max-width: 374px) {
    nav a.nav-link.grey {
        display: none;
    }
    nav a.nav-link {
        width: 16%;
    }
}

@media print {
    nav {
        display: none;
    }

    footer {
        display: none;
    }
}

@media only screen and (max-width: 767px) {

  #buy .wide-tier .btn-small {
      width: 88%;
      margin: 0 auto;
      margin-bottom: 20px;
  }

  #questions {
    padding: 0 10px;
  }

  .pricing .wide-tier {
    margin: 0 10px;
    width: auto;
  }

  .tier-details {
    min-height: 950px;
    padding: 20px 10px 0 10px;
  }

  #buy .wide-tier .tier-details {
    min-height: 230px;
    width: auto ;
    padding: 10px;
    margin-left: 0;
  }

  #buy .wide-tier .tier-details p {
    padding: 10px 25px;

  }

  #business-tier .tier-details {
    background: #f8f8f8;
  }

  #buy .pricing .tier-title {
    margin-bottom: 10px !important;
  }

}