html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
body {
	background: #EDEDED;
	margin: 0;
	padding: 0;
}
#mybg {
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	background: #ededed;
	z-index: -1;
}
.app, .app * {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: normal;
	font-family: Helvetica, Arial, sans-serif;
}
.app {
	position: relative;
	width: 100%;
	padding-left: 10px;
	padding-right: 10px;
	transition: padding .5s;
}
.app .offscreen {
	position: absolute;
	top: -9999px;
}
.app strong {
	font-weight: bold;
}
.app em {
	font-style: italic;
}
.app h2 {
	font-size: 1.5rem;
	font-family: "EB Garamond", "Garamond", "Times New Roman", Times, serif;
	color: #14213D;
	font-weight: 100;
	padding-bottom: 15px;
}
.app p {
	font-size: 1rem;
}
.app header .descrip {
	color: #565656;
	font-size: .85rem;
	line-height: 1.5em;
	padding: 0 15px;
}
.app .descrip:not(:empty) {
	color: #565656;
	font-size: .9rem;
	line-height: 1.5em;
	margin-top: 10px;
}
.app .packet {
	position: relative;
	margin: 20px 0;
}
.app .packet:after {
	clear: both;
	content: "";
	display: block;
}
.app .JS_columnCount {
	width: 1px;
}
.app .widget {
	background: white;
	margin-bottom: 20px;
	-webkit-column-break-inside: avoid;
	-moz-column-break-inside: avoid;
	column-break-inside: avoid;
	display: inline-block; /* prevents splitting across columns */
	width: 100%;
}
.app .widget:before {
	content: "";
	display: block;
	border-top: 3px solid #99A3C0;
}
.app .titlebar {
	border-bottom: 1px solid #e5e5e5;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	padding: 10px;
}
.app .titlebar:hover {
	background-color: #F2F2F2;
}

.app .column {
	display: block;
	transition: width .25s;
}
.app .column:empty {
	display: none;
}

@media (min-width: 500px) {
	.app {
		padding-left: 15px;
		padding-right: 15px;
	}
	.app .JS_columnCount {
		width: 2px;
	}
	.app .column {
		width: calc((100% - 24px)/2); /* 100% - width of alley */
		margin-left: 24px;
		float: left;
	}
	.app .column.col1 {
		margin-left: 0;
	}
}
@media (min-width: 680px) {
	.app {
		padding-left: 25px;
		padding-right: 25px;
	}
	.app .JS_columnCount {
		width: 3px;
	}
	.app .column {
		width: calc((100% - 72px)/3);
		margin-left: 36px;
	}
}
@media (min-width: 1024px) {
	.app {
		padding-left: 35px;
		padding-right: 35px;
	}
	.app .JS_columnCount {
		width: 3px;
	}
	.app .column {
		width: calc((100% - 108px)/4);
	}
	.app .column.col1 {
		width: calc((100% - 36px)/2);
	}
}
@media (min-width: 1600px) {
	.app {
		padding-left: 50px;
		padding-right: 50px;
	}
	.app .JS_columnCount {
		width: 4px;
	}
	.app .column {
		width: calc((100% - 144px)/5);
	}
	.app .column.col1 {
		width: calc(40% - (288px / 5) + 36px);
	}
}
@media (min-width: 1800px) {
	.app {
		padding-left: 100px;
		padding-right: 100px;
	}
	.app .JS_columnCount {
		width: 5px;
	}
	.app .column {
		width: calc((100% - 180px)/6);
	}
	.app .column.col1 {
		width: calc((100% / 3) - 24px);
	}
}