body {
	
	background-image: url("src/background.png");
	  background-repeat: no-repeat;
  background-size: cover;
	overflow:auto;
background-color: black;
  background-position: top;
 overflow-y:scroll;

}
/* Green crystal */
.kyber-crystal img {

}
/* Green crystal */
.kyber-crystal.green img {
  filter:  drop-shadow(0 0 5px #00ff80) drop-shadow(0 0 15px #00ff80);
  width:1000px;
    animation: pulseBlack 15s infinite ease-in-out;
	  position: absolute; /* or relative/fixed depending on your layout */
  z-index: -1;
}


.kyber-crystal.orange img {
  filter: hue-rotate(280deg)  drop-shadow(0 0 5px orange) drop-shadow(0 0 15px orange);
  width:1000px;
    animation: pulseBlack 15s infinite ease-in-out;
	  position: absolute; /* or relative/fixed depending on your layout */
  z-index: -1;
}
.kyber-crystal.yellow img {
  filter: hue-rotate(320deg)  drop-shadow(0 0 5px yellow) drop-shadow(0 0 15px lightyellow);
   width:1000px;
    animation: pulseBlack 15s infinite ease-in-out;
	  position: absolute; /* or relative/fixed depending on your layout */
  z-index: -1;
}
/* Blue crystal */
.kyber-crystal.blue img {
  filter: hue-rotate(80deg) drop-shadow(0 0 5px lightblue) drop-shadow(0 0 15px blue);
   width:1000px;
    animation: pulseBlack 15s infinite ease-in-out;
	  position: absolute; /* or relative/fixed depending on your layout */
  z-index: -1;
  
}

/* Purple crystal */
.kyber-crystal.purple img {
    filter: hue-rotate(200deg) drop-shadow(0 0 5px  #d8b0ff) drop-shadow(0 0 15px #8000ff);
  width:1000px;
    animation: pulseBlack 15s infinite ease-in-out;
	  position: absolute; /* or relative/fixed depending on your layout */
  z-index: -1;
}

.kyber-crystal.white img {
  filter: brightness(10) 
          drop-shadow(0 0 5px #ffffff) 
          drop-shadow(0 0 15px #ffffff);
		    width:1000px;
    animation: pulseBlack 15s infinite ease-in-out;
	  position: absolute; /* or relative/fixed depending on your layout */
  z-index: -1;
}



.kyber-crystal.black img {
  filter: grayscale(100%) brightness(1.0) contrast(150%);
  width:1000px;
    animation: pulseBlack 15s infinite ease-in-out;
	  position: absolute; /* or relative/fixed depending on your layout */
  z-index: -1;
  background: radial-gradient(circle, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 80%);
  animation: pulseBlack 10s infinite ease-in-out;

}

@keyframes pulseBlack {
  0% {
    opacity: 0.1;
    transform: scale(1); /* Remove translate to keep it in place */
  }
  50% {
    opacity: 0.3;
    transform: scale(1.02); /* Only scale without translation */
  }
  100% {
    opacity: 0.1;
    transform: scale(1); /* Return to original scale */
  }
}
.filters {
      border-radius: 5px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 1em;
      justify-content: center;
    }
    .filters input, .filters select {
      border-radius: 5px;
      padding: 5px;
      font-size: 14px;
      background-color: black;
      color: white;
    }
	.tablecontainer{
  
width:100%;
  color: lightblue;
  font-family: 'TrajanPro', sans-serif;
  border-spacing: 0;
  border-radius: 10px;
  overflow-x: auto;
	}
    table {
   border: 1px solid lightslategray;
  width: 100%;
  border-spacing: 0;
  border-radius: 10px;
  color: lightblue;
  font-family: 'TrajanPro', sans-serif;
  border-collapse: separate; /* Important */
  overflow: hidden; /* Helps on some browsers */
    }
	
    th, td {
	    border: 1px solid lightslategray;
		
      padding: 8px;
      text-align: center;
	
	  
    }
    th {
		
      background-color: #3d0000;
    }
	tr:hover {
  background-color: #510000; /* or any color you like */
  cursor: pointer; /* optional, if you want it to feel clickable */
 
}
.kyberColourList {
  border-radius: 50%;
  overflow: hidden;
  width: 100px;
  height: 100px;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  background: linear-gradient(#111, #111) padding-box,
              linear-gradient(to top, lightyellow 30%, lightblue) border-box;
  box-shadow: 0 0 12px rgba(200, 200, 200, 0.3), 0 0 12px rgba(200, 200, 200, 0.3);
}
   .tablepic {
  display: block;
  width: 100px;
  height: 100px;
 
  border-radius: 50%;
  margin: 0;

}
    #userProfileModal {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.7);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
      
	 
    }
    .modal-content {
	
	  align-items: center;
      justify-content: center;
    
	 
 color: #e0f7ff;
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  
background: 
  url('src/modalbackground.png') center/cover no-repeat, /* background image */
  linear-gradient(to bottom, #121212, #1C0C02) padding-box, /* content box */
  linear-gradient(to top, lightyellow 30%, lightblue) border-box; /* border */
background-clip: padding-box, padding-box, border-box;
background-origin: padding-box, padding-box, border-box;
  box-shadow: 0 0 12px rgba(0,255,255,0.3), 0 0 12px rgba(255,255,150,0.3);
  
  font-family: 'Garamond', serif;
  text-align: Center;

	
	
      z-index:1;
      padding: 20px;
      max-width: 60%;
      width: 80%;
      max-height: 90vh;
      overflow-y: auto;
    
      position: relative;

    }
	.modalProfilePicContainer{
		z-index:1;
	  object-fit: cover;
  border-radius: 50%;
  display: block;

  border: 2px solid transparent;
  background: linear-gradient(#111, #111) padding-box,
              linear-gradient(to top, lightyellow 30%, lightblue) border-box;
box-shadow: 0 0 12px rgba(200, 200, 200, 0.3), 0 0 12px rgba(200, 200, 200, 0.3);

  color: #e0f7ff;
	
      width: 150px;
      height: 150px;
      object-fit: cover;
	}
    .modal-content img {
		
  border-radius: 50%;

		
      width: 150px;
      height: 150px;
      object-fit: cover;
     
    }
    #closeModal {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      cursor: pointer;
    }

    canvas {
      border: 1px solid #000;
      cursor: pointer;
      max-width: 700px;
      max-height: 700px;

    }
 .canvascontainer {
	 margin-left:-300px;
	 text-align:left;
  position: relative;
  display: inline-block;
    border: 2px solid transparent;
  background: linear-gradient(#111, #111) padding-box,
              linear-gradient(to top, lightyellow 30%, lightblue) border-box;
  box-shadow: 0 0 12px rgba(0,255,255,0.3), 0 0 12px rgba(255,255,150,0.3);

}

/* Crop area */
#crop-area {
  position: absolute;
  width: 300px;
  height: 300px;

  z-index: 2;
  cursor: move;
}

/* Dimming overlay */
.canvascontainer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 1;

  mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 75px, black 150px);
  -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 75px, black 150px);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
}


  /* Rank Colors */
  .rank-votary { color: #656386; }
  .rank-initiate { color: #2e3baa; }
  .rank-padawan { color: #004cff; }
  .rank-knight { color: #0097ff; }
  .rank-master {color: #22ff00; }
  .rank-grandmaster { color: #90ffaa;}

  /* Guild Colors */
  .guild-guardian { color: #546788; }
  .guild-sentinel { color: #ffae00; }
  .guild-consular { color:  #00865a; }

  /* Guild Title Colors */
  .guildtitle-member { color: white; }
  .guildtitle-headguardian { color: #00eaff;}
  .guildtitle-headsentinel { color: #ffe57b; }
  .guildtitle-headconsular { color: #00ffc0; }
  .guildtitle-shadow { color: #7c761c;  }
  .guildtitle-sage { color: #89bd91;  }
  .guildtitle-warriormaster { color: #8fbddb; }
  
  /* Council Colors */
  
  .council-high {
    color: #e5fffb;
   
  }

  .council-knowledge {
    color: #9be5ff;
 
  }
 
   .caretaker-knowledge {
    color: #e1f0ff;
 
  }

input.match { border: 2px solid lightblue; }
    input.no-match { border: 2px solid crimson; }
    .verify-message { font-size: 12px; display: block; margin-top: 4px; }
    .match-text { color: lightblue; }
    .no-match-text { color: crimson; }



.invisible {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none; /* Disable pointer events */
}
#notification {
    position: relative;



   
    color: white;


}
#notification.success {
    color: #66cc66; /* Green color for success */
}

#notification.error {
    color: red; /* Red color for error */
}
 .required {
        color: red;
    }
.valid {
    color: #66cc66; /* Green color for valid input */
}

.invalid {
    color: red; /* Red color for invalid input */
}

.checkbox {
   display: inline-flex;
  align-items: center; /* vertical alignment */
  justify-content: start; /* horizontal control */
  cursor: pointer;
  font-family: 'TrajanPro', sans-serif;
  font-size:12px;
padding-bottom:20px;

}
/* Style the actual checkbox */
.checkbox input[type="checkbox"] {
  appearance: none; /* Remove default checkbox */
  width: 20px;
  height: 20px;
  margin-right: 8px;
 

  position: relative;

  border: 2px solid transparent;
  border-radius: 1rem;
  background: linear-gradient(to bottom, #121212, #1C0C02) padding-box,
              linear-gradient(to top, lightyellow 30%, lightblue ) border-box;
  box-shadow: 0 0 6px rgba(0,255,255,0.3), 0 0 6px rgba(255,255,150,0.3);
  cursor: pointer;
  position: relative;
}

.checkbox input[type="checkbox"]:checked {

  background: radial-gradient(circle, white 50%, lightblue 50%), 
              linear-gradient(to top, lightyellow 30%, lightblue );
  box-shadow: 0 0 2px rgba(0,255,255,0.9), 0 0 6px rgba(255,255,150,0.9);
}



/* Show checkmark when checked */
.checkbox input[type="checkbox"]:checked::after {
  opacity: 1;
}

   #loading { display: none; }
    .temple-share { color: lightyellow; font-weight: bold; }
    .delete-btn { color: red; cursor: pointer; margin-top: 5px; display: inline-block; }

 .profilecontainer {
	 
	

	opacity: 0.7;
  position: relative;
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  background:
 url('/src/profilebackground.png') center/cover, /* background image */
  linear-gradient(to bottom, #121212, #1C0C02) padding-box,
              linear-gradient(to top, lightyellow 30%, lightblue ) border-box;
background-clip: padding-box, padding-box, border-box;
background-origin: padding-box, padding-box, border-box;
  box-shadow: 0 0 12px rgba(0,255,255,0.3), 0 0 12px rgba(255,255,150,0.3);
  color: #e0f7ff;
  font-family: 'Garamond', serif;
  text-align: Center;
  max-width: 80%;
  margin: 2rem auto;
    z-index: 10; /* Ensure it's above other elements */
    }
	 .abovecontainer {
	 
	

	opacity: 0.9;
  position: relative;
  padding: 1rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  background:linear-gradient(to bottom, #121212, #1C0C02) padding-box,
              linear-gradient(to top, lightyellow 30%, lightblue ) border-box;
  box-shadow: 0 0 12px rgba(0,255,255,0.3), 0 0 12px rgba(255,255,150,0.3);
  color: #e0f7ff;
  font-family: 'Garamond', serif;
  text-align: Center;
  max-width: 80%;
  margin: 2rem auto;
    z-index: 10; /* Ensure it's above other elements */
    }
	.starburst {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg) scale(0.5); /* Added rotation and scaling */
  width: 30px;
  height: 30px;
  z-index: 2;
}


.starburst::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  clip-path: polygon(
    49% 0%, 51% 0%,   /* Top thin point */
    52% 45%, 55% 45%, /* Top right */
    100% 49%, 100% 51%, /* Right thin */
    55% 52%, 52% 55%, /* Bottom right */
    51% 100%, 49% 100%, /* Bottom thin */
    48% 55%, 45% 52%, /* Bottom left */
    0% 51%, 0% 49%,   /* Left thin */
    45% 45%, 48% 45%  /* Top left */
  );
  background: linear-gradient(to right, cyan, lightyellow);
  filter: drop-shadow(0 0 6px cyan)
          drop-shadow(0 0 10px lightyellow)
          drop-shadow(0 0 14px white);
  animation: pulse-star 3s ease-in-out infinite;
  opacity: 1;
}


@keyframes pulse-star {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.95;
  }
}
.star2 {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  z-index: 2;
}
.star2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  clip-path: polygon(
    49% 0%, 51% 0%,   /* Top thin point */
    52% 45%, 55% 45%, /* Top right */
    100% 49%, 100% 51%, /* Right thin */
    55% 52%, 52% 55%, /* Bottom right */
    51% 100%, 49% 100%, /* Bottom thin */
    48% 55%, 45% 52%, /* Bottom left */
    0% 51%, 0% 49%,   /* Left thin */
    45% 45%, 48% 45%  /* Top left */
  );
  background: linear-gradient(to right, cyan, lightyellow);
  filter: drop-shadow(0 0 6px cyan)
          drop-shadow(0 0 10px lightyellow)
          drop-shadow(0 0 14px white);
  animation: pulse-star 3s ease-in-out infinite;
  opacity: 1;
}

    .profile-header {
		
      display: flex;
      align-items: center;
      margin-bottom: 20px;
	  color: white;
    }
    .profile-picture {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20px;
    }
    .profile-picture img {

      width: 100%;
      height: auto;
    }
    .profile-info {
      flex: 1;
    }
   
    .profile-info p {
      margin: 5px 0;
      color: #666666;
    }
    .bio {
      margin-bottom: 20px;
	  color:white;
    }
    .social-links {
      margin-top: 10px;
    }
    .social-links a {
      display: inline-block;
      margin-right: 10px;
      color: #007bff;
      text-decoration: none;
    }

.imageContainer {
 width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
  display: block;

  border: 2px solid transparent;
  background: linear-gradient(#111, #111) padding-box,
              linear-gradient(to top, lightyellow 30%, lightblue) border-box;
box-shadow: 0 0 12px rgba(200, 200, 200, 0.3), 0 0 12px rgba(200, 200, 200, 0.3);

  color: #e0f7ff;
}

#profilePic {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-radius: 50%;
  display: block;

}
/* Alt text will be shown when the image is not loaded or missing */
#profilePic:empty::after {
	 border-radius: 50%;
  content: "Please upload a profile image...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5); /* Optional: dark background to make text readable */
}

#profilePicContainer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 50%;
  pointer-events: none;

}
	
.form-control{
	
	
		border-radius:5px;
	background-color:black;
	color:white;
}
#email{
		border-radius:5px;
	background-color:black;
	color:white;
}
#password{
	border-radius:5px;
	background-color:black;
	color:white;
}
#passwordverification{
		border-radius:5px;
	background-color:black;
	color:white;
}
a {
  color:  #00e4ff; /* Link color */
  text-decoration: none; /* Remove underline */
}

a:hover {
    color:#f8d37b;/* Link color */
}
.button{
	margin-bottom:5px;
	
	padding:5px;
	text-align:center;
	 border-radius: 10px; 
	color:white;
	background-color:#2c0000;
	font-family: 'TrajanPro', sans-serif;
}
.button:hover{
	color:;
	color:#f8d37b;
	font-family: 'TrajanPro', sans-serif;
}

.buttonselected{
	margin-bottom:5px;
	
	padding:5px;
	text-align:center;
	 border-radius: 10px; 
background-color:#2c0000;
	color:#f8d37b;
	font-family: 'TrajanPro', sans-serif;
}
.buttonselected:hover{
	
	color:;
		color:white;
	font-family: 'TrajanPro', sans-serif;
}



.container {
	 border-radius: 20px; 
	padding:20px;
	color: white;
  width: 400px; /* Adjust as needed */
  margin: 0 auto; /* Center the container horizontally */
background-color: black;
opacity: 75%;
}
@font-face {
    font-family: 'TrajanPro';
    src: url('Fonts/trajanpro-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TrajanPro';
    src: url('Fonts/trajanpro-bold.woff2') format('woff2'),
    font-weight: bold;
    font-style: normal;
}
#text{
@media screen and (max-width: 700px) {
	font-size: 14px; 
}


color: #ffffff;

padding-bottom:2%;
font-size: 20px; 
text-align:left;

animation: fadeIn2 ease 5s;
		z-index: 0;

margin-left:2%;
margin-right:2%;
	
	
	
	position:relative; 




	font-%dmily: 'Times New Roman', serif;
	

}

#pagetitle{
	@media screen and (max-width: 1920px) {
	font-size: 40px; 
}
	@media screen and (max-width: 1200px) {
	font-size: 25px; 
}
	@media screen and (max-width: 700px) {
	font-size: 15px; 
}


  background: linear-gradient(180deg, blue 1%, white 30%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  text-shadow: 0 0 6px rgba(0, 135, 255, 0.2),
               0 0 10px rgba(255, 255, 150, 0.5);



align-content:center;
	font-variant:small-caps;
margin-left:auto;
margin-right:auto;


	text-align:center;
	
	animation: fadeIn2 ease 5s;
		z-index: 0;
	float:none;

	
	


	


	font-family: 'TrajanPro', sans-serif;
	
 
}
#header{
	@media screen and (max-width: 1920px) {
	font-size: 40px; 
}
	@media screen and (max-width: 1200px) {
	font-size: 30px; 
}
	@media screen and (max-width: 700px) {
	font-size: 14px; 
}

color: #f8d37b;
padding-bottom:1%;
	font-variant:small-caps;
	margin-left:1%;
margin-right:1%;

	font-size: 40px; 
	text-align:left;
	
	animation: fadeIn2 ease 5s;
		z-index: 0;
	

	
	

	position:relative; 

	


	font-family: 'TrajanPro', sans-serif;
	
 
}

#subheader{
	@media screen and (max-width: 800px) {
	font-size: 30px; 
}

color: #ffffff;

	font-variant:small-caps;
	margin-left:10%;
margin-right:10%;

	font-size: 100px; 
	text-align:left;
	
	animation: fadeIn2 ease 5s;
		z-index: 0;
	

	
	


	


	font-family: 'TrajanPro', sans-serif;
	
  color: white;
}

}



p {
	animation: fadeIn2 ease 5s;
		z-index: 0;
	
	
	
	

 align-content: space-around;
	font-family: 'TrajanPro', sans-serif;
	
  color: white;
}
.image1{
background-image: url("src/bg.png");
background-size:cover;
	align-content:center;
height:80vw;
width:80vw;
margin-left:auto;
margin-right:auto;
	margin-top:5%;
}

@media screen and (max-width: 900px) {
  .logocontainer {
    height: 60px !important;
  }
}

@media screen and (max-width: 600px) {
  .logocontainer {
    height: 30px !important;
  }
}
}
ul.sidenav {
animation: fadeIn2 ease 5s;

margin-right:auto;

	
	 z-index: 1;

	opacity:1;
	font-weight: bold;

  list-style-type: none;
  
  padding: 0;
  width:100%;


 






}
ul.sidenav li a{
	
	 transition: color 0.3s ease; 
	font-family: 'TrajanPro', sans-serif;
	text-decoration: none; 
	text-align:center;
  float:left;

	 width:150px;
height:40px;
@media screen and (max-width: 900px) {
		 width:110px;
}

@media screen and (max-width: 600px) {
		 width:76px;
		  margin-bottom:-20%;
}
}





#logoheader {
		
	
text-align:center;

background-position: center;
background-repeat:no-repeat;

  display: block;

  
}
.header1 {
		
	
background-image: url("src/headerbutton_thecode.png");

background-position: center;
background-repeat:no-repeat;

	

  color: #ffefaf;
  
}

.header1focused:hover {

background-image: url("src/headerbutton_thecode.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;
 color: #ffefaf;
}


.header1focused {
		

background-image: url("src/headerbutton_thecode_focused.png");

background-position: center;
background-repeat:no-repeat;


 
 color: aff1ff;

}

.header1:hover {

background-image: url("src/headerbutton_thecode_focused.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;
color: aff1ff;

}

.header2:hover{



background-image: url("src/headerbutton_about_focused.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

  
}

.header2 {
		
background-image: url("src/headerbutton_about.png");

background-position: center;
background-repeat:no-repeat;

	
  display: block;
  color: #33038c;
  	
}
	
.header2focused:hover{



background-image: url("src/headerbutton_about.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

  
}

.header2focused {
		
background-image: url("src/headerbutton_about_focused.png");

background-position: center;
background-repeat:no-repeat;


  display: block;
  color: #33038c;
  	
}

.header3 {
		
	
background-image: url("src/headerbutton_enter.png");

background-position: center;
background-repeat:no-repeat;


  display: block;
  color: #33038c;
  
}

.header3focused:hover {

background-image: url("src/headerbutton_enter.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

}


.header3focused {
		
	
background-image: url("src/headerbutton_enter_focused.png");

background-position: center;
background-repeat:no-repeat;

  display: block;
  color: #33038c;
  
}

.header3:hover {

background-image: url("src/headerbutton_enter_focused.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

}

.header4 {
		
	
background-image: url("src/headerbutton_archives.png");

background-position: center;
background-repeat:no-repeat;


  display: block;
  color: #33038c;
  
}

.header4focused:hover {

background-image: url("src/headerbutton_archives.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

}


.header4focused {
		
	
background-image: url("src/headerbutton_archives_focused.png");

background-position: center;
background-repeat:no-repeat;

	
  display: block;
  color: #33038c;
  
}

.header4:hover {

background-image: url("src/headerbutton_archives_focused.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

}

.header5 {
		
	
background-image: url("src/headerbutton_faq.png");

background-position: center;
background-repeat:no-repeat;


  display: block;
  color: #33038c;
  
}

.header5focused:hover {

background-image: url("src/headerbutton_faq.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

}


.header5focused {
		
	
background-image: url("src/headerbutton_faq_focused.png");

background-position: center;
background-repeat:no-repeat;


  display: block;
  color: #33038c;
  
}

.header5:hover {

background-image: url("src/headerbutton_faq_focused.png");
background-size: 100%;
background-position: center;
background-repeat:no-repeat;

}


.fade-in2 {
animation: fadeIn2 ease 5s;

}
@keyframes fadeIn2 {
0% {opacity:0.0;}
100% {opacity:1.0;}
}