/*
##########################
#### Buttons & Inputs ####
##########################
*/



/* buttons */

/* desktop */

/* button default */
.button {
  display: inline-block;
  white-space: nowrap;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}



/* button large size */
.button.large-btn  {
  border-radius: 16px;
  border: 2.5px solid transparent;
  padding: 1.500rem 2.500rem 1.500rem 2.500rem !important;
}

/* button regular size */
.button.regular-btn  {
  border-radius: 14px;
  border: 2px solid transparent;
  padding: 1.065rem 1.875rem 1.065rem 1.875rem;
}

/* button small size */
.button.small-btn  {
  border-radius: 8px;
  border: 1.5px solid transparent;
  padding: 0.625rem 0.935rem 0.625rem 0.935rem !important;
}




/* button large icon *
.button.large-btn.button-text i.uil       { font-size: 1.575rem; line-height: 1.575rem; }

/* button regular icon *
.button.regular-btn.button-text i.uil     { font-size: 1.325rem; line-height: 1.325rem; }

/* button small icon *
.button.small-btn.button-text i.uil       { font-size: 0.950rem; line-height: 1.950rem; }



/* mobile *
@media (max-width: 991px) {

  /* button default size *
  .button                    { padding: 1.225rem 1.35rem 1.225rem 1.65rem !important; }

  /* icon size *
  .button.button-text .uil   { font-size: 1.425rem; line-height: 1.425rem !important; }

}



/* button colors */

/* solid */

/* button secundary400 */
a.button.btn-secundary400,
button.button.btn-secundary400       { background: var(--secundary400); border-color: var(--secundary400); color: var(--primary500); box-shadow: 0px 10px 25px 0px rgba(241, 190, 79, 0.40); }

a:hover.button.btn-secundary400,
button:hover.button.btn-secundary400 { background: var(--secundary500); border-color: var(--secundary500); color: var(--primary500); box-shadow: 0px 10px 25px 0px rgba(241, 190, 79, 0.30); }







/* button primary400 */
a.button.btn-primary400,
button.button.btn-primary400       { background: var(--primary400); border-color: var(--primary400); color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(0, 133, 255, 0.40); }

a:hover.button.btn-primary400,
button:hover.button.btn-primary400 { background: var(--primary500); border-color: var(--primary500); color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(0, 133, 255, 0.30); }

/* button alert-r500 *
a.button.btn-alert-r500,
button.button.btn-alert-r500       { background: var(--alert-r500); border-color: var(--alert-r500); color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(255, 0, 52, 0.40); }

a:hover.button.btn-alert-r500,
button:hover.button.btn-alert-r500 { background: #CF002A; border-color: #CF002A; color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(255, 0, 52, 0.40); }

/* button alert-g500 *
a.button.btn-alert-g500,
button.button.btn-alert-g500       { background: var(--alert-g500); border-color: var(--alert-g500); color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(0, 223, 84, 0.40); }

a:hover.button.btn-alert-g500,
button:hover.button.btn-alert-g500 { background: #00C249; border-color: #00C249; color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(0, 223, 84, 0.40); }

/* button secundary500 *
a.button.btn-secundary500,
button.button.btn-secundary500       { background: var(--secundary500); border-color: var(--secundary500); color: var(--primary500); box-shadow: 0px 10px 25px 0px rgba(241, 173, 0, 0.40); }

a:hover.button.btn-secundary500,
button:hover.button.btn-secundary500 { background: var(--secundary600); border-color: var(--secundary600); color: var(--primary500); box-shadow: 0px 10px 25px 0px rgba(241, 173, 0, 0.40); }

/* button tertiary500 *
a.button.btn-tertiary500       { background: var(--tertiary500); border-color: var(--tertiary500); color: var(--primary500); box-shadow: 0px 10px 25px 0px rgba(255, 222, 113, 0.40); }
a:hover.button.btn-tertiary500 { background: var(--tertiary500); border-color: var(--tertiary500); color: var(--primary500); box-shadow: 0px 10px 25px 0px rgba(255, 222, 113, 0.20); opacity: 0.95; }

/* button dark900 *
a.button.btn-dark900       { background: var(--dark900); border-color: var(--dark900); color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(35, 42, 61, 0.40); }
a:hover.button.btn-dark900 { background: var(--dark900); border-color: var(--dark900); color: var(--dark100); box-shadow: 0px 10px 25px 0px rgba(35, 42, 61, 0.20); opacity: 0.95; }









/* outline */

/* button secundary400 outline */
a.button.btn-secundary400-outline,
button.button.btn-secundary400-outline { background: transparent; border-color: var(--secundary400); color: var(--secundary400); opacity: 1.00; }

a:hover.button.btn-secundary400-outline,
button:hover.button.btn-secundary400-outline { background: var(--secundary400); border-color: var(--secundary400); color: var(--primary500); opacity: 1.00; box-shadow: 0px 10px 25px 0px rgba(241, 190, 79, 0.40); }

/* button primary400 outline */
a.button.btn-primary400-outline,
button.button.btn-primary400-outline { background: transparent; border-color: var(--primary400); color: var(--primary400); opacity: 1.00; }

a:hover.button.btn-primary400-outline,
button:hover.button.btn-primary400-outline { background: var(--secundary400); border-color: var(--secundary400); color: var(--secundary600); opacity: 1.00; box-shadow: 0px 10px 25px 0px rgba(3, 52, 119, 0.40); }












/* button dark100 outline */
a.button.btn-dark100-outline,
button.button.btn-dark100-outline { background: transparent; border-color: var(--dark100); color: var(--dark100); opacity: 1.00; }

a:hover.button.btn-dark100-outline,
button:hover.button.btn-dark100-outline { background: var(--dark100); border-color: var(--dark100); color: var(--primary400); opacity: 1.00; }

/* button secundary600 outline */
a.button.btn-secundary600-outline,
button.button.btn-secundary600-outline { background: transparent; border-color: var(--secundary600); color: var(--secundary600); opacity: 1.00; }

a:hover.button.btn-secundary600-outline,
button:hover.button.btn-secundary600-outline { background: var(--secundary600); border-color: var(--secundary600); color: var(--dark100); opacity: 1.00; box-shadow: 0px 10px 25px 0px rgba(24, 109, 0, 0.40); }

/* button secundary500 outline *
a.button.btn-secundary500-outline,
button.button.btn-secundary500-outline { background: transparent; border-color: var(--secundary500); color: var(--secundary500); opacity: 1.00; }

a:hover.button.btn-secundary500-outline,
button:hover.button.btn-secundary500-outline { background: var(--secundary500); border-color: var(--secundary500); color: var(--primary500); opacity: 1.00; box-shadow: 0px 10px 25px 0px rgba(255, 212, 5, 0.40); }

/* button primary500 outline *
.button.btn-primary500-outline { background: transparent; border-color: var(--primary500); color: var(--primary500); opacity: 1.00; }
.button.btn-primary500-outline:hover { background: var(--primary500); border-color: var(--primary500); color: var(--dark900); opacity: 1.00; }





/* text */

/* button dark100 text */
.button.btn-dark100-text       { color: var(--dark100); opacity: 0.60; border-radius: none !important; border: none !important; padding: 0 !important; }
.button.btn-dark100-text:hover { color: var(--dark100); opacity: 1.00; }






/* button secundary400 text */
.button.btn-secundary400-text       { color: var(--secundary400); opacity: 1.00; border-radius: none !important; border: none !important; padding: 0 !important; }
.button.btn-secundary400-text:hover { color: var(--secundary400); opacity: 0.60; }








/* inputs */

/* input */
input.input-bg,
textarea.input-bg,
select.input-bg {
  font-family: var(--secundary-font-family);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.750rem;
  letter-spacing: 0.000rem;
  border-radius: 8px;
  border: 2px solid var(--dark300);
  background-color: var(--dark200);
  color: var(--dark700);
  padding: 0.950rem 1.250rem;
  margin-bottom: 0px;
}

textarea.input-bg {
  max-height: 9.0rem;
}



/* input focus */
input.input-bg:focus,
textarea.input-bg:focus,
select.input-bg:focus {
  font-family: var(--secundary-font-family);
  border: 2px solid var(--primary400) !important;
  color: var(--primary400);
  background-color: #EBF4F8;
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.750rem;
  letter-spacing: 0.000rem;
}



/* input placeholder */
.input-bg::-webkit-input-placeholder {
  font-family: var(--secundary-font-family);
  color: var(--dark500);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.750rem;
  letter-spacing: 0.000rem;
}

.input-bg::-moz-placeholder {
  font-family: var(--secundary-font-family);
  color: var(--dark500);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.750rem;
  letter-spacing: 0.000rem;
}

.input-bg:-ms-input-placeholder {
  font-family: var(--secundary-font-family);
  color: var(--dark500);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.750rem;
  letter-spacing: 0.000rem;
}



/* input no-margin */
.input-col p {
  margin: 0 !important;
}



/* mensage send mail */
.wpcf7-response-output {
  border: none !important;
  background: var(--alert-g100) !important;
  text-align: center !important;
  color: var(--alert-g500) !important;
  border-radius: 6px !important;
  padding: 25px !important;
  margin: 40px 0 0 0 !important;
}