/**
 * Functions and mixins
*/
/**
 * Colors
*/
/**
 * Button variations
 */
.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  color: inherit;
  vertical-align: middle;
  border-radius: 2px;
  transition: color 0.2s, background-color 0.2s;
}

.btn--underline {
  padding: 0.125rem 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0px;
}

.btn--fill, .btn--pill, .btn--outline, .btn--large {
  border-bottom: 0;
}

.btn.is-active,
.btn--fill,
.btn--pill,
.btn--outline {
  padding: 0.5rem 0.75rem;
}

.btn--block {
  display: block;
  margin-bottom: 1rem;
}

.btn--large {
  padding: 0.75rem 1.25rem;
  font-size: 1.25rem;
}

.btn--small, .btn--small.is-active {
  padding: 0.375rem 0.5rem;
  font-size: 0.75rem;
}

.btn--outline {
  box-shadow: inset 0px 0px 0 2px currentColor;
}

.btn--squared {
  border-radius: 0px;
}

.btn--pill {
  border-radius: 100em;
}

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

.btn.is-active {
  box-shadow: 0px 0px 5px currentColor;
}

.btn.is-disabled, .btn[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn--brand {
  color: #ec5d4a;
}

.btn--brand:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #dc5745;
}

.btn--brand.btn--fill {
  color: #ffffff;
  background-color: #ec5d4a;
}

.btn--brand.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #dc5745;
}

.btn--brand.is-active, .btn--brand.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(220, 87, 69, 0.3);
  background-color: #dc5745;
}

.btn--light {
  color: #F6F6F1;
}

.btn--light:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #606B70;
}

.btn--light.btn--fill {
  color: #606B70;
  background-color: #F6F6F1;
}

.btn--light.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #F6F6F1;
  background-color: #606B70;
}

.btn--light.is-active, .btn--light.is-active:hover {
  color: #F6F6F1;
  box-shadow: 0px 0px 4px rgba(96, 107, 112, 0.3);
  background-color: #606B70;
}

.btn--gray {
  color: #99A0A0;
}

.btn--gray:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #8a9090;
}

.btn--gray.btn--fill {
  color: #ffffff;
  background-color: #99A0A0;
}

.btn--gray.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #8a9090;
}

.btn--gray.is-active, .btn--gray.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(138, 144, 144, 0.3);
  background-color: #8a9090;
}

.btn--green {
  color: #26ba9e;
}

.btn--green:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #22a78e;
}

.btn--green.btn--fill {
  color: #ffffff;
  background-color: #26ba9e;
}

.btn--green.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #22a78e;
}

.btn--green.is-active, .btn--green.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(34, 167, 142, 0.3);
  background-color: #22a78e;
}

.btn--asphalt {
  color: #606b70;
}

.btn--asphalt:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #566065;
}

.btn--asphalt.btn--fill {
  color: #ffffff;
  background-color: #606b70;
}

.btn--asphalt.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #566065;
}

.btn--asphalt.is-active, .btn--asphalt.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(86, 96, 101, 0.3);
  background-color: #566065;
}

.btn--facebook {
  color: #3b5998;
}

.btn--facebook:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #2f477a;
}

.btn--facebook.btn--fill {
  color: #ffffff;
  background-color: #3b5998;
}

.btn--facebook.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #2f477a;
}

.btn--facebook.is-active, .btn--facebook.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(47, 71, 122, 0.3);
  background-color: #2f477a;
}

.btn--twitter {
  color: #55acee;
}

.btn--twitter:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #448abe;
}

.btn--twitter.btn--fill {
  color: #ffffff;
  background-color: #55acee;
}

.btn--twitter.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #448abe;
}

.btn--twitter.is-active, .btn--twitter.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(68, 138, 190, 0.3);
  background-color: #448abe;
}

.btn--google {
  color: #dc4e41;
}

.btn--google:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #c6463b;
}

.btn--google.btn--fill {
  color: #ffffff;
  background-color: #dc4e41;
}

.btn--google.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #c6463b;
}

.btn--google.is-active, .btn--google.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(198, 70, 59, 0.3);
  background-color: #c6463b;
}

.btn--white {
  color: #ffffff;
}

.btn--white:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #f2f2f2;
}

.btn--white.btn--fill {
  color: rgba(0, 0, 0, 0.5);
  background-color: #ffffff;
}

.btn--white.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: rgba(0, 0, 0, 0.5);
  background-color: #f2f2f2;
}

.btn--white.is-active, .btn--white.is-active:hover {
  color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 4px rgba(242, 242, 242, 0.3);
  background-color: #f2f2f2;
}

.btn--black {
  color: #000000;
}

.btn--black:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #4d4d4d;
}

.btn--black.btn--fill {
  color: #ffffff;
  background-color: #000000;
}

.btn--black.btn--fill:not([disabled]):not(.is-disabled):not(.is-active):hover {
  color: #ffffff;
  background-color: #4d4d4d;
}

.btn--black.is-active, .btn--black.is-active:hover {
  color: #ffffff;
  box-shadow: 0px 0px 4px rgba(77, 77, 77, 0.3);
  background-color: #4d4d4d;
}

/**
 * Default styles
 */
*, *:before, *:after {
  box-sizing: border-box;
}

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

html {
  font-family: -apple-system , '.SFNSText-Regular' , 'Helvetica Neue' , 'Roboto' , 'Segoe UI' , sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #222;
  background-color: #fdfdfd;
}

.group {
  width: 100%;
  padding: 2rem;
}

.group:not(:first-child) {
  border-top: 1px solid #eee;
}

.group h2 {
  margin: 0 0 0.5rem 0;
}

.group h2 span {
  font-weight: 100;
  font-size: 1rem;
  color: #ec5d4a;
}

.group h2 span:before {
  content: "\2015";
  margin-right: 5px;
  display: inline-block;
  transform: rotate(-60deg);
}

.group p {
  color: #999;
  font-size: 0.88rem;
  margin: 0;
}

.group p:last-of-type {
  margin: 0 0 1.5rem 0;
}

.group p span {
  border-bottom: 1px dotted currentColor;
}

.group p span:hover {
  color: #666;
}