#login-page { background-image: url("https://easyblue.com.br/template/www/default/images/background/ocean.jpg"); background-position:center center;background-size:cover; } .login-container { margin:10px auto 0 auto; text-align:center; } .login-container a, .login-container p { color:#fff; } .login-container a:hover { text-decoration:underline; } .login-container .card { display:inline-block; min-width:400px; max-width:400px; vertical-align:middle; text-align:left; } .login-container .card-body { padding:15px 25px; } .login-container i.fa { color:#d5d5d5; font-size:18px; } .login-container .card-header { text-align:center; } .bgm-blue { background-color: #4267B2 !important; } @media (max-width: 450px) { .login-container .card { min-width:90%; } } #login h3 { font-size:16px; margin:0 0 20px 0; font-weight:normal; } #login hr { margin:30px 0; } #login .social-buttons { } #login .social-buttons a {  height:40px; line-height:30px; position:relative; text-align:center; color:#fff; margin:0 5px; -webkit-transition: all; -o-transition: all; transition: all; -webkit-transition-duration: 200ms; transition-duration: 200ms; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; display: block; } #login .social-buttons a:hover { text-decoration: none; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } #login .social-buttons a i { font-size:25px; line-height:30px; float: left; } .loginbox-or { height:20px; text-align:center; position:relative; margin:20px 0; } .loginbox-or .or-line {  background-color: #e5e5e5;   height: 1px;   left: 10px;   position: absolute;   right: 10px;   top: 10px; } .loginbox-or .or {  background-color: #fff;   color: #999;   height: 20px;   left: calc(50% - 25px);   margin: 0 auto;   position: absolute;   top: 0;   width: 50px; }