@font-face {
  font-family: Averta;
  src: url("../font/averta/eot/hinted-Averta-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../font/averta/eot/hinted-Averta-Bold.eot?#iefix") format("embedded-opentype"), url("../font/averta/woff2/Averta Bold.woff2") format("woff2"), url("../font/averta/woff/hinted-Averta-Bold.woff") format("woff");
  /* Pretty Modern Browsers */
  font-weight: 700;
  font-style: normal;
  font-display: swap; }
@font-face {
  font-family: Cotham;
  src: url("../font/cotham/cothamsans-webfont.woff2") format("woff2"), url("../font/cotham/cothamsans-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
body {
  background-color: #350FE7;
  overflow-x: hidden; }

.content {
  max-width: 1580px;
  margin-left: 80px; }
  .content .navigation {
    margin: 60px 40px 0 40px;
    display: grid;
    grid-template-columns: repeat(12, [col] 1fr);
    grid-template-rows: repeat(1, [row] auto);
    grid-column-gap: 52px;
    grid-row-gap: 20px; }
    .content .navigation .logo {
      grid-column: col / span 1;
      grid-row: row; }
  .content .intro {
    margin: 200px 40px 0 40px;
    display: grid;
    grid-template-columns: repeat(12, [col] 1fr);
    grid-auto-rows: minmax(24px, auto);
    grid-column-gap: 50px;
    grid-row-gap: 10px; }
    .content .intro .tag {
      grid-column: col 1 / span 3;
      grid-row: span 1;
      animation: intro-text 1800ms;
      font-family: 'Averta', sans-serif;
      color: #EEA1BE;
      font-size: 16px; }
      .content .intro .tag span {
        color: #574CF2;
        margin: 0 20px;
        font-size: 12px;
        letter-spacing: -2px; }
    .content .intro h1 {
      grid-column: col 1 / span 10;
      grid-row: row 3 / span 13;
      animation: intro-text 1900ms;
      font-family: 'Averta', sans-serif;
      color: #F3F2F4;
      font-size: 110px; }
    .content .intro .text {
      grid-column: col 1 / span 5;
      grid-row: row 13 / span 6;
      animation: intro-text 2000ms;
      font-family: 'Cotham', sans-serif;
      font-size: 16px;
      line-height: 26px;
      color: #CECAE3; }
    .content .intro a {
      font-family: "Averta", sans-serif;
      color: #F3F2F4;
      font-size: 16px; }
      .content .intro a:hover {
        color: #EEA1BE; }
    .content .intro .contact {
      grid-column: col 1 / span 5;
      grid-row: row 19 / span 3;
      transform-origin: top left;
      min-width: 600px;
      border: 1px solid rgba(243, 242, 244, 0.3);
      display: flex;
      position: relative;
      align-items: center; }
      .content .intro .contact .icon {
        height: 100%;
        padding: 0 40px;
        margin-right: 40px;
        display: flex;
        box-sizing: border-box;
        border-right: 1px solid rgba(243, 242, 244, 0.3);
        justify-content: center;
        align-items: center; }
      .content .intro .contact .mail {
        font-family: 'Averta', sans-serif;
        color: #F3F2F4;
        font-size: 36px; }

@media (max-width: 1355px) {
  .content {
    max-width: 1280px; }
    .content .intro {
      display: grid;
      grid-template-columns: repeat(6, [col] 1fr);
      grid-auto-rows: minmax(24px, auto);
      grid-column-gap: 50px;
      grid-row-gap: 10px; }
      .content .intro .tag {
        grid-column: col 1 / span 3;
        grid-row: span 1; }
      .content .intro h1 {
        grid-column: col 1 / span 5;
        grid-row: row 3 / span 13; }
      .content .intro .text {
        grid-column: col 1 / span 4;
        grid-row: row 17 / span 6; }
      .content .intro .contact {
        grid-column: col 1 / span 4;
        grid-row: row 23 / span 3; } }
@media (max-width: 900px) {
  .content {
    max-width: 580px;
    margin-left: 10px; }
    .content .intro {
      margin: 80px 40px 0 40px;
      display: grid;
      grid-template-columns: repeat(4, [col] 1fr);
      grid-auto-rows: minmax(24px, auto);
      grid-column-gap: 50px;
      grid-row-gap: 10px; }
      .content .intro .tag {
        grid-column: col / span 2;
        grid-row: span 1; }
      .content .intro h1 {
        grid-column: col / span 4;
        grid-row: row 2 / span 10;
        font-size: 80px; }
      .content .intro .text {
        grid-column: col / span 4;
        grid-row: row 12 / span 4; }
      .content .intro .contact {
        grid-column: col / span 4;
        grid-row: row 17 / span 3;
        min-width: 0;
        display: flex;
        justify-content: center; }
        .content .intro .contact .icon {
          display: none; } }
@media (max-width: 900px) {
  .content {
    max-width: 580px;
    margin-left: 10px; }
    .content .intro {
      margin: 80px 40px 0 40px;
      display: grid;
      grid-template-columns: repeat(4, [col] 1fr);
      grid-auto-rows: minmax(24px, auto);
      grid-column-gap: 50px;
      grid-row-gap: 10px; }
      .content .intro .tag {
        grid-column: col / span 2;
        grid-row: span 1; }
      .content .intro h1 {
        grid-column: col / span 4;
        grid-row: row 2 / span 6;
        font-size: 46px; }
      .content .intro .text {
        grid-column: col / span 4;
        grid-row: row 8 / span 4; }
      .content .intro .contact {
        grid-column: col / span 4;
        grid-row: row 13 / span 3;
        min-width: 0;
        display: flex;
        justify-content: center; }
        .content .intro .contact .icon {
          display: none; }
        .content .intro .contact .mail {
          font-size: 18px; } }