.dropbtn {
  color: white;

  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  z-index: 1;
  text-transform: uppercase;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #000000;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: rgb(173, 172, 172);}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

    .animation {
      -webkit-animation: mymove 8s; /* Safari 4.0 - 8.0 */
      animation: mymove 5s linear forwards;
      animation-timing-function: ease;
      -webkit-animation-timing-function: ease;
    }

    .animation2 {
      -webkit-animation: mymove2 8s; /* Safari 4.0 - 8.0 */
      animation: mymove2 5s linear forwards;
      animation-timing-function: ease;
      -webkit-animation-timing-function: ease;
    }

    .mySlides {
        display:none;
        max-height:525px; 
        height: auto; 
        margin: 0 auto;
        width: 100vw;
    }

    .text-overlay {
        font-size: 1.6vw;
        color: black;
        background-color: rgb(144, 37, 37, 0.8);
        position: absolute; 
        top: 10%; 
        left: 10%; 
        width: 80%; 
        height:40%;
        visibility :hidden;
    }

    .container {
        width: 100%;
    }

    /* Small screens ie mobiles tablets */
    @media (min-width: 0px) and (max-width: 991px) {  
      @-webkit-keyframes mymove {
        0% {left: -200%; visibility :visible;}
        50% {left: 5%; padding:10px; margin: 0 auto;}
        99% {left: 5%; padding:10px; margin: 0 auto;}
        100% {left: 5%; padding:10px; margin: 0 auto; visibility :hidden;}
      }

    /* Standard syntax */
      @keyframes mymove {
        0% {left: -200%; visibility :visible;}
        50% {left: 5%; padding:10px; margin: 0 auto;}
        99% {left: 5%; padding:10px; margin: 0 auto;}
        100% {left: 5%; padding:10px; margin: 0 auto; visibility :hidden;}
      }

      @-webkit-keyframes mymove2 {
        0% {left: -200%; visibility :visible;}
        50% {left: 5%; padding:10px; margin: 0 auto;}
        99% {left: 5%; padding:10px; margin: 0 auto;}
        100% {left: 5%; padding:10px; margin: 0 auto; visibility :hidden;}
      }

      /* Standard syntax */
      @keyframes mymove2 {
        0% {left: -200%; visibility :visible;}
        50% {left: 5%; padding:10px; margin: 0 auto;}
        99% {left: 5%; padding:10px; margin: 0 auto;}
        100% {left: 5%; padding:10px; margin: 0 auto; visibility :hidden;}
      }

      .panel1 {
        font-size:3vw;
        bottom:5%; 
        top: 5%; 
        width:90%; 
        height: 90%;
        left: 5%;
        padding-left: 5%; 
        padding-right: 5%;
        margin: 0 auto;
      }

      .panel2 {
        font-size:2.8vw;
        bottom: 5%;
        top: 5%;
        width:90%; 
        height:90%; 
        left: 5%;
        padding-left: 5%; 
        padding-right: 5%;
        margin: 0 auto;
      }

      .hideMobile {
        display: none;
      }
    }

    /* Large screens ie laptops, PCs */
    @media (min-width: 992px) {
      @-webkit-keyframes mymove {
        0% {left: -200%; visibility :visible;}
        50% {left: 10%; padding:10px; margin: 0 auto;}
        99% {left: 10%; padding:10px; margin: 0 auto;}
        100% {left: 10%; padding:10px; margin: 0 auto; visibility :hidden;}
      }

      /* Standard syntax */
      @keyframes mymove {
        0% {left: -200%; visibility :visible;}
        50% {left: 10%; padding:10px; margin: 0 auto;}
        99% {left: 10%; padding:10px; margin: 0 auto;}
        100% {left: 10%; padding:10px; margin: 0 auto; visibility :hidden;}
      }

      @-webkit-keyframes mymove2 {
        0% {left: -100%; visibility :visible;}
        50% {left: 5%; padding:10px;}
        99% {left: 5%; padding:10px;}
        100% {left: 5%; padding:10px; visibility :hidden;}
      }

      /* Standard syntax */
      @keyframes mymove2 {
        0% {left: -100%; visibility :visible;}
        50% {left: 5%; padding:10px;}
        99% {left: 5%; padding:10px; }
        100% {left: 5%; padding:10px; visibility :hidden;}
      }

      .panel1 {
        bottom:5%; 
        top: auto; 
        padding-left: 10px; 
        padding-right: 10px;
      }

      .panel2 {
        font-size: 1.8vw;
        left:5%; 
        width:40%; 
        height:80%; 
        padding:10px;
      }
    }

    .w3-left, .w3-right, .w3-badge {cursor:pointer}
    .w3-badge {height:13px;width:13px;padding:0}

    .displayHidden {
      display: none;
    }

    .listitemShown {
      display: list-item
    }