body, p, li {
    font-family: "proxima-nova", sans-serif;
}

h1, h2, h3 {
    font-family: "proxima-nova", sans-serif;
    font-weight: 700;
}

h2 small {font-family: "proxima-nova", sans-serif; font-weight:300; letter-spacing: 0;}

p, li {
    font-weight: 300;
    font-size: 17px;
}

#banner h1, #small-banner h1 {
    line-height: 1em;
    color: #fff;
    text-shadow: 0px 2px 30px rgba(0, 0, 0, 0.25);
    font-size: 65px;
}

#banner p, #small-banner p {
    color: #fff;
    text-shadow: 0px 2px 30px rgba(0, 0, 0, 0.25);
    font-size: 22px;
}

#banner-text-wrapper {
    max-width:650px;
    margin:0;
    float:left;
    text-align: left;

}

#small-banner {
    padding: 130px 0 100px;
}

#contact { padding:35px 0;}


@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 25px;
        padding-bottom: 25px;
    }

}

.bg-grey {
    background: #f2f2f2;
}

#intro, #future-proof {
    position: relative;
    overflow: hidden;
    z-index: 9;
}

#why-sit-to-stand {
    position: absolute;
    top: 0;
    right: 55%;
    height: 109%;
    width: auto;
}

#why-sit-to-stand2 {
    position: absolute;
    top: 0;
    left: 48%;
    height: 140%;
    width: auto;
}

.relative {
    position: relative;
}

.z-back {
    z-index: 2;
}

.z-front {
    z-index: 9;
}

#modular-design {
    position: absolute;
    bottom: 0;
    left: 45%;
    height: 100%;
    width: auto;
}

#green-materials {
    position: absolute;
    bottom: 8%;
    left: 53%;
    height: 84%;
    width: auto;
}

#standing-desk-design {
    position: absolute;
    bottom: 0%;
    right: 49%;
    height: 100%;
    width: auto;
}

#value-standing-desk {
    position: absolute;
    bottom: 0%;
    right: 49%;
    height: 110%;
    width: auto;
}

#marketing {
    position: absolute;
    bottom: -10%;
    left: 51%;
    height: 120%;
    width: auto;
}

#increase-sales {
    position: absolute;
    bottom: 0%;
    right: 40%;
    height: 100%;
    width: auto;
}

#quality-desktops {
    position: absolute;
    bottom: 0%;
    left: 49%;
    height: 100%;
    width: auto;
}
#contact-info h3 { color:#797979}
#contact-info ul{ list-style: none;
    padding:0;}

#environment {position: absolute;
    bottom: 0%;
    left: 48%;
    height: 95%;
    width: auto;}

#our-approach-img {
    position: absolute;
    bottom: 0%;
    right: 48%;
    height:100%;
    width: auto;
}

#why-digital-motion {
    padding: 75px 0;
}

#why-digital-motion h2, #why-digital-motion h3 {
    color:#797979;
}
#why-digital-motion h2 { margin: 0 0 25px;}
#why-digital-motion h2 span { font-weight:300;}

#why-button-row { margin-top: 20px;}
.title {
    margin: 0;
}

.btn-primary {
    border: none;
    background: #345881;
    text-shadow: none;
    box-shadow: none;
}

.btn-outline-white {
    border:2px solid #fff;
    color:#fff;
    background:transparent;
    text-shadow: none;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.btn-outline-white:hover {
    box-shadow:none;
}

header {
    width: 100%;
    max-width: 100%;
    -webkit-box-shadow: 0px 0px 2px 2px rgba(9,9,9,.15);
    -moz-box-shadow: 0px 0px 2px 2px rgba(9,9,9,.15);
    box-shadow: 0px 0px 2px 2px rgba(9,9,9,.15);
}

.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}
nav li a {-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;}
nav li a:hover {
    background-image: -webkit-linear-gradient(top, #dbdbdb 0, #e2e2e2 100%);
    background-image: -o-linear-gradient(top, #dbdbdb 0, #e2e2e2 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #dbdbdb), to(#e2e2e2));
    background-image: linear-gradient(to bottom, #dbdbdb 0, #e2e2e2 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
    -webkit-box-shadow: inset 0 3px 9px rgba(0,0,0,0.075);
    box-shadow: inset 0 3px 9px rgba(0,0,0,0.075);
}

.headroom {
    transition: transform 200ms linear;
}

.headroom--pinned {
    transform: translateY(0%);
}

.headroom--unpinned {
    transform: translateY(-100%);
}

.navbar-brand {
    float: left;
    height: auto;
    padding: 23px 15px 22px 50px;
    font-size: 25px;
    line-height: 25px;
    background: url(../img/logo.png) no-repeat left center;
    background-size: auto 40px;
}

.navbar-brand {
    font-family: "proxima-nova", sans-serif;
    font-weight: 300;
}

.navbar-brand span {
    font-weight: 600;
}

.container-standard {
    padding: 120px 0;
}

.container-standard h2 {
    line-height: .9em;
    margin-bottom: 25px;
    color: #797979;
}

.container-standard h2 .fa {color:#345881;}

.container-fluid .row {
    max-width: 1200px;
    margin: 0 auto;
}

.seperator-line { max-width:1200px; width: 100%; margin:0 auto;
    height:1px; background:#ddd;}

#footer .row {max-width: none;}

#why-digital-motion h3 .fa, #why-digital-motion h3 .glyphicon {
    color: #345881;
}

.bg-green {background:#90e6ab;}
.bg-green h2 {
    color: #33a37d;
}

.bg-green h2 small { color:#276b54;}

.bg-green h2 .fa { color:#b5ffc5;}
.navbar-toggle {
    margin-top: 18px;
}

 .container-standard { overflow: hidden;}

.btn-md {
    padding: 12px 16px;
    font-size: 18px;
    font-weight: 600;
}
#options { padding:60px 0;}
#options h3 {color:#797979; font-size: 20px}
#options p { font-size: 16px;}
#options .row div{ padding: 20px;}
#footer {
    background: #797979;
    padding: 60px 0 80px;
    text-align: center;
}

#logo-footer { max-width: 75px;
    height:auto; opacity: .7; }
#logo-footer-text {font-weight:300; color:#ccc; margin-bottom:35px;}
#logo-footer-text span{
    font-weight: 600;
}
#footer .nav {text-align:center; margin-bottom: 35px;}
#footer .nav li { display:inline-block;}
#footer .nav li a { color:#fff; padding: 10px 35px;}

#footer .nav > li > a:hover, .nav > li > a:focus {
background:none;
}
#banner {
    position: relative;
    z-index:8;
    min-height: 400px;
    padding: 0;
    /*background: #8bc8f7;*/
    background-image: url(../img/background.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: auto;
    margin: 0 auto;
    max-width: 100%;
    min-width: 0;
    -webkit-box-shadow: inset 0px 0px 40px 0px rgba(9,9,9,.65);
    -moz-box-shadow: inset 0px 0px 40px 0px rgba(9,9,9,.65);
    box-shadow: inset 0px 0px 40px 0px rgba(9,9,9,.65);
}
.bg-blue {background:#345881;}
.bg-blue h2, .bg-blue p { color:#fff;}
#our-approach #banner {

    background-image: url(../img/standing-desk-warmth.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

#product #banner {

    background-image: url(../img/products-bg.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

#contact-us #small-banner {
    background-image: url(../img/contact-bg.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;

}

#product #banner-text-wrapper {
    margin:0 auto;
    text-align: center;
    float: none;
}

#product .display-cell {
    padding: 0;
}

.display-table {
    position: absolute;
    top: 0;
    left: 0;
    display: table;
    width: 100%;
    height: 100%;
}

.display-cell {
    display: table-cell;
    vertical-align: middle;
    padding:0 35% 0 5%;
    text-align: center;
}

#scroll-down {
    width: 200px;
    text-align: center;
    margin: 0 0 0 -100px;
    position: absolute;
    bottom: -45px;
    left: 50%;
    text-decoration: none;
}

#scroll-down p {
    margin: 0;
    padding: 0;text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.55);}

#scroll-down .fa {
    font-size: 45px;
    color:#345881;
    /*text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.35);*/
    -webkit-transition: all .74s;
    -moz-transition: all .74s;
    -ms-transition: all .74s;
    -o-transition: all .74s;
    transition: all .74s;
    -webkit-animation: moveY .7s linear 0s infinite alternate;
    -moz-animation: moveY .7s linear 0s infinite alternate;
    -o-animation: moveY .7s linear 0s infinite alternate;
    animation: moveY .7s linear 0s infinite alternate;
    background: #fff;
    padding: 0 35px;
    height: 120px;
    border-radius: 70px;
}

#product #scroll-down .fa {
    background: #fff;

}

#scroll-down:hover {
    cursor: pointer;
}

#scroll-down:hover .fa {
    opacity: .5;
}

#green-focus {
    background-image: url(../img/green-materials-bg.jpg);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

@-webkit-keyframes moveY {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0)
    }
}

@keyframes moveY {
    0% {
        -webkit-transform: translate3d(0, 0%, 0);
        transform: translate3d(0, 0%, 0)
    }
    100% {
        -webkit-transform: translate3d(0, 25%, 0);
        transform: translate3d(0, 25%, 0)
    }
}

.moveY {
    -webkit-animation-name: moveY;
    animation-name: moveY
}

.btn-lg { font-size: 22px;}
.btn-primary { font-weight:600; margin-top: 20px;    letter-spacing: -.04em;-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

#copyright {color:#999;}

#magnet-footer { padding:45px 0;}

@media (min-width: 1200px) {

    #banner h1 {
        font-size: 85px;
    }
}

@media (min-width: 992px) {
}

@media (max-width: 992px) {
    .container-standard {
        padding: 60px 0;
    }

    .jumbotron {
        padding: 80px 0;
    }
}

@media (min-width: 768px) and  (max-width: 1200px){
    #options .row .col-sm-6 {    min-height: 460px;}
}

@media (max-width: 768px) {


    #banner h1 {
        font-size: 45px;
    }

    #why-digital-motion {
        padding: 35px 0;
    }

    .display-cell { padding: 0px 25px;}

    #banner p { font-size: 18px;}

    p, li {
        font-size: 15px;
    }

    .navbar-brand {
        margin-left: 15px;
    }

    .jumbotron {
        padding: 60px 0 40px;
    }

    #modular-design, #why-sit-to-stand {
        position: relative;
        width: 100%;
        height: auto;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
    }

    .container-standard {
        padding: 30px 0;
    }

    #our-approach-img {
        position: relative;
        bottom: 0%;
        right: auto;
        height: auto;
        width: 100%;
    }


    #increase-sales { display:none;}

    #marketing {
        position: relative;
        bottom: 0;
        left: 0;
        height: auto;
        width: 100%;
    }

    #intro { padding-top:0;}

    #why-sit-to-stand2 {
    position: relative;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
}

    #value-standing-desk {
        position: relative;
        bottom: 0%;
        right: 0;
        height: auto;
        width: 100%;
    }

    #quality-desktops {
        position: relative;
        bottom: 0%;
        left: 0;
        height: auto;
        width: 100%;
    }

    #standing-desk-design {
        position: relative;
        bottom: 0%;
        right: 0;
        height: auto;
        width: 100%;
    }

    #environment {
        position: relative;
        bottom: 0%;
        left: 0;
        height: auto;
        width: 100%;
    }

    #options {
        padding: 20px 0;
    }

    #small-banner h1 {
        font-size: 40px;
    }
    #small-banner p {
        font-size:18px;
    }


    #small-banner {
        padding: 90px 0 30px;
    }

}

@media (max-width: 568px) {

    #banner { height:auto;}

    .display-table {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 100px 0;
    }

    .display-cell {
        display: block;
        position: relative;
    }

    .display-table:before, .display-table:after {  content: " ";
        display: table;}

    .display-table:after {  clear: both;}

}