main { 
	background: url(../images/bkgd_glass.jpg) scroll 0 0; 
	border-top: 2px solid #696969;
	border-bottom: 2px solid #696969;
}
.keyword {
	display: block;
	color: #1a237e;
	font-weight: 600;
	font-size: 110%;
	margin-left: -15px;
	padding: 0 15px;
	text-align: center;
}
footer { border-top: 0; }
#accordion { 
	border: 2px solid #331a00;
	border-radius: 6px; 
}
#accordion .card + .card { margin-top: -1px; }
#accordion .card-header + .collapse > .card-body { 
	background-color: rgba(255,255,255,0.5)!important; 
	border-radius: 0;
	border-top-color: #331a00; 
}
.card-about { 
	background-color: rgba(0,0,0,0);  
	border-color: #331a00;
	border-radius: 0;
}
#accordion .card-title {
	background: url(../images/tabicons.png) no-repeat 0 -1px;
	color: #331a00;
	font-size: 1.125rem;
	line-height: 1.875rem;
	padding-left: 2.5rem;
    padding-right: 1.875rem;
	transform: translateX(10%);
	transition: all .5s ease-in-out;
}
#accordion .card-title:hover { color: #fff; cursor: pointer; }
#accordion .collapsed > .card-title { transform: translateX(0); }
main a.card-header {
    position: relative;
	height: 38px;
	background: #997045 url(../images/bkgd_wood3a.jpg);
	background-position: 0 0;	
	margin: 0;
	padding: 5px 15px;
	border-top: solid 1px #331a00;
	border-bottom: solid 1px #331a00;
}
.card-header::after {
	position: absolute;
	top: 50%;
	right: .75em;
	font: var(--fa-font-solid);
	font-family: 'Font Awesome 6 Pro';
	content: "\f078";
	font-size: 1.333em;
	transform: translateY(-50%) rotate(0deg);
	transition: transform .5s ease-in-out;
}
.card-open .card-header::after { transform: translateY(-50%) rotate(-180deg); }
.card-about:first-child, .card-about:first-child > .card-header { 
	border-top: 0;
	border-radius: 4px 4px 0 0; 
}
.card-about:last-child, .card-about:last-child > .card-header { 
	border-bottom: 0;
	border-radius: 0 0 4px 4px; 
}
main a#heading-greetings { background-position: 0 0; } 
main a#heading-professional { background-position: 0 -38px; } 
main a#heading-work { background-position: 0 -76px; } 
main a#heading-hobbies { background-position: 0 -114px; } 
main a#heading-photos { background-position: 0 -150px; } 
main a#heading-professional .card-title { background-position: 0 -41px; }
main a#heading-work .card-title { background-position: 0 -81px; }
main a#heading-hobbies .card-title { background-position: 0 -121px; }
main a#heading-photos .card-title { background-position: 0 -161px; }
@media only screen and (max-width: 575px) {
	.cards {
		margin-left: -15px;
		margin-right: -15px;
		border-radius: 0; 
	}
	.card-about, .card-about > .card-header { border-radius: 0!important; }
	#accordion .card-header:hover, #accordion .card-header:focus { opacity: 1; }
	#accordion .card-header > .card-title { min-height: 36px; }
}
@media only screen and (max-width: 767px) { blockquote { margin-bottom: 2rem; }  }
.test-btn {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
}
#smiley { vertical-align: top; }
.famtreeImg {
	width: 251px;
	max-width: 100%;
	background: #c89e47;
	margin: 0 auto;
	padding: 8px 8px 0;
	border: 1px solid #331a00;
	border-radius: 6px;
}
.figure-caption {
	width: 100%;
	background-color: #c89e47;
	color: #212121;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	margin: 8px auto 0;
	padding: 4px 6px;
	border-radius: 4px;
}
.figure-caption a:link, .figure-caption a:visited {
	color: #000;
	text-decoration: underline;
}
.figure-caption a:hover { color: #fff; }
figure.hover { 
	transition: all 0.35s ease-in-out;
	z-index: 2;
}
figure.hover:hover, figure ~ .hover-effect { 
	box-shadow: 3px 5px 7px rgba(0,0,0,.7);
	z-index: 3;
}
@media only screen and (min-width: 600px) {
	figure.hover:hover, figure.hover:focus, figure ~ .hover-effect { 
		-webkit-transform: scale(1.05); /* Chrome/Safari */
		transform: scale(1.05);
	}
}

.thumbnail {
	display: block;
	max-width: 210px;
	background-color: #fff;
	line-height: 1.5;
	margin: 0 auto 1.25rem;
	padding: 4px;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: border 0.2s ease-in-out;
}
.thumbnail > img {
	max-width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
}
.sidebar .card-header, .sidebar .card-footer { background: #002868; text-align: center; }
.sidebar .card-header h4 { color: #fff; margin-bottom: 0; }

/***** G A L L E R Y *****/
.gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	margin-left: -15px;
	margin-right: -15px;
}
.gallery figure { margin-bottom: 20px; }
.gallery figure img { box-shadow: 2px 2px 3px rgba(0,0,0,0.5); }
.gallery figure img:hover {
	cursor: pointer;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}
figure img { max-height: 225px; }
figure.portrait img {
	width: 56.25%;
	margin: 0 21.875% .5rem;
}
.gallery .figure-caption { 
	background: rgba(0,0,0,0); 
	line-height: 1.2;
}
.eye {
	float: right;
	display: inline-block;
	font-family: FontAwesome;
	color: #fafafa;
	line-height: 1;
	margin-right: 2%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: auto;
}
.eye:before { content:"\f06e"; }
.eye:hover {
	background: transparent;
	text-decoration: none;
	opacity: 0.75;
}
@media only screen and (max-width: 575px) { 
	.gallery .col-6 {
		flex: 0 0 100%;
		max-width:100%;
	}
}

/***** M A G N I F I C  P O P U P  *****/
.mfp-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
	opacity: 0.8;
	z-index: 902;
}
.mfp-wrap {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	outline: none !important;
	-webkit-backface-visibility: hidden;
	z-index: 903;
}
.mfp-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	padding: 0 8px;
	box-sizing: border-box; 
}
.mfp-container:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
	z-index: 905;
}
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
	width: 100%;
	cursor: auto;
}
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
	cursor: -moz-zoom-out;
	cursor: -webkit-zoom-out;
	cursor: zoom-out;
}
.mfp-zoom {
	cursor: pointer;
	cursor: -webkit-zoom-in;
	cursor: -moz-zoom-in;
	cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content { cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
/***** Animated preloader *****/
.mfp-preloader {
	position: absolute;
	top: 50%;
	left: 8px;
	right: 8px;
	width: 30px;
	height: 30px;
	background-color: #fff;
	margin: 0 auto;
	opacity: 0.65;
	border-radius: 50%;
	animation: rotateplane 1.2s infinite ease-in-out;
	z-index: 904;
}
@keyframes rotateplane {
  0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
}
.mfp-preloader a { color: #cccccc; }
.mfp-preloader a:hover { color: #fff; }
.mfp-s-ready .mfp-preloader { display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close, button.mfp-arrow {
	display: block;
	background: transparent;
	overflow: visible;
	padding: 0;
	cursor: pointer;
	border: 0;
	-webkit-appearance: none;
	z-index: 906;
}
button::-moz-focus-inner {
	padding: 0;
	border: 0;
}
.mfp-close {
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	height: 44px;
	color: #ff0;
	font-size: 36px;
	line-height: 44px;
	text-decoration: none;
	text-align: center;
	opacity: 0.65;
	padding: 0 0 18px 10px;
}
.mfp-close:hover, .mfp-close:focus { opacity: 1; }
.mfp-close:active { top: 1px; }
.mfp-close-btn-in .mfp-close { color: #333333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
	color: #fff;
	right: -6px;
	text-align: right;
	padding-right: 6px;
	width: 100%;
}
.mfp-counter {
	position: absolute;
	top: 0;
	right: 0;
	color: #ff0;
	font-size: 12px;
	line-height: 1.5;
}
.mfp-arrow {
	position: absolute;
	top: 50%;
	width: 90px;
	height: 110px;
	opacity: 0.65;
	margin: -55px 0 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.mfp-arrow:active { margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus { 
	opacity: 1; 
	outline: none;
}
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
	content: '';
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 0;
	top: 0;
	margin-top: 35px;
	margin-left: 35px;
	border: solid transparent;
}
.mfp-arrow:after, .mfp-arrow .mfp-a {
	opacity: 0.8;
	border-top-width: 12px;
	border-bottom-width: 12px;
	top: 8px;
}
.mfp-arrow:before, .mfp-arrow .mfp-b {
	border-top-width: 20px;
	border-bottom-width: 20px;
}
.mfp-arrow-left { left: 0; }
.mfp-arrow-left:after,  .mfp-arrow-left .mfp-a {
	border-right: 12px solid black;
	left: 5px;
}
.mfp-arrow-left:before,  .mfp-arrow-left .mfp-b { border-right: 20px solid white; }
.mfp-arrow-right { right: 0; }
.mfp-arrow-right:after,  .mfp-arrow-right .mfp-a {
	border-left: 12px solid black;
	left: 3px;
}
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 20px solid white; }
.mfp-iframe-holder {
	padding-top: 40px;
	padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
	line-height: 0;
	width: 100%;
	max-width: 900px;
}
.mfp-iframe-scaler {
	width: 100%;
	height: 0;
	overflow: hidden;
	padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
	position: absolute;
	top: -3px;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);

	background: black;
}
.mfp-iframe-holder .mfp-close { top: -43px; }
/* Main image in popup */
img.mfp-img {
	width: auto;
	max-width: 100%;
	height: auto;
	display: block;
	line-height: 0;
	padding: 40px 0 40px;
	margin: 0 auto;
	box-sizing: border-box; 
}
/* The shadow behind the image */
.mfp-figure:after {
	content: '';
	position: absolute;
	left: 0;
	top: 40px;
	bottom: 40px;
	display: block;
	right: 0;
	width: auto;
	height: auto;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
	z-index: -1;
}
.mfp-figure { line-height: 0; }
.mfp-bottom-bar {
	margin-top: -36px;
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	cursor: auto;
}
.mfp-title {
	font-size: 14px; font-size: 1.4rem;
	text-align: left;
	line-height: 1.5;
	color: #fafafa;
	word-break: break-word;
	padding-right: 45px;
}
.mfp-figure small {
	color: #bdbdbd;
	display: block;
	font-size: 12px;
	line-height: 14px;
}
.mfp-image-holder .mfp-content { max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }

/***** A N I M A T I O N S *****/
/* ====== Zoom-out effect ====== */
/* start state */
.mfp-zoom-out.mfp-bg {
	opacity: 0;
	transition: all 0.3s ease-out;
}
.mfp-zoom-out.mfp-bg.mfp-ready { opacity: 0.8; }
.mfp-zoom-out.mfp-bg.mfp-removing { opacity: 0; }
.mfp-zoom-out .mfp-content{
	opacity: 0;
	transition: all 0.3s ease-in-out;
	transform: scale(1.3);
}
/* animate in */
.mfp-zoom-out.mfp-ready .mfp-content {
	opacity: 1;
	transform: scale(1);
}
/* animate out */ 
.mfp-zoom-out.mfp-removing .mfp-content {
	opacity: 0;
	transform: scale(1.3);
}
.pin-it {
	position: absolute;
	top: -35px;
	left: 100%;
	margin-left: -30px;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/***** Remove all paddings around the image on small screen *****/
  	.mfp-img-mobile .mfp-image-holder {
		padding-left: 0;
		padding-right: 0;
	}
	.mfp-img-mobile img.mfp-img { padding: 0; }
	/* The shadow behind the image */
	.mfp-img-mobile .mfp-figure:after {
		top: 0;
		bottom: 0;
	}
	.mfp-img-mobile .mfp-bottom-bar {
		background: rgba(0, 0, 0, 0.6);
		bottom: 0;
		margin: 0;
		top: auto;
		padding: 3px 5px;
		position: fixed;
		box-sizing: border-box;
	}
	.mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
	.mfp-img-mobile .mfp-counter {
		right: 5px;
		top: 3px;
	}
	.mfp-img-mobile .mfp-close {
		top: 0;
		right: 0;
		width: 35px;
		height: 35px;
		line-height: 35px;
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		text-align: center;
		padding: 0;
	}
	.mfp-img-mobile .mfp-figure small {
		display: inline;
		margin-left: 5px;
	}
}
@media all and (max-width: 800px) {
	.mfp-arrow { transform: scale(0.75); }
	.mfp-arrow-left { transform-origin: 0; 	}
	.mfp-arrow-right { transform-origin: 100%; }
	.mfp-container {
		padding-left: 6px;
		padding-right: 6px;
	}
}