@import url("https://use.typekit.net/wro8uzx.css");
@import url("https://fonts.googleapis.com/css?family=Karla:400,700&display=swap");
@font-face {
  font-family: "DINOT";
  src: url("/wp-content/themes/made_oceanliteracy2_theme/fonts/DINOT-Bold.ttf");
  src: url("/wp-content/themes/made_oceanliteracy2_theme/fonts/DINOT-Bold.ttf?#iefix") format("truetype");
  font-display: swap; }
body {
  font-family: sofia-pro, sans-serif; }

.user-login-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0 -15px;
  margin-top: calc(1.53125rem + 3.375vw);
  margin-bottom: calc(1.375rem + 1.5vw); }
  @media (min-width: 1200px) {
    .user-login-wrap {
      margin-top: 4.0625rem; } }
  @media (min-width: 1200px) {
    .user-login-wrap {
      margin-bottom: 2.5rem; } }
  .user-login-wrap .left, .user-login-wrap .right {
    max-width: 50%;
    flex-basis: 50%;
    padding: 0 15px;
    margin-bottom: calc(1.5rem + 3vw); }
    @media (min-width: 1200px) {
      .user-login-wrap .left, .user-login-wrap .right {
        margin-bottom: 3.75rem; } }
  .user-login-wrap h1 {
    margin-top: 0;
    margin-bottom: calc(1.33125rem + 0.975vw);
    padding-bottom: 0; }
    @media (min-width: 1200px) {
      .user-login-wrap h1 {
        margin-bottom: 2.0625rem; } }
    .user-login-wrap h1:after {
      content: none; }
  .user-login-wrap h2 {
    font-size: calc(1.3375rem + 1.05vw);
    line-height: 1.32;
    margin-bottom: calc(1.33125rem + 0.975vw);
    text-align: center;
    margin-top: 0; }
    @media (min-width: 1200px) {
      .user-login-wrap h2 {
        font-size: 2.125rem; } }
    @media (min-width: 1200px) {
      .user-login-wrap h2 {
        margin-bottom: 2.0625rem; } }
  .user-login-wrap .oceans-button {
    text-align: center;
    font-size: 1.25rem;
    line-height: 1.18;
    letter-spacing: 1.1px;
    font-weight: 500;
    background-color: #3fb3c4 !important;
    border-color: #3fb3c4 !important;
    color: #FFF !important; }
  @media (max-width: 991.98px) {
    .user-login-wrap .left, .user-login-wrap .right {
      max-width: 100%;
      flex-basis: 100%; } }
  .user-login-wrap .inner-user-login {
    margin-bottom: 2em; }
  .user-login-wrap .form-group {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    width: 100%; }
    .user-login-wrap .form-group label {
      color: black;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      font-size: 0.75rem;
      margin-bottom: 0.6875rem;
      font-weight: 500;
      font-family: sofia-pro, sans-serif; }
    .user-login-wrap .form-group input {
      transition: 0.4s ease;
      outline: none !important;
      width: 100%;
      padding: 10px 20px;
      line-height: 1.3;
      font-size: 1.25rem;
      color: black;
      background-color: white;
      margin-bottom: 0.625rem;
      border: 1px solid black;
      font-family: sofia-pro, sans-serif;
      border-radius: 49px;
      font-weight: 500; }
      .user-login-wrap .form-group input:focus {
        border-color: #62c3ef; }
  .user-login-wrap .forgot-password-form {
    opacity: 0;
    pointer-events: none;
    text-align: center;
    position: fixed;
    background: white;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
    transition: 1s ease; }
    .user-login-wrap .forgot-password-form.show {
      opacity: 1 !important;
      pointer-events: all; }
    .user-login-wrap .forgot-password-form .container {
      position: relative; }
    .user-login-wrap .forgot-password-form .close {
      position: absolute;
      right: -32px;
      top: -32px;
      width: 32px;
      height: 32px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      background: none;
      border: none;
      cursor: pointer;
      outline: none !important;
      padding: 0; }
      .user-login-wrap .forgot-password-form .close:before, .user-login-wrap .forgot-password-form .close:after {
        content: '';
        position: absolute;
        left: 15px;
        top: 0;
        height: 33px;
        width: 2px;
        background-color: black;
        transition: 0.5s ease; }
      .user-login-wrap .forgot-password-form .close:before {
        transform: rotate(45deg); }
      .user-login-wrap .forgot-password-form .close:after {
        transform: rotate(-45deg); }
      .user-login-wrap .forgot-password-form .close:hover:before {
        transform: rotate(90deg); }
      .user-login-wrap .forgot-password-form .close:hover:after {
        transform: rotate(-90deg); }

#loginform .login-fields-2col {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center; }
  #loginform .login-fields-2col .form-group {
    width: 50%;
    padding: 0 15px; }

.user-registration-wrap {
  padding-top: calc(1.375rem + 1.5vw);
  padding-bottom: calc(1.375rem + 1.5vw);
  background-color: rgba(179, 221, 240, 0.1) !important; }
  @media (min-width: 1200px) {
    .user-registration-wrap {
      padding-top: 2.5rem; } }
  @media (min-width: 1200px) {
    .user-registration-wrap {
      padding-bottom: 2.5rem; } }
  .user-registration-wrap .heading {
    margin-bottom: calc(1.375rem + 1.5vw); }
    @media (min-width: 1200px) {
      .user-registration-wrap .heading {
        margin-bottom: 2.5rem; } }
  .user-registration-wrap .register {
    display: flex;
    flex-wrap: wrap; }
    .user-registration-wrap .register div[class^='col-'] {
      width: 33.33333333%;
      padding: 0 15px; }
    .user-registration-wrap .register p, .user-registration-wrap .register li {
      color: #6a7374;
      line-height: 1.88; }
    .user-registration-wrap .register .oceans-button {
      margin-top: 1.25rem;
      display: block;
      text-align: center;
      font-size: 1.15rem;
      padding: 10px 30px; }
    @media (max-width: 767.98px) {
      .user-registration-wrap .register p, .user-registration-wrap .register ul, .user-registration-wrap .register .oceans-button {
        max-width: 85%; } }
    .user-registration-wrap .register hr {
      margin-top: calc(1.375rem + 1.5vw);
      margin-bottom: calc(1.375rem + 1.5vw); }
      @media (min-width: 1200px) {
        .user-registration-wrap .register hr {
          margin-top: 2.5rem; } }
      @media (min-width: 1200px) {
        .user-registration-wrap .register hr {
          margin-bottom: 2.5rem; } }

.form-submit-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 15px; }
  .form-submit-btn-wrap .form-submit-btn {
    padding: 1rem calc(1.8125rem + 6.75vw);
    margin-top: 0;
    margin-bottom: 0; }
    @media (min-width: 1200px) {
      .form-submit-btn-wrap .form-submit-btn {
        padding: 1rem 6.875rem; } }

.forgot-password {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  display: block;
  margin: 0;
  font-family: sofia-pro, sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.8px;
  text-decoration: underline;
  line-height: 1.25;
  font-weight: 500;
  cursor: pointer;
  outline: none !important;
  transition: 0.4s ease; }
  .forgot-password:hover {
    color: #6a7374; }

.meet-an-expert-logo {
  justify-content: center;
  text-align: center; }
  .meet-an-expert-logo svg {
    height: 70px; }

@media (max-width: 1199.98px) {
  .user-registration-wrap .container {
    max-width: 100%; }
    .user-registration-wrap .container .meet-an-expert-logo > p {
      min-height: 60px !important; }
    .user-registration-wrap .container .meet-an-expert-logo > div {
      min-height: 230px !important; } }
@media (max-width: 991.98px) {
  .user-registration-wrap .container .register div[class^="col-"] {
    width: 100%;
    padding: 0 15px;
    margin-bottom: calc(1.375rem + 1.5vw); } }
  @media (max-width: 991.98px) and (min-width: 1200px) {
    .user-registration-wrap .container .register div[class^="col-"] {
      margin-bottom: 2.5rem; } }
@media (max-width: 991.98px) {
    .user-registration-wrap .container .register div[class^="col-"] > p {
      min-height: auto !important; }
    .user-registration-wrap .container .register div[class^="col-"] > div {
      min-height: auto !important;
      text-align: center !important; }
    .user-registration-wrap .container .register div[class^="col-"] p, .user-registration-wrap .container .register div[class^="col-"] ul {
      max-width: 100% !important;
      padding-left: 0 !important; } }
@media (max-width: 767.98px) {
  #loginform .login-fields-2col {
    flex-direction: column; }
    #loginform .login-fields-2col .form-group {
      width: 100%; }
  #loginform .form-submit-btn-wrap {
    flex-direction: column; }
    #loginform .form-submit-btn-wrap .form-submit-btn {
      width: 100%;
      margin-bottom: 1.25rem; }

  .user-registration-wrap .container .register .meet-an-expert-logo .oceans-button {
    max-width: 100% !important; } }

/*# sourceMappingURL=user-login.css.map */