.w3-theme-l5 {color:#000 !important; background-color:#e9fffd !important}
.w3-theme-l4 {color:#000 !important; background-color:#b7fff8 !important}
.w3-theme-l3 {color:#000 !important; background-color:#6efff1 !important}
.w3-theme-l2 {color:#000 !important; background-color:#26ffe9 !important}
.w3-theme-l1 {color:#fff !important; background-color:#00dcc6 !important}
.w3-theme-d1 {color:#fff !important; background-color:#008578 !important}
.w3-theme-d2 {color:#fff !important; background-color:#00766a !important}
.w3-theme-d3 {color:#fff !important; background-color:#00685d !important}
.w3-theme-d4 {color:#fff !important; background-color:#005950 !important}
.w3-theme-d5 {color:#fff !important; background-color:#004a43 !important}
.w3-theme-bl {color:#fff !important; background-color:#000000 !important}

.w3-theme-blue {color:#fff !important; background-color:#005085 !important}
.w3-theme-red  {color:#fff !important; background-color:#85000D !important}
.w3-theme-brown  {color:#fff !important; background-color:#857800 !important}
.w3-text-blue {color:#005085 !important}
.w3-text-red {color:#85000D !important}


/* .w3-theme-light {color:#000 !important; background-color:#e9fffd !important} */
.w3-theme-light {color:#000 !important; background-color:#dddddd !important}
.w3-theme-dark {color:#fff !important; background-color:#004a43 !important}
.w3-theme-action {color:#fff !important; background-color:#004a43 !important}

.w3-theme {color:#fff !important; background-color:#008578 !important}
.w3-theme-lightgreen {color:#fff !important; background-color:#B3E2D0 !important}

.w3-text-theme {color:#008578 !important}
.w3-text-teal {color:#008578 !important}
.w3-text-darkgreen,.w3-hover-text-darkgreen:hover{color:#006c66!important}

.w3-border-theme {border-color:#008578 !important}
.w3-border-theme-red {border-color:#85000D !important}
.w3-border-theme-blue {border-color:#005085 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#008578 !important}
.w3-hover-text-theme:hover {color:#008578 !important}
.w3-hover-border-theme:hover {border-color:#008578 !important}

.footer {position: fixed;  left: 0;  bottom: 0;  width: 100%;  background-color: #008578;  color: white;  text-align: left;}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

@media print {
   .w3-sidebar{display:none !important}
   .w3-bar{display:none !important}
   .footer{display:none !important}
   .nav{display:none !important}
   .hide-in-print{display:none !important}
   table, img { page-break-inside: avoid }
}

div.gallery {
  position: relative;  
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 200px;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.gallery div.desc {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 10px;
}

/* flipping cards */

.flip-card {
  background-color: transparent;
  width: 200px;
  height: 250px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #008578;
  color: white;
  transform: rotateY(180deg);
}  


/* Roboto regular */

@font-face {
    font-family: "Roboto";
    src: url("webfonts/Roboto-Regular.eot");
    src: url("webfonts/Roboto-Regular.eot?#iefix") format('embedded-opentype'),
         url("webfonts/Roboto-Regular.woff2") format('woff2'),
         url("webfonts/Roboto-Regular.woff") format('woff'),
         url("webfonts/Roboto-Regular.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Roboto bold */

@font-face {
    font-family: "Roboto";
    src: url('webfonts/Roboto-Bold.eot');
    src: url('webfonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Roboto-Bold.woff2') format('woff2'),
         url('webfonts/Roboto-Bold.woff') format('woff'),
         url('webfonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Roboto italic */

@font-face {
    font-family: "Roboto";
    src: url('webfonts/Roboto-Italic.eot');
    src: url('webfonts/Roboto-Italic.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Roboto-Italic.woff2') format('woff2'),
         url('webfonts/Roboto-Italic.woff') format('woff'),
         url('webfonts/Roboto-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Roboto light */

@font-face {
    font-family: "Roboto";
    src: url('webfonts/Roboto-Light.eot');
    src: url('webfonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
         url('webfonts/Roboto-Light.woff2') format('woff2'),
         url('webfonts/Roboto-Light.woff') format('woff'),
         url('webfonts/Roboto-Light.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}