* { font-family: arial}
body { height: 100vh;
color: #62564e;}

h3 { font-size: 18px; font-weight: 300; color: #fe4819}
h4 { font-size: 26px; font-weight: 400; color: #fe4819}
h4 span { font-weight: 300; color: #62564e; display: block}
p { font-size: 20px; font-weight: 300; color: #62564e; }

.text-justify { text-align: justify}
.navbar-dark .navbar-toggler-icon {
    background-image: url(../img/menu.svg);
}
.bg-dark { background-color: #fff!important; display: flex; justify-content: space-between; padding: 20px}
.navbar-dark .navbar-toggler { border: none!important}
.navbar-brand img { width: 370px}
.navbar-toggler:focus { box-shadow: none!important}
.nav.nav-pills { max-width: 1100px; margin: auto; justify-content: center}
.btn-primary { color: #fff; background-color: #fe4819; border-color: #fe4819; letter-spacing: 1px; text-transform: uppercase; padding: 10px 30px;}
.btn-primary:hover { color: #fff; background-color: #fe4819; border-color: #fe4819;}
.modal-dialog, .modal-content { background-color: #fe4819}
.modal-header, .modal-footer { border: 0;}
.form-control { height: auto; padding: 15px; border-radius: 0; border: 0;}
.nav-item img { width: 120px}
.space { height: 100px}

.nav-pills .nav-link:hover { opacity: 1}

#TeymaMenu { float: right; background-color: #62564e; padding: 40px; position: absolute; right: 0; z-index: 900; max-width: 450px;}
#TeymaMenu ul li { text-align: right; width: 100%}
#TeymaMenu ul li a { color: #FFF; font-size: 16px; font-weight: 400; transition: all .4s ease-out; line-height: 32px; padding: 9px}
#TeymaMenu ul li a:hover { background-color: #fe4819}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { opacity: 1; background-color: transparent;}
.nav-pills .nav-link { opacity: 1}

.redes { position: fixed; bottom: 20px; right: 20px;}

.vd { width: 840px; height: 473px; margin-bottom: 25px}

img.ho { display: none}
.ho1:hover img { display: none}
.ho2:hover img { display: none}
.ho3:hover img { display: none}
.ho4:hover img { display: none}
.ho5:hover img { display: none}

.ho1:hover img.ho { display: block!important}
.ho2:hover img.ho { display: block}
.ho3:hover img.ho { display: block}
.ho4:hover img.ho { display: block}
.ho5:hover img.ho { display: block}

//*.imgs {
  width: 100px;
  height: 100px;
  animation: scroll 34s linear infinite;
}

.slide-track {
  width: 100%;
  display: flex;
  gap: 3em;
  overflow: hidden;
}

.sliders {
  margin-top: 10px;
  padding: 2em 2em;
}

@keyframes scroll {
  0% {transform: translateX(0);}
  100% {transform: translatex(-1000%)}
}
*//

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.itemrn {
  padding-block: 12px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
  mask-image: linear-gradient(to right, transparent 20% 80%, #000, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
}

.list {
  display: flex;
  width: calc(
    var(--width) * var(--imageQuantity) * 2
  ); /* Double the width for seamless looping */
  gap: calc(var(--width) / 4);
  animation: autoScroll 20s linear infinite;
}

.list:hover {
  animation-play-state: paused !important;
}

.item {
  width: var(--width);
  height: var(--height);
  flex-shrink: 0;
}

.item img {
  width: 100%;
  height: 100%;
  transition: filter 0.5s ease-in-out;
}

@keyframes autoScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
  }
}

.itemr[reverse="true"] .list {
  animation: reverseScroll 20s linear infinite;
}

@keyframes reverseScroll {
  0% {
    transform: translateX(calc(-1 * var(--width) * var(--imageQuantity)));
  }
  100% {
    transform: translateX(0);
  }
}

.itemr:hover .item img {
  filter: grayscale(1);
}

.itemr .item:hover img {
  filter: grayscale(0);
}
.cartem1 {display: none;}
.cartem {width: 115%; height: 100%; min-height: 400px;
    marging-top: 20px;}
.carousel-item active{height: 440px; min-height: 400px;}

@media screen and (max-width: 500px) 
    {
        .body { padding-bottom: 160px;}
        .navbar-brand img { width: 200px !important; padding-left: 10px;}
        #TeymaMenu { padding: 15px;}
        #TeymaMenu ul li a { font-size: 17px; padding: 6px 15px;}
        .nav-pills .nav-link { padding: 3px;}
        .nav-item img { width: 50px;}
        .space { height: 60px;}
        .redes { bottom: 15px;}
        .vd { width: 95%; height: 300px; text-align: left;}
        .cartem {display: none;}
            .cartem1 {width: 100%; height: 100%; min-height: 300px; position: relative; display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;}
}