@font-face {
  font-family: GothamProBold;
  src: url(../fonts/GothamPro-Bold.woff) format("woff"),
       url(../fonts/GothamPro-Bold.ttf) format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: GothamPro;
  src: url(../fonts/GothamPro.woff) format("woff"),
       url(../fonts/GothamPro.ttf) format("truetype");
  font-weight: 400;
  font-style: normal;
}

body {
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f1f1f3;
  font-family: GothamPro, sans-serif;
}

.form-signin {
  max-width: 450px;
  padding: 30px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2rem 5.5rem rgba(195, 195, 195, 0.4);
}

.form-signin .form-signin-heading {
  margin-bottom: 25px;
  color: #0b1f35;
  font-family: GothamProBold, sans-serif;
  font-size: 26px;
  font-weight: 700;
  text-transform: uppercase;
}

.form-signin .checkbox {
  margin-bottom: 15px;
  font-weight: 400;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #cbe7ff;
  border-radius: 4px;
  font-family: GothamPro, sans-serif;
}

.form-signin .form-control:focus {
  z-index: 2;
  border-color: #46a1f2;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
}

.form-signin .btn-primary {
  background-image: linear-gradient(to bottom, #fe6f5f 0, #f1503e 100%);
  border-color: transparent;
  padding: 10px 24px;
  font-family: GothamPro, sans-serif;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  border-radius: 4px;
  box-shadow: 0 1rem 3rem rgba(243, 85, 68, 0.3);
}

.form-signin .btn-primary:hover,
.form-signin .btn-primary:focus {
  background-image: linear-gradient(to bottom, #f1503e 0, #d9402f 100%);
  border-color: transparent;
  box-shadow: 0 1.5rem 3.5rem rgba(243, 85, 68, 0.5);
}