@charset "UTF-8";

html { 
	font-family: 'CLAASCultivaWeb', sans-serif;
  font-weight: 300;
	font-size: 1vw;
	color: #212121;
  -webkit-text-size-adjust: 100%;
}

html, body {
	height: 100%;
}

a {
	text-decoration: none;
	color: inherit;
}

strong {
	font-weight: 500;
}

ul {
    list-style-type: disc;
}

li {
}

button {
  display: inline-block;
  border: none;
  border-radius: 0.33rem;
  padding: 0;
  margin: 0;
  text-decoration: none;
  background: rgba(0,0,0,0.0);
  cursor: pointer;
  text-align: center;
  transition: background 250ms ease-in-out, 
              transform 150ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
}

#media-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  background: #000;
  z-index: -1;
}

#pg-wrapper {
  position: relative;    width: 100%;
  height: 100%;
  
  overflow: hidden;
  
  -ms-overflow-style: none;
  scrollbar-width: none;
  
  z-index: 1;
}
#pg-wrapper::-webkit-scrollbar {
  display: none;
}

.two-col {
  height: 100%;
  width: 100%;
  
  display: flex;
  flex-direction: row;
}

.col {
  width: 50%;   height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.svg-icon {
	object-fit: contain;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.h-large {
  font-size: 5.0rem;
}

.btn-green {
	font-weight: 700;
  display: inline-block;
	font-size: 1.0rem;
	color: #212121;
	background-color: #b3c618;
  border-radius: 0.2rem;
	padding: 1.1rem 2.5rem 1.0rem;
	text-align: center;
  cursor: pointer;
}

.nav-back {
  height: 3.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  cursor: pointer;
  
  margin: 2rem auto 2rem 2rem;
}

.nav-back.nav-promise {
  opacity: 0;
  animation-name: fade-in;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}
.nav-back.nav-promise {
  margin-top: 2rem;
}
.showProduct .nav-back.nav-promise {
  margin-top: calc(-2rem - 1.2rem);
}
.nav-product.nav-back {
  display: none;
}
.showProduct .nav-product.nav-back {
  display: flex;
}

.btn-back {
  display: flex;
  justify-content: center;
	align-items: center;
  
	font-size: 1.0rem;
	font-weight: 300;
  letter-spacing: 0.05em;
  
	padding: auto 0.2rem auto;
}

.icon-back {
  display: flex;
  justify-content: center;
	align-items: center;
  height: 3.2rem;
  width: 3.2rem;
}
.icon-back .svg-icon {
  width: 100%;
  height: 100%;
}

.pg-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.pg-bg::-webkit-scrollbar {
  display: none;
}
.bg-img {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -2%;
  
  object-fit: cover;
}
.bg-img.blur-ani {
  transform: scale(1.05);
  animation-delay: .5s;
  animation-duration: 2s;
  animation-name: blur;
  animation-fill-mode: forwards;
}
.backward .bg-img.blur-ani {
  animation-delay: 0s;
  animation-duration: 0s;
}
.bg-img.blur {
  filter: blur(1rem);
}

.right {
  transform: translateX(100%)!important;
}
.middle {
  transform: translateX(0)!important;
}
.left {
  transform: translateX(-100%)!important;
}

.pg-start {
	height: 100%;
  width: 100%;
  
  visibility: visible;
  position: absolute;
  font-size: 1.9rem;
  color: white;
  
  transition: transform 0.5s;
}

.pg-start .h-large strong {
  white-space: nowrap;
}
.pg-menu {
  width: 100%;
	height: 100%;
	margin: 0;
  margin-left: 0%;
  
  position: absolute;
  font-size: 2rem;
  color: white;
  
  visibility: visible;
  transform: translateX(100%);
  transition: transform 0.5s;
}

.pg-story {
  width: 100%;
	height: 100%;
	margin: 0;
  margin-left: 0%;
  
  position: absolute;
  display: flex;
  flex: row;
  z-index: 1;
  
  visibility: visible;
  transform: translateX(100%);
  transition: transform 0.5s;
}

.show21 #pg-story01 {
  z-index: 2;
}
.show22 #pg-story02 {
  z-index: 2;
}
.show23 #pg-story03 {
  z-index: 2;
}
.show24 #pg-story04 {
  z-index: 2;
}
.show25 #pg-story05 {
  z-index: 2;
}
.show26 #pg-story06 {
  z-index: 2;
}
.show27 #pg-story07 {
  z-index: 2;
}
.show28 #pg-story08 {
  z-index: 2;
}





.col-cnt {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: auto 0rem;
  
  padding: 4rem 2rem 1rem 5rem;
}

.logo-start {
  display: flex;
  justify-content: center;
	align-items: center;
  
  width: 6rem;
  height: 6rem;
  
  background: #b3c618;
  border-radius: 0.5rem;
}

.logo-start .svg-icon {
  width: 75%;
  height: 75%;
}

.pg-start .p-flow {
  font-size: 1.8rem;
  line-height: 1.3;
}

.p-flow {
	line-height: 1.4;
}
.pg-start .btn-green {
  margin-bottom: 4rem;
}

.legal-footer {
  position: absolute;
  display: flex;
  font-size: 1rem;
  bottom: 1.0rem;
  right: 2rem;
}

.legal-footer .legal-item {
  margin: 0 0 0 1rem;
}

.lang-sel-si {
  width: 100%;
  heigth: auto;
  font-size: 1rem;
  
  position: absolute;
  bottom: 0rem;
  z-index: 99;
}
.lang-sel-si-btn {
  position: absolute;
  margin: 1.25rem 5.5rem;
  cursor: pointer;
}

.lang-sel-si-menu {
  position: relative;
  
  padding: 1rem 5rem;
  
  display: flex;
  flex-wrap: wrap;
  
  transform: translateY(100%);
  transition: transform .1s;
  
  background: rgba(0,0,0,1.00);
}
.show-lang-sel .lang-sel-si-menu {
  transform: translateY(0);
}

.lang-sel-si-item {
  margin: .25rem .5rem;
}
.lang-sel-si-item.current-lang {
  cursor: pointer;
}
.show-lang-sel .lang-sel-si-item {
}

.img-start {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-content: center;
  
}
.img-start-img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  position: absolute;
  transform: translateX(5rem);
  
  object-fit: contain;
}


.col-menu {
  height: 100%;
  
  display: flex;
  flex-direction: column;
}

.col-menu .nav-back {
  animation-delay: 3s;
}

.menu-h {
    position: relative;
    height: calc(100% - 3.2rem);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.menu-h-cntr {
  margin-top: auto;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 1rem;
}

.h-large-01 {
  opacity: 0;
  transform: translate(10%,0);
  animation-delay: .5s;
  animation-duration: 1s;
  animation-name: slide-fade-rtl;
  animation-fill-mode: forwards;
}
.h-large-02 {
  opacity: 0;
  transform: translate(10%,0);
  animation-delay: 1.25s;
  animation-duration: 1s;
  animation-name: slide-fade-rtl;
  animation-fill-mode: forwards;
}
.backward .h-large-01,
.backward .h-large-02 {
  animation-delay: 0s;
  animation-duration: 0s;
}

.promises-h-cntr {
}

.menu-stories-scroll {
  width: 100%;
  overflow-x: scroll;
  cursor: grab;
  -ms-overflow-style: none;
  scrollbar-width: none;
  
  margin-bottom: auto;
}

.menu-stories-scroll::-webkit-scrollbar {
  display: none;
}

.menu-stories-cntr {
  display: flex;
  flex-direction: row;
  column-gap: 1.5rem;
  flex-wrap: nowrap;   width: 170.5rem;
  
  padding: 4rem 2rem 4rem 2rem;
  margin-bottom: auto;
}
.menu-stories-cntr {
  margin-left: 175%;
  animation-delay: 2s;
  animation-duration: 1.5s;
  animation-name: slide-in-rtl-wobble;
  animation-fill-mode: forwards;
}
.backward .menu-stories-cntr {
  animation-delay: .5s;
  animation-duration: 1.5s;
}

.btn-menu {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  
  height: 21.5rem;
  width: 20rem;
  
  background: white;
  color: #212121;
  border-radius: 1rem;
}

.btn-menu-icon {
  display: flex;
  justify-content: center;
	align-items: center;
  
  height: 10rem;
  width: 10rem;
  color: #b3c618;
  margin: auto;
  margin-top: 4rem;
}
.btn-menu-icon .svg-icon {
  width: 90%;
  height: 90%;
}

.btn-menu-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.btn-txt {
  max-width: 75%;
  
  font-size: 1.2rem;
	line-height: 1.25;
  
  padding: 0rem 0rem 1.2rem 1.5rem;
}
.btn-txt div {
  min-height: 1.45rem;
}

.icon-next {
  display: flex;
  justify-content: center;
	align-items: center;
  
  
  height: 2.8rem;
  width: 2.8rem;
  
	font-size: 0.8rem;
  
  margin: auto 0.9rem 0.9rem auto;
}
.icon-next .svg-icon {
  width: 100%;
  height: 100%;
}




.pg-story .nav-back {
  animation-delay: 1s;
}

.pg-story .h-large {
  font-size: 5.5rem;
  color: #212121;
    margin-bottom: 2rem;
  
  opacity: 0;
  transform: translate(10%,0);
  animation-delay: 0.5s;
  animation-duration: .5s;
  animation-name: slide-fade-rtl;
  animation-fill-mode: forwards;
}

.pg-story .btn-green,
.pg-promises .btn-green {
  opacity: 0;
  transform: translate(10%,0);
  animation-delay: 1s;
  animation-duration: .5s;
  animation-name: slide-fade-rtl;
  animation-fill-mode: forwards;
}

.col-question-product {
  overflow: hidden;
  height: 100%;}

.col-question-spacer-v {
  min-height: 7rem;
  max-height: 8rem;
  height: 40%;
}
.col-question-spacer-v-btm {
  height: 40%;
  max-height: 8rem;
}

.col-question {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
  margin: auto 0rem;
  padding-left: 2.5rem;
  padding-right: 3rem;
  
  position: relative;
}
.col-question {
  opacity: 1;
  transform: translate(0,0);
  transition: opacity .5s, transform .5s;
}
.showProduct .col-question {
  opacity: 0;
  transform: translate(0,-100%);
}

.col-scroll-header {
  position: fixed;
  top: 0;
  width: calc(50% - 3.00rem);    
  height: 7rem;
  min-height: 7rem;
  padding-left: 0.5rem;
  
  border-top-left-radius: 1rem;
  z-index: 1;
  background: white;
}

.col-promises {
  height: 97%;
  
  margin: auto 0rem;
  padding: 0rem 6rem 0rem 5rem;
  border-radius: 1rem 0rem 0rem 1rem;
  
  color: white;
}

.bx-promises-cnt {
  height: 100%;
  width: 100%;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
  
  margin: auto;
}

.bx-promise-hl {
  position: absolute;
  
  width: calc(100% - 6rem);
  height: calc(9.0rem + 4rem);
  
  left: 50%;
  top: 50%;
  z-index: 1;
  
  border-radius: .5rem;
  
  background: rgba(0,0,0,0.5);
  outline: thin solid white;
  
  opacity: 0;
  transform: translate(-51%, calc(-55% - 13rem) );
  animation-name: bx-hl;
  animation-delay: 3s;
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.bx-promise {
  display: flex;
  flex-direction: row;
  height: 10rem;
  
  z-index: 2;
}

.bx-promise-no {
  font-size: 10.0rem;
}

.bx-promise-no {
  opacity: 0;
  animation-name: fade-in-half-01, fade-in-half-02;
  animation-duration: 1s, .3s;
  animation-fill-mode: forwards, forwards;
}

.bx-promise-txt {
  font-size: 1.7rem;
  line-height: 2rem;
  
	font-weight: 300;
  padding: 1.3rem;
  padding-top: 1.0rem;
}

.bx-promise-txt {
  opacity: 0;
  transform: translate(10%,0);
  animation-name: slide-fade-half-rtl, fade-in-half-02;
  animation-duration: .5s, .5s;
  animation-fill-mode: forwards, forwards;
}

.delay01 .bx-promise-no {
  animation-delay: 1.0s, 3.5s;
}
.delay02 .bx-promise-no {
  animation-delay: 1.5s, 4.75s;
}
.delay03 .bx-promise-no {
  animation-delay: 2.0s, 6.0s;
}
.delay01 .bx-promise-txt {
  animation-delay: 1.25s, 3.5s;
}
.delay02 .bx-promise-txt {
  animation-delay: 1.75s, 4.75s;
}
.delay03 .bx-promise-txt {
  animation-delay: 2.25s, 6.0s;
}

.col-product {
  height: 100%;
  max-height: 100%;
  position: relative;
  
  overflow-y: hidden;
}
.col-product {
  opacity: 0;
  transform: translate(0,0);
  transition: opacity .5s, transform .5s;
}
.showProduct .col-product {
  opacity: 1;
  transform: translate(0,-100%);
}

.col-product-scroll {
  height: calc(100% - 14.5rem);
  margin-left: 2.5rem;
  padding-right: 25%;
  
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  
  position: relative;
  
  
  margin-top: 7.2rem;
  margin-bottom: 6rem;
}
.col-product-scroll::-webkit-scrollbar { 
  display: none;
}

.products-li-cntr {
  display: flex;
  flex-direction: column;
  gap: 2rem;}

.bx-product {
  padding: 1rem;
  
  color: #b3b3b3;
  border: thin solid rgba(179,179,179,0.50);
  border-radius: 1rem;
}
.bx-product {
  transition: color .5s, border-color .5s;
}

.showProduct.bxid01 .bx-product.bxid01,
.showProduct.bxid02 .bx-product.bxid02,
.showProduct.bxid03 .bx-product.bxid03 {
  color: #212121;
  border-color: #212121;
}

.product-li-no {
  font-size: 1.0rem;
  letter-spacing: 0.05em;
}

.ul-product {
  margin-top: 1.3rem;
  margin-left: 2.0rem;
  margin-bottom: 1.0rem;
  
  font-size: 1.3rem;
  line-height: 1.8rem;
}

.li-wrapper {
}
.li-wrapper {
  position: relative;
	font-weight: 300;
  letter-spacing: 0.013em;
}
.showProduct  .li-wrapper.highlight-li {
	font-weight: 500;
  letter-spacing: 0.0em;
}
.showProduct  .li-wrapper.pointer,
.showProduct  .li-wrapper:not(.highlight-li) {
  cursor: pointer;
}

.li-item {
  margin-top: 1.5rem;
}

.product-li-img-no {
  position: absolute;
  top: 10%;
  right: -9%;
  
  font-size: 0.8rem;
  line-height: 1.0rem;
  height: 1.2rem;
  width: 2.5rem;
  padding-top: 0.3rem;
  text-align: center;
  
  background: #b3c618;
  border-radius: 0.2rem;
}
.product-li-img-no {
  display: none;
  opacity: 0;
}
.showProduct .highlight-li .product-li-img-no.show {
  display: block;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}
.col-scroll-footer {
  position: fixed;
  bottom: 0;
  width: calc(50% - 2.00rem);   
  padding-left: 0.5rem;
  height: 6rem;
  min-height: 6rem;
  
  z-index: -99;
  
  border-bottom-left-radius: 1rem;
  background: white;
}
.col-scroll-footer {
  opacity: 0;
  transition: opacity .5s, z-index 0s .5s;
}
.showProduct .col-scroll-footer {
  z-index: 0;
  opacity: 1;
  transition: opacity .5s, z-index 0s 0s;
}
.nav-li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  
  margin: 1.5rem 2rem 2.5rem 2rem;
}
.icon-up,
.icon-down,
.icon-up-ia,
.icon-down-ia {
  position: absolute;
  opacity: 0;
  
  height: 2.7rem;
  width: 2.7rem;
  
  transition: opacity .5s;
}
.showProduct .icon-up,
.showProduct .icon-down {
  cursor: pointer;
}
.showProduct .icon-up,
.showProduct .icon-down,
.showProduct .nav-li.top .icon-up-ia,
.showProduct .nav-li.bottom .icon-down-ia {
  display: inline;
  opacity: 1;
  
  animation: fade-in .5s forward;
}
.nav-li.top .icon-up,
.nav-li.bottom .icon-down,
.showProduct .icon-up-ia,
.showProduct .icon-down-ia {
  cursor: inherit;
  opacity: 0;
}
.nav-li .svg-icon {
  width: 100%;
  height: 100%;
}
.icon-up {
  display: none;
  transition: opacity .5s, display .5s allow-discrete;
}
.icon-down,
.icon-down-ia {
  transform: translate(calc(100% + 0.5rem), 0);
}
.col-prom-prod-bg-frame {
  height: 97%;
  
  margin: auto 0rem;
  border-radius: 1rem 0rem 0rem 1rem;
  
  position: relative;
  overflow: hidden;
  background: rgba(127,127,127,0.50)
}
.col-prom-prod-bg-frame {
  transform: translate(100%, 0);  animation-name: slide-in-rtl-translate;
  animation-delay: 0.5s;
  animation-duration: .5s;
  animation-fill-mode: forwards;}

.col-prom-prod-bg-cntr {
  position: relative;
  height: 200%;
}
.col-prom-prod-bg-cntr {
  transform: translate(0, 0);
  transition: transform .5s;
  transition-delay: 1s;}
.showProduct .col-prom-prod-bg-cntr {
  transform: translate(0, -50%);
  transition-delay: 0s;}

.show21:not(.showProduct) #pg-story01 .col-prom-prod-bg-cntr { transition-delay: 0s; }
.show22:not(.showProduct) #pg-story02 .col-prom-prod-bg-cntr { transition-delay: 0s; }
.show23:not(.showProduct) #pg-story03 .col-prom-prod-bg-cntr { transition-delay: 0s; }
.show24:not(.showProduct) #pg-story04 .col-prom-prod-bg-cntr { transition-delay: 0s; }
.show25:not(.showProduct) #pg-story05 .col-prom-prod-bg-cntr { transition-delay: 0s; }
.show26:not(.showProduct) #pg-story06 .col-prom-prod-bg-cntr { transition-delay: 0s; }
.show27:not(.showProduct) #pg-story07 .col-prom-prod-bg-cntr { transition-delay: 0s; }
.show28:not(.showProduct) #pg-story08 .col-prom-prod-bg-cntr { transition-delay: 0s; }


.col-prom-bg {
  position: relative;
  height: 50%;
}

.col-prod-img-bg {
  position: relative;
  height: 50%;
}

.col-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  
  overflow: hidden;
  
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.col-bg::-webkit-scrollbar {
  display: none;
}
.col-bg-img {
  width: 110%;
  height: 110%;
  margin-left: -5%;
  margin-top: -2%;
  
  object-fit: cover;
  
  filter: blur(0);  transform: scale(1.05);
  animation-delay: 1s;
  animation-duration: 1s;
  animation-name: blur;
  animation-fill-mode: forwards;
}
.col-prod-img-bg .col-bg-img {
  animation: none;
  filter: blur(0);
  transition: filter 0s .5s;
}
.showProduct .col-prod-img-bg .col-bg-img {
  filter: blur(1rem);
  transition: filter 1s 1s;
}

.bgblur {
  display: none;
}

.two-col-wrapper {
  flex-grow: 2;
  position: absolute;
  height: 100%;
  width: calc(100% - 3.1rem);
  
  margin-left: 3.1rem;
  
  border-radius: 1rem 0rem 0rem 1rem;
  background: white;
  
  overflow-x: hidden;
}

.nav-menu-side-cntr {
  height: 100%;
  width: 100%;
  
  display: flex;
  flex-direction: column;
  
	z-index: 0;
  background: #212121;
}

.nav-menu-side-home {
  width: 4rem;
  height: 3rem;
  
  background: #b3c618;
  
  cursor: pointer;
}

.nav-menu-side-home-icon {
  height: 1.8rem;
  width: 1.8rem;
  
  margin: auto;
  margin-left: 0.6rem;
  margin-top: 0.6rem;
}
.nav-menu-side-home-icon .svg-icon {
  width: 100%;
  height: 100%;
}

.nav-menu-side {
  display: flex;
  flex-direction: column;
  margin: auto 0rem;
}

.nav-menu-side-item {
  width: 3.1rem;
  height: 2.6rem;
  display: flex;
  justify-content: center;
	align-items: center;
  
  cursor: pointer;
  
  margin-left: 0.1rem;
  margin-bottom: .75rem;
  margin-top: .75rem;
}
.nav-menu-side-item.active {
  border-radius: 0.2rem 0rem 0rem 0.2rem;
  background: white;
  cursor: auto;
}

.nav-menu-side-item-icon {
  display: block;
  
  height: 1.25rem;
  width: 1.25rem;
  
  margin: auto 0rem;
}
.nav-menu-side-item-icon .svg-icon {
  width: 100%;
}
.active .nav-menu-side-item-icon .svg-icon {
  filter: invert(7%) sepia(6%) saturate(8%) hue-rotate(329deg) brightness(96%) contrast(85%);
}
.nav-menu-side-item-txt {
  display: none;
}

.gray {
  color: #b3b3b3;
  border-color: #b3b3b3;
}
.black {
  color: #212121;
  border-color: #212121;
}
.white {
  color: white;
  border-color: white;
}
.green {
  color: #b3c618;
  border-color: #b3c618;
}

.svg-black {
  filter: invert(7%) sepia(6%) saturate(8%) hue-rotate(329deg) brightness(96%) contrast(85%);
}
.svg-green {
  filter: invert(88%) sepia(35%) saturate(2285%) hue-rotate(12deg) brightness(92%) contrast(81%);
}
.svg-white {
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}
.svg-gray {
  filter: invert(97%) sepia(0%) saturate(527%) hue-rotate(135deg) brightness(71%) contrast(106%);
}
.noshow {
  visibility: hidden;
}
.nodisplay {
  display: none;
}

.dummy {
  height: 100%;
  width: 100%;
}
.dummy-red-box {
  height: 2rem;
  width: 10rem;
  background: #800;
}

@media (min-aspect-ratio: 2.1) {
  html { 
    font-size: 2.1vh;
  }
  #pg-wrapper {
    width: 210vh;
  }
}
@media (max-aspect-ratio: 1.3) {
  html { 
  }
  #pg-wrapper {
    height: 75vw;
  }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  
  .lang-sel-si {
    font-size: 1.5rem;
  }
  .lang-sel-si-btn {
    margin: 1.75rem 5.75rem;
  }
  .lang-sel-si-menu {
    padding: 1.5rem 5rem;
    transition-duration: .25s;
  }
  .lang-sel-si-item {
    margin: .25rem .75rem;
  }
  
  .btn-green {
    font-weight: 500;
    font-size: 1.5rem;
    padding: 0.9rem 2rem 0.9rem;
  }

  .col-scroll-header {
    position: fixed;
    top: 0;
      width: calc(50% - 6rem);

    height: 7rem;
    min-height: 7rem;
      padding-left: 0.0rem;

    border-top-left-radius: 1rem;
    z-index: 1;
    background: white;
  }
  .nav-back {
      gap: 0.8rem;
  }
  .nav-back.nav-promise {
      margin-top: 1.5rem;
  }
  .showProduct .nav-back.nav-promise {
      margin-top: calc(-2rem - 1.7rem);
  }
  .btn-back {
      font-weight: 300;
      font-size: 1.4rem;
  }
  .icon-back {
      height: 4rem;
      width: 4rem;
  }
  .product-li-img-no {
    top: 0%;
    font-size: 1.2rem;
    height: 1.4rem;
    width: 2.9rem;
    padding-top: 0.5rem;
  }
  .col-scroll-footer {
      width: calc(50% - 3.5rem);
  }
  .nav-li {
      margin: 0.9rem 2rem 2.5rem 1.8rem;
  }
  .icon-up,
  .icon-down,
  .icon-up-ia,
  .icon-down-ia {
      height: 3.7rem;
      width: 3.7rem;
  }

  .two-col-wrapper {
      width: calc(100% - 6rem);
      margin-left: 6rem;
  }

  .nav-menu-side-home {
      width: 8rem;
      height: 6rem;
  }

  .nav-menu-side-home-icon {
      height: 3.6rem;
      width: 3.6rem;
      margin-left: 1.2rem;
      margin-top: 1.2rem;
  }

  .nav-menu-side-item {
      width: 5.9rem;
      height: 5.0rem;
      margin-left: .2rem;
      margin-top: .0rem;
      margin-bottom: .0rem;
  }
  .nav-menu-side-item.active {
      border-radius: 0.4rem 0rem 0rem 0.4rem;
  }
  .nav-menu-side-item-icon {
      height: 2.5rem;
      width: 2.5rem;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-aspect-ratio: 1.90) {
  html { 
    font-size: 1.90vh;
  }
  #pg-wrapper {
    width: 190vh;
  }
}