section {
  transition: all 0.2s linear;
}
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  background: #fff;
  border-bottom: 1px solid #ddd;
}
a.navbar-brand {
  font-weight: bold;
}
/****** LOGIN MODAL ******/
.loginmodal-container {
  padding: 30px;
  max-width: 350px;
  width: 100% !important;
  background-color: #F7F7F7;
  margin: 0 auto;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  font-family: 'Calibri';
  position: relative;
}

.loginmodal-container h1 {
  text-align: center;
  font-size: 1.8em;
  font-family: 'Calibri';
}

.loginmodal-container input[type=text], input[type=password] {

  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
}

div.animate {
  padding-bottom: 5px;
}

div.animate, div.animate2{
  position: relative;
}

label[for="user"]{  
    display: block;
    position: absolute;
    margin-top:0px;
    margin-left: 0px;
    color: gray;
    font-weight: normal;
    font-size: 16px;
    font-family: 'Calibri';
    z-index: 1;
    transition: all 0.3s ease;
}

label[for="pass"]{  
    display: block;
    position: absolute;
    margin-top:10px;
    margin-left: 0px;
    color: gray;
    font-weight: normal;
    font-size: 16px;
    font-family: 'Calibri';
    z-index: 1;
    transition: all 0.3s ease;
}

input[name="user"]{
    display: block;
    position: absolute;
    background: none;
    border: none;
    border-bottom: 1px solid #ddd;
    width: 100%;
    z-index: 2;
    font-family: 'Calibri';
    font-size: 14px;
    color: gray;
}

input[name="pass"] {
    display: block;
    position: absolute;
    background: none;
    border: none;
    border-bottom: 1px solid #ddd;
    margin-top: 10px;
    width: 100%;
    z-index: 2;
    font-family: 'Calibri';
    font-size: 14px;
    color: gray;
}

input[name="user"]:focus{
  outline: none;
  border-bottom: 1px solid #337ab7;
}

input[name="pass"]:focus{
  outline: none;
  border-bottom: 1px solid #337ab7;
}

input[name="user"]:focus + label{
  margin-top: -13px;
  font-size: 12px;
  color: #337ab7;
}

input[name="pass"]:focus + label{
  margin-top: -8px;
  font-size: 12px;
  color: #337ab7;
}

input[name="user"]:focus ~ label, input[name="user"].used ~ label {
  margin-top: -13px;
  font-size: 12px;
  color: #337ab7;
}

input[name="pass"]:focus ~ label, input[name="pass"].used ~ label {
  margin-top: -8px;
  font-size: 12px;
  color: #337ab7;
}

.loginmodal-submit {
  /* border: 1px solid #3079ed; */
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #4d90fe;
  margin-top: 50px;
  padding: 17px 45%;
  font-family: 'Calibri';
  font-size: 14px;
  border-radius: 2px;
  transition: all 0.2s linear;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover {
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #357ae8;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}