/* html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
*/
/**************************************************
	Reset - remove web browser default 
	margin and padding settings for these html tags
***************************************************/

h1, h2, h3, ul, li, p {
	margin:0;
	padding:0;
}

/**************************************************
	Site Wide definitions
***************************************************/

body{
	margin:0px;													/* margin and padding set to 0 in Body to remove "border" margins on web pages */
	padding:0px;
	background: #000000 url(../img/bgd.jpg) no-repeat top;		/* background for the entire website */
	background-size: 200%;
	font:100% verdana, arial, helvetica, sans-serif;			/* base font for the entire website */
	font-size:18px;												/* base font size for the entire website. Default set to 12px for Arial typeface */
	color:white;												/* base text color for the entire website */
	text-align:center;
}

#main-bgd {
	background: url(../img/bgd.jpg) no-repeat top;
	background-size: 200%;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
}

a, a:visited {										/* settings for links throughout the website. Navbar links defined in Navigation section */
	color:#FFD700;									/* text link color for default and visited */
	text-decoration:none;							/* remove underline from link */
}

a:hover, a:focus {											
	color:#FFFFFF;									/* text link color on rollover */
}

.clear-float{
	clear:both;
}

canvas {
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0;
	z-index: 10;
}

/***************************************************
	Main Layout Definitions
****************************************************/

#page{
	width:100%;									/* set width of website pages here. default is for 1024px wide */
}

#header{
	height: 90px;
}

#content-wrapper{
	padding:0px 0;
}

#column-main{
	padding: 20px 0 0;
	position: relative;
	z-index: 10;
}

#footer h1 {
	color: #FFFFFF;
}

#footer{
	margin-bottom: 40px;
	padding: 0px 0 20px;
	color: #8673A7;
	font-size: 12px;
	position: relative;
	z-index: 12;
}

/***************************************************
	Slider Definitions
****************************************************/
.swiper-container {
	display: flex;
/*
	width: 840px;
    height: 576px;
*/
}

.swiper-container img {
	margin-top: 20px;
	width: auto;
	height: 220px;
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

/***************************************************
	Sub Layout Definitions
****************************************************/
#headerLogo {
	float:left;
	width: 100%;
	position: absolute;
}

.phone {
	float: left;
	position: relative;
	z-index: 10;
}

.phone img {
	width: 100px;  /* 270px */
	height: auto;
	}
	
.phone {
	top:10%; /* 26px */
	left:71%; /* 71% */
}

#column-main h1 {
	text-shadow: 1px 1px 7px #000000;
}

.jukebox h1 {
	font-size: 24px;
	background:  rgba(120,40,120,.7);
	margin: 0 10px 0 8px;
	padding: 5px 0;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}

.jukebox h2 {
	font-size: 22px;
}
	
.jukebox {
	padding:10px 0px;  /* Desktop centered 1024px */
	margin:2%;
	background: rgba(50,0,75,.5);
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
}


.catalog img {
	-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
}

.showbox {
	float: left;
	margin: 8px;
	width: 160px;
	height: 160px;
	text-align: center;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
	background: rgba(50,0,75,1);
	background: -moz-linear-gradient(top, rgba(50,0,75,1) 0%, rgba(255,255,255,1) 3%, rgba(50,0,75,1) 51%, rgba(255,255,255,1) 95%, rgba(50,0,75,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(50,0,75,1)), color-stop(3%, rgba(255,255,255,1)), color-stop(51%, rgba(50,0,75,1)), color-stop(95%, rgba(255,255,255,1)), color-stop(100%, rgba(50,0,75,1)));
	background: -webkit-linear-gradient(top, rgba(50,0,75,1) 0%, rgba(255,255,255,1) 3%, rgba(50,0,75,1) 51%, rgba(255,255,255,1) 95%, rgba(50,0,75,1) 100%);
	background: -o-linear-gradient(top, rgba(50,0,75,1) 0%, rgba(255,255,255,1) 3%, rgba(50,0,75,1) 51%, rgba(255,255,255,1) 95%, rgba(50,0,75,1) 100%);
	background: -ms-linear-gradient(top, rgba(50,0,75,1) 0%, rgba(255,255,255,1) 3%, rgba(50,0,75,1) 51%, rgba(255,255,255,1) 95%, rgba(50,0,75,1) 100%);
	background: linear-gradient(to bottom, rgba(50,0,75,1) 0%, rgba(255,255,255,1) 3%, rgba(50,0,75,1) 51%, rgba(255,255,255,1) 95%, rgba(50,0,75,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32004b', endColorstr='#32004b', GradientType=0 );	
}

.showbox img {
	margin: 10px;
	width: 140px;
	height: 140px;
}

a.showbox {

}

a.showbox:hover {
	background: #FFFFFF;
}

/*************************************************
	Positioning Classes for Photos
**************************************************/

.floatRight {
	float:right;
}

.photo-topleft {
	float:left;
	margin:3px 25px 10px 0;
}

.photo-topright {
	float:right;
	margin:3px 0px 10px 25px;
}

/*************************************************
	Main Navigation
**************************************************/

#navbar {
	list-style:none;								/* turn off bullets for <ul> */
	background:;
	z-index: 10;
	position: relative;
	padding-top: 300px;
	font-size: 30px;
}

#navbar li {
	display:inline;									/* display:inline makes <li>s horizontal (horizontal navbar setting) */
	color:#FFB900;									/* vertical bar colors */
}

#navbar li a {
	text-decoration:none;							/* remove underline from text links */
	color: #fff;
	font-weight: bold;
	text-shadow: 1px 1px 7px #000000;
}

#navbar li a:hover, li a:focus {
	color:#FFB900;
}

#navbar li a:active {
	color: #FFCC00;
}

#navbar img {
	margin-bottom:-5px;								/* line up social media icons with rest of nav bar */
}

/*************************************************
	Secondary Navigation
**************************************************/

#navbar2 {
	list-style:none;
}

#navbar2 li {
}

#navbar2 li a {
	text-decoration:none;
	color: #CC0000;
}

#navbar2 li a:hover, li a:focus {
	color: #0000CC;
}


/*************************************************
	Smartphone horizontal Viewport
**************************************************/

@media screen and (orientation:landscape) and (max-device-width: 736px) {

	#header{
		height: 170px;
	}

	.phone img {
		width: 200px;  /* 270px */
		height: auto;
		}

	.phone {
		top:10%; /* 26px */
		left:68%; /* 71% */
	}

	#column-main{
		padding: 10px 0 0;
	}

	.swiper-container img {
		margin-top: 20px;
		width: auto;
		height: 360px;
		}

	.jukebox h1 {
		font-size: 30px;
		margin: 0 18px 0 8px;
	}

	.jukebox h2 {
		font-size: 26px;
	}

	.jukebox {
		padding-left:10px;  /* Desktop centered 1024px */
	}

	.showbox {
		float: left;
		margin: 8px;
		width: 190px;
		height: 190px;
	}

	.showbox img {
		margin: 10px;
		width: 170px;
		height: 170px;
	}	
}


/*************************************************
	Desktop and Tablet Viewport Definitions
**************************************************/

@media screen and (min-device-width: 737px) {
	
	body {
			background-attachment: fixed;		/* background for the entire website */
	}

	#page {
		background: url(../img/bgd-page.png) no-repeat top;
		width:1024px;									/* set width of website pages here. default is for 1024px wide */
		margin:0px auto;								/* center website with auto margin for left and right */
		-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
		-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
		box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
	}

	#header{
		height: 240px;
	}

	#headerLogo {
		width: 1024px;
	}

	.phone img {
		width: 270px;  /* 270px */
		height: auto;
		}

	.phone {
		top: 26px; /* 26px */
		left:732px; /* 71% */
	}

	.swiper-container {
		max-width: 840px;
		height: 576px;
	}

	.swiper-container img {
		margin-top: 20px;
		width: auto;
		height: 533px;
		}

	.jukebox h1 {
		font-size: 36px;
		margin: 0 20px 0 8px;
	}

	.jukebox h2 {
		font-size: 27px;
	}

	.jukebox {
		padding:10px 0px 10px 12px;  /* Desktop centered 1024px */
	}

	.showbox {
		margin: 8px;
		width: 224px;
		height: 224px;
	}

	.showbox img {
		margin: 12px;
		width: 200px;
		height: 200px;
	}

}