/**/
function search_reviews() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('grid-item');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="";
}
}
}
/*Fuente para toda la web*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
font-family: 'Poppins', sans-serif !important;
}
/*Colores generales de la web*/
:root {
/*Común*/
--navbar: linear-gradient(to right, #D05050, #B43A3A);
--efecto-navbar: #881612;
--letrafooternavbar: white;
--dropdown: black;
--dropdown-hover: #D05050;
--dropdown-hover-text: white;
--fondo: white;
--letra: black;
--footer: linear-gradient(to right, #D05050, #B43A3A);
--botones-fondo: linear-gradient(to bottom right, #B74040, #992c2c);
--botones-border: linear-gradient(to bottom right, #B74040, #992c2c);
--botones-text: white;
--botones-hover: linear-gradient(to bottom right, #D05050, #B43A3A);
/*Especifico de página*/
--header: linear-gradient(to right, #D05050, #B43A3A);
--pagination-fondo: linear-gradient(to right, #D05050, #B43A3A);
--pagination-letra: black;
--pagination-letra-active: white;
--pagination-hover: lightgrey;
--card-background: white;
--card-text: black;
--card-shadow: #ccc;
--card-border: rgba(0,0,0,.125);
--label-cat-disabeled: lightgray;
--boton-cat-fondo: #b74040;
--boton-cat-hover: linear-gradient(to bottom, #D05050, #B43A3A);
--boton-cat-border: #8a0505;
--boton-cat-shadow1: #8a0505;
--boton-cat-shadow2: #ffe3e2;
--cat-fondo: #eee;
--cat-fondo-active: linear-gradient(to right, #D05050, #D05050);
--cat-text: black;
--cat-text-active: white;
--cat-hover: #ccc;
}
/*Colors darkmode*/
[data-theme=dark] {
/*Común*/
--navbar: #131313;
--efecto-navbar: #404040;
--letrafooternavbar: #d6d6d6;
--dropdown: #1d1d1d;
--dropdown-hover: #3c3c3c;
--dropdown-hover-text: #d6d6d6;
--fondo: #1d1d1d;
--letra: #d6d6d6;
--footer: #131313;
--botones-fondo: #131313;
--botones-border: #131313;
--botones-text: #d6d6d6;
--botones-hover: #0a0a0a;
/*Especifico de página*/
--header: #131313;
--pagination-fondo: #131313;
--pagination-letra: #d6d6d6;
--pagination-hover: #404040;
--card-background: #1d1d1d;
--card-text: #d6d6d6;
--card-shadow: black;
--card-border: #3d3d3d;
--label-cat-disabeled: #3d3d3d;
--boton-cat-fondo: #171717;
--boton-cat-hover: #1d1d1d;
--boton-cat-border: #3d3d3d;
--boton-cat-shadow1: #3d3d3d;
--boton-cat-shadow2: #171717;
--cat-fondo: #131313;
--cat-fondo-active: #343434;
--cat-text: #d6d6d6;
--cat-text-active: #d6d6d6;
--cat-hover: #343434;
}
/*Page loader*/
#loader {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.5;
background-color: transparent;
z-index: 99;
text-align: center;
}
#loader-image {
border: 12px solid lightgrey;
border-radius: 50%;
border-top: 12px solid #444444;
width: 70px;
height: 70px;
animation: spin 1s linear infinite;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.centrarLoader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/*Estilo body*/
body {
background-color: var(--fondo);
color: var(--letra);
}
/*Estilo navbar*/
.navbar-area {
background: var(--navbar);
}
.site-navbar {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
}
.site-navbar li:hover {
opacity: 50%;
}
.site-navbar li {
pointer-events: none;
}
.site-navbar a {
pointer-events: all;
}
a.site-logo {
font-size: 26px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
text-decoration: none;
}
.site-navbar ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.toggleDark {
font-style: normal;
color: var(--leta);
}
/*Dropdown en navbar (Extras)*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a:hover {
color: var(--dropdown-hover-text);
background-color: var(--dropdown-hover);
}
.dropdown-divider {
margin-top: -.1em;
}
.dropdown-content-2 {
min-height: 36px;
padding-top: 3px;
}
.dropdown-content a {
color: var(--dropdown);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
margin-left: -1em; /*Centrar dropdown*/
margin-top: .2em;
}
.invisible {
visibility: hidden;
}
.dropbtn {
background-color: transparent;
color: var(--letrafooternavbar);
font-weight: bold;
border: none;
padding-top: .6em;
padding-left: 1em;
padding-right: 1em;
}
/*Efecto hover circulos*/
.site-navbar ul li a {
color: var(--letrafooternavbar);
display: block;
text-decoration: none;
text-transform: uppercase;
}
ul.container {
margin: 0 auto;
padding: 1em 41.3em; /*Distancia elementos navbar (derecha)*/
text-align: center;
}
ul.container li {
color: var(--letrafooternavbar);
text-decoration: none;
font: 20px;
margin: 0px 10px;
padding: 10px 10px;
position: relative;
z-index: 0;
cursor: pointer;
}
ul.circleBehind li:before, ul.circleBehind li:after {
position: absolute;
top: 22px;
left: 50%;
width: 50px;
height: 50px;
border: 4px solid var(--efecto-navbar);
transform: translateX(-50%) translateY(-50%) scale(0.8);
border-radius: 50%;
background: transparent;
content: "";
opacity: 0;
transition: all 0.3s;
z-index: -1;
}
ul.circleBehind li:after {
border-width: 2px;
transition: all 0.4s;
}
ul.circleBehind li:hover:before {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1);
}
ul.circleBehind li:hover:after {
opacity: 1;
transform: translateX(-50%) translateY(-50%) scale(1.3);
}
/*Estilo del header*/
.header {
width: 100%;
padding:140px;
text-align: center;
background: var(--header);
color: var(--letrafooternavbar);
}
/*Estilo apartados de la web en home*/
.apartados {
padding-top: 40px;
}
.apartadosTitle {
padding-top: .3em;
}
.btn {
box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}
.btnHome {
color: var(--botones-text);
background: var(--botones-fondo);
border-color: var(--botones-border);
width: 10em;
height: 3em;
padding-top:10px;
text-transform: uppercase;
font-weight: 500;
}
.btnHome:hover {
color: var(--botones-text);
background: var(--botones-hover);
border-color: var(--botones-hover);
}
/*Estilo de paginación (usado en reviews)*/
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
font-size: 1.3em;
}
ul.pagination li {
display: inline;
}
ul.pagination li a {
color: var(--pagination-letra);
float: left;
padding: 8px 16px;
text-decoration: none;
}
ul.pagination li a.active {
background: var(--pagination-fondo);
color: var(--pagination-letra-active);
}
ul.pagination li a:hover:not(.active) {
background-color: var(--pagination-hover);
}
div.centerFooter {
padding-top: .5em;
text-align: center;
}
/*Estilo del footer*/
.footerMio {
margin-top: 2em;
background: var(--footer) !important;
}
.footerMio p {
color: var(--letrafooternavbar);
}
.footerMio h5 {
font-weight: bold;
color: var(--letrafooternavbar);
}
.footerList a {
color: var(--letrafooternavbar);
text-decoration: none;
text-transform: uppercase;
padding: 3px 3px;
position: relative;
z-index: 0;
cursor: pointer;
}
.footerList a:hover {
opacity: 50%;
}
.footerSocial {
padding-top: .5em;
}
.footerIcons {
max-width: 1.8em;
}
/*Estilo redes sociales footer*/
.footerimagerow {
display: inline-flex;
flex-wrap: wrap;
width: 75%;
margin-top: -.5em;
margin-left: -.15em;
z-index: 0;
}
.footerimagecolumn {
float: left;
flex: 10%;
background:url('') no-repeat 0 0;
z-index: 0;
}
.swap-on-hover img {
position: absolute;
}
.swap-on-hover .swap-on-hover__front-image {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover:hover > .swap-on-hover__front-image{
opacity: 0;
}
.swap-on-hover2 img {
position: absolute;
}
.swap-on-hover2 .swap-on-hover__front-image2 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover2:hover > .swap-on-hover__front-image2{
opacity: 0;
}
.swap-on-hover3 img {
position: absolute;
}
.swap-on-hover3 .swap-on-hover__front-image3 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover3:hover > .swap-on-hover__front-image3{
opacity: 0;
}
.swap-on-hover4 img {
position: absolute;
}
.swap-on-hover4 .swap-on-hover__front-image4 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover4:hover > .swap-on-hover__front-image4{
opacity: 0;
}
.swap-on-hover5 img {
position: absolute;
}
.swap-on-hover5 .swap-on-hover__front-image5 {
z-index: 9999;
cursor: pointer;
}
.swap-on-hover5:hover > .swap-on-hover__front-image5{
opacity: 0;
}
/*Preview test juegos*/
.previesTestBody {
visibility: visible !important;
}
.previewTest {
cursor: default;
}
.previewTitleTest {
text-align: center;
vertical-align: middle;
color: var(--letra);
margin-top: 5.3em;
font-size: 5em;
}
/*Estilo del tag filter*/
.enabledLabel {
border-radius: 5px;
padding: 10px;
display: inline-block;
margin-top: 5px;
font-weight: 600;
color: