.about_contact p{
  font-family: "Akrobat_Light";
}

.contact_explain {
  font-family: "Akrobat Black";
}

.form_div {
  font-family: "Akrobat_Light";

}

.form_div #from {
  border: 0px;
}

.form_div button {
  background-color: white;
  border: 1px solid gray;
  padding: 5px 25px 5px 5px;
  cursor: pointer;
}

@media only screen and (max-width: 1100px) {
  .about_contact {
    position: absolute;
    top: 20%;
    left: 10%;
    transition: all 1s ease-in-out;
    animation: fadein 2s;
    max-width: 80%;
  }

  .contact_explain {
    transition: all 1s ease-in-out;
    animation: fadein 2s;
    position: absolute;
    top: 30%;
    left: 20%;
    max-width: 65%;
  }

  .form_div {
    transition: all 1s ease-in-out;
    animation: fadein 2s;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 70%;
  }

  .form_div textarea {
    margin-top: 2%;
    border-color: gray;
    width: 100%;
  }

  .form_div button {
    margin-top: 2%;
  }

  #about {
    bottom: 8%;
  }

  #contact_contact {
    bottom: 5%;
  }

  #shop {
    bottom: 2%;
  }
}


@media only screen and (min-width: 1100px) {
  * {
    font-size: 2vh;
  }

  .about_contact {
    position: absolute;
    top: 20%;
    left: 20%;
    transition: all 1s ease-in-out;
    animation: fadein 2s;
  }

  .contact_explain {
    transition: all 1s ease-in-out;
    animation: fadein 2s;
    position: absolute;
    top: 25%;
    left: 40%;
    max-width: 40%;
  }

  .form_div {
    transition: all 1s ease-in-out;
    animation: fadein 2s;
    position: absolute;
    top: 35%;
    left: 40%;
    width: 35%;
  }

  .form_div textarea {
    margin-top: 2%;
    border-color: gray;
    width: 100%;
  }

  .form_div button {
    margin-top: 2%;
  }


  #about {
    bottom: 8%;
  }

  #contact_contact {
    bottom: 5%;
  }

  #shop {
    bottom: 2%;
  }

}

#about, #contact_contact, #shop {
  font-family: "Akrobat_Light";
  text-align: left!important;
}

#about:hover, #shop:hover {
  font-family: "Akrobat_Bold";
}

#contact_contact:hover {
  font-family: "Akrobat_Bold";
}

#contact_contact {
  padding-left: 15px;
  font-family: "Akrobat_Bold";
}

#submit {
  transition: all 0.3s ease-in-out;
}

#submit:hover {
  padding: 5px 45px 5px 5px;
  transition: all 0.3s ease-in-out;
}



@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}