/*SECTION*/
.section{
    min-height: 100px;
}

/*NAV BAR*/
.nav{
    color: black;
    padding: 20px 5% 5px 5%;
    position: relative;
    z-index: 99;
    background-color: white;
	border-bottom: 1px solid #ddd;
	text-align: center;
}

.nav .button{
    margin-left: 1em;
}

.nav .button-row {
    margin: 4px 0;
}

.nav .button-row.top {
    margin-bottom: 16px;
}

.nav .button-row.second .button {
    text-transform: uppercase;
    font-size: 12pt;
    padding: 0.7em 1em;
}

.nav .button-row a {
    margin: 0 0 0 1em;
}

.nav-inset { position: relative; }

.nav-inset .logomark {
    position: absolute;
    top:0;
    left:0;
    height: 42px;
    width: 48px;
    background-position: 0 0;
    background-image: url(/img/viome_logo.png); /* small V */
    background-repeat: no-repeat;
}

@media (min-width: 500px) {
    .nav-inset .logomark {
        background-image: url(/img/viome-logo-sm.svg); /* full Viome */
        background-position: 0 50%;
        background-size: 100%;
        width: 30%;
    }
}

@media (min-width: 1120px) {
    .nav-inset .logomark { width: 300px; margin-left: 5%;}
}


.nav img {
    height: 24px;
}
.nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.nav li {
    font-size: 1.2em;
    line-height: 60px;
    height: 60px;
    border-bottom: 1px solid #888;
    -webkit-transition: background-color .3s;
    transition: background-color .3s;
    text-transform: uppercase;
}
.nav a {
    text-decoration: none;
    color: white;
    display: inline-block;
}

.nav a.button,
.nav a.button:hover,
.nav a.button:focus { color: #222; background-color: white;  }

.nav li:hover {
    background-color: transparent;
}
.nav li:hover a {
    text-decoration: line-through;
}
.nav .active:hover{
}
.nav-mobile-container {
    background-color: #5846e2;
}
.nav-mobile-container img {
    max-width: 80%;
    height: 50px;
}
.nav-toggle {
    width: 50px;
    height: 50px;
    float: right;
    text-indent: -9999px;
    overflow: hidden;
    /*display: block;*/

    background: #5846e2 url("../images/menu.png") no-repeat 50% 33%;
    background-size: cover;
}
.nav .links {
    color: white;
}
.nav li {
    padding: 0 20px;
    border-bottom: none;
    height: 40px;
    line-height: 40px;
    font-size: 1em;
    display: inline-block;
}
@media screen and (max-width: 1070px) {
    .nav li{
        padding: 0 10px;
    }
}
.nav .active{
}
.nav .active a{
    text-decoration: line-through;
}

/*FOOTER*/
.footer{
    background-color: #333743;
    color: white;
    padding: 5rem;
}
@media screen and (max-width: 1070px) {
    .footer{
        padding: 2rem;
    }
}
.footer .nav{
    padding-top: 0;
}
.footer .nav .active a{
    color: #2B364F;
}

/*COMMON ELEMENTS*/
body{
    font-family: Calibre, sans-serif;
    background-color: #f7f7f7;
}
p{
    font-family: Calibre, serif;
    color: #9297a3;
    line-height: 1.94;
}
h1, h2, h3, h4, h5, h6{
    font-family: Calibre, sans-serif;
}
div{
    background-size: cover;
    background-position: center;
}
.hero{
    background-size: cover;
    background-attachment: fixed;
    min-height: 30vw;
}
.hero .row{
    max-width: none;
}
.headline{
    font-family: Calibre, sans-serif;
    font-weight: 500;
    font-size: 4rem;
    line-height: 1.05;
    margin-bottom: 20px;
    text-transform: uppercase;
}
@media screen and (max-width: 499px) {
    .hero{
        background-attachment: initial;
    }
    .headline{
        font-size: 2rem;
    }
}
.inline-block{
    display: inline-block;
}
.right{
    text-align: right;
}
.left{
    text-align: left;
}
.offset-images img{
    max-width: 100%;
}
.offset-left{
    margin-right: 100px;
}
.offset-right{
    margin-left: 100px;
}
.padded-top{
    padding-top: 3vw;
}
.padded-bottom{
    padding-bottom: 3vw;
}
.padded{
    padding-top: 3vw;
    padding-bottom: 3vw;
}



.btn-login {
	width: 100%;
	padding: 1.1em 1em;
}
.no-padding{
    padding: 0;
}
.no-gutter{
    max-width: none;
}
.header{
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

/*COMMON SECTIONS*/
.secure{
    font-family: Calibre, sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
    color: #9297a3;
}
.sotu{
    color: #9297a3;
    font-family: Calibre, serif;
    font-size: 1.25rem;
}
.cutoff{
    font-size: 5rem;
    text-transform: uppercase;
    letter-spacing: 30px;
    margin-left: -25px;
    font-weight: 200;
}

.nav-icon {
    display: inline-block;
    width: 28px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: bottom;
}
@media (min-width: 600px) {
    .nav-icon {
        margin: -6px 8px -2px -3px;
        width: 24px;
        height: 24px;
    }
}

.nav-icon.account {
    background-image: url(/img/nav/account.png);
}

.nav-icon.recs {
    background-image: url(/img/nav/Recs.svg);
}

.nav-icon.export-pdf {
    background-image: url(/img/nav/GeneratePDF.svg);
}