@charset "utf-8";
html {font-size: 62.5%; }
/*include padding etc in size*/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
header, section, footer, aside, nav, main, article, figure {display: block;} 
body {   margin:0 0 0 0; font-size: 1.5em /* bug fix */;}
.body-container {position: relative; width: 100%; max-width: 1024px; /*site width*/ margin: 0 auto; /*centre*/} 	
.img-float-right { float:right;}
.img-float-left { float:left;}
/*MAIN FLEXBOX*/
/*how should main flex work*/
.flex-columns {display: flex; flex-wrap: wrap;flex-direction:row}

.main {margin:15px 25px 25px 25px}

/*what order should boxes be in*/
.order-left {order:1;} 
.order-mid {order:2;}
.order-mid-left {order:2;}
.order-mid-right {order:3;}
.order-right {order:4;}

/*box images*/
.box-fit {max-width:100%; max-height:auto;}




/*--------------------------SKIN---------------------------------*/
body {background-color: #0a2b61; color: #444;
      line-height: 1.6; font-weight: 300;
      font-family: 'Open Sans', sans-serif;   }

.full-row { margin:0px 20px 20px 20px }

.body-container {background-color: #fff;position: relative; width: 100%; max-width: 1024px; /*site width*/ margin: 0 auto; /*centre*/box-sizing: border-box;
box-shadow: 12px 0 15px -4px #021330, -12px 0 15px -4px #021330;} 			 		  

.padded-row {padding:20px;}
.box-row {padding:10px;}
.border {border-style: solid; border-width: 10px; border-color:#0a2b61; margin:0px 20px 0px 20px; padding-bottom:10px} /*used with flex*/
.fullwidth-border {border-style: solid; border-width: 15px; border-color:#666; margin:0px 20px 0px 20px !important}/*used with stand-alone row*/
.centermobile {padding:0px !important; margin-top:0px; max-width:93%; max-height:auto;} 

/*how many default columns*/
.box2 {flex: 1; min-width: 48%;padding:10px 10px 10px 10px;}
.box3 {flex: 1; min-width: 31%;padding:10px 10px 10px 10px;}
.box4 {flex: 1; min-width: 24%;padding:10px 10px 10px 10px;}
.first2thirds {flex: 1; min-width: 66%;padding:20px 20px 20px 20px;}
.lastthird {flex: 1; min-width: 33%;padding:20px 20px 20px 0px;}
.firstthird {flex: 1; min-width: 33%;padding:20px 20px 20px 20px;}
.last2thirds {flex: 1; min-width: 66%;padding:20px 20px 20px 0px;}
/*.carousel {padding:0px !important;}*/

/*flexible logo
.logo img {  max-width:100%;max-height:100%; }
.logo  {flex: 1; min-width: 69%; }*/

/*image logo*/
.logo  {background-repeat: no-repeat;width: 100%;height: 0; padding-top: 11.85%;background-size: contain; background-image:url(../images/skin/logo-full.png); }

/*header*/
.flex-header {flex: 1; min-width:: 29%; margin: 20px 20px 0 0; display: flex; flex-wrap: wrap;flex-direction:column; max-height:169px !important}

/*contact info*/
.social-info {text-align: right; order:1; max-height:22%}
.social-info img {max-width: 40px; max-height:40px;}

.header-email {text-align: right;order:2;max-height:22%}
.email-text { font-size:24px;margin-top: 9%;color:#000;/* text colour */}

.header-tel {text-align: right;order:3; max-height:22%}
.tel { font-size:24px;margin-top: 13%;color:#000;/* text colour */}

/*SAMPLES*/	
.samples { text-align: center; }
audio {max-width: 90% !important; margin: 0 auto; display: block;}


/*footer*/
footer {color:#FFF; background-color:#0a2b61; padding: 0 20px;display:block;}
.footerlink {color: #debb30; }
.footerlink-nofollow {color: #777; }
.footerlink-privacy {color: #999; }
.footerlink-white {color: #FFF; }



/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */

p {margin: 10 0 0 0;}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {color: #0a2b61; }
a:hover {color: #debb30; }



h1, h2, h3 {
  color:#0a2b61;/* s colour */
  margin-top: 0;
  margin-bottom: 0rem;
  font-weight: 200;
  font-family: 'Open Sans', sans serif;}

h1 { font-size: 2.6rem; line-height: 1.2;  letter-spacing: 2px;}
h2 { font-size: 2rem !important; margin-bottom: 1rem !important; line-height: 1.3; letter-spacing: 0rem; }
h3 { font-size: 1.8rem; line-height: 1.3;  letter-spacing: -.1rem; }

/*GENERAL LINKS BEHAVIOUR

a:link, a:visited {color:#000; text-decoration:none}
a:hover, a:active{color:#000; text-decoration:underline}*/

a {color: #0a2b61; font-weight:bold;text-decoration:none}
a:hover { text-decoration:underline  }


/*SPECIFIC LINKS BEHAVIOUR
.navbar a:link {color:#FFF}
.navbar a:visited {color: #FFF}
.navbar a:hover {color: #FFF; text-decoration:underline}
.navbar a:active {color: #FFF}*/

/* Images
––––––––––––––––––––––––––––––––––––––––––––––––– */
.fullwidth-img {width:100%;}

.repertoire {padding:20px 20px 0px 20px}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {list-style: none; }
ol {list-style: decimal inside; }
ol, ul {padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul {margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }
li { }

/* MOBILE*/

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 3.4rem; }
  h2 { font-size: 3.4rem; }
  h3 { font-size: 3.4rem; } }

@media (max-width: 780px) {.social-info {text-align: right; order:3;}
                           .header-email {text-align: right;order:1}
						   .header-tel {text-align: right;order:2}
						   .flex-header {flex-direction:row;margin: 0 0 0 0;justify-content:space-around; flex: 1;min-width::320px;}
						   .logo-image {max-width: 99%;}
						   .tel { font-size:24px; margin-top:0% !important}
						   .email-text { font-size:24px; margin-top:0% !important}
						   .logo  {flex: 1; min-width: 99%; background-image:url(../images/skin/logo-mobile-full.png);padding-top: 22% !important; }           
						   .border {border-width: 12px; border-color:#0a2b61; margin:0px 0px 0px 0px}   
						   .repertoire {padding:0px 20px 0px 20px !important}                             
<!--@media (max-width: 1024px) { .padded-row {padding:20px;} }   for padding at edges on dark sites ---->


.centermobile {padding:15px !important; margin-top:15px; max-width:93%; max-height:auto;}    }

@media (max-width: 600px) {.tel { font-size:20px; margin-top:0% !important}
						   .email-text { font-size:24px; margin-top:0% !important}}

@media (max-width: 700px) {.box2 {min-width: 99%;   padding:10px 10px 10px 10px; }  }
@media (max-width: 690px) {.box2 {min-width: 99%;   padding:10px 10px 10px 10px}  }  
<!--ipad footer bug fix-->
@media (max-width: 700px) {.box3 {min-width: 49%;   padding:10px 10px 10px 10px; }  }
@media (max-width: 690px) {.box3 {min-width: 99%;  padding:10px 10px 10px 10px}  }

@media (max-width: 800px) {.box4 {min-width: 33.33%;padding:10px 10px 10px 10px;}}
@media (max-width: 620px) {.box4 {min-width: 49%;   padding:10px 10px 10px 10px; }  }
@media (max-width: 420px) {.box4 {min-width: 99%;   padding:10px 10px 10px 10px;}  }

@media (max-width: 690px) {.first2thirds {flex: 1; min-width: 99%;padding:20px 20px 20px 20px;} .lastthird {flex: 1; min-width: 99%;padding:0px 20px 20px 20px;}}
@media (max-width: 690px) { .firstthird {flex: 1; min-width: 99%;padding:20px 20px 20px 20px;}.last2thirds {flex: 1; min-width: 99%;padding:0px 20px 20px 20px;}}









.clearfix:before, .clearfix:after{display: table; content: " ";}
.clearfix:after{ clear: both;}