* {
    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    border: 0 none;
    outline: 0;
    padding: 0;
    margin: 0;
}
body {
    font-family: 'Overpass', sans-serif;
    font-size: calc(1em + 0.2vw);
    line-height: calc(1.3em + 0.2vw);
    word-wrap: break-word;
    background-color: whitesmoke;
    color: #0F0F0F;
    display: grid;
    grid-template-columns: 100%;
}
header {
    background-color: #0F0F0F;
    grid-row: 4 / 5;
    padding: 5vw 5vw 1000vh 5vw;
}
main {
    grid-row: 2 / 3;
    padding: 0 5vw 5vw 5vw;
}
footer {
    grid-row: 3 / 4;
    padding: 25vh 5vw 1000vh 5vw;
}
img {
    box-sizing: border-box;
    max-width: 100%;
    border: 1px solid silver;
}
figcaption {
    display: table;
    background-color: silver;
    margin-top: 1px;
    padding: calc(0.1em + 0.2vw) calc(0.4em + 0.2vw);
}
a {
    color: darkgoldenrod;
    text-decoration: none;
}
a:hover {
    color: goldenrod;
}
a:active {
    color: palegoldenrod;
}
a[role=button],input[type=submit] {
    display: inline-block;
    font-weight: bold;
    background-color: darkgoldenrod;
    color: #0F0F0F;
    border-radius: 500px;
    padding: calc(0.65em + 0.05vw) calc(1em + 0.05vw);
}
a[role=button]:hover,input[type=submit]:hover {
    background-color: goldenrod;
}
a[role=button]:active,input[type=submit]:active {
    background-color: #0F0F0F;
    color: palegoldenrod;
    transform: translateY(3px);
}
nav {
    text-align: right;
}
nav span {
    display: block;
    border-top: calc(1px + 0.05vw) solid darkgoldenrod;
    border-bottom: calc(1px + 0.05vw) solid darkgoldenrod;
}
nav a {
    display: block;
    font-weight: bold;
    font-size: 120%;
    line-height: 270%;
    text-transform: uppercase;
}
h1 a {
    display: block;
    background: transparent url('/assets/img/ballet51-decal-gold-on-onyx-10cmx3cm.png') no-repeat right top;
    background-size: auto calc(37px + 1.7vw);
    text-indent: -9999px;
    line-height: calc(37px + 1.7vw);
    margin-bottom: 5vw;
    border-top: 1vmin solid transparent;
}
h1 a:active {
    transform: translateY(3px);
}
h2,h3,h4,h5,h6 {
    margin-top: 15vw;
}
h2 {
    font-weight: bold;
    font-size: 200%;
    line-height: 110%;
}
h3 {
    display: table;
    font-weight: bold;
    font-size: 125%;
    line-height: 125%;
    background-color: #0F0F0F;
    color: whitesmoke;
    padding: calc(0.3em + 0.2vw) calc(0.6em + 0.2vw);
}
h4 {
    font-weight: bold;
    font-size: 125%;
    line-height: 125%;
    text-decoration: underline;
}
h5 {
    display: table;
    font-weight: bold;
    line-height: 125%;
    border: 1px solid #0F0F0F;
    padding: calc(0.2em + 0.2vw) calc(0.4em + 0.2vw);
}
h6 {
    display: table;
    font-weight: bold;
    line-height: 125%;
    background-color: lightgray;
    color: dimgray;
    padding: calc(0.2em + 0.2vw) calc(0.4em + 0.2vw);
}
p,ol,ul,figure,table,form,pre,section {
    margin: calc(1em + 0.2vw) 0;
}
details:first-of-type {
    margin-top: calc(1em + 0.2vw);
}
ol,ul {
    margin-left: calc(0.85em + 0.2vw);
}
strong {
    font-weight: 700;
}
em {
    font-style: italic;
}
mark {
    background-color: paleturquoise;
    padding: 0 2px;
}
hr {
    border-top: 1px solid gray;
    border-bottom: 1px dotted #0F0F0F;
}
figure {
    overflow-x: auto;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid rosybrown;
}
tr {
    border-bottom: 1px solid rosybrown;
}
th,td {
    padding: calc(0.5em + 0.2vw);
}
th {
    background-color: rosybrown;
    font-weight: bold;
    text-align: left;
}
details {
    background-color: peachpuff;
    border-bottom: 1px solid saddlebrown;
    padding: calc(0.5em + 0.2vw);
}
details > summary {
    cursor: pointer;
    color: #960;
    font-weight: bold;
}
details[open] {
    background-color: wheat;
}
details[open] > summary {
    color: #0F0F0F;
}
form {
    display: inline-block;
    background-color: honeydew;
    border: 1px solid silver;
    border-top: 3px solid aquamarine;
    padding: calc(1em + 0.2vw);
}
select {
    max-width: 100%;
}
input[type=text],input[type=email],textarea {
    background-color: aquamarine;
    max-width: 100%;
    padding: calc(0.25em + 0.2vw);
}
:disabled {
    cursor: not-allowed;
}
input:disabled + label {
    color: dimgrey;
}
input[type=submit] {
    cursor: pointer;
}
#tagline {
    font-weight: normal;
    font-size: max(1.7em,5.9vw);
    line-height: max(1.2em,5.9vw);
}
#menu a:active {
    transform: translateY(3px);
}
#menutoggle {
    grid-row: 1 / 2;
}
#menutoggle a {
    font-weight: 100;
    font-size: 250%;
    line-height: 100%;
    background-color: #0F0F0F;
    border: none;
    padding-top: 2.5vw;
    padding-right: 5vw;
}
.hide {
    display: none;
}
.callout {
    font-weight: 900;
    font-size: 150%;
}
.callout.blue {
    color: navy;
}
.callout.green {
    color: teal;
}
.callout.amber {
    color: peru;
}
.callout.red {
    color: red;
}
.pin {
    display: table;
    font-size: 115%;
    background-color: gainsboro;
    border-left: calc(15px + 0.25vw) solid #0F0F0F;
    padding: calc(7px + 0.25vw) calc(10px + 0.25vw) calc(5px + 0.25vw);
}
.pin.blue {
    display: table;
    background-color: aliceblue;
    color: navy;
    border-color: navy;
}
.pin.green {
    display: table;
    background-color: mintcream;
    color: teal;
    border-color: teal;
}
.pin.amber {
    display: table;
    background-color: ivory;
    color: peru;
    border-color: peru;
}
.pin.red {
    display: table;
    background-color: mistyrose;
    color: red;
    border-color: red;
}
.pill {
    font-size: 85%;
    background-color: gainsboro;
    border: 1px solid #0F0F0F;
    border-radius: 500px;
    padding: calc(3px + 0.05vw) calc(7px + 0.05vw) calc(1px + 0.05vw);
}
.pill.blue {
    background-color: aliceblue;
    color: navy;
    border-color: navy;
}
.pill.green {
    background-color: mintcream;
    color: teal;
    border-color: teal;
}
.pill.amber {
    background-color: ivory;
    color: peru;
    border-color: peru;
}
.pill.red {
    background-color: seashell;
    color: indianred;
    border-color: indianred;
}
#calendar {
    margin-bottom: calc(4em + 0.2vw);
    height: max(600px,600px + 20vw);
}
#calendar h2 {
    color: #0F0F0F;
    font-size: calc(0.85em + 0.5vw);
    line-height: calc(0.85em + 0.5vw);
    text-transform: uppercase;
}
#calendar a {
    color: #0F0F0F;
}
#calendar button {
    background-color: #0F0F0F;
    border-color: #0F0F0F;
    color: darkgoldenrod;
    font-size: calc(0.85em + 0.2vw);
    line-height: calc(0.85em + 0.2vw);
    padding: 0.5vw 1vw;
}
#calendar .fc-toolbar {
    background-color: darkgray;
    border: 1px solid darkgray;
    padding: calc(0.6em + 0.2vw);
}
#calendar .fc-header-toolbar,
#calendar table,
#calendar .fc-col-header,
#calendar .fc-scrollgrid-sync-table {
    margin: 0;
}
#calendar table, #calendar th, #calendar td {
    border-color: slategray;
}
#calendar th {
    background-color: gainsboro;
}
#calendar .fc-day-today {
    background-color: darkgoldenrod;
}
#calendar .holiday {
    background-color: red;
    border: 1px solid red;
}
#calendar .holiday .fc-event-title {
    color: mistyrose;
}
#calendar .performances {
    background-color: plum;
    border: 1px solid indigo;
}
#calendar .performances .fc-event-title {
    color: lavender;
}
#calendar .term1 {
    background-color: springgreen;
    border: 1px solid springgreen;
}
#calendar .term1 .fc-event-title {
    color: darkgreen;
}
#calendar .term2 {
    background-color: gold;
    border: 1px solid gold;
}
#calendar .term2 .fc-event-title {
    color: saddlebrown;
}
#calendar .term3 {
    background-color: salmon;
    border: 1px solid salmon;
}
#calendar .term3 .fc-event-title {
    color: darkred;
}
#calendar .term4 {
    background-color: lightsteelblue;
    border: 1px solid lightsteelblue;
}
#calendar .term4 .fc-event-title {
    color: midnightblue;
}
#calendar .term5 {
    background-color: mediumpurple;
    border: 1px solid mediumpurple;
}
#calendar .term5 .fc-event-title {
    color: midnightblue;
}
@media only screen and (min-width: 1280px) {
    #menutoggle {
        display: none;
    }
    body {
        grid-template-columns: auto 82%;
        grid-template-rows: auto auto auto;
    }
    header {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        padding: 5vw 0;
        position: sticky;
        top: 0;
        height: 100vh;
        box-sizing: border-box;
    }
    main {
        grid-column: 2 / 3;
        padding: 0 10vw 10vw 10vw;
    }
    footer {
        grid-column: 2 / 3;
        padding: 10vw;
    }
    h1 a {
        border-right: 2vw solid transparent;
    }
    h2,h3,h4,h5,h6 {
        margin-top: 5vw;
    }
    h2#tagline {
        font-weight: 100;
    }
    nav a {
        padding-right: 2vw;
    }
    nav span.active {
        background-color: whitesmoke;
        color: #0F0F0F;
        border-top: calc(1px + 0.05vw) solid ghostwhite;
        border-bottom: calc(1px + 0.05vw) solid snow;
    }
}