// globally available shortcut classes & objects

.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

// 

.absolute {
	position: absolute;
	top: 0px;
	left: 0px;
}

.relative {
	position: relative;
	top: 0px;
	left: 0px;
}

.fixed {
	position: fixed;
	top: 0px;
	left: 0px;
}

.inline-block {
	position: relative;
	display: inline-block;
	top: 0px;
	left: 0px;
}

.hidden, .invisible {
	visibility: hidden !important;
	opacity: 0;
}

.display-none {
	display: none !important;
}

.coming-soon a, .disabled {
	cursor: default !important;
}

// icon font

.icon {
	@include icons;
}

// for abstractview - hides something that isn't alive yet

.uninitialized {
	visibility: hidden;
}

// global objects

.close-button {

	@extend .absolute;
	left: 100%;
	width: 129px;
	height: 48px;

	cursor: pointer;
	z-index: 2;
	background: url('../assets/img/blank.png');
	opacity: 0;

	figure {

		@extend .absolute;
		width: 54px;
		height: 48px;
		left: 67px;

		svg { overflow: visible !important; }
		svg * { fill: #fff; }
	}

	figcaption { 

		@extend .absolute;

		height: 48px;
		width: 75px;

		@include roboto-condensed;

		font-size: 15px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		line-height: 48px;
		vertical-align: middle;
		text-align: right;
		color: #fff;

		padding-right: 25px;
	}
}

.home-button {

	@extend .absolute;
	left: 100%;
	width: 129px;
	height: 48px;

	cursor: pointer;
	z-index: 2;
	background: url('../assets/img/blank.png');
	opacity: 0;

	figure {

		@extend .absolute;
		width: 44px;
		height: 48px;
		left: 0px;

		svg { overflow: visible !important; }
		svg * { fill: #fff; }
	}

	figcaption { 

		@extend .absolute;

		height: 48px;
		width: 75px;

		@include roboto-condensed;

		font-size: 15px;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		line-height: 48px;
		vertical-align: middle;
		text-align: left;
		color: #fff;

		padding-left: 63px;
	}
}

.share-block {
	
	position: absolute;
	width: 203px;
	height: 44px;
	border: 2px solid rgba(255, 255, 255, .5);
	z-index: 2;
	cursor: pointer;

	.text {
		position: absolute;
		top: 10px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto auto;
		width: 100%;
		text-align: center;
		@include roboto-condensed;
		font-size: 15px;
		color: #fff;
		text-transform: uppercase;
	}
	ul {

		@extend .absolute;

		text-align: center;
		white-space: nowrap;

		li {
			
			position: relative;
			display: inline-block;
			width: 40px;
			height: 40px;
			margin-right: -4px;
			opacity: 0;

			cursor: pointer;

			button {

				figure {

					width: inherit;
					height: inherit;
					line-height: 40px;
					text-align: center;
					vertical-align: middle;
					font-size: 18px;

					color: #fff;
				}
			}
			.whiteout {
				@extend .absolute;
				background: #fff;
				width: 100%;
				height: 100%;
				opacity: 0;
			}
		}

	} 
} // .share-block

button.ticketing-button {

	@extend .absolute;
	
	.contents {
		
		@extend .inline-block;
		height: 50px;
		white-space: nowrap;
		color: #fff;
		text-align: left;
		vertical-align: middle;
		line-height: 50px;
		background: #c7191f;
		font-size: 16px;
		text-transform: uppercase;
		overflow: hidden;

		@include play-bold;

		figcaption {
			@extend .inline-block;
			margin: 0px 12px;
		}

		figure.arrow {
			@extend .inline-block;
			margin: 0px 17px 0 11px;
			width: 17px;
			height: 12px;
		}
	}	
}

.legal, .legal-content {

	@extend .absolute;
	
	img.rating { 

	}

	figcaption { 

		width: 300px;
		margin-top: 8px;

		@include roboto-condensed;		
		-webkit-text-stroke: 0.1px;

		color: #fff;
		text-transform: uppercase;
		text-align: left;
		font-size: 9px;

		a {
			
			color: #fff;
			opacity: 1;

			-webkit-transition: color 120ms ease-out;
			   -moz-transition: color 120ms ease-out;
			   -o-transition: color 120ms ease-out;
			   transition: color 120ms ease-out;

			&:hover {
				color: #64728d;
			}
		}
	}
} // .legal

//