.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}



.fakeimg {
    height: 200px;
    background: rgb(121, 141, 141);
  }
      * { margin: 0;
        padding: 0;
          box-sizing: border-box;
        }
      #img-wrapper { max-width: 460px;
              height: auto;
              margin:auto;
               overflow: hidden;
              position: relative;}
      .mySlides { display: none;  }
      img { width: 100%; height: auto;}
      .text { color: #f2f2f2;
          font-size: 15px; 
          padding: 8px 12px;
          position: absolute;
          bottom: 8px;
          width: 100%;
          text-align: center;}
      .numbertext { color: #f2f2f2;
              font-size: 12px;
              padding: 8px 12px;
              position: absolute;
              top: 0; }
      .dot { height: 16px;
           width: 16px;
          margin: auto;
           background-color: rgb(236, 160, 187);
           border-radius: 50%;
           display: inline-block;
           transition: background-color 1.6s ease; }
      .active { background-color: #00E8E8; }
      /* Fading animation */
      .fade {
        -webkit-animation-name: fade;
        -webkit-animation-duration: 1.9s;
        animation-name: fade;
        animation-duration: 8s;
      }
      
      @-webkit-keyframes fade {
        from {opacity: .5} 
        to {opacity: 1}
      }
      
      @keyframes fade {
        from {opacity: .5} 
        to {opacity: 1}
      }
      @media only screen and (max-width: 700px) {
          #img-wrapper { 
              height: auto;
               overflow: hidden;
              }
          .text { color: #f2f2f2;
          font-size: 15px; 
          padding: 8px 12px;
          position: absolute;
          top: 320px;
          width: 100%;
          text-align: center;
        }
        .dot { height: 16px;
           width: 16px;
          margin: auto;
           background-color: lightcoral;
           border-radius: 50%;
           display: inline-block;
           transition: background-color 0.6s ease; }
          .active { background-color: #00E8E8; }
      }
      
      @media only screen and (max-width: 500px) {
          #img-wrapper { 
              height: auto;
               overflow: hidden;
              }
          .text { color: #f2f2f2;
          font-size: 15px; 
          padding: 8px 12px;
          position: absolute;
          top: 220px;
          width: 100%;
          text-align: center;}
          .dot { height: 16px;
           width: 16px;
          margin: auto;
           background-color: lightcoral;
           border-radius: 50%;
           display: inline-flex;
           transition: background-color 0.6s ease; }
          .active { background-color: #00E8E8; }
      }
      /* On smaller screens, decrease text size */
      @media only screen and (max-width: 300px) {
          #img-wrapper { 
              height: auto;
               overflow: hidden;
              }
              
          .dot { height: 16px;
           width: 16px;
          margin: auto;
           background-color: rgba(67, 52, 143, 0);
           border-radius: 50%;
           display: inline-block;
           transition: background-color 0.4s ease; }
          .active { background-color: #00e8e800; }
      }
         .BoxSHadow { box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.473); }
         .BoxSHadow:hover { 
                            box-shadow: 2px 3px 15px 2px rgba(0, 0, 0, 0.733); 
                            transition: all 2s;
                          }
        .BoxSHadow img:hover { -webkit-filter: grayscale(10%);
                               filter: grayscale(100%);
                               transition: all 6s;
                            }
         .BoxSHadow p  {padding: 6px;}
         .BoxSHadow h5 {padding: 5px;}
         .NoLin {border: none; }




         .collapsible {
          background-color: #555;
          color: white;
          cursor: pointer;
          padding: 0;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 30px;
        }

        .collaps2 {
          background-color: #555;
          color: white;
          cursor: pointer;
          padding: 0;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 30px;
        }
        
        .active button, .collapsible:hover {
          background-color: #666; 
        }
        .content {
          padding: 0 18px;
          display: none;
          overflow: hidden;
          background-color: #f1f1f1;
        }