.gallery .images .image {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
  display: none;
}

.gallery .images .image.active {
  display: block;
}

.gallery .images .image .content {
  position: absolute;
  width: 100%;
  height: 100%;
  background: center no-repeat;
  background-size: contain;/*cover;*/
}

.gallery .thumbs {
  position:relative;
  margin-top: 20px;
  margin-left:-10px;
  margin-right:-10px;
  
  /*  display: block;
  width: 100%;
  text-align: left;
  display: flex;*/
  /*justify-content: space-between;*/
  /*flex-wrap: wrap;*/
  /*
  margin-left:-10px;
  margin-right:-10px*/;
}

@media (max-width: 768px) {
  .gallery .thumbs {
   /* height: 100px;*/
/*    overflow-x: auto;
    overflow-y: hidden;*/
  }
}

.gallery .thumbs .thumb > div{
  position:relative;
 
  box-sizing: border-box;

  background: center no-repeat;
  background-size: cover;
  display: inline-block;
  position: relative;


  /*border: 2px solid #fff;*/
  min-height: 76px;
  width: 76px;
  
  cursor: pointer;
  margin:0 10px;
  /*
  border-left: solid 20px transparent;
  border-right: solid 20px transparent;*/
  }
/*
.gallery .thumbs .thumb:before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
  position: absolute;
  left: 45px;
  top: -8px;
}*/

@media (max-width: 768px) {
  .gallery .thumbs .thumb > div{
    width: 65px;
    height: 65px;
  }

  /*.gallery .thumbs .thumb:before {
    left: 25px;
  }*/
}

.gallery .thumbs .thumb.active {
/*  border-color: #2E363E;*/
}

.gallery .thumbs .thumb.active > div:before {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:76px;
	height:76px;
	border:2px solid  #2E363E;
/*  border-bottom-color: #2E363E;*/
}