@font-face {
  font-family: 'Menlo Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Menlo Regular'), url('font/Menlo-Regular.woff') format('woff'),
        url('font/Menlo-Regular.ttf') format('truetype'),
        url('font/Menlo-Regular.woff2') format('woff2');

}
body {
  font-family:'Menlo Regular','Courier New', monospace;;
  font-weight:normal;
}

h3,h4 {
  font-family:'Menlo Regular';
}

/* because I added a gradient I need to pull the titles up over the gradient */
.overlay-titles {
  z-index: 2;
}

/* override the uikit default font */
.uk-light {
  font-family:'Menlo Regular';
  font-weight:normal;
}

/* mnargin overrides for mobile */
.reduce-top-margin {
  margin-top:-80px;
}

@media (max-width: 600px) {
  .reduce-top-margin {
    margin-top:0px;
  }
}

@media (max-width: 1024px) {
  .reduce-top-margin {
    margin-top:-20px;
  }
}

/* the bg gradient code for full heaight */
.gradient {
  /* background-image: radial-gradient( circle at 36% 48%, #000000, rgba(11, 39, 65, 0.32) 37%, rgba(0, 0, 0, 0.0)); */
  background-image: linear-gradient( to right, rgba(11, 39, 65, 0.80) 5%, rgba(0, 0, 0, 0.0));
  /* background-image: linear-gradient(to right, red , yellow); */
  width: 100%;
  height: calc(100vh);
  /* min-height: 600px; */
  /* object-fit: cover; */
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}

.small-gradient {
  /* background-image: radial-gradient( circle at 36% 48%, #000000, rgba(11, 39, 65, 0.32) 37%, rgba(0, 0, 0, 0.0)); */
  background-image: linear-gradient( to right, rgba(11, 39, 65, 0.80) 5%, rgba(0, 0, 0, 0.0));
  /* background-image: linear-gradient(to right, red , yellow); */
  width: 100%;
  height: 300px;
  /* min-height: 600px; */
  /* object-fit: cover; */
  position: absolute;
  top:0;
  left:0;
  z-index: 1;
}

.scroll-down {
  position: absolute;
  bottom: 40px;
  display: block;
  text-align: center;
  font-size: 30px;
  z-index: 3;
  text-decoration: none;
  text-shadow: 0;
  width: 30px;
  height: 30px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  left: 3%;
  -webkit-transform: translate(-50%, 0%) rotate(45deg);
  -moz-transform: translate(-50%, 0%) rotate(45deg);
  transform: translate(-50%, 0%) rotate(45deg);
  -webkit-animation: fade_move_down 2s ease-in-out infinite;
  -moz-animation:    fade_move_down 2s ease-in-out infinite;
  animation:         fade_move_down 2s ease-in-out infinite;
}


/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
  0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@-moz-keyframes fade_move_down {
  0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
}
@keyframes fade_move_down {
  0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
  50%  { opacity: 1;  }
  100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
}