:root {
    --yellow: #f2d752;
    --black: #242424;
    --white: #f2f2f2;
    --sofia: sofia-pro, sans-serif;
    --noto: noto-sans, sans-serif;
}

header {
    height: auto;
}

.form-section {
    margin: 40px auto 80px auto;
}
  
  .col-xs-12.col-sm-12.col-md-12.col-lg-12 {
    padding: 0 20% 0 20%;
  }
  
  .margin-top-25 {
    margin-top: 25px;
  }
  
  .form-title {
    padding: 20px;
    font-size: 30px;
    font-weight: 700;
    font-family: var(--sofia);
  }
  
  .form-group .form-control {
    -webkit-box-shadow: none;
    border-bottom: 1px;
    border-style: none none solid none;
    border-radius:0; 
    border-color: #000;
    font-family: var(--noto);
  }
  
  .form-group .form-control:focus {
      box-shadow: none;
    border-width: 0 0 2px 0;
    border-color: #000;
  }
  
  #message {
    resize: none;
  }
  
  .btn-mod.btn-large {
      height: auto;
      padding: 13px 52px;
      font-size: 15px;
  }
  
  .btn-mod.btn-border {
      color: #000000;
      border: 1px solid #000000;
      background: transparent;
  }
  
  .btn-mod, a.btn-mod {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 4px 13px;
      color: #fff;
      background: rgba(34,34,34, .9);
      border: 1px solid transparent;
      font-size: 11px;
      font-family: var(--sofia);
      font-weight: 400;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 2px;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      -webkit-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
      -moz-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
      -o-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
      -ms-transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
      transition: all 0.2s cubic-bezier(0.000, 0.000, 0.580, 1.000);
  }
  
  .btn-mod.btn-border:hover, .btn-mod.btn-border:active, .btn-mod.btn-border:focus, .btn-mod.btn-border:active:focus {
      color: #fff;
      border-color: #000;
      background: #000;
      outline: none;
  }

  @media only screen and (max-width: 1280px) {
    .navbar-logo {
      width: 90px;
    }
  }

  @media only screen and (max-width: 768px) {
    .col-xs-12.col-sm-12.col-md-12.col-lg-12 {
      padding: 0 20px;
    }
  }

  @media only screen and (max-width: 576px) {
    .navbar-logo {
      width: 70px;
    }
    .btn-mod.btn-large {
      padding: 10px 20px;
   }
   .form-title {
    font-size: 20px;
   }
  }
  .form-group {
      position: relative;
  }
  input#skype {
      margin-bottom: 10px;
  }


  /* Thank You Page */
  .ty-wrapper {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 50px;
  }
    .ty-wrapper h1 {
        font-family: var(--sofia);
        font-size: 50pt;
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .ty-wrapper p {
        font-family: var(--noto);
        font-size: 12pt;
        margin-bottom: 35px;
    }

  div.footer.alt {
      text-align: center;
  }
    div.footer.alt p {
        font-family: var(--noto);
        font-size: 3pt;
        font-size: 10pt !important;
        color: gray;
        margin-top: 30px;
    }

ul.social-ty {
    display: flex;
    list-style: none;
    justify-content: center;
    padding: 0;
    height: 40px;
}
.social-ty li i {
    color: var(--black);
    transition: 0.3s ease;
    font-size: 30pt;
    padding: 0 20px;
}

    .social-ty li i:hover {
        color: var(--yellow);
        font-size: 34pt;
    }

@media screen and (max-width: 576px) {
    .ty-wrapper {
        padding: 10px;
    }
    .ty-wrapper h1 {
        font-size: 30pt;
    }
    .social-ty li i {
        padding: 0 15px;
    }
}