/* Tri Tones red = #ff4042      rgba 255, 64, 66 */


@font-face {
    font-family: 'Asphaltic Scratch';
    src: url('../font/asphaltic_scratch-webfont.woff2') format('woff2'),
         url('../font/asphaltic_scratch-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
  font-family: 'Roboto', Arial, sans-serif;
  background-color: #000000;
  color: #f8f8f8;
}

/*no longer includes h3, h4, h5, h6, .copyrighttext*/
h1, h2, nav, .btn-xl {
  font-family: 'Asphaltic Scratch';
  font-weight: 400 !important;
}

h2 {
  color: #f8f8f8;
  font-size: 3rem;
}

.copyrightext {
  font-size: 1rem;
}

.btn-xl {
  padding: 1.5rem 3rem;
  font-size: 2.8rem;
  font-weight: 400;
}

.bg-darkred {
  /*background-color: #000 !important;*/
  background-color: rgba(64, 0, 0, 0.7) !important;

}

.rounded-pill {
  border-radius: 5rem;
}

.navbar-custom {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgba(64, 0, 0, 0.7);
}

.navbar-custom .navbar-brand {
  font-size: 2rem;
  font-weight: 400;
}

.navbar-custom .navbar-nav .nav-item .nav-link {
  font-size: 2rem;
  font-weight: 400;
}


.ttred {
  color: #ff4042;
}

.ttaccentcolour { background-color: #c4db98; }

header.masthead {
  background-image: url('../img/masthead.jpg');
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  padding-top: calc(7rem + 72px);
  padding-bottom: 7rem;
  
 /* position: relative;
  overflow: hidden;
  padding-top: calc(7rem + 72px);
  padding-bottom: 7rem;
  background: linear-gradient(0deg, #000000 0%, #c10000 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;*/
}

h1.masthead-heading, h2.masthead-subheading {
  text-shadow: 0px 0px 8px rgba(0,0,0,0.8);
}

.carousel-caption {
  text-shadow: 0px 0px 4px rgba(0,0,0,1);
}

header.masthead .masthead-content {
  z-index: 1;
  position: relative;
}

header.masthead .masthead-content .masthead-heading {
  font-size: 7rem;
}

header.masthead .masthead-content .masthead-subheading {
  font-size: 4rem;
}


@media (min-width: 992px) {
  header.masthead {
    padding-top: calc(10rem + 55px);
    padding-bottom: 10rem;
  }
  header.masthead .masthead-content .masthead-heading {
    font-size: 10rem;
  }
  header.masthead .masthead-content .masthead-subheading {
    font-size: 6rem;
  }
}

.bg-primary {
  background-color: #ff4042 !important;
}

.btn-primary {
  background-color: #ff4042;
  border-color: #ff4042;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background-color: #c10000 !important;
  border-color: #c10000 !important;
}

.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 20, 20, 0.5);
}

.btn-secondary {
  background-color: #c13f3f;
  border-color: #c13f3f;
}

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
  background-color: #e75d5d !important;
  border-color: #e75d5d !important;
}

.btn-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 20, 20, 0.5);
}


.btn-accent {
  background-color: #c4db98;
  border-color: #c4db98;
}

.btn-accent:active, .btn-accent:focus, .btn-accent:hover {
  background-color: #a7bb81 !important;
  border-color: #a7bb81 !important;
}

.btn-accent:focus {
  box-shadow: 0 0 0 0.2rem rgba(130, 153, 87, 0.5);
}



p a:link, p a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {
    color: #ff4042;
}

p a:hover, p a:active, h3 a:hover, h3 a:active, h4 a:hover, h4 a:active, h5 a:hover, h5 a:active, h6 a:hover, h6 a:active {
    color: #f8f8f8;
}

/*a.nav-link:link, a.nav-link:visited, a.navbar-brand:link, a.navbar-brand:visited {
    color: #ffffff !important;
}

a.nav-link:hover, a.nav-link:active, a.navbar-brand:hover, a.navbar-brand:active {
    color: #ff4042 !important;
}*/



.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: rgba(64, 0, 0, 0.7);
}





.testimonial_text {
  font-size: 1em !important;
}



blockquote {
    padding-left:42px;
    border: none;
    quotes: "\201C" "\201D";
    display: inline-block;
    position: relative;
    margin-top:1rem;
}

blockquote:before { 
    content: open-quote;
/*    font-weight: bold;*/
    font-size: 5em;
    color: #ff4042;
    position: absolute;
    top:-30px;
    left: 0;
} 
/*blockquote:after { 
    content: close-quote;
    font-weight: bold;
    position:absolute;
    bottom:0;
    right: 0;
}*/



.card 
{
  background-color: transparent;
/*  border: none;*/
}

/*.card-header
{
  padding: 0;
  border: none;
}

.card-body 
{
  padding-top: 0.15rem;
}*/



.border-light {
    border-color: #5c5c5c !important;
}


[data-toggle="collapse"] .accordionarrow.fas:before {  
  content: "\f139";
}

[data-toggle="collapse"].collapsed .accordionarrow.fas:before {
  content: "\f13a";
}











.FromTVFilmShow, .MostFamousBy
{
  font-size: 0.8em;
  color: #CCCCCC;
}

.TVFilmShowName, .MostFamousByName
{
  font-style: italic;
}



.ListenSample
{
  font-size: 0.7em;
  padding: 0 0.3rem;
  margin-left: 0.3rem;
}


.modal-header
{
  background-color: #ff4042;
}











#repertoirelist_alphabeticalbychart table td:nth-child(1) { width: 45%; }
#repertoirelist_alphabeticalbychart table td:nth-child(2) { width: 7%; }
#repertoirelist_alphabeticalbychart table td:nth-child(3) { width: 20%; }
#repertoirelist_alphabeticalbychart table td:nth-child(4) { width: 28%; }


#repertoirelist_chronologicalbydecade table td:nth-child(1) { width: 7%; }
#repertoirelist_chronologicalbydecade table td:nth-child(2) { width: 45%; }
#repertoirelist_chronologicalbydecade table td:nth-child(3) { width: 20%; }
#repertoirelist_chronologicalbydecade table td:nth-child(4) { width: 28%; }

#repertoirelist_justxmas table td:nth-child(1) { width: 55%; }
#repertoirelist_justxmas table td:nth-child(2) { width: 7%; }
#repertoirelist_justxmas table td:nth-child(3) { width: 38%; }

.repertoirelist .BackToTopAbove { font-size:  0.4em; }
.repertoirelist .BackToTopUnder { font-size:  0.8em; }
.repertoirelist .FirstLetter { font-size: 2em; }
.repertoirelist .ChartCount { font-size: 1em; }







/*You can do it with pure CSS, no JS/jQuery needed. In order to accomplish this, I set the animation-duration to 5 seconds, then multiplied all percentage values by 0.2 (because 1 second out of 5 seconds => 20%). Then translate back to 0px after the highest percentage value. And voilà, shaking every 5 seconds:*/

.shakethis {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-name: shakeMe;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes shakeMe {
    2%, 18% {
        transform: translate3d(-3px, 0, 0);
    }

    4%, 16% {
        transform: translate3d(3px, 0, 0);
    }

    6%, 10%, 14% {
        transform: translate3d(-3px, 0, 0);
    }

    8%, 12% {
        transform: translate3d(3px, 0, 0);
    }
    
    18.1% {
        transform: translate3d(0px, 0, 0);
    }
}























 
/* NEW YEARS EVE AND XMAS PAGE */

/* #E1BB57 = gold */
/* #00873E = christmas green     rgb 0 135 62 */

.NYEpage h2, .XMASpage h2 {
  color: #f8f8f8;
  font-size: 2rem;
}

.NYEheader .NYEbg, .XMASbg {
    background-color: #000000;
    background-repeat: repeat-x, repeat-x;
    background-position: center top, center bottom;
    background-size: 100% auto, 100% auto;
    line-height: 1;
}


.XMASpage {
  background-image: url('/img/specials/snowflakes.png');
  background-color: rgba(0,0,0,0.4);
    background-repeat: repeat;
}

.NYEheader .NYEbg {
    background-image: url('/img/specials/goldcircles.png'), url('/img/specials/goldcircles_bottom.png');
}

.XMASbg {
    background-image: url('/img/specials/xmascircles.png'), url('/img/specials/xmascircles_bottom.png');
}


.BottomText {
  line-height: 1;
}

.NYEheader .NYEtoptext, .XMAStoptext {
    text-align: center;
}


.NYEtoptext .NormalText, .XMAStoptext .NormalText {
    font-family: 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
}


.NYEtoptext .FancyText, .Fancy, .FancyXmas, .XMAStoptext .FancyText {
    font-family: 'Euphoria Script', cursive;
}

.NYEtoptext .FancyText, .Fancy, .XMAStoptext .FancyText {
  color: #e1bb57;
}

.FancyXmas {
  color: #00873E;
}

.NYEtoptext .TTText, .XMAStoptext .TTText {
    font-family: 'Asphaltic Scratch', Arial, sans-serif;
        
}

.NYEquotes .blockquote-footer{
    color: #e1bb57;
}

.XMASquotes .blockquote-footer {
    color: #00873E;
}

.Fancy, .FancyXmas {
  font-size: 130%;
}

.gold-background {
  text-align: center;

  padding: 0.5em;
  border-radius: 0.2em;
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}

@media (min-width: 0px) {
  .NYEheader .NYEbg, .XMASbg { text-shadow: 0.1em 0.1em 0.5em rgba(0, 0, 0, 0.7); }
  .NYEheader .NYEtoptext, .XMAStoptext {padding-top:5em; }
  .NYEtoptext .NormalText, .XMAStoptext .NormalText {font-size: 1.8em; }
  .NYEtoptext .FancyText, .XMAStoptext .FancyText {font-size: 4em; }
  .NYEtoptext .TTText, .XMAStoptext .TTText {font-size: 4em; }
  .NYEtoptext .SmallText, .XMAStoptext .SmallText {font-size: 1.2em; }
  .gold-background { font-size: 1.1em; }
  .BottomText {font-size: 1.3em;}
}

@media (min-width: 768px) {
  .NYEheader .NYEbg, .XMASbg {text-shadow: 0.12em 0.12em 0.5em rgba(0, 0, 0, 0.7); }
  .NYEheader .NYEtoptext, .XMAStoptext {padding-top:9em; }
  .NYEtoptext .NormalText, .XMAStoptext .NormalText {font-size: 2em; }
  .NYEtoptext .FancyText, .XMAStoptext .FancyText {font-size: 5em; }
  .NYEtoptext .TTText, .XMAStoptext .TTText {font-size: 5em; }
  .NYEtoptext .SmallText, .XMAStoptext .SmallText {font-size: 1.3em; }
  .gold-background { font-size: 1.5em; }
   .BottomText {font-size: 1.5em;}
}
@media (min-width: 992px)  {
  .NYEheader .NYEbg, .XMASbg {text-shadow: 0.15em 0.15em 0.6em rgba(0, 0, 0, 0.7); }
  .NYEheader .NYEtoptext, .XMAStoptext {padding-top:12em; }
  .NYEtoptext .NormalText, .XMAStoptext .NormalText {font-size: 3em; }
  .NYEtoptext .FancyText, .XMAStoptext .FancyText {font-size: 7.5em; }
  .NYEtoptext .TTText, .XMAStoptext .TTText {font-size: 7.5em; }
  .NYEtoptext .SmallText, .XMAStoptext .SmallText {font-size: 1.5em; }
  .gold-background { font-size: 1.8em; }
     .BottomText {font-size: 1.8em;}
}
@media (min-width: 1200px) {
  .NYEheader .NYEbg, .XMASbg {text-shadow: 0.2em 0.2em 0.8em rgba(0, 0, 0, 0.7); }
  .NYEheader .NYEtoptext, .XMAStoptext {padding-top:15em; }
  .NYEtoptext .NormalText, .XMAStoptext .NormalText {font-size: 4em; }
  .NYEtoptext .FancyText, .XMAStoptext .FancyText {font-size: 10em; }
  .NYEtoptext .TTText, .XMAStoptext .TTText {font-size: 10em; }
  .NYEtoptext .SmallText, .XMAStoptext .SmallText {font-size: 2em; }
   .gold-background { font-size: 2em; }
   .BottomText {font-size: 2em;}
}




.red-underline {
    text-decoration: underline;
    text-decoration-color: #ff4042;
    text-underline-offset: 0.2rem; 
}

.fs50pc { font-size: 150%; }

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
}

.day {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 15%;
}

.day:nth-child(7n+6), .day:nth-child(7n+7) { background-color: rgba(180,180,180,0.2); }

.session {
    flex: 1;
    background-color: grey;
    border-radius: 15%;
}

.empty { border: none; }

.day.empty:nth-child(7n+6), .day.empty:nth-child(7n+7) { background-color: transparent; }


.partsofday {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}


.available { background-color: rgba(0, 135, 62, 1); }

.unavailable { background-color: rgba(255, 64, 66, 0.7); }

.contact { background-color: rgba(255,255,0, 0.7); }

.daylabel { font-size: 150%; }

/*.keysquare { display: block; width: 10px; height: 10px }*/