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 {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    line-height: 1
}

ol, ul {
    list-style: none
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

q, blockquote {
    quotes: none
}

    q:before, q:after, blockquote:before, blockquote:after {
        content: "";
        content: none
    }

a img {
    border: none
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block
}

html {
    height: 100%
}

body {
    height: inherit;
    font: 300 100% "Lato",Arial,sans-serif;
    background: #fff;
    color: #333;
    -webkit-font-smoothing: subpixel-antialiased;
    min-width: 330px
}

    body .wrapper {
        min-height: 100%;
        position: relative
    }

        body .wrapper.add-flight {
            background: #fbfbfb
        }

    body.no-scroll {
        overflow: hidden
    }

    body.landing {
        background: url("img/landing_bg.jpg") no-repeat center top
    }

.hidden {
    display: none !important
}

a {
    color: #333;
    text-decoration: none
}

b {
    font-weight: bold
}

.group:after {
    content: "";
    display: table;
    clear: both
}

.myfr24-logo {
    width: 169px;
    height: 40px;
    background-size: 169px 40px;
    display: block;
    background-image: url("img/myfr24_logo.png");
    background-repeat: no-repeat
}

.important-banner {
    z-index: 1;
    position: fixed;
    bottom: 0;
    box-sizing: border-box;
    padding: 20px;
    display: block;
    width: 100%;
    background: #414141;
    color: #fff;
    font-size: 14px
}

    .important-banner p {
        margin: 0
    }

    .important-banner ul {
        list-style-type: disc;
        margin-left: 18px;
        padding: 0
    }

    .important-banner a {
        color: #64bef1
    }

.important-banner__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    cursor: pointer
}

.important-banner__title {
    font-weight: normal;
    font-size: 24px
}

.important-banner__title, .important-banner__left {
    margin-bottom: 8px
}

.important-banner__title, .important-banner__left, .important-banner__right {
    padding-right: 20px;
    box-sizing: border-box
}

.important-banner .important-banner__strong {
    font-weight: bold;
    margin-bottom: 14px
}

@media (min-width: 700px) and (max-width: 1279px) {
    .important-banner__left {
        float: left;
        width: 70%
    }

    .important-banner__right {
        float: left;
        width: 30%
    }

    .important-banner--one-section .important-banner__title {
        float: left;
        width: 45%
    }

    .important-banner--one-section .important-banner__left {
        float: left;
        width: 55%
    }
}

@media (min-width: 1280px) {
    .important-banner__title {
        float: left;
        width: 25%
    }

    .important-banner__left {
        float: left;
        width: 45%
    }

    .important-banner__right {
        float: left;
        width: 30%
    }

    .important-banner--one-section .important-banner__left {
        width: 75%
    }
}

.panel {
    background: #fff;
    -moz-box-shadow: 0 10px 50px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 10px 50px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 10px 50px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.1)
}

sub {
    vertical-align: sub;
    font-size: .75em
}

.op-hidden {
    opacity: 0
}

.op-visible {
    opacity: 1
}

p {
    margin: 0 0 1em 0;
    line-height: 1.5em
}

h1 {
    font-size: 2.6em;
    font-weight: 300;
    line-height: 1.3em;
    margin: .6em 0
}

.content-main h3 {
    font-size: 1.4em;
    font-weight: 300;
    margin: 0 0 .6em 0
}

h4 {
    font-weight: bold;
    padding-bottom: .5em
}

.tooltip-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 25;
    display: inline
}

    .tooltip-overlay .inner {
        background: #111;
        color: #fff;
        padding: 5px 10px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        margin-top: 5px;
        -moz-box-shadow: 0 0 5px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.3);
        box-shadow: 0 0 5px rgba(0,0,0,0.3)
    }

    .tooltip-overlay .arrow {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-style: solid;
        border-width: 0 5px 5px;
        border-color: transparent;
        border-bottom-color: #111;
        position: absolute;
        left: 6px
    }

.left {
    float: left
}

.right {
    float: right
}

.clear {
    clear: both
}

input.big-white, select.big-white, textarea.big-white {
    border: 1px solid #ddd;
    margin: 2px 0 0 0;
    padding: 8px 10px;
    color: #222;
    font-size: 1em;
    width: 200px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    outline: none;
    background: #fff;
    font-weight: 300
}

    input.big-white.disabled, input.big-white:disabled, select.big-white.disabled, select.big-white:disabled, textarea.big-white.disabled, textarea.big-white:disabled {
        background: #f4f4f4;
        border: 1px solid #e1e1e1;
        color: #5d5d5d
    }

    input.big-white:focus, select.big-white:focus, textarea.big-white:focus {
        border-color: #aaa;
        -moz-box-shadow: 0 0 7px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.1);
        box-shadow: 0 0 7px rgba(0,0,0,0.1)
    }

.roundSubmitButton {
    display: block;
    background: #25cd60;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    padding: 12px 30px;
    cursor: pointer;
    border: 0;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px
}

    .roundSubmitButton.red {
        background: #d8433b
    }

.styled-radios {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden;
    *zoom: 1
}

    .styled-radios li {
        float: left;
        padding: 0;
        margin: 0 20px 10px 0
    }

        .styled-radios li:hover p {
            display: block
        }

        .styled-radios li p {
            position: absolute;
            background: #fff;
            padding: 3px 12px;
            top: 44px;
            left: 0;
            border: 1px solid #cdcdcd;
            display: none
        }

        .styled-radios li label {
            background: #fff;
            color: #999;
            border-radius: 50px;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border: 1px solid #bbb;
            padding: 10px 20px;
            text-align: center;
            width: auto;
            float: none;
            cursor: pointer;
            font-weight: normal
        }

        .styled-radios li.act label {
            background: #50c1f0;
            border-color: #50c1f0;
            color: #fff;
            font-weight: bold
        }

        .styled-radios li input {
            margin: 8px 50px
        }

.styledCheckbox {
    width: 46px;
    height: 26px;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    position: relative;
    border-radius: 40px;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    transition: background 0.2s ease 0s;
    -moz-transition: background 0.2s ease 0s;
    -webkit-transition: background 0.2s ease 0s
}

    .styledCheckbox.on {
        background: #25cd60;
        border-color: #25cd60
    }

        .styledCheckbox.on .switch {
            left: 20px
        }

    .styledCheckbox .switch {
        width: 26px;
        height: 26px;
        background: #fff;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.3);
        border-radius: 100%;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        transition: left 0.3s cubic-bezier(0, 0.895, 0.31, 1.27) 0s;
        -moz-transition: left 0.3s cubic-bezier(0, 0.895, 0.31, 1.27) 0s;
        -webkit-transition: left 0.3s cubic-bezier(0, 0.895, 0.31, 1.27) 0s
    }

.grid {
    margin: 12px 0;
    position: relative;
    -moz-transition: padding .6s ease .6s;
    -o-transition: padding .6s ease .6s;
    -webkit-transition: padding .6s ease;
    -webkit-transition-delay: .6s;
    transition: padding .6s ease .6s
}

    .grid.profile-grid .grid-item {
        -moz-transition-property: width,left,right,top,bottom;
        -o-transition-property: width,left,right,top,bottom;
        -webkit-transition-property: width,left,right,top,bottom;
        transition-property: width,left,right,top,bottom;
        -moz-transition-duration: 0.6s;
        -o-transition-duration: 0.6s;
        -webkit-transition-duration: 0.6s;
        transition-duration: 0.6s;
        -moz-transition-delay: 0s;
        -o-transition-delay: 0s;
        -webkit-transition-delay: 0s;
        transition-delay: 0s
    }

    .grid .grid-item {
        float: left
    }

        .grid .grid-item.right {
            float: right
        }

        .grid .grid-item.a-1of1 {
            width: 100%
        }

        .grid .grid-item.a-1of2 {
            width: 50%
        }

        .grid .grid-item.a-1of3 {
            width: 33.33333%
        }

        .grid .grid-item.a-1of4 {
            width: 25%
        }

        .grid .grid-item.a-1of5 {
            width: 20%
        }

        .grid .grid-item.grid-item-extended {
            position: absolute;
            top: 0;
            z-index: 1
        }

        .grid .grid-item .panel {
            margin: 12px 0;
            position: relative;
            -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1)
        }

            .grid .grid-item .panel:before {
                content: "";
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 0;
                -moz-box-shadow: 0 10px 50px rgba(0,0,0,0.06);
                -webkit-box-shadow: 0 10px 50px rgba(0,0,0,0.06);
                box-shadow: 0 10px 50px rgba(0,0,0,0.06)
            }

.page-nav {
    padding-bottom: 25px;
    overflow: hidden;
    *zoom: 1
}

    .page-nav li {
        float: left;
        border-bottom: 2px solid #fff;
        padding: .7em 0;
        margin: 0 3em 0 0
    }

        .page-nav li a {
            color: #959595
        }

        .page-nav li.active {
            border-color: #d8433b
        }

            .page-nav li.active a {
                color: #d8433b;
                font-weight: 600
            }

.header {
    min-height: 60px;
    min-width: 260px;
    font-weight: 400;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAADBAMAAAAQBcvvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMDgwMTE3NDA3MjA2ODExOEMxNERDNUE1OThBMEJEQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGOUZGN0JEMjg2M0YxMUU1QjlENEVGRUEzRDI5NEM5OCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGOUZGN0JEMTg2M0YxMUU1QjlENEVGRUEzRDI5NEM5OCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTQ3NDgxMjcyOTIwNjgxMThDMTRGRThCMkU3MjJGNjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDA4MDExNzQwNzIwNjgxMThDMTREQzVBNTk4QTBCREMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz63/TVcAAAAFVBMVEUAh4l/twCLP4ml0/nYQzvpxdv5ugB3HyYYAAAAIUlEQVQY02MUZMAKQrEL36OGsDF2YSWsokwMgxwMegcCAGl/A1uEM/ALAAAAAElFTkSuQmCC") repeat-x #fff 0 bottom;
    padding: 0 20px;
    position: relative;
    z-index: 2;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.4);
    box-shadow: 0 0 2px rgba(0,0,0,0.4)
}

    .header .logo {
        float: left;
        padding: 8px 0
    }

    .header .radar {
        float: left;
        margin: 14px 0 0 20px;
        padding: 3px 3px 3px 20px;
        border-left: 1px solid #d9d9d9
    }

        .header .radar .radar-icon {
            display: block;
            width: 31px;
            height: 23px;
            background: url("img/header_radar_icon.png") no-repeat;
            background-size: 31px 23px
        }

    .header .nav {
        float: right
    }

        .header .nav > li {
            float: left;
            margin: 16px 7px
        }

            .header .nav > li a {
                display: block;
                font-size: .9em;
                letter-spacing: .01em;
                padding: 3px 0;
                -moz-transition: all,.3s;
                -o-transition: all,.3s;
                -webkit-transition: all,.3s;
                transition: all,.3s
            }

                .header .nav > li a:hover {
                    color: #50c1f0
                }

                .header .nav > li a.add-flight {
                    border: 1px solid #50c1f0;
                    color: #50c1f0;
                    text-transform: uppercase;
                    font-size: .75em;
                    font-weight: 600;
                    padding: 7px 14px;
                    margin: -2px 0 -1px 5px;
                    -moz-border-radius: 50px;
                    -webkit-border-radius: 50px;
                    border-radius: 50px
                }

                    .header .nav > li a.add-flight .fa {
                        margin-right: 8px
                    }

                    .header .nav > li a.add-flight.active, .header .nav > li a.add-flight:hover {
                        background: #50c1f0;
                        color: #fff;
                        border-bottom: 1px solid #50c1f0
                    }

                .header .nav > li a.active {
                    color: #50c1f0;
                    border-bottom: 2px solid #50c1f0
                }

            .header .nav > li.nav-item {
                display: none
            }

    .header .menu-button {
        cursor: pointer;
        margin: 4px 0 0 10px;
        position: relative;
        z-index: 16;
        display: none
    }

        .header .menu-button .bar {
            width: 24px;
            height: 3px;
            margin-top: 5px;
            display: block;
            background: #000;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            -webkit-transition: all .2s;
            transition: all .2s;
            -moz-transform-origin: 23px 50%;
            -ms-transform-origin: 23px 50%;
            -webkit-transform-origin: 23px 50%;
            transform-origin: 23px 50%
        }

            .header .menu-button .bar:nth-child(1) {
                margin: 0
            }

        .header .menu-button.collapsed .bar {
            background: #fff
        }

            .header .menu-button.collapsed .bar:nth-child(1) {
                -moz-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg)
            }

            .header .menu-button.collapsed .bar:nth-child(2) {
                opacity: 0
            }

            .header .menu-button.collapsed .bar:nth-child(3) {
                -moz-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg)
            }

    .header .sign-up-button {
        display: none;
        float: right;
        margin: 11px 3px 0 20px;
        padding: 0 40px;
        opacity: 1;
        visibility: visible;
        line-height: 2.1em;
        -moz-transition: opacity .5s;
        -o-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s
    }

        .header .sign-up-button.hidden {
            opacity: 0;
            visibility: hidden
        }

    .header .sign-in-button {
        display: none;
        float: right;
        margin-top: 11px;
        font-weight: 300;
        opacity: 1;
        visibility: visible;
        line-height: 2.5em;
        -moz-transition: opacity .5s;
        -o-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        transition: opacity .5s
    }

        .header .sign-in-button.hidden {
            opacity: 0;
            visibility: hidden
        }

    .header.landing {
        padding: 5px 0;
        width: 100%;
        position: fixed;
        background: #fff;
        -moz-transition: box-shadow .1s;
        -o-transition: box-shadow .1s;
        -webkit-transition: box-shadow .1s;
        transition: box-shadow .1s
    }

        .header.landing .bottom-pattern {
            width: 100%;
            height: 3px;
            background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAADBAMAAAAQBcvvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMDgwMTE3NDA3MjA2ODExOEMxNERDNUE1OThBMEJEQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGOUZGN0JEMjg2M0YxMUU1QjlENEVGRUEzRDI5NEM5OCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGOUZGN0JEMTg2M0YxMUU1QjlENEVGRUEzRDI5NEM5OCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTQ3NDgxMjcyOTIwNjgxMThDMTRGRThCMkU3MjJGNjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDA4MDExNzQwNzIwNjgxMThDMTREQzVBNTk4QTBCREMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz63/TVcAAAAFVBMVEUAh4l/twCLP4ml0/nYQzvpxdv5ugB3HyYYAAAAIUlEQVQY02MUZMAKQrEL36OGsDF2YSWsokwMgxwMegcCAGl/A1uEM/ALAAAAAElFTkSuQmCC") repeat-x #fff;
            position: absolute;
            bottom: 0;
            opacity: 1;
            -moz-transition: opacity .3s;
            -o-transition: opacity .3s;
            -webkit-transition: opacity .3s;
            transition: opacity .3s
        }

        .header.landing.clean {
            padding: 25px 0 5px 0;
            position: absolute;
            background: none;
            -moz-box-shadow: none;
            -webkit-box-shadow: none;
            box-shadow: none
        }

            .header.landing.clean .bottom-pattern {
                opacity: 0
            }

        .header.landing .nav {
            display: none
        }

.sidebar-nav {
    display: none;
    width: 350px;
    max-width: 100%;
    height: 100%;
    background: #d5433f;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 15;
    -moz-box-shadow: -1px 0 50px rgba(0,0,0,0.4);
    -webkit-box-shadow: -1px 0 50px rgba(0,0,0,0.4);
    box-shadow: -1px 0 50px rgba(0,0,0,0.4)
}

    .sidebar-nav .nav-secondary {
        padding: 35px
    }

        .sidebar-nav .nav-secondary li {
            display: block
        }

            .sidebar-nav .nav-secondary li.margin {
                margin-top: 50px
            }

            .sidebar-nav .nav-secondary li a {
                display: block;
                color: #fff;
                font-size: 1.5em;
                font-weight: bold;
                text-transform: uppercase;
                padding: 20px 0;
                outline: 0
            }

                .sidebar-nav .nav-secondary li a:hover {
                    color: #ffd8d8
                }

            .sidebar-nav .nav-secondary li .fa {
                display: none
            }

.sidebar-fadeout {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 14
}

.main {
    clear: both;
    min-width: 300px;
    padding: 30px 0 150px 0
}

    .main.profile-main {
        background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZlZmRmZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VhZWRmMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background-size: 100%;
        background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fefdfe),color-stop(100%, #eaedf2));
        background-image: -moz-linear-gradient(#fefdfe,#eaedf2);
        background-image: -webkit-linear-gradient(#fefdfe,#eaedf2);
        background-image: linear-gradient(#fefdfe,#eaedf2);
        padding: 0 0 250px 0
    }

    .main.settings-main {
        padding: 0 0 250px 0
    }

    .main.profile-flights-main {
        padding: 0 0 250px 0
    }

    .main.add-flight-main {
        padding: 0 0 50px 0;
        font-size: .95em
    }

    .main.sign-up-username-main {
        background: url("img/world_map_1920.jpg") repeat-x
    }

    .main.landing-main {
        padding: 100px 0 0 0
    }

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px
}

    .container.profile-container {
        padding: 0
    }

    .container.profile-flights-container {
        padding: 0
    }

    .container.review-container {
        padding: 0
    }

.footer {
    width: 100%;
    background: #1f1f1f;
    padding: 40px 0;
    color: #fff;
    font-size: .9em;
    position: relative;
    height: 150px;
    bottom: 0;
    overflow: hidden;
    *zoom: 1
}

    .footer .logo {
        font-size: .9em;
        color: #aaa;
        margin-bottom: 40px;
        display: block;
        width: 25%;
        min-width: 250px
    }

        .footer .logo img {
            display: block;
            margin-bottom: 20px;
            width: 195px;
            height: 46px
        }

    .footer .footer-nav-container {
        width: 100%;
        overflow: hidden;
        *zoom: 1
    }

        .footer .footer-nav-container .footer-nav {
            width: 100%;
            padding-right: 20px;
            padding-bottom: 40px
        }

            .footer .footer-nav-container .footer-nav:last-child {
                padding-right: 0
            }

            .footer .footer-nav-container .footer-nav li {
                margin-bottom: .2em
            }

                .footer .footer-nav-container .footer-nav li a {
                    color: #fff
                }

                    .footer .footer-nav-container .footer-nav li a i {
                        display: none
                    }

                .footer .footer-nav-container .footer-nav li:first-child {
                    text-transform: uppercase;
                    font-weight: 400;
                    margin-bottom: 1em
                }

    .footer .social {
        width: 100%
    }

.profile-map {
    width: 100%;
    height: 500px;
    position: relative
}

    .profile-map .profile-updated {
        position: absolute;
        z-index: 1;
        right: 25px;
        top: 20px;
        font-size: .75em;
        font-weight: bold;
        text-transform: uppercase;
        color: #fff;
        background: #ce4231;
        padding: 10px 18px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        -moz-box-shadow: 0 0 20px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.2);
        box-shadow: 0 0 20px rgba(0,0,0,0.2)
    }

    .profile-map #main-map {
        width: 100%;
        height: 100%
    }

.profile-summary {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAADBAMAAAAQBcvvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMDgwMTE3NDA3MjA2ODExOEMxNERDNUE1OThBMEJEQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGOUZGN0JEMjg2M0YxMUU1QjlENEVGRUEzRDI5NEM5OCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGOUZGN0JEMTg2M0YxMUU1QjlENEVGRUEzRDI5NEM5OCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTQ3NDgxMjcyOTIwNjgxMThDMTRGRThCMkU3MjJGNjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDA4MDExNzQwNzIwNjgxMThDMTREQzVBNTk4QTBCREMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz63/TVcAAAAFVBMVEUAh4l/twCLP4ml0/nYQzvpxdv5ugB3HyYYAAAAIUlEQVQY02MUZMAKQrEL36OGsDF2YSWsokwMgxwMegcCAGl/A1uEM/ALAAAAAElFTkSuQmCC") repeat-x #fff 0 bottom;
    font-size: 0.875em;
    padding-bottom: 3px;
    position: relative;
    -moz-box-shadow: 0 5px 30px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 5px 30px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.1);
    box-shadow: 0 5px 30px rgba(0,0,0,0.1),0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
    *zoom: 1
}

    .profile-summary .summary-card-container {
        overflow: hidden;
        *zoom: 1;
        padding: 0 0 30px 6%
    }

    .profile-summary .summary-card {
        float: left;
        width: 50%;
        padding: 20px 0 0 0
    }

        .profile-summary .summary-card:nth-child(n+3) {
            border-bottom: 0
        }

        .profile-summary .summary-card h2 {
            font-size: 1.4em;
            font-weight: bold
        }

            .profile-summary .summary-card h2 .unit {
                font-size: .75em;
                font-weight: normal;
                color: #666
            }

        .profile-summary .summary-card .sub-text {
            display: block
        }

        .profile-summary .summary-card .sub-text-roller {
            display: block;
            position: relative;
            overflow: hidden;
            height: 20px
        }

            .profile-summary .summary-card .sub-text-roller .sub-text-container {
                position: relative
            }

                .profile-summary .summary-card .sub-text-roller .sub-text-container .sub-text {
                    height: 25px
                }

@-moz-keyframes sub-text-roller-2 {
    0%, 40% {
        opacity: 1;
        top: 0
    }

    43.3333%, 46.6667% {
        opacity: 0
    }

    50%, 90% {
        opacity: 1;
        top: -25px
    }

    93.3333%, 96.6667% {
        opacity: 0
    }

    100% {
        opacity: 1;
        top: -50px
    }
}

@-webkit-keyframes sub-text-roller-2 {
    0%, 40% {
        opacity: 1;
        top: 0
    }

    43.3333%, 46.6667% {
        opacity: 0
    }

    50%, 90% {
        opacity: 1;
        top: -25px
    }

    93.3333%, 96.6667% {
        opacity: 0
    }

    100% {
        opacity: 1;
        top: -50px
    }
}

@keyframes sub-text-roller-2 {
    0%, 40% {
        opacity: 1;
        top: 0
    }

    43.3333%, 46.6667% {
        opacity: 0
    }

    50%, 90% {
        opacity: 1;
        top: -25px
    }

    93.3333%, 96.6667% {
        opacity: 0
    }

    100% {
        opacity: 1;
        top: -50px
    }
}

@-moz-keyframes sub-text-roller-3 {
    0%, 26.6667% {
        opacity: 1;
        top: 0
    }

    28.8889%, 31.1111% {
        opacity: 0
    }

    33.3333%, 60% {
        opacity: 1;
        top: -25px
    }

    62.2222%, 64.4444% {
        opacity: 0
    }

    66.6667%, 93.3333% {
        opacity: 1;
        top: -50px
    }

    95.5556%, 97.7778% {
        opacity: 0
    }

    100% {
        opacity: 1;
        top: -75px
    }
}

@-webkit-keyframes sub-text-roller-3 {
    0%, 26.6667% {
        opacity: 1;
        top: 0
    }

    28.8889%, 31.1111% {
        opacity: 0
    }

    33.3333%, 60% {
        opacity: 1;
        top: -25px
    }

    62.2222%, 64.4444% {
        opacity: 0
    }

    66.6667%, 93.3333% {
        opacity: 1;
        top: -50px
    }

    95.5556%, 97.7778% {
        opacity: 0
    }

    100% {
        opacity: 1;
        top: -75px
    }
}

@keyframes sub-text-roller-3 {
    0%, 26.6667% {
        opacity: 1;
        top: 0
    }

    28.8889%, 31.1111% {
        opacity: 0
    }

    33.3333%, 60% {
        opacity: 1;
        top: -25px
    }

    62.2222%, 64.4444% {
        opacity: 0
    }

    66.6667%, 93.3333% {
        opacity: 1;
        top: -50px
    }

    95.5556%, 97.7778% {
        opacity: 0
    }

    100% {
        opacity: 1;
        top: -75px
    }
}


.profile-pies {
    padding: 0 0 20px 6%;
    overflow: hidden;
    *zoom: 1
}

    .profile-pies .pie-card {
        width: 50%;
        min-width: 230px;
        height: 140px;
        float: left;
        padding: 20px 0 5px 0;
        font-size: .875em
    }

        .profile-pies .pie-card h4 {
            font-weight: bold;
            text-transform: uppercase;
            margin-bottom: 14px
        }

        .profile-pies .pie-card figure {
            overflow: hidden;
            *zoom: 1
        }

            .profile-pies .pie-card figure .pie-chart {
                float: left;
                width: 88px;
                height: 88px;
                margin-right: 20px
            }

            .profile-pies .pie-card figure figcaption {
                float: left
            }

                .profile-pies .pie-card figure figcaption span {
                    display: block
                }

.top-card.expandedHasMap {
    margin-bottom: 412px !important
}

.top-card figure {
    padding: 17px 16px 22px 16px;
    position: relative
}

    .top-card figure h4 {
        padding: 0 0 16px 0;
        font-size: .875em;
        font-weight: bold;
        color: #fff;
        text-align: center;
        text-transform: uppercase;
        -moz-transition: opacity .2s;
        -o-transition: opacity .2s;
        -webkit-transition: opacity .2s;
        transition: opacity .2s
    }

    .top-card figure .fa-expand, .top-card figure .fa-close {
        color: rgba(255,255,255,0.7);
        position: absolute;
        top: 17px;
        right: 17px;
        cursor: pointer;
        display: none
    }

    .top-card figure .fa-circle-o-notch {
        color: rgba(255,255,255,0.75);
        position: absolute;
        top: 118px;
        left: 50%;
        font-size: 22px;
        margin-left: -11px
    }

    .top-card figure .bar-chart {
        width: 100%;
        height: 185px;
        -moz-transition: opacity .2s;
        -o-transition: opacity .2s;
        -webkit-transition: opacity .2s;
        transition: opacity .2s
    }

    .top-card figure .column-chart {
        width: 100%;
        height: 195px
    }

    .top-card figure .area-chart {
        width: 100%;
        height: 185px
    }

.top-card .tooltip {
    background: #fff;
    padding: 5px 10px;
    color: #333;
    font-weight: bold;
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1),0 0 20px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1),0 0 20px rgba(0,0,0,0.2);
    box-shadow: 0 1px 1px rgba(0,0,0,0.1),0 0 20px rgba(0,0,0,0.2)
}

.top-card figcaption {
    padding: 13px 20px 21px 25px;
    position: relative;
    overflow: hidden;
    *zoom: 1
}

    .top-card figcaption h3 {
        font-size: 2.25em;
        font-weight: bold
    }

    .top-card figcaption .view {
        float: right;
        margin-top: 7px
    }

        .top-card figcaption .view li {
            color: #acacac;
            border: 1px solid #acacac;
            font-size: 0.625em;
            font-weight: bold;
            margin-top: 5px;
            padding: 4px 8px;
            text-align: center;
            cursor: pointer;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px
        }

            .top-card figcaption .view li.active {
                background: #acacac;
                color: #fff
            }

.top-card.extended h4 {
    padding-bottom: 6px
}

.top-card.extended .stats li {
    float: left;
    margin-right: 40px
}

.top-card.extended .map {
    background: #999;
    width: 100%;
    height: 400px;
    position: relative
}

    .top-card.extended .map .map-extended {
        width: 100%;
        height: 100%
    }

    .top-card.extended .map .code {
        width: 100px;
        line-height: 100px;
        background: #333;
        color: #fff;
        font-size: 1.875em;
        font-weight: bold;
        text-align: center;
        position: absolute;
        top: 20px;
        left: 25px;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        -moz-box-shadow: 5px 0 40px rgba(0,0,0,0.2);
        -webkit-box-shadow: 5px 0 40px rgba(0,0,0,0.2);
        box-shadow: 5px 0 40px rgba(0,0,0,0.2)
    }

    .top-card.extended .map .close {
        background: #333;
        color: #fff;
        font-size: .75em;
        font-weight: bold;
        padding: 10px 20px;
        position: absolute;
        top: 20px;
        right: 25px;
        cursor: pointer;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px
    }

.top-card.green figure {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzliYzUwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5YTcwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #9bc500),color-stop(100%, #69a700));
    background-image: -moz-linear-gradient(right, #9bc500,#69a700);
    background-image: -webkit-linear-gradient(right, #9bc500,#69a700);
    background-image: linear-gradient(to left bottom, #9bc500,#69a700)
}

.top-card.yellow figure {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4YzYwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y1YWIwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #f8c600),color-stop(100%, #f5ab00));
    background-image: -moz-linear-gradient(right, #f8c600,#f5ab00);
    background-image: -webkit-linear-gradient(right, #f8c600,#f5ab00);
    background-image: linear-gradient(to left bottom, #f8c600,#f5ab00)
}

.top-card.red figure {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjNTA0YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NkMzYzMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #dc504c),color-stop(100%, #cd3632));
    background-image: -moz-linear-gradient(right, #dc504c,#cd3632);
    background-image: -webkit-linear-gradient(right, #dc504c,#cd3632);
    background-image: linear-gradient(to left bottom, #dc504c,#cd3632)
}

.top-card.purple figure {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExNGVhMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzcxMzQ3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #a14ea0),color-stop(100%, #713470));
    background-image: -moz-linear-gradient(right, #a14ea0,#713470);
    background-image: -webkit-linear-gradient(right, #a14ea0,#713470);
    background-image: linear-gradient(to left bottom, #a14ea0,#713470)
}

.top-card.teal figure {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOWZhMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwNmY3MCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #009fa0),color-stop(100%, #006f70));
    background-image: -moz-linear-gradient(right, #009fa0,#006f70);
    background-image: -webkit-linear-gradient(right, #009fa0,#006f70);
    background-image: linear-gradient(to left bottom, #009fa0,#006f70)
}

.top-card.blue figure {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3ZDFmMiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdmYmRlZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #a7d1f2),color-stop(100%, #7fbdee));
    background-image: -moz-linear-gradient(right, #a7d1f2,#7fbdee);
    background-image: -webkit-linear-gradient(right, #a7d1f2,#7fbdee);
    background-image: linear-gradient(to left bottom, #a7d1f2,#7fbdee)
}

.top-card.pink figure {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkYzdkZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1YWJjZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(0%, #edc7df),color-stop(100%, #e5abcf));
    background-image: -moz-linear-gradient(right, #edc7df,#e5abcf);
    background-image: -webkit-linear-gradient(right, #edc7df,#e5abcf);
    background-image: linear-gradient(to left bottom, #edc7df,#e5abcf)
}

.highcharts-text-outline {
    stroke-width: 0;
    stroke: none;
    display: none
}

.flight-list {
    width: 100%
}

    .flight-list thead {
        visibility: hidden
    }

    .flight-list tr th {
        padding: 1em 0 1em 1.4em;
        font-size: .85em;
        text-transform: uppercase;
        color: #999;
        background: #fff
    }

        .flight-list tr th a {
            color: #999
        }

    .flight-list tr td {
        padding: 1.0em 0 1.0em 1.19em;
        border-bottom: 1px solid #eee;
        font-weight: 500
    }

        .flight-list tr td.flight-note span {
            font-size: .8em
        }

        .flight-list tr td.flight-date .inner-date {
            font-weight: bold
        }

        .flight-list tr td.flight-date .inner-actions {
            font-size: .8em;
            color: #999;
            display: none
        }

            .flight-list tr td.flight-date .inner-actions a {
                color: #999
            }

    .flight-list tr:nth-child(odd) td {
        background: #f9f9f9
    }

    .flight-list tr.hovered .flight-date .inner-date {
        display: none
    }

    .flight-list tr.hovered .flight-date .inner-actions {
        display: inline
    }

    .flight-list.flight-list-original {
        border: 1px solid #f6f6f6;
        border-top: 0
    }

    .flight-list .circle-icon {
        background: #bbb;
        display: inline-block;
        width: 1.8em;
        height: 1.8em;
        line-height: 1.8em;
        font-size: .7em;
        color: #fff;
        font-weight: bold;
        text-align: center;
        margin-right: .5em;
        cursor: default;
        -moz-border-radius: 100%;
        -webkit-border-radius: 100%;
        border-radius: 100%
    }

        .flight-list .circle-icon.class-economy {
            background: #7fb700
        }

        .flight-list .circle-icon.class-economy-plus {
            background: #f9ba00
        }

        .flight-list .circle-icon.class-business {
            background: #d8433b
        }

        .flight-list .circle-icon.class-first {
            background: #8b3f89
        }

        .flight-list .circle-icon.class-private {
            background: #008789
        }

        .flight-list .circle-icon.reason-leisure {
            background: #a5d3f9
        }

        .flight-list .circle-icon.reason-business {
            background: #d8433b
        }

        .flight-list .circle-icon.reason-crew {
            background: #f9ba00
        }

    .flight-list .flight-note, .flight-list .flight-icons, .flight-list .flight-seat, .flight-list .flight-reg, .flight-list .flight-aircraft, .flight-list .flight-airline, .flight-list .flight-arr-time, .flight-list .flight-dep-time, .flight-list .flight-distance {
        display: none
    }

.flight-list-outer-header {
    border-bottom: 1px solid #eee;
    width: 100%;
    position: absolute;
    background: #fff;
    -moz-transition: box-shadow 1s;
    -o-transition: box-shadow 1s;
    -webkit-transition: box-shadow 1s;
    transition: box-shadow 1s
}

    .flight-list-outer-header.fixed {
        position: fixed;
        top: 0;
        -moz-box-shadow: 0 0 5px rgba(0,0,0,0.08);
        -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.08);
        box-shadow: 0 0 5px rgba(0,0,0,0.08)
    }

    .flight-list-outer-header .flight-list {
        border-left: 1px solid #fff;
        border-right: 1px solid #fff
    }

.add-flight-main {
    background: #fbfbfb
}

    .add-flight-main .steps {
        background: #fff;
        width: 100%;
        top: 0;
        position: relative;
        z-index: 1;
        -moz-box-shadow: 0 0 2px rgba(0,0,0,0.15);
        -webkit-box-shadow: 0 0 2px rgba(0,0,0,0.15);
        box-shadow: 0 0 2px rgba(0,0,0,0.15)
    }

        .add-flight-main .steps.fixed {
            position: fixed;
            background: rgba(255,255,255,0.98)
        }

    .add-flight-main .addFlightContainer.hasStickyHeader {
        padding-top: 73px
    }

    .add-flight-main .addFlightProgressContainer {
        padding: 0;
        position: relative
    }

        .add-flight-main .addFlightProgressContainer .stepMarker {
            height: 3px;
            width: 150px;
            background: #222;
            position: absolute;
            bottom: 0;
            left: 0;
            -moz-transition: all .5s;
            -o-transition: all .5s;
            -webkit-transition: all .5s;
            transition: all .5s;
            display: none
        }

    .add-flight-main .addFlightProgress {
        list-style-type: none;
        padding: 0;
        overflow: hidden;
        *zoom: 1
    }

        .add-flight-main .addFlightProgress li {
            color: #bfbfbf;
            font-weight: bold;
            margin: 20px 0 18px 0;
            float: left;
            width: 25%;
            text-align: center
        }

        .add-flight-main .addFlightProgress.editMode li {
            cursor: pointer
        }

        .add-flight-main .addFlightProgress li.active {
            color: #303030
        }

        .add-flight-main .addFlightProgress li.completed {
            color: #25cd60
        }

            .add-flight-main .addFlightProgress li.completed.active, .add-flight-main .addFlightProgress li.notCompleted.active {
                color: #333
            }

        .add-flight-main .addFlightProgress li.notCompleted {
            color: #ea4a4a
        }

        .add-flight-main .addFlightProgress .stepContainer {
            width: 29px;
            height: 29px;
            display: inline-block;
            text-align: center;
            font-size: 1.15em;
            line-height: 30px;
            background: #fff;
            border: 2px solid #bfbfbf;
            border-radius: 30px;
            -moz-border-radius: 30px;
            -webkit-border-radius: 30px
        }

        .add-flight-main .addFlightProgress li.active .stepContainer {
            border-color: #303030
        }

        .add-flight-main .addFlightProgress li.completed .stepContainer {
            border: none;
            width: 33px;
            height: 33px;
            background: #25cd60;
            color: #fff;
            line-height: 34px
        }

        .add-flight-main .addFlightProgress li.notCompleted .stepContainer {
            border: none;
            width: 33px;
            height: 33px;
            background: #ea4a4a;
            color: #fff;
            line-height: 32px
        }

        .add-flight-main .addFlightProgress li.completed.active .stepContainer, .add-flight-main .addFlightProgress li.notCompleted.active .stepContainer {
            background: #333
        }

        .add-flight-main .addFlightProgress .stepContainer .fa {
            display: none
        }

        .add-flight-main .addFlightProgress li.completed .stepContainer .fa-check {
            display: inline;
            margin-left: 1px
        }

        .add-flight-main .addFlightProgress li.completed .stepContainer .stepNumber {
            display: none
        }

        .add-flight-main .addFlightProgress li.notCompleted .stepContainer .fa-times {
            display: inline;
            margin-left: 0
        }

        .add-flight-main .addFlightProgress li.notCompleted .stepContainer .stepNumber {
            display: none
        }

        .add-flight-main .addFlightProgress .stepText {
            padding-left: 18px;
            line-height: 34px;
            font-size: 1.1em;
            display: none
        }

    .add-flight-main .addFlightFormContainer {
        padding: 0;
        transition: height 0.1s ease 0s;
        -moz-transition: height 0.15s ease 0s;
        -webkit-transition: height 0.15s ease 0s
    }

    .add-flight-main .addFlightSideBySideContainer .social-container {
        width: 500px
    }

        .add-flight-main .addFlightSideBySideContainer .social-container img {
            width: 20px;
            float: left;
            margin-right: 6px;
            margin-top: 8px
        }

        .add-flight-main .addFlightSideBySideContainer .social-container label {
            width: 135px
        }

    .add-flight-main .addFlightFormContainer .addFlightSideBySideContainer {
        width: 520%;
        transition: margin 0.2s ease 0s;
        -moz-transition: margin 0.25s ease 0s;
        -webkit-transition: margin 0.25s ease 0s
    }

    .add-flight-main .addFlightFormContainer .step {
        width: 695px;
        margin: 0 100px 0 0;
        float: left;
        display: none;
        padding-top: 20px
    }

        .add-flight-main .addFlightFormContainer .step.flightInfoForm {
            padding-top: 0
        }

        .add-flight-main .addFlightFormContainer .step.visible {
            display: block
        }

    .add-flight-main .addFlightFormContainer h2 {
        font-size: 2em;
        font-weight: 300;
        padding: 0 0 .5em 0;
        margin: 0 0 1em 0;
        border-bottom: 2px dashed #aaa
    }

        .add-flight-main .addFlightFormContainer h2 .small {
            color: #929292;
            font-weight: normal;
            font-size: .9em
        }

    .add-flight-main .notification {
        background: #50c1f0;
        border: 1px solid #44b4e3;
        color: #fff;
        padding: 15px 35px;
        margin-top: -6px;
        font-weight: bold
    }

        .add-flight-main .notification i {
            color: #006e9c;
            line-height: 1.3em;
            cursor: pointer;
            float: right
        }

    .add-flight-main .modal {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 1px;
        z-index: 10
    }

        .add-flight-main .modal .modalBox {
            background: #fff;
            margin: 65px auto;
            box-shadow: 0 20px 120px 30px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.15);
            -moz-box-shadow: 0 20px 120px 30px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.15);
            -webkit-box-shadow: 0 20px 120px 30px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.15)
        }

    .add-flight-main .modalBox.routeSelection {
        width: 320px;
        text-align: center
    }

    .add-flight-main .modalBox h2 {
        margin-top: 0;
        font-size: 1.9em;
        padding: 50px 50px 0 50px
    }

    .add-flight-main .modalBox p {
        font-size: 0.95em;
        padding: 0 50px 30px 50px
    }

    .add-flight-main .modalBox a.button {
        background: #47c0f2;
        padding: 11px;
        display: block;
        width: 130px;
        margin: 10px auto;
        font-size: 1.15em;
        color: #fff;
        font-weight: bold;
        cursor: pointer;
        border-radius: 100px;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px
    }

        .add-flight-main .modalBox a.button:hover {
            background: #59caf8
        }

    .add-flight-main .modalBox .bottom {
        background: #f8f8f8;
        border-top: 1px solid #f3f3f3;
        margin-top: 65px;
        padding: 13px
    }

        .add-flight-main .modalBox .bottom a.button {
            background: none;
            border: 2px solid #bebebe;
            width: 75px;
            color: #a0a0a0;
            font-size: .95em;
            padding: 7px;
            margin: 0 auto
        }

            .add-flight-main .modalBox .bottom a.button:hover {
                border-color: #aaa;
                color: #777
            }

    .add-flight-main #previewMap {
        width: 100%;
        height: 250px;
        clear: both;
        margin-bottom: 40px;
        position: relative
    }

    .add-flight-main #previewMapOverlay {
        width: 100%;
        height: 5px;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.15);
        position: absolute;
        top: 0;
        z-index: 50
    }

    .add-flight-main #previewMapCanvas {
        width: 100%;
        height: 100%
    }

    .add-flight-main .arrAirportContainer {
        padding-bottom: 10px
    }

    .add-flight-main input.wide {
        width: 220px
    }

    .add-flight-main .addFlightFormContainer .left {
        float: none
    }

    .add-flight-main .addFlightFormContainer .right {
        float: none
    }

    .add-flight-main .addFlightFormContainer .formRow {
        margin-bottom: 20px
    }

        .add-flight-main .addFlightFormContainer .formRow .post-to-fb-wrapper {
            margin-left: 32px
        }

        .add-flight-main .addFlightFormContainer .formRow .left {
            float: none
        }

        .add-flight-main .addFlightFormContainer .formRow.seatNumber {
            margin: -20px 0 20px 0
        }

    .add-flight-main .addFlightFormContainer .airlineAircraft .formRow {
        margin-right: 40px
    }

    .add-flight-main .addFlightFormContainer label {
        display: block;
        width: 160px;
        color: #666;
        font-size: 1em;
        padding: 9px 0
    }

    .add-flight-main .addFlightFormContainer .styled-radios li label {
        width: auto;
        padding: 10px 20px;
        display: list-item;
        color: #999
    }

    .add-flight-main .addFlightFormContainer .styled-radios li.act label {
        color: #fff
    }

    .add-flight-main .addFlightFormContainer .styled-radios li input {
        margin: 8px 50px
    }

    .add-flight-main .addFlightFormContainer input {
        margin: 0
    }

        .add-flight-main .addFlightFormContainer input.big-white.error {
            background: #feede9;
            border-color: #ec9581;
            color: #eb6649
        }

        .add-flight-main .addFlightFormContainer input.big-white:disabled {
            color: #aaa
        }

        .add-flight-main .addFlightFormContainer input::-webkit-input-placeholder {
            color: #fff
        }

        .add-flight-main .addFlightFormContainer input:focus::-webkit-input-placeholder {
            color: #777
        }

        .add-flight-main .addFlightFormContainer input.error::-webkit-input-placeholder {
            color: #ec9581
        }

        .add-flight-main .addFlightFormContainer input::-moz-placeholder {
            color: #fff
        }

        .add-flight-main .addFlightFormContainer input:focus::-moz-placeholder {
            color: #777
        }

        .add-flight-main .addFlightFormContainer input.error::-moz-placeholder {
            color: #ec9581
        }

        .add-flight-main .addFlightFormContainer input:-ms-input-placeholder {
            color: #fff
        }

        .add-flight-main .addFlightFormContainer input:focus:-ms-input-placeholder {
            color: #777
        }

        .add-flight-main .addFlightFormContainer input.error:-ms-input-placeholder {
            color: #ec9581
        }

    .add-flight-main .addFlightFormContainer .separator {
        border-bottom: 1px dashed #ddd;
        height: 10px;
        margin-bottom: 30px;
        clear: both
    }

    .add-flight-main .addFlightFormContainer .airlineAircraft {
        overflow: hidden;
        *zoom: 1
    }

    .add-flight-main .addFlightFormContainer .flightUpdatesBox {
        margin-top: 20px;
        width: 100%;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1)
    }

        .add-flight-main .addFlightFormContainer .flightUpdatesBox .boxHeader {
            background: #fff;
            color: #333;
            font-size: 1.5em;
            padding: 20px 30px
        }

        .add-flight-main .addFlightFormContainer .flightUpdatesBox .boxContent {
            background: #fff;
            padding: 0 30px 25px 30px;
            font-size: .95em
        }

            .add-flight-main .addFlightFormContainer .flightUpdatesBox .boxContent label {
                color: #333;
                padding-top: 20px
            }

    .add-flight-main .addFlightFormContainer #flight-comment {
        width: 280px;
        height: 80px
    }

    .add-flight-main .addFlightFormContainer .reviewBox {
        width: 340px;
        margin: 0 auto 15px auto;
        position: relative
    }

        .add-flight-main .addFlightFormContainer .reviewBox.left {
            float: none
        }

        .add-flight-main .addFlightFormContainer .reviewBox.right {
            float: none
        }

        .add-flight-main .addFlightFormContainer .reviewBox .copyright {
            position: absolute;
            top: 0;
            right: 0;
            background: rgba(0,0,0,0.2);
            color: #fff;
            padding: 2px 5px;
            font-size: .65em;
            display: none
        }

        .add-flight-main .addFlightFormContainer .reviewBox .circle {
            width: 126px;
            height: 126px;
            background: #bfbfbf;
            position: absolute;
            top: 92px;
            left: 108px;
            color: #fff;
            font-size: 2.5em;
            font-weight: bold;
            line-height: 130px;
            text-align: center;
            cursor: pointer;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
            border-radius: 100%;
            -moz-box-shadow: 0 0 40px rgba(0,0,0,0.32);
            -webkit-box-shadow: 0 0 40px rgba(0,0,0,0.32);
            box-shadow: 0 0 40px rgba(0,0,0,0.32)
        }

            .add-flight-main .addFlightFormContainer .reviewBox .circle .fa {
                display: none;
                font-size: 2em;
                line-height: 1.75em;
                padding-left: 4px
            }

            .add-flight-main .addFlightFormContainer .reviewBox .circle.completed {
                background: #00b4ff
            }

                .add-flight-main .addFlightFormContainer .reviewBox .circle.completed .code {
                    display: none
                }

                .add-flight-main .addFlightFormContainer .reviewBox .circle.completed .fa {
                    display: block
                }

    .add-flight-main .reviewBox.airline .circle, .add-flight-main .reviewBox.aircraft .circle {
        top: 60px
    }

    .add-flight-main .addFlightFormContainer .reviewBox .content {
        text-align: center;
        font-weight: 300;
        font-size: 1.3em
    }

        .add-flight-main .addFlightFormContainer .reviewBox .content ul.rating-stars {
            margin: 12px auto
        }

        .add-flight-main .addFlightFormContainer .reviewBox .content .plus {
            width: 29px;
            height: 29px;
            display: block;
            background: url("img/rate_plus.png") no-repeat;
            margin: 20px auto;
            padding-bottom: 20px;
            cursor: pointer
        }

    .add-flight-main .modal .reviewOverlay {
        display: none
    }

        .add-flight-main .modal .reviewOverlay .modalBox {
            width: 100%;
            max-width: 720px
        }

            .add-flight-main .modal .reviewOverlay .modalBox .content {
                padding: 30px;
                overflow: hidden;
                *zoom: 1
            }

            .add-flight-main .modal .reviewOverlay .modalBox h3 {
                color: #a6a6a6;
                padding: 0;
                margin: 0;
                font-size: 1.2em
            }

            .add-flight-main .modal .reviewOverlay .modalBox h2 {
                padding: 0 0 16px 0;
                margin: 0 0 20px 0;
                border-bottom: 1px solid #eee
            }

            .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn {
                height: 320px
            }

                .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn .rating-stars {
                    margin-bottom: 25px
                }

                .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn textarea {
                    width: 250px;
                    height: 170px;
                    margin-top: 5px;
                    resize: none
                }

                .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn .reviewTip {
                    display: none;
                    background: #ccc;
                    color: #fff;
                    font-size: 0.8em;
                    font-weight: 400;
                    margin: 10px auto;
                    padding: 5px 10px;
                    text-align: center;
                    width: 180px;
                    border-radius: 5px;
                    -moz-border-radius: 5px;
                    -webkit-border-radius: 5px
                }

                .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn textarea::-webkit-input-placeholder {
                    font-size: .9em
                }

                .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn textarea:-moz-placeholder {
                    font-size: .9em
                }

                .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn textarea::-moz-placeholder {
                    font-size: .9em
                }

                .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn textarea:-ms-input-placeholder {
                    font-size: .9em
                }

            .add-flight-main .modal .reviewOverlay .modalBox .content .rightColumn h4 {
                padding: 0;
                margin: 0 0 10px 0
            }

                .add-flight-main .modal .reviewOverlay .modalBox .content .rightColumn h4 .small {
                    font-weight: normal;
                    color: #959595;
                    font-size: .85em
                }

            .add-flight-main .modal .reviewOverlay .modalBox .content label {
                font-weight: bold
            }

                .add-flight-main .modal .reviewOverlay .modalBox .content label .small {
                    font-weight: normal;
                    color: #959595;
                    font-size: .85em
                }

            .add-flight-main .modal .reviewOverlay .modalBox .subRatingRow {
                overflow: hidden;
                *zoom: 1
            }

                .add-flight-main .modal .reviewOverlay .modalBox .subRatingRow .subRatingName {
                    float: left;
                    padding: 8px 0
                }

                .add-flight-main .modal .reviewOverlay .modalBox .subRatingRow .subRatingRate {
                    float: right
                }

            .add-flight-main .modal .reviewOverlay .modalBox .bottom {
                margin-top: 0
            }

                .add-flight-main .modal .reviewOverlay .modalBox .bottom .button {
                    background: #47c0f2;
                    color: #fff;
                    border: none;
                    padding: 9px;
                    text-align: center
                }

    .add-flight-main .addFlightButtonContainer {
        padding: 15px;
        overflow: hidden;
        *zoom: 1
    }

        .add-flight-main .addFlightButtonContainer .button {
            display: block;
            background: #25cd60;
            color: #fff;
            font-size: 1.1em;
            font-weight: bold;
            text-decoration: none;
            text-align: center;
            padding: 12px 30px;
            cursor: pointer;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px
        }

            .add-flight-main .addFlightButtonContainer .button.back {
                background: #d1d1d1;
                padding: 12px 20px
            }

            .add-flight-main .addFlightButtonContainer .button.disabled {
                background: #d1d1d1;
                cursor: default
            }

            .add-flight-main .addFlightButtonContainer .button .continueText {
                padding-right: 10px
            }

            .add-flight-main .addFlightButtonContainer .button.back i {
                padding: 0 10px 0 0
            }

.ui-datepicker {
    margin: 5px 0 0 0;
    display: none;
    background: #fff;
    color: #fff;
    padding: 10px;
    font-size: .85em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 0 10px rgba(39,84,91,0.3);
    -webkit-box-shadow: 0 0 10px rgba(39,84,91,0.3);
    box-shadow: 0 0 10px rgba(39,84,91,0.3)
}

.ui-datepicker-header {
    margin: 0 0 5px 0;
    padding: 10px;
    position: relative
}

.ui-datepicker-prev {
    position: absolute;
    top: 5px;
    left: 3px;
    cursor: pointer;
    content: "a";
    color: #f00
}

    .ui-datepicker-prev span {
        display: none
    }

    .ui-datepicker-prev:after {
        background: #eee;
        padding: 6px 15px;
        color: #111;
        font-weight: bold;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        content: "<";
        display: block
    }

.ui-datepicker-next {
    position: absolute;
    top: 5px;
    right: 3px;
    cursor: pointer
}

    .ui-datepicker-next span {
        display: none
    }

    .ui-datepicker-next:after {
        background: #eee;
        padding: 6px 15px;
        color: #111;
        font-weight: bold;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        content: ">";
        display: block
    }

.ui-datepicker-today {
    background: #ededed
}

.ui-datepicker-title {
    text-align: center
}

    .ui-datepicker-title select {
        margin: 0 3px
    }

.ui-datepicker-calendar {
    font-size: .95em
}

.ui-datepicker th {
    font-weight: bold;
    font-size: .8em;
    color: #999;
    text-align: center;
    text-transform: uppercase;
    padding: 0 0 8px 0
}

.ui-datepicker thead {
    border-bottom: 1px solid #eee
}

.ui-datepicker tbody {
    border-top: 1px solid #fff
}

.ui-datepicker td {
    width: 17px;
    padding: 9px 10px;
    cursor: pointer;
    text-align: center;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 25px
}

    .ui-datepicker td a {
        color: #333
    }

        .ui-datepicker td a.ui-priority-secondary {
            color: #ddd
        }

    .ui-datepicker td.ui-datepicker-current-day a, .ui-datepicker td.ui-datepicker-current-day span, .ui-datepicker td:hover a, .ui-datepicker td:hover span {
        color: #fff
    }

    .ui-datepicker-current-day, .ui-datepicker td:hover {
        background: #50c1f0;
        color: #fff
    }

.ui-datepicker-today a {
    font-weight: bold
}

#datepicker-top {
    background: url(img/speech-bubble-2.png);
    width: 19px;
    height: 10px;
    position: absolute;
    z-index: 1
}

ul.rating-stars {
    list-style-type: none;
    padding: 0;
    width: 160px;
    margin: 5px 0;
    overflow: hidden;
    *zoom: 1
}

    ul.rating-stars.small {
        width: 120px
    }

    ul.rating-stars li {
        width: 25px;
        height: 25px;
        background: url("img/star2_25.png") 0 0 no-repeat;
        float: left;
        padding-right: 7px;
        cursor: pointer
    }

        ul.rating-stars li.active {
            background-position: 0 -25px
        }

    ul.rating-stars.small li {
        width: 19px;
        height: 19px;
        background: url("img/star2_19.png") 0 0 no-repeat;
        padding-right: 5px
    }

        ul.rating-stars.small li.active {
            background-position: 0 -19px
        }

#timepicker-hour-container {
    position: absolute;
    z-index: 900;
    display: none
}

#timepicker-minute-container {
    position: absolute;
    z-index: 901;
    display: none
}

.timepicker-top {
    background: url(img/speech-bubble-2.png);
    width: 19px;
    height: 10px;
    margin: 0 0 0 10px;
    position: relative;
    z-index: 2
}

.timepicker-bottom {
    background: #fff;
    width: 48px;
    box-shadow: 0 0 10px rgba(39,84,91,0.3);
    -webkit-box-shadow: 0 0 10px rgba(39,84,91,0.3);
    -moz-box-shadow: 0 0 10px rgba(39,84,91,0.3);
    z-index: 1
}

.timepicker-content {
    height: 150px;
    overflow: auto
}

    .timepicker-content ul {
        list-style: none;
        margin: 0;
        padding: 0;
        width: 27px
    }

    .timepicker-content a {
        text-decoration: none;
        display: block;
        font-weight: bold;
        color: #333;
        padding: 5px;
        margin: 0 0 2px 0;
        cursor: pointer
    }

        .timepicker-content a:hover {
            background: #50c1f0;
            color: #fff
        }

a.timepicker-selected {
    background: #50c1f0;
    color: #fff
}

.body-notification {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background: #50c1f0;
    border-bottom: 1px solid #44b4e3;
    color: #fff;
    font-weight: 400;
    z-index: 100;
    padding: 20px 0;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1)
}

    .body-notification.red {
        background: #d8433b;
        border-color: #cd3e36
    }

    .body-notification.yellow {
        background: #fcf8e3;
        color: #8a6d3b;
        border-color: #faebcc
    }

    .body-notification a {
        color: inherit;
        text-decoration: underline
    }

    .body-notification .text {
        display: none
    }

        .body-notification .text i {
            color: #fff;
            line-height: 1.3em;
            cursor: pointer;
            float: right;
            padding-left: 10px
        }

.settings-main .formRow {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px dashed #ddd
}

    .settings-main .formRow.last {
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px dashed #ddd
    }

    .settings-main .formRow label {
        display: block;
        padding: 0 0 5px 0
    }

    .settings-main .formRow .styled-radios label {
        padding: 10px 20px
    }

.settings-main .roundSubmitButton {
    width: 100%
}

.settings-main .connection-list li {
    margin: 30px 0 20px 0;
    padding: 30px 0 20px 0;
    border-top: 1px dashed #ddd;
    overflow: hidden;
    *zoom: 1
}

    .settings-main .connection-list li img {
        margin: 0 20px 20px 0
    }

    .settings-main .connection-list li .connection-content {
        float: left;
        width: 72%;
        overflow: hidden;
        *zoom: 1
    }

    .settings-main .connection-list li .connection-info {
        width: 100%
    }

    .settings-main .connection-list li form {
        width: 100%
    }

    .settings-main .connection-list li .buttonContainer {
        margin: 45px 0 10px 0
    }

    .settings-main .connection-list li .roundSubmitButton {
        font-size: .8em;
        font-weight: 600;
        text-transform: uppercase;
        width: inherit
    }

.sign-up-username-main .panel {
    margin: 0 auto;
    width: 420px;
    padding: 20px;
    text-align: center
}

    .sign-up-username-main .panel img {
        margin-bottom: -30px
    }

    .sign-up-username-main .panel h2 {
        font-weight: 600;
        font-size: 1.6em
    }

    .sign-up-username-main .panel h4 {
        font-weight: 300;
        font-size: 1.1em;
        padding: 1em 40px 1.5em 40px
    }

        .sign-up-username-main .panel h4 strong {
            font-weight: 400
        }

    .sign-up-username-main .panel .big-white {
        display: block;
        margin: 0 auto;
        width: 270px;
        padding: 10px 12px
    }

    .sign-up-username-main .panel .legend {
        font-size: .7em
    }

        .sign-up-username-main .panel .legend .url {
            font-weight: 400
        }

    .sign-up-username-main .panel .roundSubmitButton {
        width: 100%;
        margin: 2em auto 0 auto
    }

.sign-up-button {
    display: block;
    background: #00ca5f;
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 2.5em;
    padding: 0 80px;
    float: left;
    margin-bottom: 16px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px
}

    .sign-up-button:hover {
        -moz-box-shadow: inset 0 0 60px rgba(255,255,255,0.4);
        -webkit-box-shadow: inset 0 0 60px rgba(255,255,255,0.4);
        box-shadow: inset 0 0 60px rgba(255,255,255,0.4)
    }

.forgot-password-button {
    display: block;
    clear: both;
    margin-top: 4px
}

    .forgot-password-button:hover {
        text-decoration: underline
    }

.sign-in-button {
    display: block;
    color: #888;
    font-size: .9em;
    line-height: 3em;
    margin-left: 20px;
    float: left
}

    .sign-in-button strong {
        font-weight: bold;
        padding: 0 5px
    }

    .sign-in-button:hover {
        color: #50c1f0
    }

.landing-intro {
    text-align: center;
    width: 100%;
    padding-bottom: 40px;
    overflow: hidden;
    *zoom: 1
}

    .landing-intro .landing-intro-text {
        width: 100%;
        float: left;
        padding-top: 20px;
        font-size: .9em
    }

        .landing-intro .landing-intro-text h2 {
            font-weight: bold;
            font-size: 1.9em;
            padding-bottom: 25px;
            color: #222
        }

        .landing-intro .landing-intro-text h3 {
            font-size: 1.4em;
            color: #888;
            line-height: 1.4em;
            margin-bottom: 50px
        }

        .landing-intro .landing-intro-text .sign-up-button {
            float: none;
            font-size: 1.1em
        }

        .landing-intro .landing-intro-text .sign-in-button {
            float: none;
            margin: 0;
            font-size: 1em
        }

    .landing-intro .landing-intro-browser {
        width: 100%;
        float: right
    }

        .landing-intro .landing-intro-browser img {
            width: 100%
        }

.landing-features {
    width: 100%;
    background: #f8f8f8;
    border-top: 1px solid #f2f2f2;
    padding: 70px 0;
    overflow: hidden;
    *zoom: 1
}

    .landing-features.yellow {
        background: #feba00
    }

        .landing-features.yellow .feature-list > li .fa, .landing-features.yellow .feature-list > li h2, .landing-features.yellow .feature-list > li h3 {
            color: #fff
        }

    .landing-features .feature-list {
        width: 100%
    }

        .landing-features .feature-list > li {
            width: 100%;
            float: left;
            text-align: center;
            margin: 0 0 50px 0
        }

            .landing-features .feature-list > li:last-child {
                margin-bottom: 0
            }

            .landing-features .feature-list > li .fa {
                color: #bbb;
                font-size: 6em;
                margin-bottom: 20px
            }

            .landing-features .feature-list > li h2 {
                font-size: 1.5em;
                font-weight: bold;
                color: #333
            }

            .landing-features .feature-list > li h3 {
                font-size: 1.1em;
                color: #333;
                padding: 20px 10px
            }

.landing-leaderboard {
    width: 100%;
    background: #feba00;
    padding: 40px 0 70px 0
}

    .landing-leaderboard .leaderboard-list {
        overflow: hidden;
        *zoom: 1
    }

        .landing-leaderboard .leaderboard-list h2 {
            color: #fff;
            text-align: center;
            font-weight: bold;
            font-size: 1.5em;
            margin: 30px
        }

        .landing-leaderboard .leaderboard-list > li {
            width: 100%;
            margin-bottom: 30px;
            float: left
        }

            .landing-leaderboard .leaderboard-list > li .leaderboard {
                color: #fff;
                margin: 0 12px
            }

                .landing-leaderboard .leaderboard-list > li .leaderboard > li {
                    overflow: hidden;
                    *zoom: 1;
                    padding: 8px 5px;
                    margin: 5px 0
                }

                    .landing-leaderboard .leaderboard-list > li .leaderboard > li:nth-child(even) {
                        background: rgba(255,255,255,0.1)
                    }

                    .landing-leaderboard .leaderboard-list > li .leaderboard > li.first {
                        background: #fff;
                        color: #333;
                        padding: 12px 5px;
                        margin-bottom: 10px;
                        -moz-border-radius: 3px;
                        -webkit-border-radius: 3px;
                        border-radius: 3px;
                        -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
                        -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.1);
                        box-shadow: 0 1px 5px rgba(0,0,0,0.1)
                    }

                        .landing-leaderboard .leaderboard-list > li .leaderboard > li.first .position {
                            border: 0;
                            width: 40px;
                            line-height: 40px;
                            color: #fff;
                            font-size: 1.3em;
                            margin-left: 12px;
                            -moz-box-shadow: 0 7px 15px rgba(0,0,0,0.1);
                            -webkit-box-shadow: 0 7px 15px rgba(0,0,0,0.1);
                            box-shadow: 0 7px 15px rgba(0,0,0,0.1);
                            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzliYzUwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzY5YTcwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
                            background-size: 100%;
                            background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9bc500),color-stop(100%, #69a700));
                            background-image: -moz-linear-gradient(#9bc500,#69a700);
                            background-image: -webkit-linear-gradient(#9bc500,#69a700);
                            background-image: linear-gradient(#9bc500,#69a700)
                        }

                        .landing-leaderboard .leaderboard-list > li .leaderboard > li.first.red .position {
                            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RjNTA0YyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NkMzYzMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
                            background-size: 100%;
                            background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dc504c),color-stop(100%, #cd3632));
                            background-image: -moz-linear-gradient(#dc504c,#cd3632);
                            background-image: -webkit-linear-gradient(#dc504c,#cd3632);
                            background-image: linear-gradient(#dc504c,#cd3632)
                        }

                        .landing-leaderboard .leaderboard-list > li .leaderboard > li.first.pink .position {
                            background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VkYzdkZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U1YWJjZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
                            background-size: 100%;
                            background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #edc7df),color-stop(100%, #e5abcf));
                            background-image: -moz-linear-gradient(#edc7df,#e5abcf);
                            background-image: -webkit-linear-gradient(#edc7df,#e5abcf);
                            background-image: linear-gradient(#edc7df,#e5abcf)
                        }

                        .landing-leaderboard .leaderboard-list > li .leaderboard > li.first .text .title {
                            font-size: 1.2em;
                            line-height: 1.3em
                        }

                    .landing-leaderboard .leaderboard-list > li .leaderboard > li .position {
                        float: left;
                        border: 2px solid #fff;
                        display: block;
                        width: 30px;
                        line-height: 30px;
                        margin: 0 20px 0 15px;
                        text-align: center;
                        font-weight: bold;
                        -moz-border-radius: 50px;
                        -webkit-border-radius: 50px;
                        border-radius: 50px
                    }

                    .landing-leaderboard .leaderboard-list > li .leaderboard > li .text {
                        float: left;
                        font-size: .85em;
                        line-height: 1.2em;
                        max-width: 70%
                    }

                        .landing-leaderboard .leaderboard-list > li .leaderboard > li .text .title {
                            display: block;
                            font-weight: bold
                        }

                        .landing-leaderboard .leaderboard-list > li .leaderboard > li .text .rating {
                            display: block
                        }

.page-not-found-main h3 {
    font-size: 1.2em
}

    .page-not-found-main h3 a {
        color: #50c1f0
    }

.ui-autocomplete {
    position: absolute;
    cursor: default
}

.ui-helper-hidden-accessible {
    display: none
}

* html .ui-autocomplete {
    width: 1px
}

.ui-menu {
    list-style: none;
    padding: 0;
    width: 290px;
    font-size: .95em
}

.ui-menu-item {
    padding: 0
}

.ui-menu .ui-menu-item a {
    text-decoration: none;
    display: block;
    color: #333;
    padding: 12px;
    cursor: pointer
}

.ui-menu .ui-menu-item.ui-state-focus a {
    background: #50c1f0;
    color: #fff;
    font-weight: bold
}

.ui-autocomplete {
    background: #fff;
    color: #333;
    padding: 0;
    margin-top: 18px;
    box-shadow: 0 0 10px rgba(39,84,91,0.3);
    -webkit-box-shadow: 0 0 10px rgba(39,84,91,0.3);
    -moz-box-shadow: 0 0 10px rgba(39,84,91,0.3)
}

.ui-autocomplete-loading {
    background: #fff url(img/loading_16_2.gif) no-repeat 98% center
}

article table {
    width: 100%;
    font-size: 10px
}

    article table th {
        padding: 0.6em 1.2em;
        background: #D5433F;
        text-align: center;
        color: #fff;
        border-right: 0.1em solid #cdcdcd
    }

        article table th:first-child {
            border-left: 0.1em solid #cdcdcd
        }

        article table th span {
            font-weight: bold;
            font-size: 1.4em
        }

    article table td {
        border: 0.1em solid #cdcdcd;
        padding: 0.6em 1.2em
    }

        article table td:first-child {
            width: 9.0em
        }

        article table td span {
            font-size: 1.4em
        }

    article table tr:nth-child(even) {
        background: #f9f9f9
    }

@media (min-width: 330px) {
    .profile-summary {
        font-size: 1em
    }
}

@media (max-width: 560px) {
    .header .menu-button {
        display: block
    }
}

@media (min-width: 560px) {
    .grid.profile-grid {
        margin: 12px -12px
    }

    .grid .grid-item.b-1of1 {
        width: 100%
    }

    .grid .grid-item.b-1of2 {
        width: 50%
    }

    .grid .grid-item.b-1of3 {
        width: 33.33333%
    }

    .grid .grid-item.b-1of4 {
        width: 25%
    }

    .grid .grid-item.b-1of5 {
        width: 20%
    }

    .grid .grid-item .panel {
        margin: 12px
    }

    .container.profile-container {
        padding: 0 20px
    }

    .header .nav > li {
        margin: 16px 11px
    }

        .header .nav > li.nav-item {
            display: block
        }

    .header .nav-secondary > li.nav-item.primary {
        display: none
    }

    .profile-summary .summary-card-container {
        padding: 0 0 30px 7%
    }

    .profile-summary .summary-card {
        width: 50%;
        padding: 20px 0 0 0
    }

        .profile-summary .summary-card h2 {
            font-size: 1.9em
        }

        .profile-summary .summary-card .sub-text-container.rows-2 {
            -moz-animation: 10s ease 0s infinite running sub-text-roller-2;
            -webkit-animation: 10s ease 0s infinite running sub-text-roller-2;
            animation: 10s ease 0s infinite running sub-text-roller-2
        }

        .profile-summary .summary-card .sub-text-container.rows-3 {
            -moz-animation: 15s ease 0s infinite running sub-text-roller-3;
            -webkit-animation: 15s ease 0s infinite running sub-text-roller-3;
            animation: 15s ease 0s infinite running sub-text-roller-3
        }

    .profile-pies .pie-card {
        float: left;
        width: 25%;
        min-width: 0;
        height: auto
    }

        .profile-pies .pie-card figure .pie-chart {
            float: none
        }

        .profile-pies .pie-card figure figcaption {
            float: none;
            padding-top: 15px
        }

    .top-card figure .fa-expand, .top-card figure .fa-close {
        display: block
    }

    .flight-list .flight-distance, .flight-list .flight-reg, .flight-list .flight-dep-time, .flight-list .flight-arr-time {
        display: table-cell
    }

    .add-flight-main .addFlightFormContainer .right {
        float: right
    }

    .add-flight-main .addFlightFormContainer .left {
        float: left
    }

    .add-flight-main .addFlightFormContainer #flight-comment {
        width: 400px
    }

    .add-flight-main .addFlightFormContainer .flightUpdatesBox {
        width: 400px
    }

    .add-flight-main .modal .reviewOverlay .modalBox .content .leftColumn {
        float: left;
        padding-right: 30px;
        border-right: 1px solid #eee
    }

    .add-flight-main .modal .reviewOverlay .modalBox .content .rightColumn {
        float: left;
        padding-left: 30px;
        width: 165px
    }

    .add-flight-main .modal .reviewOverlay .modalBox .subRatingRow .subRatingName {
        float: none;
        padding: 8px 0 0 0
    }

    .add-flight-main .modal .reviewOverlay .modalBox .subRatingRow .subRatingRate {
        float: none
    }

    .settings-main .connection-list li .buttonContainer {
        float: right
    }

    .settings-main .connection-list li .connection-info {
        float: left;
        width: 64%
    }

    .settings-main .connection-list li .connection-content {
        width: 84%
    }

    .footer .footer-nav-container {
        float: left;
        width: 90%
    }

        .footer .footer-nav-container .footer-nav {
            float: left;
            width: 29%;
            margin-bottom: 0
        }

    .footer .social {
        float: right;
        width: 10%
    }

    .header .sign-up-button, .header .sign-in-button {
        display: block
    }

    .landing-features .feature-list > li {
        width: 50%
    }

        .landing-features .feature-list > li:nth-child(3) {
            clear: left;
            margin-bottom: 0
        }

        .landing-features .feature-list > li h3 {
            padding: 20px 30px
        }
}

@media (max-width: 768px) {
    .add-flight-main .addFlightFormContainer.social-message {
        height: 600px
    }

        .add-flight-main .addFlightFormContainer.social-message label {
            width: 145px
        }

    .add-flight-main .addFlightSideBySideContainer .social-container {
        width: 100%
    }

    .addFlightSideBySideContainer .social-container .formRow label.left {
        display: inline;
        float: left;
        width: 120px
    }

    .add-flight-main .addFlightFormContainer .formRow.group.social-message div.left {
        float: left
    }

    .add-flight-main .addFlightFormContainer .formRow.group.social-message label.left {
        float: left
    }

    .add-flight-main .addFlightFormContainer .formRow .post-to-fb-wrapper {
        float: left
    }

        .add-flight-main .addFlightFormContainer .formRow .post-to-fb-wrapper div.left {
            float: left
        }

    .add-flight-main .addFlightFormContainer .formRow .post-to-twitter-check {
        float: left
    }
}

@media (min-width: 768px) {
    .grid .grid-item.c-1of1 {
        width: 100%
    }

    .grid .grid-item.c-1of2 {
        width: 50%
    }

    .grid .grid-item.c-1of3 {
        width: 33.33333%
    }

    .grid .grid-item.c-1of4 {
        width: 25%
    }

    .grid .grid-item.c-1of5 {
        width: 20%
    }

    .grid .grid-item.c-3of4 {
        width: 75%
    }

    article.border-right {
        border-right: 1px solid #e4e4e4;
        padding: 0 50px 20px 0
    }

    .container {
        padding: 0 40px
    }

    .page-nav {
        margin: 40px 0 0 0;
        border-bottom: none;
        padding-bottom: 0px
    }

        .page-nav li {
            padding: .6em 1em;
            float: none;
            border-left: 3px solid #fff;
            border-bottom: none
        }

            .page-nav li.active {
                border-color: #d8433b
            }

    .profile-summary .summary-card-container {
        padding: 0 2%;
        overflow: visible
    }

    .profile-summary .summary-card {
        width: 22%;
        padding: 30px 0;
        font-size: .9em;
        border-bottom: none
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .profile-summary .summary-card {
        font-size: .85em
    }
}

@media (min-width: 768px) {
    .profile-summary .summary-card:nth-child(1) {
        width: 18%
    }

    .profile-summary .summary-card:nth-child(4) {
        width: 21%
    }

    .profile-summary .summary-card h2 {
        font-size: 1.7em
    }

    .profile-pies {
        padding: 0 0 20px 8%
    }

    .flight-list .flight-airline, .flight-list .flight-aircraft, .flight-list .flight-reg {
        display: table-cell
    }

    .add-flight-main .addFlightProgressContainer .addFlightProgress .stepText {
        display: inline
    }

    .add-flight-main .addFlightProgressContainer .addFlightProgress li {
        text-align: left
    }

        .add-flight-main .addFlightProgressContainer .addFlightProgress li .stepContainer {
            float: left
        }

            .add-flight-main .addFlightProgressContainer .addFlightProgress li .stepContainer:first-child {
                margin-left: 10px
            }

    .add-flight-main .addFlightProgressContainer .stepMarker {
        display: block;
        margin-left: 10px
    }

    .add-flight-main .addFlightFormContainer .step {
        padding-top: 60px
    }

        .add-flight-main .addFlightFormContainer .step .formRow .left {
            float: left
        }

    .add-flight-main .addFlightFormContainer .reviewBox {
        margin: 0 0 15px 0
    }

        .add-flight-main .addFlightFormContainer .reviewBox.left {
            float: left
        }

        .add-flight-main .addFlightFormContainer .reviewBox.right {
            float: right
        }

    .add-flight-main input.wide {
        width: 140px
    }

    .add-flight-main .modal .reviewOverlay .modalBox .content .rightColumn {
        width: auto
    }

    .add-flight-main .modal .reviewOverlay .modalBox .subRatingRow .subRatingName {
        float: left;
        padding: 8px 0
    }

    .add-flight-main .modal .reviewOverlay .modalBox .subRatingRow .subRatingRate {
        float: right
    }

    .container.review-container {
        width: 700px;
        padding: initial
    }

    .footer .logo {
        float: left
    }

    .footer .footer-nav-container {
        width: 52%
    }

        .footer .footer-nav-container .footer-nav {
            width: 29%
        }
}

@media (min-width: 768px) and (min-width: 896px) {
    .add-flight-main input.wide {
        width: 195px
    }
}

@media (min-width: 768px) and (min-width: 950px) {
    .profile-pies {
        padding: 0 0 20px 3%
    }

        .profile-pies .pie-card figure .pie-chart {
            float: left
        }

        .profile-pies .pie-card figure figcaption {
            float: left;
            padding-top: 0
        }

        .profile-pies .pie-card.seat figcaption {
            padding-top: 18px
        }

        .profile-pies .pie-card.reason figcaption {
            padding-top: 10px
        }
}

@media (min-width: 768px) {
    .landing-intro {
        text-align: left
    }

        .landing-intro .landing-intro-text {
            width: 30%;
            float: left
        }
}

@media (min-width: 768px) and (min-width: 950px) {
    .landing-intro .landing-intro-text {
        padding-top: 40px
    }
}

@media (min-width: 768px) {
    .landing-intro .landing-intro-text .sign-up-button {
        text-align: center;
        padding: 0 70px
    }

    .landing-intro .landing-intro-text .sign-in-button {
        text-align: center
    }

    .landing-intro .landing-intro-browser {
        width: 65%;
        float: right;
        padding-top: 20px
    }
}

@media (min-width: 768px) and (min-width: 860px) {
    .landing-intro .landing-intro-browser {
        padding-top: 0
    }
}

@media (min-width: 768px) {
    .landing-features .feature-list > li {
        width: 25%;
        margin: 0;
        font-size: .9em
    }

        .landing-features .feature-list > li:nth-child(3) {
            clear: none
        }

        .landing-features .feature-list > li h3 {
            padding: 20px 20px
        }
}

@media (min-width: 1024px) {
    .grid .grid-item.d-1of1 {
        width: 100%
    }

    .grid .grid-item.d-1of2 {
        width: 50%
    }

    .grid .grid-item.d-1of3 {
        width: 33.33333%
    }

    .grid .grid-item.d-1of4 {
        width: 25%
    }

    .grid .grid-item.d-1of5 {
        width: 20%
    }

    .grid .grid-item.d-3of4 {
        width: 75%
    }

    .container {
        padding: 0 70px
    }

    .top-card.years {
        height: 360px
    }

    .profile-summary .summary-card {
        width: 22%;
        padding: 22px 0 0 0;
        font-size: 1em
    }
}

@media (min-width: 1024px) and (max-width: 1150px) {
    .profile-summary .summary-card {
        padding: 24px 0 0 0;
        font-size: .9em
    }
}

@media (min-width: 1024px) {
    .profile-summary .summary-card h2 {
        font-size: 2.25em
    }

    .profile-summary .summary-card:nth-child(1) {
        width: 19%
    }

    .profile-summary .summary-card:nth-child(4) {
        width: 21%
    }

    .profile-pies {
        padding: 0 0 20px 0
    }

        .profile-pies .pie-card {
            width: 22%;
            padding-left: 3%
        }

    .flight-list .flight-seat, .flight-list .flight-note, .flight-list .flight-icons {
        display: table-cell
    }

    .add-flight-main input.wide {
        width: 240px
    }

    .add-flight-main .addFlightFormContainer .formRow.seatRadios {
        float: left
    }

    .add-flight-main .addFlightFormContainer .formRow.seatNumber {
        float: left;
        margin: 0 0 20px 25px
    }

    .landing-intro .landing-intro-text {
        width: 28%;
        padding-top: 60px
    }

    .landing-intro .landing-intro-browser {
        width: auto
    }
}

@media (min-width: 1024px) and (min-width: 1100px) {
    .landing-intro .landing-intro-text {
        width: 35%;
        font-size: inherit
    }

        .landing-intro .landing-intro-text .sign-up-button {
            float: left;
            text-align: left
        }

        .landing-intro .landing-intro-text .sign-in-button {
            float: left;
            text-align: left;
            margin-left: 20px
        }
}

@media (min-width: 1024px) and (min-width: 1180px) {
    .landing-intro .landing-intro-text {
        width: 41%;
        padding-top: 80px
    }
}

@media (min-width: 1024px) {
    .landing-features .feature-list > li {
        width: 25%;
        margin: 0;
        font-size: 1em
    }

        .landing-features .feature-list > li .fa {
            margin-bottom: 40px
        }

        .landing-features .feature-list > li h3 {
            padding: 20px 40px
        }

    .landing-leaderboard .leaderboard-list > li {
        width: 33%;
        margin-bottom: 0
    }
}

@media (min-width: 1340px) and (min-width: 1500px) {
    .grid .grid-item.e-1of1 {
        width: 100%
    }

    .grid .grid-item.e-1of2 {
        width: 50%
    }

    .grid .grid-item.e-1of3 {
        width: 33.33333%
    }

    .grid .grid-item.e-1of4 {
        width: 25%
    }

    .grid .grid-item.e-1of5 {
        width: 20%
    }

    .grid .grid-item.e-3of4 {
        width: 75%
    }
}

@media (min-width: 1340px) {
    .container {
        padding: 0 120px;
        max-width: 1200px
    }

    .profile-main .container {
        max-width: 1500px
    }
}

@media (min-width: 1340px) and (min-height: 900px) {
    .profile-map {
        height: 700px
    }
}

@media (min-width: 1340px) {

    .profile-summary .summary-card {
        width: 22%;
        border-bottom: none;
        padding: 22px 0 0 0
    }

        .profile-summary .summary-card:nth-child(1) {
            width: 19%
        }

    .add-flight-main .addFlightProgressContainer .addFlightProgress li .stepContainer:first-child {
        margin-left: 0
    }

    .add-flight-main .addFlightProgressContainer .stepMarker {
        margin-left: 0
    }

    .add-flight-main input.wide {
        width: 260px
    }
}