html {
    min-height: 100%;
    position: relative;
}

body {
    font-size: 16px;
    padding-bottom: 45px;
    color: #555;
}



/** Header **/

header {
    height: 64px;
    width: 100%;
    background-color: #003;
}

header .container {
    margin: 0 auto;
}

header .navbar {
    border: none;
    border-radius: 0;
    margin: 0;
    z-index: 1000;
}

header .navbar .navbar-collapse {
    padding: 0;
}

header .navbar-nav {
    margin-top: 22px;
}

header .navbar-brand {
    padding: 6px 15px;
}

header .navbar-nav a:hover,
header .navbar-nav a:focus,
header .navbar-nav a:active {
    background: none;
    color: #FFF;
    outline: 0;
}

header .navbar-nav a:hover {
    text-decoration: underline;
}

header .navbar-nav a {
    padding: 0;
    color: #FFF;
    font-size: 14px;
    margin: 0 15px;
}

header .navbar-nav .btn-primary {
    padding: 6px 12px;
    margin-right: 0;
    margin-top: -6px;
}

header .navbar-nav .btn-primary:active,
header .navbar-nav .btn-primary:focus,
header .navbar-nav .btn-primary:hover {
    background-color: #286090;
    text-decoration: none;
    outline: 0;
}

.try-bar {
    height: 52px;
    display: none;
}



/** Footer **/

footer {
    background-color: #333;
    height: 45px;
    width: 100%;
    position: absolute;
    bottom: 0;
    font-size: 14px;
}

footer span {
    float: left;
    color: #FFF;
    line-height: 45px;
    font-size: 14px;
}

footer ul {
    float: right;
    margin-bottom: 0;
}

footer li:last-child {
    margin-right: 0;
}

footer li {
    display: inline-block;
    line-height: 45px;
    margin: 0 10px;
}

footer a {
    color: #FFF;
}

footer a:hover,
footer a:active,
footer a:focus {
    color: #FFF;
    text-decoration: underline;
}



/** Elements **/

.btn-primary {
    background-color: #0291db;
    border: none;
}

.btn-primary:hover {
    border: none;
}

.btn-lg {
    font-size: 28px;
    font-weight: 200;
    line-height: 1em;
    padding: 10px 40px;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
    font-weight: 200;
}

pre {
    background-color: #333;
    border: none;
    color: #FFF;
    padding: 15px;
    font-size: 14px;
    white-space: pre-wrap;
    margin: 20px 0;
}

a {
    color: #0291db;
}

.img-block {
    margin: 10px 0;
}

.table {
    font-size: 14px;
}

.breadcrumb {
    padding: 0;
    margin: 20px 0;
    background: none;
}

.breadcrumb .active {
    color: #555;
}



/** Homepage **/

#billboard {
    background-color: #EBEBEB;
}

#billboard .container {
    background-image: url("../images/billboard-background.png");
    background-repeat: no-repeat;
    background-position: 650px 20px;
    padding: 50px 70px 100px;
}

#billboard h1,
#billboard h2 {
    margin: 5px 0;
    line-height: 1em;
    font-weight: 200;
}

#billboard h1 {
    font-size: 44px;
}

#billboard h2 {
    font-size: 28px;
}

#billboard p {
    margin-top: 25px;
}

#billboard .btn-lg {
    margin-right: 45px;
}

#homepage .welcome .row {
    margin: 0;
}

#homepage .features {
    padding-left: 0;
    margin-bottom: 0;
}

#homepage .features li {
    background: url("../images/icon-check-green.png") no-repeat 0 0;
    list-style: none;
    padding-left: 40px;
    margin: 10px 0;
}

#homepage .features li:first-child {
    margin-top: 0;
}

#homepage .features li:last-child {
    margin-bottom: 0;
}

#homepage .test-drive {
    text-align: center;
    padding-bottom: 15px;
}

#homepage .welcome h3:first-child,
#homepage .test-drive h3:first-child {
    margin-top: 0;
}



/** Articles **/

.article,
.article body,
.article .wrapper,
.article .wrapper .row
{
    height: 100%;
}

.article body {
    padding-bottom: 64px;
}

.article footer {
    position: relative;
    margin-top: -45px;
}

.article .wrapper {
    display: table;
    padding-bottom: 45px;
}

.article .wrapper .row {
    display: table-row;
}

.article main {
    padding-left: 50px;
    padding-bottom: 25px;
}

.article .sidebar, .article main {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.sidebar {
    background-color: #EBEBEB;
}

.sidebar-menu {
    list-style: none;
    padding-left: 0;
}

.sidebar-menu li {
    padding-left: 0;
    margin: 10px 0;
}

.sidebar h4 {
    margin-top: 30px;
}

.article .dropdown {
    display: none;
}



/** 404 Page **/

#error-404 main {
    margin-top: 20px;
    margin-bottom: 20px;
}



















/** Large Desktop (Trigger at width >= 1200px) **/
@media only screen and (min-width: 1200px) {}

/** Desktop (Trigger at width >= 992px) **/
@media only screen and (min-width: 992px) {

    .container {
        width: 970px;
    }

    #homepage .welcome,
    #homepage .devices {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    #homepage .devices {
        padding-left: 40px;
    }
}



/** Tablets (Trigger at <= 991px) **/
@media only screen and (max-width: 991px) {

    .article body {
        padding-bottom: 116px;
    }

    header li:last-child {
        display: none;
    }

    .try-bar {
        display: block;
        background-color: #0291db;
        text-align: center;
        margin: 0;
        border-radius: 0;
        border: none;
    }

    .try-bar .close {
        text-shadow: none;
        opacity: 1;
        filter: none;
        color: #FFF;
    }

    .try-bar .close:hover {
        color: #000;
        filter: alpha(opacity=50);
        opacity: .5;
    }

    .try-bar a {
        color: #FFF;
    }

    #billboard .container {
        padding: 50px 15px 100px;
        background-position: 540px 25px;
        background-size: 210px;
    }

    #homepage .features {
        float: left;
        padding-right: 30px;
    }

    #homepage .welcome,
    #homepage .devices {
        margin: 30px 0;
    }
}



/** Mobile (Trigger at <= 767) **/
@media only screen and (max-width: 767px) {

    /** Body **/

    html {
        position: static;
        min-height: auto;
    }

    body {
        padding: 0;
    }


    /** Header **/

    header .glyphicon-menu-hamburger {
        color: #FFF;
        font-size: 21px;
    }

    header .navbar .container {
        padding: 0 15px;
    }

    header .navbar-toggle {
        margin-right: 5px;
    }

    header .navbar-collapse {
        background-color: #003;
        border: none;
        box-shadow: none;
    }

    header .navbar-nav {
        width: 100%;
        margin: 0;
    }

    header .nav a:hover {
        text-decoration: none;
    }

    header .navbar-nav a {
        padding: 15px 20px;
        margin: 0;
    }


    /** Footer **/

    footer {
        height: auto;
        position: static;
    }

    footer .container {
        display: table;
    }

    footer span {
        float: none;
        display: table-footer-group;
        text-align: center;
    }

    footer ul {
        float: none;
        display: table-header-group;
        text-align: center;
    }


    /** General **/

    .container {
        padding-left: 25px;
        padding-right: 25px;
    }

    .btn-lg {
        font-size: 24px;
    }


    /** Homepage **/

    #billboard .container {
        padding: 20px 25px;
        text-align: center;
        background: none;
    }

    #billboard h1 {
        font-size: 36px;
    }

    #billboard h2 {
        font-size: 22px;
    }

    #billboard .btn-primary {
        display: block;
        margin: 10px 0;
    }

    #homepage .welcome,
    #homepage .devices {
        position: static;
        margin: 25px 0;
    }

    #homepage .welcome ul {
        margin: 10px 0;
    }

    #homepage .features {
        float: none;
    }

    #homepage .devices img {
        max-width: 508px;
        width: 100%;
        height: auto;
        display: block;
    }

    #homepage .test-drive {
        text-align: left;
    }

    #homepage .test-drive .btn-lg {
        display: block;
    }



    /** Article **/

    .article,
    .article body,
    .article .wrapper,
    .article .wrapper > .row
    {
        height: auto;
    }

    .article body {
        padding: 0;
    }

    .article .wrapper {
        padding-bottom: 0;
    }

    .article .wrapper,
    .article .wrapper .row,
    .article main {
        display: block;
    }

    .article footer {
        margin-top: 0;
    }

    .article .dropdown {
        margin-top: 25px;
        display: block;
        padding: 0 15px;
    }

    #jump-menu {
        position: absolute;
        left: 0;
        top: 100%;
        padding: 0 15px;
        z-index: 1000;
        width: 100%;
    }

    .article .dropdown .dropdown-toggle,
    .article .dropdown.open .dropdown-toggle {
        background-color: #333;
        border: none;
        color: #FFF;
        padding: 10px;
    }
    .article .dropdown.open .dropdown-toggle {
        background-color: #555;
    }

    .article .dropdown .caret {
        margin-left: 5px;
    }

    .article .dropdown .btn,
    .article .dropdown .dropdown-menu {
        width: 100%;
    }

    .article .dropdown-menu {
        position: static;
    }

    .article .sidebar {
        display: none;
    }

    .article main {
        padding-left: 15px;
        padding-bottom: 25px;
    }
}