html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

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

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

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

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { position: relative; overflow-x: hidden; }

body { width: 100%; background-color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 15px; color: #281f1d; min-height: 100vh; }

a { transition: all 0.3s ease; color: #d8d0cc; text-decoration: none; }

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

p { margin-bottom: 20px; }

h1, h2, h3, h4 { color: #7fc1f8; margin-bottom: 30px; line-height: 1.4; }

h1 { font-size: 30px; }

h2 { font-size: 24px; }

h3 { font-size: 18px; }

h4 { font-size: 16px; }

table { width: 100%; }

table td { border-collapse: collapse; padding: 3px 5px; vertical-align: middle; }

img { max-width: 100%; }

caption { margin-bottom: 15px; }
/*
select { background: rgba(0, 0, 0, 0.3); width: 100%; border: 2px solid #21333c; outline: 2px solid #fff; outline-offset: -4px; padding: 4px; color: #fff; margin-bottom: 20px; padding: 15px 40px 15px 20px; position: relative; -webkit-appearance: none; background-image: url(../images/drop-icon.png); background-position: right 10px center; background-repeat: no-repeat; -moz-appearance: none; text-indent: 0.01px; text-overflow: ''; -ms-appearance: none; appearance: none !important; cursor: pointer; }

input { background: url(../images/input-bg.png) repeat-x; border: none; color: #fff; padding: 0px 0px; position: relative; text-align: center; font-size: 16px; width: 100%; height: 64px; line-height: 64px; font-family: 'Roboto', sans-serif; }
*/
textarea { background: rgba(0, 0, 0, 0.3); border: 2px solid #21333c; outline: 2px solid #fff; outline-offset: -4px; padding: 4px; color: #fff; padding: 20px; font-family: 'Roboto', sans-serif; font-size: 16px; width: 100%; }

.button { transition: all 0.3s ease; cursor: pointer; background: url(../images/button-blue.png) no-repeat; height: 64px; width: 241px; border: none; color: #fff !important; text-shadow: 0px -2px 0px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; text-align: center; text-transform: uppercase; font-family: 'Roboto', sans-serif; filter: brightness(100%) drop-shadow(0px 10px 20px rgba(81, 87, 156, 0.8)); }

.button:hover { filter: brightness(120%) drop-shadow(0px 0px 30px rgba(56, 114, 222, 0.4)); }

:focus { outline: none; }

.container { max-width: 1170px; width: 100%; height: 100%; margin: 0 auto; position: relative; height: 100%; }

.flex { display: flex; flex-wrap: wrap; }

.flex-c { display: flex; align-items: center; flex-wrap: wrap; }

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

.flex-s-c { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

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

.bright:hover { filter: brightness(120%); }

.topPanel { position: fixed; background: rgba(31, 24, 23, 0.8); height: 60px; top: 0; left: 0; right: 0; width: 100%; z-index: 99; }

.container-flex { height: 100%; }

.logo { padding-left: 10px; }

.menu { display: flex; align-items: center; }
.menu li { padding: 0px 15px; }
.menu li a { color: #ffa24f; font-size: 16px; font-weight: 500; }

.icon { display: inline-block; position: relative; }

.icon-lang { background: url(../images/icon-lang.png); width: 20px; height: 20px; }

.langBlock { position: relative; }

.langBlock-active { display: flex; align-items: center; padding: 0px 12px; background-color: #2a2423; height: 60px; cursor: pointer; }
.profile { background-color: #ff7d09; }
.langBlock-active span { color: #fff; margin-left: 8px; }

.langBlock-drop { position: absolute; top: 100%; right: 0px; background-color: #2a2423; width: 120px; display: none; }
.langBlock-drop ul { padding: 10px 0px; }
.langBlock-drop ul li a { display: flex; justify-content: flex-start; align-items: center; padding: 10px 12px; }
.langBlock-drop ul li a:hover { background-color: rgba(0, 0, 0, 0.2); }
.langBlock-drop ul li a span { /*margin-left: 8px;*/ }
.regButton a { display: block; background-color: #2a2423; color: #fff; text-transform: uppercase; height: 60px; line-height: 60px; padding: 0px 40px; }
.loginButton a { display: block; background-color: #ff7d09; color: #fff; text-transform: uppercase; height: 60px; line-height: 60px; padding: 0px 40px; }

.header { background: url(../images/header-img.jpg) top center no-repeat; background-size: cover; height: 220px; }

.header .container { padding-top: 60px; }

.headerBanner { width: 100%; }

.headerBanner-title { color: #fff; font-size: 18px; margin-bottom: 20px; text-align: center; }

.pageTitle { border-bottom: 1px solid #dee2e6; color: #505050; font-weight: 700; text-transform: uppercase; padding: 14px 0px; margin-bottom: 25px; }

.sidebar { width: 240px; }

.main img { display: block; }

.icon-title { background: url(../images/icon-title.png); width: 17px; height: 21px; }

.title { display: flex; align-items: center; color: #505050; font-weight: 700; text-transform: uppercase; }
.title i { margin-right: 6px; }

.sidebar-block { margin-bottom: 25px; }

.title { margin-bottom: 15px; }

.filter { display: flex; flex-wrap: wrap; margin-left: -4px; margin-top: -3px; }
.filter span { background-color: #faf6f1 !important; color: #c8a88c !important; font-size: 13px; font-weight: 700; padding: 10px; margin: 3px 4px; cursor: pointer; transition: 0.3s; }
.filter span a{ color: #c8a88c !important } 
.filter span.active { background-color: #ffb32f; color: #fff; }
.filter span:hover { background-color: #ffb32f; color: #fff; }

.filter-small span { padding: 10px 8px; }

.banner-240-96 { width: 240px; height: 96px; }

.banner-178-78 { width: 178px; height: 96px; }

.banner-d { background-color: #5d5d5d; position: relative; display: flex !important; align-items: center; justify-content: center; text-transform: uppercase; }
.banner-d span { color: #ffffff; text-align: center; line-height: 1.2; }

.banner-d-img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; }
.banner-d-img img { width: 100%; height: 100%; object-fit: cover; }

.homePage-container { width: calc(100% - 260px); }

.homePage { padding: 0px 4px 150px 4px; }

.topBanners { background-color: #faf7f2; padding: 8px 0px; }

.top-banner { padding: 8px; }

.page-block { margin-bottom: 25px; }

.title-page { margin-left: -6px; }

.userTable-row { background-color: #faf6f1; padding: 5px 15px 5px 15px; height: 30px; display: flex; align-items: center; flex-wrap: wrap; width: 100%; font-weight: 700; color: #c8a88c; margin-bottom: 2px; }
.userTable-row:first-child { color: #211307; }
.userTable-row:first-child a { color: #211307; }

.icon-top_1 { background: url(../images/top-user_1.png); width: 22px; height: 22px; }

.icon-top_2 { background: url(../images/top-user_2.png); width: 22px; height: 22px; }

.icon-top_3 { background: url(../images/top-user_3.png); width: 22px; height: 22px; }

.icon-top { background: url(../images/top-user.png); width: 17px; height: 17px; }

.icon-like { background: url(../images/icon-like.png); width: 23px; height: 23px; }

.user-table tr { background-color: #faf6f1; width: 100%; font-weight: 700; color: #c8a88c; border-bottom: 2px solid #fff; }
.user-table tr:first-child { color: #211307; }
.user-table tr:first-child td a { color: #211307; }
.user-table tr td a { color: #c8a88c; text-transform: uppercase; }
.user-table tr td a:hover { color: #ff7d09; }
.user-table tr td:nth-child(1) { padding-left: 15px; width: 50px; }
.user-table tr td:nth-child(1) .icon { position: relative; top: 1px; }
.user-table tr td:nth-child(3) { text-align: right; }
.user-table tr td:nth-child(4) { text-align: right; }
.user-table tr td:nth-child(5) { text-align: right; padding-right: 70px; }
.user-table tr td:last-child { display: flex; align-items: center; color: #ff7d09; }
.user-table tr td:last-child i { margin-right: 8px; }

.big-banner { padding: 15px 0px; background-color: #faf7f2; }

.banner-728-90 { height: 90px; width: 100%; max-width: 728px; margin: 0 auto; }

.topBlock { width: calc(50% - 15px); margin-bottom: 25px; }
.topBlock-ranking { 
  width: calc(100% - 15px); 
  margin-bottom: 25px; 
  background: #faf7f2 none repeat scroll 0 0;
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 5px;
}
.topBlock-title { display: flex; align-items: center; color: #505050; font-weight: 700; text-transform: uppercase; margin-bottom: 15px; }
.topBlock-title i { margin-right: 10px; }

.icon-cup-orange { background: url(../images/cup-orange.png); width: 17px; height: 18px; }

.icon-cup-orange-light { background: url(../images/cup-orange-light.png); width: 17px; height: 18px; }

.icon-cup-white { background: url(../images/cup-white.png); width: 17px; height: 18px; }

.topBlock-table_row { font-weight: 700; color: #a5a5a5; font-size: 13px; border-bottom: 1px solid #ededed; padding: 7px 12px 7px 0px; display: flex; align-items: center; justify-content: space-between; }
.topBlock-table_row a { color: #a5a5a5; text-transform: uppercase; }
.topBlock-table_row a:hover { color: #000; }
.topBlock-table_row span { display: inline-block; padding: 2px 5px; }

.topBlock-table_row-1 { background-color: #ff7d09; color: #fff; }
.topBlock-table_row-1 .topBlock-date { border-right: 1px solid #fff; }
.topBlock-table_row-1 a { color: #fff; }

.topBlock-table_row-2 { color: #ff7d09; }
.topBlock-table_row-2 .topBlock-date { border-right: 1px solid #ff7d09; }
.topBlock-table_row-2 a { color: #ff7d09; }

.topBlock-table_row-3 { color: #ffb32f; }
.topBlock-table_row-3 .topBlock-date { border-right: 1px solid #ffb32f; }
.topBlock-table_row-3 a { color: #ffb32f; }

.topBlock-date { border-right: 1px solid #a5a5a5; }

.topBlock-table_row-right { font-weight: 400; }

.topBlock-rate { text-align: right; width: 45px; padding: 5px 0px !important; }

.topBlock-season { text-align: right; width: 90px; padding: 5px 0px !important; }

.bannr-468-60 { width: 468px; height: 60px; margin: 10px 30px; }

.bottom-banner { padding: 15px 0px; background-color: #faf7f2; }

.page-block-home { padding: 0px 4px; }

.homeText { padding-top: 60px; }
.homeText p { line-height: 2; }

.footer { color: #fff; }

.footerTop { background-color: #281f1d; padding: 30px 0px; }

.footerTitle { display: flex; align-items: center; color: #fff; font-weight: 700; text-transform: uppercase; margin-bottom: 30px; }
.footerTitle .icon { margin-right: 8px; top: -2px; }

.icon-fire-bottom { background: url(../images/icon-fire-bottom.png); width: 17px; height: 21px; }

.footerText { margin-bottom: 15px; }

.icon-mail { background: url(../images/soc-icons.png) left top no-repeat; width: 17px; height: 10px; }

.icon-skype { background: url(../images/soc-icons.png) left top -30px no-repeat; width: 17px; height: 13px; }

.icon-chat { background: url(../images/soc-icons.png) left top -60px no-repeat; width: 17px; height: 14px; }



.socBlock li { padding: 10px 0px; }
.socBlock li a { color: #fff; }

.footerBottom { background-color: #211918; padding: 60px 0px 25px 0px; }

.rules { display: flex; margin-left: -20px; }
.rules li { padding: 0px 20px; }
.rules li a { color: #ffb32f; }
.rules li a:hover { color: #fff; }

.live { color: #ffb32f; text-align: right; }
.live p { margin-bottom: 10px; }

.net { text-align: center; }
.net p { color: #fff; margin-bottom: 10px; }
.net span { color: #533c1c; }

.footerFlex { margin-bottom: 30px; }

@media (max-width: 1130px) { .container { padding: 0px 10px; }
  .topBlock-rate { width: 40px; }
  .topBlock-season { width: 65px; } }
@media (max-width: 993px) { .headerBanner-flex { justify-content: center; }
  .headerBanner-banner { margin: 10px; }
  .header { height: auto; padding: 30px 0px; }
  .topPanel-r { position: fixed; right: -320px; top: 0px; height: 100%; width: 320px; background: #1f1817; transition: 0.3s; }
  .topPanel-r.active { right: 0px; }
  .topPanel { height: 50px; }
  nav { display: block; width: 100%; }
  .menu { display: block; padding-left: 15px; }
  .menu li { padding: 30px 0px; }
  .menu li a { font-size: 24px; }
  .langBlock { position: absolute; right: 0px; top: 0px; width: 80px; }
  .loginButton { position: absolute; right: 80px; top: 0px; }
  .buton-btn { position: absolute; right: 10px; top: 7px; position: fixed; transition: 0.3s; z-index: 199; }
  .buton-btn span { width: 25px; height: 4px; display: block; margin: 6px 0px; background: #fff; transition: 0.3s; position: relative; }
  .buton-btn.active { right: 270px; top: 15px; }
  .buton-btn.active span { width: 34px; }
  .buton-btn.active span:nth-child(1) { transform: rotate(45deg); top: 5px; }
  .buton-btn.active span:nth-child(2) { display: none; }
  .buton-btn.active span:nth-child(3) { transform: rotate(-45deg); bottom: 5px; }
  .langBlock-drop ul li a { justify-content: center; padding: 10px; }
  .user-table tr { display: flex; flex-wrap: wrap; }
  .user-table tr td { display: flex; align-items: center; text-align: left !important; }
  .user-table tr td:nth-child(1) { width: 25% !important; }
  .user-table tr td:nth-child(4) { width: 25% !important; }
  .user-table tr td:nth-child(2) { width: 50% !important; }
  .user-table tr td:nth-child(5) { width: 50% !important; }
  .user-table tr td:nth-child(3) { width: 25% !important; }
  .user-table tr td:nth-child(6) { width: 25% !important; }
  .user-table tr td:nth-child(5) { padding-right: 0px; }
  .topBlock { width: 100%; } }
  .topBlock-ranking { width: 100%; } 
@media (max-width: 769px) { .homePage-container { width: 100%; }
  .sidebar { width: 100%; }
  .sidebarBanner { display: flex; justify-content: center; }
  .banner-240-96 { margin: 0 auto; } }
@media (max-width: 525px) { .user-table tr td:nth-child(1) { width: 50% !important; }
  .user-table tr td:nth-child(2) { width: 50% !important; }
  .user-table tr td:nth-child(3) { width: 50% !important; }
  .user-table tr td:nth-child(4) { width: 50% !important; }
  .user-table tr td:nth-child(5) { width: 50% !important; }
  .user-table tr td:nth-child(6) { width: 50% !important; }
  .user-table tr td { padding: 10px; }
  .footerFlex { justify-content: center; }
  .footerFlex-left { margin-bottom: 30px; }
  .rules { margin-left: 0px; }
  .socBlock { text-align: center; } }
@media (max-width: 420px) { .topBlock-table_row-left, .topBlock-table_row-right { width: 100%; justify-content: center; padding: 5px 0px; } }
.profile-icon{
  align-items: center;
  justify-content: center;
  align-self: center;
  display: flex;
  grid-area: prepend;
  width:30px;
}
.noscroll { 
	overflow: hidden;
}
.js-trigger-video-modal{
  cursor:pointer;
}
.video-modal,
.video-modal .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3000;
}
.video-modal {
	overflow: hidden;
	position: fixed;
	opacity: 0.0;
  -webkit-transform: translate(500%,0%);
  transform: translate(500%,0%);
  -webkit-transition: -webkit-transform 0s linear 0s;
  transition: transform 0s linear 0s;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.video-modal .overlay {
  z-index: 0;
  background: rgba(42, 36, 35,0.82); 
  opacity: 0.0;
  -webkit-transition: opacity 0.2s ease-out 0.05s;
  transition: opacity 0.2s ease-out 0.05s;
}
.video-modal-content {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	z-index: 1;
	margin: 0 auto;
	overflow-y: visible;
	background: #000;
  width: calc(100% - 12em);
  height: 0;
  padding-top: calc((100% - 12em) * 0.5625);
}
 @media (min-aspect-ratio: 16/9) {
  .video-modal-content {
    width: 0;
    height: calc(100vh - 10em);
    padding-top: 0;
    padding-left: calc((100vh - 10em) * 1.7778);
  }
}
@media (max-width: 640px) {
	.video-modal-content {
		width: calc(100% - 1em);
    padding-top: calc((100% - 1em) * 0.5625); 
	}
}
.close-video-modal {
	display: block;
    position: absolute;
    left: 0;
    top: -40px;

    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
}
iframe#youtube {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;

	background: #000;
	box-shadow: 0px 2px 16px rgba(0,0,0,0.5);
}
.show-video-modal .video-modal {
	opacity: 1.0;

	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}
.show-video-modal .video-modal .overlay {
	opacity: 1.0;
}
.show-video-modal .video-modal-content {
	transform: translate(0%,0%);
	-webkit-transform: translate(0%,0%);
}
.topBlock-link{
  overflow: hidden;
  width: 140px;
}
.vip{
  width: 100px;
}
.topBlock-link:hover .scroll{
  -webkit-transition: 5.3s;
  -moz-transition: 5.3s;
  transition: 5.3s;     
  margin-left: -70px;
}
.single-ranking-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-pack: distribute;
  
}
.single-ranking-list .ranking-box-left {
  max-width: 80px;
}

.ranking-box-middle {
  font-size: 30px;
  margin: 0 30px;
}
.ranking-box-middle a{
  color: #c8a88c !important;
  text-decoration:underline;
}
.single-ranking-list .ranking-box-right{
  margin-left: auto;
}
.place-badge {
  border-radius: 5px;
  padding: 10px 10px;
  background: #ff7d09 none repeat scroll 0 0;
  font-size: 20px;
  color: #FFF;
  text-transform: uppercase;
  line-height: 25px;
  display: inline-block;
  font-weight: 600;
	width: 50px;
}
/*
.vote-badge {
  border-radius: 5px;
  padding: 10px 20px;
  background: #ff7d09 none repeat scroll 0 0;
  font-size: 14px;
  color: #FFF !important;
  line-height: 25px;
  display: inline-block;
  cursor: pointer;
}
*/
.vote-badge {
	border-radius: 5px;
	padding: 3px 10px;
	background: #ff7d09 none repeat scroll 0 0;
	font-size: 14px;
	color: #FFF !important;
	line-height: 25px;
	display: inline-block;
	cursor: pointer;
	width: 120px;
	margin: 1px;
}

.ranking-description{
  margin-top: 10px;
  overflow: hidden;
  max-height:58px;
}
.ranking-description:first-letter {
  font-size: 28px;
  color: #ff7d09;
  font-weight:900;
  letter-spacing:2px;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span,
.pagination > li:last-child > a, 
.pagination > li:last-child > span {
	border-radius:0;
}

.pagination > li > a {
	border-color:#c8c8c8;
	color: #000;
}

.pagination > li > a:hover {
	border-color:#c8c8c8;
	background-color: #e8e8e8;
	color: #000;
}

.pagination>.active>a, 
.pagination>.active>span, 
.pagination>.active>a:hover, 
.pagination>.active>span:hover, 
.pagination>.active>a:focus, 
.pagination>.active>span:focus {
	background-color: #ff7d09;
	border-color:#ff7d09;
}
a.social {
	color: #2f2f2f;
	background: #f7f7f7;
	border: 1px solid #ddd;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	line-height: 25px;
}
a.social:hover {
	text-decoration: none;
	color: #fafafa;
	background: #2f2f2f;
	border-color: #2f2f2f;
}
.server-banner{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	gap: 5px;
}

@media (max-width: 1000px) {
  .server-banner {
    flex-direction: column;
  }
	.ranking-box-middle {
		font-size: 24px;
	}
}