*{
margin:0;
padding:0;

    font-family: Georgia, serif;



}

body {
background-image: url("Images/festbg.jpg");	
background-position: left bottom;
	
}

.backgroundimage {

background-image: url("Images/placeholder.jpg");
background: #00fbff;
background: linear-gradient(180deg,rgba(0, 251, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);


}

.backgroundimage, header {
	
height: 150px;
padding: 10px;
	
}

header {
	
	background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(2px);	
	color: black;
	position: fixed;
	width: 100%;
	z-index: 10000;
}

.logo {

height: 96px;
	
}

ul {
  list-style-type: none;
}

nav {
	
  font-size: 150%;
  transform: translate(0px,-15px);
	
}

nav ul li {
display:inline-block;
padding: 5px;
}

.content li {

padding: 5px;
	
}

nav a {

color: rgba(191,63,118,255);
	
}

nav a:hover {

color: rgba(222,90,90,255);

	
}

a:hover {

font-weight: bold;
	
}

a:visited  {

  color: rgb(147, 81, 22);
	
}

.content {
padding: 10px;
padding-bottom: 5px;
text-align: center;
margin-left: 10%;
margin-right: 10%;
border-left: 1px solid black;
border-right: 1px solid black;
background-color: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(4px);	


}

.content p, h2, h1 {

padding-bottom: 10px;
	
}

.contentimg {
width: 60%;
padding: 10px;	
}

.left, .right {
	
	padding: 10px;	
	height: 128px;
}

.left img {
	
float: left;
	
}

.right img {
	
float: right;
	
}

.right img, .left img{

	width: 50%;
	max-width: 400px;
}

.gallery img {
	
width: 25%;
margin: 10px;


}

/* .gallery img:hover { */
	
	/* border: 2px solid black; */
	  /* border-radius: 5px; */
	  /* margin: 8px; */
	
/* } */

.coolbutton {

	border: 1px solid black;
	  border-radius: 2px;	
	  padding: 3px;
	  cursor: pointer;
	
}	

.coolbutton:hover {
	
	background-color: lightblue;
	
}

.container {
	

  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid black;
  padding: 10px;
  /* width: 20%; */ 
  width: 218px;  
  height: 200px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: white;
  border-radius: 5px;
	
}

.container h2 {
	
  font-family: Verdana, sans-serif;
	
}

label, input, select {
	
margin: 10px;
padding: 3px;
	
}

label {
	
font-weight: bold;
	
}

.container img {

width: 100%;	
height: 50%; 
object-fit: cover;
	
}

hr.rounded {
  border-top: 2px solid black;
  border-radius: 5px;
}

hr {
	
margin-top: 5px ;
margin-bottom: 5px;
	
}

footer {
	
border-top: 1px solid black;
padding: 10px;
color: black;
background-color: lightgray;
font-weight: bold;
text-align: center;
padding-bottom: 64px;

}

.social {

width: 48px;
padding-left: 10px;
padding-right: 10px;
transition-duration: 0.25s;
	
}

.social:hover {

filter: brightness(0.5);
	
}

.collapsible {
  background-color: rgba(0, 0, 0, 0);
  color: black;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  border-bottom: 2px solid black;
  text-align: center;
  outline: none;
  font-size: 20px;

 
}

.active, .collapsible:hover {
  color: #555;
  font-weight: bold;
}

.collapsible:after {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.collape {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  /* background-color: #f1f1f1; */
}

@media screen and (max-width: 780px) {
  iframe {
    width: 100%;
  }
  
  .gallery img {
	  
    width: 75%;
  }
  
  .contentimg {
	width: 90%;
	padding: 10px;	
  }
}

@media screen and (max-width: 737px) {

  .backgroundimage, header {
	
	height: 168px;

		
	}
	
	.logo {
	
	height: 64px;
	
	}
	
	.content {
		
	margin-left: 0%;
	margin-right: 0%;
	border-left: 0px;
	border-right: 0px;
	
	}
  
}

@media screen and (max-width: 424px) {

  .backgroundimage, header {
	
	height: 200px;

		
	}
  
}