/* 100% Image Width on Smaller Screens */
body {
    FONT-FAMILY: Arial, sans-serif;
    COLOR: #111111;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
  
A.event01 {
    FONT-WEIGHT: bold;
    COLOR: #000000;
    TEXT-DECORATION: none;
}

A.event01:hover {
    FONT-WEIGHT: bold;
    TEXT-TRANSFORM: none;
    COLOR: #FF0000;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: underline;
}

A.small04 {
    FONT-WEIGHT: normal;
    FONT-SIZE: 12pt;
    TEXT-TRANSFORM: none;
    COLOR: #00A000;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none
}

A.small04:hover {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    TEXT-TRANSFORM: none;
    COLOR: #00A000;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: underline
}

A.small05 {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    TEXT-TRANSFORM: none;
    COLOR: #FFFFFF;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none
}

A.small05:hover {
    FONT-WEIGHT: bold;
    FONT-SIZE: 12pt;
    TEXT-TRANSFORM: none;
    COLOR: #FFFFFF;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: underline
}

A.small06 {
    COLOR: #205090;
    FONT-SIZE: 12pt;
    TEXT-DECORATION: none;
}

A.small06:hover {
    BACKGROUND-COLOR: transparent;
    COLOR: #205090;
    FONT-FAMILY: Arial, sans-serif;
    FONT-SIZE: 12pt;
    FONT-STYLE: normal;
    FONT-VARIANT: normal;
    FONT-WEIGHT: normal;
    LETTER-SPACING: normal;
    TEXT-DECORATION: underline;
    TEXT-TRANSFORM: none;
}

A.small07 {
    BACKGROUND: #205090;
    BACKGROUND-COLOR: #205090;
    COLOR: #BBBBBB;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    FONT-VARIANT: normal;
    FONT-WEIGHT: bold;
    LETTER-SPACING: normal;
    TEXT-DECORATION: none;
    TEXT-TRANSFORM: none;
}

A.small07:hover {
    BACKGROUND: #205090;
    BACKGROUND-COLOR: #205090;
    COLOR: #FFFFFF;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    FONT-VARIANT: normal;
    FONT-WEIGHT: bold;
    LETTER-SPACING: normal;
    TEXT-DECORATION: none;
    TEXT-TRANSFORM: none;
}

A.small08 {
    COLOR: #222222;
    TEXT-DECORATION: none;
}

A.small08:hover {
    FONT-WEIGHT: bold;
    TEXT-TRANSFORM: none;
    COLOR: #000000;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: underline;
}

A.small09 {
    FONT-WEIGHT: bold;
    COLOR: #000000;
    TEXT-DECORATION: none;
}

A.small09:hover {
    FONT-WEIGHT: bold;
    TEXT-TRANSFORM: none;
    COLOR: #0000FF;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: underline;
}

A.soft {
    TEXT-TRANSFORM: none;
    COLOR: #000000;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none;
}

A.soft:hover {
	TEXT-TRANSFORM: none;
    COLOR: #0000C0;
    FONT-STYLE: normal;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none;
}

H2 {
    DISPLAY: block;
    COLOR: #000000;
    FONT-SIZE: 16pt;
    MARGIN-top: 4pt;
    MARGIN-bottom: 5pt;
    MARGIN-left: 0;
    MARGIN-right: 0;
    FONT-WEIGHT: bold;
	  PADDING-TOP: 2px;
    TEXT-TRANSFORM: none;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none;
}

H3 {
    DISPLAY: block;
    COLOR: #0000FF;
    FONT-SIZE: 14pt;
    MARGIN-top: 4pt;
    MARGIN-bottom: 5pt;
    MARGIN-left: 0;
    MARGIN-right: 0;
    FONT-WEIGHT: bold;
	  PADDING-TOP: 2px;
    TEXT-TRANSFORM: none;
    FONT-STYLE: bold;
    FONT-FAMILY: Arial, sans-serif;
    LETTER-SPACING: normal;
    BACKGROUND-COLOR: transparent;
    FONT-VARIANT: normal;
    TEXT-DECORATION: none;
}

H4 {
    BACKGROUND-COLOR: transparent;
    COLOR: #000000;
    FONT-FAMILY: Arial, sans-serif;
    FONT-SIZE: 12pt;
    FONT-VARIANT: normal;
    FONT-WEIGHT: bold;
    LETTER-SPACING: normal;
    LINE-HEIGHT: 1;
    MARGIN: 0;
    MARGIN-BOTTOM: 0;
    TEXT-DECORATION: none;
    TEXT-TRANSFORM: none;
}

a[aria-expanded=false] .fa-chevron-down {
   display: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #205090;
}

.active, .dot:hover {
  background-color: #000000;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover, .close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #7FA6DD;
  color: white;
  cursor: pointer;
  padding: 12px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
}

/* Style the collapsible content. Note: hidden by default... #D8E5F6 matches existing background */
.content {
  padding: 0 16px;
  display: none;
  overflow: hidden;
  font-size: 12px;
  background-color: white;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 6px;
  width: 6px;
  margin: 0 1px;
  background-color: #aaa;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Home Page events */
.events {
  color: blue;
  TEXT-DECORATION: underline;
  font-size: 15px;
}

.events:hover {
  color: blue;
  FONT-WEIGHT: bold;
  font-size: 15px;
}

textarea {
/*  width: 100%; */
  padding: 10px 16px;
  margin: 10px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 1px;
}

textarea:hover, input:hover, textarea:focus, input:focus {
  border: 2px solid #FFFFFF;
  background-color: #205090;
  color: #FFFFFF;
  font-weight: bold;
  outline: none;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

div.donate {
    COLOR: #EEEEEE;
    position: fixed;
    width: 100%;
    bottom: 5px;
    height: 30px;
    background: #307030;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.head {
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
  color: #205090;
  font-weight: bold;
}

div.scrollmenu {
  background-color: #205090;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  font-size: 10pt;
  text-align: center;
  padding: 6px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #4C9E28;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* Hide the images by default */
.mySlides {
    display: none;
}

.newspaper1 {
  background-color:#D8E5F6;
  column-width:170px;
}

.no-outline:focus {
  outline: none;
}

input.contact, select, textarea {
  background-color: #FFFFFF;
  color: #000000;
  font-weight: bold;
  padding: 12px 20px;
  margin: 6px 0;
  border: 2px solid #205090;
/*  -webkit-transition: 0.3s; */
/*  transition: 0.3s; */
}

input.paypal {
background:none;
border:none;
}

input[type="text"], textarea {
/*  width: 100%; */
  padding: 10px 16px;
  margin: 10px 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 1px;
  background-color: #E4FFE4;
}

input[type=submit] {
/*  width: 100%; */
  padding: 10px 16px;
  margin: 2px 0;
  box-sizing: border-box;
  border: none;
  border-radius: 1px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #7FA6DD;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #000000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding-left: 8px;
  padding-right: 8px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  justify-content: center;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.text2 {
  color: #0000FF;
  font-size: 15px;
  font-weight: bold;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.textbox:first-child p {
    display: none;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

.w3-example{background-color:#E7E9EB;border-radius:5px;padding:0.01em 16px;margin:30px 0;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important}