/*! HTML5 Boilerplate v7.1.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

   html {
      color: #222;
      font-size: 1em;
      line-height: 1.4;
}

/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */

::-moz-selection {
      background: #b3d4fc;
      text-shadow: none;
}

::selection {
      background: #b3d4fc;
      text-shadow: none;
}

/*
   * A better looking default horizontal rule
   */

hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 1px solid #ccc;
      margin: 1em 0;
      padding: 0;
}

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */

audio,
canvas,
iframe,
img,
svg,
video {
      vertical-align: middle;
}

/*
   * Remove default fieldset styles.
   */

fieldset {
      border: 0;
      margin: 0;
      padding: 0;
}

/*
   * Allow only vertical resizing of textareas.
   */

textarea {
      resize: vertical;
}

/* ==========================================================================
     Browser Upgrade Prompt
     ========================================================================== */

.browserupgrade {
      margin: 0.2em 0;
      background: #ccc;
      color: #000;
      padding: 0.2em 0;
}

/* ==========================================================================
     Author's custom styles
     ========================================================================== */
@font-face {
      font-family: "Core Sans C";
      src: url("/content/dam/bekoglobal/en/autodose/fonts/CoreSansC-45Regular.woff2") format("woff2");
      src: url("/content/dam/bekoglobal/en/autodose/fonts/CoreSansC-45Regular.woff2") format("woff2"), /* Super Modern Browsers */ url("/content/dam/bekoglobal/en/autodose/fonts/CoreSansC-45Regular.woff") format("woff"); /* Pretty Modern Browsers */
}

@font-face {
      font-family: "SohoGothicPro";
      src: url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Regular.woff2");
      src: url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Regular.ttf") format("truetype"), url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Regular.woff2") format("woff2"), url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Regular.woff") format("woff");
}

@font-face {
      font-family: "SohoGothicPro-Light";
      src: url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Light.woff2");
      src: url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Light.woff2") format("woff2"), url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Light.woff") format("woff");
}

@font-face {
      font-family: "SohoGothicPro-Medium";
      src: url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Medium.woff2");
      src: url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Medium.woff2") format("woff2"), url("/content/dam/bekoglobal/en/autodose/fonts/SohoGothicPro-Medium.woff") format("woff");
}

@font-face {
      font-family: "core_sans_c45_regular";
      src: url("/content/dam/bekoglobal/en/autodose/fonts/s-core_-_coresansc-45regular-webfont.woff2") format("woff2"), url("/content/dam/bekoglobal/en/autodose/fonts/s-core_-_coresansc-45regular-webfont.woff") format("woff");
      font-weight: normal;
      font-style: normal;
}

@font-face {
      font-family: "Core Sans C Bold";
      src: url("/content/dam/bekoglobal/en/autodose/fonts/coresansc65-webfont.woff2") format("woff2");
      src: url("/content/dam/bekoglobal/en/autodose/fonts/coresansc65-webfont.woff2") format("woff2"), /* Super Modern Browsers */ url("/content/dam/bekoglobal/en/autodose/fonts/coresansc65-webfont.woff") format("woff"); /* Pretty Modern Browsers */
}

.footer {
      /* background-color:black;*/
}

html {
      height: 100%;
      overflow: hidden;
}
body {
      height: 100%;
      width: 100%;
      overflow: hidden;
}
#kedi-scroll-container {
      position: relative;
      height: 100vh;
      width: 100%;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
}

#kedi-scroll-container::-webkit-scrollbar {
      display: none;
}

#main {
      height: 100%;
      width: 100%;
}

#fullPageControl {
      position: absolute;
      top: 0;
      left: 0;
}

.fullPage {
      position: absolute;
      height: 100%;
      width: 100%;
}

#kedi_loading {
      position: fixed;
      height: 100%;
      width: 100%;
      background-color: white;
      z-index: 9999;
}

#kedi_loading_bar {
      height: 8px;
      width: 100%;
      position: relative;
      overflow: hidden;
}

#kedi_loading_bar:before {
      display: block;
      position: absolute;
      content: "";
      left: -200px;
      width: 200px;
      height: 8px;
      background-color: #2980b9;
      animation: loading 4s linear infinite;
}

@keyframes loading {
      from {
            left: -200px;
            width: 30%;
      }
      50% {
            width: 30%;
      }
      70% {
            width: 70%;
      }
      80% {
            left: 50%;
      }
      95% {
            left: 120%;
      }
      to {
            left: 100%;
      }
}

/* defines trigger points */

.empty {
      min-height: 100%;
      width: 100%;
      pointer-events: none;
}

#kedi_navigation_container {
      position: absolute;
      width: 100%;
      height: 100%;
      right: 0px;
      left: auto;
      top: 80px;
      z-index: 1100 !important;
      pointer-events: none;
}

#kedi-navigation-opener {
      display: none;
}
#kedi-navigation-opener-interior {
      display: none;
}

#kedi_navigation {
      position: absolute;
      width: 22%;
      top: 8px !important;
      right: 8px !important;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 1s ease;
      pointer-events: none;
}

#kedi-navigation-links {
      width: 300px;
      height: 700px;
      top: 220px;
      right: 8px;
      display: block;
      overflow: hidden;
      text-align: center;
      opacity: 1;
      position: absolute;
      cursor: pointer;
      pointer-events: all;
}

#kedi-navigation-links a {
      font-family: SohoGothicPro-Light, sans-serif;
      color: white;
      font-size: 20px;
      margin-bottom: 40px;
      text-decoration: none;
      display: block;
}

.kedi-navigation-upArrow {
      margin-top: 70px;
}

.kedi-navigation-link-bold {
      font-family: SohoGothicPro-Medium, sans-serif !important;
}

#lottie {
      width: 300px;
      height: 700px;
      top: 0px;
      right: 8px;
      display: block;
      overflow: hidden;
      transform: translate3d(0, 0, 0);
      text-align: center;
      opacity: 1;
      position: absolute;
      cursor: pointer;
      pointer-events: all;
}

.visible {
      display: block;
      opacity: 1 !important;
}

.inContent0 {
      transition: opacity 1s ease;
}

.inContent1 {
      transition: opacity 1s ease;
      opacity: 0 !important;
}

.inContent2 {
      transition: opacity 1s ease;
      opacity: 0 !important;
}

.inContent3 {
      transition: opacity 1s ease;
      opacity: 0 !important;
}

.inContent4 {
      transition: opacity 1s ease;
      opacity: 0 !important;
}

.section {
      position: relative;
}

#content-background-1 {
      height: 100%;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      transition: transform 1s ease, left 1s ease, top 1s ease;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/section1.jpg");
      transform: scale(2);
      left: -200px;
      top: 120px;
      position: absolute;
}

#content-background-1.zoom01 {
      transform: scale(1.1) translate3d(12.5%, -12.5%, 0);
}

#content-background-1.zoom02 {
      transform: scale(1.8) translate3d(5%, 0, 0) !important;
}

#content {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 100;
      overflow: hidden;
      pointer-events: none;
}

#content2 {
      height: 100%;
      width: 100%;
      overflow: hidden;
      z-index: 80;
      pointer-events: none;
}

#content-background-2 {
      height: 100%;
      width: 100%;
      background-size: auto 100%;
      background-position: 67.7% bottom;
      background-repeat: no-repeat;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/section2.jpg");
      position: absolute;
      transform: scale(1);
      left: 0px;
      top: 0px;
      pointer-events: none;
}

#content-background-2.zoom01 {
      transform: scale(2.3);
      left: -40%;
      top: -46%;
}

.opening_sequence {
      position: absolute;
      background-size: auto 100%;
      background-position: 67.7% bottom;
      background-repeat: no-repeat;
      left: 0%;
      top: 0%;
      height: 100%;
      width: 100%;
      pointer-events: none;
}

#content3 {
      position: relative;
      height: 100%;
      width: 100%;
      z-index: 110;
      overflow: hidden;
      transition: opacity 1s ease;
      pointer-events: none;
}

#content-background-3 {
      height: 100%;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/section3.jpg");
      position: absolute;
      pointer-events: none;
}

#content4 {
      position: relative;
      height: 100%;
      width: 100%;
      z-index: 120;
      overflow: hidden;
      transition: opacity 1s ease;
      pointer-events: none;
}

#content-background-4 {
      height: 100%;
      width: 100%;
      background: rgb(64, 139, 184);
      background: linear-gradient(90deg, rgba(64, 139, 184, 1) 0%, rgba(64, 139, 184, 1) 55%, rgba(35, 60, 82, 1) 100%);
      position: absolute;
      pointer-events: none;
}

#content5 {
      position: relative;
      height: 100%;
      width: 100%;
      z-index: 130;
      overflow: hidden;
      transition: opacity 1s ease;
      pointer-events: none;
}

#content-background-5 {
      height: 100%;
      width: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/section1.jpg");
      position: absolute;
      pointer-events: none;
}

#sequence1 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence01.png);
      opacity: 0;
}
#sequence2 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence02.png);
      opacity: 0;
}
#sequence3 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence03.png);
      opacity: 0;
}
#sequence4 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence04.png);
      opacity: 0;
}
#sequence5 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence05.png);
      opacity: 0;
}
#sequence6 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence06.png);
      opacity: 0;
}
#sequence7 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence07.png);
      opacity: 0;
}
#sequence8 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence08.png);
      opacity: 0;
}
#sequence9 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence09.png);
      opacity: 0;
}
#sequence10 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence10.png);
      opacity: 0;
}
#sequence11 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence11.png);
      opacity: 0;
}
#sequence12 {
      background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq/sequence12.png);
}

#text.fade-in {
      opacity: 1;
      font-size: 48px;
}

#text.fade-out {
      font-size: 12px !important;
}

#text {
      position: fixed;
      top: 0;
      font-size: 21px;
      text-align: center;
      -webkit-transition: font-size 1s ease-in;
      -moz-transition: font-size 1s ease-in;
      -o-transition: font-size 1s ease-in;
      -ms-transition: font-size 1s ease-in;
      transition: font-size 1s ease-in;
}

.kedi-introText {
      font-family: Core Sans C, sans-serif;
      width: 44%;
      color: white;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      top: 14%;
      left: 0;
      right: 0;
      font-size: 40px;
      text-align: center;
}

.kedi-introLogo {
      width: 40%;
      height: 70px;
      background-color: white;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      border-bottom-left-radius: 50px;
      border-bottom-right-radius: 50px;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/assets/introLogo.png");
      background-position: center;
      background-repeat: no-repeat;
      -webkit-box-shadow: inset 0px 1px 4px 0px rgba(82, 82, 82, 1);
      -moz-box-shadow: inset 0px 1px 4px 0px rgba(82, 82, 82, 1);
      box-shadow: inset 0px 1px 4px 0px rgba(82, 82, 82, 1);
}

.kedi-introSticker {
      position: absolute;
      margin-left: 7%;
      margin-right: auto;
      top: 20%;
      left: 0;
      right: 0;
}

.kedi-introSticker img {
      width: 20%;
      height: auto;
}

.kedi-introDownArrow {
      position: absolute;
      width: 50px;
      height: 50px;
      margin-left: calc(50% - 25px);
      bottom: 20%;
      pointer-events: all;
}

.kedi-introButton {
      font-family: SohoGothicPro-Medium, sans-serif;
      height: 70px;
      line-height: 70px;
      width: 490px;
      display: inline-block;
      font-size: 25px;
      background-color: #0180c9;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      color: white;
      left: 0;
      right: 0;
      bottom: 40%;
      border-radius: 50px;
      background-position: center;
      background-repeat: no-repeat;
      text-align: center;
      text-decoration: none;
      pointer-events: all;
}

#kedi-introOverlay {
      width: 100%;
      height: 100%;
      background-color: #1e2e3f;
      opacity: 0.5;
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
}

.kedi-card {
      max-width: 36%;
      position: absolute;
      background-color: #1e2e3f;
      color: white;
      padding: 20px;
      display: flex;
}

/* explorer fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
      .kedi-card {
            width: 36%;
      }
      .kedi-counter-card-container {
            width: 300px;
      }
}

@media screen\0 {
      .kedi-card {
            width: 36%;
      }
      .kedi-counter-card-container {
            width: 300px;
      }
}

.kedi-card.visible a {
      pointer-events: all;
}
/* click fix for content4 */
#content4.visible a {
      pointer-events: all;
}

.kedi-cardLeft {
      flex: 1;
}

.kedi-cardRight {
      flex: 1;
      max-width: 50px;
      display: flex; /* create nested flex container */
      flex-wrap: wrap; /* enable flex items to wrap */
      justify-content: center;
}

.kedi-card h4 {
      font-size: 32px;
      font-family: Core Sans C, sans-serif;
      margin-top: 0px;
      margin-bottom: 0px;
}

.kedi-card p {
      font-family: SohoGothicPro-Light, sans-serif;
      line-height: 1.8;
}

.kedi-card p.kedi-small {
      font-size: 12px;
      font-style: italic;
      margin-top: 40px;
}

.kedi-card.visible {
      opacity: 0.9 !important;
}

.kedi-finish-logo {
      position: absolute;
      pointer-events: none;
      bottom: 20%;
      left: 8%;
}

.kedi-finish-logo.visible {
      opacity: 1 !important;
}

.kedi-europeCard {
      border-radius: 20px;
      bottom: 40%;
      left: 8%;
}

.kedi-twmCard {
      pointer-events: all !important;
      border-radius: 20px;
      top: 48%;
      left: 8%;
}

.kedi-autoReplenishmentCard {
      pointer-events: all !important;
      border-radius: 20px;
      top: 2%;
      left: 2%;
      max-width: 28%;
}

.kedi-counter-card-container {
      display: block !important;
      padding: 0;
      border-radius: 20px;
      left: 20%;
      top: 20%;
}

.kedi-counter-card-container .kedi-cardLeft {
      padding-bottom: 40px;
      padding-top: 20px;
}

.kedi-counter-card-inner-container {
      min-height: 224px;
      opacity: 1;
}

.kedi-refillCounter {
      font-family: Core Sans C Bold, sans-serif;
      min-height: 220px;
      text-align: center;
      position: absolute;
      width: 100%;
      font-weight: bolder;
      display: flex;
}

.kedi-refillCounterNumber {
      font-size: 140px;
      line-height: 220px;
      text-align: center;
      overflow: hidden;
}
.kedi-refillCounter-01 {
      color: white;
      background-color: #1e2e3f;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      flex: 1;
      -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 1);
      -moz-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 1);
      box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 1);
}

.kedi-refillCounter-02-container {
      height: 0px;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      flex: 1;
      overflow: hidden;
}

.kedi-refillCounter-02 {
      background-color: white;
      color: #1e2e3f;
}

.kedi-refillCard {
      bottom: 30%;
      left: 8%;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      max-width: 300px;
      display: flex;
      padding: 20px;
}

.kedi-card .kedi-circleButton {
      background-color: #0180c9;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/assets/arrowDown.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 50%;
      border-radius: 100%;
      height: 50px;
      min-width: 50px;
      width: 50px;
      align-self: flex-end;
}

.kedi-lituCard {
      border-radius: 20px;
      max-width: 24%;
      bottom: 40%;
      left: 4%;
}

.kedi-repeat-button {
      transition: opacity 1s ease;
      opacity: 0;
      font-family: SohoGothicPro, sans-serif;
      position: absolute;
      left: calc(50% - 50px);
      top: 73%;
      height: 40px;
      width: 100px;
      background-color: #0180c9;
      border-radius: 20px;
      line-height: 40px;
      text-align: center;
      color: white;
      cursor: pointer;
      pointer-events: all;
}

.kedi-consumeCalculator-container {
      position: absolute;
      left: 50%;
      height: 100%;
      pointer-events: none;
}

.kedi-consumeCalculator-container.visible {
      opacity: 1 !important;
}

.kedi-consumeCalculator {
      width: 500px;
      height: 100px;
      position: relative;
      background-color: #172026;
      color: white;
      padding: 25px;
      left: -50%;
      margin-right: -100%;
      top: 80%;
      display: flex;
      border-radius: 60px;
      display: flex;
      pointer-events: all;
}

.kedi-consumeCalculator .kedi-consumeIcon {
      flex: 1;
      text-align: center;
}

.kedi-consumeIcon .kedi-consumeIcon-icon {
      min-height: 27px;
}

.kedi-consumeIcon .kedi-consumeIcon-icon img {
}

.kedi-consumeDegreeText {
      font-family: SohoGothicPro, sans-serif;
      font-size: 10px;
      line-height: 21px;
}

.kedi-consumePointer {
      position: absolute;
      width: 65px;
      height: 65px;
      background-color: #fafafa;
      opacity: 0.4;
      border-radius: inherit;
      top: 18px;
      left: 20px;
      pointer-events: none;
}

.kedi-tank-container {
      position: absolute;
      left: 50%;
      height: 100%;
}

.kedi-tank-container .kedi-tank-background {
      background-image: url("/content/dam/bekoglobal/en/autodose/img/assets/Tank_Grid.png");
      width: 200px;
      height: 200px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      left: -100px;
      margin-top: -32px;
}

.kedi-tank-container.visible {
      opacity: 1 !important;
}

.kedi-tank-container div {
      overflow: hidden;
      position: absolute;
      left: -65px;
      top: 52%;
      width: 130px;
}

.kedi-tank-container img {
      width: 130px;
}

.kedi-tank-empty {
      height: 0px;
}

.kedi-radial-background {
      position: absolute;
      background: radial-gradient(circle, rgba(255, 255, 255, 0) 25%, rgba(30, 46, 63, 1) 100%);
      width: 100%;
      height: 100%;
      pointer-events: none;
}

.kedi-vignette-background {
      position: absolute;
      background: rgb(64, 139, 184);
      background: linear-gradient(90deg, rgba(64, 139, 184, 0) 0%, rgba(64, 139, 184, 0) 50%, rgba(35, 60, 82, 1) 100%);
      width: 100%;
      height: 100%;
      pointer-events: none;
}

.kedi-radial-background.visible {
      opacity: 0.7 !important;
}

.kedi-video-button {
      position: absolute;
      transition: opacity 1s ease;
      opacity: 0;
      font-family: SohoGothicPro, sans-serif;
      left: 0;
      top: -75px;
      height: 60px;
      background-color: #0180c9;
      border-radius: 30px;
      line-height: 60px;
      text-align: center;
      color: white;
      cursor: pointer;
      pointer-events: all;
      padding-left: 60px;
      padding-right: 60px;
      pointer-events: none;
}

.kedi-video-button.visible {
      opacity: 1 !important;
      pointer-events: all;
}

.kedi-card {
      pointer-events: none;
}

#kedi-lottie-autoreplenishment {
      position: absolute;
      width: 100%;
      right: 0;
      height: 100%;
      display: flex !important;
      overflow: hidden;
      text-align: right !important;
      opacity: 1;
      pointer-events: none;
      align-items: center;
      justify-content: center;
}

#kedi-lottie-autoreplenishment-animation {
      width: 50% !important;
      height: 100%;
      /* right: 0; */
      position: absolute;
}

#kedi-lottie-autoreplenishment-animation:after {
      content: "";
      padding-bottom: 100%;
}

.kedi-autoreplenishment-logo {
      position: absolute;
      display: flex;
      width: 70%;
      height: 100%;
      overflow: hidden;
      transform: translate3d(0, 0, 0);
      text-align: center;
      opacity: 1;
      pointer-events: none;
      align-items: center;
      justify-content: center;
      padding-left: 10%;
}

.kedi-autoreplenishment-logo svg {
      position: absolute;
      width: 80%;
      height: 100%;
      display: block;
      overflow: hidden;
      transform: translate3d(0, 0, 0);
      text-align: center;
      opacity: 1;
      pointer-events: none;
      flex: 1;
}

h2.kedi-products-header {
      font-family: Core Sans C, sans-serif;
      position: relative;
      color: white;
      font-size: 50px;
      left: 0;
}

#kedi-product-slider {
      position: relative;
      left: 10%;
      width: 60%;
      pointer-events: all !important;
}

#kedi-product-slider.inContent6 {
      pointer-events: all;
}

#kedi-product-slider:not(.inContent6) {
      pointer-events: none;
}

.kedi-product-slider-container {
      overflow: hidden;
      min-width: 300px;
}

.kedi-product-card {
      background-color: #233241;
      border-radius: 20px;
      padding-bottom: 30px;
      padding-top: 30px;
}

.kedi-product-card .kedi-product-image {
      position: relative;
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
}

.kedi-product-card .kedi-product-image img {
      width: 100%;
      height: auto;
      max-height: 600px;
}

.kedi-product-id h4 {
      font-size: 26px;
      font-family: Core Sans C, sans-serif;
      color: #0180c9;
      margin-top: 0px;
      margin-left: 16px;
      margin-right: 16px;
      padding-bottom: 16px;
      border-bottom: 1px solid gray;
}

.kedi-product-specs p {
      font-size: 14px;
      font-family: SohoGothicPro-Light, sans-serif;
      color: white;
      margin-top: 0px;
      margin-left: 16px;
      margin-right: 16px;
}

.kedi-buy-button {
      font-family: SohoGothicPro, sans-serif;
      height: 40px;
      padding-left: 40px;
      padding-right: 40px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #0180c9;
      border-radius: 20px;
      line-height: 40px;
      text-align: center;
      color: white;
      cursor: pointer;
      pointer-events: all;
      flex: 1;
}

#kedi-product-slider:not(.inContent6) .kedi-buy-button {
      pointer-events: none !important;
}

.kedi-product-button-container {
      width: 100%;
      text-align: center;
}

.kedi-swiper-pagination {
      bottom: -30px;
      text-align: center;
      height: 60px;
      padding-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
}
.kedi-swiper-pagination .swiper-pagination-bullet {
      line-height: 16px;
      margin-bottom: 8px;
      background: white;
      width: 14px;
      height: 14px;
      opacity: 0.4;
}

.kedi-swiper-pagination .swiper-pagination-bullet-active {
      background: white;
      line-height: 16px;
      width: 16px;
      height: 16px;
      opacity: 1;
      margin-top: 0px;
}

.kedi-swiper-button-next {
      right: -50px !important;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/assets/svg/rightArrow.svg") !important;
      width: 50px !important;
      height: 50px !important;
      background-size: 50px 50px !important;
      margin-top: -50px !important;
      right: -60px !important;
}

.kedi-swiper-button-prev {
      left: -50px !important;
      background-image: url("/content/dam/bekoglobal/en/autodose/img/assets/svg/leftArrow.svg") !important;
      width: 50px !important;
      height: 50px !important;
      background-size: 50px 50px !important;
      margin-top: -50px !important;
      left: -60px !important;
}

/* video popup */
.kedi-popup__alpha_overlay {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: #1e2e3f;
      text-align: center;
      z-index: 2800;
      opacity: 0.9;
}

.kedi-popup__overlay {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      z-index: 2900;
      opacity: 0.9;
}

.kedi-popup__overlay:after {
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
      content: "";
}

.kedi-popup {
      display: inline-block;
      position: relative;
      width: 100%;
      height: 100%;
      max-width: 800px;
      max-height: 600px;
      padding: 20px;
      background-color: 1e2e3f;
      color: white;
      vertical-align: middle;
}

.kedi-popup-form__row {
      margin: 1em 0;
}

.kedi-popup__close {
      position: fixed;
      right: 100px;
      top: 100px;
      display: block;
      width: 12px;
      height: 12px;
      padding: 8px;
      cursor: pointer;
      text-align: center;
      font-size: 12px;
      line-height: 12px;
      color: #fff;
      text-decoration: none;
      font-weight: bold;
}

.kedi-popup__close:hover {
      color: #fff;
}
.kedi-popup__overlay iframe {
      height: 100%;
      width: 100%;
}

/* MOBILE VERSIONS */
@media only screen and (max-width: 1024px) {
      #kedi-scroll-container {
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: y proximity;
      }

      .empty06 {
            scroll-snap-align: start;
      }

      .empty07 {
            scroll-snap-align: start;
      }

      .empty08 {
            scroll-snap-align: start;
      }

      .empty {
            min-height: 100%;
            width: 100%;
      }
      .empty11 {
            display: none;
      }

      .kedi-repeat-button {
            top: auto !important;
            bottom: calc(50% - 200px) !important;
      }

      .kedi-introLogo {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/assets/AutoDoseLogoMobile.png);
            background-color: transparent;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            background-size: contain;
            background-position: top;
            width: 80%;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
      }

      #kedi_navigation_container {
            /* display:none !important; */
            opacity: 1;
            position: fixed;
            top: 0;
            width: 100%;
            right: 0;
            left: 0;
      }

      #kedi_navigation {
            top: 0 !important;
            right: 0 !important;
      }

      #lottie {
            width: 250px;
            left: auto;
            right: -250px;
            top: 40%;
            bottom: auto;
            margin-left: -125px;
            margin-top: -400px;
            margin-right: auto;
            height: 800px;
            transition: 1s;
      }

      #kedi-navigation-links {
            position: absolute;
            width: 250px;
            left: auto;
            right: -250px;
            top: 40%;
            bottom: auto;
            margin-left: -125px;
            margin-top: -115px;
            margin-right: auto;
            height: 800px;
            overflow: visible;
            transition: 1s;
      }

      #content-background-1.zoom02 {
            transform: scale(1.8) translate3d(0%, 0, 0) !important;
      }

      .kedi-popup {
            width: auto;
            height: auto;
      }

      #kedi-navigation-links a {
            margin-bottom: 30px;
      }

      #kedi-navigation-opener {
            display: block;
            position: absolute;
            height: 60px;
            width: 60px;
            top: 60px;
            background: #fff;
            opacity: 0.8;
            left: -57px;
            right: auto;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
      }
      #kedi-navigation-opener-interior {
            display: block;
            position: absolute;
            height: 60px;
            width: 60px;
            top: 60px;
            opacity: 1;
            left: -57px;
            right: auto;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            padding: 10px;
            box-sizing: border-box;
      }

      #kedi-navigation-opener-interior .kedi-navClose {
            position: absolute;
            opacity: 0;
            width: 30px;
            height: 30px;
            left: 20px;
            top: 15px;
      }

      #kedi-mobileNavigationOverlay {
            width: 100%;
            height: 100%;
            background-color: #000000;
            opacity: 0;
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
      }

      .ked-card {
            padding: 14px;
      }

      .kedi-card h4 {
            font-size: 24px;
            font-weight: 500;
      }

      .kedi-card p {
            font-size: 14px;
            line-height: 1.6;
            margin: 0px;
      }

      .kedi-card p.kedi-small {
            font-size: 12px;
            font-style: italic;
            margin-top: 20px;
      }

      .kedi-introText {
            font-size: 22px;
            width: 80%;
            max-width: 394px;
            top: 10%;
      }

      .kedi-introSticker {
            position: absolute;
            margin-left: auto;
            margin-right: auto;
            top: 24%;
            left: 10%;
            right: 0;
      }

      .kedi-introSticker img {
            width: 50%;
            height: auto;
            max-width: 220px;
      }

      .kedi-introButton {
            height: 60px;
            line-height: 60px;
            width: 90%;
            max-width: 394px;
            bottom: 30%;
            font-size: 14px;
      }

      .kedi-introDownArrow {
            bottom: 16%;
      }

      #content-background-1 {
            height: 100%;
            width: 100%;
            background-size: auto 100%;
            background-position: 62.4% bottom;
            background-repeat: no-repeat;
            transform: scale(2);
            left: 0px;
            top: 130px;
            position: absolute;
      }

      #content-background-1.zoom01 {
            transform: scale(2.1);
            left: 0px;
            top: -100px;
      }

      .kedi-finish-logo {
            left: auto;
            bottom: 0;
            padding: 10%;
      }

      .kedi-finish-logo img {
            width: 100%;
      }

      .kedi-europeCard {
            max-width: none;
            margin: 10%;
            left: 0;
            bottom: 14%;
      }

      .kedi-counter-card-container {
            width: 100%;
            height: 100%;
            display: block !important;
            padding: 0;
            border-radius: 20px;
            left: 0;
            top: 0;
            max-width: none;
            background: none;
      }

      .kedi-counter-card-container.visible {
            opacity: 1 !important;
      }

      .kedi-refillCard {
            background-color: #1e2e3f;
            bottom: 0;
            left: 0;
            width: 100%;
            border-radius: 20px;
            margin: 10%;
            max-width: none;
            display: flex;
            padding: 20px;
            top: auto;
            position: absolute;
            width: auto;
            max-width: none;
      }

      .kedi-refillCounter {
            font-family: Core Sans C Bold, sans-serif;
            min-height: 220px;
            text-align: center;
            position: absolute;
            left: 0;
            width: auto;
            font-weight: bolder;
            display: flex;
            right: 10%;
            left: 10%;
            top: 4%;
            opacity: 1;
      }

      .kedi-refillCounter-01 {
            border-radius: 20px;
            box-shadow: none;
            -webkit-box-shadow: none;
            opacity: 0.9;
      }
      .kedi-refillCounter-02 {
            border-radius: 20px;
            opacity: 1;
      }

      .kedi-refillCounter-02-container {
            opacity: 1;
      }

      #content-background-2 {
            background-image: url("/content/dam/bekoglobal/en/autodose/img/section2-mobile.jpg");
            background-size: cover;
            background-position: center;
      }

      .opening_sequence {
            background-size: cover;
            background-position: center;
      }

      #sequence1 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence01.png);
            opacity: 0;
      }
      #sequence2 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence02.png);
            opacity: 0;
      }
      #sequence3 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence03.png);
            opacity: 0;
      }
      #sequence4 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence04.png);
            opacity: 0;
      }
      #sequence5 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence05.png);
            opacity: 0;
      }
      #sequence6 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence06.png);
            opacity: 0;
      }
      #sequence7 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence07.png);
            opacity: 0;
      }
      #sequence8 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence08.png);
            opacity: 0;
      }
      #sequence9 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence09.png);
            opacity: 0;
      }
      #sequence10 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence10.png);
            opacity: 0;
      }
      #sequence11 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence11.png);
            opacity: 0;
      }
      #sequence12 {
            background-image: url(/content/dam/bekoglobal/en/autodose/img/sequence/newseq_mobile/sequence12.png);
      }

      .kedi-consumeCalculator-container {
            position: absolute;
            width: 90%;
            left: 0;
            margin-left: auto;
            height: auto;
            pointer-events: none;
            margin-right: auto;
            right: 0;
            bottom: 4%;
      }

      .kedi-consumeCalculator {
            width: auto;
            height: auto;

            max-width: 550px;
            position: relative;
            background-color: #172026;
            color: white;
            padding-top: 3%;
            padding-bottom: 1%;
            padding-left: 2%;
            padding-right: 2%;
            left: auto;
            margin-right: auto;
            margin-left: auto;
            top: 80%;
            border-radius: 60px;
            display: flex;
            pointer-events: all;
            justify-content: space-around;
      }

      .kedi-consumeCalculator .kedi-consumeIcon {
            flex: 1;
            height: auto;
            text-align: center;
            padding-left: 4px;
            padding-right: 4px;
            margin-top: 0px;
            min-width: auto;
            cursor: pointer;
      }

      .kedi-consumeCalculator .kedi-consumeIcon:before {
            content: "";
            float: left;
            padding-top: 100%;
      }

      .kedi-consumeIcon .kedi-consumeIcon-icon img {
            width: 100%;
      }
      .kedi-consumeDegreeText {
            font-family: SohoGothicPro, sans-serif;
            font-size: 8px;
            line-height: 12px;
      }

      .kedi-consumePointer {
            position: absolute;
            padding-bottom: 12%;
            width: 12%;
            height: auto;
            background-color: #fafafa;
            opacity: 0.4;
            border-radius: inherit;
            top: 12%;
            left: 2%;
            pointer-events: none;
      }

      .kedi-lituCard {
            border-radius: 20px;
            max-width: 100%;
            top: 2%;
            left: 4%;
            right: 4%;
            bottom: auto;
      }

      .kedi-twmCard {
            border-radius: 20px;
            top: auto;
            left: 4%;
            right: 4%;
            pointer-events: none;
            bottom: 4%;
            width: auto;
            max-width: 100%;
      }

      .kedi-video-button-container {
            flex: 1;
            position: absolute;
            width: 100%;
            height: 100px;
            align-items: center;
            justify-content: center;
            left: 50%;
      }

      .kedi-video-button {
            font-weight: 100;
            max-width: 200px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            right: auto;
            left: auto;
            top: -100px;
            transform: translateX(-50%);
            padding-left: 40px;
            padding-right: 40px;
      }

      #content-background-3 {
            display: flex;
            background-position: 37% 60%;
      }

      .kedi-autoReplenishmentCard {
            border-radius: 20px;
            top: auto;
            left: 2%;
            max-width: 100%;
            pointer-events: none;
            right: 2%;
            bottom: 2%;
      }

      #kedi-lottie-autoreplenishment {
            position: absolute;
            width: 100%;
            height: 100%;
            display: block !important;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
            text-align: center;
            opacity: 1;
            pointer-events: none;
            margin: 0px;
      }

      #kedi-lottie-autoreplenishment-animation {
            width: 100% !important;
      }

      .kedi-autoreplenishment-logo {
            position: absolute;
            display: flex;
            width: 100%;
            height: 100%;
            top: 25%;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
            text-align: center;
            opacity: 1;
            pointer-events: none;
            align-items: center;
            justify-content: center;
            padding-left: 0;
      }

      .kedi-autoreplenishment-logo img {
            width: 100px;
            height: auto;
      }

      #kedi-product-slider {
            position: relative;
            width: 100%;
            left: 0;
            right: 0;
            pointer-events: none;
      }

      .kedi-product-card {
            max-width: 240px;
            min-height: none;
      }

      .kedi-product-image {
            text-align: center;
      }

      .kedi-product-image img {
            max-width: 60%;
      }

      .swiper-slide {
            width: 80% !important;
            max-width: 240px;
      }

      .kedi-swiper-button-next {
            display: none;
      }
      .kedi-swiper-button-prev {
            display: none;
      }

      h2.kedi-products-header {
            font-family: Core Sans C, sans-serif;
            position: relative;
            color: white;
            font-size: 30px;
            left: 10%;
            max-width: 260px;
            top: auto !important;
      }
}

/* iphone6/7/8 plus mobile devices */
@media only screen and (max-width: 435px) {
      .kedi-navigation-upArrow {
            margin-top: 30px;
      }
}

/* iphone6/7/8 mobile devices */
@media only screen and (min-width: 320px) and (max-width: 375px) and (max-height: 666px) {
      #lottie {
            top: 50%;
            height: 450px;
            margin-top: -75%;
      }

      #kedi-navigation-opener {
            width: 85px;
      }

      #kedi-navigation-links {
            top: calc(50% - 20px);
            height: 450px;
      }

      #kedi-navigation-links a {
            font-size: 12px;
            margin-bottom: 24px !important;
      }

      .kedi-navigation-upArrow {
            margin-top: 50px;
      }

      .kedi-product-image {
            text-align: center;
      }

      h2.kedi-products-header {
            left: 10%;
            top: -114px;
      }
}

/* smaller mobile devices */
@media only screen and (max-width: 320px) {
      #lottie {
            top: 40%;
            height: 400px;
            margin-top: -75%;
      }

      #kedi-navigation-opener {
            width: 96px;
      }

      #kedi-navigation-links {
            top: 40%;
            height: 400px;
      }

      #kedi-navigation-links a {
            font-size: 12px;
            margin-bottom: 24px !important;
      }

      .kedi-navigation-upArrow {
            margin-top: 24px;
      }

      .kedi-product-card {
      }

      .kedi-product-image {
            text-align: center;
      }

      h2.kedi-products-header {
            left: 10%;
            top: -114px;
      }
}

/* small widescreen pc */
@media only screen and (min-width: 1024px) and (max-height: 800px) {
      #lottie {
            width: 250px;
            height: 520px;
            top: 0px;
      }

      #kedi-navigation-links {
            width: 250px;
            height: 520px;
            top: 160px;
      }

      #kedi-navigation-links a {
            margin-bottom: 24px;
      }

      .kedi-navigation-upArrow {
            margin-top: 40px;
      }
}



@media only screen and (max-width: 1460px) and (max-height: 870px) {
      .kedi-introText {
            top: 24vh;
            width: 60%;
      }

      .kedi-introSticker {
            top: 26vh;
      }
      .kedi-introButton {
            top: 50vh;
      }
      .kedi-counter-card-container {
            top: 15%;
            left: 15%;
      }
      #lottie {
            height: 500px;
      }

      #kedi_navigation {
            margin-top: 15px;
      }

      #kedi-navigation-links {
            top: 160px;
      }

      #kedi-navigation-links a {
            margin-bottom: 24px;
            font-size: 16px;
      }
      .kedi-navigation-upArrow {
            margin-top: 45px;
            width: 50px;
      }

      .kedi-product-card {
            padding-bottom: 20px;
            padding-top: 20px;
      }

      h2.kedi-products-header {
            margin-top: 15px;
            margin-bottom: 15px;
      }

      .kedi-product-card .kedi-product-image img {
            height: auto;
            width: auto;
            max-width: 100%;
            max-height: 130px;
      }

      .kedi-product-specs p {
            margin-bottom: 8px;
            font-size: 12px;
      }
      .kedi-product-id h4 {
            font-size: 20px;
            padding-bottom: 7px;
            margin-bottom: 7px;
            margin-top: 5px;
      }

      .kedi-swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets {
            height: 40px;
      }

      #content5 .swiper-button-next,
      #content5 .swiper-button-prev {
            top: 60%;
      }

      .kedi-autoReplenishmentCard {
            top: 8%;
            max-width: 28%;
      }

      #content3 .kedi-card {
            max-width: 40%;
            top: auto;
            left: 5%;
            bottom: 10%;
      }

      #content3 .kedi-card p.kedi-small {
            margin-top: 25px;
      }

      .kedi-europeCard {
            bottom: auto;
            top: 20%;
            left: 5%;
            max-width: 45%;
      }

      .kedi-finish-logo {
            left: 8%;
            top: 74%;
            bottom: auto;
            left: 5%;
      }

      .kedi-counter-card-inner-container {
            min-height: 164px;
      }
      .kedi-refillCounter {
            min-height: 180px;
      }
      .kedi-refillCard {
            max-width: 330px;
      }
      .kedi-refillCounterNumber {
            line-height: 180px;
      }
      .kedi-lituCard {
            max-width: 28%;
            bottom: 25%;
            left: 5%;
      }
}

/* ==========================================================================
     Helper classes
     ========================================================================== */

/*
   * Hide visually and from screen readers
   */

.hidden {
      display: none !important;
}

/*
  * Hide only visually, but have it available for screen readers:
  * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
  *
  * 1. For long content, line feeds are not interpreted as spaces and small width
  *    causes content to wrap 1 word per line:
  *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
  */

.visuallyhidden {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
      white-space: nowrap; /* 1 */
}

/*
  * Extends the .visuallyhidden class to allow the element
  * to be focusable when navigated to via the keyboard:
  * https://www.drupal.org/node/897638
  */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
      white-space: inherit;
}

/*
  * Hide visually and from screen readers, but maintain layout
  */

.invisible {
      opacity: 0 !important;
      pointer-events: none;
}

/*
  * Clearfix: contain floats
  *
  * For modern browsers
  * 1. The space content is one way to avoid an Opera bug when the
  *    `contenteditable` attribute is included anywhere else in the document.
  *    Otherwise it causes space to appear at the top and bottom of elements
  *    that receive the `clearfix` class.
  * 2. The use of `table` rather than `block` is only necessary if using
  *    `:before` to contain the top-margins of child elements.
  */

.clearfix:before,
.clearfix:after {
      content: " "; /* 1 */
      display: table; /* 2 */
}

.clearfix:after {
      clear: both;
}

/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */

@media only screen and (min-width: 35em) {
      /* Style adjustments for viewports that meet the condition */
}

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
      /* Style adjustments for high resolution devices */
}

/* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */

@media print {
      *,
      *:before,
      *:after {
            background: transparent !important;
            color: #000 !important; /* Black prints faster */
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            text-shadow: none !important;
      }

      a,
      a:visited {
            text-decoration: underline;
      }

      a[href]:after {
            content: " (" attr(href) ")";
      }

      abbr[title]:after {
            content: " (" attr(title) ")";
      }

      /*
       * Don't show links that are fragment identifiers,
       * or use the `javascript:` pseudo protocol
       */

      a[href^="#"]:after,
      a[href^="javascript:"]:after {
            content: "";
      }

      pre {
            white-space: pre-wrap !important;
      }
      pre,
      blockquote {
            border: 1px solid #999;
            page-break-inside: avoid;
      }

      /*
       * Printing Tables:
       * http://css-discuss.incutio.com/wiki/Printing_Tables
       */

      thead {
            display: table-header-group;
      }

      tr,
      img {
            page-break-inside: avoid;
      }

      p,
      h2,
      h3 {
            orphans: 3;
            widows: 3;
      }

      h2,
      h3 {
            page-break-after: avoid;
      }
}