@font-face {
  font-family: 'Proxima Bold';
  src: url("../fonts/ProximaNova-Bold.otf"); }

@font-face {
  font-family: 'Proxima Light';
  src: url("../fonts/ProximaNova-Light.otf"); }

/* Large Devices, Wide Screens */
/* Medium Devices, Desktops */
/* Small Devices, Tablets */
/* Extra Small Devices, Phones */
/*
html,
body {
	height: 100vh;
	width: 100vh;
	margin: 0 auto;
	font-family: sans-serif;
}
*/
body p {
  font-size: 1.4em;
  font-family: "Proxima Light"; }

body h1 {
  font-family: "Proxima Bold";
  text-transform: capitalize;
  line-height: 1.2em;
  margin: 0; }

body h2 {
  font-family: "Proxima Bold";
  text-transform: capitalize;
  line-height: 1.2em;
  margin: 0; }

body h3 {
  font-family: "Proxima Bold";
  text-transform: capitalize;
  line-height: 1.2em;
  margin: 0; }

body h4 {
  font-family: "Proxima Bold";
  text-transform: capitalize;
  line-height: 1.2em;
  margin: 0; }

select {
  font-family: "Proxima Bold";
  height: 2.5em;
  font-size: 1em;
  border-radius: 10px;
  border: 2px solid #006839;
  padding-left: 0.5em; }

#hero-crabmap {
  padding-top: 7.5vh;
  min-height: 65%; }
  #hero-crabmap h1 {
    margin-top: 2.5vh; }
  #hero-crabmap h2 {
    margin-top: 2.5vh; }
  #hero-crabmap h3 {
    margin-top: 2.5vh; }
  #hero-crabmap p {
    margin-top: 2vh; }
  #hero-crabmap a {
    color: #006839;
    text-decoration: underline; }
  #hero-crabmap .logo-xs {
    background-color: #006839; }

#details-crabmap {
  background-color: #006839;
  padding-top: 7.5vh;
  padding-bottom: 7.5vh;
  color: #FFF; }
  #details-crabmap .embed-custom {
    border: none; }

:root {
  --swiper-theme-color: green; }

.step-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
  }

.step.number {
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 2rem;
  border-radius: 50%;
  background-color: #006839;
  color: #FFFFFF; }

.step.text {
  margin: 0;
  line-height: 100px; }

.controls.year {
  width: 75%;
  grid-row: 1 / span 1;
  grid-column: 2 / span 1;
  display: grid;
  align-items: center;
  grid-template-columns: fit-content 1fr; }

.controls.province {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  display: grid;
  align-items: center;
  justify-content: start; }

.controls.sea-surface {
  grid-row: 1 / span 1;
  grid-column: 1 / span 1;
  display: grid;
  align-items: center;
  justify-content: start; }

#map {
  grid-row: 2 / span 1;
  grid-column: 1 / span 2;
  margin-top: 5rem; }

#year-output {
  font-size: 16px;
  font-family: "Proxima Bold";
  padding: 0; }

.slider {
  -webkit-appearance: none;
  width: 100% !important;
  margin: 1rem 0 1rem 0;
  border-radius: 20px;
  background: #efefef;
  -webkit-transition: .2s;
  transition: opacity .2s; }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #006839;
    border-radius: 50%;
    cursor: pointer; }
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    background: #006839;
    cursor: pointer; }

@media only screen and (max-width: 480px) {
  #hero-crabmap {
    padding-top: 0vh;
    padding-bottom: 5vh; }
    #hero-crabmap h1 {
      font-size: 1.5em; }
    #hero-crabmap h2 {
      font-size: 1.5em; }
    #hero-crabmap h3 {
      font-size: 1.5em; }
    #hero-crabmap p {
      font-size: 1.2em; }
    #hero-crabmap .logo-xs {
      padding-top: 2.5vh;
      padding-bottom: 2.5vh; }
  .cons {
    margin-top: 10vh;
    margin-bottom: 10vh; }
  #details-crabmap h2 {
    font-size: 1.5em; }
  #details-crabmap p {
    font-size: 1.2em; }
  .step.container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: -10px; }
    .step.container h3 {
      font-size: 20px; }
  .step.number {
    height: 30px;
    width: 30px;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #006839;
    color: #FFFFFF; }
  .step.text {
    margin: 0;
    font-size: 20px; } }