:root {
  --lighty:#f1f1f1;
  --lighter:#f8f9fa;
  --grass:#7fc241;
  --dark-box:#444;
  --body-text:#212529;
  --darker:#231f20;
  --light-gray:#dee2e6;
	--dark-blue:#003143;
}

.grass{color:var(--grass)}
.bg-grass{background-color:var(--grass)}
.bg-darker{background-color:var(--darker)}
.lighty{color: var(--lighty)}
a:hover .black,.black a:hover{color:#000a}
body {
	font-family:IRANSans !important;
	font-weight:300;
	overflow-x:hidden;
	text-align:right;
	background:var(--lighty);
	padding-top:5rem;
}
h1, h2, h3, h4, h5, h6,input, textarea, select {
	font-family:IRANSans !important;
}
h1 {
	font-weight:bold;
}
section.bg-white,div.bg-white{box-shadow:0 0 5px #0001}
a:hover{text-decoration:inherit;color:inherit}

.rtl{direction:rtl}
.ltr{direction:ltr}

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

.text-xl{font-size:150%}
.text-lg{font-size:125%}
.text-md{font-size:100%}
.text-sm{font-size:85%}
.text-xs{font-size:70%}
@media (min-width:768px) and (max-width:959px){
	.text-xl{font-size:114%}
	.text-lg{font-size:100%}
	.text-md{font-size:90%}
	.text-sm{font-size:75%}
	.text-xs{font-size:65%}
}
@media (max-width:340px){
	.text-xl{font-size:114%}
	.text-lg{font-size:100%}
	.text-md{font-size:90%}
	.text-sm{font-size:75%}
	.text-xs{font-size:65%}
}
.font-w-100{font-weight: 100}
.font-w-300{font-weight: 300}
.font-w-400{font-weight: 400}
.font-w-500{font-weight: 500}
.font-w-600{font-weight: 600}

main{}
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav > .nav-link{color: var(--grass)}
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link{color: #fff}
.dropdown-toggle:after {margin: 0 .255em 0 0;vertical-align:middle}
@media (max-width:767px){
	nav.navbar{padding-right:1rem}
	}
.navbar-nav {
    padding-left: 0;
	padding-right: 0;
	}
.navbar-brand{
	background:url(../img/logo-.png) no-repeat 0 0 transparent;
	height: 56px;
	width: 112px;
	margin: -10px 0 -10px 5px;
	padding: 0;
	background-size: auto 75%;
	background-position: 0 center;
	position:fixed;
	top:10px;
	left:8px
	}
@media (min-width: 768px) and (max-width: 991px){.navbar-brand{left:.25rem} .navbar{padding:.5rem .2rem}}
@media (min-width: 480px) and (max-width: 767px){.navbar-brand{top:.65rem; left:.25rem}}
@media (max-width: 479px){.navbar-brand{top:.5rem; left:.25rem}}
.dropdown-menu{
	right:0;
	left:auto;
	text-align: right;
	}
#navbarCollapse button.search-btn,
#navbarCollapse a.search-btn,
.modal-search-btn{
	background-image:url(../img/icon-search.png);
	width: 36px;
	height: 36px;
	position: absolute;
	background-size: 28px;
	background-position: 2px;
	background-color: #ddd;
	background-repeat: no-repeat;
	border-radius: 0;
}
#navbarCollapse button.search-btn{}

@media  (max-width: 991px){
	#navbarCollapse button.search-btn{left: 14.8rem;right:auto}
	#navbarCollapse a.search-btn{left:14.8rem;right:auto}
}
@media  (min-width: 992px) and (max-width: 1024px){
	#navbarCollapse button.search-btn{left: 16.6rem;right:auto}
	#navbarCollapse a.search-btn{left:16.6rem;right:auto}
}
@media (min-width: 1025px){
	#navbarCollapse button.search-btn{left: 17.6rem;right:auto}
	#navbarCollapse a.search-btn{left:17.6rem;right:auto}
}
@media (min-width: 1255px){
}
#searchModal .container-fluid{padding:15px;}

.modal-search-btn{left: 1px;top: 1px;z-index:5}
@media (min-width: 960px){#navbarCollapse a.search-btn{display:none}}
@media (min-width: 768px)and(max-width: 959px){#navbarCollapse a.search-btn{display:block}}
@media (max-width: 959px){#navbarCollapse .search-form{display:none}}
@media (min-width: 768px){#navbarCollapse{margin-left: 6rem}}
@media (max-width: 767px){
	.login-nav li:last-child{border-top:1px solid rgba(255,255,255,.25)}
	#navbarCollapse a.search-btn{display:block;position: fixed;top: .6rem;left: 47%}
	}
.custom-checkbox .custom-control-label:before,
.dropdown-menu,
.form-control{border-radius:0}
@media (min-width: 576px){
	.side-left{padding-left:0}
	.side-right{padding-right:0}
}
@media (max-width: 575px){
	.side-left,
	.side-right{margin-top:1rem}
}
@media (max-width: 991px){#navbarCollapse{padding-left:0}}
@media (min-width: 992px) and (max-width: 1023px){#navbarCollapse{padding-left:1rem}}
@media (min-width: 1024px){#navbarCollapse{padding-left:2rem}}
/****************************/
/********	Main	*********/
/****************************/

.bg-dark-box{background:var(--dark-box);color:var(--lighty)}
.bg-dark-box a{color:var(--lighty)}
.bg-dark-box a:hover{color:var(--white)}
.hr-short{margin-left:50%}
hr.grass{border-top: 1px solid var(--grass)}
/***** post *****/

/***** carousel *****/
.carousel{z-index:0;order: 1}
.carousel-item{height:20rem}
.bd-placeholder-img{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:20rem;
}
.carousel-indicators{margin-bottom:.75rem; padding-right:0}
.carousel-inner{height: 25.5rem}
.carousel-control-next, .carousel-control-prev{width:25%;opacity:0;height: 20rem}
.carousel-control-next span, .carousel-control-prev span{position:absolute}
.carousel-indicators{bottom:0}
.carousel-indicators li {
	box-sizing:content-box;
	-ms-flex:0 1 auto;
	flex:0 1 auto;
	width:14px;
	height:16px;
	margin-right:1px;
	margin-left:1px;
	text-indent:1px;
	cursor:pointer;
	color:var(--dark-gray);
	border:none 0 transparent;
	opacity:.5;
	transition:opacity .6s ease;
	padding:5px 2px;
	background:none;
}
.carousel-caption p{margin:0;line-height: 1.6rem}
.carousel-caption{
	top: 20rem;
	font-weight:600;
	font-size:1.35rem;
	color: var(--dark-gray);
	right:0;
	left:0;
	text-align: right;
	padding: .5rem 0;
	height: 3rem;
	}
@media (min-width:768px) and (max-width:1346px){.carousel-caption{font-size:1rem}}
@media (max-width:959px){.carousel-caption{font-size:1rem}}
.carousel-indicators i{color: black}
.carousel-indicators .active i,
.grass{color:var(--grass)}
.box-title{
	padding: .2rem .3rem .25rem;
	width: 8.5rem;
	background-color: var(--grass);
	font-size: .9rem;
	font-weight: 600;
	color: var(--body-text);
}
.box-sub-title{
	padding: .2rem .3rem .25rem;
	width: 7rem;
	background-color: var(--dark-box);
	font-size: .9rem;
	font-weight: 600;
	color: white;
}
@media (min-width:768px) and (max-width:923px){.box-title{width:7rem}.box-sub-title{width:5.9rem}}
.custom-select.box-sub-title option,
.custom-select.box-title option{background: var(--light);font-size: .8rem}
.custom-select.box-sub-title,
.custom-select.box-title{
	padding: 0 .35rem 0 0;
	height: 25px;
	border: none;
	border-radius: 0;
	line-height: 25px;
	background-position:.5rem .5rem;
}
.custom-select.box-sub-title option{color:var(--dark-box)}
.custom-select.box-sub-title{
	background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat left .5rem center/8px 10px var(--dark-box);
}
.news-item-1{font-weight:500;line-height: 1.2rem;margin: 0;font-size:85%}
.news-selector .custom-control-inline{margin-right: .75rem}
.news-selector .custom-control-inline:nth-child(2){margin-right: 0.14rem}
.news-selector{
	font-weight: 500;
	font-size: 75%;
	display: block;
	position: relative;
	top: -1.95rem;
	right: 8rem;
	margin-bottom: -1rem;
	line-height: 1.4rem;
	max-width: 14rem;
	}
@media (min-width:768px) and (max-width:1346px){#twittinfo .news-selector{top:-.23rem; right:-1rem}}
@media (max-width:959px){#twittinfo .news-selector .custom-checkbox:last-child{margin-right:.7rem}}
.custom-control-label:before{
  background-color:var(--lighty);
}
.custom-control-label{padding-right:.5rem;cursor:pointer}
.custom-control-label:before,
.custom-control-label:after {left:auto; right:-1rem}
.custom-control {padding-left:.4rem; padding-right:1.4rem;;transition:all .25s}
.custom-control:hover {background-color:#eee;cursor:pointer;transition:all .14s}
.custom-control-input:checked ~ .custom-control-label:before{border-color:var(--grass);background-color: var(--grass)}
.more-btn:hover{transition:all .14s}
.more-btn{
	font-weight: 500;
	left: 0;
	position: absolute;
	padding: .25rem 1rem .35rem;
	margin-top: -0.85rem;
	font-size: 80%;
	transition:all .25s
	}
.bg-white .more-btn{background: var(--lighty);color: black;border-width: 0 1px 1px 1px;border-style: solid;border-color:#fff}
.bg-white .more-btn:hover{background:var(--light-gray)}
.bg-dark-box  .more-btn{background: #fff2;color: white}
.bg-dark-box  .more-btn:hover{background:#fff4}

#league-tbl .table,#league-one-tbl .table,#metrika-tops-tbl .table{margin-bottom:1.4rem}
#league-tbl td,#league-tbl th{text-align: center}
.center-btn{display: block; text-align: center; margin: -1rem 4rem; min-width: 16rem; position: relative; padding: .25rem 1rem .35rem; font-size: 1rem}
@media (min-width:768px) and (max-width:959px){.center-btn{margin:-1rem 0;padding:.25rem .5rem .35rem;min-width: auto;}}
@media (max-width:340px){.center-btn{margin:-1rem 0;padding:.25rem .5rem .35rem;min-width: auto;}}
.table .td-stats{padding:0; width:2rem; vertical-align:middle}
.td-stats .btn:hover{-webkit-filter: grayscale(100%) contrast(3);filter: grayscale(100%) contrast(3);transition:all .14s}
.td-stats .btn{
	height:2rem;
	width:2rem;
	border-radius:0;
	background: var(--dark-box) url(../img/logo-mini-gray.png) no-repeat 4px 4px;
	background-size: 22px;
	transition:all .25s
}
#league-one-tbl td, #league-one-tbl th {padding: .1rem .2rem}
#league-one-tbl .table,#league-tbl .table,#metrika-tops-tbl .table{font-size: .85rem}
@media (min-width:768px) and (max-width:959px){#league-one-tbl .table,#league-tbl .table,#metrika-tops-tbl .table{font-size: .7rem}}
@media (max-width:340px){#league-one-tbl .table,#league-tbl .table,#metrika-tops-tbl .table{font-size: .7rem}}
#league-one-tbl td:first-child{width:1.5rem;text-align:center}
#league-one-tbl th:first-child,
#league-one-tbl th:nth-child(n+3):nth-child(-n+5),
#league-one-tbl tbody td:nth-child(n+3):nth-child(-n+4){text-align:center}
#league-one-tbl tbody td:nth-child(n+5):nth-child(-n+10){
	text-align: center;
	width: 1.2rem;
	vertical-align: middle;
	padding: 0 .2rem 0 0;
}
@media (min-width:768px) and (max-width:959px){#league-one-tbl tbody td:nth-child(n+5):nth-child(-n+10){width: 1rem;padding-right:.07rem}#league-one-tbl tbody td:nth-child(-n+4){vertical-align:middle}}
@media (max-width:340px){#league-one-tbl tbody td:nth-child(n+5):nth-child(-n+10){width: 1rem;padding-right:.07rem}#league-one-tbl tbody td:nth-child(-n+4){vertical-align:middle}}
#league-one-tbl .res-W,
#league-one-tbl .res-D,
#league-one-tbl .res-L{
	color:white;
	width: 1.1rem;
	display: block;
	height: 1.1rem;
	line-height: 1.1rem;
	font-size: .7rem;
	font-weight: 600;
}
@media (min-width:768px) and (max-width:959px){#league-one-tbl .res-W,#league-one-tbl .res-D,#league-one-tbl .res-L{width:.85rem; height:.85rem; line-height:.9rem; font-size:.7rem}}
@media (max-width:340px){#league-one-tbl .res-W,#league-one-tbl .res-D,#league-one-tbl .res-L{width:.85rem; height:.85rem; line-height:.9rem; font-size:.7rem}}
#league-one-tbl .res-W{background:var(--grass)}
#league-one-tbl .res-D{background:var(--yellow)}
#league-one-tbl .res-L{background:var(--red)}

#metrika-tops-tbl td{ text-align: center}
#metrika-tops-tbl td:first-child{text-align: center; font-weight:bold; background:var(--dark-box); color:var(--lighty)}

@media (max-width:479px) {
	.td-stats .btn{background-position:2px 2px}
}
@media (min-width:480px) {
	#metrika-tops-tbl td:first-child{width: 4rem}
}

footer{background-color:var(--dark-blue)}
footer .row:first-child{background:#0005}
footer .row .row{background:transparent}
footer #page-links a{
	display: inline-flex;
	height: 3rem;
	width: 3rem;
	margin: 0 1rem;
	padding: .7rem;
}
footer #page-links a img{filter: opacity(0.5) invert(100%);-webkit-filter: opacity(0.5) invert(100%); transition:all .25s}
footer #page-links a:hover{background: #0005}
footer #page-links a:hover img{filter: opacity(1) invert(100%);-webkit-filter: opacity(1) invert(100%); transition:all .14s}
footer a{color:var(--lighter)}
footer a:hover,footer a:active{color:var(--grass)}
footer .col-sm-4 p{height: 22px;overflow: hidden; margin: .5rem 0}
footer .row div:last-child p{text-indent: -15px}
@media (max-width:767px) {
	footer .row div:last-child p{margin:0 auto; padding:.25rem; text-indent:1.6rem; line-height:1.5rem; height:2rem}
	footer #follow-links p{text-indent:0}
	}
footer .row div:first-child a img{transition:all .25s}
footer .row div:first-child a:hover img{ -webkit-filter: grayscale(100%) contrast(3);filter: grayscale(100%) contrast(3);transition:all .14s}
@media (min-width:768px) and (max-width:767px) {}
@media (max-width:767px) {
	footer .col-sm-4 p{text-align:center}
}