body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color: #888;
    line-height: 20px;
    text-align: center;

}
i:hover {
  color: #555555;
  transform: rotate(450deg);
}
.membro{
    width:100%;
    float:left;
    margin-top:10px;
    padding:10px 0 40px;
    color: #fff;
    text-align:center;
}
.membro a{
    margin-top:10px;
    padding: 100px 0 40px;
    color: #fff;
}
.acesso{padding:60px 0 40px;color:#fff;font-size:28px; }
.slogan{padding:60px 0 40px;color:#fff;font-size:20px;}
.form-logo {
    float:left;
    width:100%;
    max-width: 250px;
    padding: 15px; 
    height:400px;
    background: #f81b00; 
    background: #080808;  
    text-align: left;
}
 .form-login {
  float:right;
  width:100%;
  max-width: 350px;
  padding: 15px; 
  height:400px; 
    background: #272525; 
    background: rgba(205, 216, 224, 0.2)
}

.form-signin {
    width:100%;
  max-width: 630px;
  padding: 15px;
  margin: 0 auto;
} 

.ul {
    list-style: none;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: 300;
    margin: 40px 0 12px 20px;
    padding: 0;
}   

.ul li{
    padding:5px

}
  
button.btn {
	height: 50px;
    margin: 0;
    padding: 0 20px;
    vertical-align: middle;
    background: #de615e;
    border: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 50px;
    color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
    text-shadow: none;
    -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}


@media (min-width: 992px) and (max-width: 3999px) 
{
    .form-signin 
    {
        margin-top: 200px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {}

@media (max-width: 767px) 
{ 
        .slogan{padding:30px 0 40px;color:#fff}
        .form-logo {
             float:left;
            width:100%;
            max-width: 215px;
            padding: 15px; 
            height:200px; 
            text-align: left;
        }
         .ul
        {
            display:none;
        }
        .acesso
        {
            display:none;
        }
        .form-login 
        {
           float:right;
            max-width: 350px;
            padding: 15px; 
            height:200px;
        }

} 
@media (max-width: 500px) {
	
        .ul
        {
            display:none;
        }
        .slogan{padding:30px 0 40px;color:#fff}
        .form-logo {
            width:100%;
            max-width: 350px;
            padding: 15px; 
            height:200px;  
            text-align: left;
        }
        .acesso
        {
            display:none;
        }
        .form-login 
        {
            height:200px;
        }

} 
 

.container{
    position:absolute;
    width:100%;
    height:100%;
    min-height:100%;
    max-width:100%;
    padding:0;
    margin:0;
}
.overlay {
    background: rgba(0,0,0,.5);
}
.input-error {
	border-color: #de615e;
}


.login-button {

  padding:50px;
  background: #ffffff;
  color: #999999;
  padding: 11px 0;
  width: 50px;
  height: 50px;
  border: 5px solid #efefef;
  border-radius: 50%;
  transition: all ease-in-out 500ms;
  outline: none;
}
.login-button:hover {
    outline: none;
  color: #555555;
  transform: rotate(450deg);
}
.login-button.clicked {
    outline: none;
  color: #555555;
}
.login-button.clicked:hover {
    outline: none;
  transform: none;
}
.login-button.clicked.success {
  color: #2ecc71;
}
.login-button.clicked.error {
    outline: none;
  color: #e74c3c;
}

.login-form-main-message {
  background: #ffffff;
  color: #999999;
  border-left: 3px solid transparent;
  border-radius: 3px;
  margin-bottom: 8px;
  font-weight: bold;
  height: 0;
  padding: 0 20px 0 17px;
  opacity: 0;
  transition: all ease-in-out 200ms;
}
.login-form-main-message.show {
  height: auto;
  opacity: 1;
  padding: 10px 20px 10px 17px;
}
.login-form-main-message.success {
  border-left-color: #2ecc71;
}
.login-form-main-message.error {
  border-left-color: #e74c3c;
}