:root {
	--body-bg-color: #670371;
	--accent-color:#b0e74c;
	--footer-bg-color:#000;
	--header-link-color:#7f7f7f;
}
html{scroll-behavior: smooth;}
body {
	background: var(--body-bg-color);
	color:#fff;
	font-family: 'Rubik', sans-serif;
}

header.header-gradient{
     background: #fff;
}
#carousel-hero img {border-radius:20px;}
.carousel-control-next, .carousel-control-prev {
    width: 8%;
}
.carousel-hero-title {
    text-transform: uppercase;
    font-size: 35px;
    font-weight: 800;
    line-height: 35px;
    margin-bottom: 10px;
	color:var(--accent-color);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
		overflow: hidden;

}
.carousel-hero-description {
    text-align: center;
}
.bg-home-top{    
background: url(../images/bg1.jpg) no-repeat;
    width: 100%;
    height: 100vh;
    display: block;
    background-size: cover;
	position:absolute;
	top:0
}
.bg-fix{background:var(--footer-bg-color);}
footer{background: var(--footer-bg-color);}
a, a:hover{color:var(--accent-color);}
footer a:hover{text-decoration:underline}
footer .list-unstyled a:hover{text-decoration:none}


.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 {
	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: var(--body-bg-color);
	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);
}


header .btn-outline-light, header .btn-outline-light:not(:disabled):not(.disabled).active, header .btn-outline-light:not(:disabled):not(.disabled):active, header .show>.btn-outline-light.dropdown-toggle{
    color: var(--body-bg-color);
    border-color:  var(--body-bg-color);
}

header .btn-outline-light{backdrop-filter: blur(10px);}

header .btn-outline-light:hover [class*="icon"] {
    filter: invert(1) invert(1);
}
header .btn-outline-light:hover {
    color: #fff;
    background-color: var(--body-bg-color);
    border-color: var(--body-bg-color);
}
.btn-rounded {
    border-radius: 150px;
}
.icon-account {
	width: 34px;
	height: 35px;
	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;}

.body-gradient{
	  background-image:linear-gradient(0deg, black, transparent);
}




.bg-landing1{ background: url('../images/bg1.jpg'); background-size:cover}
#carousel-home{border-radius:20px; overflow:hidden;}

#principal {/*background:rgba(255,255,255,0.3)*/}
#principal .nav-link {
	font-size: 20px;
	color:  var(--header-link-color);
	display: flex;
	align-items: center;
	text-transform:uppercase;
	font-weight:600;
	transition: all 0.2s;
	gap: 10px;

}

.nav-link img{filter:invert(0.5)}

#principal .nav-link.active, .nav-item.active a, li.nav-item.active a{
	color: var(--body-bg-color)!important;
}
#principal .nav-item:not(.active):hover{filter:invert(1) invert(77%) sepia(64%) saturate(422%) hue-rotate(30deg) brightness(99%) contrast(150%);}
#principal .nav-link.active img, li.nav-item.active a img {filter: invert(1) invert(11%) sepia(39%) saturate(6714%) hue-rotate(285deg) brightness(101%) contrast(112%);}


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




footer a{color:#fff}

.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; 
text-align:center; 
font-weight:500; 
color:#000000;
background: #fff;
padding: 14% 8% 10% 8%;
-webkit-border-radius: 5%;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
}
.parent a .name{margin-top:6%; 
overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size:0.8em
}
.parent a img{  
	border-radius: 18%;
  -moz-border-radius : 18%;
  -webkit-border-radius : 18%;
}

.parent a:hover {/*transform:scale(1.1); */z-index:2; text-decoration:none;
    -webkit-transition:  box-shadow .2s ease-in;
	    transform: scale(1.1);
    text-decoration: none;
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.2);
	
	}

.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;
	
}



.parent a:hover:before{
    content:'JUGAR';
	z-index:1;
	align-items:center;
	justify-content:center;
	display:flex;
	background: rgba(0, 0, 0, 0.6);
	color:#fff;
	font-size:20px;
	font-weight:700;

}


.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:#252756;}
.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;
}


#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:#fff; color:#941b80; 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; height:20px; 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: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%);}

.footer-big{background: url('../images/big.svg') no-repeat bottom right; min-height:285px;}
.title img{width:30px;height:30px}


.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;
}
.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%}


@media (max-width: 767px) {.navbar-collapse{ top: 53px; } }
@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: #fff;
	   
    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 (max-width: 768px) {
	

	.logo img {
		width: 180px
	}


}

@media (min-width: 768px) and (max-width: 991px) {
	/*.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(6,1fr);
}

.big { grid-column: span 2;
    grid-row: span 2;}
	
}*/

}

@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 {
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{background:#fff; padding:30px 18px 20px 18px;border-radius: 5%;
  -moz-border-radius : 5%;
  -webkit-border-radius : 5%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
 }
.parent a img{  
border-radius: 5%;
  -moz-border-radius : 5%;
  -webkit-border-radius : 5%;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

.parent.grid-home{grid-template-columns: repeat(5,1fr); width: 87%; margin: 0 auto; overflow-x:visible}

.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:24px; 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: 24px;
    height: 24px;
    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;}

.footer-big{background: url('../images/big.svg') no-repeat center right; height:70vh;}


.carousel-hero-text {
	font-size: 30px;
	margin-bottom: 0
}



	.carousel-hero-description {
		text-align: left;
	}

	.carousel-control-next,
	.carousel-control-prev {
		width: 2%
	}

}


@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:20px}
/*
.carousel-inner {
    height: Calc(100vh - 200px);
}
*/
}

#carousel-hero .game-img{border-radius:20px;}
.carousel-hero-title .text-gradient {
    display: -webkit-box;
    max-width: 400px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bg-blur-game {
	position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-size: cover;
    filter: blur(10px);
    opacity: 0.5;
	background-repeat:no-repeat;
	top:0;
	
}
.game-z{position:relative;z-index:2}
#carousel-hero.owl-carousel .owl-stage-outer{border-radius:20px}
.carousel-hero-text {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
}

@media(min-width:992px){
#carousel-hero .game-img{border-radius:20px;margin: 20px;width:auto;height:auto}
.carousel-hero-description{text-align:left;}

}

.grid {
    grid-row-gap: 30px;
}

.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev{background:#fff!important;}

.owl-carousel.owl-theme .owl-nav [class*='owl-']:hover{background:#fff!important;}
.owl-carousel button.owl-prev:focus, .owl-carousel button.owl-next:focus{outline: none;}
.owl-carousel .disabled{opacity:0!important;}
.owl-carousel .owl-nav button.owl-prev {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 45%;
    margin-left: -80px!important;
    display: block !important;
	border-radius: 150px;
	box-shadow: 0px 0px 8px rgb(0 0 0 / 50%);
}

.owl-carousel .owl-nav button.owl-next {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 45%;
    right: -80px!important;
    display: block !important;
	border-radius: 150px;
	    box-shadow: 0px 0px 8px rgb(0 0 0 / 50%);
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff!important;
	border:1px solid #fff;
}
.owl-theme .owl-dots .owl-dot span {
    width: 40px!important;
    height: 12px!important;
    margin: 5px 7px;
    background: transparent!important;
	border:1px solid #fff;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity 200ms ease;
    border-radius: 30px;
}

.owl-carousel button:focus {
    outline: none;
}
.carrusel-games.owl-carousel .owl-nav button.owl-prev,.carrusel-games.owl-carousel .owl-nav button.owl-next{top: 30%;}

.carrusel-games img{border-radius:10px}

.games-categories, .filters{width:100%; overflow-x: scroll; grid-gap:10px;}
.game-category{display: flex; flex-direction:column; text-align:center; color:#fff;}
.game-category:hover {color:#FF8613;text-decoration:none;}
a.game-category, .game-category a:ctive; .game-category a:focus, .game-category a:hover{color:#fff;}

@media (max-width: 768px) {

.owl-carousel .owl-nav button.owl-prev {
    margin-left: -30px!important;
}

.owl-carousel .owl-nav button.owl-next {
    right: -30px!important;
}
.games-categories img{width:80px;height:80px}
.header-bg{padding:0}

}
@media (min-width: 992px) and (max-width: 1440px) {
.container-fluid{
    max-width: 90%;
}
}