@charset "utf-8";

/* ------------------------------------------------------------------------------ */
/* image styles */
.contentViewport img.fullWidthImage,
.contentViewport .imgWrapper.fullWidthImage	{ display:block; width:100%; height:auto; margin:8px auto 16px auto; padding:0; overflow:hidden; }

/* fullWidthImage first-child */
.contentViewport > img.fullWidthImage:first-child,
.contentViewport > :first-child > img.fullWidthImage:first-child { margin-top:0; }

/* styles */
.contentViewport img.leftAligned			{ display:block; width:auto; max-width:45%; height:auto; float:left; margin:4px 16px 8px 0; overflow:hidden; }
.contentViewport img.rightAligned			{ display:block; width:auto; max-width:45%; height:auto; float:right; margin:4px 0 8px 16px; overflow:hidden; } 

/* borderedImage */
.contentViewport img.borderedImage,
.contentViewport .imgWrapper.borderedImage 	{ border:1px solid #c2c2c2; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }

/* cogs */
.contentViewport .imgWrapper.leftAligned	{ display:block; width:240px; max-width:45%; height:auto; float:left; margin:4px 16px 8px 0; overflow:hidden; }
.contentViewport .imgWrapper.rightAligned	{ display:block; width:240px; max-width:45%; height:auto; float:right; margin:4px 0 8px 16px; overflow:hidden; }

/* responsive */
@media only screen and (max-width:400px) {

	/* to stack order for mobile */
	.contentViewport .imgWrapper.leftAligned,
	.contentViewport .imgWrapper.rightAligned { width:100%; max-width:100%; float:none; margin:8px 0 16px 0; }
	
	.contentViewport img.leftAligned,
	.contentViewport img.rightAligned { max-width:100%; float:none; margin-left: 0;}

	
}

/* ------------------------------------------------------------------------------ */
/* image cogs */
.contentViewport .imgWrapper { 
	position:relative; width:auto; height:auto; margin:8px 0 16px 0; padding:0; overflow:hidden;
	background:#fff; }
	.contentViewport .imgWrapper img { 
		display:block; width:100%!important; height:auto!important; margin:0; padding:0; }
	.contentViewport .imgWrapper .caption { 
		display:block; position:relative; width:auto; height:auto; margin:0; padding:8px 16px; overflow:hidden;
		color:#333; font-size:15px; font-weight:400; line-height:24px; }
		
@media only screen and (max-width:500px) {
	
	/* smaller caption */
	.contentViewport .imgWrapper .caption { font-size:12px; line-height:16px; }

}