@import "~bulma"

@font-face 
  font-family: 'Pacifico'
  font-style: normal
  font-weight: 400
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2')
  font-display: swap


.img-shop
    padding: 5px

.img-shop :hover
    padding: 0px 


[data-badge]::after 
    display: inline-block
    position: absolute
    margin: 0
    padding: .1rem .25rem
    text-align: center
    white-space: nowrap
    line-height: 1
    background: #ea3c3c
    background-clip: padding-box
    border-radius: 0
    box-shadow: 0 0 0 1px #fff
    color: #ea3c3c
    content: attr(data-badge)
    z-index: 99
    border-radius: 999999px

[data-badge]::after 
    min-width: 0.75rem
    min-height: .75rem
    font-size: .25rem
    bottom: auto
    left: 25px
     
.img-hover-zoom--zoom-n-rotate .imgProduct 
  transition: transform 2s
  transform: scale(0.7)
  transition-timing-function: ease-in

/* The Transformation */
.img-hover-zoom--zoom-n-rotate:hover .imgProduct 
  transform: scale(0.9)

.imgProduct
    animation-name: zoomIn
    animation-duration: 2s

@keyframes zoomIn 
    from
        opacity: 0.7
        transform: scale3d(0.6, 0.6, 0.8)

    50%
        opacity: 1
        transform: scale3d(0.7, 0.7, 0)

.productBox
    animation-duration: 2s
    animation-name: bounceOut

.productBox :hover
    animation-duration: 2s
    animation-timing-function: ease
    animation-name: hoverProduct
    animation-direction: alternate

@keyframes hoverProduct 
    from
        opacity: 1
    50%
        opacity: 0.7
    100%
        opacity: 1


@keyframes bounceOut 
   0%
        opacity: 0
        transform: translate3d(0, 50%, 0)


   100%
        opacity: 1 
        transform: scale3d(1, 1, 1)

.fromleft
    animation-name: FromLeft
    animation-duration: 2.5s

@keyframes FromLeft 
    from
        opacity: 0.7
        transform: translate3d(100%, 0, 0)
    50%
        opacity: 1
        transform: translate3d(0, 0, 0)

.allpictures
    animation-name: zoomIn
    animation-duration: 2.5s
    flex-direction: row

.Line_itemMobile
    display: none

@media only screen and (max-width:770px)
    .allpictures
        flex-direction: column
        width: 1
    .box
        padding: 0
        box-shadow: none

    .productBox
        padding: 30px

    .hero-body
        padding: 3rem 0.5rem
    .Line_item
        display: none
    .Line_itemMobile
        display: block