body {
 font-family: 'Work Sans', sans-serif; position: relative;
}

h1, h2, h3, h4, h5, h6, th, td {
 font-family: 'Crimson Text', serif;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

.justify {
  text-align: justify;
}

.w3-bar-item{
    letter-spacing: 3px;
    font-size-adjust: 100%;
    flex-direction: row;
    flex-wrap: wrap;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: Verdana, sans-serif; 
  margin:0;
}

.mySlides {
  display: none;
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
width: auto;
position: relative;
height: auto;
}

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}

#map {
height: 250px;
width: 100%;
}

.banner{
height: 100%;
width: 100%;
}

.flip-card {
background-color: transparent;
width: 49vh;
height: 49vh;
perspective: 1000px; /* Remove this if you don't want the 3D effect */
margin: 5%;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color: #bbb;
color: black;
}

/* Style the back side */
.flip-card-back {
background-color: rgb(33, 134, 121);
color: white;
transform: rotateY(180deg);
}

.rowImg{
transition: transform .5s; /* Animation */
max-width: 100%;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.rowImg:hover {
transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.w3-container{
box-shadow: 0 0 250px 0 rgba(0, 0, 0, 0.005);   
}

.w3-bottombar{border-bottom:1px solid white!important}
.w3-hover-border-black:hover{border-color:black!important}

div.gallery {
  margin: 5px;
  float: left;
  width: 300px;
  height: 300px;
}

div.gallery:hover {
  border: 1px solid #777;
}

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

div.desc {
  padding: 15px;
  text-align: center;
}

.align {
  align-items: center;

}

.right {
  float: right;
  flex-direction:column;

}

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

#navbar {
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#navbar a {
  width: 13%;
}

.gallery {
  width: 100% !important;
  height: 500px !important;
}

.gallery-cell {
  width: 100%;
  height: 500px;
  margin-right: 10px;
  background: #8C8;
  counter-increment: gallery-cell;
}

@media screen and (min-width: 601px) and (max-width: 1200px) {
  #navbar a {
    font-size: 75% !important;
  }
}

@media screen and (min-width: 100px) and (max-width: 500px) {
  .resize {
    width: 20% !important;
    height: 20% !important;
  }
}