h1, h2, h3, h4, h5, h6 {
    word-spacing: .8em; letter-spacing: .2em;
}
@-moz-document url-prefix() {
    body, table p   { font-size: .8em; line-height: 1.2em; }
    h1              { font-size: 28px; line-height: 1.3; }
    h2              { font-size: 24px; line-height: 1.3; }
}
h1  { color: #f90; }
h2  { color: #aaa; font-style: italic; }
a   { color: #39f; }

table thead tr      { background-color: #299 !important; color: #fff; text-transform: uppercase; }

.ui-accordion-header{ text-transform: uppercase; font-family: sans-serif; font-weight: bold; }

/* Fixing IE */
.clearfix:after     { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix           { display: inline-block; }
/* Hides from IE-mac \*/
* html .clearfix    { height: 1%; }
.clearfix           { display: block; }
/* End hide from IE-mac */

/* *** MENU *** */
nav, #menu          { clear: both; float: left; width: 100%; height: auto; 
                        border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px;
                        border-bottom: none; background: #777; display: block; }
.menu-line          { clear: both; width: 98%; height: 30px; line-height: 30px;
                        padding: 0 0 0 1%; border-bottom: none; font-family: sans-serif; /*font-size: 14px; font-weight: bold;*/ }
.menu-line a        { float: left; width: auto; margin: 5px 0 0 5px; line-height: 22px; height: 22px; padding: 0 15px; text-decoration: none;
                        text-transform: uppercase; letter-spacing: .1em; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 1); }
.menu-line a:hover  { color: #ff0; text-decoration: none; }
.menu-line a.active { color: #000; background: #eee; margin-top: 4px; text-shadow: none; border-top-left-radius: 6px;
                        border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px;
                        -moz-border-top-left-radius: 6px; -moz-border-top-right-radius: 6px;
                        height: 26px; line-height: 26px; border: none; }
.menu-sub-line      { clear: both; width: 100%; height: auto; /*min-height: 30px;*/ background: #eee; 
                        font-family: Arial, sans-serif; border-bottom: 1px solid #ccc; font-size: .7em; }
.menu-sub-line a    { float: left; margin: 4px 10px; line-height: 20px; height: 20px; padding: 0 10px; /*color: #000;*/
                        text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.menu-sub-line a:hover  { /*color: #fff;*/ text-decoration: underline; }
.menu-sub-line a.active { color: #554; background: #fff; 
                        border: 1px solid #776; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
@-moz-document url-prefix() {
    .menu-line      { padding: 0; margin: 2px 0 0 5px; height: 22px; line-height: 22px; }
    .menu-line a    { margin: 0 0 0 5px; }
    .menu-line a.active { height: 20px; line-height: 20px; }
    .menu-sub-line a    { margin: 4px 10px; padding: 0; line-height: 16px; height: 16px; padding: 0 10px 0 25px; }
    
}


nav                 { border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; position: relative; }

/* *** MENU PARRENT LINE *** */
#menu-parent-line   { margin: 1% 0; padding: .5em 0; text-transform: uppercase; font-family: serif; 
                      text-indent: .5em; color: #f90; background: #eee; }

/* *** MOBILE MENU *** */
#mobile-menu        { clear: both; position: absolute; top: 30px; width: 100%; z-index: 5000; 
                      background: rgba(0, 0, 0, 0.85); border: none; display: none; border-radius: 6px; 
                      -webkit-border-radius: 6px; -moz-border-radius: 6px; padding-bottom: 10px; }
#mobile-menu ul     { margin: 0; padding: 0 0 0 25px; width: auto; position: static; display: block; border: none; background: transparent; }
#mobile-menu ul li  { margin: 5px 0 0 15px; }
#mobile-menu ul li a{ text-decoration: none; text-transform: uppercase; color: #f90; }
#mobile-menu ul li a:hover{ text-decoration: underline; color: #fff; }

/* *** INDIKATOR *** */
#ibox-lbl           { float: left; width: 180px; text-align: right; display: inline; font-style: italic; color: #ebe; }
#ibox               { float: left; width: 58%; margin-left: 2%; display: inline; }
#indicator          { float: left; margin: 5px 2px; width: 70%; height: 16px; display: inline;
                      border: 1px solid #fc0; background: #fff; border-radius: 6px;
                      -webkit-border-radius: 6px; -moz-border-radius: 6px; overflow: hidden; }

#indicator #polzunok{ float: left; width: 2%; height: 16px; background: #f00; }
.metka-l            { float: left; margin: 0; color: #f00; display: inline; vertical-align: middle; }
.metka-r            { float: left; margin: 0; color: #390; display: inline; vertical-align: middle; }

/* *** AUTHORISATION *** */
#sign-in-dialog     { clear: both; float: left; margin: 2% 0 5% 17%; width: 65%; }
.starmark           { width: 24px; height: 24px; border: none; margin: 0; font-size: 1.2em; display: inline-block; 
                     background: #fff; color: #f00; text-align: center; vertical-align: middle; }
#sign-in-dialog input[type=text],
#sign-in-dialog input[type=password] { width: 55%; display: inline; }
.cntrs              { width: 24px; height: 24px; border: none; margin-left: 10px; font-size: .8em; display: inline; 
                     background: #fff; color: #390; text-align: center; vertical-align: middle; }
#sign-in-dialog #tel  { width: 145px; display: inline; }
#sign-in-dialog #CountryTelCode { width: auto; max-width: 145px; display: inline; }
#sign-in-dialog label,
#sign-in-dialog .tel-lbl { width: 180px; text-align: right; display: inline-block; }
#sign-in-dialog #lbl-showpsw,
#sign-in-dialog #lbl-memome { width: 180px; display: inline-block; text-align: right; vertical-align: middle; }
#sign-in-dialog [type='checkbox'] { width: 40px; display: inline; }
.msg-error          { width: 50%; margin: 1% 20%; padding: 2%; }

#CountryTelCode,
#CountryMobileTelCode { width: auto; max-width: 180px; }
#tel, #worktel,
#firmTel, #firmMobileTel { width: 180px; }

button          { text-transform: uppercase; font-size: .8em; }
form .w3-button { padding: 10px 5% !important; min-width: 30%; }
form a.w3-button,
form span.w3-button { padding: 5px 10px !important; min-width: inherit; }
label   { font-size: .8em; font-weight: bold; color: #f90; }
::placeholder { color: #299; font-style: italic; }
/*
 * < 601 px
 */
@media only screen and (max-width: 601px) {

    h1, h2, h3, h4, h5, h6 {
        word-spacing: normal; letter-spacing: normal;
    }
    nav #menu       { display: none; }
    nav #menu-icon  { display: block; }
    nav #mobile-menu{ display: none; }  
    
    /* *** INDIKATOR *** */
    #ibox-lbl       { float: left; width: 98%; text-align: left; display: block; }
    #ibox           { float: left; width: 98%; display: block; }
    #indicator      { width: 70%; }
    
    /* *** AUTHORISATION *** */
    #sign-in-dialog { margin: 0; padding: 0; width: 98%; }
    
    #sign-in-dialog input[type=text],
    #sign-in-dialog input[type=password] { float: left; margin-left: 10%; width: 80%; display: inline; }
    
    #sign-in-dialog #tel  { width: 150px; margin-left: 10px; display: inline; }
    #sign-in-dialog #CountryTelCode { float: left; margin-left: 10%; width: 60px; display: inline; }
    
    #sign-in-dialog label { float: left; width: 100%; padding-left: 10%; text-align: left; display: block; }
    #sign-in-dialog .tel-lbl { display: none; }
    
    #sign-in-dialog #lbl-showpsw,
    #sign-in-dialog #lbl-memome { margin-left: 10%; padding: 5px 0 0 0; }
    .msg-error      { width: 95%; margin: 1% 2%; }
    .w3-container, 
    .w3-panel       { padding: 0;}
    
    #CountryTelCode,
    #CountryMobileTelCode { width: 60px; }
    #tel, #worktel,
    #firmTel, #firmMobileTel  { width: 140px; }
}

/*
 * 601 - 992 px
 */
@media only screen and (min-width: 601px) and (max-width: 992px) {

    h1, h2, h3, h4, h5, h6 {
        word-spacing: .4em; letter-spacing: .1em;
    }
    /* *** Menu *** */
    nav #menu       { display: block; }
    nav #menu-icon  { display: none; }
    nav #mobile-menu{ display: none; }
    
    /* *** INDIKATOR *** */
    #ibox           { margin-left: 20%; width: 65%; display: block; }
    #indicator      { width: 65%; }
    
    /* *** AUTHORISATION *** */
    #sign-in-dialog { clear: both; float: left; margin: 2% 0 5% 10%; width: 80%; }

    #sign-in-dialog input[type=text],
    #sign-in-dialog input[type=password] { width: 40%; display: inline; }

    #sign-in-dialog #tel  { width: 22%; min-width: 80px; display: inline; }
    #sign-in-dialog #CountryTelCode { width: 70px; }

    #sign-in-dialog label,
    #sign-in-dialog .tel-lbl { width: 180px; text-align: right; display: inline-block; }

    #sign-in-dialog #lbl-showpsw,
    #sign-in-dialog #lbl-memome { margin-left: 10%; padding: 5px 0 0 0; }

    .msg-error      { width: 70%; margin: 1% 15%; }
    
    #CountryTelCode,
    #CountryMobileTelCode { width: 140px; }
    #tel, #worktel,
    #firmTel, #firmMobileTel  { width: 140px; }
}

/*
 * > 993 px
 */
@media only screen and (min-width: 993px) {
    /* *** Menu *** */
    nav #menu       { display: block; }
    nav #menu-icon  { display: none; }
    nav #mobile-menu{ display: none; }
}