:root {
    --color-border: #e5e5e5;
    --color-primary: #2962ff;
    --color-primary-rgb: 41, 98, 255;

    --color-secondary: #6c757d;
    --color-success: #198754;
    --color-info: #0dcaf0;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-light: #f8f9fa;
    --color-dark: #212529;

    --bs-gray-200: #e9ecef;

    --gi-yellow: #ffd21e;
    --gi-yellow-rgba: rgba(255, 210, 30, 1);
    --gi-yellow-dark: #c4a217;
    --gi-yellow-dark-rgba: rgba(195, 162, 23, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 62.5%;
    line-height: 1.6;
    color: #000000;
}

body {
    font-size: 1.6rem;
    padding-top: 0px;
    background-color: #fff;
}

/* ------------- TITULOS Y TEXTOS ------------- */
h1,
h2 {
    font-family: "Lilita One", cursive;
}

h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: "Outfit", Sans-serif;
}

h1,
h2 {
    color: #515191;
}

h1 {
    font-size: 2em;
}
h2 {
    font-size: 1.5em;
}
h3 {
    font-size: 1.17em;
}
h4 {
    font-size: 1em;
}
h5 {
    font-size: 0.83em;
}
h6 {
    font-size: 0.67em;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

.fixed-top {
    top: -40px;
    transform: translateY(40px);
    transition: transform 0.3s;
}

.form-control {
    font-size: 1.6rem;
}

.btn {
    --bs-btn-font-size: 1.6rem;
    font-size: var(--bs-btn-font-size);
}

/* LINKS */
a {
    box-shadow: none;
    text-decoration: none;
}

a {
    outline: none;
    color: #111;
    text-decoration: none;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(currentColor),
        to(currentColor)
    );
    background: -webkit-linear-gradient(
        left,
        currentColor 0%,
        currentColor 100%
    );
    background: linear-gradient(to right, currentColor 0%, currentColor 100%);
    background-size: 0 5%;
    background-repeat: no-repeat;
    background-position: left 100%;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    display: inline;
}

ul a, p a, ol a {
    color: var(--color-warning);
    text-decoration: underline;
    font-weight: bold;
}

.nav-link {
    color: white;
}

.nav-item::after {
    content: "";
}

/* IMAGENES */
img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.4s;
}

.zoom img:hover {
    transform: scale(
        1.1
    ); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ------------- COLORES ------------- */
.gi_negro {
    background-color: #000;
}

.gi_blanco {
    background-color: #fff;
}

.gi_azul {
    background-color: #8787f5;
}

.gi_azul_oscuro {
    background-color: #515191;
}

.gi_rosa {
    background-color: #ff7bac;
}

.gi_rosa_oscuro {
    background-color: #b05577;
}

.gi_amarillo {
    background-color: var(--gi-yellow);
}

.gi_amarillo_oscuro {
    background-color: var(--gi-yellow-dark);
}

.gi_verde {
    background-color: #33f092;
}

.gi_verde_oscuro {
    background-color: #29bf74;
}

.gi_cian {
    background-color: #33ddf0;
}

.gi_cian_oscuro {
    background-color: #2bbbcc;
}

.fnt_amarillo {
    color: var(--gi-yellow);
}

/* ------------- APLICACIONES VARIAS ------------- */
/* https://www.cssmatic.com/es/box-shadow */
.borderbox {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #000;
    padding: 14px 14px 14px 14px;
    box-shadow: 6px 6px 0 0 #000;

    -webkit-box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 1);
    box-shadow: 0px 15px 0px 0px rgba(0, 0, 0, 1);
}

.justborderbox {
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    padding: 2px;
}

.borderbox-blue {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #515191;
    padding: 14px 14px 14px 14px;
    box-shadow: 6px 6px 0 0 #515191;

    -webkit-box-shadow: 0px 15px 0px 0px rgba(81, 81, 145, 1);
    -moz-box-shadow: 0px 15px 0px 0px rgba(81, 81, 145, 1);
    box-shadow: 0px 15px 0px 0px rgba(81, 81, 145, 1);
}

.borderbox-juegos-blue {
    border-style: solid;
    border-width: 1px;
    border-color: #515191;
    padding: 0px;
    padding-bottom: 10px;
    box-shadow: 6px 6px 0 0 #515191;

    -webkit-box-shadow: 0px 15px 0px 0px rgba(81, 81, 145, 1);
    -moz-box-shadow: 0px 15px 0px 0px rgba(81, 81, 145, 1);
    box-shadow: 0px 15px 0px 0px rgba(81, 81, 145, 1);
}

.borderbox-yellow {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: var(--gi-yellow);
    padding: 14px 14px 14px 14px;
    box-shadow: 6px 6px 0 0 var(--gi-yellow);

    -webkit-box-shadow: 0px 15px 0px 0px var(--gi-yellow-rgba);
    -moz-box-shadow: 0px 15px 0px 0px var(--gi-yellow-rgba);
    box-shadow: 0px 15px 0px 0px var(--gi-yellow-rgba);
}

.borderbox-orange {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #c3a217;
    padding: 14px 14px 14px 14px;
    box-shadow: 6px 6px 0 0 #c3a217;

    -webkit-box-shadow: 0px 15px 0px 0px rgba(195, 162, 23, 1);
    -moz-box-shadow: 0px 15px 0px 0px rgba(195, 162, 23, 1);
    box-shadow: 0px 15px 0px 0px rgba(195, 162, 23, 1);
}

.borderbox-white {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #fff;
    padding: 14px 14px 14px 14px;
    box-shadow: 6px 6px 0 0 #fff;

    -webkit-box-shadow: 0px 15px 0px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 15px 0px 0px rgba(255, 255, 255, 1);
    box-shadow: 0px 15px 0px 0px rgba(255, 255, 255, 1);
}

.centerbox {
    box-sizing: border-box;
    border-left: solid #000 2px;
}

.separador_doble {
    border-style: solid;
    border-width: 2px 0 2px 0;
    border-color: #333;
    transition: background 0.3s, border 0.3s, border-radius 0.3s,
        box-shadow 0.3s;
    margin-top: -2px;
    margin-bottom: 0;
    padding: 50px 0 70px 0;
}

.separador_medio {
    border-style: solid;
    border-width: 1px 0 1px 0;
    border-color: #333;
    transition: background 0.3s, border 0.3s, border-radius 0.3s,
        box-shadow 0.3s;
    margin-top: -2px;
    margin-bottom: 0;
    padding: 5px 0;
}

.separador_simple {
    border-style: solid;
    border-width: 2px 0 0 0;
    border-color: #333;
    transition: background 0.3s, border 0.3s, border-radius 0.3s,
        box-shadow 0.3s;
    margin-top: -2px;
    margin-bottom: 0;
}

/* POSTEOS HOME IZQUIERDA */
.contenedor-de-posteos {
    gap: 50px;
}

.contenedor-de-posteos .horizontal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 30px 30px;
    z-index: 99;
}

.horizontal .posteo {
    width: 100%;
    float: left;
    position: relative;
}

.posteo {
    width: 100%;
    float: left;
    position: relative;
}

.posteo h3 {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;

    font-weight: 600;
    text-transform: capitalize;
}

.posteo-categoria:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 1200px;
    background: #111;
    top: 6px;
    left: 0;
}

.posteo-categoria {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 15px;
    overflow: hidden;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.2rem;
    text-transform: uppercase;
}

.posteo-categoria-info {
    float: left;
    position: relative;
    background: #fff;
    font-weight: 600;
    padding: 0 10px 0 0;
}

.posteo-fecha {
    margin-bottom: 0;
    float: right;
    position: relative;
    background: #fff;
    padding: 0 10px;
    margin-right: 10px;
}

.posteo-copete {
    width: 100%;
    float: left;
}

.leermas {
    float: left;
    width: 100%;
    margin-top: 2rem;
    position: relative;
    overflow: hidden;
}

.leermas:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 1200px;
    background: #111;
    z-index: 0;
    bottom: 48%;
}

.leermasinterior {
    float: right;
    font-size: 1.2rem;
    font-weight: 500;
    width: auto;
    text-align: right;
    background: #ffd21e;
    padding: 0 10px;
    position: relative;
    border: 2px solid#111;
}

/* LISTADO DE JUEGOS */
.destacado img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.juegopost-post {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.juego-link,
.juegospost-titulo {
    font-size: 1.6rem;
}

.juegopost-thumb {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
}

.juegopost-article {
    float: left;
    width: 100%;
}

.juegopost-article span {
    float: left;
    width: 100%;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.juegopost-article span a {
    color: #000;
    font-weight: 600;
}

.juegopost-article h6 {
    font-weight: 600;
    text-transform: capitalize;
}

.dias img {
    margin: 0px 5px;
}

.h20 img {
    height: 20px;
}

.h30 img {
    height: 30px;
}

.related {
    min-height: 100px;
}

/* NOTICIAS */
.texto {
    padding: 20px;
}

.singletitle-wrapper {
    display: grid;
    justify-content: center;
    align-items: center;
    float: left;
    width: 100%;
    position: relative;
    grid-template-columns: repeat(12, 1fr);
    gap: 15px 0;
    background: #111;
    border: 2px solid#111;
}
.singletitle-prev {
    grid-column-start: 1;
    grid-column-end: 3;
    position: relative;
}
.singletitle-title {
    grid-column-start: 3;
    grid-column-end: 13;
    position: relative;
    padding: 30px;
    width: 100%;
    height: 100%;
    background: #f9f9f9;
}
.singletitle-wrapperimage {
    display: grid;
    float: left;
    width: 100%;
    position: relative;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 0;
}
.singlemidle-wrapper {
    position: relative;
    width: 100%;
    float: left;
}
.singletitle-time {
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}
.singletitle-date {
    position: relative;
    margin-bottom: 5px;
}
.singletitle-date h1 {
    color: #fff;
    margin-bottom: 10px;
}
.singletitle-year {
    text-transform: uppercase;
    font-size: 1.2rem;
    position: relative;
    clear: left;
    color: #ccc;
}

.entry-headerdefault .entry-title {
    margin-bottom: 15px;
    text-align: left;
}

.coauthor-wrapper {
    position: relative;
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px 15px;
    overflow: hidden;
}
.coauthor-wrapper:before {
    content: "";
    position: absolute;
    height: 2px;
    width: 1200px;
    background: #111;
    bottom: 49%;
}
.submeta-singlepost {
    position: relative;
    width: 100%;
    float: left;
}
.submeta-singlepost {
    font-size: 12px;
    text-transform: uppercase;
}

.crumbs {
    float: left;
    background: #fff;
    padding: 9px 10px 9px 0;
    margin-right: 15px;
}
.submeta-singlepost a {
    font-weight: 600;
}

.head-date {
    float: left;
    background: #fff;
    padding: 9px 10px;
}
.head-date {
    margin-bottom: 0;
    float: right;
    position: relative;
    font-weight: 500;
}
.share-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 0 10px;
}

.features-onsinglepost {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

.features-onsinglepost a:hover {
    color: #111 !important;
    background-size: 100% 100%;
}
.features-onsinglepost a {
    outline: none;
    color: #fff;
    font-weight: 600;
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(currentColor),
        to(currentColor)
    );
    background: -webkit-linear-gradient(
        left,
        currentColor 0%,
        currentColor 100%
    );
    background: linear-gradient(to right, #ffbd3a 0%, #ffbd3a 100%);
    background-size: 0px 100%;
    background-repeat: no-repeat;
    background-position: left 100%;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    display: inline;
}

#tweet-quote,
#pin-image,
#facebook-share {
    position: relative;
    z-index: 2;
    background-color: #111;
    color: white;
    text-transform: uppercase;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
    font-size: 1rem;
}

/* ACTIVIDADES */
.actividad-post {
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 25% 1fr;
    gap: 15px 20px;
    overflow: hidden;
}

.actividad-post :after,
.actividad-post :before {
    box-sizing: border-box;
}

.actividad-post img {
    height: auto;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.actividad-article {
    float: left;
    width: 100%;
}

.actividad-article span {
    float: left;
    width: 100%;
    font-size: 11px;
    line-height: 14px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.actividad-thumb {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
}

.actividad-article span a {
    color: #000;
    font-weight: 600;
}

.actividad-post a {
    box-shadow: none;
    text-decoration: none;
}

.actividad-article h6 {
    font-family: "Outfit", Sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-transform: capitalize;
    line-height: 1.2em;
}

/* FOOTER DEL SITIO */

.footer-gi {
    padding: 4rem 0;
    background: #000;
    color: #777;
}
.footer-gi .footer-site-logo {
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    margin-bottom: 30px;
    display: block;
}
.footer-gi h3 {
    color: #fff;
    margin-bottom: 20px;
}
.footer-gi .links li {
    margin-bottom: 10px;
}
.footer-gi .links li a {
    color: #999;
}
.footer-gi .links li a:hover {
    color: #fff;
}
.footer-gi .link-menu li {
    display: inline-block;
}
.footer-gi .link-menu li a {
    color: #fff;
    display: inline-block;
    padding: 10px;
}
.footer-gi .link-menu.nav-left li:first-child a {
    padding-left: 0;
}
.footer-gi .link-menu.nav-right li:last-child a {
    padding-left: 0;
}
.footer-gi .social li {
    display: inline-block;
}
.footer-gi .social li a {
    display: inline-block;
    padding: 10px;
    color: #ccc;
}
.footer-gi .social li:last-child a {
    padding-right: 0;
}
.footer-gi .line {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.caminito {
    width: 100%;
    text-align: center;
}

.caminito ul {
    list-style: none !important;
    padding-left: 0rem !important;
}

.caminito .item {
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #515191;
    padding: 5px 5px 5px 5px;
    box-shadow: 3px 3px 0 0 #515191;

    -webkit-box-shadow: 0px 5px 0px 0px rgba(81, 81, 145, 1);
    -moz-box-shadow: 0px 5px 0px 0px rgba(81, 81, 145, 1);
    box-shadow: 0px 5px 0px 0px rgba(81, 81, 145, 1);

    margin-bottom: 10px;
}

.caminito .activo {
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-color: #8787f5;
    padding: 5px 5px 5px 5px;
    box-shadow: 3px 3px 0 0 #8787f5;

    -webkit-box-shadow: 0px 5px 0px 0px rgba(135, 135, 245, 1);
    -moz-box-shadow: 0px 5px 0px 0px rgba(135, 135, 245, 1);
    box-shadow: 0px 5px 0px 0px rgba(135, 135, 245, 1);
}

.arrow-down {
    &:after {
        content: "\25bc";
        padding-left: 0.5em;
    }
}

/*pagination*/
.next-prev-wrap {
    border: 1px solid #e1e1e1;
    padding: 40px;
}
.next-prev-wrap.next-wrap {
    text-align: right;
}
.next-prev-wrap.next-wrap .item-icon i {
    margin-right: 0;
    margin-left: 8px;
}
.next-prev-wrap .item-icon {
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 700;
}
.next-prev-wrap .item-icon a {
    color: #7a7e83;
}
.next-prev-wrap .item-icon a:hover {
    color: var(--color-primary);
}
.next-prev-wrap .item-icon i {
    margin-right: 8px;
}
.next-prev-wrap .content .title {
    font-weight: 600;
    color: #111111;
}
.next-prev-wrap .content .title a {
    color: inherit;
}
.next-prev-wrap .content .title:hover {
    color: var(--color-primary);
}

.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #e9ecef;
    border-left-width: 1.25rem;
    border-radius: 0.25rem;
    background-color: var(--bs-gray-200);
}

.bd-callout-primary {
    border-left-color: var(--color-primary);
}
.bd-callout-info {
    border-left-color: var(--color-info);
}
.bd-callout-warning {
    border-left-color: var(--color-warning);
}
.bd-callout-danger {
    border-left-color: var(--color-danger);
}