/* reset css */
* {
  vertical-align: baseline;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  font-size: 100%;
  border: 0 none;
  outline: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption,
th,
td {
  font-weight: normal;
  text-align: left;
}
fieldset,
img,
a img,
:link img,
:visited img,
iframe,
form {
  border: none;
}
:link,
:visited {
  text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}
ol,
ul,
li {
  list-style: none;
  color: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1.0em;
}
a,
ins {
  text-decoration: none;
}
:focus {
  outline: 0;
}
button,
figure,
img {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
}
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
input {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
a {
  color: inherit;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration,
input::-ms-browse,
input::-ms-clear,
input::-ms-reveal {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
}
* {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
}
button,
a,
input[type=submit] {
  cursor: pointer;
}
button:disabled {
  cursor: auto;
}
/* utils */
a:visited {
  color: inherit;
}
.hidden {
  display: none !important;
}
.centered {
  /* Internet Explorer 10 */
  display: -ms-flexbox;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari, Opera, and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
*[data-tooltip]::after {
  position: absolute;
  content: attr(data-tooltip);
  padding: 8px;
  max-width: 120px;
  line-height: 1em;
  text-align: left;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  background: #000000;
  background: transparent \9;
  background: rgba(0, 0, 0, 0.6);
  zoom: 1;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}
.no-touch *[data-tooltip]:hover::after {
  visibility: visible;
  -webkit-animation-name: fadeInOut;
  animation-name: fadeInOut;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.cs-image-container {
  position: relative;
  text-align: center;
}
.cs-image-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.cs-image {
  display: inline-block;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
  vertical-align: middle;
}
ul li {
  vertical-align: top;
}
/*::-moz-selection{
background: @common-foreground-color;
color: @common-background-color;
}
::selection {
   background: @common-foreground-color;
   color: @common-background-color;
}*/
.cs-image-container {
  position: relative;
  text-align: center;
}
.cs-image-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.cs-image {
  display: inline-block;
  background-repeat: no-repeat;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
  vertical-align: middle;
}
figure img {
  vertical-align: top;
}
/* sprite */
.cs-image-sprite-close {
  background-position: -45px -5px;
  width: 15px;
  height: 15px;
}
.cs-image-sprite-close-light {
  background-position: -45px -25px;
  width: 15px;
  height: 15px;
}
.cs-image-sprite-noimage {
  background-position: -65px -5px;
  width: 15px;
  height: 15px;
}
.cs-image-sprite-top {
  background-position: -5px -25px;
  width: 15px;
  height: 9px;
}
.cs-image-sprite-theme-article-paragraph-link-dictionary {
  background-position: -5px -54px;
  width: 16px;
  height: 16px;
}
.cs-image-sprite-masterpiece-article-paragraph-link-dictionary {
  background-position: -29px -54px;
  width: 16px;
  height: 16px;
}
.cs-image-sprite-fact-article-paragraph-link-dictionary {
  background-position: -53px -54px;
  width: 16px;
  height: 16px;
}
.cs-image-sprite-theme-article-paragraph-link-comment {
  background-position: -5px -79px;
  width: 16px;
  height: 16px;
}
.cs-image-sprite-theme-article-fact {
  background-position: -29px -79px;
  width: 16px;
  height: 16px;
}
.cs-image-sprite-arrow-up {
  background-position: -5px -5px;
  width: 12px;
  height: 6px;
}
.cs-image-sprite-arrow-down {
  background-position: -25px -5px;
  width: 12px;
  height: 6px;
}
.cs-image-sprite-arrow-dark-up {
  background-position: -5px -13px;
  width: 12px;
  height: 6px;
}
.cs-image-sprite-arrow-dark-down {
  background-position: -25px -13px;
  width: 12px;
  height: 6px;
}
.cs-image-sprite-arrow-back-light {
  background-position: -160px -69px;
  width: 30px;
  height: 11px;
}
.cs-image-sprite-arrow-back-dark {
  background-position: -160px -82px;
  width: 30px;
  height: 11px;
}
.cs-image-sprite-search {
  background-position: -5px -100px;
  width: 28px;
  height: 23px;
}
.cs-image-sprite-checkbox {
  background-position: -25px -25px;
  width: 11px;
  height: 8px;
}
.cs-image-sprite-masterpiece-indicator {
  background-position: -53px -79px;
  width: 26px;
  height: 26px;
}
.cs-image-sprite-masterpiece-indicator-invert {
  background-position: -53px -110px;
  width: 21px;
  height: 20px;
}
.cs-image-sprite-masterpiece-indicator-nav {
  background-position: -5px -127px;
  width: 21px;
  height: 20px;
}
.cs-image-sprite-masterpiece-indicator-big {
  background-position: -5px -155px;
  width: 31px;
  height: 29px;
}
.cs-image-sprite-open-player {
  background-position: -83px -131px;
  width: 60px;
  height: 60px;
}
.cs-image-sprite-arrow-next {
  background-position: -85px -67px;
  width: 60px;
  height: 60px;
}
.cs-image-sprite-arrow-prev {
  background-position: -85px -5px;
  width: 60px;
  height: 60px;
}
.cs-image-sprite-arrow-top {
  background-position: -147px -5px;
  width: 60px;
  height: 60px;
}
.cs-image-sprite-player-zoom-in {
  background-position: -5px -5px;
  width: 30px;
  height: 30px;
}
.cs-image-sprite-player-zoom-out {
  background-position: -35px -5px;
  width: 30px;
  height: 30px;
}
.cs-image-sprite-player-fullscreen-in {
  background-position: -65px -5px;
  width: 30px;
  height: 30px;
}
.cs-image-sprite-player-fullscreen-out {
  background-position: -95px -5px;
  width: 30px;
  height: 30px;
}
/* locals */
@font-face {
  font-family: RobotoThin;
  src: url("../fonts/Roboto-Thin.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: Roboto;
  src: url("../fonts/Roboto-Light.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoRegular;
  src: url("../fonts/Roboto-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoMedium;
  src: url("../fonts/Roboto-Medium.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoBold;
  src: url("../fonts/Roboto-Bold.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoSlab;
  src: url("../fonts/RobotoSlab-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoSlabLight;
  src: url("../fonts/RobotoSlab-Light.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoSlabThin;
  src: url("../fonts/RobotoSlab-Thin.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: RobotoSlabBold;
  src: url("../fonts/RobotoSlab-Bold.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}
/* fonts */
/* images */
button[value=close] {
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 30px;
  right: 10px;
  top: 10px;
}
button[value=close] .cs-image {
  background-image: url('../images/sprite.svg');
  background-position: -45px -5px;
  width: 15px;
  height: 15px;
}
figure {
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../images/loader.gif');
}
figure.empty {
  background-color: #cad6db;
}
figure:empty {
  background-color: #cad6db;
}
*[data-tooltip]::after {
  left: auto;
  right: 0;
  top: calc(102%);
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  min-width: 150px;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
}
::-webkit-scrollbar {
  background-color: #ffffff;
}
::-webkit-scrollbar-thumb {
  background-color: #bec1c3;
}
::-webkit-scrollbar:horizontal {
  height: 8px;
}
::-webkit-scrollbar:vertical {
  width: 8px;
}
/* main */
html {
  width: 100%;
  height: 100%;
  min-width: 280px;
}
body {
  font-family: Roboto, Tahoma, Verdana, sans-serif;
  font-size: 16px;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
#app {
  position: relative;
  width: 100%;
  height: 100%;
}
#preloader,
#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  display: inline-block;
}
#header-wrapper {
  background-color: #182733;
  color: #ffffff;
}
#header-wrapper #header {
  display: none;

  padding: 10px 40px;
  vertical-align: top;
  width: auto;
  height: 55px;
  color: #bec1c3;
}
#header-wrapper #header-title {
  vertical-align: top;
  float: left;
  width: 70%;
  height: auto;
}
#header-wrapper #header-title a:hover {
  color: #ffffff;
}
#header-wrapper #header-title-logo {
  vertical-align: top;
  float: left;
  margin: 7px 20px 0 0 ;
  width: 35px;
  height: 45px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url('../images/logo.png');
}
#header-wrapper #header-title-hgroup {
  display: block;
  margin-top: 8px;
}
#header-wrapper #header-controls {
  vertical-align: top;
  float: right;
  white-space: nowrap;
}
#header-wrapper #header-controls-langs {
  display: none !important;
}
#header-wrapper #header-controls-langs ul .thumb {
  display: inline-block;
  margin: 0 5px;
}
#header-wrapper #header-controls-website {
  display: inline-block;
  color: #e7e9e9;
  font-size: .8em;
}
#header-wrapper #header-controls:after {
  content: '';
  display: block;
  clear: both;
}
#top-control {
  display: none;
  position: fixed;
  bottom: 100px;
  right: 20px;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1000;
}
#top-control span.cs-image {
  background-image: url('../images/sprite.svg');
  background-position: -147px -5px;
  width: 60px;
  height: 60px;
}
#top-control:hover {
  opacity: .9;
}
#content-wrapper {
  position: relative;
  clear: both;
  min-height: 100%;
  background-color: #ffffff;
}
#content-wrapper:not(.index):not(.themes) {
  margin: 0 auto;
  max-width: 1000px;
}
#content-wrapper #content {
  position: relative;
}
#footer-wrapper {
  display: none;

  width: 100%;
  height: 60px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  color: #ffffff;
}
#footer-wrapper #footer {
  position: relative;
  padding: 10px 30px;
  line-height: 20px;
  color: #bec1c3;
}
#footer-wrapper #footer a {
  display: block;
  font-size: .8em;
}
#footer-wrapper #footer a:hover {
  text-decoration: underline;
}
#footer-wrapper #footer a#footer-about-toggler {
  display: none;
  padding: 10px 20px;
  position: absolute;
  top: 0;
  right: 10px;
  color: #ffffff;
}
#error {
  text-align: center;
  padding-top: 50px;
  font-size: 2em;
}
@media screen and (max-width: 900px) {
  body {
    font-size: 14px;
  }
}
#content-wrapper {
  background-color: #f2f2f2;
}
#catalog-list {
  position: relative;
  margin: 0 auto;
  padding: 0 0 30px;
  background-color: #ffffff;
}
#catalog-list header {
  padding: 30px 30px 30px;
  width: 100%;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  color: #991e1f;
  background-color: #f2f2f2;
}
#catalog-list header h1 {
  font-size: 2.5em;
  line-height: 1.1;
  font-family: RobotoSlab, Tahoma, Verdana, sans-serif;
  text-shadow: 1px 1px 1px white;
}
#catalog-list header article {
  display: none;
}
#catalog-list-list-wrapper {
  padding: 30px;
}
#catalog-list-list {
  max-width: 1300px;
  margin: 0 auto;
}
#catalog-list-list ul:hover li figure {
  opacity: .8;
}
#catalog-list-list ul li {
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  display: inline-block;
  width: 48%;
  width: calc((100% - 20px) / 2);
  width: -moz-calc((100% - 20px) / 2);
  width: -webkit-calc((100% - 20px) / 2);
  max-width: 640px;
  overflow: hidden;
  border: 5px solid #182733;
  background-color: #182733;
  box-sizing: border-box;
  margin-bottom: 20px;
}
#catalog-list-list ul li:nth-child(2n+1) {
  margin-right: 20px;
}
#catalog-list-list ul li.hover a figure,
#catalog-list-list ul li:hover a figure {
  opacity: 1 !important;
}
#catalog-list-list ul li a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
#catalog-list-list ul li a figure {
  width: 100%;
  height: 400px;
  -webkit-transition: opacity 0.3s ease;
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
#catalog-list-list ul li a .title-wrapper {
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
#catalog-list-list ul li a .title-wrapper .title {
  padding: 20px;
  font-family: RobotoSlabThin, Tahoma, Verdana, sans-serif;
  font-size: 1.5em;
  line-height: 1;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  color: #ffffff;
  background-color: #182733;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  -o-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
@media screen and (max-width: 1300px) {
  #catalog-list-list {
    max-width: 1000px;
    margin: 0 auto;
  }
  #catalog-list-list ul li {
    max-width: 490px;
    line-height: 1.1;
  }
  #catalog-list-list ul li a figure {
    height: 306px;
  }
}
@media screen and (max-width: 1100px) {
  #catalog-list-list {
    max-width: 750px;
    margin: 0 auto;
  }
  #catalog-list-list ul li {
    max-width: 365px;
  }
  #catalog-list-list ul li a figure {
    height: 230px;
  }
}
@media screen and (max-width: 800px) {
  #catalog-list-list ul li a .title-wrapper .title {
    font-size: 1.3em;
    line-height: normal;
    padding: 5px;
  }
  #catalog-list-list ul li a figure {
    height: 180px;
  }
}
@media screen and (max-width: 600px) {
  #header-wrapper #header {
    padding: 10px 20px;
  }
  #header-wrapper #header-title {
    width: 100%;
  }
  #catalog-list-list ul li {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin-right: 0 !important;
  }
  #catalog-list-list ul li a .title-wrapper .title {
    font-size: 1.3em;
    line-height: normal;
    padding: 5px;
  }
  #catalog-list-list ul li a figure {
    height: 300px;
  }
}
@media screen and (max-width: 460px) {
  #header-wrapper #header-title-hgroup {
    font-size: .9em;
  }
  #catalog-list header {
    padding: 20px;
  }
  #catalog-list header h1 {
    font-size: 1.8em;
  }
  #catalog-list-list ul li a figure {
    height: 200px;
  }
}