/*--------------- styles for divs which contain photos and float left or right-*/

 .img-holder200right {
	display: inline-block;
	padding: 0;
		width:200px;
		margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 20px;
		float:right;

}
 .img-holder200left {
	display: inline-block;
	padding: 0;
		width:200px;
		margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 20px;
	margin-left: 0px;
		float:left;
 }
 .img-holder200right>img {
	display: block;
	max-width: 100%;
	height: auto;
	
}
/*---- images with captions and borders --------*/

.thumbnail300px, .thumbnail200px, .thumbnail100px {
	display: block;
	padding: 1%;
	line-height: 1;
	border: 1px solid #ddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
.thumbnail300px {
	display: inline-block;
	padding: 1%;
	width: 300px;
}
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 200px;
}
.thumbnail100px {
	display: inline-block;
	padding: 0;
	width: 100px;
	border: none !important;
	-webkit-box-shadow: none !important;
}
.thumbnail300px img, .thumbnail200px img, .thumbnail100px img {
	padding-bottom: 2%;
}
.img-right-responsive {
	display: block;
	max-width: 100%;
	height: auto;
	float: right;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 20px;
}
.img-left-responsive {
	display: block;
	max-width: 100%;
	height: auto;
	float: left;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 0px;
}
.thumbnail300px .caption p, .thumbnail200px .caption p {
	margin: 0px;
	line-height: normal;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	font-size: .8em;
	font-style: italic;
}
.thumbnail100px .caption p {
	margin: 0px;
	line-height: .8em;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	font-size: .7em;
	font-style: normal;
	border: none !important;
	border-radius: 0;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}
/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}
/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Landscape */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Portrait */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}

/* Landscape */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
.thumbnail200px {
	display: inline-block;
	padding: 1%;
	width: 300px !important;
}
.img-right-responsive {
	float: none !important;
}
}
