body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 600;
    margin: 0 auto;
}

/* yellow design*/
.yellow-rectangle {
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 50px; /* the width of the rectangle */
    height: 100%; /* spanning the full height of the viewport */
    background-color: #ffd860;
}

/* animation for the title */

@keyframes showTopText {
    0% { transform: translate3d(0, 100%, 0); }
    40%, 60% { transform: translate3d(0, 50%, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  @keyframes showBottomText {
    0% { transform: translate3d(0, -100%, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }
  .col-8{
    padding-left: 320px; /* to in-line with the form below */
  }

  .animated-title {
    color: #1D3557;
    font-family: Roboto, Arial, sans-serif;
    height: 90vmin;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90vmin;
    margin-left: 400px;
  }
  .animated-title > div {
    height: 50%;
    overflow: hidden;
    position: absolute;
    width: 100%;
  }
  .animated-title > div div {
    font-size: 12vmin;
    padding: 2vmin 0;
    position: absolute;
  }
  .animated-title > div div span {
    display: block;
  }
  .animated-title > div.text-top {
    border-bottom: 1vmin solid #000;
    top: 0;
  }
  .animated-title > div.text-top div {
    animation: showTopText 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    bottom: 0;
    transform: translate(0, 100%);
  }
  .animated-title > div.text-top div span:first-child {
    color: #ffd860;
  }
  .animated-title > div.text-bottom {
    bottom: 0;
  }
  .animated-title > div.text-bottom div {
    animation: showBottomText 0.5s;
    animation-delay: 1.75s;
    animation-fill-mode: forwards;
    top: 0;
    transform: translate(0, -100%);
  }

/* content */
.img-fluid {
    width: 100px;
    margin-top: 100px;
}

.contact-content{
    margin-top: 350px; /* the position (spacing) between the animation and the form */
    padding-bottom: 30px;
    padding-left: 75px;
}

label {
    display: flex;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 20px;
    padding-top: 0px;
}

.col-8 .form {
  padding-top: 20px;
}

/* bootstrap buttons layout */

.buttons{
    padding-top: 40px;
    padding-bottom: 40px;
}