@import "colors"

.auth
  position: fixed
  top: 0
  bottom: 0
  left: 0
  right: 0
  background: url(/images/big.jpg)

  &-box

    width: 100%
    border: 1px solid #ccc
    background-color: rgba(0,0,0,.7)
    padding: 20px


.auth-box-wrapper
  width: 400px
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)


.form-control
  color: rgb(95, 108, 114);
  height: 35px;
  vertical-align: top;
  width: 100%;
  background: #ffffff;
  column-rule-color: rgb(95, 108, 114);
  perspective-origin: 92.625px 21.6875px;
  transform-origin: 92.625px 21.6875px;
  border: 1px solid rgb(218, 223, 226);
  border-radius: 3px 3px 3px 3px;
  font-weight: 200;
  margin: 10px 0px 5px;
  outline: rgb(95, 108, 114) none 0px;
  padding: 11.2px;
  padding-top: 8px;
  padding-bottom: 6px;
  transition: border-color 0.3s ease 0s;
  box-shadow: 0px 0px 0px;


.auth-box
  color: #fff
.column-8
  width: 50%
  float: left


.auth-box-social
  margin-bottom: 80px
  margin-top: 20px

  button
    cursor: pointer;
    width: 100%
    display: inline-block;
    min-height: 1em;
    outline: 0;
    border: none;
    vertical-align: baseline;

    font-family: 'Lato','Helvetica Neue',Arial,Helvetica,sans-serif;
    margin: 0 .25em 0 0;
    padding: .78571429em 1.5em;
    text-transform: none;
    text-shadow: none;
    font-weight: 700;
    line-height: 1em;
    font-style: normal;
    text-align: center;
    text-decoration: none;
    border-radius: .28571429rem;
    box-shadow: 0 0 0 1px transparent inset, 0 0 0 0 rgba(34,36,38,.15) inset;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    transition: opacity .1s ease,background-color .1s ease,color .1s ease,box-shadow .1s ease,background .1s ease;
    will-change: '';
    -webkit-tap-highlight-color: transparent;

    i
      margin-right: 5px
      margin-top: 5px

.left
  padding-right: 5px

.right
  padding-left: 5px

.fb-btn
  background-color: #3B5998;
  color: #FFF;
  text-shadow: none;
  background-image: none;
  box-shadow: 0 0 0 0 rgba(34,36,38,.15) inset;

.gg-btn
  background-color: #DD4B39;
  color: #FFF;
  text-shadow: none;
  background-image: none;
  box-shadow: 0 0 0 0 rgba(34,36,38,.15) inset;

.auth-box-devider
  margin: 1em auto
  position: relative
  text-align: center
  color: #fff
.auth-box-devider:before
  left: 0;

.auth-box-devider:before, .auth-box-devider:after
  display: inline-block;
  width: 43%;
  border-top: 1px solid #ccc;
  content: " ";
  position: absolute;
  top: .5em;


.auth-box-devider:after
  right: 0;


.auth-box-devider:before, .auth-box-devider:after
  display: inline-block;
  width: 43%;
  border-top: 1px solid #ccc;
  content: " ";
  position: absolute;
  top: .5em;

#sign_up
  color: rgb(255,255,255);
  cursor: pointer;
  height: 44.1875px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  width: 100%;
  margin-top: 10px
  column-rule-color: rgb(255,255,255);
  align-items: flex-start;
  perspective-origin: 191px 22.0938px;
  transform-origin: 191px 22.0938px;
  background: #45B39D none repeat scroll 0% 0%/ auto padding-box border-box;
  border: 0px none rgb(255, 255, 255);
  border-radius: 3px 3px 3px 3px;
  outline: rgb(255, 255, 255) none 0px;
  overflow: hidden;
  padding: 15.6px;
  padding-top: 8px;
  padding-bottom: 8px;
  position: relative;
  height: 50px;
  &:hover
    background: #16A085

.login-footer
  margin-top: 10px
  color: #fff
  a
    color: $gb-1
    &:hover
      text-decoration: underline

.input-error
  padding: 0 10px
  font-size: 13px
  color: #ef402e
