:root {
        font-size: 18px;
    }
    
    @media only screen and (max-width: 1600px) {
        :root {
            font-size: 17px;
        }
    }
    
    @media only screen and (max-width: 1340px) {
        :root {
            font-size: 16px;
        }
    }
    
    body {
        font: inherit;
        background-color: rgba(255,255,255,1);
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .page-container {
        position: relative;
        min-height: 100vh;
    }
    
    a:hover {
        text-decoration: none;
    }
    
   /* TOP NAVIGATION BAR */
    
    .topnav {        
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2%;
        padding-left: 2em;
        height: 64px;
        background-color: rgba(255,255,255,1);
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.06);
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        transition: height 0.2s ease;
        transition: background-color 0.4s ease;
        z-index: 5;
        white-space:nowrap;
    }
    
@media only screen and (max-width: 1063px) {
    .topnav {
        height: 54px;
    }    
}

    .nav-logo {
        height: 2em; margin-top: 0px; vertical-align: middle;
    }
    
    .nav-list {
        display: inline-block; margin: 0 8px;
    }
    
    .nav-links {
        display: inline-block;
        list-style: none;
        width: 100%;
        padding-left: 2em;
    }
    
    .nav-links li {
        display: inline-block;
        padding: 16px 20px 18px 20px;
    }
    
    .nav-links li a {
        font-size: 0.875rem; 
        display: inline-block;
        color: #384359;
        transition: color 0.1s ease;
        text-decoration: none;
    }
    
    .nav-links li a:hover {
        color: #008EEC;
    }
    
    #nav-sales {
        cursor: pointer;
    }
    
    #nav-sales.active {
        color: rgb(0, 142, 236);
    }
    
    /*.nav-search {
        display: inline-block;
        margin: 0 8px;
    }
    
    .nav-search input[type=text] {
        width: 240px;
        max-width: 1200px;
        height: 36px;
        box-sizing: border-box;
        border: 1px solid #D9D9D9;
        border-radius: 4px;
        font-size: 	0.875rem;
        background-color: white;
        background-image: url('search.png');
        background-size: 16px 16px;
        background-position: 9px 9px; 
        background-repeat: no-repeat;
        padding: 4px 16px 4px 36px;
        -webkit-transition: width 0.4s ease-in-out;
        transition: width 0.4s ease-in-out;
    }
    
    .nav-search input[type=text]::placeholder {
        color: #AAAAAA;
    }
    
    .nav-search input[type=text]:focus {
        width: 25vw;
        border: 1px solid #008EEC !important;
        box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
        outline-width: 0;
    }*/
    
    .nav-lang {
        display: inline-block;
        margin: 0 16px;
        transition: all 0.1s ease;
        cursor: pointer;
        color: #384359;
    }
    
    .nav-lang:hover {
        color: #008EEC;
        fill: #008EEC;
    }
    
    #nav-lang {
        cursor: pointer;
    }
    
    #nav-lang.active {
        color: rgb(0, 142, 236);
        fill: rgb(0, 142, 236);
    }
    
    .nav-lang-icon {
        vertical-align: middle; height: 18px; fill: #384359;
    }
    
    .nav-lang-label {
        font-size: 0.825rem;
    }
    
    .nav-try-free {
        display: inline-block;
        font-size: 0.825rem;
        margin: 0 16px;
        cursor: pointer;
        color: #384359;
    }
    
    .nav-try-free:hover {
        color: #008EEC;
    }
    
    .nav-login {
        display: inline-block; font-size: 0.8rem; padding: 0.795em 2em 0.8em; background-color: #008EEC; color: white; border-radius: 0.2em; cursor: pointer;  margin-left: 16px; min-width: 7em; text-align: center; transition: all 0.2s ease;
    }
    
    .nav-login:hover {
        background-color: #0080d4;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
    }
    
    .main-body {
        width: 100%;
        top: 0;
        padding-bottom: 120px;
        position: relative;
    }

    @media screen and (max-width: 680px) {
        .main-body {
            padding-bottom: 344px;
        }
    }

    @media screen and (max-width: 514px) {
        .main-body {
            padding-bottom: 464px;
        }
    }
    /* MODAL */
    
    .nav-modal-container {
        width: 100%;
        background: white;
        position: fixed;
        top: 3.2em;
        z-index: 2;
        height: calc(100vh - 3.2em);
        display: none;
        overflow-y: scroll;
        color: #384359;
    }
    
    .nav-modal-container h1 {
        margin: 1em 0;
        font-size: 2em;
    }
    
    .modal-sales-wrapper {
        width: 80vw;
        margin: 0 auto;
        padding-top: 3em;
    }
    
    .modal-sales-method {
        display: inline-flex;
        flex-wrap: wrap;
        max-width: 720px;
        margin-right: 12px;
        margin-bottom: 24px;
    }
    
    .sales-method {
        font-size: 0.875rem;
        height: 160px;
        width: 160px;
        padding: 8px;
        background-color: #F4F4F4;
        border: 1px solid #F4F4F4;
        margin: 0 16px 16px 0;
        text-align: center;
        color: black;
        cursor: pointer;
        transition: background-color 0.2s ease, border 0.2s ease, box-shadow 0.2s ease;
    }
    
    .sales-method:hover {
        background-color: white;
        border: 1px solid #008EEC;
        box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
    }
    
    .sales-method:hover .sales-method-icon {
        fill: #008EEC;
    }

    .sales-method p  {
        margin: 0;
        padding: 0;
    }

    .sales-method:hover p {
        color: #008EEC;
    }
    
    .sales-method-icon {
        width: 88px;
        height: 88px;
        padding: 16px;
        margin: 8px auto;
        fill: #AAA;
        transition: fill 0.2s ease;
    }
    
    ul.modal-sales-basics {
        list-style: none;
        display: inline-block;
        margin: 0;
        padding: 0;
        font-size: 1.25rem;
        font-weight: bold;
    }
    
    ul.modal-sales-basics li {
        margin-bottom: 24px;
    }
    
    ul.modal-sales-basics li .-link {
        color: black;
        transition: color 0.2s ease;
    }
    
    ul.modal-sales-basics li .-link:hover {
        color: #008EEC;
    }

/* LANG WRAPPER */

    .modal-lang-wrapper{
        padding-top: 3em;
        width: 80vw;
        min-width: 300px;
        margin: 0 auto;
        padding-left: 1em;
    }
    
    .modal-close {
        cursor: pointer; position: absolute; top: 2.5em; right: 10%;
    }
    
    .lang-list {
        display: inline-block;
        font-size: 1.25rem;
    }
    
    .lang-list a {
        color: black;
        transition: color 0.2s ease;
    }
    
    .lang-list a:hover {
        color: #008EEC;
    }
    
    .lang-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    
    .lang-list > ul > li:not(:last-child) {
        margin-bottom: 16px;
    }
    
    .lang-list > ul > li > .-active {
        font-weight: 800;
    }

    .lang-list > ul > li > .-active:hover {
        color: black;
    }
    
/*FOOTER*/
    
    .site-footer {
        position: static;
        bottom: 0;
        width: 100%;
        height: 288px;
        background-color: #242729; 
        color: #6a737c;
        font-size: 0.8125rem;
    }

    @media only screen and (max-width: 680px) {
        .site-footer {
            height: 344px;
        } 
    }

    @media only screen and (max-width: 514px) {
        .site-footer {
            height: 464px;
        }
    }
    
    .site-footer-container {
        max-width: 1264px;
        width: 100%;
        margin: 0 auto;
        padding: 32px 12px 12px 24px;
        display: flex;
        flex-flow: row wrap;
    }
    
    .site-footer-logo {
        flex: 0 0 64px;
        margin: 0 40px 32px 0;
    }
    
    @media only screen and (max-width: 1063px) {
        .site-footer-logo {
            display:none;
        }
    }
    
    .site-footer-nav {
        display: flex;
        flex: 2 1 auto;
        flex-wrap: wrap;
    }
    
    .site-footer .-title {
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 12px;
        color: #bbc0c4;
        line-height: 1.3;
        max-width: 230px;
        font-size: 0.8125rem;
    }
    
    .site-footer-col {
        padding: 0 12px 24px 0;
        flex: 1 0 auto;
        min-width: 160px;
    }
    
    .site-footer-col ul {
        padding: 0;
    }
    
    .site-footer-copyright {
        font-size: 0.75rem;
        flex: 1 1 150px;
        display: flex;
        flex-direction: column;
    }
    
@media only screen and (max-width: 1063px) {
   
    .site-footer-copyright {
        font-size: 0.6875rem;
    }
}
    
    .site-footer .-list {
        margin: 0;
        list-style: none;
    }
    
    .site-footer-copyright ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .site-footer .-item {
        padding-bottom: 0;
    }
    
    .site-footer-copyright ul li+li {
        margin-left: 12px;
    }
    
    .site-footer .-link {
        color: #848d95;
        padding: 4px 0;
        line-height: 1.3;
        display: inline-block;
        text-decoration: none;
    }
    
    .site-footer .-link:hover {
        color: #bbc0c4;
    }
    
    .site-footer .copyright-statement {
        margin-top: auto;
        margin-bottom: 24px;
    }