body{
	background-image: url("navigation/background.png");
	background-attachment: fixed;
	
}

#coverimage{
	width: 100%;

}

.pages {
	margin: auto;
	max-width: 60%;
	outline: thick solid #393E41;
}
.pages img{

	max-width: 100%;
}
.pages svg{
  
  max-width:100%;
  
}
.main{  
  margin: auto;
  width: 80%;
  background-color: #F6F7EB;
  outline: thick solid #393E41;
  padding:16px;
  margin-top: 30px;
 }
 
 a{

	color: #393E41;
	text-decoration: none;

} 
 
.navbar a{

	color: white;
	text-decoration: none;

} 

a:hover{

	color: black

} 
 	

 .navi {
 	display: flex;
 	flex-wrap: nowrap;
 	justify-content: center;
  	align-items: center;
	width:100%;
	padding-top: 4px;
	padding-bottom: 4px;
	
 }
 
.navi img{
	max-height: 100%;
}

 #right_align{
 	transform: scale(-1, -1);
}
/* Add a black background color to the top navigation */
ul{
  
   list-style-type: none;

}

.navbar{
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;

  }

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */\
    margin-left:20px;
    margin-right:20px;
}
/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #e2373f;
  color: white;
}

p,h1,h2,h3,a,li {
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1{
color: #F6F7EB;
background-color: #e2373f;

}
.images {
  width: 80%;
  margin: 0 auto;
  height: 100%;
  display: grid;
  grid-gap: 10px;

}

@media (min-width: 580px) {
  .images {
    grid-template-columns: 25% 25% 25% 25%;
  }
}
.template {
  position: relative;
}

.template p {
  position: absolute;
  left: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  margin: 0;
  width: 100%;
  padding: 25px 10px 10px 10px;
}


#gallery-pagination {

}

#btnNext,
#btnPrevious{
  background: transparent;
  color: black;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  outline: none;
}

#gallery-pagination #page {
  margin-left: 15px;
  margin-right: 15px;
  color: black;
  font-style: italic;
}

.sr-only {
  position: absolute !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

#gallery-dots {
  margin-bottom: 15px
}

.gallery-dot {
  background-color: #393E41;
  border:0;
  padding:0;
  width: 50px;
  height: 20px;
  margin: 5px;
  opacity: 1;
  outline: none;
  cursor: pointer;
}
.gallery img {
  height: auto;
  width: 100%;
  max-width: 100%;
  vertical-align: middle;
	outline: thin solid #393E41;
}
.gallery-dot.active {
	
	background-color: #E2373F;
}

#gallery-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start;
}
.gallery footer{
	padding-top: 15px;
	padding-bottom: 15px;
	margin: auto;
	width: 40%;


}
.gallery { text-align: center; }

marquee{

color: red;
font-size: 40pt;

}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer;
}

.tooltiptext {
  visibility: hidden;
  width: 130px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}