@import "compass/css3";

.btn {
  display: inline-block;
  background: #0968aa;
  border: 0;
  line-height: 2.5em;
  outline: none;
  text-decoration: none;
  color: #ffffff;
  }
  
  .arrow {
    /*display: inline-block;*/
    line-height: 2.5em;
    text-align: center;
    /*background: #607D8B;*/
    color: white;
    font-size: 1em;
    width: 2.5em;
    transition: margin 200ms;
    /*margin-left: .75em;*/
  }
  
  &:hover {
    background: white;
    .arrow {
      margin-left: 1.25em;
      background-color: darken(#333,5%);
    } 
  }
  &:active {
    background: #ccc;
    .arrow {
      margin-left: 1.5em;
    } 
  }
}

.btn-info {
  .arrow {
    background-color: indianred;
  }
  &:hover {
    .arrow {
      background-color: desaturate(darken(indianred,5%),5%);
    }
  }
}

.btn-learn {
  .arrow {
    background-color: salmon;
  }
  &:hover {
    .arrow {
      background-color: desaturate(darken(salmon,5%),5%);
    }
  }
}




/*// Remove Focus*/ 

button::-moz-focus-inner {
    border: none;
}








/*// Body 

body {
  padding: 4em;
  background-color: #eee;
}

h1 {
  font-size: 20px;
  font-weight: normal;
  text-align:justify;
  color: #000000;
}

hr {
  border: 1px solid #e3e3e3;
}

.left {
  text-align: left;
}
.right {
  text-align: right;
}
.center {
  text-align: center;
}*/