@font-face {
  font-family: 'reg';
  src        : url('../fonts/proximanova-400.woff2') format('woff2'),
    url('../fonts/proximanova-400.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: 'mid';
  src        : url('../fonts/proximanova-500.woff2') format('woff2'),
    url('../fonts/proximanova-500.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: 'bold';
  src        : url('../fonts/proximanova-600.woff2') format('woff2'),
    url('../fonts/proximanova-600.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: 'title';
  src        : url('../fonts/montserrat-700.woff2') format('woff2'),
    url('../fonts/montserrat-700.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}

@font-face {
  font-family: 'extra';
  src        : url('../fonts/montserrat-800.woff2') format('woff2'),
    url('../fonts/montserrat-800.woff') format('woff');
  font-weight: normal;
  font-style : normal;
}

html,
body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
}

body {
  background-color: #f5f5f5;
  font-family     : 'reg', -apple-system, system-ui, blinkmacsystemfont,
    'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif';
  color     : #202020;
  margin    : 0;
  padding   : 0;
  overflow-x: hidden;
}

.container {
  max-width    : 1240px;
  margin       : auto;
  padding-right: 20px;
  padding-left : 20px;
}

input {
  font-family: 'reg', -apple-system, system-ui, blinkmacsystemfont,
    'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif';
}

a {
  color          : #f5f5f5;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.scale {
  transition: 0.3s;
}

.scale:hover {
  transform: scale(1.1);
}

.hover {
  transition: 0.2s;
}

.hover:hover {
  transform: translateY(-2px);
}

.btn {
  display   : inline-block;
  width     : fit-content;
  cursor    : pointer;
  border    : none;
  background: none;
  font-family: 'reg', -apple-system, system-ui, blinkmacsystemfont,
    'Lucida Grande', 'Lucida Sans Unicode', 'sans-serif';
  position  : relative;
  transition: 0.3s;
}

.btn-prime {
  padding      : 14px 30px 15px;
  color        : #f5f5f5;
  border-radius: 50px;
  font-size    : 18px;
  line-height  : 150%;
}

.btn-prime::after {
  content : '';
  position: absolute;
  top     : 0;
  right   : 0;
  bottom  : 0;
  left    : 0;
  display : block;
  background: linear-gradient(50deg,
      #000000,
      #a20f0f 33%,
      #a20f0f 35%,
      #a20f0f 44%,
      #a20f0f 65%,
      #000000);
  background-size: 400% 400%;
  transition     : 0.3s;
  border-radius  : 50px;
}

.btn-prime:hover::after {
  background-position: 100% 100%;
}

.btn-prime span {
  position: relative;
  z-index : 1;
}

.btn-white {
  padding      : 14px 30px 15px;
  border-radius: 50px;
  box-shadow   : 0 1px 3px transparent;
}

.btn-white:hover {
  box-shadow: 0 0px 20px 0px rgb(232 125 125);
}

.btn-border {
  color           : #f5f5f5;
  font-size       : 18px;
  line-height     : 150%;
  text-align      : center;
  padding         : 4px 22px;
  border-radius   : 50px;
  border          : 1px solid #a20f0f;
  background-color: transparent;
}

.btn-border:hover {
  border          : 1px solid #a20f0f;
  background-color: #a20f0f;
  color           : #f5f5f5;
}

.unselect {
  -webkit-touch-callout: none;
  -webkit-user-select  : none;
  -khtml-user-select   : none;
  -moz-user-select     : none;
  -ms-user-select      : none;
  user-select          : none;
  transition           : 0.2s;
}

.observer {
  transition: 0.8s;
}

.observer_hidden {
  transform: translateY(200px);
  opacity  : 0;
}

.header {
  position           : relative;
  height             : 600px;
  background         : #131313 url('../img/hero.jpg') no-repeat top;
  background-size    : cover;
  background-position: 0 -60px;
}

.header::before {
  content   : '';
  position  : absolute;
  top       : 0;
  left      : 0;
  right     : 0;
  bottom    : 0;
  background: rgb(0 0 0 / 80%);
}

.header__container {
  display    : flex;
  align-items: center;
}

.header__menu {
  flex: 1;
}

.header__navbar {
  position        : relative;
  z-index         : 10;
  background-color: #131313;
}

.header__logo a {
  display: block;
  width: 250px;
}

.header__logo svg {
  width: 250px !important;
}

.header__logo svg>g {
  fill: #f5f5f5;
}

.header__menu ul {
  list-style: none;
  display   : flex;
  padding   : 15px;
}

.header__menu li {
  margin-right: 24px;
}

.header__menu li:last-child {
  margin-right: 0;
}

.header__menu a {
  position      : relative;
  transition    : 0.3s;
  letter-spacing: 0.02em;
}

.header__menu li a:before {
  content         : '';
  display         : block;
  position        : absolute;
  left            : unset;
  right           : 0;
  bottom          : -3px;
  height          : 1px;
  background-color: #f5f5f5;
  width           : 0;
  transition      : 0.3s;
}

.header__menu li:hover a::before,
.header__menu li.active a::before {
  right: unset;
  left : 0;
  width: 100%;
}

.heroes {
  height        : 100%;
  min-width     : 100%;
  display       : block;
  vertical-align: baseline;
  overflow      : hidden;
  position      : absolute;
  top           : 0;
  bottom        : 0;
  margin        : auto;
}

.heroes video,
.heroes img {
  width     : auto;
  min-width : 100%;
  min-height: 100%;
  height    : auto;
  position  : absolute;
  top       : -60px;
  left      : 50%;
  transform : translateX(-50%);
}

.footer {
  padding   : 46px 0 20px;
  background: #131313;
  color     : #f5f5f5;
}

.footer .container {
  display        : flex;
  align-items    : center;
  justify-content: center;
  text-align     : center;
}

.modal__overlay {
  position       : fixed;
  z-index        : 100;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  background     : rgba(0, 0, 0, 0.6);
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.modal__container {
  max-height   : 100vh;
  border-radius: 4px;
  overflow-y   : auto;

  max-width       : 600px;
  width           : 100%;
  margin          : auto;
  box-sizing      : border-box;
  background-color: #282828;
  color           : #f5f5f5;
  border-radius   : 10px;
}

.modal__header {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  padding        : 24px;
  background     : #21201f;
  color          : #f5f5f5;
}

.modal__title {
  margin-top    : 0;
  margin-bottom : 0;
  font-size     : 14px;
  line-height   : 150%;
  letter-spacing: 0.03em;
  font-weight   : 400;
}

.modal__close {
  background: transparent;
  border    : 0;
  cursor    : pointer;
}

.modal__header .modal__close:before {
  content: '\2715';
}

.modal__content {
  overflow: hidden;
  padding : 0 24px;
  position: relative;
}

.modal__content::after {
  content   : '';
  display   : block;
  position  : absolute;
  top       : 0;
  right     : 0;
  left      : 0;
  border-top: 1px solid rgba(109, 136, 164, 0.21);
}

.modal__inner {
  display        : flex;
  justify-content: space-between;
}

.modal__client {
  max-width: 250px;
  width    : 100%;
  position : relative;
  padding  : 24px 0;
}

.modal__content_main {
  padding: 24px;
}

.modal__content_main.about h2 {
  font-size  : 18px;
  line-height: 21px;
}

.modal__content_main.about ul:last-of-type {
  margin-bottom: 30px;
}

.modal__content_main.about li {
  position       : relative;
  list-style-type: none;
  font-size      : 14px;
  line-height    : 16px;
  letter-spacing : 0.03em;
}

.modal__content_main.about li::before {
  display     : inline-block;
  content     : '>';
  margin-right: 5px;
  color       : #f5f5f5;
  font-size   : 12px;
}

.modal__client::after {
  content     : '';
  display     : block;
  position    : absolute;
  bottom      : 0;
  top         : 0;
  right       : -30px;
  border-right: 1px solid rgba(109, 136, 164, 0.21);
}

.modal__client:last-child::after {
  border: 0;
}

.modal__client h2 {
  font-size  : 18px;
  line-height: 21px;
}

.modal__item {
  font-size     : 14px;
  line-height   : 16px;
  letter-spacing: 0.03em;
  color         : #f5f5f5;
}

.modal__client a {
  display        : flex;
  justify-content: space-between;
  align-items    : center;
  margin-bottom  : 24px;
}

.modal__client a:last-child {
  margin-bottom: 0;
}

.modal__client a:hover .modal__button {
  background-color: #e87d7d;
}

.modal__button {
  display           : block;
  -ms-flex-negative : 0;
  flex-shrink       : 0;
  width             : 48px;
  height            : 48px;
  border-radius     : 50%;
  background        : #a20f0f url(../img/download.png) no-repeat 50%;
  -webkit-transition: all 0.2s;
  transition        : all 0.2s;
  position          : relative;
  top               : 0;
}

.modal__btn {
  font-size                  : 0.875rem;
  padding-left               : 1rem;
  padding-right              : 1rem;
  padding-top                : 0.5rem;
  padding-bottom             : 0.5rem;
  background-color           : #e6e6e6;
  color                      : rgba(0, 0, 0, 0.8);
  border-radius              : 0.25rem;
  border-style               : none;
  border-width               : 0;
  cursor                     : pointer;
  -webkit-appearance         : button;
  text-transform             : none;
  overflow                   : visible;
  line-height                : 1.15;
  margin                     : 0;
  will-change                : transform;
  -moz-osx-font-smoothing    : grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility        : hidden;
  -webkit-transform          : translateZ(0);
  transform                  : translateZ(0);
  transition                 : -webkit-transform 0.25s ease-out;
  transition                 : transform 0.25s ease-out;
  transition                 : transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.modal__btn:focus,
.modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform        : scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color           : #f5f5f5;
}

@keyframes mmfadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-10%);
  }
}

@keyframes upDown {
  0% {
    -webkit-transform: translateY(0);
    transform        : translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10px);
    transform        : translateY(-10px);
  }

  to {
    -webkit-transform: translateX(0);
    transform        : translateX(0);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden='false'] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden='false'] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden='true'] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden='true'] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

.form__field {
  width: 100%;
}

.field_mb {
  margin-bottom: 25px;
}

.field_mt {
  margin-top: 25px;
}

.field {
  position: relative;
  z-index : 0;
}

.form__result {
  text-align: right;
}

.form__btns {
  display        : flex;
  justify-content: center;
  align-items    : center;
  margin-top     : 30px;
}

.field__desc {
  position        : absolute;
  top             : -10px;
  left            : 11px;
  font-size       : 14px;
  line-height     : 14px;
  text-align      : center;
  color           : #f5f5f5;
  display         : block;
  padding         : 2px 5px;
  background-color: #282828;
  pointer-events  : none;
}

.field__input {
  border          : 1px solid rgba(109, 136, 164, 0.21);
  box-sizing      : border-box;
  border-radius   : 6px;
  height          : 50px;
  background-color: #282828;
  color           : #f5f5f5;
  padding-left    : 16px;
  padding-right   : 16px;
  width           : 100%;
  outline         : none;
}

.errors-list {
  margin-bottom      : 40px;
  font-size          : 12px;
  color              : rgb(166, 62, 62);
  padding            : 10px;
  list-style-position: inside;
  background-color   : rgb(255, 212, 212);
  border-radius      : 5px;
}

.form.lock {
  position: relative;
  z-index : 0;
}

.form.lock:before {
  content         : '';
  background-color: rgba(255, 255, 255, 0.8);
  display         : block;
  position        : absolute;
  top             : 0;
  right           : 0;
  bottom          : 0;
  left            : 0;
  z-index         : 20;
  transition      : 0.3s;
  border-radius   : 10px;
}

.form.lock:after {
  content        : '';
  background     : url(../img/loading.svg) no-repeat;
  font-weight    : normal;
  display        : flex;
  justify-content: center;
  align-items    : center;
  width          : 100px;
  height         : 100px;
  position       : absolute;
  top            : calc(50% - 50px);
  left           : calc(50% - 50px);
  z-index        : 25;
  font-size      : 70px;
  color          : rgb(67, 105, 141);
  animation      : lock 2s linear infinite;
}

.rating {
  display : -webkit-box;
  display : -ms-flexbox;
  display : flex;
  position: relative;
  z-index : 0;
}

.rating__box {
  width   : 100%;
  overflow: hidden;
}

.rating__item {
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-pack : center;
  -ms-flex-pack    : center;
  justify-content  : center;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
  -ms-flex-wrap    : wrap;
  flex-wrap        : wrap;
  -webkit-animation: fadeIn 1s ease;
  animation        : fadeIn 1s ease;
}

@keyframes fadeIn {
  0% {
    transform: translateY(15px);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity          : 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform        : translate3d(0, -100%, 0);
  }

  to {
    opacity          : 1;
    -webkit-transform: translateZ(0);
    transform        : translateZ(0);
  }
}

.rating__col {
  width: 100%;
}

.top {
  font-size     : 14px;
  line-height   : 22px;
  letter-spacing: 0.03em;
  color         : #f5f5f5;
}

.top__header {
  min-height: 70px;
}

.top__name,
.top__num {
  min-width         : 0;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  padding           : 5px;
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  -webkit-box-align : center;
  -ms-flex-align    : center;
  align-items       : center;
}

.top__name img:nth-child(2) {
  position: relative;
  left    : -4px;
}

.top__num {
  -ms-flex-preferred-size: 60px;
  flex-basis             : 60px;
  text-align             : center;
  -webkit-box-pack       : center;
  -ms-flex-pack          : center;
  justify-content        : center;
  -ms-flex-negative      : 0;
  flex-shrink            : 0;
}

.top__content {
  min-width    : 0;
  max-width    : 100%;
  white-space  : nowrap;
  text-overflow: ellipsis;
  overflow     : hidden;
}

.top__name .top__content img {
  float   : left;
  position: relative;
  top     : 4px;
}

.top__header .top__content {
  font-size     : 14px;
  line-height   : 16px;
  letter-spacing: 0.03em;
  color         : #f5f5f5;
  cursor        : default;
  font-weight   : 400;
}

.clan-pic_mr {
  margin-right: 5px;
}

.clan-pic {
  display : -webkit-inline-box;
  display : -ms-inline-flexbox;
  display : inline-flex;
  position: relative;
  top     : 1px;
}

.top__info .top__content {
  white-space: normal;
}

.top__name {
  -webkit-box-flex : 1;
  -ms-flex-positive: 1;
  flex-grow        : 1;
  text-align       : left;
  -webkit-box-pack : start;
  -ms-flex-pack    : start;
  justify-content  : flex-start;
  font-weight      : 600;
}

.top__rw:not(.top__header):not(:last-child) {
  border-bottom: 1px solid rgb(0 0 0);
}

.top__rw:nth-child(2) .top__status span {
  color: #f5f5f5 !important;
}

.top__rw:not(.top__header) {
  background-color: #282828;
  transition      : 0.3s;
}

.top__rw:not(.top__header):hover {
  background-color: #000;
}

.top__rw:nth-child(2) {
  border-top-left-radius : 30px;
  border-top-right-radius: 30px;
  overflow               : hidden;
  background             : linear-gradient(60.31deg, #000000 -51.56%, #131313 93.49%);
  border-radius          : 30px 30px 0 0;
  color                  : #f5f5f5;
}

.top__rw:last-child {
  border-bottom-left-radius : 30px;
  border-bottom-right-radius: 30px;
  overflow                  : hidden;
}

.top__rw {
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  -webkit-box-pack  : center;
  -ms-flex-pack     : center;
  justify-content   : center;
  -webkit-box-align : center;
  -ms-flex-align    : center;
  align-items       : center;
  position          : relative;
  z-index           : 0;
  cursor            : default;
  min-height        : 71px;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
}

.section.stats {
  background-color: #191919;
  padding         : 80px 0;
  color           : #f5f5f5;
}

.stats__inner {
  display        : flex;
  justify-content: space-between;
}

.stats__themes {
  width: calc(38% - 34px);
}

.stats__top {
  width: 62%;
}

.rating__btn,
.rating__btns {
  -ms-flex-negative: 0;
  flex-shrink      : 0;
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-pack : center;
  -ms-flex-pack    : center;
  justify-content  : center;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
}

.rating__btns {
  position             : relative;
  bottom               : auto;
  left                 : auto;
  right                : auto;
  top                  : 72px;
  -webkit-box-orient   : vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction   : column;
  flex-direction       : column;
  -webkit-box-pack     : start;
  -ms-flex-pack        : start;
  justify-content      : flex-start;
  padding-left         : 35px;
  -webkit-box-sizing   : border-box;
  box-sizing           : border-box;
}

.top__total {
  -ms-flex-preferred-size: 75px;
  flex-basis             : 75px;
  display                : -webkit-box;
  display                : -ms-flexbox;
  display                : flex;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -ms-flex-align         : center;
  -ms-flex-negative      : 0;
  flex-shrink            : 0;
}

.top__status {
  -ms-flex-preferred-size: 80px;
  flex-basis             : 80px;
  display                : -webkit-box;
  display                : -ms-flexbox;
  display                : flex;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -ms-flex-align         : center;
  -ms-flex-negative      : 0;
  flex-shrink            : 0;
}

.top__time {
  -ms-flex-preferred-size: 150px;
  flex-basis             : 150px;
  display                : -webkit-box;
  display                : -ms-flexbox;
  display                : flex;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -ms-flex-align         : center;
  -ms-flex-negative      : 0;
  flex-shrink            : 0;
}

.top__time .top__content {
  max-width: 150px;
}

p.help-block {
  max-width    : 100%;
  white-space  : nowrap;
  text-overflow: ellipsis;
  overflow     : hidden;
}

.top__clan {
  -ms-flex-preferred-size: 140px;
  flex-basis             : 140px;
  display                : -webkit-box;
  display                : -ms-flexbox;
  display                : flex;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -ms-flex-align         : center;
  -ms-flex-negative      : 0;
  flex-shrink            : 0;
}

.top__clan .top__content {
  max-width: 140px;
}

.top__ccount,
.top__castle {
  -ms-flex-preferred-size: 80px;
  flex-basis             : 80px;
  display                : -webkit-box;
  display                : -ms-flexbox;
  display                : flex;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -ms-flex-align         : center;
  -ms-flex-negative      : 0;
  flex-shrink            : 0;
}

.top__ccount {
  -ms-flex-preferred-size: 30px;
  flex-basis             : 30px;
}

.top__ally {
  -ms-flex-preferred-size: 110px;
  flex-basis             : 110px;
  display                : -webkit-box;
  display                : -ms-flexbox;
  display                : flex;
  -ms-flex-pack          : start;
  justify-content        : flex-start;
  -ms-flex-align         : center;
  -ms-flex-negative      : 0;
  flex-shrink            : 0;
}

.top__ally .top__content {
  max-width: 110px;
}

.rating__btn {
  width             : 48px;
  height            : 48px;
  border-radius     : 50%;
  background-color  : #191919;
  font-size         : 12px;
  font-weight       : 400;
  text-transform    : uppercase;
  margin            : 0 8px;
  cursor            : pointer;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  -webkit-transition: all 0.2s;
  transition        : all 0.2s;
}

.rating__btn:hover {
  background-color: #e87d7d;
}

[data-rating-select='true'] {
  background-color: #a20f0f;
  pointer-events  : none;
}

.rating__btn {
  margin: 12px 0;
}

.heading__title {
  color         : #6f6865;
  font-weight   : 600;
  font-size     : 40px;
  line-height   : 40px;
  color         : #f5f5f5;
  letter-spacing: 0.03em;
  margin-bottom : 48px;
}

.themes {
  background-color  : #282828;
  -webkit-box-shadow: 0 10px 50px rgb(19 63 114 / 5%);
  box-shadow        : 0 10px 50px rgb(19 63 114 / 5%);
  border-radius     : 30px;
  overflow          : hidden;
  height            : 530px;
}

.themes iframe {
  width : 100%;
  height: 100%;
}

.theme:not(:last-child) {
  border-bottom: 1px solid rgb(0 0 0);
}

.theme {
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  -webkit-box-pack  : center;
  -ms-flex-pack     : center;
  justify-content   : center;
  -webkit-box-align : center;
  -ms-flex-align    : center;
  align-items       : center;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  padding           : 10px 24px;
  position          : relative;
  z-index           : 0;
  background-color  : #282828;
  min-height        : 102px;
  cursor            : pointer;
  -webkit-transition: all 0.3s;
  transition        : all 0.3s;
  text-decoration   : none;
}

.theme:hover {
  padding: 10px 16px 10px 32px;
}

.theme:hover .theme__pic {
  background-color: #e87e7d;
  border          : 1px solid #e87e7d;
  stroke          : #f5f5f5;
}

div#lastpost {
  padding: 10px 7px;
}

.theme__ava {
  -ms-flex-negative  : 0;
  flex-shrink        : 0;
  position           : relative;
  z-index            : 0;
  background-image   : url(../img/ava-def.jpg);
  background-size    : cover;
  background-position: 50%;
  background-repeat  : no-repeat;
  width              : 48px;
  height             : 48px;
  border-radius      : 50%;
  margin-right       : 22px;
  -webkit-transition : all 0.3s;
  transition         : all 0.3s;
}

.theme__hot {
  background       : url(../img/hot.png) no-repeat;
  width            : 84px;
  height           : 84px;
  -webkit-transform: scale(0.7);
  transform        : scale(0.7);
  position         : absolute;
  right            : -34px;
  top              : -34px;
  pointer-events   : none;
  z-index          : 5;
}

.theme__content {
  -webkit-box-flex : 1;
  -ms-flex-positive: 1;
  flex-grow        : 1;
  padding-right    : 35px;
}

.theme__info,
.theme__title {
  letter-spacing: 0.03em;
  color         : #fff;
}

.theme__title {
  text-decoration: none;
  font-weight    : 600;
  font-size      : 14px;
  line-height    : 18px;
  min-height     : 30px;
  padding-bottom : 10px;
}

.theme__info {
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
  font-size        : 14px;
  line-height      : 16px;
}

.theme__date {
  margin-right: 14px;
}

.theme__author {
  font-weight: 600;
}

.theme__pic {
  width             : 48px;
  min-width         : 48px;
  height            : 48px;
  background-color  : #a20f0f;
  fill              : transparent;
  stroke            : #f5f5f5;
  color             : #f5f5f5;
  border-radius     : 50%;
  margin-left       : auto;
  border            : 1px solid #a20f0f;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  -webkit-transition: all 0.2s;
  transition        : all 0.2s;
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  -webkit-box-pack  : center;
  -ms-flex-pack     : center;
  justify-content   : center;
  -webkit-box-align : center;
  -ms-flex-align    : center;
  align-items       : center;
  display           : flex;
}

.st__btns,
.tab__button {
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
  border-bottom    : 1px solid #000;
  padding-bottom   : 24px;
}

.tab__button {
  height            : 48px;
  font-size         : 18px;
  line-height       : 21px;
  letter-spacing    : 0.03em;
  color             : #000;
  border-radius     : 30px;
  padding           : 3px 25px;
  cursor            : pointer;
  -webkit-transition: all 0.3s;
  transition        : all 0.3s;
  -webkit-box-pack  : center;
  -ms-flex-pack     : center;
  justify-content   : center;
  margin-right      : 6px;
}

.tab__button:hover {
  background-color: #e87e7d;
}

[data-server-select='true'] {
  background-color: #a20f0f;
  color           : #f5f5f5;
}

.section.servers {
  padding   : 55px 0 79px;
  position  : relative;
  z-index   : 1;
  background: #131313;
}

.server {
  height            : 156px;
  background        : #131313;
  -webkit-box-shadow: 0 10px 20px 4px rgb(232 125 126 / 17%);
  box-shadow        : 0 10px 20px 4px rgb(232 125 126 / 17%);
  border-radius     : 30px;
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  padding           : 27px 43px;
  position          : relative;
  z-index           : 0;
  min-width         : 0;
  transition        : 0.3s;
}

.server:hover {
  box-shadow: none;
}

.servers__list {
  margin           : 0 -15px;
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-pack : center;
  -ms-flex-pack    : center;
  justify-content  : center;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
  -ms-flex-wrap    : wrap;
  flex-wrap        : wrap;
}

.servers__server {
  width            : auto;
  -webkit-box-flex : 1;
  -ms-flex-positive: 1;
  flex-grow        : 1;
  max-width        : 350px;
}

.server__main {
  -webkit-box-sizing: border-box;
  box-sizing        : border-box;
  padding-top       : 10px;
}

.server__main,
.server__progress {
  display          : -webkit-box;
  display          : -ms-flexbox;
  display          : flex;
  -webkit-box-align: center;
  -ms-flex-align   : center;
  align-items      : center;
}

.server__link {
  position          : absolute;
  top               : 100%;
  left              : 50%;
  -webkit-transform : translate(-50%, -50%);
  transform         : translate(-50%, -50%);
  width             : 48px;
  height            : 48px;
  -ms-flex-negative : 0;
  flex-shrink       : 0;
  background-color  : #e87d7e;
  fill              : #f5f5f5;
  border-radius     : 50%;
  display           : -webkit-box;
  display           : -ms-flexbox;
  display           : flex;
  -webkit-box-pack  : center;
  -ms-flex-pack     : center;
  justify-content   : center;
  -webkit-box-align : center;
  -ms-flex-align    : center;
  align-items       : center;
  -webkit-transition: all 0.3s;
  transition        : all 0.3s;
}

.server__link:hover {
  background-color: #a20f0f;
}

.server:last-child:after {
  display          : block;
  content          : '';
  background       : url(../img/angel.png) no-repeat;
  background-size  : contain;
  width            : 156px;
  height           : 158px;
  -webkit-transform: scale(0.65);
  transform        : scale(0.65);
  pointer-events   : none;
  position         : absolute;
  right            : -36px;
  top              : -71px;
}

.server:last-child:after {
  -webkit-transform: scale(1);
  transform        : scale(1);
  pointer-events   : none;
  position         : absolute;
  right            : -80px;
  top              : -56px;
  -webkit-animation: upDown 6s ease 3s infinite;
  animation        : upDown 6s ease 3s infinite;
}

.server__title {
  font-size     : 18px;
  line-height   : 21px;
  color         : #f5f5f5;
  min-height    : 30px;
  padding-bottom: 5px;
}

.server__desc {
  font-size  : 14px;
  line-height: 16px;
  color      : #f5f5f5;
  min-height : 28px;
}

.server__progress {
  margin-top       : 5px;
  margin-left      : 5px;
  width            : 65px;
  height           : 65px;
  -ms-flex-negative: 0;
  -webkit-box-pack : center;
  -ms-flex-pack    : center;
  justify-content  : center;
  flex-shrink      : 0;
  position         : relative;
  z-index          : 0;
  margin-right     : 18px;
}

.server__progress canvas {
  position: absolute;
  left    : 0;
  top     : 0;
}

.server__online-progress {
  position: relative;
  z-index : 10;
  color   : #f5f5f5;
}

::-webkit-scrollbar {
  width           : 6px;
  height          : 4px;
  background-color: #e5eaf0;
}

::-webkit-scrollbar-thumb {
  background-color: #0c51a3;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #e5eaf0;
}

.section.main {
  max-width     : 780px;
  height        : calc(100% - 113px);
  margin        : auto;
  position      : relative;
  z-index       : 1;
  font-weight   : 600;
  font-size     : 24px;
  line-height   : 24px;
  color         : #f5f5f5 !important;
  letter-spacing: 0.03em;
  display       : flex;
}

.section.main p:not(:last-child) {
  padding-bottom: 10px;
}

.main.bg {
  background-color   : #183c67;
  border-radius      : 30px;
  background-size    : cover;
  background-position: 50%;
  background-repeat  : no-repeat;
  padding            : 55px;
  overflow-y         : auto;
}

.change-theme {
  position: fixed;
  top     : 32px;
  right   : 20px;
  z-index : 100;
  cursor  : pointer;
}

svg,
svg path {
  fill: #f5f5f5 !important;
}

.wrapper {
  display       : flex;
  flex-direction: column;
}

.header__cabinet {
  height    : auto;
  background: 0;
}

.header__auth {
  position: relative;
}

.header__auth svg {
  width       : 20px;
  margin-right: 12px;
}

.header__auth svg g,
.header__auth svg path {
  fill: #f5f5f5 !important;
}

.header__auth a span {
  display    : flex;
  align-items: center;
}

.header__auth ul {
  margin    : 0;
  padding   : 0;
  list-style: none;
}

.header__auth ul.parent {
  position  : absolute;
  top       : 20px;
  left      : -30px;
  right     : 0;
  background: #131313;
  padding   : 14px 0;
  display   : none;
  z-index   : 100;
}

.header__auth_active ul.parent {
  display: block;
}

.header__auth ul.parent a {
  display    : flex;
  align-items: center;
  padding    : 14px 30px;
  transition : 0.3s;
}

.header__auth ul.parent a:hover {
  background: #191919;
}

.header__auth::before {
  display: none;
}

.section.cabinet {
  flex      : 1;
  background: #191919;
  color     : #f5f5f5;
  display   : flex;
  padding   : 55px 0;
}

.button-group.center {
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.section.cabinet .modal__header {
  background: #131313;
  color     : #fff;
}

.section.cabinet .modal__container {
  width     : 600px;
  max-width : 1240px;
  max-height: 100%;
}

.section.cabinet .container {
  width: 100%;
}

.alert ul {
  list-style: none;
  margin    : 0;
  padding   : 0;
}

#toast-container {
  font-size: 14px;
}

#toast-container .toast {
  width: 380px;
}

.captcha-image {
  position: absolute;
  top     : 1px;
  right   : 10px;
  cursor  : pointer;
}

.alert button {
  display: none;
}

.section.cabinet p.help-block {
  font-size: 12px;
}

.toggle {
  position     : relative;
  display      : inline-block;
  width        : 108px;
  height       : 56px;
  padding      : 4px;
  border-radius: 40px;
}

.toggle:before,
.toggle:after {
  content: "";
  display: table;
}

.toggle:after {
  clear: both;
}

.toggle-bg {
  position       : absolute;
  top            : -2px;
  left           : -6px;
  width          : 110px;
  height         : 54.5px;
  border-radius  : 40px;
  background     : linear-gradient(50deg, #0bd3ff, #0c51a3 33%, #0c51a3 35%, #0c51a3 44%, #0c51a3 65%, #0bd3ff);
  background-size: 400% 400%;
  transition     : all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-input {
  position     : absolute;
  top          : -6px;
  left         : -6px;
  width        : 100%;
  height       : 100%;
  border       : 1px solid red;
  border-radius: 40px;
  z-index      : 2;
  opacity      : 0;
  cursor       : pointer;
}

.toggle-switch {
  position     : relative;
  width        : 40px;
  height       : 40px;
  margin-left  : 50px;
  background   : radial-gradient(circle 150px at 25% 33%, #fdff9e, yellow, #ff8e02, aqua);
  border       : 4px solid transparent;
  border-radius: 50%;
  transition   : all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-switch-figure {
  position     : absolute;
  bottom       : -14px;
  left         : -50px;
  display      : block;
  width        : 80px;
  height       : 30px;
  border       : 8px solid #D4D4D2;
  border-radius: 20px;
  background   : #fff;
  transform    : scale(0.4);
  transition   : all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.toggle-switch-figure:after {
  content            : "";
  display            : block;
  position           : relative;
  top                : -65px;
  right              : -42px;
  width              : 15px;
  height             : 15px;
  border             : 8px solid #D4D4D2;
  border-radius      : 100%;
  border-right-color : transparent;
  border-bottom-color: transparent;
  transform          : rotateZ(70deg);
  background         : #fff;
}

.toggle-switch-figure:before {
  content            : "";
  display            : block;
  position           : relative;
  top                : -25px;
  right              : -10px;
  width              : 30px;
  height             : 30px;
  border             : 8px solid #D4D4D2;
  border-radius      : 100%;
  border-right-color : transparent;
  border-bottom-color: transparent;
  transform          : rotateZ(30deg);
  background         : #fff;
}

.toggle-switch-figureAlt {
  content      : "";
  position     : absolute;
  top          : 5px;
  left         : 2px;
  width        : 2px;
  height       : 2px;
  background   : #EFEEDA;
  border-radius: 100%;
  border       : 4px solid #DEE1C5;
  box-shadow   : 42px -7px 0 -2px #fcfcfc, 70px -7px 0 -2px #fcfcfc, 50px 4px 0 -3px #fcfcfc, 76px 7px 0 -1px #fcfcfc, 57px 14px 0px -3px #fcfcfc, 44px 23px 0px -2px #fcfcfc, 72px 20px 0 -2px #fcfcfc;
  transition   : all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform    : scale(0);
}

.toggle-switch-figureAlt:before {
  content      : "";
  position     : absolute;
  top          : -6px;
  left         : 18px;
  width        : 7px;
  height       : 7px;
  background   : #EFEEDA;
  border-radius: 100%;
  border       : 4px solid #DEE1C5;
}

.toggle-switch-figureAlt:after {
  content      : "";
  position     : absolute;
  top          : 19px;
  left         : 15px;
  width        : 2px;
  height       : 2px;
  background   : #EFEEDA;
  border-radius: 100%;
  border       : 4px solid #DEE1C5;
}

.toggle-input:checked~.toggle-switch {
  margin-left : 0;
  border-color: #DEE1C5;
  background  : #FFFDF2;
}

.toggle-input:checked~.toggle-bg {
  background  : #484848;
  border-color: #202020;
}

.toggle-input:checked~.toggle-switch .toggle-switch-figure {
  margin-left: 40px;
  opacity    : 0;
  transform  : scale(0.1);
}

.toggle-input:checked~.toggle-switch .toggle-switch-figureAlt {
  transform: scale(1);
}

.alert {
  padding      : 15px;
  border-radius: 10px;
  margin-bottom: 24px;
}

.alert-success {
  color           : #155724;
  background-color: #d4edda;
  border-color    : #c3e6cb;
}

.alert-danger {
  color           : #721c24;
  border-color    : #f5c6cb;
  
  background      : linear-gradient(50deg, #000000, #a20f0f 33%, #a20f0f 35%, #a20f0f 44%, #a20f0f 65%, #000000);
  background-size : 400% 400%;
}

.toast-message .alert {
  padding      : 0;
  border-radius: 0;
  margin-bottom: 0;
}

.toast-message .alert-success {
  color           : inherit;
  background      : transparent;
  border-color    : transparent;
}

.toast-message .alert-danger {
  color           : inherit;
  background-color: transparent;
  border-color    : transparent;
}


.section.contacts {
  padding   : 55px 0;
  background: #131313;
}

.contacts__inner {
  display        : flex;
  align-items    : center;
  justify-content: center;
}

.contacts__link {
  display         : flex;
  justify-content : center;
  align-items     : center;
  height          : 40px;
  text-decoration : none;
  background-color: #38509c;
  box-sizing      : border-box;
  transition      : .3s all;
  width           : 280px;
  margin          : 10px;
}

.contact__ico {
  margin-right   : 11px;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.contact__content {
  color         : white;
  font-size     : 16px;
  font-weight   : 400;
  text-transform: uppercase;
}

.contact__strong {
  font-weight: 700;
}

.contact_scl_tg {
  background-color: #1e96c8;
}

.contact_scl_dd {
  background-color: #8c9eff;
}

table.table {
  width: 100%;
}

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

table.table td {
  padding: 10px 0;
}


.header__burger,
.header__burger_c {
  display: none;
  height : 20px;
}

.header__burger svg,
.header__burger_c svg {
  width: 20px;
}

div#theme-button {
  width : 108px;
  height: 56px;
}

.header__b_auth {
  display: none;
}

.header__b_auth svg {
  width: 20px;
}

ul.parent.header__auth_active {
  display: block;
}

@media (max-width: 1496px) {
  .change-theme {
    top: 115px;
  }
}

@media (max-width: 1044px) {
  .heading__title {
    font-size  : 28px;
    line-height: 28px;
  }
}

@media (max-width: 1250px) {

  .top__time,
  .top__status,
  .top__ally {
    display: none;
  }

  .stats__themes {
    width: calc(46% - 34px);
  }

  .stats__top {
    width: 55%;
  }
}

@media (max-width: 1023px) {
  .header__auth ul li {
    display: none;
  }

  .header__auth ul.parent li {
    display: block;
  }

  .header__b_auth {
    display: block;
  }

  .header__auth {
    display : none;
    position: absolute;
    right   : 0;
    top     : 85px;
  }

  .header__logo {
    margin-right: 24px;
  }

  .header__auth ul.parent {
    left: auto;
  }

  .header {
    background: none;
  }

  .main.bg,
  .section.main {
    height: auto;
  }

  .section.main {
    top: 0;
  }

  .section.servers {
    padding: 25px 0 79px;
  }

  .heading__title {
    text-align: center;
  }

  .stats__inner {
    flex-direction: column;
  }

  .stats__themes,
  .stats__top {
    width: 100%;
  }

  .stats__top {
    margin-top: 48px;
  }

  .header {
    height: auto;
  }

  .section.main {
    padding: 40px 0 55px;
  }

  .change-theme {
    position: relative;
    top     : 0;
    right   : 0;
    left    : 0;
    flex    : 1;
  }

  .header__menu {
    flex: 0;
  }

  .header__burger,
  .header__burger_c {
    display     : block;
    margin-right: 24px;
  }

  .header__auth svg {
    margin-right: 0;
  }

  .header__auth .parent svg {
    margin-right: 12px;
  }

  .header__menu ul {
    display   : none;
    position  : absolute;
    top       : 50px;
    background: #131313;
    right     : 0;
  }

  .header__menu li {
    margin-bottom: 12px;
  }
}

@media (max-width: 769px) {
  .rating {
    flex-direction: column-reverse;
  }

  .rating__btns {
    top           : 0;
    flex-direction: row;
    padding-left  : 0;
  }

  .rating__btn {
    margin: 12px;
  }
}

.header__auth_active {
  display: block;
}

.header__burger_active,
.header__burger_c_active {
  display: block !important;
}

@media (max-width: 640px) {
  .contacts__inner {
    flex-wrap: wrap;
  }

  .section.cabinet .modal__container {
    width: 100%;
  }


  .change-theme {
    display: none;
  }

  .header__logo {
    flex: 1;
  }

  .header__logo a {
    width: 190px;
  }

  .header__logo svg {
    width: 190px !important;
  }

  .modal__inner {
    flex-wrap: wrap;
  }

  .modal__client {
    max-width: initial;
  }

  .footer .container {
    flex-wrap: wrap;
  }

  .section.contacts {
    padding: 25px 0;
  }

  .section.stats {
    padding: 40px 0;
  }

  .server:last-child:after {
    display: none;
  }

  .top__clan,
  .top__castle,
  .top__ccount {
    display: none;
  }
}

@media (max-width: 480px) {
  .theme {
    flex-wrap: wrap;
  }

  .theme__content {
    padding-right: 0;
    width        : 100%;
  }

  .theme__pic {
    margin-left: 0;
    margin-top : 14px;
  }

  .theme__ava {
    margin-right : 0;
    margin-bottom: 14px;
  }

  .theme__info {
    justify-content: center;
  }

  .theme__title {
    justify-content: center;
    display        : flex;
  }

  .themes {
    height: auto;
  }
}