body {
	color: rgb(88, 77, 77);
	font-family: 'Arial-BoldMT', 'Arial', sans-serif;
	line-height: 133%;
	background: url("../images/bg.png");
	padding: 0;
	margin: 0;
}

.headercard {
	margin: 0;
	margin-bottom: 40px;
	padding: 80px;
	clear: both;
	text-align: center
}

.page-card {
	Display: Block;
	Border: none;
	border-radius: 15px;
	padding: 20px 20px 20px 20px;
	margin: auto;
	margin-bottom: 40px;
	Background: white;
	width: 80vw;
	min-width: 420px;
	box-sizing: content-box;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.photo-card {
	Display: inline-block;
	Border: none;
	padding: 20px 20px 20px 20px;
	margin: 1vw;
	Background: white;
	width: 45%;
	min-width: 100px;
	box-sizing: border-box;
	vertical-align: middle;
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3),0 6px 20px 0 rgba(0,0,0,0.19)
}

	.photo-card img {
		width: 100%;
	}

.photo-right-skew {
	-webkit-transform: rotate(2deg); /* Safari */
	transform: rotate(2deg);
}

.photo-left-skew {
	-webkit-transform: rotate(-2deg); /* Safari */
	transform: rotate(-2deg);
}

.photo-card-row {
	width: 100%;
	margin: auto;
	margin-bottom: 20px;
	padding: 0;
	padding-bottom: 20px;
}

	.photo-card-row:after {
		content: "";
		display: table;
		clear: both;
	}

.date-card {
	Display: block;
	float: right;
	padding: 0;
	padding-top: 3em;
	vertical-align: top;
}

@media (max-width:900px) {
	.date-card {
		float: none;
	}
}

.tabContainer {
	width: 100%;
	height: calc(20px + 1.5em);
	max-height: calc(20px + 1.5em);
	margin: 0;
	overflow-y: hidden;
	z-index: 1000;
}

#tabdrop {
	width: 70%;
	position: absolute;
	z-index: 1010;
	//max-width:calc(100vw - 50px);
	box-sizing: border-box;
	box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5); /*horiz vert blur spread*/
}
#tabdrop .w3-button{	border-bottom: 1px solid #000053 !important;}

.tabdrop-buttonshadow {
	position: relative;
	z-index: 1011;
	box-shadow: 10px 10px 15px 0 rgba(0, 0, 0, 0.75);
}

.sticky {
	position: fixed;
	top: 0;
	margin: 0;
}

	.sticky + #tabdrop {
		position: fixed;
		top: calc(20px + 1.5em);
		margin: 0;
	}

.w3-button:hover {
	background: #000053;
	color: white;
	text-shadow: 0px 0px 25px 4px white;
}




/* W3 template standards*/

.w3-btn, .w3-button {
	border: none;
	display: inline-block;
	outline: 0;
	padding: 8px 16px;
	padding: 0.5em 1em;
	vertical-align: middle;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	text-align: center;
	cursor: pointer;
	white-space: nowrap;
	font-size: 1.5em;
}

	.w3-btn:hover {
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
	}
/*.w3-button:hover {
		color: #000;
		background-color: #ccc
	}*/

.w3-btn, .w3-button {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

	.w3-disabled, .w3-btn:disabled, .w3-button:disabled {
		cursor: not-allowed;
		opacity: 0.3
	}

		.w3-disabled *, :disabled * {
			pointer-events: none
		}

		.w3-btn.w3-disabled:hover, .w3-btn:disabled:hover {
			box-shadow: none
		}



@media (max-width:640px) {
	.w3-modal-content {
		margin: 0 10px;
		width: auto
	}

	.w3-modal {
		padding-top: 30px
	}

	.w3-dropdown-hover.w3-mobile .w3-dropdown-content, .w3-dropdown-click.w3-mobile .w3-dropdown-content {
		position: relative
	}

	.w3-hide-small {
		display: none !important
	}

	.w3-mobile {
		display: block;
		width: 100%
	}

	.w3-bar-item.w3-mobile, .w3-dropdown-hover.w3-mobile, .w3-dropdown-click.w3-mobile {
		text-align: center
	}

		.w3-dropdown-hover.w3-mobile, .w3-dropdown-hover.w3-mobile .w3-btn, .w3-dropdown-hover.w3-mobile .w3-button, .w3-dropdown-click.w3-mobile, .w3-dropdown-click.w3-mobile .w3-btn, .w3-dropdown-click.w3-mobile .w3-button {
			width: 100%
		}
}

@media (min-width:993px) {
	.w3-modal-content {
		width: 900px
	}

	.w3-hide-large {
		display: none !important
	}

	.w3-sidebar.w3-collapse {
		display: block !important
	}
}

@media (max-width:992px) and (min-width:641px) {
	.w3-hide-medium {
		display: none !important
	}
}

.w3-top, .w3-bottom {
	position: fixed;
	width: 100%;
	z-index: 1
}

.w3-top {
	top: 0
}

.w3-bottom {
	bottom: 0
}

.w3-left {
	float: left !important
}

.w3-right {
	float: right !important
}

.w3-hide {
	display: none !important
}

.pageinvisible {
	visibility: hidden !important;
}

.pagevisible {
	visibility: visible !important;
}

.w3-show-block, .w3-show {
	display: block !important
}

/*Animations for cards*/
.w3-animate-left {
	position: relative;
	animation: animateleft 0.5s
}

@keyframes animateleft {
	from {
		left: -300px;
		opacity: 0
	}

	to {
		left: 0;
		opacity: 1
	}
}

.w3-animate-right {
	position: relative;
	animation: animateright 0.5s
}

@keyframes animateright {
	from {
		right: -300px;
		opacity: 0
	}

	to {
		right: 0;
		opacity: 1
	}
}

#tabdrop .w3-button {
	width: 100%;
	box-sizing: border-box;
	white-space: normal
}

/*extra for mp*/
.w3-dropdown-click, .w3-dropdown-hover {
	position: relative;
	display: inline-block;
	cursor: pointer
}

	.w3-dropdown-hover:hover .w3-dropdown-content {
		display: block;
		z-index: 1
	}

	.w3-dropdown-hover:first-child, .w3-dropdown-click:hover {
		background-color: #ccc;
		color: #000
	}

		.w3-dropdown-hover:hover > .w3-button:first-child, .w3-dropdown-click:hover > .w3-button:first-child {
			background-color: #ccc;
			color: #000
		}

.w3-dropdown-content {
	cursor: auto;
	color: #000;
	background-color: #fff;
	display: none;
	position: absolute;
	min-width: 160px;
	margin: 0;
	padding: 0
}


@media (prefers-color-scheme: dark)
{
	body
	{
		background-color:#222;
		color:#ccc;
	}
	.page-card
	{
		background: #333;
	}
	.photo-card, .page-card
	{
		box-shadow: 0 8px 16px 0 rgba(0,0,0,0.9),0 6px 20px 0 rgba(0,0,0,0.19)
	}
	#sitelogo
	{
		filter:brightness(.7) saturate(2)
	}
	img:not(.photo-card img)
	{
		filter: invert(1) contrast(0.6) hue-rotate(180deg);
	}
}