/*
 * Gridiculous
 *
 * A responsive grid boilerplate that takes you all the way from 1200px on down to 320px.
 *
 * created by c.bavota
 * released under GPL v2 & MIT License (http://en.wikipedia.org/wiki/MIT_License)
 *
 * September 24th, 2012
 */
 
/* =Normalize.css v2.0.1 by Nicolas Gallagher - http://necolas.github.com/normalize.css/
-------------------------------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:1.8em}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}
pre{white-space:pre-wrap;word-wrap:break-word}
q{quotes:\201C \201D \2018 \2019\2020}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-.5em}
sub{bottom:-.25em}
img{border:0}
svg:not(:root){overflow:hidden}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,html input[type=button],/* 1 */
input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
button[disabled],input[disabled]{cursor:default}
input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}
body,figure{margin:0}
legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
ul,p{list-style-type:none;
margin:0;
padding:0;
}
a{
	text-decoration:none;
}
/* =Clearfix by Nicolas Gallagher
-------------------------------------------------------------- */
.row:before,.row:after,.clearfix:before,.clearfix:after{content:'';display:table}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}



/* =fonts
-------------------------------------------------------------- */

@font-face {
    font-family: 'Kanit', sans-serif;
   
    font-weight: normal;
    font-style: normal;

}

body{
	font-family:Arial, Helvetica, sans-serif;
}

h1{
	font-family: 'Kanit', sans-serif;
	font-size:1.8em;
	margin:0;
	padding:0;
}

h2{
	font-size:1em;
	margin:0;
	padding:0;
}


.theheader{
	margin-top:20px;
}

.rowline {
	border-bottom:thin solid white;
}


.pushdown{
	margin-top:30px;
	margin-bottom:0;
}


/* =page colors
-------------------------------------------------------------- */
#homepage {
	background-color:#01cdd4;
	
}

#bio {
	background-color:#e5ba00;
	
}

#discography{
	background-color:#279b9b;
	
}

#itinerary{
	background-color:#e74e06;
	
}

#press{
	background-color:#d5e7e9;
	
}


#media{
	background-color:#f5db79;
	
}

#contact{
	background-color:#900e0e;
	
}






/* floats
-------------------------------------------------------------- */
.fl {
	float:left;
}

.fr{
	float:right;
}

/* Header
-------------------------------------------------------------- */
.line{
	border-top:thin solid white;
	height:5px;
	margin-top:2%;
	width:38.5%;
}

.logo{
	width:23%;
	
}
	


/*Menu
-------------------------------------------------------------- */

.menu{
max-width:650px;
margin:0 auto;	

}

.menu li{
	float:left;
	display:block;
	margin-left:10px;
	font-size:.9em;
	font-weight:bold;
}

.menu li a{
	color:#faebc1;
	text-decoration:none;
}

.menu li a:hover, #itinerary .menu li .newsbtn{
	color:#046568;
	text-decoration:none;
}








/* =Gridiculous
-------------------------------------------------------------- */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
body{font-size:100%;line-height:1.4}
.grid{margin:0 auto;max-width:1200px;width:100%}
img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto}
.wfull{width:100%;max-width:100%}
.w320{max-width:320px}
.w640{max-width:640px}
.w960{max-width:960px}
.row{width:100%;margin-bottom:20px}
.row .row{width:auto;margin:0 -20px}
.c1{width:8.33%}
.c2{width:16.66%}
.c3{width:25%}
.c4{width:33.33%}
.c5{width:41.66%}
.c6{width:50%}
.c7{width:58.33%}
.c8{width:66.66%}
.c9{width:75%}
.c10{width:83.33%}
.c11{width:91.66%}
.c12{width:100%}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{min-height:1px;float:left;padding-left:20px;padding-right:20px;position:relative}
.s1{margin-left:8.33%}
.s2{margin-left:16.66%}
.s3{margin-left:25%}
.s4{margin-left:33.33%}
.s5{margin-left:41.66%}
.s6{margin-left:50%}
.s7{margin-left:58.33%}
.s8{margin-left:66.66%}
.s9{margin-left:75%}
.s10{margin-left:83.33%}
.s11{margin-left:91.66%}
.end{float:right!important}


.nomargin{
	margin-bottom:0;
}

.partialmargin{
	margin-bottom:10px;
}


.border{
	border:thin solid black;
}
/*Homepage
-------------------------------------------------------------- */

.bluebox{
	background-color:#8ef0f3;
	padding:5px 15px;

}



.latestalbum{
	margin-top:20px;
}

.homecolor{
	color:#faebc1;
}

.datecolor{
	color:#084d4f;
}

.presscolor{
	color:#9c0000;
}

.title{
	text-align:center;
	color:#046568;
	
}

.info{
	color:#046568;
	font-weight:bold;
	font-size:.8em;
	margin:10px;
}

.itindate, .itinloc{
	color:#ffffff;
}

.frontitin li{
	margin-bottom:15px;
}


.buynowbox{
	margin-left:10px;
	margin-bottom:10px;
	
}

.buy{
	color:#8a1a1d;
	font-family: 'Kanit', sans-serif;
	font-size:1.4em;
	margin-top:10px;
}

.buybtn{
	background-color:#046568;
	padding:2px;
	font-family: 'Kanit', sans-serif;
	color:#faebc1;
	width:70px;
	text-align:center;
	margin-left:10px;
	margin-top:10px;
}

.buybtn a{
	color:#faebc1;
}

.buybtn a:hover{
	color:#01cdd4;
}


.radiobtn{
	background-color:#cd6a30;
	padding:1px;
	font-family: 'Kanit', sans-serif;
	color:#fff;
	width:100px;
	text-align:center;
	margin-left:10px;
	margin-top:5px;
}

.radiobtn a{
	color:#fff;
}

.radiobtn a:hover{
	color:#05636b;
}

#snmedia {
	margin-bottom:-20px;
}

/*Bio
-------------------------------------------------------------- */
.tanbox{
	background-color:#f7eab2;
	padding:40px;
	margin-top:20px;
}

.scrollbars p {
	margin-bottom:20px;
}


#bio .menu li a{
	color:#fff;
	text-decoration:none;
}

#bio .menu li a:hover, #bio .menu li .biobtn {
	color:#c66302;
	text-decoration:none;
}

/*----------------------------------------------*/

/*Press
-------------------------------------------------------------- */
.bluebox{
	background-color:#8ef0f3;
	padding:10px;
	margin-top:10px;

}

#press p, #press h1, #press h2{
	text-align:center;
}

#imgholder{
	
	max-width:830px;
	margin:0 auto;
	
}


.scrollbars p {
	margin-bottom:20px;
}


#press .menu li a{
	color:#9c0000;
	text-decoration:none;
}

#press .menu li a:hover, #press .menu li .pressbtn {
	color:#c66302;
	text-decoration:none;
}

#press .maincontent a {
	color:#084d4f;
}

#press .maincontent a:hover {
	color:#7ab3b9;
}

.pressimg{
	
	margin-right:5px;
	margin-bottom:5px;
}


/*----------------------------------------------*/

/*Discography
-------------------------------------------------------------- */

#discography {
	color:#ffffff;
}

#discography .scroll{
font-weight:bold;
color:#fff;
}

#discography a:hover{
color:#046568;
}

#discography .menu li a{
	color:#ffffff;
	text-decoration:none;
}

#discography .menu li a:hover, #discography .menu li .discbtn{
	color:#046568;
	text-decoration:none;
}

.albumtitle{
	font-family: 'Kanit', sans-serif;
	font-size:1.7em;
	text-align:center;
color:#fff;
}

#check, #gates, #heart, #horizon, #soulful, #livelearn, #groove, #tokyo, #project, #quiet, #urban, #midwest, #present, #tailor, #motown, #solo, #inventor ,#question, #rabbit, #love, #milano, #round, #advance, #beatitudes, #gumbo, #jewel, #perpetual, #because, #eta, #milanony, #yourmove, #live, #underground, #realdeal, #watch, #pointillistic, #albumyear, #sweden, #straight, #berlin, #bubba, #northsea, #tunisia, #onebyone, #korner, #gypsy, #prime, #blue, #spirit, #madrid, #balance,#carmen, #friends, #calhoun, #ennis, #nextstep, #blues, #mentors, #rattle, #rumba, #claude, #claudio, #bruno, #red, #brazil, #monk, #deedee, #bout, #peace, #grand, #ska, #jack, #hurri, #bop, #louis, #norman, #grover, #bronx, #kamal, #pride,#belden, #apprec, #bernie, #hino, #trlive, #rawls, #super1, #super2,#joew, #steve1, #steve2, #gunther, #naima, #portraits, #kiss, #be, #dark, #clarion, #persip, #savoy, #colours, #ricky {
	display:none;
	font-size:.8em;
	text-align:center;
}

.three {
	max-width:210px;
	margin:0 auto;
}

.two {
	max-width:140px;
	margin:0 auto;

}


.one {
	max-width:50px;
	margin:0 auto;

}
.buyalbum a {
color:#faebc1;
font-family: 'Kanit', sans-serif;
}

.buyalbum a:hover {
color:#fff;

}

.personnel {
margin-top:5px;
font-style:italic;
}




/*
#discography .maincontent a{
	color:white;
}

#discography .maincontent a:hover{
color:#7ab3b9;
}
*/


.albumtitle img {
	 opacity: 1.0;
    transition: opacity .30s ease-in-out;
    -moz-transition: opacity .30s ease-in-out;
    -webkit-transition: opacity .30s ease-in-out;
   
}
.albumtitle img:hover {
    opacity: 0.6;
    transition: opacity .30s ease-in-out;
    -moz-transition: opacity .30s ease-in-out;
    -webkit-transition: opacity .30s ease-in-out;
}



/*----------------------------------------------*/


/*-------------------CONTACT-------------------*/

.booking{
	text-align:center;
	font-size:.8em;
}

.context{
text-align:center;	
margin-top:30px;
}


#contact .menu li a{
	color:#fff;
	text-decoration:none;
}

#contact .menu li a:hover, #contact .menu li .contactbtn{
	color:#79d7df;
	text-decoration:none;
}



/*----------------------------------------------*/

/*-------------------MEDIA-------------------*/

#media h1, #media h2{
color: #bd5518;
}


#media .menu li a{
	color:#9c0000;
	text-decoration:none;
}

#media .menu li a:hover, #media .menu li .mediabtn{
	color:#d15b04;
	text-decoration:none;
}



/*----------------------------------------------*/


.js #thenav[role="banner"] ul {
    /* overrides the hiding of the menu */
    display: block;
  }
  .js #thenav[role="banner"] ul li {
    display: inline;
  }
  .js .theheader .menuhide {
    display: none;
 }

@media only screen and (max-width:1600px){

#contact .pushdown{
margin-top:50px;
}

#itinerary .pushdown{
margin-top:50px;
}
	
.pushdown{
	margin-top:25px;
}

}


@media only screen and (max-width:1440px){
.pushdown{
	margin-top:20px;
	
}

#bio .pushdown{
	margin-top:40px;
	
}

} 


@media only screen and (max-width:1390px){


#bio .pushdown{
	margin-top:70px;
	
}

} 



@media only screen and (max-width:1366px){
.pushdown{
	margin-top:50px;
	
}

}

@media only screen and (max-width:1330px){


#bio .pushdown{
	margin-top:100px;
	
}

} 



@media only screen and (max-width:1290px){
.pushdown{
	margin-top:90px;
	
}

.line{
	border-top:thin solid white;
	height:5px;
	margin-top:2%;
	width:35%;
}

.logo{
	width:30%;
}

}

@media only screen and (max-width:1260px){
#bio .pushdown{
	margin-top:140px;
	
}

}



@media only screen and (max-width:1190px){
.pushdown{
	margin-top:110px;
}

#bio .pushdown{
	margin-top:160px;

}

}

@media only screen and (max-width:1160px){
.pushdown{
	margin-top:130px;

}

#bio .pushdown{
	margin-top:180px;

}

}

@media only screen and (max-width:1120px){
.pushdown{
	margin-top:160px;
	
}

}


@media only screen and (max-width:1075px){
.pushdown{
	margin-top:190px;
	
}

#bio .pushdown{
	margin-top:210px;
	border:thin solid black;
}

}

@media only screen and (max-width:1030px){
.pushdown{
	margin-top:230px;
	
}

#bio .pushdown{
	margin-top:250px;
	border:thin solid black;
}

}



@media only screen and (max-width:922px){
.pushdown{
	margin-top:250px;
}

.line{
	border-top:thin solid white;
	height:5px;
	margin-top:3%;
	width:30%;
}

.logo{
	width:40%;
}

}

@media only screen and (max-width:650px){
.line{
	border-top:thin solid white;
	height:5px;
	margin-top:4%;
	width:25%;
}

.logo{
	width:50%;
}	
	

}

@media only screen and (max-width:550px){
	
	
.menu {
	width:100px;
	margin:0 auto;

}

.line{
	border-top:thin solid white;
	height:5px;
	margin-top:4%;
	width:15%;
}

.logo{
	width:70%;
}

.js .theheader .menuhide {
	content: "\2764\ ";
    display:block;
	position:absolute;
	top:-10px;
	right:20px;
	font-size:30px;
  }
  
  .js .theheader .menuhide a {
color:#fff;
  }
  
   .js .theheader .menuhide a:hover {
color:#046568;
  }

#thenav[role="banner"]  {
  width: 100%;
}
.js #thenav[role="banner"] ul {
  display: none;
}

}

@media only screen and (max-width:430px){
	
	



.line{
	border-top:thin solid white;
	height:5px;
	margin-top:6%;
	width:10%;
}

.logo{
	width:80%;
}
}
/* =Media query for 960 Screens - sets nested grids to 100%
-------------------------------------------------------------- */
@media only screen and (max-width:960px){
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12{width:100%;margin-bottom:20px}
.row .row > div:last-child{margin-bottom:0 !important}
}

/* =Media query for iPad and tablets
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 1000px), only screen and (max-device-width:1000px) and (orientation:portrait){
body{font-size:90%}
.row{margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{width:100%;margin-right:0;margin-left:0;margin-bottom:20px}

.pushdown{
	margin-top:0px;
	margin-bottom:-20px;
}



.menu{
	max-width:600px;
}

}