@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; }

html {
  scroll-behavior: smooth; }

body {
  overflow-x: visible; }

.home-heading.page-heading {
  margin: 0; }
  .home-heading.page-heading .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; }
    .home-heading.page-heading .overlay .container {
      max-width: 1400px; }
  .home-heading.page-heading .chevron {
    position: absolute;
    bottom: 5%;
    width: 40px;
    height: 40px;
    border: 1px solid white;
    z-index: 2;
    border-radius: 50%; }
    .home-heading.page-heading .chevron a {
      width: 100%;
      height: 100%;
      position: relative;
      display: block; }
      .home-heading.page-heading .chevron a:before {
        border-style: solid;
        border-width: 1px 1px 0 0;
        content: '';
        display: inline-block;
        height: 25%;
        width: 25%;
        transform: rotate(135deg);
        vertical-align: top;
        border-color: white;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 15%;
        margin: auto;
        animation: bounce 1.5s infinite;
        transition: 0.5s ease; }

@keyframes bounce {
  0% {
    bottom: 20%; }
  33% {
    bottom: 0; }
  66% {
    bottom: 20%; }
  100% {
    bottom: 20%; } }
h1::after {
  content: none; }

h1 {
  position: relative;
  font-size: calc(1.5625rem + 3.75vw);
  padding-left: 30px;
  padding-right: 30px; }
  @media (min-width: 1200px) {
    h1 {
      font-size: 4.375rem; } }
  h1 .current {
    display: block;
    animation: showMe 1.5s ease; }
  h1 span:not(.current) {
    display: none; }

.hide {
  animation: hideMe 1s ease; }

.hidden {
  display: none; }

@keyframes hideMe {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }
@keyframes showMe {
  0% {
    transform: translateY(15px);
    opacity: 0; }
  100% {
    transform: none;
    opacity: 1; } }
#meet-an-expert-cta,
#home-page {
  background: white;
  padding-top: calc(1.375rem + 1.5vw);
  z-index: 2;
  position: relative; }
  @media (min-width: 1200px) {
    #meet-an-expert-cta,
    #home-page {
      padding-top: 2.5rem; } }

#meet-an-expert-cta {
  padding-top: 0; }

.logo-fill, .header-actions svg, .header-actions svg circle {
  fill: #fff !important;
  transition: 0.3s ease; }

.header-content .header-left .main-logo svg {
  filter: brightness(0) invert(1);
  transition: 0.3s ease; }

.header-content .header-right a {
  color: white; }
.header-content .header-right a:hover {
  color: #6a7374; }
.header-content .header-right .language-switch-wrap select {
  background: none !important;
  color: white !important;
  border-color: white !important; }
.header-content .mobile-menu .menu-icon:before, .header-content .mobile-menu .menu-icon:after, .header-content .mobile-menu .menu-icon span {
  background-color: white; }
.header-content .mobile-menu .menu-icon.active:before, .header-content .mobile-menu .menu-icon.active:after {
  background-color: black; }
.header-content .mobile-menu-wrapper.d-block {
  display: none; }

#header {
  background: none; }
  #header .mobile-menu-wrapper, #header .site-title {
    display: none !important; }

#header.fixed {
  background: white; }
  #header.fixed .mobile-menu-wrapper, #header.fixed .site-title {
    display: block !important; }
  #header.fixed .header-content .header-right a {
    color: #000; }
  #header.fixed .header-content .mobile-menu-wrapper.d-block {
    display: block !important; }
  #header.fixed .header-content .header-left svg .logo-fill {
    fill: black !important; }

.page-heading {
  background: none; }
  .page-heading:after {
    content: '';
    background: #62c3ef;
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0; }

.home-heading .nav-list {
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding-left: 0;
  display: flex;
  align-items: center;
  width: 60%;
  margin: auto; }
  .home-heading .nav-list li {
    text-align: center;
    flex-grow: unset;
    min-width: 10vw;
    display: block;
    padding: 0 20px;
    margin-bottom: 10px; }
    .home-heading .nav-list li a {
      width: 100%;
      display: inline-block;
      font-size: 0.9375rem;
      text-transform: uppercase;
      color: white;
      border: 1px solid transparent;
      border-radius: 20px;
      padding: 5px 10px;
      font-weight: bold;
      letter-spacing: 0.5px; }
  .home-heading .nav-list li.active a, .home-heading .nav-list li a:hover {
    border-color: white; }

.mobile-heading-image {
  display: none;
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 1; }
  .mobile-heading-image img {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%; }

.home-video {
  position: fixed;
  object-fit: cover;
  width: 100%;
  top: 0;
  left: 0;
  height: 100vh;
  transition: 0.5s ease;
  z-index: 1; }

.side-link {
  display: none; }

.scroll-to-bottom-wrap {
  position: fixed;
  bottom: 10px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  display: none;
  width: 100%; }
  .scroll-to-bottom-wrap a {
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background: #b3ddf0;
    padding: 5px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    z-index: 10;
    border: 1px solid black;
    display: inline-block; }
    .scroll-to-bottom-wrap a:before, .scroll-to-bottom-wrap a:after {
      content: '';
      width: 2px;
      height: 20px;
      background: black;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto; }
    .scroll-to-bottom-wrap a:after {
      transform: rotate(90deg); }

@media (max-width: 991.98px) {
  #header {
    background: none !important;
    position: static !important; } }
@media (max-width: 767.98px) {
  .mobile-heading-image {
    display: block; }

  .home-video {
    display: none; }

  .header-content .mobile-menu .menu-icon:before, .header-content .mobile-menu .menu-icon:after, .header-content .mobile-menu .menu-icon span {
    background-color: black; }

  .home-heading .nav-list {
    width: 100%; }
    .home-heading .nav-list li {
      padding: 0; }
      .home-heading .nav-list li a {
        font-size: 0.875rem; } }
.user-registration-wrap {
  padding-top: calc(1.5rem + 3vw);
  padding-bottom: calc(1.5rem + 3vw); }
  @media (min-width: 1200px) {
    .user-registration-wrap {
      padding-top: 3.75rem; } }
  @media (min-width: 1200px) {
    .user-registration-wrap {
      padding-bottom: 3.75rem; } }
  .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; } }

.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) {
  .user-registration-wrap .container .register .meet-an-expert-logo .oceans-button {
    max-width: 100% !important; } }

/*# sourceMappingURL=home-page.php.css.map */