/*===================================================================================*/
/*  Global | Variables | Partial
/*===================================================================================*/
.brand {
  background: #00aeef;
}
@media screen and (min-width: 0) and (max-width: 63.9375em) {
  .brand {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 2rem;
  }
}
@media screen and (min-width: 64em) {
  .brand {
    padding: 2rem;
    position: relative;
    width: 20rem;
    height: 10rem;
    overflow: hidden;
    z-index: 1;
    -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  }
}
@media screen and (min-width: 64em) {
  .brand img {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: calc(100% - 4rem);
    -o-object-fit: contain;
    object-fit: contain;
    height: 100%;
    max-height: 6rem;
    -webkit-transition: width 0.3s ease-in-out;
    transition: width 0.3s ease-in-out;
  }
}
.brand.is-minimal {
  height: 6rem;
  width: calc(100% - 6rem);
}
@media screen and (min-width: 64em) {
  .brand.is-minimal {
    width: 28rem;
  }
  .brand.is-minimal img {
    width: calc(100% - 8rem);
  }
}
@media screen and (min-width: 90.0625em) {
  .brand.is-minimal {
    width: 34.8rem;
  }
}

.the-logo {
  max-width: 20rem;
}
.the-logo.inline {
  max-width: 28rem;
  width: 100%;
}
/*# sourceMappingURL=the-logo.css.map */