/* reset */

    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video,
    input, button {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    
    img {
        margin-bottom: 0;
        display: block;
    }

    html,
    body {
        height: 100%;
    }

    .clearfix {
        clear: both;
    }
    
    strong {
        font-weight: bold;
    }
    
    @media only screen and (max-width: 899px) {
        .desktopOnly {
            display: none;
        }
    }
    
    @media only screen and (min-width: 900px) {
        .mobileOnly {
            display: none;
        }
    }
    
/* fonts */

    /* @font-face {
        font-family: 'Basier Square';
        src: url('/assets/fonts/BasierSquare-SemiBoldItalic.eot');
        src: url('/assets/fonts/BasierSquare-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
            url('/assets/fonts/BasierSquare-SemiBoldItalic.woff2') format('woff2'),
            url('/assets/fonts/BasierSquare-SemiBoldItalic.woff') format('woff'),
            url('/assets/fonts/BasierSquare-SemiBoldItalic.ttf') format('truetype'),
            url('/assets/fonts/BasierSquare-SemiBoldItalic.svg#BasierSquare-SemiBoldItalic') format('svg');
        font-weight: 600;
        font-style: italic;
    }

    @font-face {
        font-family: 'Basier Square';
        src: url('/assets/fonts/BasierSquare-Regular.eot');
        src: url('/assets/fonts/BasierSquare-Regular.eot?#iefix') format('embedded-opentype'),
            url('/assets/fonts/BasierSquare-Regular.woff2') format('woff2'),
            url('/assets/fonts/BasierSquare-Regular.woff') format('woff'),
            url('/assets/fonts/BasierSquare-Regular.ttf') format('truetype'),
            url('/assets/fonts/BasierSquare-Regular.svg#BasierSquare-Regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Basier Square';
        src: url('/assets/fonts/BasierSquare-SemiBold.eot');
        src: url('/assets/fonts/BasierSquare-SemiBold.eot?#iefix') format('embedded-opentype'),
            url('/assets/fonts/BasierSquare-SemiBold.woff2') format('woff2'),
            url('/assets/fonts/BasierSquare-SemiBold.woff') format('woff'),
            url('/assets/fonts/BasierSquare-SemiBold.ttf') format('truetype'),
            url('/assets/fonts/BasierSquare-SemiBold.svg#BasierSquare-SemiBold') format('svg');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'Basier Square';
        src: url('/assets/fonts/BasierSquare-RegularItalic.eot');
        src: url('/assets/fonts/BasierSquare-RegularItalic.eot?#iefix') format('embedded-opentype'),
            url('/assets/fonts/BasierSquare-RegularItalic.woff2') format('woff2'),
            url('/assets/fonts/BasierSquare-RegularItalic.woff') format('woff'),
            url('/assets/fonts/BasierSquare-RegularItalic.ttf') format('truetype'),
            url('/assets/fonts/BasierSquare-RegularItalic.svg#BasierSquare-RegularItalic') format('svg');
        font-weight: normal;
        font-style: italic;
    } */
    
/* animations */

    /* spin */

        @-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
        }

        @-moz-keyframes spin {
            0% { -moz-transform: rotate(0deg); }
            100% { -moz-transform: rotate(360deg); }
        }

        @-ms-keyframes spin {
            0% { -ms-transform: rotate(0deg); }
            100% { -ms-transform: rotate(360deg); }
        }

        @-o-keyframes spin {
            0% { -o-transform: rotate(0deg); }
            100% { -o-transform: rotate(360deg); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .spin {
            -webkit-animation-name: spin;
            -moz-animation-name: spin;
            -ms-animation-name: spin;
            -o-animation-name: spin;
            animation-name: spin;
            -webkit-animation-timing-function: linear;
            -moz-animation-timing-function: linear;
            -ms-animation-timing-function: linear;
            -o-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-duration: 1s;
            -moz-animation-duration: 1s;
            -ms-animation-duration: 1s;
            -o-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            -moz-animation-fill-mode: both;
            -ms-animation-fill-mode: both;
            -o-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            -o-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }
    
/* basic components */

    /* links */
    
        a {
            color: #1A1B3D;
            text-decoration: underline;
            cursor: pointer;
        }

    /* buttons */
    
        .button {
            color: #1A1B3D;
            background: #e9e9ed;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            display: inline-block;
            padding: 5px 15px;
            padding-top: 6px;
            text-decoration: none;
            text-align: center;
            font-weight: 500;
            cursor: pointer;
            -webkit-appearance: none;
        }
        
        .button.primary {
            color: #fff;
            background: #3B40B6;
        }
        
        .button.danger {
            color: #fff;
            background: #ed3d3d;
        }
        
        .button.green {
            color: #fff;
            background: #6ab04b;
        }
        
        @media only screen and (min-width: 900px) {
        
            .button {
                padding: 8px 20px;
                padding-top: 9px;
            }
            
        }
        
        .button.stretch {
            display: block;
            width: 100%;
            text-align: center;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        .button.big {
            font-size: 20px;
            line-height: 30px;
            padding: 10px 25px;
        }
        
        .button.disabled {
            opacity: 0.2;
            pointer-events: none;
        }
        
        .button.loading {
            position: relative;
            color: transparent;
            pointer-events: none;
        }
        
            .button.loading:after {
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                width: 24px;
                height: 24px;
                margin-top: -12px;
                margin-left: -12px;
                background-image: url(../img/spinner.png);
                background-size: 100% 100%;
                
                -webkit-animation-name: spin;
                -moz-animation-name: spin;
                -ms-animation-name: spin;
                -o-animation-name: spin;
                animation-name: spin;
                -webkit-animation-timing-function: linear;
                -moz-animation-timing-function: linear;
                -ms-animation-timing-function: linear;
                -o-animation-timing-function: linear;
                animation-timing-function: linear;
                -webkit-animation-duration: 1s;
                -moz-animation-duration: 1s;
                -ms-animation-duration: 1s;
                -o-animation-duration: 1s;
                animation-duration: 1s;
                -webkit-animation-fill-mode: both;
                -moz-animation-fill-mode: both;
                -ms-animation-fill-mode: both;
                -o-animation-fill-mode: both;
                animation-fill-mode: both;
                -webkit-animation-iteration-count: infinite;
                -moz-animation-iteration-count: infinite;
                -ms-animation-iteration-count: infinite;
                -o-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
            }
            
        .button.mini {
            padding: 4px 8px;
        }
        
    /* form stuff */
    
        /* fields */
        
            .field {
                font-size: 20px;
                line-height: 30px;
                border: 0;
                -webkit-appearance: none;
                outline: none;
                width: 100%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                padding: 0;
                padding-bottom: 12px;
                border-bottom: 1px solid #e9e9ed;
                color: #1A1B3D;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
            }
            
            .field::-webkit-input-placeholder {
                color: #bbbccb;
            }
            
            .field::-moz-placeholder {
                color: #bbbccb;
            }
            
            .field:-ms-input-placeholder {
                color: #bbbccb;
            }
            
            .field:-moz-placeholder {
                color: #bbbccb;
            }
            
            .field.solid {
                padding: 6px 10px;
                padding-top: 8px;
                font-size: 16px;
                line-height: 22px;
                background: #e9e9ed;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }
            
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            input[type=number] {
                -moz-appearance:textfield;
            }
            
            select.field.solid {
                background-image: url(../img/dropdown-arrow.svg);
                background-position: calc(100% - 10px) center;
                background-repeat: no-repeat;
            }
            
        /* field notes */
        
            .fieldNote {
                font-size: 14px;
                line-height: 22px;
                display: block;
                margin-top: 5px;
                text-align: left;
            }
            
            .fieldNote.error {
                color: #ED3D3D;
            }

            .fieldNote.success {
                color: #68C340;
            }
            
        /* checkbox list */
        
            .checkboxList {
                list-style: none;
            }
            
            .checkboxList li {
                display: block;
                border-top: 1px solid #e9e9ed;
                border-bottom: 1px solid #e9e9ed;
                margin-bottom: -1px;
                padding: 12px 0;
                cursor: pointer;
                display: flex;
                align-items: center;
            }
            
            .checkboxList li .checkbox {
                margin-right: 10px;
                pointer-events: none;
            }
            
        /* checkboxes */
        
            .checkbox {
                -webkit-appearance: none;
                width: 19px;
                height: 19px;
                background-image: url(../img/checkbox.svg);
                background-size: 38px 29px;
                background-position: left;
            }
            
            .checkbox:checked {
                background-position: right;
            }
            
        /* field list */
        
            .fieldList {
                list-style: none;
            }
        
            .fieldList li {
                display: block;
                border-top: 1px solid #e9e9ed;
                border-bottom: 1px solid #e9e9ed;
                margin-bottom: -1px;
                display: flex;
                align-items: center;
            }
            
            .fieldList li .field {
                font-size: 16px;
                line-height: 22px;
                border: 0;
                padding: 12px 0;
            }
            
            .fieldListMinus {
                width: 19px;
                height: 19px;
                cursor: pointer;
                background-image: url(../img/minus.svg);
                display: block;
                margin-top: -2px;
                margin-right: 10px;
            }
            
        /* skills list */
        
            .skillsList {
                list-style: none;
            }
            
            .skillsList li {
                display: block;
                border-top: 1px solid #e9e9ed;
                border-bottom: 1px solid #e9e9ed;
                margin-bottom: -1px;
                padding: 12px 0;
            }
            
            .skillLevelSelector {
                margin-top: 12px;
                display: block;
                display: flex;
                align-items: top;
                justify-content: space-between;
            }
            
                .skillLevelSelector div {
                    text-align: center;
                    cursor: pointer;
                    display: block;
                }
                
                .skillLevelSelector span {
                    font-size: 11px;
                    line-height: 18px;
                    display: block;
                }
                
                .skillLevelSelector .checkbox {
                    pointer-events: none;
                }
                
        /* rates list */
        
            .ratesList {
                list-style: none;
            }
            
            .ratesList li {
                display: block;
                border-top: 1px solid #e9e9ed;
                border-bottom: 1px solid #e9e9ed;
                margin-bottom: -1px;
                display: flex;
                justify-content: space-between;
                padding: 18px 0;
            }
            
            .ratesList .mini {
                line-height: 16px;
            }
            
            .ratesListLeft {
                width: 25%;
            }
            
            .ratesListRight {
                margin-left: auto;
                max-width: 270px;
            }
            
            @media only screen and (max-width: 620px) {
                
                .ratesListTitle {
                    display: none;
                }
                
                .ratesList li {
                    display: block;
                    background: #fff;
                    border: 0;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    -webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
                    -moz-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
                    box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
                    padding: 25px;
                    margin-bottom: 10px;
                }
                
                .ratesListLeft,
                .ratesListRight {
                    width: 100%;
                    max-width: none;
                }
                
                .ratesListLeft {
                    border-bottom: 1px solid #e9e9ed;
                    padding-bottom: 25px;
                    margin-bottom: 12px;
                }
                
                .rateTrade {
                    font-weight: bold;
                }
                
            }
            
                .rateFieldOuterWrap {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
                    .rateFieldLabel {
                        width: auto;
                        margin-right: 10px;
                        line-height: 16px;
                    }
            
                    .rateFieldWrap {
                        position: relative;
                        width: 100%;
                        max-width: 110px;
                        display: block;
                    }
                
                        .ratesList li .field {
                            text-align: left;
                            padding-top: 6px;
                            padding-bottom: 6px;
                            padding-left: 20px;
                            padding-right: 32px;
                        }
                    
                        .rateFieldPrefix {
                            position: absolute;
                            left: 10px;
                            top: 6px;
                            opacity: 0.5;
                            pointer-events: none;
                        }
                        
                        .rateFieldSuffix {
                            position: absolute;
                            right: 10px;
                            top: 6px;
                            opacity: 0.5;
                            pointer-events: none;
                        }
                        
                .ratesListLineItem {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
            
        /* plus list */
        
            .plusList {
                list-style: none;
            }
        
            .plusList li {
                display: block;
                border-top: 1px solid #e9e9ed;
                border-bottom: 1px solid #e9e9ed;
                margin-bottom: -1px;
                display: flex;
                align-items: center;
                padding: 12px 0;
                cursor: pointer;
            }
            
            .plusListPlus {
                width: 19px;
                height: 19px;
                background-image: url(../img/plus.svg);
                display: block;
                margin-top: -2px;
                margin-right: 10px;
            }
        
    /* headings / text */
    
        .h1 {
            font-size: 24px;
            line-height: 28px;
            font-weight: bold;
        }
        
        .h2 {
            font-size: 22px;
            line-height: 26px;
            font-weight: bold;
        }
        
        .h3 {
            font-size: 18px;
            line-height: 24px;
            font-weight: bold;
        }
        
        .h4 {
            font-size: 14px;
            line-height: 20px;
            font-weight: bold;
        }
        
            .h4.highlight {
                color: #3B40B6;
            }
        
        .h5 {
            font-size: 16px;
            line-height: 22px;
            font-weight: bold;
        }
        
        .mini {
            font-size: 14px;
            line-height: 18px;
        }
        
        .mini.light {
            opacity: 0.5;
        }
        
        .headingWithButton {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
            .headingWithButton .button {
                padding: 4px 10px;
                font-size: 16px;
                line-height: 20px;
            }
        
        em {
            font-style: italic;
        }
    
    /* horizontal rule */
    
        hr {
            border: 0;
            margin: 0;
            padding: 0;
            border-top: 1px solid #e9e9ed;
        }
        
    /* content gaps */
    
        .gapXL { height: 50px; }
        .gapL { height: 30px; }
        .gapM { height: 15px; }
        .gapS { height: 10px; }
        .gapXS { height: 5px; }
        
        @media only screen and (min-width: 900px) {
        
            .gapXL { height: 80px; }
            .gapL { height: 60px; }
            .gapM { height: 30px; }
            .gapS { height: 20px; }
            
        }
        
    /* columns (based on max width of 12) */
    
        .cols {
            display: flex;
            justify-content: space-between;
            align-items: top;
        }
        
        .col-8 { width: calc(66.6% - 10px); }
        .cols.desktopOnly > .col-8 { width: calc(66.6% - 30px); }
        
        .col-6 { width: calc(50% - 10px); }
        .cols.desktopOnly > .col-6 { width: calc(50% - 30px); }
        
        .col-4 { width: calc(33.3% - 10px); }
        .cols.desktopOnly > .col-4 { width: calc(33.3% - 30px); }
        
        @media only screen and (max-width: 899px) {
            
            .cols.desktopOnly {
                display: block;
            }
            
            .cols.desktopOnly > div[class^='col-'] {
                width: 100%;
                margin-bottom: 30px;
            }
            
            .cols.desktopOnly > div[class^='col-'] {
                margin-bottom: 0;
            }
            
        }
        
    /* tables */
    
        .table {
            border-collapse: collapse;
            border: 1px solid #e9e9ed;
            width: 100%;
            text-align: left;
        }
        
        .table th, .table td {
            padding: 5px 8px;
            border-right: 1px solid #e9e9ed;
            border-bottom: 1px solid #e9e9ed;
        }
        
        .table th {
            font-weight: bold;
        }
        
        .table tr th:last-child, .table tr td:last-child {
            border-right: 0;
        }
        
        .table tr.uneditable {
            opacity: 0.4;
            pointer-events: none;
        }

/* layout */

    body {
        font-family: 'DM Sans', helvetica, arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        font-size: 16px;
        line-height: 22px;
        color: #1A1B3D;
        letter-spacing: -0.02em;
    }
    
    .container {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 15px;
    }
    
    @media only screen and (min-width: 900px) {
    
        .container.medium {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
    
        .container.small {
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }
        
    }
    
    @media only screen and (min-width: 900px) {
        
        .container {
            padding: 0 60px;
        }
        
    }
    
    /* header */
    
        .headerSpacer {
            height: 50px;
        }
    
        .header {
            overflow: hidden;
            background: #fff;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10;
            -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
            -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
        }
        
        .header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
        }
        
        .headerLeft,
        .headerRight {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .headerLeft {
            background: #fff;
            margin-left: -15px;
        }
        
        .menuToggle {
            width: 50px;
            height: 50px;
            display: block;
            background-image: url(../img/menu.svg);
            background-size: 20px 16px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
        
        .headerLogo {
            width: 104px;
            height: 24px;
            display: block;
            background-image: url(../img/logo.svg);
            background-size: 100% 100%;
            margin-top: -2px;
            cursor: pointer;
        }
        
            .headerLogo.testdrive {
                position: relative;
                margin-top: -14px;
            }
        
            .headerLogo.testdrive:after {
                content: 'Testdrive';
                display: block;
                font-weight: bold;
                color: #3B40B6;
                text-decoration: none;
                position: absolute;
                top: 100%;
                right: 2px;
                margin-top: 3px;
                font-size: 11px;
                line-height: 11px;
            }
        
        #headerRegister {
            margin-left: 5px;
            display: inline-block;
        }
        
        .mainMenu {
            display: none;
        }
        
        .headerAvatar {
            height: 50px;
            padding: 0 15px;
            background: transparent;
            display: flex;
            align-items: center;
            margin: 0;
            margin-right: -15px;
            text-decoration: none;
        }
            
            .headerAvatar:hover {
                background: #fafafa;
            }
            
            .headerAvatar.active {
                font-weight: bold;
                background: #fafafa;
                -webkit-box-shadow: inset 0px 2px 0px 0px #1A1B3D;
                -moz-box-shadow: inset 0px 2px 0px 0px #1A1B3D;
                box-shadow: inset 0px 2px 0px 0px #1A1B3D;
            }
        
            .headerAvatarInner {
                display: block;
                width: 34px;
                height: 34px;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                background-size: cover;
                background-position: center;
                background-color: #1A1B3D;
                background-image: url(../img/placeholder-avatar.svg);
            }
        
        @media only screen and (min-width: 900px) {
            
            .headerSpacer,
            .header .container,
            .headerAvatar {
                height: 60px;
            }
            
            .headerLeft {
                margin-left: 0;
            }
            
            .menuToggle {
                display: none;
            }
            
            .mainMenu {
                display: flex;
                list-style: none;
            }
                
                .mainMenu a {
                    padding: 20px 15px;
                    background: transparent;
                    display: block;
                    margin-top: 1px;
                    text-decoration: none;
                }
                
                .mainMenu a:hover {
                    background: #fafafa;
                }
                
                .mainMenu a.active {
                    background: #fafafa;
                    -webkit-box-shadow: inset 0px 2px 0px 0px #1A1B3D;
                    -moz-box-shadow: inset 0px 2px 0px 0px #1A1B3D;
                    box-shadow: inset 0px 2px 0px 0px #1A1B3D;
                    font-weight: bold;
                }
                
            .headerAvatarInner {
                margin-right: 10px;
                width: 22px;
                height: 22px;
            }
            
            .headerNavSpacer {
                margin-left: 15px;
                margin-right: 15px;
                height: 20px;
                width: 1px;
                background: #e9e9ed;
            }
            
        }
        
    /* side menu */
    
        .sideMenu {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 20;
        }
        
            .sideMenuOverlay {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 1;
                background: rgba(0,0,0,0.3);
                
                opacity: 0;
                -webkit-transition: 0.3s;
                -moz-transition: 0.3s;
                transition: 0.3s;
            }
            
                .sideMenu.open .sideMenuOverlay {
                    opacity: 1;
                }
            
            .sideMenuContainer {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                z-index: 2;
                background: #fff;
                width: 260px;
                display: flex;
                flex-direction: column;
                align-items: left;
                justify-content: space-between;
                -webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
                -moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
                box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.2);
                
                opacity: 0;
                -webkit-transform: translateX(-60px);
                -moz-transform: translateX(-60px);
                transform: translateX(-60px);
                -webkit-transition: 0.3s;
                -moz-transition: 0.3s;
                transition: 0.3s;
            }
            
                .sideMenu.open .sideMenuContainer {
                    opacity: 1;
                    -webkit-transform: translateX(0);
                    -moz-transform: translateX(0);
                    transform: translateX(0);
                }
                
            .sideMenuClose {
                width: 50px;
                height: 50px;
                background-image: url(../img/close-white.svg);
                background-position: center;
                background-repeat: no-repeat;
                cursor: pointer;
                position: absolute;
                top: 0;
                left: 100%;
            }
                
            .sideMainMenu {
                padding: 30px;
                list-style: none;
            }
            
                .sideMainMenu li {
                    margin-bottom: 15px;
                }
            
                .sideMainMenu a {
                    font-size: 22px;
                    line-height: 30px;
                    text-decoration: none;
                    -webkit-transition: 0.3s;
                    -moz-transition: 0.3s;
                    transition: 0.3s;
                }
                
                .sideMainMenu a:hover,
                .sideMainMenu a.active {
                    opacity: 0.5;
                }
                
            .sideSubMenu {
                padding: 30px;
                list-style: none;
            }
            
                .sideSubMenu li {
                    margin-top: 5px;
                }
                
                .sideSubMenu a {
                    text-decoration: none;
                    -webkit-transition: 0.3s;
                    -moz-transition: 0.3s;
                    transition: 0.3s;
                }
                
                .sideSubMenu a:hover,
                .sideSubMenu a.active {
                    opacity: 0.5;
                }
                
                .sideSubMenu .copyright {
                    font-size: 12px;
                    margin-top: 20px;
                }
            
    /* toolbar */
    
        .toolbarSpacer {
            height: 50px;
        }
        
        .toolbar {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 10px 0;
            background: #fff;
            -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
            -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
            box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
        }
        
        .toolbar.split .container {
            display: flex;
            align-items: center;
            flex-direction: column;
            flex-flow: column-reverse;
            justify-content: space-between;
        }

        @media only screen and (min-width: 900px) {

            .toolbar.split .container {
                flex-flow: row;
                flex-direction: row;
            }
        
            .toolbar.split .button {
                width: 49% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin: 0 !important;
            }

        }
        
    /* page header */
        
        .pageHeader {
            background: #fafafa;
            padding: 15px 0;
        }
        
        .pageHeaderNav {
            background: #fafafa;
        }
        
        .pageHeaderNav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }
        
        .pageHeaderNav li {
            display: block;
        }
        
        .pageHeaderNav a {
            display: block;
            padding-bottom: 10px;
            margin-right: 15px;
            border-bottom: 2px solid transparent;
            text-decoration: none;
        }
            
        .pageHeaderNav a.active {
            font-weight: bold;
            border-color: #1A1B3D;
        }
        
        @media only screen and (min-width: 900px) {
            
            .pageHeader {
                padding: 30px 0;
            }
            
        }
        
        .pageHeaderInnerWithButton {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
    /* footer */
    
        .footer {
            display: none;
        }
        
        @media only screen and (min-width: 900px) {
            
            .footer {
                display: block;
            }
            
            .footerMenu {
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
            
            .footerMenu li {
                margin-right: 20px;
            }
            
            .footerMenu a {
                text-decoration: none;
            }
            
            .footerMenu a:hover {
                text-decoration: underline;
            }
            
            .footerMenu .copyright {
                margin-left: auto;
            }
            
        }
        
/* components */

    /* worker grid */
    
        .workerGrid {
            margin-bottom: -10px;
        }
    
        .workerGridItem {
            margin-bottom: 10px;
        }
        
        @media only screen and (min-width: 700px) {
        
            .workerGrid {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-bottom: -20px;
            }
            
            .workerGridItem {
                width: calc(50% - 10px);
                margin-bottom: 20px;
            }
            
        }
    
        @media only screen and (min-width: 900px) {
        
            .workerGridItem {
                width: calc(33.3% - 15px);
                margin-bottom: 20px;
            }
            
        }

    /* worker cards */
    
        .wc {
            text-decoration: none;
            display: block;
            background: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            -moz-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
        }
        
        .wc_inner {
            padding: 15px;
        }
        
        .wc_header,
        .wc_headerLeft {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
            .wc_photo {
                width: 50px;
                height: 50px;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                background-size: cover;
                background-position: center;
                background-color: #f0f0f0;
                margin-right: 15px;
            }
            
            .wc_rate {
                border: 1px solid #e9e9ed;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                height: 50px;
                padding: 0 10px;
                text-align: center;
                display: flex;
                align-items: center;
            }
            
            .wc_rate span {
                display: block;
                opacity: 0.6;
                font-size: 10px;
                line-height: 13px;
                margin-top: -3px;
            }
            
        .wc_stats {
            margin-top: 24px;
            margin-bottom: 5px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
            .wc_stat {
                width: 33.3%;
                border-right: 1px solid #e9e9ed;
            }
            
                .wc_stat:nth-child(3) {
                    border-right: 0;
                }
            
            .wc_stat span {
                display: block;
                opacity: 0.6;
                font-size: 10px;
                line-height: 13px;
                text-transform: uppercase;
            }
        
        .wc_cta {
            padding: 15px;
        }
        
            .wc_cta .button:last-child {
                margin-top: 6px;
            }
            
    /* tag clouds */
    
        .tags {
            list-style: none;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .tags li {
            display: block;
            color: #1A1B3D;
            background: #e9e9ed;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            padding: 2px 12px;
            padding-top: 3px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        
    /* onboarding checklist */
    
        .onboardingChecklistWrap.complete .onboardingChecklistItem {
            opacity: 0.3;
        }
    
        .onboardingChecklistItem {
            border-bottom: 1px solid #e9e9ed;
            margin-bottom: -1px;
            padding: 10px 0;
            display: flex;
            align-items: center;
            justify-content: left;
        }
        
            body .onboardingChecklistItem:first-child {
                padding-top: 0;
            }
        
            body .onboardingChecklistItem:last-child {
                border-bottom: 0;
                padding-bottom: 0;
            }
        
        .onboardingChecklistBullet {
            min-width: 44px;
            width: 44px;
            height: 40px;
            margin-right: 20px;
            background-size: 100% 100%;
            background-image: url(../img/onb-empty.svg);
        }
        
        .onboardingChecklistBullet.complete { background-image: url(../img/onb-check.svg); }
        
        .onboardingChecklistReady {
            margin: 0 auto;
            max-width: 400px;
            background: #fff;
            -webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            -moz-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            padding: 30px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            text-align: center;
            margin-bottom: 30px;
        }
        
        @media only screen and ( min-width: 900px ) {
        
            .onboardingChecklistItem {
                padding: 20px 0;
            }
            
        }
        
/* page specific styles */

    /* home */
    
        .heroBanner {
            text-align: center;
            background-image: url(../img/heroBg.jpg);
            background-size: cover;
            background-position: 60% center;
            color: #fff;
        }
        
        .heroBanner h1 {
            max-width: 300px;
            margin: 0 auto;
        }
        
        .heroBanner a {
            color: #fff;
        }
            
        @media only screen and ( min-width: 900px ) {
            
            .heroBanner {
                text-align: left;
                background-position: center;
            }
            
            .heroBanner h1 {
                max-width: 600px;
                margin: 0;
                font-size: 40px;
                line-height: 50px;
            }
            
        }
        
    /* search */
    
        .searchPanelContainer {
            position: relative;
            margin-top: -60px;
        }
        
        .searchPanelSpacer {
            height: 60px;
        }
    
        .searchPanel {
            background: #3B40B6;
            -webkit-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.1);
            -moz-box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.1);
            box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.1);
            color: #fff;
            padding: 20px;
            padding-top: 16px;
            text-align: left;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
        }
        
            .searchPanel.stretch {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                border-radius: 0;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }
        
        .searchFields {
            background: #fff;
            display: block;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2);
            box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.2);
        }
        
            .searchPanelFieldWrap {
                position: relative;
            }
            
                .searchFields .searchPanelFieldWrap:first-child {
                    border-bottom: 1px solid #e9e9ed;
                }
            
                .searchPanelFieldWrap label {
                    position: absolute;
                    top: 14px;
                    left: 20px;
                    font-weight: bold;
                    color: #1A1B3D;
                    opacity: 0.4;
                    font-size: 14px;
                }
        
                .field.solid.searchPanelField {
                    background-color: #fff;
                    background-position: calc(100% - 20px) center;
                    border: 0;
                    padding: 14px 20px;
                    padding-top: 38px;
                    width: 100%;
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                }
                
                .field.solid.searchPanelField::-ms-expand {
                    display: none;
                }
                
                .searchLocationSpinner {
                    position: absolute;
                    top: 50%;
                    right: 15px;
                    margin-top: -12px;
                    width: 24px;
                    height: 24px;
                    background-image: url(../img/spinner.png);
                    background-size: 24px 24px;
                }
                
            .searchPanelButtonWrap {
                padding: 20px;
                padding-top: 5px;
                position: relative;
                z-index: 1;
            }
                
                .searchFields a.button {
                    padding-top: 10px;
                    padding-bottom: 10px;
                    display: block;
                    text-align: center;
                    background: #FD7F66;
                    -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1);
                    -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1);
                    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.1);
                    -webkit-transition: 0.3s;
                    -moz-transition: 0.3s;
                    transition: 0.3s;
                }
                
                    .searchFields a:hover {
                        -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.25);
                        -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.25);
                        box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.25);
                    }
                
        @media only screen and (min-width: 900px) {
            
            .searchPanel {
                padding: 40px;
                padding-top: 32px;
            }
            
            .searchFields {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
                .searchPanelFieldWrap {
                    width: 100%;
                }
                
                    .searchFields .searchPanelFieldWrap:first-child {
                        border-bottom: 0;
                        border-right: 1px solid #e9e9ed;
                    }
                    
                .searchPanelButtonWrap {
                    padding: 0;
                    padding-right: 15px;
                }
                    
                    .searchFields a.button {
                        font-size: 20px;
                        line-height: 30px;
                        padding: 10px 25px;
                    }
            
        }
        
    /* sign up */
    
        /* progress bar */
    
            .formProgressWrap {
                padding: 20px 0;
            }
            
            .formProgress {
                width: 3px;
                height: 3px;
                margin-bottom: -2px;
                background: #FD7F66;
                position: relative;
                z-index: 1;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                border-radius: 2px;
                -webkit-transition: 0.3s;
                -moz-transition: 0.3s;
                transition: 0.3s;
            }
            
            .formProgressBg {
                width: 100%;
                height: 1px;
                background: #e9e9ed;
            }
            
        /* steps */
            
            .signUpSteps {
                text-align: center;
                padding: 20px 0;
            }
            
        /* transitions */
        
            .signUpStep {
                -webkit-transition: 0.3s;
                -moz-transition: 0.3s;
                transition: 0.3s;
            }
        
            .sus-transout {
                -webkit-transform: translateX(-40px);
                -moz-transform: translateX(-40px);
                transform: translateX(-40px);
                opacity: 0;
            }
        
            .sus-transin {
                -webkit-transform: translateX(40px);
                -moz-transform: translateX(40px);
                transform: translateX(40px);
                opacity: 0;
            }
            
    /* profile */
    
        .profileHeader {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .profileHeaderLeft {
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        
            .profilePhotoEditPreview {
                position: relative;
            }
        
            .profileHeaderPhoto {
                width: 64px;
                height: 64px;
                display: block;
                position: relative;
                background-image: url(../img/placeholder-avatar.svg);
                background-size: cover;
                background-position: center;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                overflow: hidden;
            }
            
                .profileHeaderPhoto.stretch {
                    width: 100%;
                    height: auto;
                    position: relative;
                }
            
                .profilePhotoEditButton {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    padding: 1px 0;
                    background: rgba(0,0,0,0.5);
                    color: #fff;
                    text-decoration: none;
                    font-weight: bold;
                    text-align: center;
                    font-size: 12px;
                }
                
                .rotatePhoto {
                    display: block;
                    position: absolute;
                    top: 10px;
                    left: 10px;
                    text-decoration: none;
                    background: rgba(0,0,0,0.5);
                    color: #fff;
                    padding: 6px 10px;
                    padding-right: 9px;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    z-index: 1;
                }
                
                .rotatePhoto img {
                    width: 20px;
                    margin-right: 6px;
                }
            
            .profileHeaderInfo {
                flex-grow: 1;
                margin-left: 15px;
                margin-right: 15px;
            }
            
        .profileHeaderRight {
        }
        
            .profileHeaderRate {
                border: 1px solid #e9e9ed;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                height: 50px;
                padding: 0 10px;
                text-align: center;
                display: flex;
                align-items: center;
                word-wrap: nowrap;
            }
            
            .profileHeaderRate span {
                display: block;
                opacity: 0.6;
                font-size: 10px;
                line-height: 13px;
                margin-top: -3px;
            }
            
        @media only screen and ( min-width: 900px ) {
        
            .profileHeaderRight {
                display: flex;
                align-items: center;
            }
            
            .profileHeaderRight .button {
                margin-left: 10px;
            }
            
        }
            
        /* trades / skills */
        
            .trade {
                background: #fff;
                -webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
                -moz-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
                box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                margin-bottom: 10px;
            }
            
                .trade {
                    -webkit-transition: 0.3s;
                    -moz-transition: 0.3s;
                    transition: 0.3s;
                }
                
                .trade:hover {
                    -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
                    -moz-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
                    box-shadow: 0 5px 15px 0 rgba(0,0,0,0.1);
                }
            
            .trade:last {
                margin-bottom: 0;
            }
            
            .tradeExpander {
                display: block;
                padding: 10px 13px;
                text-decoration: none;
            }
            
            .tradeHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
                .tradeHeaderRight {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }
            
                .tradeHeader img {
                    margin-left: 10px;
                    display: block;
                    -webkit-transition: 0.3s;
                    -moz-transition: 0.3s;
                    transition: 0.3s;
                }
                
                .trade.expanded .tradeExpander img {
                    -webkit-transform: rotate(180deg);
                    -moz-transform: rotate(180deg);
                    transform: rotate(180deg);
                }
            
            .tradeSkillsWrap {
                padding: 13px;
                border-top: 1px solid #e9e9ed;
                display: none;
            }
            
                .trade.expanded .tradeSkillsWrap {
                    display: block;
                }
            
                .profileSkill {
                    background: rgba(253, 127, 102, 0.08);
                    margin-bottom: 8px;
                    position: relative;
                    padding: 6px 8px;
                    padding-bottom: 5px;
                    -webkit-border-radius: 5px;
                    -moz-border-radius: 5px;
                    border-radius: 5px;
                    overflow: hidden;
                    font-size: 14px;
                    line-height: 20px;
                }
                
                    .profileSkillFill {
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: auto;
                        bottom: 0;
                        width: 0%;
                        background: #FD7F66;
                        z-index: 1;
                    }
                
                .tradeSkillsWrap .profileSkill:last-child {
                    margin-bottom: 0;
                }
                
                .profileSkill span {
                    position: relative;
                    z-index: 2;
                }
                
    /* jobs */
        
        .jobCard {
            text-decoration: none;
            display: block;
            background: #fff;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            -moz-box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            box-shadow: 0 3px 8px 0 rgba(0,0,0,0.1);
            overflow: hidden;
            padding: 15px 20px;
            margin-bottom: 15px;
        }
        
        /* job card sections */
        
            .jcs-worker {
                display: flex;
                align-items: center;
                text-decoration: none;
            }
            
                .jcs-worker .headerAvatarInner {
                    margin-right: 10px;
                }