@charset "UTF-8";
/**
 * # Concise.CSS
 * http://github.com/ConciseCSS/concise.css
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%; }

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

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background: transparent; }
  a:focus {
    outline: thin dotted; }
  a:active,
  a:hover {
    outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

mark {
  background: #ff0;
  color: #000; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0;
  -ms-interpolation-mode: bicubic; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  border: solid #eee;
  border-width: 1px 0 0;
  box-sizing: content-box;
  clear: both;
  height: 0; }

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5; }

q {
  quotes: none; }
  q:before,
  q:after {
    content: '';
    content: none; }

form {
  margin: 0; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
  vertical-align: baseline; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }
  input[type="checkbox"],
  input[type="radio"] {
    box-sizing: border-box;
    padding: 0; }
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    height: auto; }
  input[type="search"] {
    box-sizing: content-box;
    -webkit-appearance: textfield; }
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
      -webkit-appearance: none; }

fieldset {
  margin: 0 2px; }

legend {
  border: 0;
  padding: 0;
  white-space: normal; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

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

td,
th {
  padding: 0; }

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

*,
*:before,
*:after {
  box-sizing: border-box; }

html,
body {
  background-color: #ffffff;
  color: #333333;
  font: normal normal 1em/1.5 "Droid Sans", Helvetica, Arial, sans-serif;
  margin: 0;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased; }

html[dir="rtl"] {
  direction: rtl; }

a {
  color: #62b3e7; }
  a:hover,
  a:visited {
    color: #8ec8ee;
    cursor: pointer; }
  p a,
  p a:visited {
    line-height: inherit; }

small,
.small {
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2; }

.micro {
  font-size: 10px;
  font-size: 0.625rem;
  line-height: 2.4; }

address {
  font-style: normal; }

abbr[title],
abbr[data-original-title] {
  cursor: help;
  border-bottom: 1px dotted #999; }

acronym {
  cursor: help;
  border-bottom: 1px dashed #62b3e7; }

.container {
  margin: 0 auto;
  width: 90%; }
  @media (min-width: 48em) {
    .container {
      width: 620px; } }
  @media (min-width: 60em) {
    .container {
      width: 768px; } }
  @media (min-width: 70em) {
    .container {
      width: 960px; } }
  @media (min-width: 80em) {
    .container {
      width: 1140px; } }

.row {
  width: 100%; }
  .row:after {
    clear: both;
    content: " ";
    display: table; }

[class*="column-"] {
  background-clip: padding-box !important; }
  [class*="column-"].right {
    float: right; }
  [class*="column-"] img {
    max-width: 100%; }

@media (min-width: 48em) {
  [class*="column-"] {
    float: left; }
  .gutters [class*="column-"] {
    margin-left: 2%; }
    .gutters [class*="column-"]:first-child {
      margin-left: 0; }
  .gutters-off [class*="column-"] {
    margin-left: 0; }
  .column-1,
  .gutters .gutters-off .column-1 {
    width: 6.25%; }
  .gutters .column-1 {
    width: 4.375%; }
  .column-2,
  .gutters .gutters-off .column-2 {
    width: 12.5%; }
  .gutters .column-2 {
    width: 10.75%; }
  .column-3,
  .gutters .gutters-off .column-3 {
    width: 18.75%; }
  .gutters .column-3 {
    width: 17.125%; }
  .column-4,
  .gutters .gutters-off .column-4 {
    width: 25%; }
  .gutters .column-4 {
    width: 23.5%; }
  .column-5,
  .gutters .gutters-off .column-5 {
    width: 31.25%; }
  .gutters .column-5 {
    width: 29.875%; }
  .column-6,
  .gutters .gutters-off .column-6 {
    width: 37.5%; }
  .gutters .column-6 {
    width: 36.25%; }
  .column-7,
  .gutters .gutters-off .column-7 {
    width: 43.75%; }
  .gutters .column-7 {
    width: 42.625%; }
  .column-8,
  .gutters .gutters-off .column-8 {
    width: 50%; }
  .gutters .column-8 {
    width: 49%; }
  .column-9,
  .gutters .gutters-off .column-9 {
    width: 56.25%; }
  .gutters .column-9 {
    width: 55.375%; }
  .column-10,
  .gutters .gutters-off .column-10 {
    width: 62.5%; }
  .gutters .column-10 {
    width: 61.75%; }
  .column-11,
  .gutters .gutters-off .column-11 {
    width: 68.75%; }
  .gutters .column-11 {
    width: 68.125%; }
  .column-12,
  .gutters .gutters-off .column-12 {
    width: 75%; }
  .gutters .column-12 {
    width: 74.5%; }
  .column-13,
  .gutters .gutters-off .column-13 {
    width: 81.25%; }
  .gutters .column-13 {
    width: 80.875%; }
  .column-14,
  .gutters .gutters-off .column-14 {
    width: 87.5%; }
  .gutters .column-14 {
    width: 87.25%; }
  .column-15,
  .gutters .gutters-off .column-15 {
    width: 93.75%; }
  .gutters .column-15 {
    width: 93.625%; }
  .column-16,
  .gutters .gutters-off .column-16 {
    width: 100%; }
  .gutters .column-16 {
    width: 100%; }
  [class*='push-'] {
    position: relative; }
  .push-1 {
    left: 6.25%; }
    .gutters .push-1 {
      left: 4.25%; }
  .push-2 {
    left: 12.5%; }
    .gutters .push-2 {
      left: 10.5%; }
  .push-3 {
    left: 18.75%; }
    .gutters .push-3 {
      left: 16.75%; }
  .push-4 {
    left: 25%; }
    .gutters .push-4 {
      left: 23%; }
  .push-5 {
    left: 31.25%; }
    .gutters .push-5 {
      left: 29.25%; }
  .push-6 {
    left: 37.5%; }
    .gutters .push-6 {
      left: 35.5%; }
  .push-7 {
    left: 43.75%; }
    .gutters .push-7 {
      left: 41.75%; }
  .push-8 {
    left: 50%; }
    .gutters .push-8 {
      left: 48%; }
  .push-9 {
    left: 56.25%; }
    .gutters .push-9 {
      left: 54.25%; }
  .push-10 {
    left: 62.5%; }
    .gutters .push-10 {
      left: 60.5%; }
  .push-11 {
    left: 68.75%; }
    .gutters .push-11 {
      left: 66.75%; }
  .push-12 {
    left: 75%; }
    .gutters .push-12 {
      left: 73%; }
  .push-13 {
    left: 81.25%; }
    .gutters .push-13 {
      left: 79.25%; }
  .push-14 {
    left: 87.5%; }
    .gutters .push-14 {
      left: 85.5%; }
  .push-15 {
    left: 93.75%; }
    .gutters .push-15 {
      left: 91.75%; }
  [class*='pull-'] {
    position: relative; }
  .pull-1 {
    right: 6.25%; }
    .gutters .pull-1 {
      right: 4.25%; }
  .pull-2 {
    right: 12.5%; }
    .gutters .pull-2 {
      right: 10.5%; }
  .pull-3 {
    right: 18.75%; }
    .gutters .pull-3 {
      right: 16.75%; }
  .pull-4 {
    right: 25%; }
    .gutters .pull-4 {
      right: 23%; }
  .pull-5 {
    right: 31.25%; }
    .gutters .pull-5 {
      right: 29.25%; }
  .pull-6 {
    right: 37.5%; }
    .gutters .pull-6 {
      right: 35.5%; }
  .pull-7 {
    right: 43.75%; }
    .gutters .pull-7 {
      right: 41.75%; }
  .pull-8 {
    right: 50%; }
    .gutters .pull-8 {
      right: 48%; }
  .pull-9 {
    right: 56.25%; }
    .gutters .pull-9 {
      right: 54.25%; }
  .pull-10 {
    right: 62.5%; }
    .gutters .pull-10 {
      right: 60.5%; }
  .pull-11 {
    right: 68.75%; }
    .gutters .pull-11 {
      right: 66.75%; }
  .pull-12 {
    right: 75%; }
    .gutters .pull-12 {
      right: 73%; }
  .pull-13 {
    right: 81.25%; }
    .gutters .pull-13 {
      right: 79.25%; }
  .pull-14 {
    right: 87.5%; }
    .gutters .pull-14 {
      right: 85.5%; }
  .pull-15 {
    right: 93.75%; }
    .gutters .pull-15 {
      right: 91.75%; } }

.non-responsive [class*="column-"] {
  float: left;
  width: auto !important; }

.non-responsive .gutters [class*="column-"],
.non-responsive.gutters [class*="column-"] {
  margin-left: 2%; }

.non-responsive .gutters [class*="column-"]:first-child,
.non-responsive.gutters [class*="column-"]:first-child {
  margin-left: 0; }

ul,
ol {
  margin-left: 20px;
  padding-left: 0px; }
  ul li,
  ol li {
    line-height: 1.75em; }
  ul ul,
  ol ul {
    list-style-type: circle;
    margin-bottom: auto; }
    ul ul ul,
    ol ul ul {
      list-style-type: square; }
    ul ul ol,
    ol ul ol {
      list-style-type: lower-roman; }
    @media (min-width: 48em) {
      ul ul,
      ol ul {
        margin-left: 20px; } }
  ul ol,
  ol ol {
    list-style-type: lower-latin;
    margin-bottom: auto; }
    ul ol ol,
    ol ol ol {
      list-style-type: lower-roman; }
    ul ol ul,
    ol ol ul {
      list-style-type: square; }

.list-unstyled {
  margin-left: 0px;
  list-style: none; }
  .list-unstyled ul {
    list-style: none; }
    .list-unstyled ul ul {
      list-style: none; }

.list-inline {
  margin-left: 0px; }
  .list-inline li {
    border-bottom: none;
    display: inline;
    margin-right: 15px; }
    .list-inline li:last-child {
      margin-right: 0px; }
    @media (min-width: 48em) {
      .list-inline li {
        margin-right: 15px; }
        .list-inline li:last-child {
          margin-right: 0px; } }
    @media (min-width: 60em) {
      .list-inline li {
        margin-right: 30px; }
        .list-inline li:last-child {
          margin-right: 0px; } }

dt {
  font-weight: bold; }

dd {
  margin-left: 0px; }

input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"] {
  background: auto;
  border: auto;
  height: auto;
  width: auto; }

input[disabled],
select[disabled],
textarea[disabled] {
  background-color: #f6f6f6;
  cursor: not-allowed; }

label {
  display: block; }

textarea {
  height: auto; }

.form input,
.form select,
.form textarea {
  border: 1px solid #cccccc;
  box-sizing: border-box;
  height: 37px;
  padding: 5px;
  width: 100%; }
  @media (min-width: 30em) {
    .form input,
    .form select,
    .form textarea {
      width: 300px; } }

.form textarea {
  height: auto; }

@media (min-width: 30em) {
  .form input[type="submit"] {
    display: block;
    width: auto; } }

.form input:focus,
.form select:focus,
.form textarea:focus,
.form button:focus,
.form [contenteditable="true"]:focus {
  outline: 1px solid #a6a6a6; }

.form fieldset {
  border: 1px solid #cccccc;
  padding: 10px 25px; }
  .form fieldset legend {
    font-weight: bold;
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 1.84615;
    padding: 0 10px; }

.form-item {
  display: block; }

.form-inline label {
  width: auto; }

@media (min-width: 48em) {
  .form-inline label {
    display: inline-block;
    width: 100px; }
  .form-inline textarea {
    width: auto; } }

::-webkit-input-placeholder {
  color: #bbbbbb; }

:-ms-input-placeholder {
  color: #bbbbbb; }

::-moz-placeholder {
  color: #bbbbbb; }

:-moz-placeholder {
  color: #bbbbbb; }

.bg-color-10, .strong, .label[data-skill="strong"] {
  background-color: #1a1a1a; }

.bg-color-25 {
  background-color: #404040; }

.bg-color-50, .medium, .label[data-skill="medium"] {
  background-color: gray; }

.bg-color-75, .weak‏, .label[data-skill="weak"] {
  background-color: #bfbfbf; }

.bg-color-90, button[name="ok"], button[name="cancel"] {
  background-color: #e6e6e6; }

.float-left {
  float: left; }

.float-right {
  float: right; }

.float-none {
  float: none; }

.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.no-margin {
  margin: 0; }

.inline {
  display: inline; }

.show {
  display: block;
  visibility: visible; }

.hide {
  display: none;
  visibility: hidden; }

.screen-reader,
.text-hide {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.full-width {
  width: 100%; }

img.full-width {
  max-width: 100%;
  height: auto;
  display: block;
  width: auto; }

.text-left {
  text-align: left; }

.text-right {
  text-align: right; }

.text-center {
  text-align: center; }

.text-justify {
  text-align: justify; }

.weight-light {
  font-weight: 300; }

.weight-normal {
  font-weight: 400; }

.weight-semibold {
  font-weight: 600; }

.text-uppercase {
  text-transform: uppercase; }

.amp {
  font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif; }

.caret {
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  display: inline-block;
  margin: 0 0 3px 4px;
  vertical-align: middle;
  width: 0; }

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

.label,
.badge {
  background-color: #b5b5b5;
  color: #fff;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 2;
  font-weight: bold;
  padding: 3px 7px;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap; }

.label {
  border-radius: 4px;
  display: inline; }

.badge {
  border-radius: 10px;
  display: inline-block;
  padding: 1px 7px; }

.label[href]:hover, .label[href]:focus {
  color: #fff;
  cursor: pointer;
  text-decoration: none; }

a.badge:hover, a.badge:focus {
  color: #fff;
  cursor: pointer;
  text-decoration: none; }

.label a,
.badge a {
  color: #fff;
  cursor: pointer;
  text-decoration: none; }

.label:empty,
.badge:empty {
  display: none; }

.bg-color-10, .strong, .label[data-skill="strong"] {
  background-color: #1a1a1a; }

.bg-color-25 {
  background-color: #404040; }

.bg-color-50, .medium, .label[data-skill="medium"] {
  background-color: gray; }

.bg-color-75, .weak‏, .label[data-skill="weak"] {
  background-color: #bfbfbf; }

.bg-color-90, button[name="ok"], button[name="cancel"] {
  background-color: #e6e6e6; }

/************************************************
            Cделаем сетку квадратной
            [ http://goo.gl/YnLvmN ]
================================================*/
[class*='column-'].square {
  position: relative;
  border: 0.0625rem solid #e6e6e6;
  box-sizing: border-box; }

[class*='column-'].square:before {
  content: "";
  display: block;
  box-sizing: border-box; }

.column-4.square:before {
  padding-top: 100%; }

.column-8.square:before {
  padding-top: 50%; }

.column-12.square:before {
  padding-top: 33.333%; }

.column-16.square:before {
  padding-top: 25%; }

/* ===== == = === 48em === = == ===== */
@media only screen and (max-width: 48em) {
  .column-12.square:before {
    padding-top: 133.332%; } }

.square .content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  box-sizing: border-box;
  margin: 0.9375rem; }

.square .content.collapse {
  margin: 0; }

.uncollapse {
  margin: 0.9375rem; }

/* hover-эффект при наведении на ячейку
************************************************/
.content.over:hover {
  margin: -0.23438rem;
  border: 0.0625rem solid #e6e6e6;
  box-shadow: 0 0 0.23438rem rgba(0, 0, 0, 0.2);
  z-index: 2000; }

/************************************************
               Базовые элементы
================================================*/
/*
резиновый шрифт от размера ширины экрана
от этого размера шрифта все остальные размеры
отталкиваются
*************************************************/
* {
  line-height: 1.2em; }

html {
  font-size: 2vw; }

/* ===== == = === 48em === = == ===== */
@media only screen and (max-width: 48em) {
  html {
    font-size: 7vw; } }

#content {
  margin: 0.625rem; }

ul li, p, blockquote {
  font-size: 0.75rem;
  line-height: 1.3em; }

img {
  min-height: 100%; }

/*            заголовок у таблички
*************************************************/
.hgroup {
  min-height: 2.5rem;
  padding-bottom: 0.9375rem; }

.hgroup.line {
  border-bottom: 0.0625rem solid #e6e6e6;
  margin-bottom: 10px; }

.collapse .hgroup {
  padding-top: 0.9375rem; }

h3, h4 {
  margin: 0;
  line-height: 1.2em; }

h3 {
  font-size: 0.875rem; }

h4 {
  font-size: 0.75rem; }

h4.big {
  margin-top: 0.9375rem;
  font-size: 160%;
  line-height: 50%; }

/*                 input's
*************************************************/
input::-ms-clear {
  display: none; }

.container-input, .label {
  position: relative; }

input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.46875rem 0.23438rem;
  border: none;
  line-height: 100%;
  font-size: 0.75rem;
  font-weight: 600; }

/* стилизуем плейсхолдер */
input[name='skill'] {
  /* Firefox 19+ */
  /* Firefox 18- */ }
  input[name='skill']::-webkit-input-placeholder {
    color: black; }
  input[name='skill']::-moz-placeholder {
    color: black; }
  input[name='skill']:-moz-placeholder {
    color: black; }
  input[name='skill']:-ms-input-placeholder {
    color: black; }

input {
  background-color: transparent;
  border: 0; }

input[name="skill"]:focus, textarea:focus {
  box-shadow: 0 0 0.125rem lightgreen;
  border-color: lightgreen; }

input:hover, .active input {
  border: 0.0625rem solid black; }

input:hover {
  cursor: pointer; }

.active input:hover {
  cursor: text; }

.active input {
  background-color: white; }

.label {
  cursor: default; }

.active .buttons,
.label:hover .buttons {
  display: inline; }

#name input {
  font-size: 180%;
  line-height: 100%;
  padding-top: 0;
  padding-bottom: 0; }

#skill input {
  font-weight: normal; }

/*            кнопки ok и cancel
*************************************************/
.buttons {
  color: white;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0; }

.buttons {
  display: none; }

button[name="ok"]:before {
  content: '\2714';
  /* ✔ */ }

button[name="cancel"]:before {
  content: '\2716';
  /* ✖ */ }

.label button[name="cancel"] {
  background-color: red; }

.buttons select {
  margin: 0;
  margin-right: 0.4375rem;
  height: 100%;
  border-color: none;
  font-size: 1rem;
  color: black; }

button.circle, button[name="ok"], button[name="cancel"] {
  float: right;
  border: none;
  border-radius: 100%;
  font-size: 0.5rem;
  line-height: 100%;
  padding: 0.3125rem;
  margin-right: 0.3125rem;
  -webkit-transform: translate(0, 35%);
  -ms-transform: translate(0, 35%);
  transform: translate(0, 35%); }

.label button.circle, .label button[name="ok"], .label button[name="cancel"] {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0); }

button.print {
  right: 0;
  padding: 0.375rem 0.625rem;
  float: right;
  border: none;
  border-radius: 10rem;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  background-color: black;
  color: white; }

button.print:hover {
  color: black;
  background-color: gray; }

/* ===== == = === 48em === = == ===== */
@media only screen and (max-width: 48em) {
  button.print {
    display: none; } }

/*                   blockquote
*************************************************/
blockquote {
  margin: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic; }

blockquote p,
blockquote cite {
  margin: 0;
  position: relative;
  z-index: 300; }

blockquote:before,
blockquote:after {
  position: absolute;
  font-family: Arial;
  font-style: normal;
  font-size: 12em;
  line-height: 1;
  color: #e6e6e6;
  z-index: 10; }

blockquote:before {
  top: 0;
  left: 0;
  content: '\201c'; }

blockquote:after {
  bottom: 0;
  right: 0;
  content: '\201e'; }

cite {
  font-family: Geneva, Arial, Helvetica, sans-serif;
  font-style: normal;
  font-weight: bold;
  float: right; }

/*                 хелперы
*************************************************/
.grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%); }

.grayscale:hover {
  -webkit-filter: none;
  filter: none; }

.alpha {
  background-color: rgba(255, 255, 255, 0.8); }

.hgroup.alpha {
  position: absolute;
  left: 0;
  top: 0;
  right: 0; }

.transition, .content.over:hover, button.print:hover, .grayscale:hover {
  transition: all 0.3s ease 0s; }

.egg {
  height: 100%;
  font-size: 8.75rem;
  font-weight: 900;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  color: #e6e6e6; }

/*            label со скиллом
*************************************************/
#skills {
  margin-bottom: 0.125rem; }

#skill {
  width: 60%; }

/* ===== == = === 48em === = == ===== */
@media only screen and (max-width: 48em) {
  #skill {
    width: 100%; } }

.label {
  display: inline-block;
  padding: 0.125rem 0.3125rem;
  margin-right: 0.125rem;
  margin-bottom: 0.125rem;
  border-radius: 0.125rem;
  line-height: 1;
  font-size: 0.75rem; }

/*                   список
*************************************************/
ul {
  margin: 0 0.46875rem; }

li {
  line-height: 1.5em;
  margin-left: -0.46875rem; }