html, body {
            margin: 0;
            height: 100%;
            width: 100%;
            align: center;
          }

          #top,#bot {
            height:150px;
            width:100%;
            vertical-align: bottom;
          }
          #left {
            width:30%;
            vertical-align:top;
            background: rgba(125, 125, 125, 0.3);
            margin: 0px 25px 25px 25px;
          }
          #right {
            flex:1;
          }
          #center {
            align:center;
            width:100%;
            vertical-align:top;
            margin: 0px 25px 25px 25px;
          }

          .box {
            align: center;
            color: #fff;
            height: 100%;
            font-family: Verdana, Helvetica, sans-serif;
            background-image: url("/static/j03l_symbol_light.png");
            background-repeat: no-repeat;
            background-position: center;
            display: flex;
            flex-wrap:wrap;
            text-decoration: none;
          }
          .box li {
            font-size: 5em;
            text-decoration: none;
            list-style-type: none;
          }
          .box .row {
            border: 1px dotted #0313fc;
            text-decoration: none;
          }
          .box .row.header {
            flex: 0 1 auto;
          }
          .box .row.content {
            flex: 1 1 auto;
          }
          .box .row.footer {
            flex: 0 1 40px;
          }
          .box a {
            opacity: 0.2;
            color: white;
            text-decoration: none;
          }
          /* unvisited link */
          .box a:link {
            color: white;
            text-decoration:none;
          }

          /* visited link */
          .box a:visited {
            color: white;
            text-decoration: none;
          }
          /* mouse over link */
          .box a:hover {
            color: black;
            opacity: 1.0;
            text-decoration: none;
          }

          /* selected link */
          .box a:active {
            color: white;
            text-decoration: none;
          }
          .text-center {
            align:center;
          }
          .footer {
            display: inline;
            align: center;
            vertical-align: bottom;
            width: 100%;
            text-align: center;
          }
          .footer li {
            text-decoration:none;
            font-size: 1em;
            display: inline;
            align: center;
            margin: 25px 50px 75px 100px;
          }
          .footer a {
            font-size: 1em;
            color: white;
            opacity: 1.0;
          }
          
          .footer a:link {
            font-size: 1em;
            color: white;
          }

          .footer a:visited {
            font-size: 1em;
            color: white;
          }

          .footer a:active {
            font-size: 1em;
            color: white;
          }
          
          .footer a:hover {
            color: black;
            opacity: 1.0;
          }
          a.fill-div {
            display: block;
            height: 100%;
            width: 100%;
            text-decoration: none;
          }

          p {
            font-size: 1em;
            margin: 5px 5px;
            color: white;
          }

          .container {
            column-count: 2;
            height: 100%;
            position: absolute;
            margin: 25px 25px 25px 25px;
          }

        .media {
          height:100%;
        }

        #playlist,audio{background:#666;width:400px;padding:5px;}
        .media .active a{color:#5DB0E6;text-decoration:none;}
        .media li a{color:#eeeedd;background:#333;padding:5px;display:block;}
        .media li a:hover{text-decoration:none;}

        .box .slides {
          align:right;
        }
    
        .box .slides a {
          color:white;
          opacity: 1.0;
          font-size: 1em;
        }
        
        .box .slides a:link {
          color:white;
          opacity: 1.0;
        }
        
        .box .slides a:active {
          color:white;
          opacity: 1.0;
        }
        
        .box .slides a:hover {
          color:white;
          opacity: 1.0;
        }
        
        .box .slides a:visited {
          color:white;
          opacity: 1.0;
        }

        .box .pagination {
          display: inline-block;
          font-size: 1em;
          vertical-align: top;
          width:60%;
          background: rgba(125, 125, 125, 0.3);
          align: center;
        }

        .box .pagination a {
          color: white;
          float: left;
          padding: 8px 16px;
          text-decoration: none;
          border: 1px solid #ddd;
        }

        .box .pagination a.active {
          background-color: #4CAF50;
          color: white;
          border: 1px solid #4CAF50;
        }

        .box .pagination a:hover:not(.active) {background-color: #ddd;}

        .box .pagination a:first-child {
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
        }

        .box .pagination a:last-child {
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }



         * {box-sizing:border-box}

    /* Slideshow container */
    .slideshow-container {
      max-width: 1000px;
      position: relative;
      margin: auto;
    }

    /* Hide the images by default */
    .mySlides {
      display: none;
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      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);
    }

    /* Caption text */
    .text {
      color: #f2f2f2;
      font-size: 15px;
      padding: 8px 12px;
      position: absolute;
      bottom: 8px;
      width: 100%;
      text-align: center;
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    /* The dots/bullets/indicators */
    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .active, .dot:hover {
      background-color: #717171;
    }

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