body,html{ height: 100% }
body{
margin: 0;
padding: 0;
font-family: "Baloo 2", sans-serif;
font-size: 15px;
background: #fff;
color: black
}
*,p,h1,h2,h3,h4,h5,h6,ul{ margin: 0 }
h1,h2,h3,h4,h5,h6{
font-weight: bold;
}
ul{
padding: 0;
list-style-type: none;
}
a{
color: inherit;
text-decoration: none;
}
a:hover{
text-decoration: none;
}
.fw1{ font-weight: lighter; }
.fw2{ font-weight: normal; }
.fw3{ font-weight: bold; }
.inline{ display: inline-block; }
.flex{display: flex;}
.jc{ justify-content: center; }
.jcb{ justify-content: space-between; }
.ai{ align-items: center; }
.inflex{ display: inline-flex; }
.jce{ justify-content: flex-end }
.rel{ position: relative; }
.abs{ position: absolute; }
.fs11{ font-size: 11px }
.fs12{ font-size: 12px }
.fs13{ font-size: 13px }
.fs14{ font-size: 14px }
.fs16{ font-size: 16px }
.fs17{ font-size: 17px }
.fs18{ font-size: 18px }
.fs19{ font-size: 19px }
.fs20{font-size: 19px;}
.fs30{ font-size: 30px }
.fs40{ font-size: 40px }
.fs50{ font-size: 50px }
.br100{ border-radius: 100px }
.m0{ margin: 0 }
.m10{margin: 10px 0;}
.m15{ margin: 15px }
.m20{margin: 20px 0;}
.mt5{ margin-top: 5px }
.mt10{ margin-top: 10px }
.mt15{ margin-top: 15px }
.mt20{ margin-top: 20px }
.mb5{ margin-bottom: 5px }
.mb10{ margin-bottom: 10px }
.mb15{ margin-bottom: 15px }
.mb20{ margin-bottom: 20px }
.mr5{ margin-right: 5px }
.mr10{ margin-right: 10px }
.mr20{ margin-right: 20px }
:root{
--first: #1044a7;
--second: #8e0241;
}
.cwhite{ color: white !important }
.cgray{ color: gray }
.cfirst{ color: var(--first) }
.csecond{ color: var(--second) }
.header{
padding: 15px 14px;
border-bottom: 1px solid #c8c8c8;
}
.logo-main{
width: 115px;
}
.searchTopBack{
align-items: center;
overflow: hidden;
border-radius: 100px;
border: 1px solid #ffffff;
width: 100%;
max-width: 480px;
background: #e6e6e6;
}
.topSearchInp{
background: none;
border: none;
outline: none;
color: black;
width: 100%;
padding: 10px 14px;
padding-left: 51px;
}
.headBtn{
background: #e6e6e6;
padding: 11px 17px;
border-radius: 100px;
margin-left: 14px;
color: #414141 !important;!i;!;
}
.logBtn i{
}
.searchTopBack i{
color: gray;
position: absolute;
transform: translateX(20px);
z-index: 1;
}
.regBtn{
}
.headBtn i{
margin-right: 6px;
}
.btn1{
background: var(--first);
color: white !important;
outline: none !important;
border: none !important;
transition: 0.35s ease;
}
.btn1:hover,
.btn1:focus{
}
.themeBtnBack{
background: #e6e6e6;
padding: 9px;
border-radius: 100px;
}
.themeBtnmode{
border-radius: 100px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 100px;
color: #474747;
cursor: pointer;
}
.themeBtnBack .themeBtn{
border-radius: 100px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 100px;
color: #474747;
cursor: pointer;
}
.themeBtnBack i{
}
.themeBtnBack .active{
background: var(--first);
color: white;
}
.sidebarUl{
}
.sidebarUl li{
}
.sidebarUl img{
opacity: 0.5;
width: 22px;
margin-right: 21px;
}
.sidebarUl span{
}
.sidebarUl a{
display: flex;
align-items: center;
border-radius: 100px;
padding: 11px 15px;
margin: 0 0 10px;
border-radius: 100px;
transition: 0.35s ease;
}
.sidebarUl a:hover,
.sidebarUl a:focus{
background: #e6e6e6;
}
.mainContainer{
padding: 30px 0;
}
.sideBarCont hr{
opacity: 0.1;
margin: 21px 0;
}
.sidebarSlide-single{
}
.sliderBox1{
background: #e6e6e6;
display: flex;
padding: 16px 20px;
justify-content: space-between;
color: black;
border-radius: 10px;
margin: 0 10px 24px;
align-items: center;
}
.sliderBox1 .title{
font-size: 19px;
}
.sliderBox1 .desc{
}
.sliderBox1 img{
height: 43px;
}
.slick-slider{
outline: none !important;
border: none !important
}
.sideBarSocial{
justify-content: space-between;
}
.sideBarSocial a{
color: gray;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
font-size: 16px;
width: 33px;
height: 33px;
background: 40px;
margin-right: 10px;
background: #e6e6e6;
}
.sidebarTxt{
color: #545454;
font-size: 12px;
line-height: 1.2;
margin: 30px 0 0;
}
.homesec1{
}
.hsSingle{
position: relative;
}
.hs1Box{
}
.gameblockimg1{
width: 100%;
height: 191px;
object-fit: cover;
transition: 0.4s ease;
}
.game-block1{
overflow: hidden;
border-radius: 13px;
position: relative;
}
.game-block1 .cat{position: absolute;top: 20px;left: 13px;background: var(--second););font-size: 11px;padding: 0px 8px;border-radius: 99px;color: white !important;!i;!;}
.game-block1 .detRel{
height: 20px;
position: absolute;
bottom: 10px;
left: 10px;
z-index: 9;
display: block;
}
.game-block1 .title{
font-weight: 600;
font-size: 17px;
color: white !important;!i;!;
}
.rightBodyCont{
padding-left: 0;
}
.background1{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -40;
opacity: 0.02;
}
.game-block1 .inner{
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
display: block;
top: 0;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(1%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.heading1{
font-weight: 600;
font-size: 20px;
color: black;
}
.heading1 img{
height: 20px;
}
.homesec1-slider .slick-slide {
margin: 0 6px;
}
.homesec1-slider .slick-list {
margin: 0 -6px;
}
.hr1{
opacity: 0.1;
margin: 20px 0
}
.headingFlex a{
border: 1px solid gray;
padding: 3px 10px;
border-radius: 120px;
font-size: 12px;
color: gray;
}.headingFlex i{
margin-left: 4px;
}
.game-slider-back{
}
.game-slider-main{
}
.game-block2{
}
.game-slide-single{
}
.game-block2{
overflow: hidden;
border-radius: 9px;
position: relative;
}
.game-block2 .game-image{
width: 100%;
height: 100%;
object-fit: cover;
}
.game-block2 .inner1{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
display: block;
top: 0;
background: rgba(0,0,0,0);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(1%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,0.7)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
opacity: 0;
transition: 0.35s ease;
}
.game-block2:hover .inner1{
opacity: 1;
}
.game-block2{
transition: 0.35s ease;
}
.game-block2:hover{
}
.game-block2 .title{
width: -webkit-fill-available;
position: absolute;
bottom: 5px;
color: white !important;!i;!;
left: 13px;
}
.game-slider-main .slick-slide {
margin: 0 6px;
}
.game-slider-main .slick-list {
margin: 0 -6px;
}
.headingFlex{
margin: 0 0 15px;
}
.game-block2 .type{
display: block;
line-height: 1;
font-size: 13px;
color: white !important;!i;!;
}
.m40{
margin: 30px 0
}
.game-grid-inner{
display: grid;
grid-template-columns: repeat(8, 2fr);
grid-gap: 12px;
gap: 12px;
}
.game-grid-inner .game-block2:nth-child(1)
{
grid-row: 1 / span 2;
grid-column: 1 / span 2;
}
.game-grid-inner .game-block2:nth-child(2)
{
grid-row: 1 / span 2;
grid-column: 5 / span 2;
}
.game-grid-inner .game-block2:nth-child(3)
{
grid-row: 3 / span 2;
grid-column: 3 / span 2;
}
.game-grid-inner .game-block2:nth-child(4)
{
grid-row: 3 / span 2;
grid-column: 7 / span 2;
}
.game-grid-inner .game-block2:nth-child(5)
{
grid-row: 5 / span 2;
grid-column: 1 / span 2;
}
.game-grid-inner .game-block2:nth-child(6)
{
grid-row: 5 / span 2;
grid-column: 5 / span 2;
}
.game-grid-inner .game-block2:nth-child(7)
{
grid-row: 7 / span 2;
grid-column: 3 / span 2;
}
.game-grid-inner .game-block2:nth-child(8)
{
grid-row: 7 / span 2;
grid-column: 7 / span 2;
}
.game-grid-inner2{
display: grid;
grid-template-columns: repeat(8, 2fr);
grid-gap: 12px;
gap: 12px;
}
.pagination{
padding: 33px 0 0;
}
.pagination a{
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 100px;
background: #212828;
margin: 0 5px;
color: #9d9d9d;
transition: 0.3s ease;
background: #e6e6e6;
}
.pagination .current{
background: var(--first);
color: white !important;!i;!;
border: 1px solid transparent
}
.pagination a:hover{
border: 1px solid var(--first)
}
.block1{
background: #e6e6e6;
padding: 30px 40px;
border-radius: 13px;
}
.block1 .inBox{
background: #d5d5d5;
padding: 40px 35px;
border-radius: 14px;
}
.btnstyle1{
padding: 7px 20px;
display: inline-block;
border-radius: 100px;
}
.homSec1 img{
height: 93px;
margin-right: 26px;
}
.homSec1 p {
color: gray;
margin: 0 0 20px;
}
.homSec1 h2 {
color: gray;
margin: 0 0 30px;
}
.homSec1 h3 {
line-height: 1;
}
.btn2{
border: 1px solid gray;
color: gray;
transition: 0.34s ease;
}
.btn2:hover,
.btn2:focus{
background: gray;
color: white !important
}
.homeContent{
}
.gameCatGrid{
display: grid;
grid-template-columns: repeat(6, 2fr);
grid-gap: 12px;
gap: 12px;
}
.gameCatGrid img{
height: 50px;
width: 50px;
border-radius: 100px;
padding: 10px;
background: white;
margin-right: 14px;
}
.gameCatGrid p{
font-size: 19px;
!i;!;
line-height: 1;
}
.gameCatGrid span{
font-size: 13px;
color: gray;
}
.gameCatGrid .flex{
align-items: center;
}
.gamecatsimgle{
background: #e6e6e6;
padding: 12px 11px;
border-radius: 8px;
transition: 0.4s ease;
border: 1px solid transparent;
}
.gamecatsimgle:hover{
border: 1px solid var(--first);
}
.footer{
color: gray;
padding: 50px 0 20px;
}
.footLogo{
height: 50px;
margin: 0 0 20px;
}
.footList{
}
.footList li{
}
.footList a{
}
.footList h2{
font-size: 22px;
margin: 0 0 20px;
color: #868686;
}
.bars{
position: absolute;
right: 0;
z-index: 11;
top: 10px;
cursor: pointer;
display: none;
}
.bars span{
display: block;
width: 24px;
height: 3px;
background: #384b6d;
margin: 5px 0;
}
.playGameCont{
grid-row: 1 / span 4;
grid-column: 1 / span 6;
}
.playGameInner{
}
.gameBlock1{
background: #212828;
border-radius: 13px;
}
.gameBlock1 iframe{
width: 100%;
height: 500px
}
.gameControlsBack{
padding: 12px 16px;
background: #e6e6e6;
}
.gameControlsBack .logo-icon{
width: 25px;
margin-right: 13px;
}
.gameControlsBack .gameTitle{
font-weight: 600;
font-size: 20px;
}
.cyellow{
color: orange
}
.controlFlex{
}
.controlFlex .btnspec{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 4px 14px;
background: #efefef;
cursor: pointer;
user-select: none;
border-radius: 6px;
margin-left: 12px;
color: #838383;
transition: 0.3s ease;
}
.controlFlex .btnspec i{
font-size: 20px;
}
.controlFlex .btnspec .txt{
}
.controlFlex .btnspec:hover,
.controlFlex .btnspec:focus
{
background: var(--first);
color: white;
}
.gameDetailBox{
color: gray;
padding: 27px 41px;
margin: 16px 0 0;
padding-right: 80px;
background: #efefef;
border-radius: 10px;
}
.gameDetailBox h2{
font-weight: 700;
font-size: 20px;
margin: 0 0 2px;
font-size: 19px;
}
.gameDetailBox p{
margin: 0 0 20px;
line-height: 1.3;
}
.gameTagsCack{
padding: 8px 0 13px;
gap: 12px;
}
.gameTagsCack a{
padding: 5px 10px;
display: block;
border: 1px solid #898989;
border-radius: 100px;
color: #898989;
user-select: none;
cursor: pointer;
}
.gameTagsCack a:hover{
color: black;
}
.lite-asset{
display: block;
}
.dark-asset{
display: none;
}
@media screen and ( max-width: 992px ) {
.searchTopBack{
margin: 14px 0;
max-width: 100%;
}
.sideBarCont{
margin: 0 0 40px;
display: none;
}
.gameblockimg1 {
height: 92px;
}
.game-grid-inner{
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-gap: 8px;
gap: 8px;
}
.game-grid-inner .game-block2:nth-child(1)
{
grid-row: initial;
grid-column: initial;
}
.game-grid-inner .game-block2:nth-child(2)
{
grid-row: initial;
grid-column: initial;
}
.game-grid-inner2{
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-gap: 8px;
gap: 8px;
}
.game-slider-main .slick-slide {
margin: 0 4px;
}
.game-slider-main .slick-list {
margin: 0 -4px;
}
.gameCatGrid{
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 8px;
gap: 8px;
}
.block1{
padding: 20px 20px;
}
.block1 .inBox{
margin: 20px 0 0;
padding: 20px 29px;
}
.footList h2{
margin: 40px 0 7px;
}
.bars{
display: block;
}
} /* media 992 */