.slider {
  margin:0 auto 50px;width: 575px;
    border: 1px #999 solid;
}

.thumbnails {
  display: flex; justify-content:space-between;width: auto;flex-wrap: wrap;
  margin-top:90px;line-height: 0; list-style-type: none;padding:20px !important;margin-bottom: 0 !important;
}
.thumbnails li {
  margin: 10px 5px;text-decoration: none;width: 30%;
  overflow: hidden;
}
.thumbnails a {
  display: block;display: flex;justify-content: center;
}
.thumbnails img {
  height: 150px;
  width: auto;align-self: center;
}

.slides {  overflow: hidden; height: 500px; padding:0 !important;display: flex; align-items: center;}

.slides li {width: 573px;height:auto;position: absolute; z-index: 1;margin-top: 100px;}

.slides img { width:573px;}

.slides li:target, .slides2 li:target { display: flex;}

.slides li:not(:target), .slides2 li:not(:target) {  display: none;}/*# sourceMappingURL=slider.css.map */

.zoom img:hover {
  opacity: 0;
}
.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
}


@media only screen and (max-width: 768px) {

   .slider { margin:0 auto;width: 500px;border:none }

  .slides li { width: 498px;margin:0px; }
  .slides img { width:498px;}

  .thumbnails {width: 100%;margin-top:0px}
}



@media only screen and (max-width: 550px) {
  .slides, .thumbnails{padding: 0 !important;}
  .slider { width: 100%; }

  .slides li { width: 100%;margin:0 auto;position: relative; }
  .slides img { width:100%;}

  .thumbnails li {margin: 10px 2px;}

}


@media (min-width: 992px) and (max-width: 1200px) {
  .slider {width: 475px}
.slides li, .slides img {width: 473px}

}

@media only screen and (min-width:1600px)  {
  .slider{width: 775px;}
  .slides{height: 800px;}
  .slides li {width: 773px;}
}