.shelf{
    row-gap: 0!important;
    max-height: 80dvh !important;
    height: fit-content;
    padding: 0;
    margin: 0;
}

.shelf_container{
    display: inline-flex;
    flex-direction: column;
}

.shelf.vertical.one_line{
    display: grid;
    grid-template-columns: 11dvw;
}

.shelf div{
    display: grid;
    grid-template-columns: 11dvw;
    aspect-ratio: 1/1;
    padding: 0;
    margin: 0;
}

.shelf_container div.shelv_deco{
    aspect-ratio: auto;
    width: 100%;
    background-color: #ffffff00;
    background-size: contain;
    border-radius: 0 !important;
    padding: 0;
    margin: 0;
}

.shelf_container div.shelv_deco{
    height: 5.5dvw;
}

.shelf_container div.shelv_deco.top{
    background-image: url("../images/backgrounds/repisa_top.webp") !important;
}
.shelf_container div.shelv_deco.bottom{
    background-image: url("../images/backgrounds/repisa_bottom_variant.webp") !important;
}

.shelf div *{
    grid-area: 1/1;
    aspect-ratio: 1/1;
    width: 100%;
}

.shelf div .item{
    width: 76%!important;
    min-width: none !important;
    padding: 0;
    margin: 12%;
}

.shelf div .shelv{
    pointer-events: none;
    z-index: 2;
    grid-area: 1/1;
}

@media (orientation:portrait) or (max-width: 767px){

    .shelf.vertical.one_line{
        display: inline-flex;
        grid-template-columns: repeat(20dvw);
        grid-template-rows: 25vw;
        padding: auto;
        align-self: center;
        width: fit-content;
    }

    .shelf div{
        display: grid;
        grid-template-columns: 25dvw;
        aspect-ratio: 1/1;
        padding: 0;
        margin: 0;
    }

    .shelf div .item{
        width: 86%!important;
        padding: 0;
        margin: 7%;
    }

    .shelf_container div.shelv_deco{
        aspect-ratio: auto;
        width: 75dvw;
        height: 12.5dvw;
        background-color: #ffffff00;
        background-size: contain;
        border-radius: 0 !important;
        padding: auto;
        align-self: center;
    }
}

div.ticketer{
    display: grid;
    width: 100%;
    grid-template-columns: 100%;
    row-gap: 1rem;
    padding: 10% 0;
    margin: 0;
}

div.ticketer a{
    width: 100% !important;
    text-decoration: none;
}

div.train_ticket{
    padding: 0;
    margin: 0;
    display: grid;
    width: 100%;
    grid-template-columns: 60% 30%;
}

div.train_ticket:hover{
    animation: ticket_break 1s forwards;
    transform-origin: 50% 70%;
}

div.train_ticket div.text_ticket{
    aspect-ratio: 2/1;
    background-image: url("../images/backgrounds/boleto_texto.webp");
    background-size: contain;
    border-radius: 0 !important;
    color: black;
    text-decoration: none;
}

div.train_ticket div.text_ticket .text{
    text-align: center;
    align-items: center;     
    justify-content: center;
    width: 100%;
    height: 100%;
}

div.train_ticket div.text_ticket .text p{
    padding: 0;
    margin: 0;
}

div.train_ticket div.cut_ticket{
    aspect-ratio: 1/1;
    background-image: url("../images/backgrounds/boleto_corte.webp");
    background-size: contain;
    border-radius: 0 !important;
}

div.train_ticket div.cut_ticket *{
    aspect-ratio: 1/1;
    width: 70%;
    height: auto;
    padding: 12%;
    margin: 0;
    align-self: center;
}

@media (orientation:portrait) or (max-width: 767px){
    div.ticketer{
        width: 70dvw;
    }
}

div.ticket_boot{
    row-gap: 0!important;
    max-height: 80dvh !important;
    height: fit-content;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: auto;
    width: 100%;
}

div.ticket_boot div.ticket_deco{
    aspect-ratio: auto;
    width: 100%!important;
    background-color: #ffffff00;
    background-size: contain;
    border-radius: 0 !important;
    padding: 0;
    margin: 0;
}

div.ticket_boot div.ticket_deco.window{
    background-color:  #ffffff00!important;
    background-image: url("../images/backgrounds/ticket_mid.webp");
    background-size: contain;
    height: 100%;
    width: 100%!important;
    pointer-events: none;
    z-index: 2;
}

div.ticket_boot div.ticket_deco.top,div.ticket_deco.bottom{
    width: 100%;
    aspect-ratio: 2/1;
}
div.ticket_boot div.ticket_deco.top{
    background-image: url("../images/backgrounds/ticket_top.webp");
    grid-row: 1;
}
div.ticket_boot div.ticket_deco.bottom{
    background-image: url("../images/backgrounds/ticket_bottom.webp");
    grid-row: 3;
    aspect-ratio: 2/1;
}

.ticket_boot .ticket_window{
    overflow-x: auto;
    width: 76%;
    aspect-ratio: 4/5;
    padding-left: 14%;
    border-radius: 0;
}

.ticket_boot .ticket_window,.ticket_deco.window{
    grid-row: 2;
    grid-column: 1;
}

.circle{
    animation: circle 4s infinite ease;
}

.counter_circle{
    animation: counter_circle 4s infinite ease;
}

.mini_circle{
    animation: mini_circle 4s infinite ease;
}

.swing{
    animation: swing 4s infinite ease;
}

.swing_from_top{
    animation: swing 4s infinite ease;
    transform-origin: 50% 5%;
}

.swing_from_bottom{
    animation: swing 4s infinite ease;
    transform-origin: 50% 90%;
}

.pulse{
    display: inline-block;
    animation: pulse_lil 2s infinite ease;
}



@keyframes ticket_break {
  0% {
    transform: scale(1, 1); 
    gap: 0
  }
  60% {
    transform: scale(1.05, 1); 
    gap: 0
  }
  80% {

    transform: scale(1.05, 1); 
    gap: 5%
  }
  100% {
    transform: scale(1, 1); 
    gap: 5%
  }
}

@keyframes pulse_lil{
0%{
    transform: scale(1, 1); 
}
  50% {
    transform: scale(1.1, 1.1); 
  }
  100%{
    transform: scale(1, 1); 
  }
}

@keyframes swing{
    0%{
        transform: rotate(0deg); 
    }
    25%{
        transform: rotate(15deg); 
    }
    50% {
        transform: rotate(0deg); 
    }
    75%{
        transform: rotate(-15deg); 
    }
    100%{
        transform: rotate(0deg); 
    }
}

@keyframes circle{
  0% {
    transform: translate(-1rem,0) rotate(12deg);
  }
  12% {
    transform: translate(-0.8rem,0.8rem);
  }
  25% {
    transform: translate(0,1rem) rotate(12deg);
  }
  37%{
    transform: translate(0.8rem,0.8rem);
  }
  50% {
    transform: translate(1rem,0) rotate(12deg);
  }
  62%{
    transform: translate(0.8rem,-0.8rem);
  }
  75% {
    transform: translate(0,-1rem) rotate(12deg);
  }
  87%{
    transform: translate(-0.8rem,-0.8rem);
  }
  100%{
    transform: translate(-1rem,0) rotate(12deg);
  }
}

@keyframes counter_circle{
  0% {
    transform: translate(1rem,0) rotate(12deg);
  }
  12% {
    transform: translate(0.8rem,-0.8rem);
  }
  25% {
    transform: translate(0,-1rem) rotate(12deg);
  }
  37%{
    transform: translate(-0.8rem,-0.8rem);
  }
  50% {
    transform: translate(-1rem,0) rotate(12deg);
  }
  62%{
    transform: translate(-0.8rem,0.8rem);
  }
  75% {
    transform: translate(0,1rem) rotate(12deg);
  }
  87%{
    transform: translate(0.8rem,0.8rem);
  }
  100%{
    transform: translate(1rem,0) rotate(12deg);
  }
}

@keyframes mini_circle{
  0% {
    transform: translate(-0.5rem,0) rotate(12deg);
  }
  12%{
    transform: translate(-0.4rem,-0.4rem);
  }
  25% {
    transform: translate(0,-0.5rem) rotate(12deg);
  }
  37%{
    transform: translate(0.4rem,-0.4rem);
  }
  50% {
    transform: translate(0.5rem,0) rotate(12deg);
  }
  62%{
    transform: translate(0.4rem,0.4rem);
  }
  75% {
    transform: translate(0,0.5rem) rotate(12deg);
  }
  87%{
    transform: translate(-0.4rem,0.4rem);
  }
  100%{
    transform: translate(-0.5rem,0) rotate(12deg);
  }
}

@keyframes mini_circle_copy{
  0% {
    transform: translate(-0.5rem,0) rotate(12deg);
  }
  12% {
    transform: translate(-0.4rem,0.4rem);
  }
  25% {
    transform: translate(0,0.5rem) rotate(12deg);
  }
  37%{
    transform: translate(0.4rem,0.4rem);
  }
  50% {
    transform: translate(0.5rem,0) rotate(12deg);
  }
  62%{
    transform: translate(0.4rem,-0.4rem);
  }
  75% {
    transform: translate(0,-0.5rem) rotate(12deg);
  }
  87%{
    transform: translate(-0.4rem,-0.4rem);
  }
  100%{
    transform: translate(-0.5rem,0) rotate(12deg);
  }
}