/* ==========================================================================
   BUTTON CLASS
   ========================================================================== */

/*
    References for BEM & SUIT SYNTAX
    --------------------------------
    https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md

*/

/**
 * The button classes are best applied to links, buttons, and submit inputs.
 * These components can be used in forms, as calls to action, or as part of the
 * general UI of the site/app.
 *
 * Recommended use:
 *
 * <a class="Button [Button--modifier]" role="button" href="[url]">Button text</a>
 * <button class="Button [Button--modifier]" type="submit">Button text</button>
 * <input class="Button [Button--modifier]" type="submit" value="Button text">
 */

/**
 * 1. Corrects inability to style clickable `input` types in iOS.
 * 2. Normalize `box-sizing` across all elements that this component could be
 *    applied to.
 * 3. Inherit text color from ancestor.
 * 4. Inherit font styles from ancestor.
 * 5. Normalize `line-height`. For `input`, it can't be changed from `normal` in Firefox 4+.
 * 6. Prevent button text from being selectable.
 * 7. Make sure `input` will wrap text across multiple lines.
 */

.Button {
  -webkit-appearance: none;
  /* 1 */
  background: transparent;
  border-color: #ddd;
  border-style: solid;
  border-width: 1px;
  border-radius: 4px !important;
  box-sizing: border-box;
  /* 2 */
  color: inherit;
  /* 3 */
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-weight: bold;
  /* 4 */
  line-height: normal;
  /* 5 */
  margin: 0;
  padding: 0.8em 0.88em;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* 6 */
  white-space: normal;
  /* 7 */
  font-size: 1.2rem;

  box-shadow: 0 4px 6px rgba(50,50,93,.15),0 1px 3px rgba(0,0,0,.08);
  transition: all 0.5s ease;
}


/* .Button:focus {
    box-shadow: 0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.15);
} */

/**
 * UI states
 */

.Button:hover,
.Button:focus,
.Button:active {
  color: #666;
  text-decoration: none;
  box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3),0 -6px 16px -6px rgba(0,0,0,.025);
}

.Button:focus,
.Button:active {
    box-shadow: 0 4px 6px rgba(50,50,93,.15),0 1px 3px rgba(0,0,0,.08) !important;
}

.Button:disabled,
.Button.is-disabled {
  cursor: default;
  opacity: 0.6;
  color: #666;
  border: 1px solid #BFBFBF;
  background: #f0f0f0;
}

.Button:disabled:hover,
.Button.is-disabled:hover {
  cursor: default;
  opacity: 0.6;
  color: #666;
  background: #eee;
}


/**
 * Button Defaukt: Grey
 *
 */

.Button--default {
  background-color: #eee;
  color: #444;
}

.Button--default:hover,
.Button--default:focus,
.Button--default:active,
.Button--default.is-pressed {
  background-color: #f5f5f5;
  color: #222;
}

.Button--default:focus {
  border-color: #069;
  outline: 0;
}

.Button--default:active,
.Button--default.is-pressed {
  background-color: #ccc;
}

/**
 * Button Primary Action: Green
 *
 */

.Button--pri {
  background-color: #43ba47;
  color: #fff;
  border-color: #43ba47;
}

.Button--pri:hover,
.Button--pri:focus,
.Button--pri:active,
.Button--pri.is-pressed {
  color: #fff;
}

.Button--pri:hover {
    transform:translateY(-1px);
}

.Button--pri:focus {
  background-color: #5AB55A;
}

.Button--pri:active,
.Button--pri.is-pressed {
  background-color: #5AB55A;
  color: #fff;
  transform:translateY(1px);
}


.Button--outlined {
  border: 2px solid #43ba47;
  background: #fff;
  color: #43ba47;
}
.Button--outlined:hover,
.Button--outlined:focus,
.Button--outlined:active,
.Button--outlined.is-pressed {
  color: #359539;
  border-color: #359539;
  background: #fff;
}
.Button--outlined:focus {
  background-color: #fff;
}

/**
 * Button Secondary Action: Blue
 *
 */

.Button--sec {
  background-color: #2996cc;
  color: #fff;
  border: 2px solid #2996cc;
  border-radius: 2px;
}

.Button--sec:hover,
.Button--sec:focus,
.Button--sec:active,
.Button--sec.is-pressed {
  background-color: #2586B7;
  border-color: #2586B7;
  color: #fff;
}

.Button--sec:focus {
  background-color: #257CA8;
  outline: 0;
}

.Button--sec:active,
.Button--sec.is-pressed {
  background-color: #257CA8;
}


/**
 * Button Cancel: Cancel
 *
 */

.Button--cancel {
  position: relative;
  top: 2px;
  margin-left: 1.2em !important;
  background: transparent;
  color: #999;
  border-color: transparent;
  border-radius: 2px;
}

.Button--cancel:hover,
.Button--cancel:focus,
.Button--cancel:active,
.Button--cancel.is-pressed {
  background-color: transparent;
  color: #666;
}

.Button--cancel:focus {
  background-color: transparent;
  outline: 0;
}

.Button--cancel:active,
.Button--cancel.is-pressed {
  background-color: transparent;
}


/**
 * Modifier: large buttons
 */

.Button--large {
  font-size: 1.7rem;
  padding: 0.8em 1.5em;
}

.Button--xlarge {
  font-size: 2rem;
  font-weight: 500;
  padding: 1em 2.5em;
}

.Button--wide {
  min-width: 16em;
}

/**
 * Modifier: MEdium buttons
 */

.Button--medium {
  font-size: 1.5rem;
  padding: 0.65em 1.5em;
}

/**
 * Modifier: small buttons
 */

.Button--small {
  font-size: 1.5rem;
  padding: 0.6em 1.5em;
}

/**
 * Modifier: Actions e.g. sidebar Deploy button and dropdown
 */

 .Button--side {
    font-weight: bold;
    font-size: 1.3rem;
    padding: 0.75em 0.75em;
}

/**
 * Modifier: action e.g. buttons, forms <input type="submit">
 */

 .Button--action {
  text-transform: uppercase;
  letter-spacing: 1px;
 }

 /**
 * Modifier: action e.g. buttons, forms <input type="submit">
 */

.Button--container {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
}

.Button--field {
    position: relative;
    font-weight: bold;
    font-size: 1.5rem;
    padding: 9px 14px;
}

.Button--mobile {
    padding: 0.7em 1.6em !important;
}

@media only screen and (max-width : 1024px) {
    #get-started-btn {
        margin-bottom: 1.4em;
    }
}