@font-face {
  font-family: ACaslonPro-Regular;
  src: url(../assets/fonts/ACaslonPro-Regular.otf); }

@font-face {
  font-family: GothamRounded-Book;
  src: url(../assets/fonts/GothamRounded-Book.otf); }

* {
  padding: 0;
  margin: 0;
  font-family: 'GothamRounded-Book';
  color: white; }

html {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 100%; }
  html body {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 100%; }
    html body .intro {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      height: 100%;
      max-height: 100%;
      min-height: 100%;
      overflow: hidden; }
      html body .intro .background-color,
      html body .intro .background-bw {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; }
      html body .intro .background-bw {
        opacity: 0;
        transition: opacity 1s ease-out; }
        html body .intro .background-bw.show {
          opacity: 1; }
      html body .intro .container {
        position: absolute;
        display: flex;
        flex-flow: column;
        align-items: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
        html body .intro .container .logo {
          margin-top: 80px;
          height: 82px;
          margin-bottom: 15px; }
        html body .intro .container .catch-phrase {
          position: relative;
          display: flex;
          flex-flow: column;
          align-items: center;
          height: auto;
          width: 100%; }
          html body .intro .container .catch-phrase p {
            position: absolute;
            top: 0;
            font-size: 26px;
            letter-spacing: 3px;
            opacity: 0;
            transition: opacity 1s ease-out; }
            html body .intro .container .catch-phrase p.show {
              opacity: 1; }
        html body .intro .container .content {
          margin-top: 80px;
          margin-left: 280px; }
          html body .intro .container .content .title {
            font-family: 'ACaslonPro-Regular';
            font-size: 32px; }
          html body .intro .container .content .description {
            font-size: 19px;
            margin-top: 2px;
            margin-bottom: 50px; }
        html body .intro .container .footer {
          display: flex;
          flex-flow: row;
          margin-left: 310px;
          margin-top: 20px; }
          html body .intro .container .footer a.button {
            padding: 0 20px;
            line-height: 45px;
            height: 45px;
            border-radius: 8px;
            text-decoration: none;
            margin-right: 15px;
            transition: background-color 1s ease-out; }
            html body .intro .container .footer a.button.color {
              background-color: #d72624; }
            html body .intro .container .footer a.button.bw {
              background-color: black; }
          html body .intro .container .footer img {
            width: 45px;
            height: 45px; }
            html body .intro .container .footer img:first-child {
              margin-right: 8px; }

@media only screen and (max-width: 768px) {
  html body .intro .container .logo {
    height: 46px; }
  html body .intro .container .catch-phrase p {
    font-size: 18px; }
  html body .intro .container .content {
    text-align: center;
    margin-top: 100px;
    margin-left: 0; }
    html body .intro .container .content .title {
      font-size: 22px; }
    html body .intro .container .content .description {
      font-size: 16px;
      margin-top: 2px;
      margin-bottom: 30px; }
  html body .intro .container .footer {
    margin-left: 0;
    margin-top: 65px; } }