@font-face {
  font-family: Roboto-Regular;
  src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

main > .container {
    padding: 45px 0 0 0;
}

body, html {
  font-family: "Century Gothic";
}

.btn-primary {
  background-color: #364c9e;
  border-color: #364c9e;
  padding: 8px 14px; 
}

.btn {
  font-size: 0.85em;
  text-transform: uppercase;
}

.link-reset, .link-reset a:hover {
  font-size: 85% !important;
  text-decoration: none !important;
}

.link-reset {
  color: #555;
}

.link-reset a:hover {
  color: #364c9e;
}

.title-card {
  color: #364c9e;
  font-weight: bolder;
  text-transform: uppercase;
  font-size: 1.2em;
  letter-spacing: 1.5px;
  text-align: center;
  margin: 35px 0;
}

.title-card-info {
  color: #364c9e;
  font-weight: bolder;
  text-transform: uppercase;
  font-size: 1.2em;
  letter-spacing: 1.5px;
  text-align: center;
  margin-bottom: 35px;
}

.img-container-card {
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 80%;
}

.card-login {
  height: 95%;
}

.modal-title {
  font-size: 0.9em;
  letter-spacing: 0.6px;
  color: #364c9e;
  font-weight: bold;
  text-transform: uppercase;
}

.modal-header {
  padding: 1rem 1.4rem;
}

.modal-body {
  padding: 1.2rem 1.4rem;
}

.img-resize {
  width: 57%;
}

.text-btn {
  display: inline;
  margin-right: 15px;
}

@media only screen
  and (min-device-width : 320px)
  and (max-device-width : 568px) {
    main > .container {
      padding: 0px;
    }
    .card-login {
      border: none;
    }
    .img-resize, .img-firt-resize {
      width: 95%;
    }
    .title-card {
      font-size: 1em;
    }
    hr {
      margin-left: 15px;
    }
    .card-login p {
      margin: 5px 15px;
    }
    .opcion-login {
      margin: 25px 15px 0 15px;
      text-align: left;
    }
    .text-btn {
      display: block;
      margin-bottom: 15px;
    }
    .mb-xs {
      margin-bottom: 60px !important;
    }
    .mbx {
      margin-bottom: 0px !important;
    }
    .mtx {
      margin-top: 15px !important;
    }
    .modal-dialog {
      margin: 50px 35px 20px 20px;
    }
  }