@import 'WhiteLabel/wl-colors.css';
@import 'WhiteLabel/wl-fonts.css';
@import 'WhiteLabel/wl-spacing.css';
@import 'WhiteLabel/wl-borders.css';

* {
   font-family: var(--font-family-primary)
}

html {
   overflow-y: scroll;
}

body,
html,
main {
   background-color: var(--color-background);
}

.pageTitle {
   font-weight: var(--font-weight-bold);
}

.ribbon {
   box-shadow: 0 0 7px rgba(26, 25, 25, 1);
   left: -6em;
   overflow: hidden;
   position: absolute;
   top: var(--spacing-xs);
   transform: rotate(-40deg);
   white-space: nowrap;
   width: 16em;
   z-index: 9999;
   pointer-events: none;
}

.ribbon a {
   color: var(--color-black);
   display: block;
   font-size: var(--font-size-base-lg);
   font-weight: var(--font-weight-bold);
   padding: 4px 50px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 0 5px 0 0 7px rgba(26, 25, 2);
   pointer-events: none;
}

.demo {
   background-color: rgba(121, 167, 10, 0.25);
}

.capital-letter::first-letter {
   text-transform: uppercase;
}



/*----------Media queries----------*/

@media (max-width: 820px) {
   .hide-on-mobile {
      display: none !important;
   }
}

@media (max-width: 1280px) {
   .hide-on-tablet {
      display: none !important;
   }
}

@media (min-width: 1280px) {
   .hide-on-desktop {
      display: none !important;
   }
}