@charset "UTF-8";
@import url(entypo.css);
/*
================
The Icon-objectÔäó
================

The Icon-ObjectÔäó that holds the unicode entities for our icons, so we can reference them by name instead of looking up the hex code every time we need one.
*/
/*
Color variables are imported from another pen, just to make stuff easier to read
*/
/*
=======================
The Button Mixin.======
=======================

=It takes 3 arguments:=
- the background-color ($bg),
in our case we will pass it the color vars we defined above.

- the icon ($icon),
takes one of the named icons from the Icon-ObjectÔäó

- the icon position ($iconPosition)
Vald values are 'left' and 'right'

=And does fancy stuff=
1. Figure out the lightness of the passed background-color via the lightness() function and set either a dark or a light text color.

2. Loop over the Icon-ObjectÔäó until the name matches the passed $icon parameter and then

  2.1 If $iconPosition == right select the :after element and set the corresponding unicode entity as the 'content' value.
*/
/*
Calling the Mixin for the different buttons
*/
.danger {
  padding: 1.2em 2.3em;
  /*
  Setting the color based on the background, as described above (1)
  */
  /*
  Adding the icons, see (2)
  */
  padding-right: 3.5em;
  color: #fbdedb;
  display: inline-block;
  background: #e74c3c;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: sans-serif;
  font-weight: 800;
  font-size: .8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.2em solid #e32f1c;
  position: relative;
}
.danger:hover, .danger:focus {
  background: #e43725;
  color: #fdf3f2;
}
.danger:after {
  content: "⚠";
  right: 1.5em;
}
.danger:before, .danger:after {
  display: inline-block;
  font-family: entypo;
  position: absolute;
}
.danger:active {
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.danger:hover, .danger:focus {
  box-shadow: 0 0 0 5px #f29f97;
}

.signup {
  padding: 1.2em 2.3em;
  /*
  Setting the color based on the background, as described above (1)
  */
  /*
  Adding the icons, see (2)
  */
  padding-left: 3.5em;
  color: #d8e6fc;
  display: inline-block;
  background: #347EED;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: sans-serif;
  font-weight: 800;
  font-size: .8em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: .7em;
  border-bottom: 0.2em solid #1569e9;
  position: relative;
}
.signup:hover, .signup:focus {
  background: #1d6feb;
  color: #eff5fe;
}
.signup:before {
  content: "✓";
  left: 1.5em;
}
.signup:before, .signup:after {
  display: inline-block;
  font-family: entypo;
  position: absolute;
}
.signup:active {
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.signup:hover, .signup:focus {
  border-radius: .5em;
  box-shadow: 0 0 0 5px #92baf5;
}

.save {
  padding: 1.2em 2.3em;
  /*
  Setting the color based on the background, as described above (1)
  */
  /*
  Adding the icons, see (2)
  */
  padding-right: 3.5em;
  color: #d7fcdb;
  display: inline-block;
  background: #31F042;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: sans-serif;
  font-weight: 800;
  font-size: .8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.2em solid #11ec25;
  position: relative;
}
.save:hover, .save:focus {
  background: #19ee2c;
  color: #effef0;
}
.save:after {
  content: "💾";
  right: 1.5em;
}
.save:before, .save:after {
  display: inline-block;
  font-family: entypo;
  position: absolute;
}
.save:active {
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.save:hover, .save:focus {
  box-shadow: 0 0 0 5px #90f799;
}

.fb {
  padding: 1.2em 2.3em;
  /*
  Setting the color based on the background, as described above (1)
  */
  /*
  Adding the icons, see (2)
  */
  padding-left: 3.5em;
  color: #a8b9dd;
  display: inline-block;
  background: #3B5998;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: sans-serif;
  font-weight: 800;
  font-size: .8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.2em solid #314a7e;
  position: relative;
}
.fb:hover, .fb:focus {
  background: #344e86;
  color: #bbc8e4;
}
.fb:before {
  content: "";
  left: 1.5em;
}
.fb:before, .fb:after {
  display: inline-block;
  font-family: entypo;
  position: absolute;
}
.fb:active {
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.fb:hover, .fb:focus {
  box-shadow: 0 0 0 5px #718dc8;
}

.twitter {
  padding: 1.2em 2.3em;
  /*
  Setting the color based on the background, as described above (1)
  */
  /*
  Adding the icons, see (2)
  */
  padding-left: 3.5em;
  color: #f3f8ff;
  display: inline-block;
  background: #4099FF;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: sans-serif;
  font-weight: 800;
  font-size: .8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.2em solid #1c86ff;
  position: relative;
}
.twitter:hover, .twitter:focus {
  background: #268bff;
  color: white;
}
.twitter:before {
  content: "";
  left: 1.5em;
}
.twitter:before, .twitter:after {
  display: inline-block;
  font-family: entypo;
  position: absolute;
}
.twitter:active {
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.twitter:hover, .twitter:focus {
  box-shadow: 0 0 0 5px #a6cfff;
}

.power {
  padding: 1.2em 2.3em;
  /*
  Setting the color based on the background, as described above (1)
  */
  /*
  Adding the icons, see (2)
  */
  color: #fffde8;
  display: inline-block;
  background: #FFEF35;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-family: sans-serif;
  font-weight: 800;
  font-size: .8em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 0.2em solid #ffec11;
  position: relative;
}
.power:hover, .power:focus {
  background: #ffed1c;
  color: white;
}
.power:before, .power:after {
  display: inline-block;
  font-family: entypo;
  position: absolute;
}
.power:active {
  -moz-transform: scale(0.92);
  -ms-transform: scale(0.92);
  -webkit-transform: scale(0.92);
  transform: scale(0.92);
}
.power:hover, .power:focus {
  box-shadow: 0 0 0 5px #fff79b;
}

/*
Base Styles
*/
.demo a {
  margin: 1em;
}