body {font-family: 'Urbanist';}

a:link {
	color:black;
	text-decoration:none;}
a:visited {
	color:black;
	text-decoration:none;}
a:hover {
	color:tomato;
	text-decoration:underline;
	text-decoration-style:wavy;}
a:active {
	color:tomato;
	text-decoration:underline;
	text-decoration-style:wavy;}

.pageTop{
	padding:15px;
	position:fixed;
	height:15vh;}

.sidebar{
	width:25%;
	float:left;
	position:fixed;
	margin-top:15vh;}
	
.sidebarHeader {
    text-align: left;
    border-top-style: solid;
	border-width: 1px;}
	
.dropDown{
	position:relative;
	display:inline-block;}
	
.dropDown-content{
	display:none;
	position:relative;
	background-color:white;
	width:100%;
	z-index:1;}
	
.dropDown:hover .dropDown-content{
	display:block;
	overflow:hidden;}
	
.dropDown-button:hover{
	cursor:pointer;
	color:tomato;
	text-decoration:underline;
	text-decoration-style:wavy;}
	


.mainContent{
	float:left;
	width:75%;
	margin-left:25%;}
	
.mainBlock{
	border-bottom-style:solid;
	border-width:1px}

@media screen and (max-width:900px){
	.pageTop{
	position:static;}}
	
@media screen and (max-width:900px){
	.sidebar{
	display:none;}}

@media screen and (max-width:900px){
	.mainContent{
	width:100%;
	margin-left:0%;}}
	
.menubtn{
	position: absolute;
	top: 20px;
	right: 45px;}

.menubtn:hover{
	color:tomato;}

@media screen and (min-width:900px){
	.menubtn{
	display:none;}}
	
	
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color:white; /* Black fallback color */
  background-color:white; /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: Black;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: tomato;}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;}}

.pageTitle{
	padding-top:15px;
	padding-bottom:15px;}

.content{
	width:80%;
	margin:auto;
	padding-bottom:5%;}

.column{
	float:left;
	padding:1%;
	width:48%;}
	
@media screen and (max-width:900px){
	.column{
	width:100%;
	margin:auto;}}

.imgContainer{
	padding-bottom:1%;}

img{
	max-width:100%;
	max-height:100vh;
	display:block;
	margin:auto;}
	
.row:after {
	content:"";
	display:table;
	clear:both;}
	
	
.modal{
	display:none;
	position:fixed;
	z-index:1;
	left:0;
	top:0;
	width:100%;
	height:100%;
	overflow:auto;
	background-color:white;}
	
.modal-content{
	position:absolute;
	top:50%;
	left:50%;
	transform:translateY(-50%) translateX(-50%);
	background-color:white;}
	
.close{
	color:black;
	position: absolute;
	top:10px;
	right:25px;
	font-size:35px;}
	
.close:hover,
.close:focus{
	color:tomato;
	cursor:pointer;}
	
.mySlides{
	display:none;}
	
.imgModal{
	width:100%;
	height:100%;}
	
.prev,
.next{
	cursor:pointer;
	position:absolute;
	top:50%;
	width:auto;
	padding:16px;
	margin-top:-50px;
	color:black;
	font-weight:bold;
	font-size:30px;
	-webkit-text-stroke-width:1px;
	-webkit-text-stroke-color:white;
	transition:0.6s ease;
	user-select:none;
	-webkit-user-select:none;}
	
.next{
	right:0;}
	
.prev:hover,
.next:hover{
	background-color:white;}
	
.imgHover{
	transition:0.3s;}
	
.imgHover:hover{	
	opacity:0.75;
	cursor:pointer;}