/******************* LOGIN MODAL ************/


@import url('https://fonts.googleapis.com/css?family=Raleway');


.modal-content {
  background:url(/br/img/bg-log.jpg) no-repeat center;
  box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
  padding:0;
  min-width: 400px;
  border: 1px #000;
  border-radius: 15px;}

.modal-body {  
  background:rgba(40,57,101,.9);
  font-family: 'Raleway', sans-serif ;
  border-radius: 15px;}

.btn-block {
  margin-top:20px;
  padding:20px;
  margin-bottom:20px;
  font-size:18px;}

.log-bg { 
  width: 100%;
  position: relative;
  background: rgba(255,255,255,.24);
  border-radius: 25px;
  margin-top: 30px; }

.log-group { 
  position: relative;
  margin: auto;
  width: 80%;}

.log-input {
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  -webkit-appearance: none;
  display: block;
  background: none;
  color: #ffffff;
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #eeeeee; }

.log-input:focus { 
  outline: none; }

.log-label {
  color: #1025a4; 
  text-shadow: 2px 2px 5px #444;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 10px;
  transition: all 0.2s ease; }

.log-input:focus ~ .log-label, .log-input.used ~ .log-label {
  top: -20px;
  color: #fff;
  transform: scale(.75); left:-15px; }

.log-bar {
  position: relative;
  display: block;
  width: 100%;}

.log-bar:before, .log-bar:after {
  content: '';
  height: 2px; 
  width: 0;
  bottom: 1px; 
  position: absolute;
  background: #ffffff; 
  transition: all 0.2s ease;}

.log-bar:before { left: 50%; }

.log-bar:after { right: 50%; }

.log-input:focus ~ .log-bar:before, .log-input:focus ~ .log-bar:after { width: 50%; }

.log-highlight {
  position: absolute;
  height: 60%; 
  width: 100px; 
  top: 25%; 
  left: 0;
  pointer-events: none;
  opacity: 0.5;}

.log-input:focus ~ .log-highlight {
  animation: inputHighlighter 0.3s ease;}

#env {
  color: #f0d0d0;
  font-weight: 600; }

#forgot {
  font-size: .8em; }

@media  screen and (max-width: 767px) and (min-width: 576px) {
    #log {margin-left:20%;margin-right:20%;} } 

@media screen and (min-width: 768px) {
  #log .modal-dialog {width:500px;}
  .modal-body{padding-left:50px;padding-right:50px;} }