/* global */
body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #000; color: #FFF; font-family: 'Rama Gothic E W01 Light' }
.no-scroll { overflow: hidden }
.overlay { background-color: rgba(0, 0, 0, 0.7); display: none; height: 100vh; opacity: 0; position: fixed; transition: all 0.5s ease-in-out; width: 100vw; z-index: 998 }
	.overlay.active { display: block; opacity: 1 }
.bg-dark-trans { background-color: rgba(0, 0, 0, 0.85) }
a { text-decoration: none !important }
header { background-color: rgba(0, 0, 0, 0.85); padding: 15px 0 }
	header #header-logo { display: block; width: 600px }
	header #header-phone { font-family: 'Rama Gothic E W01 Regular'; font-size: 36px; line-height: 36px; padding-top: 10px; text-align: right }
		header #header-phone a { color: #FFF }
	header #header-social { text-align: right }
		header #header-social a { color: #FFF; font-size: 36px; margin-left: 5px }
#content { margin-top: 55vh }
#event-listings { margin: 0 0 60px 0; padding: 20px 30px 0 30px }
	#event-listings h2 { font-size: 60px; margin: 0; padding-bottom: 20px }
		#event-listings h2 strong { font-family: 'Rama Gothic E W01 Bold' }
.event-listing { padding-bottom: 30px }
	.event-listing .event-listing-img { color: #FFF; display: block; margin-bottom: 15px; overflow: hidden; position: relative }
	.event-listing .event-listing-hover { background: url('/img/layout/bg-event-listing.png') repeat-x bottom; left: 0; height: 100%; position: absolute; top: 0; width: 100% }
		.event-listing .event-listing-hover h3 { bottom: 20px; font-family: 'Rama Gothic E W01 Bold'; font-size: 44px; margin: 0; padding: 0 20px; position: absolute; text-align: center; width: 100% }
	.event-listing p { font-size: 24px; line-height: 30px; margin: 0; padding: 0 30px 10px 30px; text-align: center }
		.event-listing p.lead { font-size: 32px }
	.event-listing .btn { -moz-border-radius: 10px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-border-radius: 10px; -webkit-transition: 0.3s; background-color: #449D44; border: none; border-radius: 10px; color: #FFF; font-family: 'Rama Gothic E W01 SemiBold'; font-size: 30px; margin-right: 20px; padding: 3px 15px 2px 15px; text-transform: uppercase; transition: 0.3s }
	.event-listing .btn:hover { background-color: #347934 }
	.event-listing span { font-size: 42px; margin-left: 20px }
		.event-listing span strong { font-family: 'Rama Gothic E W01 Bold' }
#strictly-ballroom { background-image: url('/img/layout/bg-strictly-ballroom.png'); background-position: top right; background-repeat: no-repeat; background-size: contain; margin-bottom: 60px; padding: 30px }
	#strictly-ballroom h1 { font-size: 60px; margin: 0; padding-bottom: 10px }
		#strictly-ballroom h1 strong { font-family: 'Rama Gothic E W01 Bold' }
	#strictly-ballroom p { font-size: 26px; line-height: 32px; margin: 0 }
#kids-parties { background-image: url('/img/layout/bg-bb-kids.png'); background-position: top left; background-repeat: no-repeat; background-size: contain; color: #FFF; font-family: 'itc-american-typewriter-cond', serif; margin-bottom: 60px; padding: 30px }
	#kids-parties h3 { font-size: 30px; font-weight: 700; margin: 0; padding: 20px 30px; text-align: center }
	#kids-parties p { font-size: 16px; margin: 0 }
		#kids-parties #kids-parties-contact { text-align: right }
			#kids-parties #kids-parties-contact p { font-size: 22px; line-height: 26px; padding-top: 5px }
				#kids-parties #kids-parties-contact p a { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; color: #CE02B1; font-weight: 700; transition: 0.3s }
				#kids-parties #kids-parties-contact p a:hover { color: #00AEEF }
		#kids-parties #kids-parties-contact .btn { -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; background-color: #00AEEF; color: #FFF; font-size: 20px; font-weight: 700; margin-top: 15px; padding: .375rem .75rem .2rem .75rem; transition: 0.3s }
		#kids-parties #kids-parties-contact .btn:hover { background-color: #CE02B1 }
#bb-link-back { background-color: #FFF; color: #212529; margin-bottom: 60px; padding: 30px }
	#bb-link-back #bb-text { padding-left: 30px; text-align: right }
	#bb-link-back #bb-logo #bb-logo-name { -webkit-text-stroke: 0.5px #0566FF; color: #0566FF; font-family: 'Shelley Allegro'; font-size: 90px }
	#bb-link-back #bb-logo #bb-logo-strapline { font-family: 'Rama Gothic E W01 Thin'; font-size: 30px; margin-top: -40px; padding-right: 40px; text-transform: uppercase }
		#bb-link-back #bb-logo #bb-logo-strapline strong { font-family: 'Rama Gothic E W01 Bold' }
	#bb-link-back img { margin-top: 0 }
	#bb-link-back h3 { font-size: 40px; margin: 0; padding-top: 10px }
		#bb-link-back h3 strong { font-family: 'Rama Gothic E W01 Bold' }
	#bb-link-back p { font-size: 21px; line-height: 24px; margin: 0; padding: 10px 0 20px 0 }
	#bb-link-back .btn { -moz-border-radius: 7px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-border-radius: 7px; -webkit-transition: 0.3s; background-color: #CE02B1; border-radius: 7px; color: #FFF; display: inline-block; font-family: 'Rama Gothic E W01 SemiBold'; font-size: 30px; padding: 3px 15px 2px 15px; text-transform: uppercase; transition: 0.3s }
	#bb-link-back .btn:hover { background-color: #0566FF }
footer { padding: 30px }
	footer #footer-contact { padding-left: 30px }
	footer #footer-logo { display: block; width: 500px }
	footer address { font-family: 'Rama Gothic E W01 Regular'; font-size: 20px; margin: 0 }
	footer #footer-phone { font-family: 'Rama Gothic E W01 Regular'; font-size: 28px; line-height: 28px }
		footer #footer-phone a { color: #FFF }
	footer #footer-social a { color: #FFF; font-size: 36px; line-height: 36px; margin-left: 5px }
#copyright { background-color: #000; margin-bottom: 60px; padding: 10px 30px }
	#copyright a { color: #FFF }
	#copyright br { display: none }
	#copyright #copyright-designed { text-align: right }
		#copyright #copyright-designed img { padding-left: 5px; position: relative; top: -1px; width: 220px }
.breadcrumb { background-color: transparent; font-family: 'Rama Gothic E W01 Thin'; font-size: 18px; padding: 0 0 10px 0 }
	.breadcrumb a, .breadcrumb .active { color: #FFF !important }
#page-content { margin-bottom: 60px; padding: 30px }
	#page-content h1 { font-family: 'Rama Gothic E W01 Thin'; font-size: 70px }
		#page-content h1 strong { font-family: 'Rama Gothic E W01 Bold' }
	#page-content h2 { font-family: 'Rama Gothic E W01 Bold'; font-size: 40px; margin: 0 0 20px 0 }
	#page-content h4 { font-family: 'Rama Gothic E W01 Bold'; font-size: 32px; margin: 30px 0 10px 0 }
	#page-content p { font-size: 26px }
		#page-content p a { color: #0566FF }
#form-order { padding-bottom: 30px }
	#form-order h3 { color: #CE02B1; font-family: 'Rama Gothic E W01 Bold'; font-size: 36px; margin: 0 0 40px 0 }
		#form-order h3 span { color: #FFF }
	#form-order label { font-size: 26px }
	#form-order input, #form-order textarea { font-size: 20px }
	#form-order button { -moz-border-radius: 10px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-border-radius: 10px; -webkit-transition: 0.3s; background-color: #0566FF; border: none; border-radius: 10px; color: #FFF; font-family: 'Rama Gothic E W01 SemiBold'; font-size: 30px; padding: 3px 15px 2px 15px; text-transform: uppercase; transition: 0.3s }
	#form-order button:hover { background-color: #FFF; color: #0566FF }
	#form-order #qty { margin-left: -60px; width: 120px }
.checkbox-custom { -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; cursor: pointer; display: block; font-size: 13px; margin: 0 0 15px 0; padding: 3px 0 0 35px; position: relative; user-select: none }
	.checkbox-custom input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0 }
	.checkmark { -moz-border-radius: 4px; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-border-radius: 4px; -webkit-transition: 0.3s; background-color: #FFF; border: 1px solid #FFF; border-radius: 4px; height: 25px; left: 0; position: absolute; top: 9px; transition: 0.3s; width: 25px }
	.checkbox-custom:hover input ~ .checkmark { background-color: #CE02B1; border-color: #CE02B1 }
	.checkbox-custom input:checked ~ .checkmark { background-color: #0566FF; border-color: #0566FF }
	.checkbox-custom input[disabled] ~ .checkmark { background-color: #000 }
	.checkmark:after { content: ''; display: none; position: absolute }
	.checkbox-custom input:checked ~ .checkmark:after { display: block }
	.checkbox-custom .checkmark:after { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); border: solid #FFF; border-width: 0 3px 3px 0; height: 12px; left: 9px; top: 5px; transform: rotate(45deg); width: 7px }

/* backgrounds */
#bg-loading { background: url(/img/icons/loading.gif) no-repeat center; height: 100%; left: 0; margin: 0; padding: 0; position: fixed; top: 0; width: 100%; z-index: -15 }
#bg { height: 100%; left: 0; margin: 0; opacity: 0; padding: 0; position: fixed; top: 0; width: 100%; z-index: -10 }
	#bg div { background-color: #000; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100% }
		#bg div.active { opacity: 1 }

/* cookie bar */
#cookie-bar { background-color: #1E1E1E; bottom: 0; color: #FFF; height: auto; line-height: 24px; padding: 8px 0; position: fixed; text-align: center; width: 100%; z-index: 2000 }
	#cookie-bar p { font-size: 1.2em; margin: 0; padding: 0; text-shadow: none }
	#cookie-bar br { display: none }
	#cookie-bar a { border-radius: 4px; color: #FFF; display: inline-block; margin-left: 8px; padding: 0 6px; text-decoration: none }
	#cookie-bar .cb-enable { background-color: #0566FF }
	#cookie-bar .cb-policy { background-color: #E0DFDF; color: #1E1E1E }

@media (max-width: 4200px) {
	/* global */
	.container { max-width: 1560px }
}

@media (max-width: 1590px) {
	/* global */
	.container { max-width: 1140px }
	#event-listings h2 { font-size: 52px }
	.event-listing .event-listing-hover h3 { bottom: 10px; font-size: 32px }
	.event-listing p { font-size: 20px; line-height: 26px; padding: 0 25px 10px 25px }
		.event-listing p.lead { font-size: 24px }
	.event-listing .btn { font-size: 24px }
	.event-listing span { font-size: 36px }
	#strictly-ballroom h1 { font-size: 52px }
	#strictly-ballroom p { font-size: 22px; line-height: 28px }
	#kids-parties h3 { font-size: 26px }
	#kids-parties p { font-size: 14px; font-weight: 300 }
	#kids-parties #kids-parties-contact p { font-size: 17px; line-height: 21px; padding-top: 0 }
	#bb-link-back #bb-logo #bb-logo-name { font-size: 65px }
	#bb-link-back #bb-logo #bb-logo-strapline { font-size: 26px; margin-top: -30px; padding-right: 30px }
	#bb-link-back h3 { font-size: 28px }
	#bb-link-back p { font-size: 18px }
	#bb-link-back .btn { font-size: 24px }
	footer address { font-size: 18px; line-height: 22px; padding-bottom: 10px }
	footer #footer-phone { font-size: 24px; line-height: 24px }
	footer #footer-social a { font-size: 32px; line-height: 32px }
	#page-content h1 { font-size: 62px }
	#page-content h2 { font-size: 32px }
	#page-content h4 { font-size: 28px }
	#page-content p { font-size: 22px }
	#form-order h3 { font-size: 28px; margin-bottom: 30px }
	#form-order label { font-size: 22px }
	#form-order #qty { margin-left: -20px }
	.checkmark { top: 6px }
}

@media (max-width: 1199px) {
	/* global */
	.container { max-width: 960px }
	header #header-logo { width: 100% }
	header #header-phone { font-size: 32px; line-height: 32px; padding: 0 0 10px 0 }
	header #header-social a { font-size: 32px; line-height: 32px }
	#content { margin-top: 45vh }
	#event-listings h2 { font-size: 48px }
	.event-listing .event-listing-hover h3 { font-size: 32px }
	.event-listing p { font-size: 18px; line-height: 24px; padding: 0 15px 10px 15px }
		.event-listing p.lead { font-size: 22px }
	.event-listing .btn { font-size: 20px }
	.event-listing span { font-size: 32px }
	#strictly-ballroom h1 { font-size: 48px }
	#strictly-ballroom p { font-size: 18px; line-height: 24px }
	#kids-parties h3 { font-size: 22px }
	#kids-parties p { font-size: 12px }
	#kids-parties #kids-parties-contact p { font-size: 13px; line-height: 17px }
	#bb-link-back #bb-logo #bb-logo-name { font-size: 52px }
	#bb-link-back #bb-logo #bb-logo-strapline { font-size: 22px; margin-top: -20px; padding-right: 20px }
	#bb-link-back h3 { font-size: 22px }
	#bb-link-back p { font-size: 16px }
	#bb-link-back .btn { font-size: 20px }
	#page-content h1 { font-size: 58px }
	#page-content h2 { font-size: 28px }
	#page-content h4 { font-size: 25px }
	#page-content p { font-size: 20px }
	#form-order h3 { font-size: 24px }
	#form-order label { font-size: 20px }
	#form-order #qty { margin-left: -80px }
	.checkmark { top: 5px }

	/* backgrounds */
	#bg div { background-attachment: scroll !important }
}

@media (max-width: 991px) {
	/* global */
	.container { max-width: 720px }
	header { padding-bottom: 10px }
		header #header-contact { padding-top: 10px }
		header #header-phone { padding: 4px 0 0 0; text-align: center }
		header #header-social { text-align: center }
	.event-listing .event-listing-hover h3 { bottom: 10px; font-size: 36px }
	.event-listing p { font-size: 20px; line-height: 26px; padding: 0 50px 10px 50px }
		.event-listing p.lead { font-size: 24px }
	.event-listing .btn { font-size: 24px }
	.event-listing span { font-size: 36px }
	#strictly-ballroom { background-image: none }
	#kids-parties { background-image: none }
		#kids-parties h3 { font-size: 30px; padding: 20px 50px }
		#kids-parties p { font-size: 16px }
		#kids-parties #kids-parties-contact p { font-size: 22px; line-height: 26px }
	#bb-link-back #bb-text { padding: 0; text-align: center }
	#bb-link-back #bb-logo #bb-logo-name { font-size: 65px; text-align: center }
	#bb-link-back #bb-logo #bb-logo-strapline { font-size: 26px; margin-top: -30px; padding-right: 0; text-align: center }
	#bb-link-back h3 { font-size: 28px; text-align: center }
	#bb-link-back p { font-size: 18px; text-align: center }
	#bb-link-back .btn { font-size: 24px }
	footer #footer-contact { padding: 20px 0; text-align: center }
	footer address { font-size: 20px }
	footer #footer-social { text-align: center }
		footer #footer-social a { margin: 0 3px }
	#copyright { padding-bottom: 13px; text-align: center }
		#copyright #copyright-designed { padding-top: 5px; text-align: center }
	#page-content h1 { font-size: 50px }
	#form-order #qty { margin-left: -30px }
}

@media (max-width: 767px) {
	/* global */
	.container { max-width: 540px }
	.event-listing .event-listing-hover h3 { font-size: 32px }
	.event-listing p { font-size: 18px; line-height: 24px; padding: 0 15px 10px 15px }
		.event-listing p.lead { font-size: 22px }
	.event-listing .btn { font-size: 20px }
	.event-listing span { font-size: 32px }
	#strictly-ballroom h1 { font-size: 42px }
	#kids-parties p { text-align: center }
	#kids-parties #kids-parties-contact { padding-top: 20px; text-align: center }
	#bb-link-back #bb-logo #bb-logo-name { font-size: 52px }
	#bb-link-back #bb-logo #bb-logo-strapline { font-size: 22px; margin-top: -20px }
	#bb-link-back h3 { font-size: 22px }
	#bb-link-back p { font-size: 16px }
	#bb-link-back .btn { font-size: 20px }
	#copyright span { display: none }
	#copyright br { display: inline }
	#copyright #copyright-designed { padding-top: 8px }
	.breadcrumb { display: none }
	#page-content h2 { font-size: 34px }
	#page-content h4 { font-size: 27px }
}

@media (max-width: 575px) {
	/* global */
	.container { max-width: 100% }
	header #header-social a { margin: 0 3px }
	#content { margin-top: 40vh }
	#event-listings { padding: 10px 15px 0 15px }
	#strictly-ballroom { padding: 15px }
		#strictly-ballroom h1 { font-size: 38px }
	#kids-parties { padding: 15px 15px 30px 15px }
		#kids-parties h3 { font-size: 26px; padding: 20px 0 }
		#kids-parties p { font-size: 16px }
		#kids-parties #kids-parties-contact p { font-size: 22px; line-height: 26px }
	#bb-link-back { padding: 15px }
		#bb-link-back #bb-logo #bb-logo-name { font-size: 44px }
		#bb-link-back #bb-logo #bb-logo-strapline { font-size: 20px; margin-top: -20px; padding: 0 }
		#bb-link-back img { margin-bottom: 15px }
		#bb-link-back h3 { line-height: 26px; padding: 15px 0 10px 0 }
		#bb-link-back p { font-size: 21px; line-height: 24px }
		#bb-link-back .btn { font-size: 26px }
	footer { padding: 25px 15px }
	#page-content { padding: 15px }
		#page-content h1 { font-size: 44px }
	#form-order #qty { margin-left: 0; width: 100% }

	/* cookie bar */
	#cookie-bar br { display: inline }
}

@media (max-width: 374px) {
	/* global */
	header #header-phone { font-size: 26px; line-height: 26px }
	header #header-social a { font-size: 26px; line-height: 26px }
	#bb-link-back #bb-logo #bb-logo-name { font-size: 36px }
	#bb-link-back #bb-logo #bb-logo-strapline { font-size: 17px; margin-top: -17px }
	#bb-link-back h3 { line-height: 24px }
	#bb-link-back p { font-size: 18px; line-height: 21px }
	#bb-link-back .btn { font-size: 24px }
}