@charset "utf-8";

    body {
        background-image: url(../images/bg.png);
        background-repeat: repeat;
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
        margin: 0;
    }
    #img_wrapper {
        position:relative;
        width: 1126px;
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
        min-height: 100vh;
        box-sizing: border-box;
    }
    
    table, th, td {   
        border: 1px solid black;
        border-collapse: collapse;
        text-align: center;
        height: 25px;    
        }

    .hiddenButton {
        float: right;
        cursor: default;
        padding-right: 15px;
        }
        
    /* css for Image Viewer*/
    * {
        box-sizing: border-box;
    }

    /* Position the image container (needed to position the left and right arrows) */
    .img_container {
      position: relative;
    }
        
    /* Hide the images by default */
    .mySlides {
        display:none;
        position: relative;
        background-color: #ffffff  /*#8085ab;*/
    }

    /* Number text (1/3 etc) */
    .numbertext {
      position: absolute;
      /*color: #000000; */
      top: 0px;
      left: 50%;
      transform: translate(-50%, 0%);
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;          
      padding: 8px 12px;
      top: 0;
      background: inherit;
      background-clip: text;
      /*filter: invert(1) grayscale(1) contrast(9); */
    }

    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 40%;
      width: auto;
      padding: 16px;
      margin-top: 0px;
      color: white;
      font-weight: bold;
      font-size: 30px;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8); 
    } 

    /* Container for image text */
    .caption-container {
      text-align: center;
      height: 40px;
      background-color: #8085ab;
      padding: 4px 16px;
      color: white;
    }

    .img-row:after {
      content: "";
      display: table;
      clear: both;
    } 

    /* Image columns side by side */
    .img-column {
      float: left;
      width: 3.57%;
    }

    /* Add a transparency effect for thumnbail images */
    .demo {
      display: none;
      /* opacity: 0.6; */
    }

    .active,
    .demo:hover {
      opacity: 1;
    }

    .row:after {
    content: "";
    display: table;
    clear: both;
}