@CHARSET "ISO-8859-1";

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* CLEARFIX */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

body{

}

h1{
	margin:0px;
	padding:0px;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}

#main{
	position:relative;
}

#thanksmessage{
	padding-top:50px;
	width:750px;
	padding-left:100px;
	padding-right:100px;
	height:401px;
	color:#999999;
	margin-left:auto;
	margin-right:auto;
	background:#e7e6e6;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-decoration:none;
	font-size:14px;
}

#thanksmessage a{
	color:#003399;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-decoration:none;
	font-size:14px;
}

#thanksmessage a:hover{
	color:#003399;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	text-decoration:underline;
	font-size:14px;
}

/* MIDBAR */
#midbar{
	
	border-top: 1px #e7e6e6 solid;
	border-bottom: 1px #e7e6e6 solid;
	background:#e7e6e6;
	min-height:200px;
	width:100%;
}

@media screen and (min-width:400px){
	#midbar{
		min-height:275px
	}
}

@media screen and (min-width:560px){
	#midbar{
		min-height:340px
	}
}

@media screen and (min-width:650px){
	#midbar{
		min-height:360px
	}
}

@media screen and (min-width:750px){
	#midbar{
		min-height:none;
		height:401px;
	}
}
/* END MIDBAR */

.about-page #midbar{
	margin-bottom:175px;
}

#logo{
	display:block;
	position:relative;
	width:126px;
	height:79px;
	margin-top:35px;
	margin-bottom:22px;
	margin-left:auto;
	margin-right:auto;
	background:#FFFFFF;
}

#nav a.mobile-nav-button{
	background-image: url('../img/mobile-nav-button.png') !important;
	background-position: center center !important;
	background-size: 40px 40px !important;
	border:2px solid #ccc;
	border-radius:4px;
	display:block;
	width:40px !important;
	height:40px !important;
	position:absolute;
	right:5px;
	top:5px;
	cursor: pointer;
}

#nav{
	display:block;
	position:relative;
	text-align:center;
	width:100%;
	max-width:800px;
	margin: 0 auto 5px auto;

	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#444444;
	max-height:50px;
	min-height:50px;
	transition: max-height 1s;
	overflow:hidden;
}

#nav.open{
	max-height:300px;
}

#nav span,#nav a{

	padding:3px 5px;
}

#nav span{
	color: #fff;
	background: #26a8a4;
}

#nav a{
	display:none;
}

#nav.open a{
	display:block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#999999;
	text-decoration:none;
	width:100%;
	text-align:center;
}

#nav a:hover{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color:#fff;
	background: #26a8a4;
	text-decoration:underline;
}

#copyright{
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	color:#999999;
	font-size:9px;
}

#addthis{
	display:block;
	text-align:center;
	width:85px;
	height:20px;
	margin-top:40px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
}

/* SLIDE SHOW */
.slideshow{
	position:relative;
	vertical-align: center;
	text-align: center;
	max-width:750px;
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	display:none;
}

.centerme{
	max-width:100%;
}

@media screen and (min-width:750px){
	.slideshow{
		height:401px;
	}
}

/* END SLIDE SHOW */

/** ABOUT ****************************************************************/
	
#about{
	position:relative;
	width:100%;
	max-width:720px;
	display:block;
	padding:15px;
	margin:0 auto;
	background: #FFFFFF;
}

@media screen and (min-width:750px){
	#about{
		height:530px;
	}
}

/* END ABOUT */

/* AVATAR */
#avatar{
	display:block;
	float:none;
	margin: 0 auto;
}

@media screen and (min-width:750px){
	#avatar{
		display:block;
		width:25%;
		float:left;
	}
}

/* END AVATAR */

/* BIO */ 
#bio{
	float:none;
	width:100%;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}


#bio a{
	color:#3399cc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:none;
}

#bio a:hover{
	color:#44AADD;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:underline;
}

@media screen and (min-width:750px){
	#bio{
		width:45%;
		display:block;
		float:left;
		margin-left:15px;
		margin-top:10px;
	}
}
/* END BIO */

#whatido{
	display:block;
	clear:both;
	width:490px;
	color:#999999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

#whatido h1{
	margin:0px;
	padding:0px;
	color:#333333;
	text-transform:uppercase;
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
}
/* SIDEBAR */
#sidebar{
	display:block;
	clear:both;
	float:none;
	color:#999999;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

#sidebar h1{
	margin:0px;
	padding:0px;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	font-size:10px;
}

#sidebar h1 a{
	margin:0px;
	padding:0px;
	color:#3399cc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:none;
	font-weight:normal;
}

#sidebar h1 a:hover{
	margin:0px;
	padding:0px;
	color:#3399cc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:underline;
	font-weight:normal;
}

#sidebar a{
	color:#3399cc;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:none;
}

#sidebar a:hover{
	color:#44AADD;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-decoration:underline;
}

#sidebar a.client-link{
	color:#999999;
}

@media screen and (min-width:750px){
	#sidebar{
		clear:none;
		position:absolute;
		width:180px;
		right:15px;
		top:15px;
		height:370px;
	}	
}
/* END SIDEBAR*/

/* BIO - MORE MODAL */
#bio-more{
	display:none;
}


#bio-more-content{
	position:relative;
	background:#FFFFFF;
	border:1px #999999 solid;
	width:100%;
	max-width:1000px;
	padding:15px;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

/* END BIO - MORE MODAL*/

.modal-close-link{
	position:absolute;
	top:1px;
	right:5px;
	color:#777777;
	font-family:Arial, Helvetica, sans-serif;
	font-size:19px;
	text-decoration: none;
}

#contact-modal{
	display:none;
}

#contact-modal-content{
	position:relative;
	background:#FFFFFF;
	border:1px #999999 solid;
	width:750px;
	padding:15px;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

#contact-modal-content textarea{
	width:650px;
	height:100px;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background:#FFFFFF;
	border:1px solid #999999;
	padding-left:10px;
	padding-right:10px;
}

#contact-modal-content textarea:focus{
	width:650px;
	height:100px;
	color:#777777;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background:#99EEFF;
	border:1px solid #333333;
	padding-left:10px;
	padding-right:10px;
}

#contact-modal-content input{
	width:200px;
	height:18px;
	color:#333333;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background:#FFFFFF;
	border:1px solid #999999;
	padding-left:10px;
	padding-right:10px;
}

#contact-modal-content input:focus{
	width:200px;
	height:18px;
	color:#777777;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	background:#99EEFF;
	border:1px solid #333333;
	padding-left:10px;
	padding-right:10px;
}

#contact-modal-content input[type="submit"]{
	margin-top:15px;
	width:140px;
	height:28px;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-transform:uppercase;
	background:#3399cc;
	border:1px solid #999999;
}

#contact-modal-content input[type="submit"]:hover{
	margin-top:15px;
	width:140px;
	height:28px;
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	text-transform:uppercase;
	background:#55BBEE;
	border:1px solid #333333;
}

/** SHOWCASE *******************************************/
#showcase{
	position:relative;
	width:100%;
	overflow:hidden;
	min-height:401px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	margin-left:auto;
	margin-right:auto;
}
#showcase a.prev,#showcase a.next{
	background-repeat:no-repeat;
	background-position: 0px 0px;
	background-size: 60px 60px;
	position:absolute;
	cursor:pointer;
	width:60px;
	height:60px;
	top:50%;
	margin-top:-30px;
	opacity:0.5;
}

#showcase a.prev{
	left:0px;
	background-image:url('../img/lt-arrow.png');
}

#showcase a.next{
	right:0px;
	background-image:url('../img/rt-arrow.png');
}

#showcase a.prev:hover,a.next:hover{
	opacity:1.0;
}


#infobar{
	position:relative;
	width:100%;
	max-width:750px;
	height:30px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}

#infobar-buttons{
	position:absolute;
	left:0px;
	width:100%;
	max-width:750px;
	text-align:center;
	top:3px;
	text-transform:uppercase;
	font-family: Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#333333;
}

#print-modal{
	display:none;
}

#print-button {
	display:none;
	position:absolute;
	text-align:center;
	top:1px;
	left:0;
	width:100%;
	z-index:50;
}

#print-button-link:hover{

}

#print-button-link{
	display:block;
	max-width:750px;
	width:100%;
	margin:0 auto;
	background-image:url('../img/transquoise.png');
	font-family: Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:bold;
	letter-spacing:3px;
	color:#0d6966;
	padding-left:5px;
	padding-right:5px;
	border:1px solid #62d2cf;
	cursor:pointer;
}

#print-button-link:hover{
	text-decoration:underline;
	color:#3a8f8c;
}

#youtube-button{
	position:absolute;
	right:0px;
	top:3px;
}

#youtube-button a{
	font-family: Arial, Helvetica, sans-serif;
	font-size:10px;
	color:#FFFFFF;
	padding-left:5px;
	padding-right:5px;
	background:#3399cc;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	cursor:pointer;
}

#youtube-button a:hover{
	background:#55DDFF;
}

#thumbsbar{
	position:relative;
	width:100%;
	max-width:750px;
	height:98px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	overflow:hidden;
}

#thumbsbar img{
	float:left;
	display:block;
	padding-left:4px;
	padding-right:4px;
	width:88px;
	height:88px;
	cursor:pointer;
}

#scroller{
	position:relative;
	height:98px;
	white-space:nowrap;
}

/* FOR MERCHANDISE PAGE */
#merchandise {
	display:block;
	max-width:1500px;
	width:100%;
	margin: 0 auto;
}

.merchandise-item{
	width:100%;
	overflow:hidden;
	display:block;
	float:left;
	margin:0;
	padding:0;
}

.merchandise-item >img{
	max-width:100%;
	width:100%;
	transform: scale(1,1);
	transition: transform 0.6s;
	z-index:0;
}

.merchandise-item >img:hover{
	transform: scale(1.05,1.05);
	z-index:20;
}

@media screen and (min-width:750px){

	#showcase{
		width:750px;
		height:401px;
	}

	#showcase a{
		-webkit-transition: opacity 0.3s ease-in-out;
		-moz-transition: opacity 0.3s ease-in-out;
		-o-transition: opacity 0.3s ease-in-out;
		transition: opacity 0.3s ease-in-out;
	}

	#showcase a.prev,#showcase a.next{
		width:375px;
		height:400px;
		background-size:auto;
		top:0px;
		opacity:0;
	}
	
	#showcase a.prev:hover,#showcase a.next:hover{
		opacity:1.0;
	}

	#showcase a.prev{
		background-position: 0px 60px;
	}

	#showcase a.next{
		left:375px;
		right:auto;
		background-position: 230px 60px;
	}

	#thumbsbar img{
		-webkit-transition: opacity 0.3s ease-in-out;
		-moz-transition: opacity 0.3s ease-in-out;
		-o-transition: opacity 0.3s ease-in-out;
		transition: opacity 0.3s ease-in-out;
		opacity:0.5;
	}

	#thumbsbar img:hover{
		opacity:1.0;
	}

	#thumbsbar img.active{
		opacity:1.0;
	}
}

@media screen and (min-width:650px){
	#merchandise{
		padding:0 2%;
	}

	.merchandise-item{
		width:50%;
	}

	#nav a.mobile-nav-button{
		display:none;
	}

	#nav{
		display:block;
		text-align:center;
		width:100%;
		max-height:none;
		max-width:800px;
		min-height:none;
		margin-bottom:10px;
		margin-left:auto;
		margin-right:auto;

		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color:#444444;
	}

	#nav a{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color:#999999;
		text-decoration:none;
		display:inline-block;
		width:auto;
	}

	#nav a:hover{
		font-family: Arial, Helvetica, sans-serif;
		font-size: 14px;
		color:#fff;
		background:#61b9b6;
		text-decoration:none;
	}
}

@media screen and (min-width:1000px){

	.merchandise-item{
		width:25%;
	}
}

@media screen and (min-width:1500px){
	#merchandise{
		width:1500px;
		padding:0 10px;
	}

	.merchandise-item{
		width:370px;
	}
}

footer{
	clear:both;
	float:none;
}