/* .offcanvas *******************************/

.offcanvas {
	background-image: url('../../images/moblify/bgs/modals/menu.webp?2');
	background-position: center;
	background-size: cover;
  padding-top: 60px;

  .offcanvas-header {
    align-items: flex-start;

    img {
      height: 70px;
      width: auto;
    }
  }

  .offcanvas-body {

    ul {

      li {
        font-size: 1.2rem;
        font-weight: 900;
        padding: 0;

        a,
        .btn-link {
          color: #000;
          font-weight: 900;
        }
      }
    }
  }

  .meta {
    background-color: var(--color-brand-primary);
    border-radius: 5px;
    color: rgba(255,255,255,0.8);
    padding: 20px;

    a {
      color: #fff;
    }

    strong {
      font-size: 1.2rem;
    }
  }

  .channels {
    align-items: center;
    display: flex;
    gap: 20px;

    a {
      align-items: center;
      background-color: var(--color-background);
      display: flex;
      height: 60px;
      justify-content: center;
      width: 60px;

      img {
        height: 30px;
        width: auto;
      }
    }
  }
}

/* .panel *******************************/

.panel {
	background-color: rgba(0, 0, 0, 0.76);
	border-radius: 10px;
	font-size: 1.2rem;
	margin-bottom: 40px;
	padding: 10px 15px;

  .icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;

    img {
      height: 80px;
      width: auto;
    }
  }

  .callout {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: var(--color-brand-primary);
    text-underline-offset: 5px;
    text-decoration-thickness: 5px;
  }

	.badge {
	  align-items: center;
		border-radius: 20px;
		color: var(--color-brand-pop);
	 	display: flex;
		font-family: var(--font-default);
		font-size: 1rem;
		font-weight: 600;
	 	gap: 5px;
    justify-content: center;
		text-shadow: 2px 2px 4px #000;
		text-transform: uppercase;

		img {
	 	 	height: 30px;
 			width: auto;
	 	}
	}
}

/* .progress *******************************/

.progress {
	background-color: #000; 
	border: 1px solid rgba(255, 255, 255, 0.5);
	height: 25px;
		
  .progress-bar {
	 	background-color: rgba(255, 255, 255, 0.8);
  }
}

/* .font-* *******************************/

.font-brand {
	font-family: var(--font-brand);
}

.font-default {
  font-family: var(--font-default);
}

/* @media queries *******************************/
@media (min-width: 430px) {

  .panel {
    padding: 20px;
  }

}