body {
    FONT-FAMILY: Arial, sans-serif;
    BACKGROUND-COLOR: #D4D4D4;
}

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

H2 {
    DISPLAY: block;
    COLOR: #305CDE;
    FONT-SIZE: 14pt;
    MARGIN-top: 8pt;
    MARGIN-bottom: 2pt;
    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: 13pt;
    FONT-VARIANT: normal;
    FONT-WEIGHT: bold;
    LETTER-SPACING: normal;
    LINE-HEIGHT: normal;
    MARGIN: 0;
    MARGIN-BOTTOM: 0;
    TEXT-DECORATION: none;
    TEXT-TRANSFORM: none;
}

div.register {
    FONT-SIZE: 11pt;
    position: fixed;
    width: 100%;
    bottom: 5px;
    height: 30px;
    BACKGROUND: #205090;
    BACKGROUND-COLOR: #205090;
    COLOR: #BBBBBB;
    display: flex;
    justify-content: center;
    align-items: center;
} 

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: #7FA6DD;
}

img {
  max-width: 99%;
  max-height: 99%;
}

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;
}

* {box-sizing:border-box}

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

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

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

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

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

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

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

/* 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);
}

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

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

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

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

/* 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;
}

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

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

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

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

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

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.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;
}

/* 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;
}

/* 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;
}

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

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

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

.event_detail {
    border-bottom: 1px solid hsl(240, 5%, 91%);
    margin: 2px 0 0 0;
    padding: 5px 0 10px 0;
}

.event_summary:hover,
.event_summary:active { 
    color: blue;
    cursor: pointer; 
}

.event_detail[open] > .event_summary { 
    font-weight: 500;
    color: blue;
}

.event_summary {
    list-style: none;
  }

.event_summary::-webkit-details-marker {
    display: none;
  }

.event_summary { 
    display: block;
    padding: 0;
    position: relative;
    text-align: left;
}

.event_summary:before {
    display: inline-block;
    content: url("http://dcpvb.com/images/icon-arrow-down-5.png");
    background-repeat: no-repeat;
    background-position: left;
    text-align: left;
    padding-bottom: 4px;
  }
  
details[open] .event_summary:before {
    display: inline-block;
    width: 18px;
    height: 10px;
    content: url("http://dcpvb.com/images/icon-arrow-down-5.png");
    background-repeat: no-repeat;
    background-position: left;
    transform:scaleY(-1);
}

.event_summary {
    color: var(--blue-dark);
    FONT-SIZE: 11pt;
}

.event_summary:focus {
    color: blue; 
    outline: none;
}

.event_text {
    color: var(--blue-mid);
    font-size: var(--base-font-size);
    line-height: 1.6;
    margin: 10px 0 0 0;
}

@media (min-width: 900px) {
    .event {
        align-items: center;
        display: flex;
        justify-content: space-between;
        min-width: 900px;
        padding: 0;
        margin: 0;
    }

    .event_text {
        margin: 0 0 10px 0;
    }

    .event_detail {
        margin: 10px 0 0 0 0;
        padding: 0;
    }

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scroll-container img {
  padding: 10px;
}