

/* @font-face {
  font-family: 'Oswald', sans-serif;
  src: url(Oswald.ttf);
} */
html {
  scroll-behavior: smooth;
}

:root {
    --var-celeste-alto: #55D3EE;
    --var-celeste-bajo: #66D6EE;
    --var-naranja: #F63802;
    --var-rojo: #F63802;
    --var-negro: #565656;

}

.slider {
  position: relative;
}
.slider .owl-item.active.center .slider-card {
  transform: scale(1.15);
  opacity: 1;
  background: white; /* fallback for old browsers */
  color: #fff;
}
.slider .owl-item.active.center .text-wid-pro h3{}
.slider-card {
  padding: 25px 15px;
  margin: 50px 15px 90px 15px;
  border-radius: 5px;
  box-shadow: 0 10px 45px -20px rgba(0, 0, 0, 0.236);
  transform: scale(0.9);
  opacity: 0.5;
  transition: all 0.3s;
}

.owl-nav .owl-prev {
  position: absolute;
  top: calc(50% - 25px);
  left: -50px;
  opacity: 1;
  font-size: 30px !important;
  z-index: 1;
  transition:.5s;
}
.owl-nav .owl-next {
  position: absolute;
  top: calc(50% - 25px);
  right: -50px;
  opacity: 1;
  font-size: 30px !important;
  z-index: 1;
  transition:.5s;
}
.owl-dots {
  text-align: center;
}
.owl-dots .owl-dot {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #ccc !important;
  margin-left: 3px;
  margin-right: 3px;
  outline: none;
}
.owl-dots .owl-dot.active {
  background: var(--var-naranja) !important;
}

.huelas-controls{
  width: 50px;
}

.owl-nav .owl-prev:hover{
  width: 50px;
  transform: translateX(-5px);
  transition:.5s
}
.owl-nav .owl-next:hover{
  width: 50px;
  transform: translateX(5px);
  transition:.5s
}
@media (min-width: 768px) and (max-width: 1023px) {
  .slider .owl-item.active.center .slider-card {
  display: flex;
  align-items: center;
  justify-content: center;
  }
.slider-card {
 box-shadow: none;
}
.slider .owl-item.active.center .wid-pro{
  border: 2px solid var(--var-naranja);
}
.owl-dots{
  position: relative;
  top: -15px;
}
.owl-stage-outer{
  
}

}

@media (min-width: 320px) and (max-width: 767px) {
  .slider .owl-item.active.center .slider-card {
    display: flex;
    align-items: center;
    justify-content: center;
    }
  .slider-card {
   box-shadow: none;
  }
  .slider .owl-item.active.center .wid-pro{
  }
  .owl-dots{
    position: relative;
    top: -15px;
  }
  .huelas-controls{
    width: 25px;
  }
  .owl-nav .owl-prev {

    left: -10px;
    bottom: -10px;
    display: none;

  }
  .owl-nav .owl-next {

    right: -10px;
    bottom: -10px;
    display: none;

  }
  .owl-dots{
    position: relative;
    top: -55px;
  }
  .wid-pro{
    padding: 0;
  }
  
}