@charset "utf-8";
/* CSS Document */

/* Div layer for the entire container. */
#dc_container {
  position: fixed;
  width: 100%;
  height: 100%;
  margin: auto;
  font-size: 0;
  top: 0;
  left: 0;
  z-index: 99998;
  display:none;
}
#dc_content {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 100;
}

a.exit_link {
  position:absolute;
  z-index:900;
  width:100%;
  height:100%;
  left:0;
  top:0;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-callout:none;
  display: none;
}

#dc_btnClose {
  display: block;
  display: none;
  position: fixed;
  width: 25px;
  height: auto;
  top: 0;
  right: 55px;
  z-index: 99999;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-callout: none;
  opacity: 0;
  animation: fadein 0.2s 4s ease-out forwards;
}

.content-wrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffffaa;
  opacity: 0;
  animation: fadein 0.6s ease-out forwards;
  z-index: 1;
}

.content-container {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ffffffaa;
  background-image: url('img/bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2;
}

.content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateX(400px);
  animation: fadeup 0.6s 1s ease-out forwards;
  z-index: 99999;
}

.images-container {
  position: relative;
  width: 70vw;
  max-width: 500px;
  height: 80vh;
  max-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  /*background-image: url('img/floor.jpg');*/
  border-radius: 20px;
  overflow: hidden;
  margin: auto;
}

.slide-image {
  width: 500px;
  height: auto;
}

.before-img-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-image: url('img/dirty-stove.png');
  background-size: cover;
  background-position: center right -60px;
  background-repeat: no-repeat;
}

.after-img-container {
  overflow: hidden;
  width: 0%;
  height: 100%;
  background-image: url('img/stove.png');
  background-size: cover;
  background-position: center left -80px;
  background-repeat: no-repeat;
}

.swiper {
  position: absolute;
  height: 100%;
  bottom: 0;
  left: calc(0%);
  cursor: grab;
}

.swiper-line {
  height: 100%;
  width: 10px;
  background-color: #fff;
  box-shadow: 0 0 20px #00000055;
  position: absolute;
  bottom: 0;
  left: 0;
}

#hand {
  width: 150px;
  position: absolute;
  bottom: 0;
  left: -75px;
}

.products-container {
  position: absolute;
  bottom: 20px;
  right: 40px;
  transform: scale(0);
  animation: scaleup 0.6s 2s ease-out forwards;
}

.products-container img {
  width: 20vw;
}

.logo-container {
  position: absolute;
  top: 40px;
  left: 40px;
}

.logo-container img {
  width: 8vw;
}

.order-container {
  position: absolute;
  bottom: 40px;
  right: calc(50% - 5vw);
  opacity: 0;
  transform: translateY(400px);
  animation: fadeup 1s 1s ease-out forwards;
}

.order-container img {
  width: 10vw !important;
}

.circle-container {
  position: absolute;
  bottom: -200px;
  right: -200px;
  opacity: 0;
  transform: translateX(400px);
  animation: fadeleft 1s 1s ease-out forwards;
}

.circle-container img {
  width: 35vw !important;
}

.text-container {
  position: absolute;
  top: 70px;
  right: calc(50% - 10vw);
  transform: scale(0);
  animation: scaleup 0.6s 1.5s ease-out forwards;
}

.text-container img {
  width: 20vw !important;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(400px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fadeleft {
  0% {
    opacity: 0;
    transform: translateX(400px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes scaleup {
  0% {
    transform: scale(0);
  }

  70% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

body {
  background-image: url('img/website-mockup.png');
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  height: 200vh;
  overflow-y: scroll;
}