@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}html *{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

a {
    color: #990033;
    text-decoration: none;
}

a:hover {
    color: #007abc;
    text-decoration: none;
}

a:visited {
    color: #007abc;
}

a[href^="#"] {
    color: #007abc;
    text-decoration: none;
}

a[href^="#"]:hover {
    color: #007abc;
    text-decoration: none;
}

a[name],
a[name]:hover {
    text-decoration: none;
    color: #007abc;
}

a[href^="mailto:"] {
    color: #990033;
}

a[href^="mailto:"]:hover {
    color: #000000;
    text-decoration: none;
    text-shadow: 2px 1px 6px rgba(0, 0, 0, 0.6);
}

a[href$=".pdf"] {
    background: none repeat scroll 0 0 #cddff7;
    border-radius: 5px;
    box-shadow: 0 12px 5px #fff inset;
    color: #990033;
    cursor: help;
    display: inline-block;
    margin: 0 auto 20px;
    padding: 3px 10px;
    width: 30%;
}

a[href$=".pdf"]:hover {
    background: none repeat scroll 0 0 #990033;
    color: #990033;
    text-shadow: 0px 0px 2px #000;
    box-shadow: 0 12px 5px rgba(255, 255, 255, 0.7) inset;
}

a[target="_new"]:after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiBmaWxsPSIjMWE3M2U4Ij48cGF0aCBkPSJNMTkgMTlINVY1aDdWM0g1YTIgMiAwIDAgMC0yIDJ2MTRhMiAyIDAgMCAwIDIgMmgxNGMxLjEgMCAyLS45IDItMnYtN2gtMnY3ek0xNCAzdjJoMy41OWwtOS44MyA5LjgzIDEuNDEgMS40MUwxOSA2LjQxVjEwaDJWM2gtN3oiLz48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDBWMHoiLz48L3N2Zz4=);
    background-repeat: no-repeat;
    content: '';
    display: inline-block;
    height: .8125rem;
    margin: 0 .1875rem 0 .25rem;
    position: relative;
    top: .125rem;
    width: .8125rem;
}

a[target="_new"] {
    border-bottom: 2px dotted #99003352;
    color: #007ABC;
    text-decoration: none;
}

a[target="_new"]:hover {
    border-bottom: 1px solid #990033;
    color: #990033;
    text-decoration: none;
}

strong {
    font-weight: 700;
}

bqc {
    font-variant: small-caps;
}

yysup {
    font-size: 0.8em;
    letter-spacing: -5px;
    line-height: 0;
    position: relative;
    top: 8px;
    vertical-align: baseline;
}

sup {
    color: #007ABC;
    font-family: Arial, sans-serif;
    vertical-align: 5px;
    font-size: 13px;
    line-height: 0;
}

.bloc-nota {
    font-size: 0.9em !important;
    hyphens: none;
    line-height: 1.1em;
    text-align: left;
    font-style: italic;
    color: #686868
}

.bloc-nota br {
    margin-bottom: 10px
}

nota:first-of-type::before {
    border-top: 1px solid #007abc;
    display: block;
    height: 4px;
    width: 70%
}

nota:first-of-type {
    padding-left: 10px
}

nota::before {
    content: " ";
    font-size: 2em;
    padding-left: 10px
}

nota {
    color: #007abc;
    font-family: arial, sans-serif;
    font-size: 0.9em;
    margin-left: -10px;
    line-height: 0
}

nota::after {
    content: " ";
    padding-right: 2px
}

/*pour le franc suisse*/
chf {
    font-variant-caps: all-small-caps;
    letter-spacing: -3px;
    font-variant-position: super
}

.stabylo {
    color: #000000;
    display: list-item;
    font-family: trebuchet ms, sans-serif;
    font-size: 1.2em !important;
    list-style-image: url("stabylo.png");
    list-style-position: inside;
    margin: 0 0 20px;
    text-shadow: 0 -4px 10px yellow, 0 4px 10px yellow, -4px 0 10px yellow, 4px 0 10px yellow, 9px 0 10px yellow
}

/*El estilo del <class="nested-colon">definido en el XML por §*/
.nested-colon {
    color: #990033;
    margin-top: 10px;
    display: inline-block
}

/*El estilo del <class="nested-question">definido en el XML por ∆*/
.nested-question {
    color: #007abc;
    margin-left: -10px
}

/*El estilo del <class="nested-tic">definido en el XML por HTMLspan*/
.nested-tic {
    color: #78b200;
    font-size: 20px;
    line-height: 0;
    vertical-align: -2px
}

/*Les listes de type 1| 2| 3|...*/
.list-pipe {
    color: #007abc;
    line-height: 0;
    font-weight: bold
}

/*Para que no salga cuando se llama la página de una app get app=si*/
.apphidden {
    display: none !important
}

/* Source:css/icon-burger.css */
.menu-icon-wrapper {
    position: absolute;
    display: inline-block;
    width: 60px;
    height: 41px;
    margin: 0.3em;
    pointer-events: none;
    transition: 0.1s;
    left: 0;
    z-index: 101
}

@media screen and (min-width:768px) {
    .menu-icon-wrapper {
        margin: 12px 10px 0 10px
    }
}

.menu-icon-wrapper.scaled {
    -webkit-transform: scale(0.59);
    transform: scale(0.59)
}

.menu-icon-wrapper svg {
    position: absolute;
    top: -59px;
    left: -50px;
    -webkit-transform: scale(0.16);
    transform: scale(0.16);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.menu-icon-wrapper svg path {
    stroke: #007ABC;
    stroke-width: 60px;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: transparent
}

#pathB {
    animation: stroke-animation 3s cubic-bezier(.68, -0.55, .27, 1.55) infinite;
    stroke: #990033
}

@keyframes stroke-animation {
    0% {
        stroke-dashoffset: 0
    }

    50% {
        stroke-dashoffset: 1000
    }

    100% {
        stroke-dashoffset: 0
    }
}

@media screen and (max-height:500px) {
    .menu-icon-wrapper svg path {
        stroke: transparent
    }
}

.dummy--active #pathB {
    animation: none
}

.menu-icon-wrapper .menu-icon-trigger {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    background: none;
    border: none;
    margin: 0;
    padding: 0
}

.menu-icon-wrapper .menu-icon-trigger:hover,
.menu-icon-wrapper .menu-icon-trigger:focus {
    outline: none
}

.menu-icon-trigger p {
    text-align: center;
    color: #FFF;
    font-weight: 700;
    font-size: 0.6rem
}

.dummy--active .menu-icon-trigger p {
    display: none
}

#dummy {
    top: 0;
    position: fixed;
    width: 100%;
    z-index: 100
}

.dummy-hidden {
    height: 0
}

/*.dummy--active .dummy-hidden{display:block}*/
.dummy__item {
    height: 3em;
    background: linear-gradient(4deg, #cddff7 0%, #fff 100%);
    border: 1px #fff;
    border-style: groove;
    display: flex;
    text-align: left
}

.dummy__item {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
    -webkit-transform: translate3d(-100%, 0, 0) translate3d(-2em, 0, 0) scale3d(0.5, 1, 1);
    transform: translate3d(-100%, 0, 0) translate3d(-2em, 0, 0) scale3d(0.5, 1, 1);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%
}

.dummy__item:hover {
    background: #FFF
}

.dummy__item a,
#cerrar-sesion button,
.dummy__item button {
    text-transform: uppercase;
    margin: auto 0 0 50px;
    font-weight: 700;
    color: #007abc;
    text-shadow: 3px 2px 3px #00000021;
    font-size: 1.3em;
    height: inherit;
    padding: 8px 0;
    background: none;
    border: none;
    width: 100%;
    text-align: left
}

.dummy__item a:hover,
#cerrar-sesion button:hover {
    color: #000
}

#cerrar-sesion button {
    width: 100%;
    height: 80%;
    background: #FFF;
    color: red;
    border: 2px solid #007ABC;
    padding: 4px;
    border-radius: 10px;
    vertical-align: middle;
    margin-top: 5px
}

#cerrar-sesion button:hover {
    background-color: #990033;
    color: #FFF
}

.tx-red a {
    color: #990033 !important
}

.device--alt .dummy__item {
    -webkit-transform: translate3d(0, 260px, 0) scale3d(1, 0.2, 1);
    transform: translate3d(0, 260px, 0) scale3d(1, 0.2, 1)
}

.dummy--active .menu-icon-wrapper svg path {
    stroke: #990033
}

.dummy--active .dummy__item {
    -webkit-transition-timing-function: cubic-bezier(0.56, 1.19, 0.2, 1.05);
    transition-timing-function: cubic-bezier(0.56, 1.19, 0.2, 1.05);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.dummy__item:nth-child(11),
.dummy--active .dummy__item:first-child {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    /* box-shadow:0 7px 10px #00000073;*/
}

.dummy__item:nth-child(10),
.dummy--active .dummy__item:nth-child(2) {
    -webkit-transition-delay: 0.10s;
    transition-delay: 0.10s
}

.dummy__item:nth-child(9),
.dummy--active .dummy__item:nth-child(3) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s
}

.dummy__item:nth-child(8),
.dummy--active .dummy__item:nth-child(4) {
    -webkit-transition-delay: 0.20s;
    transition-delay: 0.20s
}

.dummy__item:nth-child(7),
.dummy--active .dummy__item:nth-child(5) {
    -webkit-transition-delay: 0.25s;
    transition-delay: 0.25s
}

.dummy__item:nth-child(6),
.dummy--active .dummy__item:nth-child(6) {
    -webkit-transition-delay: 0.30s;
    transition-delay: 0.30s
}

.dummy__item:nth-child(5),
.dummy--active .dummy__item:nth-child(7) {
    -webkit-transition-delay: 0.35s;
    transition-delay: 0.35s
}

.dummy__item:nth-child(4),
.dummy--active .dummy__item:nth-child(8) {
    -webkit-transition-delay: 0.40s;
    transition-delay: 0.40s
}

.dummy__item:nth-child(3),
.dummy--active .dummy__item:nth-child(9) {
    -webkit-transition-delay: 0.45s;
    transition-delay: 0.45s
}

.dummy__item:nth-child(2),
.dummy--active .dummy__item:nth-child(10) {
    -webkit-transition-delay: 0.50s;
    transition-delay: 0.50s
}

.dummy__item:first-child,
.dummy--active .dummy__item:nth-child(11) {
    -webkit-transition-delay: 0.55s;
    transition-delay: 0.55s
}

.dummy__item:last-child {
    box-shadow: 0 7px 10px #00000073
}

.icon-img {
    margin: 0 10px -4px 0;
    width: 35px
}

/* Source:css/dsindex-menu.css */
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?plwc0k');
    src: url('fonts/icomoon.eot?#iefixplwc0k') format('embedded-opentype'), url('fonts/icomoon.ttf?plwc0k') format('truetype'), url('fonts/icomoon.woff?plwc0k') format('woff'), url('fonts/icomoon.svg?plwc0k#icomoon') format('svg');
    font-weight: normal;
    font-style: normal
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.icon-trash:before {
    content: "\e63d"
}

.icon-trash2:before {
    content: "\e603"
}

.icon-minus:before {
    content: "\e604"
}

.icon-minus2:before {
    content: "\e60f"
}

.icon-info:before {
    content: "\e635"
}

.icon-info2:before {
    content: "\e63f"
}

.icon-help:before {
    content: "\e640"
}

.icon-eimdc:before {
    content: "\e615"
}

.icon-cart:before {
    content: "\e605"
}

.icon-credit:before {
    content: "\e618"
}

.icon-mail:before {
    content: "\e602"
}

.icon-back:before {
    content: "\e606"
}

.icon-quote:before {
    content: "\e61e"
}

.icon-gift:before {
    content: "\e623"
}

.icon-menu:before {
    content: "\e607"
}

.icon-descargar:before {
    content: "\e632"
}

.icon-link:before {
    content: "\e609"
}

.icon-star:before {
    content: "\e633"
}

.icon-cor:before {
    content: "\e634"
}

.icon-ticircle:before {
    content: "\e636"
}

.icon-tic:before {
    content: "\e628"
}

.icon-close:before {
    content: "\e627"
}

.icon-infoblau {
    background-image: url("icon-info.png");
    background-repeat: no-repeat;
    background-size: 31px
}

.icon-cb {
    background-image: url("icon-chanbeaute-circle200px.png");
    background-repeat: no-repeat;
    background-size: 31px
}

/*------------MOBIL---------*/
body {
    background-color: #cddff7;
    color: #000000;
    font-family: lato, sans-serif;
    font-size: 1em
}

body.overflow-hidden {
    /* prevent 2 vertical scrollbars on ie and firefox when the cart is visible */
    overflow: hidden
}

@media screen and (max-height:500px) {
    body {
        zoom: 0.75;
        /* réduit toute la page */
        overflow-x: hidden;
        margin: 0
    }

    .scale-wrapper {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        transform-origin: center
    }
}

/* -------------------------------- Modules - reusable parts of our design -------------------------------- */
.cd-container {
    /* this class is used to horizontally align the gallery of items */
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto
}

.cd-container::after {
    /* clearfix */
    content: '';
    display: table;
    clear: both
}

.cd-img-replace {
    /* replace text with a background-image */
    display: inline-block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap
}

/* -------------------------------- xheader -------------------------------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background: #31353d;
    text-align: center;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.6);
    z-index: 4
}

@media screen and (max-height:500px) {
    header {
        height: 60px
    }

    .hero-section {
        padding: 20px
    }
}

.ds-name {
    left: 80px;
    position: absolute;
    height: 100%
}

.ds-name img {
    height: calc(100% - 5px);
    bottom: -7px;
    position: relative;
    float: left;
    width: auto
}

.ds-name p {
    bottom: 0;
    left: 56px;
    position: inherit;
    font-size: 1.4em;
    font-weight: 300;
    letter-spacing: -0.04em
}

.logos {
    position: absolute;
    transform: scale(0.25);
    -webkit-transform: scale(0.25);
}

#logo-club {
    top: -75px
}

#logo-dienshop {
    top: -51px
}

#logo-dienshop>img:hover {
    border-bottom: 15px solid #000;
    margin-bottom: -14px
}

#ticket-curtain-trigger {
    right: 0
}

main {
    margin-bottom: -25px
}

#ticket-curtain {
    position: fixed;
    top: 0;
    height: 100%;
    width: min(320px, 90vw);
    padding-top: 60px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    z-index: 3
}

/*Velocidad del ticket que se cierra tiempo*/
#ticket-curtain {
    background: #cddff7 url("fd-ticket") repeat scroll 0 0;
    padding-top: 80px;
    right: -100%;
    -webkit-transition: right 0.5s;
    transition: right 0.5s
}

#ticket-curtain .curtain-tit {
    border-bottom: 3px dotted #990033;
    font-size: 1.9em;
    font-weight: 300;
    margin-bottom: 15px;
    padding-left: 25px
}

#ticket-curtain.speed-in {
    right: 0
}

#ticket-curtain.speed-out {
    right: 0;
    opacity: 0.7;
    background-color: #cddff7
}

#ticket-curtain>* {
    padding: 0 1em
}

#ticket-curtain h2 {
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
    margin: 1em 0
}

#ticket-curtain .ticket-items {
    padding: 0
}

#ticket-curtain .ticket-items li {
    position: relative;
    padding: 1em;
    border-top: 1px solid #e0e6ef
}

#ticket-curtain .ticket-items li:last-child {
    border-bottom: 1px solid #e0e6ef
}

#ticket-curtain .cd-qty,
#ticket-curtain .cd-price {
    color: #a5aebc
}

#ticket-curtain .cd-price {
    margin-top: .4em
}

#ticket-curtain .cd-item-remove {
    position: absolute;
    right: 1em;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: url("../img/cd-remove-item.svg") no-repeat center center
}

#ticket-curtain .cd-item-remove:hover {
    background-color: #e0e6ef
}

#ticket-curtain .ticket-total {
    padding-top: 1em;
    padding-bottom: 1em
}

#ticket-curtain .ticket-total span {
    float: right
}

#ticket-curtain .ticket-total::after {
    /* clearfix */
    content: '';
    display: table;
    clear: both
}

#ticket-curtain .checkout-btn {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #7dcf85;
    color: #FFF;
    text-align: center
}

#ticket-curtain .checkout-btn:hover {
    background: #a2dda8
}

#ticket-curtain .cd-go-to-cart {
    text-align: center;
    margin: 1em 0
}

#ticket-curtain .cd-go-to-cart a {
    text-decoration: underline
}

.aduana {
    display: inline-block;
    bottom: 5%;
    position: absolute;
    border: 1px solid #fff;
    padding: 5px 10px !important;
    width: 90%;
    text-align: center;
    border-radius: 3px;
    margin-left: 10px
}

/* -------------------------------- xgallery -------------------------------- */
main {
    position: relative;
    min-height: 100%;
    background: #eeeff7;
    padding-top: 70px;
    z-index: 1
}

#cd-gallery-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5em;
    list-style: none;
    padding: 0;
}

#cd-gallery-items li {
    width: auto;
    float: none;
    margin: 0;
    margin-bottom: 0;
}

#cd-gallery-items li img {
    width: 100%;
    display: block;
    border-radius: 0.25em
}

#cd-shadow-layer {
    position: fixed;
    min-height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(67, 87, 121, 0.6);
    cursor: pointer;
    z-index: 2;
    display: none
}

#cd-shadow-layer.is-visible {
    display: block;
    -webkit-animation: cd-fade-in 0.3s;
    animation: cd-fade-in 0.3s
}

.footer {
    background-color: #fff;
    border: 1px solid #007abc;
    border-radius: 0 0 10px 10px;
    color: #c6c6c6;
    font-size: 1.2em;
    margin: 10px;
    padding: 10px;
    text-align: center
}

.footer a {
    color: #007abc;
    display: inherit
}

.footer a:hover {
    color: #990033
}

.condiciones {
    background-color: rgba(255, 255, 255, 0.3);
    border: 3px solid #fff;
    margin: 20px;
    padding: 20px
}

.condiciones {
    -webkit-column-count: 1;
    /* Chrome,Safari,Opera */
    /* Firefox */
    column-count: 1
}

.condiciones>h2 {
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 10px
}

.condiciones>p {
    margin-bottom: 10px
}

.condiciones>h5 {
    color: #990033;
    font-style: italic;
    margin: 30px 0
}

/*-----------------------------------------------------------------------------TABLET---------*/
@media only screen and (min-width:768px) {
    main {
        padding-top: 55px
    }

    /* #main-nav{width:300px}*/
    #ticket-curtain {
        width: 350px
    }

    .ds-name {
        left: 90px
    }

    .ds-name p {
        font-size: 2.2rem
    }

    .logos {
        position: absolute;
        transform: scale(0.25);
        -webkit-transform: scale(0.25);
    }

    #logo-club {
        top: -75px
    }

    #logo-dienshop {
        top: -52px
    }

    #cd-gallery-items li {
        width: auto;
        float: none;
        margin: 0;
    }

    .footer {
        color: #c6c6c6;
        font-size: 1.4em;
        margin: 10px 20px;
        padding: 20px;
        text-align: left
    }

    .condiciones {
        -webkit-column-count: 2;
        /* Chrome,Safari,Opera */
        /* Firefox */
        column-count: 2
    }
}

/*------------\END TABLET---------*/
/*-------------------------------------------------------------------DESKTOP---------*/
@media only screen and (min-width:1200px) {
    header {
        height: 80px
    }

    main {
        padding-top: 120px
    }

    .ds-name {
        left: 90px
    }

    .ds-name p {
        left: 90px;
        font-size: 4.0em
    }

    .logos {
        transform: scale(0.45);
        -webkit-transform: scale(0.45);
    }

    #logo-club {
        left: 40px;
        top: -59px
    }

    #logo-dienshop {
        left: 20px;
        top: -36px
    }

    #ticket-curtain-trigger {
        right: 0
    }

    #ticket-curtain-trigger a {
        position: relative;
        width: 100px;
        border-left: none;
        background-color: #26292f
    }

    #ticket-curtain>* {
        padding: 0 2em
    }

    #ticket-curtain .ticket-items li {
        padding: 1em 2em
    }

    #ticket-curtain .cd-item-remove {
        right: 2em
    }

    #ticket-curtain {
        width: 30%;
        padding-top: 120px
    }

    #cd-gallery-items li {
        width: auto;
        float: none;
        margin: 0;
    }

    .stabylo {
        margin: -33px 5px 10px 10px
    }

    .footer {
        line-height: 40px;
        padding: 20px 40px;
        text-align: center
    }

    .footer a {
        color: #007abc;
        display: inline-block
    }

    .condiciones {
        -webkit-column-count: 3;
        /* Chrome,Safari,Opera */
        /* Firefox */
        column-count: 3
    }
}

@-webkit-keyframes cd-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes cd-fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

/*------------------------------------*/
/* MODAL des conditions de retour */
/* Style pour le bouton */
.return-policy-btn {
    display: block;
    margin: 25px auto;
    padding: 12px 24px;
    background: linear-gradient(135deg, #2d5016, #4a7c2a);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(45, 80, 22, 0.3);
    text-align: center;
    min-width: 280px
}

.return-policy-btn:hover {
    background: linear-gradient(135deg, #4a7c2a, #5e9c32);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(45, 80, 22, 0.4)
}

.return-policy-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(45, 80, 22, 0.3)
}

/* Style pour le modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease
}

.modal-content {
    background: linear-gradient(135deg, #cddff7, #e8f0fd);
    margin: 8% auto;
    padding: 30px;
    border: none;
    width: 85%;
    max-width: 650px;
    border-radius: 20px;
    max-height: 75vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
    position: relative
}

/* Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

/* Bouton de fermeture */
.close {
    color: #2d5016;
    float: right;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    position: absolute;
    right: 20px;
    top: 15px;
    z-index: 10
}

.close:hover {
    color: #4a7c2a;
    transform: scale(1.2)
}

/* Styles pour le contenu */
.modal-content h2 {
    color: #2d5016;
    margin-bottom: 25px;
    font-weight: bold;
    font-size: 24px;
    text-align: center;
    border-bottom: 2px solid #a8c6e0;
    padding-bottom: 15px;
    margin-top: 10px
}

.modal-content h3 {
    color: #2d5016;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 18px;
    background: rgba(255, 255, 255, 0.7);
    padding: 10px 15px;
    border-radius: 10px;
    border-left: 4px solid #4a7c2a
}

.modal-content p {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #333;
    text-align: justify
}

.modal-content ol {
    margin-left: 20px;
    margin-bottom: 20px
}

.modal-content li {
    line-height: 1.6;
    margin-bottom: 8px;
    color: #333
}

/* Scrollbar personnalisée */
.modal-content::-webkit-scrollbar {
    width: 8px
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(205, 223, 247, 0.5);
    border-radius: 10px
}

.modal-content::-webkit-scrollbar-thumb {
    background: #4a7c2a;
    border-radius: 10px
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: #2d5016
}

/* Source:css/dsindex-dienshop.css */
button {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    border: none;
    padding: 0
}

button:focus {
    outline: none
}

.cd-cart {
    bottom: -7px;
    color: #000;
    font-size: 2.1em;
    height: 40px;
    position: absolute;
    right: 10px;
    width: 55px;
    z-index: 2
}

.cd-cart:hover {
    color: #ffffff
}

/* number of items added to the cart */
.cd-cart span {
    background-color: #990033;
    border-radius: 50%;
    color: #ffffff;
    font-family: trebuchet ms, sans-serif;
    font-size: 1rem;
    font-weight: bold;
    height: 25px;
    letter-spacing: -1px;
    line-height: 21px;
    padding-right: 2px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: -8px;
    width: 25px
}

/* scale it down if no products have been added to the cart */
.cd-cart span {
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: -webkit-transform 0.5s 0s;
    transition: transform 0.5s 0s;
    border: 2px solid #fff
}

.cd-cart-in span {
    right: 25px;
    top: 18px;
    opacity: 0.7;
    border: 1px solid #fff;
    box-shadow: 0px 1px 10px #000000;
    -webkit-transform: scale(5);
    transform: scale(5)
}

.cd-cart.items-added span {
    /* counter visible when a product is added to the cart */
    -webkit-transform: scale(1);
    transform: scale(1)
}

.social {
    display: none;
    padding-right: 0;
    position: fixed;
    right: 70px;
    text-align: right;
    top: 5px;
    width: clamp(140px, 20vw, 180px);
    z-index: 4
}

/* ------Gallery grid---------------------------- */
.dienshop-intro {
    background-color: rgba(255, 255, 255, 0.6);
    margin: 0 auto;
    padding: 10px;
    width: 90%;
    display: table
}

@media only screen and (min-width:768px) {
    .divisas {
        display: table;
        margin: 0 auto;
        width: 49%;
        float: right;
        text-align: center;
        padding: 20px 10px
    }

    .bloc-intro {
        width: 49%;
        float: left;
        border-right: 1px dotted #007abc;
        padding-right: 5px
    }
}

.divisas h3 {
    text-transform: uppercase;
    color: #007abc;
    margin-bottom: 10px
}

.bloc-intro p {
    line-height: 1.4rem
}

.bloc-intro strong {
    text-align: center;
    color: #C90F50;
    background-image: -webkit-linear-gradient(70deg, #C90F50, #FFC850);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: comparanim 8s infinite linear
}

@-webkit-keyframes comparanim {
    from {
        -webkit-filter: hue-rotate(0deg)
    }

    to {
        -webkit-filter: hue-rotate(-360deg)
    }
}

.divisas>li {
    border-radius: 50%;
    float: left;
    height: 51px;
    margin: 0 10px;
    opacity: 0.5;
    display: inline-block;
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%)
}

.divisas li:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
    opacity: 1;
    filter: unset
}

.divisas-active {
    border: 2px solid #cddff7;
    height: 55px !important;
    opacity: 1 !important;
    filter: none !important
}

.bloc-intro h2 {
    text-transform: uppercase;
    color: #990033;
    margin-bottom: 5px
}

.cd-gallery {
    width: 90%;
    max-width: 1100px;
    margin: 1.5em auto
}

.cd-gallery>li {
    margin-bottom: 2em
}

/* ------------Single Item----------------------- */
.cd-single-item {
    position: relative
}

.gif-infobuy {
    max-height: 550px;
    border: 10px solid #ffa700;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.7);
    border-radius: 20px;
    height: auto;
    width: auto
}

.tool {
    background-color: #ffffff;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    display: block;
    overflow: hidden
}

/*precio de la eina*/
.preu {
    bottom: 135px;
    color: #000;
    font-size: 2.3em;
    font-weight: 300;
    letter-spacing: -0.03em;
    padding-right: 0;
    position: absolute;
    right: 10px;
    z-index: 1;
    background: #FFF;
    border-radius: 5px
}

.preu span {
    color: #606060;
    font-size: 0.7em;
    letter-spacing: -0.06em
}

.agotado {
    color: #f9a204 !important;
    font-family: lato, sans-serif;
    font-size: 2.6em !important;
    font-weight: 300;
    height: 40px;
    margin: 0;
    position: relative;
    text-transform: uppercase;
    bottom: -54%;
    right: -90%;
    width: clamp(200px, 40%, 350px);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

#intro-item {
    background-color: rgba(255, 255, 255, 0.7);
    height: 340px;
    margin-bottom: -49px;
    overflow-y: auto;
    padding: 10px
}

.intro-item-base {
    position: relative
}

.intro-item-base .cd-item-info {
    background-color: rgba(0, 120, 190, 0.7)
}

.intro-item-base .cd-item-info::after {
    content: "[+]";
    color: #000;
    display: inline;
    padding-left: 10px
}

#intro-item>h1 {
    color: #990033;
    font-size: 2em
}

#intro-item h2 {
    color: #007abc;
    font-size: 2.1em;
    font-weight: 300
}

#intro-item>h5 {
    color: #007abc;
    font-size: 1.2em;
    font-weight: 300;
    padding: 25px 10px 100px;
    text-align: center
}

#intro-item>em {
    bottom: 0;
    display: block;
    font-size: 1.4em;
    margin-bottom: 10px;
    padding: 0 10px;
    position: relative
}

#intro-item>p {
    line-height: 1.2em;
    padding: 5px 15px 0
}

em.icon-infoblau {
    background-size: 24px auto;
    display: inline-block;
    height: 25px;
    margin-top: -9px;
    position: relative;
    top: 8px;
    width: 25px
}

em.icon-cb {
    background-size: 20px auto;
    display: inline-block;
    height: 24px;
    position: relative;
    top: 8px;
    width: 22px;
    margin-top: -9px
}

.cd-single-item:hover .cd-customization,
.cd-single-item.hover .cd-customization {
    /* product customization visible */
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity 0.2s 0s, visiblity 0s 0s;
    transition: opacity 0.2s 0s, visiblity 0s 0s
}

.cd-single-item:hover .cd-customization-trigger,
.cd-single-item.hover .cd-customization-trigger {
    /* this is the settings icon - visible on touch devices only */
    display: none
}

/* ---------------------Product Slider------------------------------- */
.cd-slider-wrapper {
    position: relative;
    overflow: hidden
}

.cd-slider-wrapper li {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    height: 390px;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* by default,move the product image on the right*/
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s;
    transition: transform 0.3s 0s, visibility 0s 0.3s
}

.cd-slider-wrapper li.selected {
    /* this is the visible product image */
    overflow-y: auto;
    position: relative;
    visibility: visible;
    z-index: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s;
    transition: transform 0.3s 0s, visibility 0s 0s
}

.infotool {
    background-color: #f3f8fc;
    font-size: 0.965em;
    letter-spacing: -0.03em;
    padding: 0 10px;
    text-shadow: 1px 1px 1px #fff
}

.infotool p {
    margin-bottom: 10px
}

.infotool>p:last-of-type {
    padding-bottom: 10px
}

.fichatech {
    background-color: #cddff7;
    border-bottom: 1px dotted #007abc;
    border-top: 1px dotted #007abc;
    color: #007abc;
    font-size: 0.9em;
    padding: 15px 115px 15px 15px
}

.fichatech>a {
    color: #007abc
}

.fichatech>a:hover {
    color: #990033;
    text-shadow: 1px 1px 1px #fff
}

.fichatech span {
    background-color: #fff;
    float: left;
    margin-left: 10px;
    margin-right: 5px;
    padding: 3px 2px 26px
}

.fichatech:hover span {
    color: red
}

.cd-slider-wrapper li.selected:nth-child(2) {
    overflow: hidden !important
}

.cd-slider-wrapper li.move-left {
    /* move the product image on the left */
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%)
}

.cd-slider-wrapper img {
    display: block;
    height: 100%;
    padding-left: 10px;
    top: 0;
    position: absolute
}

.wrapper-img {
    padding: 10px 0 0;
    width: 140px
}

.infotool img {
    padding-left: 10px;
    height: 116px;
    position: relative;
    width: auto
}

.cd-slider-wrapper h2 {
    color: #990033;
    font-family: georgia, serif;
    font-size: 1.4em;
    padding: 10px 0 3px 0
}

.cd-slider-wrapper h5 {
    color: #007abc;
    font-size: 1.4em;
    font-weight: 300;
    padding: 10px 10px 5px
}

.cd-slider-wrapper p {
    /* color:#000000;font-size:1.1em;padding:0 10px 0 25px;*/
}

/* ═══════════════════════════════════════════════════════════ .img-to-cart - Images produits avec support WebP ═══════════════════════════════════════════════════════════ */
.img-to-cart {
    background: transparent;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%
}

/* Effet d'ombre au survol */
.img-to-cart:hover picture img,
.img-to-cart:hover>img {
    -webkit-filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0px 15px 10px rgba(0, 0, 0, 0.5));
    transition: filter 0.3s ease
}

/* Images classiques PNG (si encore présentes) */
.img-to-cart>img {
    height: 390px;
    width: auto;
    margin: 0;
    padding: 0;
    top: 0;
    left: 30px
}

/* Support balises <picture>- MOBILE par défaut */
.cd-slider-wrapper li.selected .img-to-cart picture {
    display: block;
    width: 100%;
    height: 390px;
    position: relative
}

.cd-slider-wrapper li.selected .img-to-cart picture img {
    display: block;
    height: 390px !important;
    width: auto !important;
    max-width: none;
    object-fit: contain;
    margin: 0;
    position: absolute;
    left: 30px;
    top: 0
}

/* TABLET et DESKTOP - Hauteur adaptative */
@media (min-width:768px) {
    .cd-slider-wrapper li.selected .img-to-cart picture {
        height: auto
    }

    .cd-slider-wrapper li.selected .img-to-cart picture img {
        height: auto !important;
        max-height: 490px !important;
        width: auto !important
    }
}

/* Support général pour picture dans slider (autres images) */
.cd-slider-wrapper picture {
    display: block;
    width: 100%
}

.cd-slider-wrapper picture img {
    display: block;
    height: auto;
    max-height: 490px;
    width: auto
}

/* Override pour les images produits spécifiquement */
.cd-slider-wrapper li.selected .img-to-cart picture img {
    width: auto !important
}

.sugg-name {
    font-family: Georgia, serif;
    font-size: 1.3em;
    color: #990033
}

.sugg-img {
    height: 88px !important;
    margin: 5px 0;
    padding: 0 !important
}

.sugg-img:hover {
    -webkit-filter: drop-shadow(5px 3px 1px rgba(0, 0, 0, 0.7));
    filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='5'/><feOffset dx='3' dy='1' result='offsetblur'/><feFlood flood-color='rgba(0,0,0,0.7)'/><feComposite in2='offsetblur' operator='in'/><feMerge><feMergeNode/><feMergeNode in='SourceGraphic'/></feMerge></filter></svg>#drop-shadow");
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=5,OffY=3,Color='#444')"
}

.sugg-tool {
    box-shadow: 0px 0px 2px 3px #990033
}

.destacar-tool {
    box-shadow: 0px 0px 2px 3px #007abc
}

/* ---------------------------Product Customization---------------------- */
.cd-customization {
    bottom: 5px;
    height: 42px;
    /*pointer-events:none;*/
    position: absolute;
    right: 7px;
    text-align: right;
    width: 103px;
    z-index: 2;
    -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
    transition: opacity 0.2s 0s, visibility 0s 0.2s;
    /* HACE QUE SEA VISIBLE SOLO CON HOVER visibility:hidden;opacity:0;*/
}

.cd-customization::after {
    clear: both;
    content: "";
    display: table
}

/*.cd-customization>*{float:left}*/
.cd-customization .color,
.cd-customization .add-to-cart {
    height: 34px;
    border-radius: 3px;
    position: relative;
    overflow: hidden
}

.cd-customization .color {
    box-shadow: 0 0 0 1px #e5e5e5 inset;
    cursor: pointer;
    display: inline-block;
    top: 6px;
    float: left;
    /* Force Hardware Acceleration - fix a bug on Safari */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.cd-customization .color:hover {
    box-shadow: inset 0 0 0 1px #cccccc
}

.cd-customization .color ul,
.cd-customization ul {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    border-radius: 3px;
    border: 1px solid transparent
}

.cd-customization .color li,
.cd-customization li {
    position: relative;
    height: 34px
}

.cd-customization .color ul li:first-of-type,
.cd-customization ul li:first-of-type {
    /* arrange list items according to the selected color/size option */
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    border-radius: 0
}

.cd-customization .color ul li:nth-of-type(2),
.cd-customization ul li:nth-of-type(2) {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    border-radius: 3px 3px 0 0
}

.cd-customization .color ul li:nth-of-type(3),
.cd-customization ul li:nth-of-type(3) {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-radius: 0 0 3px 3px
}

.cd-customization .color.selected-2 ul li:first-of-type,
.cd-customization .color.selected-2 ul li:nth-of-type(2),
.cd-customization .color.selected-2 ul li:nth-of-type(3) {
    /* second option selected in the ul.color list*/
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.cd-customization .color.selected-2 ul li:first-of-type {
    border-radius: 3px 3px 0 0
}

.cd-customization .color.selected-2 ul li:nth-of-type(2) {
    border-radius: 0
}

.cd-customization .color.selected-3 ul li:first-of-type {
    /* third option selected in the ul.color list */
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-radius: 3px 3px 0 0
}

.cd-customization .color.selected-3 ul li:nth-of-type(2) {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    border-radius: 0 0 3px 3px
}

.cd-customization .color.selected-3 ul li:nth-of-type(3) {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    border-radius: 0
}

.cd-customization .color.is-open {
    /* color/size list open - make ul element visible */
    overflow: visible;
    box-shadow: none
}

.cd-customization .color.is-open::after {
    /* remove the arrow icon for the size option element */
    display: none
}

.cd-customization .color.is-open ul {
    background-color: #fff;
    border-color: #cddff7;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2)
}

.cd-customization .color.is-open li:hover,
.cd-customization .color.is-open li.active {
    background-color: #f2f2f2
}

.cd-customization .color {
    width: 34px
}

.cd-customization .color li {
    /* replace color name with colored circle */
    overflow: hidden;
    /*text-indent:100%;*/
    white-space: nowrap;
    color: transparent
}

.cd-customization .color li::before {
    bottom: auto;
    content: "";
    height: 100%;
    left: 16px;
    position: absolute;
    right: auto;
    top: 17px;
    width: 100%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.cd-customization .color img {
    width: 15px
}

.cd-customization .color li.icon-infoblau::before {
    background: transparent
}

.cd-customization .color li.icon-v img {
    left: 1px;
    position: fixed;
    top: 2px;
    width: 30px;
    z-index: -1;
    height: auto
}

/*.cd-customization .color li.icon-infoblau::before{background:transparent url("icon-info.jpg") no-repeat scroll center center / 31px auto}*/
.cd-customization .color li.icon-infoblau::before {
    background-position: 31px center
}

/*.cd-customization .color li.icon-cb::before{background:transparent url("icon-chanbeaute200px.png") no-repeat scroll center center / 29px auto}*/
.cd-customization .color li.icon-cb::before {
    background-position: 29px center
}

.cd-customization .add-to-cart {
    background: transparent url("addcesta.png") no-repeat scroll 0 0;
    background-position: -61px 0;
    height: 43px;
    width: 61px
}

.cd-customization .add-to-cart:hover {
    background-position: 0 0
}

/* ---------Settings icon - touch devices only-------------------------- */
.cd-customization-trigger {
    position: absolute;
    z-index: 2;
    right: 0px;
    bottom: 0px;
    height: 40px;
    width: 40px;
    /* replace text with an icon */
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    color: transparent;
    background: url(../img/cd-icon-settings.svg) no-repeat center center;
    display: none
}

/*.touch .cd-customization-trigger{display:block}*/
/* --------------------Product Info (title+price)------------------------- */
.cd-item-info {
    background-color: rgba(0, 120, 190, 0.5);
    border-radius: 0 0 5px 5px;
    color: #fff;
    display: table-cell;
    font-size: 1.3em;
    font-weight: 700;
    height: 50px;
    letter-spacing: -0.03em;
    padding: 4px 10px;
    text-transform: uppercase;
    vertical-align: middle;
    width: 100vw
}

.cd-item-info:hover {
    background-color: #007ABC
}

.cd-item-info a {
    color: #fff;
    font-size: 1.2em
}

.cd-item-info a:hover {
    text-decoration: none;
    font-weight: 700
}

/*.cd-item-info{background-color:#fff;border-radius:0 0 5px 5px;font-weight:700;height:45px;padding:10px;text-transform:uppercase}.cd-item-info a{color:#105a9c;// es un #007ABC fosc text-shadow:1px 1px 0 #fff}*/
.cd-item-info::after {
    clear: both;
    content: "";
    display: table
}

.enquete {
    background-color: #fff;
    display: inline-block;
    margin: 10px auto;
    padding: 10px;
    width: 100%;
    border: 3px solid #990033
}

#btnEnquesta {
    margin: 0 auto;
    font-size: 1.3em;
    text-align: center;
    width: 100%;
    padding: 10px;
    border-color: #007abc;
    color: #000
}

@media only screen and (min-width:768px) {
    #intro-item {
        height: 549px
    }

    .cd-slider-wrapper li {
        height: 500px
    }

    .cd-gallery {
        margin-top: 2em
    }

    .cd-gallery::after {
        clear: both;
        content: "";
        display: table
    }

    .cd-gallery>li {
        width: 48%;
        float: left;
        margin: 0 4% 6% 0
    }

    .cd-gallery>li:nth-of-type(2n) {
        margin-right: 0
    }

    .social {
        top: 24px;
        display: inline-block
    }

    .agotado {
        bottom: -60%
    }
}

@media only screen and (min-width:1200px) {
    #intro-item {
        height: 549px
    }

    .cd-cart {
        bottom: 14px;
        font-size: 3.4em;
        right: 30px
    }

    .cd-gallery {
        margin-top: 2.5em
    }

    .cd-gallery>li {
        width: 30%;
        float: left;
        margin: 0 5% 5% 0
    }

    .cd-gallery>li:nth-of-type(2n) {
        margin-right: 5%
    }

    .cd-gallery>li:nth-of-type(3n) {
        margin-right: 0
    }

    .social {
        top: 37px;
        margin-right: 180px;
        display: inline-block
    }
}

.notice-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffe08a;
    color: #333;
    text-align: center;
    padding: 8px;
    font-size: 19px;
    z-index: 9999
}

.notice-bar button {
    cursor: pointer;
    border: 3px solid #fff;
    height: 30px;
    width: 30px;
    background: red;
    border-radius: 100px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
    line-height: 0;
    padding-bottom: 4px
}

/* Code Promo */
.promo-input-group {
    display: flex;
    gap: 5px
}

.promo-input-group input {
    flex: 1;
    padding: 4px;
    border: 1px solid #1ea48b;
    border-radius: 5px;
    font-size: 13px;
    width: 80px;
    text-align: center;
    color: #023102;
    height: 25px;
    text-transform: uppercase
}

.promo-input-group input::placeholder {
    text-transform: none;
    font-size: 12px;
    color: #888
}

.btn-promo-apply {
    background: #28a745;
    color: white;
    border: 1px solid #18db64;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    white-space: nowrap;
    height: 25px;
    text-transform: uppercase;
    line-height: 0;
    font-size: 11px
}

.btn-promo-apply:hover {
    background: #13d93f;
    color: #000
}

.btn-promo-apply:disabled {
    background: #ccc;
    cursor: not-allowed;
    border-color: #999
}

.promo-message {
    margin-top: 5px;
    padding: 5px;
    font-size: 13px;
    text-align: center;
    line-height: 1.1
}

.promo-message.success {
    background: #d4edda;
    color: #1d4f01;
    border: 1px solid #ec890b;
    border-radius: 3px
}

.promo-message.error {
    background: #fb0000;
    color: #fff;
    border: 3px solid #fffdfd;
    margin: 5px;
    border-radius: 20px;
    box-shadow: 0 0 40px 30px #fdbe00;
    z-index: 9;
    position: relative;
    text-transform: uppercase;
    font-weight: bold
}

.promo-active {
    margin: 10px;
    background: #28a745;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 13px
}

.btn-promo-remove {
    background: transparent;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1
}

.btn-promo-remove:hover {
    transform: scale(1.2)
}

/* 🎯 MESSAGE PROMO SUCCESS - Flip Vertical */
@keyframes flipVertical {
    0% {
        transform: perspective(400px) rotateX(-90deg);
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(10deg)
    }

    70% {
        transform: perspective(400px) rotateX(-5deg)
    }

    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4)
    }

    50% {
        box-shadow: 0 0 0 8px rgba(16, 185, 129, 0)
    }
}

.promo-message.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-left: 4px solid #34d399;
    border-right: 4px solid #34d399;
    border-radius: 6px;
    padding: 14px 20px;
    font-weight: 600;
    font-size: 15px;
    /* Animation flip vertical */
    transform-origin: top center;
    animation: flipVertical 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), pulseGlow 2s ease-out;
    /* Ombre moderne */
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden
}

/* Barre de surbrillance qui glisse */
.promo-message.success::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shine 1.5s ease-out 0.3s
}

@keyframes shine {
    0% {
        left: -100%
    }

    100% {
        left: 100%
    }
}

/* Icône check animée */
.promo-message.success::after {
    content: '✓';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    animation: checkPop 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.4s forwards
}

@keyframes checkPop {
    0% {
        transform: translateY(-50%) scale(0) rotate(-180deg)
    }

    100% {
        transform: translateY(-50%) scale(1) rotate(0deg)
    }
}

/* Espace pour le check */
.promo-message.success {
    padding-right: 30px
}

/* Hover effect subtil */
.promo-message.success:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4), 0 3px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease
}

/* Source:css/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
}

/*para amagar el preu tachat si no es rebaja*/
/*class del gancho*/
.bestseller-fr {
    background: url("label-bestseller.png") no-repeat scroll 0 0 transparent
}

/*el mas vendido siempre*/
.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 especial*/
.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
}

/*mejor venta del mes anterior*/
.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 {
    /*Proposiciones de varios precios (páginaHTM,etc)*/
    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
}

/* Source:css/dsindex-ticket.css */
.panel {
    margin: 0;
    padding: 0
}
.panel-fd {
    margin-top: -20px;
    position: absolute;
    right: 0;
    height: auto;
    width: auto
}
.content {
    border-bottom: 2px solid #ffffff;
    margin: 0 auto;
    max-width: 1020px;
    padding: 20px
}
.fx-block {
    border: 1px solid #A6A6A6;
    border-radius: 0;
    font-size: 1.1em;
    margin-bottom: 20px;
    padding: 0;
    width: 100%
}
.inst-content a {
    color: #007abc;
    text-decoration-style: wavy !important;
    text-decoration-color: brown !important;
}
.fx-block:first-of-type {border-radius: 10px 10px 0 0}
.fx-block:last-of-type {border-radius: 0 0 10px 10px}
.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
}

.icono-circle {
    float: left;
    height: auto;
    margin-right: 10px;
    margin-top: -20px;
    max-width: 100px;
    padding-top: 10px;
}

.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
}

#ticket {
    background-color: #fff;
    border: 1px solid #007abc;
    border-radius: 10px;
    font-family: trebuchet ms, helvetica, sans-serif;
    margin: 0 15px;
    padding: 10px
}

#ticket a {
    color: #000
}

#ticket a:hover {
    color: #007abc
}

#ticket ul li {
    font-size: 14px;
    letter-spacing: -1px;
    line-height: 25px;
    list-style: outside none none
}

#ticket span {
    display: inline-block;
    float: right;
    text-align: right
}

.ticketbas {
    border: 1px solid #990033;
    border-radius: 10px;
    height: 215px;
    margin: 15px;
    background-color: #fff
}

.seguir-comprando {
    background-color: #cddff7;
    border: 1px solid #007abc;
    border-radius: 10px;
    color: #007abc;
    font-size: 0.8em;
    padding: 10px;
    position: absolute;
    right: 18px;
    top: 61px;
    height: 35px
}

.validar-help {
    border: 1px solid #FFF;
    border-radius: 10px;
    margin: 9px 15px;
    display: inline-block;
    padding: 0 10px 0 15px;
    background: #caddee
}

.validar-help ol {
    list-style: decimal;
    padding: 10px
}

.validar-help ol li {
    margin-bottom: 15px
}

.validar-help span {
    color: #0c5177;
    font-variant: small-caps
}

@media only screen and (min-width:1200px) {
    .seguir-comprando {
        top: 93px;
        right: 33px
    }
}

.seguir-comprando:hover {
    background-color: #007abc;
    box-shadow: 0 0 4px 2px #fff inset;
    color: #fff
}

#paisos {
    margin-top: 5px;
    text-align: right
}

#formapago {
    font-size: 1.1em;
    line-height: 1.4em;
    margin-bottom: 5px;
    padding: 5px 4px 0 0;
    text-align: right
}

.pagosistema label {
    letter-spacing: 1px
}

/*≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈*/
/* Style pour les boutons radio */
input[type="radio"] {
    appearance: none;
    /* Supprime le style par défaut des boutons radio */
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s
}

/* Style pour les boutons radio lorsqu'ils sont sélectionnés */
input[type="radio"]:checked {
    background-color: green;
    border-color: green
}

/* Style pour les boutons radio au survol */
input[type="radio"]:hover {
    background-color: #e0e0e0
}

/* Style pour les labels des boutons radio */
.pagoamagat label {
    margin-left: 10px;
    cursor: pointer
}

/*≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈*/
#formapagoZ {
    border: 2px solid #fff;
    border-radius: 0 10px;
    box-shadow: 0 0 80px 40px #ffc850, 2px 2px 10px rgba(0, 0, 0, 0.7) inset;
    color: #fff;
    font-size: 1.2em;
    padding: 10px;
    text-align: center;
    text-shadow: 0 1px 0 #000;
    background: -webkit-linear-gradient(20deg, #990033 10%, #ff70a3 90%);
    background: -moz-linear-gradient(20deg, #990033 10%, #ff70a3 90%);
    background: -ms-linear-gradient(20deg, #990033 10%, #ff70a3 90%);
    background: -o-linear-gradient(20deg, #990033 10%, #ff70a3 90%);
    background: linear-gradient(20deg, #990033 10%, #ff70a3 90%);
}

#ticketcontenido {
    color: #007abc;
    line-height: 15px;
    margin-bottom: 10px;
    padding: 5px 5px 0;
    text-align: left
}

#ticketcontenido span {
    float: right;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff
}

#paisPago {
    border: 1px solid #d2cec6;
    border-radius: 5px 0 0 5px;
    font-size: 1em;
    font-style: oblique;
    margin: 0 0 0 5px;
    padding: 2px 5px 2px 10px;
    width: 232px;
    background: rgb(246, 248, 249);
    background: -moz-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(246, 248, 249, 1)), color-stop(50%, rgba(229, 235, 238, 1)), color-stop(51%, rgba(215, 222, 227, 1)), color-stop(100%, rgba(245, 247, 249, 1)));
    background: -webkit-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    background: -o-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    background: -ms-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    background: linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9', GradientType=0)
}

option {
    font-size: 1.3em;
    font-style: normal;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0) linear-gradient(210deg, #cddff7 20%, #adbfd7 90%) repeat scroll 0 0;
    background: -webkit-linear-gradient(210deg, #cddff7 10%, #adbfd7 90%);
    background: -moz-linear-gradient(210deg, #cddff7 10%, #adbfd7 90%);
    background: -ms-linear-gradient(210deg, #cddff7 10%, #adbfd7 90%);
    background: -o-linear-gradient(210deg, #cddff7 10%, #adbfd7 90%);
    background: linear-gradient(210deg, #cddff7 10%, #adbfd7 90%);
}

.validanula {
    display: flex;
    height: 30px;
    gap: 10px
}

.anular {
    cursor: pointer;
    font-weight: 400;
    font-size: 0.8em;
    padding: 4px 8px;
    text-align: center;
    text-transform: uppercase;
    line-height: 0.9;
    border-radius: 5px;
    margin-top: 3px;
    background: -webkit-linear-gradient(0deg, #757F9A 10%, #D7DDE8 90%);
    background: linear-gradient(0deg, #757F9A 10%, #D7DDE8 90%);
}

.anular:hover {
    color: #fff;
    background: -webkit-linear-gradient(180deg, #C04848 10%, #480048 90%);
    background: -moz-linear-gradient(180deg, #C04848 10%, #480048 90%);
    background: -ms-linear-gradient(180deg, #C04848 10%, #480048 90%);
    background: -o-linear-gradient(180deg, #C04848 10%, #480048 90%);
    background: linear-gradient(180deg, #C04848 10%, #480048 90%);
}

.validar {
    cursor: pointer;
    border: 1px solid #666666;
    border-radius: 5px;
    font-size: 1.1em;
    flex: 1.5;
    padding: 5px 20px;
    text-align: center;
    text-transform: uppercase;
    background: -webkit-linear-gradient(0deg, #1D976C 10%, #93F9B9 90%);
    background: linear-gradient(0deg, #1D976C 10%, #93F9B9 90%);
}

.validar:hover {
    border: 1px solid #fff;
    background: -webkit-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
    background: -moz-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
    background: -ms-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
    background: -o-linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
    background: linear-gradient(0deg, #FF8008 10%, #FFC837 90%);
}

#ticketdetalles {
    background-color: #fff;
    border: 1px solid #990033;
    border-radius: 10px;
    line-height: 25px;
    margin-bottom: 10px;
    padding: 5px 25px;
    text-align: left
}

#ticketdetalles span {
    float: right;
    padding-left: 10px
}

#cs_apagar {
    font-weight: bold
}

.pagoamagat {
    display: none
}

.cesta {
    margin-left: 200px;
    margin-right: -9px;
    margin-top: -100px;
    position: relative;
    text-align: center;
    width: 98px
}

.afegireina {
    display: block;
    margin: 0 auto;
    background-image: url(addcesta.png)
}

.afegireina:hover {
    background-position: -61px 0
}

.buybutton-cont {
    margin-left: 200px;
    margin-right: -9px;
    margin-top: -100px;
    position: relative;
    text-align: center;
    width: 98px
}

.buybutton {
    background-image: url("addcesta.png");
    display: block;
    margin: 0 auto
}

.cesta>h2 {
    /*el precio*/
    display: inline-block;
    font-size: 1.7em;
    font-weight: 300;
    margin: 10px 3px 0 0;
    text-align: right
}

.cesta>h2 span {
    /*el symbol divisa*/
    color: #ababab;
    font-size: 0.8em;
    letter-spacing: -1px
}

.borrarlinea {
    /* icono de borrar*/
    background: transparent none repeat scroll 0 0;
    border: medium none;
    color: #990033;
    cursor: pointer;
    float: right;
    font-size: 1.4em;
    margin-top: 2px;
    padding: 0 0 0 6px
}

.avisolegal {
    font-size: 0.9em;
    line-height: 1em;
    padding-bottom: 20px;
    text-align: justify
}

@media screen and (max-width:480px) {
    .lascestas>h2 {
        font-size: 20px
    }

    .stabylo {
        margin-left: 0px
    }

    .avisolegal {
        font-size: 0.75em
    }

    .panel-fd {
        width: 230px
    }
}

/*----------------------------------------*/
/* EL VIDEO */
/*----------------------------------------*/
.embed-container {
    height: 0;
    margin-bottom: -25%;
    overflow: hidden;
    padding-bottom: 79%;
    padding-top: 80px;
    position: relative
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    height: 75%;
    left: 0;
    max-width: 1240px;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%
}

/* Source:css/dsindex-contact.css */
@charset "UTF-8";

.contactpanel p {
    font-size: 1.5em;
    padding: 10px 20px
}

.contactpanel span {
    color: #990033;
    display: inline-block;
    float: right;
    font-size: 0.8em
}

form#contact {
    counter-reset: fieldsets;
    padding: 20px
}

form#contact fieldset {
    border: medium none;
    margin-bottom: 10px
}

form#contact fieldset:last-of-type {
    margin-bottom: 0
}

form#contact legend {
    color: #7A7873;
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 10px;
    text-shadow: 0 1px 1px #FFFFFF
}

form#contact>fieldset>legend:before {
    color: #FFFFFF;
    content: ""counter(fieldsets, decimal) ":";
    counter-increment: fieldsets;
    font-family: trebuchet ms, sans-serif;
    font-weight: lighter;
    text-shadow: none
}

form#contact fieldset fieldset legend {
    color: #111111;
    font-size: 16px;
    font-weight: normal;
    padding-bottom: 0
}

form#contact ol {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    border-radius: 0 0 0 9px;
    border-style: solid;
    border-width: 2px;
    line-height: 35px;
    list-style: none outside none;
    margin-bottom: 10px;
    padding: 5px 0px
}

form#contact li {
    border-color: rgba(255, 255, 255, 0.6);
    border-radius: 0 0 0 9px;
    border-width: 2px;
    line-height: 35px;
    list-style: none outside none
}

form#contact li ol li {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    float: left
}

form#contact li ol {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    display: inline-block;
    margin-left: 60px;
    margin-top: -5px;
    padding: 0
}

form#contact label {
    float: left;
    font-size: 15px;
    padding-right: 10px;
    text-align: right;
    width: 135px
}

form#contact fieldset fieldset label {
    background: none no-repeat scroll left 50% transparent;
    line-height: 11px;
    padding: 0;
    width: auto
}

form#contact fieldset fieldset label:hover {
    cursor: pointer
}

form#contact input:not([type="radio"]) {
    background: none repeat scroll 0 0 #FFFFFF;
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    color: #007ABC;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 13px;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: italic;
    font-variant: normal;
    font-weight: normal;
    margin-bottom: 10px;
    outline: medium none;
    padding: 10px;
    width: 50%
}

form#contact textarea {
    color: #007ABC;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 0.8em;
    font-style: italic;
    height: 150px;
    outline: medium none;
    padding: 5px;
    width: 70%
}

#mess {
    width: 100% !important
}

form#contact input:focus:not([type="submit"]),
form#contact textarea:focus {
    background: none repeat scroll 0 0 #EAEAEA
}

form#contact input[type="radio"] {
    float: left;
    margin-right: 5px;
    margin-top: 13px
}

form#contact select {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 0.9em;
    margin: 3px 0 0;
    width: 50%
}

form#contact button {
    background: none repeat scroll 0 0 #007abc;
    border: 2px solid #fff;
    border-radius: 10px;
    color: #ffffff;
    display: block;
    font-size: 1.1em;
    letter-spacing: 1px;
    margin: 0 auto;
    padding: 10px 30px;
    text-shadow: 0 1px 0 #000000;
    text-transform: uppercase
}

form#contact button:hover {
    background: -webkit-linear-gradient(0deg, #ADD100 10%, #7B920A 90%);
    background: -moz-linear-gradient(0deg, #ADD100 10%, #7B920A 90%);
    background: -ms-linear-gradient(0deg, #ADD100 10%, #7B920A 90%);
    background: -o-linear-gradient(0deg, #ADD100 10%, #7B920A 90%);
    background: linear-gradient(0deg, #ADD100 10%, #7B920A 90%);
    cursor: pointer
}

/* Source:css/csshake.min.css */
.shake {
    display: inline-block;
    -webkit-transform-origin: center center;
    transform-origin: center center
}

.shake:hover {
    -webkit-animation-name: shake-base;
    animation-name: shake-base;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important
}

.shake.freez.shake-hard {
    -webkit-animation-name: shake-hard;
    animation-name: shake-hard;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez.shake-slow {
    -webkit-animation-name: shake-slow;
    animation-name: shake-slow;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez.shake-little {
    -webkit-animation-name: shake-little;
    animation-name: shake-little;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez.shake-horizontal {
    -webkit-animation-name: shake-horizontal;
    animation-name: shake-horizontal;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez.shake-vertical {
    -webkit-animation-name: shake-vertical;
    animation-name: shake-vertical;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez.shake-rotate {
    -webkit-animation-name: shake-rotate;
    animation-name: shake-rotate;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez.shake-opacity {
    -webkit-animation-name: shake-opacity;
    animation-name: shake-opacity;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez.shake-crazy {
    -webkit-animation-name: shake-crazy;
    animation-name: shake-crazy;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.freez:hover {
    -webkit-animation-play-state: running !important;
    animation-play-state: running !important
}

.shake.shake-hard:hover {
    -webkit-animation-name: shake-hard;
    animation-name: shake-hard;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-slow:hover {
    -webkit-animation-name: shake-slow;
    animation-name: shake-slow;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-little:hover {
    -webkit-animation-name: shake-little;
    animation-name: shake-little;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-horizontal:hover {
    -webkit-animation-name: shake-horizontal;
    animation-name: shake-horizontal;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-vertical:hover {
    -webkit-animation-name: shake-vertical;
    animation-name: shake-vertical;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-rotate:hover {
    -webkit-animation-name: shake-rotate;
    animation-name: shake-rotate;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-opacity:hover {
    -webkit-animation-name: shake-opacity;
    animation-name: shake-opacity;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-crazy:hover {
    -webkit-animation-name: shake-crazy;
    animation-name: shake-crazy;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant {
    -webkit-animation-name: shake-base;
    animation-name: shake-base;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-hard {
    -webkit-animation-name: shake-hard;
    animation-name: shake-hard;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-slow {
    -webkit-animation-name: shake-slow;
    animation-name: shake-slow;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-little {
    -webkit-animation-name: shake-little;
    animation-name: shake-little;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-horizontal {
    -webkit-animation-name: shake-horizontal;
    animation-name: shake-horizontal;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-vertical {
    -webkit-animation-name: shake-vertical;
    animation-name: shake-vertical;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-rotate {
    -webkit-animation-name: shake-rotate;
    animation-name: shake-rotate;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-opacity {
    -webkit-animation-name: shake-opacity;
    animation-name: shake-opacity;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.shake-crazy {
    -webkit-animation-name: shake-crazy;
    animation-name: shake-crazy;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

.shake.shake-constant.hover-stop:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

.shake.shake-delay {
    -webkit-animation-name: shake-base;
    animation-name: shake-base;
    -webkit-animation-duration: 100ms;
    animation-duration: 100ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-animation-play-state: running;
    animation-play-state: running
}

@-webkit-keyframes shake-base {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        -webkit-transform: translate(1.5px, -2.5px) rotate(-1.5deg)
    }

    4% {
        -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg)
    }

    6% {
        -webkit-transform: translate(1.5px, 1.5px) rotate(0.5deg)
    }

    8% {
        -webkit-transform: translate(1.5px, 1.5px) rotate(-0.5deg)
    }

    10% {
        -webkit-transform: translate(1.5px, 0.5px) rotate(0.5deg)
    }

    12% {
        -webkit-transform: translate(0.5px, -1.5px) rotate(-1.5deg)
    }

    14% {
        -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
    }

    16% {
        -webkit-transform: translate(0.5px, 1.5px) rotate(-1.5deg)
    }

    18% {
        -webkit-transform: translate(-1.5px, 1.5px) rotate(-0.5deg)
    }

    20% {
        -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg)
    }

    22% {
        -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
    }

    24% {
        -webkit-transform: translate(-2.5px, 1.5px) rotate(-1.5deg)
    }

    26% {
        -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg)
    }

    28% {
        -webkit-transform: translate(-0.5px, -2.5px) rotate(-1.5deg)
    }

    30% {
        -webkit-transform: translate(-1.5px, 1.5px) rotate(-1.5deg)
    }

    32% {
        -webkit-transform: translate(0.5px, 0.5px) rotate(-0.5deg)
    }

    34% {
        -webkit-transform: translate(1.5px, -0.5px) rotate(0.5deg)
    }

    36% {
        -webkit-transform: translate(-1.5px, -1.5px) rotate(-0.5deg)
    }

    38% {
        -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg)
    }

    40% {
        -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
    }

    42% {
        -webkit-transform: translate(-0.5px, 1.5px) rotate(-1.5deg)
    }

    44% {
        -webkit-transform: translate(-2.5px, -0.5px) rotate(0.5deg)
    }

    46% {
        -webkit-transform: translate(-2.5px, -1.5px) rotate(0.5deg)
    }

    48% {
        -webkit-transform: translate(-2.5px, -2.5px) rotate(0.5deg)
    }

    50% {
        -webkit-transform: translate(0.5px, -1.5px) rotate(-1.5deg)
    }

    52% {
        -webkit-transform: translate(0.5px, 1.5px) rotate(0.5deg)
    }

    54% {
        -webkit-transform: translate(1.5px, -0.5px) rotate(-1.5deg)
    }

    56% {
        -webkit-transform: translate(-1.5px, -1.5px) rotate(-1.5deg)
    }

    58% {
        -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg)
    }

    60% {
        -webkit-transform: translate(-0.5px, -0.5px) rotate(0.5deg)
    }

    62% {
        -webkit-transform: translate(0.5px, 1.5px) rotate(-0.5deg)
    }

    64% {
        -webkit-transform: translate(-2.5px, 0.5px) rotate(0.5deg)
    }

    66% {
        -webkit-transform: translate(-0.5px, -2.5px) rotate(0.5deg)
    }

    68% {
        -webkit-transform: translate(-2.5px, -2.5px) rotate(-1.5deg)
    }

    70% {
        -webkit-transform: translate(-1.5px, 0.5px) rotate(-1.5deg)
    }

    72% {
        -webkit-transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
    }

    74% {
        -webkit-transform: translate(-1.5px, 1.5px) rotate(-0.5deg)
    }

    76% {
        -webkit-transform: translate(-1.5px, -2.5px) rotate(0.5deg)
    }

    78% {
        -webkit-transform: translate(-1.5px, -2.5px) rotate(-0.5deg)
    }

    80% {
        -webkit-transform: translate(-0.5px, 1.5px) rotate(-0.5deg)
    }

    82% {
        -webkit-transform: translate(1.5px, -1.5px) rotate(-0.5deg)
    }

    84% {
        -webkit-transform: translate(-0.5px, -1.5px) rotate(-1.5deg)
    }

    86% {
        -webkit-transform: translate(-2.5px, 0.5px) rotate(-0.5deg)
    }

    88% {
        -webkit-transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
    }

    90% {
        -webkit-transform: translate(-0.5px, 0.5px) rotate(-1.5deg)
    }

    92% {
        -webkit-transform: translate(1.5px, -2.5px) rotate(0.5deg)
    }

    94% {
        -webkit-transform: translate(0.5px, 1.5px) rotate(-1.5deg)
    }

    96% {
        -webkit-transform: translate(1.5px, -0.5px) rotate(-1.5deg)
    }

    98% {
        -webkit-transform: translate(-0.5px, 0.5px) rotate(-0.5deg)
    }
}

@keyframes shake-base {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg)
    }

    4% {
        transform: translate(-2.5px, -1.5px) rotate(-1.5deg)
    }

    6% {
        transform: translate(-0.5px, 1.5px) rotate(-1.5deg)
    }

    8% {
        transform: translate(1.5px, -0.5px) rotate(-1.5deg)
    }

    10% {
        transform: translate(0.5px, -0.5px) rotate(-0.5deg)
    }

    12% {
        transform: translate(0.5px, -1.5px) rotate(-0.5deg)
    }

    14% {
        transform: translate(-0.5px, 0.5px) rotate(-1.5deg)
    }

    16% {
        transform: translate(1.5px, -0.5px) rotate(0.5deg)
    }

    18% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg)
    }

    20% {
        transform: translate(-2.5px, 0.5px) rotate(0.5deg)
    }

    22% {
        transform: translate(-0.5px, 0.5px) rotate(-0.5deg)
    }

    24% {
        transform: translate(1.5px, -1.5px) rotate(0.5deg)
    }

    26% {
        transform: translate(-2.5px, 1.5px) rotate(-0.5deg)
    }

    28% {
        transform: translate(-2.5px, 0.5px) rotate(-0.5deg)
    }

    30% {
        transform: translate(1.5px, 1.5px) rotate(-0.5deg)
    }

    32% {
        transform: translate(0.5px, 1.5px) rotate(0.5deg)
    }

    34% {
        transform: translate(1.5px, 1.5px) rotate(-0.5deg)
    }

    36% {
        transform: translate(1.5px, -1.5px) rotate(-0.5deg)
    }

    38% {
        transform: translate(-1.5px, 1.5px) rotate(0.5deg)
    }

    40% {
        transform: translate(0.5px, -2.5px) rotate(-0.5deg)
    }

    42% {
        transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
    }

    44% {
        transform: translate(-2.5px, -0.5px) rotate(-0.5deg)
    }

    46% {
        transform: translate(-1.5px, -0.5px) rotate(-0.5deg)
    }

    48% {
        transform: translate(-2.5px, 1.5px) rotate(-0.5deg)
    }

    50% {
        transform: translate(-0.5px, -2.5px) rotate(0.5deg)
    }

    52% {
        transform: translate(0.5px, 1.5px) rotate(-1.5deg)
    }

    54% {
        transform: translate(-0.5px, -2.5px) rotate(0.5deg)
    }

    56% {
        transform: translate(-0.5px, 0.5px) rotate(-0.5deg)
    }

    58% {
        transform: translate(-0.5px, 1.5px) rotate(0.5deg)
    }

    60% {
        transform: translate(0.5px, -2.5px) rotate(0.5deg)
    }

    62% {
        transform: translate(1.5px, -2.5px) rotate(0.5deg)
    }

    64% {
        transform: translate(-1.5px, 1.5px) rotate(-0.5deg)
    }

    66% {
        transform: translate(-0.5px, 1.5px) rotate(-0.5deg)
    }

    68% {
        transform: translate(-1.5px, -0.5px) rotate(0.5deg)
    }

    70% {
        transform: translate(0.5px, 0.5px) rotate(-0.5deg)
    }

    72% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg)
    }

    74% {
        transform: translate(1.5px, -1.5px) rotate(-1.5deg)
    }

    76% {
        transform: translate(1.5px, 1.5px) rotate(-1.5deg)
    }

    78% {
        transform: translate(-2.5px, -1.5px) rotate(-1.5deg)
    }

    80% {
        transform: translate(0.5px, 1.5px) rotate(-0.5deg)
    }

    82% {
        transform: translate(-2.5px, -1.5px) rotate(0.5deg)
    }

    84% {
        transform: translate(-0.5px, -1.5px) rotate(-0.5deg)
    }

    86% {
        transform: translate(-1.5px, 0.5px) rotate(-0.5deg)
    }

    88% {
        transform: translate(1.5px, 0.5px) rotate(-0.5deg)
    }

    90% {
        transform: translate(0.5px, -1.5px) rotate(-1.5deg)
    }

    92% {
        transform: translate(0.5px, 0.5px) rotate(-1.5deg)
    }

    94% {
        transform: translate(1.5px, 1.5px) rotate(0.5deg)
    }

    96% {
        transform: translate(-1.5px, -1.5px) rotate(-1.5deg)
    }

    98% {
        transform: translate(-2.5px, -0.5px) rotate(-1.5deg)
    }
}

@-webkit-keyframes shake-little {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    4% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    6% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    8% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    10% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    12% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    14% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    16% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    18% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    20% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    22% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    24% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    26% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    28% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    30% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    32% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    34% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    36% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    38% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    40% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    42% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    44% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    46% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    48% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    50% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    52% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    54% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    56% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    58% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    60% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    62% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    64% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    66% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    68% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    70% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    72% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    74% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    76% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    78% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    80% {
        -webkit-transform: translate(0px, -1px) rotate(-0.5deg)
    }

    82% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    84% {
        -webkit-transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    86% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    88% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    90% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    92% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    94% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    96% {
        -webkit-transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    98% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }
}

@keyframes shake-little {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    4% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    6% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    8% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    10% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    12% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    14% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    16% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    18% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    20% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    22% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    24% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    26% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    28% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    30% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    32% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    34% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    36% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    38% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    40% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    42% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    44% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    46% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    48% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    50% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    52% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    54% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    56% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    58% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    60% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    62% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    64% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    66% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    68% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    70% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    72% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    74% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    76% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    78% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    80% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    82% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    84% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    86% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    88% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    90% {
        transform: translate(-1px, -1px) rotate(-0.5deg)
    }

    92% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    94% {
        transform: translate(-1px, 0px) rotate(-0.5deg)
    }

    96% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }

    98% {
        transform: translate(0px, -1px) rotate(-0.5deg)
    }
}

@-webkit-keyframes shake-slow {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        -webkit-transform: translate(-1px, 8px) rotate(1.5deg)
    }

    4% {
        -webkit-transform: translate(7px, 0px) rotate(-0.5deg)
    }

    6% {
        -webkit-transform: translate(8px, 8px) rotate(-3.5deg)
    }

    8% {
        -webkit-transform: translate(-4px, -3px) rotate(-1.5deg)
    }

    10% {
        -webkit-transform: translate(5px, 0px) rotate(-2.5deg)
    }

    12% {
        -webkit-transform: translate(-10px, -3px) rotate(-3.5deg)
    }

    14% {
        -webkit-transform: translate(5px, 7px) rotate(2.5deg)
    }

    16% {
        -webkit-transform: translate(8px, -8px) rotate(-1.5deg)
    }

    18% {
        -webkit-transform: translate(9px, -6px) rotate(-3.5deg)
    }

    20% {
        -webkit-transform: translate(3px, 1px) rotate(-0.5deg)
    }

    22% {
        -webkit-transform: translate(6px, 8px) rotate(-2.5deg)
    }

    24% {
        -webkit-transform: translate(-8px, -1px) rotate(2.5deg)
    }

    26% {
        -webkit-transform: translate(7px, -10px) rotate(0.5deg)
    }

    28% {
        -webkit-transform: translate(7px, -4px) rotate(-3.5deg)
    }

    30% {
        -webkit-transform: translate(-2px, -6px) rotate(-1.5deg)
    }

    32% {
        -webkit-transform: translate(-1px, 0px) rotate(2.5deg)
    }

    34% {
        -webkit-transform: translate(6px, 2px) rotate(-0.5deg)
    }

    36% {
        -webkit-transform: translate(2px, 7px) rotate(1.5deg)
    }

    38% {
        -webkit-transform: translate(2px, -9px) rotate(1.5deg)
    }

    40% {
        -webkit-transform: translate(-5px, -1px) rotate(-0.5deg)
    }

    42% {
        -webkit-transform: translate(-8px, 2px) rotate(-0.5deg)
    }

    44% {
        -webkit-transform: translate(-4px, 3px) rotate(0.5deg)
    }

    46% {
        -webkit-transform: translate(-10px, -2px) rotate(-0.5deg)
    }

    48% {
        -webkit-transform: translate(1px, 9px) rotate(1.5deg)
    }

    50% {
        -webkit-transform: translate(6px, 7px) rotate(1.5deg)
    }

    52% {
        -webkit-transform: translate(-8px, 4px) rotate(0.5deg)
    }

    54% {
        -webkit-transform: translate(6px, -8px) rotate(-2.5deg)
    }

    56% {
        -webkit-transform: translate(2px, -9px) rotate(-2.5deg)
    }

    58% {
        -webkit-transform: translate(-2px, -9px) rotate(0.5deg)
    }

    60% {
        -webkit-transform: translate(2px, 7px) rotate(-0.5deg)
    }

    62% {
        -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
    }

    64% {
        -webkit-transform: translate(-9px, -4px) rotate(-3.5deg)
    }

    66% {
        -webkit-transform: translate(6px, -6px) rotate(0.5deg)
    }

    68% {
        -webkit-transform: translate(0px, -7px) rotate(-2.5deg)
    }

    70% {
        -webkit-transform: translate(-10px, 1px) rotate(1.5deg)
    }

    72% {
        -webkit-transform: translate(-7px, 9px) rotate(2.5deg)
    }

    74% {
        -webkit-transform: translate(2px, -6px) rotate(-0.5deg)
    }

    76% {
        -webkit-transform: translate(5px, 1px) rotate(-0.5deg)
    }

    78% {
        -webkit-transform: translate(-1px, 5px) rotate(2.5deg)
    }

    80% {
        -webkit-transform: translate(3px, 7px) rotate(2.5deg)
    }

    82% {
        -webkit-transform: translate(-6px, -7px) rotate(-0.5deg)
    }

    84% {
        -webkit-transform: translate(-8px, 8px) rotate(-2.5deg)
    }

    86% {
        -webkit-transform: translate(8px, 3px) rotate(-2.5deg)
    }

    88% {
        -webkit-transform: translate(-8px, 3px) rotate(-1.5deg)
    }

    90% {
        -webkit-transform: translate(-7px, -4px) rotate(-3.5deg)
    }

    92% {
        -webkit-transform: translate(-8px, 4px) rotate(2.5deg)
    }

    94% {
        -webkit-transform: translate(-6px, -6px) rotate(-3.5deg)
    }

    96% {
        -webkit-transform: translate(-3px, 2px) rotate(-3.5deg)
    }

    98% {
        -webkit-transform: translate(2px, 1px) rotate(-0.5deg)
    }
}

@keyframes shake-slow {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        transform: translate(-6px, -8px) rotate(2.5deg)
    }

    4% {
        transform: translate(3px, -9px) rotate(-0.5deg)
    }

    6% {
        transform: translate(3px, -8px) rotate(2.5deg)
    }

    8% {
        transform: translate(0px, 5px) rotate(0.5deg)
    }

    10% {
        transform: translate(3px, 2px) rotate(0.5deg)
    }

    12% {
        transform: translate(8px, 0px) rotate(0.5deg)
    }

    14% {
        transform: translate(4px, 7px) rotate(-3.5deg)
    }

    16% {
        transform: translate(-4px, 0px) rotate(-0.5deg)
    }

    18% {
        transform: translate(1px, 3px) rotate(-1.5deg)
    }

    20% {
        transform: translate(-8px, -1px) rotate(-3.5deg)
    }

    22% {
        transform: translate(5px, 9px) rotate(2.5deg)
    }

    24% {
        transform: translate(-9px, -10px) rotate(-2.5deg)
    }

    26% {
        transform: translate(0px, 7px) rotate(-1.5deg)
    }

    28% {
        transform: translate(-10px, 7px) rotate(2.5deg)
    }

    30% {
        transform: translate(8px, -7px) rotate(-1.5deg)
    }

    32% {
        transform: translate(0px, -8px) rotate(-0.5deg)
    }

    34% {
        transform: translate(9px, 7px) rotate(-0.5deg)
    }

    36% {
        transform: translate(-7px, 6px) rotate(0.5deg)
    }

    38% {
        transform: translate(8px, -10px) rotate(-0.5deg)
    }

    40% {
        transform: translate(8px, 0px) rotate(0.5deg)
    }

    42% {
        transform: translate(0px, -2px) rotate(1.5deg)
    }

    44% {
        transform: translate(5px, -2px) rotate(-0.5deg)
    }

    46% {
        transform: translate(1px, -10px) rotate(-2.5deg)
    }

    48% {
        transform: translate(4px, -1px) rotate(2.5deg)
    }

    50% {
        transform: translate(-5px, -4px) rotate(2.5deg)
    }

    52% {
        transform: translate(3px, 2px) rotate(-3.5deg)
    }

    54% {
        transform: translate(1px, -6px) rotate(-0.5deg)
    }

    56% {
        transform: translate(-3px, -4px) rotate(-0.5deg)
    }

    58% {
        transform: translate(-10px, -10px) rotate(2.5deg)
    }

    60% {
        transform: translate(8px, 7px) rotate(-3.5deg)
    }

    62% {
        transform: translate(9px, -6px) rotate(-3.5deg)
    }

    64% {
        transform: translate(-5px, 8px) rotate(-0.5deg)
    }

    66% {
        transform: translate(1px, -3px) rotate(0.5deg)
    }

    68% {
        transform: translate(-6px, 9px) rotate(1.5deg)
    }

    70% {
        transform: translate(-5px, 8px) rotate(-1.5deg)
    }

    72% {
        transform: translate(-10px, -2px) rotate(2.5deg)
    }

    74% {
        transform: translate(0px, -4px) rotate(1.5deg)
    }

    76% {
        transform: translate(-2px, -5px) rotate(0.5deg)
    }

    78% {
        transform: translate(-2px, 9px) rotate(-3.5deg)
    }

    80% {
        transform: translate(7px, 4px) rotate(-3.5deg)
    }

    82% {
        transform: translate(-1px, -4px) rotate(-1.5deg)
    }

    84% {
        transform: translate(3px, -6px) rotate(0.5deg)
    }

    86% {
        transform: translate(7px, -8px) rotate(-1.5deg)
    }

    88% {
        transform: translate(4px, -9px) rotate(1.5deg)
    }

    90% {
        transform: translate(1px, -6px) rotate(2.5deg)
    }

    92% {
        transform: translate(-8px, -1px) rotate(-1.5deg)
    }

    94% {
        transform: translate(-4px, -1px) rotate(0.5deg)
    }

    96% {
        transform: translate(-6px, 9px) rotate(1.5deg)
    }

    98% {
        transform: translate(7px, 4px) rotate(-0.5deg)
    }
}

@-webkit-keyframes shake-hard {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        -webkit-transform: translate(5px, -4px) rotate(-2.5deg)
    }

    4% {
        -webkit-transform: translate(-10px, 5px) rotate(2.5deg)
    }

    6% {
        -webkit-transform: translate(0px, 5px) rotate(-3.5deg)
    }

    8% {
        -webkit-transform: translate(-6px, -10px) rotate(-1.5deg)
    }

    10% {
        -webkit-transform: translate(2px, -7px) rotate(1.5deg)
    }

    12% {
        -webkit-transform: translate(0px, 1px) rotate(0.5deg)
    }

    14% {
        -webkit-transform: translate(7px, -9px) rotate(-0.5deg)
    }

    16% {
        -webkit-transform: translate(-8px, 4px) rotate(-2.5deg)
    }

    18% {
        -webkit-transform: translate(-9px, -4px) rotate(-0.5deg)
    }

    20% {
        -webkit-transform: translate(-8px, -8px) rotate(0.5deg)
    }

    22% {
        -webkit-transform: translate(-7px, 0px) rotate(-0.5deg)
    }

    24% {
        -webkit-transform: translate(-10px, -5px) rotate(-3.5deg)
    }

    26% {
        -webkit-transform: translate(1px, -10px) rotate(-0.5deg)
    }

    28% {
        -webkit-transform: translate(5px, 2px) rotate(-1.5deg)
    }

    30% {
        -webkit-transform: translate(-8px, 5px) rotate(-0.5deg)
    }

    32% {
        -webkit-transform: translate(-4px, 2px) rotate(1.5deg)
    }

    34% {
        -webkit-transform: translate(-9px, 8px) rotate(1.5deg)
    }

    36% {
        -webkit-transform: translate(8px, -3px) rotate(1.5deg)
    }

    38% {
        -webkit-transform: translate(-10px, 7px) rotate(-0.5deg)
    }

    40% {
        -webkit-transform: translate(-7px, 1px) rotate(-3.5deg)
    }

    42% {
        -webkit-transform: translate(-9px, 7px) rotate(0.5deg)
    }

    44% {
        -webkit-transform: translate(4px, 2px) rotate(-3.5deg)
    }

    46% {
        -webkit-transform: translate(8px, 4px) rotate(2.5deg)
    }

    48% {
        -webkit-transform: translate(-5px, -1px) rotate(-2.5deg)
    }

    50% {
        -webkit-transform: translate(-7px, 5px) rotate(-2.5deg)
    }

    52% {
        -webkit-transform: translate(-1px, -7px) rotate(-3.5deg)
    }

    54% {
        -webkit-transform: translate(-2px, -3px) rotate(0.5deg)
    }

    56% {
        -webkit-transform: translate(-4px, -6px) rotate(-2.5deg)
    }

    58% {
        -webkit-transform: translate(5px, 4px) rotate(-2.5deg)
    }

    60% {
        -webkit-transform: translate(-3px, 2px) rotate(-0.5deg)
    }

    62% {
        -webkit-transform: translate(-4px, -10px) rotate(-1.5deg)
    }

    64% {
        -webkit-transform: translate(-4px, -9px) rotate(-2.5deg)
    }

    66% {
        -webkit-transform: translate(3px, -8px) rotate(-1.5deg)
    }

    68% {
        -webkit-transform: translate(-5px, -2px) rotate(0.5deg)
    }

    70% {
        -webkit-transform: translate(-3px, -1px) rotate(-3.5deg)
    }

    72% {
        -webkit-transform: translate(9px, -2px) rotate(0.5deg)
    }

    74% {
        -webkit-transform: translate(7px, -6px) rotate(-2.5deg)
    }

    76% {
        -webkit-transform: translate(1px, 2px) rotate(-1.5deg)
    }

    78% {
        -webkit-transform: translate(-3px, -5px) rotate(-1.5deg)
    }

    80% {
        -webkit-transform: translate(-5px, 3px) rotate(2.5deg)
    }

    82% {
        -webkit-transform: translate(-2px, -1px) rotate(-3.5deg)
    }

    84% {
        -webkit-transform: translate(-8px, 7px) rotate(0.5deg)
    }

    86% {
        -webkit-transform: translate(-2px, 4px) rotate(-0.5deg)
    }

    88% {
        -webkit-transform: translate(4px, 7px) rotate(-3.5deg)
    }

    90% {
        -webkit-transform: translate(2px, 7px) rotate(0.5deg)
    }

    92% {
        -webkit-transform: translate(-3px, 6px) rotate(-3.5deg)
    }

    94% {
        -webkit-transform: translate(1px, 8px) rotate(1.5deg)
    }

    96% {
        -webkit-transform: translate(-8px, -2px) rotate(1.5deg)
    }

    98% {
        -webkit-transform: translate(-5px, 6px) rotate(0.5deg)
    }
}

@keyframes shake-hard {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        transform: translate(0px, 4px) rotate(0.5deg)
    }

    4% {
        transform: translate(6px, -2px) rotate(-3.5deg)
    }

    6% {
        transform: translate(-3px, -8px) rotate(-2.5deg)
    }

    8% {
        transform: translate(-1px, 9px) rotate(2.5deg)
    }

    10% {
        transform: translate(6px, 5px) rotate(-2.5deg)
    }

    12% {
        transform: translate(-3px, 6px) rotate(-2.5deg)
    }

    14% {
        transform: translate(-9px, 1px) rotate(-0.5deg)
    }

    16% {
        transform: translate(-6px, 5px) rotate(2.5deg)
    }

    18% {
        transform: translate(-9px, 8px) rotate(0.5deg)
    }

    20% {
        transform: translate(-9px, 6px) rotate(-2.5deg)
    }

    22% {
        transform: translate(-5px, 6px) rotate(0.5deg)
    }

    24% {
        transform: translate(6px, 3px) rotate(1.5deg)
    }

    26% {
        transform: translate(8px, -10px) rotate(-2.5deg)
    }

    28% {
        transform: translate(0px, -5px) rotate(-3.5deg)
    }

    30% {
        transform: translate(6px, -10px) rotate(2.5deg)
    }

    32% {
        transform: translate(3px, 0px) rotate(-3.5deg)
    }

    34% {
        transform: translate(4px, -6px) rotate(-3.5deg)
    }

    36% {
        transform: translate(-5px, 4px) rotate(-0.5deg)
    }

    38% {
        transform: translate(-7px, -6px) rotate(-1.5deg)
    }

    40% {
        transform: translate(4px, -9px) rotate(-3.5deg)
    }

    42% {
        transform: translate(-9px, -2px) rotate(-1.5deg)
    }

    44% {
        transform: translate(0px, -3px) rotate(1.5deg)
    }

    46% {
        transform: translate(-5px, -5px) rotate(-2.5deg)
    }

    48% {
        transform: translate(-6px, 2px) rotate(-3.5deg)
    }

    50% {
        transform: translate(0px, -5px) rotate(-1.5deg)
    }

    52% {
        transform: translate(6px, 1px) rotate(-2.5deg)
    }

    54% {
        transform: translate(9px, 6px) rotate(2.5deg)
    }

    56% {
        transform: translate(-8px, -10px) rotate(-0.5deg)
    }

    58% {
        transform: translate(6px, -2px) rotate(-1.5deg)
    }

    60% {
        transform: translate(-4px, -8px) rotate(-1.5deg)
    }

    62% {
        transform: translate(0px, -9px) rotate(0.5deg)
    }

    64% {
        transform: translate(-7px, -6px) rotate(2.5deg)
    }

    66% {
        transform: translate(8px, 6px) rotate(2.5deg)
    }

    68% {
        transform: translate(-10px, -7px) rotate(-2.5deg)
    }

    70% {
        transform: translate(-1px, 9px) rotate(-2.5deg)
    }

    72% {
        transform: translate(-6px, 8px) rotate(-2.5deg)
    }

    74% {
        transform: translate(2px, 5px) rotate(-1.5deg)
    }

    76% {
        transform: translate(-7px, 6px) rotate(1.5deg)
    }

    78% {
        transform: translate(3px, -9px) rotate(0.5deg)
    }

    80% {
        transform: translate(-4px, -9px) rotate(-1.5deg)
    }

    82% {
        transform: translate(0px, 7px) rotate(0.5deg)
    }

    84% {
        transform: translate(-4px, -3px) rotate(-1.5deg)
    }

    86% {
        transform: translate(-10px, 8px) rotate(-0.5deg)
    }

    88% {
        transform: translate(-9px, 1px) rotate(-0.5deg)
    }

    90% {
        transform: translate(-3px, 6px) rotate(1.5deg)
    }

    92% {
        transform: translate(-8px, -10px) rotate(-3.5deg)
    }

    94% {
        transform: translate(-8px, -7px) rotate(2.5deg)
    }

    96% {
        transform: translate(-2px, 1px) rotate(2.5deg)
    }

    98% {
        transform: translate(-3px, 4px) rotate(-2.5deg)
    }
}

@-webkit-keyframes shake-horizontal {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        -webkit-transform: translate(-8px, 0px) rotate(0deg)
    }

    4% {
        -webkit-transform: translate(3px, 0px) rotate(0deg)
    }

    6% {
        -webkit-transform: translate(7px, 0px) rotate(0deg)
    }

    8% {
        -webkit-transform: translate(1px, 0px) rotate(0deg)
    }

    10% {
        -webkit-transform: translate(4px, 0px) rotate(0deg)
    }

    12% {
        -webkit-transform: translate(3px, 0px) rotate(0deg)
    }

    14% {
        -webkit-transform: translate(7px, 0px) rotate(0deg)
    }

    16% {
        -webkit-transform: translate(-3px, 0px) rotate(0deg)
    }

    18% {
        -webkit-transform: translate(-5px, 0px) rotate(0deg)
    }

    20% {
        -webkit-transform: translate(-10px, 0px) rotate(0deg)
    }

    22% {
        -webkit-transform: translate(8px, 0px) rotate(0deg)
    }

    24% {
        -webkit-transform: translate(2px, 0px) rotate(0deg)
    }

    26% {
        -webkit-transform: translate(2px, 0px) rotate(0deg)
    }

    28% {
        -webkit-transform: translate(3px, 0px) rotate(0deg)
    }

    30% {
        -webkit-transform: translate(7px, 0px) rotate(0deg)
    }

    32% {
        -webkit-transform: translate(-8px, 0px) rotate(0deg)
    }

    34% {
        -webkit-transform: translate(-10px, 0px) rotate(0deg)
    }

    36% {
        -webkit-transform: translate(8px, 0px) rotate(0deg)
    }

    38% {
        -webkit-transform: translate(-5px, 0px) rotate(0deg)
    }

    40% {
        -webkit-transform: translate(-1px, 0px) rotate(0deg)
    }

    42% {
        -webkit-transform: translate(6px, 0px) rotate(0deg)
    }

    44% {
        -webkit-transform: translate(-3px, 0px) rotate(0deg)
    }

    46% {
        -webkit-transform: translate(-1px, 0px) rotate(0deg)
    }

    48% {
        -webkit-transform: translate(9px, 0px) rotate(0deg)
    }

    50% {
        -webkit-transform: translate(-3px, 0px) rotate(0deg)
    }

    52% {
        -webkit-transform: translate(8px, 0px) rotate(0deg)
    }

    54% {
        -webkit-transform: translate(4px, 0px) rotate(0deg)
    }

    56% {
        -webkit-transform: translate(4px, 0px) rotate(0deg)
    }

    58% {
        -webkit-transform: translate(2px, 0px) rotate(0deg)
    }

    60% {
        -webkit-transform: translate(2px, 0px) rotate(0deg)
    }

    62% {
        -webkit-transform: translate(-9px, 0px) rotate(0deg)
    }

    64% {
        -webkit-transform: translate(-6px, 0px) rotate(0deg)
    }

    66% {
        -webkit-transform: translate(-10px, 0px) rotate(0deg)
    }

    68% {
        -webkit-transform: translate(6px, 0px) rotate(0deg)
    }

    70% {
        -webkit-transform: translate(7px, 0px) rotate(0deg)
    }

    72% {
        -webkit-transform: translate(-1px, 0px) rotate(0deg)
    }

    74% {
        -webkit-transform: translate(-1px, 0px) rotate(0deg)
    }

    76% {
        -webkit-transform: translate(4px, 0px) rotate(0deg)
    }

    78% {
        -webkit-transform: translate(1px, 0px) rotate(0deg)
    }

    80% {
        -webkit-transform: translate(-6px, 0px) rotate(0deg)
    }

    82% {
        -webkit-transform: translate(-3px, 0px) rotate(0deg)
    }

    84% {
        -webkit-transform: translate(-8px, 0px) rotate(0deg)
    }

    86% {
        -webkit-transform: translate(5px, 0px) rotate(0deg)
    }

    88% {
        -webkit-transform: translate(-3px, 0px) rotate(0deg)
    }

    90% {
        -webkit-transform: translate(-7px, 0px) rotate(0deg)
    }

    92% {
        -webkit-transform: translate(-4px, 0px) rotate(0deg)
    }

    94% {
        -webkit-transform: translate(2px, 0px) rotate(0deg)
    }

    96% {
        -webkit-transform: translate(-9px, 0px) rotate(0deg)
    }

    98% {
        -webkit-transform: translate(3px, 0px) rotate(0deg)
    }
}

@keyframes shake-horizontal {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        transform: translate(-7px, 0px) rotate(0deg)
    }

    4% {
        transform: translate(7px, 0px) rotate(0deg)
    }

    6% {
        transform: translate(5px, 0px) rotate(0deg)
    }

    8% {
        transform: translate(9px, 0px) rotate(0deg)
    }

    10% {
        transform: translate(9px, 0px) rotate(0deg)
    }

    12% {
        transform: translate(3px, 0px) rotate(0deg)
    }

    14% {
        transform: translate(9px, 0px) rotate(0deg)
    }

    16% {
        transform: translate(-6px, 0px) rotate(0deg)
    }

    18% {
        transform: translate(8px, 0px) rotate(0deg)
    }

    20% {
        transform: translate(-2px, 0px) rotate(0deg)
    }

    22% {
        transform: translate(-1px, 0px) rotate(0deg)
    }

    24% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    26% {
        transform: translate(-6px, 0px) rotate(0deg)
    }

    28% {
        transform: translate(-5px, 0px) rotate(0deg)
    }

    30% {
        transform: translate(-4px, 0px) rotate(0deg)
    }

    32% {
        transform: translate(-10px, 0px) rotate(0deg)
    }

    34% {
        transform: translate(9px, 0px) rotate(0deg)
    }

    36% {
        transform: translate(4px, 0px) rotate(0deg)
    }

    38% {
        transform: translate(-1px, 0px) rotate(0deg)
    }

    40% {
        transform: translate(2px, 0px) rotate(0deg)
    }

    42% {
        transform: translate(2px, 0px) rotate(0deg)
    }

    44% {
        transform: translate(-4px, 0px) rotate(0deg)
    }

    46% {
        transform: translate(8px, 0px) rotate(0deg)
    }

    48% {
        transform: translate(-6px, 0px) rotate(0deg)
    }

    50% {
        transform: translate(4px, 0px) rotate(0deg)
    }

    52% {
        transform: translate(-5px, 0px) rotate(0deg)
    }

    54% {
        transform: translate(6px, 0px) rotate(0deg)
    }

    56% {
        transform: translate(-5px, 0px) rotate(0deg)
    }

    58% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    60% {
        transform: translate(3px, 0px) rotate(0deg)
    }

    62% {
        transform: translate(5px, 0px) rotate(0deg)
    }

    64% {
        transform: translate(-4px, 0px) rotate(0deg)
    }

    66% {
        transform: translate(-8px, 0px) rotate(0deg)
    }

    68% {
        transform: translate(4px, 0px) rotate(0deg)
    }

    70% {
        transform: translate(-5px, 0px) rotate(0deg)
    }

    72% {
        transform: translate(7px, 0px) rotate(0deg)
    }

    74% {
        transform: translate(-5px, 0px) rotate(0deg)
    }

    76% {
        transform: translate(1px, 0px) rotate(0deg)
    }

    78% {
        transform: translate(8px, 0px) rotate(0deg)
    }

    80% {
        transform: translate(8px, 0px) rotate(0deg)
    }

    82% {
        transform: translate(7px, 0px) rotate(0deg)
    }

    84% {
        transform: translate(-10px, 0px) rotate(0deg)
    }

    86% {
        transform: translate(9px, 0px) rotate(0deg)
    }

    88% {
        transform: translate(-1px, 0px) rotate(0deg)
    }

    90% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    92% {
        transform: translate(-2px, 0px) rotate(0deg)
    }

    94% {
        transform: translate(5px, 0px) rotate(0deg)
    }

    96% {
        transform: translate(5px, 0px) rotate(0deg)
    }

    98% {
        transform: translate(-8px, 0px) rotate(0deg)
    }
}

@-webkit-keyframes shake-vertical {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    4% {
        -webkit-transform: translate(0px, -6px) rotate(0deg)
    }

    6% {
        -webkit-transform: translate(0px, -7px) rotate(0deg)
    }

    8% {
        -webkit-transform: translate(0px, -5px) rotate(0deg)
    }

    10% {
        -webkit-transform: translate(0px, 1px) rotate(0deg)
    }

    12% {
        -webkit-transform: translate(0px, -1px) rotate(0deg)
    }

    14% {
        -webkit-transform: translate(0px, -9px) rotate(0deg)
    }

    16% {
        -webkit-transform: translate(0px, -10px) rotate(0deg)
    }

    18% {
        -webkit-transform: translate(0px, -9px) rotate(0deg)
    }

    20% {
        -webkit-transform: translate(0px, 3px) rotate(0deg)
    }

    22% {
        -webkit-transform: translate(0px, -7px) rotate(0deg)
    }

    24% {
        -webkit-transform: translate(0px, 2px) rotate(0deg)
    }

    26% {
        -webkit-transform: translate(0px, 9px) rotate(0deg)
    }

    28% {
        -webkit-transform: translate(0px, 8px) rotate(0deg)
    }

    30% {
        -webkit-transform: translate(0px, 8px) rotate(0deg)
    }

    32% {
        -webkit-transform: translate(0px, 4px) rotate(0deg)
    }

    34% {
        -webkit-transform: translate(0px, -1px) rotate(0deg)
    }

    36% {
        -webkit-transform: translate(0px, 7px) rotate(0deg)
    }

    38% {
        -webkit-transform: translate(0px, 5px) rotate(0deg)
    }

    40% {
        -webkit-transform: translate(0px, -5px) rotate(0deg)
    }

    42% {
        -webkit-transform: translate(0px, 5px) rotate(0deg)
    }

    44% {
        -webkit-transform: translate(0px, 4px) rotate(0deg)
    }

    46% {
        -webkit-transform: translate(0px, 3px) rotate(0deg)
    }

    48% {
        -webkit-transform: translate(0px, 6px) rotate(0deg)
    }

    50% {
        -webkit-transform: translate(0px, -6px) rotate(0deg)
    }

    52% {
        -webkit-transform: translate(0px, -3px) rotate(0deg)
    }

    54% {
        -webkit-transform: translate(0px, -4px) rotate(0deg)
    }

    56% {
        -webkit-transform: translate(0px, -5px) rotate(0deg)
    }

    58% {
        -webkit-transform: translate(0px, 2px) rotate(0deg)
    }

    60% {
        -webkit-transform: translate(0px, -2px) rotate(0deg)
    }

    62% {
        -webkit-transform: translate(0px, 2px) rotate(0deg)
    }

    64% {
        -webkit-transform: translate(0px, -7px) rotate(0deg)
    }

    66% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    68% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    70% {
        -webkit-transform: translate(0px, -1px) rotate(0deg)
    }

    72% {
        -webkit-transform: translate(0px, 2px) rotate(0deg)
    }

    74% {
        -webkit-transform: translate(0px, 3px) rotate(0deg)
    }

    76% {
        -webkit-transform: translate(0px, 3px) rotate(0deg)
    }

    78% {
        -webkit-transform: translate(0px, -10px) rotate(0deg)
    }

    80% {
        -webkit-transform: translate(0px, -5px) rotate(0deg)
    }

    82% {
        -webkit-transform: translate(0px, 9px) rotate(0deg)
    }

    84% {
        -webkit-transform: translate(0px, 9px) rotate(0deg)
    }

    86% {
        -webkit-transform: translate(0px, 1px) rotate(0deg)
    }

    88% {
        -webkit-transform: translate(0px, 6px) rotate(0deg)
    }

    90% {
        -webkit-transform: translate(0px, -2px) rotate(0deg)
    }

    92% {
        -webkit-transform: translate(0px, 4px) rotate(0deg)
    }

    94% {
        -webkit-transform: translate(0px, -4px) rotate(0deg)
    }

    96% {
        -webkit-transform: translate(0px, -1px) rotate(0deg)
    }

    98% {
        -webkit-transform: translate(0px, -8px) rotate(0deg)
    }
}

@keyframes shake-vertical {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        transform: translate(0px, -2px) rotate(0deg)
    }

    4% {
        transform: translate(0px, -3px) rotate(0deg)
    }

    6% {
        transform: translate(0px, 9px) rotate(0deg)
    }

    8% {
        transform: translate(0px, 7px) rotate(0deg)
    }

    10% {
        transform: translate(0px, -6px) rotate(0deg)
    }

    12% {
        transform: translate(0px, 6px) rotate(0deg)
    }

    14% {
        transform: translate(0px, -3px) rotate(0deg)
    }

    16% {
        transform: translate(0px, 6px) rotate(0deg)
    }

    18% {
        transform: translate(0px, 8px) rotate(0deg)
    }

    20% {
        transform: translate(0px, 9px) rotate(0deg)
    }

    22% {
        transform: translate(0px, -4px) rotate(0deg)
    }

    24% {
        transform: translate(0px, -7px) rotate(0deg)
    }

    26% {
        transform: translate(0px, -9px) rotate(0deg)
    }

    28% {
        transform: translate(0px, 7px) rotate(0deg)
    }

    30% {
        transform: translate(0px, 7px) rotate(0deg)
    }

    32% {
        transform: translate(0px, 6px) rotate(0deg)
    }

    34% {
        transform: translate(0px, 4px) rotate(0deg)
    }

    36% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    38% {
        transform: translate(0px, 4px) rotate(0deg)
    }

    40% {
        transform: translate(0px, 7px) rotate(0deg)
    }

    42% {
        transform: translate(0px, -5px) rotate(0deg)
    }

    44% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    46% {
        transform: translate(0px, -2px) rotate(0deg)
    }

    48% {
        transform: translate(0px, -5px) rotate(0deg)
    }

    50% {
        transform: translate(0px, -4px) rotate(0deg)
    }

    52% {
        transform: translate(0px, 1px) rotate(0deg)
    }

    54% {
        transform: translate(0px, -1px) rotate(0deg)
    }

    56% {
        transform: translate(0px, -2px) rotate(0deg)
    }

    58% {
        transform: translate(0px, 5px) rotate(0deg)
    }

    60% {
        transform: translate(0px, 6px) rotate(0deg)
    }

    62% {
        transform: translate(0px, -3px) rotate(0deg)
    }

    64% {
        transform: translate(0px, -3px) rotate(0deg)
    }

    66% {
        transform: translate(0px, -9px) rotate(0deg)
    }

    68% {
        transform: translate(0px, -8px) rotate(0deg)
    }

    70% {
        transform: translate(0px, -7px) rotate(0deg)
    }

    72% {
        transform: translate(0px, 5px) rotate(0deg)
    }

    74% {
        transform: translate(0px, 5px) rotate(0deg)
    }

    76% {
        transform: translate(0px, -6px) rotate(0deg)
    }

    78% {
        transform: translate(0px, 8px) rotate(0deg)
    }

    80% {
        transform: translate(0px, 2px) rotate(0deg)
    }

    82% {
        transform: translate(0px, -8px) rotate(0deg)
    }

    84% {
        transform: translate(0px, -6px) rotate(0deg)
    }

    86% {
        transform: translate(0px, 5px) rotate(0deg)
    }

    88% {
        transform: translate(0px, -9px) rotate(0deg)
    }

    90% {
        transform: translate(0px, 1px) rotate(0deg)
    }

    92% {
        transform: translate(0px, -9px) rotate(0deg)
    }

    94% {
        transform: translate(0px, -8px) rotate(0deg)
    }

    96% {
        transform: translate(0px, -3px) rotate(0deg)
    }

    98% {
        transform: translate(0px, 1px) rotate(0deg)
    }
}

@-webkit-keyframes shake-rotate {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
    }

    4% {
        -webkit-transform: translate(0px, 0px) rotate(1.5deg)
    }

    6% {
        -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
    }

    8% {
        -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
    }

    10% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    12% {
        -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
    }

    14% {
        -webkit-transform: translate(0px, 0px) rotate(-4.5deg)
    }

    16% {
        -webkit-transform: translate(0px, 0px) rotate(0.5deg)
    }

    18% {
        -webkit-transform: translate(0px, 0px) rotate(3.5deg)
    }

    20% {
        -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
    }

    22% {
        -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
    }

    24% {
        -webkit-transform: translate(0px, 0px) rotate(3.5deg)
    }

    26% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    28% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    30% {
        -webkit-transform: translate(0px, 0px) rotate(5.5deg)
    }

    32% {
        -webkit-transform: translate(0px, 0px) rotate(3.5deg)
    }

    34% {
        -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
    }

    36% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    38% {
        -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
    }

    40% {
        -webkit-transform: translate(0px, 0px) rotate(4.5deg)
    }

    42% {
        -webkit-transform: translate(0px, 0px) rotate(6.5deg)
    }

    44% {
        -webkit-transform: translate(0px, 0px) rotate(0.5deg)
    }

    46% {
        -webkit-transform: translate(0px, 0px) rotate(4.5deg)
    }

    48% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    50% {
        -webkit-transform: translate(0px, 0px) rotate(0.5deg)
    }

    52% {
        -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
    }

    54% {
        -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
    }

    56% {
        -webkit-transform: translate(0px, 0px) rotate(0.5deg)
    }

    58% {
        -webkit-transform: translate(0px, 0px) rotate(6.5deg)
    }

    60% {
        -webkit-transform: translate(0px, 0px) rotate(-3.5deg)
    }

    62% {
        -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
    }

    64% {
        -webkit-transform: translate(0px, 0px) rotate(1.5deg)
    }

    66% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    68% {
        -webkit-transform: translate(0px, 0px) rotate(2.5deg)
    }

    70% {
        -webkit-transform: translate(0px, 0px) rotate(-4.5deg)
    }

    72% {
        -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
    }

    74% {
        -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
    }

    76% {
        -webkit-transform: translate(0px, 0px) rotate(3.5deg)
    }

    78% {
        -webkit-transform: translate(0px, 0px) rotate(-5.5deg)
    }

    80% {
        -webkit-transform: translate(0px, 0px) rotate(1.5deg)
    }

    82% {
        -webkit-transform: translate(0px, 0px) rotate(4.5deg)
    }

    84% {
        -webkit-transform: translate(0px, 0px) rotate(-1.5deg)
    }

    86% {
        -webkit-transform: translate(0px, 0px) rotate(-2.5deg)
    }

    88% {
        -webkit-transform: translate(0px, 0px) rotate(-3.5deg)
    }

    90% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    92% {
        -webkit-transform: translate(0px, 0px) rotate(-0.5deg)
    }

    94% {
        -webkit-transform: translate(0px, 0px) rotate(-6.5deg)
    }

    96% {
        -webkit-transform: translate(0px, 0px) rotate(-7.5deg)
    }

    98% {
        -webkit-transform: translate(0px, 0px) rotate(6.5deg)
    }
}

@keyframes shake-rotate {
    0% {
        transform: translate(0px, 0px) rotate(0deg)
    }

    2% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    4% {
        transform: translate(0px, 0px) rotate(-4.5deg)
    }

    6% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    8% {
        transform: translate(0px, 0px) rotate(4.5deg)
    }

    10% {
        transform: translate(0px, 0px) rotate(-5.5deg)
    }

    12% {
        transform: translate(0px, 0px) rotate(-3.5deg)
    }

    14% {
        transform: translate(0px, 0px) rotate(-1.5deg)
    }

    16% {
        transform: translate(0px, 0px) rotate(-1.5deg)
    }

    18% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    20% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    22% {
        transform: translate(0px, 0px) rotate(6.5deg)
    }

    24% {
        transform: translate(0px, 0px) rotate(0.5deg)
    }

    26% {
        transform: translate(0px, 0px) rotate(-5.5deg)
    }

    28% {
        transform: translate(0px, 0px) rotate(-4.5deg)
    }

    30% {
        transform: translate(0px, 0px) rotate(-1.5deg)
    }

    32% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    34% {
        transform: translate(0px, 0px) rotate(0.5deg)
    }

    36% {
        transform: translate(0px, 0px) rotate(6.5deg)
    }

    38% {
        transform: translate(0px, 0px) rotate(-6.5deg)
    }

    40% {
        transform: translate(0px, 0px) rotate(3.5deg)
    }

    42% {
        transform: translate(0px, 0px) rotate(-4.5deg)
    }

    44% {
        transform: translate(0px, 0px) rotate(5.5deg)
    }

    46% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    48% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    50% {
        transform: translate(0px, 0px) rotate(5.5deg)
    }

    52% {
        transform: translate(0px, 0px) rotate(-1.5deg)
    }

    54% {
        transform: translate(0px, 0px) rotate(5.5deg)
    }

    56% {
        transform: translate(0px, 0px) rotate(-7.5deg)
    }

    58% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    60% {
        transform: translate(0px, 0px) rotate(6.5deg)
    }

    62% {
        transform: translate(0px, 0px) rotate(1.5deg)
    }

    64% {
        transform: translate(0px, 0px) rotate(-7.5deg)
    }

    66% {
        transform: translate(0px, 0px) rotate(-2.5deg)
    }

    68% {
        transform: translate(0px, 0px) rotate(3.5deg)
    }

    70% {
        transform: translate(0px, 0px) rotate(-4.5deg)
    }

    72% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    74% {
        transform: translate(0px, 0px) rotate(2.5deg)
    }

    76% {
        transform: translate(0px, 0px) rotate(-2.5deg)
    }

    78% {
        transform: translate(0px, 0px) rotate(-0.5deg)
    }

    80% {
        transform: translate(0px, 0px) rotate(-3.5deg)
    }

    82% {
        transform: translate(0px, 0px) rotate(5.5deg)
    }

    84% {
        transform: translate(0px, 0px) rotate(-1.5deg)
    }

    86% {
        transform: translate(0px, 0px) rotate(-1.5deg)
    }

    88% {
        transform: translate(0px, 0px) rotate(4.5deg)
    }

    90% {
        transform: translate(0px, 0px) rotate(5.5deg)
    }

    92% {
        transform: translate(0px, 0px) rotate(4.5deg)
    }

    94% {
        transform: translate(0px, 0px) rotate(-1.5deg)
    }

    96% {
        transform: translate(0px, 0px) rotate(3.5deg)
    }

    98% {
        transform: translate(0px, 0px) rotate(-7.5deg)
    }
}

@-webkit-keyframes shake-opacity {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        opacity: 0.7
    }

    10% {
        -webkit-transform: translate(-4px, 1px) rotate(-1.5deg);
        opacity: 0.1
    }

    20% {
        -webkit-transform: translate(-4px, -4px) rotate(-2.5deg);
        opacity: 0.4
    }

    30% {
        -webkit-transform: translate(-3px, -5px) rotate(-1.5deg);
        opacity: 0
    }

    40% {
        -webkit-transform: translate(0px, 0px) rotate(0.5deg);
        opacity: 0.6
    }

    50% {
        -webkit-transform: translate(0px, 0px) rotate(-2.5deg);
        opacity: 0.8
    }

    60% {
        -webkit-transform: translate(-5px, -2px) rotate(1.5deg);
        opacity: 0.4
    }

    70% {
        -webkit-transform: translate(-1px, 3px) rotate(-0.5deg);
        opacity: 0.1
    }

    80% {
        -webkit-transform: translate(-2px, -2px) rotate(1.5deg);
        opacity: 0.2
    }

    90% {
        -webkit-transform: translate(-3px, -3px) rotate(1.5deg);
        opacity: 0.3
    }
}

@keyframes shake-opacity {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
        opacity: 0.6
    }

    10% {
        transform: translate(-2px, -1px) rotate(-0.5deg);
        opacity: 0.5
    }

    20% {
        transform: translate(-4px, 4px) rotate(1.5deg);
        opacity: 0.4
    }

    30% {
        transform: translate(-4px, -1px) rotate(-1.5deg);
        opacity: 0.8
    }

    40% {
        transform: translate(-2px, -1px) rotate(-2.5deg);
        opacity: 0.3
    }

    50% {
        transform: translate(-4px, 1px) rotate(-2.5deg);
        opacity: 0.5
    }

    60% {
        transform: translate(-2px, 4px) rotate(0.5deg);
        opacity: 0.1
    }

    70% {
        transform: translate(-3px, 1px) rotate(-0.5deg);
        opacity: 0.4
    }

    80% {
        transform: translate(0px, 0px) rotate(-0.5deg);
        opacity: 0.5
    }

    90% {
        transform: translate(2px, -1px) rotate(-2.5deg);
        opacity: 0.8
    }
}

@-webkit-keyframes shake-crazy {
    0% {
        -webkit-transform: translate(0px, 0px) rotate(0deg);
        opacity: 0.6
    }

    10% {
        -webkit-transform: translate(14px, 19px) rotate(-1deg);
        opacity: 0.8
    }

    20% {
        -webkit-transform: translate(14px, 11px) rotate(5deg);
        opacity: 0.7
    }

    30% {
        -webkit-transform: translate(9px, -6px) rotate(-9deg);
        opacity: 0.9
    }

    40% {
        -webkit-transform: translate(0px, -19px) rotate(-6deg);
        opacity: 0.6
    }

    50% {
        -webkit-transform: translate(16px, 19px) rotate(9deg);
        opacity: 0.7
    }

    60% {
        -webkit-transform: translate(-11px, -10px) rotate(4deg);
        opacity: 0.4
    }

    70% {
        -webkit-transform: translate(-1px, 13px) rotate(-9deg);
        opacity: 0.2
    }

    80% {
        -webkit-transform: translate(-9px, -16px) rotate(0deg);
        opacity: 0.1
    }

    90% {
        -webkit-transform: translate(3px, 2px) rotate(-2deg);
        opacity: 0.7
    }
}

@keyframes shake-crazy {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
        opacity: 0.4
    }

    10% {
        transform: translate(3px, 10px) rotate(-1deg);
        opacity: 0.8
    }

    20% {
        transform: translate(5px, 14px) rotate(-3deg);
        opacity: 0.5
    }

    30% {
        transform: translate(14px, 3px) rotate(4deg);
        opacity: 0.6
    }

    40% {
        transform: translate(-17px, 0px) rotate(9deg);
        opacity: 0.7
    }

    50% {
        transform: translate(1px, 17px) rotate(-4deg);
        opacity: 0.7
    }

    60% {
        transform: translate(9px, -4px) rotate(-10deg);
        opacity: 0.2
    }

    70% {
        transform: translate(13px, 7px) rotate(7deg);
        opacity: 0.4
    }

    80% {
        transform: translate(10px, 12px) rotate(9deg);
        opacity: 0.1
    }

    90% {
        transform: translate(0px, 3px) rotate(5deg);
        opacity: 0.6
    }
}

.tool-price {
    bottom: 135px;
    color: #000;
    font-size: 2.3em;
    font-weight: 300;
    letter-spacing: -0.03em;
    padding-right: 0;
    position: absolute;
    right: 10px;
    z-index: 1;
    background: #FFF;
    border-radius: 5px;
}

.dienshop-footer {
    background: #2c2c2c;
    color: #fff;
    padding: 40px 20px 20px;
    margin-top: 60px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px;
}

.footer-col h3 {
    color: #ff6b6b;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.footer-col p {
    margin: 5px 0;
    line-height: 1.6;
}

.footer-col a {
    color: #fff;
    text-decoration: underline;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #444;
}

.stud-club {
    color: #990033 !important;
    font-size: 2.2em !important;
    font-weight: 400 !important;
}
/* ── Responsive additions ──────────────────────────────────── */
@media (max-width: 768px) {
    .cd-customization {
        flex-direction: column;
    }
    .promo-input-group {
        flex-wrap: wrap;
        gap: 8px;
    }
    .notice-bar {
        font-size: 0.85em;
        padding: 6px 10px;
    }
    #cd-gallery-items {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1em;
    }
}

@media (max-width: 480px) {
    #cd-gallery-items {
        grid-template-columns: 1fr;
    }
    .cd-cart {
        width: 95vw;
        right: 0;
    }
    .divisas {
        width: 100%;
    }
}