html {
   height: 100%;
}

body {

   font-family: Verdana, Geneva, sans-serif;
   font-size: 16px;
   line-height: 1.4em;
   color: #888;
   background-color: #000;
   margin: 0;
   padding: 0;
}

#pagetop   { position:relative; max-width:900px; margin: 0 auto; }
#top_logo1 { position:absolute; top:8px; left:10px; width:25%; max-width:120px; border:none; }
#top_logo2 { position:absolute; top:8px; left:43px; max-width:120px; border:none; }
#top_lang  { position:absolute; top:10px; right:10px; width:60px; height:20px; border:none; }
#mob_lang  { position:absolute; top:10px; right:10px; width:60px; height:20px; border:none; display: none; }

#topnav  { position: relative; margin: 0; padding: 4px; }
#topmnu  {
   background: transparent;
   width: 90%; max-width:900px;
   font-size: 1.0em; white-space: nowrap; text-align: center;
   border: 1px solid #444; border-width: 1px 0;
   padding: 5px 0; margin: 0 auto;
}

#mob-nav-togg   { display: block; width: 32px; height: 32px; margin: 0 0; }

#topmnu a       { color: #f60; text-decoration: none; font-weight: normal; padding: 2px 0; margin: 0 15px; text-transform: uppercase; }
#topmnu a:hover { color: #fa0; text-decoration: none; }

#pagefoot       { width: 90%; max-width:900px; border-top: 1px solid #444; padding: 4% 0; margin: auto; }
#botmnu         { background: transparent; font-size: 0.9em; text-align: center; }
#botmnu a       { color: #f60; text-decoration: none; font-weight: normal; padding: 2px 0; margin: 0 5px; }
#botmnu a:hover { color: #fa0; text-decoration: none; }

#pagemid  { margin: 0 auto; }
#content  { margin: 5%; }

.cont-sma { max-width: 500px; margin: auto; }

.lang1  { width: 16px; height: 16px; border: none; margin: 2px 0 2px 4px; cursor: pointer; opacity: 0.5; }
.lang2  { width: 16px; height: 16px; border: none; margin: 2px 0 2px 4px; }

.ui-tiny  { display: initial; }
.ui-wide  { display: none; }

h1      { font-family: Tahoma, Geneva, sans-serif; font-size: 2.0em; color: #f60; margin: 2em 0 1em 0; font-weight: normal; }
h2      { font-family: Tahoma, Geneva, sans-serif; font-size: 1.5em; color: #f60; margin: 2em 0 1em 0; font-weight: normal; }
h3      { font-family: Tahoma, Geneva, sans-serif; font-size: 1.0em; color: #ddd; margin: 2em 0 0.2em 0; font-weight: bold; }

ul      { margin: 0 20px 15px 0; padding: 0 0 0 25px; }
ol      { margin: 0 20px 15px 0; padding: 0 0 0 25px; }
li      { margin: 0; padding: 0; }

p       { margin: 0.2em 0 2em 0; }
td      { margin: 8px 10px 8px 0; }

a       { color: #f60; text-decoration: none; }
a:hover { color: #fa0; text-decoration: none; }

/* form elements            */
option  { color: inherit; background: inherit; }

.frm-row   { padding: 0.3em 0; max-width: 600px; clear: both; overflow: hidden; }
.frm-lbl   { float: left; width: 100%; min-width: 105px; padding: 0.6em 0; display: inline-block; }
.frm-ind   { display: none; }
.frm-inp   { float: left; width: 92%; min-width: 235px; }
.frm-nfo   { float: left; width: 100%; padding: 0 0 1.7em 0; }
.frm-req   { float: left; width: 5%;  min-width: 20px;  padding: 0.6em 0 0 5px; color: #f60; font-size: 1.0em; }
.frm-fld   { border: 3px solid #555; border-radius: 4px; width: 100%; }

.radio span, .checkbox span { border: 2px solid #a69867; }

.btn {
   color: #fff;
   font-size: 1em;
   background-color: #b34800;
   background-image: none;
   padding: 0.7em 3.5em;
   border: none;
   border-radius: 5px;
   text-transform: uppercase;
   cursor: pointer;
   transition: 0.4s all;
}

.btn-wht      { color: #fff; background-color: #a69867; padding: 0.7em 3.5em; }
.btn-sma      { padding: 0.7em 1.3em; border-radius: 2px; }
.btn:disabled { color: #888; background-color: #deba84; cursor: default; }

.frm-fld.ro, .frm-fld:disabled, .frm-fld:readonly {
   color: #aaa; border-color: #bbb; background-color: #eee;
}

::-webkit-input-placeholder  { color:#444; }
input:-moz-placeholder       { color:#444; }
textarea:-moz-placeholder    { color:#444; }

div.frm-err      { border: 2px solid #d00; }
input.frm-err    { border-color: #d00; background-color: #dcc; }
textarea.frm-err { border-color: #d00; background-color: #dcc; }
select.frm-err   { border-color: #d00; }
span.frm-err     { border-color: #d00; }

.response       { width: 80%; min-width: 245px; max-width: 470px; margin: 0 auto; padding: 0.6em 0.4em; }
.response.err   { border-left: 4px solid #d00; color: #d00; }
.response.msg   { border-left: 4px solid #0b0; color: #1b6; }

/* dialog custom     */
.utils-dlg-win     { background: #b34800; background: rgba(179,72,0,0.7); }
.utils-dlg-title   { color: #fff; height: 30px; margin-top: 0; }
.utils-dlg-close   { color: #fff; font-size: 18px; }
.utils-dlg-cont    { background: #111; color: #fff; }
.utils-dlg-cont h1 { color: #b34800; font-weight: bold; font-size: 18px; }
.utils-dlg-cont h2 { color: #b34800; font-weight: bold; font-size: 16px; }
.utils-dlg-cont h3 { color: #fff; font-weight: bold; font-size: 14px; }
.utils-dlg-button  { background: #b34800; border: none; border-radius: 2px; font-weight: bold; padding: 6px 6%; color: #fff; margin: 5px 5px 0 5px; cursor: pointer;  box-sizing: content-box; }

.img-fluid { width: 100%; height: auto; }

.wS     { width: 55px; }
.wM     { width: 85px; }
.wL     { width: 140px; }
.wXL    { width: 200px; }
.wXXL   { width: 250px; }

/* subclasses, overrides   */
.b10    { margin: 10px; }
.b15    { margin: 15px; }
.v10    { margin: 10px 0 10px 0; }
.v15    { margin: 15px 0 15px 0; }

.ac     { text-align: center; }
.al     { text-align: left; }
.ar     { text-align: right; }
.aj     { text-align: justify; }
.fc     { display:block; margin-left: auto; margin-right: auto; }
.fl     { float: left; position: relative; }
.fr     { float: right; position: relative; }
.clr    { clear: both; display: block; }
.nw     { white-space:nowrap; }

.obl  { color: #f00; font-weight: bold; }
.err  { color: #c30; }
.msg  { color: #080; }
.ro   { color: #888; border-color: #ddd; }
.clk  { cursor: pointer; }


@media only screen and (min-width: 414px) {
   body       { font-size: 18px; }

   .ui-tiny   { display: none; }
   .ui-wide   { display: initial; }

   #pagetop   { margin-top: 32px; }
   #topnav    { position: absolute; top: 0; left: 0; border: none; width: 100%; }
   .mnu-hide  { display: none; }

   #mob_lang  { display: block; }
   #top_lang  { display: none; }

   #content   { margin: 5% 8%; }
}

@media only screen and (min-width: 640px) {
   .frm-lbl   { width: 30%; }
   .frm-ind   { width: 30%; min-width: 105px; padding: 1em 0; float: left; display: inline-block; }
   .frm-inp   { width: 60%; }
   .frm-nfo   { width: 68%; }
   .frm-req   { width: 5%;  min-width: 20px; }
}

@media only screen and (min-width: 769px) {
   #content   { max-width: 640px; margin: 10% auto; }
}


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