<!--

* {box-sizing:border-box}

body, table { font-family: tahoma, sans-serif; margin:0; }
//body {	background-color:#f7f7f7; }
body {	background-image: linear-gradient(to bottom right, #ffffff, #aaaaaa); }
//body {	background-color:#f7f7f7; background: url("thumb.jpg") no-repeat center center fixed; background-size: cover; }
//body {	background-color:#000000; }
//body {	background-color:#5522dd; }

img.slidepic
{
	vertical-align: middle;
	horizontal-align: center;
	max-width: 75vw;
	max-height:75vh;
//	border:1px solid red;
	box-shadow: 1px 1px 8px #000000;
}

/* shadow iinside whole page */
.main_index, .main_page
{
	box-shadow: inset 8px 8px 40px #000000;
//	border:2px solid red !important;
}
.main_index
{
	min-width:500px;
	min-height:100%;
}
.main_page
{
	min-width:800px;
	min-height:100%;
}

/* Slideshow container */
.slideshow-container {
	cursor:pointer;
	box-sizing:border-box;
	position: relative;
	margin: auto;
	display: inline-block;
	background-color: #000000;
//	background-color: #717171;
	box-shadow: 8px 8px 20px #000000, inset 8px 8px 40px #ffffff;
	}

/* Slideshow container no border */
.slideshow-container-family {
	cursor:pointer;
	box-sizing:border-box;
	position: relative;
	margin: auto;
	display: inline-block;
	background-color: #000000;
	box-shadow: none;
//	border:10px solid green;
	}
	
/* Hide the images by default */
.mySlides { display: none; }

/* Next & previous buttons */
.prev, .next {
	visibility:hidden;
	cursor: pointer;
	position: relative;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 30px 30px 30px 30px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 10%;
	z-index: 1;
}

/* Position the "next and prev buttona"  */
.prev {  left: 10; }
.next {  right: 10; }

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {  background-color: rgba(60,60,60,1.0); box-shadow: 16px 16px 60px #000000, inset -2px -2px 40px #000000; }

/* On hover of whole image, set 1/3 to PREV and 2/3 to NEXT */
.hotspot-prev, .hotspot-next
{
	position: absolute;
	display: block-cell;
	height: 70%;
	top: 30%;
	z-index: 3;
	color: #ffffff;
	padding:20px;
	font-weight: bold;
	font-size:18px;
	text-shadow: 1px 1px 0px #ff0000;
}
.hotspot-prev	{	text-align:left;	width: 30%;	left: 0px;	}
.hotspot-next	{	text-align:right;	width: 70%;	right: 0px;	}
.hotspot-larg
{
	position: absolute;
	display: block-cell;
	height: 24px;
	width: 200px;
	top: -44px;
	left:-100px;
	margin-top: 18px;
	margin-left: 50%;
	z-index: -;
	color: #ffffff;
	padding:0px;
	font-size:18px;
	font-weight: bold;
	text-align:center;
	letter-spacing:2px; text-shadow: -1px -1px 4px #000000, 1px 1px 4px #000000, 2px 2px 2px #000000;
//	border:1px solid yellow;
}

/* uncomment to make hotspots visible temporarily */
.hotspot-prev:hover, .hotspot-next:hover
{
	opacity: 0;
	transition: opacity 2.0s ease-out;
//	border:2px solid red;
}

.hotspot-prev:hover::after	{	content:"PREV";	letter-spacing:2px; text-shadow: -1px -1px 4px #000000, 1px 1px 4px #000000, 2px 2px 12px #000000; }
.hotspot-next:hover::before	{	content:"NEXT";	letter-spacing:2px; text-shadow: -1px -1px 4px #000000, 1px 1px 4px #000000, 2px 2px 2px #000000; }

.hotspot-under-prev,
.hotspot-under-next,
.hotspot-under-larg
{
	position: fixed;
	display: block-cell;
	font-size:30px;
	font-weight: bold;
	letter-spacing:2px;
	color: #000000;
	text-shadow: 4px 4px 8px #000000;
	transition: 0.6s ease;
//	border:2px solid red;
}
.hotspot-under-prev, .hotspot-under-next
{
//	position: fixed;
//	display: block-cell;
    	height: 100%;
	top: 84px;
	z-index: 0;
	padding:250px 20px;
//	font-size:30px;
//	font-weight: bold;
//	letter-spacing:2px;
//	color: #000000;
//	text-shadow: 4px 4px 8px #000000;
//	transition: 0.6s ease;
//	border:4px solid red;
}
.hotspot-under-prev	{	text-align:left;	width: 50%;	left: 0px;	}
.hotspot-under-next	{	text-align:right;	width: 50%;	right: 0px;	}

.hotspot-under-prev::after	{	content:"\2190"; }
.hotspot-under-next::before	{	content:"\2192"; }
.hotspot-under-prev:hover,
.hotspot-under-next:hover,
.hotspot-under-larg:hover	{	text-shadow: 8px 8px 4px #000000; }

.hotspot-under-larg
{
//	position: fixed;
//	display: block-cell;
	height: 84px;
	width: 800px;
	top: 0px;
	left:-400px;
	margin-left: 50%;
	z-index: 0;
	text-align:center;
//	font-size:30px;
//	font-weight: bold;
//	color: #000000;
//	text-shadow: 4px 4px 8px #000000;
//	border:1px solid orange;
}
.hotspot-under-larg::after	{	content:"\2191";	letter-spacing:2px; xtext-shadow: -1px -1px 4px #000000, 1px 1px 4px #000000, 2px 2px 12px #000000; }


/* Caption text */
.text {
	color: #ffffff;
	font-size: 18px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
	color: #ffffff;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}
.number2text {
	color: #ffffff;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	top: 24;
}
.text, .numbertext, .number2text, .hotspot-prev, .hotspot-next, .hotspot-larg {  text-shadow:0px 0px 3px #000000, 1px 1px 4px #000000, 1px 1px 12px #ffffff, 1px 1px 0px #000000; }

/* The dots/bullets/indicators */
.dot {
	position: relative;
	cursor:pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #999999;
//	background-color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	z-index: 1;
	transition: background-color 0.4s ease;
	box-shadow: 2px 2px 20px #888888;
}

.active, .dot:hover {
	background-color: #7060b0;
//	box-shadow: 2px 2px 20px #888888; //, inset 0px 0px 16px #ffffff;
}
div.butt, div.butt:hover, div.navi, div.butt:hover
{
	color: #000000;
//	box-shadow: 6px 6px 20px #444444;
	font-size:10pt;
	font-weight:bold;
	cursor:pointer;
	height: 20px;
	width: 100px;
	margin: 0px;
	padding: 2px;
//	background-color: #a8a8a8;
	border-radius: 10px;
	display:inline-block;
	position:fixed;
    	top:40px;
	text-align:center;
//	transition: background-color 0.6s ease;
	z-index: 10000;
}
div.butt
{
	background-color: #a8a8a8;
	right:60px;
	transition: background-color 0.6s ease;
	box-shadow: 6px 6px 20px #444444, inset -2px -2px 10px 4px #444444;
//	z-index: 2;
}
div.butt:hover
{
	background-color: #eeeeee;
	color: #ffffff;
	right:60px;
	transition: background-color 0.6s ease;
//	transition: text-shadow 0.6s ease;
	box-shadow: inset 6px 6px 20px #222222;
	text-shadow:0px 0px 1px #444444, 3px 3px 4px #000000;
//	z-index: 2;
}
div.navi
{
	background-color: #a8a8a8;
	left:60px;
	transition: background-color 0.6s ease;
	box-shadow: 6px 6px 20px #444444, inset -2px -2px 10px 4px #444444;
//	z-index: 2;
}
div.navi:hover
{
	background-color: #eeeeee;
	color: #ffffff;
	left:60px;
	transition: background-color 0.6s ease;
//	transition: text-shadow 0.6s ease;
	box-shadow: inset 6px 6px 20px #222222;
	text-shadow:0px 0px 1px #444444, 3px 3px 4px #000000;
//	z-index: 2;
}
div.ierr
{
	visibility:hidden;
	color: white;
	font-size:10pt;
	font-weight:bold;
	cursor:pointer;
	height: 20px;
	width: 300px;
	margin-left: -150px;
	padding: 2px;
	background-color: red;
	border-radius: 10px;
	display:inline-block;
	position:fixed;
	left:50%; //60px;
    	top:40px;
	text-align:center;
	transition: background-color 0.6s ease;
	box-shadow: 20px 20px 30px -4px #444444, inset -2px -2px 10px 4px #444444;
	z-index: 2;
}

/* Loader Fading Animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {	from {opacity: .4} to {opacity: 1}	}
@keyframes fade {		from {opacity: .4} to {opacity: 1}	}

.on	{ display:initial; }
.off	{ display:none; }

@keyframes loader_fader		{ from {background-color: black;} to {background-color: white;} }
@-webkit-keyframes loader_fader { from {background-color: black;} to {background-color: white;} }

.fade_to_black { 
	background-color: black;
	animation-name: loader_fader;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	}
			
.loader_img { 
	max-width:400px !important;
	max-height:400px !important;
	width:auto !important;
	height:auto !important;
	box-shadow: 8px 8px 20px #000000, inset 8px 8px 40px #ffffff;
	}
h2.loader_headline	{ letter-spacing:6px; text-decoration:none; font-family:Tahoma,sans-serif; font-size:24pt; font-weight:bold; color:#7060b0; text-shadow:1px 1px 2px #666666, 1px 1px 4px #666666, 1px 1px 12px #ffffff; }
h3.loader_headline	{ letter-spacing:6px; text-decoration:none; font-family:Tahoma,sans-serif; font-size:10pt; font-weight:bold; color:#999999; text-shadow:1px 1px 1px #666666, 1px 1px 4px #ffffff; }
h3.under_headline	{ position:relative; top:-10px; letter-spacing:6px; text-decoration:none; font-family:Tahoma,sans-serif; font-size:16pt; font-weight:normal; color:#7060b0; text-shadow:0px 0px 1px #666666, 1px 1px 6px #666666, 1px 1px 12px #ffffff; }
h2.slides_headline	{ position:relative; top:16px; letter-spacing:6px; text-decoration:none; font-family:Tahoma,sans-serif; font-size:16pt; font-weight:bold; color:#7060b0; text-shadow:1px 1px 2px #666666, 1px 1px 6px #666666, 1px 1px 12px #ffffff; }
h3.slides_headline	{ position:relative; top:12px; letter-spacing:6px; text-decoration:none; font-family:Tahoma,sans-serif; font-size:10pt; font-weight:normal; color:#7060b0; text-shadow:0px 0px 1px #666666, 1px 1px 6px #666666, 1px 1px 12px #ffffff; }

/* dev label - do not display */
div.label_filename
{
//	display:block;
	display:none;
}

div.labeltext
{
	display:block;
//	outline:2px solid black;
	border-bottom: solid;
	border-bottom-color: rgb(44, 38, 69, 0.1);
	letter-spacing:6px;
	text-decoration:none;
	font-family:Tahoma,sans-serif;
	font-size:12pt;
	font-weight:bold;
	color:#7060b0;
	text-shadow:1px 1px 3px #000000, 1px 1px 6px #ffffff;
	text-align:left;
	padding:20px 0px 10px 10px;
//	border:1px solid red;
}
div.titletext
{
	color:#000000 !important;
//	background-color: rgba(255,255,255,0.3);
	padding:0px 0px 0px 10px !important;
	font-size:12px !important;
	font-weight:normal !important;
	letter-spacing:1px;
	text-align:left !important;
	text-shadow: -1px -1px 4px #ffffff, 0px 0px 8px #ffffff, 0px 0px 8px #ffffff, 0px 0px 1px #000000 ;
//	border:1px solid red;
}
div.indextext
{
	color:#000000 !important;
	padding:0px 0px 0px 10px !important;
	font-size:8px !important;
	font-weight:lighter !important;
	text-align:left !important;
	text-shadow: 0px 0px 1px #000000, 0px 0px 2px #ffffff, 0px 0px 4px #ffffff, 0px 0px 8px #ffffff ;
}
div.thumbdiv
{
	position:relative !important;
	display:inline-block !important;
	margin: 4px 2px 5px 2px !important;
	text-margin:10px !important;
	filter: contrast(1.1) brightness(0.90);
	transition: all 1.0s ease !important;
	z-index:0 !important;
	// border:1px solid red !important;
}
div.thumbdiv:hover
{
	position:relative !important;
	display:inline-block !important;
	margin: 4px 2px 5px 2px !important;
	text-margin:10px !important;
	filter: contrast(1.0) brightness(1.2);
	transform: scale(1.3) !important;
	z-index:9999 !important;
	// border:1px solid red !important;
}
img.thumbpic
{
	position:relative !important;
	vertical-align:middle !important;
	max-width:200px !important;
	max-height:200px !important;
	width:auto !important;
	height:auto !important;
//	border:1px solid green;
}

img.indexpic
{
	vertical-align:middle !important;
	max-width:340px !important;
	max-height:300px !important;
	width:auto !important;
	height:auto !important;
	// border:1px solid green;
}

//.shadow		{ padding:6px; margin:8px; display: inline-block; z-index:2; box-shadow: 4px 4px 20px #000000, inset 4px 4px 20px #ffffff; }
//.shadow:hover		{ padding:6px; margin:8px; display: inline-block; z-index:2; box-shadow: 4px 4px 20px #000000 inset; text-shadow:0px 0px 4px #ffffff, 2px 2px 8px #000000, 3px 3px 12px #ffffff; }
//.shadow-family	{ padding:0px; margin:0px; display: inline-block; z-index:2; box-shadow: 0px 0px 00px #000000; filter: brightness(95%);	background: white; }
//.shadow-family:hover	{ padding:0px; margin:0px; display: inline-block; z-index:2; box-shadow: 4px 4px 20px #000000; filter: contrast(105%);	background: white; }

//.shadow		{ padding:6px; margin:8px; display: inline-block; z-index:2; box-shadow: 4px 4px 20px #000000; background: white; }
//.shadow-family	{ padding:0px; margin:0px; display: inline-block; z-index:2; box-shadow: 0px 0px 00px #000000; filter: brightness(95%);	background: white; }

.shadow
{
	padding:6px;
	margin:8px;
	display: inline-block;
	z-index:2;
	box-shadow: 4px 4px 20px #000000;
	background: white;
	transition: all 1.0s ease !important;
}
.shadow:hover, .shadow-family:hover
{
	box-shadow: 30px 30px 40px -15px #000000, inset 1px 1px 8px #888888;
//	opacity: .8;
}
.shadow-family		{ padding:0px; margin:0px; display: inline-block; z-index:2; box-shadow: 1px 1px 6px #000000; background: white; transition: all 1.0s ease !important; }
//.shadow-family:hover	{ box-shadow: 4px 4px 20px #000000; }

.bg_wedding_0
{
	background-image: url("./wedding/pics/bg_wedding_pics.png"),  url("./wedding/pics/bg_wedding_bottom.png");
	background-position: left top, right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	background-color: white;
	background-blend-mode: darken;
}
div.credit
{
	z-index: 999;
	position:fixed;
	display:table;
//	border:2px solid black;
	bottom:40px;
	right:40px;
	width:auto;
	height:30px;
	text-align:right;
//	font-size:18px;
//	font-weight: bold;
	text-align:center;
	letter-spacing:4px;
	text-shadow: -2px -2px 8px #ffffff, -1px -1px 4px #ffffff, 1px 1px 4px #ffffff, 4px 4px 8px #ffffff;
}
div.menu_box
{
	z-index: 999;
	position:fixed;
	display:table;
//	border:1px solid black;
	top:10px;
	right:10px;
	width:auto;
	height:30px;
	padding: 20px;
	text-align:right;
//	font-size:18px;
//	font-weight: bold;
	text-align:center;
	letter-spacing:4px;
//	text-shadow: -1px -1px 8px #dddddd, -1px -1px 1px #888888, 1px 1px 1px #888888, 2px 2px 2px #888888;
	background-image: url("./wedding/pics/button_calla_lily.png");
	
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	
	transform: scale(0.6);
	transition-duration: 1s;
}
div.menu_box:hover
{
	transform: scale(1.0);
	translate: -40px 40px;
}
td.menu_boxx
{
	color:#333333 !important;
//	border:1px solid yellow;
	font-size:16px !important;
	font-weight:normal !important;
	letter-spacing:8px;
	text-align:center !important;
	text-shadow: -1px -1px 2px #999999, 1px 1px 2px #999999 !important;
//	text-shadow: none !important;
}
a.menu_boxx
{
	color:#000000 !important;
//	background-color: rgba(255,255,255,0.3);
//	padding:0px 0px 0px 10px !important;
	font-size:16px !important;
	font-weight:bold !important;
	letter-spacing:6px;
	text-decoration:none !important;
	text-shadow: -1px -1px 4px #ffffff, 1px 1px 4px #ffffff, 4px 4px 8px #ffffff !important;
//	text-shadow: none !important;
//	border:1px solid red;
}
a.menu_boxx:hover
{
	color:#000000 !important;
	text-shadow: 3px 3px 3px #666666, 5px 5px 4px #666666 !important;
}
div.titlet
{
	position: absolute;
	color:#ffffff !important;
//	background-color: rgba(255,255,255,0.3);
	padding:6px 0px 0px 8px !important;
	font-size:12px !important;
	font-weight:bold !important;
	letter-spacing:1px;
	text-align:left !important;
	text-shadow: -1px -1px 4px #000000, 1px 1px 8px #000000;
//	border:1px solid red;
}
div.mark
{
color:white;
position: absolute;
top:180px;
left:292px;
}
.fltrht		{ position:relative; float:right; top:0px; border:0px none; margin:4px;}
.fltlft		{ position:relative; float:left; top:0px; border:0px none; margin:4px;}

-->