.my-gallery {
  display: inline-block;
  width: 100%;
  float: left;
/*  margin: 0 20px 5px 60px; */
}
.my-gallery img {
  width: 100%;
  height: auto;
}

.my-gallery figure {
  display: inline-block;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 6px 6px 0 rgba(0, 0, 0, 0.03);
}

.my-gallery figcaption {
  display: none;
}

.my-gallery figure {
  display: inline-block;
  margin: 0 5px 5px 0;
  width: 330px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03), 0 6px 6px 0 rgba(0, 0, 0, 0.03);
}

.my-gallery figure {
    text-align:center;
}
	
}

/* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (max-width: 1220px) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 330px;
  		}
    }
	
	@media only screen and (max-width: 980px) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 254px;
  		}
    }
	
	@media only screen and (max-width: 400px) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 294px;
  		}
    }
	
    @media only screen and (min-width: 1440px) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 330px;
  		}
    }
    @media only screen and (min-width: 2000px) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 330px;
  		}
    }
	
	/* iPhone 6/7/8/X */
    @media only screen and (min-device-width: 375px) and (max-device-width: 375px) and (orientation:portrait) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 272px;
  		}
    }
	
	/* iPhone 6/7/8/X */
    @media only screen and (min-device-width: 667px) and (max-device-width: 667px) (orientation:landscape) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 261px;
  		}
    }
	
	/* Galaxy S5 */
	    @media only screen and (max-device-width: 360px) {
        .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 258px;
  		}
    }
	
	/* iPad landscape */
    @media only screen and (device-width: 768px) {
       .my-gallery figure {
  		margin: 0 5px 5px 0;
  		width: 290px;
  		}
    }
    /* iPad portrait */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
	
	
	
	
	
	
	.pswp--touch {
    .pswp__button--arrow--left,
    .pswp__button--arrow--right {
        visibility: visible;     
    }
}