/* This file is a mess!
 * Adding some stuff to the top in support of image slider
  */
  
  p.high {
  padding: 10px;
  background: #eee;
  }
  
 * {
  box-sizing: border-box;
}

.slider {
  width: 630px;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  overflow-x: auto;
  
  border-radius: 5px;
  
  scroll-behavior: smooth;
  
  -webkit-overflow-scrolling: touch;
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  flex-shrink: 0;
  width: 630px;
  height: 430px;
  background: #000;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}
.slides > div:target {
  transform: scale(0.8);
}

.slides img {
object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
     padding: none;
      margin: 0; background: none;
     vertical-align: none;}
/*img {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}*/

.slider > a {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 0 0.5rem 0;
  position: relative;
}
.slider > a:active {
  top: 1px;
}
.slider > a:focus {
  background: #000;
}

/* Don't need button navigation */
@supports (scroll-snap-type) {
  .slider > a {
    display: none;
  }
}

/*html, body {
  height: 100%;
  overflow: hidden;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to bottom, #74ABE2, #5563DE);
  font-family: 'Ropa Sans', sans-serif;
}*/
  
  @keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
  box-sizing: border-box;
}

#slidy-container { 
  width: 100%; margin: 0 auto; overflow: hidden;
}
figure { 
  margin: 0; background: #101010;
  font-family: sans-serif;
  font-weight: 100;
}
div#captioned-gallery { 
  width: 100%; overflow: hidden; 
}
/* figure.slider { 
  position: relative; width: 500%;
  font-size: 0; animation: 30s slidy infinite; 
}
figure.slider figure { 
  width: 20%; height: auto;
  display: inline-block;  position: inherit; 
}*/
figure.slider img { width: 100%; height: auto; max-height: 450px;padding:0; background: none; margin: 0; }
figure.slider figcaption { 
  position: absolute; bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
  font-size: 2rem; padding: .6rem;
  width:100%;
}

figcaption {
  bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; width: 100%;
  font-size: 1.6rem; padding: .6rem;
  width:100%;
}

figure.slider { position: relative; width: 100%;overflow:visible;white-space:nowrap; font-size: 0; animation: 30s slidy infinite; }

figure.slider figure { width: 100%; height: auto; display: inline-block; position: inherit; vertical-align:top }


div.center {
margin: auto;}
/* Now the originals */

h1,h2,h3,h4 {font-family:Verdana;}
h1 {font-size:24px;}
h2 {font-size:20px;}
h3 {font-size:18px;}
h4 {font-size:16pt;}
p {color:black;font-size:12pt;font-family:Arial, Helvetica, sans-serif; text-align: justify;}
ul {color:black;font-size:12pt;font-family:Verdana}
a:active,a:link{ color: rgb(226, 74, 34); font-family:Verdana}
a:hover {text-decoration: underline; color: rgb(226, 74, 34);}
.under a:link { text-decoration:underline } 
.under a:visited { color: rgb(226, 74, 34); text-decoration:underline } 
img{
padding:3px;
margin:10px;
background:#ffffff;
vertical-align:top;
}
body {
width: 960px;
margin: auto;}
html, body, tbody {
text-align:center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000;
}
#masthead {
margin:0px auto;
}
#contentwrapper {
margin:0px auto;
width:94%;
text-align:center;
}
#nav{
width:210px;
float:left;
margin-right:20px;
text-align:left;
}
#content{
float:left;
text-align:left;
width:70%;
padding-left:20px;
border-left:1px solid #000000;
}
#clear{
clear:both;
}
#images{
float:left;
}
#images2{
float:left;

}
#images2 img{
margin-left:50px;
}
#images3{
float:left;
}
#images3 table td{
width:200px;
vertical-align:top;
}
#images4{
float:left;
vertical-align:top;
}

#footer{
width:800px;
}
.update {
  font-size: 0.8em;
  font-style: italic;
  margin: 0 4em;
  text-align: justify;
}
#navigation {
  width: 170px;
}