:root {
  --brand-color-light: #ffffff;
  --brand-color-dark: #000000;

  --brand-bg-image: url('assets/brands/utopix/background.jpg') center;

  --brand-bg-color: transparent;
  --brand-bg-size: cover;

  --brand-header-bg-image: var(--brand-bg-image);

  --brand-logo: url('assets/brands/utopix/logo-utopix.svg');
  --brand-logo-size: auto 100px;

  --brand-logo-small: url('assets/brands/utopix/logo-utopix-small.svg');
  --brand-logo-small-width: 25px;

  --brand-placeholder: url('assets/brands/utopix/placeholder-1.png');

  --color-red: #d0021b;
  --color-green: #27c979;
  --color-yellow: #f8da1c;

  --color-darker: #383838;
  --color-dark: #595959;
  --color-gray: #808080;
  --color-light: #aeaeae;
  --color-lighter: #e0e0e0;

  --main-background: #f2f2f2;

  --color-dark-with-opacity: rgba(0, 0, 0, 0.8);

  --header-main-background: var(--color-dark-with-opacity);

  --font-default: 'GothamHTF-Book';
  --font-light: 'GothamHTF-Light';
  --font-medium: 'GothamHTF-Medium';

  --transition-150: 150ms ease-in-out;
  --transition: 300ms ease-in-out;

  --header-height-base: 62px;
  --header-height-extended: 122px;
}