/*
	Theme Name: HTML5 Blank
	Theme URI: http://html5blank.com
	Description: HTML5 Blank WordPress Theme
	Version: 1.4.3
	Author: Todd Motto (@toddmotto)
	Author URI: http://toddmotto.com
	Tags: Blank, HTML5, CSS3

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    VARIABLES
\*------------------------------------*/
:root {
	
	/* Fonts */
	--font1: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
	--font2: 'Lucida Sans Unicode', 'Lucida Grande', Sans-Serif;
	--font-cursive: 'Arizonia';
	--font-handwriting: 'Caveat';
	
	/* Color Scheme */
	--site-color1: darkgreen;
	--site-color2: #6678b1; /* blue */
	--site-color3: #ffa20c; /* orange */
	--site-color4: #d51905; /* red */
	--form-color1: darkgreen;
	--form-color2: palegreen;
	--form-color3: #d51905;
	--link-color: darkgreen;
	--link-hover: #d51905;
}



/*------------------------------------*\
    MAIN
\*------------------------------------*/

/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
	
}

body {
	font:300 11px/1.4 var(--font1);
	color:#333;
	background: url('./img/bg/christmas.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	box-sizing:border-box;
}
/*
body.home{ DELETED FOR FP2
	background-image: url('./img/bg/winter-scene.jpg'); 
	height: 800vh; 
	}
*/
body.home{ 
	background-image: url('./img/bg/winter-scene.jpg'); 
	overflow: hidden;
}

/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}

.clear:after {
    clear:both;
}
.clear {
    *zoom:1;
}

.floatL	{float: left;}
.floatR	{float: right;}
	
img {
	max-width:100%;
	vertical-align:bottom;
}
a {
	color:var(--link-color);
	text-decoration:none;
	cursor: pointer;
	transition: 0.3s;
}
a:hover {
	color:var(--link-hover);
}
a:focus {
	outline:0;
}
a:hover,
a:active {
	outline:0;
}
input:focus {
	outline:0;
}

.xmas h1 {
	position: relative;
	z-index:1;
	text-align: center;
	background-color: var(--site-color1);
    margin: 0 -36px 32px -36px;
    padding: 16px 36px;
    color: #fff;
	border: 3px solid var(--site-color4);
}
h1, h2, h3 {color:var(--site-color1);clear: both;margin-top: 42px;}
p {}

	.instruction {
		text-align: center;
		border: 1px solid #d51905;
		background-color: darkgreen;
		padding: 8px;
		color: white;
	}
	.xmform-prompt span{
		font-weight: bold;
		color: #d51905;
	}
	.xmform-detail{
		margin:0px;
		padding:0px;
		font-size:14px;
		text-align: right;
	}
	
	.xm-festive{
		color: var(--site-color4);
		font-family: var(--font-cursive);
		font-size: 18pt;
		text-align: center;
	}
	
	.xm-buttons{
		text-align: center;
	}
	
.shadow {
	box-shadow: 0px 0px 36px #fff;
}
.ctr {text-align: center;}

.xmkeyDetail{
	color: var(--site-color4);
	font-weight: bold;
}

.xmWishText{
	font-size: 10pt;
	color: var(--site-color2);
}
.xmXmasGlow:focus {
		box-shadow: 0px 0px 16px var(--site-color1);
}
/*------------------------------------*\
    STRUCTURE
\*------------------------------------*/

/* Top */
.top{
	position: fixed;
	top:0px;
	left:0px;
	z-index:100;
	width:100%;
	height:52px;
	background-color:#fdfdff;
	border-bottom: 1px solid var(--site-color2);
}
.top-title{
	padding: 0px 0px 0px 16px;
	position: absolute;
	top: 0px;
	left: 0px;
	height:52px;
	font-family:  var(--font-cursive);
	font-size: 28pt;
	color: var(--site-color1);
}
.top-login{
	padding: 0px 16px 0px 06px;
	position: absolute;
	top: 0px;
	right: 0px;
	height:64px;
	text-align: right;
	font-family:  var(--font1);
	line-height: 52px;
	font-size: 12pt;
	color: #999;
}

/* wrapper */
.wrapper {
	max-width:960px;
    width: 90%;
    margin: 0 auto;
    position: relative;
}
/* header */
.header {
	padding-top: 68px;
	position: relative;
	z-index:10;
}
	.header-banner{
		position: relative;
		width: 100%;
		height: 80px;
		background-color: var(--site-color1);
		text-align: center;
		border-bottom: 0px;
		font-family:  var(--font-cursive);
		font-weight: bold;
		font-size: 36pt;
		color: #fff;
		padding-top: 6px;
	}


/* nav */
.header-nav {
	/*  width: 100%;*/
	/* background-color: var(--site-color1); */
	width: 50%;
    position: absolute;
    top: 18px;
    margin-right: auto;
    margin-left: 25%;
}
	.header-nav ul {
		margin:0;
		padding: 0px 16px;
		height:100%;
		font-size: 16px;
		line-height:26px;
	}
	.header-nav li {
		display: inline;
		margin:0;
		padding: 0px;
		height:100%;
	}
	
	.header-nav li.xm-currentPage{}
	
	.header-nav a {
		/* color: #fff; */
		padding: 4px 18px;
	}
	.header-nav a:hover{
		text-decoration: underline;
	}
/* sidebar */
.sidebar {
}

/* Expand Box */
.xm-expand,.xm-expandRadio{
	max-height: 0px;
	overflow: hidden;
	-moz-transition: max-height 1s ease;
	-webkit-transition: max-height 1s ease;
	-o-transition: max-height 1s ease;
	transition: max-height 1s ease;
	transition: max-height 1s;
	}
	.xm-expand.openBox,.xm-expandRadio.openBox{max-height:1000px;}
	
/* Col */
.xm-threeCol{padding-top:16px;}
.xm-col{
	position: relative;
	display: inline-block;
	width: 296px;
	min-height: 250px;
	border: 1px solid var(--site-color1);
	vertical-align:top;
	border-radius: 0px 0px 10px 10px;
	padding-bottom: 44px;
}
	.xm-col+.xm-col{margin-left:17px;}
	.xm-col p {padding: 0px 8px;}
	.xm-col-head{text-align: center; background-color:var(--site-color1);color:#fff;padding:4px;}
	.xm-col-button{position:absolute; height: 36px; width: 100%; padding:8px;bottom:0px;left:0px;text-align: center;}
/* help */
.xm-tooltip{
	display: inline-block;
	position: relative;
	cursor: help;
}
	th.xm-tooltip{display: table-cell;}

	.xm-tooltip:after{
		content:'?';
		display:inline-block;
		position:absolute;
		top: 10px;
		color: #fff;
		background-color: var(--site-color2);
		border: 1px solid var(--site-color2);
		padding: 0px 4px;
		font-size: 8px;
		cursor: pointer;
		border-radius: 50%;
		visibility: hidden;
	}

	.xm-tooltip span{
		visibility: hidden;
		opacity: 0;
		width: 120px;
		background-color: var(--form-color2);
		border: 1px solid var(--site-color1);
		color: var(--site-color1);
		text-align: center;
		padding: 5px 0;
		border-radius: 6px;
		box-shadow: 0px 0px 16px #fff;
		padding: 4px;

		position: absolute;
		z-index: 1;
		width: 250px;
		bottom: 100%;
		left: 50%;
		margin-left: -125px;
		transition:opacity 1s ease-in-out;
		
		font-size: 14px;
		
	}
	.xm-tooltip:hover span{visibility: visible;opacity: 1;}
	.xm-tooltip span::after {
		content: " ";
		position: absolute;
		top: 100%; /* At the bottom of the tooltip */
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: var(--site-color2) transparent transparent transparent;
	}

/* main */
main {
	background: #fff;
    display: block;
    color: #333;
    text-align: left;
	border-bottom: 0px;
    padding: 16px 16px;
    min-height: 420px;
	font-size: 16px;
	
	border: 3px solid var(--site-color1);
	border-bottom: 0px;
	border-top: 0px;
}

	/* Match wordpress elements */
	.sidebar {
		width: 100%;
		background: #fff;
		display: block;
		color: #333;
		text-align: left;
		border-bottom: 0px;
		padding: 16px 16px;
		border: 3px solid var(--site-color1);
		border-bottom: 0px;
		border-top: 0px;
		
	}

	.xm-sheet{
		padding-top: 8px;
	}

	.dash-box {
	}
	
	.dash-row {
		width: 100%;
		position: relative;
	}
	
	.dash-row-heading {
		font-weight: bold;
		color: var(--site-color1);
		display: inline-block;
		width:20%;
		min-width: 100px;
	}
	
	.dash-row-info {
	}
	
		#welcomemsg.dash-row-info{display:block;padding:0px 0px;margin:8px 0px;}
		
/* page-detail */

.page-detail .pagebody {position: relative; padding-left: 40px; padding-right: 40px;}

.xm-statsBox {
	position: relative;
	padding:0 50% 0 10%;
}
	.xm-statsBox .mainImg {
		max-height: 240px;
		position: absolute;
		top: 0px;
		right: 10%;
	}
	
.xm-message-welcome {
	padding-left: 10%;
	padding-right: 30%;
}
	.xm-message-welcome span {
		color: var(--site-color1);
		text-decoration: underline;
	}

.xmDetailsBox {
	margin: 0px 10% 0px 10%;
}
.xm-agreementBox {
	position: relative;
	margin: 40px 10% 0px 10%;
	border: 2px double var(--site-color2);
	padding: 20px;
	background-color: #D6CCA9;
	opacity: 0.1;
	top:0px;
    -webkit-transition: 4s ease-in;
    -moz-transition: 4s ease-in;
    -o-transition: 4s ease-in;
    -ms-transition: 4s ease-in;
}
	.xm-agreementBox.show {top:-300px;opacity: 1;}
	.xm-agreementBox h3 {
		margin-top: 0px;
		text-align: center;
	}
	
	.xm-agreementBox-checkBox{
		position: relative;
		min-height: 40px;
		padding: 10px 10px 10px 10px;
		margin: 0px 0px 20px 0px;
		border: 1px solid var(--form-color1);
		border-left-width: 60px;
		background-color: #fff;
	}
	.xm-agreementBox-checkBox .heading {
		font-family: var(--font1);
		font-weight: bold;
		color: var(--form-color1);
		padding-bottom: 12px;
	}
	
	.xm-agreementBox-checkBox .content {
	}
	
	.xm-agreementBox-checkBox input[type="checkbox"]{display:none}
	.xm-agreementBox-checkBox label{
		background-image: url(./img/resource/checkboxes1.png);
		background-position: left center;
		background-size: auto 100%;
		width: 40px;
		height: 40px;
		background-repeat: no-repeat;
		position: absolute;
		top: 20px;
		left: -50px;		
		cursor: pointer;
	}
	.xm-agreementBox-checkBox input[type="checkbox"]:checked + label{
		background-position: right center; 
	}
	
	.xm-boughtLinkBox{
		float:right;
		padding: 12px 0px 12px 12px;
	}
	
	.xmWishBox {
		position: relative;
		margin: 1em 0px .5em 0px;
		width: 100%;
		padding: 0px 0px 20px 0px;
	}
		.xmWishText{
			position: absolute;
			bottom: 0px;
			right: 4px;
		}
.xm-thankyouBox-container{
	border: 1px solid var(--site-color2); 
	padding: 14px;
	max-width:700px;
	margin: 200px auto;
}
.xm-thankyouBoxNote{
	border: 1px solid #653f02;
	background-color: #fffde1;
	padding: 18px 32px;
	font-size:  18pt;
	border-radius: 10px;
	box-shadow: 5px 10px 30px var(--site-color2);
	font-family: var(--font-handwriting);
    margin-top: 32px;
    margin-bottom: 48px;
}
	.xm-thankyouBoxNote span:hover{
		background-color:var(--site-color3);
		box-shadow: 5px 10px 30px var(--site-color2);
		cursor:wait;
		cursor:smile;
	}
	.xm-thankyouFrom {padding-left:45%;}

	.xm-thankyouBox-sign{
		padding-left: 45%;
	}
		.xm-thankyouBox-sign span{
			color: var(--site-color2);
			font-family: var(--font-cursive);
			font-size: 17pt;
		}

/* Gift Tags */

.xmGiftTag{
	position: absolute;
	top: 0px;
	width: 360px;
	height:200px;
}

	.xmGiftTag-right{
		right: -460px;
	}

	.xmGiftTag-left{
		left: -460px;
	}
	
.xmGiftTag-inner{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	padding: 86px 76px 0 50px;
	text-align: center;
	font-weight: bold;
}

	.xmGiftTag-fadein{
		opacity: 0;
		-webkit-transition: 4s linear;
		-moz-transition: 4s linear;
		-o-transition: 4s linear;
		-ms-transition: 4s linear;
	}
	.xmGiftTag-fadein.show{opacity: 1;}

/* message */
	.xm-msg{
		color: #fff;
		margin: 0px auto;
		padding: 16px;
		margin-bottom: 16px;
		border-radius: 10px;
		width:80%;
	}
	.xm-errormsg{
		background-color: var(--site-color4);
	}
	.xm-successmsg{
		background-color: var(--site-color2);
	}
	
/* Pop Up Box */

	.xm-popUpBox {
		position:fixed;
		top:0px;
		left:0px;
		height: 100%;
		width: 100%;
		display:none;
		z-index:110;
	}
		.xm-popUpBox-bg{
			background-color:#fff;
			opacity:0.8;
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
		}
		.xm-popUpBox-container{
			max-width:800px;
			max-height: 80%;
			background: #fff;
			opacity: 1;
			z-index:111;
			margin: 10% auto 10% auto;
			padding: 12px 64px 32px 64px;
			position: relative;
			border: 3px solid var(--site-color1);
			overflow: auto;
		}
		.xm-popUpBox.show{
			display:block;
		}
		
	.xm-popUpBox-close {
		text-align: center;
		position: relative;
		margin:32px auto 0px auto;
		width:auto;
	}

	
/* xm-rules */
	.xm-rules{}
	.xm-rules ol{padding:0px 16px;margin:8px 0px;}
	.xm-rules li{padding:0px 0px 8px 45px;list-style:none;}
	.xm-rules span{position:absolute;left:0px;text-decoration:underline;}

/* footer */
.footer {
	background-color: white;
	text-align: center;
	padding: 16px 0px 0px 0px;
	border: 3px solid darkgreen;
	border-top: 0px;
}
	.footer a {color:green;}
	.footer a:hover {color:#d51905;}
	
	.copyright {color: #d51905;}
	
/* Bottom Bar */

#xm-BottomBar{
	position: fixed;
	bottom:0px;
	left:0px;
	width:100%;
	height:32px;
	overflow:hidden;
	z-index: 100;
	font-family: var(--font2);
}
	#xm-BottomBar::after{
		display: block;
		position: absolute;
		bottom: 4px;
		right: 12px;
		padding: 4px 8px;
		content: "Menu";
		background-color: var(--site-color4);
		color: #fff;
		
	}
	#xm-BottomBar:hover .inner{
		opacity:1;		
	}
	#xm-BottomBar .inner{
		border: 0px solid var(--site-color4);
		border-top-width : 2px;
		background-color: transparent;
		position:relative;
		top:0;
		height:32px;
		overflow:hidden;
		text-align:center;
		z-index:10;
		width:100%;
		background-color: var(--site-color1);
		opacity:0;		
		transition: opacity 0.3s linear;
	}
	
	#xm-BottomBar li {
		display: inline;
		line-height: 30px;
		font-size: 12px;
		padding: 0px 16px;
	}
	#xm-BottomBar a {color: #fff; text-decoration:none;}
	#xm-BottomBar a:hover {text-decoration:underline;}
	

	
/***************************************************************************/
/******************    Form Definitions  		   *************************/
/***************************************************************************/

.xmform {
}
	.xmform.small{width:453px; margin-left: auto; margin-right: auto;}
	.xmform fieldset {
		display: block;
		border: 1px solid var(--form-color1);
		width: 480px;
		margin-bottom: 16px;
	}
	.xmform legend {
		color: #fff;
		background: var(--site-color3);
		border: 1px solid var(--form-color1);
		padding: 2px 6px
	}
	
.xmform-row{
	margin-top:16px;
	position: relative;
}

.xmform .text{
	position: relative;
	text-align: left;
}
	.xmform .text label{
		display: block;
		font-family: var(--font1);
		font-weight: bold;
		color: var(--form-color1);
	}
	.xmform .text input, 
	.xmform .text textara{
		background-color: var(--form-color2);
		border: 1px solid var(--form-color1);
		padding: 2px 4px;
		font-family: var(--font2);
		color: var(--form-color1);
		font-size: 14px;
		width: 100%;
	}
	.xmform .text input:focus, 
	.xmform .text textara:focus{
		border: 1px solid var(--form-color3);
	}
	.xmform .text textara{
		min-height: 108px;
		resize: none;
		overflow: auto;
	}

.xmform .checkbox{
	padding: 0 0 0 40px;
	text-align: left;
 }
	.xmform .checkbox label{
		cursor: pointer;
		font-family: var(--font1);
		font-weight: bold;
		color: var(--form-color1);
	}
	.xmform .checkbox label:before,.xmform .checkbox label:after{
		content: '';
		position: absolute;
		top: 50%;
		border-radius: 0;
	}
	.xmform .checkbox label:before{
		left: 0;
		width: 24px;
		height: 24px;
		margin: -12px 0 0;
		background-color: var(--form-color2);
		border: 1px solid var(--form-color1);
	}
	.xmform .checkbox label:after{ 
		left: 4px;
		width: 16px;
		height: 16px;
		margin: -8px 0 0;
		z-index:10;
		background-color: var(--form-color1);
		transition: opacity 0.25s ease-in-out;
		opacity: 0;
	}
	.xmform .checkbox input[type="radio"],
	.xmform .checkbox input[type="checkbox"]{
		position: absolute;
		top: 200;
		left: 200px;
		visibility: hidden;
		
	}
	.xmform .checkbox input[type="radio"]:checked + label:before,
	.xmform .checkbox input[type="checkbox"]:checked + label:before{
	}
	.xmform .checkbox input[type="radio"]:checked + label:after, 
	.xmform .checkbox input[type="checkbox"]:checked + label:after{
		opacity: 1;
	}

.xmform .submit{
	text-align: center;
}
	.xmform .submit input {
		padding: 8px 16px;
		font-weight: bold;
		border: 1px solid var(--form-color1);
		border-radius: 5px;
		color: var(--form-color1);
		background-color:var(--form-color2);
		transition: 0.3s;
	}
	.xmform .submit input:hover {background-color: var(--form-color1); color: #fff;}


#wishlist.xmform {}
	#wishlist.xmform textarea{
		overflow:auto;
		resize: none;
		width: 100%;
		height: 120px;
		border: 3px solid var(--form-color1);
		padding: 14px;
	}
	#wishlist.xmform textarea:focus{
		border: 3px solid var(--form-color3);
		color: var(--site-color3);
	}

.xm-alinkbox{
	padding: 0px 0px 0px 0px;
	list-style: none;
}
	.xm-alinkbox li {
		min-height: 38px;
	}
	.xm-alinkbox span {
		display: block;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		min-height: 38px;
	}
.alinkbutton {
		padding: 8px 16px;
		font-weight: bold;
		border-radius: 5px;
		background-color:var(--form-color1);
		border: 1px solid #d51905;
		color: #fff;
		cursor: pointer;
}
	.alinkbutton:hover {background-color:green; color: white;box-shadow:5px 5px 10px var(--site-color4);}
	.alinkbutton + .alinkbutton {margin-left: 8px;}
	.alinkbutton.disabled, .alinkbutton.disabled:hover {cursor:not-allowed;background-color:#eee;color:#aaa;border-color:#999;} 


.xm-santaMsg{
	width: 800px;
	min-height: 100px;
	background-image: url('./img/resource/note_top-800.jpg');
	background-position: top left;
	background-repeat: no-repeat;
	padding-top: 36px;
	margin: 48px auto 0px auto;
	text-align: center;
}
	.xm-santaMsg div.inside img{display:block;width: 100px;height:100px;margin:0px auto;}
	.xm-santaMsg div.middle{
		width: 800px;
		text-align: left;
		background-image: url('./img/resource/note_middle-800.jpg');
		background-position: center;
		background-repeat: repeat-y;
	}
	
	.xm-santaMsg div.inside {
		padding-left: 120px;
		width: 680px;
		font-family:  var(--font-cursive);
		font-size: 18pt;
	}

/***************************************************************************/
/******************    Table Definitions  		   *************************/
/***************************************************************************/


.SecretSantaList {
	width: 100%;
	font-family: var(--font2); 
	font-size: 12px;
	background: #fff;
	padding: 16px;
	border-collapse: collapse;
	text-align: left;
}
.SecretSantaList th
{
	font-size: 14px;
	font-weight: normal;
	color: var(--site-color2);
	padding: 10px 8px;
	border-bottom: 1px solid var(--site-color2);
}
.SecretSantaList td {
	padding: 6px 8px;
}
.SecretSantaList tr {
	border-bottom: 1px solid #ccc;
}
	.xm-rowcolor1{background-color:#f56859}/* Red */
	.xm-rowcolor2{background-color:#CECEF6;}/* Blue */
	.xm-rowcolor3{background-color:#CEF6CE;}/* Green */
	.xm-rowcolor4{background-color:#F6CEF5;}/* purpole */
	.xm-rowcolor5{background-color:#F5F6CE;}/* Yellow */
	.xm-rowcolor6{background-color:#A9F5F2;}/* Aqua */
	.xm-rowcolor7{background-color:#F3E2A9;}/* Tan */
	.xm-rowcolor8{background-color:#F7819F;}/* Rouge */
	.xm-rowcolor9{background-color:#E6E6E6;}/* Grey */
	.xm-rowcolor10{background-color:#A9F5E1;}/* bluegreen */
.SecretSantaList tr:last-child {border-bottom: 1px solid var(--site-color2);}
.SecretSantaList tbody tr:hover td {
	color: var(--site-color2);
}
	.emptyRow{text-align:center;}

/***************************************************************************/
/******************    Member Card		  		   *************************/
/***************************************************************************/
.xm-memberCard{
	float: right;
	margin-right:8px;
	position: relative;
	width:300px;
	height:170px;
	border-radius:15px;
	color:#fff;
	box-shadow:10px 10px 10px #999;
	font-size: 12px;
	overflow:hidden;
	background-image: url('./img/art/santa_gifting-250x200.png');
	background-size: 200px 150px;
	background-repeat: no-repeat;
	background-position: bottom right;
	background-color:var(--site-color1);
	
}
.xm-memberCard h2{
	background-color:var(--site-color4);
	color:#000;
	text-align:center;
	font-size: 16px;
	line-height:24px;
	height:36px;
	line-height: 40px;
	xborder-radius:15px 15px 0px 0px;
	margin: 0px;
}
	.xm-memberCard h2 span{font-family: var(--font-cursive);font-size:24px;}
	.xm-cardInfo{
		position:absolute;
		z-index:10;
		
	}
	.xm-cardInfo::before{font-weight:bold;}
	.xm-cardInfo span{display: block; width: 100%; height: 14px; text-align: center; font-weight:bold;}
	
	.xm-memberCard #rank{top:40px;right: 10px;color: red;width:auto;}
	.xm-memberCard #role{top:70px;left:92px;width:200px;font-weight:bold;text-transform:uppercase;font-size:24px;text-align:center;}
	.xm-memberCard #name{top:108px;left:96px;width:200px;font-size:16px;}
		.xxm-memberCard #name::before{content:'Name';padding-right:4px;}
	.xm-memberCard #email{top:128px;left:96px;width:200px;}
		.xxm-memberCard #email::before{content:'E-mail';padding-right:4px;}
	.xm-memberCard #since{top:148px;left:92px;width:200px;text-align:right;}
		.xm-memberCard #since::before{content:'Commission';padding-right:4px;}
	.xm-memberCard #agentNo{top:148px;left:8px;width:80px;text-align:center;}
		.xm-memberCard #agentNo::before{content:'Agent';padding-right:4px;}
	
	.xm-photoID{
		position:absolute;
		top:44px;
		left:8px;
		border: 1px solid var(--site-color3);
		width: 80px;
		height: 100px;
		background-color:#fff;
		overflow: hidden;
		line-height:80px;
	}
	.xm-photoID img{
		max-width: 100%;
		max-height: 100%;
		vertical-align: middle;
	}

/***************************************************************************/
/******************    Front Page		  		   *************************/
/***************************************************************************/
.fp-splash{
	position: fixed;
	top: 0;
	left: 0;
	width:100%;
	height:100vh;
	background: url('./img/bg/christmas.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
	#fp-splash-first{clip-path: circle(0px at center);}
	#fp-homepage.fp-splash{
		display: none;
		opacity: 0;
		background-image: url('./img/bg/winter-scene.jpg'); 
	}
	#fp-homepage.fp-splash.lock{
		display: block;
		z-index: 2;
	}
.fp-wrapper{
	position: relative;
	margin-top: 400vh;
	background: #fff;
	padding: 100px;
	background-color: transparent;
}
.fp-title {
	position: relative;
	top: 20vh;
	margin-bottom:20px;
	z-index: 2;
	width: 100%;
}
.fp-title h2{
	font-size: 3em;
	text-align: center;
	font-family:  var(--font2);
	margin-bottom:8px;
}

.fp-title h2 span, #fp-banner{
	font-family:  var(--font-cursive);
	color: var(--site-color4);
	font-size: 3em;
}

.fp-title h3{
	font-size: 1.5em;
	margin-top:0;
	font-family:  var(--font2);
	text-align: center;
}

.fp-tree{
	border: 3px solid var(--site-color1);
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
}
.fp-outer{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 1;
	width: 200px;
	height: 200px;
	opacity: 0;
	display:none;
}
	.fp-inner{
		height: 100%;
		width: 100%;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
	}
		#santa .fp-inner{background-image: url('./img/art/bulbs.png');}
		#lodge .fp-inner{background-image: url('./img/art/christmashouse2.png');} #lodge {z-index: 3;}
		#old .fp-inner{background-image: url('./img/art/OldSanta.jpg');}
		#night .fp-inner{background-image: url('./img/art/late-night.png');}
		
#lodge2.fp-outer{
	display:block;
	opacity: 0;
	width: 300px;
	height: 300px;
	transition: 4s ease-in;
		-moz-transition: 4s ease-in;
		-webkit-transition: 4s ease-in;
}
		#lodge2.fp-outer.show{
			opacity: 1; 
			height:75%;
			width:75%;
		}
		#lodge2 .fp-inner{background-image: url('./img/art/christmashouse2.png');}
		


#fp-banner{
	display: none;
	position: fixed;
	top: 0;
	margin: 16px 0px 0px 0px;
	text-align: center;
	z-index:10;
	width:100%;
	font-size: 9em;
}

	#fp-banner.fixed{
		display:block;
	}
	
	.fp-option{
		display:none;
		text-align: center;
		position: fixed;
		width: 50%;
		height: 75%;
		padding:0px 18px;
		bottom: 0; 
		opacity: 0;
	}
		#fp2 .fp-option{
		transition: 2s ease-in;
			-moz-transition: 2s ease-in;
			-webkit-transition: 2s ease-in;
		}
		.show .fp-option {opacity: 1}
	
	.fp-option.staticFP{display:block;}
		#fp-start{left: 0;}
		#fp-login{right: 0;}
		
		.fp-picturelink {
			width: 100%;
			height: 80%;
			opacity: 0;
			background-repeat: no-repeat;
			background-position: center center;
			background-size: contain;
			transition: opacity .5s ease-in-out;
			-moz-transition: opacity .5s ease-in-out;
			-webkit-transition: opacity .5s ease-in-out;
		}
		.fp-option a:hover + .fp-picturelink {opacity: 1;}
		#fp-start .fp-picturelink {background-image: url('./img/art/santa-claus.png');}
		#fp-login .fp-picturelink {background-image: url('./img/art/santa1.png');}
		
		.fp-option a {
			color:	var(--link-color);
			font-size: .82em;
			text-shadow: 1px 1px 2px white, 0 0 25px white, 0px 0px 10px red;
		}
		
		.fp-option a:hover {color: var(--link-hover);}
		
		.xfp-optionx a span{
			position:absolute; 
			width:100%;
			height:100%;
			top:0;
			left: 0;
			z-index: 12;
		}
	
	.lock .fp-option{
		display:block;
	}
	


/***************************************************************************/
/******************    Icons			  		   *************************/
/***************************************************************************/
.icon-nocheck:before{content:'X';color:transparent;border:1px solid var(--site-color1);padding:2px;}
.icon-checkmark:before{content:'X';color:var(--site-color1);border:1px solid var(--site-color1);padding:2px;}

.icon-box:before {
	color:var(--site-color1);
	border:1px solid var(--site-color1);
	padding:2px 4px;
}
	.icon-box:hover::before {background-color: var(--form-color2);}
.icon-edit:before{content:'Edit';}
.icon-email:before{content:'Email';}
.icon-buy:before{content:'Confirm Purchase';}
.icon-close:before{content:'Close Window';}

/***************************************************************************/
/******************    Images			  		   *************************/
/***************************************************************************/
.xm-image{
	width: 100%;
	text-align: center;
}

	.xm-image img{
		max-height: 400px;
		width: auto;
		border-radius: 50%; 
		border: 1px solid var(--site-color1);
		padding: 5px;
	}


/***************************************************************************/
/******************    Overlay			  		   *************************/
/***************************************************************************/

	/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 0;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(255,255,255, 0.9); /* Black w/opacity */
  overflow-Y: hidden; /* Disable vertical scroll */
  transition: 1.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlaycontent {
  position: relative;
  top: 25%; /* 25% from the top */
  margin: 30px auto 0 auto;
  width: 450px; /* 100% width */
  text-align: center; /* Centered text/links */
  padding: 16px;
  border: 2px solid darkgreen;
  background-color: #fff;
}

.overlaycontent p {text-align:left;}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  display: block; 
  font-size: 36px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

/* Debugging Plugin Information*/
 
.xm_debug_box {
	background-color: #fff;
	padding: 16px;
	margin-top: 64px;
	font-size: 14px;
	border: 1px solid darkgreen;
}

.xm_debug_link {}

.xm_debug_section {background-color: #ccc;border: 1px solid darkgreen;padding:16px;margin:16px 0px;}
/*------------------------------------*\
    PAGES
\*------------------------------------*/



/*------------------------------------*\
    IMAGES
\*------------------------------------*/



/*------------------------------------*\
	TYPOGRAPHY
\*------------------------------------*/

@font-face {
	font-family:'Caveat';
	src:url('fonts/Caveat-Regular.ttf') format('truetype'),
    font-weight:normal;
    font-style:normal;
}



/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (min-width:320px) {

}
@media only screen and (min-width:480px) {

}
@media only screen and (max-width:768px) {
	/* General Layout */
	.top{
		min-height:52px;
		height: auto;
	}
	.top-title{
		position:relative;
		width: 100%;
	}
	.top-title::after{
		content: 'Menu';
		display:block;
		position:absolute;
		right:10px;
		top: 14px;
		color:var(--site-color1);
		border:1px solid var(--site-color1);
		padding:2px 4px;
		font-family:  var(--font1);
		font-size: 14px;
		cursor:pointer;
	}
	.top:hover .top-title::after{
		background-color:var(--form-color2);
	}
	.header-nav{
		display:none;
		position: static;
		height: auto;
		width:100%;
		margin: 0px;
		padding: 0px;
	}
		.top:hover .header-nav{display:block;}
	.header-nav ul{
		margin: 0px auto px auto;
		width:100%;
		
	}
	.header-nav li {
		display: block;
		height: 0px;
		text-align:center;
		transition: height .5s ease-in-out;
	}
		.top:hover .header-nav li {height:26px;}
	.top-login{
		display:none;
		width:100%;
		position:static;
		text-align: center;
	}
		.top-login span{display:none;}
		.top:hover .top-login{display:block;}
	
	
	/*fRONT pAGE */
	#fp-banner {
		font-size: 6em;
	}
	.fp-option a{
		display: block;
		position: absolute;
		bottom: 15%;
		z-index: 10;
		width: 100%;
	}
	
	#xm-BottomBar{
		height: auto;
		min-height: 32px;
	}
	#xm-BottomBar .inner {
		height: auto;
		min-height: 32px;
		bottom:0px;
	}
	
	#xm-BottomBar li{
		display: block;
		width: 100%;
		text-align: center;
		height: 0px;
		transition: height .5s ease-in-out;
	}
	#xm-BottomBar:hover li{
		height: 36px;
	}
	
	
	/* OTHER */
	.xm_debug_box{
		display: none;
	}
	.wrapper{width:100%;}
	.header{padding:0px;}
	.topbar, .main, .footer {border-width: 0px;}
}
@media only screen and (min-width:1024px) {

}
@media only screen and (min-width:1140px) {

}
@media only screen and (min-width:1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
	   only screen and (min-resolution:144dpi) {

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-webkit-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}
::-moz-selection {
	background:#04A4CC;
	color:#FFF;
	text-shadow:none;
}

/*------------------------------------*\
    WORDPRESS CORE
\*------------------------------------*/

.alignnone {
	margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
	display:block;
	margin:5px auto 5px auto;
}
.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.alignright {
	float:right;
	margin:5px 0 20px 20px;
}
a img.alignnone {
	margin:5px 20px 20px 0;
}
a img.alignleft {
	float:left;
	margin:5px 20px 20px 0;
}
a img.aligncenter {
	display:block;
	margin-left:auto;
	margin-right:auto;
}
.wp-caption {
	background:#FFF;
	border:1px solid #F0F0F0;
	max-width:96%;
	padding:5px 3px 10px;
	text-align:center;
}
.wp-caption.alignnone {
	margin:5px 20px 20px 0;
}
.wp-caption.alignleft {
	margin:5px 20px 20px 0;
}
.wp-caption.alignright {
	margin:5px 0 20px 20px;
}
.wp-caption img {
	border:0 none;
	height:auto;
	margin:0;
	max-width:98.5%;
	padding:0;
	width:auto;
}
.wp-caption .wp-caption-text,
.gallery-caption {
	font-size:11px;
	line-height:17px;
	margin:0;
	padding:0 4px 5px;
}
.sticky {

}
.bypostauthor {

}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}
	a,
	a:visited {
		text-decoration:underline;
	}
	a[href]:after {
		content:" (" attr(href) ")";
	}
	abbr[title]:after {
		content:" (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}
	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}
	thead {
		display:table-header-group;
	}
	tr,img {
		page-break-inside:avoid;
	}
	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}
	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}