:root {
	--body-bg-color: #1b222e;
	--accent-color:#4ed272;
	--footer-bg-color:#1b222e;
	--header-link-color:#252756;
}
html{scroll-behavior: smooth;}
body {
	background: var(--body-bg-color);
	color:#fff;
	font-family: "Roboto Condensed", sans-serif;
}

header.header-gradient{
  background: linear-gradient(90deg, rgb(27 34 46) 0%, rgb(17 22 30) 26.88%, #26272d 100%);
}
main {background:url('../images/bg-top.png')}
.bg-home-top{    
background: url(../images/bg1.jpg) no-repeat;
    width: 100%;
    height: 100vh;
    display: block;
    background-size: cover;
	position:absolute;
	top:0
}

footer{background: var(--footer-bg-color)}
a{color: #fff}
a:hover{color: #fff}

.navbar-toggler {padding:0}
.navbar-dark .navbar-toggler {
	border-color: transparent;
}

.navbar-toggler:focus {
	outline: none;
}

.navbar-dark .navbar-toggler:hover span,
.navbar-dark .navbar-toggler:focus span {
	background: #fff;
	border-radius: 20px;
}

.navbar-dark .navbar-toggler[aria-expanded="false"] span {
	transform: none;
	opacity: 1;
}

.navbar-dark .navbar-toggler span {
	display: block;
	width: 30px;
	height: 3px;
	margin: 5px auto;
	background: #fff;
	transition: all .6s cubic-bezier(0.250, 0.100, 0.250, 1.000);
	    border-radius: 20px;
}
.nav-item:hover{background:rgba(0,0,0,0.1)}

/*3 strikes to x */
.navbar-dark .navbar-toggler[aria-expanded="true"] span:first-of-type {
	transform: rotate(45deg) translate(6px, 6px);
}

.navbar-dark .navbar-toggler[aria-expanded="true"] span:nth-of-type(2) {
	opacity: 0;
}

.navbar-dark .navbar-toggler[aria-expanded="true"] span:last-of-type {
	transform: rotate(-45deg) translate(5px, -5px);
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 60px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
  background:#1b222e;
}


.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .nav-link {
  color: var(--accent-color);
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}



.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}


.btn-outline-light:hover [class*="icon"] {
    filter: invert(1);
}
.btn-outline-light:hover {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-rounded {
    border-radius: 150px;
}
.icon-account {
	width: 20px;
	height: 20px;
	background: url('../images/icon-account.svg') no-repeat;
	float: left;
}
header .mobile-myaccount.btn{padding:0}
.icon-star{
	width: 10px;
	height: 10px;
	background: url('../images/icon-star.svg') no-repeat;
	float: left;	
}
.star-badge{background:var(--accent-color); border-top-left-radius:5px; border-bottom-left-radius:5px; position:absolute; z-index:3; padding:1px 4px; display:flex; align-items:center;right:0; top:10px; color:#000; font-size:10px; display:none;}


.bg-landing1{ background: url('../images/bg-top.png');}
#carousel-home{border-radius:20px; overflow:hidden;}
#principal {/*background:rgba(255,255,255,0.3)*/}
#principal .nav-link {
	font-size: 20px;
	color:  #fff;
	display: flex;
	align-items: center;
	text-transform:uppercase;
	font-weight:600;
	transition: all 0.2s;
	gap: 10px;

}

#principal .nav-link:hover, #principal .nav-link.active {
	color: #fff;

	
}
/*#principal .nav-link.active, #principal .nav-link:hover{font-weight: 700;position:relative; transform:scale(1.5); background : rgba(62, 66, 62, 0.2);}*/

#principal .nav-link img{}


/*.icon-account	{filter: invert(14%) sepia(8%) saturate(7500%) hue-rotate(208deg) brightness(99%) contrast(94%);}*/

#principal .nav-link:hover img, #principal .nav-link.active img{}



footer a{color:#fff}
footer a:hover{text-decoration:none}
.footer-nav a{color:#fff;font-weight:700}
.footer-nav a:hover{color:#000}
.parent {
display: grid;
    grid-template-rows: auto;
    grid-auto-flow: dense;
    grid-gap: 10px;
    align-items: stretch;
    justify-items: stretch;
    margin-bottom: 10px;
grid-template-columns: repeat(3,1fr);
}

.parent a{ 
overflow:hidden;
transition:all 0.2s; 
position:relative; 
font-weight:500; 
color: var(--accent-color);
-webkit-border-radius: 10px;
}
.parent a .name{margin-top:6%; 
overflow: hidden;
   
	font-size:0.8em;
	display:none;
}
.parent a img{  
	border-radius: 10px;
  -moz-border-radius : 10px;
  -webkit-border-radius : 10px;
}

.parent a:hover {transform:scale(1.05); z-index:2; text-decoration:none;
    -webkit-transition:  all .2s ease-in;}

.parent a:before{	
content: "";
	position: absolute;
	z-index:-1;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0;
	font-size:22px;
	font-weight:400;
	letter-spacing:1px;
	background:rgba(0,0,0,0.6)
}



.parent a:hover:before{
	z-index:1;
	align-items:left;
	justify-content:center;
	display:flex;
	color:#fff;
	font-size:16px;
	font-weight:700;
}
.parent a:hover .name{    
position: absolute;
    display: flex;
    top: 0;
    z-index: 8;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
    height: 100%;
    align-items: center;
    justify-content: center;
	text-align: center;
}
.parent a:hover img {
filter: blur(5px);}

.games-related{
		display:grid;
		 grid-template-rows: auto;
    grid-auto-flow: dense;
    grid-gap: 10px;
    align-items: stretch;
    justify-items: stretch;
    margin-bottom: 10px;
grid-template-columns: repeat(3,1fr);
	}

.h1, .h2 {color:var(--accent-color);}
.h1{
font-weight: 700;
font-size:20px;
}
.h2{
font-weight: 600;
font-size:18px;
}

.filter-button {
    cursor: pointer;
	text-align: center;
	background:#fff;
	border:1px solid #7c3f91;
	
text-transform:uppercase;
display:flex;
}
.tyc ol{padding-inline-start: 20px;}
.tyc ol li{margin-bottom:10px;font-size: 0.9em;}

#products .nav-pills .nav-link{
	border-radius:150px;color:#7c3f91;display: flex;
    align-items: center;
}

#products .nav-pills .nav-link.active {color:#fff; border-color:var(--accent-color);}
#products .nav-pills .nav-link img{filter: invert(41%) sepia(19%) saturate(1547%) hue-rotate(240deg) brightness(86%) contrast(95%); margin-right:5px}
.title img{
margin-right:5px
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--accent-color);
}


#products #pills-tab{
    margin-left:15px!important;
}


.bg-image-vertical {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-position: right center;
background-size: auto 100%;
}

#login-form .form-control{background:transparent; border-color:#fff; border-radius:150px; height:44px; color:#fff; font-size:16px}

#login-form input::placeholder {
    color: #fff;
}
#login-form legend{font-size:20px; font-weight:400; text-align:center;}


#claim-box {}
.btn-viewmore{background:#378bcb; width:280px;height:44px; display:flex; align-items:center; justify-content:center; color:#fff; border-radius:150px; font-weight:400;font-size:16px}
.btn-login{background:var(--accent-color); color:#fff; width:280px;height:44px; display:flex; align-items:center; justify-content:center; margin: 0 auto; border-radius:150px; font-weight:600;font-size:16px;}
.claim{color:#5dc1d9;font-size:16px;font-weight:700}
.first-title{font-size:20px; font-weight: 600; margin-bottom: 66px!important;}
.second-title{font-size:23px; line-height:30px;font-weight:700}
.bg-welcome{background:#1a1a32 url('../images/bg-welcome-mobile.jpg?a') top right no-repeat; background-size:cover;}



.over{z-index:2; position:relative;}
.gradient-text{background: linear-gradient(to left, #5dad70, #1faed8); background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.bg-adventures{background:url('../images/bg-adventures.jpg') no-repeat; width:100%; height:100%}
.bg-strategy{background:url('../images/bg-strategy.jpg') no-repeat; width:100%; height:100%}
.bg-braintraining{background:url('../images/bg-braintraining.jpg') no-repeat; width:100%; height:100%}
.bg-sports{background:url('../images/bg-sports.jpg') no-repeat; width:100%; height:100%}
.bg-arcade{background:url('../images/bg-arcade.jpg') no-repeat; width:100%; height:100%}
.see-all{font-size:16px; display:flex; align-items:center; color:var(--accent-color); transition: 0.1s ease-in;background:rgba(0,0,0,0.5);padding:8px 15px; border-radius:5px}
.see-all:before{background:url('../images/arrow-more.svg') no-repeat; content:""; width:24px; height:18px;display: inline-block;   transition: 0.1s ease-in; }
.see-all:hover{text-decoration:none;color:#fff}
.see-all:hover:before{ transform: translateX(20%);}


.title img{width:30px;height:30px}

/*
.parent.grid-home {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 10px;
    grid-auto-rows: minmax(140px, auto);
    grid-auto-flow: dense;
	width:100%;
}

.parent.grid-home a{ width:100%;}
.parent.grid-home img {
    width: 100%;
    height: auto;
}*/

.parent.grid-home a {
    width: 100%;
}

@media (max-width: 991px){
.parent.grid-home {
    display: grid;
    grid-auto-columns: 33%;
    grid-auto-flow: column;
    grid-gap: 10px;
    overflow-x: auto;
	grid-template-columns: auto;
	padding-right: 10px;
	margin-left:-10px;
}
.mobile-right{padding-right:0}
}
.parent.grid-home a{ width:100%;}
.parent.grid-home img {
    width: 100%;
    height: auto;
}
#carousel-home a:hover{text-decoration:none}

#carousel-home .carousel-control-next, #carousel-home .carousel-control-prev {width:10%}

.sidebar .nav-link.active{color:#fff; background: rgba(43,50,63, 0.5);}
@media (max-width: 767px) {.navbar-collapse{ top: 54px; } }
@media (min-width: 768px) {.navbar-collapse{ top: 74px; } }
@media (max-width: 991px) {
#principal .nav-link {padding-left:3%}
.icon{width:40px}
.navbar-collapse{
	position: absolute;
    width: 100%;
       background: linear-gradient(90deg, rgb(148 27 128 ) 0%, rgb(173 39 179) 26.88%, #E91E63 100%);
    left: 0;
}	
	
#carousel-home .carousel-caption h1{ font-size:2.4em; line-height:1.1em;font-weight: 600;color:#fff}
#carousel-home .carousel-caption h2{font-size:1.0em;font-weight: 400; margin-bottom:10px}
#carousel-home .carousel-caption p{font-size:1em;font-weight: 400;}
#carousel-home .carousel-caption{ top:5%; text-align:left; left:5%}
.caption-mobile{
	display:flex; flex-direction:column;
	justify-content: space-between;
	height:70vh;
}

.carousel-inner{
    /*min-height: -webkit-fill-available;*/
	/*height: calc(100vh - calc(100vh - 100% - 55px));*/
}
.carousel{ min-height: Calc(100% - 110px);
    /*border: 3px solid orange;*/
    overflow: hidden;
	height: Calc(100% - 110px);
}

.bg-home-top{}
#carousel-home .carousel-item{background:red}


#carousel-home  .carousel-indicators li{width:24px; height:12px; border-radius:150px; border: none;}
}

@media (min-width: 768px) { .bg-welcome{background:#1a1a32 url('../images/bg-welcome.jpg?1') top right; background-size:cover; /*object-fit: cover; object-position: left;*/}

.parent {
    display: grid;
    grid-template-rows: auto;
    grid-auto-flow: dense;
    grid-gap: 10px;
    align-items: stretch;
    justify-items: stretch;
    margin-bottom: 10px;
    grid-template-columns: repeat(5,1fr);
}
}

@media (max-width: 1024px) {
.bg-form-mobile{background: rgb(56,180,77);background: linear-gradient(90deg, rgba(56,180,77,1) 0%, rgba(99,168,222,1) 100%); }
#login-form{width:280px}
}
@media (min-width: 1025px) {
.h-custom-2 {
height: 100%;
}

.btn-viewmore{width:314px;height:70px; font-size:30px}
.btn-login{width:100%;height:70px; font-size:30px;}
.claim{font-size:29px;}
.first-title{font-size: 47px; margin-bottom: 116px!important;}
.second-title{font-size:45px; line-height:60px;}
#login-form{width:360px}
#login-form legend{font-size:30px;}
#login-form .form-control{ height:70px; color:#fff}
.vh-100-desktop {
    height: 100vh!important;
}
.bg-form{background: rgb(56,180,77);background: linear-gradient(90deg, rgba(56,180,77,1) 0%, rgba(99,168,222,1) 100%); }
}


@media (min-width: 992px) {
.top {margin-top:112px}
.title img{width:60px;height:60px}


#carousel-home .carousel-caption h1{ font-size:4.5vw;font-weight: 600;}
#carousel-home .carousel-caption h2{font-size:3.5vw;font-weight: 600;}
#carousel-home .carousel-caption p{font-size:1.5vw;font-weight: 400;}
#carousel-home .carousel-caption{ top:10%}
#carousel-home .carousel-control-next, #carousel-home .carousel-control-prev {width:5%}
	#principal .nav-link {
		font-size: 16px;
		line-height:1;
	}

.card {border-radius:20px}
.parent.grid-home {
        grid-template-columns: repeat(6, 1fr);
        width: 100%;
        margin: 0 auto;
        overflow-x: visible;
    }	
	
.parent {
display: grid;
    grid-template-rows: auto;
    grid-auto-flow: dense;
    grid-gap: 24px;
    align-items: stretch;
    justify-items: stretch;
    margin-bottom: 10px;
grid-template-columns: repeat(7,1fr);
}
.parent a{border-radius: 10px;
 }
.parent a img{  
border-radius: 10px
}



.big { grid-column: span 2;
    grid-row: span 2;}
	
	.h1 {
		font-size: 39px;

	}
	.h2 {
		font-size: 26px;

	}
	.games-related{
		display:grid;
		 grid-template-rows: auto;
    grid-auto-flow: dense;
    grid-gap: 10px;
    align-items: stretch;
    justify-items: stretch;
    margin-bottom: 10px;
grid-template-columns: repeat(9,1fr);
	}

.see-all{font-size:16px; height:40px; display:flex; align-items:center; color:#fff; transition: 0.1s ease-in;}
.see-all:before {
    background: url(../images/arrow-more.svg) no-repeat;
    content: "";
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: 0.1s ease-in;
}

.star-badge{font-size:12px; display:none;}
#carousel-home .carousel-indicators{bottom:20px; margin-bottom:0}
.carousel-indicators li {border:none; border-radius:150px; height:10px; width:40px;margin-right: 10px;margin-left: 10px;}



}


@media (min-width: 1200px) {
header .desktop-myaccount{display:flex!important; align-items:center;}
.navbar-expand-xl .navbar-nav {gap:20px}
}
@media (min-width: 1440px) {
.parent a .name{font-size:16px}
/*
.carousel-inner {
    height: Calc(100vh - 200px);
}
*/
.carousel-item img{height: Calc(100vh - 150px);
    object-fit: cover;
    object-position: center;}

}

@media (min-width: 576px) {
    .ms-sm-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 768px) {
    .px-md-4 {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
}