/*
Description:  Empire Bar
Author:       Pont Media (TJ)
Version:      1.0

THEME COLOURS
======================================================

Red       #d12124
Dark Red  #b4191d

*/


/*
BASE STYLES
======================================================
*/

html, body {
	-webkit-font-smoothing: antialiased;
}

body {
	position: relative;
	font-family: Lato, Helvetica, Arial, sans-serif;
	font-weight: 300;
	color: #fff;
	font-size: 22px;
	line-height: 1.55;
	background-color: #000;
}

div, section {
	position: relative;
}

#lightbox,
#lightbox div {
	position: static;
}

h1 { font-size: 34px; color: #fff; }
h2 { font-size: 60px; color: #fff; }
h3 { font-size: 36px; color: #d12124; }
h4 { font-size: 22px; color: #d12124; }
h5 { font-size: 18px; color: #d12124; }

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	text-transform: uppercase;
}

h1, h3, h4, h5 {
	font-weight: 400;
}

h2 {
	font-weight: 300;
}

h4, h5, h6 {
	line-height: 1.55;
}

a {
	font-weight: 400;
	color: #fff;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: #d12124;
	text-decoration: none;
}

b, strong {
	font-weight: 700;
}

u {
	text-decoration: none;  
}

section img {
	max-width: 100%;
	height: auto;
}


/*
HEADER
======================================================
*/

header {
	background-color: #000;
	-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.4);
	-moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.4);
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.4);
	z-index: 999;
}

/*
NAVIGATION
======================================================
*/

nav {
	text-align: center;
}

nav ul {
	margin: 0;
	padding: 0;
}

nav li {
	display: inline-block !important;
}

nav a {
	display: block;
	padding: 0 20px !important;
	font-size: 16px;
	line-height: 50px;
	color: #d12124;
	text-transform: uppercase;
	text-decoration: none !important;
	background-color: transparent !important;
	z-index: 1001;
}

nav a:hover,
nav a:focus,
nav a:active,
nav .active a {
	color: #fff;
}



/*
CONTENT
======================================================
*/

section {
	margin-bottom: 40px;
	padding: 100px 0;
	overflow: hidden;
}

section.full-height {
	min-height: 100vh;
}

section#splash         { background: url(/assets/images/bg-sunrays.gif) center bottom no-repeat; }
section#intro          { background: url(/assets/images/bg-intro.jpg) center top no-repeat; }
section#events         { background: url(/assets/images/bg-events.jpg) center bottom no-repeat; }
section#functions      { background: url(/assets/images/bg-functions.jpg) center top no-repeat; }
section#booth-bookings { background: url(/assets/images/bg-booths.jpg) center top no-repeat; }
section#food           { background: url(/assets/images/bg-food.jpg) center top no-repeat; }
section#gallery        { background: url(/assets/images/bg-gallery.jpg) center top no-repeat; }
section#contact        { background-color: #ccc; }

section.bg-cover {
	-webkit-background-size: cover !important;
	background-size: cover !important;
	background-attachment: fixed !important;
}

.logo img {
	margin-top: 20vh;
	margin-bottom: 20px;
	width: 100%;
	max-width: 450px;
}

section#splash h5 {
	color: #000;
}

#geisha {
	position: absolute;
	right: 10vw;
	bottom: 0;
	width: 700px;
	height: 85vh;
	background: url(/assets/images/geisha.png) right bottom no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
}

section#intro .content-block {
	margin-top: 20vh;
}

section#functions .content-block {
	margin-top: 10vh;
}

section#booth-bookings .content-block {
	margin-top: 10vh;
}

.image-caption {
	font-size: 0.8em;
	color: #CCBBAB;
}

.content-block {
	padding: 0 5px;
}

.content-box-border {
	border-color: #fff;
	border-style: solid;
	border-width: 4px 0;
}

.content-box {
	padding: 45px;
	font-size: 18px;
}

section#splash .content-box {
	padding: 30px !important;
}

.top-content {
	font-size: 24px;
}

.link-box {
	margin: 45px -60px -20px -20px;
	background-color: #b4191d;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;
	z-index: 100;
}

.link-box-top {
	position: absolute;
	top: 0;
	right: 45px;
	width: 350px;
}

.link-box:hover,
.link-box:focus {
	margin-left: -25px;
}

.link-box-top:hover,
.link-box-top:focus {
	width: 355px;
}

.link-box:before {
	content: '';
	position: absolute;
	top: -10px;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 10px 0 0 15px;
	border-color: transparent transparent transparent #480309;
}

.link-box-top:before {
	top: auto;
	bottom: -10px;
	border-width: 0 0 10px 15px;
}

.link-box a {
	display: block;
	padding: 25px 50px 25px 35px;
	font-weight: 300;
	color: #fff;
	text-decoration: none !important;
	outline: none !important;
}

.link-box a:hover,
.link-box a:focus,
.link-box a:active {
	color: #fff;
	background-color: #d12124;
}

.event .name {
	font-weight: 700;
}

#map-canvas {
	width: 100%;
	height: 100%;
	z-index: 90;
}

#bamboo {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 530px;
	background: url(/assets/images/bamboo.png) left top no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	opacity: 0.4;
	z-index: 95;
}

#empire-building {
	position: absolute;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 600px;
	background: url(/assets/images/empire-building.png) right bottom no-repeat;
	-webkit-background-size: contain;
	background-size: contain;
	z-index: 96;
}

#bamboo, #empire-building,
#contact .container {
	pointer-events: none;
}

.content-block {
	pointer-events: all;
}


/*
MODALS
======================================================
*/

.modal-content {
	font-size: 16px;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

.modal-header,
.modal-footer {
	padding-left: 30px;
	padding-right: 20px;
	border: none;
	background-color: #f2f2f2;
}

.modal-body {
	padding: 30px;
}

.modal-body,
.modal-body a {
	color: #000;
}



/*
FOOTER
======================================================
*/

footer,
footer a {
	font-size: 13px;
	font-weight: 400;
	color: #333;
	text-transform: uppercase;
}

footer .author {
	text-align: right;
}


/*
OO & UTILITY STYLES
======================================================
*/

.btn {
	border-radius: 0;
	border: none;
}

.btn-default {
	color: #fff;
	background: #d12124;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
	color: #fff;
	background: #b4191d;
}

.nofloat {
	float: none;
}

.clear-left {
	clear: left;
}

.clear-right {
	clear: right;
}

.clear-both {
	clear: both;
}

.text-red      { color: #d12124; }
.text-red-dark { color: #b4191d; }
.text-white    { color: #fff; }
.text-black    { color: #000; }

.bg-red        { background-color: #d12124; }
.bg-red-dark   { background-color: #b4191d; }
.bg-white      { background-color: #fff; }
.bg-black      { background-color: #000; }
.bg-black-semi { background-color: #000; background-color: rgba(0,0,0,0.8); }

.static {
	position: static;
}

.block {
	display: block;
}

.fixed {
	position: fixed;
	z-index: 200;
}

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

.fw {
	width: 100%;
}

.z-top {
	z-index: 100;
}

.z-back {
	z-index: -1;
}


/* Spacing Overrides */
.p0   { padding:        0 0 0 0 !important; }
.pt0  { padding-top:    0px !important; }
.pb0  { padding-bottom: 0px !important;}
.pt5  { padding-top:    5px !important; }
.pb5  { padding-bottom: 5px !important;}
.pt10 { padding-top:    10px !important; }
.pb10 { padding-bottom: 10px !important; }
.pt20 { padding-top:    20px !important; }
.pb20 { padding-bottom: 20px !important; }
.pt30 { padding-top:    30px !important; }
.pb30 { padding-bottom: 30px !important; }
.pt40 { padding-top:    40px !important; }
.pb40 { padding-bottom: 40px !important; }
.pt50 { padding-top:    50px !important; }
.pb50 { padding-bottom: 50px !important; }
.pt60 { padding-top:    60px !important; }
.pb60 { padding-bottom: 60px !important; }

.m0   { margin:         0 0 0 0 !important; }
.mt0  { margin-top:     0px !important; }
.mb0  { margin-bottom:  0px !important; }
.mt5  { margin-top:     5px !important; }
.mb5  { margin-bottom:  5px !important; }
.ml5  { margin-left:    5px !important; }
.mr5  { margin-right:   5px !important; }
.mt10 { margin-top:     10px !important; }
.mb10 { margin-bottom:  10px !important; }
.ml10 { margin-left:    10px !important; }
.mr10 { margin-right:   10px !important; }
.mt20 { margin-top:     20px !important; }
.mb20 { margin-bottom:  20px !important; }
.ml20 { margin-left:    20px !important; }
.mr20 { margin-right:   20px !important; }
.mt30 { margin-top:     30px !important; }
.mb30 { margin-bottom:  30px !important; }
.ml30 { margin-left:    30px !important; }
.mr30 { margin-right:   30px !important; }
.mt40 { margin-top:     40px !important; }
.mb40 { margin-bottom:  40px !important; }
.ml40 { margin-left:    40px !important; }
.mr40 { margin-right:   40px !important; }
.mt50 { margin-top:     50px !important; }
.mb50 { margin-bottom:  50px !important; }
.ml50 { margin-left:    50px !important; }
.mr50 { margin-right:   50px !important; }
.mt60 { margin-top:     60px !important; }
.mb60 { margin-bottom:  60px !important; }
.ml60 { margin-left:    60px !important; }
.mr60 { margin-right:   60px !important; }


/* Collapse Bootstrap gutters */
.row.no-gutter {
	margin-left: 0;
	margin-right: 0;
}

.row.no-gutter > .col-xs-1, .row.no-gutter > .col-sm-1, .row.no-gutter > .col-md-1, .row.no-gutter > .col-lg-1,
.row.no-gutter > .col-xs-2, .row.no-gutter > .col-sm-2, .row.no-gutter > .col-md-2, .row.no-gutter > .col-lg-2,
.row.no-gutter > .col-xs-3, .row.no-gutter > .col-sm-3, .row.no-gutter > .col-md-3, .row.no-gutter > .col-lg-3,
.row.no-gutter > .col-xs-4, .row.no-gutter > .col-sm-4, .row.no-gutter > .col-md-4, .row.no-gutter > .col-lg-4,
.row.no-gutter > .col-xs-5, .row.no-gutter > .col-sm-5, .row.no-gutter > .col-md-5, .row.no-gutter > .col-lg-5,
.row.no-gutter > .col-xs-6, .row.no-gutter > .col-sm-6, .row.no-gutter > .col-md-6, .row.no-gutter > .col-lg-6,
.row.no-gutter > .col-xs-7, .row.no-gutter > .col-sm-7, .row.no-gutter > .col-md-7, .row.no-gutter > .col-lg-7,
.row.no-gutter > .col-xs-8, .row.no-gutter > .col-sm-8, .row.no-gutter > .col-md-8, .row.no-gutter > .col-lg-8,
.row.no-gutter > .col-xs-9, .row.no-gutter > .col-sm-9, .row.no-gutter > .col-md-9, .row.no-gutter > .col-lg-9,
.row.no-gutter > .col-xs-10, .row.no-gutter > .col-sm-10, .row.no-gutter > .col-md-10, .row.no-gutter > .col-lg-10,
.row.no-gutter > .col-xs-11, .row.no-gutter > .col-sm-11, .row.no-gutter > .col-md-11, .row.no-gutter > .col-lg-11,
.row.no-gutter > .col-xs-12, .row.no-gutter > .col-sm-12, .row.no-gutter > .col-md-12, .row.no-gutter > .col-lg-12 {
	padding-left: 0;
	padding-right: 0;
}


/*
RESPONSIVE / MEDIA QUERIES
======================================================
*/

@media all and (min-width: 1200px) { /* LG ONLY */

}

@media all and (min-width: 992px) and (max-width: 1199px) { /* MD ONLY */ 

}
 
@media all and (max-width: 1199px) { /* XS / SM / MD */
	#geisha {
		right: 2%;
	}
}

@media all and (max-width: 991px) { /* XS / SM */
	nav a {
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	#geisha {
		right: -123px;
	}

	section#intro {
		padding-bottom: 0;
	}

	section#intro .content-block {
		padding-top: 20px;
		padding-bottom: 140px;
		text-align: left;
	}

	.content-box {
		padding: 40px;
	}

	.link-box {
		margin: 45px -55px -20px -20px;
	}

	.link-box-top {
		position: relative;
		top: auto;
		right: auto;
		float: right;
		margin: 40px -55px 30px 0;
		width: calc(100% + 55px);
	}

	.link-box-top:hover,
	.link-box-top:focus {
		width: calc(100% + 60px);
	}

}

@media all and (max-width: 767px) { /* XS */
	body {
		font-size: 19px;
	}

	h1 { font-size: 30px; }
	h2 { font-size: 45px; }
	h3 { font-size: 28px; }

	section.full-height {
		height: auto !important;
		min-height: auto !important;
	}

	/* Override parallax settings */
	section,
	section.bg-cover {
		background-position: left top !important;
		background-attachment: scroll !important;
	}

	section#contact {
		padding: 40px 0;
		background: url(/assets/images/bg-sunrays.gif) right bottom no-repeat;
	}

	#geisha {
		right: -275px;
		height: 95%;
	}

	.logo img {
		margin-bottom: 20px;
	}

	.top-content {
		font-size: 20px;
	}

	.content-block {
		margin-top: 0 !important;
	}

	.content-box {
		padding: 30px;
		font-size: 16px;
	}

	/* Semi-transparent for mobile */
	.bg-black-semi-xs {
		background-color: rgba(0,0,0,0.8) !important;
	}

	.link-box {
		margin: 30px -45px -10px -10px;
	}

	.link-box-top {
		margin: 30px -45px 30px 0;
		width: calc(100% + 45px)
	}

	.link-box:hover,
	.link-box:focus {
		margin-left: -15px;
	}

	.link-box-top:hover,
	.link-box-top:focus {
		width: calc(100% + 50px)
	}

	footer p {
		text-align: center !important;
	}


}

@media all and (max-width: 460px) { /* Small Mobiles */

}



/*
FIXES
======================================================
*/