body {
  background-image: url("/Pictures/Background3.png");
  background-repeat: repeat;
  color: white;
  background-color: #783F04;
  font-family: sans-serif;
  font-size: 0.875em;
  position: relative;
  }
  

  
center {
  text-align: center;
  }
  
/*Contains everything*/
.wrapper {
  width: 74vw;   /* was 1150px*/
  min-height: 102vw;
  background: #051b22;
  
  margin: 0 auto;
  top: 0;
  margin-top: -10px;
  border-left: 0px solid #12282f;
  border-right: 0px solid #12282f;  
  margin-bottom: -10px;
  }
  
/*Contains main and sidebar divs*/
.wrapper-2 {
  position: relative;
  
}
  
/*Header and footer images*/
.header {
  height: 25vw;
  
  overflow: hidden;
  background: linear-gradient(rgb(0,0,0,0.1),rgb(0,0,0,0.1)), url("/Pictures/Seth-Flex-Banner.jpg"); /*This is the image in the header and footer*/
  background-size:cover; /*was cover, changed to try and get mobile compatible*/
  background-position: -20px 0px; /* was -100 100 */
  }
  
  
.footer {
  padding: 0px 0px;
  margin: 0;
  background: #040f09;
  height: 50px;
  text-align: center;
  }
  
.header img {
  border-top: 0px;
  height:auto;
  }
  
  
/*Big title at the top of the page.*/  
.title {
  padding: 15px 10px 10px 20px;
  }
  
/*Override default margins/padding for headings.*/
.title h1, .title h2, .title h3 {
  padding:0;
  margin: 0;
  }

/*Container for top row of links.*/
.links {
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 5px;
  }
  
/*Div style for individual links.*/
.link {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  float: none;
  font-weight: bold;
  font-size: 1.16em;
  padding: 5px;
  margin-right: .5vw;
  margin-left: .5vw;
  border: 0px solid red;
  }
  
.link a {
  color: white;
  text-decoration: none;
  }

/*These three classes are just for defining the boundaries and size of the main and sidebar columns. Most fancy styling goes in the 'box' class.*/
.main, .sidebar-right {
  display: inline-block;
  }
  
.sidebar-left, .sidebar-right {
  width: 12vw; /*200px; 9.8vw*/
  position: absolute;
  top: 0;
  }

.sidebar-left {
  margin-left: .5vw;
  }
  
.main {
  margin-left: 13.0vw; /*220px; 11vw*/
  width: 48.05vw; /*was 710px 42.5vw*/
  }
  
.sidebar-right {
  margin-right: .5vw; /*was 10px*/
  margin-left: .5vw; /*was 10px*/
  }
  
/*Box used for individual sections in the sidebar, center column, etc.*/
.box {  
  padding: .125vw .25vw .125vw .25vw; /* was 5px 10px 5px 10px; */
  background: #e2dcc1;
  color: #12282f;
  border-top: 5px solid #187b9b;
  border-bottom: 5px solid #187b9b;
  margin: 10px 0px 15px 0px;
  }
  
  /*Box used for hvoerable objects i.e Members section. */
  .box_hover {  
  padding: .125vw .25vw .125vw .25vw; /* was 5px 10px 5px 10px; */
  background: #e2dcc1;
  color: #12282f;
  border-top: 5px solid #187b9b;
  border-bottom: 5px solid #187b9b;
  margin: 10px 0px 15px 0px;
  }
  
  /*Hover expand settings.*/
  .box_hover:hover {
  transform: scale(1.05);
  position: relative;
  z-index: 1; 
 }
 
  /*Prevent overflow of large images in main text areas for box_hover.*/
.box_hover img {
  max-width: 100%;
  height: auto;
  margin: auto;
  display: block;
  }
  
/*Prevent overflow of large images in main text areas.*/
.box img {
  max-width: 100%;
  height: auto;
  margin: auto;
  display: block;
  }
  
  .mySlides {
    display: none;
    }
  
 .slideshow-container {
  width: 40vw;
  height: 27vw;
  max-height: 27vw;
  /*position: relative;*/
  margin: auto;
  display: flex;
  justify-content: center;
  
}

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

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
  
/***
  Not give any style rules by default. Move the padding from the 'box' class here if you want boxes with specially styled headers or images that 
  don't follow the margins of the main text. (For an example of that: see skin #1.)
  ***/
.inner {
  
  }
  
.inner2 {
  margin-top: -5px;
  margin-bottom: -10px;
 }
  
  
 
/* For narrow screens. Makes the sidebars narrower, and makes width of the 
 * center/main div 50% of the viewport width.
 */
 
@media(max-width:1180px) {
  .wrapper {
    width: calc(440px + 50vw);
    }
  .main {
    width: 50vw;
    }
  }
  
@media(max-width:910px) {
  .wrapper {
    width: calc(360px + 52vw);
    }
  .sidebar-left, .sidebar-right {
    width: 160px;
    }
  .main {
    margin-left: 180px;
    width: 52vw;
    }
  }
  
/* Mobile compatibility. Puts everything into a standard vertical layout. */
@media(orientation:portrait) {
  .wrapper {
    width: 96vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .wrapper-2 {
    width: 94vw;
    margin: 0 auto;
    padding:0;
    position: relative;
    }
  .sidebar-left, .main, .sidebar-right {
    position: relative;
    width: 92vw;
    margin: 0.25rem 1vw;
    }
  .sidebar-left, .sidebar-right {
    font-size: 0.95em;
    }
    .header {
    /* if possible change zoom on mobile header*/
    height: 30vw;
    background-position: 0px 0px; /* was -100 100 */
  }
    .footer {
    height: 15vw; 
    background-position: 0px 0px; /* was -100 100 */
   }
  }