/* -------------------------------------------------------------------------- */
/* -- CSS Document ---------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
@charset "utf-8";

:root {
	--highlight-color: 	#faf871;
	--margin-block: 	60px;
	--margin-exterior: 	30px;
	--margin-interior:  15px;
	--margin-element: 	5px;
}

/* -------------------------------------------------------------------------- */
/* -- INCLUDE THE ICON FONT ------------------------------------------------- */
@font-face {
	font-family: 	'icon';
	src: 			url('/includes/font/icon.eot?52305279');
	src:			url('/includes/font/icon.eot?52305279#iefix') format('embedded-opentype'),
					url('/includes/font/icon.woff2?52305279') format('woff2'),
					url('/includes/font/icon.woff?52305279') format('woff'),
					url('/includes/font/icon.ttf?52305279') format('truetype'),
					url('/includes/font/icon.svg?52305279#iconfont') format('svg');
	font-weight: 	normal;
	font-style: 	normal;
}

/* -------------------------------------------------------------------------- */
/* -- ELEMENT RESET --------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 			0;
  padding: 			0;
  border:			0;
  font-size: 		100%;
  font: 			inherit;
  vertical-align: 	baseline;
}

/* -------------------------------------------------------------------------- */
/* -- DEFAULTS -------------------------------------------------------------- */
* {
	-webkit-tap-highlight-color:	rgba(0, 0, 0, 0);
	-webkit-font-smoothing:			antialiased;
	box-sizing: 					border-box;
}

html {
	width: 				100%;
	height: 			100%;
	font: 				normal 18px/28px 'Kameron', serif;
}

body {
	width: 				100%;
	height: 			100%;
	background-color: 	#000;
	color: 				#FFF;
}

a {
	outline: 			none;
}

a:hover {

}

img {
	display: 			block;
	margin: 			0;
	max-width: 			100%;
	height: 			auto;
	border: 			0;
	padding: 			0;
}

h1 {
	margin: 			0px;
	font: 				bold 3.6rem/4.0rem 'Kameron', serif;
	color: 				var(--highlight-color);
}

h2 {
	margin: 			20px 0px;
	font: 				bold 2.0rem/2.8rem 'Kameron', serif;
	color: 				var(--highlight-color);
}

h3 {
	margin: 			10px 0px;
	font: 				bold 1.2rem/1.8rem 'Kameron', serif;
	color: 				var(--highlight-color);
}

strong {
	font-weight: 		700;
}

/* -- ICONS ----------------------------------------------------------------- */
[class^="icon-"]:before, [class*=" icon-"]:before {
	font-family: 				"icon";
	font-style: 				normal;
	font-weight: 				normal;
	speak: 						none;
	display: 					inline-block;
	text-decoration: 			inherit;
	width: 						1em;
	margin-right: 				.2em;
	text-align: 				center;
	font-variant: 				normal;
	text-transform: 			none;
	line-height: 				1em;
	margin-left: 				.2em;
	-webkit-font-smoothing: 	antialiased;
	-moz-osx-font-smoothing: 	grayscale;
}


.icon-youtube:before { content: '\f16a'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-spotify:before { content: '\f1bc'; } /* '' */
.icon-facebook:before { content: '\f230'; } /* '' */
.icon-twitter:before { content: '\f304'; } /* '' */


/* -- HEADER ---------------------------------------------------------------- */
header {
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	space-between;
	align-items: 		flex-start;
	border-bottom: 		1px solid #111;
	background-image:	url('/images/site/background.jpg');
    background-repeat:	no-repeat;
    background-size:	cover;
	padding: 			var(--margin-interior);
}

.logo {
	flex: 				0 0 50%;
	text-align:			left;
}

.menu-social {
	flex: 				0 0 50%;
	display: 			flex;
	justify-content: 	end;
	align-items: 		center;
}

/* -- NAV ------------------------------------------------------------------- */
nav a {
	display: 			inline-block;
	border: 			2px solid #fff;
	border-radius: 		3px;
	background: 		none;
	padding: 			0 var(--margin-interior);
	font-size: 			1.2rem;
	line-height: 		30px;
	color: 				#fff;
	text-decoration:  	none;
}

nav a:hover {
	border: 			2px solid var(--highlight-color);
	background: 		none;
	color: 				var(--highlight-color);
}

nav a img {
	display: 			inline-block;
	vertical-align:		middle;
	margin-right: 		5px;
	height: 			28px;
	width: 				auto;
}

/* -- SOCIAL MEDIA ---------------------------------------------------------- */
.social-media {

}

.social-media a {
	vertical-align: 	middle;
	display: 			inline-block;
	margin-left: 		0px;
	color: 				#FFF;
	font-size: 			30px;
	text-shadow: 		1px 1px 5px rgba(0,0,0,0.6);
}

.social-media a:hover {
	color: 				var(--highlight-color);
}

.introduction {
	flex: 				0 0 100%;
	margin: 			120px 0px;
	text-align:			center;
}

.introduction h1 {
	margin-bottom: 		var(--margin-block);
	text-shadow: 		1px 1px 5px rgba(0,0,0,0.6);
}


/* -- SECTION LAYOUT -------------------------------------------------------- */
section {
	margin: 			var(--margin-block) auto;
	max-width: 			1056px;
	padding: 			var(--margin-interior);
}

section p {
	text-align:			justify;
}

.events img {
	margin: 			0px auto;
}

/* -- PRODUCTS -------------------------------------------------------------- */
.products {
	display: 			flex;
	justify-content: 	space-between;
	align-items: 		flex-start;
	flex-wrap: 			wrap;
}

.product {
	margin-bottom: 		var(--margin-block);
	flex: 				0 0 48%;
}

.product-form select {
	border: 			0px;
	border-radius: 		3px;
	background-color: 	#272727;
	padding: 			var(--margin-interior) var(--margin-element);
	color: 				#FFF;
}

.product-price {
	margin-top: 		var(--margin-interior);
	font-size: 			1.4rem;
	font-weight: 		bold;
	color: 				var(--highlight-color);
}

.product-shipping {
	margin-top: 		var(--margin-interior);
	font-size: 			1.2rem;
}

.product-disclaimer {
	margin-top: 		var(--margin-interior);
	font-style: 		italic;
}

.table-cart {
	width: 				100%;
	border: 			1px solid #333;
	border-collapse: 	collapse;
}

.table-cart th {
	background-color: 	#666;
	padding: 			var(--margin-element);
}

.table-cart td {
	border: 			1px solid #333;
	padding: 			var(--margin-element);
}

.cart-quan {
	text-align: 		center;
}

.cart-price {
	text-align:			right;
}

.checkout {
	margin: 			var(--margin-interior) 0;
	text-align:			right;
}

/* -- SERVICES GRID --------------------------------------------------------- */
.grid-services {
	list-style-type: 	none;
	display: 			flex;
	flex-wrap: 			wrap;
	justify-content: 	space-around;
	margin: 			0;
	padding: 			0;
}

.grid-services li {
	flex: 				0 0 33%;
	margin: 			3px 1px;
	padding:			var(--margin-exterior) var(--margin-interior);
	background-color: 	#c9c857;
	text-align:			center;
}

.grid-services li.background-m {
	background-color: 	#dcdb64;
}

.grid-services li.background-l {
	background-color: 	#ebea6b;
}

.grid-services li.background-e {
	background-color: 	#faf971;
}

.grid-services li h3 {
	color: 				#000;
}

/* -- ARTICLES -------------------------------------------------------------- */
.article-detail-body {
	margin: 			var(--margin-interior) 0;
}

.article-grid {
	display: 				grid;
  	grid-template-columns: 	auto auto auto;
	gap: 					10px;
	margin: 				10px 0 0 0;
}

.article-entry a {
	text-decoration: 		none;
}


/* -- BUTTONS --------------------------------------------------------------- */
.button {
	display: 			inline-block;
	border: 			0px;
	border-radius: 		3px;
	background-color: 	var(--highlight-color);
	padding: 			var(--margin-interior) var(--margin-exterior);
	color: 				#000;
	font-weight: 		bold;
	text-align: 		center;
	text-decoration: 	none;
	text-transform: 	uppercase;
	cursor: 			pointer;
	box-shadow: 		1px 1px 5px rgba(0,0,0,0.6);
}

.button:hover {
	background-color: 	#333;
	color: 				#FFF;
}




/* -- CONTACT FORM ---------------------------------------------------------- */
.form-contact p {
	display: 			flex;
	justify-content: 	space-between;
	flex-wrap: 			wrap;
	margin-bottom: 		var(--margin-interior);
}

.form-contact p input, .form-contact select {
	flex: 				0 0 33%;
	border: 			0px;
	border-radius: 		3px;
	background-color: 	#272727;
	padding: 			var(--margin-interior) var(--margin-element);
	color: 				#FFF;
}

.form-contact p textarea {
	flex: 				0 0 100%;
	height: 			80px;
	border: 			0px;
	border-radius: 		3px;
	background-color: 	#272727;
	padding: 			var(--margin-interior) var(--margin-element);
	color: 				#FFF;
}

.form-contact p input[type=submit] {
	width: 				auto;
	background-color: 	#eeeeee;
	padding: 			7px 10px;
	cursor: 			pointer;
}

.form-required {
	color: 				#330000;
}


/* -- CENTERED FORM --------------------------------------------------------- */
.form-centered {
	margin: 			var(--margin-exterior) auto;
}

.form-centered p {
	margin-bottom: 		var(--margin-interior);
}

.form-centered p label {
	display: 			block;
	margin-bottom: 		var(--margin-element);
	text-align:			left;
}

.form-centered p input, .form-centered p select {
	width: 				100%;
	border: 			0px;
	border-radius: 		3px;
	background-color: 	#272727;
	padding: 			var(--margin-interior) var(--margin-element);
	color: 				#FFF;
}

.form-centered p input[type=checkbox] {
	display: 			inline-block;
	width: 				auto;
	background-color: 	#eeeeee;
}

.form-centered p input[type=submit] {
	width: 				auto;
	background-color: 	#eeeeee;
	padding: 			7px 10px;
	cursor: 			pointer;
}


/* -- MESSAGE BOX ----------------------------------------------------------- */
.msg {
	margin: 			20px 0px;
	border: 			1px solid #666;
	border-radius: 		5px;
	background-color: 	#999;
	padding: 			20px;
	font-weight: 		bold;
	font-size: 			1.2rem;
	color: 				#fff;
}

.msg-success {
	border-color: 		#009900;
	background-color: 	#006600;
}

.msg-error {
	border-color: 		#990000;
	background-color: 	#660000;
}

/* -- EVENT PHOTO GALLERY --------------------------------------------------- */
.event-images ul {
    list-style-type:    none;
    display:            flex;
    flex-wrap:          wrap;
    justify-content:    space-around;
}

.event-images ul li {
    flex:               0 1 auto;
    margin-bottom:      2rem;
    text-align:         center;
}

.event-images ul li img {
    margin-bottom:      0.5rem;
}

/* -------------------------------------------------------------------------- */
/* -- GALLERY --------------------------------------------------------------- */
.overlay-window {
    position:               fixed;
    top:                    0;
    left:                   0;
    z-index:                4001;
    width:                  100%;
    height:                 100%;
    background:             rgba(0,0,0,0.7);
    display:                none;
    justify-content:        center;
    align-items:            center;
}

.overlay-launched {
	display: 			    flex;
}

.overlay-close {
    position:               absolute;
    top:                    1rem;
    right:                  1rem;
    z-index:                4002;
    border:                 0;
    background-color:       transparent;
    font-size:              3rem;
    color:                  #FFF;
    cursor:                 pointer;
}

.overlay-arrow {
    position:               absolute;
    top:                    calc(50% - 1.5rem);
    z-index:                4002;
    border:                 0;
    background-color:       transparent;
    font-size:              3rem;
    color:                  #FFF;
    cursor:                 pointer;
}

.overlay-prev {
    left:                   1rem;
}

.overlay-next {
    right:                  1rem;
}

.gallery-overlay {
    max-width:              80vw;
    transform:              scale(0.1);
    transition:             transform 250ms ease-in-out;

}

.overlay-loading {
    width:                  100px;
    height:                 100px;
    border-radius:          10px;
    background-color:       #000;
    text-align:             center;
    line-height:            100px;
    color:                  #FFF;
    font-size:              4rem;
}

.gallery-overlay-show {
    transform:              scale(1);
}

.gallery-overlay-slide-l {
    transform:              translateX(100vw);
}

.gallery-overlay-slide-l {
    transform:              translateX(-100vw);
}

.gallery-overlay img {
    display:                block;
    margin:                 0px auto;
    max-height:             90vh;
    height:                 auto;
}

.gallery-overlay p {
    margin:                 0px;
    background:             rgba(0,0,0,0.8);
    max-width:              90vw;
    padding:                16px;
    color:                  #fff;
}

/* -------------------------------------------------------------------------- */
/* -- RADIO PAGE ------------------------------------------------------------ */
.radio-row {
	display: 			flex;
	justify-content: 	space-between;
}

.radio-col {
	flex-basis: 		calc(50% - 30px);
}



.radio-col-alt {
	text-align:			center;
}

.radio-logos {
    display: 			flex;
    flex-wrap: 			wrap;
    justify-content: 	space-between;
    align-items: 		center;
}

.radio-logos img {
    display: 			block;
    max-width: 			100%;
    height: 			auto;
}

.radio-col p {
	margin-bottom: 		var(--margin-interior);
	text-align: 		left;
}

.radio-col p a {
	color: 				var(--highlight-color);
}


/* -- FOOTER ---------------------------------------------------------------- */
footer {
	border-top: 		1px solid #111;
	background-image:	url('/images/site/background.jpg');
    background-repeat:	no-repeat;
    background-size:	cover;
	padding: 			var(--margin-block);
	text-align:			center;
	color: 				#FFF;
}

footer a {
	color: 				#FFF;
}


/* -------------------------------------------------------------------------- */
/* -- TABLET LANDSCAPE ------------------------------------------------------ */
@media only screen and (max-width: 1069px) {


}

/* -------------------------------------------------------------------------- */
/* -- TABLET PORTRAIT ------------------------------------------------------- */
@media only screen and (max-width: 768px) {

	.form-contact p input, .form-contact p select {
		margin-bottom: 		var(--margin-interior);
		flex: 				0 0 100%;
	}

}

/* -------------------------------------------------------------------------- */
/* -- MOBILE ---------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

	:root {
		--margin-block: 	30px;
		--margin-exterior: 	15px;
		--margin-interior:  10px;
	}

	html {
		font: 				normal 12px/16px 'Kameron', serif;
	}

	h1 {
		margin: 			0px;
		font: 				bold 2.4rem/3.0rem 'Kameron', serif;
		color: 				var(--highlight-color);
	}

	.logo {
		flex: 				0 0 100%;
		text-align:			center;
	}

	/* -- SOCIAL MEDIA ---------------------------------------------------------- */
	.menu-social {
		display: 			block;
		margin-top: 		var(--margin-interior);
		flex: 				0 0 100%;
		text-align:			center;
	}

	nav a {
		display: 			inline-block;
		margin: 			0px 0px var(--margin-interior) auto;
		min-width: 			100px;
		font-size: 			1.4rem;
	}

	.grid-services {
		display: 			block;
	}

	.grid-services li {
		flex: 				none;
	}

	/* -- RADIO PAGE -------------------------------------------------------- */
	.radio-row {
		flex-direction:     column-reverse;
	}

	.radio-col {
		padding: 			0px 10px;
	}

}