$gen-font: 'Roboto', sans-serif;
@mixin button-properties($borderpx,$border-color, $color, $padding, $btnwidth, $font, $fsize, $fweight){
  border: $borderpx solid $border-color;
  color: $color;
  padding: $padding; width: $btnwidth;
  font-family:$font; font-size:$fsize; font-weight:$fweight;
}
@mixin vertical-center(){
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);transform: translateY(-50%);
}
html, html a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

body{
  margin:0;
  width:100%;
}
.set_wrapper{
  width:80%;
  margin:0 auto;
  max-width:920px;
  min-width: 920px;
}
.button-container{
  margin-top: 60px; margin-left: 60px;
  display:inline-block;
  vertical-align:top;
}
.btn{
  @include background-image(linear-gradient($capota-light,$capota));
  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
  @include button-properties(1px,$capota-dark, white, 6px 25px, auto, $gen-font, 0.8em, 600);
  border-radius:4px;
  text-align: center;
  cursor:pointer;
  &:hover{
    @include background-image(linear-gradient($capota-light,$capota-dark));
  }
  &:active{
    @include background-image(linear-gradient($capota-light,$capota));
    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(16, 90, 134, 1), inset);
  }
}
.btn-orange{
  @include background-image(linear-gradient($darkorange-light,$darkorange));
  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
  @include button-properties(1px,$darkorange-dark, white, 6px 25px, auto, $gen-font, 0.8em, 600);
  border-radius:4px;
  text-align: center;
  cursor:pointer;
  &:hover{
    @include background-image(linear-gradient($darkorange-light,$darkorange-dark));
  }
  &:active{
    @include background-image(linear-gradient($darkorange-light,$darkorange));
    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(152, 59, 3, 0.87), inset);
  }
}
.btn-inactive{
  background: $lightgrey;
  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
  @include button-properties(1px,$auxgrey, $auxgrey, 6px 25px, auto, $gen-font, 0.8em, 600);
  border-radius:4px;
  text-align: center;
  cursor: not-allowed;
}
.btn-icon{
  padding:6px 20px;
  .fa{
    padding-right:4px;
    font-size: 1.4em;
    vertical-align: text-top;
  }
  span{
    padding-left:3px;
  }
}

/*------Social Connect Buttons-------*/
$twitter:#4099FF;
$facebook:#3D62B3;
$gplus:#D50F0F;
$twitter-light:lighten(#4099FF,8);
$facebook-light:lighten(#3D62B3,8);
$gplus-light:lighten(#D50F0F,8);
$twitter-dark:darken(#4099FF,8);
$facebook-dark:darken(#3D62B3,8);
$gplus-dark:darken(#D50F0F,8);

.btn-twitter{
  @include background-image(linear-gradient($twitter-light,$twitter));
  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
  @include button-properties(1px,$twitter-dark, white, 6px 0px, 190px, $gen-font, 0.8em, 600);
  border-radius:4px;
  text-align: center;
  cursor:pointer;
  .fa{
    padding-right: 7px;
    display:inline-block;
  }
  span{
    padding-right: 5px;
    display:inline-block;
    width: 3px;
    border-left: 1px solid $twitter-dark;
  }
  p{
    display:inline-block;
    margin:0;
    padding-right: 18px; padding-left: 13px;
  }
  &:hover{
    @include background-image(linear-gradient($twitter-light,$twitter-dark));
  }
  &:active{
    @include background-image(linear-gradient($twitter-light,$twitter));
    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(45, 116, 197, 1), inset);
  }
}
.btn-facebook{
  @include background-image(linear-gradient($facebook-light,$facebook));
  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
  @include button-properties(1px,$facebook-dark, white, 6px 0px, 190px, $gen-font, 0.8em, 600);
  border-radius:4px;
  text-align: center;
  cursor:pointer;
  .fa{
    padding-right: 11px;
    display:inline-block;
  }
  span{
    padding-right: 13px;
    display:inline-block;
    width: 3px;
    border-left: 1px solid $facebook-dark;
  }
  p{
    display:inline-block;
    margin:0;
    padding-right:5px;
  }
  &:hover{
    @include background-image(linear-gradient($facebook-light,$facebook-dark));
  }
  &:active{
    @include background-image(linear-gradient($facebook-light,$facebook));
    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(10, 45, 123, 1), inset);
  }
}
.btn-gplus{
  @include background-image(linear-gradient($gplus-light,$gplus));
  @include single-box-shadow(0px, -1px, 0px, 0px,rgba(255, 255, 255, 0.15), inset);
  @include button-properties(1px,$gplus-dark, white, 6px 0px, 190px, $gen-font, 0.8em, 600);
  border-radius:4px;
  text-align: center;
  cursor:pointer;
  .fa{
    padding-right: 7px;
    display:inline-block;
  }
  span{
    padding-right: 15px;
    display:inline-block;
    width: 3px;
    border-left: 1px solid $gplus-dark;
  }
  p{
    display:inline-block;
    margin:0;
    padding-right:12px;
  }
  &:hover{
    @include background-image(linear-gradient($gplus-light,$gplus-dark));
  }
  &:active{
    @include background-image(linear-gradient($gplus-light,$gplus));
    @include single-box-shadow(0px, 1px, 4px, 0px,rgba(152, 59, 3, 0.87), inset);
  }
}
.h30{
  height: 30px;
}

.input-box{
  @include border-left-radius(4px);
  border: 1px solid $auxgrey;
  outline: none;
  display: inline-block;
  vertical-align:top;
  height:26px;
  padding-left:10px;
}
.input-btn{
  @include border-left-radius(0);
  width: auto;
  height:30px;
  padding: 0px 9px;
  display: inline-block;
  position: relative;
  left: -7px;
  outline: none;
  vertical-align: top;
}
.inactive{
  background: $lightgrey;
  color: $auxgrey;
  border: 1px solid $auxgrey;
  cursor: not-allowed;
  outline: none;
  box-shadow:none;
  &:hover{
    @extend .inactive;
  }
  &:active{
    @extend .inactive;
  }
}