/* Style Variables */
:root {

--gray-0: #000000; /* rgb(0,0,0) */
--gray-1: #1D2325; /* rgb(29,35,37) */
--gray-2: #485759; /* rgb(72,87,89) */
--gray-3: #627273; /* rgb(98,114,115) */
--gray-4: #79898B; /* rgb(121,137,139) */
--gray-5: #8D9DA0; /* rgb(141,157,160) */
--gray-6: #98AAAA; /* rgb(152,170,170) */
--gray-7: #A9B8BA; /* rgb(169,184,186) */
--gray-8: #BCC8C9; /* rgb(188,200,201) */
--gray-9: #D2DBDB; /* rgb(210,219,219) */
--gray-10: #E7EFEF; /* rgb(231,239,239) */
--gray-11: #F7FAFA; /* rgb(247,250,250) */
--gray-12: #FFFFFF; /* rgb(255,255,255) */

--black: #000000;
--white: #FFFFFF;

--gold: #C89A25;  

--gold-strong: #AA8018;
--gold-bright: #E0B43B;
--gold-faint: #DCC78C;

--gold-soft: rgba(200,154,37,.10);
--gold-subtle: rgba(200,154,37,.20);


--gold-blend:
linear-gradient(
135deg,
#B78920 0%,
#C29527 18%,
#D3AE4C 34%,
#DEBF69 50%,
#D0AA43 66%,
#BF9124 82%,
#AE8119 100%
);

} /* END Style Variables */


.brick {
	width:80% !important;
	margin-left:10%;
}

.brick {
	position:relative;
	top:0px;
	left:0px;
	display:inline-block;
	width:100%;
	min-height:var(--margin);
	height:60px;
	border-radius:2px;
	padding:0px;
	margin-bottom:var(--margin-xs);
	transition:.25s;
	font-size:13px;
	overflow:hidden;
	border:none;
	z-index:100;
}

	a.brick:hover {
		transition:.33s;
		transform:translate(-1px, -1px);
		box-shadow:3px 3px 3px rgb(0,0,0,.1);
		opacity:1;
		filter:none;
	}
	
	.brick > div {
		position:relative;
		float:left;
		height:60px;
		padding:0px var(--margin-xxs);
	}
	
	div.brick_icon {
		width:60px;
		padding:10px 10px;
		border-right:1px solid var(--gray-10);
		overflow:visible;
		transition:1.5s;
		background-color:inherit;
	}
	
		button.brick div.brick_icon {
			padding:8px 10px;
		}
		
		div.brick_icon svg {
			height:40px;
			width:40px;
			opacity:.66;
		}
		
		
		div.brick_icon img {
			position:absolute;
			height:43px;
			width:43px;
			top:0px;
			left:0px;
		}
	
			/* Swap Brick Icon for Add icon */
			a.brick:hover div.brick_icon.topic,
			button.brick:hover div.brick_icon.topic {
				opacity:0;
			}
			
			a.brick div.brick_icon.add,
			button.brick div.brick_icon.add {
				opacity:0;
				position:absolute;
				left:0px;
				top:0px;
			}
			
			a.brick:hover div.brick_icon.add,
			button.brick:hover div.brick_icon.add {
				opacity:1;
			}
		
			a.brick div.brick_icon.add svg,
			button.brick div.brick_icon.add svg {
				transform:rotate(45deg) scale(180%);
				transition:1.5s;
			}
		
			a.brick:hover div.brick_icon.add svg,
			button.brick:hover div.brick_icon.add svg {
				transform:rotate(45deg) scale(100%);
			}
			

	div.brick_title {
		position:relative;
		width:calc(100% - (61px) - 250px);
		background-color:rgb(255,255,255,.2);
	}
	
		div.brick_title.no_details {
			width:calc(100% - 61px)  !important;
		}
			
		div.brick_title span {
			height:20px;
			position:absolute;
			left:10px;
			margin:0;
			padding:0;
			width:90%;
			min-width:auto;
		}
		
			div.brick_title span.eyebrow {
				top:12px;
				font-size:11px !important;
				text-transform:uppercase;
				letter-spacing:normal;
				line-height:9px;
				height:9px !important;
				font-weight:400 !important;
			}
			
			div.brick_title span.label {
				top:22px !important;
				font-size:16px !important;
				line-height:20px !important;
				font-weight:600 !important;
				letter-spacing:normal  !important;
			}
		
			div.brick_title span.note {
				top:29px;
				font-size:10px;
				line-height:10px;
				font-weight:300;
			}
			
			

.gold_back {
	background:var(--gold-blend) !important;
	color:var(--white);
	opacity:.9;
}
	
	a.gold_back:hover {
		background-color:var(--gold-bright) !important;
		color:var(--white) !important;
		opacity:1;
	}
	
	a.gold_back {
		text-shadow:0px 0px 15px rgb(55, 0, 15, .7) !important;
	}
	

section.story_hero a.vip_promo {
	height:60px;
	position:absolute;
	margin:0px;
	top:10px;
	left:0px;
	max-width:400px;
	border-radius:0px 100px 100px 0px;
}



@media (max-width: 900px) {
	
	section.story_hero {
	top:0px ;
  }
  
	section.story_hero a.vip_promo {
	top:20px !important;
  }
}

@media (max-width: 720px) {
	
	section.story_hero a.vip_promo {
	top:20px !important;
  }
}