/*************************************************************
[TABLE OF CONTENTS]

1. CUSTOMIZABLE VALUES
2. MENU BUTTON
3. IMAGE
4. MENU
5. SUB-MENU
6. MENU ITEM ANIMATIONS
4. FULL-SCREEN INFO PANE
*************************************************************/

/*
1. CUSTOMIZABLE VALUES
**************************************************/
/* initial width */
.spark-menu-button-wrapper,
.spark-main-wrapper {
	width:54px;
	top:0;
	left:0;
}
/* active width */
.spark-main-wrapper-active,
.spark-image-menu .menu li a,
.spark-by-bonfire ul { width:145px; }

/* if right positioning active */
.spark-right {
	left:auto;
	right:0;
}
/* if fixed position (default) */
.spark-main-wrapper { position:fixed; }
/* if absolute positioning active */
.spark-absolute { position:absolute; }
/* menu button background */
.spark-menu-button-wrapper { background-color:#D67310; }
/* menu button background hover */
.spark-menu-button-wrapper:hover { background:; }
/* close button background */
.spark-main-wrapper-active .spark-menu-img-wrapper:hover .spark-menu-button-wrapper.spark-menu-active,
.spark-menu-button-wrapper.spark-menu-active { background-color:#363A3E; }
/* menu button bars */
.spark-menu-button:after,
.spark-menu-button:before,
.spark-menu-button div.spark-menu-button-middle { background-color:#F1CEAC; }
/* menu button bars hover */
.spark-menu-button:hover:after,
.spark-menu-button:hover:before,
.spark-menu-button:hover div.spark-menu-button-middle { background-color:#fff; }
/* close button bar */
.spark-menu-active .spark-menu-button div.spark-menu-button-middle { background-color:#999; }
/* close button bar hover */
.spark-main-wrapper-active .spark-menu-img-wrapper:hover .spark-menu-button div.spark-menu-button-middle { background-color:#fff; }
/* menu background */
.spark-image-menu { background-color:#fff; }
/* menu item */
.spark-image-menu .menu li a { color:#AFB7BF; }
/* sub-menu item */
.spark-image-menu .sub-menu li a { color:#B6BCC1; }
/* (sub)menu item hover */
.spark-image-menu .menu li a:hover { color:#898E94; }
/* sub-menu arrow */
.spark-image-menu .menu-item-has-children:before { color:#ccc; }
/* full-screen info pane background */
.fullscreen-wrapper { background-color:#0D1115; }
/* full-screen info pane close button */
.closefullscreen svg { fill:#fff; }

/*
2. MENU BUTTON
**************************************************/
/* wrapper */
.spark-menu-button-wrapper {
	position:absolute;
	right:0 !important;
	z-index:999999999;
	height:54px;
	cursor:pointer;
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
/* wrapper when menu is clicked */
.spark-main-wrapper-active .spark-menu-img-wrapper:hover .spark-menu-button-wrapper.spark-menu-active,
.spark-menu-button-wrapper.spark-menu-active {
	opacity:.75;
	width:33px;
	height:33px;
}
/* button */
.spark-menu-button {
	padding:12px 11px 10px 11px;
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
/* button when menu is clicked */
.spark-menu-active .spark-menu-button {
	padding:1px 6px 1px 6px;
}
/* menu bars */
.spark-menu-button:after,
.spark-menu-button:before,
.spark-menu-button div.spark-menu-button-middle {
	content:'';
	display:block;
	height:1px;
	margin:7px 0;
	width:32px;

	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
/* middle bar animation */
.spark-menu-active .spark-menu-button div.spark-menu-button-middle {
	margin:2px 0;
	width:20px;
	
	-webkit-transform:scaleX(.75);
	-moz-transform:scaleX(.75);
	transform:scaleX(.75);
}
/* top+bottom bar fade out */
.spark-menu-active .spark-menu-button:before,
.spark-menu-active .spark-menu-button:after {
	opacity:0;
	width:20px;
	
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	transition:all .2s ease;
}


/*
3. IMAGE
**************************************************/
.spark-main-wrapper {
	z-index:99999999;
	height:54px;
	cursor:pointer;
	
	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	transition:all .4s ease;
}
.spark-main-wrapper-active {	
	-webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.15);
	-moz-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.15);
	box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.15);
	
	-webkit-transition:all .55s ease;
	-moz-transition:all .55s ease;
	transition:all .55s ease;
}
/* default image state */
.spark-menu-img-wrapper img {
	opacity:.8;
	width:100%;
	height:auto;
	min-height:54px;
	margin:0 0 -5px 0;
	padding:0;
	
	-webkit-transition:all .5s ease;
	-moz-transition:all .5s ease;
	transition:all .5s ease;
}
.spark-main-wrapper-active .spark-menu-img-wrapper img { max-height:1000px; }
/* hover/active image state */
.spark-main-wrapper:hover img,
.spark-main-wrapper-active img { opacity:1; }


/*
4. MENU
**************************************************/
/* specify top border */
.spark-image-menu .menu li.border {
	border-top:1px solid #ECEEEF;
	padding-top:5px;
	margin-top:6px;
	margin-right:16px;
}
.spark-by-bonfire .menu li.border > span {
	margin-right:-16px;
	margin-top:5px;
}
/* icon */
.spark-image-menu .menu a i {
	margin:0 3px 0 -5px;
	line-height:28px;
	display:block;
	float:left;
	width:20px;
	text-align:center;
	font-size:12px;
}
/* user avatar menu */
.spark-image-menu {
	position:relative;
	z-index:9999999;
	top:0;
	right:0;
	overflow:hidden;
	margin:0;
	padding:8px 8px 6px 8px;

	/* Using ".00000001" removes Chrome animation error */
	-webkit-transform:scaleY(.00000001);
	-moz-transform:scaleY(.00000001);
	transform:scaleY(.00000001);
	
	-webkit-transform-origin:top;
	-moz-transform-origin:top;
	transform-origin:top;

	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	transition:all .4s ease;

	-webkit-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.15);
	-moz-box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.15);
	box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.15);
}
.spark-image-menu-active {
	max-width:1000px;
	
	-webkit-transform:scaleY(1);
	-moz-transform:scaleY(1);
	transform:scaleY(1);
	
	-webkit-transition:top .55s ease, max-width .55s ease, -webkit-transform .55s ease;
	-moz-transition:top .55s ease, max-width .55s ease, -moz-transform .55s ease;
	transition:top .55s ease, max-width .55s ease, transform .55s ease;
}
/* menu wrapper (inner) */
.spark-by-bonfire {
	position:relative;
	opacity:0;
	top:25px;
	width:100%;
	padding:0;
	
	-webkit-transform-origin:25% 0;
	-moz-transform-origin:25% 0;
	transform-origin:25% 0;
}
.spark-image-menu-active .spark-by-bonfire {
	opacity:1;
	top:0;
	
	-webkit-transition:all .25s ease .3s;
	-moz-transition:all .25s ease .3s;
	transition:all .25s ease .3s;
}
/* main menu */
.spark-by-bonfire ul {
	list-style-type:none;
	margin:0;
	padding:0;
	margin:30px 0 0 0;
}
/* individual main menu items */
.spark-by-bonfire ul li {
	max-width:100%;
	min-height:30px;
	list-style-type:none;
	margin:0;
	padding:1px;
	text-align:left;
}
.spark-by-bonfire ul li a {
	margin:0;
	padding:0 0 0 5px;
	display:inline-block;
	text-decoration:none;
	
	-webkit-transition:all .2s ease;
	-moz-transition:all .2s ease;
	transition:all .2s ease;
}
/* menu + submenu item joint styles */
.spark-image-menu .menu li a,
.spark-image-menu .sub-menu li a {
	font-family:'Open Sans';
	font-weight:600;
	font-size:13px;
	text-decoration:none;
	letter-spacing:0;
	line-height:28px;
	outline-style:none;
}
/* sub-menu item */
.spark-image-menu .sub-menu li a {
	font-weight:400;
}


/*
5. SUB-MENU
**************************************************/
.spark-by-bonfire .menu {
	list-style:none;
	margin:0;
	padding:0;
}
.spark-by-bonfire .menu li {
	position:relative;
	margin:0;
	padding:0;
	border:none;
	z-index:auto;
}
/* the arrow button */
.spark-by-bonfire .menu li span {
	display:inline-block;
	width:32px;
	height:24px;
	position:absolute;
	z-index:999;
	top:3px;
	right:9px;
	margin:0;
	padding:0;
	cursor:pointer;
	text-align:center;
	line-height:22px;
	border-left:1px solid #EBEBEB;
}
.spark-by-bonfire .menu li span svg {
	width:10px;
	height:auto;
	padding:0;
	margin:0 0 0 0;
	fill:#8C9093;
	vertical-align:middle;
	pointer-events:none;
	
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	transform:rotate(90deg);
	
	-webkit-transition:all .3s ease;
	-moz-transition:all .3s ease;
	transition:all .3s ease;
}
.spark-by-bonfire .menu li span:hover svg {
	fill:#ccc;
}
/* the arrow button (active state) */
.spark-by-bonfire .menu li span.spark-submenu-active svg {	
	-webkit-transform:rotate(270deg);
	-moz-transform:rotate(270deg);
	transform:rotate(270deg);
}
.spark-by-bonfire .menu ul {
	list-style:none;
	margin:0;
	padding:0;
	display:none;
}
/* sub-menu items */
.spark-by-bonfire .sub-menu a {
	color:#686C6F;
	font-size:11px;
	margin:0;
	padding:0 0 0 5px;
	position:relative;
	z-index:99;
}


/*
6. MENU ITEM ANIMATIONS
**************************************************/
/* individual li animations */
.spark-by-bonfire .menu li a {
	opacity:0;

	-webkit-transform:translateY(10px);
	-moz-transform:translateY(10px);
	transform:translateY(10px);
}
.spark-image-menu-active .menu li a {
	opacity:1;
	
	-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	transform:translateY(0);
}
/* individual li animation speeds */
.spark-image-menu-active .menu li:nth-child(1) a {
	-webkit-transition:opacity .2s ease .1s, -webkit-transform .2s ease .1s;
	-moz-transition:opacity .2s ease .1s, -moz-transform .2s ease .1s;
	transition:opacity .2s ease .1s, transform .2s ease .1s;
}
.spark-image-menu-active .menu li:nth-child(2) a {
	-webkit-transition:opacity .2s ease .35s, -webkit-transform .2s ease .35s;
	-moz-transition:opacity .2s ease .35s, -moz-transform .2s ease .35s;
	transition:opacity .2s ease .35s, transform .2s ease .35s;
}
.spark-image-menu-active .menu li:nth-child(3) a {
	-webkit-transition:opacity .2s ease .45s, -webkit-transform .2s ease .45s;
	-moz-transition:opacity .2s ease .45s, -moz-transform .2s ease .45s;
	transition:opacity .2s ease .45s, transform .2s ease .45s;
}
.spark-image-menu-active .menu li:nth-child(4) a {
	-webkit-transition:opacity .2s ease .5s, -webkit-transform .2s ease .5s;
	-moz-transition:opacity .2s ease .5s, -moz-transform .2s ease .5s;
	transition:opacity .2s ease .5s, transform .2s ease .5s;
}
.spark-image-menu-active .menu li:nth-child(5) a {
	-webkit-transition:opacity .2s ease .55s, -webkit-transform .2s ease .55s;
	-moz-transition:opacity .2s ease .55s, -moz-transform .2s ease .55s;
	transition:opacity .2s ease .55s, transform .2s ease .55s;
}
.spark-image-menu-active .menu li:nth-child(6) a {
	-webkit-transition:opacity .2s ease .6s, -webkit-transform .2s ease .6s;
	-moz-transition:opacity .2s ease .6s, -moz-transform .2s ease .6s;
	transition:opacity .2s ease .6s, transform .2s ease .6s;
}
.spark-image-menu-active .menu li:nth-child(7) a {
	-webkit-transition:opacity .2s ease .65s, -webkit-transform .2s ease .65s;
	-moz-transition:opacity .2s ease .65s, -moz-transform .2s ease .65s;
	transition:opacity .2s ease .65s, transform .2s ease .65s;
}
.spark-image-menu-active .menu li:nth-child(8) a {
	-webkit-transition:opacity .2s ease .7s, -webkit-transform .2s ease .7s;
	-moz-transition:opacity .2s ease .7s, -moz-transform .2s ease .7s;
	transition:opacity .2s ease .7s, transform .2s ease .7s;
}
.spark-image-menu-active .menu li:nth-child(9) a {
	-webkit-transition:opacity .2s ease .75s, -webkit-transform .2s ease .75s;
	-moz-transition:opacity .2s ease .75s, -moz-transform .2s ease .75s;
	transition:opacity .2s ease .75s, transform .2s ease .75s;
}
.spark-image-menu-active .menu li:nth-child(10) a {
	-webkit-transition:opacity .2s ease .8s, -webkit-transform .2s ease .8s;
	-moz-transition:opacity .2s ease .8s, -moz-transform .2s ease .8s;
	transition:opacity .2s ease .8s, transform .2s ease .8s;
}


/*
4. FULL-SCREEN INFO PANE
**************************************************/
.openfullscreen { cursor:pointer; }
/* wrapper */
.fullscreen-wrapper {
	opacity:0;
	position:fixed;
	z-index:9999999999;
	top:-100vh;
	width:100vw;
	height:100vh;
	overflow:auto;
	-webkit-transform:translate3d(0,0,0);
	-webkit-overflow-scrolling:touch;
	
	-webkit-transition:opacity .3s ease, top 0s ease .5s;
	-moz-transition:opacity .3s ease, top 0s ease .5s;
	transition:opacity .3s ease, top 0s ease .5s;
}
.fullscreen-wrapper-active {
	top:0;
	opacity:1;
	
	-webkit-transition:opacity .3s ease, top 0s ease;
	-moz-transition:opacity .3s ease, top 0s ease;
	transition:opacity .3s ease, top 0s ease;
}
/* inner */
.fullscreen-inner {
	font-family:'Merriweather',arial,tahoma,verdana;
	font-weight:300;
	font-size:22px;
	line-height:37px;
	color:#8E9CA0;
	position:relative;
	max-width:95%;
	opacity:0;
	-webkit-overflow-scrolling:touch;

	-webkit-transform:translateY(25px);
	-moz-transform:translateY(25px);
	transform:translateY(25px);
}
.fullscreen-inner strong { font-weight:700; }
.fullscreen-inner a {
	color:#D7BA34;
	text-decoration:underline;
}
.fullscreen-inner a:hover {
	text-decoration:none;
}
.fullscreen-wrapper-active .fullscreen-inner {
	opacity:1;
	max-width:900px;
	margin:40px auto 0 auto;
	padding:140px 30px 40px 30px;
		
	-webkit-transform:translateY(0);
	-moz-transform:translateY(0);
	transform:translateY(0);
	
	-webkit-transition:opacity .4s ease .2s, -webkit-transform .55s ease .2s;
	-moz-transition:opacity .4s ease .2s, -moz-transform .55s ease .2s;
	transition:opacity .4s ease .2s, transform .55s ease .2s;
}
/* fullscreen close button */
.closefullscreen {
	position:absolute;
	top:65px;
	width:100%;
	text-align:center;
	margin:0 auto;
	z-index:99999999999;
}
.closefullscreen svg {
	width:54px;
	height:54px;
	opacity:.3;
	cursor:pointer;

	-webkit-transition:opacity .3s ease;
	-moz-transition:opacity .3s ease;
	transition:opacity .3s ease;
}
.closefullscreen svg:hover {
	opacity:.6;
}