<div class="wrapper">
  
  
  <div class="wrapper-content">
    
    <button type="button"><i class="fa fa-facebook"></i></button>
      <button type="button"><i class="fa fa-twitter"></i></button>
   
   
		  					  
      
		 
    
    <div class="or-email"><span>Or  via  email</span></div>
    
    <form>
                            <input type="text" class="user-email" id="email" placeholder="Email" autocomplete="off"> 
                           <input type="password" class="user-pasword" id="password" placeholder="Password" autocomplete="off">
                         </form>
    
    
    <div class="logout">
                             <input type="submit" value="Login">
      
        
                         </div>
    <a href="#" class="forgot-pass">Forgotten password?</a>
    
    
  </div>
  
  
  
</div>

body{
  
 
  font-family:1em/1.5 'Open Sans', sans-serif;
    background: #EA5C54 ; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #542826  0%, #3A0F54 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#542826 ), color-stop(100%,#3A0F54)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg,  #542826  0%,#3A0F54 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  #542826  0%,#3A0F54 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  #542826 0%,#3A0F54 100%); /* IE10+ */
  background: linear-gradient(135deg,  #542826  0%,#3A0F54 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EA5C54 ', endColorstr='#bb6dec',GradientType=1 );
   background-blend-mode: overlay;
  -webkit-background-blend-mode: overlay;
    
}

.wrapper{
  width:100%;
  &-content{
     position:relative;
     width:25%;
      margin:100px auto;
     background: #35394a; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #35394a 0%, #1f222e 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#35394a), color-stop(100%,#1f222e)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* IE10+ */
    background: linear-gradient(45deg,  #35394a 0%,#1f222e 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35394a', endColorstr='#1f222e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
  
    padding:20px 30px;
    button{
    width: 45%;
    padding: 11px 0 24px;
    outline:initial;
   background-color:#1da1f2;
    border-radius: 10px;
    color: #fff;
    border: 1px solid rgba(46, 46, 47, 0.72);
      &:first-child{
        background:#45619D;
      }
  
  i{
    position:absolute;
   }
  }
  
}



  .hed-fb {
    display:inline;
    position:relative;
   
  }
  h3{
    padding:10px 0 0;
    text-align:center;
    font-size:.9rem;
    letter-spacing:.1rem;
    
    
 }
}

.or-email{
  text-align:center;
  color:#fff;
  line-height:5rem;
  span{
     font-size:.9rem;
      letter-spacing: .1rem;
    font-weight:400;
  }
}

form {
    border: 0;
    display: block;
    width: 100%;
}
input[type="text"], input[type="password"] {
  
    font-size: 1em;
    font-weight: 600;
    letter-spacing: .1rem;
     padding:0 5px;
     outline:none;
}
.user-name{
   border-bottom: 1px solid #4d4d4d;
}

.user-pasword{
  @extend .user-name;
  &:hover{
    background-color:#272a2c;
  }
}
.user-email{
     @extend .user-name;
      &:hover{
    background-color:#272a2c;
  }
}



input {
    border: 0;
    width: 100%;
    height: 68px;
    background-color: transparent;
    &:focus{
    outline:initial;
  }
}



.logout {
   display:inline-block;
    width: 30%;
    text-align: center;
 background-color: rgba(39, 42, 44, 0.23);
    padding: 2px;
    margin: 60px 0 10px;
    border-radius: 50px;
  border: 2px solid #DC6180;
    color: #DC6180;
}

input[type="submit"] {
    height: 30px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
     color:#fff;
    font-size: 1em;
    font-weight: 100;
    letter-spacing: .1rem;
  &:hover{
    background-color:#1a1c1d;
  }
}

.forgot-pass{
  font-size:.9rem;
  padding:0 30px 0 56px;
  color: #606479;
}

@media (max-width:1170px) {
  .wrapper-content {
    width:65%;
  }
}