/* BASE */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap");
/* colours */
/* ITEM SPECIFIC COLORS */
/* ANIMATIONS */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes fadeOut {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

/* COMPONENTS */
/* BREADCRUMBS */
.c-breadcrumbs {
  display: flex;
  align-items: center;
  height: 96px;
  height: 6rem;
  position: relative;
  z-index: 1; }
  .c-breadcrumbs--always-show-first .c-breadcrumbs__item:first-child {
    display: block; }
  @media only screen and (max-width: 1026px) {
    .c-breadcrumbs {
      height: 4rem;
      max-width: 100%;
      border-bottom: 0.1rem solid #F2F2F2;
      margin: 0 0 2rem 0; } }
  .c-breadcrumbs__outer {
    width: 1920px;
    width: 120rem;
    max-width: calc(100% - 4rem);
    margin: 0 auto; }
    @media only screen and (max-width: 1366px) {
      .c-breadcrumbs__outer {
        width: 110rem; } }
    .c-breadcrumbs__outer--dependent {
      margin: 0;
      max-width: 100%; }
      @media only screen and (max-width: 1026px) {
        .c-breadcrumbs__outer--dependent {
          padding: 0 2rem; } }
  .c-breadcrumbs__item {
    background: url("../images/chevron_right.png") no-repeat 100% 50%;
    color: #272324;
    font-size: 19.2px;
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0 28.8px 0 0;
    padding: 0 1.8rem 0 0;
    margin: 0 22.4px 0 0;
    margin: 0 1.4rem 0 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; }
    .c-breadcrumbs__item:last-child {
      background: transparent;
      padding: 0;
      margin: 0; }
    @media only screen and (max-width: 769px) {
      .c-breadcrumbs__item:first-child {
        display: none; } }
  .c-breadcrumbs__link {
    color: #A1A8B7;
    text-decoration: underline;
    font-weight: normal; }
    .c-breadcrumbs__link:hover {
      text-decoration: none; }

/* Materials menu */
.c-materials-menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -16px 32px 0;
  margin: 0 -1rem 2rem 0; }
  .c-materials-menu__item {
    background: #CFD3DB;
    display: flex;
    border-radius: 50%;
    width: 48px;
    width: 3rem;
    height: 48px;
    height: 3rem;
    align-items: center;
    justify-content: center;
    margin: 0 16px 16px 0;
    margin: 0 1rem 1rem 0;
    color: #fff;
    text-decoration: none;
    font-size: 25.6px;
    font-size: 1.6rem;
    text-transform: uppercase; }
    .c-materials-menu__item--has-content {
      background: #405C87; }
    .c-materials-menu__item--active {
      background: #FF5940; }

/* Materials list */
.c-materials-list {
  display: flex;
  flex-wrap: wrap;
  margin-right: -32px;
  margin-right: -2rem; }
  .c-materials-list__item {
    flex-basis: 0%;
    max-width: 0%;
    display: block;
    max-height: 0;
    opacity: 0;
    padding: 0;
    transition: 0.2s all;
    overflow: hidden; }
    .c-materials-list__item--visible {
      flex-basis: calc(33% - 2rem);
      max-width: calc(33% - 2rem);
      max-height: 1120px;
      max-height: 70rem;
      opacity: 1;
      padding: 32px;
      padding: 2rem;
      margin: 0 32px 32px 0;
      margin: 0 2rem 2rem 0;
      border: 1.6px solid #CFD3DB;
      border: 0.1rem solid #CFD3DB; }
      @media only screen and (max-width: 769px) {
        .c-materials-list__item--visible {
          flex-basis: calc(50% - 2rem);
          max-width: calc(50% - 2rem); } }
      @media only screen and (max-width: 501px) {
        .c-materials-list__item--visible {
          flex-basis: 100%;
          max-width: 100%; } }
  .c-materials-list__item-image-container {
    display: block;
    flex-basis: 96px;
    flex-basis: 6rem;
    text-align: center;
    margin: 0 0 32px 0;
    margin: 0 0 2rem 0; }
  .c-materials-list__item-title {
    font-size: 22.4px;
    font-size: 1.4rem;
    margin: 0 0 16px 0;
    margin: 0 0 1rem 0; }
  .c-materials-list__item-name {
    font-size: 32px;
    font-size: 2rem;
    margin: 0 0 32px 0;
    margin: 0 0 2rem 0; }

/* UTILITIES */
/* UTILITIES */
/* SPECIAL UTILITY TO HIDE SCROLLBAR ON BODY...USE ONLY ON BODY */
.u-no-scroll {
  overflow: hidden;
  height: 100vh; }

/* */
body {
  /* PADDINGS */
  /* MARGINS */ }
  body .u-center {
    text-align: center; }
  body .u-block {
    display: block; }
  body .u-no-wrap {
    white-space: nowrap; }
  body .u-pt--S {
    padding-top: 32px;
    padding-top: 2rem; }
  body .u-pt--M {
    padding-top: 64px;
    padding-top: 4rem; }
  body .u-pt--L {
    padding-top: 96px;
    padding-top: 6rem; }
  body .u-pt--XL {
    padding-top: 128px;
    padding-top: 8rem; }
  body .u-pb--S {
    padding-bottom: 32px;
    padding-bottom: 2rem; }
  body .u-pb--M {
    padding-bottom: 64px;
    padding-bottom: 4rem; }
  body .u-pb--L {
    padding-bottom: 96px;
    padding-bottom: 6rem; }
  body .u-pb--XL {
    padding-bottom: 128px;
    padding-bottom: 8rem; }
  body .u-mb--S {
    margin-bottom: 32px;
    margin-bottom: 2rem; }
  body .u-mb--M {
    margin-bottom: 64px;
    margin-bottom: 4rem; }
  body .u-mb--L {
    margin-bottom: 96px;
    margin-bottom: 6rem; }
  body .u-mb--XL {
    margin-bottom: 128px;
    margin-bottom: 8rem; }
  body .u-ml--S {
    margin-left: 32px;
    margin-left: 2rem; }
  body .u-ml--M {
    margin-left: 64px;
    margin-left: 4rem; }
  body .u-ml--L {
    margin-left: 96px;
    margin-left: 6rem; }
  body .u-ml--XL {
    margin-left: 128px;
    margin-left: 8rem; }
  body .u-mr--S {
    margin-right: 32px;
    margin-right: 2rem; }
  body .u-mr--M {
    margin-right: 64px;
    margin-right: 4rem; }
  body .u-mr--L {
    margin-right: 96px;
    margin-right: 6rem; }
  body .u-mr--XL {
    margin-right: 128px;
    margin-right: 8rem; }

/* CUSTOM STYLES */
.c-materials {
  width: 1920px;
  width: 120rem;
  max-width: calc(100% - 4rem);
  margin: 0 auto; }
  @media only screen and (max-width: 1366px) {
    .c-materials {
      width: 110rem; } }
  .c-materials__title {
    margin: 0 0 32px 0;
    margin: 0 0 2rem 0; }
  .c-materials__sub-title {
    font-size: 35.2px;
    font-size: 2.2rem;
    margin: 0 0 16px 0;
    margin: 0 0 1rem 0;
    padding: 0; }
  .c-materials__text {
    margin: 0 0 32px 0;
    margin: 0 0 2rem 0; }

/*# sourceMappingURL=materials.css.map */