/* =========================================================
   SRL CONTACT PAGE
   Supplemental stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   INTRO
--------------------------------------------------------- */

.contact-intro{
  padding-bottom:60px;
}

.contact-help-list{
  max-width:600px;
  margin:20px auto 0 auto;

  font-size:16px;
  line-height:1.5;

  color:#e4e4e4;
}

.contact-help-list div{
  margin:7px 0;
}

.contact-help-list div::before{
  content:"•";
  margin-right:9px;
  color:#D9A441;
}


/* ---------------------------------------------------------
   CONTACT SECTION
--------------------------------------------------------- */

.contact-section{
  padding:60px 20px 80px 20px;

  background:#1c1c1c;
}

.contact-container{
  width:100%;
  max-width:720px;

  margin:0 auto;
}


/* ---------------------------------------------------------
   FORM CARD
--------------------------------------------------------- */

.contact-form-card{
  padding:30px;

  background:#151b21;

  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;

  box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.contact-form-card h2{
  margin:0 0 28px 0;

  font-family:Raleway, sans-serif;
  font-size:24px;
  font-weight:800;

  text-align:center;
}


/* ---------------------------------------------------------
   FORM FIELDS
--------------------------------------------------------- */

.contact-field{
  margin-bottom:20px;
}

.contact-field label{
  display:block;

  margin-bottom:7px;

  font-size:14px;
  font-weight:500;

  color:#eeeeee;
}

.contact-field input,
.contact-field textarea{
  width:100%;

  box-sizing:border-box;

  padding:12px 13px;

  font-family:Roboto, sans-serif;
  font-size:15px;

  color:#f8f8f8;

  background:#0d1217;

  border:1px solid rgba(255,255,255,.16);
  border-radius:7px;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.contact-field textarea{
  resize:vertical;
  min-height:140px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
  color:#828990;
}


/* ---------------------------------------------------------
   FIELD FOCUS
--------------------------------------------------------- */

.contact-field input:focus,
.contact-field textarea:focus{
  background:#111820;

  border-color:#D9A441;

  box-shadow:
    0 0 0 2px rgba(217,164,65,.14);
}


/* ---------------------------------------------------------
   FORM STATUS
--------------------------------------------------------- */

.contact-status{
  margin:15px 0;
}

.php-email-form .loading,
.php-email-form .error-message,
.php-email-form .sent-message{
  display:none;

  padding:12px;

  border-radius:6px;

  text-align:center;

  font-size:14px;
}

.php-email-form .loading{
  color:#d8d8d8;

  background:#202a33;
}

.php-email-form .error-message{
  color:#ffffff;

  background:#7c2424;
}

.php-email-form .sent-message{
  color:#ffffff;

  background:#22633d;
}


/* ---------------------------------------------------------
   SUBMIT BUTTON
--------------------------------------------------------- */

.contact-submit{
  margin-top:25px;

  text-align:center;
}

.contact-submit-btn{
  border:0;
  cursor:pointer;

  font-family:Roboto, sans-serif;
  font-size:15px;
}


/* =========================================================
   IPHONE
   ========================================================= */

@media (max-width:576px){

  .contact-intro{
    padding-left:18px;
    padding-right:18px;
  }

  .contact-help-list{
    font-size:14px;
    text-align:left;

    max-width:330px;
  }

  .contact-section{
    padding:
      45px
      12px
      65px
      12px;
  }

  .contact-form-card{
    padding:
      24px
      16px;
  }

  .contact-form-card h2{
    font-size:21px;
  }

  .contact-field label{
    font-size:13px;
  }

  .contact-field input,
  .contact-field textarea{
    font-size:16px;
  }

  .contact-submit-btn{
    width:100%;
  }

}

/* ---------------------------------------------------------
   CONTACT FORM RESPONSE
--------------------------------------------------------- */

.contact-success,
.contact-error{
  margin:0 0 25px 0;
  padding:12px 15px;
  border-radius:6px;
  text-align:center;
  font-size:15px;
  line-height:1.4;
  font-weight:500;
}

.contact-success{
  background:#1f5638;
  border:1px solid #347853;
  color:#ffffff;
}

.contact-error{
  background:#6d2929;
  border:1px solid #914040;
  color:#ffffff;
}