@font-face {
	font-family: Lexend;
	src: url(/common/font/Lexend-Regular.ttf);
}

body {
	background-color: white;
	background-image: url("/assets/background.png");
	font-family: Lexend;
	/*background-position: center top; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	/* background-size: cover; /* Resize the background image to cover the entire container */
	background-attachment: fixed;
	background-size: cover;
	color: #04476e; /* Blue text */
	line-height: 1.6;
}


hr{
	color: #333; /* #daad2e;  Gold */
}

html {
    scroll-behavior: smooth;
}

:target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}

h2{
	margin-top: 60px;
	margin-bottom: 30px;
}

#home{
	width: 90%;
	min-height: 100%;
	/* background-color: white; /*#95999f;  Gray */
	margin: auto;
}

#header {
	width: 40%;
	min-width: 300px;
	max-width: 600px;
}

#contentblock{
	padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
	margin-top:10px;
	margin-bottom: 10px;
	border-radius:10px;
}

#footerblock{
	color: gray;
	opacity: 0.9;
}

#nav{
  position: -webkit-sticky; /* Safari */
  position: sticky;
	margin: auto;
	top: 0;
	border-radius: 10px;
	margin-top: 10px;
	padding-bottom: 10px;
	background: #333;
	padding: 5px;
	z-index:999; /* keep the nav on top */
}

ul.nav {
  top: 0;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #333; */
}

li.nav {
  float: left;

}

.right {
	float: right;
}

li a.nav {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover.nav {
  background-color: #111;
  border-radius:10px;
}

.active.nav {
  background-color: #04AA6D;
}

span.employee{
	display:inline-block;
	max-width: 500px;
	margin:20px;
	vertical-align: top;
	
}

.employee-image {
  max-width: 450px; /*100%; */
  height: 550px; /*auto;*/
}

.icon {
	max-width: 100px;
	max-height: 100px;
}

/* Slide show styles */

.slideshow-container {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}

.slideshow {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.slide {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  max-width: 800px;
  max-height: 800px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.dots {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 8px;
  width: 100%;
}

.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 4px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: #717171;
}