body {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #003f2a;
  background-image: url("../images/springersbackground.jpg");
  background-repeat: repeat-x;
  background-position: top center;
  font-size: 18px;
  font-family: "Libre Franklin", sans-serif;
  line-height: 1.8em;
}

a {
  color: #002aff;
  font-weight: 800;
  text-decoration: none;
}

img {
  filter: drop-shadow(0.5px 1px 1px hsl(285deg 40% 40% / 0.15))
    drop-shadow(1px 2px 2px hsl(285deg 40% 40% / 0.15))
    drop-shadow(2px 4px 4px hsl(285deg 40% 40% / 0.15))
    drop-shadow(4px 8px 8px hsl(285deg 40% 40% / 0.15))
    drop-shadow(8px 16px 16px hsl(285deg 40% 40% / 0.15));
}

.wrapper {
  box-sizing: border-box;
  margin: 0 auto;
  width: 80%;
  background-color: #fff;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 30px;
  padding-top: 10px;
  border-radius: 10px 10px 0 0px;
  background-image: linear-gradient(#fff, #b2c6c2);
}

.wrapper-footer {
  box-sizing: border-box;
  margin: 0 auto;
  width: 80%;
  background-color: #fff;
  margin-bottom: 30px;
  padding: 10px 40px;
  border-radius: 0 0 10px 10px;
  background-color: #b2c6c2;
}

.content {
  width: 90%;
  margin: 0 auto;
  line-height: 3em;
}

footer {
  margin: 0 auto;
  width: 100%;
}

header {
  margin: 0 auto;
  width: 100%;
}

.subHeader {
  font-size: 20px;
}

.flex {
  display: flex;
}

.event-body {
  background-color: #f6f9f8;
}

.event-detail-container {
  width: 100%;
}

.event-right {
  width: 75%;
}

.event-left {
  width: 25%;
}

.padding {
  padding: 20px;
}

.padding-small {
  padding: 5px;
}

.padding-left {
  padding-left: 20px;
}

.padding-up {
  padding-up: 20px;
}

.padding-right {
  padding-right: 20px;
}

.padding-down {
  padding-down: 20px;
}

.navigation {
  box-sizing: border-box;
  float: left;
  width: 25%;
}

.navigation a {
  text-decoration: none;
}

.nav-button {
  box-sizing: border-box;
  width: 100%;
  background-color: #fffcfc;
  padding: 10px 20px;
  font-size: 20px;
  border: 10px solid #e3ebea;
}

.nav-button:hover {
  background-color: #cde0d9;
  color: #000;
}

.page-decorator {
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 0 10px 10px 0;
  float: left;
  width: 74%;
  background-color: #fff;
}

.col-wrapper {
  box-sizing: border-box;
  width: 100%;
  display: flex;
}

.col-one {
  box-sizing: border-box;
  margin: 0 auto;
  width: 100%%;
}

.col-two {
  box-sizing: border-box;
  width: 50%;
}

.col-three-one {
  width: 33%;
}

.col-four-one {
  width: 25%;
}

.col-five-one {
  box-sizing: border-box;
  width: 20%;
}

.col-six-one {
  box-sizing: border-box;
  width: 16.666%;
}

.clear {
  clear: both;
}

#newsFlash {
  border: 4px solid #74bbbd;
  border-radius: 5px;
  min-height: 230px;
  width: 90%;
  margin: 20px auto;
}

#newsContent {
  border: 12px solid #e0f1e7;
  padding: 20px;
  text-align: center;
  min-height: 230px;
}

td.banner {
  font-size: 36px;
  color: white;
  font-weight: bold;
  padding: 4px 4px 4px 4px;
  text-align: center;
  background-color: #014b5c;
}

.banner {
  color: #ffffff;
  border: 1px solid #d3d3d3;
  text-align: center;
  font-size: 36px;
  border-radius: 10px;
  background: #005262;
  width: 90%;
  margin: 0 auto;
  padding: 20px 0;
}

.dogs {
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

.holidayBox {
  border-style: outset;
  text-align: center;
}

.pictureBox {
  border-style: double;
  padding: 10px;
}

.dog-images {
  box-sizing: border-box;
  padding: 3px;
  border-radius: 10px;
  border: outset;
  margin: 1px;
}

/* CALENDAR STYLES */
table.callong {
  border: 1px solid black;
  width: 100%;
  vertical-align: top;
}

td.calletter {
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding-left: 4px;
  vertical-align: top;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 20px;
  text-align: center;
}

th.calletter {
  font-size: 12px;
  font-family: arial;
  color: black;
  font-weight: bold;
  text-align: center;
}

td.calmonth {
  font-size: 11px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  padding: 4px;
  border: 1px solid black;
  width: 33.333%;
  text-align: center;
  vertical-align: top;
}

.dayfont {
  background-color: #33bdb9;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  padding: 4px;
  color: white;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.dayfont1 {
  background-color: #f76605;
  font-size: 14px;
  font-family: arial;
  padding: 4px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.dayfont2 {
  background-color: #6be004;
  font-size: 14px;
  font-family: arial;
  padding: 4px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.dayfont3 {
  font-size: 14px;
  font-family: arial;
  padding: 4px;
  color: 01465c;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.dayfont4 {
  background-color: #005768;
  font-size: 14px;
  font-family: arial;
  padding: 4px 4px 4px 4px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.dayfont5 {
  background-color: #bf0303;
  font-size: 14px;
  font-family: arial;
  padding: 4px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.dayfont6 {
  background-color: #652730;
  font-size: 14px;
  font-family: arial;
  padding: 4px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

.dayfont7 {
  background-color: #ff0080;
  font-size: 14px;
  font-family: arial;
  padding: 4px;
  color: white;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
}

caption.calendar-month {
  font-size: 14px;
  font-family: arial;
  color: black;
  font-weight: bold;
  text-align: center;
}

/* CALENDAR STYLES */

.searchlong {
  line-height: 3em;
}

.p2 {
  //line-height: 3em;
}

h1 {
  color: #bf0303;
  font-size: 40px;
  font-family: "Proza Libre", sans-serif;
}

h2 {
  font-size: 25px;
  font-family: "Proza Libre", sans-serif;
  color: #729f27;
}

.headerText {
  color: #bf0303;
  font-size: 40px;
  font-family: "Proza Libre", sans-serif;
  background-color: #eff5ed;
  padding: 20px;
}

.background-green {
  background-color: rgba(133, 178, 65, 0.5);
}

.background-pale {
  background-color: rgba(239, 243, 242, 0.5);
}

.gap {
  width: 20px;
  height: 20px;
}

.mobile {
  display: none;
}

.middle {
  margin: 0 auto;
}

.background-tanned-button {
  background-color: #c1d0ce;
  border-radius: 10px;
  display: inline-block;
  border: 1px black solid;
  padding: 5px;
}

.stripe:nth-child(odd) {
  background-color: #c3d2d0;
}

.header {
  background-color: #005262;
  color: #fff;
}

.text-center {
  text-align: center;
}

.calendar {
  width: 100%;
}

.calendar,
.calendar table {
  border: 0;
  margin: 0;
}

.calendar,
.calendar table,
.calendar td {
  text-align: center;
}

.calendar .year {
  font-family: Verdana;
  font-size: 18pt;
  color: #ff9900;
}

.calendar .month {
  width: 25%;
  vertical-align: top;
}

.calendar .month table {
  font-size: 8pt;
  font-family: Verdana;
  width: 100%;
}

.calendar .month th {
  text-align: center;
  font-size: 12pt;
  font-family: Arial;
  color: #666699;
}

.calendar .month td {
  font-size: 8pt;
  font-family: Verdana;
}

.calendar .month .days td {
  color: #666666;
  font-weight: bold;
}

.calendar .month .sat {
  color: #0000cc;
}

.calendar .month .sun {
  color: #cc0000;
}

.calendar .month .today {
  background: #ff0000;
  color: #ffffff;
  border: 3px dotted black;
}

.calendar .month .Activities {
  background: #6ce004;
}

.calendar .month .Activities a {
  color: #fff;
  text-decoration: none;
}

.calendar .month .Show {
  background: #34bcb9;
}

.calendar .month .Show a {
  color: #fff;
  text-decoration: none;
}

.calendar .month .Competitions {
  background: #005868;
}

.calendar .month .Competitions a {
  color: #fff;
  text-decoration: none;
}

.calendar .month .Walks {
  background: #ff017f;
}

.calendar .month .Walks a {
  color: #fff;
  text-decoration: none;
}

.calendar .month .ClubMeetings {
  background: #f86609;
}

.calendar .month .ClubMeetings a {
  color: #fff;
  text-decoration: none;
}

.calendar .month .Multi {
  background-image: linear-gradient(red, yellow, green);
}

.calendar .month .Multi a {
  color: #000;
  text-decoration: none;
}

.small {
  font-size: 10px;
}

.tiny {
  font-size: 8px;
}

input[type="text"] {
  width: 90%;
  padding: 5px;
}