/* dienshop-paneles.css — Panneaux #como, #efectos, panel-fd, fx-block, labels/ganchos */

/* ======= PANELS & FX-BLOCK (Source: dsindex-ticket.css — section panels) ======= */
.panel {
    margin: 0;
    padding: 0
}
.panel-fd {
    height: auto;
    margin-top: -20px;
    position: absolute;
    right: 0;
    width: auto
}

/* Souris uniquement : hover animé */
@media (hover: hover) {
    .panel-fd {
        cursor: pointer;
        transition: transform 0.5s ease
    }
    .panel-fd:hover {
        transform: translateX(110%)
    }
}
/* Touch (mobile/iPad) : image semi-cachée, immobile */
@media (hover: none) {
   .panel-fd {
        transform: translateY(-59px);
        width: 60%;
    }
}
@media only screen and (min-width: 768px) {
 .panel-fd {
        transform: translate(90px, -21px);
        width: 30%;
    }
}
.content {
    border-bottom: 2px solid #ffffff;
    margin: 0 auto;
    max-width: 1020px;
    padding: 20px
}
.fx-block {
    border: 1px solid #A6A6A6;
    font-size: 1.1em;
    margin-bottom: 20px;
    padding: 0;
    width: 100%;
    border-radius: 10px;
}
.inst-content a {
    color: #007abc;
    text-decoration-style: wavy !important;
    text-decoration-color: brown !important;
}
.fx-block h2 {
    color: #990033;
    font-family: georgia, serif;
    font-size: 2.5em;
    font-weight: 400;
    padding-top: 20px;
    text-shadow: 1px 1px 2px #ffffff;
}
.inst-bloc {
    display: flex;
    align-items: flex-start;
    gap: 0;
    border: 1px solid #ddd;
    padding: 10px;
}
.inst-content {
    flex: 1;
    order: 2;
}
.inst-content h3 {
    color: #007abc;
    font-size: 1.5em;
    font-weight: 400;
    padding: 5px 0 5px 0
}
.inst-content p {
    display: inline-block;
    padding: 3px 0 10px 0;
}
.inst-content a {
    color: #007abc;
    text-decoration-color: #990033 !important;
    text-decoration: underline wavy;
}
.inst-content a:hover {color: #990033;}
.inst-url   { display: block; clear: both; margin: 5px 10px 10px; font-style: italic; }

/*==========SEPARATOR=========*/
.separador {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    position: relative;
    width: 85%
}

.separador .mask {
    overflow: hidden;
    height: 20px
}

.separador .mask:after {
    border-radius: 160px / 10px;
    box-shadow: 0 0 5px #505050;
    content: "";
    display: block;
    height: 25px;
    margin: -25px auto 0;
    width: 100%
}

/*==========*/
.icono {
    float: left;
    margin-right: 10px;
    max-width: 80px
}

.icono-alert {
    float: left;
    margin-right: 5px;
    margin-top: 2px;
    max-width: 18px
}
.fx-block .icono-circle {
    float: left;
    height: auto;
    margin: -23px 10px 15px -10px;
    max-width: 100px;
}
.inst-bloc .icono-circle {
    float: left;
    height: auto;
    margin-right: 10px;
    margin-top: -20px;
    max-width: 100px;
    padding-top: 10px;
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
}
.yang {
    background-image: url("fdhoriz-yang.jpg")
}

.yin {
    background-image: url("fdhoriz-yin.jpg")
}

.yinyang {
    background-image: url("fdhoriz-yinyang.jpg")
}

.publicacio {
    background-image: url("fdhoriz-book.jpg")
}

.marchandising {
    background-image: url("fdhoriz-book.jpg")
}

#zonas {
    width: 100%;
    margin: 0px 0px 30px 0px;
    position: relative;
    float: left;
    min-height: 100%
}

.carro {
    background-repeat: no-repeat;
    height: 100px;
    width: 123px;
    float: left;
    margin-right: 90px;
    margin-top: 30px
}

.es {
    background-image: url("cesta_spain.png")
}

.eu {
    background-image: url("cesta_europe.png")
}

.wd {
    background-image: url("cesta_world.png")
}

.carro:hover {
    background-position: -121px 0px
}

.footnote {
    background: none repeat scroll 0 0 #000000;
    border: 2px solid #FFFFFF;
    border-radius: 0 0 0 9px;
    color: #FFFFFF;
    display: inline-block;
    margin-top: 10px;
    padding: 10px
}

.footeimdc {
    background: url("EiMDC-100px.png") no-repeat scroll 0 0 transparent;
    border: medium none;
    color: #990033;
    display: inline-block;
    font-size: 1.4em;
    height: 105px;
    margin-top: 20px;
    padding: 10px 10px 0 110px
}

/* ======= GANCHOS / LABELS / BADGES (Source: dsindex-ganchos.css) ======= */
.preutaxat {
    background-image: url("preutaxat3.png");
    background-repeat: no-repeat;
    bottom: 165px;
    font-size: 1.6em;
    height: 60px;
    line-height: 22px;
    padding: 22px 0 0 11px;
    position: absolute;
    right: -2px;
    width: 95px
}

.reclamo {
    color: #000000 !important;
    float: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    margin-left: 0px;
    margin-top: 90px;
    position: absolute;
    text-align: left;
    width: 149px
}

.cleanpopup {
    background: none repeat scroll 0 0 transparent !important;
    border: medium none !important;
    color: #566581 !important;
    height: 19px !important;
    margin: 0 0 0 10px !important;
    padding: 0 !important;
    text-align: left !important;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 140px !important
}

/*El gancho*/
#topventa,
#bestseller,
#oferta1,
#oferta2,
#oferta3,
#oferta4,
#oferta5 {
    height: 47px;
    position: absolute;
    right: 10px;
    top: 95px;
    width: 116px
}

#topventa,
#bestseller,
#oferta1,
#oferta2,
#oferta3,
#oferta4,
#oferta5 {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.hidegancho {
    margin-right: -140px
}

.preuamagat {
    display: none
}

.bestseller-fr {
    background: url("label-bestseller.png") no-repeat scroll 0 0 transparent
}

.bestseller-es {
    background: url("label-bestseller.png") no-repeat scroll 0 0 transparent
}

.bestseller-en {
    background: url("label-bestseller.png") no-repeat scroll 0 0 transparent
}

.bestseller-it {
    background: url("label-bestseller.png") no-repeat scroll 0 0 transparent
}

.bestseller-pt {
    background: url("label-bestseller.png") no-repeat scroll 0 0 transparent
}

.bestseller-de {
    background: url("label-bestseller.png") no-repeat scroll 0 0 transparent
}

.oferta-fr {
    background: url("label-oferta-fr.png") no-repeat scroll 0 0 transparent
}

.oferta-es {
    background: url("label-oferta-es.png") no-repeat scroll 0 0 transparent
}

.oferta-en {
    background: url("label-oferta-gb.png") no-repeat scroll 0 0 transparent
}

.oferta-it {
    background: url("label-oferta-it.png") no-repeat scroll 0 0 transparent
}

.oferta-pt {
    background: url("label-oferta-pt.png") no-repeat scroll 0 0 transparent
}

.oferta-de {
    background: url("label-oferta-de.png") no-repeat scroll 0 0 transparent
}

.topventa-fr {
    background: url("label-topventa-fr.png") no-repeat scroll 0 0 transparent
}

.topventa-es {
    background: url("label-topventa-es.png") no-repeat scroll 0 0 transparent
}

.topventa-en {
    background: url("label-topventa-gb.png") no-repeat scroll 0 0 transparent
}

.topventa-it {
    background: url("label-topventa-it.png") no-repeat scroll 0 0 transparent
}

.topventa-pt {
    background: url("label-topventa-pt.png") no-repeat scroll 0 0 transparent
}

.topventa-de {
    background: url("label-topventa-de.png") no-repeat scroll 0 0 transparent
}

.digital {
    background: transparent url("label-digital.png") no-repeat scroll 0 0;
    float: right;
    height: 90px;
    position: absolute;
    right: 4px;
    bottom: 35px;
    width: 80px;
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}

.extern {
    background: transparent url("label-extern.png") no-repeat scroll 0 0;
    float: right;
    position: absolute;
    right: 9px;
    top: 0px;
    height: 90px;
    width: 90px
}

.store {
    background-position: 0 bottom;
    background-repeat: no-repeat;
    background-size: 60px;
    bottom: -35px;
    height: 63px;
    position: absolute;
    right: 2px;
    width: 60px;
    z-index: -1
}

.store:hover {
    bottom: -23px;
    background-position: 0 0
}

.store-apple {
    background-image: url("store-apple.png")
}

.store-android {
    background-image: url("store-android.png")
}

.store-mfx {
    background-image: url("store-mfx.png")
}

.store-otro {
    background-image: url("store-otro.png")
}

@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px)
    }

    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px)
    }

    80% {
        -webkit-transform: translateX(10px)
    }

    100% {
        -webkit-transform: translateX(0)
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px)
    }

    60% {
        opacity: 1;
        transform: translateX(-30px)
    }

    80% {
        transform: translateX(10px)
    }

    100% {
        transform: translateX(0)
    }
}

.showgancho {
    margin-right: -10px;
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight
}