/* SASS VAR */
.bg-tv {
  background-color: #5A90B2 !important;
}

.bg-page {
  background-image: linear-gradient(#302838, rgba(48, 40, 56, 0) 100%);
  background-repeat: no-repeat;
  background-size: 100% 200vh;
}

.bg-light-degra {
  background-color: transparent !important;
  background-image: linear-gradient(rgba(209, 200, 219, 0.8), rgba(209, 200, 219, 0));
}

.bg-white-degra {
  background-color: transparent !important;
  background-image: linear-gradient(#fff, rgba(255, 255, 255, 0.1333333333));
}

.navbar .nav-item:hover {
  opacity: 0.8;
}

#rubrique {
  -ms-overflow-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
}
#rubrique::-webkit-scrollbar {
  display: none;
}

.goTop {
  margin-top: -2rem;
}

.circle {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hauteurFixe {
  height: 200px;
  overflow-y: hidden;
  mask-image: linear-gradient(#000 30%, rgba(0, 0, 0, 0.3333333333) 60%, transparent 95%);
}

.displayCardHover {
  transition: all ease-in-out 0.5s;
  opacity: 0;
}
.card:hover .displayCardHover {
  opacity: 1;
}

.mt-n {
  margin-top: -100px;
}

#miner {
  width: 100%;
  position: relative;
  transform-origin: top left;
  z-index: 10;
}
#miner .info {
  display: none;
}
#miner.fixed-top {
  position: fixed;
  transform: scale(0.3);
  zoom: 2;
}
#miner.fixed-top .effet-ring {
  display: block;
}
#miner.fixed-top .info {
  display: flex;
}

#reduceBtn .effet-ring {
  display: block;
  border-radius: 50px !important;
}

.effet-ring {
  position: absolute;
  display: none;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid rgb(237, 28, 36);
  border-radius: 22px;
  animation: effetRing 2s infinite;
  opacity: 0;
  z-index: -1 !important;
}

@keyframes effetRing {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.02);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.05);
    opacity: 0;
  }
}
/* RESPONSIVE */
@media (min-width: 768px) and (max-width: 991px) {
  .logo img {
    width: 300px;
  }
  .circle i {
    font-size: 1.2em !important;
  }
}
@media (min-width: 768px) {
  .rounded-custom-5 {
    border-radius: 2.5rem;
  }
}
@media (max-width: 767px) {
  .circle i {
    font-size: 1em !important;
  }
  .logo {
    flex-basis: 100%;
    text-align: center;
  }
  .logo img {
    width: 250px;
  }
  .rounded-custom-5 {
    border-radius: 1rem;
  }
  #miner.fixed-top {
    width: 500px;
  }
  .fs-8 {
    font-size: 0.6rem !important;
  }
  .fs-6 {
    font-size: 0.75rem !important;
  }
}
@media (max-width: 575px) {
  .logo img {
    width: 200px;
  }
  #post .card-img-overlay {
    margin-top: -100px;
    position: relative !important;
  }
  .card-title, .fs-3 {
    font-size: 1rem !important;
  }
  .mt-n {
    margin-top: -50px;
  }
}