div#purchased_seats_notice{
	text-align: center;
	color: var(--fpSecondary);
}

div.category-container{
	margin: 10px 0px;
}
div.category-header{
	background-color: var(--fpLessDark);
	border: 2px solid var(--fpNotSoDark);
	border-radius: 12px;
	font-size: 3em;
	color: blue;
	cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    background-position: 50% 50%;
	position: relative;
}
div.category-name{
	z-index: 3;
	position: inherit;
	color: var(--fpPrimary);
	margin-left:25px;
	margin-right: 100px;
}
div.category-container div.category-product-container{
	margin-top: 10px;
}
div.category-container div.category-locked{
	float: right; font-size:.5em;
	padding: 5px 10px;
	z-index: 3;
	margin-top: 12px;
	margin-right: 12px;
}
div.category-header-gradient{
    left: 0;
    top: 0;
    right: 50px;
    bottom: 0;
	position: absolute;
	border-radius: 12px;
}
div.category-container:not(.expanded) div.category-header-gradient{
	background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0) 85%);
}
div.category-container.expanded div.category-header-gradient,
div.category-container:hover div.category-header-gradient{
	background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 85%);
}
div.category-container div.category-toggle{
	float: right;
	margin-right: 25px;
	color: var(--fpSecondary);
	z-index: 3;
}

div.product-container{
    position:relative;
    margin-bottom: 20px;
}
div.product-header{
    display: flex;
    flex-direction:row;
    position:relative;
}
div.product-header > div.product-name{
    background-color: var(--fpLessDark);
    font-size: 1.6em;
    padding: 0px 20px;
    margin-bottom:-2px;
    flex: 3;
    display: inline-block;
    position:relative;
    white-space:nowrap;
    color: var(--fpSecondary);
	overflow-x: hidden;
	text-overflow: ellipsis;
}
div.product-header > div.product-name:after{
    content: '';
    position: absolute;
    top: 0;
    right: 4px;
    width: 45px;
    height: 100%;
    background-color: var(--fpDark);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(45deg);
    -ms-transform: skew(45deg);
    transform: skew(45deg);
    z-index: 1;
}
div.product-header > div.spacer{
    width: 250px;
    position:relative;
    z-index:1;
}
div.product-header > div.spacer > div.product-price{
    background-color: var(--fpPrimary);
    height: 50px;
    position: absolute;
    right:0px;
    left: 0px;
    font-size: 2em;
    font-weight: bold;
    margin-left:5px;
    padding: 0px 15px;
    text-align:right;
	min-width: 100px;
}
div.product-header > div.spacer > div.product-price:before{
    /*Provides the slanted element on the Price Breakout*/
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 50px;
    height: 100%;
    background-color: var(--fpPrimary);
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: skew(45deg);
    -ms-transform: skew(45deg);
    transform: skew(45deg);
    z-index: -1;
}

div.product-body{
    border: 2px solid var(--fpLessDark);
    padding: 5px 15px;
    position:relative;
    display: flex;
    flex-direction: row;
}
div.product-body:after{
    /*blanks out the border around the Price Breakout*/
    content: ''; position: absolute; top: -2px; right: -2px; width: 264px; height: 18px; background-color: var(--fpDark);
}
div.product-body > div.product-body-content{flex:3; margin-right: 20px;position: relative; padding-bottom: 28px;}
div.product-body > div.product-body-content .product-tickets{text-align: center; color: var(--fpMoreNotSoDark);}
div.product-body > div.product-body-content .product-tickets .ticket-icon{padding-left: 2px; padding-right:2px;}
div.product-body > div.product-body-content .product-expiry {text-align: center; position: absolute; bottom: 0px; left: 0px; right: 0px;}
div.product-body > div.product-body-content .product-expiry.soon {color: var(--fpPrimaryVariant);}
div.product-body > div.product-body-content .product-gallery{display:flex; flex-direction:row;margin: 0px auto;}
div.product-body > div.product-body-content .product-gallery > .spacer{flex:1; flex-basis: 50%;}
div.product-body > div.product-body-content .product-gallery > .product-image-main{flex:none;height:250px; width: 500px; display: inline-block; position:relative; background-color: black; padding: 5px; border: 1px solid var(--fpNotSoDark);}
div.product-body > div.product-body-content .product-gallery > .product-image-main > .caption{position: absolute; bottom: 10px; left: 25px; right: 25px; text-align: center;  border-radius: 4px; background-color: rgba(50, 50, 50, .75);}
div.product-body > div.product-body-content .product-gallery > .product-image-selector{flex:none; display: inline-block; padding: 5px; background-color: black;border: 1px solid var(--fpNotSoDark); box-sizing: content-box;}
div.product-body > div.product-body-content .product-gallery > .product-image-selector > div{height:50px; width: 100px; background-repeat: no-repeat; background-size: cover; margin-top: 3px; cursor: pointer;}
div.product-body > div.product-body-content .product-gallery > .product-image-selector > div:first-child{margin-top: 0px;}

@media (max-width: 992px) {
    div.product-body {flex-direction: column; padding-top: 15px;}
	div.product-header > div.product-name{font-size: 1.5em;}
}
@media (min-width: 768px) {
    div.product-body > div.product-body-content .product-gallery > .product-image-main {width: auto; height: auto; border-right: none;box-sizing: content-box;padding-right: 0px; }
    div.product-body > div.product-body-content .product-gallery > .product-image-selector{overflow-x:hidden; overflow-y:scroll; border-left: none; height: 250px;padding-right: 5px; }
}
@media (max-width: 768px) {
	div.product-body > div.product-body-content{margin-right: 0px;}
    div.product-header > div.spacer { width: 100px;}
    div.product-header > div.spacer > div.product-price{ font-size: 1.25em; padding-top: 10px; padding-right: 10px;}
    div.product-body:after{display: none;}
    div.product-body > div.product-body-content .product-gallery {flex-direction: column;}
    div.product-body > div.product-body-content .product-gallery .spacer {display: none;}
    div.product-body > div.product-body-content .product-gallery > .product-image-main {width: 100%; height: auto; border-bottom: none;padding-bottom: 0px; }
    div.product-body > div.product-body-content .product-gallery > .product-image-main img {width: 100%; height: auto;}
    div.product-body > div.product-body-content .product-gallery > .product-image-selector{overflow-x:scroll; overflow-y:hidden; border-top: none; height: 70px; white-space:nowrap;}
    div.product-body > div.product-body-content .product-gallery > .product-image-selector > div{display: inline-block; margin-right: 5px;}
	
	div.product-header{flex-direction: column;}
	div.product-header > div.product-name{font-size: 1.2em; white-space: normal; margin-right: 0px;}
	div.product-header > div.product-name:after{display: none;}
	div.product-header > div.spacer > div.product-price:before{left: -25px;}
	div.product-header {}
	div.product-header > div.spacer{width: 150px; right: 0px; position: absolute; bottom: -32px;}
	div.product-header > div.spacer > div.product-price{position: initial; height: 30px; font-size: .8em; padding-top: 5px;}
	div.product-body {padding-top: 30px;}
	div.category-header{ font-size: 2em; }
}

div.product-body > div.product-body-interact{flex:1; margin-top: 12px;}
div.product-body > div.product-body-interact .complex-select input[type='radio']{display: none;}
div.product-body > div.product-body-interact .complex-select label{margin: 3px;border: 1px solid var(--fpLessDark); cursor: pointer;}
div.product-body > div.product-body-interact .complex-select label > .tooltip-content{display: none;}
div.product-body > div.product-body-interact .complex-select label > div{ padding: 5px 10px; }
div.product-body > div.product-body-interact .complex-select label > .product-option-image{background-repeat: no-repeat;background-size: cover; width: 50px; background-position: center center;}
div.product-body > div.product-body-interact .complex-select label.selected {border:2px solid var(--fpPrimary); margin: 2px;}
div.product-body > div.product-body-interact .option-container .current-price-modifier{float:right; color: var(--fpPrimary);}
div.product-body > div.product-body-interact .option-container .required{color: var(--fpPrimary); cursor: help;}
div.product-body > div.product-body-interact .option-container textarea{resize:vertical; width:100%; min-height: 50px; max-height: 250px;}
div.product-body > div.product-body-interact .product-button-container {text-align:center;margin: 10px 0px;}
div.product-body > div.product-body-interact .product-button-container > a:not(.disabled) {cursor:pointer;}
div.product-body > div.product-body-interact .product-button-container > a {width: 100%;}



.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
