.max-width { max-width: 1200px; }
.min-width { min-width: 231px; } /* 460/2 */

.pre {
  white-space: pre;
}
.nowrap {
  white-space: nowrap;
}

.text-center { text-align: center; }
/* === FLEX START === */
.flex { display: flex !important; }
.flex.column { flex-direction: column; }
.flex.wrap   { flex-wrap: wrap; }

.flex-column {
  display: flex !important;
  flex-direction: column;
}
.flex-wrap {
  display: flex !important;
  flex-wrap: wrap;
}
.flex-table {
  display: flex !important;
}
.flex-table > * {
  flex: 1 1 auto !important; 
}
.flex-table > span {
  flex: 0 0 auto !important; 
}

.align-start  { align-items: flex-start; }
.align-end    { align-items: flex-end; }
.align-center { align-items: center;}

.justify-start  { justify-content: flex-start; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }

.flex-none { flex: 0 0 auto !important; }
.flex-item { flex: 0 1 auto !important; }
.flex-cell { flex: 1 1 auto !important; }

.flex .right { margin-left: auto; float: right; }

/* === FLEX END === */
.content-box {
  -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
input, textarea,
.border-box {
  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
input.warning, textarea.warning {
  border-color: #FF0000;
}
[data-title]:hover:before {
  content: attr(data-title);
  position: absolute;
  right: 1.5em;
  z-index: 1;
  padding: 0.5em; margin: -2.5em 0.5em;
  border-radius: 0.5em;
  background: #F8F8F8;
  background: linear-gradient(#FFFFFF, #F0F0F0);
  border-width: 1px;
  border-style: solid;
  border-color: #808080;
  box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.5);
}
[data-title].none:hover:before {
  left: 10%; right: 10%;
  max-width: 80vw;
  white-space: pre-wrap;
}
.nav {
  background: #064286; color: #FFFFFF;
}
[data-sticky="top"] {
  position: absolute;
  width: 100%;
}
.stickyTop {
  position: fixed;
  top: 0px; left: 0px; right: 0px;
  width: 100%; max-height: 100vh;
  overflow: auto;
  /*box-shadow: 0px 5px 5px 0px RGBA(0, 0, 0, 0.5);*/
}
.background {
  position: absolute;
  max-width: 100%;
  z-index: -1;
  overflow: hidden;
}
.background.stickyTop {
  position: fixed;
  overflow: hidden;
}

/* === POPUP start === */
div.popup {
  position: absolute;
  z-index: 1;
  margin: 0px; padding: 1px;
  display: none;
  border: 1px solid #7080B0;/*#B2C4D6;*/
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 1px 3px 3px 1px rgba(0, 0, 0, 0.5);
  color: #000000;
}
div.popup.right {
  right: 0px;
}
.stickyTop div.popup {
  position: relative;
}
a.popup:focus ~ div.popup {
  display: block;
}
label.popup {
  cursor: pointer;
}
input[name="spoiler"] + div {
  display: none;
}
input[name="spoiler"] ,
input[name="popup"] {
  display: none;
}
input[name="spoiler"]:checked + div ,
input[name="popup"]:checked + .popup {
  display: block;
}
input[name="aside"] {
  display: none;
}
input[name="aside"]:checked + aside {
  transform: translate3d(0, 0, 0);
}

/* === POPUP end === */
h2 {
  font-size: 2em;
  color: #064286;
}
.panel {
  padding: 0.5em;
  border-radius: 0.5em;
  background-color: #FFFFFF;
  color: #605AA1;
}
.panel h2 {
  padding: 1em 0em 0.2em 1em;
  text-align: left;
}
figure {
  margin: 0.2em; padding: 0.5em;
  border-radius: 0.5em;
  background-color: #FFFFFF;
  color: #605AA1;
  box-shadow: 1px 2px 3px 0px RGBA(0, 0, 0, 0.25);
}
figcaption div:first-child{
  text-align: center;
  font-size: 2em;
}
figcaption div:last-child{
  text-align: center;
  font-size: 1em;
}
.shadow {
  box-shadow: 1px 2px 3px 0px RGBA(0, 0, 0, 0.25);
}
img.inset {
  border: 1px inset #7080B0;
  border-radius: 0.5em;
}
img.circle {
  background: #609add;
  background: linear-gradient(to top, #609add, #a07aee);
  padding: 6px;
  border-radius: 50%;
}
.infoParent {
  position: absolute;
  left: 0px; right: 0px;
  top: 0px; bottom: 0px;
  width: 350px;
}
.infoParent h4 {
  font-size: 3em;
  color: #FFFFFF;
  text-shadow: 1px 3px 3px RGBA(0, 0, 0, 0.3);
}
.infoParent div {
  font-size: 1em;
  margin: 1em 0px; padding: 2em;
  color: #FFFFFF;
  background: RGBA(0, 0, 0, 0.3);
}
ul.none {
  margin: 0px; padding: 0px;
  list-style: none;
}
ul.flex {
  margin: 0px; padding: 0px;
  list-style: none;
}
ul.flex > li {
  flex: 1 1 0px;
  display: block;
}
/* === COLUMNS start === */
ul.columns {
  display: flexbox;
  display: flex;
  flex-wrap: wrap;
  margin: 0px; padding: 0px;
  list-style: none;
  justify-content: center;
}
ul.columns > li {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
ul.columns > li > div {
  flex: 1 1 auto;
  overflow: hidden;
}
ul.columns > li > ul {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  margin: 0px; padding: 0px;
  list-style: none;
  justify-content: flex-end;
}
ul.columns > li > ul > li {
  flex: 1 1 auto;
  overflow: hidden;
}

/* === COLUMNS end === */
/* === TOOLBAR start === */
ul.toolBar {
  width: 100%;
  display: flex;
  margin: 0px; padding: 0px;
  list-style: none;
}
ul.toolBar > li {
  position: relative;
  flex: 1 1 auto;
  display: block;
  margin: 0px; padding: 0px 8px;
  text-align: center;
}
ul.toolBar > li.sep {
  flex: 0 0 0%;
  padding: 0px;
  border-left: 1px solid #CDCED0;
  border-right: 1px solid #FDFEFF;
}
ul.toolBar > li a {
  display: block;
}
/*background: linear-gradient(to top, #609add, #a07aee);*/
ul.toolBar > li  > a,
ul.toolBar label         { color: #7080B0; }
ul.toolBar > li  > a:hover,
ul.toolBar label:hover   { color: #082888; } /*#064286;*/
/*ul.toolBar a:active  { color: #A080F0; } */
/* === TOOLBAR end === */
/* === NAVIGATION start === */
ul.nav {
  width: 100%;
  display: flex;
  margin: 0px; padding: 0px;
  list-style: none;
}
ul.nav.column {
  flex-direction: column;
  font-size: 1.5em;
}
ul.nav > li {
  flex: 1 0 auto;
  display: block;
  margin: 0px; padding: 0px;
  text-align: center;
}
ul.nav.column > li {
  border-top: 1px solid #FFFFFF;
  text-align: initial;
}
ul.nav > li label,
ul.nav > li a {
  display: block;
  margin: 0px; padding: 8px 0px;
}
ul.nav.column > li label,
ul.nav.column > li a {
  margin: 0px; padding: 8px 16px;
}
ul.nav > li a.active  { background-color: #064286; color: #A060E0; }

ul.nav > li label,
ul.nav > li a         { background-color: #064286; color: #FFFFFF; }
ul.nav > li label:hover,
ul.nav > li a:hover   { background-color: #FFFFFF; color: #064286; }
ul.nav > li.footer {
  border-top: 4px solid #FFFFFF;
  color: #064286;
  text-align: center;
}
/* === NAVIGATION end === */
/* === LANDING start === */
ul.landing {
  display: flex;
  flex-direction: column
}
ul.landing > li {
  flex: 1 0 100vh;
}
ul.landing > li > div.background {
/*  position: fixed;
  z-index: -1;
  left: 0px; right: 0px;
  top: 0px; bottom: 0px;
  width: 100%; height: 100%;
  overflow: hidden;*/
}
/* === LANDING end === */
ul.panel > li {
  margin: 0px; padding: 4px;
}

/* OLD start */
.a {
  cursor: pointer;
}

.search-big input {
    width: 100%;
    margin: 0px; padding: 8px;
}
.search-big label ,
.search-big button {
  margin: 0px; padding: 0px 4px;
  border: none;
  background: transparent;
  color: #7080B0;
  cursor: pointer;
}
.search-big .tab {
    display: inline-block;
    margin: 0px; padding: 0px 10px 5px 10px;
    border-radius: 0px 0px 1em 1em;
    background-color: #FFFFFF;
    text-align:center;
}
.search-small input {
    width: 100%;
    margin: 0px; padding: 2px 8px;
}
.search-small label ,
.search-small button {
  margin: 0px; padding: 0px 4px;
  border: none;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.search-big   button b ,
.search-small button b {
  vertical-align: text-bottom
}
.search-big .panel {
  padding: 0.3em;
  border-radius: 1em / 50%;
}
.language.panel {
  padding: 0.3em;
  border-radius: 1em / 50%;
}
ul.language.panel li {
  margin: 0px; padding: 0px;
}

.before-after {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}
.before-after img {
  position: relative;
}
.before-after .before {
  position: absolute;
  top: 0px; left: 0px;
  width: 50%;
  overflow: hidden;
}
.before-after .slider {
  position: absolute;
  left: 0px; top: 0px;
  width: 2px; height: 100%;
  margin: 0px 0px 0px -1px; padding: 0px;
  border: none;
  background: #FFFFFF;
  cursor: w-resize;
}
.before-after .slider:after {
  font-family: "fontello";
  content: '\f0ec';
  position: absolute;
  left: -16px; top: 50%;
  width: 32px; /*height: 100%;*/
  font-size: 32px;
  color: #FFFFFF;
}

main > section {
  min-height: 100vh;
  padding-bottom: 1em;
  background: #ECEEF0;
  background: linear-gradient(to top, #FFFFFF, #ECEEF0 10vh);
}
a.step {
  display: block;
  background: linear-gradient(to bottom, #808080, #FFFFFF 0.5em, #ECEEF0 );
}

button.fixed {
  position: fixed;
  z-index: 9;
  display: none;
  margin: 0px; padding: 0px;
  background: RGBA(255, 255, 255, 0.25);
  border: none;
  border-radius: 0.5em;
  box-shadow: 1px 2px 3px 0px RGBA(0, 0, 0, 0.25);
  font-size: 2em;
}
button.fixed.rc { right: 0em; bottom: 8px; }
            button.fixed.rc { display: block; }
button.fixed.ct { right: 2em; bottom: 8px; }
.stepPrev ~ button.fixed.ct { display: block; }
button.fixed.cb { right: 4em; bottom: 8px; }
.stepNext ~ button.fixed.cb { display: block; }
button.fixed a {
  display: block;
  padding: 0.2em;
  background: transparent;
  color: #000000;
}
.button {
    display: block; /*inline-block;*/
    color: #FFFFFF;
    text-decoration: none;
    background-color: #38488f;
    padding: 1em 2em;
    box-shadow: 0 0 0 2px #bcd6ff;
    border-radius: 2px;
    border: 2px solid #FFFFFF;
    background: linear-gradient(to top, #0b4487, #644c97);
    text-align: center;
    white-space: nowrap;
}

.click {
  position: relative;
  width: 32px; height: 32px;
  display: block;
  margin: 2px; padding: 3px;
  background: #609add;
  background: linear-gradient(to top, #60A0E0, #A060E0);
  border-radius: 50%;
  overflow: hidden;
  font-size: 1.2em;
}
.click span {
  position: relative;
  width: 22px; height: 18px;
  display: block;
  margin: 0px; padding: 7px 5px;
  background: #FFFFFF;
  background: linear-gradient(to top, #C0C0C0, #FFFFFF);
  border-radius: 50%;
  overflow: hidden;
  color: #064286;
}
.click.active span {
  background: #C0C0C0;
  background: linear-gradient(to top, #FFFFFF, #C0C0C0);
}

.pagination {
  display: flex;
  margin: 0px; padding: 8px;
}
.pagination:before {
  content: '';
  flex: 1 1 0;
}
.pagination .links {
  flex: 0 0 auto;
}
.pagination .links > span {
  margin: 0px; padding: 8px;
  background: #38488f;
  border: 1px solid #38488f;
  color: #FFFFFF;  
}
.pagination .links > a {
  display: inline-block;
  margin: 0px; padding: 8px;
  background: #FFFFFF;
  border: 1px solid #38488f;
  color: #38488f;
}
.warning {
  color: #F00000 !important;
  text-align: center;
}

.radio {
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 1em;
}
.radio hr {
  border-width: 0px;
  border-top: 1px dashed rgba(0, 0, 0, 0.1);
}
.radio input[type="radio"] {
  display: none;
}
.radio input[type="radio"] + label {
/*  display: block;*/
}

.radio input[type="radio"] + label:before {
  font-size: 1.5em;
  color: #ECEEF0;
}
.radio input[type="radio"]:checked + label.none:before {
  color: #F00000;
}
.radio input[type="radio"]:checked + label:before {
  color: #008000;
}

.radio input[type="radio"] + label span {
  font-weight: bold;
  color: #C0C0C0;
}
.radio input[type="radio"]:checked + label span {
  font-weight: bold;
  color: #008000;
}
.radio input[type="radio"] + label span.none, 
.radio input[type="radio"] + label span.none > span {
  color: #605AA1;
}
main {
  padding-top: 41px;
}