@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

:root {
 --ca-white: #fff;
 --ca-Black: #000;
 --ca-Black-opa: #00090;
 --ca-white-opa: #ffffff90;
 --ca-main: #0E74BC;
 --ca-help:#ffb703;
 --ca-high: #fb8500;
 --ca-comp: #219ebc;
 --ca-font-main: 'Montserrat', sans-serif;
}

/* FORMAT PARAGRAPHS */

h3 {
    font-size: 1rem;
    font-weight: 400;
}

p {
    font-size: 0.8rem;
    font-weight: 400;
}

a {
    text-decoration: none;
    color: var(--ca-main);
}

.bold-text {
    font-weight: 600;
}

.heavy-text {
    font-weight: 800;
}

/* INDEX */

.index-container {
    width: 100vw;
    height: 100svh;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}

.bk-image,
.bk-extra {
    display: grid;
    width: 100%;
    height: 100%;
    align-content: center;
}

.bk-image{
    background-color: var(--ca-main);
}
.bk-extra{
    background-color: var(--ca-Black);
}

.bk-image img {
    max-width: 420px;
    padding: 0 24px;
    margin: auto;
}


/* LOGIN - REGISTER */

.index-login-container {
    background-color: var(--ca-white);
    border-radius: 24px;
    padding: 24px 24px;
    margin: auto;
    width: 80%;
}

.index-login-buttons {
    display: grid;
    grid-template-rows: 1fr;
    gap: 12px;
    padding: 12px 0;
}

.index-login-buttons input {
    border: none;
    background-color: #a6a8b521;
    padding: 8px 24px;
    font-weight: 400;
}

.index-login-title {
    margin-bottom: 12px;
}

.main-button {
    border: none;
    padding: 12px;
    border-radius: 24px;
    background-color: var(--ca-main);
    color: var(--ca-white);
    box-shadow: 2px 2px 10px #00000069;
    cursor: pointer;
    text-align: center;
}

.reg-button {
    background-color: var(--ca-white);
    color: #000;
}
.opacity-button {
    background-color: var(--ca-white-opa);
    border: 1px solid var(--ca-white);
    color: var(--ca-white);
    transition: all 0.3s ;  

    }

.opacity-button:hover {
    background-color: var(--ca-white);
    border: 1px solid var(--ca-white);
    color: var(--ca-Black);
}

.index-login-container p {
    text-align: center;
    margin-bottom: 12px;
}

.login-language {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 0 48px;
    text-align: center;
}

.login-language .active-lang {
    opacity: 1;
}

.login-language img {
    opacity: 0.5;
    max-height: 48px;
    
}
.login-language img:hover {
    opacity: 1;
}

/* NAVBAR */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px 0 0;
    position: fixed;
    top: 0;
    background-color: var(--ca-main);
    width: 100vw;
    height: 72px;
    z-index: 99999;
}

.nav #empresa-nav-logo img {
    height: 72px;
}
.nav .nav-monedas-container h3 {
    line-height: 3rem;
    padding-right: 12px;
    font-size: 1.3rem;
}

.nav-monedas-container {
    display: flex;
    justify-content: space-between;
    height: 48px;
    background-color: var(--ca-white);
    border-radius: 48px;
    padding: 0 12px;
}

.nav-monedas-container img {
    height: 48px;
}

/* HOME */

.subastas-wrapper {
    padding: 24px 48px;
    text-align: center;
    background-color: var(--ca-high);
    margin: 12px 48px;
    border-radius: 12px;
    color: white;
}

.subastas-wrapper h2 {
    padding: 0 0 12px;
}

.separador{
    margin-top: 72px;
}

.hero-container {
    position: relative;
    background-color: var(--ca-high);
    height: 480px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}

.hero-home-bk {
    background-image: url(./img/images/GettyImages-1450110363.webp);
}
.hero-momentos-bk {
    background-image: url(./img/images/maradona_argentina_vs_inglaterra.webp);
}

.hero-text-section {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    text-align: center;
    color: white;
}

.hero-overlay {
    width: 100%;
    height: 100%;
    background-color: #000000a6;
    position: absolute;
    top: 0;
    left: 0;
}

.hero-text-section h1{
    font-size: 3rem;
    padding: 4px 0 8px;
}

.hero-text-section h3{
    padding-bottom: 24px;
}

/* SECCIONES */
.exhibiciones-container {
    padding: 24px 48px;
}


.entretenimiento-container {
    padding: 24px 48px;
}

.section-title {
    padding-bottom: 12px;
}

.section-columnas {
    flex-grow: 3;
    display: flex;
    overflow: hidden;
    flex-direction: row;
}

.section-columnas a {
    width: 98%;
    margin: 6px;
}

.exhibicion-wrapper {
    display: flex;
}
.exhibicion-wrapper a{
    width: 100%;
    height: 100%;
}

.subastas-link {
    border-radius: 12px;
    overflow: hidden;
    margin: 6px;
}

.section-subastas img {    
    width: 250px;
}

.item-image {
    width: 100%;
    height: 100%;background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s;
}

.section-item-text {
    background-color: #000000ac;
    color: white;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 6px 12px;
}

#exhibiciones-item-1 {
    background-image: url(./img/images/maradona_argentina_vs_inglaterra.webp);
}

#exhibiciones-item-2 {
    background-image: url(./img/images/kempes_862x485_wmk.webp);
}

#juegos-item-1 {
    background-image: url(./img/images/Album_seleccion.webp);
}
#juegos-item-2 {
    background-image: url(./img/images/trivia.jpg);
}
#juegos-item-3 {
    background-image: url(./img/images/Memoria.jpg);
}
#juegos-item-4 {
    background-image: url(./img/images/Pareja.webp);
}

#momentos-item-1 {
    background-image: url(./img/images/momentos/momentos1.webp);
}
#momentos-item-2 {
    background-image: url(./img/images/momentos/momentos2.jfif);
}
#momentos-item-3 {
    background-image: url(./img/images/momentos/momentos3.webp);
}

.section-item:hover>.item-image
 {
    transform: scale(1.05);
}

.section-item {
    
    width: 100%;
    overflow: hidden;
    height: 320px;
    position: relative;
    border-radius: 12px;
    box-shadow: 2px 2px 10px #00000069;
}


/* FOOTER NAV */
.footer-nav {
    width: 100%;
    z-index: 999;
    background-color: var(--ca-main);
    position: fixed;
    bottom: 0;
    text-align: center;
    color: var(--ca-white);
    transition: bottom 0.3s;
}

.footer-nav img {
    height: 48px;
}

.menu-open {
    background-color: var(--ca-main);
    width: 88px;
    height: 88px;
    padding-top: 12px;
    border-radius: 100%;
    position: absolute;
    top: 0;
    right: 50%;
    transform: translate(50%, -50%);
    cursor: pointer;
}

.footer-opciones {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    margin-top: 48px;
    padding: 0 12px;
}

.opciones-item {
    padding: 0px 0px 24px;
    width: 88px;
    transition: all 0.3s;
}

.opciones-item a p {
    color: var(--ca-white);
}

.footer-oculto {
    position: fixed;
    bottom: -100px;
    left: 0;
    transition: height 0.3s ease-in-out;
}

.opciones-item:hover {
  transform: translateY(-10px);
}

.footer-margin-offset {
  height: 68px;
}


/* MOMENTOS */
.momentos-columnas {
    width: 100%;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.momentos-columnas img {
    width: 100%;
    max-width: 620px;
    padding-bottom: 12px;
}

.momentos-columnas h3 {
    max-width: 780px;
    padding-bottom: 48px;
}

/* ALBUM */

.album-container {
    padding:  24px 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.album-grid-container {
    align-self: center;
    display: grid;
    width: 60%;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}

.album-grid-container img {
    width: 100%;
}

.album-sponsor {
    grid-column: span 3;
}

.popup-image {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    color: white;
    background-color: #000000a1;
    display: none;
}

.popup-image img {
    max-width: 80vw;
    max-height: 80vh;
    padding: 12px 0;
}

/* TRIVIA */
.trivia-container {
    padding: 24px 48px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.trivia-timer {
    width: 100%;
    height: 18px;
    background-color: var(--ca-Black);
    margin: 8px 0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.trivia-wrapper {
    max-width: 480px;
    align-self: center;
}

.trivia-filler {
    width: 100%;
    height: 24px;
    background-color: var(--ca-high);
    position: absolute;
    top: 0;
    left: 0;
    animation-name: timerCount;
    animation-duration: 20s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
}

@keyframes timerCount {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
    
}

.trivia-quiz {
    width: 100%;
}

.trivia-respuestas .main-button {
    margin: 12px 0;
    width: 100%;
}

.trivia-image-container img {
    width: 100%;
}

.trivia-pregunta {
    text-align: center;
}

/* MEMORIA */
.memoria-container {
    padding: 24px 48px;
    display: flex;
    flex-direction: column;
    
}

.memoria-wrapper {
    align-self: center;
    display: grid;
    justify-content: center;
    width: 100%;
    gap: 24px;
    grid-template-columns: repeat(4, auto);
    align-self: center;
}

.memoria-wrapper img{
    width: 100%;
    max-width: 250px;
}

.memoria-item {
    position: relative;
    overflow: hidden;
}

.memoria-item:hover .memoria-item-folder {
    transition: all 1.3s;
    top: -250px;
}

.memoria-item-folder {
    background-image: url(./img/images/album/memoria-back.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* CONECTA */
.conecta-container {
    padding: 24px 48px;
    flex-direction: column;
    display: flex;

}

.conecta-wrapper {
    align-self: center;
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    width: 60%;
}

.conecta-item {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-bottom: 6px;

}

.conecta-item img {
    max-height: 150px;
}

.conecta-item:hover .memoria-item-folder {
    transition: all 1.3s;
    top: -250px;
}

/* SUBASTAS */


.subasta-container {
    padding: 24px 48px;
    display: flex;
    flex-direction: column;
}

.subastas-wrap {
    width: 60%;
    margin: auto;
}

.subasta-item img {
    width: 120px;
}

.subasta-item {
    display: flex;
    flex-direction: column;
    border: 1px solid #00000069;
    padding: 12px;
    border-radius: 12px;
    gap: 12px;
    background-color: #ebeaea73;
    margin-bottom: 12px;
}

.subasta-header {
    display: flex;
    gap: 12px;
}

.subasta-datos {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.subasta-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.subasta-img {
    min-width: 120px;
    overflow: hidden;
    justify-self: center;
    align-self: center;
}

.subasta-item-info {
    flex-grow: 1;
}

.subasta-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* MEDIA QUERYS */

@media only screen and (max-width: 980px) {

    .index-container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
    }
    
    .section-columnas {
        flex-wrap: wrap;
    }
    .section-columnas a {
        max-width: 46%;
    }
}

@media only screen and (max-width: 680px) {

    /* Navbar */
    .nav {
        height: 58px;
    }
    
    .nav #empresa-nav-logo img {
        height: 58px;
    }
    .nav .nav-monedas-container h3 {
        font-size: 1rem;
        padding-right: 12px;
        line-height: 2.7rem;
    }
    
    .nav-monedas-container {
        display: flex;
        height: 42px;
        background-color: var(--ca-white);
        border-radius: 48px;
    }
    
    .nav-monedas-container img {
        height: 42px;
    }

     /* HOME */

     .subastas-wrapper {
        margin: 12px;
     }
     
     .separador {
        margin-top: 58px;
    }

    .hero-text-section {
        width: 100%;
        padding: 0 24px;
    }

    .hero-text-section h1{
        font-size: 2.5rem;
    }
    .hero-text-section h3 {
        padding-bottom: 12px;
    }

    /* SECCIONES */

    .subasta-container {
        padding: 12px;
    }
    .exhibicion-wrapper {
        flex-direction: column;
    }

    .exhibiciones-container {
        padding: 12px;
    }

    .entretenimiento-container {
        padding: 12px;
    }

    .section-columnas {
        flex-direction: column;
    }

    .section-columnas a {
        max-width: 98%;
    }

    .section-item {
        height: 220px;
    }

    /* ALBUM */

    .album-container {
        padding:  12x;
    }
    
    .album-grid-container {
        gap: 4px;
        width: 100%;
    }
    
    /* TRIVIA */
    .trivia-container {
        padding: 12px;
    }
    
    /* MEMORIA */
    .memoria-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    
    /* CONECTA */
    .conecta-container {
        padding: 12px;
    }
    
    .conecta-wrapper {
        display: grid;
        grid-template-columns: 80px 1fr 80px;
        width: 100%;
    }
    
    .conecta-item img {
        max-height: 80px;
    }
    
    /* SUBASTA */
    .subastas-wrap {
        width: 100%;
    }

    .subasta-item-info h2 {
        font-size: 1.1rem;
    }

}



/* Google */
.gsi-material-button {
  background-color: WHITE;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  min-width: min-content;
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: #303030;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: #303030;
  opacity: 8%;
}