@charset "utf-8";
/* CSS Document */


/************************************************************************************/

html{
	scroll-behavior:smooth;
}

.topnav {

overflow:hidden;
background-color:#99CCFF;
box-shadow: .2em .4em .8em rgba(0,0,0,0.19);
 }

.topnav a {
 float:left;
 display: block; /* Make the links appear below each other */
 color:#069;
 text-align:center;
 padding: 14px 16px;
 text-decoration: none;
 font-size: 1.4em;
  }
  
.topnav a:hover {
 background-color:#77D2FF;
  color:#F00;
}


.topnav a.active {
 /* Add a blue color to the "active/current" link */
  background-color:#77D2FF;
  color:#F00;
  }


.topnav .icon {
  display: none;
   }
   
  
   
   /* Dropdown container - needed to position the dropdown content */
   
    
.dropdown {
  float: right;
  overflow: hidden;
  background-color:#77D2FF;/* blu background color */
  color:#069;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
   color:#069;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  font-size: 1.4em;
  margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color:#77D2FF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color:#069;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom:#069 thin solid;
}


/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color:#77D2FF;
  color: #F00;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
  color:#F00;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
	 }
	 
  .topnav a.icon {
    float: right;
    display: block;
  }
}

 /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}




	
/*************************************************************************************************************************/


/* Change the link color on hover***** /



   li a.active{background-color:#069;	}

  li.dropdown { display: inline-block;}*/
  
  /* Dropdown container - needed to position the dropdown content */

 
 .dropdown-bulletin {
	
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 23.25%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
	}

 .dropdown-bulletin a {
  color: #069;
  padding: 10px 12px;
  text-decoration: none;
  display:inline-block;
  text-align: left;
  border-bottom: #77D2FF thin solid;
 
}



.dropdown-bulletin a:hover {background-color:#4BC1C6;}

 .dropdown:hover .dropdown-bulletin {
	background-color:#BDF;
	display:inline-block;
	}
	
	
	
	
	


/**********************************VERTICAL MENUS**********************************************************************/
.vertical-menu {
  width: 100%; /* Set a width if you like */
  height:auto;
  margin-bottom:2em;

}

.vertical-menu a {
 background-color: #99CCFF; /* nav blue background color */
   color: #069; /* Black text color */
  display: block; /* Make the links appear below each other */
  padding: 1.2em; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  font-size:1.4em;
border-top:#09C solid thin;
 border-bottom:#09C solid thin;
}

.vertical-menu a:hover {
 background-color:#77D2FF; /* Dark grey background on mouse-over */
  }

.vertical-menu a.active {
 background-color: #99CCFF; /* Add a red color to the "active/current" link */
  color:#F00;
  background-color:#77D2FF;
}


/********************************** ONLINE  MENU**********************************************************************/
#donation-menu {
 
  width: 100%; /* Set a width if you like */
  margin-top:1em;
  height:auto;
 box-shadow:0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
}

#donation-menu a {
 background-color:#77D2FF;/* blu background color */
  color:#069; /*  text color */
  display: block; /* Make the links appear below each other */
  padding: 1.2em; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  font-size:1.4em;
  border-bottom:#069 solid thin;
}

#donation-menu a:hover {
 background-color: #99CCFF; /*  background on mouse-over */
  }

#donation-menu a.active {
  background-color: #2196F3; /* Add a green color to the "active/current" link */
 color:#F00;
}

/*********************************************Alert ButtonLinks******************************/


 .alertButton{

 border: none; /* Remove borders */
 background-color:inherit;
 color:#FFF;/* Add a text color */
 padding:2em; /* Add some padding */
 font-size:1.2em;
 cursor: pointer;
 text-decoration:none;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19)
 /* Add a pointer cursor on mouse-over */
 }
   
 .alertButton a:link{text-decoration:none;
 }
 
 .alertButton  a:visited{text-decoration:none;
 }
 
<!-- /********class colors------->
 
 
 .cyan {
	background-color:#06C;/* Cyan */}
	
.cyan:hover {
	background-color: #0C3;
	}


.blue {
	background-color: #2196F3;
	color:white;} /* Blue */
.blue:hover{ background-color: #0C3;
}

.goldenRod {background-color:(218,165,41);} /* yellow */
.goldenRod:hover {background:#0C3;}


.red {background-color: #900;
color:#FFF} /* Red */ 
.red:hover {background: #F00;
color:white;}



	
	
/*************************PILL BUTTON***********************************************************/	




.pillButton {
  text-decoration:none!important; /* Remove underline from links */
  background-color:#99CCFF;
  border: none;
  color: #069;  /*  text color */
  padding: .6em .6em;
  text-align: center;
  font-size:1.4em;
  display: inline-block;
  margin: 0em 0em;
  cursor: pointer;
  border-radius: 16px;
  box-shadow:0 1px 4px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);	
}
.pillButton a:link{text-decoration:none;
 }

.pillButton:hover {
  background-color:#77D2FF;
  text-decoration:none!important; /* Remove underline from links */
  color: #F00;  /*  text color */

}


/*******************NEWS LINKS***************************************************************/	










/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}