/* RESET */
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; }

.admin { position: fixed; bottom: 0; font-family: sans-serif; font-size: 12px; color: #FFF; text-align: center; padding: 0.5rem; background: #000; }

/*
#00dcff lighter
#ff71ff blueish
*/

body { font-family: monospace, sans-serif; font-size: 16px; line-height: 1.5; background: #FFD700; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


h1,h2,h3,h4,h5,h6, legend { font-family: Oswald, arial, helvetica, sans-serif; font-weight: 700; }
h1,h2,h3,h4,h5,h6 { line-height: 1.25; margin: 0 0 1.5rem 0; }
h1 { font-size: 2.4rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; margin-bottom: 1rem; }
h4,h5,h6 { font-size: 1.2rem; margin-bottom: 1rem; }
p { margin: 0 0 1.5rem 0; }
ul { margin: 0 0 1.5rem 1.5rem; }
ul li { margin-bottom: 0.75rem; }
ol { margin: 0 0 1.5rem 1.5rem; }
ol li { margin-bottom: 0.75rem; }
dl { margin-bottom: 1.5rem; }
dt { font-weight: 700; margin-bottom: 0.5rem; }
dd { margin-bottom: 0.5rem; }
figure { margin: 0 0 1.5rem 0; }
blockquote { font-family: Georgia; font-size: 1.125rem; padding-left: 1.5rem; border-left: 7px solid black; margin: 0 1.5rem 1.5rem 1.5rem; }
details { margin: 0 0 1.5rem 0; }
summary { padding: 0.75rem; background: rgba(255,255,255,0.3); }
details div { padding-top: 1rem; }

img { max-width: 100%; height: auto; }
small { font-family: sans-serif; font-size: 0.85rem; }
time { font-family: sans-serif; font-size: 0.85rem; }
b,strong { font-weight: 700; }
em,i { font-style: italic; }
a { color: #333; transition: 0.25s; text-decoration-line: underline; text-underline-offset: 0.05rem; text-underline-position: under; text-decoration-thickness: 0.05rem; }
a:hover, a:focus { color: #555; text-decoration: underline; }

.form-login { max-width: 420px; padding: 1.5rem; border: 1px solid #000; }
.form-grid { display: grid; grid-column-gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0; }
form dd { margin: 0 0 1rem 0; }
form dt { margin: 0 0 0.5rem 0; } 
form dd ul { list-style: none; margin: 0; }
form dd li { display: inline-block; }
.label { display: inline-block; font-weight: 700; margin-bottom: 0.125rem; }
.label-note { display: block; font-weight: normal; margin-bottom: 0.125rem; }
fieldset { border: 0; margin: 0 0 1.5rem; }
legend { font-size: 1.6rem; font-weight: 700; margin: 0 0 1.5rem 0; }
input,select,button { height: 42px; font-size: 1rem; border: 0; transition: 0.5s; box-sizing: border-box; }
input[type=text],input[type=email],input[type=number],input[type=password],input[type=tel] { width: 100%; height: 42px; text-indent: 0.5rem; border: 0; opacity: 0.5; }
input[type=checkbox] { width: 20px; height: 20px; }
input[type='checkbox']:checked + span { color: blue; }
input[type=radio] { width: 20px; height: 20px; }
input[type='radio']:checked + span { color: blue; }
select { min-width: 80px; max-width: 100%; opacity: 0.5; }
select:focus { opacity: 1; }
textarea { width: 100%; height: 140px; font-size: 1rem; padding: 0.5rem; border: 0; transition: 0.5s; opacity: 0.5; box-sizing: border-box; }
input:focus,select:focus,textarea:focus { opacity: 1; }
button { width: 100%; height: 42px; font-size: 1rem; color: #FFF; padding: 0 1rem; background: #000; }

.text-center { text-align: center; }



.wrapper {margin: auto; }


.top,.nav,.header,.section,.footer { max-width: 1120px; margin: 0 auto; }
.top { padding: 0.75rem 1rem 0 1rem; }
.nav { position: relative; padding: 0.75rem 1rem 1rem 1rem; }
.header { padding: 2rem 1rem 1rem 1rem; margin: 0 auto; }
.section { padding: 1rem; margin: 0 auto; }
.footer { padding: 1rem; margin: 0 auto; }

.grid { display: grid; grid-gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 1rem 0; }
.grid2 { display: grid; grid-gap: 1.5rem; grid-template-columns: 1fr; margin: 0 0 1rem 0; }
.grid3 { display: grid; grid-gap: 1.5rem; grid-template-columns: 1fr; margin: 0 0 1rem 0; }
.grid4 { display: grid; grid-gap: 1.5rem; grid-template-columns: 1fr; margin: 0 0 1rem 0; }
.grid-header { display: grid; grid-template-columns: 1fr; }
.p { display: grid; grid-column-gap: 0rem; grid-template-columns: 1fr; margin: 0 0 1.5rem 0; }
.t { display: grid; grid-column-gap: 0rem; grid-template-columns: 1fr; margin: 0 0 1.5rem 0; }
.fluid-text { margin: 0 0 1.5rem 0; }
.grid-songs { display: grid; grid-gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 0 0 1rem 0; }
.grid-songs img { float: left; display: block; width: 120px; height: 120px; border: 2px solid #FFF; margin-right: 0.5rem; }

.Xman { position: absolute; top: -0.5rem; left: 1.5rem; width: 84px; height: 84px; z-index: -1; }
.Xman img { width: 100%; height: 100%; filter: invert(1) saturate(5); }

.logo { width: 202px; }
.logo img { display: block; width: 213px; height: 60px; }

.top-links { font-family: sans-serif; list-style: none; font-size: 0.85rem; text-align: right; margin: 0; }
.top-links li { display: inline-block; margin: 0 0 0 0.25rem; }
.top-links-login a { display: block; font-weight: 700; color: #000; text-decoration: none; }
.top-links-login a::before { content: "\2023  "; }
.menu-toggle { position: absolute; bottom: 1.5rem; right: 1rem; width: 80px; height: 40px; color: #000; padding: 0; background: transparent; border: 2px solid #000; }
.toggle-text::before { content: "\2261  "; }

.menu { position: absolute; top: 80px; right: -1024px; line-height: 40px; margin: 0; transition: 0.25s; }
.menu li { display: block; margin: 0;  }
.menu a { display: block; color: #000; text-decoration: none; padding: 0 0.25rem;  }
.Xmenu a::before { content: "\2023"; }

@media screen and (max-width: 1023px) {
.menu-show { right: 1rem; padding: 1rem; background: #FFCC00; border: 2px solid #000; z-index: 9999; }
.menu-show { width: 240px; }
}

.announcement {
background-color: #000;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23555555' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
.announcement a { display: block; font-family: sans-serif; font-size: 0.85rem; font-weight: 400; color: #FFF; text-align: center; text-decoration: none; padding: 0.5rem;  }
.announcement a::after { content: " \00BB"; }

.crumbs { list-style: none; font-size: 0.85rem;  margin: 0; }
.crumbs li { display: inline-block; }
.crumbs li::after { content: " \2023"; }

.header {  }
.header h1 {  }
.header-summary { font-size: 1.125rem; }
.header ul { list-style: none; margin: 0 0 1.5rem 0; }
.header ul li { display: inline-block; }

.section-heading { margin: 0 0 2rem 0; }

.card { }
.card-thumb { z-index: 999; }
.card-thumb img { display: block; width: 100%; }
.card-icon img { width: auto; height: 70px; }
.card-body { }
.card-body { padding: 1.5rem; background: rgba(255,255,255,0.3); clip-path: polygon(100% 0, 100% 95%, 95% 100%, 0 100%, 0 0); }
.card-heading { font-size: 1.4rem; margin: 0 0 1rem 0; }
.card-heading a { color: #000; text-decoration: none; }
.card-heading a:hover, .card-heading a:focus { text-decoration: underline; }
.card-summary, .card-body p { margin: 0 0 1rem 0; }
p.card-cta { text-align: right; margin: 0; }

.news-link {}
.news-link::before { content: "NEWS: "; font-weight: 700; }

.tutor-detail-list {}
.tutor-detail-list dt { display: inline-block; margin-right: 0.5rem; }
.tutor-detail-list dt::after { content: ":"; }
.tutor-detail-list dd { display: inline-block; margin: 0 1rem 0 0; }

.location-detail-list { display: grid; grid-template-columns: 120px 1fr; }
.location-detail-list dt { }
.location-detail-list dt::after { content: ":"; }
.location-detail-list dd {  }

.instruments-list { list-style: none; margin-left: 0; }

.songs-heading { font-size: 1.2rem; margin: 0 0 0.5rem 0; }
.songs-artist { font-size: 0.925rem; }

.songs-list { list-style: none; margin: 0; }
.songs-categories { list-style: none; margin-left: 0; }
.songs-categories li { display: inline-block; }

.divider { width: 3rem; height: 3rem; }
.divider svg { width: 2rem; height: 2rem; fill: white; }


.quote { max-width: 960px; padding: 0 1.5rem; margin: 1.5rem auto; }
.quote-text { font-size: 1.35rem; font-style: italic; padding: 1.5rem; background: rgba(255,255,255,0.3); border-radius: 4px 8px 12px 16px; margin: 0; }
.quote-author { display: block; font-size: 0.85rem; margin: 0 0 0 2rem; }
.quote-triangle {
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-top: 12px solid rgba(255,255,255,0.3);
      margin-left:3rem;
    }

.link { display: block; font-weight: 700; color: #FFF; text-align: center; text-decoration: none; border-radius: 0px; transition: 0.25s; }
.link::after { content: " \2023"; }
.link-pri { color: #FFF; background: #4169E1; background: #2E6EE5; }
.link-sec { color: #FFF; background: #555; }
.link-l { padding: 0.6rem 1.2rem; }
.link-m { font-size: 0.925rem; padding: 0.4rem 0.8rem; }
.link:hover { color: #FFFF00; background: #000; text-decoration: none; }
.link:focus { color: #FFF00; background: #493300; text-decoration: none; }
.link-block { display: block; }

.video-wrapper { margin: 0 0 1.5rem 0; }
.video { position: relative; padding-bottom: 56.25%; height: 0; background: #000; border: 5px solid #FFF; }
.video iframe, .video video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }

.footer-links { margin: 0 0 1rem 0; }
.footer-links dd { font-size: 0.925rem; }
.footer-links a { text-decoration: none; }
.footer-links a:hover, .footer-links a:focus { text-decoration: underline; }
.footer-statement { font-size: 0.75rem; text-align: center; }

.pagination {}
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 2rem 0; }
.pagination li { margin: 0.5rem; }
.pagination a {}

.alert { font-family: sans-serif; font-size: 0.85rem; padding: 0.75rem; border: 1px dotted #000; margin: 0 0 1.5rem 0; }
.alert p { margin: 0; }
.alert-important {}

.silly { position: fixed; right: 0; bottom: 0; left: 0; z-index: -1; }
.silly svg { width: 100%; }


.offscreen { position: absolute; left: -999em; }

.se-preview { max-width: 600px; font-family: sans-serif; line-height: 1.25; padding: 10px; background: white; margin: 0 0 1rem 0; }
.se-preview::before { content: "Search engine listing preview"; display: block; font-size: 12px; font-weight: 700; color: #CCC;  }
.se-preview-title { font-size: 16px; font-weight: 700; color: blue; }
.se-preview-url { font-size: 12px; color: #996600;}
.se-preview-description { font-size: 14px; color: black; }



@media screen and (min-width: 640px) {
.grid-header { display: grid; grid-gap: 1.5rem; grid-template-columns: 1fr 1fr; }

.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: 1fr 1fr 1fr; }
form .grid2 { grid-column-gap: 3rem; margin-bottom: 0; }
.grid4 { grid-template-columns: 1fr 1fr; }
.grid-item-order2 { order: 2; }
.grid-item-order2 img { position: relative; margin-top: -1rem; display: block; border: 5px solid #FFF; transform: rotate(0.5deg); transition: 0.5s; box-shadow: 1px 2px 3px #999;}
.grid-item-order2 img:hover { transform: rotate(0deg); transform: scale(1.05,1.05); }
.p { grid-template-columns: 2fr 3fr; margin: 0 0 3rem 0; }
.p .card-body { padding-left: 3rem; }
.p .card-thumb { position: relative; margin: -0.5rem -1.5rem 0 0; }
.p .card-thumb img { border: 5px solid #FFF; box-shadow: 1px 2px 3px #CCC; transition: 0.5s; }
.p .card-thumb img:hover { border: 5px solid #FFFF00; transform: rotate(-1deg); box-shadow: 1px 2px 3px #999; }
.t { grid-template-columns: 1fr 3fr; margin: 0 0 3rem 0; }
.t .card-body { padding-left: 3rem; }
.t .card-thumb { position: relative; margin: -0.5rem -1.5rem 0 0; }
.t .card-thumb img { border: 5px solid #FFF; box-shadow: 1px 2px 3px #CCC; transition: 0.5s; }
.t .card-thumb img:hover { border: 5px solid #FFFF00; transform: rotate(-1deg); box-shadow: 1px 2px 3px #999; }
.fluid-text { margin: 0 0 3rem 0; }
.video { border: 5px solid #FFF; box-shadow: 1px 2px 3px #CCC; transition: 0.5s; }
.link { display: inline-block; }
}

@media screen and (min-width: 1024px) {
.grid4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.logo { margin-left: -2rem; }
.menu-toggle { display: none; }
.menu { top: 0.75rem; right: 1rem; text-align: right; line-height: 58px; margin: 0; }
.menu li { display: inline-block; margin: 0 0 0 1rem;  }
.menu a { display: block; color: #000; text-decoration: none; padding: 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a.current { border-bottom: 2px solid #000; }




}