section {
  position: relative;
}

.transition-fast {
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

.transition {
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.transition-slow {
  -webkit-transition: all 1.5s ease 0s;
  -moz-transition: all 1.5s ease 0s;
  -o-transition: all 1.5s ease 0s;
  transition: all 1.5s ease 0s;
}

.bg-primary-tertiary {
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--tertiary) 100%);
}

.fadeStart {
  animation: fadeStart normal 3s;
  -moz-animation: fadeStart normal 3s;
  width: 0;
  height: 0;
  opacity: 0;
}

.fadeStart img {
  animation: fadeIn normal 2s;
  -moz-animation: fadeIn normal 2s;
}

.font-sm {
  font-size: .8rem;
}

@keyframes fadeStart {
  0% {
    opacity: 1;
    width: 100vw;
    height: 100vh;
  }

  60% {
    opacity: 1;
  }

  99% {
    opacity: 0;
    width: 100vw;
    height: 100vh;
  }

  100% {
    opacity: 0;
    width: 0;
    height: 0;
  }
}

/* Menu Efects */
.hamburger {
  height: 3rem;
  width: 3rem;
  background-color: transparent;
  border: none;
  padding: .25rem;
}

/* .hamburger:hover {
  background-color: #f8f9fa;
} */

.hamburger:hover .hamburger-inner,
.hamburger:hover .hamburger-inner::before,
.hamburger:hover .hamburger-inner::after {
  background-color: #fff;
}

.hamburger-container {
  width: 1.5rem;
  height: .95rem;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 0.0625rem;
  margin: top, -0.0625rem;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 1.5625rem;
  height: 0.125rem;
  background-color: #fff;
  position: absolute;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: 0.45rem;
  -webkit-transition: all .3s ease 0s;
  -moz-transition: all .3s ease 0s;
  -o-transition: all .3s ease 0s;
  transition: all .3s ease 0s;
}

.hamburger-inner::after {
  top: 0.90rem;
}

.hamburger[aria-expanded="true"] .hamburger-inner,
.hamburger .is-active .hamburger-inner {
  -webkit-transform: translate3d(0, 0.45rem, 0) rotate(45deg);
  -moz-transform: translate3d(0, 0.45rem, 0) rotate(45deg);
  -ms-transform: translate3d(0, 0.45rem, 0) rotate(45deg);
  transform: translate3d(0, 0.45rem, 0) rotate(45deg);
}

.hamburger[aria-expanded="true"] .hamburger-inner::before,
.hamburger .is-active .hamburger-inner::before {
  -webkit-transform: rotate(-45deg) translate3d(-0.22321rem, -0.25rem, 0);
  transform: rotate(-45deg) translate3d(-0.22321rem, -0.25rem, 0);
  opacity: 0;
}

.hamburger[aria-expanded="true"] .hamburger-inner::after,
.hamburger .is-active .hamburger-inner::after {
  -webkit-transform: translate3d(0, -0.9rem, 0) rotate(-90deg);
  transform: translate3d(0, -0.9rem, 0) rotate(-90deg);
}

/* Menu Efects */

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.z-1 {
  z-index: 1025;
}

.z-2 {
  z-index: 1035;
}

.z-3 {
  z-index: 1045;
}

.z-4 {
  z-index: 1055;
}

.z-5 {
  z-index: 1065;
}

.fadeStart {
  animation: fadeStart normal 3s;
  -moz-animation: fadeStart normal 3s;
  width: 0;
  height: 0;
  opacity: 0;
}

.fadeStart img {
  animation: fadeIn normal 2s;
  -moz-animation: fadeIn normal 2s;
}

@keyframes fadeStart {
  0% {
      opacity: 1;
      width: 100vw;
      height: 100vh;
  }

  50% {
      opacity: 1;
  }

  99% {
      width: 100vw;
      height: 100vh;
  }

  100% {
      opacity: 0;
      width: 0;
      height: 0;
  }
}

.dev-wrapper {
  max-width: 300px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: -9rem !important;
}

/* Scroll top */
.scroll-top {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  color: #fff !important;
  background: rgba(100, 120, 100, 0.4);
  border-radius: .35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
}

.scroll-top:hover {
  background-color: var(--dark);
}

/* Scroll top */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.pointer-event {
  cursor: pointer;
}

/* Float labels */
.form-label-group {
  position: relative;
}

.form-label-group input,
.form-label-group label {
  height: 2.5rem;
  padding: .5rem;
}

.form-label-group label {
  position: absolute;
  top: 0;
  left: 1px;
  display: block;
  width: 100%;
  margin-bottom: 0;
  line-height: 1.5;
  color: #495057;
  pointer-events: none;
  cursor: text;
  transition: all .1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder {
  color: transparent;
}

.form-label-group input::-moz-placeholder {
  color: transparent;
}

.form-label-group input:-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::-ms-input-placeholder {
  color: transparent;
}

.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group input:not(:-moz-placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(:-ms-input-placeholder) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: .25rem;
}

.form-label-group input:not(:-moz-placeholder-shown)~label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

.form-label-group input:not(:-ms-input-placeholder)~label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

.form-label-group input:not(:placeholder-shown)~label {
  padding-top: .25rem;
  padding-bottom: .25rem;
  font-size: 12px;
  color: #777;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .form-label-group label {
    position: static;
  }

  .form-label-group input::-ms-input-placeholder {
    color: #777;
  }
}

/* Float labels */

/* Navbar */
#navbar nav {
  height: 4.5rem;
  z-index: 1033;
}

#navbar-side {
  position: absolute;
  top: 4.5rem;
  height: calc(100vh - 4.5rem);
  left: -14rem;
  width: 14rem;
  transition: left .2s ease-in-out;
}

#navbar[aria-expanded="true"] #navbar-side {
  left: 0;
}

#navbar-close {
  position: absolute;
  top: 0;
  height: 0;
  left: 0;
  width: 0;
}

#navbar[aria-expanded="true"] #navbar-close {
  top: 4.5rem;
  height: 100vh;
  left: 14rem;
  width: 100%;
}

.sidenav-togle {
  overflow: hidden;
}

.sidenav-togle::before {
  content: "";
  display: block;
  position: fixed;
  top: 4.5rem;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 1033;
  opacity: 0.5;
}

.sidenav-list {
  flex-grow: 1;
  overflow-y: scroll;
  height: calc(100vh - 4.5rem);
}

.sidenav-list-item {
  text-transform: uppercase;
  font-size: .8rem;
  font-weight: 700 !important;
  color: var(--gray);
  padding: 1.5rem 0 .75rem 0;
}

.sidenav-list-link {
  font-size: 1rem;
  padding: .5rem .5rem .5rem 1rem;
  color: #343a40;
  border-left: solid 1px var(--gray);
  text-decoration: none !important;
}

.sidenav-list-link:hover,
.sidenav-list-link:hover i {
  color: var(--tertiary) !important;
}

.sidenav-list-link.active {
  color: var(--primary);
}

.sidenav-list-link i {
  width: 20%;
  color: var(--gray) !important;
}

.sidenav-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: 4.5rem;
  transition: left .2s ease-in-out;
  background-color: #ced4da;
}

/* Navbar */

/* Footer */
#footer input {
  color: #ffffff;
  background-color: #495057;
  border: none;
  margin-right: .25rem;
}

#footer input::placeholder {
  color: rgba(255, 255, 255, .6);
}

#footer a {
  color: rgba(255, 255, 255, .6);
}

#footer a:hover {
  color: #ffffff;
}

.footer-warning {
  color: rgba(255, 255, 255, .4);
  font-size: .9rem;
}

/* Timeline */
.activity-item {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  position: relative;
  white-space: nowrap;
  padding-bottom: 1rem;
}

.activity-item:not(:last-child) .activity-item-time:before {
  content: "";
  position: absolute;
  border-left: solid .2rem var(--light);
  height: 1.55rem;
  top: 1rem;
  left: 3.275rem;
}

.activity-item-time {
  width: 2.5rem;
  min-width: 2.5rem;
  color: var(--gray);
  text-align: right;
}

.activity-item-indicator {
  height: .6rem;
  width: .6rem;
  min-width: .6rem;
  border-radius: 50%;
  margin: 0 .6rem;
}

.activity-item-content {
  color: var(--dark);
}

.activity-item-content em {
  color: var(--primary);
}

.mh-100r {
  max-height: 100rem !important;
}

/* Gridjs */
.gridjs-search,
.gridjs-search input {
  width: 100%;
}

table tr>th:nth-child(1),
table tr>th:nth-child(2),
table tr>th:nth-child(3) {
  color: #f9fafb;
  padding: 0;
}

table tr>th:nth-child(2) {
  border-left: 2px solid #f9fafb;
  border-right: 2px solid #f9fafb;
}

table tr>td:nth-child(1),
table tr>td:nth-child(2),
table tr>td:nth-child(3) {
  padding: 0;
  text-align: center;
}

tr:nth-child(even) td {
  background-color: #f5f5f5;
}

/* Home principal */
.home-principal {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.home-principal::before {
  background: rgba(0, 0, 0, .85);
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

/* Cart list */
.cart-items {
  padding: 0;
}

/* Dropdown menu cart */
.dropdown .cart-items {
  left: auto;
  right: 0;
  min-width: 20rem;
  width: 20rem;
  max-height: 85vh;
  overflow-y: auto;
}

@media (max-width: 350px) {
  .dropdown .cart-items {
    min-width: 285px;
    width: 285px;
  }
}

/* Circles */
.circle {
  display: flex;
  align-items: center;
}

.circle img {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50rem;
  margin-left: -1.7rem;
  margin-right: .5rem;
}

.circle::before {
  content: '';
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50rem;
  margin-right: .5rem;
  border: 1px solid var(--secondary);
}

.tipo-Branco::before {
  background-color: #e0d291;
}

.tipo-Tinto::before {
  background-color: #75194f;
}

.tipo-Espumante::before {
  background-color: #e0d291;
}

.tipo-Laranja::before {
  background-color: #ffa33b;
}

.tipo-Clarete::before {
  background-color: #e32727;
}

.tipo-Rosé::before {
  background-color: #f08c6f;
}

.tipo-KIT::before {
  background-color: #cbcbcb;
}

.est-Andamento::before {
  background-color: #0065f9;
}

.est-Entregue::before {
  background-color: #3fb57a;
}

.est-Cancelado::before {
  background-color: #cbcbcb;
}

/* Modal inuts */
#modal form .input-group-prepend label {
  min-width: 6rem;
}

#modal form textarea {
  min-height: 6rem;
}

/* Datasheet */
.datasheet-item {
  display: flex;
  align-items: flex-start;
}

.datasheet-item i {
  font-size: 1.5rem;
  margin-right: .75rem;
}

.datasheet-item h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0;
}

.datasheet-item h4 {
  font-size: 1rem;
  margin-bottom: 0;
}

/* Home products */
#carousel-images .carousel-image {
  width: 100%;
  height: 60vh;
}

#carousel-images .carousel-image div {
  height: 100%;
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
}

#carousel-images .carousel-image img {
  max-width: 100%;
  max-height: 100%;
}

.product-old-price {
  margin-bottom: 0;
  color: var(--secondary)
}

.product-price {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary);
  margin-top: -.5rem;
  margin-bottom: 1.5rem;
}

.product-name {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0;
}

#product-fav {
  font-size: .8rem;
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1500px) {
  #carousel-images img {
    max-height: 70vh;
  }

  .product-disc {
    font-size: .9rem;
  }

  .product-old-price {
    font-size: 1.2rem
  }

  .product-price {
    font-size: 3.5rem;
    margin-bottom: 3rem;
  }

  .product-name {
    font-size: 1.8rem;
    margin-bottom: 0;
  }

  .product-nav {
    font-size: 1.1rem;
  }

  #product-buy {
    font-size: 1.2rem;
  }

  #product-fav {
    font-size: .9rem;
  }

}

.news-product-old-price {
  font-size: .8rem;
  margin-bottom: 0;
  color: var(--secondary);
  margin-top: .1rem;
}

.news-product-price {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000000;
  margin-bottom: .1rem;
  margin-left: .25rem;
}

.news-product-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 0.5rem;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.2;
}

.news-product-disc {
  position: absolute;
  font-size: .8rem;
  top: 1rem;
  left: 0;
  border-radius: 0 .25rem .25rem 0;
}

.news-product-grape {
  text-align: center;
  color: var(--secondary);
  font-style: italic;
  font-size: .8rem;
  margin-bottom: 0;
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
  #filters {
    position: fixed;
    top: 110vh;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 1.5rem;
    z-index: 1025;
    transition: top ease .5s;
  }
}

#filters {
  min-width: 15rem;
}

#filters .form-check {
  margin-top: .1rem;
  margin-bottom: .1rem;
}

#filters.open {
  top: 0;
}

#carousel-images .carousel-image img{
  transition: transform .4s;
}

#carousel-images .carousel-image img:hover{
  transform: translate(0px, -125px) scale(2);
}