* {
  margin: 0;
  padding: 0px;
}
body{
    margin-bottom: 60px;
  font-size: 16px;
  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.container {
  max-width: 1230px !important;
}
html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}
a {
  transition: 300ms;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #080708;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b30000;
}
.container{
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.col-12,
.col-xl-4, .col-xl-8, .col-xl-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-12 {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 1200px) {
  .col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.container-fluid {
  width: 100%;
}
/*--------------------------------------------------------------------------*/
body {
  background: linear-gradient(180deg, #2D2D2D 0%, #2D2D2D 100%);
}
header {
  background: #3D674A;
  min-height: 97px;
  display: flex;
  align-items: center;
}
@media (max-width:1200px) {
  header {
    min-height:80px;
  }
}
.wrap-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media(max-width:767px) {
  .wrap-logo img,.wrap-logo-ft  img {
   max-width: 250px;
 }
}
.wrap-logo {
  margin: 20px 0;
}
.wrap-content-header{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;

}
.wrap-menu-desktop .menu-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 23px;
}
.wrap-menu-desktop ul li {
  list-style: none;
}
.wrap-menu-desktop ul li a{
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 65px;
  text-transform: uppercase;
}
.wrap-menu-desktop ul li a:hover{
  text-decoration: underline;
} 
@media (min-width:1201px) {
  .wrap-button-header {
    display: none;
  }
}
.button-top a{
  margin: 10px 0;
  line-height: 42px;
  padding: 0 26px;
  border-radius: 5px;
  display: inline-block;
  align-items: center;
  column-gap: 7px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid #FFB800;
  background: linear-gradient(270deg, #FFB800 0%, #F48811 100%);
}
.button-top a:nth-child(1){
  margin-right: 10px;
  background-size: 150%;
  color: #fff;
  background-position: left;
}
.button-top a:nth-child(1):hover,.button-top a:nth-child(2):hover{
  background-position: right;
}
.button-top a:nth-child(1) svg{
  margin-top: -6px;
}
.button-top a:nth-child(2) svg{
  transform: translateY(-2px);
}

.button-top a:nth-child(2){
  color: #fff;
   padding: 0 15px 0 12px;
  border-radius: 5px;
  background-size: 200%;
  background-position: left;

}

/*-----------------banner----------------  */
a {
  text-decoration: none;
}
.page-title {
  background-image: url(./assets/image/banner_theme4.jpg);
  padding:20px 0px 30px 0px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.title-ptp {
  margin-top: 17px;
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
.desc {
  margin-top: 13px;
  margin-bottom: 22px;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  max-width: 743px;
}
.link-all {
  color: #FFF;
  font-size: 14px;
  text-decoration: none;
  font-weight: 700;
  line-height: normal;
}
.video-popup {
  position:relative;
  margin-top: 24px;
}
.video-popup img{
  width: 100%;
}
@media(max-width:575px){
  .btn-video img{
    max-width: 60px;
  }
}
.btn-video {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.tab {
  overflow: hidden;
  margin: 10px 0;
}

.tabcontent {
  display: none;  
}
.tabcontent.active {
  display: block ;
}
.wrap-match {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -12px;
}
.element-tab .tab{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  flex-wrap: wrap;
}

.cl2 {
  background-color: #5A0E96 !important;
}
.tab button {
  margin: 10px 0 13px 0;
  position:relative;
  padding: 0 25px;
  border-radius: 5px;
  overflow: hidden;
  display: inline-block;
  border: none;
  color: #FFF;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 44px;
}
@media (max-width:767px) {
  .tab button {
    padding: 0 20px;
  }
}
.tab button span {
  z-index: 3;
  position:relative;
}
.tab button:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #969696 0%, #C0C0C0 100%);
}

.tab button:after {
  opacity: 0;
  content: '';
  transition: 200ms;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(270deg, #FFB800 0%, #F48811 100%);
}
.tab button.active:after,.tab button:hover:after {
  opacity: 1;
} 
@media (max-width:480px) {
  .element-tab .tab{
    column-gap:0;
  }
  .element-tab .tab button{
    padding: 0 10px;
    border-radius: 0;
    font-size: 15px;
  }
  .element-tab .tab button span{
    font-size: 15px;
  }
}
/*------------------------tab-----------------------*/
.wrap-box-match {
  width: 100%;
  max-width: 50%;
  padding: 0 12px;
  
}
.box-match {
  padding: 1px;
  width: 100%;
  position:relative;
  text-align: center;
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 8px;
}
.info-match {
  display: flex;
/*  align-items: center;*/
column-gap: 10px;
}
.league {
  display: flex;
  column-gap: 7px;
  padding: 11px 0 ;
  justify-content: center;
  align-items: center;
  background: linear-gradient(270deg, #FFB800 0%, #F48811 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  color: #FFF;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.caster{
  background: #fff;
  text-align: left;
  color: #FF8600;
  padding-left: 10px;
  padding-right: 120px;
  font-weight: 500;
  padding-bottom: 5px;
  padding-top: 10px;
}
.caster a{
  color: red;
    font-size: 14px;
    line-height: normal;
    font-weight: bold;
}
.caster a:hover{
  text-decoration: underline;
}
.info-match {
  background: #fff;
  padding: 18px 30px;
  padding-bottom: 14px;
}
@media(max-width:1200px) and (min-width:768px) {
  .info-match {
    padding: 18px 10px;
  }
}
.name-team {
  color: #4e4e4e;
  margin-top: 5px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: normal;
}
.hour {
  color: #F50000;
  text-align: center;
  font-size: 35px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.date {
  background-color: #7E7E7E;
  line-height: 23px;
  color: #FFF;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 10px;
  display: inline-block;
  margin-bottom: 10px;
  margin-top: 5px;
}
.view-live {
  display: inline-block;
  border-radius: 7px;
  background: #23A44B;
  line-height: 40px;
  color: #FFF;
  text-align: center;
  font-size: 18px;
  padding: 0px;
  width: 100%;
}
.info-match .team{
  width: calc(37% - 12px);
}

.info-match .time{
  width: 29%
}
.extra-link {
  background-color: #FF8600;
  position:absolute;
  line-height: 34px;
  padding: 0 17px;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  right: 0;
  bottom: 0px;
}
.extra-link a{
  line-height: 36px;
  font-size: 15px;
  font-weight: 500;

  color: #fff;
}
.box-live-now {
  display: flex;
  align-items: center;
  margin: 0 -12px;
  margin-bottom: 15px;
}
.box-live-now .box {
  width: 100%;
  max-width: 50%;
  padding: 0 12px;
  padding: 45px 28px;
  background-position: center;
  background-size: cover;
  border-radius: 10px;
  overflow: hidden;
  margin: 12px;
}
@media( max-width:575px) {
  .box-live-now .box {
    padding: 30px 20px;
  }
}
.box-live-now .box-1 {
  background-image: url(./assets/image/banner_left.jpg);
}
.box-live-now .wrap-tl {
  color: #FFF;
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
.box-live-now .box-2 {
  background-image: url(./assets/image/banner_right.jpg);
}
.box-live-now h4 {
  text-align: center;
  color: #FFF;
  font-size: 23px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}
.box-live-now .button-view {
  margin-top: 12px;
  margin-left: 45px;
  display: inline-block;
  line-height: 44px;
  padding: 0 34px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, #3D674A 0%, #4FA84B 100%);
}
.box-live-now .button-view:hover {
  background: #F48811 !important;
}
.info-textbox {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.info-textbox h4{
  padding: 17px 15px;
  background: #F48811;
  line-height: 26px;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
}
.info-textbox .content {
  padding: 30px 35px;
  position: relative;
  color: #4e4e4e;
  max-height: 367px;
  overflow-y: scroll;
  margin-bottom: 10px;
}
@media (max-width:767px) {
  .info-textbox .content {
    padding: 15px 20px 40px 20px;
  }
}
.info-textbox .content p{
  color: #4e4e4e;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
}
.view-all {
  position:absolute;
  bottom: 10px;
  left: 50%;
  transform: translatex(-50%);
  color: #000;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
}
.bt {
  background-color: #2D2D2D;
  padding: 25px 0;
}

@media (min-width:1200px){
  .col-content{
    padding-right: 20px;
  }
}
.blog-grid {
  overflow: hidden;

}
.all-post {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 30px;
}
@media (max-width:767px) {
  .all-post {
    padding: 15px 15px 0 15px;
  }
}
@media (max-width:575px) {
  .all-post {
    grid-template-columns: auto;

  }
}
.post {
  background: #fff;
  margin-bottom: 26px;
  width: 100%;
  column-gap: 26px;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  align-items: center;
  border-bottom: 1px solid #4B5C81;
  margin-bottom: 25px;
  border-radius: 10px;
  padding-bottom: 20px;
}
.post:last-child {
  margin-bottom: 0;
}
.post img{
  background: #313131;
  width: 100%;
  min-width: 250px;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.pagination{
  padding-top: 22px;
  padding-bottom: 27px;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 11px;
  margin-top: 15px;
}
.date-post {
  margin: 12px 0 12px 24px;
  line-height: 18px;
  padding: 0 4px;
  background: #F48811;
  display: inline-block;
  color: #FFF;
  font-size: 11px;
  font-weight: 500;
}
.excerpt {
  color: #4e4e4e;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 0 24px;
}
.mb-20 {
  margin-bottom: 20px;
}
.title-post a{
  color: #FFF;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
}
.title-post a:hover{
  color: #F48811;
}

@media (max-width:767px){
  .ct-right{
    margin-top: 20px;
  }
  .post img{
    width: 100%;
  }
  .post {
    display: block;
  }
}
.pagination a{
  border-radius: 5px;
  border: 1px solid #fff;
  display: block;
  width: 33px;
  height: 33px;
  line-height: 33px;
  border-radius: 5px;
  text-align: center;
  color: #FFF;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
}
.pagination a:hover,.pagination a.active{
  border: 1px solid #F48811;
  background: #F48811;
}
.wrap-sb {
  padding: 1px;
  border-radius: 10px;
  overflow: hidden;
  border-radius: 10px;
  overflow: hidden  ;
  position: sticky;
  top:50px;
}
.sb {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.wrap-sb .tab{
  margin: 0;
  display: flex;
  align-items: center;
}
.wrap-sb .tab button {
  flex-grow: 1;
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 18px;
  text-transform: capitalize;
  padding: 0 10px;
  border-radius: 0 !important;
}


@media (max-width:450px){

}

@media (max-width:1250px) and (min-width:1201px){

}

@media (min-width:1200px){
  .col-sidebar {
    padding-left: 0px;
  }
}
.bt2 {
  margin-left: -3px;
}
.recent-post {
  display: flex;
  align-items: center;
  column-gap: 13px;
  margin-bottom: 21px;
}

.recent-post:last-child {
  margin-bottom: 8px;
}
.recent-post .rc-title a{
  color: #4e4e4e;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}
.recent-post .rc-title a:hover{
  color: #F48811;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}
.rc-title {
  margin-bottom: 5px;
}
.recent-post .rc-date{
  color: #4e4e4e;
  font-size: 11px;
  font-weight: 500;
  line-height: normal;
}
.page-2 {
  margin-top: 25px;
}
.content-single {
  margin-bottom:30px;
}
.content-single p{
  color: #4e4e4e;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
}
.single-post {
  background-color: #fff;
  padding: 18px 28px;
  border-radius: 10px;
  overflow: hidden;
}
@media (max-width:767px) {

  .single-post {
    padding: 18px 15px;
  }
}
.breacrumb {
  padding: 12px 0 23px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}
@media (max-width:480px) {
  .breacrumb {
    padding: 20px 0;
    padding-left: 0;
  }
}
.breacrumb a{
  font-weight: 700;
  color: #fff;
  font-size: 14px;
}
.breacrumb a:hover{
  text-decoration: underline;
}
.title-single {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}
.meta-post {
  margin: 15px 0;
  color: #4e4e4e;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
}
.meta-post a{
  font-size: 14px;
  color: #F48811;
  font-weight: 700;
}
.post-related {
  background-color: transparent;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 13px;
  padding-top: 27px;
  padding-bottom: 13px;
}
@media (max-width:575px) {
  .post-related {
    padding: 0 ;
    padding-top: 27px;
    padding-bottom: 13px;
  }
}
.post-r {
  max-width: calc(100% / 3);
  width: 100% ;
  padding: 0 15px;
  position: relative;
  margin-bottom: 30px;
}
.post-r img{
  width: 100% ;
  border-radius: 10px;
}
.post-r h4{
  position: absolute;
  left: 0;
  bottom: 12px;
  margin: 0 !important;
  padding: 0 24px;
}
.post-r h4 a{
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  line-height: normal;
}
.post-r h4 a:hover{
  color: #F48811;
}
.related {
  margin-top: 25px;
}
.related-content {
  padding: 1px;
  border-radius: 5px;
  overflow: hidden;
}
.post-r h4{
  margin-top: 10px;
  margin-bottom: 20px;
}
.title-related {
  padding: 17px 15px;
  background: transparent;
  line-height: 26px;
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.wrap-related {
  margin-top: 25px;
  padding-bottom: 25px;
  background: #537B51;
}
.entry-body {
  padding: 28px;
}
/*----------------------footer----------------------*/
footer {
  padding-top: 30px;
  background: #3D674A;
}
.copy-right,.copy-right a {
  color: #FFF;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}
.copy-right a:hover {
  text-decoration: underline;
}
.copy-right {
  padding: 13px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wrap-ft-top {
  display: flex;
  justify-content: space-between;
}
.ft-top-right {
  text-align: right;
}
.link-view-ft {
  color: #FFF;
  font-size: 14px;
  font-weight: 700;
}
.link-view-ft:hover {
  text-decoration: underline;
}
.content p {
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}
#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 80px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
.social {
  margin-top: 10px;
  display: flex;
  align-items: center;
  column-gap: 17px;
}
.desc-ft {
  margin-top: 3px;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  max-width: 808px;
}
.wrap-ft-mid {
  margin-top: 27px;
  width: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  display: inline-flex;
  align-items: center;
}
.logo-footer {
  display: block;
  margin-bottom: 15px;
}

.info-box img {
  max-width: 81px;
}
.bl p:last-child {
  margin-bottom: 0px;
}
.bl p {
  margin-bottom: 4px;
}
.bl p,.bl a{
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}
.bl a:hover {
  text-decoration: underline;
}
.info-box {
  display: flex;
  align-items: center;
  column-gap: 16px;
  flex-grow: 1;
  padding: 19px;
}
.policy {
  padding: 21px 0px 19px 26px ;
}

@media (max-width:991px) {
  .wrap-ft-top {
    display: block;
    text-align: left;
  }
  .wrap-ft-top .ft-top-right{
    text-align: left;
  }
  .wrap-ft-mid {
    display: block;
  }
  .policy {
    display: flex;
    column-gap: 10px;
    padding: 0 !important;
    width: 100%;
    margin: 10px 0;
  }
  .policy a{
    text-align: left !important;
    flex-wrap: wrap;
    padding: 3px;
  }
  .info-box {
    width: 100%;
    border-right: none !important;
    padding-left: 0;
    padding-right: 0;
  }
  .contact {
    width: 50%;
  }
}
@media (max-width:575px) {
  .logo-footer img,.logo img{
    max-width: 220px;
  }
  .info-box {
    display: block !important;
  }
}

@media (max-width:575px){
  .policy {
    flex-wrap: wrap;
  }
}

.contact{
  display: flex;
  column-gap: 10px;
}

.contact a {
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 3px;
}

.policy a {
  display: block;
  color: #FFF;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 3px;
}
.policy, .policy a{
  text-align: right;
}

.policy a:hover,.contact a:hover{
  text-decoration: underline;
}
@media(max-width:767px) {
  #scrollToTopBtn {
    right: 15px;
    bottom: 80px;
    padding: 0;
    max-width: 30px;
  }

}

@media(min-width:1201px) {
  .open-menu {
    display: none !important;
  }
}
.open-menu {
  margin-top:-4px;
  margin-left: 20px;
  display: block;
  border-radius: 5px;
  min-width: 50px;
  width: 50px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #ebebeb;
}

.open-menu img{
  width: 35px;
}
@media (max-width:380px) {
  .open-menu img{
    width:25px;
  }
}
.page-3 {
  .button-top {
    margin-top: 20px;
  }
}
/*------------------------reponsive-----------------*/
@media (max-width:767px) {
  .wrap-button-header .btn-2 {
    margin-left: -27px;
  }
  .copy-right {
    display: block;
  }
  .contact {
    justify-content: center;
    margin-top: 10px;
    width: 100% !important;
    flex-wrap: wrap;
  }
}
@media (max-width:380px) {
  .wrap-logo .logo img{
   max-width: 220px;
 }
}
@media (max-width:767px) {
  .wrap-logo {
    display: block;
    text-align: left;
  }
  .wrap-logo .logo img{
   margin-top: 6px;
 }
 .wrap-button-header {
  margin-top: 30px;
  margin-bottom: 30px;
  justify-content: center;
}
.nav2 {
  margin: 0 10px !important;
  padding: 0 10px !important;
}
.post-r {
  max-width: 50%;
}
.post {
  max-width: 100%;
}
}
@media (max-width:575px) {
  .caster {
    /*margin-bottom: 30px;
    margin-top: 10px;*/
  }
  .view-live{
    font-size: 12px;
    line-height: 35px;
    padding: 0 10px;
  }
  .info-match {
    padding: 20px 10px;
  }
  .post-r {
    max-width: 100%;
  }
  .box-live-now  {
   display: block;
 } 
 .box-live-now .box  {
   max-width: 100%;
   width: auto;
   margin: 0;
   margin: 15px;
   margin-bottom: 20px;
 }
 .title-bl {
  margin-bottom: 15px !important;
 }
}
@media (max-width:1200px) {
  .menu-desktop {
    display: none !important;
  }
  .wrap-sb {
    margin-top: 40px;
  }
}
@media (max-width:767px) {
 .wrap-box-match {
  max-width: 100%;
}
}
@media(max-width:1200px) {
  .view-live {
    font-size: 16px;
    padding: 0 10px;
  }
}
@media(max-width:480px) {
  .caster a{
    font-size: 13px;
  }
  .caster {
    padding-left: 15px;
  }
  .view-live {
    font-size: 12px;
    padding: 0 5px;
  }
  .name-team {
    font-size: 12px;
  }
  .hour {
    font-size: 28px;
  }
  .date {
    padding: 0 7px;
  }
  .team img {
    max-width: 60px;
  }
  .info-match {
    padding: 18px 10px;
  }
  .button-top a {
    font-size: 12px !important;
  }
}
@media (max-width:1200px) and (min-width:768px) {
  .view-live {
    font-size: 14px;
    padding: 0 5px;
    .hour {
      font-size: 30px;
    }
  }
}
/*-----------------------mobile----------------------*/
.overlay {
  position:absolute;
  width: 100%;
  height: 100%;
  background-color: #4e4e4e;
  opacity:0;
  visibility: hidden;
  top:0;
  left: 0;
  z-index: 99;
  transition: 200ms;
}
.overlay.open {
  opacity: 0.3;
  visibility: visible;
}
.menu-mobile {
  position: absolute;
  height: 100vh;
  width: 300px;
  background-color: #23A44B;
  top: 0;
  left: -300px;
  z-index: 100;
  transition: 300ms;
}
.menu-mobile.open {
  left: 0;
}
.menu-mobile {
  padding: 30px 20px;
}
.menu-mobile img {
  margin-top: 20px;
  max-height: 35px;
}

.menu-mobile ul {
  margin-top: 20px;
  padding: 0;
}
.menu-mobile ul li {
  list-style: none;
  border-bottom: 1px solid #eaeaea;
}
.menu-mobile ul li a {
  margin:15px 0;
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: 200ms;
  line-height: normal;
}
.close {
  top: 0px;
  right: 0px;
  cursor: pointer;
  position:absolute;
  width: 30px;
  width: 30px;
  height: 30px;
  font-size: 30px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  transition: 200ms;
}
.tabcontent {
  display: none;
}
.wrap-sb .tabcontent {
  padding: 5px 15px;
}
.content-img-post {
  position: relative;
}
.content-img-post .title-post {
  position: absolute;
  left: 0;
  bottom: 12px;
  padding: 0 24px;
}



/*APPEND*/
.info-match .team img{
    max-height: 50px;
}
.info-textbox .content,
.content-single{
    font-size: 16px;
}

.info-textbox .content img,
.content-single img{
    max-width: 100%; height: auto;
}
.info-textbox .content *,
.content-single *{
    margin-bottom: 20px;
}
.info-textbox .content ul li,
.content-single ul li{
    margin-bottom: 10px;
}

@media only screen and (max-width:768px){
    
  .hidemobile{
      display: none !important
  }
  body div.load_live_home{
      margin-top: 0px !important;
  }
}
#fast_tool_content{
    background: #2D2D2D !important;
}
#fast_tool_content .ft_ct_content .ft-title .fb-title-change{
    color:#fff !important;
}
.recent-post img{
    max-width: 80px;
    height: auto;
}