.logo {
  display: block;
  text-decoration: none;
  font-size: 0.75rem;
  height: 10.875em;
  width: 18.4375em;
  margin: 0 auto;
  max-width: 100%;
  text-align: center;
  overflow: hidden; }
  .logo h1 {
    display: none; }
  .logo .the-magic-of {
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-size: 1.375em;
    line-height: 1;
    position: relative;
    left: 0.2em;
    margin-bottom: 1.27273em;
    color: #aaaaaa; }
  .logo .css-rainbow {
    max-width: 100%;
    white-space: nowrap; }
    .logo .css-rainbow .css-letter {
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: middle;
      *vertical-align: auto;
      zoom: 1;
      *display: inline; }
    .logo .css-rainbow .css-rainbow-c {
      position: relative;
      overflow: hidden;
      width: 3.825em;
      height: 7.75em;
      margin-right: 3.175em; }
      .logo .css-rainbow .css-rainbow-c .rainbow {
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        -ms-transform: rotateZ(90deg);
        -o-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
        -webkit-transform-origin: 50% 100%;
        -moz-transform-origin: 50% 100%;
        -ms-transform-origin: 50% 100%;
        -o-transform-origin: 50% 100%;
        transform-origin: 50% 100%;
        height: 3.875em;
        width: 7.75em;
        overflow: hidden;
        position: relative;
        -webkit-transform: rotateZ(-90deg);
        -moz-transform: rotateZ(-90deg);
        -ms-transform: rotateZ(-90deg);
        -o-transform: rotateZ(-90deg);
        transform: rotateZ(-90deg);
        position: absolute; }
        .logo .css-rainbow .css-rainbow-c .rainbow .bands {
          position: absolute;
          top: 0;
          left: 0;
          height: 3.875em;
          width: 7.75em;
          overflow: hidden; }
          .logo .css-rainbow .css-rainbow-c .rainbow .bands:before {
            -webkit-box-shadow: 0 0 0 0.5625em #b10dc9, 0 0 0 1.125em #0074d9, 0 0 0 1.6875em #2ecc40, 0 0 0 2.25em #ffdc00, 0 0 0 2.8125em #ff851b, 0 0 0 3.375em #ff4136;
            -moz-box-shadow: 0 0 0 0.5625em #b10dc9, 0 0 0 1.125em #0074d9, 0 0 0 1.6875em #2ecc40, 0 0 0 2.25em #ffdc00, 0 0 0 2.8125em #ff851b, 0 0 0 3.375em #ff4136;
            box-shadow: 0 0 0 0.5625em #b10dc9, 0 0 0 1.125em #0074d9, 0 0 0 1.6875em #2ecc40, 0 0 0 2.25em #ffdc00, 0 0 0 2.8125em #ff851b, 0 0 0 3.375em #ff4136;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border-radius: 50%;
            content: "";
            display: block;
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            bottom: -0.5em;
            height: 1em;
            width: 1em; }
    .logo .css-rainbow .css-rainbow-s {
      -webkit-transform: rotateZ(22.5deg);
      -moz-transform: rotateZ(22.5deg);
      -ms-transform: rotateZ(22.5deg);
      -o-transform: rotateZ(22.5deg);
      transform: rotateZ(22.5deg);
      width: 5em;
      height: 7.75em;
      position: relative;
      top: 0.15em; }
      .logo .css-rainbow .css-rainbow-s .rainbow {
        position: absolute; }
      .logo .css-rainbow .css-rainbow-s .top-half {
        position: absolute;
        overflow: hidden;
        width: 2.5em;
        height: 5em; }
        .logo .css-rainbow .css-rainbow-s .top-half .rainbow {
          -webkit-transform: rotateZ(90deg);
          -moz-transform: rotateZ(90deg);
          -ms-transform: rotateZ(90deg);
          -o-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
          -webkit-transform-origin: 50% 100%;
          -moz-transform-origin: 50% 100%;
          -ms-transform-origin: 50% 100%;
          -o-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
          height: 2.5em;
          width: 5em;
          overflow: hidden;
          position: relative;
          -webkit-transform: rotateZ(-90deg);
          -moz-transform: rotateZ(-90deg);
          -ms-transform: rotateZ(-90deg);
          -o-transform: rotateZ(-90deg);
          transform: rotateZ(-90deg); }
          .logo .css-rainbow .css-rainbow-s .top-half .rainbow .bands {
            position: absolute;
            top: 0;
            left: 0;
            height: 2.5em;
            width: 5em;
            overflow: hidden; }
            .logo .css-rainbow .css-rainbow-s .top-half .rainbow .bands:before {
              -webkit-box-shadow: 0 0 0 0.375em #b10dc9, 0 0 0 0.75em #0074d9, 0 0 0 1.125em #2ecc40, 0 0 0 1.5em #ffdc00, 0 0 0 1.875em #ff851b, 0 0 0 2.25em #ff4136;
              -moz-box-shadow: 0 0 0 0.375em #b10dc9, 0 0 0 0.75em #0074d9, 0 0 0 1.125em #2ecc40, 0 0 0 1.5em #ffdc00, 0 0 0 1.875em #ff851b, 0 0 0 2.25em #ff4136;
              box-shadow: 0 0 0 0.375em #b10dc9, 0 0 0 0.75em #0074d9, 0 0 0 1.125em #2ecc40, 0 0 0 1.5em #ffdc00, 0 0 0 1.875em #ff851b, 0 0 0 2.25em #ff4136;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              -ms-border-radius: 50%;
              -o-border-radius: 50%;
              border-radius: 50%;
              content: "";
              display: block;
              position: absolute;
              margin: auto;
              left: 0;
              right: 0;
              bottom: -0.25em;
              height: 0.5em;
              width: 0.5em; }
      .logo .css-rainbow .css-rainbow-s .bottom-half {
        position: absolute;
        overflow: hidden;
        width: 2.5em;
        height: 5em;
        top: 2.75em;
        left: 2.5em;
        top: 2.725em;
        left: 2.45em; }
        .logo .css-rainbow .css-rainbow-s .bottom-half .rainbow {
          -webkit-transform: rotateZ(90deg);
          -moz-transform: rotateZ(90deg);
          -ms-transform: rotateZ(90deg);
          -o-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
          -webkit-transform-origin: 50% 100%;
          -moz-transform-origin: 50% 100%;
          -ms-transform-origin: 50% 100%;
          -o-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
          height: 2.5em;
          width: 5em;
          overflow: hidden;
          position: relative;
          -webkit-transform: rotateZ(90deg);
          -moz-transform: rotateZ(90deg);
          -ms-transform: rotateZ(90deg);
          -o-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
          left: -2.5em; }
          .logo .css-rainbow .css-rainbow-s .bottom-half .rainbow .bands {
            position: absolute;
            top: 0;
            left: 0;
            height: 2.5em;
            width: 5em;
            overflow: hidden; }
            .logo .css-rainbow .css-rainbow-s .bottom-half .rainbow .bands:before {
              -webkit-box-shadow: 0 0 0 0.375em #b10dc9, 0 0 0 0.75em #0074d9, 0 0 0 1.125em #2ecc40, 0 0 0 1.5em #ffdc00, 0 0 0 1.875em #ff851b, 0 0 0 2.25em #ff4136;
              -moz-box-shadow: 0 0 0 0.375em #b10dc9, 0 0 0 0.75em #0074d9, 0 0 0 1.125em #2ecc40, 0 0 0 1.5em #ffdc00, 0 0 0 1.875em #ff851b, 0 0 0 2.25em #ff4136;
              box-shadow: 0 0 0 0.375em #b10dc9, 0 0 0 0.75em #0074d9, 0 0 0 1.125em #2ecc40, 0 0 0 1.5em #ffdc00, 0 0 0 1.875em #ff851b, 0 0 0 2.25em #ff4136;
              -webkit-box-shadow: 0 0 0 0.375em #ff4136, 0 0 0 0.75em #ff851b, 0 0 0 1.125em #ffdc00, 0 0 0 1.5em #2ecc40, 0 0 0 1.875em #0074d9, 0 0 0 2.25em #b10dc9;
              -moz-box-shadow: 0 0 0 0.375em #ff4136, 0 0 0 0.75em #ff851b, 0 0 0 1.125em #ffdc00, 0 0 0 1.5em #2ecc40, 0 0 0 1.875em #0074d9, 0 0 0 2.25em #b10dc9;
              box-shadow: 0 0 0 0.375em #ff4136, 0 0 0 0.75em #ff851b, 0 0 0 1.125em #ffdc00, 0 0 0 1.5em #2ecc40, 0 0 0 1.875em #0074d9, 0 0 0 2.25em #b10dc9;
              -webkit-border-radius: 50%;
              -moz-border-radius: 50%;
              -ms-border-radius: 50%;
              -o-border-radius: 50%;
              border-radius: 50%;
              content: "";
              display: block;
              position: absolute;
              margin: auto;
              left: 0;
              right: 0;
              bottom: -0.25em;
              height: 0.5em;
              width: 0.5em; }
      .logo .css-rainbow .css-rainbow-s.css-rainbow-s-1 {
        margin-right: 1.875em; }
      .logo .css-rainbow .css-rainbow-s.css-rainbow-s-2 {
        margin-right: -0.4375em; }
  @media (min-width: 48em) {
    .logo {
      font-size: 1rem; } }