/**
@zindex-navbar:            1000;
@zindex-dropdown:          1000;
@zindex-popover:           1060;
@zindex-tooltip:           1070;
@zindex-navbar-fixed:      1030;
@zindex-modal-background:  1040;
@zindex-modal:             1050;
 */


/*

MOBILE FIRST:

Here should go all of the base styles — that is, all styles that are for all screens, including smallest screens.

Styles that need to be overridden or are for larger screens only should be added to the appropriate
less file. These files are imported at the bottom of this file.

 */

html {
    height: auto;
    overflow: auto;
}

body {
    height: auto;
    overflow: auto;
    letter-spacing: normal;
    font-weight: 300;
    font-family: "Lato", sans-serif;
    padding-top: 70px; 
}

.container-wide {
    position: relative;
    width: 100%;
    text-align: center;
    padding: 20px 0px 60px;
    font-size: 1.1em;
}

.row {
    margin: 0;
}

.container-wide.setup {
    background-color: #F7F7F7;
}

.container-wide.footer {
    padding-bottom: 32px;
}

.container-mid {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.container {
    text-align: left;
    width: 90%;
}

.splash-header {
    padding: 0px 0px 40px 0px;
    margin-top: 0px;
    border: none;
}

.preview img {
    width: 100%;
    max-width: 1280px;
}

a {
    text-decoration: none;
    color: #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
}

a:hover {
    text-decoration: none;
    color: #999;
}

h3,
h4,
h5 {
    font-weight: 300;
    text-transform: none;
}

h4 {
    font-size: 1.5em;
}

h6 {
    font-size: 0.8em;
    font-weight: 300;
    text-transform: none;
    color: #898989;
    text-align: center;
}

nav.navbar {
  border: none;
  background-color: white;
  font-weight: 400;
}


#navbar a {
  color: #3a3a3a;
  border: none;
  padding: 15px 30px;
}

#navbar a:hover {
  color: #999;
}

.navbar-toggle {
  background-color: white;
  border: none;
}

.openframe {
    line-height: 1.4em;
}

.openframe span {
    position: relative;
}

.openframe .alpha {
    position: absolute;
    bottom: -20px;
    right: 7px;
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

strong {
    font-weight: 400;
}

section.intro {
    font-size: 1.3em;
    line-height: 1.3em;
    margin-bottom: 40px;
    margin-top: 20px;
}

section.intro2 {
    font-size: 1.3em;
    line-height: 1.3em;
    margin-bottom: 20px;
}

section.intro p {
    margin: 0 0 20px;
}
.get-started {
    text-align: center;
}

.btn-get-started {
    font-family: "Lato", sans-serif;
    font-size: 14px;
    height: 40px;
    width: 180px;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    text-transform: uppercase;
    background-color: black;
    border: none;
    color: white;
    letter-spacing: 1.4px;
    font-weight: 600;
}
.btn-get-started {
    padding-top: 10px;
}

.btn-get-started:hover {
    background: #333;
    color: white;
}

.btn-get-started:active {
    background: #333;
    color: white;
}

.btn-get-started:focus {
    background: #333;
    color: white;
}

.updates-twitter {
    text-align: center;
    margin-top: 30px;
    font-size: 1.2em;
}

.icon-inline {
    background-image: url('../img/twitter.svg');
}

.icons-footer {
    text-align: center;
    margin-top: 20px;
}

.twitter-footer {
    width: 22px;
    opacity: 0.8;
    margin-right: 6px;
}

.github-footer {
    width: 22px;
    opacity: 0.8;
    margin-left: 6px;
    padding-bottom: 1px;
}

.follow img {
    width: 16px;
    padding-bottom: 4px;
    margin-right: 3px;
}

ul.features {
    position: relative;
    width: 500px;
    max-height: 400px;
    overflow: hidden;
    margin-bottom: 40px;
}

ul.features.more {
    display: none;
}

ul.features li {
    position: relative;
    padding-left: 25px;
    background-position: 0px 3px, center;
    background-repeat: no-repeat;
    margin-top: 10px;
    font-weight: 400;
    font-size: 1.1em;
}

ul.features li.done {
    background-image: url('../img/DoneCheck.svg');
}

ul.features li.not-done {
    background-image: url('../img/NotDone.svg');
}

ul.features li.see-more a {
    color: #eeeeee;
    font-weight: 300;
    text-decoration: none;
    border-bottom: 1px solid #B2B2B2;
}

.fine-print {
    margin-top: 40px;
    font-size: 0.9em;
    color: #eeeeee;
}

.row-step {
    margin-top: 50px;
}

.row-step h5 {
    margin-top: 20px;
    font-weight: 400;
    font-size: 1.1em;
}

.row-step img {
    margin-bottom: 10px;
}

.for-whom {
    background-color: #F7F7F7;
    padding-top: 0px;
}

.for-whom h4 {
    font-weight: 400;
    margin-top: 60px;
}

.for-whom h5 {
    margin-top: 40px;
    font-weight: 400;
    font-size: 1.1em;
}

.for-whom div[class^="col-"] {
    padding: 0px 20px;
}

.q-a {
    background-color: #3f3e3c;
    color: #FFF;
}

.q-a h3,
.q-a h4,
.q-a h6,
.q-a a {
    color: #FFF;
    text-align: center;
    border-bottom-color: #FFF;
}

.q-a a:hover {
  color: #999;
}

.q-a h5 {
    color: #50E3C2;
    font-size: 1.1em;
    margin-top: 40px;
    margin-bottom: 20px;
}

.q-a h4.footer-heading {
    margin-top: 40px;
    margin-bottom: 60px;
}

.q-a section {
    margin-top: 40px;
}

.footer {
    background-color: #363533;
    color: #FFF;
}

.footer h3,
.footer h4,
.footer a {
    color: #B2B2B2;
    text-align: center;
}

.footer-contact-us {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-top: 18px;
}

.footer-contact-us a {
    text-decoration: none;
    border-bottom: 1px solid #898989;
}

.footer h6 {
    text-align: center;
}

.footer h6 a {
    color: #898989;
    border-bottom: none;
}

.footer h6 a:hover {
    color: #999;
    border-bottom: 1px solid #898989;
}


/**
 * Import styles for larger sreens.
 */

@media (min-width: 768px) {
    /* .navbar {
        border-bottom: 1px solid #777777;
    } */
    #navbar {
      padding: 0px 15px;      
    }
    
    #navbar a {
      padding: 15px 15px;
    }
    
    html#Website body .container {
        width: 700px;
    }
}

@media (min-width: 992px) {
    html#Website body .container {
        width: 700px;
    }
}

@media (max-width: 767px) {

    .row {
        margin-right: 0px;
        margin-left: 0px;
        margin-bottom: 20px;
    }

    .col-md-12 {
        padding-right: 0px;
        padding-left: 0px;
    }

    .splash-header {
        padding: 0px 0px 0px 0px;
        margin-top: 0px;
        border: none;
    }

    .container {
        width: 100%;
    }

    .container-wide {
        padding-bottom: 26px;
    }

    .q-a h5 {
        line-height: 1.4;
        font-weight: 500;
    }

    .footer-contact-us {
        margin-bottom: 30px;
    }

    .container-wide.footer {
        padding-bottom: 0px;
    }
}