.container { margin: 0 auto; width: 100%; max-width: 1400px }
.homeBanner { position: relative; margin-top: 0 ; background-color: #000;}
.homeBanner .homeBannerImgWrap img { visibility: hidden; opacity: 0; width: 100% }
.homeBanner .homeBannerImgWrap {  height: 65.7rem; overflow: hidden; background-position: right top; background-size: cover; background-repeat: no-repeat }
.homeBanner .sliderCaptionWrap { position: absolute; left: 0; width: 100%; top: 37%; transform: translateY(-37%); -webkit-transform: translateY(-40%) }
.homeBanner .sliderCaption { max-width: 100% }
.homeBanner .sliderCaption h3 { font-weight: 700; color: #fff; display: block; font-size: 7rem; margin-bottom: 2rem; line-height: 1em }
.homeBanner .sliderCaption p { display: block; font-size: 2.2rem; color: #fff; margin-bottom: 2.5rem; text-shadow: 1px 1px 1px #666 }
.homeBanner .homeSliderArrow { border-color: #fff; z-index: 11; background: #fff; position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; }
.homeBanner .homeSliderArrow:hover, .homeBanner .homeSliderArrow:focus{ background-color: #ff6131; color: #fff; border-color: #ff6131;}

.homeBanner .homeSliderArrow.homeBanner-prev { left: 3rem }
.homeBanner .homeSliderArrow.homeBanner-next { right: 3rem }
.homeBanner .PlayBtnSlider{
	position: absolute;
    bottom: 126px;
    left: 3rem;
    z-index: 11;
		border-color: #fff;
		color: #fff;
		background-color: transparent;
}
.homeBanner .PlayBtnSlider:hover, .homeBanner .PlayBtnSlider:focus{
		border-color: #ff6131;
		color: #fff;
				background-color: #ff6131;
}
.khel-logo { position: relative; z-index: 2; max-width: fit-content }
.swiper-pagination { display: none }
.open-popup { background: #ff6131; border-radius: 10rem; padding: .8rem 1.5rem !important; cursor: pointer; display: inline-block !important; line-height: 2.3rem !important }
.open-popup:hover { background: #2f5991 }
#navMob li:first-child a { padding: 1.3rem !important; background: #fe6131 }
.popup { display: none; position: relative; left: 0; right: 0; top: 60px; bottom: 0; z-index: 10 }
.popup-content { position: absolute; background: #fff; max-width: 500px; width: 100%; border-radius: 1rem; margin: -58px 0 0 -264px; left: 50%; top: 40%; z-index: 11; padding: 14px }
.close-popup { display: inline-block; position: absolute; top: -1.3rem; right: -1.3rem; font-size: 42px; line-height: 3rem; background: #ff6131; width: 40px; height: 40px; left: auto; float: right; padding: .7rem; color: #fff; border-radius: 10rem }
.popup-content h3 { border-bottom: solid 1px #ddd; padding-bottom: 1rem }
.fadeIn { animation: fadeIn .5s ease-in both; -webkit-animation: fadeIn .5s ease-in both }
@keyframes fadeIn {
	from { opacity: 0 }
}
@-webkit-keyframes fadeIn {
	from { opacity: 0 }
}
.marquee { overflow: hidden }
.marqueeScrolling { padding: 2rem 0;  overflow: hidden; }
.marqueeScrolling .marqueeTitle { color: #fff; font-weight: 600; font-size: 1.8rem }
.marqueeScrolling li { float: left; margin-right: 2.5rem; color: #fff; font-size: 1.6rem }
.noJS .btnMPause { display: none }
.noJS .marqueeScrolling { overflow-y: hidden; overflow-x: auto }
.noJS .marquee { width: 240% }
.marqueeScrolling li a { color: #fff }
.marqueeScrolling li a:hover { color: #133b70; text-decoration: underline }
.marqueeContent { display: flex; align-items: center }
.marqueeHead { margin-right: 2rem }
.marqueeDetail { width: 90% }
section { position: relative }
.about-sec { margin-top: -10rem; z-index: 1 }
.about-sec .about-overlay { position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 60%; background-color: #ff6131; height: 30rem }
.about-sec .services-area { background-color: #000; position: relative; z-index: 1; height: 30rem }
.about-sec .services-area:after{content: ""; position: absolute; z-index: -1; left: 0; top: 0; width: 100%; height: 100%; background-color: #ff6131;}
.about-sec .about-area { background-color: #113669; padding-left: 5rem; color: #fff }
.welcome-sec { margin-top: -20rem; z-index: 1; position: relative }
.welcomeWrapper { padding: 5rem 3.5rem }
.welcomeText { background: #fff; padding: 5rem; position: absolute; top: 30%; bottom: 0; right: 0; width: 60% }
.welcomeText h3 { font-size: 4.5rem; color: #133b70 }
.welcomeText p { text-align: justify; font-size: 1.6rem }
.welcomeBg { background: #fff }
.tollFreeBox { display: flex; align-items: center; margin: 2rem 0; font-weight: 600 }
.tollFreeBox .tollFreeTitle { font-size: 1.6rem }
.tollFreeBox .tollFreeIcon { margin-right: 1.5rem; font-size: 4rem }
.tollFreeBox .number { font-size: 2.8rem; font-weight: 100 }
.tollFreeBox .number a { color: #fff }
.tollFreeBox .number a:hover { color: #ff6131 }
.pmBg { background: #eee; display: block; position: absolute; right: 0; height: 100%; width: 30% }
.mgmt:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../images/mgmt.jpg) no-repeat left top; background-size: cover }
.mgmtWrapper { position: relative; padding: 3rem 4rem 1rem 2rem }
.mgmtBox { display: flex; align-items: center; margin-bottom: 2rem }
.mgmtImg { margin-right: 1.5rem; width: 93px; height: 93px; border-radius: 50px; overflow: hidden; display: flex; align-items: center; background: #fff; flex: none }
.mgmtImg img { width: 100% }
.mgmtTitle { font-size: 1.6rem }
.mgmtDisc p { margin-bottom: 0; font-size: 1.6rem }
.mgmtDisc i { background: #034ea2; width: 1.7rem; height: 1.7rem; text-align: center; color: #fff; padding: .4rem; font-size: 1.2rem }
.mgmtDisc i:hover { background: #ff6131 }
.blueBg:before { content: ""; padding: 5rem; position: absolute; top: 0; bottom: 0; right: 0; width: 100%; background: url(../images/whatsnewbg-blue.jpg) left top; background-size: cover }
.whatsnewbg-orange { background: url(../images/whatsnewbg-orange.jpg); display: block }
/* .whatsnewbg-orange:before { content: ""; padding: 5rem; position: absolute; top: 0; bottom: 0; right: 0; width: 100%; background: url(../images/whatsnewbg-orange.jpg) left top; background-size: cover } */
.orangeBg { background: #ff6131; display: block; position: absolute; right: 0; height: 100%; width: 30% }
.blueBg { background: #11376a; display: block; position: absolute; left: 0; height: 70%; width: 70% }
.whatsnewWrapper { background: #fff; padding: 4rem; position: relative; margin-top: 7rem; box-shadow: 0 0 1rem rgba(190, 190, 190, .5); z-index: 1 }
.eventLarge .imgHolder, .eventSmall .imgHolder { overflow: hidden; position: relative }
.eventLarge .imgHolder img, .eventSmall .imgHolder img { width: 100%; transition: all 450ms ease 0s; -webkit-transition: all 450ms ease 0s }
.eventSmall { margin-bottom: 4rem }
.eventLarge:first-child { margin-bottom: 3rem }
.eventLarge .eventDate, .eventSmall .eventDate { color: #ff6c00; font-size: 1.4rem; font-weight: 600; margin-bottom: .6rem }
.eventLarge .eventTitle, .eventSmall .eventTitle { margin-bottom: .6rem; line-height: 1.2; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; height: calc(1rem * 4.5); text-overflow: ellipsis }
.eventLarge .eventTitle a, .eventSmall .eventTitle a { color: #09203b; font-size: 1.5rem; line-height: 2.5rem; font-weight: 600; text-decoration: none }
.eventLarge .eventTitle a:hover, .eventSmall .eventTitle a:hover { color: #ff6131 }
.eventLarge .eventShortDetail, .eventSmall .eventShortDetail { color: #707070; font-size: 1.4rem; margin-bottom: 0; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -webkit-box-orient: vertical; height: calc(1rem * 4.5); text-overflow: ellipsis }
.eventSmall:last-child { margin-bottom: 0 }
.whatNewViewAll a { font-weight: 700; color: #133b70; font-size: 1.6rem }
.whatNewViewAll a:hover { color: #ff6131 }
.upcomingWrap { background: url(../images/upcoming-bg.jpg) no-repeat; background-position: bottom; background-size: cover }
.upcomingWrap .card { box-shadow: 0 0 1.5rem #afafaf6b; border: 0; border-radius: 0; padding: 2rem }
.upcomingWrap .card:hover::before { width: 90%; height: .5rem; display: block; background: #12396b; position: absolute; bottom: 0; content: "" }
.upcomingWrap .card-img-top { border-radius: 0 }
.upcomingWrap .card-title { color: #3b3b3b; font-weight: 600; margin-bottom: .5rem }
.upcomingWrap .card-body { padding: 1rem 0 }
.upcomingWrap .card-body a { text-decoration: none }
.upcomingWrap .card-body a h5 { color: #133b70; font-size: 2.5rem; text-decoration: none; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 5rem }
.upcomingWrap .card-body a:hover h5 { color: #ff7437 }
.upcomingWrap .card-text { font-size: 1.4rem; color: #636363; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; margin-bottom: 1rem }
.upcomingWrap .knowMoreBtn { display: inline-block; background-color: #fff; border: 1px solid #ff7437; color: #3b3b3b; padding: 1.1rem 2.5rem; border-radius: 5rem; text-decoration: none; font-size: 1.6rem; font-weight: 600 }
.upcomingWrap .knowMoreBtn:hover { background: linear-gradient(90deg, #ff8f35, #ff5d31); color: #fff; border: 1px solid #ff7437; color: #fff }
.upcomingSection { padding: 6rem 2rem }
.upcomingSection h2 { text-align: center }
.upcomingSection .date { margin-bottom: 1rem; font-size: 1.4rem; color: #959595 }
.upcomingSlider .card a:first-child { background: #eee; width: 100%; height: 200px; overflow: hidden }
.upcomingSlider { position: relative }
.upcomingSlider .swiper-slide .card .card-body p { display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; -webkit-box-orient: vertical; height: calc(1rem * 4); text-overflow: ellipsis }
.upcomingSlider .swiper-container { margin: 0 5rem }
.upcomingSlider .swiper-slide { padding: 1rem }
.upcomingSlider .sliderArrowWrap { position: absolute; top: 50%; width: 100%; height: 3rem; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 3; cursor: pointer; transition: all 350ms ease 0s; -webkit-transition: all 350ms ease 0s; text-align: center; font-size: 2.5rem; line-height: 3.7rem; color: #fff }
.upcomingSlider .sliderArrowWrap .upcomingSliderNext, .upcomingSlider .sliderArrowWrap .upcomingSliderPrev { width: 31px; height: 31px; float: left; background: url(../images/slidersprite.png) no-repeat 0 0; text-indent: -9999px; overflow: hidden; margin: 0; padding: 0; cursor: pointer }
.upcomingSlider .sliderArrowWrap .upcomingSliderPrev { background-position: 0 0; position: absolute; left: 0 }
.upcomingSlider .sliderArrowWrap .upcomingSliderNext { background-position: -31px 0; position: absolute; right: 0 }
.upcomingSlider .sliderArrowWrap .upcomingSliderPrev:hover { background-position: 0 -31px }
.upcomingSlider .sliderArrowWrap .upcomingSliderNext:hover { background-position: -31px -31px }
.upcomingAll { position: absolute; top: 7.4rem; right: 8rem; font-size: 1.6rem; color: #133b6f; font-weight: 500; display: block; margin-top: 2rem }
.upcomingAll:hover { color: #ff6131 }
.volunteer-sec { z-index: 1; background-color: #000; position: relative; }
section#volunteer-sec:after{content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #ff6131; z-index: -1;}
/* .volunteer-sec .volunteer-overlay { position: absolute; display: block; top: 0; left: 0; bottom: 0; right: 60%; background-color: #ff6131; z-index: 1 } */
.volunteer-sec .playerBox { display: flex; margin: 1.5rem 0 }
.volunteer-sec .playerBox:before { content: ""; width: 70%; height: 1px; background: #ff916f; position: absolute; bottom: 0 }
.volunteer-sec .playerBox:after { content: ""; height: 70%; width: 1px; background: #ff916f; position: absolute; right: 2.5rem }
.volunteer-sec .playerBox:last-child::after, .volunteer-sec .playerBox:nth-child(6)::after, .volunteer-sec .playerBox:nth-child(3)::after, .volunteer-sec .playerBox:nth-child(4)::before, .volunteer-sec .playerBox:nth-child(5)::before, .volunteer-sec .playerBox:nth-child(6)::before { display: none }
.volunteer-sec .player-area {  position: relative; height: auto; padding: 5.6rem 5.6rem 0.5rem 5.6rem; z-index: 1; display: flex; justify-content: space-between; align-items: center }
.volunteer-sec .player-area .playerImg { margin-right: 1.5rem }
.volunteer-sec .player-area .voulunteerDetails h3 { font-size: 3rem; color: #fff; font-weight: 700; margin-bottom: 0 }
.volunteer-sec .player-area .voulunteerDetails p { font-size: 1.6rem; color: #fff; font-weight: 600 }
.volunteer-sec .volunteer-area .volunteer-content { padding: 2.7rem }
.volunteer-sec .volunteer-area .volunteer-content h6 { font-size: 1.6rem }
.volunteer-sec .volunteer-area .volunteer-content .btn { font-weight: 600 }
.volunteer-content h3 { font-size: 3rem; color: #133b70 }
.quickLinks { background: url(../images/become-volunteer-bg.jpg) no-repeat right; background-size: contain; position: absolute; width: 100%; height: 100%; right: 0 }
.quickLinksListing { font-size: 1.6rem }
.quickLinksListing ul li { list-style: none; margin-bottom: 1rem; margin-left: 2rem; position: relative }
.quickLinksListing ul li a { text-decoration: none; color: #133b70 }
.quickLinksListing ul li a:hover { color: #ff6131; margin-left: .5rem; transition: all 350ms ease 0s; -webkit-transition: all 350ms ease 0s }
.quickLinksListing ul li:before { content: ""; width: 7px; height: 7px; position: absolute; display: block; background: #ff6131; border-radius: 2rem; left: -2rem; top: .8rem }
.homeMedia { padding: 4rem 2rem }
.homeMediaBlock { background-color: #fff }
.homeGalleryItem { overflow: hidden; position: relative; text-decoration: none; display: block; max-height: 215px }
.homeGalleryItem:hover { box-shadow: 0 .5rem 2.9rem rgba(0, 0, 0, .21) }
.homeGalleryItemWrap { position: relative }
.homeGalleryItemWrap:before { position: absolute; height: .3rem; width: 0; left: 50%; background-color: #ff6131; content: ""; bottom: 0; z-index: 1 }
.homeGalleryItemWrap:hover:before { width: 86%; left: 7% }
.homeGalleryItem .imgHolder { position: relative; overflow: hidden }
.homeGalleryItem:hover .imgHolder:before { visibility: visible; opacity: 1 }
.homeGalleryItem .imgHolder img { width: 100%; transition: all 450ms ease 0s; -webkit-transition: all 450ms ease 0s }
.homeGalleryItem:hover .imgHolder img { transform: scale(1.1); -webkit-transform: scale(1.1) }
.homeGalleryItem .fa { width: 5rem; height: 5rem; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 50%; color: #133b70; font-size: 2rem; text-align: center; line-height: 5rem; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0) }
.homeGalleryItem:hover .fa { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1) }
.homeGalleryItem .galleryTitle { position: absolute; left: 0; bottom: -100px; width: 100%; padding: 15px; font-size: 16px; font-weight: 600; color: #fff; z-index: 1; margin-bottom: 0; line-height: 1.2; background: linear-gradient(0deg, #000, transparent) }
.homeGalleryItem:hover .galleryTitle { bottom: 0 }
.homeMediaBlock .tabContainer .button .fa { font-size: 2rem; margin-left: .5rem }
.photoTitle { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 1rem }
.photoTitle h2 { margin-bottom: 0 }
.photoTitle .viewAll { font-size: 1.6rem; color: #133b70; font-weight: 600 }
.photoTitle .viewAll:hover { color: #ff6131 }
.gallerySectionWrap ul { margin-bottom: 0 }
.gallerySectionWrap ul li { list-style: none }
.gallerySectionWrap ul li:first-child { margin-bottom: 3rem }
.homeMediaGallery { margin-bottom: 2rem }
.photoSlider { margin-bottom: 5rem }
.photoSlider .sliderArrowWrap { width: 65px; margin: 0 auto; position: absolute; right: 1.5rem; height: 3rem; top: .8rem; left: auto }
.photoSlider .sliderArrowWrap .photoNext, .photoSlider .sliderArrowWrap .photoPrev { width: 30px; height: 30px; float: left; background: url(../images/slidersprite.png) no-repeat 0 0; text-indent: -9999px; overflow: hidden; margin: 0; padding: 0; cursor: pointer }
.photoSlider .sliderArrowWrap .photoPrev { background-position: 0 0; float: left }
.photoSlider .sliderArrowWrap .photoNext { background-position: -31px 0; float: right }
.photoSlider .sliderArrowWrap .photoPrev:hover { background-position: 0 -31px }
.photoSlider .sliderArrowWrap .photoNext:hover { background-position: -31px -31px }
.photoTitle .viewAll { font-size: 1.6rem; color: #133b70; font-weight: 600; margin-right: 8rem }
.photoTitle .viewAll:hover { color: #ff6131 }
.videoSlider .sliderArrowWrap { width: 65px; margin: 0 auto; position: absolute; right: 1.5rem; height: 3rem; top: .8rem; left: auto }
.videoSlider .sliderArrowWrap .videoNext, .videoSlider .sliderArrowWrap .videoPrev { width: 30px; height: 30px; float: left; background: url(../images/slidersprite.png) no-repeat 0 0; text-indent: -9999px; overflow: hidden; margin: 0; padding: 0; cursor: pointer }
.videoSlider .sliderArrowWrap .videoPrev { background-position: 0 0; float: left }
.videoSlider .sliderArrowWrap .videoNext { background-position: -31px 0; float: right }
.videoSlider .sliderArrowWrap .videoPrev:hover { background-position: 0 -31px }
.videoSlider .sliderArrowWrap .videoNext:hover { background-position: -31px -31px }
.videoSlider .videoItem { position: relative; height: 180px }
.videoSlider .videoItem img { width: 100% }
.videoSlider .swiper-slide { position: relative }
.videoSlider .swiper-slide a .fa { width: 5rem; height: 5rem; border-radius: 50%; background-color: #fff; position: absolute; left: 50%; top: 50%; color: #133b70; font-size: 2rem; text-align: center; line-height: 5rem; transform: translate(-50%, -50%) scale(0); -webkit-transform: translate(-50%, -50%) scale(0) }
.videoSlider .swiper-slide a:hover .fa { transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1) }
.latestUpdates .swiper-container { border-radius: 1rem; overflow: hidden }
.videoTitle { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem }
.videoTitle h2 { margin-bottom: 0 }
.videoTitle .viewAll { font-size: 1.6rem; color: #133b70; font-weight: 600; margin-right: 8rem }
.videoTitle .viewAll:hover { color: #ff6131 }
.about-sec { overflow: hidden; }




.volunteer-bg { background: #113669;padding: 40px 0; }
.dis-wrap { width: 100%; }
ul.dis-list li { color: #fff; float: left; margin: 0; padding: 5px 10px; list-style: none; }
ul.dis-list { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 0; overflow: hidden; margin: 0; }
.dis-wrap h3{ color: #fff; font-size: 4rem; }