#contact {
  margin: 0 -30px;
  background: -webkit-gradient(linear, left top, right top, from(#414345), to(#232526));
  background: -webkit-linear-gradient(left, #414345, #232526);
  background: -o-linear-gradient(left, #414345, #232526);
  background: linear-gradient(to right, #414345, #232526);
  padding: 30px 0;
  color: #7f8c8d; }
  #contact .wrap {
    background: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 750px;
    margin: 0 auto;
    border-radius: 5px;
    position: relative; }
    #contact .wrap h3 {
      margin: 0;
      width: 100%;
      padding-top: 30px; }
    #contact .wrap .info {
      line-height: 30px;
      background: #3ba8ff;
      padding: 10px 20px;
      border-radius: 5px;
      color: white;
      overflow: hidden;
      position: absolute;
      left: -50px;
      top: 100px;
      width: 300px; }
      #contact .wrap .info p {
        padding: 10px 0;
        margin: 0; }
        #contact .wrap .info p i {
          width: 20px; }
    #contact .wrap .contact-form {
      width: 500px;
      padding: 30px; }
      #contact .wrap .contact-form input {
        margin: 0 auto;
        display: block;
        width: 100%;
        border: none;
        border-bottom: 1px solid #e2e2e2;
        outline: none;
        color: black; }
      #contact .wrap .contact-form input:focus {
        border-bottom: 1px solid #3ca8ff; }
      #contact .wrap .contact-form label {
        margin-top: 15px;
        margin-bottom: 0;
        display: block;
        font-weight: 400; }
      #contact .wrap .contact-form input[type='checkbox'] {
        display: inline-block;
        width: auto;
        border: none !important; }
      #contact .wrap .contact-form button {
        display: block;
        margin: 30px auto 0 auto;
        width: 100px;
        border-radius: 5px;
        background: #3ca8ff;
        border: none; }

@media only screen and (max-width: 1024px) {
  #contact .wrap {
    width: 700px; }
    #contact .wrap .info {
      left: 10px;
      width: 250px; }
    #contact .wrap .contact-form {
      width: 450px; } }

@media only screen and (max-width: 768px) {
  #contact .wrap .info {
    left: 10px;
    width: 250px; } }

@media only screen and (max-width: 480px) {
  #contact .wrap {
    width: 95%; }
    #contact .wrap .info {
      position: relative;
      width: 100%;
      left: 0;
      top: 0;
      margin: 20px 10px 0 10px; }
    #contact .wrap .contact-form {
      padding-top: 0; } }