/* =========================================================
   CANCÚN HALF MARATHON
   CONTACT FORM
========================================================= */

:root{
  --navy:#061f3b;
  --navy2:#0a3658;
  --turquoise:#15c4cb;
  --turquoise-dark:#00aeb9;
  --pink:#ef3d7a;
  --text:#415c6e;
  --muted:#72838e;
  --border:#d7e3e8;
  --background:#ffffff;
  --field:#f8fbfc;
  --error:#d83255;
}


/* =========================================================
   RESET
========================================================= */

*{
  box-sizing:border-box;
}


html,
body{
  margin:0;
  padding:0;
}


body{
  background:#ffffff;
  color:var(--text);
  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:15px;
  line-height:1.55;
}


/* =========================================================
   FORM
========================================================= */

.contact-form{
  width:100%;
  margin:0;
  padding:34px 34px 36px;
  background:#ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.form-header{
  margin-bottom:30px;
}


.form-kicker{
  display:block;

  margin-bottom:7px;

  color:var(--pink);

  font-size:11px;
  font-weight:900;

  letter-spacing:.09em;

  text-transform:uppercase;
}


.form-header h1{
  margin:0 0 12px;

  color:var(--navy);

  font-size:34px;
  line-height:1.05;

  letter-spacing:-.035em;
}


.form-header p{
  max-width:600px;

  margin:0;

  color:#617786;

  font-size:15px;
  line-height:1.65;
}


.required-note{
  margin-top:14px;

  color:#8997a0;

  font-size:12px;
}


/* =========================================================
   FIELDS
========================================================= */

.field-group{
  margin-bottom:21px;
}


.field-group label,
.captcha-field label{
  display:block;

  margin-bottom:7px;

  color:var(--navy);

  font-size:13px;
  font-weight:800;
}


.field-group label span,
.captcha-field label span{
  color:var(--pink);
}


.field-group input,
.field-group select,
.field-group textarea,
.captcha-field input{

  width:100%;

  padding:13px 14px;

  border:1px solid var(--border);

  border-radius:7px;

  outline:none;

  background:var(--field);

  color:var(--navy);

  font-family:inherit;
  font-size:15px;

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


.field-group input,
.field-group select,
.captcha-field input{
  min-height:48px;
}


.field-group textarea{
  min-height:175px;

  resize:vertical;
}


.field-group input:focus,
.field-group select:focus,
.field-group textarea:focus,
.captcha-field input:focus{

  border-color:var(--turquoise-dark);

  background:#ffffff;

  box-shadow:
    0 0 0 3px
    rgba(21,196,203,.12);
}


.field-group input::placeholder,
.field-group textarea::placeholder,
.captcha-field input::placeholder{
  color:#a2afb7;
}


/* =========================================================
   SELECT
========================================================= */

.field-group select{
  cursor:pointer;

  appearance:auto;
}


/* =========================================================
   CAPTCHA
========================================================= */

.captcha-section{

  margin-top:8px;
  margin-bottom:26px;

  padding:22px;

  border:1px solid #dbe8ec;

  border-radius:10px;

  background:#eef8fa;
}


.captcha-title{

  margin-bottom:15px;

  color:var(--navy);

  font-size:15px;
  font-weight:900;
}


.captcha-content{

  display:grid;

  grid-template-columns:auto 1fr;

  gap:20px;

  align-items:center;
}


.captcha-image-wrap{

  display:flex;

  align-items:center;

  justify-content:center;

  min-width:150px;

  min-height:62px;

  padding:7px 10px;

  border-radius:7px;

  background:#ffffff;

  border:1px solid #d5e1e6;
}


.captcha-image-wrap img{

  display:block;

  max-width:100%;

  height:auto;
}


.captcha-field{
  width:100%;
}


.captcha-refresh{

  margin-top:13px;

  color:#72838e;

  font-size:12px;
}


.captcha-refresh a{

  color:var(--pink);

  font-weight:800;

  text-decoration:none;
}


.captcha-refresh a:hover{
  text-decoration:underline;
}


/* =========================================================
   ERRORS
========================================================= */

.error{

  display:block;

  margin-top:5px;

  color:var(--error);

  font-size:12px;

  font-weight:700;
}


.form-global-error{
  margin:0;
}


/* =========================================================
   SUBMIT
========================================================= */

.submit-row{
  margin-top:6px;
}


.submit-button{

  min-width:190px;

  padding:15px 24px;

  border:0;

  border-radius:5px;

  cursor:pointer;

  background:var(--pink);

  color:#ffffff;

  font-size:13px;

  font-weight:900;

  letter-spacing:.025em;

  transition:
    transform .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}


.submit-button:hover{

  background:#d92e6b;

  transform:translateY(-1px);

  box-shadow:
    0 8px 20px
    rgba(239,61,122,.24);
}


.submit-button:active{
  transform:translateY(0);
}


/* =========================================================
   EXISTING HONEYPOT
   DO NOT REMOVE
========================================================= */

.spmhidip{

  position:absolute !important;

  left:-9999px !important;

  top:-9999px !important;

  width:1px !important;

  height:1px !important;

  opacity:0 !important;

  pointer-events:none !important;
}


/* =========================================================
   OLD CLASSES
   Compatibility with existing form scripts
========================================================= */

.short_explanation{
  color:#7b8b95;
  font-size:12px;
}


.container{
  width:100%;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:600px){

  .contact-form{
    padding:25px 19px 29px;
  }


  .form-header h1{
    font-size:29px;
  }


  .captcha-content{
    grid-template-columns:1fr;
  }


  .captcha-image-wrap{
    justify-content:flex-start;
  }


  .submit-button{
    width:100%;
  }

}
html,
body{
  overflow:hidden !important;
}

body{
  margin:0 !important;
  padding:0 !important;
}