/*
 * Copyright (c) 2023 Paxa Services. Todos los derechos reservados.
 * Este código es propiedad de Paxa Services y está protegido
 * por las leyes de derechos de autor. Queda prohibida la reproducción,
 * distribución, modificación o uso no autorizado de este código,
 * ya sea en su totalidad o en parte, sin el consentimiento expreso
 * por escrito de Paxa Services.
 * contacto@paxa.com.co
 */

.carousel-wrap {
  margin: 5px auto;
  padding: 0 0%;
  width: 85%;
  height: 161px;
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

.owl-stage {
  transition: all 0.5s ease 0s !important;
}

/* fix blank or flashing items on carousel */
.owl-carousel .item {
  position: relative;
  z-index: 100;
}

/* #petroleo {
  display: flex;
  justify-content: center;
  left: 50%;
  transform: translateX(-50%); 
} */

/* end fix */
.owl-nav > div {
  margin-top: -26px;
  position: absolute;
  top: 50%;
  color: #cdcbcd;
}

.owl-nav i {
  font-size: 52px;
}

.owl-nav .owl-prev {
  left: -30px;
}

.owl-nav .owl-next {
  right: -30px;
}

.flip-card {
  background-color: transparent;
  width: 100%;
  height: 160px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  color: white;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* .flip-card-back{
  margin-top: 10px;
  margin-bottom: 10px;
} */

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #bbb;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

.symbol-name {
  /* margin-left: 10% !important; */
  text-align: center !important;
  /* margin-bottom: 0px !important; */
  font-size: large;
}

.price {
  font-size: 32px !important;
  margin-top: 18px !important;
  margin-bottom: 0px !important;
}

.info {
  display: flex;
  justify-content: space-between;
}

/* #ind {
  display: flex;
  margin-right: 20px;
  flex-direction: column;
  align-items: flex-start;
} */

.hyl {
  display: flex;
  margin-left: 0px;
  flex-direction: column;
  align-items: baseline;
}

.pyd {
  display: flex;
  margin-right: 20px;
  flex-direction: column;
  align-items: flex-end;
}

.high-price {
  flex-basis: 30.5%;
  margin-bottom: 0px !important;
  text-align: left;
}

.percent {
  flex-basis: 30.5%;
  margin-bottom: 0px !important;
}

.dif {
  flex-basis: 30%;
  margin-top: 0px !important;
  text-align: left !important;
}

.low-price {
  margin-top: 0px !important;
  text-align: left;
  margin-left: 22px;
}

#section-tittle-ie {
  color: white;
  background-color: #002b4f;
  font-size: 24px;
  text-align: center;
  padding: 3px;
}

@media (max-width: 767px) {
  /* 
    .scene:first-child {
      display: inline-block;
      width: 250px;
      height: 143px;
      border: 1px solid #CCC;
      margin: 4px 0px 4px -22px;
      perspective: 600px;
    } */
  /* .flip-card {
      background-color: transparent;
      width: 100%;
      height: 160px;
      border: 1px solid #f1f1f1;
      perspective: 1000px; /* Remove this if you don't want the 3D effect */
  /* color: white; */
  /* } */

  .owl-dots,
  .owl-nav {
    display: block !important;
  }

  .flip-card {
    background-color: transparent;
    width: 100%;
    height: 160px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    color: white;
  }

}