/*
*** --- Button main styles & colors --- ****
*/
.deep-purple {
  background: #5E35B1;
  color: #5E35B1;
  border: 1px solid #5E35B1;
  fill: #5E35B1;
}
.deep-purple:hover, .deep-purple:hover:after, .deep-purple.btn-fillup:after {
  background: #49298a;
  color: #49298a;
  border: 1px solid transparent;
}

.indigo {
  background: #3F51B5;
  color: #3F51B5;
  border: 1px solid #3F51B5;
  fill: #3F51B5;
}
.indigo:hover, .indigo:hover:after, .indigo.btn-fillup:after {
  background: #32408f;
  color: #32408f;
  border: 1px solid transparent;
}

.blue {
  background: #2196F3;
  color: #2196F3;
  border: 1px solid #2196F3;
  fill: #2196F3;
}
.blue:hover, .blue:hover:after, .blue.btn-fillup:after {
  background: #0c7cd5;
  color: #0c7cd5;
  border: 1px solid transparent;
}

.light-blue {
  background: #03A9F4;
  color: #03A9F4;
  border: 1px solid #03A9F4;
  fill: #03A9F4;
}
.light-blue:hover, .light-blue:hover:after, .light-blue.btn-fillup:after {
  background: #0286c2;
  color: #0286c2;
  border: 1px solid transparent;
}

.cyan {
  background: #00BCD4;
  color: #00BCD4;
  border: 1px solid #00BCD4;
  fill: #00BCD4;
}
.cyan:hover, .cyan:hover:after, .cyan.btn-fillup:after {
  background: #008fa1;
  color: #008fa1;
  border: 1px solid transparent;
}

.teal {
  background: #009688;
  color: #009688;
  border: 1px solid #009688;
  fill: #009688;
}
.teal:hover, .teal:hover:after, .teal.btn-fillup:after {
  background: #00635a;
  color: #00635a;
  border: 1px solid transparent;
}

.green {
  background: #b0d139;
  color: #b0d139;
  border: 1px solid #b0d139;
  fill: #b0d139;
}
.green:hover, .green:hover:after, .green.btn-fillup:after {
  background: #91ae29;
  color: #91ae29;
  border: 1px solid transparent;
}

.light-green {
  background: #8BC34A;
  color: #8BC34A;
  border: 1px solid #8BC34A;
  fill: #8BC34A;
}
.light-green:hover, .light-green:hover:after, .light-green.btn-fillup:after {
  background: #71a436;
  color: #71a436;
  border: 1px solid transparent;
}

.lime {
  background: #CDDC39;
  color: #CDDC39;
  border: 1px solid #CDDC39;
  fill: #CDDC39;
}
.lime:hover, .lime:hover:after, .lime.btn-fillup:after {
  background: #b2c022;
  color: #b2c022;
  border: 1px solid transparent;
}

.yellow {
  background: #FFEB3B;
  color: #FFEB3B;
  border: 1px solid #FFEB3B;
  fill: #FFEB3B;
}
.yellow:hover, .yellow:hover:after, .yellow.btn-fillup:after {
  background: #ffe608;
  color: #ffe608;
  border: 1px solid transparent;
}

.amber {
  background: #FFB300;
  color: #FFB300;
  border: 1px solid #FFB300;
  fill: #FFB300;
}
.amber:hover, .amber:hover:after, .amber.btn-fillup:after {
  background: #cc8f00;
  color: #cc8f00;
  border: 1px solid transparent;
}

.orange {
  background: #E64A19;
  color: #E64A19;
  border: 1px solid #E64A19;
  fill: #E64A19;
}
.orange:hover, .orange:hover:after, .orange.btn-fillup:after {
  background: #b83b14;
  color: #b83b14;
  border: 1px solid transparent;
}
.red {
  background: #E60012;
  color: #E60012;
  border: 1px solid #E60012;
  fill: #E60012;
}
.red:hover, .red:hover:after, .red.btn-fillup:after {
  background: #b83b14;
  color: #b83b14;
  border: 1px solid transparent;
}
/*
*** --- Lines button --- ****
*/
.btn-lines {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 37px;
  margin: 15px 0;
  border: 1px solid #eee;
  text-align: center;
}
.btn-lines small {
  line-height: 34px;
}
.btn-lines div[class^=line] {
  position: absolute;
  border: 0px solid transparent;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn-lines .line-top {
  top: -1px;
  left: -1px;
  width: 0;
  height: 1px;
}
.btn-lines .line-right {
  bottom: 0;
  right: -1px;
  width: 1px;
  height: 0;
}
.btn-lines .line-bottom {
  bottom: -1px;
  right: -1px;
  width: 0;
  height: 1px;
}
.btn-lines .line-left {
  top: 0;
  left: -1px;
  width: 1px;
  height: 0;
}
.btn-lines:hover .line-top, .btn-lines:hover .line-bottom {
  width: 100px;
}
.btn-lines:hover .line-right, .btn-lines:hover .line-left {
  height: 36px;
}

/*
*** --- Default button --- ****
*/
.btn, .btn:hover, .btn:focus, .btn:active, .btn:active:focus {
  color: #fff;
  font-size: 13px;
  font-weight: 300;
  padding: 12px 20px;
  margin: 15px 0;
  border: 1px solid transparent;
  border-radius: 0;
  outline: none;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

/*
*** --- Fill up button --- ****
*/
.btn-fillup {
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  position: relative;
  display: inline-block;
  padding: 12px 30px;
  margin: 15px auto 0;
  overflow: hidden;
  zoom: 1;
  border: 0;
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}
.btn-fillup.dark {
  border: 0px solid rgba(0, 0, 0, 0.4);
}
.btn-fillup.dark:hover {
  background: transparent;
  color: #fff;
  border: 0px solid transparent;
}
.btn-fillup:after {
  position: absolute;
  content: "";
  left: 50%;
  top: 60px;
  width: 200px;
  height: 200px;
  margin: 0 0 0 -100px;
  border: 0;
  z-index: -1;
  -webkit-transform: traslateY(0px);
  -moz-transform: traslateY(0px);
  -ms-transform: traslateY(0px);
  -o-transform: traslateY(0px);
  transform: traslateY(0px);
  -webkit-transition: transform 0.3s ease-out;
  -moz-transition: transform 0.3s ease-out;
  -ms-transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.btn-fillup:hover:after {
  -webkit-transform: translateY(-100px);
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -o-transform: translateY(-100px);
  transform: translateY(-100px);
}

/*
*** --- Ghost button --- ****
*/
.btn-ghost {
  background: transparent;
  font-weight: 300;
  position: relative;
  display: inline-block;
  margin: 15px 0;
  padding: 12px 20px;
  line-height: 1;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.btn-ghost:hover {
  color: #fff;
}

/*
*** --- Strong style --- ****
*/
.btn-strong-style {
  font-size: 12px;
  text-transform: uppercase;
  padding: 14px 25px;
  font-weight: 600;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}

/*
*** --- Underlined button --- ****
*/
.btn-underline {
  background: transparent;
  font-weight: 300;
  font-size: 14px;
  position: relative;
  display: inline-block;
  margin: 15px 0;
  padding: 4px 0;
  border: 0px solid transparent;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
}
.btn-underline:hover {
  background: transparent;
  border: 0px solid transparent;
}
.btn-underline:hover:after {
  width: 100%;
  left: 0;
  border: 0px solid transparent !important;
}
.btn-underline:after {
  background: transparent;
  position: absolute;
  content: "";
  height: 1px;
  width: 0;
  bottom: 0;
  left: 50%;
  -webkit-transition: compact(all 0.3s ease);
  -moz-transition: compact(all 0.3s ease);
  -ms-transition: compact(all 0.3s ease);
  transition: compact(all 0.3s ease);
}