/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
    --white: #fff;
    --black: #000;
    --blue: #320073;
    --transition: all 0.3s ease-in-out;
}

*{ padding: 0; margin: 0; box-sizing: border-box; }
body { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 300; color: var(--black); line-height: 2; background-color: var(--white); }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; transition: var(--transition); }
ul { padding: 0; margin: 0; list-style: none; }
p { margin-bottom: 30px; }

/* global */
.centered { padding-right: calc((100% - 1100px)/ 2); padding-left: calc((100% - 1100px)/ 2); }

/* wrapper */
.wrapper { width: 100%; position: relative; overflow: hidden; }
main { padding: 0!important; }

/* hero */
.hero { margin-bottom: 50px; width: 100%; position: relative; z-index: 2; min-height: 100svh; overflow: hidden; background-color: var(--blue); }

.hero:before { position: absolute; left: 0; bottom: 0; z-index: 3; width: 100%; height: 250px; display: block; content: ''; opacity: 0.75; background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%,#001ef5 60%,#001ef5 100%); }


.hero .top { padding: 20px 20px; position: absolute; left: 0; top: 0; z-index: 9; width: 100%; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.hero .logo { display: block; width: 168px; height: 30px; }
.hero .logo svg { width: 168px; height: 30px; }
.hero .back { color: var(--white); font-size: 14px; display: inline-flex; align-items: center; font-weight: 600; text-decoration: none; text-transform: uppercase; }
.hero .back:before { margin-right: 5px; content: ''; width: 0; height: 0; border-width: 5px 6px 5px 0; border-color: transparent #D52424 transparent transparent; border-style: solid; }
.hero .back:hover { color: #D52424; }
.hero .text { padding-top: 80px; position: relative; z-index: 4; width: 100%; }
.hero .text h1 { margin-bottom: 20px; text-align: center; text-transform: uppercase; color: var(--white); font-size: 60px; font-weight: 700; line-height: 1; width: 100%; }
.hero .india-captain, .hero .nz-captain{position: absolute;  bottom: 0; z-index: 2; width: 20%; transition-delay: 1s;}
.hero .india-captain img, .hero .nz-captain img { width: 100%; }
.hero .india-captain {left: 70px;}
.hero .nz-captain { right: 70px;}




.hero .indiaFlag { position: absolute; left: 160px; bottom: 30%; opacity: 0.2; z-index: 1; width: 22%; }
.hero .ausFlag { position: absolute; right: 160px; bottom: 30%; opacity: 0.2; z-index: 1; width: 22%; }
.hero .teams { position: absolute; left: 150px; bottom: 110px; font-size: 30px; z-index: 5; color: var(--white); text-transform: uppercase; line-height: 1; text-shadow: 0px 11px 40px rgba(0, 0, 0, 0.5); transition-delay: 1s; }
.hero .teams strong { display: block; font-size: 50px; }
.hero .teams.aus { text-align: right; left: auto; right: 150px; }
.hero .trophy { position: absolute; left: 50%; bottom: -15px; display: flex; justify-content: center; transform: translateX(-50%); width: 26%; z-index: 5; }
.hero .trophyImg { position: relative; }
.hero .shineStar { position: absolute; width: 0; height: 0; left: 55%; top: 0px; opacity: 0; animation: shine 1s linear infinite; }
.hero .shineStar div { position: absolute; width: 5px; height: 5px; box-shadow: 0 0 14px 7px rgba(195,234,230,1); border-radius: 50%; background: #C3EAE6; }
.hero .shineStar div::before { content: ''; display: block; position: absolute; margin: 0 0 0 -22px; width: 50px; height: 2px; background: #C3EAE6; border-radius: 50%; box-shadow: 0 0 3px 1px rgba(195,234,230,1); }
.hero .shineStar div::after { content: ''; display: block; position: absolute; margin: 0 0 0 -30px; width: 65px; height: 2px; background: #C3EAE6; border-radius: 50%; box-shadow: 0 0 4px 0px rgba(195,234,230,1); transform: rotate(80deg); }
.hero .shineStar div span { display: block; position: absolute; margin: 0 0 0 -17px; width: 39px; height: 2px; background: #C3EAE6; border-radius: 50%; box-shadow: 0 0 19px 1px rgba(195,234,230,1); transform: rotate(-56deg); }
.hero .peopleLeft,
.hero .peopleRight { position: absolute; bottom: 0; width: 40%; }
.hero .peopleLeft { left: 0; }
.hero .peopleRight { right: 0; }
.hero .peopleLeft img,
.hero .peopleRight img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0.7; mix-blend-mode: lighten; }
.hero .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* .hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0.3; mix-blend-mode: lighten; } */
.hero .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center;}
.hero .assetLeft,
.hero .assetRight { position: absolute; top: 50%; transform: translateY(-50%); width: 100px; }
.hero .assetLeft { left: -30px; }
.hero .assetRight { right: -30px; }
.hero .shape { position: absolute; left: 0; bottom: 0; width: 100%; height: 100px; z-index: 4; }
.hero .shape img { width: 100%; height: 100%; }
.hero .timeCount { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; transition-delay: 0.8s; }
.hero .timer { padding: 15px 10px 10px 10px; display: flex; flex-wrap: wrap; border-radius: 10px; border: 1px solid rgba(255,255,255,0.3); background-color: rgba(0, 0, 0, 0.3); }
.hero .box { margin: 0 5px; position: relative; }
.hero .time { margin-bottom: 5px; border-radius: 5px; overflow: hidden; background-color: #001ef5; color: var(--white); height: 60px; width: 80px; font-size: 30px; font-weight: 700; display: flex; align-items: center; justify-content: center;}
.hero .time:before { position: absolute; left: 0; top: 0; width: 100%; height: 30px; content: ''; background-color: rgba(255,255,255,0.2); }
.hero .timeText { color: var(--white); text-align: center; width: 100%; font-size: 13px; font-weight: 300; text-transform: uppercase; }
.hero .scroll { padding: 10px; position: absolute; left: 50%; bottom: 0px; z-index: 5; text-decoration: none; transform: translateX(-50%); color: var(--white); font-size: 13px; font-weight: 300; border-radius: 10px; background-color:#001ef580; }
.hero .scroll .icon { margin: 10px auto 0 auto; width: 15px; animation: bounce 1600ms infinite cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.hero .scroll .icon svg { width: 15px; height: 18px; fill: #fff; }
.hero .date { padding-bottom: 10px; text-transform: uppercase; width: 100%; text-align: center; font-size: 17px; font-weight: 700; color: #fff; }
.hero .date sup { text-transform: none; }

.championsLiveBlog .mb30{ box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); padding: 20px;}
.championsLiveBlog .mb30 .select{display: none;}

/* news side */
.newsSide { margin-bottom: 50px; width: 100%; }
.newsSide .block { margin: 0 -15px; display: flex; flex-wrap: wrap; }
.newsSide .item { padding: 0 15px; margin-bottom: 30px; width: 25%; }
.newsSide .news { width: 100%; height: 100%; box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.1); background-color: var(--white); }
.newsSide figure { width: 100%; height: 138px; overflow: hidden; }
.newsSide figure img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.newsSide .text { padding: 15px; text-transform: uppercase; }
.newsSide .text p { margin-bottom: 20px; font-weight: 600; height: 88px; overflow: hidden; }

/* footer */
.footerSide { padding-top: 10px; padding-bottom: 10px; width: 100%; text-align: center; font-size: 14px; color: var(--white); background-color: #001ef5; }

/* animation */
@keyframes bounce {
  50% { transform: translate(0, -10px); }
}

@keyframes shine {
  0% {
    opacity: 1;
    transform: scale(0,0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1,1);
  }
}

@media screen and (max-width: 1140px)  {
  .centered { padding-left: 20px; padding-right: 20px; }
  .hero .teams { left: 120px; font-size: 25px; }
  .hero .teams.aus { right: 120px; }
  .hero .india-captain,
  .hero .nz-captain { bottom: 30px; }

  .footerSide { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 991px)  {
  .hero .text h1 { font-size: 50px; }
  .hero .teams { left: 100px; font-size: 20px; }
  .hero .teams strong { font-size: 40px; }
  .hero .teams.aus { right: 100px; }
  .hero .india-captain,
  .hero .nz-captain { bottom: 30px; }
  .hero .india-captain { left: 50px; }
  .hero .nz-captain { right: 50px; }
  .hero .assetLeft,
  .hero .assetRight { width: 60px;}
  .hero .assetLeft { left: -15px; }
  .hero .assetRight { right: -15px; }
  .hero .indiaFlag { left: 100px; }
  .hero .ausFlag { right: 100px; }

  .newsSide .item { width: 33.33%; }

}

@media screen and (max-width: 767px)  {
  .hero:before { height: 160px; }
  .hero .top { padding-top: 15px; padding-bottom: 15px; }
  .hero .logo { width: 120px; height: 20px; }
  .hero .logo svg { width: 120px; height: 20px; }
  .hero .back { font-size: 12px; }
  .hero .text { padding-top: 70px; }
  .hero .text h1 { margin-bottom: 15px; font-size: 26px; }
  .hero .time { width: 60px; height: 44px; font-size: 24px; }
  .hero .time:before { height: 22px; }
  .hero .timeText { font-size: 12px; }
  .hero .assetLeft,
  .hero .assetRight { display: none; }
  .hero .shape { height: 90px; }
  .hero .trophy { bottom: 25px; width: 230px; }
  .hero .india-captain, .hero .nz-captain{bottom: 100px; width: 110px;} 
  .hero .india-captain { left: -20px;}
  .hero .nz-captain { right: -20px;}
  .hero .teams { left: 20px; bottom: 115px; font-size: 16px; }
  .hero .teams strong { font-size: 20px; }
  .hero .teams.aus { right: 20px; }
  .hero .indiaFlag { width: 140px; bottom: 235px; left: 0; }
  .hero .ausFlag { width: 140px; bottom: 235px; right: 0; }
  .hero .peopleLeft, .hero .peopleRight { bottom: 90px; width: 50%; }
  .hero .scroll { bottom: 5px; }

  .newsSide .block { margin: 0 -10px; }
  .newsSide .item { padding: 0 10px; margin-bottom: 25px; width: 50%; }
}
#scoreDiv{display:none;}