/* ----------- fonts and text ----------- */
body {
    background-color: #171A1E;
}

@font-face {
  font-family: "Medium";
  src: url("../fonts/HelveticaNeueMedium.woff");
}

@font-face {
  font-family: "Lite";
  src: url("../fonts/HelveticaNeueLite.woff");
}

@font-face {
  font-family: "Thin";
  src: url("../fonts/HelveticaNeueThin.woff");
}

html {
  scroll-behavior: smooth; 
}

h1{
  font: 65px "Thin", sans-serif;
}

h2{
  font: 50px/55px "Medium", sans-serif;
}

h3{
  font: 37px "Lite", sans-serif;
}

h4{
  font: 25px "Medium", sans-serif;
}

h5{
  font: 25px "Thin", sans-serif;
}

p{
  font: 20px/26px "Thin", sans-serif;
}

a{
  color: #5A85D7;
}

a:hover{
  color: #5A85D7;
  text-decoration: none;
}

/* ----------- panels and positioning ----------- */
#navbar {
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: 999;
}

.section {
    padding: 0;
    margin-bottom: 0;
}

.video-container {
    width: 100%;
    max-width: 100%;
}

.video {
    width: 100%;
    height: auto;
    display: block;
}

/* ------------- preloader -------------------*/
.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}