@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');

html { scroll-behavior: smooth; }

body { background: #FFFFFF !important; font-family: Montserrat, sans-serif !important; padding: 0; margin: 0; font-size: 0.9rem; }
* { padding: 0; margin: 0; }

button, select, input, textarea { font-family: Montserrat !important; }

.cursor-pointer:hover { cursor: pointer; }

.montserrat { font-family: 'Montserrat' !important; }

.match-center { background: #343A40; display: flex; height: 111px !important; }
.match-center .match-center-items { width: calc(100% - 60px); overflow: hidden; }
.match-center .match-center-nav { width: 30px; background: rgba(0,0,0,0.5);  }
.match-center .match-center-nav a { display: block; outline: none; width: 100%; height: 100%; background-size: 21px 21px; background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; }
.match-center .match-center-nav-left { position: relative; }
.match-center .match-center-nav-right {  }
.match-center a { color: #FFF; text-decoration: none; }
.match-center .team-city { font-size: 11px; color: #999; text-transform: uppercase; }
.match-center .tournament-info { font-size: 11px; color: #999; }
.match-center .tournament-info-spacer { border-top: 1px dotted #777; }
		
.main-menu .logo-line img { max-height: 70px; }
.main-menu .logo-tile { max-height: 70px; }
.main-menu li * { font-family: 'Montserrat' !important; font-size: 0.8rem; }
.main-menu li { font-size: 0.8rem; }

#gssmenu-nav {  }

.modal_no_borders { border-radius: 0 !important; border: none !important; }

.leaders-num-position { left: -11px; top: -11px; padding: 2px 8px; border-radius: 50px; border: 1px solid #dee2e6; background: #FFF; font-size: 9px; }

.gss-nav { background: #000 !important; z-index: 3; padding: 10px 10px; }
@media (max-width: 991.98px) {
	.gss-nav {   background: #000 !important;   position: relative;   top: 0;   padding: 10px 15px; }
	}
.gss-nav .navbar-brand { color: #FFF; text-transform: uppercase; font-weight: 600; font-size: 0.85rem; }
.gss-nav .navbar-brand .gss-brand { color: #5A676A !important; font-weight: 800; font-size: 1.25rem !important; }
.gss-nav .navbar-brand:hover, .gss-nav .navbar-brand:focus { color: #FFF; }
@media (max-width: 991.98px) {
	.gss-nav .navbar-brand { color: #FFF; }
	}
@media (max-width: 991.98px) {
	.gss-nav .navbar-nav { padding-bottom: 10px; }
	}
.gss-nav .navbar-nav > .nav-item > .nav-link { padding-top: 1.2rem; padding-bottom: 1.2rem; padding-left: 10px; padding-right: 10px; font-weight: 400; color: #FFF; position: relative; opacity: 1 !important; }
.gss-nav .navbar-nav > .nav-item > .nav-link:hover {   color: #5A676A; }
@media (max-width: 991.98px) {   .gss-nav .navbar-nav > .nav-item > .nav-link { 	padding-left: 0; 	padding-right: 0; 	padding-top: .5rem; 	padding-bottom: .5rem; 	color: rgba(255, 255, 255, 0.7); }
	.gss-nav .navbar-nav > .nav-item > .nav-link:hover { 	  color: #fff; } }
.gss-nav .navbar-nav > .nav-item .dropdown-menu { border: none; background: #fff; -webkit-box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41); -moz-box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41); box-shadow: 0px 10px 34px -20px rgba(0, 0, 0, 0.41); border-radius: 4px; padding: 0; }
.gss-nav .navbar-nav > .nav-item .dropdown-menu .dropdown-item {   font-size: 12px;   color: #000; }
  .gss-nav .navbar-nav > .nav-item .dropdown-menu .dropdown-item:hover, .gss-nav .navbar-nav > .nav-item .dropdown-menu .dropdown-item:focus { 	background: #5A676A; 	color: #fff; }
.gss-nav .navbar-nav > .nav-item.cta > a { color: #fff; background: #5A676A; border-radius: 0px; }
@media (max-width: 767.98px) {
	.gss-nav .navbar-nav > .nav-item.cta > a { padding-left: 15px; padding-right: 15px; }
	}
@media (max-width: 991.98px) {
	.gss-nav .navbar-nav > .nav-item.cta > a { color: #fff; background: #5A676A; border-radius: 4px; }
	}
.gss-nav .navbar-nav > .nav-item.active > a { color: #5A676A; }
@media (max-width: 991.98px) {
	.gss-nav .navbar-nav > .nav-item.active > a { color: #fff; }
	}


@media only screen and (min-width : 280px) {
	.main-menu li { border-top: 1px solid #5A676A; font-size: 0.75rem; }
}

@media only screen and (min-width : 768px) {
	.main-menu li { font-size: 0.8rem; }
}

@media only screen and (min-width : 992px) {
	.main-menu li { border-top: none; }

}

@media only screen and (min-width : 1200px) {
	.main-menu li { border-top: none; }

}

.gss-nav .navbar-toggler { border: none; color: rgba(255, 255, 255, 1) !important; cursor: pointer; padding-right: 0; text-transform: uppercase; font-size: 16px; letter-spacing: .1em; }
.gss-nav .navbar-toggler:focus {   outline: none !important; }

.social-media p a { border: 1px solid #FFF; width: 40px; height: 40px; border-radius: 50%; margin-right: 4px; font-size: 0.85rem; }
.social-media p a span { color: #FFF; }
.social-media p .active { background: #5A676A; border-color: #5A676A; text-decoration: none; }
.social-media p .active * { color: #000 !important; }
.social-media p a:hover { background: #5A676A; border-color: #5A676A; text-decoration: none; }
.social-media p a:hover span { color: #fff; }
@media (max-width: 991.98px) {
	.social-media p a { border-color: #fff; width: 30px; height: 30px; }
	.social-media p a span { 	color: #fff; }
	}
.social-media .menu-icon-tools { border-color: #ffc107; }
.social-media .menu-icon-tools * { color: #ffc107; }
.social-media .menu-icon-tools:hover { background: none; border-color: #FFF !important; color: #FFF !important; }
.social-media .menu-icon-tools *:hover { background: none; border-color: #FFF !important; color: #FFF !important; }

.menu-icon-stories * { color: #000 !important; }
.menu-icon-stories {
	border: none !important; background-size: 200% 200% !important; animation: gradient 10s ease infinite;
    background: linear-gradient(90deg, rgba(100,230,30,1) 0%, rgba(0,255,254,1) 25%, rgba(214,27,213,1) 50%, rgba(255,190,0,1) 75%, rgba(100,230,30,1) 100%); 
}

@keyframes gradient {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

#stories_timer_line { background: #000; width: 100%; height: 6px; }
#stories_timer_line .active {
  width:0px;
  border-top: 6px solid #5A676A;
  
  -webkit-animation: stories_timer_line 8s;
  -moz-animation:    stories_timer_line 8s; 
  -o-animation:      stories_timer_line 8s; 
  animation:         stories_timer_line 8s; 
  animation-fill-mode: forwards;
}

@keyframes stories_timer_line {
    100% {
        width: 100%;
    }
}
		
.block-title { color: #5A676A; border: 3px solid #5A676A; padding: 10px 30px; text-transform: uppercase; font-weight: 800; font-family: 'Montserrat' !important; font-size: 18px; }
.chapter-title { color: #000; text-transform: uppercase; font-weight: 700; font-family: 'Montserrat' !important; font-size: 18px; }
.chapter-title * { font-family: 'Montserrat' !important; }
.chapter-title b { color: #5A676A; text-transform: uppercase; font-weight: 900; font-size: 18px; }
.chapter-title .count { font-weight: 900; }
.chapter-title .game_online { color: red !important; }

.tiles-menu { }
.tiles-menu * { font-family: Montserrat !important; font-weight: 600; }
.tiles-menu a { background: #343A40; color: white; border: 1px solid #000; text-decoration: none;  }
.tiles-menu .active { background: #5A676A !important; color: white !important; border: 1px solid #5A676A !important; text-decoration: none; font-weight: 800; }
.tiles-menu > div > span { background: #5A676A; color: white; border: 1px solid #5A676A; }
.tiles-menu strong { font-weight: 800; }
.tiles-menu a:hover { color: #5A676A; }
.tiles-menu .girls { font-family: georgia !important; color: #f1a7dc; }

@media only screen and (min-width : 380px) {
	.tiles-menu * { font-size: 1.1rem; }
}

@media only screen and (min-width : 768px) {
	.tiles-menu * { font-size: 0.95rem; }
}

@media only screen and (min-width : 992px) {
	.tiles-menu * { font-size: 1rem; }
}

@media only screen and (min-width : 1200px) {

}

.games-scores { position: absolute; text-align: center; padding: 3px 18px; font-family: 'Montserrat' !important; font-weight: 800; min-width: 40px; }
.games-scores-res {  padding: 3px 18px; }
.games-active-green-line { background-color: #5A676A; height: 3px; margin: 3px auto ; border-radius: 10px; position: relative; animation-name: activeGame; animation-duration: 6s; animation-iteration-count: infinite; }
@keyframes games-active {
	0%   {background-color: #5A676A; width: 100%; }
	50% { background-color: green; width: 28px; }
	100%   {background-color: #5A676A; width: 100%; }
}

.share-link { padding: 6px 12px;  font-family: Montserrat !important; font-size: 12px; }
.share-link b { font-family: Montserrat !important; font-weight: 700; }
.share-link-tg { border: 3px solid #0088cc; color: #0088cc; }
.share-link-wa { border: 3px solid #25D366; color: #25D366; }

.game-team-name { font-size: 14px; }
.game-team-name b { font-weight: 600; }
@media only screen and (min-width : 380px) {
	.game-team-name { font-size: 14px; }
}

@media only screen and (min-width : 992px) {
	.game-team-name { font-size: 16px; }
}

.game-scores-block { }
.game-scores-block div { padding: 10px 20px; }
.game-scores-block .game-scores-block-scores { font-size: 33px; border: 3px solid #ededed; }
.game-scores-block .game-scores-block-scores div { font-size: 10px; }
.game-scores-block .game-scores-block-scores strong { font-weight: 900; }
.game-scores-block-helpers { font-size: 19px; background: #ededed; }


.img-link { position: absolute; top: -8px; width: 100%; height: 123px; }
.img-link img { height: 123px; -webkit-filter: drop-shadow(2px 4px 4px #000); filter: drop-shadow(2px 4px 4px #000); }
.player-png { }
.player-award { -webkit-filter: drop-shadow(5px -8px 5px rgba(0,0,0,0.25)); filter: drop-shadow(5px -8px 5px rgba(0,0,0,0.25)); }

.color-th { color: #5A676A; }
.bg-th { background: #5A676A; }

.header {
	background-repeat: repeat-x;
	animation: header 30s linear infinite;
	height: 108px;
}

@keyframes header {
  from {
	background-position: 0px 0px;
  }
  to {
	background-position: -2688px 0px;
  }
}

.activeGame {
	background-color: #5A676A;
	height: 6px;
	margin: 0 auto 5px;
	border-radius: 10px;
	position: relative;
	animation-name: activeGame;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes activeGame {
	0%   {background-color:#5A676A; width: 100%; }
	50% { background-color:green; width: 16px; }
	100%   {background-color:#5A676A; width: 100%; }
}

	.signature-top { z-index: 9955; }
	.signature-background { z-index: 180; 	bottom: 0; right: 0; }
	
@media (min-width: 1200px) {
	.signature-top { bottom: 0; left: 0; margin-left: -70%; width: 100%; }
	.signature-background { width: 100% }
	.player-order-first { width: 100%; text-align: center; }
	.player-order-last { width: 100%; text-align: center; }
}

@media (min-width: 992px) and (max-width: 1199px) {
	.signature-top { bottom: 0; left: 0; margin-left: -70%; width: 100%; }
	.signature-background { width: 100% }
	.player-order-first { width: 100%; text-align: center; }
	.player-order-last { width: 100%; text-align: center; }
}

@media (min-width: 768px) and (max-width: 991px) {
	.signature-top { bottom: 0; left: 0; margin-left: -70%; width: 100%; }
	.signature-background { width: 100% }
	.player-order-first { width: 100%; text-align: center; }
	.player-order-last { width: 100%; text-align: center; }
}

@media (max-width: 767px) {
	.signature-top { bottom: 0; right: 20px; width: 50%; }
	.signature-background { width: 90% }
	.player-order-first { width: 55%; text-align: right; }
	.player-order-last { width: 40%; }
}

@media (max-width: 480px) {
	.signature-top { bottom: 0; right: 20px; width: 50%; }
	.signature-background { width: 90% }
	.player-order-first { width: 55%; text-align: right; }
	.player-order-last { width: 40%; }
}

.bottom-partners { max-height: 60px; }

.grayscale {
	filter: grayscale(100%);
	transition: 1s;
	opacity: 0.5;
}
.grayscale:hover {
	filter: grayscale(0);
	opacity: 1;
}

.loader {
  border: 10px solid #f3f3f3;
  border-top: 10px solid #5A676A;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.season-chart { width: 100%; height: 300px; }
.team-season-chart { width: 100%; height: 300px; }

.carousel-caption { bottom: -16px !important; }
.carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%235A676A' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e") !important; }
.carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%235A676A' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e") !important; }

.footer { font-size: 0.85rem !important; }

.telegram-button {
    position: fixed;
    right: 13px;
    bottom: 8px;
    transform: translate(-50%, -50%);
    background: #0088cc; /* icon color */
    border-radius: 50%;
    width: 55px; /* icon w*/
    height: 55px; /* icon h */
    color: #fff;
    text-align: center;
    line-height: 53px; /* icon in center */
    font-size: 35px; /* icon size */
    z-index: 9999;
}
.telegram-button a {
    color: #fff;
}
.telegram-button:before,
.telegram-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #0088cc; /* waves color*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.telegram-button:after{
    animation-delay: .5s;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}