@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: "Inter";   
  src:url("../fonts/Inter/Inter-VariableFont_slnt\,wght.ttf");
  
}
@font-face {
  font-family: "BebasNeue";   
src:url("../fonts/Bebas_Neue/BebasNeue-Regular.ttf")
}
.maintainenceMessage{
  position: absolute; top: 0px;right: 0px;left: 0px;height: 40px;background-color: red;
}
.maintainenceMessage p {
  color: whitesmoke; margin-top: 5px;
}
body
{
  margin:0 auto;
  overflow-x: hidden;
}

.banner {
  width: 100%;
   background: url('../img/home/banner/images.jpg') no-repeat 50%; 
  height:650px;
  background-position:center;
  position: relative;
}
.banner .banner-container
{
 padding: 40px 80px;
}
.banner h1
{ 
  font-family: Inter;
  font-size: 66px;
  font-weight: bold;
  color: #ffffff;
}
.link-input
{
  width:45%
}
.mt-40
{
  margin-top:40px
}
.mt-10
{
  margin-top:10px
}
.width-50
{
  width:50%;
}
.playnowbtn
{
  width: 160px;
  border-radius: 26px;
  padding:10px ;
  background-color: #ffffff;
  background: #ffffff;
  font-family: Inter;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.56;
  color: #158342;
}
.m-0-20
{
  margin:0 20px
}
.sub-header
{
 top:-50px;
  z-index: 9;
  position: absolute;
  margin: 0 5%; 
  border-radius: 10px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  padding:20px 10px
}
.sub-header img{
  width: 60px;
  height: 60px;}
.sub-header h3
{
  font-family: Inter;
  font-size: 16px;
  font-weight: 500; 
  color: #000000;
  padding: 5px 20px;
text-align: left;
}
.sports
{
  margin:30px auto;
  padding-top: 70px;
}
.border-l-r
{
  border-left:1px solid rgba(255, 255, 255, 0.5);
  border-right:1px solid rgba(255, 255, 255, 0.5);
}
.border-b
{
border-bottom: 1px solid  rgba(255, 255, 255, 0.5);
}

.sports .items
{
  cursor: pointer;
}
.sports .items.active
{
  border-bottom: 2px solid #fff;

}
.sports h3
{
  opacity: 0.7;
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;  
  color: #ffffff;

}
.match-list-container
{
  height: 350px;
overflow-y: scroll;
}
.free-contest
{
  position: absolute;
  top: 0px;
left: -5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: auto;

}

.match
{
  position: relative;
}

.match-list
{
  margin: -50px 0;
 
  background: url('../img/home/sub_header/image.jpg') no-repeat top;
  -ms-background-size: cover;
  background-size: cover;
  position: relative;
  min-height: 800px;
}
.match-list .match
{
  margin: 5px 200px;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.6);
  padding: 0px 35px 14px 0px;
  height: 120px;
}
.match .info
{
  padding:0px 30px;
  position: relative;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.67; 
  color: #ffffff;
}
.league-container
{
  padding: 15px 30px;

}
.league 
{ 
    font-family: Inter;
    font-size: 12px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #ffffff;
    margin-bottom: 0px;  
    text-transform: uppercase;
}
.play
{
  margin-top: -10px;
  text-align: center;
}

.info h3
{
  font-family: Inter;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  color: #ffffff;
}
h3.vs
{
  font-size: 16px;
  font-weight: 500;
  margin:1rem;
}
.time h3
{
  font-family: Inter;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25; 
  text-align: center;
  color: #ffffff
}
.m-20
{
margin:20px auto
}
.m-30
{
margin:30px auto
}
.morematch
{

  margin:30px auto;
 
  font-family: Inter;
  border-radius: 26px;
  border: solid 1px #008d1c;
  background-color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.33;  
  color: #158342;
  text-transform: uppercase;
}
.how-to-play
{  
  position: relative;
  background-color: #f3f5f7;
margin-top:40px;
margin-bottom: 40px;
}
.how-to-play-backimg
{
  padding: 40px 80px;
  min-height: 140px;
  width: 100%;
  background: url('../img/home/how_to_play/how_to_play.svg') no-repeat 100%;
  -ms-background-size: cover;
  background-size: cover;
}
.how-to-play h3
{
  font-family: Inter;
  font-size: 40px;
  font-weight: 800;
  color: #000000;
  text-align: center;
}
.how-to-play p
{ 
  font-family: Inter;
  font-size: 16px; 
  color: #000000;
 
}
.steps
{
  padding: 40px 0px 0px 0px;
}
.steps h1
{
  opacity: 0.3;
  font-family: Inter;
  font-size: 16px;
  font-weight: bold; 
  color: #000000;
  text-transform: uppercase;
}
.steps h3
{
  text-align: left;
  font-family: Inter;
  font-size: 24px;
  font-weight: bold;
   line-height: 1.33; 
  color: #000000;
}
.steps p
{
  font-family: Inter;
  font-size: 15px; 
  color: #000000;
}
.mt-20
{
  margin-top:20%
}
.how-to-play .logo
{
  display:inline-block
}
.back-img
{
position: relative;
}
.info-img
{
  top: 60px;
  position: absolute;
  left: 60px;
}
.download
{
  padding: 200px 80px;
  width: 100%;
  background: url('../img/home/sub_header/download.jpg') no-repeat 50%;
  -ms-background-size: cover;
  background-size: cover;
}
.mt-8
{
  margin-top: -8%;
}
.download h2
{
  font-family: Inter;
  font-size: 30px;
  font-weight: 800;
  color: #ffffff
}
.download h3
{
  font-family: Inter;
  font-size: 40px;
  font-weight: 800;  
  color: #e9ab00;
}
.download form
{
  margin-top: 20px ;
  margin-bottom: 20px ;
}
.download input
{

  border-radius: 36px;
  background-color: #ffffff;
  border: none;
  width: 350px ;
}
.get-app-link
{
  cursor: pointer;
  width: 159px;
  height: 52px;
  border-radius: 36px;
  background-color: #158342; 
  font-family: Inter;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.88;
  color: #fff;
}
.offers
{
  margin :40px auto
}
.offers h1
{
  font-family: Inter;
  font-size: 40px;
  font-weight: 800;
  color: #000000;
  text-align: center;
}
.offers .offer
{
  height: 240px;
  background-color: #d8d8d8;
}
.testimonals
{
  padding: 40px 80px;
  min-height: 140px;
  width: 100%;
  background: url('../img/home/reviews/background_img.svg') no-repeat 50%;
  -ms-background-size: cover;
  background-size: cover;
  text-align: center;
}
.testimonals h1
{
  font-family: Inter;
  font-size: 40px;
  font-weight: 800;
  color: #000000
}
.testimonals .list
{
  margin:30px auto;
  padding: 10px  20px
}
.testimonals .carousel-indicators {
  bottom: -25px !important;
}
.testimonals .carousel-indicators .active,.how-to-play .carousel-indicators .active
{
  background-color: #008d1c !important;
}
p.username
{
  margin: 15px auto;
  opacity: 0.87;
  font-family: Inter;
  font-size: 16px;
  font-weight: 600; 
  text-align: center;
  color: #000000;
}
.prize
{
  background: url('../img/home/reviews/fill-26.svg') no-repeat 50%;
}
.prize p
{
  font-family: Inter;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  color: #000000;
}
.footer
{
  background-color: #3a3e42;
  text-align: center;
}
.footer h1
{
  font-family: BebasNeue;
  font-size: 34px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
}
.footer-top
{
  padding:40px 80px;
}
.footer-bottom
{
  padding: 20px 80px;
  border-top: 2px solid #5e5e5e;
}
.left-img
{
   width:100% ;
   margin-top:165px;
}
.right-img
{
 width: 100%;
  text-align: right;
}
.img-container
{
  display: inline;
}



.user_img {
  content:url("../img/home/users/web.svg");
  width:100%
}
.contest_img {
  content:url("../img/home/dailycontest/web.svg");
  width:100%
}
.multigmae_img {
  content:url("../img/home/multiple_games/web.svg");
  width:100%
}
.multisport_img {
  content:url("../img/home/multiple_sports/web.svg");
  width:100%
}

 
.owl-carousel
{
  position: relative;
}
.owl-carousel .owl-nav
{
  position: absolute;
  bottom:50%;
  left:33%;
}
.owl-carousel .owl-next
{
  margin-left:20px
}
.owl-carousel .owl-nav span ,.owl-carousel .owl-prev span
{
  display: inline-block;
  border: 1px solid green;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  color: green;
  text-align: center;
  line-height: 2;
}
 .footer-top a ,.footer-bottom{

  font-family: Inter;
  font-size: 16px;
  font-weight: 500; 
  line-height: 2; 
  text-align: center;
  color: #ffffff;
  text-decoration: none;
}
.footer-top .border-right
{
  color: #ffffff;
  
  height:25px;
  padding:0px
}

.nomatch
{
  margin: 40px 200px;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.2);
  padding: 50px 20px 50px 20px;
  text-align: center;
}
.nomatch p
{
  font-family: Inter;
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #ffffff;
}
.nomatch h3
{
  font-family: Inter;
  font-size: 44px;
  font-weight: 800;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff;
}
.footer-bottom a
{
  color:#fff
}
.mt-minus-10
{
  margin-top: -10px;
}
.support 
{
  margin-top: 10px ;
}
/* ---------------------------media query begin -------------------------------------------*/
/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 420px) { 
  .maintainenceMessage{
    position: absolute; top: 0px;right: 0px;left: 0px;height: 100px;background-color: red;
  }
  .maintainenceMessage p {
    color: whitesmoke; margin-top: 5px;
  }  
  .banner
  {
    background: url('../img/home/banner/mobile/images@3x.jpg')no-repeat center !important;
    background-size:cover !important;
    height: 450px !important;
  }
  .banner .banner-container
  {
    padding: 30px 50px 0px 50px !important;
  
  }
  .link-input-web
  {
    display: none;
  }
  .logo img
  {
    height: 40px;
  }
  .banner .banner-container
  {
    padding: 30px 20px !important;
  }
  .banner h1 {   
    font-size: 30px !important;  
    text-align: center; 
   
    }  
    .get-app-link
    {
      width: 100px !important;
      height: 40px !important;
      font-size: 12px  !important;
    }
    .img-container-web
    {
      display: none !important;
    }
    .img-container-mobile
    {
      background-color: #f3f5f7;
      padding:20px 0px;
      min-height: 180px;
    }
    .img-container-mobile img
    {
      width:100%;
    }

    .sub-info-web
    {
      display: none !important;
    }
    .link-input
    {
      width: 100% !important;
    }
    .match-list
    {
      background: url('../img/home/sub_header/mobile/group-7@3x.jpg') no-repeat 50%;
    }
    .banner img
    {
      min-width: 100%;
    }
    .info h3 {     
      font-size: 12px !important;
    }
    .playnowbtn {
      width: 80px !important;      
      padding: 5px !important;      
      font-size: 10px !important;      
    }
    .match-list {
      padding: 40px 20px !important;
    }
    
    
    .how-to-play h3
    {
      font-size: 24px !important;
    }
    .download {
      padding: 60px 15px;
    }
    .download h2,.download h3
    {
      font-size: 20px;
    }
  
  .league-container {
      padding: 10px 0px 10px 30px !important;
  }
  .time h3
  {
    font-size: 10px !important;
  }
  .match .info {
    padding: 0px 20px;
  }
  h3.vs
  {
    margin:0 0.2rem !important
  }

.testimonals {
    padding: 20px 40px;
}
.sub-info-mobile{ 
  top:-50px
}
.sub-info-mobile .sub-header
{
  width: 90%;
  margin: 0 auto !important;
}
.sports
{
  padding-top: 0px;
}
.download
{
  background: url("../img/home/sub_header/mobile/play-dude-0585.jpg") no-repeat center;
  min-height: 280px;
  padding: 20px 15px;
  text-align: center;
}

.download .web-form
{
  display: none;
}
.download img
{
  height: 40px;
}
.sub-header
{
top:-40px !important
}
.owl-carousel .owl-nav
{
  left:33% !important
}
.testimonals h1
{
  font-size: 24px !important;
}
.league
{
  font-size:10px
}
.footer-bottom {
  padding: 20px 40px !important;
  font-size: 10px !important;
}
.footer-top a
{
  font-size: 10px !important;
line-height: 1;
}
.fp
{
margin-left: -15px;
margin-bottom: 5px;
}
.nomatch{
  margin: 20px 10px !important;
  padding: 20px 10px 20px 10px !important;
  font-size: 20px !important;
}.width-50
{
  width: 100% !important;
}
}  
/* after 400 px */
@media only screen and (min-width: 420px) {
  
  .img-container-mobile
  {
    display: none;
  }
  
  .download .web-form
  {
    display: block;
  }
  .sub-info-web{
    display: block;
  }
  .sub-info-mobile{
    display: none;    
  }
}


/*  Small devices (landscape phones, 576px and below) */
@media only screen and (max-width: 576px) { 
  .maintainenceMessage{
    position: absolute; top: 0px;right: 0px;left: 0px;height: 100px;background-color: red;
  }
  .maintainenceMessage p {
    color: whitesmoke; margin-top: 5px;
  }  
  .banner h1 {   
    font-size: 40px;   
    }
  .width-50
  {
    width: 80%;
  }
  .img-container
    {
      display: block;
     
    }
    .img-container img{
      margin:5px auto !important;      
    }
    .sports h3
    {
      font-size: 12px;
    }
    .sub-info-mobile .sub-header
    {
      padding: 20px 20px;
    } 
    .how-to-play .carousel-control-next {
      left: 145px !important;
      top: 780px;
  }

.sub-header
{
top:-85px
}

.playnowbtn-container
{
  margin-top: -10%;
margin-left: 33%;
}
.league-container {
  padding: 10px 30px;
}

.time
{
  padding: 0px 30px;
}
.time h3
{
  text-align: left; 
}
.owl-carousel .owl-nav {
  bottom: 0%;
 
}
.nomatch{
  margin: 20px 0px;
}
.support 
{
  margin-top: 0px !important;
}
 }
 @media only screen and (max-width: 764px)
 {
  .owl-carousel
  {
    margin-left: 0px !important;
  }
 }

/* Medium devices (tablets, 768px and below) */
@media only screen and (max-width: 768px) { 
  .maintainenceMessage{
    position: absolute; top: 0px;right: 0px;left: 0px;height: 100px;background-color: red;
  }
  .maintainenceMessage p {
    color: whitesmoke; margin-top: 5px;
  }  
  .banner {  
    background: url('../img/home/banner/tab/images.jpg') no-repeat top;
    height:400px;    
  }
  .banner h1
  {
    font-size: 30px !important;
  }
  .banner .banner-container {
    padding: 20px 20px 20px 20px;
}
.sub-header
{
  top:-75px
}
  .link-input
    {
      width: 60%;
    }
    .get-app-link {
      width: 120px;
    }
    
    .sub-header h3
    {
      font-size: 12px;
    }      
    .info h3 {
      font-size: 16px;
    }
    .match .info {
      padding: 0px 30px;
    }
    h3.vs {     
      margin: 0.2rem;
  }
  .time h3
  {
    font-size: 14px;
  }
  .playnowbtn {
    width: 110px;
    padding: 10px;  
    font-size: 14px;
  }
  .match-list {
    padding: 40px 30px;
  }
  .offers .offer
  {
    height: 100px;
  }  
  .left-img-container-web
    {
      display: none;
    }
    .steps-container
    {
      text-align: center;
     
    }
    .steps {
      padding: 40px 15px 10px 15px;
    }
    .steps-container .steps h1 , .steps h3,.steps p
    {
      text-align: center;
    }
   

.sub-info-mobile  .sub-header
{ 
  margin: 0 20%;
  padding: 20px 40px;
}
.user_img {
  content:url("../img/home/users/mobile.svg");
  margin:10px auto;
}
.contest_img {
  content:url("../img/home/dailycontest/mobile.svg");
  margin:10px auto;
}
.multigmae_img {
  content:url("../img/home/multiple_games/mobile.svg");
  margin:10px auto;
}
.multisport_img {
  content:url("../img/home/multiple_sports/mobile.svg");
  margin:10px auto;
}
.mt-8
{
  margin-top:0px
}
.owl-carousel .owl-nav
{
   bottom: 1% !important;
  left:42% 
}
.owl-carousel
{
  margin-left: 33%;
}
.testimonals h1
{
  font-size: 30px;
}
.how-to-play h3
{
  font-size: 30px;
}
.footer-top
{
  padding:20px 0px
}
.footer-top li
{font-size: 10px;
line-height: 1.5;
}
.footer-bottom {
  padding: 20px 50px ;
  font-size:12px 
}
.nomatch {
  margin: 50px 100px;
  border-radius: 10px;
  background-color: rgba(0,0,0,0.2);
  padding: 20px 20px 20px 20px;
  text-align: center;
 }
}

 /* above 768px */
 @media only screen and (min-width: 768px)
 {
  
 }
/* Large devices (desktops, 992px and below) */
@media only screen and (max-width: 992px) { 
  .banner image
  {
width:100%
  }
 
    
    .info-img {   
      width: 40%;
      top: 20px;
      left: 25%;
  }
 .back-img {
  width: 100%;
}

.match-list .match
{
  margin: 5px 0px;
  height: 100px;
}
.free-contest
{
  height:100px
}
.owl-carousel .owl-nav
{
  bottom: 20%;
}
.sub-header
{
  padding:10px 10px
}

}

@media only screen and (max-width: 1100px) {
  .banner h1
  {
    font-size: 40px;
  }
 }
 @media only screen and (max-width: 1100px) {
  .banner h1
  {
    font-size: 40px;
  }
 }
 @media only screen and (min-width: 1280px) {
  .sub-header
  {
    margin:0;
    width:100%;
  }
  .banner
  {
    background-size: cover;
  }
 }