/* open-sans-300 - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/open-sans-v23-latin-ext_latin-300.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-300italic - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: url('fonts/open-sans-v23-latin-ext_latin-300italic.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-regular - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/open-sans-v23-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-italic - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('fonts/open-sans-v23-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600 - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('fonts/open-sans-v23-latin-ext_latin-600.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-600italic - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: url('fonts/open-sans-v23-latin-ext_latin-600italic.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-600italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700 - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/open-sans-v23-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}

/* open-sans-700italic - latin-ext_latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: url('fonts/open-sans-v23-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
  src: 
       url('fonts/open-sans-v23-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/open-sans-v23-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/open-sans-v23-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/open-sans-v23-latin-ext_latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
}





#krups-smartslide-demo {
    width: 100vw;
    height: 100vh;
    font-family: Open Sans, sans-serif;
    background-color: #000;
    overflow: hidden;
    opacity: 0;
    position: fixed;
    z-index: -1;
    left: 0;
    top: 0;
    transition: opacity 0.3s ease, z-index 0s 0.3s;
}

#krups-smartslide-demo.smartslide-opened {
    z-index: 50000;
    opacity: 1;
}

      /* UI */

                .kx {
                    color:white;
                    line-height: initial;
                }

                .kx .pleaseRotate {
                    display:none;
                }

            @media (max-width: 480px) and (min-height: 481px) and (orientation: portrait)  {
  
                .kx .pleaseRotate {
                    background-color: #925700;
                    border-radius: 3px;
                    z-index: 10;
                    display: block;
                    color: white;
                    font-size: 22px;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    width: 500px;
                    height: 340px;
                    /*background: rgba(0, 0, 0, 0.7);
                    border-radius: 20px;*/
                }
                .kx .pleaseRotate svg {
                    width: 220px;
                    height: 220px;
                    position: absolute;
                    top: 64px;
                    left: 150px;
                }
                .kx .pleaseRotate .closePleaseRotate {
                    width: 32px;
                    height: 32px;
                    font-size: 32px;
                    line-height: 32px;
                    position: absolute;
                    top: 10px;
                    right: 10px;
                    font-weight: light;
                }
            }

            .kx .kxfullScreen{
                position: absolute;
                width: 20px;
                height: 20px;
               right: 85px;
top: 85px;                color: white;
                z-index: 2;
                opacity:.7;
                cursor:pointer;
            }
            .kxfullScreen svg{
                width: 100%;
                height: 100%;
            }
  
            .kx .unitButton {
                position: absolute;
                opacity: 0.38;
                width: 90px;
                height: 90px;
            }
  
            .kx .unitButton.kxUnitButtonStart{
                left: 27px;
                top: 78px;
            }
  
            .kx .unitButton.kxUnitButtonHome{
                left: 658px;
                top: 78px;
            }
  
            .kx .unitButton.kxUnitButtonUserOne{
                left: 27px;
                top: 244px;
            }
  
            .kx .unitButton.kxUnitButtonUserTwo{
                left: 658px;
                top: 244px;
            }
  
  
            /*BACKGROUNDS*/
  
            .kx .bkg1,.kx .bkgDefault {background-position:0 0!important}
            .kx .bkg2 {background-position:-480px 0!important}
            .kx .bkg3 {background-position:-960px 0!important}
            .kx .bkg4 {background-position:-1440px 0!important}
            .kx .bkg5 {background-position:0 -320px!important}
            .kx .bkg6 {background-position:-480px -320px!important}
            .kx .bkg7 {background-position:-960px -320px!important}
            .kx .bkg8 {background-position:-1440px -320px!important}
            .kx .bkg9 {background-position:0 -640px!important}
            .kx .bkg10 {background-position:-480px -640px!important}
            .kx .bkg11 {background-position:-960px -640px!important}
            .kx .bkg12 {background-position:-1440px -640px!important}
            .kx .bkg13 {background-position:0 -960px!important}
            .kx .bkg14 {background-position:-480px -960px!important}
            .kx .bkg15 {background-position:-960px -960px!important}
            .kx .bkg16 {background-position:-1440px -960px!important}
  
            /*COLORS*/
            .kxScreen {
                --orange:#f38230;
                --cyan:#13aec0;
                --turquoise:#0f8768;
                --green:#6c9106;
                --gold:#fffb01;
                --red:#c80000;
                --fushia:#c90563;
                --pink:#ef52bb;
                --violet:#8d3fcf;
                --blue:#2855ff;
            }
  
            .kx .orange .userFIllColor, .kx .orange use{
                fill:var(--orange)!important;
                background-color:var(--orange)!important;
            }
            .kx .orange .userBorderColor,.kx .borderOrange{
                border-color:var(--orange)!important;
            }
  
            .kx .cyan .userFIllColor, .kx .cyan use{
                fill:#13aec0;
                background-color:#13aec0;
            }
            .kx .cyan .kx .userBorderColor{
                border-color:#13aec0!important;
            }
  
            .kx .turquoise .userFIllColor, .kx .turquoise use{
                fill:#0f8768;
                background-color:#0f8768;
            }
            .kx .turquoise .userBorderColor{
                border-color:#0f8768!important;
            }
  
            .kx .green .userFIllColor, .kx .green use{
                fill:#6c9106;
                background-color:#6c9106;
            }
            .kx .green .userBorderColor{
                border-color:#6c9106!important;
            }
  
            .kx .gold .userFIllColor, .kx .gold use{
                fill:#fffb01;
                background-color:#fffb01;
            }
            .kx .gold .userBorderColor{
                border-color:#fffb01!important;
            }
  
            .kx .red .userFIllColor, .kx .red use{
                fill:#c80000!important;
                background-color:#c80000;
            }
            .kx .red .userBorderColor{
                border-color:#c80000!important;
            }
  
            .kx .fushia .userFIllColor, .kx .fushia use{
                fill:#c90563;
                background-color:#c90563;
            }
            .kx .fushia .userBorderColor{
                border-color:#c90563!important;
            }
  
            .kx .pink .userFIllColor, .kx .pink use{
                fill:#ef52bb;
                background-color:#ef52bb;
            }
            .kx .pink .userBorderColor{
                border-color:#ef52bb!important;
            }
  
            .kx .violet .userFIllColor, .kx .violet use{
                fill:#8d3fcf;
                background-color:#8d3fcf;
            }
            .kx .violet .userBorderColor{
                border-color:#8d3fcf!important;
            }
  
            .kx .blue .userFIllColor, .kx .blue use{
                fill:#2855ff;
                background-color:#2855ff;
            }
            .kx .blue .userBorderColor{
                border-color:#2855ff!important;
            }
  
            #kxUnit{
                position:absolute;
                background-color: rgb(41, 41, 41);
                width: 768px;
                height: 400px;
                /* opacity: 0; */
                border-radius: 16px;
                /*transition: transform .5s;*/
                transform-origin: 0 0;
                transform: scale(1) translate(-50%, -50%);
                left: 50%;
                top: 50%;
                overflow: visible;
                -webkit-overflow-scrolling: auto;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                font-family: 'Open Sans', sans-serif;
                color:white;
  
                -webkit-tap-highlight-color: transparent;
  
  
                cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA/dJREFUeNrMV0tMU0EU5WMppRQoEpTaJoYCITQRNnwSQkIiH9GdrhTY+wlVdm50w9KERGNMjEtQN0p3VgNGwA2BBUHUENBEpeWjSH8KSIF6zstM89SCbW3VSQ7vZd6de06HOzNnUlL+cUuNNrCtrU27urp6Bmjzer1HAoHAwWAwqOc3jUbz1WAwLOXl5b3Iz893AvecTue3mJSEQqGIaGlpKayoqLidmZnpZ1g00Gq1fo7h2N3yRiWgurr6Ioi9MnF9ff3SwMDA65WVlfdbW1s+xAQJvrOP3xgj4zmWOWIW0NjYuK+kpMQhE7W3t897PJ75UJSNsR0dHfNyPHMxZ1QCGGixWJ6zS6/Xb05OTs6if0fk/go8A24Cl4HzgB24KvqeiRi2HY5lDuZiTrWIX4pQdpaVlT2Ym5s7VVRUtD4zM7Oak5NzCN1BwAkMAb8rLi3QxLplffr9fnd5eXn+4uKirrS0dGB2dvaUQpya+quAmpoa+8TExHWQBl0u1ydUtgmfPgO3AFeMK4zCLwD7sWIWzGZzAcRksCbGx8dvSAFpMrq1tbVwenq6h+8jIyPvBbkHuBYHOZtbjPUw1+jo6Ad2koNcMigsAL+4Z2NjIwcF56qqqrKKab8tRMTbPCJHsLKy0orCdJGDXD/UAIojc2xs7CM+GlDBbmwonL7HgCNBG95JTjI2MJfRaDRjeQbq6uoKh4eHN5QZWF9fP03ypqamZUG+JgQkqrGA15Db3NzcvEwucob/Bdhej/PZ3d3tEwOmqCuBAphrXM0BzhNhAZgaG5+1tbU6lYBEt1dqDsmpCMAyMfOJKcoVwe+SIIA7Y0oumuA8FBawubmpqEpPT88SwYEkCAioOSRn2i7B+/6WH1AEZGRkKAW3vb29Jvpzk8BlUHNITkUAdiq3KAy5CkxJEGDhHx+amjNNFN9LPrFHy6V3JAkCbGoOcL4KC4CFesRnb2+vnPpKQJdAcuaqUXMUFBQ4wwJ0Ot192KgvQ0NDB7hdoote71gCBTBXFnMPDg4e4FYMvrthAdyTrVbrPb53dXVJb3cUOJwA8sMiV8hutysdxcXF98n5wzLEeX2FxrO/v98CJ/OWZgI4Cxj/gNwocmimpqbe9PX1KQcRuSI6or9kSC6hEK9HdETCkj2EJTtpMpnWYMm8QgS9wVPgiTgp92rc6VqELdOQHJYsb2FhISuSJdvTlGZnZ//OlJ4TuLybKcUP2NOURmXLabFpVGKw5e7Ozs74bHmEi4lPJmpoaFhyOBy8mHzAZcSPmC2C7+zjN8aoLia+uC4mP1/NbDbbHazbQAxXswDHRHM1i+dyelxeTnGk6sXBor6cPuLGJtf5f9++CzAAfBCRRGu7bLYAAAAASUVORK5CYII=) 16 16, pointer;
                box-shadow: 3px 3px 16px rgba(0,0,0,0.5);
  
            }
  
            .kx #kxBackdrop{
                position: absolute;
                width: 1789px;
                height: 1789px;
                background-image: url(../images/screen-background.jpg);
                top: -781px;
                left: -512px;
                /* opacity: .2; */
                background-size: cover;
              }
  
              .kx #kxFrg {
                background-image: url(../images/screen-unit-front.png);
                position: absolute;
                top: 40px;
                left: 144px;
                width: 480px;
                height: 320px;
                pointer-events: none;
                opacity: 0.5;
            }
  
            .kx .kxToast, .kx .plsRotate{
                background-color: #925700;
                display: block;
                width: 40%;
                position: absolute;
                text-align: center;
                padding: 20px;
                border-radius: 3px;
                left: 50%;
                top: 50%;
                font-size: 18px;
                font-weight: 100;
                opacity: 0;
                transform: translate(-50%, 50%);
                transition: transform .5s, opacity .5s;
                pointer-events: none;
                z-index: 10;
            }
  
            .kx .kxToast.show{
                transform: translate(-50%, -50%);
                opacity: 1;            
            }
  
            .kx .kxToast.show.hide{
                transform: translate(-50%, -100%);
                opacity: 0;
            }
  
  
  
            .kx .kxScreen {
                font-weight: 300;
                background-size: cover;
                opacity: 1;
                width: 480px;
                height: 320px;
                overflow: hidden;
                display: block;
                position: absolute;
                border-radius: 3px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
  
            }
  
  
            .kx .kxScreen .pageContent {
                background-image: url(../images/screen-background-sheet.jpg);
            }
  
            .kx #pageHolder, .pageContent{
            width: 100%;
            height: 100%;
            position:absolute;
            }
  
  
            .kx .titleBlock{
                position: absolute;
                width: 173px;
                left: 151px;
                top: 0;
                height: 46px;
                border-bottom: solid 1px rgba(255, 255, 255, 0.3);
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
            }
  
            .kx .titleBlock.wide{
                width: 282px;
                left: 99px;
                }
  
  
                .kx .prepare .titleBlock {
                left: 25px;
            }
  
            .kx .titleBlock.light{
                background-color:rgba(255,255,255,.15)
            }
  
  
            .kx .titleBlock span.title{
                width: calc(100% - 4px);
                color: white;
                font-size: 16px;
                text-align: center;
                font-weight: bold;
                text-transform: uppercase;
                margin: 5px;
                line-height: 46px;
            }
  
            .kx .userTitleClip {
                position: absolute;
                width: 30px;
                border-bottom-style: solid;
                border-bottom-width: 3px;
                top: 45px;
                left: 225px;
            }
  
            .kx .userTitleClip.wide {
  
                left: 224px;
            }
  
  
            .kx .clock{
                transition: opacity .6s;
                opacity:0;
                text-align: center;
                position: absolute;
                width: 136px;
                font-size: 20px;
                left: 183px;
                top: 14px;
                height: 32px;
                line-height: 25px;
                border-bottom:solid 3px white;
            }
  
            .kx .onScreen .clock{
                opacity:1;
            }
  

            .kx .backButton{
            position:absolute;
            left:12px;top:12px;
            width:26px;
            height:26px;
            transition:opacity .3s;
            }
  
            .kx .vWheel.wheel{
                width: 80px;
                height: 320px;
                position: absolute;
                top: 0;
                overflow-y: scroll;
                -ms-overflow-style: none;
                scrollbar-width: none;
            scroll-snap-type: y mandatory;
                box-sizing: border-box;
                padding: 0 20px;
            /* scroll-snap-points-y: repeat(54px);*/
                -webkit-overflow-scrolling: touch;
            }
  
            .kx .vWheel.wheel.right{
                left: 341px;
            }
  
            .kx .vWheel.wheel.left{
                left: 54px;
            }
  
            .kx .strengthScroller.wheel.vWheel.left {
                width: 97px;
                left: 33px;
            }
  
            .kx .secondary {
                opacity:0;
                pointer-events: none;       
            }


            .kx .vwheelMask.wTitle{
                position: absolute;
                height: 274px;
                top: 49px;
                width: 80px;
                left: 40px;
                overflow: hidden;
            }

            .kx .vwheelMask.wTitle .wheel.vWheel{
                left:0;
                top:-49px;
            }
  
            .kx .wheel::-webkit-scrollbar {
                display: none;
            }
            
            .kx .vWheel .wheelItem{
                line-height: 54px;
                height: 54px;
                box-sizing: border-box;
                border-bottom: solid 1px rgba(255, 255, 255, 0.5);
                font-size: 24px;
                text-align: end;
                font-weight: 300;
                scroll-snap-align: center;
                scroll-padding-top: 15px;
                color:rgba(255,255,255,0.5)
            } 
  
            .kx .vWheel .wheelItem{
                fill:rgba(255,255,255,.5);
            }
  
            
            .vWheel .wheelItem.selected{
                color:white;
                /*text-shadow: 0 0 2px white, 0 0 4px white, 0 0 6px white;*/
            }
  
            .kx .vWheel .wheelItem svg{
                opacity:.5;
            }
  
  
            .kx .vWheel .wheelItem.selected svg{
                opacity:1;
            }
  
  
            .kx .vWheel .wheelItem:first-child, .vWheel .wheelItem:last-child{
                pointer-events: none;       
            }
  
            
            .kx .vWheel .wheelItem svg, .vWheel .wheelItem.noAction{
                pointer-events: none;       
            }
  
            .kx .vWheel .wheelItem.size {
                width: 58px;
                height: 58px;
            }
  
            .kx .vWheel .wheelItem.size svg {
                margin-top: 1px;
                width: 52px;
                margin-left: 7px;
            }
  
            .kx .wheelItem:nth-last-child(2) {
                border-bottom: none;
            }
  
  
            .kx .vWheel .wheelItem:first-child{ 
                height:133.33px;
                border-bottom:none;
            /* margin-top:126px;*/
            }
            .kx .vWheel .wheelItem:last-child{
                border-bottom: none;
                height:133.33px;
            /*   margin-bottom:139px;*/
            }
  
            .kx .vWheel.strengthScroller .wheelItem{
                transition:opacity .3s;
            }
  
            .kx .running .backButton{
                opacity : 0;
            }
  
            .kx .running .vWheel.strengthScroller .wheelItem:not(.selected){
                opacity:0;
            }
  
            .kx .userMode .vWheel .wheelItem:not(.selected) {
                opacity:0!important;
            }
            .kx .userMode .vWheel .wheelItem {
                border-color:transparent!important;
            }
  
  
            .kx .running .vWheel.strengthScroller .wheelItem{
                border-color:transparent!important;
            }
  

  
            .kx .vwheelCenter{
            position: absolute;
            width: 26px;
            height: 0;
            top: 159px;
            border-bottom: solid 3px;
            }
  
            .kx .vwheelCenter.right{
                left:436px;
            }
  
            .kx .vwheelCenter.left{
                left:16px;
            }
            
            .kx .vwheelUnit{
                position:absolute;
                width: 42px;
                height: 25px;
                top:147px;
                font-size:18px;
                line-height: 25px;
            }
            .kx .vwheelUnit.right{
                left:409px;
            }
  
            .kx .vwheelUnit.left{
                left:40px;
            }
  
            .kx img{
                max-width:initial!important;
  
            }

  
            .kx .imageHolder{
                position: absolute;
                width: 150px;
                height: 150px;
                top: 85px;
                left: 36px;
                overflow: hidden;
                transform-origin: 50% 35%;
                transform: scale(1.1);
            }
  
            .kx img.recipeImage{
                width: 900px;
                position:absolute;
                height: 900px;
                pointer-events: none;
                opacity:1;
                transition:opacity .5s;
  
            }
 
            .kx .plusMinusButton{
                position: absolute;
                left: 151px;
                top: 104px;
                width: 32px;
                height: 32px
                transition:opacity .3s;
            }
  
            .kx .running .plusMinusButton, .kx .preheat .plusMinusButton{
                opacity:0;
            }
  
            .kx .preheat .imageHolder {
                opacity:0.25;
            }
  
            .kx .startButton, .stopButton, .nextButton {
                position: absolute;
                width: 175px;
                height: 42px;
                left: 152px;
                top: 261px;
                line-height: 42px;
                border: solid 2px orange;
                text-align: center;
                font-weight: 600;
            }
  
            .kx .stopButton, .nextButton {
                display:none;
            }
  
            .kx .running .stopButton, .preheat .stopButton{
                display:block;
            }
            .kx .running .startButton, .preheat .startButton{
                display:none;
            }
  
  
            .kx .progressBarBkg {
                position: absolute;
                width: 175px;
                height: 3px;
                left: 23px;
                top: 250px; background-color:rgba(255,255,255,.15);
                opacity:0;
            }
            .kx .running .progressBarBkg {
                opacity:1;
            }
  
            .kx .progressBar{
                position: absolute;
                width: 0%;
                height: 3px;
                left: 0;
                top: 0;
                box-shadow: 0 0 5px rgba(255,255,255,1);
                transition: width 0ms linear 0ms;
                background-color: white;
            }
  
            .kx .running .progressBar{
                width: 100%;
                transition: width 4000ms linear 100ms;
  
            }
  
  
            .kx  #mirror {
            width : 128px;
            position:absolute;
            top:0;
            right:0;
  
        }
  
        /* recetteScroller*/
        .kx .hScroller{
  
        }   
  
        .kx .hScroller::-webkit-scrollbar {
            display: none;
        }
  
        .kx .hScroller{
            position: absolute;
            top: 71px;
            height: 220px;
            width: 100%;
            left: 0;
            background: none;
            font-size: 0;
            white-space: nowrap;
            overflow-x: scroll;
            -ms-overflow-style: none;
            scrollbar-width: none;
            scroll-snap-type: x mandatory;
            white-space: nowrap;
            }
            .kx .recetteScrollerItem, .hScrollerItem{
            display:inline-block;
            position:relative;
            height:100%;
            width:157px;
            background-color:rgba(255,255,255,0.15);
            margin-right:6px;
            overflow:hidden;
        }
  
        .kx .recetteScrollerItem .title{
            width: 153px;
            height: 29px;
            position: absolute;
            font-size: 16px;
            text-align: center;
            font-weight: bold;
            text-transform: uppercase;
            top: 8px;
            left: 2px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
  
        .kx .recetteScrollerItem .sep{
            width: 120px;
            top: 40px;
            position: absolute;
            border-bottom: solid 1px #8c8c8c;
            left: 18px;
        }
  
  
        .kx .recetteScrollerItem .thumb {
            position: absolute;
            width: 150px;
            height: 150px;
            top: 44px;
            left: 3px;
            overflow:hidden;
        }
  
        .kx .recetteScrollerItem .thumb img {
          width: 900px;
          height: 900px;
          pointer-events: none;
      }
      .kx .keyWords.hScroller{
            position: absolute;
            top: 159px;
            height: 43px;
            width: 100%;
        }
        .kx .kword{
            border-left: solid 1px rgba(255,255,255,.25);
            display: inline-block;
            position: relative;
            height: 100%;
            margin-right: 0;
            padding: 0 10px;
            font-size: 22px;
            padding: 0 32px;
            font-weight: 100;
            height: 43px;
            line-height: 43px;
            color:rgba(255, 255, 255, 0.64);
        }
  
        .kx .kword:first-child{
            border-left:none;
        }
  
        .kx .kword.selected{
            color:rgb(255, 255, 255);
            text-shadow: 0 0 2px #ffffff57, 0 0 6px #ffffff91, 0 0 10px white;
        }
  
        .kx .slides::-webkit-scrollbar {
            /*display: none;*/
            height:0;
        }
  
        .kx .slides {
            position: absolute;
            width: 480px;
            height: 267px;
            top: 53px;
            overflow-x: scroll;
            white-space: nowrap;
            scrollbar-width: none;
            -ms-overflow-style: none;
            scrollbar-width: 0;
            scrollbar-height: 0;
        }
  
        .kx .tilesBlock {
            display: inline-block;
            width: 480px;
            height: 256px;
            position: relative;
        }
  
        .kx .tiles {
            display: flex;
            flex-flow: row wrap;
            flex-grow: initial;
            position: absolute;
            top: 0;
            height: 253px;
            overflow: hidden;
            width: 452px;
            left: 16px;
          }
  
          .kx .tiles .atile {
            background: rgba(255,255,255,.2);
            margin: 0 0 3px 0;
            height: 125px;
            width: 110px;
            padding: 3px 0 0;
            box-sizing: border-box;
            position:relative;
            margin-right:3px;
            overflow:hidden;
          }
          .kx .atile .thumb {
            position: absolute;
            width: 75px;
            height: 75px;
            top: 30px;
            left: 16px;
            overflow: hidden;
        }
  
        .kx .atile .thumb img {
            width: 450px;
            height: 450px;
            pointer-events: none;
        }
  
        .kx .atile .titleBlock {
            position: relative;
            width: 104px;
            left: 4px;
            border-bottom: none;
            height: 52px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
  
        .kx .atile.userRecipe .titleBlock {
            position: absolute;
            width: 106px;
            top:2px;
            left: 2px;
            border-bottom: none;
            height: 52px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
  
        .kx .atile .titleBlock span {
                font-weight: bold;
                text-transform: uppercase;
                font-size: 14px;
                white-space: initial;
            }
  
  
  
            .kx .atile .hsep {
                position: absolute;
                left: 18px;
                width: 76px;
                height: 1px;
                top: 25px;
                border-bottom: solid 1px rgba(255, 255, 255, 0.2);
            }
  
  
  
            .kx .atile .titleBlock .userTitleClip{
                left:32px;
                bottom:-2px;
            }
  
            .kx .atile.userRecipe .userTitleClip{
                left: 40px;
                top: 28px;
            }
  
            .kx .atile .tileIcon{
                position:absolute;
                width:44px;
                height:44px;
                left:33px;
                top:59px;
            }
            .kx .atile.addFavToUser .tileIcon, .atile.userSettings .tileIcon{
                top:40px;
            }
            .kx .atile .tileIcon.small{
                position:absolute;
                width:32px;
                height:32px;
                left:28px;
                top:38px;
            }
            .kx .atile .keyword{
                position: absolute;
                width: 44px;
                left: 0;
                bottom: 3px;
                top: unset;
                width: 100%;
                text-align: center;
                font-size: 14px;
            }
  
            .kx .atile.double {
                width:223px;
            }
  
            .kx .atileContents{
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                height: 97px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: normal;
                position: absolute;
                top: 24px;
                width: 100%;
            }
            .kx .atileContents .ellipsis{
                width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
  
            .kx .atile.double .titleBlock {
                width: 100%;
            }
            .kx .atile.double .hsep {
                left: 36px;
                width: 156px;
                }
        
  
                .kx .atile.double .atileContents{
                width: 106px;
                position: absolute;
            }
  
            .kx .atile.double .atileContents:last-child{
  
                left:116px;
            }
  
            .atile.double .atileContents:last-child div{
                width:100%;
                border-left:solid 1px rgba(255,255,255,0.2);
            }
  
            .kx .settingsDesc{ font-size:24px;position:absolute;top:70px;left:10px;width:460px;text-align:center}
  
            .kx .params {
                margin-top: 56px;
            }
                .paramMenuButton{
                    position:relative;
                    width:412px;
                    height:60px;
                    line-height:60px;
                    box-sizing:border-box;
                    background-color: rgba(0, 0, 0, 0.4);
                    border:solid 1px white;
                    margin-left:38px;
                    text-align:center;
                    font-size:20px;
                    font-weight:bold;
                    text-transform:uppercase;
                    margin-bottom:5px;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
  
                .kx svg.kxSpin {
                    width: 64px;
                    position: absolute;
                    left: calc(50% - 32px);
                    top: calc(50% - 8px);
                  }
                  .kx svg.kxSpin circle {
                    animation: pulse .6s linear 0s infinite alternate;
                    opacity: .2
                  }
                  .kx svg.kxSpin .c2{animation-delay:.2s;}
                  .kx svg.kxSpin .c3{animation-delay:.4s;}
                  
                  @-webkit-keyframes pulse {
                    from {opacity: .2}
                    50% {opacity: .4}
                    to {opacity:1}
                  }
  
                  .kx .okButton.square{
                    position: absolute;
                    right: 36px;
                    bottom: 36px;
                    border: solid 2px;
                    height: 60px;
                    width: 60px;
                    text-transform: uppercase;
                    line-height: 60px;
                    text-align: center;
                    font-weight: bold;
                }
  
  
                .kx .settingsDesc.care{
                top:60px
            }
  
            
            .kx .careImg{
                width: 200px;
                height: 150px;
                position: absolute;
                top: 118px;
                left: 143px;
                overflow: hidden;
            }
  
            .kx .careImg img{
                width:1200px;
                height:150px;
            }



#krups-smartslide-demo #kxClose{
    position: absolute;
    right: 45px;
    top: 85px;
    width: 20px;
    height: 20px;
    background-image: url(../images/picto-close.svg);
    background-size: auto 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    opacity: 0.5;
    cursor: pointer;
}