.login-option{
  margin: 2em 8% 1em 0;
  width: 370px;
  display: inline-block;
  vertical-align: top;
}

@media screen and (max-width: 480px) {
  .login-option{
    width: 100%;
  }
}

@media screen and (max-device-width: 480px){
  .login-option{
    font-size: 3em;
    width: 100%;
  }
  
  .login-option h2{
    font-size: 1.1em;
    font-weight: bold;
  }
}

h3.option-subheader{
  letter-spacing: -0.25px;
  font-size: 1.1em;
  margin-bottom: 1.5em
}

@media screen and (max-device-width: 480px){
  h3.option-subheader{
    font-size: 1.1em;
  }
}

button.expandable{
  font-family: "Open Sans", sans-serif;
  padding: 10px 20px;
  background-color: #0577b1;  
  color: #fff;
  font-size: 110%;
  width: 100%;
  border: 0;
  text-align: left;
}

button.expandable i.fa{
  color: #38AEEA;
  width: 1.5em;
}

button.expandable:hover{
  background-color: #d1d1d1;
  color: #001a57;
}

button.expandable:hover i.fa{
  color: #001a57;
}

button.expandable img{
  float: left;
  height: 0.9em;
  padding: 0.1em 1em 0 0;
}


.collapsable{
  border: 1px solid #d1d1d1;
  background-color: #f7f7f7;
}

.collapse{
  color: #001a57;
  padding: 10px 20px;
  font-size: 110%;
  border-bottom: 1px solid #d1d1d1;
  text-align: left;
}

.collapse i.fa{
  width: 1.5em;
}

.collapse:hover{
  background-color: #d1d1d1;
  color: #001a57;
}

@media screen and (max-device-width: 480px){
  button.expandable, .collapse{
    padding: 0.75em;
    }
}

.login-fields{
  padding: 20px;
}

.login-fields > label{
  display: block;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.login-fields > input{
  width: 320px;
  margin-bottom: 1em;
}

.login-fields input{
  font-size: 120%;
  background: #fff;
}

.login-fields input[type="text"], .login-fields input[type="password"]{
  border: 1px solid #d1d1d1;
  box-shadow: inset 1px 1px 5px #ddd;
  padding: 3px;
}

@media screen and (max-device-width: 480px){
  .login-fields input[type="text"], .login-fields input[type="password"]{
    width: 100%;
    line-height: 1.5em;
    margin-bottom: 1em;
  }
  
  .login-fields button.action{
    font-size: 1.2em;
    padding: 0.5em;
  }

}

a#forgot-pw-link, a#forgot-onelink-pw-link{
  float: right;
  margin: -10px 0 1em 0;
}

@media screen and (max-device-width: 480px){
  a#forgot-pw-link, a#forgot-onelink-pw-link{
    font-size: 1em;
  }

}

.mfa{
  clear: both;
  margin-top: 2em;
}

.mfa-fields{
  background: #fff;
  border: 1px solid #d1d1d1;
  padding: 0.75em;
  margin-top: 0.5em;
}

ul.mfa-options{
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.mfa-options li{
  padding: 0.5em 0;
}

ul.mfa-options li.remember-mfa{
  padding: 1.5em 0 1.5em 4px;
}

ul.mfa-options li.mfa-passcodes input[type="text"]{
  width: 90px;
}

.mfa-indented, .mfa-passcodes{
  margin-left: 8px;
}

@media screen and (max-device-width: 480px){
  
  ul.mfa-options li.mfa-passcodes input[type="text"]{
    width: 80%;
    float: right;
  }

  ul.mfa-options li.mfa-passcodes a{
    clear: right;
    float: right;
  }
  
  ul.mfa-options li.remember-mfa{
    clear: right;
  }
}

#duoStatus{
  margin-top: 1em;
}

#onelink-register-note{
  margin: 1em 0 1.5em 0;
}

.onelink-link{
  margin-top: 0.75em;
}

ul#onelink-options{
  margin: 0;
  padding: 0;
  list-style: none;
}

ul#onelink-options li img{
  width: 100%;
  margin-bottom: 1em;
}

#onelink-or{
  font-size: 130%;
  text-align: center;
  margin: 1.5em 0;
}

#onelink-help{
  margin-top: 10px;
}

@media screen and (max-device-width: 480px){
  #onelink-help{
    margin-top: 0.75em;
  }
}

ul#onelink-options li{
  width: 100%;
  height: 60px;
}

ul#onelink-options li a{
  display: block;
  text-indent: -9999px;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 60px;
  border: 0;
}

ul#onelink-options li a:hover{
  background-size: 100%;
  background-repeat: no-repeat;
}

li#login-fb a{
  background: url("../img/login-fb.png");
}

li#login-fb a:hover{
  background: url("../img/login-fb-hover.png");  
}

li#login-google a{
  background: url("../img/login-google.png");
}

li#login-google a:hover{
  background: url("../img/login-google-hover.png");
}

li#login-linkedin a{
  background: url("../img/login-linkedin.png");
}

li#login-linkedin a:hover {
  background: url("../img/login-linkedin-hover.png");
}

li#login-yahoo a{
  background: url("../img/login-yahoo.png");
}

li#login-yahoo a:hover{
  background: url("../img/login-yahoo-hover.png");
}

@media screen and (max-device-width: 480px){
  ul#onelink-options li{
    width: 100%;
    height: 160px;
  }
  
  ul#onelink-options li a{
    height: 140px;
    background-size: 100%;
  }
}

#logout-options{
  margin-bottom: 2em;
}

@media screen and (max-device-width: 480px){
  
  #logout-options{
    margin-bottom: 6em;
  }

}