/* =========================================================
   Guide Hero Icons
========================================================= */

.guide-hero{
  position: relative;
  overflow: hidden;
}

.guide-hero .guide-wide-wrap,
.guide-hero .container,
.guide-hero .row,
.guide-hero [class*="col-"]{
  position: relative;
  z-index: 2;
}

.guide-hero-icon{
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 140px;
  line-height: 1;
  color: #ffc107;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}

.guide-hero-icon i{
  display: block;
  line-height: 1;
}

/* Tablet */
@media (max-width: 991.98px){
  .guide-hero-icon{
    left: 3%;
    font-size: 100px;
    opacity: 0.12;
  }
}

/* Mobile */
@media (max-width: 767.98px){
  .guide-hero{
    padding-top: 3rem;
    padding-bottom: 2.75rem;
  }

  .guide-hero-icon{
    left: auto;
    right: 14px;
    top: 14px;
    transform: none;
    font-size: 42px;
    opacity: 0.22;
  }
}

/* Very small phones */
@media (max-width: 479.98px){
  .guide-hero-icon{
    right: 12px;
    top: 12px;
    font-size: 34px;
    opacity: 0.18;
  }
}