@charset "utf-8";
/*------------------------------------------------------------------
[Master Stylesheet]
-------------------------------------------------------------------*/

@import "font-awesome-4.5.0.min.css";

/* ---------------------------------------------------- */

/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 200;
    src: local('Titillium Web ExtraLight'), local('TitilliumWeb-ExtraLight'), url(../fonts/titillium_web/TitilliumWeb-ExtraLight.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 200;
    src: local('Titillium Web ExtraLight'), local('TitilliumWeb-ExtraLight'), url(../fonts/titillium_web/TitilliumWeb-ExtraLight.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: local('Titillium Web Light'), local('TitilliumWeb-Light'), url(../fonts/titillium_web/TitilliumWeb-Light.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 300;
    src: local('Titillium Web Light'), local('TitilliumWeb-Light'), url(../fonts/titillium_web/TitilliumWeb-Light.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(../fonts/titillium_web/TitilliumWeb-Regular.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 400;
    src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(../fonts/titillium_web/TitilliumWeb-Regular.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'), url(../fonts/titillium_web/TitilliumWeb-SemiBold.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 600;
    src: local('Titillium Web SemiBold'), local('TitilliumWeb-SemiBold'), url(../fonts/titillium_web/TitilliumWeb-SemiBold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url(../fonts/titillium_web/TitilliumWeb-Bold.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 700;
    src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url(../fonts/titillium_web/TitilliumWeb-Bold.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 900;
    src: local('Titillium Web Black'), local('TitilliumWeb-Black'), url(../fonts/titillium_web/TitilliumWeb-Black.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Titillium Web';
    font-style: normal;
    font-weight: 900;
    src: local('Titillium Web Black'), local('TitilliumWeb-Black'), url(../fonts/titillium_web/TitilliumWeb-Black.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------- */

@font-face {
    font-family: 'icomoon';
    src:    url('../fonts/icomoon.eot?8umsxt');
    src:    url('../fonts/icomoon.eot?8umsxt#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?8umsxt') format('truetype'),
    url('../fonts/icomoon.woff?8umsxt') format('woff'),
    url('../fonts/icomoon.svg?8umsxt#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
    url(../fonts/MaterialIcons-Regular.woff) format('woff'),
    url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}

/*------------------------------------------------------------------
[Table of contents]

1. Common styles
2. Page loader / .page-loader
3. Typography
4. Buttons
5. Forms fields
6. Home sections / .home-section
    6.1. Home content
    6.2. Scroll down icon
    6.3. Headings styles
7. Compact bar / .nav-bar-compact
8. Classic menu bar / #topbar
9. Sections styles / .page-section, .small-section, .split-section
10. Alternative services / .alt-service-grid
11. Team / .team-grid
12. Features
13. Benefits (Process)
14. Counters
15. Portfolio / #portfolio
    15.1. Works filter
    15.2. Works grid
    15.3. Works full view
16. Banner section
17. Testimonial
    18.1. Logotypes
18. Post previews (news section)
19. Newsletter
20. Contact section
    20.1. Contact form
21. Bottom menu / .bot-menu
22. Google maps  /.google-map
23. Footer / .footer
24. Blog
    24.1. Pagination
    24.2. Comments
    24.3. Sidebar
25. Shop
26. Pricing
27. Shortcodes
    27.1. Owl Carousel
    27.2. Tabs
    27.3. Tabs minimal
    27.4. Alert messages
    27.5. Accordion
    27.6. Toggle
    27.7. Progress bars
    27.8. Font icons examples
    27.9. Intro page
28. Special demos
29. Bootstrap multicolumn grid


/*------------------------------------------------------------------
# [Color codes]

# Black (active elements, links, text) #111
# Gray (text) #777
# Dark #111
# Dark Lighter #252525
# Gray BG #f4f4f4
# Gray BG Lighter #f8f8f8
# Mid grey #5f5f5f
# Borders #e9e9e9

# */


/*------------------------------------------------------------------
[Typography]

Body:               14px/1.6 "Open Sans", arial, sans-serif;
Headers:            Dosis, arial, sans-serif;
Serif:              "Times New Roman", Times, serif;
Section Title:      35px/1.3 "Open Sans", arial, sans-serif;
Section Heading:    24px/1.3 "Open Sans", arial, sans-serif;
Section Text:       15px/1.7 "Open Sans", arial, sans-serif;

-------------------------------------------------------------------*/


/* ==============================
Common styles
============================== */

.align-center{ text-align:center !important; }
.align-left{ text-align:left !important;}
.align-justify{ text-align:justify !important;}
.align-right{ text-align:right !important; }
.left{float:left !important;}
.right{float:right !important;}
.relative{position:relative;}
.hidden{display:none;}
.inline-block{display:inline-block;}

.image-fullwidth img{
    width: 100%;
}

::-moz-selection{ color: #fff; background:#000; }
::-webkit-selection{ color: #fff;	background:#000; }
::selection{ color: #fff;	background:#000; }

.animate, .animate *{
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.no-animate, .no-animate *{
    -webkit-transition: 0 none !important;
    -moz-transition: 0 none !important;
    -ms-transition: 0 none !important;
    -o-transition: 0 none !important;
    transition:0 none !important;
}

.clearlist, .clearlist li {
    list-style: none;
    padding: 0;
    margin: 0;
    background: none;
}

html{
    /*overflow: hidden;*/
}
html, body{
    height: 100%;
    -webkit-font-smoothing: antialiased;
}
#fullscreen
{
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: absolute;
}

#helper
{
    width: 1px;
    height: 50%;
    margin-bottom: -400px;
    float: left;

    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}
#frame {
    margin: 0 auto;
    clear: left;
    position: relative;
    width: 1080px;
    height: 800px;
    box-shadow: 0 0 0 1px #484848, 0 5px 15px #000;
    box-shadow: 0 0 0 1px #585858, 0 0 0 2px #111, 0 5px 15px 3px rgba(0, 0, 0, 0.6);
}
#topbar .menu .num {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    margin: 2px;
    height: 16px;
    width: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    box-shadow: 0 0 0 2px #232323;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    background: #d10000;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#topbar .menu .num[data-admin="0"] {
    box-shadow: 0 0 0 1px #54c553 inset;
    background: #2d9c4a;
}
#topbar .menu .num[data-admin="0"]:before {
    content: 'check';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
#info a {
    display: block;
}
#info a[data-type="show-info"]:before {
    content: 'info_outline';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    display: block;
    font-size: 20px;
}
#info {
    line-height: 22px;
    color: #999;
    font-size: 12px;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 65px;
    right: 10px;
    background: #292929;
    box-shadow: 0 0 0 1px #4a4a4a, 0 0 4px 1px rgba(0, 0, 0, 0.46);
    z-index: 1;
    opacity: 0;
    min-width: 170px;
    transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    padding: 5px 0;
}
#info:after {
    content: '';
    position: absolute;
    top: -8px;
    right: 12px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 8px;
    border-color: transparent transparent #4a4a4a transparent;
}
#info.extend {
    visibility: visible;
    opacity: 1;
    top: 72px;
}
#info a {
    text-align: left;
    display: block;
    margin: 0;
    line-height: 32px;
    padding: 0 15px;
    color: #bbbbbb;
    text-decoration: none;
    font-weight: 500;
}
#info a span {
    float: right;
    display: block;
    margin: 9px 0;
    height: 14px;
    width: 14px;
    line-height: 14px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    background: #c52828;
    text-decoration: none;
}
#info a span[data-admin="0"] {
    display: none;
}
#info .divider {
    margin: 5px 15px;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}
#info a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
#info [data-icon]:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    float: left;
    width: 12px;
    margin-right: 8px;
    text-align: center;
}
#info [data-icon="board"]:before { content: 'forum'; }
#info [data-icon="imprint"]:before { content: 'info_outline'; }
#info [data-icon="credits"]:before { content: 'photo'; }
#info [data-icon="gtc"]:before { content: '§'; font-family: 'Titillium Web', sans-serif; }
#info [data-icon="privacy"]:before { content: '§'; font-family: 'Titillium Web', sans-serif; }
#info [data-icon="version"]:before { content: 'new_releases'; }
#info [data-icon="logout"]:before { content: 'power_settings_new'; }
#info [data-icon="admin"]:before { content: '\f1cd'; font-family: 'FontAwesome'; }
#info [data-icon="tutorial"]:before { content: 'school'; }
#info [data-icon="activation"]:before { content: 'account_box'; }
#version {
    margin: 0 5px;
}
.page{
    /* overflow: hidden; */
    margin: 0;
    position: relative;
    width: 1080px;
    height: 800px;
    background: #1F1F1F;
    background: #333333;
}

iframe{
    border: none;
}
a, b, div, ul, li{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    -moz-outline-: none;
}
a:focus,
a:active{
    -moz-outline: none;
    outline: none;
    color: #fff;
    text-decoration: none;
}
img:not([draggable]), embed, object, video{
    max-width: 100%;
    /* height: auto; */
}

/* ==============================
Logout
============================== */

#logout {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    bottom: 10px;
    background: #333333;
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#logout.show {
    opacity: 1;
}

/* ==============================
Page loader
============================== */

.page-loader{
    display:block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #141414;
    z-index: 100000;
    opacity: 1;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
}
.page-loader.hide {
    opacity: 0;
}

.loader{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 1px solid rgba(255,255,255, 0.15);
    border-right: 1px solid rgba(255,255,255, 0.15);
    border-bottom: 1px solid rgba(255,255,255, 0.15);
    border-left: 1px solid rgba(255,255,255, 0.75);

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-animation: spinner 700ms infinite linear;
    -moz-animation: spinner 700ms infinite linear;
    -ms-animation: spinner 700ms infinite linear;
    -o-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;

    z-index: 100001;
}
.page-loader .logo{
    background: url(../images/logo-loader.png) center 10px no-repeat;
    background-size: 29px;
    opacity: .8;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 100001;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* ==============================
Typography
============================== */


@-webkit-keyframes blink {
    0%      { opacity: 1; }
    50%     { opacity: .5; }
    100%    { opacity: 1; }
}

@-moz-keyframes blink {
    0%      { opacity: 1; }
    50%     { opacity: .5; }
    100%    { opacity: 1; }
}

@-o-keyframes blink {
    0%      { opacity: 1; }
    50%     { opacity: .5; }
    100%    { opacity: 1; }
}

@keyframes blink {
    0%      { opacity: 1; }
    50%     { opacity: .5; }
    100%    { opacity: 1; }
}



/* ==============================
Typography
============================== */

body{
    color: #111;
    font-size: 14px;
    font-family: 'Titillium Web', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-color: #141414;
    background-image: url(../images/asphalt3.jpg);
}

a{
    color: #eee;
    text-decoration: none;
    cursor: pointer;
    position: relative;
}
a:hover{
    color: #fff;
    text-decoration: none;
}

a.underline {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
    /*padding: 3px 7px;*/
}
a.underline:hover,
a.underline:focus {
    text-decoration: none;
}
a.underline:focus {
    color: #fff;
}
a.underline:hover {
    color: #5affd3;
}

h1,h2,h3,h4,h5,h6{
    margin-bottom: 1.3em;
    line-height: 1.4;
    font-weight: 400;
    margin-top: 0;
}
h1{
    font-size: 32px;
}
h2{
    font-size: 28px;
}
h6{
    font-weight: 700;
}
p{
    margin: 0 0 2em 0;
}
ul, ol{
    margin: 0 0 1.5em 0;
}
blockquote{
    margin: 3em 0 3em 0;
    padding: 0;
    border: none;
    background: none;
    font-style: normal;
    line-height: 1.7;
    color: #777;
}
blockquote p{
    margin-bottom: 1em;
    font-size: 24px;
    font-weight: 300;
    font-style: normal;
    line-height: 1.6;
}
blockquote footer{
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
}
dl dt{
    margin-bottom: 5px;
}
dl dd{
    margin-bottom: 15px;
}
pre{
    background-color: #f9f9f9;
    border-color: #ddd;

}
hr{
    height: 10px;
    border: none;
    background-color: rgba(255, 255, 255, 0.08);
}
hr.small-line{
    height: 1px;
    margin: 5px 0;
    background-color: rgba(0, 0, 0, 0.1);
}
hr.white{
    border-color: rgba(255,255,255, .35);
    background: rgba(255,255,255, .35);
}
hr.black{
    border-color:rgba(0,0,0, .85);
    background: rgba(0,0,0, .85);
}
.uppercase{
    text-transform: uppercase;
    letter-spacing: 1px;
}
.font-alt{
    font-family: 'Roboto', arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.font-alt2{
    font-family: 'Montserrat', arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.serif{
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: normal;
}
.normal{
    font-weight: normal;
}
.strong{
    font-weight: 700 !important;
}
.lead{
    margin: 20px 0 20px 0;
    font-size: 120%;
    line-height: 1.6;
}
.lead textarea{
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 120px;
    background: #FAFAFA;
}
.text{
    font-size: 16px;
    font-weight: 300;
    color: #5f5f5f;
    line-height: 1.8;
}
.text h1,
.text h2,
.text h3,
.text h4,
.text h5,
.text h6{
    color: #111;
}
.float-right{
    float: right;
}
.dropcap{
    float: left;
    font-size: 3em;
    line-height: 1;
    padding: 2px 8px 2px 0;
}

.wide-heading{
    display: block;
    margin-bottom: 10px;
    font-size: 48px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-align: center;
    text-transform: uppercase;
    opacity: .9;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.sub-heading{
    font-size: 16px;
    font-style: italic;
    text-align: center;
    line-height: 1.3;
    color: rgba(255,255,255, .75);
}

.no-padding {
    padding: 0 !important;
}

/* ==============================
Tooltips
============================== */

#tooltip {
    position:absolute;
    z-index:9999;
    letter-spacing: 0;
    width:auto;
    background: #2b2b2b;
    padding: 7px 10px;
    border: 1px solid #767676;
    color: #eee;
    box-shadow: 1px 2px 2px rgba(0,0,0,0.1);
    font-weight: 500;
    font-size: 12px;
    line-height:1.4;
}
.has-tooltip {
    cursor: pointer;
}

/* ==============================
Buttons
============================== */

.btn-mod,
a.btn-mod,
.btn-mod:focus,
a.btn-mod:focus {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 15px 8px 16px;
    text-align: center;
    color: #fff;
    background: #5F5F5F;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 1px 3px rgba(0, 0, 0, 0.3);
    /* box-shadow: none; */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    overflow: hidden;
    position: relative;
    display: inline-block;
    cursor: pointer;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;

    outline: none;
}
.btn-mod:hover,
a.btn-mod:hover,
.btn-mod.btn-progress.state-loading,
.btn-mod.btn-progress.state-error,
.btn-mod.btn-progress.state-success,
a.btn-mod.btn-progress.state-loading,
a.btn-mod.btn-progress.state-error,
a.btn-mod.btn-progress.state-success
{
    color: #fff;
    background: #27AB7B;
    background: #03b0f2;
    background: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    outline: none;
    cursor: pointer;
}
.btn-mod.btn-progress.state-error,
a.btn-mod.btn-progress.state-error {
    background: rgb(188, 20, 20);
}
.btn-mod.btn-progress.state-success,
a.btn-mod.btn-progress.state-success {
    background: rgb(38, 138, 71);
}
.btn-mod:active,
a.btn-mod:active {
    background: #5a5a5a;
    transform: scale(.95);
}
.btn-mod.btn-large:active,
a.btn-mod.btn-large:active{
    transform: scale(.98);
}
.btn-mod.btn-progress.state-loading:active,
.btn-mod.btn-progress.state-error:active,
.btn-mod.btn-progress.state-success:active,
a.btn-mod.btn-progress.state-loading:active,
a.btn-mod.btn-progress.state-error:active,
a.btn-mod.btn-progress.state-success:active {
    background: #464646;
    transform: scale(1);
}
.btn-mod:active{
    cursor: pointer !important;
    outline: none !important;
}
.btn-mod.disabled,
a.btn-mod.disabled,
.btn-mod.disabled:active,
.btn-mod.disabled:hover,
.btn-mod.disabled:focus,
a.btn-mod.disabled:hover,
a.btn-mod.disabled:focus{
    opacity: .4;
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-mod.btn-circle{
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}
.btn-mod.btn-round{
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.btn-full{
    width: 100%;
}
.btn .add:before,
.btn .submit:before,
.btn .cancel:before {
    text-transform: none;
    display: block;
    color: #fff;
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: "check"; /* ok */
    font-size: 14px;
    line-height: 17px;
    width: 30px;
}
.btn .add:before {
    content: "add";
}
.btn .cancel:before {
    content: "close";
}
.btn-progress .progress-inner {
    position: absolute;
    left: 0;
    background: rgba(255, 255, 255, 0.1);
    bottom: 0;
    width: 0;
    opacity: 1;
    height: 100%;
    -webkit-transition: width .6s, opacity .6s;
    transition: width .6s, opacity .6s;
}

.btn-progress.state-success .content:before,
.btn-progress.state-error .content:after {
    opacity: 1;
}

.btn-progress .content .notransition  {
    -webkit-transition: none !important;
    transition: none !important;
}
.btn.bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* with borders */

.btn-mod-3d {
    background: #3C3C3C;
    border: 1px solid #4C4C4C;
    color: #999;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.btn-mod-3d:hover {
    border: 1px solid #808080;
    text-decoration: none;
    color: #FFFFFF;
    background: #5C5C5C;
    cursor: pointer;
}
.btn-mod-3d.active,
.btn-mod-3d.active:hover {
    border: 1px solid #9A9A9A;
    background: #717171;
    color: #fff;
}
.btn-mod-3d.inactive,
.btn-mod-3d.inactive:hover {
    border: 1px solid #353535;
    background: #2B2B2B;
    color: #737373;
}

/* - */

.btn-large table tr td {
    width: 50%;
    text-align: center;
}
.btn-large table tr td:first-of-type {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.btn-large table tr:first-of-type td {
    padding-bottom: 2px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 400;
}
.btn-large table tr td.send {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    padding: 0;
}
.btn-large .stars,
.btn-large .money {
    font-weight: 700;
    font-size: 15px;
}
.btn-large table tr:last-of-type td {
    font-weight: 700;
    font-size: 15px;
}



/* ==============================
Select
============================== */

/* fallback */
select.select-mod {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 12px !important;
    font-weight: 200 !important;
    color: #fff;
    border: none;
    padding: 0 35px 0 10px !important;;
    height: 33px;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.05) !important;
    background-image: none;
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    letter-spacing: 1px;
    display: block !important;
    width: 100%;
}

div.select-mod {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 12px;
    color: #fff;
    padding: 0;
    height: 33px;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.05);
    background-image: none;
    background-position: right;
    background-repeat: no-repeat;
    position: relative;
    display: block;
}
div.select-mod select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    border: none;
    padding: 0 35px 0 10px;
    height: 100%;
    width: 100%;
    box-shadow: none;
    background: transparent;
    min-width: 100px;
    letter-spacing: 0;
    cursor: pointer;
}
div.select-mod select option {
    background-color: #3C3C3C;
    letter-spacing: 1px;
    cursor: pointer;
}
div.select-mod:after {
    font-family: "Ionicons";
    content: "\f35f";
    position: absolute;
    color: #909090;
    font-size: 18px;
    line-height: 0px;
    top: 16px;
    right: 10px;
}
div.select-mod select:focus {
    outline: none !important;
}



/* ==============================
Table
============================== */

#ajax_table table tbody td {
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    -ms-transition: opacity 0.2s;
    transition: opacity 0.2s;
}
#ajax_table.load table tbody td {
    opacity: 0;
}

/* - - - */

table.table-mod {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 13px;
    /* background: #373737; */
}
.table-mod tr td,
.table-mod tr th {
    vertical-align: middle;
    font-weight: 400;
    text-align: left;
}
.table-mod tr th.sortable {
    cursor: pointer;
}
/*
.table-mod thead th {
    box-shadow: 0 1px 0 #848484 inset, 0 -1px 0 #848484 inset;
}
.table-mod thead th:first-of-type {
    box-shadow: 1px 0 0 #848484 inset, 0 1px 0 #848484 inset, 0 -1px 0 #848484 inset;
}
.table-mod thead th:last-of-type {
    box-shadow: -1px 0 0 #848484 inset, 0 1px 0 #848484 inset, 0 -1px 0 #848484 inset;
}
*/
.table-mod thead th {
    padding: 0 10px;
    background-color: rgba(255,255,255,0.3);
    background-color: #4C4C4C;
    color: #eee;
    font-weight: 400;
}
.table-mod thead tr {
    height: 35px;
    border-top: 1px solid #3c3c3c;
}
.table-mod tbody td {
    padding: 0 10px;
}
.table-mod tbody tr {
    height: 35px;
    font-size: .9em;
    background-color: rgba(0, 0, 0, 0.05);
}
.table-mod.wide tbody tr {
    height: 45px;
}
.table-mod.wide2 tbody tr {
    height: 47px;
}
.table-mod tbody tr.summary {
    height: 37px;
}
.table-mod tbody tr.summary td {
    padding: 0 10px;
    background-color: #4C4C4C;
    color: #eee;
    font-weight: 400;
}
.table-mod tbody tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0);
}
.table-mod tbody tr.clickable:hover {
    cursor: pointer;
}
.table-mod tbody tr.active {
    background-color: rgba(0, 0, 0, 0.18);
}
.table-mod tbody tr.active td {
    /*box-shadow: 0 1px 0 #5F5F5F inset, 0 -1px 0 #5F5F5F inset;*/
}
.table-mod tr td.center,
.table-mod tr th.center {
    text-align: center !important;
    float: none !important;
}
.table-mod tr td.right,
.table-mod tr th.right {
    text-align: right !important;
    float: none !important;
}
.table-mod th.sorted {
    background-color: #545454; /*rgba(255, 255, 255, 0.15)*/
    position: relative;
    color: #fff;
}
.table-mod th.sorted.desc:after,
.table-mod th.sorted.asc:after {
    content: "\f3d0";
    position: absolute;
    color: #fff;
    font-family: "Ionicons";
    font-size: 10px;
    line-height: 35px;
    top: 1px;
    right: 5px;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    /*-webkit-transform: translateX(-50%);
    transform: translateX(-50%);*/
    top: -10px;
    right: 5px;
}
.table-mod th.sorted.asc:after {
    content: "\f3d8";
}
table.full-width {
    width: 100%;
}
table.form tr {
    height: 40px;
}
.table-mod tr td span.time {
    color: #8C8C8C;
    margin-left: 5px;
}
.table-mod tr td span.model {
    /*color: #BDBDBD;*/
    font-style: italic;
    margin-left: 0;
    font-weight: 700;
}
.table-mod tr td span.carclass {
    color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 20px;
    font-weight: 800;
    font-size: 12px;
}
.carclass.class-a { background: #CA4343; }
.carclass.class-b { background: #CA7043; }
.carclass.class-c { background: #CAA143; }
.carclass.class-d { background: #AECA43; }
.carclass.class-e { background: #69CA43; }
.carclass.class-f { background: #43CAAC; }
.carclass.class-j { background: #4384CA; }
.carclass.class-m { background: #AA43CA; }
.carclass.class-s { background: #CA439F; }

table tr td span.carlvl {
    border-radius: 22px;
    line-height: 22px;
    font-weight: 600;
    font-size: 11px;
    width: 40px;
    text-align: center;
    display: inline-block;
    background: #4E4E4E;
    color: #DEDEDE;
    margin: 2px 0;
}

/* ==============================
Forms fields
============================== */

.form input[type="text"],
.form input[type="email"],
.form input[type="number"],
.form input[type="url"],
.form input[type="search"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="date"],
.form input[type="color"],
.form select{
    display: inline-block;
    height: 33px;
    vertical-align: middle;
    font-size: 13px;
    font-weight: 400;
    color: #fff;
    background: #3C3C3C;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    padding: 7px 10px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.form input[readonly]:not(.readonly) {
    background: rgba(255, 255, 255, 0.05);
}
.form select{
    font-size: 14px;
}
.form select[multiple]{
    height: auto;
}
.form input[type="text"]:hover,
.form input[type="email"]:hover,
.form input[type="number"]:hover,
.form input[type="url"]:hover,
.form input[type="search"]:hover,
.form input[type="tel"]:hover,
.form input[type="password"]:hover,
.form input[type="date"]:hover,
.form input[type="color"]:hover,
.form select:hover{
    /*border-color: rgba(0,0,0, .2);*/
}
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="number"]:focus,
.form input[type="url"]:focus,
.form input[type="search"]:focus,
.form input[type="tel"]:focus,
.form input[type="password"]:focus,
.form input[type="date"]:focus,
.form input[type="color"]:focus,
.form select:focus{
    color: #fff;
    outline: none;
}
.form textarea{
    font-size: 14px;
    font-weight: 400;
    color: #222;
    border: none;
    background: #f4f4f4;
    outline: none;
    resize: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.form textarea:hover{
    /*border-color: rgba(0,0,0, .2);*/
}
.form textarea:focus{
    color: #111;
    /*border-color: rgba(0,0,0, .7);
    -webkit-box-shadow: 0 0 3px rgba(21,21,21, .3);
    -moz-box-shadow: 0 0 3px rgba(21,21,21, .3);
    box-shadow: 0 0 3px rgba(21,21,21, .3);*/
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.form .form-group{
    margin-bottom: 10px;
}

.form input.error{
    border-color: #e41919;
}
.form div.error{
    margin-top: 10px;
}
.form div.error:first-of-type {
    margin-top: 30px;
}
.form div.success{
    margin-top: 20px;
    padding: 13px 20px;
    text-align: center;
    background: rgba(50,178,95, .75);
    color: #fff;
}

.form-tip{
    font-size: 12px;
    color: #aaa;
}
.form-tip .fa{
    font-size: 12px;
    margin-right: 2px;
}



/* ==============================
Input
============================== */

form table.full-width td input {
    width: 100%;
}



/* ==============================
Description, Warning
============================== */

.descr,
.warn,
.error {
    background: rgba(255,255,255,0.1);
    border: 1px solid #666;
    color: #fff;
    padding: 6px 10px 6px 35px;
    position: relative;
    line-height: 21px;
    font-weight: 300;
    font-size: 13px;
    font-style: italic;
}
.error {
    border: 1px solid #D83333;
    background: #A71D1D;
}
.descr:after,
.warn:after,
.error:after {
    font-family: "Ionicons";
    content: "\f44d";
    position: absolute;
    color: #E2E2E2;
    font-size: 16px;
    line-height: 33px;
    top: 1px;
    left: 0;
    width: 35px;
    text-align: center;
    font-style: normal;
}
.descr.margin {
    margin-bottom: 30px;
}
.warn.margin {
    margin-top: 30px;
}
.warn {
}
.warn:after {
    content: "\f3bc";
    color: #E0C63F;
}
.error:after {
    content: "\f12a";
    color: #fff;
}
.warn.margin {
    margin-bottom: 10px;
}

.fadeInOut {
    display: none;
}



/* ==============================
Icons
============================== */

[data-skill-icon]:before {
    font-family: 'icomoon';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none !important;
}
[data-skill-icon="gasstation"]:before {
    content: 'local_gas_station';
    font-family: 'Material Icons';
    top: 2px;
    position: relative;
}
[data-skill-icon="health"]:before { content: "\f492"; font-family: 'Ionicons'; }

[data-skill-icon="acceleration"]:before { content: "\e90e"; }
[data-skill-icon="topspeed"]:before { content: "\e900"; }
[data-skill-icon="handling"]:before { content: "\e908"; }
[data-skill-icon="braking"]:before { content: "\e915"; }

[data-skill-icon="offroad"]:before { content: "\e919"; }
[data-skill-icon="weather"]:before { content: "\e90f"; }
[data-skill-icon="shifting"]:before { content: "\e91a"; }
[data-skill-icon="dodging"]:before { content: "\e912"; }
[data-skill-icon="stamina"]:before { content: "\e90d"; }
[data-skill-icon="talent"]:before { content: "\e910"; }
[data-skill-icon="insight"]:before { content: "\e91e"; }
[data-skill-icon="efficiency"]:before { content: "\e923"; }
[data-skill-icon="skill"]:before {
    content: 'equalizer';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none !important;
}

/* - - - - - - */

[data-race-icon]:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none !important;
}
[data-race-icon="knowledge"]:before { content: "bookmark"; }
[data-race-icon="countdown"]:before { content: "access_time"; }
[data-race-icon="weather"]:before { content: "cloud"; top: 2px; position: relative; }
[data-race-icon="traffic"]:before { content: "traffic"; top: 2px; position: relative; }
[data-race-icon="consumption"]:before { content: "\f25b"; font-family: 'Ionicons'; }
[data-race-icon="wear"]:before { content: "\f492"; font-family: 'Ionicons'; }
[data-race-icon="laps"]:before {
    content: "\e91c";
    font-family: 'icomoon';
    position: relative;
    top: 2px;
    line-height: 8px;
    text-transform: none !important;
}
[data-race-icon="laps"] {
    /* line-height: 10px; */
}
[data-race-icon="podium"]:before { content: "\e91d"; font-family: 'icomoon'; }
[data-race-icon="cost"]:before { content: "\f119"; font-family: 'Ionicons'; }
[data-race-icon="signup"]:before { content: "chevron_right"; }
[data-race-icon="info"]:before { content: "chevron_right"; }
[data-race-icon="difficulty"]:before { content: "star_half"; }
[data-race-icon="surface"]:before { content: "\e925"; font-family: 'icomoon'; }
[data-race-icon="cars"]:before { content: "drive_eta"; }
[data-race-icon="championship"]:before { content: '\f356'; font-family: 'Ionicons'; }

/* - - - - - - */

[data-weather-icon]:before {
    font-family: 'icomoon';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none !important;
}
[data-weather-icon="snow"]:before { content: "\e91f"; }
[data-weather-icon="rain"]:before { content: "\e920"; }
[data-weather-icon="fog"]:before { content: "\e921"; }
[data-weather-icon="sun"]:before { content: "\e922"; }

/* - - - - - - */

[data-carskill-icon]:before {
    font-family: 'icomoon';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none !important;
}
[data-carskill-icon="acceleration"]:before { content: "\e90e"; }
[data-carskill-icon="topspeed"]:before { content: "\e90d"; }
[data-carskill-icon="handling"]:before { content: "\e90f"; }
[data-carskill-icon="braking"]:before { content: "\e915"; }

/* - - - - - - */

[data-workshop-icon]:before {
    font-family: 'icomoon';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none !important;
}
[data-workshop-icon="exhaust"]:before { content: "\e904"; }
[data-workshop-icon="ecu"]:before { content: "\e903"; }
[data-workshop-icon="fuel_injection"]:before { content: "\e90c"; }
[data-workshop-icon="airsystem"]:before { content: "\e916"; }
[data-workshop-icon="gearbox"]:before { content: "\e913"; }
[data-workshop-icon="motorcore"]:before { content: "\e902"; }
[data-workshop-icon="tires"]:before { content: "\e901"; }
[data-workshop-icon="brakes"]:before { content: "\e915"; }
[data-workshop-icon="suspension"]:before { content: "\e917"; }
[data-workshop-icon="differential"]:before { content: "\e924"; }
[data-workshop-icon="weight_reduction"]:before { content: "\e907"; }

[data-workshop-icon="left"]:before { font-family: 'Material Icons'; content: "build"; }

/* - - - - - - */

[data-perk-icon]:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none !important;
}
[data-perk-icon="rims"]:before { content: 'store'; }
[data-perk-icon="paint"]:before { content: 'invert_colors'; }
[data-perk-icon="driver"]:before { content: 'group'; }
[data-perk-icon="cardealer_buy"]:before { content: 'drive_eta'; }
[data-perk-icon="cardealer_sell"]:before { content: 'monetization_on'; }
[data-perk-icon="gasstation"]:before { content: 'local_gas_station'; }
[data-perk-icon="tuning"]:before { content: "\e90a"; font-family: 'icomoon'; }
[data-perk-icon="repair"]:before { content: '\e909'; font-family: 'icomoon'; }
[data-perk-icon="cardealer"]:before { content: 'store'; }
[data-perk-icon="money"]:before { content: "\e91b"; font-family: 'icomoon'; font-size: 32px; }
[data-perk-icon="xp"]:before,
[data-perk-icon="rp"]:before,
[data-perk-icon="xp"]:after,
[data-perk-icon="rp"]:after {
    font-family: "FontAwesome";
    content: "\f111";
    color: #ECECEC;
    position: absolute;
    font-size: 29px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
[data-perk-icon="xp"]:after,
[data-perk-icon="rp"]:after {
    font-family: 'Titillium Web', sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #3C3C3C;
    padding-left: 1px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
[data-perk-icon="xp"]:after { content: 'XP'; }
[data-perk-icon="rp"]:after { content: 'RP'; }
[data-perk-icon="xp"],
[data-perk-icon="rp"] {
    position: relative;
}
.perk:hover [data-perk-icon="xp"]:after,
.perk.active [data-perk-icon="xp"]:after,
.perk:hover [data-perk-icon="rp"]:after,
.perk.active [data-perk-icon="rp"]:after {
    color: #5C5C5C;
}

/* LARGE
- - - - - - - - - - - - - - - - - - - - - */

[data-perk-icon].large:before { font-size: 32px; }
[data-perk-icon="cardealer"].large:before { font-size: 26px; }
[data-perk-icon="money"].large:before { font-size: 40px; }
[data-perk-icon="xp"].large:before,
[data-perk-icon="rp"].large:before { font-size: 37px; }
[data-perk-icon="xp"].large:after,
[data-perk-icon="rp"].large:after {
    font-size: 17px;
    line-height: 20px;
    height: 20px;
    padding-left: 2px;
}

/* LARGE
- - - - - - - - - - - - - - - - - - - - - */

[data-perk-icon].xlarge:before { font-size: 52px; }
[data-perk-icon="cardealer"].xlarge:before { font-size: 56px; }
[data-perk-icon="money"].xlarge:before,
[data-perk-icon="xp"].xlarge:before,
[data-perk-icon="rp"].xlarge:before { font-size: 57px; }
[data-perk-icon="money"].xlarge:after {
    font-size: 40px;
    line-height: 20px;
    height: 20px;
    padding-right: 3px;
}
[data-perk-icon="xp"].xlarge:after,
[data-perk-icon="rp"].xlarge:after {
    font-size: 28px;
    line-height: 20px;
    height: 20px;
    padding-left: 2px;
}

/* - - - - - - */

[data-perk-icon="acceleration"]:before { content: "\e90e"; font-family: 'icomoon'; }
[data-perk-icon="topspeed"]:before { content: "\e900"; font-family: 'icomoon'; }
[data-perk-icon="handling"]:before { content: "\e908"; font-family: 'icomoon'; }
[data-perk-icon="braking"]:before { content: "\e915"; font-family: 'icomoon'; }

/* ==============================
Border
============================== */

.border {
    border: 1px solid rgba(255, 255, 255, 0.14);
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35); */
    overflow: hidden;
}
.border2 {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 0 2px rgba(0, 0, 0, 0.12);
    /* background: rgba(255, 255, 255, 0.06); */
    /* box-shadow: 0 1px 0 rgba(255, 255, 255, 0.11); */
}
.border2 .heading {
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.06);
}

/* ==============================
Top bar
============================== */

#topbar{
    width: 100%;
    height: 61px !important;
    border-bottom: 1px solid #4e4e4e;
    position: absolute;
    top: 0;
    padding: 0;
    left: 0;
    text-align: left;
    background: #292929;
    /* box-shadow: 0 2px 15px rgba(0, 0, 0, 0.53), 0 -1px 0 #383838 inset; */
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.1);
    background-image: url(../images/carbon_2.jpg);
    z-index: 3;
    -webkit-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: height 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
#topbar .status,
#topbar .menu {
    height: 60px;
    background: rgba(255,255,255,0.1);
    background-image: url(../images/carbon_3.jpg);
    z-index: 1;
    width: 60px;
    font-size: 21px;
    line-height: 60px;
    text-align: center;
    text-decoration: none;
    color: #666;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#topbar .status {
    margin-right: 20px;
    /* box-shadow: 3px -7px 7px rgba(0, 0, 0, 0.12); */
    float: left;
    border-right: 1px solid #2F2F2F;
    position: relative;
    color: #eee;
}

/* race */

#topbar .status.race:after {
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'flag';
    position: relative;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#topbar .status.race[data-race-status='ongoing'],
#topbar .status.race[data-race-status='ongoing'] span.countdown {
    color: #EA0000;
    /*text-shadow: 0 0 10px #EA0000;*/
}
#topbar .status.race[data-race-status='upcoming']:after,
#topbar .status.race[data-race-status='ongoing']:after {
    top: -8px;
}
#topbar .status.race span.countdown {
    display: none;
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #ababab;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

#topbar .status.race:before {
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    position: absolute;
    top: 5px;
    right: 4px;
    line-height: 13px;
    font-size: 12px;
}
#topbar .status.race[data-race-status='upcoming'] span.countdown,
#topbar .status.race[data-race-status='ongoing'] span.countdown {
    display: block;
}
#topbar .status.race[data-race-status='ongoing'] span.countdown:after {
    content: 'LIVE';
}

/* logout */

#topbar .menu {
    /* box-shadow: -3px -7px 7px rgba(0, 0, 0, 0.12); */
    float: right;
    color: #eee;
    border-left: 1px solid #2F2F2F;
}
#topbar .menu:after {
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'menu';
}

.topbar-item,
.topbar-item-small {
    color: #A7A7A7;
    float: left;
    width: 259px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.51) inset, 0 16px 20px rgba(255, 255, 255, 0.02) inset;
    text-align: center;
    height: 38px;
    padding: 0;
    margin: 11px 7px 0;
    background: #1B1B1B;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    /*background-image: url(../images/carbon_3.jpg);*/
}
.topbar-item-small {
    width: 146px;
    border-radius: 50px 20px 20px 50px;
    border-radius: 50px;
}
.topbar-item-small.x-small {
    width: 95px;
    border-radius: 50px 20px 20px 50px;
    border-radius: 50px;
}
.topbar-item-small i,
.topbar-item-small a.material-icons {
    line-height: 38px;
    /* text-align: left; */
}
.topbar-item-small .c100 {
    top: -2px;
    left: -2px;
    transform: scale(.8);
}
.topbar-item-small .c100 i {
    font-size: 17px;
}
.topbar-item-small a {
    text-decoration: none;
    color: #5A5A5A;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.topbar-item-small a.add-stars {
    background: #5A5A5A;
    color: #292929;
    line-height: 28px;
    font-weight: 100;
    font-size: 13px;
    height: 28px;
    width: 28px;
    margin: 4px;
    border-radius: 30px;
    float: right;
    background-color: #2F2F2F;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 0 3px #000;
    color: #BFBFBF;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
.topbar-item-small a.add-stars:after {
    content: "\f218";
    font-family: "Ionicons";
    position: relative;
}
.topbar-item-small a:active {
    background: #252525;
}
.topbar-item-small span[data-topbar-type="exp"],
.topbar-item-small span[data-topbar-type="rep"],
.topbar-item-small span[data-topbar-type="crp"],
.topbar-item span[data-topbar-type="car-gas"],
.topbar-item-small span[data-topbar-type="money"],
.topbar-item-small span[data-topbar-type="stars"]{
    font-size: 16px;
    line-height: 34px;
    position: relative;
    font-weight: 700;
}
.topbar-item span[data-topbar-type="car-name"] {
    font-size: 14px;
    color: #D4D4D4;
    line-height: 35px;
    position: relative;
    font-weight: 500;
    float: left;
    margin-left: 20px;
}
.topbar-item-small span[data-topbar-type="exp"],
.topbar-item-small span[data-topbar-type="rep"],
.topbar-item-small span[data-topbar-type="crp"] {
    /* font-weight: 800; */
    /* font-size: 24px; */
}
.topbar-item-small .money span:after {
    content: "\e91b";
    font-family: 'icomoon';
}
.topbar-item-small .stars {
    float: left;
    font-size: 29px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    position: relative;
    left: -2px;
    top: -2px;
    color: #333333;
    transform: scale(.8);
    background: #C3C3C3;
    border-radius: 60px;
    text-align: center;
    box-shadow: 0 0 0 2px #5affd3 inset, 0 0 0 4px #333 inset;
    box-shadow: 0 0 0 2px #4C4C4C inset, 0 0 0 4px #333 inset;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.topbar-item-small .stars a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: none;
}
.topbar-item-small .stars.fyber {
    box-shadow: 0 0 0 2px #5affd3 inset, 0 0 0 4px #333 inset;
}
.topbar-item-small .stars.fyber a {
    display: block;
}
.topbar-item-small .stars.fyber:hover {
    background: #8af1d5;
}
.topbar-item-small .stars:after {
    content: "\f2fc";
    font-family: "Ionicons";
    width: 40px;
    height: 40px;
    padding: 0 7px;
    display: block;
}
.topbar-item .c100 { margin: 17px 0 0; }
.topbar-item .c100.car-gas { margin-left: 5px; }
.topbar-item span[data-topbar-type="car-level"] {
    border-radius: 25px;
    line-height: 26px;
    height: 26px;
    width: 55px;
    font-weight: 700;
    text-align: center;
    color: #292929;
    background: #CCCCCC;
    margin: 17px 0 0;
    font-size: 15px;
}

.topbar-item [data-type="view-carlist"] {
    display: block;
    float: right;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 4px;
    border-radius: 30px;
    background-color: #2F2F2F;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 0 3px #000;
    color: #BFBFBF;
    font-size: 20px;
    /*-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;*/
}
.topbar-item [data-type="view-carlist"]:hover {
}
.topbar-item [data-type="view-carlist"]:active {
    background: #252525;
    /*box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset, 0 1px 1px #000;*/
}
.topbar-item [data-type="view-carlist"]:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'keyboard_arrow_down';
    transform: rotate(0deg);
    display: block;
    position: relative;
    top: 1px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.topbar-item [data-type="view-carlist"].active:before {
    transform: rotate(-180deg);
    top: -1px;
}
#carlist-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(25, 25, 25, 0.75);
    z-index: 2;
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
#carlist-overlay.show {
    opacity: 1;
}
#carlist {
    position: absolute;
    top: 60px;
    left: 50%;
    width: 550px;
    height: 300px;
    top: 10px;
    opacity: 0;
    visibility: hidden;
    background: #2d2d2d;
    box-shadow: 0 0 0 1px #3e3e3e, 0 2px 10px rgba(0, 0, 0, 0.5);
    transform: translateX(-50%);
    z-index: 2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
#carlist.show {
    opacity: 1;
    visibility: visible;
    top: 60px;
}
#carlist table {
    color: #ddd;
}
#carlist table tr {
    height: 60px;
}
#carlist table tr .carclass {
    color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 20px;
    font-weight: 800;
    font-size: 12px;
}
#carlist table tr a[data-icon-profile="enter"] {
    color: rgba(255, 255, 255, 0.6);
    background: #505050;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    letter-spacing: -1px;
}
#carlist table tr a[data-icon-profile="enter"].active {
    box-shadow: 0 0 0 2px #5affd3 inset;
    background: #3C3C3C;
}
#carlist table tr a[data-icon-profile="enter"].active:before {
    color: #fff;
    content: '\f00c';
    font-family: 'FontAwesome';
}


/* ==============================
Menu bars
============================== */

img.userimage {
    border-radius: 50px;
    background: #303030;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
span.userimage-full {
    line-height: 1;
    position: relative;
    display: inline-block;
}
span.userimage-full.online img.userimage { box-shadow: 0 0 0 1px #76c576; }
/*span.userimage-full.offline img.userimage { box-shadow: 0 0 0 1px #d65b53; }*/

/* ==============================
Menu bars
============================== */

.main-nav {
    position: absolute;
    height: 61px;
    background-color: #252525;
    color: rgba(255,255,255,1);
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url(../images/carbon_2.jpg);
    z-index: 3;
    border-top: 1px solid #4e4e4e;
    box-shadow: 0 -3px 1px rgba(0, 0, 0, 0.1);
}
.main-nav .center {
    float: left;
    box-shadow: 0 1px 0 #383838 inset;
}
.main-nav a {
    display: block;
    position: relative;
    font-size: 21px;
    height: 60px;
    width: 79px;
    line-height: 44px;
    text-align: center;
    color: #666;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    float: left;
    border-right: 1px solid #2B2B2B;
    background: #252525;
    /* margin-top: 1px; */
    text-decoration: none;
    background-image: url(../images/carbon_2.jpg);
    /* box-shadow: -1px 0 0 #191919 inset; */
}
.main-nav a:last-of-type {
    border: none;
    box-shadow: none;
}
.main-nav a:hover,
.main-nav a.active  {
    color: #fff;
}
.main-nav a .label {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 10px;
    line-height: 1;
    padding: 0;
    border-radius: 0;
    z-index: 101;
    color: inherit;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
}

.main-nav a.phone,
.main-nav a.start {
    height: 60px;
    background: rgba(255,255,255,0.1);
    background-image: url(../images/carbon_3.jpg);
    border: none;
    width: 66px;
    z-index: 1;
    line-height: 60px;
    color: #eee;
}
.main-nav a.start {
    float: left;
    border-right: 1px solid #2F2F2F;
    box-shadow: 3px 7px 7px rgba(0, 0, 0, 0.12), 1px 0 0 #383838 inset;
}
.main-nav a.phone {
    float: right;
    border-left: 1px solid #2F2F2F;
    /* box-shadow: -3px 7px 7px rgba(0, 0, 0, 0.12); */
}
.main-nav a:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.main-nav a.start:after,
.main-nav a.phone:after {
    font-size: 24px;
}

.main-nav a.start:after                 { content: 'home'; }
.main-nav a[data-nav="settings"]:after  { content: 'settings'; }
.main-nav a[data-nav="profile"]:after   { content: 'person'; }
.main-nav a[data-nav="skills"]:after    { content: 'equalizer'; }
.main-nav a[data-nav="perks"]:after     { content: 'local_activity'; }
.main-nav a[data-nav="bank"]:after      { content: 'account_balance'; }
.main-nav a[data-nav="car"]:after       { content: 'drive_eta'; }
.main-nav a[data-nav="gasstation"]:after{ content: 'local_gas_station'; }
.main-nav a[data-nav="workshop"]:after  { content: 'build'; }
.main-nav a[data-nav="cardealer"]:after { content: 'store'; }
.main-nav a[data-nav="crew"]:after      { content: '\e926'; font-family: 'icomoon'; font-size: 17px; }
.main-nav a[data-nav="races"]:after     { content: 'public'; }
.main-nav a[data-nav="championships"]:after{ content: '\f356'; font-family: 'Ionicons'; }
.main-nav a[data-nav="ranking"]:after   { content: 'reorder'; }
.main-nav a[data-nav="phone"]:after     { content: 'smartphone'; /*content: '\f0e0'; font-family: 'FontAwesome';*/ }

.main-nav .spinner {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    font-size: 10px;
    text-indent: -12345px;
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
    border-left: 2px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    -moz-animation: spinner 700ms infinite linear;
    -ms-animation: spinner 700ms infinite linear;
    -o-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
    opacity: 0;
    z-index: -1;
}
.main-nav a.status:after {
    /*background: #666;
    color: #353535;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 14px;
    -webkit-transition: opacity 0.1s, background 0.3s;
    -moz-transition: opacity 0.1s, background 0.3s;
    -o-transition: opacity 0.1s, background 0.3s;
    transition: opacity 0.1s, background 0.3s;
    opacity: 1;*/
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.main-nav .status.load .spinner {
    opacity: 1;
    z-index: 1;
}
.main-nav .status.load:after { opacity: 0; }
.main-nav a i.fa {
    position: relative;
}

[data-unread] {
    font-family: 'Titillium Web', sans-serif;
    position: absolute;
    top: 8px;
    right: 8px;
    margin: 2px;
    min-width: 16px;
    padding: 0 3px 0 2px;
    height: 16px;
    line-height: 16px;
    border-radius: 50px;
    text-align: center;
    background: #d10000;
    color: #fff;
    box-shadow: 0 0 0 2px #232323;
    font-size: 10px;
    font-weight: 700;
    opacity: 1;
    visibility: visible;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
[data-unread="0"] {
    opacity: 0;
    visibility: hidden;
    transform: scale(.3);
}

/*
.main-nav .center a.active { box-shadow: -1px 0 0 rgba(255, 255, 255, 0.4); } */
.main-nav .center a:before {
    content: '';
    position: absolute;
    top: 20px;
    left: 12px;
    height: 20px;
    border-radius: 110px;
    width: 53px;
    box-shadow: 0 0 5px #fff; /*#ea1e75*/
    z-index: -1;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
    transition: top 0.3s;
}
.main-nav .center a.active:before {
    top: 0;
    box-shadow: 0 0 25px #fff;
}


/* ==============================
Inner Side Nav
============================== */

.inner-side-nav {
    border-right: 1px solid #4C4C4C;
}
.inner-side-nav a {
    color: #999;
    line-height: 42px;
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
    cursor: pointer;
    background: #3A3A3A;
    margin: 0;
    padding: 0 15px;
    border-bottom: 1px solid #333333;
}
.inner-side-nav a:last-of-type {

}
.inner-side-nav a:hover{
    color: #eee;
}
.inner-side-nav a.active{
    color: #fff;
    background: #3E3E3E;
}
.inner-side-nav a.active:after,
.inner-side-nav a.active:before {
    content: "";
    position: absolute;
    bottom: 15px;
    right: -4px;
    border-width: 11px 9px 0;
    border-style: solid;
    border-color: #4C4C4C transparent;
    display: block;
    width: 0;
    transform: rotate(90deg);
}
.inner-side-nav a.active:after {
    right: -6px;
    border-color: #272727 transparent;
    border-color: #333333 transparent;
}



/* ==============================
Page Content
============================== */

.page-content {
    position: absolute;
    top: 65px;
    bottom: 65px;
    left: 0;
    right: 0;
    min-height: 0;
    overflow: hidden !important;
    -webkit-box-flex: 1;
    flex: 1;
    box-sizing: border-box;
    color: #ddd;
}
.page-content-inner {
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.content-padding {
    height: 100%;
    width: 100%;
    padding: 30px 40px;
    position: relative;
}

/* AJAX */

#ajax_content {
    padding: 10px 0;
    width: 100%;
    height: 100%;
    background: #333333;
    z-index: 1;
    position: absolute;
    top: 0;
}
#ajax_content .form-content {
    background: #333333;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: 1;
    visibility: visible;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#ajax_content .form-content.hide {
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}
#ajax_content.load [data-type="wrapper"] {
    /*opacity: 0;*/
    /*transform: scale(.95);*/
    /*transform: translateY(10px);*/
}
#ajax_content.load.to-right [data-type="wrapper"]:first-of-type,
#ajax_content.load.to-left [data-type="wrapper"] {
    /*transform: translateX(-40px);*/
}
#ajax_content.load.to-left [data-type="wrapper"]:first-of-type,
#ajax_content.load.to-right [data-type="wrapper"] {
    /*transform: translateX(40px);*/
}
#ajax_content,
#ajax_content #ajax_table,
#ajax_content #ajax_pagination,
#ajax_content #ajax_filter,
#ajax_content #ajax_pump,
#ajax_content #gas-pump,
#ajax_content #ajax_tab,
#ajax_content #ajax_skill,
#ajax_content #ajax_perk,
#ajax_content #ajax_crew_perk,
#ajax_profile,
#ajax_look,
#race_tab,
#ajax_workshop {
    opacity: 1;
    -webkit-transition: all 0.15s;
    -moz-transition: all 0.15s;
    -o-transition: all 0.15s;
    transition: all 0.15s;
}
#ajax_content.load,
#ajax_content.tabload #ajax_table,
#ajax_content.tabload #ajax_pagination,
#ajax_content.tabload #ajax_filter,
#ajax_content.tabload #ajax_tab,
#ajax_content.pumpcarload #ajax_pump,
#ajax_content.pumpload #ajax_pump,
#ajax_content #ajax_tab.load,
#ajax_content.skillload #ajax_skill,
#ajax_content.perkload #ajax_perk,
#ajax_content.perkload #ajax_crew_perk,
#ajax_profile.load,
#ajax_look.load,
#race_tab.load,
#ajax_content.tabload #ajax_workshop {
    opacity: 0 !important;
}
#ajax_profile.load #ajax_table,
#ajax_content.tabload #ajax_table,
#ajax_content.pumpload #ajax_pump,
#ajax_content.skillload #ajax_skill,
#ajax_content.perkload #ajax_perk,
#ajax_content.perkload #ajax_crew_perk,
#ajax_content.tabload #ajax_workshop {
    transform: translateY(10px);
}
#ajax_content.formload [data-type="wrapper"]:not(:first-of-type) {
    opacity: 0;
}
#ajax_content .ajax-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: darkred;
    border: 1px solid red;
    padding: 8px 15px;
    opacity: 0;
    z-index: 100;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#ajax_content .ajax-error.show { opacity: 1; }



/* ==============================
Modal Box
============================== */

#modal_overlay {
    display: block;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(20, 20, 20, 0);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#modal_overlay.show {
    background: rgba(26, 26, 26, 0.65);
}
#modal_content {
    padding: 10px 0;
    width: 100%;
    height: 100%;
    background: #333333;
    position: absolute;
    top: 0;
}
#modal_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1030px;
    height: 630px;
    z-index: 11;
    background: #373737;
    opacity: 0;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    transform: /*translate(-50%, -45%)*/ translate(-50%, -50%) scale(1.1);
}
#modal_box.terms {
    width: 400px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
#modal_box.profile {
    width: 1000px;
    height: 590px;
}
#modal_box.tutorial {
    box-shadow: 0 0 0 1px #525252, 0 2px 5px rgba(0, 0, 0, 0.35);
    width: 600px;
    height: 440px;
}
#modal_box.activation {
    width: 400px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
#modal_box.stars {
    box-shadow: 0 0 0 1px #525252;
}
#modal_box.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#modal_box.close {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1); /* scale(.97) */
}
#levelup [data-type="close-modal"],
#modal_box [data-type="close-modal"] {
    font-size: 18px;
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 46px;
    line-height: 46px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 2;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#levelup [data-type="close-modal"] {
    color: rgba(0, 0, 0, 0.5);
    font-size: 26px;
}
#levelup [data-type="close-modal"]:hover {
    color: #000;
}
#modal_box [data-type="close-modal"]:hover {
    color: #fff;
}
#levelup a[data-type="close-modal"]:after,
#modal_box a[data-type="close-modal"]:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'close';
}

.modal-content {
    height: 100%;
    width: 100%;
}

.table-of-contents tr td:nth-child(1) { width: 30px; }
.table-of-contents tr td:nth-child(2) { padding-bottom: 10px; }
.table-of-contents tr:last-child td:nth-child(2) { padding-bottom: 0; }
.table-of-contents tr { vertical-align:top; }

.open-modal {
    float: right !important;
    font-size: 16px !important;
    font-weight: 100 !important;
    line-height: 48px !important;
    height: 46px !important;
    width: 50px !important;
    text-align: center !important;
    text-transform: none !important;
    margin: 0 !important;
}
.open-modal:before {
    display: none;
}
.open-modal:focus,
.open-modal:active {
    color: #fff !important;
    text-decoration: none;
}
.open-modal:after {
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'open_in_new';
}



/* ==============================
Activation
============================== */

.activation-description {
    padding: 30px;
}
.activation-input {
    padding: 0 30px;
}
.activation-input input {
    width: 270px;
}
.activation-input button {
    float: right;
}

/* ==============================
Phone
============================== */

#phone {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 490px;
    color: #C3C3C3;
    padding: 25px 80px !important;
    /*background: #1b1b1b;*/
    /*box-shadow: 0 0 0 1px #232323, 0 0 0 7px rgba(0, 0, 0, 0.39) inset, 0 0 0 8px rgba(255, 255, 255, 0.05) inset, 0 7px 30px rgba(0, 0, 0, 0.6);*/
    z-index: 100;
    opacity: 0;
    border-radius: 50px;

    transform: translate(-50%, -45%) scale(1);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#phone.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#phone.close-phone {
    /*-webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.97);*/
}
#phone:after {
    position: absolute;
    left: 35px;
    top: 50%;
    width: 13px;
    height: 180px;
    /*content: '';*/
    background: #272727;
    transform: translateY(-50%);
    border-radius: 5px;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.62) inset, 0 0 0 1px #313131;
}
#phone:before {
    position: absolute;
    right: 30px;
    top: 50%;
    width: 26px;
    height: 110px;
    /*content: '';*/
    background: rgba(255, 255, 255, 0.01);
    transform: translateY(-50%);
    border-radius: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 5px 1px rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#phone a[data-type="close-modal"]:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'close';
}
#phone a[data-type="close-modal"] {
    font-size: 26px;
    position: absolute;
    top: 57px;
    right: 80px;
    width: 46px;
    height: 46px;
    line-height: 46px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    z-index: 1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
#phone a[data-type="close-modal"]:hover {
    color: #fff;
}

#phone .phone-status {
    background: #5f7db5;
    line-height: 32px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    border-bottom: 1px solid #4a618c;
}
#phone .phone-second {
    background: #5871a0;
    line-height: 46px;
}
#phone .phone-nav {
    float: left;
}
#phone .phone-nav a {
    display: inline-block;
    border-right: 1px solid #4a618c;
    float: left;
    color: #fff;
    width: 50px;
    height: 46px;
    text-align: center;
}
#phone .phone-nav a.active {
    background: rgba(0, 0, 0, 0.1);
}
#phone .phone-nav a:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-size: 17px;
    display: inline-block;
    font-weight: 100;
}
#phone .phone-nav a[data-phone-type="pm"]:before { content: 'person'; }
#phone .phone-nav a[data-phone-type="chat"]:before { content: '\e926'; font-family: 'icomoon'; }
#phone .phone-nav a[data-phone-type="global"]:before { content: 'chat'; }
#phone .phone-nav a[data-phone-type="support"]:before { content: '\f1cd'; font-family: 'FontAwesome'; }
#phone .phone-nav a[data-phone-type="news"]:before {content: 'fiber_new';font-size: 22px;}
#phone .phone-nav a span[data-unread] {
    top: 5px;
    right: 5px;
    background: #e21212;
    box-shadow: 0 0 0 2px #5871a0;
}
#phone .phone-content {
    height: 100%;
    width: 100%;
    /*box-shadow: 0 0 0 1px #101010, 0 0 0 2px #1D1D1D;*/
    background: #E6E6E6;
}
#phone .nano > .nano-pane > .nano-slider {
    background: #D0D0D0;
}
#phone .nano > .nano-pane {
    background: #F5F5F5;
    opacity: 1;
    width: 4px;
    right: 0;
    top: 0;
    bottom: 0;
}
#phone .phone-title {
    float: left;
    padding: 0 10px;
    color: #fff;
    font-weight: 500;
    font-size: 19px;
    line-height: 46px;
    height: 46px;
    width: 330px;
}
#phone .phone-title span {
    display: inline-block;
    line-height: 46px;
    float: left;
}
#phone .phone-title a.go-back {
    height: 46px;
    line-height: 48px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    /*
    width: 50px;
    background: rgba(0, 0, 0, 0.1);
    border-left: 1px solid #509C6A;
    border-right: 1px solid #509C6A;
    float: right;
    */
    padding-right: 10px;
    float: left;
    width: 40px;
}
#phone .phone-title a.go-back:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'keyboard_backspace';
    font-size: 23px;
    display: inline-block;
}
#phone .phone-title a.go-back.hide {
    display: none;
}
#phone .phone-choose {
    color: #B7B7B7;
    text-align: center;
    padding: 74px 0 0;
}
#phone .phone-choose.news {
    padding: 130px 0 0;
}
#phone .phone-choose.news .description {
    color: #777;
    padding: 0 110px;
}
#phone .phone-choose.ticket {
    padding: 90px 0 0;
}
#phone .phone-choose .heading {
    font-size: 17px;
    font-weight: 600;
}
#phone .phone-choose .divider {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 40px 0;
}
#phone .phone-choose .divider:before,
#phone .phone-choose .divider:after {
    content: '';
    height: 1px;
    width: 170px;
    background: #CACACA;
    display: inline-block;
    position: relative;
    top: -3px;
    margin: 0 10px;
}
.new-conversation .input {
    margin-top: 15px;
    width: 240px;
    display: inline-block;
}
.new-conversation input[type="text"] {
    background: rgba(0, 0, 0, 0.06);
    border: none;
    padding: 0 10px;
    width: 200px;
    color: #929292;
    font-weight: 600;
    line-height: 36px;
    display: block;
    float: left;
}
.new-conversation input[type="text"].not-found {
    background: rgba(255, 0, 0, 0.18);
    color: #A71D1D;
}
.new-conversation .start-conversation:focus,
.new-conversation input[type="text"]:focus {
    outline: none;
}
.new-conversation .start-conversation {
    background: rgba(0, 0, 0, 0.06);
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #929292;
    font-size: 18px;
    display: block;
    float: right;
    border: none;
    transform: scale(1);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.start-conversation:after {
    content: '\f101';
    font-family: "FontAwesome";
}
.new-conversation .start-conversation:active,
.new-ticket .start-ticket:active {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(.95);
}
.new-ticket .start-ticket {
    background: rgba(0, 0, 0, 0.06);
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #929292;
    font-size: 18px;
    display: inline-block;
    border: none;
    transform: scale(1);
    padding: 0 0 0 15px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.new-ticket .start-ticket:after {
    content: '\f101';
    font-family: "FontAwesome";
    width: 36px;
    text-align: center;
    margin-left: 15px;
    display: block;
    background: rgba(0, 0, 0, 0.04);
    float: right;
}

/* ==============================
Communication
============================== */

.phone-list {
    width: 250px;
    height: 361px;
    float: left;
    background: #fff;
    border-right: 1px solid #D0D0D0;
}
.phone-list a {
    display: block;
    margin: 0;
    color: rgba(0, 0, 0, 0.8);
    background: #fff;
    border-bottom: 1px solid #EAEAEA;
}
.phone-chatbox {
    padding: 0;
    float: right;
    width: 490px;
    height: 361px;
    position: relative;
}
.phone-messages {
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 50px;
    background: rgba(255, 255, 255, 0.2);
}
.phone-messages .wrapper {
    padding: 40px 0;
    min-height: 100%;
}
.phone-input {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(0, 0, 0, 0.05);
    padding: 8px 10px;
}
.phone-input .ticket-closed,
.phone-input .locked {
    line-height: 34px;
    color: #7d7d7d;
    font-weight: 600;
    padding: 0 10px;
}
.phone-input .ticket-closed:after {
    float: right;
    content: 'check';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.phone-input .locked:after {
    float: right;
    content: 'lock';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.phone-input input[type="text"] {
    width: 427px;
    float: left;
    background: #fff;
    color: #333 !important;
    font-weight: 500;
}
.phone-input .btn-mod {
    width: 33px;
    height: 33px;
    padding: 0;
    float: right;
    background: #5f7db5;
}
.phone-input .btn-mod:hover {
    /* background: #5DC781; */
}
.phone-input .send {
    display: block;
}
.phone-input .send:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: '\E163';
    font-size: 17px;
    display: inline-block;
}

/* Message */

.message-container {
    max-width: 55%;
    box-shadow: 0 1px 1px #C3C3C3;
    margin: 0 0 2px 75px;
    padding: 7px 12px;
    font-size: 12px;
    border-radius: 3px;
    background: #fff;
    display: inline-block;
    float: left;
    clear: both;
    position: relative;
    -webkit-transition: opacity 0.5s, transform 0.4s;
    -moz-transition: opacity 0.5s, transform 0.4s;
    -o-transition: opacity 0.5s, transform 0.4s;
    transition: opacity 0.5s, transform 0.4s;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}
.message-container.hide {
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    display: inline-block !important;
}
.message-container:before {
    font-family: "Ionicons";
    content: "\f361";
    position: absolute;
    font-size: 30px;
    top: -6px;
    left: -6px;
    color: #fff;
    display: block;
    width: 0;
    /* transform: translateY(-50%); */
    /*text-shadow: 1px 0 0 #525252;*/
}
.message-container.own {
    margin: 0 75px 2px 0;
    float: right;
    text-align: right;
}
.message-container.own:before {
    content: "\f363";
    left: auto;
    right: 2px;
    /* transform: translateY(-50%); */
    /*text-shadow: 1px 0 0 #525252;*/
}
.message-container.new,
.message-container.break {
    margin-top: 15px;
}
.phone-messages .date-divider + .message-container.new,
.phone-messages .date-divider + .message-container.break {
    margin-top: 0;
}
.message-container:last-child {
    margin-bottom: 0;
}
.message-container .from {
    font-weight: 600;
    color: #D10000;
    margin-bottom: 1px;
    display: none;
}
.message-container.new:not(.own) .from,
.message-container.break:not(.own) .from {
    display: block;
}
.message-container .message {
    color: #777;
    font-weight: 600;
}
.message-container .message a {
    color: #0093ff;
}
.message-container .message a:hover {
    text-decoration: none;
}
.message-container .time {
    color: #9A9A9A;
    position: absolute;
    top: 10px;
    left: -60px;
    font-weight: 700;
    width: 55px;
    text-align: center;
    /* transform: translateY(-50%); */
    font-size: 10px;
}
.message-container.own .time {
    left: auto;
    right: -60px;
}

.phone-messages .date-divider {
    margin: 40px 0;
    text-align: center;
    clear: both;
    background: rgba(0, 0, 0, 0.17);
    color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.09);
    padding: 8px 0;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    float: left;
    /* width: 100%; */
    width: 100px;
    transform: translateX(-50%);
    border-radius: 40px;
    left: 50%;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    position: relative;
    /* box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) inset, 0 -2px 0 rgba(0, 0, 0, 0.02) inset; */
}



/* ==============================
Chat
============================== */


.phone-list.chat a {
    line-height: 50px;
    padding: 0 10px;
    font-weight: 600;
    font-size: 16px;
    display: block;
}
.phone-list.chat a img {
    margin-right: 5px;
    border-radius: 30px;
    background: rgba(0,0,0,0.1);
    position: relative;
    top: -2px;
}
.phone-list.chat a.inactive {
    background: #F5F5F5;
    display: none;
}
.phone-list.chat a:after {
    content: "\f21b";
    font-family: "Ionicons";
    font-size: 12px;
    position: absolute;
    color: #4CB36F;
    line-height: 52px;
    right: 15px;
}
.phone-list.chat a.inactive:after {
    display: none;
}


/* ==============================
PNs
============================== */

.phone-list.pm a {
    color: rgba(0, 0, 0, 0.8);
    line-height: 24px;
    display: block;
    padding: 8px 15px;
    margin: 0;
}
.phone-list.pm a.active {
    background: #F5F5F5;
}
.phone-list.pm a .name {
    float: left;
    font-weight: 600;
    font-size: 14px;
}
.phone-list.pm a .time {
    float: right;
    font-size: 10px;
    font-weight: 600;
}
.phone-list.pm a .new {
    opacity: 0;
    background: #4CB36F;
    color: #fff;
    border-radius: 18px;
    height: 18px;
    padding-right: 1px;
    line-height: 18px;
    text-align: center;
    font-size: 10px;
    display: block;
    float: left;

    font-weight: 700;
    visibility: hidden;
    transform: scale(.3);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin: 3px 0 0 0;
    width: 0;
}
.phone-list.pm a.new .new {
    width: 18px;
    margin: 3px 7px 0 0;
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.phone-list.pm a .message {
    float: none;
    display: block;
    font-size: 12px;
    color: rgba(99, 99, 99, 0.5);
    font-weight: 600;
}



/* ==============================
Ranking
============================== */

.ranking-left {
    width: 73%;
    height: 100%;
    float: left;
}
.ranking-right {
    width: 27%;
    height: 100%;
    float: right;
}
.ranking-right .inner {
    height: 100%;
}


/* ==============================
Car buy
============================== */

.carbuy {
    background: #222;
    width: 100%;
    height: 100%;
}
.carbuy-left {
    width: 730px;
    height: 100%;
    float: left;
    background: #3C3C3C;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.carbuy-right {
    width: 280px;
    height: 100%;
    float: right;
    position: relative;
    background: #3C3C3C;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.carbuy .buy {
    padding: 20px;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
}
.carbuy .buy .btn {
    padding: 10px;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
    margin: 0 0 15px;
}
.carbuy .buy form:last-of-type .btn {
    margin: 0;
}
.carbuy-info .shortinfo {
    border-top: 1px solid #3C3C3C;
    border-bottom: 1px solid #333;
    background: #464646;
}
.carbuy-info .class,
.carbuy-info .level,
.carbuy-info .transmission {
    float: left;
    height: 46px;
    text-align: center;
    line-height: 46px;
    width: 33.3%;
    background: #464646;
    font-weight: 700;
    font-size: 12px;
}
.carbuy-info .transmission {
    float: right;
}
.carbuy-info .level {
    border-right: 1px solid #3C3C3C;
    border-left: 1px solid #3C3C3C;
}
.carbuy-info .level .carlvl {
    border-radius: 22px;
    line-height: 18px;
    padding: 3px 0;
    width: 46px;
    text-align: center;
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #DEDEDE;
}
.carbuy-info .class .carclass {
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 30px;
    color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    text-align: center;
    font-weight: 800;
}
.carbuy-info .skills {
    height: 318px;
    background: #353535;
    font-size: 13px;
    padding: 13px 0 18px;
}
.carbuy-info .skills table tr {
    height: 60px;
}
.carbuy-info .skills table td {
    border-bottom: 1px solid #3C3C3C;
    padding: 0 20px;
}
.carbuy-info .skills table tr td:first-of-type {
    text-transform: uppercase;
}
.carbuy-info .skills table tr td:last-of-type {
    text-align: right;
    border-left: 1px solid #3C3C3C;
    width: 50%;
}
.carbuy-info .skills table tr:last-of-type td {
    border-bottom: none;
}
.carbuy-info .skills table tr td span.name {
    float: left;
    margin-top: 8px;
}
.carbuy-info .skills table tr td span.value {
    float: right;
    margin-top: 8px;
}

.carbuy-info .bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.2) !important;
    height: 6px;
    display: inline-block;
    position: relative;
    top: -5px;
}
.carbuy-info .bar .bar-inner {
    background: #D2D2D2 !important;
    position: absolute;
    left: 0;
    height: 100%;
}
.carbuy.used .carbuy-info .bar .bar-inner {background: #76c576 !important;}
.carbuy.used .carbuy-info .bar .bar-inner.original { background: #D2D2D2 !important; box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2); }
.carbuy-tuning {
    display: none;
    height: 47px;
    text-align: center;
    padding: 14px 0;
}
.carbuy-tuning span {
    margin: 0;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.17);
    border-radius: 20px;
    display: inline-block;
}
.carbuy-restrictions {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    background: #464646;
}
.carbuy-restrictions .levelup,
.carbuy-restrictions .garage {
    width: 50%;
    text-align: center;
    float: left;
    line-height: 46px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
}
.carbuy-restrictions .locked {
    /*
    background: #943434;
    color: #E03232;
    */
}
.carbuy-restrictions .levelup {
    border-right: 1px solid #3C3C3C;
}
.carbuy-restrictions .garage:before,
.carbuy-restrictions .levelup:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'lock_open';
    line-height: 43px;
    position: relative;
    top: 1px;
    margin-right: 3px;
    text-transform: none;
    font-weight: 100;
    font-size: 13px;
}
.carbuy-restrictions .garage:before {
    content: 'drive_eta';
    top: 2px;
}
.carbuy-restrictions .levelup.locked:before {
    content: 'lock';
}

/* right */

.carbuy-image {
    height: 506px;
    text-align: center;
    line-height: 506px;
    position: relative;
    box-shadow: 0 0 230px 70px rgba(0, 0, 0, 0.2) inset;
    background: #333;
}
.carbuy-name {
    position: absolute;
    left: 22px;
    top: 20px;
    line-height: 24px;
    text-align: left;
    font-size: 20px;
    color: #fff;
}
.carbuy-production {
    position: absolute;
    right: 22px;
    top: 20px;
    line-height: 24px;
    font-size: 20px;
    color: #fff;
    text-align: right;
}
.carbuy-name .manufacturer,
.carbuy-production .year {
    font-weight: 700;
}
.carbuy-production .mileage {
    font-size: 14px;
}
.carbuy-color {
    padding: 10px;
    height: 44px;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 0 #3c3c3c inset;
}
.carbuy-color a {
    width: 24px;
    height: 24px;
    margin-right: 3px;
    display: inline-block;
    background: #666;
    color: #fff;
}
.carbuy.used .carbuy-color a {
    cursor: inherit;
}
.carbuy-color a:last-of-type {
    margin-right: 0;
}

[data-carcol="1"] {background: #111111 !important;}
[data-carcol="2"] {background: #3a3a3a !important}
[data-carcol="3"] {background: #989898 !important;}
[data-carcol="4"] {background: #e8e8e8 !important;color: #111;}
[data-carcol="5"] {background: #ba1c22 !important;}
[data-carcol="6"] {background: #ba4b2c !important;}
[data-carcol="7"] {background: #ba6f2c !important;}
[data-carcol="8"] {background: #be9737 !important;}
[data-carcol="9"] {background: #bbaa2c !important;}
[data-carcol="10"] {background: #aabe2f !important;}
[data-carcol="11"] {background: #91bb2d !important;}
[data-carcol="12"] {background: #6fbd31 !important;}
[data-carcol="13"] {background: #4dbc33 !important;}
[data-carcol="14"] {background: #30bd4c !important;}
[data-carcol="15"] {background: #2cbc70 !important;}
[data-carcol="16"] {background: #34be98 !important;}
[data-carcol="17"] {background: #2bb9b4 !important;}
[data-carcol="18"] {background: #359fbf !important;}
[data-carcol="19"] {background: #2f78be !important;}
[data-carcol="20"] {background: #1751b8 !important;}
[data-carcol="21"] {background: #4533be !important;}
[data-carcol="22"] {background: #6a35bd !important;}
[data-carcol="23"] {background: #8d33bf !important;}
[data-carcol="24"] {background: #af35bd !important;}
[data-carcol="25"] {background: #bd319d !important;}
[data-carcol="26"] {background: #bd3670 !important;}

.carbuy-color a.check {
    box-shadow: 0 0 0 1px #3C3C3C, 0 0 0 2px #fff;
}
.carbuy-color a.check:before {
    font-family: "FontAwesome";
    content: '\f00c';
    position: absolute;
    bottom: 2px;
    right: 2px;
    line-height: 10px;
    width: 10px;
    font-size: 8px;
    text-align: center;
}


/* ==============================
Track modal
============================== */

.profile-modal .track-flag {
    line-height: 123px;
    height: 127px;
    text-align: center;
    background: #242424;
}
.profile-modal .track-flag img {
    vertical-align: middle;
    opacity: .9;
    box-shadow: 0 0 0 1px rgb(212, 212, 212), 0 2px 2px rgba(0, 0, 0, 0.4);
}
.profile-modal .track-satellite {
    height: 542px;
    width: 100%;
    position: relative;
}

.profile-modal .track-satellite object {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 1;
    text-align: center;
    background-color: #212121;
    background-position: center center;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.profile-modal .track-satellite object svg {
    position: relative;
    top: -7px;
}
.profile-modal tr.full td {
    text-align: center !important;
}
.profile-modal tr.full {
    height: 55px;
}
.profile-modal tr.full.small {
    height: 36px;
}
.profile-modal tr.full.heading {
    height: 40px;
}
.profile-modal tr.full.heading td {
    padding: 0 15px;
    text-align: left !important;
    border-left: none;
}
.profile-modal tr.full.blank {
    height: 3px;
    background: #373737;
}

/* ==============================
Car modal
============================== */

.profile-modal .car-performance {
    padding: 25px 0 0 25px;
}
.profile-modal .car-performance .performance {
    width: 354px;
    height: 236px;
    background: #353535;
    float: left;
    margin: 5px;
}
.profile-modal .car-performance .chart {
    height: 194px;
    margin: 0;
}
.carmodel-data {
    padding: 20px;
    background: #3C3C3C;
}
.carmodel-data table td {
    width: 14.3%;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}
.carmodel-data table tr td:last-of-type {
    border: none;
}
.carmodel-data table tr:first-of-type td {
    font-size: 11px;
    padding-bottom: 1px;
    color: #999;
    text-transform: uppercase;
}
.carmodel-data table tr:last-of-type td {
    font-size: 14px;
    font-weight: 700;
}
.profile-modal .carmodel-image {
    height: 462px;
    text-align: center;
    line-height: 462px;
    box-shadow: 0 0 230px 70px rgba(0, 0, 0, 0.2) inset;
    background: #333;
}
.profile-modal .carmodel-info .skills {
    padding: 0;
}
.profile-modal .carmodel-info .skills [data-skill-icon] {
    margin: 0 auto;
    height: 62px;
    line-height: 60px;
    display: block;
    border-bottom: 1px solid #424242;
    padding: 10px 0 0;
    width: 23px;
}
.profile-modal .carmodel-info .skills [data-skill-icon]:before {
    font-size: 20px;
    color: #737373;
}
.profile-modal .carmodel-info .skills label {
    font-size: 9px;
    display: none;
}
.profile-modal .carmodel-info .skills .skilllevel {
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    height: 60px;
    width: 100%;
    line-height: 45px;
    padding: 0;
    color: #fff;
}
.profile-modal .carmodel-info .box {
    height: 125px;
    border-bottom: 1px solid #424242;
    text-align: center;
}
.profile-modal .carmodel-info .box:last-of-type {
    border: none;
}

.car-sell.settings {
    margin: 0 !important;
}
.car-sell.settings .full-box {
    height: 481px;
}
.car-sell.settings .full-box .description {
    height: 365px;
}
.car-sell.settings form .checkbox-mod {
    width: 243px;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.car-sell.settings .checkbox-mod label {
    width: 100%;
}
.car-sell.settings .btn-mod {
    bottom: 20px;
    right: 20px;
}
.settings .price-calc {
    padding: 14px 30px;
}
.settings .price-calc table {
    position: relative;
    bottom: auto;
    left: auto;
}
.settings .price-calc tr {
    height: 44px;
}
.settings .price-calc tr:nth-child(8) {
    height: 54px;
}
.settings .price-calc tr:nth-child(7) td {
    padding-bottom: 5px;
}
.settings .price-calc tr td {
    font-size: 11px;
    border-bottom: 1px solid #4C4C4C;
}
.settings .price-calc tr:last-of-type td {
    border: none;
    box-shadow: 0 -1px 0 #ddd, 0 -2px 0 #353535, 0 -3px 0 #ddd;
    color: #fff !important;
}
.settings .price-calc tr td:nth-child(1){
    color: #aaa;
    text-transform: uppercase;
    width: 50%;
}
.settings .price-calc tr td:nth-child(2) {
    text-align: center;
    color: #fff;
    font-size: 20px;
    line-height: 11px;
}
.settings .price-calc tr td:nth-child(3) {
    text-align: right;
    color: #fff;
    width: 50%;
}
.settings .price-calc table span.money {
    font-size: 20px;
}
.car-sell.settings ul {
    margin: 10px 0 0;
    padding-left: 20px;
}



/* ==============================
Car dealer
============================== */

.cardealer-left {
    width: 73%;
    height: 100%;
    float: left;
}
.cardealer-right {
    width: 27%;
    height: 100%;
    float: right;
}
.cardealer-right .inner {
    height: 100%;
}
span.locked {
    width: 100%;
    height: 100%;
    text-align: center;
    display: block;
    line-height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}
span.locked:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'lock';
    width: 30px;
    height: 30px;
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
    background: rgba(31, 31, 31, 0.52);
    color: #fff;
    display: inline-block;
    box-shadow: 0 0 0 1px #757575;
}


/* ==============================
Start
============================== */

.start-content {
    width: 100%;
    height: 100%;
}
.start-left {
    width: 50%;
    height: 100%;
    float: left;
    padding-right: 10px;
}
.start-right {
    width: 50%;
    height: 100%;
    float: right;
    padding-left: 10px;
}
.start-content .top {
    height: 50%;
    padding: 0 0 10px;
}
.start-content .bottom {
    height: 50%;
    padding: 10px 0 0;
}
.start-content .top .inner,
.start-content .bottom .inner {
    width: 100%;
    height: 100%;
    position: relative;
}

/* profile */

.start-profile-picture {
    width: 50%;
    height: 100%;
    float: left;
    background: #242424;
    text-align: center;
    border-right: 1px solid #4f4f4f;
    position: relative;
}
.start-profile-picture img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.start-profile-info {
    width: 50%;
    height: 100%;
    float: right;
    background: #353535;
}
.start-profile-info table tr {
    border-bottom: 1px solid #3c3c3c;
    height: 35px;
    font-size: 12px;
}
.start-profile-info table tr:nth-child(1),
.start-profile-info table tr:nth-child(2),
.start-profile-info table tr:nth-child(3) {
    height: 36px;
}
.start-profile-info table tr:last-of-type {
    border-bottom: none;
}
.start-profile-info table tr td {
    width: 50%;
    padding: 0 10px;
}
.start-profile-info table tr td:last-of-type {
    text-align: right;
    border-left: 1px solid #3C3C3C;
    width: 50%;
}
.start-profile-info table tr td:first-of-type {
    text-transform: uppercase;
}
.start-profile-info .skills-table {
    border-top: 1px solid #4f4f4f;
}
.start-profile-info table.skills tr {
    height: 35px;
}
.start-profile-info table.skills tr td {
    padding: 0;
    width: 30px;
    border-right: 1px solid #3C3C3C;
    border-left: none;
    text-align: center;
    font-size: 10px;
}
.start-profile-info table.skills tr td:nth-child(2n) {
    width: 31px;
}
.start-profile-info table.skills tr td:last-of-type {
    border-right: none;
}
.start-profile-info table.skills tr td [data-skill-icon]:before {
    font-size: 15px;
    position: relative;
    top: 2px;
}

/* car */

.start-car-picture {
    width: 75%;
    height: 100%;
    line-height: 283px;
    float: left;
    box-shadow: 0 0 160px 20px rgba(0, 0, 0, 0.2) inset;
    background: #333;
    text-align: center;
    border-right: 1px solid #4f4f4f;
}
.start-car-picture .name {
    position: absolute;
    left: 12px;
    top: 10px;
    line-height: 16px;
    text-align: left;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 1px 8px #000;
    font-weight: 600;
}
.start-car-picture .name .manufacturer {
    text-transform: uppercase;
    font-weight: 700;
}
.start-car-info {
    width: 25%;
    height: 100%;
    float: right;
    background: #353535;
}
.start-car-info table tr {
    border-bottom: 1px solid #3c3c3c;
    height: 35px;
    font-size: 12px;
}
.start-car-info table tr:nth-child(1),
.start-car-info table tr:nth-child(2),
.start-car-info table tr:nth-child(3) {
    height: 36px;
}
.start-car-info table tr:last-of-type {
    border-bottom: none;
}
.start-car-info table tr td {
    width: 33%;
    padding: 0 10px;
    text-align: center;
    border-right: 1px solid #3C3C3C;
}
.start-car-info table tr td:last-of-type {
    width: auto;
    border: none;
}
.start-car-info table tr td [data-skill-icon]:before {
    font-size: 13px;
    position: relative;
    top: 1px;
}

/* race */

.start-race-picture {
    width: 75%;
    height: 100%;
    float: left;
    box-shadow: 0 0 160px 20px rgba(0, 0, 0, 0.2) inset;
    background: #333;
    border-right: 1px solid #3c3c3c;
}
.start-race-picture .name {
    position: absolute;
    left: 12px;
    top: 10px;
    line-height: 16px;
    text-align: left;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 1px 8px #000;
    font-weight: 600;
}
.start-race-picture .name .track {
    text-transform: uppercase;
    font-weight: 700;
}
.start-race-picture object {
    width: 100%;
    height: 100%;
    display: block;
    padding: 0;
    background-color: #212121;
    background-size: cover;
    background-position: center center;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.start-race-picture object svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50.75%);
}
.start-race-info {
    width: 25%;
    height: 100%;
    float: right;
    background: #353535;
}
.start-race-info table tr {
    border-bottom: 1px solid #3c3c3c;
    height: 35px;
    font-size: 12px;
}
.start-race-info table tr:nth-child(1),
.start-race-info table tr:nth-child(2),
.start-race-info table tr:nth-child(3) {
    height: 36px;
}
.start-race-info table tr:last-of-type {
    border-bottom: none;
}
.start-race-info table tr td {
    width: 33%;
    padding: 0 10px;
    text-align: center;
    border-right: 1px solid #3C3C3C;
}
.start-race-info table tr td:last-of-type {
    width: auto;
    border: none;
}
.start-race-info table tr td [data-race-icon]:before {
    font-size: 13px;
    position: relative;
    top: -1px;
}
.start-race-info table tr td [data-race-icon="laps"]:before {
    top: 2px;
}
.start-race-info table tr td [data-race-icon="surface"]:before {
    top: -2px;
}

/* tutorial */

.start-tutorial {
    float: left;
    width: 368px;
    height: 100%;
    border-right: 1px solid #4f4f4f;
}
.start-tutorial .heading {
    padding: 0;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    /* border-bottom: 1px solid #4f4f4f; */
    line-height: 38px;
    background: #404040;
    font-size: 13px;
    color: #fff;
}
.start-tutorial .heading .reward {
    float: right;
    width: 40px;
    height: 38px;
    border-left: 1px solid #333;
    color: #696969;
}
.start-tutorial .heading .reward.done {
    color: #fff;
}
.start-tutorial .heading .reward:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'card_giftcard';
    text-transform: none;
    font-weight: 100;
    font-size: 16px;
}
.start-tutorial table tr {
    border-bottom: 1px solid #3c3c3c;
    height: 35px;
    line-height: 31px;
    font-size: 12px;
}
.start-tutorial table tr:last-of-type {
    border: none;
}
.start-tutorial table tr td {
    padding: 0;
}
.start-tutorial table tr td a {
    display: block;
}
.start-tutorial table tr td:first-of-type,
.start-tutorial table tr td:last-of-type {
    width: 40px;
    text-align: center;
}
.start-tutorial table tr td:last-of-type {
    border-left: 1px solid #3C3C3C;
}

.start-tutorial table tr td:last-of-type:before {
    font-family: 'Material Icons';
    content: 'check';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    opacity: 0.1;
    font-size: 15px;
}
.start-tutorial table tr td:last-of-type.done:before {
    opacity: 1;
    color: #fff;
}

/* votes */

.start-votes {
    padding: 16px;
    float: right;
    width: 120px;
    height: 100%;
    text-align: center;
    background: #2b2b2b;
}
.start-votes .box {
    width: 88px;
    height: 31px;
    background: #555;
    margin-bottom: 5px;
    opacity: 0.7;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
}
.start-votes .box:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    opacity: 1;
}
.start-votes .box a[data-icon] {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 31px;
    /*text-align: left;*/
    text-align: center;
    font-size: 12px;
}
.start-votes .box:hover a[data-icon="facebook"] { background: #3b5998; }
.start-votes .box:hover a[data-icon="twitter"] { background: #00a0d1; }
.start-votes .box:hover a[data-icon="google"] { background: #b21f1f; }

.start-votes .social {
    margin-top: 9px;
}

/* ==============================
Skills
============================== */

.skills-left {
    width: 65%;
    height: 100%;
    float: left;
}
.skills-right {
    width: 35%;
    height: 100%;
    float: right;
}

.skills-left .inner {
    height: 100%;
}
.skill {
    margin-bottom: 4.4px;
    background: #3C3C3C;
    font-size: 13px;
    font-weight: 600;
    color: #ececec;
    border: 1px solid rgba(255, 255, 255, 0.18);
    height: 70px;
    cursor: pointer;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.skill:last-of-type {
    margin: 0;
}
.skill:hover {
    border: 1px solid #aaa;
    /*background: #5C5C5C;*/
}
.skills-left .skill.active,
.skills-left .skill.active:hover {
    border: 1px solid #5affd3;
    /*background: #5C5C5C;*/
}
.skill .skill-icon {
    width: 70px;
    height: 68px;
    background: #333;
    color: #ECECEC;
    font-weight: 100;
    font-size: 12px;
    text-align: center;
}
.skill span[data-skill-icon] {
    display: block;
}
.skill span[data-skill-icon]:before {
    font-size: 30px;
}
.skill .skill-max {
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    margin: 0;
    width: 60px;
}
.skill .skill-name {
    padding: 0 20px;
    /*border-right: 1px solid rgba(0, 0, 0, 0.05);*/
}
.skill .skill-countdown {
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    padding: 0 20px;
}
.skill .skill-progress {
    width: 55px;
    font-size: 14px;
    text-align: right;
    font-weight: 700;
    color: #fff;
    background: #333333;
    padding-right: 10px;
}
.skill .skill-percent {
    width: 130px;
    text-align: left;
    background: #333333;
}
.skill .skill-percent .bar {
    width: 100px;
    background: rgba(255, 255, 255, 0.2) !important;
    height: 6px;
    position: relative;
    display: inline-block;
    top: -1px;
}
.skill .skill-percent .bar .bar-inner {
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2);
}
.skill .skill-percent .bar .bar-inner,
.skill .skill-percent .bar .bar-plus {
    background: #D2D2D2 !important;
    position: absolute;
    left: 0;
    height: 100%;
}
.skill .skill-percent .bar .bar-plus {
    background: #828282 !important;
}

/* right */

.skill-info .icon i {
    font-size: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}
.skill-info {
    height: 100%;
    position: relative;
}

.skill-info .icon i {
    font-size: 80px;
}
.skill-info .info {
    padding: 40px;
}
.skill-info .steps tr td {
    text-align: center;
}
.skill-info .steps tr td span {
    width: 26px;
    height: 25px;
    line-height: 26px;
    text-align: center;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.17);
    display: inline-block;
    position: relative;
    font-size: 10px;
    font-weight: 700;
}
.skill-info .steps tr td span.active {
    box-shadow: 0 0 0 2px #b4f482 inset, 0 0 10px rgba(180, 244, 130, 0.5);
    background: rgba(255, 255, 255, 0.2);
}
.skill-info .steps tr td span.active:after {
    content: "\f058";
    font-family: "FontAwesome";
    font-size: 10px;
    bottom: -2px;
    right: 0px;
    position: absolute;
    color: #b4f482;
    line-height: 10px;
    height: 10px;
    background: #404040;
    border-radius: 20px;
}
.skill-info .info .icon {
    height: 100px;
    position: relative;
    text-align: center;
}
.skill-info .info .icon span[data-skill-icon] {
    height: 100px;
    line-height: 100px;
    display: block;
    color: #fff;
}
.skill-info .info .icon span[data-skill-icon]:before {
    font-size: 100px;
}
.skill-info .info .description {
    font-size: 13px;
    text-align: center;
    margin-top: 30px;
}
.skill-info .upgrade {
    padding: 30px;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    height: 213px;
}
.skill-info .upgrade .btn {
    padding: 15px 10px;
    margin: 0 0 15px;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
}
.skill-info .upgrade form:last-of-type .btn {
    margin: 0;
}
.skill-info .upgrade .submit {
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #3C3C3C;
}
#ajax_skill {
    height: 100%;
}

/* ==============================
Perks
============================== */

.perks-left {
    width: 65%;
    height: 100%;
    float: left;
}
.perks-right {
    width: 35%;
    height: 100%;
    float: right;
}

/* left */

.perks-left .perk {
    height: 20%;
    width: 20%;
    font-size: 12px;
    padding: 0 5px 5px 0;
    float: left;
}
.perks-left .perk:nth-child(5n) {
    padding-right: 0;
}
.perks-left .perk.bottom {
    padding-bottom: 0;
}
.perks-left .perk a {
    display: block;
    width: 100%;
    height: 100%;
    background: #3C3C3C;
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);*/
}
.perks-left .perk a .steps {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
}
.perks-left .perk a .step {
    width: 6px;
    height: 6px;
    margin: 0 2px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    display: inline-block;
}
.perks-left .perk a .step.done {
    background: #5affd3;
}
.perks-left .perk.locked a .steps {
    display: none;
}
.perks-left .perk a:hover {
    border: 1px solid #aaa;
    background: #3C3C3C;
}
.perks-left .perk.active a,
.perks-left .perk.active a:hover {
    /*transform: scale(1.05);*/
    background: #3C3C3C;
    border: 1px solid #5affd3;
    /*background: #5C5C5C;*/
}
.perks-left .perk.locked a,
.perks-left .perk.locked a:hover {
    border: 1px solid #272727;
    background: #2B2B2B;
    color: #383838;
    cursor: default;
    box-shadow: none;
}
.perks-left .perk.locked a span[data-perk-icon] {
    opacity: .1;
}
.perks-left .perk span[data-perk-icon] {
    display: block;
    height: 100%;
    text-align: center;
    line-height: 110px;
    color: #ECECEC;
}

.perk-info .icon i,
.perks-left .perk a i {
    font-size: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
}

/* right */

.perks-right .inner {
    height: 100%;
}
.perk-info-box {
    width: 100%;
    height: 75%;
    padding: 10px 0 0;
}
.perk-progress-box {
    padding: 0 0 10px;
    height: 25%;
    width: 100%;
}
.perk-info,
.perk-progress {
    height: 100%;
    position: relative;
}

.perk-info .level {
    position: absolute;
    right: 15px;
    color: #5affd3;
    font-size: 13px;
}
.perk-info .icon i {
    font-size: 80px;
}
.perk-progress .total i {
    color: #888;
    font-style: normal;
    margin-left: 5px;
}
.perk-info .info {
    padding: 35px 20px;
}
.perk-info .steps tr td {
    text-align: center;
}
.perk-info .steps tr td span {
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.17);
    display: inline-block;
    position: relative;
    font-size: 12px;
}
.perk-info .steps tr td span.active {
    box-shadow: 0 0 0 2px #5affd3 inset, 0 0 10px rgba(90, 255, 211, 0.5);
    background: rgba(255, 255, 255, 0.2);
}
.perk-info .steps tr td span.active:after {
    content: "\f058";
    font-family: "FontAwesome";
    font-size: 15px;
    bottom: 0;
    right: 0;
    position: absolute;
    color: #5affd3;
    line-height: 13px;
    height: 13px;
    background: #404040;
    border-radius: 20px;
}
.perk-info .info .icon {
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    text-align: center;
    line-height: 100px;
    color: #fff;
}
.perk-info .info .icon span[data-perk-icon="xp"],
.perk-info .info .icon span[data-perk-icon="rp"],
.perk-info .info .icon span[data-perk-icon="money"]{
    height: 100px;
    display: block;
}
.perks-right .info .description {
    float: right;
    width: 175px;
    font-size: 13px;
}
.perks-right .choose .info .description {
    width: auto;
    padding: 5px 20px;
    text-align: center;
}
.perk-info .upgrade {
    padding: 20px;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
}
.perk-info-box.choose .perk-info .upgrade .checkbox-mod {
    margin: 0 0 10px;
}
.perks-right table tr td.total,
.perks-right .perk-point {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #fff;
}
.perk-info .upgrade .perk-point {
    font-size: 15px;
    line-height: 21px;
}
.perks-right .perk-point:before {
    content: 'local_activity';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-weight: 200;
    top: 4px;
    position: relative;
    margin-right: 3px;
    color: #fff;
}
.perks-right .upgrade .perk-point:before {
    top: 4px;
    margin-right: 4px;
    font-size: 18px;
    line-height: 16px;
}
.perk-info .upgrade .btn {
    padding: 15px 10px;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
}
.perk-progress table tr td {
    width: 50%;
    text-align: center;
}
.perk-progress table tr td:first-of-type {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.perk-progress table tr:first-of-type td{
    padding-bottom: 2px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 400;
}
.perk-progress .inner {
    padding: 20px;
    height: auto;
}
#ajax_perk {
    height: 100%;
}

/* ==============================
Championships
============================== */

.championships-left {
    width: 73%;
    height: 100%;
    float: left;
}
.championships-left .table-nav a {
    padding: 0 !important;
    width: 88px;
}
.championships-left .table-nav a:last-of-type.active:after {
    display: none;
}
.championships-left .table-nav a:last-of-type {
    padding-right: 15px !important;
    width: 98px;
}.championships-left .table-nav a:last-of-type.active {
     box-shadow: 2px 0 0 #505050;
 }
.championships-left .table-mod.wide tbody tr.new {
    height: 35px;
}
.championships-left tr.new td {
    background: #2b2b2b;
    text-transform: uppercase;
    color: #fff;
}
.championships-left tr td span.in-garage:before {
    float: right;
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'directions_car';
    font-size: 11px;
    display: inline-block;
}
.championships-left .bronze { color: #cd7f32; }
.championships-left .silver { color: #c0c0c0; }
.championships-left .gold { color: #ffd700; }

.championship-progress {
    display: inline-block;
    font-size: 11px;
    text-align: center;
    margin-right: 2px;
    width: 25px;
    float: left;
}
.championship-progress span {
    display: block;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.1);
}
.championship-progress span.progress-bronze { background: #cd7f32; }
.championship-progress span.progress-silver { background: #c0c0c0; }
.championship-progress span.progress-gold { background: #ffd700; }

table span.bronze,
table span.silver,
table span.gold {
    border-radius: 30px;
    width: 15px;
    height: 15px;
    line-height: 15px;
    text-align: center;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
}

table span.bronze { color: #cd7f32; box-shadow: 0 0 0 1px #cd7f32; }
table span.silver { color: #c0c0c0; box-shadow: 0 0 0 1px #c0c0c0; }
table span.gold { color: #ffd700; box-shadow: 0 0 0 1px #ffd700; }

.championships-right {
    width: 27%;
    height: 100%;
    float: right;
}
.championships-left .inner,
.championships-right .inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.championship-track {
    height: 236px;
    background: #353535;
    padding: 0;
    margin-bottom: 10px;
    position: relative;
}
.championship-track object {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 1;
    text-align: center;
    background-color: #212121;
    background-size: cover;
    background-position: center center;
    position: relative;
    /* border-bottom: 1px solid #232323; */
    /* border-top: 1px solid #232323; */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.championship-track .name {
    position: absolute;
    left: 12px;
    top: 10px;
    line-height: 16px;
    text-align: left;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 1px 8px #000;
    /* font-weight: 600; */
}
.championship-track .name .track {
    text-transform: uppercase;
    font-weight: 700;
}

/* PROGRESS */

.championships-right .championships-progress-box {
    width: 100%;
    height: 295px;
    padding: 0 0 10px;
}

.championships-right table tr {
    font-size: 12px;
    height: 39px;
}
.championships-right .progress table tr {
    height: 47px;
}
.championships-right .progress table tr:first-of-type {
    height: 49px;
}

.championships-right table tr td {
    width: 50%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    padding: 0 15px;
}
.championships-right table tr:last-of-type td {
    border-bottom: none;
}
.championships-right table tr td:last-of-type {
    border-left: 1px solid rgb(63, 63, 63);
}
.championships-right .progress table tr:first-of-type td:last-of-type {
    border-left: none;
}
.championships-right .progress table tr td span.name {
    float: left;
    margin-top: 8px;
    text-transform: uppercase;
}
.championships-right .progress table tr td span.value {
    float: right;
    margin-top: 8px;
}
.championships-right .progress table tr td .bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.2) !important;
    height: 4px;
    position: relative;
    display: inline-block;
    top: -10px;
}
.championships-right .progress table tr td .bar .bar-inner {
    position: absolute;
    left: 0;
    height: 100%;
    background: #D2D2D2 !important;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2);
}

/* CURRENT */

.championships-right .championships-current-box {
    width: 100%;
    height: 295px;
    padding: 10px 0 0;
}
.championships-right .championships-current-box table tr td:first-of-type {
    text-transform: uppercase;
}
.championships-right .championships-current-box table tr td:last-of-type {
    text-align: right;
}
.championships-right .championships-current-box .name {
    text-align: center;
    background: #4C4C4C;
    height: 35px;
    line-height: 35px;
    border-top: 1px solid #3c3c3c;
}
.championships-right .championships-current-box .name span.level {
    position: absolute;
    right: 0px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    width: 40px;
    font-size: 12px;
    background: #4c4c4c;
    height: 34px;
}
.championships-right .championships-current-box .races {
    background: rgba(0,0,0,0.1);
    border-bottom: 1px solid #3f3f3f;
}
.championships-right .championships-current-box .races table tr {
    height: 45px;
}
.championships-right .championships-current-box .races table tr td {
    border-right: 1px solid #3f3f3f;
    width: 25%;
    text-align: center;
    font-weight: 800;
    font-size: 16px;
    padding: 0;
}
.championships-right .championships-current-box .races table tr td a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 45px;
}
.championships-right .championships-current-box .races table tr td span {
    color: #717171;
    font-weight: 100;
    font-size: 12px;
}


/* ==============================
Championships SIGNUP
============================== */

.championship-signup {
    background: #2d2d2d;
    padding: 9px;
}
.championship-signup .range-selection {
    height: 100%;
    width: 70px;
    text-align: center;
    float: left;
    font-size: 11px;
    /* padding: 1px 0; */
    background: #373737;
    /* border-right: 1px solid #424242; */
    /* box-shadow: -3px 0 1px rgba(0, 0, 0, 0.09) inset; */
    margin-right: 9px;
}
.championship-signup .range-selection a {
    height: 41px;
    line-height: 41px;
    border-top: 1px solid #292929;
    display: block;
    padding-left: 15px;
}
.championship-signup .range-selection a.active {
    background: rgba(90, 255, 211, 0.5);
}
.championship-signup .range-selection a:before {
    position: absolute;
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    left: 15px;
    content: 'directions_car';
    font-size: 11px;
    opacity: .1;
}
.championship-signup .range-selection a.in-garage:before {
    opacity: 1;
}
.championship-signup .range-selection a.disabled {
    color: #585858;
    background: #313131;
    cursor: default;
}
.championship-signup .car-selection {
    float: left;
    width: 472px;
    height: 524px;
    background: #373737;
}
.championship-signup .car-selection span.original {
    color: #888;
}
.championship-signup .car-selection a[data-type="set-championship-car"] {
    color: rgba(255, 255, 255, 0.6);
    background: #505050;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 26px;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    letter-spacing: -1px;
}
.championship-signup .car-selection a[data-type="set-championship-car"].fixed {
    cursor: inherit;
}
.championship-signup .car-selection a[data-type="set-championship-car"]:before{
    top: 2px;
    font-size: 12px;
}
.championship-signup .car-selection table tr a[data-icon-profile="signup-select"].active {
    box-shadow: 0 0 0 2px #5affd3 inset;
    background: #3C3C3C;
}
.championship-signup .car-selection table tr a[data-icon-profile="signup-select"].active:before {
    color: #fff;
    content: '\f00c';
    top: 1px;
    font-family: 'FontAwesome';
}
.championship-signup .heading {
    background-color: #4C4C4C;
    color: #eee;
    font-weight: 400;
    height: 32px;
    line-height: 32px;
    text-transform: uppercase;
    font-size: 11px;
    text-align: center;
}
.championship-signup .heading.border-top { border-top: 1px solid #333333; }
.championship-signup .heading.border-bottom { border-bottom: 1px solid #333333; }
.championship-signup .signup-info {
    float: right;
    width: 208px;
    height: 524px;
    background: #373737;
}
.championship-signup .input {
    padding: 16px;
    background: #404040;
    /* border: 1px solid #4c4c4c; */
    /* border-top: none; */
}
.championship-signup .input form:first-of-type {
    margin-bottom: 8px;
}
.championship-signup .input .btn {
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
    padding: 8px 0;
}
.championship-signup .info table {
    background: #404040;
}
.championship-signup .info table tr {
    height: 35px;
    font-size: 12px;
}
.championship-signup .info table td {
    border-top: 1px solid #333333;
    padding: 0 10px;
}
.championship-signup .info table tr td:first-of-type {
    text-transform: uppercase;
}
.championship-signup .info table tr td:last-of-type {
    text-align: right;
    border-left: 1px solid #333333;
    width: 50%;
    padding-left: 0;
}
.championship-signup .info table tr:last-of-type td {
    border-bottom: none;
}

.championship-signup .info table span.time {
    color: #8C8C8C;
    margin-left: 5px;
}

/* ==============================
Championships MODAL
============================== */

.profile-modal tr.full.small table tr td {
    width: 33% !important;
    border-top: none;
    text-align: center !important;
}
.profile-modal tr.full.small table tr td span[data-race-icon]:before {
    position: relative;
    top: 1px;
    margin-right: 4px;
}
.profile-shortinfo tr.full.small table tr td:nth-child(2) {
    border-left: 1px solid #333333;
}
.profile-shortinfo tr.full.small td {
    padding: 0;
    width: 100%;
    text-align: left !important;
}
.profile-picture.championship {
    background: #333;
    line-height: 226px;
    color: #fff;
}
.profile-picture.championship [data-icon-profile]:before {
    font-size: 110px;
    display: block;
    line-height: 226px;
}

/* ==============================
Quests
============================== */

.quests-left {
    width: 50%;
    height: 100%;
    float: left;
}
.quests-right {
    width: 50%;
    height: 100%;
    float: right;
}
.quests-left .inner,
.quests-right .inner {
    width: 100%;
    height: 100%;
    position: relative;
    /* background: #404040; */
}
.quests-left .remaining,
.quests-right .remaining {
    float: right;
    text-transform: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}
.task-box .task {
    padding: 10px 20px;
    padding-right: 80px;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    line-height: 33px;
    background: #3C3C3C;
}
.task-box .task:last-of-type {
    border: none;
}
.task-box .task:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 60px;
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.05);
}
.task-box .task:after {
    font-family: "FontAwesome";
    font-size: 14px;
    content: '';
    position: absolute;
    width: 30px;
    line-height: 30px;
    height: 30px;
    right: 15px;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
}
.task-box .task.complete:after {
    content: '\f00c';
    color: #ddd;
    background: #5A5A5A;
    box-shadow: 0 0 0 2px #FFFFFF inset, 0 0 10px rgba(255, 255, 255, 0.5);
}
.quests-left .reward-box,
.quests-right .reward-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 164px;
}
.quests-left .reward-box .table-nav,
.quests-right .reward-box .table-nav {
}
.quests-left .reward-box .inner,
.quests-right .reward-box .inner {
    padding: 25px 40px;
    line-height: 68px;
}
.reward-box .reward-icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.17);
    display: inline-block;
    position: relative;
    margin-right: 20px;
}
.reward-box .reward-icon.complete {
    box-shadow: 0 0 0 2px #5affd3 inset, 0 0 10px rgba(90, 255, 211, 0.5);
    background: rgba(255, 255, 255, 0.2);
}
.reward-box .reward-icon.complete:after {
    content: "\f058";
    font-family: "FontAwesome";
    font-size: 15px;
    bottom: 0;
    right: 0;
    position: absolute;
    color: #5affd3;
    line-height: 13px;
    background: #404040;
    border-radius: 20px;
    height: 15px;
    width: 15px;
    padding: 1px;
    text-align: center;
}



/* ==============================
Races
============================== */

.races-left {
    width: 65%;
    height: 100%;
    float: left;
}
.races-right {
    width: 35%;
    height: 100%;
    float: right;
}
.races-left .inner,
.races-right .inner {
    width: 100%;
    height: 100%;
    position: relative;
}
.races-right .heading-nav span[data-race-icon] {
    margin-right: 5px;
}
.races-right .remaining {
    float: right;
    color: rgba(255, 255, 255, 0.5);
    text-transform: none;
    font-size: 13px;
}
.races-right .track-image {
    height: 234px;
    width: 100%;
}
.races-right .track-image object {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 1;
    text-align: center;
    background-color: #212121;
    background-size: cover;
    background-position: center center;
    position: relative;
    /* border-bottom: 1px solid #232323; */
    /* border-top: 1px solid #232323; */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.races-right .track-image object svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50.75%);
}
.races-right .track-data-user {
    /* background: #373737; */
}
.races-right .track-data {
    padding: 20px 10px 20px;
    text-align: center;
}
.races-right .track-data table tr td {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    font-weight: 700;
}
.races-right .track-data table tr td:last-of-type {
    border: none;
}
.races-right .track-data table tr:first-of-type td {
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    color: #949494;
    width: 25%;
}
.track-data-user tr {
    height: 46px;
}
.track-data-user tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    /* background: #353535; */
}
.track-data-user table tr:last-of-type td {
    border-bottom: none;
}
.track-data-user tr td:first-of-type {
    width: 40px;
    text-align: center;
    padding: 0 15px;
}
.track-data-user tr td:first-of-type [data-race-icon]:before {
    font-size: 14px;
}
.track-data-user tr td:nth-child(2) {
    /* padding: 0 5px; */
    text-transform: uppercase;
    font-size: 12px;
}
.track-data-user tr td:last-of-type {
    text-align: right;
    padding: 0 20px;
    width: 50%;
    border-left: 1px solid rgb(63, 63, 63);
}
table [data-race-icon="info"],
table [data-race-icon="signup"] {
    color: rgba(255, 255, 255, 0.6);
    background: #505050;
    width: 26px;
    height: 26px;
    border-radius: 26px;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    text-decoration: none;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: -2px;
}
table [data-race-icon="signup"].signed{
    box-shadow: 0 0 0 2px #FFFFFF inset, 0 0 10px rgba(255, 255, 255, 0.5);
    background: #5A5A5A;
    color: #ddd;
}
table [data-race-icon="signup"].locked {
    box-shadow: none;
    background: none;
    color: #7d7d7d;
    cursor: default;
}
table [data-race-icon="signup"].locked:before {
    content: 'lock';
    font-size: 17px;
}
table [data-race-icon="signup"].signed:before {
    color: #fff;
    content: '\f00c';
    font-family: 'FontAwesome';
    font-size: 12px;
    position: relative;
    top: -1px;
    letter-spacing: -1px;
}
table [data-race-icon="signup"].signed.championship:before {
    content: '\f356';
    font-family: 'Ionicons';
    letter-spacing: 0px;
}
.races-left .own-record,
.races-left .city {
    color: #8C8C8C;
}

/* ==============================
Race Signup
============================== */

.race-signup {
    width: 100%;
    height: 100%;
    background: #222;
}
.race-signup .heading-nav {

}
.race-signup-left {
    width: 670px;
    height: 100%;
    float: left;
    background: #3C3C3C;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.race-signup-right {
    width: 339px;
    height: 100%;
    float: right;
    position: relative;
    background: #3C3C3C;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.race-signup .sub {
    background-color: #4c4c4c;
    color: #eee;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 35px;
    border-top: 1px solid #3c3c3c;
    border-bottom: 1px solid #333;
}
.race-signup .sub.bottom {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}
.race-signup .restrictions {
    text-transform: uppercase;
    font-size: 11px;
    color: #aaa;
    font-style: italic;
}
.race-signup .car-selection {
    height: 309px;
}
.race-signup .car-selection tr {
    height: 60px;
}
.race-signup .car-selection a[data-type="set-race-car"] {
    color: rgba(255, 255, 255, 0.6);
    background: #505050;
    width: 26px;
    height: 26px;
    line-height: 26px;
    border-radius: 26px;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    letter-spacing: -1px;
}
.race-signup .car-selection a[data-type="set-race-car"].fixed {
    cursor: inherit;
}
.race-signup .car-selection a[data-type="set-race-car"]:before{
    top: 2px;
    font-size: 12px;
}
.race-signup .car-selection table tr a[data-icon-profile="signup-select"].active {
    box-shadow: 0 0 0 2px #5affd3 inset;
    background: #3C3C3C;
}
.race-signup .car-selection table tr a[data-icon-profile="signup-select"].active:before {
    color: #fff;
    content: '\f00c';
    top: 1px;
    font-family: 'FontAwesome';
}
.race-signup .track-data-user {
    border-bottom: 1px solid #242424;
}
.race-signup .track-data-user tr td {
    background: #3c3c3c;
    border-color: #333;
}
.race-signup .signup {
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
}
.race-signup .signup .btn {
    padding: 15px 10px;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
}

/* ==============================
Race Engine
============================== */

.race {
    width: 100%;
    height: 100%;
    background: #222;
}
.race-left {
    width: 339px;
    height: 100%;
    float: left;
    position: relative;
    background: #3C3C3C;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.race-left .tab-nav a {
    width: 162px;
}
.race-right {
    width: 670px;
    height: 100%;
    float: right;
    background: #3C3C3C;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.modal-content .race-track {
    height: 538px;
    position: relative;
    background: #242424;
}
.modal-content .race-track-details {
    height: 46px;
    padding: 20px;
    background: #3C3C3C;
    /* border-top: 1px solid #454545; */
}
.modal-content .race-track-details {
    padding: 9px 20px;
    background: #3C3C3C;
}
.modal-content .race-track-details table tr td {
    width: 16.6%;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    line-height: 14px;
}
.modal-content .race-track-details table tr td:last-of-type {
    border: none;
}
.modal-content .race-track-details table tr:first-of-type td {
    font-size: 10px;
    padding-bottom: 1px;
    color: #999;
    text-transform: uppercase;
}
.modal-content .race-track-details table tr:last-of-type td {
    font-size: 12px;
    font-weight: 700;
}
.race .sub {
    background-color: #4C4C4C;
    color: #fff;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 16px;
    text-align: center;
    line-height: 46px;
    box-shadow: 0 24px 10px rgba(255, 255, 255, 0.02) inset;
}

/* Rennstrecke
- - - - - - - - - - - - - - - - - - - - - - - - */

.race-right .additional {
    opacity: 0;
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    text-align: right;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.race-right .additional.show {
    opacity: 1;
}
.race-right #lap,
.race-right #progress {
    display: inline-block;
}
.race-right #lap,
.race-right #progress,
.race-right .time {
    background: rgba(0, 0, 0, 0.5);
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgb(69, 69, 69) 90%);
    line-height: 23px;
    color: #ffffff;
    padding: 0 7px;
    /*border-radius: 20px;*/
    margin: 2px 0 0 10px;
    text-align: left;
    text-transform: uppercase;
    padding-left: 40px;
}
.race-right .time span {
    margin-left: 15px;
    float: right;
    font-weight: 400;
}
.race-right #lap:before {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    float: left;
    margin-right: 5px;
    font-weight: 100;
    position: relative;
    text-transform: none;
    content: "\e91c";
    font-family: 'icomoon';
    font-size: 16px;
    top: 1px;
}
.race-track #countdown,
.race-track #starttrafficlight {
    width: 190px;
    height: 46px;
    background: #484848;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    text-align: center;
    line-height: 46px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 700;
    color: #eee;
    box-shadow: 0 20px 10px rgba(255, 255, 255, 0.03) inset, 0 0 0 1px #595959 inset;

}
.race-track #starttrafficlight {
    box-shadow: 0 20px 10px rgba(255, 255, 255, 0.03) inset, 0 0 0 1px #595959 inset, 0 3px 1px rgba(0, 0, 0, 0.1);
    padding: 0 10px;
    opacity: 0;
    visibility: hidden;
}
.race-track #starttrafficlight.show {
    opacity: 1;
    visibility: visible;
}
.race-track #starttrafficlight .light {
    width: 28px;
    height: 28px;
    margin: 9px 3px;
    float: left;
    background: #3C3C3C;
    border-radius: 30px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset, 0 0 20px rgba(0, 0, 0, 0.2) inset, 0 -2px 0 0 #2B2B2B;
}
.race-track #starttrafficlight .light.set {
    background: #EA0000;
}
.race-track #starttrafficlight .light.go {
    background: #16CA17;
}

/* - - - - - - - - - - - - */

.race-track .race-results {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    padding: 20px;
    /*background: rgba(0, 0, 0, 0.35);*/
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.race-track .race-results.show {
    opacity: 1;
    visibility: visible;
}
.race-track .race-results table tr {
    height: 39px;
    font-size: 12px;
    color: #d6d6d6;
}
.race-track .race-results table th {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}
.race-track .race-results table tr td:nth-child(7) { width: 50px; color: #8C8C8C; }

.race-track .race-results .replay-box {
    padding-top: 15px;
    margin-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: right;
}

.race-track .race-results .replay {
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    background: #4a4a4a;
    padding: 0 25px 0 20px;
    display: inline-block;
    font-size: 13px;
}
[data-icon="replay"]:before {
    content: 'replay';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none;
    margin-right: 2px;
    display: inline-block;
    line-height: 30px;
    position: relative;
    top: 2px;
}

/* - - - - - - - - - - - - */

.race-track #rewards {
    position: absolute;
    width: 100%;
    bottom: -46px;
    height: 46px;
    opacity: 0;
    padding: 9px 20px;
    background: #3C3C3C;
    /* border-top: 1px solid #595959; */
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
.race-track #rewards.show {
    opacity: 1;
    z-index: 1;
}
.race-track #rewards table tr {
}
.race-track #rewards table tr td {
    width: 16.6%;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
}
.race-track #rewards table tr td:last-of-type {
    border: none;
}
.race-track #rewards table tr:first-of-type td {
    text-transform: uppercase;
    font-weight: 600;
    font-size: 10px;
    padding-bottom: 1px;
    color: #999;
}

/* - - - - - - - - - - - - */

.race-track object {
    display: block;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4) inset;
    background-color: #212121;
    /* background-size: cover; */
    background-position: center center;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 1;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}
.race-track object svg {
    position: relative;
    top: -6px;
}
.race-track object.transparent {
    opacity: .02;
}
.race-track svg .car {
    opacity: 1;
    /*-webkit-transition: transform .3s linear, opacity 2s;
    transition: transform .3s linear, opacity 2s;*/
    -webkit-transition: opacity 2s;
    transition: opacity 2s;
}
.race-track svg .car.notransition {
    -webkit-transition: none;
    transition: none;
}
.race-track svg .car.fixed {
    opacity: 0;
}
.race-ranking-pre {
    float: left;
    width: 30px;
    text-align: center;
    color: #fff;
    background: #333;
    padding: 12px 0;
    height: 584px;
    font-size: 10px;
}
.race-ranking-pre .place {
    height: 55px;
    line-height: 55px;
    margin-bottom: 1px;
    background: #444;
}
.race-ranking {
    width: 309px;
    height: 584px;
    float: right;
    padding: 12px 0;
    background: #333;
}
.race-ranking .inner {
    position: relative;
}
.race-ranking .car {
    border-left: 5px solid;
    color: #fff;
    background: #3C3C3C;
    width: 100%;
    margin-bottom: 1px;
    height: 55px;
    position: absolute;
    -webkit-transition: top .8s;
    transition: top .8s;
    font-size: 11px;
}
.race-ranking .car.own {
    background: #444;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.05) inset;
    z-index: 1;
}
.race-ranking .car table {
    height: 100%;
}
.race-ranking .car table tr td.car-image {
    width: 85px;
    padding: 0 0 0 5px;
    /*background: rgba(255, 255, 255, 0.05);*/
    text-align: center;
}
.race-ranking .car table tr td.name {
    width: auto;
    padding: 0 10px 0 5px;
}
[data-table="race.times"] tr td:nth-child(1) .light,
.race-ranking .car table tr td.name .car-info {
    color: #8C8C8C;
    line-height: 1.2;
    display: block;
    padding: 2px 0 0;
}
[data-table="race.times"] tr td .light {
    color: #8C8C8C;
    line-height: 1.2;
}
.race-ranking .car table tr td.car-level {
    width: 40px;
    text-align: center;
}
.race-ranking .car table tr td.data {
    width: 70px;
    padding: 0 5px;
    text-align: center;
}
.race-ranking .car table tr td.data [data-car-stat="laptime"] {
    color: #8C8C8C;
}
.race-ranking .car table tr td.data [data-car-stat="laptime"].fixed {
    color: #fff;
}

.car[data-rank="1"]{ top: 0; }
.car[data-rank="2"]{ top: 56px; }
.car[data-rank="3"]{ top: 112px; }
.car[data-rank="4"]{ top: 168px; }
.car[data-rank="5"]{ top: 224px; }
.car[data-rank="6"]{ top: 280px; }
.car[data-rank="7"]{ top: 336px; }
.car[data-rank="8"]{ top: 392px; }
.car[data-rank="9"]{ top: 448px; }
.car[data-rank="10"]{ top: 504px; }

[data-table="race.times"] tr td:nth-child(3) {
    padding: 10px 0;
}

/* ==============================
Settings
============================== */

.settings-content {
    width: 100%;
    height: 100%;
}
.settings-content .inner {
    width: 100%;
    height: 100%;
    position: relative;
}
.settings-inner {
    padding: 30px;
}
.settings .left-half {
    float: left;
    width: 50%;
    padding-right: 10px;
}
.settings .right-half {
    float: right;
    width: 50%;
    padding-left: 10px;
}
.settings .half-box {
    /* background: rgba(255, 255, 255, 0.04); */
    /* box-shadow: 0 1px 0 rgba(255, 255, 255, 0.11); */
    height: 231px;
    position: relative;
}
.settings.settings-language .half-box {
    margin-bottom: 20px;
}
.settings .full-box {
    height: 483px;
    position: relative;
}
.settings:first-of-type {
    margin-bottom: 20px;
}
.crew-found-box {
    height: 479px;
    position: relative;
}
.settings .heading {
}
.settings .heading .remaining {
    float: right;
    color: #5affd3;
}
.settings .heading .remaining:before {
    content: 'lock';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    display: inline-block;
    margin-right: 4px;
    position: relative;
    top: 2px;
}
.settings .description {
    border: none;
    /* border-bottom: 1px solid #3C3C3C; */
    margin-top: 1px;
    background: rgba(255, 255, 255, 0.04);
    font-style: italic;
    color: #b7b7b7;
    font-size: 12px;
    height: 80px;
    line-height: 1.8;
}
.settings.crew-found .description {
    height: 300px;
}
.settings .description .nano-content {
    padding: 15px 20px;
}
.settings form {
    padding: 20px;
}
.settings form input[type="text"],
.settings form input[type="password"] {
    background-color: rgba(255, 255, 255, 0.05);
    margin-right: 10px;
}
.settings .btn-mod {
    bottom: 35px;
    right: 35px;
}
.settings.settings-language .btn-mod {
    bottom: 20px;
    right: 20px;
}
.settings table {
    font-size: 11px;
    position: absolute;
    bottom: 35px;
    left: 35px;
}
.settings table tr:first-of-type td {
    padding-bottom: 2px;
    color: #BFBFBF;
}
.settings table span {
    font-weight: 400;
    line-height: 33px;
    font-size: 14px;
}
.settings table span.deletion {
    font-weight: 700;
    color: #F14B4B;
}
.settings-ipsharing table,
.settings .language table,
.settings .currency table {
    font-size: 11px;
    position: relative;
    bottom: auto;
    left: auto;
}

/* ==============================
Stars
============================== */

.stars-step .heading {
    padding: 0 20px;
    height: 46px;
    line-height: 46px;
    width: 100%;
    background: #4C4C4C;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    border-top: 1px solid #3C3C3C;
    text-transform: uppercase;
    box-shadow: 0 24px 10px rgba(255, 255, 255, 0.02) inset;
}
.stars-step:first-of-type .heading { border-top: none; }

.stars-step .heading span {
    margin-left: 5px;
    color: #ADADAD;
    font-style: italic;
    font-size: 12px;
}
.stars-step .heading span.after-info,
.stars-step .heading span.currency-info {
    float: right;
    font-size: 13px;
    color: #9C9C9C;
    text-transform: none;
}
.stars-step .heading span.currency-info { margin-right: 40px; }
.stars-step .bundles {
    padding: 40px;
    height: 321px;
}
.stars-step .providers {
    padding: 40px;
    height: 209px;
    position: relative;
}
.stars-step .bundle {
    float: left;
    width: 150px;
    height: 241px;
    background: #F0F0F0;
    margin-right: 10px;
    position: relative;
    box-shadow: 0 0 0 1px #fff;
    /*border-radius: 3px;*/
    cursor: pointer;
}
.stars-step .bundle.active {
    box-shadow: 0 0 0 2px #333, 0 0 0 5px #5affd3;
}
.stars-step .bundle:last-of-type { margin-right: 0; }
.stars-step .bundle:first-of-type .bonus { display: none; }
.stars-step .bundle .bonus {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    height: 19px;
    line-height: 19px;
    color: #fff;
    background: #A5A5A5;
    border-radius: 15px;
    font-size: 10px;
    font-weight: 600;
    padding: 0 7px;
}
.stars-step .bundle .amount,
.stars-step .bundle .cost {
    text-align: center;
    font-weight: 700;
    font-size: 30px;
    color: #9A9A9A;
    line-height: 55px;
}
.stars-step .bundle .cost {
    color: #383838;
    font-size: 24px;
    background: #E0E0E0;
    /*border-radius: 0 0 3px 3px;*/
}
.stars-step .bundle .amount {
    padding-bottom: 31px;
}
.stars-step .bundle .star-icon {
    font-size: 47px;
    line-height: 60px;
    width: 60px;
    height: 60px;
    color: #FFFFFF;
    background: #53a58f;
    border-radius: 60px;
    text-align: center;
    margin: 40px auto 0;
    box-shadow: 0 0 0 3px #4cd0ad inset, 0 0 0 5px #F0F0F0 inset;
}
.stars-step .bundle .star-icon:after {
    content: "star_rate";
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    width: 40px;
    height: 40px;
    padding: 0 7px;
    display: block;
}

.stars-step .provider {
    float: left;
    width: 110px;
    height: 129px;
    background: #fff;
    margin-right: 10px;
    position: relative;
    box-shadow: 0 0 0 1px #fff;
    /*border-radius: 3px;*/

    -webkit-transition: all 0.1s;
    -moz-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
}
.stars-step .provider:last-of-type { margin-right: 0; }
.stars-step #ajax_provider.load .provider,
.stars-step .provider.disabled {
    opacity: .3;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%);
}
.stars-step .provider a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.stars-step .provider a img { display: none; }
.stars-step .provider .icon {
    height: 100px;
    background-position: center;
    background-repeat: no-repeat;
    /*border-radius: 3px;*/
    box-shadow: 0 -6px 0 #EDEDED inset;
}
.stars-step .provider.hp .icon { background-image: url(../images/payment/hp.jpg); }
.stars-step .provider.c2p .icon { background-image: url(../images/payment/c2p.jpg); }
.stars-step .provider.eb2p .icon { background-image: url(../images/payment/eb2p.jpg); }
.stars-step .provider.dbt .icon { background-image: url(../images/payment/dbt.jpg); }
.stars-step .provider.pp .icon { background-image: url(../images/payment/pp.jpg); }
.stars-step .provider.cc .icon { background-image: url(../images/payment/cc.jpg); }
.stars-step .provider.paypal .icon { background-image: url(../images/payment/paypal.jpg); }
.stars-step .provider.psc .icon { background-image: url(../images/payment/psc.jpg); }

.stars-step .provider .name {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 17px;
    color: #777;
    padding: 7px 10px;
    height: 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #E0E0E0;
}
.stars-step .provider.eb2p .name {
    line-height: 8px;
}
#ajax_provider.load:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* ==============================
Tutorial
============================== */

.tutorial-modal {
    width: 600px;
    height: 440px;
}
.tutorial-left {
    float: left;
    width: 150px;
    height: 100%;
    background: #2f2f2f;
    border-right: 1px solid #424242;
    box-shadow: -3px 0 1px rgba(0, 0, 0, 0.09) inset;
}
.tutorial-right {
    float: right;
    width: 450px;
    height: 100%;
}
.tutorial-right .padding {
    padding: 20px;
}
.tutorial-left a {
    display: block;
    line-height: 39px;
    border-bottom: 1px solid #292929;
    font-size: 12px;
    padding: 0 15px;
}
.tutorial-left a:last-of-type {
    border: none;
}
.tutorial-left a:before {
    display: block;
    float: left;
    width: 12px;
    text-align: center;
    margin-right: 10px;
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.tutorial-left a[data-icon-tutorial="account"]:before { content: 'account_box'; }
.tutorial-left a[data-icon-tutorial="basics"]:before { content: 'play_circle_filled'; }
.tutorial-left a[data-icon-tutorial="cars"]:before { content: 'drive_eta'; }
.tutorial-left a[data-icon-tutorial="workshop"]:before { content: 'build'; }
.tutorial-left a[data-icon-tutorial="look"]:before { content: 'portrait'; }
.tutorial-left a[data-icon-tutorial="skills"]:before { content: 'equalizer'; }
.tutorial-left a[data-icon-tutorial="crew"]:before { content: '\e926'; font-family: 'icomoon'; }
.tutorial-left a[data-icon-tutorial="races"]:before { content: 'public'; }
.tutorial-left a[data-icon-tutorial="championships"]:before { content: '\f356'; font-family: 'Ionicons'; }
.tutorial-left a[data-icon-tutorial="perks"]:before { content: 'local_activity'; }
.tutorial-left a[data-icon-tutorial="levelups"]:before { content: 'exposure_plus_1'; }
.tutorial-left a.active {
    background: rgba(255, 255, 255, 0.02);
}
.tutorial-left a.active:after {
    position: absolute;
    right: 5px;
    font-family: 'Material Icons';
    content: 'chevron_right';
    color: #fff;
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

.tutorial-right .heading {
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}
.tutorial-right p,
.tutorial-right ul {
    margin-bottom: 20px;
    color: #bfbfbf;
    font-size: 13px;
}
.tutorial-right p:last-of-type {
    margin: 0;
}

/* ==============================
Crew - Profile - Modal
============================== */

.profile-modal {
    width: 1030px;
    height: 630px;
    background: #222;
}
.profile-modal table {
    color: #ddd;
}
.modal-content .profile-modal {
    width: 100%;
    height: 100%;
}
.profile-nav.bottom.small a {
    width: 33.3%;
    float: left;
    border-right: 1px solid #383838;
    text-align: center;
    border-top: 1px solid #353535;
}
.profile-nav.bottom.small.two-items a { width: 50%; }

.profile-modal.bottom.small.two-items a span { margin-right: 7px; }
.profile-modal.bottom.small a:last-of-type {
    border-right: none;
}
.profile-modal.bottom.small a.disabled {
    display: none;
}

/* ==============================
Bots
============================== */

span.bot:before {
    font-family: 'icomoon';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none;
    float: left;
    margin-right: 5px;
    content: '\e927';
    font-size: 1.1em;
    top: -1px;
    position: relative;
}

/* ==============================
Profile
============================== */

[data-icon-profile] {
    position: relative;
}
[data-icon-profile]:before,
[data-icon-profile]:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    display: inline-block;
    text-align: center;
    font-size: 14px;
    line-height: 1;
    position: relative;
    top: 2px;
    text-transform: none;
}
[data-icon-profile="pn"]:before { content: 'mail'; font-size: 16px; }
[data-icon-profile="crew-invitation"]:before { content: '\e926'; font-family: 'icomoon'; }
[data-icon-profile="report"]:before { content: 'report'; font-size: 16px; }

[data-icon-profile="satellite"]:before { content: 'satellite'; }
[data-icon-profile="upcoming"]:before { content: 'alarm'; }
[data-icon-profile="finished"]:before { content: 'check_circle'; }
[data-icon-profile="records"]:before { content: '\f349'; font-family: 'Ionicons'; }

[data-icon-profile="championships"]:before,
[data-icon-profile="cup"]:before { content: '\f356'; font-family: 'Ionicons'; }

[data-icon-profile="crew"]:before { content: '\e926'; font-family: 'icomoon'; }
[data-icon-profile="perks"]:before { content: 'local_activity'; }
[data-icon-profile="drivers"]:before { content: 'person'; }
[data-icon-profile="cars"]:before { content: 'directions_car'; }
[data-icon-profile="info"]:before { content: 'info_outline'; }
[data-icon-profile="admin"]:before { content: 'settings'; }
[data-icon-profile="found"]:before { content: 'add_circle'; }
[data-icon-profile="look"]:before { content: 'portrait'; }
[data-icon-profile="skills"]:before { content: 'equalizer'; }
[data-icon-profile="races"]:before { content: 'flag'; }
[data-icon-profile="reward"]:before { content: 'monetization_on'; }
[data-icon-profile="signup"]:before { content: 'assignment_turned_in'; }
[data-icon-profile="championship-results"]:before { content: 'format_list_bulleted'; }
[data-icon-profile="performance"]:before { content: 'poll'; }

[data-icon-profile="comparison"]:before { content: 'compare_arrows'; }
[data-icon-profile="buy"]:before { content: 'store'; font-size: 18px; top: 5px; }
[data-icon-profile="results"]:before
{ content: "\f356"; font-family: "Ionicons"; }
[data-icon-profile="achievments"]:before { content: "\f349"; font-family: "Ionicons"; }
[data-icon-profile="enter"]:before { content: '\e914'; font-family: 'icomoon'; }
[data-icon-profile="signup-select"]:before { content: 'fiber_manual_record'; }
[data-icon-profile="sell"]:before { content: '\e91b'; font-family: 'icomoon'; font-size: 17px; top: 3px; }
[data-icon-profile="invitations-out"]:before {content: 'inbox';left: -5px;}
[data-icon-profile="invitations-in"]:before {content: 'inbox';}
[data-icon-profile="invitations-out"]:after {
    font-family: 'Ionicons';
    position: absolute;
    left: 8px;
    top: 3px;
    width: 100%;
}
[data-icon-profile="invitations-out"]:after { content: "\f10e"; }

[data-icon-profile="crew-invitation"]:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'add';
    position: absolute;
    right: -12px;
    top: -7px;
    width: 100%;
    width: 11px;
    height: 11px;
    line-height: 11px;
    text-align: center;
}
.check [data-icon-profile="crew-invitation"]:after {
    content: 'check';
}
[data-new-invitations] {
    position: absolute;
    top: 8px;
    left: 28px;
    display: block;
    height: 14px;
    min-width: 14px;
    padding: 0 3px 0 2px;
    line-height: 14px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    background: #ca3333;
    text-decoration: none;
}
[data-new-invitations="0"] {
    display: none;
}

.profile-content {
    width: 100%;
    height: 100%;
}
.profile-content .inner {
    width: 100%;
    height: 100%;
    position: relative;
}
.profile-left {
    background: #424242;
    width: 200px;
    height: 100%;
    float: left;
    position: relative;
}
.profile-right {
    float: right;
    width: 780px;
    height: 100%;
}
.profile-picture {
    height: 226px;
    background: #242424;
    text-align: center;
}
.profile-picture.car {
    padding: 0 5px;
    height: 192px;
}
.profile-left .heading-nav  {
    text-transform: none;
    position: relative;
    padding: 0;
}
.profile-left .heading-nav span.online {
    background: #76c576;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 50%;
    right: 15px;
    position: absolute;
    transform: translateY(-50%);
}
.profile-right .table-nav .additional {
    float: right;
    margin-right: 46px;
}
.profile-right .table-nav .additional a {
    width: 44px;
    text-align: center;
    margin: 0;
    padding: 0;
    background: #383838;
    margin-left: 1px;
    height: 38px;
    line-height: 38px;
    margin-top: 4px;
}
.profile-right .table-nav .additional a:after,
.profile-right .table-nav .additional a:before {
    display: none;
}
.profile-nav {
    border-bottom: none;
    padding: 0;
    border-top: 1px solid #3A3A3A;
}
.profile-nav.bottom,
.profile-modal-nav.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 0 #353535 inset;
}
.profile-nav a {
    color: #7D7D7D;
    line-height: 46px;
    height: 46px;
    font-size: 13px;
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
    cursor: pointer;
    background: #424242;
    margin: 0;
    border-bottom: 1px solid #3A3A3A;
    padding: 0 !important;
    text-transform: !none;
    text-align: center;
}
.profile-nav.bottom a,
.profile-modal-nav.bottom a {
    border-top: 1px solid #3A3A3A;
    border-bottom: none;
}
.profile-modal-nav.bottom a img {
    position: relative;
    top: -3px;
    margin-right: 5px;
}
.profile-nav a:hover {
    color: #eee;
}
.profile-nav a.active {
    color: #fff;
    background: #4E4E4E;
}

.profile-inner {
    padding: 30px;
}

/* ==============================
Profile - Look
============================== */

.look-box {
    width: 308px;
    height: 543px;
    float: right;
    /* background: #fff; */
    position: absolute;
    right: 0;
}
.look-box .look-nav {
    background-color: #4C4C4C;
    line-height: 35px;
    border-top: 1px solid #3C3C3C;
}
.look-box .look-nav a {
    display: block;
    color: #C3C3C3;
    width: 25%;
    float: left;
    text-align: center;
    border-right: 1px solid #3C3C3C;
    font-size: 12px;
    text-decoration: none;
}
.look-box .look-nav a.active {
    background-color: #4C4C4C;
    color: #fff;
}
.look-box .look-nav a:last-of-type,
.look-box .look-filter a:last-of-type {
    border-right: none;
}
.look-box .look-items {
    height: 398px;
}
.look-box .look-items.clothing-items {
    height: 315px;
}
.look-box .look-input {
    height: 108px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.1);
}

.face {
    position: relative;
    height: 100%;
    width: 100%;
}
.face .padding {
    padding: 20px 28px 0 27px;
}
.face .padding:last-of-type {
    padding-bottom: 25px;
}
.face label {
    display: block;
    font-weight: 400;
    font-size: 12px;
    border-top: 1px solid #464646;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0 5px;
}
.face .gender label {
    border: none;
}
.face .items {
    margin-top: 2px;
}
.face .items a {
    float: left;
    display: block;
    text-align: center;
    background: #464646;
    color: #fff;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 12px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    line-height: 38px;
}
#ajax_look a.check {
    box-shadow: 0 0 0 1px #3C3C3C, 0 0 0 2px #fff;
}
#ajax_look a.check:after {
    font-family: "FontAwesome";
    content: '\f00c';
    position: absolute;
    bottom: 2px;
    right: 2px;
    line-height: 10px;
    width: 10px;
    font-size: 8px;
    text-align: center;
}
.face .haircolor a:last-of-type,
.face .skincolor a:last-of-type,
.face .gender a:last-of-type,
.face a:nth-child(6) { margin-right: 0; }
.face a { width: 38px; height: 38px; }
.face .gender a { width: 124px; }
.face .skincolor a { width: 59px; }
.face .skincolor a:first-of-type,
.face .skincolor a:last-of-type { width: 60px; }


[data-look-icon="male"]:before,
[data-look-icon="female"]:before {
    font-family: "Ionicons";
    margin-right: 8px;
    font-weight: 100;
    font-size: 24px;
    line-height: 24px;
    position: relative;
    top: 5px;
}
[data-look-icon="male"]:before { content: "\f202"; }
[data-look-icon="female"]:before { content: "\f25d"; }

[data-look-type="skincolor"][data-id="1"] { background: #fdcbb8 !important; }
[data-look-type="skincolor"][data-id="2"] { background: #c48e71 !important; }
[data-look-type="skincolor"][data-id="3"] { background: #674a39 !important; }
[data-look-type="skincolor"][data-id="4"] { background: #3C2B21 !important; }

[data-look-type="eyecolor"][data-id="1"] { background: #b5b8bb !important; }
[data-look-type="eyecolor"][data-id="2"] { background: #548498 !important; }
[data-look-type="eyecolor"][data-id="3"] { background: #5f6940 !important; }
[data-look-type="eyecolor"][data-id="4"] { background: #a0614c !important; }
[data-look-type="eyecolor"][data-id="5"] { background: #9f7646 !important; }

[data-look-type="haircolor"][data-id="1"] { background: #232323 !important; }
[data-look-type="haircolor"][data-id="2"] { background: #593824 !important; }
[data-look-type="haircolor"][data-id="3"] { background: #925632 !important; }
[data-look-type="haircolor"][data-id="4"] { background: #c2ad77 !important; }
[data-look-type="haircolor"][data-id="5"] { background: #eadaaa !important; }
[data-look-type="haircolor"][data-id="6"] { background: #c65944 !important; }

.look-image {
    width: 470px;
    height: 543px;
    background: #242424;
    float: left;
    position: relative;
}
.look-image:after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 1px #383838 inset;
}
.look-image #body,
.look-image #clothes,
.look-image #clothes_back {
    width: 470px;
    height: 543px;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center bottom;
    background-size: 500px; /* 610: 0,9633% */
    background-repeat: no-repeat;
}
.look-image #hair_back {
    width: 346px;
    height: 414px;
    margin: 0 62px 0;
    position: absolute;
    background-size: 346px;
}
.look-image .userimg {
    width: 346px;
    height: 414px;
    margin: 0 62px 0;
    position: relative;
}
.look-image .userimg div {
    width: 346px;
    height: 414px;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 346px;
}

.face #delete-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #3C3C3C;
    padding: 30px;
}
.face #delete-box .heading {
    border-bottom: 1px solid #777;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.face #delete-box .delete-item-text {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #777;
}
.face #delete-box .delete-item-text span {
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    margin: 0 3px;
}
.face #delete-box a.btn {
    width: inherit;
    height: inherit;
    float: right;
    margin-left: 5px;
}
.look-cost {
    width: 100%;
}
.look-cost .btn {
    padding: 15px 10px;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
}
.look-cost .btn table tr td {
    width: 50%;
    text-align: center;
}
.look-cost .btn table tr:first-of-type td {
    padding-bottom: 2px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 400;
}
.look-cost .btn table tr td:first-of-type {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.look-cost .btn .money,
.look-cost .btn .stars {
    font-weight: 700;
    font-size: 15px;
}
.look-cost .btn table tr td.send {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    padding: 0;
}
.haircut,
.clothes {
    padding: 21px 0 16px 21px;
}
[data-look-type].focus {
    background: #545454;
}
[data-look-type="haircut"],
[data-look-type="beard"],
[data-look-type="clothes"] {
    width: 85px;
    height: 102px;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #464646;
    display: block;
    float: left;
    position: relative;
}
[data-look-type="clothes"] {
    width: 129px;
    height: 146px;
    margin-right: 7px;
    margin-bottom: 7px;
}
[data-look-type="haircut"][data-money="0"]:before,
[data-look-type="beard"][data-money="0"]:before,
[data-look-type="clothes"][data-money="0"]:before {
    position: absolute;
    content: '';
    right: 5px;
    top: 5px;
    width: 6px;
    height: 6px;
    background: #FFBA19;
    border-radius: 30px;
}
[data-look-type="haircut"]:nth-child(3n),
[data-look-type="beard"]:nth-child(3n),
[data-look-type="clothes"]:nth-child(2n) { margin-right: 0; }
[data-look-type="haircut"] .num,
[data-look-type="beard"] .num,
[data-look-type="clothes"] .num {
    position: absolute;
    top: 2px;
    left: 5px;
    color: #999;
    font-size: 9px;
}
[data-look-type="haircut"][data-money="0"] .num,
[data-look-type="beard"][data-money="0"] .num,
[data-look-type="clothes"][data-money="0"] .num {
    color: #FFBA19;
}
[data-look-type="haircut"] .head,
[data-look-type="haircut"] .hair,
[data-look-type="haircut"] .hair_back,
[data-look-type="beard"] .head,
[data-look-type="beard"] .beard,
[data-look-type="beard"] .beard_mouth,
[data-look-type="clothes"] .body,
[data-look-type="clothes"] .clothes,
[data-look-type="clothes"] .clothes_back,
[data-look-type="clothes"] .hair,
[data-look-type="clothes"] .hair_back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 85px;
    background-repeat: no-repeat;
}
[data-look-type="clothes"] .body,
[data-look-type="clothes"] .clothes,
[data-look-type="clothes"] .clothes_back,
[data-look-type="clothes"] .hair,
[data-look-type="clothes"] .hair_back {
    background-size: 130px;
}
[data-look-type="clothes"] .hair,
[data-look-type="clothes"] .hair_back {
    background-size: 90px;
    background-position: center 6px;
}
#ajax_look { height: 506px; position: relative; }
#ajax_look .male-only {
    color: #9C9C9C;
    font-size: 12px;
    font-style: italic;
    text-align: center;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.look-color {
    height: 83px;
    padding: 16px 15px 7px;
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
}
.look-color a {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    margin-right: 3px;
    color: #fff;
}

[data-look-type="clothingcolor"][data-id="1"] { background: #232323 !important; }
[data-look-type="clothingcolor"][data-id="2"] { background: #999999 !important; }
[data-look-type="clothingcolor"][data-id="3"] { background: #FDFDFD !important; color: #111; }
[data-look-type="clothingcolor"][data-id="4"] { background: #a10f0f !important; }
[data-look-type="clothingcolor"][data-id="5"] { background: #533123 !important; }
[data-look-type="clothingcolor"][data-id="6"] { background: #d86618 !important; }
[data-look-type="clothingcolor"][data-id="7"] { background: #e0b402 !important; }
[data-look-type="clothingcolor"][data-id="8"] { background: #86b033 !important; }
[data-look-type="clothingcolor"][data-id="9"] { background: #1a8435 !important; }
[data-look-type="clothingcolor"][data-id="10"] { background: #34c4ab !important; }
[data-look-type="clothingcolor"][data-id="11"] { background: #61a4c9 !important; }
[data-look-type="clothingcolor"][data-id="12"] { background: #115C8B !important; }
[data-look-type="clothingcolor"][data-id="13"] { background: #1E2446 !important; }
[data-look-type="clothingcolor"][data-id="14"] { background: #871eb1 !important; }
[data-look-type="clothingcolor"][data-id="15"] { background: #ea0fa6 !important; }

/* ==============================
Profile - Info
============================== */

.profile-picture.crew {
    padding: 14px 0;
}
.profile-linked {
    padding: 16px;
    background: #3a3a3a;
}
.profile-linked table {
    background: #4c4c4c;
}
.profile-linked table tr td:first-of-type {
    width: 32px;
    background: #3E3E3E;
    box-shadow: 0 0 0 1px rgb(76, 76, 76) inset;
}
.profile-linked table a {
    display: block;
    padding: 0 12px;
    line-height: 32px;
}
.profile-shortinfo {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.profile-shortinfo.top {
    bottom: auto;
    top: 51px;
    border-bottom: 1px solid #333;
}
.profile-shortinfo table {
    background: #404040;
}
.profile-shortinfo table tr {
    height: 36px;
    font-size: 12px;
}
.profile-shortinfo table td {
    border-top: 1px solid #333333;
    padding: 0 15px;
}
.profile-shortinfo table tr td:first-of-type {
    text-transform: uppercase;
}
.profile-shortinfo table tr td:last-of-type {
    text-align: right;
    border-left: 1px solid #333333;
    width: 50%;
}
.profile-shortinfo table tr:last-of-type td {
    border-bottom: none;
}
.profile-shortinfo table tr.with-bar {
    height: 50px;
}
.profile-shortinfo table tr td span.minus {
    color: #d65b53;
    font-weight: 700;
    margin-left: 3px;
}
.profile-shortinfo table tr td span.name {
    float: left;
    margin-top: 8px;
}
.profile-shortinfo table tr td span.value {
    float: right;
    margin-top: 8px;
}
.profile-shortinfo table tr td .bar {
    width: 100%;
    background: rgba(255, 255, 255, 0.2) !important;
    height: 4px;
    position: relative;
    display: inline-block;
    top: -10px;
}
.profile-shortinfo table tr td .bar .bar-inner {
    background: #76c576 !important;
    position: absolute;
    left: 0;
    height: 100%;
}
.profile-shortinfo table tr td .bar .bar-inner.original {
    background: #D2D2D2 !important;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2);
}

/* ==============================
Profile - Skills
============================== */

.profile-skills .skills {
    float: left;
    width: 50%;
    padding-right: 10px;
}
.profile-skills .perks {
    float: right;
    width: 50%;
    padding-left: 10px;
}
.profile-skills table {
    background: #353535;
}
.profile-skills table tr {
    height: 48px;
}
.profile-skills table tr td {
    font-size: 13px;
    border-bottom: 1px solid #3C3C3C;
    border-right: 1px solid #3C3C3C;
    color: #A2A2A2;
}
.profile-skills table tr td:last-of-type { border-right: none; }
.profile-skills table tr:last-of-type td { border-bottom: none; }

.profile-skills table tr td.icon {
    color: #ECECEC;
    background: #303030;
    width: 59px;
    text-align: center;
}
.profile-skills table tr td.name {
    padding: 0 20px;
    border-right: none;
}
.profile-skills .perks table tr td.name {
    width: auto;
}
.profile-skills table tr td.countdown {
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
    padding: 0 20px 0 0;
    width: 120px;
    font-weight: 600;
}
.profile-skills table tr td.progress {
    width: 60px;
    text-align: center;
    color: #fff;
    background: #303030;
    font-weight: 700;
    font-size: 14px;
}
.profile-skills span[data-skill-icon],
.profile-skills span[data-perk-icon] {
    color: #ECECEC;
    line-height: 27px;
    font-weight: 100;
    font-size: 12px;
    text-align: center;
    width: 27px;
    height: 27px;
    margin: 0;
    display: inline-block;
}
.profile-skills span[data-skill-icon]:before,
.profile-skills span[data-perk-icon]:before {
    font-size: 24px;
}

/* ==============================
Crew - Info
============================== */

.profile-inner .chart {
    height: 236px;
    background: #353535;
    padding: 20px 15px 0 10px;
    margin-bottom: 10px;
}
.profile-inner .profile-cars {
    background: #353535;
    height: 236px;
}
.profile-inner .profile-info .profile-cars table tr:first-of-type {
    height: 48px;
}
.profile-inner .profile-info .profile-cars table tr {
    height: 47px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.profile-inner .profile-info .profile-cars table tr:last-of-type {
    border: none;
}
.profile-inner .profile-cars tr td {
    /* box-shadow: 0 1px 0 #3C3C3C, 1px 0 0 #3C3C3C; */
    font-size: 12px;
    padding: 8px 15px;
}
.profile-inner .profile-cars td.car {
    width: 60px;
    padding: 0;
    background: rgba(0,0,0,0.1);
}
.profile-inner .profile-cars tr td.car-name .model {
    font-style: italic;
    font-weight: 700;
}
.profile-inner .profile-cars tr td.car-level {
    width: 60px;
    padding: 0;
    text-align: center;
}
.profile-inner .profile-cars tr td.car-class {
    width: 42px;
    padding: 0;
    text-align: center;
}
.profile-inner .profile-cars tr td.car-class .carclass {
    color: rgba(0, 0, 0, 0.5);
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 20px;
    font-weight: 800;
    font-size: 12px;
}
.profile-inner .profile-info {
    margin-bottom: 10px;
}
.profile-inner .profile-info:last-of-type {
    margin-bottom: 0;
}
.profile-inner .profile-info .left-half {
    float: left;
    width: 50%;
    padding-right: 5px;
}
.profile-inner .profile-info .right-half {
    float: right;
    width: 50%;
    padding-left: 5px;
}
.profile-inner .profile-info table {
    background: #353535;
}
.profile-inner .profile-info table tr {
    height: 36px;
}
.profile-inner .profile-info table td {
    /* box-shadow: 0 1px 0 #3C3C3C, 1px 0 0 #3C3C3C; */
    padding: 0 10px;
    font-size: 12px;
}
.profile-inner .profile-info table tr.blank td {
    box-shadow: none;
    padding: 0;
    height: 10px;
    background: #3C3C3C;
}
.profile-inner .profile-info table tr td:first-of-type {
    font-weight: 600;
}
.profile-inner .profile-info table tr td.center {
    text-align: center;
    width: 33.3%;
}
.profile-inner .news {
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
    font-size: 12px;
}
.profile-inner .news td {
    padding: 9px 15px;
}
.profile-inner .news:last-of-type {
    border: none;
}
.profile-inner .news .time {
    font-weight: 600;
    color: #777;
    font-size: 11px;
    line-height: 11px;
    text-align: center;
    width: 50px;
    background: rgba(0,0,0,0.1);
}
.profile-inner .news .message {
    color: #999;
    padding: 8px 10px;
}

/* ==============================
Crew - Drivers List
============================== */

.crew-inner .crew-list {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    float: right;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
    text-align: center;
    font-size: 19px;
    border-radius: 36px;
    box-shadow: 0 0 0 2px #fff inset;
}
.crew-inner .crew-list:after {
    content: "view_list";
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.crew-inner .kick,
.profile-inner .kick {
    font-size: 16px;
    width: 24px;
    height: 24px;
    /* line-height: 26px; */
    display: inline-block;
    text-align: center;
}
.crew-inner .kick:after,
.profile-inner .kick:after {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: 'cancel';
}
.profile-inner .crew-news {
    /* box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.11); */
}

/* ==============================
Crew - Perks
============================== */

.crew-perks-right .heading.center {
    text-align: center;
}
.crew-perks-left {
    width: 50%;
    height: 482px;
    float: left;
    padding-right: 15px;
    position: relative;
}
.crew-perks-right {
    width: 50%;
    height: 482px;
    float: right;
    padding-left: 15px;
    position: relative;
}
.crew-perks .perk {
    height: 72px;
    line-height: 70px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    background: #404040;
    color: #ececec;
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.crew-perks .perk:last-of-type {
    margin-bottom: 0;
}
.crew-perks-left .perk:hover {
    border: 1px solid #aaa;
    cursor: pointer;
}
.crew-perks .perk.active,
.crew-perks .perk.active:hover {
    background: #3C3C3C;
    border: 1px solid #5affd3;
}
.crew-perks .perk span[data-perk-icon] {
    width: 40px;
}
.crew-perks .perk span[data-perk-icon]:before {
    font-size: 22px;
    font-weight: 100;
    position: relative;
    top: 5px;
    line-height: 10px;
}
.crew-perks .perk td:nth-child(1) {
    padding: 0 20px;
    width: 70px;
    text-align: center;
    background: #333;
    color: #ECECEC;
}
.crew-perks .perk td:nth-child(2) {
    padding: 0 20px;
}
.crew-perks .perk td:nth-child(3) {
    text-align: center;
    width: 80px;
}

/* right */

.crew-perks-right .inner {
    height: 100%;
}
.crew-perk-info-box {
    width: 100%;
    height: 337px;
    padding: 0;
}
.crew-perk-progress-box {
    padding: 0 0 10px;
    height: 145px;
    width: 100%;
}
.crew-perk-info,
.crew-perk-progress {
    height: 100%;
    position: relative;
}

.crew-perk-info .level {
    position: absolute;
    right: 15px;
    color: #5affd3;
    font-size: 13px;
}
.crew-perk-info .icon i {
    font-size: 80px;
}
.crew-perk-progress .total i {
    color: #888;
    font-style: normal;
    margin-left: 5px;
}
.crew-perk-info .info {
    padding: 30px 20px;
}
.choose .crew-perk-info .info {
    padding: 20px 20px;
}
.crew-perk-info .steps tr td {
    text-align: center;
}
.crew-perk-info .steps tr td span {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 30px;
    background: rgba(0, 0, 0, 0.17);
    display: inline-block;
    position: relative;
    font-size: 10px;
}
.crew-perk-info .steps tr td span.active {
    box-shadow: 0 0 0 2px #5affd3 inset, 0 0 10px rgba(90, 255, 211, 0.5);
    background: rgba(255, 255, 255, 0.2);
}
.crew-perk-info .steps tr td span.active:after {
    content: "\f058";
    font-family: "FontAwesome";
    font-size: 12px;
    bottom: 0;
    right: 0;
    position: absolute;
    color: #5affd3;
    line-height: 10px;
    height: 10px;
    background: #404040;
    border-radius: 20px;
}
.crew-perk-info .info .icon {
    float: left;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    line-height: 80px;
    color: #fff;
}
.crew-perk-info .info .icon span[data-perk-icon="xp"],
.crew-perk-info .info .icon span[data-perk-icon="rp"],
.crew-perk-info .info .icon span[data-perk-icon="money"]{
    height: 100px;
    display: block;
}
.crew-perks-right .info .description {
    float: right;
    width: 215px;
    font-size: 13px;
}
.crew-perks-right .choose .info .description {
    width: auto;
    padding: 0;
    text-align: center;
}
.crew-perk-info .upgrade {
    padding: 20px;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
}
.crew-perk-info-box.choose .crew-perk-info .upgrade .checkbox-mod {
    margin: 0 0 10px;
}
.crew-perks-right table tr td.total,
.crew-perks-right .perk-point {
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: #fff;
}
.crew-perk-info .upgrade .perk-point {
    font-size: 15px;
    line-height: 21px;
}
.crew-perks-right .perk-point:before {
    content: 'local_activity';
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-weight: 200;
    top: 4px;
    position: relative;
    margin-right: 3px;
    color: #fff;
}
.crew-perks-right .upgrade .perk-point:before {
    top: 4px;
    margin-right: 4px;
    font-size: 18px;
    line-height: 16px;
}
.crew-perk-info .upgrade .btn {
    padding: 15px 10px;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
}
.crew-perk-progress table tr td {
    width: 50%;
    text-align: center;
}
.crew-perk-progress table tr td:first-of-type {
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}
.crew-perk-progress table tr:first-of-type td{
    padding-bottom: 2px;
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    font-weight: 400;
}
.crew-perk-progress .inner {
    padding: 20px;
    height: auto;
}
#ajax_crew_perk {
    height: 337px;
}
.crew-perk-info .table-nav-sub {
    padding: 10px;
}

/* ==============================
Crew - Admin / Found
============================== */

.crew-admin form input[type="text"],
.crew-admin form .file-mod,
.crew-admin form .select-mod,
.crew-admin form .checkbox-mod {
    width: 213px;
    position: absolute;
    bottom: 32px;
    left: 35px;
}
.crew-admin .btn-mod {
    bottom: 32px;
    right: 35px;
}
.crew-admin form .file-mod label,
.crew-admin form .checkbox-mod label {
    width: 100%;
}
.crew-admin.settings .half-box .description {
    height: 95px;
}
.crew-found-box ul {
    margin: 10px 0 0;
    padding-left: 20px;
}
.crew-found.settings table {
    bottom: 20px;
    left: 20px;
}
.crew-found.settings .btn-mod {
    bottom: 20px;
    right: 20px;
}
.crew-found.settings form input[type="text"] {
    width: 243px;
}

/* ==============================
Bank
============================== */

.bank-left {
    width: 50%;
    height: 100%;
    float: left;
}
.bank-right {
    width: 50%;
    height: 100%;
    float: right;
}
.bank-left .inner,
.bank-right .inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.bank-balance-box,
.bank-trend-box {
    width: 100%;
    height: 50%;
    padding: 0 0 10px;
}
.bank-trend-box {
    padding: 10px 0 0;
}
.bank-balance,
.bank-trend {
    height: 100%;
}
.bank-balance .inner {
    padding: 20px 30px;
    height: auto;
}
.bank-balance table tr td {
    width: 25%;
    height: 39px;
}
.bank-trend .chart {
    padding: 20px 15px 0 10px;
    height: 238px;
}



/* ==============================
Garage
============================== */

.garage {
    width: 100%;
    height: 100%;
}
.garage .inner {
    width: 100%;
    height: 100%;
    position: relative;
}
.garage .table-mod tbody tr {
    height: 60px;
}
.garage table tr a[data-icon-profile="enter"] {
    color: rgba(255, 255, 255, 0.6);
    background: #505050;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}
.garage table tr a[data-icon-profile="enter"].active {
    box-shadow: 0 0 0 2px #5affd3 inset;
    background: #3C3C3C;
}
.garage table tr a[data-icon-profile="enter"].active:before {
    color: #fff;
    content: '\f00c';
    font-family: 'FontAwesome';
}

.garage .garage-limit {
    float: right;
    text-transform: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-right: 20px;
}


/* ==============================
Workshop
============================== */

.workshop-left {
    width: 73%;
    height: 100%;
    float: left;
}
.workshop-right {
    width: 27%;
    height: 100%;
    float: right;
}
#ajax_workshop {
    height: 100%;
}
.workshop-right .inner,
.workshop-left .inner {
    position: relative;
    height: 100%;
    width: 100%;
}
.workshop-image {
    height: 484px;
    text-align: center;
    line-height: 484px;
    box-shadow: 0 0 230px 70px rgba(0, 0, 0, 0.2) inset;
    background: #333;
    position: relative;
}
.workshop-image .locked-msg {
    line-height: 50px;
    height: 50px;
    border-bottom: 1px solid #353535;
    border-top: 1px solid #222;
    background: #262626;
    box-shadow: 0 -2px 1px rgba(0, 0, 0, 0.1) inset, 0 2px 1px rgba(0, 0, 0, 0.1) inset;
    color: #e8e8e8;
    text-align: center;
    position: absolute;
    top: 0;
    font-size: 12px;
    padding: 0 15px 0 10px;
    width: 100%;
}
.workshop-image .locked-msg:before {
    vertical-align: middle;
    content: 'lock';
    margin-right: 10px;
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.workshop-items {
    height: 58px;
}
.workshop-items a {
    width: 65px;
    height: 58px;
    line-height: 58px;
    float: left;
    border-right: 1px solid #333;
    text-align: center;
    font-size: 18px;
    color: #A5A5A5;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    -ms-transition: color 0.3s;
    transition: color 0.3s;
}
.workshop-items a:nth-child(3n) {
    width: 66px;
}
.workshop-items a:nth-last-child(2) {
    /*width: 62px;*/
}
.workshop-items a:last-of-type {
    border: none;
}
.workshop-items a:hover {
    color: #fff;
}
.workshop-items a.active {
    color: #fff;
    background: #4F4F4F;
}
.workshop-items a span {
    position: absolute;
    bottom: 6px;
    right: 8px;
    color: #999;
    font-size: 9px;
    line-height: 1;
}
.workshop-right .input {
    padding: 20px;
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    width: 100%;
}
.workshop-right .input .btn {
    padding: 10px;
    text-transform: none;
    letter-spacing: 0;
    width: 100%;
    margin: 0 0 15px;
}
.workshop-right .input form:last-of-type .btn {
    margin: 0;
}
.workshop-right .car-status .level .carlvl {
    border-radius: 22px;
    line-height: 18px;
    padding: 3px 0;
    width: 46px;
    text-align: center;
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #DEDEDE;
}
.workshop-right .car-data table tr {
    height: 41px;
    font-size: 12px;
}
.workshop-right .car-data table tr.small-tr {
    height: 40px;
}
.workshop-right .car-data table td {
    border-bottom: 1px solid #3f3f3f;
    padding: 0;
    text-align: center;
}
.workshop-right .car-data table tr td:first-of-type {
    border-right: 1px solid rgba(255, 255, 255, 0.02);
    text-transform: uppercase;
    text-align: left;
    width: 50%;
    padding: 0 15px;
}
.workshop-right .car-data table tr td:nth-child(2) {
    font-weight: 700;
    width: 25%;
}
.workshop-right .car-data table tr td:last-of-type {
    border-right: none;
    background: rgba(0,0,0,0.1);
    font-weight: 700;
}
.workshop-right .car-data table tr:last-of-type td {
    border-bottom: none;
}
.workshop-restrictions,
.workshop-right .car-status,
.workshop-title,
.workshop-style-colors {
    text-align: center;
    line-height: 46px;
    background: #464646;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}
.workshop-title {
    text-transform: uppercase;
}
.workshop-restrictions .tuning-left,
.workshop-restrictions .tuning-progress,
.workshop-right .car-status .health,
.workshop-right .car-status .level {
    width: 50%;
    float: left;
}
.workshop-right .car-status .level,
.workshop-restrictions .tuning-progress {
    border-left: 1px solid #3c3c3c;
}
.workshop-right .car-status .health span[data-skill-icon],
.workshop-restrictions span[data-workshop-icon] {
    font-weight: 100;
    margin-right: 6px;
    display: inline-block;
    line-height: 18px;
    position: relative;
    top: 2px;
}
.workshop-right .car-status .health span[data-skill-icon]:before,
.workshop-restrictions span:before {
    font-size: 14px;
    line-height: 14px;
}
.workshop-restrictions span[data-workshop-icon]:not([data-workshop-icon="left"]) {
    width: 50%;
    top: 0;
    margin: 0;
    float: left;
    text-align: center;
    line-height: 46px;
}
[data-tuning].plus {
    color: #76c576;
}
[data-tuning].minus {
    color: #d65b53;
}

.workshop-repair-description {
    height: 325px;
    padding: 25px;
}
.workshop-style {
    height: 288px;
}
.workshop-style-colors {
    padding: 15px 15px 10px;
}
.workshop-style-colors a {
    float: left;
    width: 24px;
    height: 24px;
    margin-right: 5px;
    margin-bottom: 5px;
    display: block;
    color: #fff;
}
.workshop-style-colors a:nth-child(8) {
    margin-right: 0;
}
.workshop-style-colors a.check {
    box-shadow: 0 0 0 1px #3C3C3C, 0 0 0 2px #fff;
}
.workshop-style-colors a.check:before {
    font-family: "FontAwesome";
    content: '\f00c';
    position: absolute;
    bottom: 2px;
    right: 2px;
    line-height: 10px;
    width: 10px;
    font-size: 8px;
    text-align: center;
}
.workshop-car-data {
    padding: 10px;
}
.workshop-car-data table tr td {
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    width: 14.3%;
    text-align: center;
}
.workshop-car-data table tr td:last-of-type {
    border: none;
}
.workshop-car-data table tr:first-of-type td {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
}
.workshop-car-data table tr:last-of-type td {
    font-size: 14px;
    font-weight: 700;
}
.workshop-shop-items {
    height: 267px;
}
.workshop-shop-items .padding {
    padding: 21px 0 16px 21px;
}
.workshop-shop-items a {
    width: 68px;
    height: 82px;
    margin-right: 5px;
    margin-bottom: 5px;
    background-color: #464646;
    background-size: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    float: left;
    position: relative;
}
.workshop-shop-items a:nth-child(3n) {
    margin-right: 0;
}
.workshop-shop-items.large a {
    margin-right: 0;
    width: 215px;
    line-height: 40px;
    height: 40px;
    text-align: center;
}
.workshop-shop-items a .num {
    position: absolute;
    top: 2px;
    left: 5px;
    color: #999;
    font-size: 9px;
}
.workshop-shop-items a.check {
    box-shadow: 0 0 0 1px #3C3C3C, 0 0 0 2px #fff;
}
.workshop-shop-items a.focus {
    background-color: #545454;
}
.workshop-shop-items a.check:after {
    font-family: "FontAwesome";
    content: '\f00c';
    position: absolute;
    bottom: 2px;
    right: 2px;
    line-height: 10px;
    width: 10px;
    font-size: 8px;
    text-align: center;
}

.workshop-shop-color {
    height: 104px;
    padding: 16px 10px 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.25);
}
.workshop-shop-color a {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-right: 3px;
    background: #aaa;
    color: #fff;
}
.workshop-shop-color a:nth-child(9n) { margin-right: 0; }
.workshop-shop-color a.check {
    box-shadow: 0 0 0 1px #3C3C3C, 0 0 0 2px #fff;
}
.workshop-shop-color a.check:after {
    font-family: "FontAwesome";
    content: '\f00c';
    position: absolute;
    bottom: 2px;
    right: 2px;
    line-height: 10px;
    width: 10px;
    font-size: 8px;
    text-align: center;
}
/* ==============================
Money
============================== */

.minus {
    /*color: #F14B4B;
    font-weight: 600;*/
}
span.money,
span.stars {
    padding-left: 20px;
    position: relative;
}
span.money.right,
span.stars.right {
    padding-right: 20px;
    padding-left: 0;
    float: none !important;
}
span.money.no-margin {
    padding: 0 15px 0 0;
    width: 16px;
    margin-right: 2px;
}
span.money:after,
span.stars:after{
    text-transform: none;
    position: absolute;
    width: 15px;
    height: 15px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    font-weight: 100;
    top: 50%;
    transform: translateY(-45%);
    left: 0;
    margin-top: -1px;
}
span.money:after {
    font-size: 17px;
    content: "\e91b";
    font-family: 'icomoon';
}
span.stars:after {
    font-size: 17px;
    content: "\f2fc";
    font-family: "Ionicons";
}
span.money.right:after,
span.stars.right:after {
    right: 0;
    left: auto;
}
span.money.zoom75:after,
span.stars.zoom75:after {
    transform: translateY(-50%) scale(.75);
}
span.money.zoom75 { padding-left: 17px; }
span.stars.zoom75 { padding-left: 16px; }

/* ==============================
Filter Box
============================== */

.filter-box {
    padding: 25px 20px;
}
.filter-box.small {
    padding: 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.filter-box:last-of-type {
    border: none;
}
.filter.margin {
    margin-bottom: 20px;
}
.filter input[type="text"]{
    display: block;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
}
.filter label {
    display: block;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 5px;
    font-size: 12px;
    text-transform: uppercase;
}
.filter label span {
    font-weight: 300;
    font-size: 12px;
}

/* ==============================
Terms
============================== */

.terms-padding {
    width: 100%;
    padding: 40px;
    position: relative;
    font-size: 14px;
}
.terms-section {
    margin-bottom: 20px;
}
.terms-section:last-of-type {
    border: none;
    margin: 0;
    padding: 0;
}
.terms-section.bg {
    background: rgba(255, 255, 255, 0.1);
    padding: 20px 25px;
    margin: 0 0 30px;
}
.terms-section.center {
    text-align: center;
}
[data-terms-icon] {
    margin-right: 20px;
}
[data-terms-icon]:after {
    font-size: 18px;
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

[data-terms-icon="ceo"]:after { content: 'person'; }
[data-terms-icon="mail"]:after { content: 'mail'; }
[data-terms-icon="phone"]:after { content: 'phone'; }
[data-terms-icon="vat"]:after { content: 'account_balance'; }
.terms-section table tr td {
    padding: 2px 0;
}
.terms-section span.bold {
    font-weight: 700;
}
.terms-section h2 {
    font-size: 18px;
}
.terms-timestamp {
    margint-top: 30px;:
}
table.terms {
    margin-bottom: 30px;
}
table.terms:last-child {
    margin: 0;
}
table.terms tr td:nth-child(1) { width: 30px; }
table.terms tr td { padding-top: 10px; }
table.terms tr { vertical-align: top; }
body.modal {
    background-color: #232323;
    background-image: none;
}
.terms-box {
    width: 400px;
    height: 630px;
    background: #3C3C3C;
    color: #ddd;
}

body.terms {
    background-image: none;
    background: #2f2f2f;
    overflow: hidden;
}
body.terms .terms-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 30px 1px rgba(0, 0, 0, 0.2);
}

.terms-section h4,.terms-section p {
    font-size: 14px;
    line-height: 1.6em
}

.terms-section h4 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 700
}

.terms-section p {
    margin-bottom: 20px;
    margin-top: 0
}

.terms-section .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.terms-section ul {
    list-style: none;
    padding-left: 0
}


/* ==============================
Payment
============================== */

table.payment-table {
    margin: 50px 0 0;
    color: #ddd;
    font-size: 14px;
    border-top: 10px solid #333;
    border-bottom: 10px solid #333;
}
table.payment-table tr {
    height: 50px;
    border-bottom: 1px solid #333333;
}
table.payment-table tr:last-of-type {
    border: none;
}
table.payment-table tr td {
    padding: 0 10px;
    width: 50%;
    text-align: right;
}
table.payment-table tr td:first-of-type {
    text-transform: uppercase;
    text-align: left;
}
.payment-close {
    margin: 50px 0 0;
}


/* ==============================
Shortcodes
============================== */

.full-width { width: 100%; }
.full-height { height: 100%; }

.bg1 {/* background: #3C3C3C; */background: rgb(55, 55, 55);} /* content */
.bg2 { background: #404040; } /* sub info */
.bg3 { background: #4C4C4C; } /* heading */
.bg4 {background: rgba(0, 0, 0, 0.15);}

.bg-carbon { background: #282828; background-image: url(../images/carbon_3.jpg); }

.bank-left,
.ranking-left,
.quests-left,
.cardealer-left,
.races-left,
.workshop-left,
.championships-left {
    padding-right: 10px;
    position: relative;
}
.bank-right,
.ranking-right,
.quests-right,
.cardealer-right,
.races-right,
.workshop-right,
.championships-right {
    padding-left: 10px;
    position: relative;
}
.perks-left,
.skills-left {
    padding-right: 20px;
    position: relative;
}
.perks-right,
.skills-right {
    padding-left: 20px;
    position: relative;
}


/* ==============================
Table/Tab Nav
============================== */

.tab-nav,
.table-nav,
.heading-nav {
    background: #424242;
    /* color: #656565; */
    font-size: 14px;
    line-height: 46px;
    font-weight: 500;
    /* box-shadow: 0 24px 10px rgba(255, 255, 255, 0.02) inset; */
}
.heading-abs {
    background: #424242;
    font-size: 14px;
    line-height: 46px;
    height: 46px;
    font-weight: 500;
    background: #3C3C3C;
    /* border-bottom: 1px solid #595959; */
    /*
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    */
    padding: 0 15px;
}
.heading-abs .track-name {
    float: left;
    font-size: 16px;
}
.heading-abs .track-name .name {
    text-transform: uppercase;
    font-weight: 700;
    margin: 0 10px 0 0;
}
.heading-abs .track-name .location {

}
.heading-nav {
    color: #fff;
    padding: 0 20px;
    text-decoration: none;
    text-transform: uppercase;
}
.tab-nav:before,
.table-nav:before {
    content: " ";
    display: table;
}
.tab-nav:after,
.table-nav:after {
    clear: both;
    content: " ";
    display: table;
}
.tab-nav.center,
.table-nav.center,
.heading-nav.center {
    text-align: center;
}
.tab-nav a,
.table-nav a {
    color: #a2a2a2;
    padding: 0 20px;
    margin-right: 15px;
    float: left;
    text-decoration: none;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    -ms-transition: color 0.3s;
    transition: color 0.3s;
}
.tab-nav a:first-of-type,
.table-nav a:first-of-type {
    padding-left: 20px;
}
.tab-nav a:last-of-type,
.table-nav a:last-of-type {
    padding-right: 20px;
    margin: 0;
}
.tab-nav a:before,
.table-nav a:before {
    content: "";
    position: absolute;
    left: -7px;
    top: -1px;
    height: 48px;
    width: 1px;
    background: #373737;
    border: 0 none;
    -webkit-transform: rotate(18deg);
    -moz-transform: rotate(18deg);
    -ms-transform: rotate(18deg);
    -o-transform: rotate(18deg);
    transform: rotate(18deg);
    z-index: 1;
    left: -8px;
}
.tab-nav a.active:after,
.table-nav a.active:after {
    display: block;
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-transform: rotate(360deg);
    border-width: 46px 15px 0 0;
    border-color: #505050 transparent transparent transparent;
    position: absolute;
    right: -15px;
    top: 0;
    width: 2px;
    height: 0;
    background: 0 0;
    z-index: 2;
}
.tab-nav a.active:before,
.table-nav a.active:before {
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-transform: rotate(360deg);
    border-width: 0 0 46px 15px;
    border-color: transparent transparent #505050 transparent;
    position: absolute;
    left: -15px;
    top: 0;
    width: 2px;
    height: 0;
    background: 0 0;
    z-index: 2;
}
.tab-nav a:first-of-type:before,
.table-nav a:first-of-type:before,
.race-nav a:last-of-type.active:after {
    display: none;
}
.tab-nav a:hover,
.table-nav a:hover {
    color: #fff;
}
.tab-nav .active,
.table-nav .active {
    color: #fff;
    background: #505050;
}
.table-nav-sub {
    padding: 25px 20px;
    background: rgba(255, 255, 255, 0.04);
    margin-top: 1px;
}

/* ==============================
Slider
============================== */

.ui-slider {
    border-radius: 0 !important;
    background: rgba(255,255,255,0) !important;
    border: none !important;
}
.ui-slider:before {
    content: '';
    background: rgba(255, 255, 255, 0.14) !important;
    background: rgba(0, 0, 0, 0.2) !important;
    position: absolute;
    width: 100%;
    height: 4px;
    top: 6px;
}
.ui-slider-range {
    background: rgba(255, 255, 255, 0.85) !important;
    border-radius: 0 !important;
    height: 4px !important;
    margin: 6px 0 !important;
}
.ui-slider-handle {
    border-radius: 10px !important;
    background: #404040 !important;
    border: none !important;
    width: 10px !important;
    height: 10px !important;
    top: 0 !important;
    margin-left: -6px !important;
    box-shadow: 0 0 0 2px #ea1e75 inset, 0 0 2px 1px #404040;
    box-shadow: 0 0 0 2px #b4f482 inset, 0 0 10px 1px rgba(180, 244, 130, 0.5);
    box-shadow: 0 0 0 2px #A7A7A7 inset, 0 0 2px 1px #3C3C3C;
    margin-top: 3px;
}
.ui-slider-handle:focus {
    outline: none;
}
.ui-slider-horizontal {
    height: 16px !important;
    margin: 0 !important;
}



/* ==============================
Settings
============================== */

.language tr td {
    width: 25%;
}
.currency tr td {
    width: 20%;
}
.language tr td .radio-mod,
.currency tr td .radio-mod {
    margin: 0 2px 0;
}
.language tr td:first-child .radio-mod,
.currency tr td:first-child .radio-mod {
    margin: 0 2px 0 0;
}
.language tr td:last-child .radio-mod,
.currency tr td:last-child .radio-mod {
    margin: 0 0 0 2px;
}
.language {
}
.language .radio-mod {
    line-height: 33px;
}
.settings-ipsharing {
    height: 248px;
    padding: 20px;
}
.settings-ipsharing table {
    font-size: 13px;
}
.settings-add-ipsharing {
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #373737;
    /* background: rgba(0, 0, 0, 0.1); */
}
.settings-add-ipsharing input[type="text"] {
    width: 354px;
    margin: 0 !important;
}
.settings-add-ipsharing .btn-mod {
    position: relative;
    bottom: auto !important;
    right: auto !important;
}
.settings-ipsharing.small {
    height: 262px;
}
.settings-add-ipsharing .relation {
    margin-bottom: 10px;
}
.settings-add-ipsharing .date {
    height: 33px;
    padding: 0;
    margin-bottom: 10px;
    width: 354px;
}
.settings-add-ipsharing .date .from-date,
.settings-add-ipsharing .date .to-date {
    width: 50%;
    text-align: center;
    float: left;
}
.settings-add-ipsharing .date .from-date {
    border-right: 1px solid #383838;
}
.settings-add-ipsharing .date .duration {
    position: absolute;
    width: 61px;
    height: 33px;
    top: 20px;
    right: 20px;
    text-align: center;
    line-height: 33px;
    background: #464646;
}
.settings-add-ipsharing .date .duration.overlimit {
    background: #A51F1F;
    color: #fff;
    font-weight: 400;
}

.settings .settings-ipsharing table tr:first-of-type td,
.settings .settings-ipsharing table tr:first-of-type td{
    padding-bottom: 0;
    color: #ddd;
}
.settings table span[data-icon="sitting-in"] {
    font-weight: inherit;
    line-height: inherit;
    font-size: inherit;
}
[data-icon="sitting-in"]:before {
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    content: "subdirectory_arrow_right";
    position: relative;
    top: 1px;
}
[data-icon="not-approved"]:before {
    font-family: "Material Icons";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-size: 16px;
    color: #666;
    position: relative;
    top: 1px;
    content: "radio_button_unchecked";
}
[data-icon="approved"]:before {
    font-family: "Ionicons";
    content: "\f120";
    font-size: 16px;
}

/* ==============================
Tables
============================== */

table a.delete,
table a.accept,
table a.reject,
table .rejected {
    font-size: 16px;
    /* height: 20px; */
    /* line-height: 20px; */
    width: 20px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
table .rejected {
    color: #bf4e4e;
}
table span.rejected {
    cursor: default;
}
table a.delete:after,
table a.accept:after,
table a.reject:after,
table .rejected:after {
    font-family: "Ionicons";
}

table a.delete:after {
    content: "\f252";
}
table a.accept:after {
    content: "\f120";
}
table a.reject:after,
table .rejected:after {
    content: "\f128";
}
table a.pending:after {
    content: "\f3b1";
}


/* ==============================
Scrollbar
============================== */

.nano.pr40 .nano-content {
    padding-right: 40px;
}
.nano.nano-table > .nano-pane > .nano-slider {
    border-radius: 0;
    margin: 0;
}
.nano.nano-table > .nano-pane {
    width: 2px;
}



/* ==============================
Scrollbar Heights
============================== */

.nano[data-scrollbar="settings.name"],
.nano[data-scrollbar="settings.password"],
.nano[data-scrollbar="settings.email"]{
    height: 386px;
}
.nano[data-scrollbar="settings.ipsharing.shortterm"]{
    height: 175px;
}
.nano[data-scrollbar="info.imprint"],
.nano[data-scrollbar="info.terms"],
.nano[data-scrollbar="info.privacy"],
.nano[data-scrollbar="info.version"] {
    height: 421px;
}
.nano[data-scrollbar="bank"],
.nano[data-scrollbar="gasstation"],
.nano[data-scrollbar="crew.drivers"],
.nano[data-scrollbar="profile.cars"],
.nano[data-scrollbar="crew.invitations"],
.nano[data-scrollbar="garage"],
.nano[data-scrollbar="races"],
.nano[data-scrollbar="profile.drivers"],
.nano[data-scrollbar="profile.races"],
.nano[data-scrollbar="track.modal"] {
    height: 507px;
}
.nano[data-scrollbar="profile.news"] {
    height: 482px;
}
.nano[data-scrollbar="crew.list"] {
    height: 610px;
}
.nano[data-scrollbar="race.times"] {
    height: 549px;
}

/* ==============================
Table Widths
============================== */

[data-table="profile.cars"] tbody tr,
[data-table="crew.cars"] tbody tr,
[data-table="cardealer.used"] tbody tr,
[data-table="cardealer.new"] tbody tr,
[data-table="car.comparison"] tbody tr,
[data-table="championship.cars"] tbody tr {
    height: 56px;
}

[data-table="settings.name"] tr th:nth-child(1),
[data-table="settings.name"] tr td:nth-child(1),
[data-table="settings.password"] tr th:nth-child(1),
[data-table="settings.password"] tr td:nth-child(1),
[data-table="settings.email"] tr th:nth-child(1),
[data-table="settings.email"] tr td:nth-child(1),
[data-table="settings.ipsharing"] tr th:nth-child(1),
[data-table="settings.ipsharing"] tr td:nth-child(1),
[data-table="settings.sitting"] tr th:nth-child(1),
[data-table="settings.sitting"] tr td:nth-child(1),
[data-table="settings.sitting"] tr th:nth-child(2),
[data-table="settings.sitting"] tr td:nth-child(2) { width: 80px; }

[data-table="settings.ipsharing"] tr th:nth-child(4),
[data-table="settings.ipsharing"] tr td:nth-child(4),
[data-table="settings.sitting"] tr th:nth-child(4),
[data-table="settings.sitting"] tr td:nth-child(4) { width: 60px; }
[data-table="settings.ipsharing"] tr th:nth-child(5),
[data-table="settings.ipsharing"] tr td:nth-child(5),
[data-table="settings.sitting"] tr th:nth-child(5),
[data-table="settings.sitting"] tr td:nth-child(5) { width: 40px;}
[data-table="settings.ipsharing"] tr th:nth-child(3),
[data-table="settings.ipsharing"] tr td:nth-child(3) { width: 120px; }

[data-table="settings.language"] tr th:nth-child(1),
[data-table="settings.language"] tr td:nth-child(1) {
    width: 50%;
}
[data-table="ranking.drivers"] tr th { width: 70px; }
[data-table="ranking.drivers"] tr th:nth-child(1) { width: 70px; }
[data-table="ranking.drivers"] tr th:nth-child(2) { width: 32px; }
[data-table="ranking.drivers"] tr th:nth-child(3) { width: auto; }
[data-table="ranking.drivers"] tr th:nth-child(4) { width: 150px; }
[data-table="ranking.drivers"] tr th:nth-child(7),
[data-table="ranking.drivers"] tr th:nth-child(8) { width: 60px; }

[data-table="ranking.cars"] tr th { width: 70px; }
[data-table="ranking.cars"] tr th:nth-child(1) { width: 70px; }
[data-table="ranking.cars"] tr th:nth-child(2) { width: 60px; }
[data-table="ranking.cars"] tr th:nth-child(3) { width: auto; }
[data-table="ranking.cars"] tr th:nth-child(4) { width: 150px; }

[data-table="ranking.crews"] tr th { width: 70px; }
[data-table="ranking.crews"] tr th:nth-child(1) { width: 70px; }
[data-table="ranking.crews"] tr th:nth-child(2) { width: 24px; }
[data-table="ranking.crews"] tr th:nth-child(3) { width: auto; }

[data-table="bank"] tr th:nth-child(1),
[data-table="bank"] tr td:nth-child(1) { width: 150px; }
[data-table="bank"] tr th:nth-child(3),
[data-table="bank"] tr td:nth-child(3) { width: 100px; }

[data-table="cardealer.new"] tr th { width: 80px; }
[data-table="cardealer.new"] tr th:nth-child(1) { width: 100px; }
[data-table="cardealer.new"] tr th:nth-child(2) { width: 24px; }
[data-table="cardealer.new"] tr th:nth-child(3) { width: auto; }

[data-table="cardealer.used"] tr th { width: 80px; }
[data-table="cardealer.used"] tr th:nth-child(1) { width: 100px; }
[data-table="cardealer.used"] tr th:nth-child(2) { width: 24px; }
[data-table="cardealer.used"] tr th:nth-child(3) { width: auto; }

[data-table="gasstation"] tr th:nth-child(1),
[data-table="gasstation"] tr td:nth-child(1),
[data-table="gasstation"] tr th:nth-child(2),
[data-table="gasstation"] tr td:nth-child(2) { width: 50px; }
[data-table="gasstation"] tr th:nth-child(4),
[data-table="gasstation"] tr td:nth-child(4),
[data-table="gasstation"] tr th:nth-child(5),
[data-table="gasstation"] tr td:nth-child(5),
[data-table="gasstation"] tr th:nth-child(6),
[data-table="gasstation"] tr td:nth-child(6) { width: 105px; }
[data-table="gasstation"] tr th:nth-child(7),
[data-table="gasstation"] tr td:nth-child(7) { width: 45px; }

[data-table="crew.drivers"] tr th,
[data-table="crew.drivers"] tr td { width: 60px; }
[data-table="crew.drivers"] tr th:nth-child(1),
[data-table="crew.drivers"] tr td:nth-child(1) { width: 70px; }
[data-table="crew.drivers"] tr th:nth-child(2),
[data-table="crew.drivers"] tr td:nth-child(2) { width: 32px; }
[data-table="crew.drivers"] tr th:nth-child(3),
[data-table="crew.drivers"] tr td:nth-child(3) { width: auto; }
[data-table="crew.drivers"] tr th:nth-child(4),
[data-table="crew.drivers"] tr td:nth-child(4) { width: 150px; }
[data-table="crew.drivers"] tr th:nth-child(10),
[data-table="crew.drivers"] tr td:nth-child(10) { width: 50px; }

[data-table="crew.cars"] tr th,
[data-table="crew.cars"] tr td { width: 60px; }
[data-table="crew.cars"] tr th:nth-child(1),
[data-table="crew.cars"] tr td:nth-child(1) { width: 100px; }
[data-table="crew.cars"] tr th:nth-child(2),
[data-table="crew.cars"] tr td:nth-child(2) { width: 24px; }
[data-table="crew.cars"] tr th:nth-child(3),
[data-table="crew.cars"] tr td:nth-child(3) { width: auto; }
[data-table="crew.cars"] tr th:nth-child(4),
[data-table="crew.cars"] tr td:nth-child(4){ width: 120px; }
[data-table="crew.cars"] tr th:nth-child(5),
[data-table="crew.cars"] tr td:nth-child(5),
[data-table="crew.cars"] tr th:nth-child(6),
[data-table="crew.cars"] tr td:nth-child(6),
[data-table="crew.cars"] tr th:nth-child(7),
[data-table="crew.cars"] tr td:nth-child(7) { width: 80px; }

[data-table="crew.invitations.out"] tr th,
[data-table="crew.invitations.out"] tr td { width: 60px; }
[data-table="crew.invitations.out"] tr th:nth-child(1),
[data-table="crew.invitations.out"] tr td:nth-child(1) { width: 150px; }
[data-table="crew.invitations.out"] tr th:nth-child(2),
[data-table="crew.invitations.out"] tr td:nth-child(2) { width: 32px; }
[data-table="crew.invitations.out"] tr th:nth-child(3),
[data-table="crew.invitations.out"] tr td:nth-child(3) { width: auto; }
[data-table="crew.invitations.out"] tr th:nth-child(4),
[data-table="crew.invitations.out"] tr td:nth-child(4) { width: 120px; }
[data-table="crew.invitations.out"] tr th:nth-child(10),
[data-table="crew.invitations.out"] tr td:nth-child(10) { width: 50px; }

[data-table="crew.invitations.in"] tr th,
[data-table="crew.invitations.in"] tr td { width: 80px; }
[data-table="crew.invitations.in"] tr th:nth-child(1),
[data-table="crew.invitations.in"] tr td:nth-child(1) { width: 150px; }
[data-table="crew.invitations.in"] tr th:nth-child(2),
[data-table="crew.invitations.in"] tr td:nth-child(2) { width: 24px; }
[data-table="crew.invitations.in"] tr th:nth-child(3),
[data-table="crew.invitations.in"] tr td:nth-child(3) { width: auto; }
[data-table="crew.invitations.in"] tr th:nth-child(8),
[data-table="crew.invitations.in"] tr td:nth-child(8) { width: 70px; }

[data-table="profile.cars"] tr th,
[data-table="profile.cars"] tr td { width: 80px; }
[data-table="profile.cars"] tr th:nth-child(1),
[data-table="profile.cars"] tr td:nth-child(1) { width: 100px; }
[data-table="profile.cars"] tr th:nth-child(2),
[data-table="profile.cars"] tr td:nth-child(2) { width: 24px; }
[data-table="profile.cars"] tr th:nth-child(3),
[data-table="profile.cars"] tr td:nth-child(3) { width: auto; }

[data-table="profile.races"] tr th,
[data-table="profile.races"] tr td { width: 70px; }
[data-table="profile.races"] tr th:nth-child(1),
[data-table="profile.races"] tr td:nth-child(1) { width: 120px; }
[data-table="profile.races"] tr th:nth-child(2),
[data-table="profile.races"] tr td:nth-child(2) { width: auto; }
[data-table="profile.races"] tr th:nth-child(6),
[data-table="profile.races"] tr td:nth-child(6),
[data-table="profile.races"] tr th:nth-child(7),
[data-table="profile.races"] tr td:nth-child(7) { width: 90px; }

[data-table="profile.championship"] tr th,
[data-table="profile.championship"] tr td { width: 70px; }
[data-table="profile.championship"] tr th:nth-child(1),
[data-table="profile.championship"] tr td:nth-child(1) { width: 120px; }
[data-table="profile.championship"] tr th:nth-child(2),
[data-table="profile.championship"] tr td:nth-child(2) { width: 150px; }
[data-table="profile.championship"] tr th:nth-child(3),
[data-table="profile.championship"] tr td:nth-child(3) { width: 70px; padding: 0 5px 0 5px; }
[data-table="profile.championship"] tr th:nth-child(4),
[data-table="profile.championship"] tr td:nth-child(4) { width: auto; padding: 0; }
[data-table="profile.championship"] tr th:nth-child(8),
[data-table="profile.championship"] tr td:nth-child(8) { width: 90px; }

[data-table="car.comparison"] tr th,
[data-table="car.comparison"] tr td { width: 80px; }
[data-table="car.comparison"] tr th:nth-child(1),
[data-table="car.comparison"] tr td:nth-child(1) { width: 70px; }
[data-table="car.comparison"] tr th:nth-child(2),
[data-table="car.comparison"] tr td:nth-child(2) { width: 100px; }
[data-table="car.comparison"] tr th:nth-child(3),
[data-table="car.comparison"] tr td:nth-child(3) { width: auto; }

[data-table="carlist"] tr td { width: 50px; }
[data-table="carlist"] tr td:nth-child(1) { width: 100px; }
[data-table="carlist"] tr td:nth-child(2) { width: 24px; }
[data-table="carlist"] tr td:nth-child(3) { width: auto; }
[data-table="carlist"] tr td:nth-child(6) { width: 80px; }
[data-table="carlist"] tr td:nth-child(8) { width: 60px; }

.garage tr th,
.garage tr td { width: 80px; }

.garage tr th:nth-child(1),
.garage tr td:nth-child(1) { width: 100px; }
.garage tr th:nth-child(2),
.garage tr td:nth-child(2) { width: 24px; }
.garage tr th:nth-child(3),
.garage tr td:nth-child(3) { width: auto; }
.garage tr th:nth-last-child(2),
.garage tr td:nth-last-child(2) { width: 80px; }
.garage tr th:last-of-type,
.garage tr td:last-of-type { width: 60px; }

[data-table="races"] tr th,
[data-table="races"] tr td { width: 70px; }
[data-table="races"] tr th:nth-child(1),
[data-table="races"] tr td:nth-child(1) { width: 120px; }
[data-table="races"] tr th:nth-child(2),
[data-table="races"] tr td:nth-child(2) { width: auto; }
[data-table="races"] tr th:last-of-type,
[data-table="races"] tr td:last-of-type { width: 60px; }

[data-table="race.signup"] tr td:nth-child(1) {width: 80px; padding: 0; }
[data-table="race.signup"] tr td:nth-child(2) { width: auto; }
[data-table="race.signup"] tr td:nth-child(3) { width: 60px; }
[data-table="race.signup"] tr td:nth-child(4) { width: 60px; }
[data-table="race.signup"] tr td:nth-child(5) { width: 46px; }

[data-table="tracks"] tr th,
[data-table="tracks"] tr td { width: 80px; }
[data-table="tracks"] tr th:nth-child(1),
[data-table="tracks"] tr td:nth-child(1) { width: auto; }
[data-table="tracks"] tr th:nth-child(2),
[data-table="tracks"] tr td:nth-child(2) { width: 120px; }
[data-table="tracks"] tr th:nth-child(3),
[data-table="tracks"] tr td:nth-child(3) { width: 70px; }
[data-table="tracks"] tr th:nth-child(5),
[data-table="tracks"] tr td:nth-child(5),
[data-table="tracks"] tr th:nth-child(6),
[data-table="tracks"] tr td:nth-child(6) { width: 60px; }

[data-table="race.times"] tr th:nth-child(1),
[data-table="race.times"] tr td:nth-child(1) { width: auto; }
[data-table="race.times"] tr th:nth-child(2),
[data-table="race.times"] tr td:nth-child(2) { width: 60px; }
[data-table="race.times"] tr th:nth-child(3),
[data-table="race.times"] tr td:nth-child(3) { width: 90px; }
[data-table="race.times"] tr th:nth-child(4),
[data-table="race.times"] tr td:nth-child(4) { width: 80px; }

[data-table="track.upcoming"] tr th,
[data-table="track.upcoming"] tr td { width: 70px; }
[data-table="track.upcoming"] tr th:nth-child(1),
[data-table="track.upcoming"] tr td:nth-child(1) { width: 120px; }
[data-table="track.upcoming"] tr th:nth-child(4),
[data-table="track.upcoming"] tr td:nth-child(4) { width: auto; }
[data-table="track.upcoming"] tr th:nth-child(5),
[data-table="track.upcoming"] tr td:nth-child(5),
[data-table="track.upcoming"] tr th:nth-child(6),
[data-table="track.upcoming"] tr td:nth-child(6) { width: 60px; }

[data-table="track.finished"] tr th,
[data-table="track.finished"] tr td { width: 70px; }
[data-table="track.finished"] tr th:nth-child(1),
[data-table="track.finished"] tr td:nth-child(1) { width: 120px; }
[data-table="track.finished"] tr th:nth-child(4),
[data-table="track.finished"] tr td:nth-child(4),
[data-table="track.finished"] tr th:nth-child(5),
[data-table="track.finished"] tr td:nth-child(5) { width: 80px; }
[data-table="track.finished"] tr th:nth-child(6),
[data-table="track.finished"] tr td:nth-child(6) { width: 50px; }
[data-table="track.finished"] tr th:nth-child(7),
[data-table="track.finished"] tr td:nth-child(7) { width: auto; }
[data-table="track.finished"] tr th:nth-child(8),
[data-table="track.finished"] tr td:nth-child(8),
[data-table="track.finished"] tr th:nth-child(9),
[data-table="track.finished"] tr td:nth-child(9) { width: 60px; }

[data-table="track.records"] tr th,
[data-table="track.records"] tr td { width: 70px; }
[data-table="track.records"] tr th:nth-child(1),
[data-table="track.records"] tr td:nth-child(1) { width: 120px; }
[data-table="track.records"] tr th:nth-child(4),
[data-table="track.records"] tr td:nth-child(4),
[data-table="track.records"] tr th:nth-child(5),
[data-table="track.records"] tr td:nth-child(5) { width: 80px; }
[data-table="track.records"] tr th:nth-child(6),
[data-table="track.records"] tr td:nth-child(6) { width: auto; }
[data-table="track.records"] tr th:nth-child(7),
[data-table="track.records"] tr td:nth-child(7),
[data-table="track.records"] tr th:nth-child(8),
[data-table="track.records"] tr td:nth-child(8) { width: 60px; }

[data-table="race.results"] tr th,
[data-table="race.results"] tr td { width: 70px; text-align: center; }
[data-table="race.results"] tr th:nth-child(1),
[data-table="race.results"] tr td:nth-child(1) { width: 40px; }
[data-table="race.results"] tr th:nth-child(2),
[data-table="race.results"] tr td:nth-child(2) { width: auto; text-align: left; }
[data-table="race.results"] tr th:nth-child(3),
[data-table="race.results"] tr td:nth-child(3) { width: 150px; text-align: left; }
[data-table="race.results"] tr th:nth-child(4),
[data-table="race.results"] tr td:nth-child(4) { width: 50px; }
[data-table="race.results"] tr th:nth-child(7),
[data-table="race.results"] tr td:nth-child(7) { width: 50px; }
[data-table="race.results"] tr th:nth-child(8),
[data-table="race.results"] tr td:nth-child(8) { width: 40px; }

[data-table="championships.list"] tr th,
[data-table="championships.list"] tr td { width: 50px; }
[data-table="championships.list"] tr th:nth-child(1),
[data-table="championships.list"] tr td:nth-child(1) { width: 160px; }
[data-table="championships.list"] tr th:nth-child(2),
[data-table="championships.list"] tr td:nth-child(2) { width: auto; }
[data-table="championships.list"] tr td:nth-child(2) { background: rgba(0, 0, 0, 0.1); }
[data-table="championships.list"] tr th:nth-child(6),
[data-table="championships.list"] tr td:nth-child(6) { width: 60px; }
[data-table="championships.list"] tr th:nth-child(3),
[data-table="championships.list"] tr td:nth-child(3),
[data-table="championships.list"] tr th:nth-child(4),
[data-table="championships.list"] tr td:nth-child(4),
[data-table="championships.list"] tr th:nth-child(5),
[data-table="championships.list"] tr td:nth-child(5) { padding: 0; }

[data-table="championship.cars"] tr th,
[data-table="championship.cars"] tr td { width: 80px; }
[data-table="championship.cars"] tr th:nth-child(1),
[data-table="championship.cars"] tr td:nth-child(1) { width: 100px; }
[data-table="championship.cars"] tr th:nth-child(2),
[data-table="championship.cars"] tr td:nth-child(2) { width: auto; }
[data-table="championship.cars"] tr th:nth-child(5),
[data-table="championship.cars"] tr td:nth-child(5),
[data-table="championship.cars"] tr th:nth-child(6),
[data-table="championship.cars"] tr td:nth-child(6),
[data-table="championship.cars"] tr th:nth-child(7),
[data-table="championship.cars"] tr td:nth-child(7),
[data-table="championship.cars"] tr th:nth-child(8),
[data-table="championship.cars"] tr td:nth-child(8) { width: 60px; }

[data-table="championship.reward"] tr th,
[data-table="championship.reward"] tr td { width: 60px; }
[data-table="championship.reward"] tr th:nth-child(1),
[data-table="championship.reward"] tr td:nth-child(1) { width: auto; }
[data-table="championship.reward"] tr td:nth-child(1) { background: rgba(0, 0, 0, 0.1); }

[data-table="championship.results"] tr th,
[data-table="championship.results"] tr td { width: 70px; }
[data-table="championship.results"] tr th:nth-child(1),
[data-table="championship.results"] tr td:nth-child(1) { width: 120px; }
[data-table="championship.results"] tr th:nth-child(2),
[data-table="championship.results"] tr td:nth-child(2) { width: 100px; }
[data-table="championship.results"] tr th:nth-child(3),
[data-table="championship.results"] tr td:nth-child(3) { width: auto; }
[data-table="championship.results"] tr th:nth-child(7),
[data-table="championship.results"] tr td:nth-child(7) { width: 90px; }

[data-table="championship.champs"] tr th,
[data-table="championship.champs"] tr td { width: 70px; }
[data-table="championship.champs"] tr th:nth-child(1),
[data-table="championship.champs"] tr td:nth-child(1) { width: 120px; }
[data-table="championship.champs"] tr th:nth-child(2),
[data-table="championship.champs"] tr td:nth-child(2) { width: 100px; }
[data-table="championship.champs"] tr th:nth-child(3),
[data-table="championship.champs"] tr td:nth-child(3) { width: auto; }
[data-table="championship.champs"] tr th:nth-child(4),
[data-table="championship.champs"] tr td:nth-child(4) { width: 200px; }

[data-table="championship.signup"] tr th,
[data-table="championship.signup"] tr td {width: 45px;padding: 0;}
[data-table="championship.signup"] tr th:nth-child(1),
[data-table="championship.signup"] tr td:nth-child(1) {width: 75px;padding: 0 5px 0 10px;}
[data-table="championship.signup"] tr th:nth-child(2),
[data-table="championship.signup"] tr td:nth-child(2) { width: auto; }
[data-table="championship.signup"] tr th:nth-child(7),
[data-table="championship.signup"] tr td:nth-child(7) { width: 45px; }
[data-table="championship.signup"] tr th:nth-child(8),
[data-table="championship.signup"] tr td:nth-child(8) {width: 55px;padding: 0 5px;}

[data-table="championship.scoreboard"] tr th,
[data-table="championship.scoreboard"] tr td { width: 60px; }
[data-table="championship.scoreboard"] tr th:nth-child(2),
[data-table="championship.scoreboard"] tr td:nth-child(2) { width: 160px; }
[data-table="championship.scoreboard"] tr th:nth-child(3),
[data-table="championship.scoreboard"] tr td:nth-child(3) {width: 70px;padding: 0 5px 0 5px;}
[data-table="championship.scoreboard"] tr th:nth-child(4),
[data-table="championship.scoreboard"] tr td:nth-child(4) {width: auto;padding: 0;}
[data-table="championship.scoreboard"] tr th:nth-child(5),
[data-table="championship.scoreboard"] tr td:nth-child(5) {width: 60px;padding: 0;}
[data-table="championship.scoreboard"] tr th:nth-child(10),
[data-table="championship.scoreboard"] tr td:nth-child(10) { width: 60px; }
[data-table="championship.scoreboard"] tr td:nth-child(1),
[data-table="championship.scoreboard"] tr td:nth-child(3),
[data-table="championship.scoreboard"] tr td:nth-child(4),
[data-table="championship.scoreboard"] tr td:nth-child(5),
[data-table="championship.scoreboard"] tr td:nth-child(10) { background: rgba(0, 0, 0, 0.1); }


/* ==============================
Radio
============================== */

.radio-mod {
    padding: 0 10px 0 43px;
    line-height: 33px;
    display: block;
    cursor: pointer;
    position: relative;
    min-width: 40px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #464646;
    color: #ddd;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}
.radio-mod:hover {
    text-decoration: none;
    cursor: pointer;
    color: #ddd;
    /*
    border-color: #777;
    color: #D4D4D4;
    background: #4E4E4E;
    */
}
.radio-mod.active:hover,
.radio-mod.active {
    cursor: default;
}
.radio-mod:after,
.radio-mod.active:after{
    content: "close";
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    width: 33px;
    text-align: center;
    box-shadow: 0 0 0 1px #464646 inset;
    display: inline-block;
    background: #353535;
}
.radio-mod.active:after {
    color: #fff;
}



/* ==============================
Checkbox
============================== */

.checkbox-mod input[type="checkbox"] {
    visibility: hidden;
}
.checkbox-mod {
    position: relative;
}
.checkbox-mod label {
    padding-left: 48px;
    padding-right: 15px;
    line-height: 33px;
    font-weight: 400;
    background: #464646;
    font-size: 13px;
    cursor: pointer;
    margin: 0;
    display: block;
}
.checkbox-mod label:before {
    content: "close";
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    font-size: 16px;
    color: rgba(255,255,255,0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    box-shadow: 0 0 0 1px #464646 inset;
    display: inline-block;
    background: #353535;
}
.checkbox-mod label:before,
.checkbox-mod input[type="checkbox"] {
    width: 33px;
    height: 33px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}
.checkbox-mod input[type="checkbox"]:checked + label:before {
    color: #fff;
}



/* ==============================
File Upload
============================== */

.file-mod input[type="file"] {
    visibility: hidden;
}
.file-mod {
    position: relative;
}
.file-mod label {
    padding-left: 48px;
    padding-right: 15px;
    line-height: 33px;
    font-weight: 400;
    background: #464646;
    font-size: 13px;
    cursor: pointer;
    margin: 0;
    display: block;
}
.file-mod label:before {
    content: "\f093";
    font-family: "FontAwesome";
    font-size: 16px;
    color: #fff;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    text-align: center;
    box-shadow: 0 0 0 1px #464646 inset;
    display: inline-block;
    background: #353535;
}
.file-mod label:before,
.file-mod input[type="file"] {
    width: 33px;
    height: 33px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}



/* ==============================
Animation
============================== */

.animFadeSlide {
    opacity: 1;
    transform: translateY(0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.animFadeSlide.hide {
    opacity: 0;
    transform: translateY(10px);
    display: inherit !important;
}

.phone-content #phone_ajax,
.phone-content #phone_chatbox,
.phone-content .phone-title {
    opacity: 1;
    transform: translate(0,0);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.phone-content.load #phone_ajax,
.phone-content.chatload #phone_chatbox,
.phone-content.load .phone-title,
.phone-content.chatload .phone-title {
    opacity: 0;
    /*transform: translateY(10px);*/
    display: inherit !important;
}


/* ==============================
Modal Box: Versions
============================== */

table.versions { width: 100%; }
table.versions tbody tr { cursor: pointer; }
table.versions tr td:nth-child(1) { width: 50%; }
table.versions tr td:nth-child(2) { width: 50%; font-weight: 700; }
table.versions tr.active td:nth-child(2) { text-decoration: underline; }

.modal-ajax-content .version-title {
    font-size: 20px;
    margin-bottom: 30px;
}
.modal-ajax-content .version-changelog {
    padding: 0;
    margin: 0 0 0 17px;
}
.modal-ajax-content .version-changelog li {
    font-size: 13px;
    padding: 0;
}


/* ==============================
Ads
============================== */

#left-a,
#right-a {
    max-width: 300px;
    min-width: 160px;
    height: 600px;
    position: absolute;
    z-index: 1;
    top: 100px;
    line-height: 600px;
    color: #fff;
    /*background: #101010;*/
    /*box-shadow: 0 0 0 1px #232323, 0 5px 15px #000;*/
    overflow: hidden;
}
#left-a {
    /*left: -330px;*/
    right: 1150px;
    text-align: right;
}
#right-a {
    left: 1150px;
    /*right: -330px;*/
}
#left-a iframe,
#right-a iframe {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border: none;
}

/* ==============================
Levelup
============================== */

#levelup {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 696px;
    height: 400px;
    background: #E2E2E2;
    color: #C3C3C3;
    z-index: 100;
    opacity: 0;
    transform: translate(-50%, -45%) scale(1);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#levelup.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
#levelup .description {
    height: 46px;
    line-height: 46px;
    background: #D8D8D8;
    color: #8A8A8A;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-style: italic;
}
#levelup .heading {
    height: 46px;
    line-height: 46px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 0 20px;
    background: #ECB900;
    color: rgba(0, 0, 0, 0.65);
    text-align: center;
}
#levelup .items {
    padding: 40px;
}
#levelup .item {
    width: 185px;
    height: 208px;
    float: left;
    background: #FFF;
    border: 1px solid #FFFFFF;
    color: #555;
    margin: 10px;
    position: relative;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
#levelup .wheelspin .fullsize,
#levelup .item .fullsize {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 60px;
    line-height: 208px;
    text-align: center;
    background: #fff;
}
#levelup .wheelspin .cover:before,
#levelup .item .cover:before,
#levelup .item .none:before,
#levelup .item [data-levelup-icon]:before {
    font-family: 'Material Icons';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
    text-transform: none;
}
#levelup .wheelspin .cover:before,
#levelup .item .cover:before { content: "new_releases"; }
#levelup .item .none:before { content: 'sentiment_dissatisfied'; }
#levelup .item [data-levelup-icon="skilllimit"]:before { content: 'equalizer'; }
#levelup .item [data-levelup-icon="perkpoint"]:before { content: 'local_activity'; }

#levelup .item [data-levelup-icon="garage"]:before { content: 'drive_eta'; }
#levelup .item [data-levelup-icon="workshop"]:before { content: 'build'; }
#levelup .item [data-levelup-icon="stars"]:before {
    content: "\f2fc";
    font-family: "Ionicons";
}
#levelup .item [data-levelup-icon="money"]:before,
#levelup .item [data-levelup-icon="moneyperhour"]:before {
    font-family: 'icomoon';
    content: "\e91b";
}
#levelup .wheelspin .cover,
#levelup .item .cover {
    line-height: 185px;
    z-index: 1;
    background: #e4e4e4;
    color: #9C9C9C;
    cursor: pointer;
    box-shadow: 0 0 0 5px #fff inset;
    transform: translateY(100%);
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}
#levelup .wheelspin .cover.show,
#levelup .item .cover.show {
    transform: translateY(0%);
}
#levelup .item .fullsize.bonus {
    line-height: 185px;
}
#levelup .wheelspin .fullsize label,
#levelup .item .fullsize label {
    position: absolute;
    top: 130px;
    left: 0;
    width: 100%;
    /* height: 100%; */
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    cursor: inherit;
}
#levelup .item .num {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #AFAFAF;
    font-size: 11px;
}
#levelup .item .body,
#levelup .item .head,
#levelup .item .hair,
#levelup .item .hair_back,
#levelup .item .beard,
#levelup .item .clothes,
#levelup .item .clothes_back {
    position: absolute;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 183px;
    background-repeat: no-repeat;
}
#levelup .item .beard,
#levelup .item .hair,
#levelup .item .hair_back {
    background-size: 128px;
    background-position: center 6px;
}

#levelup .wheelspin {
    width: 390px;
    height: 208px;
    float: right;
    background: #FFF;
    border: 1px solid #FFFFFF;
    color: #555;
    margin: 10px;
    position: relative;
    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}
#levelup .wheelspin .ws-item {
    height: 69px;
    line-height: 69px;
    border-bottom: 1px solid #E0E0E0;
}
#levelup .wheelspin .ws-item .image {
    width: 90px;
    height: 58px;
    margin: 5px 0;
    float: left;
    text-align: right;
    line-height: 58px;
    margin-right: 20px;
}
#levelup .wheelspin .ws-item label {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}
#levelup .wheelspin .ws-item .level {
    float: right;
    border-radius: 22px;
    line-height: 22px;
    font-weight: 600;
    font-size: 11px;
    width: 40px;
    text-align: center;
    display: inline-block;
    background: #EAEAEA;
    color: #848484;
    margin: 23px 20px;
}
#levelup .wheelspin .focus {
    position: absolute;
    left: 0;
    top: 68px;
    width: 100%;
    height: 70px;
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
    box-shadow: 0 68px 0 rgba(220, 220, 220, 0.7), 0 -68px 0 rgba(220, 220, 220, 0.7), 0 0px 30px rgba(0, 0, 0, 0.6);
}
#levelup .wheelspin .inner {
    position: relative;
    top: -1862px;
    -webkit-transition: all 5s;
    -moz-transition: all 5s;
    -o-transition: all 5s;
    transition: all 5s;
}
#levelup .wheelspin .inner.roll {
    top: 0;
}

/* ==============================
Inner Navigation
============================== */

.inner-nav{
    display: inline-block;
    position: relative;
}
.inner-nav.toolbox{
    float: right;
}
.inner-nav ul{
    float: right;
    margin: auto;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    line-height: 60px;
}
.inner-nav ul li {
    float: left;
    position: relative;
}
.inner-nav ul li a{
    color: #999;
    outline: none;
    letter-spacing: 2px;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    transition: color 0.3s;
    margin: 0 30px 0 0;
}
.inner-nav.toolbox ul li a{
    margin: 0 0 0 30px;
}
.inner-nav ul > li:first-child > a{

}
.inner-nav ul li a:hover{
    color: #eee;
}
.inner-nav ul li a.active{
    box-shadow: 0 -1px 0 #14af97 inset;
    color: #fff;
}


/* ==============================
Sections styles
============================== */

/*
* Common
*/

.page-section,
.small-section{
    width: 100%;
    display: block;
    position: relative;
    overflow: hidden;
    background-color: transparent !important;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    padding: 40px 0;
    z-index: 1;
}

.bg-orange{ background-color: #f47631 !important; }
.bg-yellow{  background-color: #ffce02 !important; }
.bg-cyan{ background-color: #27c5c3 !important; }
.bg-green{ background-color: #58bf44 !important; }
.bg-blue{ background-color: #43a5de !important; }
.bg-purple{ background-color: #375acc !important; }
.bg-red{ background-color: #e13939 !important; }

.section-title {
    margin-bottom: 15px;
    font-size: 21px;
    font-weight: 500;
    text-transform: uppercase;
    /*text-align: center;*/
    letter-spacing: 0.1em;
    line-height: 1.4;
    font-family: 'Montserrat', arial, sans-serif;
    position: relative;
    color: #fff;
}
.section-title span {
    /*border-bottom: 1px solid #444;*/
    display: inline-block;
    position: relative;
}
.section-title::after {
    /*content: ' ';
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(0,0,0,0.1);
    position: relative;
    bottom: 1px;*/
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    margin-top: 7px;
    margin-left: 1px;
    background-color: #2BB7A1;
    position: absolute;
    bottom: 0;
}



/* ==============================
Filter / Grid
============================== */


/*
* Works filter
*/

.works-filter{
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    /*text-transform: uppercase;*/
    text-align: center;
    color: #555;
    cursor: default;
    letter-spacing: 1px;
    border-bottom: 1px solid #ECECEC;
}
.works-filter a{
    display: inline-block;
    margin: 0 5px;
    color: #999;
    text-decoration: none;
    padding: 0 5px;
    line-height: 59px;

    webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    -o-transition: color 0.3s;
    -ms-transition: color 0.3s;
    transition: color 0.3s;

    box-shadow: none;
    position: relative;
    cursor: pointer;
}
.works-filter a:hover{
    color: #14af97;
    text-decoration: none;
}
.works-filter a.active,
.works-filter a.active:hover{
    color: #14af97;
    cursor: default;
}
.works-filter a.active::after,
.works-filter a.active:hover::after
{
    content: '';
    position: absolute;
    bottom: -1px;
    width: 100%;
    left: 0;
    height: 1px;
    background: #14af97;
}



/*
 * Works grid 
 */

.works-grid{
    list-style: none;
    margin: 0;
    padding: 0;
}
.work-item{
    width: 25%;
    float: left;
    margin: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.work-grid-2 .work-item{
    width: 50%;
}
.work-grid-3 .work-item{
    width: 33.333%;
}
/*.container .work-grid-3 .work-item{
	width: 33.2%;
}*/
.work-grid-5 .work-item{
    width: 20%;
}

.works-grid.work-grid-gut{
    margin: 0 0 0 -10px;
}
.works-grid.work-grid-gut .work-item{
    padding: 0 0 10px 10px;
}

.work-item > a{
    display: block;
    padding: 0 0 84px 0;
    position: relative;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
}
.work-item a,
.work-item a:hover{
    color: #111;
    border: none;
}
.work-img{
    position: relative;
    overflow: hidden;
}
.work-img img{
    width: 100%;
    display: block;
    overflow: hidden;
}
.work-intro{
    width: 100%;
    height: 84px;
    padding: 20px 20px 0 20px;

    -webkit-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    overflow: hidden;
}
.work-title{
    margin: 0 0 8px 0;
    padding: 0;
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2;
}
.work-item.size-2 .work-title{
    font-size: 26px;
    line-height: 1;
}
.work-descr{
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    color: #aaa;
    line-height: 1.2;
    letter-spacing: 1px;
}
.works-grid.hide-titles .work-item > a{
    overflow: hidden;
    padding: 0;
}
.works-grid.hide-titles .work-item .work-intro{
    opacity: 0;
    bottom: -94px;

}
.works-grid.hide-titles .work-item:hover .work-intro{
    opacity: 1;
}



/* Work item hover state */

.work-intro{
    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.work-item:hover .work-intro{
    /*bottom: auto;*/
    /*top: 50%;*/
    color: #fff;
    z-index: 3;
}
.work-item.size-1:hover .work-intro {
    -webkit-transform: translateY(-230px);
    -moz-transform: translateY(-230px);
    transform: translateY(-230px);
}
.work-item.size-2:hover .work-intro {
    -webkit-transform: translateY(-170px);
    -moz-transform: translateY(-170px);
    transform: translateY(-170px);
}
.work-item:hover .work-title{
    color: #ccc;
}
.work-item:hover .work-descr{
    color: #999;
}
.work-item .work-img:after{
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,0,0, 0);

    -webkit-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.300, 0.100, 0.580, 1.000);

}
.work-item:hover .work-img:after{
    background: rgba(0, 0, 0, 0.65);
}

.works-grid.hover-color .work-item:hover .work-intro,
.works-grid.hover-color .work-item:hover .work-title,
.works-grid.hover-color .work-item:hover .work-descr{
    color: #fff;
}
.works-grid.hover-color .work-item:hover .work-img:after{
    background:rgba(0, 0, 0, 0.9);/*#e41919;*/
}
.works-grid.hover-white .work-item:hover .work-intro,
.works-grid.hover-white .work-item:hover .work-title,
.works-grid.hover-white .work-item:hover .work-descr{
    color: #000;
}
.works-grid.hover-white .work-item:hover .work-img:after{
    background: rgba(250,250,250, .9);
}

.work-item .work-img > img{
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    -ms-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
    transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.work-item:hover .work-img > img{
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

/* ==============================
Pagination
============================== */

.pagination {
    font-size: 13px;
    margin-top: 17px;
}
.pagination.cardealer {
    margin-top: 19px;
}
.pagination.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}
.pagination tr td {
    width: 7.7%;
}
.pagination a{
    display: block;
    line-height:24px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #494949;
    padding: 7px 10px;
    text-align: center;
    color: #999;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    margin: 0 1px 0 0;
    -webkit-transition: background 0.3s, color 0.3s;
    -moz-transition: background 0.3s, color 0.3s;
    -o-transition: background 0.3s, color 0.3s;
    -ms-transition: background 0.3s, color 0.3s;
    transition: background 0.3s, color 0.3s;
}
.pagination td:last-of-type a:not(.active) {
    margin: 0;
}
.pagination .fa{
    font-size: 15px;
    position: relative;
    top: 1px;
}
.pagination a:hover{
    text-decoration: none;
    color: #FFFFFF;
    background: #5C5C5C;
    cursor: pointer;
}
.pagination a.active,
.pagination a.active:hover{
    color: #FFF;
    cursor: default;
    /*margin: 0 4px;*/
    background: #404040;
    box-shadow: 0 0 0 1px #5affd3 inset, 0 0 5px rgba(0, 0, 0, 0.5);
    padding: 9px 9px;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
}
.pagination a.no-active,
.pagination a.no-active:hover{
    color: #bbb;
    cursor: default;
}



/* ==============================
   Shortcodes
   ============================== */

/*
 * Alert messages
 */

/*
.alert{
	margin: 0 auto 10px;
	padding: 14px 20px; 
    
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    
	border: 1px solid #ddd;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #777;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
	
}
.success{
	border-color: #a9e2c2;
	color: #36a367;
}
.info{
	border-color: #9ecdfc;
	color: #297ad3;
}
.notice{
	border-color: #f9ce75;
	color: #e9a00a;
}
.error{
	border-color: #ffbbbb;
	color: #e33131;
}
*/

/*
 * Accordion
 */

.accordion > dt{
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.accordion > dt > a{
    display: block;
    position: relative;
    color: #777;
    text-decoration: none;
    padding: 14px 20px;
    border: 1px solid #e5e5e5;


    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.accordion > dt > a:hover{
    text-decoration: none;
    border-color: #ddd;
    background-color: #fcfcfc;
    color: #444;
}
.accordion > dt > a.active{
    color: #000;
    border-color: #ddd;
    background-color: #fcfcfc;
    cursor: default;
}
.accordion > dt > a:after{
    content: "\f107";
    width: 15px;
    height: 15px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    right: 10px;
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: #999;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.accordion > dt > a.active:after,
.accordion > dt > a.active:hover:after{
    content: "\f106";
    color: #111;
}
.accordion > dt > a:hover:after{
    color: #444;
}

.accordion > dd{
    margin-bottom: 10px;
    padding: 10px 20px 20px;
    font-size: 14px;
    line-height: 1.8;
    color: #777;
}

/*
 * Toggle
 */

.toggle > dt{
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.toggle > dt > a{
    display: block;
    position: relative;
    color: #777;
    text-decoration: none;
    padding: 14px 20px;
    border: 1px solid #e5e5e5;

    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.toggle > dt > a:hover{
    text-decoration: none;
    border-color: #ddd;
    background-color: #fcfcfc;
    color: #444;
}
.toggle > dt > a.active{
    color: #000;
    border-color: #ddd;
    background-color: #fcfcfc;
}
.toggle > dt > a:after{
    content: "\f107";
    width: 15px;
    height: 15px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    right: 10px;
    font-family: 'FontAwesome';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 15px;
    line-height: 15px;
    text-align: center;
    color: #999;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
    transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}
.toggle > dt > a.active:after,
.toggle > dt > a.active:hover:after{
    content: "\f106";
    color: #111;
}
.toggle > dt > a:hover:after{
    color: #444;
}
.toggle > dd{
    margin-bottom: 10px;
    padding: 10px 20px 20px;
    font-size: 14px;
    line-height: 1.8;
    color: #777;
}

/*
 * Progress bars
 */

.tpl-progress{
    margin-top: 10px;
    margin-bottom: 50px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    overflow: visible;
    height: 2px;
    background: #f0f0f0;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.tpl-progress .progress-bar{
    padding-top: 2px;
    position: relative;
    overflow: visible;
    background-color: #222;
    font-size: 11px;
    color: #000;
    text-align: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.tpl-progress .progress-bar > span{
    display: inline-block;
    min-width: 24px;
    height: 24px;
    padding: 0 3px;
    position: absolute;
    top: 0px;
    right: -5px;

    text-align: center;
    line-height: 23px;
    letter-spacing: 0;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

}
.progress-color .progress-bar{
    background-color: #e41919;
    color: #e41919;
}
.progress-color .progress-bar > span{
    background-color: #e41919;
    color: #fff;
}

/* Alt bar */
.tpl-progress-alt{
    background: #f2f2f2;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.tpl-progress-alt .progress-bar{
    padding-left: 5px;
    padding-right: 5px;
    position: relative;
    overflow: visible;
    background-color: #222;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-align: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}



/* ==============================
   Bootstrap multicolumn grid
   ============================== */

/* clear the first in row for any block that has the class "multi-columns-row" */
.multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: left; }

@media (min-width: 768px) {
    /* reset previous grid */
    .multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: none; }

    /* clear first in row for small columns */
    .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: left; }
}
@media (min-width: 992px) {
    /* reset previous grid */
    .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: none; }

    /* clear first in row for medium columns */
    .multi-columns-row .col-md-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-md-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-md-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-md-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-md-1:nth-child(12n + 13) { clear: left; }
}
@media (min-width: 1200px) {
    /* reset previous grid */
    .multi-columns-row .col-md-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-md-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-md-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-md-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-md-1:nth-child(12n + 13) { clear: none; }

    /* clear first in row for large columns */
    .multi-columns-row .col-lg-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-lg-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-lg-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-lg-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-lg-1:nth-child(12n + 13) { clear: left; }
}