:root {
    box-sizing: border-box
}

*,
::before,
::after {
    box-sizing: inherit;
}

body {
    font-size: 1.4em;
    font-family: 'Open Sans', sans-serif ;

}

h1 {
    padding-bottom: 10px;
}

h2 {
    font-size: 1.7rem;
}

.main {
    padding: 20px 40px;
    margin-top: 30px;
}

    .main img {
        padding: 20px;
    }

.vertical-center {
    margin-top: 40%;
}


.flex{
    display: flex;
}


.grid {
    display: grid;
    grid-template-columns: minmax(200px, 1100px) 1fr;
}

.col1 {
    grid-column: 1 / 2;

}

.grid h1, .grid p, .grid h2, .gid h3, .grid h4, .grid iframe {
    margin-left: 30px;
   
}

.grid img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 2000px;
  
}

iframe {
    margin-bottom: 35px;
}

.pull-xs-left {
    padding-right: 10px;
}

/*.img-centred {
    display: block;
    margin-left: auto;
    margin-right: auto;
}*/

.img-rounded {
    border-radius: 15px;
}



.jumbotron {
    background-image: url('../images/TrebleMakers2.png');
    background-size: cover;
    text-align: center;
    color: #DDD;
    margin-top: 30px;
    font-family: Arial, sans-serif;
}

    .jumbotron h1 {
        font-size: 400%;
    }

#cardparts {
    padding: 20px 110px;
}

.card-img-top {
    width: 100%;
    border: 1px solid #BBB;
}

.card-title {
    font-size: 1.3em;
    font-weight:bolder;
    color:#444;
}

.card-text {
    font-size: 0.8em;
}

.sidebar {
    position: fixed;
    top: 51px;
    left: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    bottom: 0px;
    background-color: #f5f5f5;
    font-size: 85%;
    border-radius: 5px;
}

#verticalNav a.nav-link {
    color: #89419D;
}

#verticalNav a.active {
    background-color: #89419D;
    color: #EEE;
}



.footer {
    padding: 10px 30px;
    text-align: center;
    background-color: #11aaaa;
    color: #EEE;
}

/*Homepage*/
.homepage{
    min-height: 470px;
    width: 500px;
    margin: 1.5%;
    padding:10px;
    border-radius: 10px;
    border: 2px solid #CCC;
}

.card-hyperlink {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}





.quotation {
    display: block;
    margin: 5px 20px;
    font-style: italic;
    font-size: 90%;
    color: #350A66;
}

/*Intervals*/

.sungNote {
    font-size: 400%;
}


/*Piano Keyboard*/

.piano {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0px;
    margin: 1em 1em 1em 1em;
    padding: 3em 1em 1em 1em;
    position: relative;
    border: 1px solid #160801;
    border-radius: 1em;
    background: linear-gradient(to bottom right,rgba(0,0,0,0.3),rgba(0,0,0,0));
    background: #222;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) inset, 0 1px rgba(212, 152, 125, 0.2) inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -webkit-user-select: none; /*stop copy etc menu appearing when touching screen in ios*/
}


.pianokey {
    margin: 0;
    padding: 6em 0em 0em 0em;
    list-style: none;
    position: relative;
    text-align: center;
    font-size: 1em;
}

    .pianokey.tiny {
        font-size: 0.5em;
    }

    .pianokey.large {
        font-size: 2em;
    }

    .pianokey.noteletter {
        padding-top: 4em;
    }



.white {
    height: 12em;
    width: 3em;
    z-index: 1;
    border-left: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    border-radius: 0 0 5px 5px;
    box-shadow: -1px 0 0 rgba(255,255,255,0.8) inset,0 0 5px #ccc inset,0 0 3px rgba(0,0,0,0.2);
    background: linear-gradient(to bottom,#eee 0%,#fff 100%)
}

    .white:active, .white.noteDown {
        border-top: 1px solid #777;
        border-left: 1px solid #999;
        border-bottom: 1px solid #999;
        box-shadow: 2px 0 3px rgba(0,0,0,0.1) inset,-5px 5px 20px rgba(0,0,0,0.2) inset,0 0 3px rgba(0,0,0,0.2);
        background: linear-gradient(to bottom,#fff 0%,#e9e9e9 100%)
    }

.coloredNote {
    background: green;
    color: white;
}



.black {
    height: 6.75em;
    width: 1.5em;
    margin: 0 0 0 -1em;
    z-index: 2;
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    box-shadow: -1px -1px 2px rgba(255,255,255,0.2) inset,0 -5px 2px 3px rgba(0,0,0,0.6) inset,0 2px 4px rgba(0,0,0,0.5);
    background: linear-gradient(45deg,#222 0%,#555 100%);
    color: white;
    
}

    .black:active, .black.noteDown {
        box-shadow: -1px -1px 2px rgba(255,255,255,0.2) inset,0 -2px 2px 3px rgba(0,0,0,0.6) inset,0 1px 2px rgba(0,0,0,0.5);
        background: linear-gradient(to right,#444 0%,#222 100%)
    }

.a, .g, .d, .b, .e {
    margin: 0 0 0 -0.79em;
}

ul li.pianokey:first-child {
    border-radius: 5px 0 5px 5px
}

ul li.pianokey:last-child {
    border-radius: 0 5px 5px 5px
}

#Tenor[data-notename="E4"], #Tenor[data-notename="F4"], #Tenor[data-notename="G4"], #Tenor[data-notename="A4"], #Tenor[data-notename="B4"], #Tenor[data-notename="C5"], #Tenor[data-notename="D5"], #Tenor[data-notename="E5"], #Tenor[data-notename="F5"] {
    height: 5px;
    width: 100%;
    background-color: #E6CF01;
    margin-bottom: 5px;
}

#Tenor[data-notename="D3"], #Tenor[data-notename="E3"], #Tenor[data-notename="F3"], #Tenor[data-notename="G3"], #Tenor[data-notename="A3"], #Tenor[data-notename="B3"], #Tenor[data-notename="C4"], #Tenor[data-notename="D4"] {
    height: 5px;
    width: 100%;
    background-color: #FFF;
    margin-bottom: 5px;
}

#Lead[data-notename="G3"], [data-notename="A3"], #Lead[data-notename="B3"], #Lead[data-notename="C4"], #Lead[data-notename="D4"], #Lead[data-notename="E4"], #Lead[data-notename="F4"], #Lead[data-notename="G4"], #Lead[data-notename="A4"], #Lead[data-notename="B4"], #Lead[data-notename="C5"] {
    height: 5px;
    width: 100%;
    background-color: #D64309;
    margin-bottom: 5px;
}

#Lead[data-notename="D3"], #Lead[data-notename="E3"], #Lead[data-notename="F3"]  {
    height: 5px;
    width: 100%;
    background-color: #FFF;
    margin-bottom: 5px;
}

#Bari[data-notename="A3"], #Bari[data-notename="B3"], #Bari[data-notename="C4"], #Bari[data-notename="D4"], #Bari[data-notename="E4"], #Bari[data-notename="F4"], #Bari[data-notename="G4"], #Bari[data-notename="A4"], #Bari[data-notename="B4"] {
    height: 5px;
    width: 100%;
    background-color: #00786C;
    margin-bottom: 5px;
}

#Bari[data-notename="D3"], #Bari[data-notename="E3"], #Bari[data-notename="F3"], #Bari[data-notename="G3"] {
    height: 5px;
    width: 100%;
    background-color: #FFF;
    margin-bottom: 5px;
}

#Bass[data-notename="D3"], #Bass[data-notename="E3"], #Bass[data-notename="F3"], #Bass[data-notename="G3"], #Bass[data-notename="A3"], #Bass[data-notename="B3"], #Bass[data-notename="C4"], #Bass[data-notename="D4"], #Bass[data-notename="E4"], #Bass[data-notename="F4"], #Bass[data-notename="G4"] {
    height: 5px;
    width: 100%;
    background-color: #41424F;
}

.partRangeWrapper {
    display: flex;
    flex-direction: column;
    color: white;
    text-align: center;
}

.tenorColor {
    flex: 1 1 auto;
    background-color: #E6CF01;
}

.leadColor {
    flex: 1 1 auto;
    background-color: #D64309;
}

.bariColor {
    flex: 1 1 auto;
    background-color: #00786C;
}

.bassColor {
    flex: 1 1 auto;
    background-color: #41424F;
}



/*lessons*/
.questioncard {
    min-height: 290px;
    min-width: 700px;
    margin: 20px;
    border-radius: 10px;
    border: 2px solid #CCC;
    background-color: #EEE;
}


.narrow {
    width: 600px;
}

.question {
    background-color: #EEE;
   
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.questioncard .card-text {
    font-size:2em;
}

.finishText {
    position: absolute; /*takes out of flow so not in way when hidden*/
    margin-top: 3em;
    width: 100%;
    display: flex;
    align-items: center; /*does vertically center the desired content*/
    justify-content: center; /*horizontally centers single line items*/
    text-align: center; /*optional, but helps horizontally center text that breaks into multiple lines*/
}

.questioncard .card-title {
    font-size: 1em;
    font-weight:normal;
    margin-top: 0px;
}

.quizAnswerButtons {
    margin: 20px 0px;
}

.startbutton2C {
    margin-top: 5%;
    margin-left: 50%;

}
.startButton {
    position: absolute; /*takes out of flow so not in way when hidden*/
    z-index: 10;
}

.multiChoiceButton {
    border-left: 20px red;
}

.congratsbg {
    position: absolute;
    width: 100%;
    /*height: 100px;*/
    /*background-color: black;
    opacity: 0.5;*/
    /*margin-top: -20px;*/
    margin-left: -25px;
    z-index: 5;
}

.congrats {
    position: relative;
    font-size: 300%;
    width: 100%;
    text-align: center;
    padding: 0 0 0 20px;
    z-index: 7;
    opacity: 1;
}


.correct {
    color: forestgreen;
    transform: scale(1.1);
    opacity: 0.02;
    animation: fade_out_show2 1.5s;
    /*z-index: 199;*/
}

.correct2 {
    color: forestgreen;
    transform: scale(1.11);
    opacity: 0.02;
    animation: fade_out_show3 1.5s;
    /*z-index: 199;*/
}

.incorrect {
    color: grey;
    transform: scale(1); 
    animation: fade_out_show 1.5s;
    opacity: 0.01;
}

.incorrect2 {
    color: grey;
    transform: scale(0.9); 
    animation: fade_out_show4 1.5s;
    opacity: 0.03;
}

@keyframes fade_out_show {
    0% {
        opacity: 1;
        transform: scale(2);
    }

    100% {
        opacity: 0.1;
        transform: scale(0.1);
    }
}

@keyframes fade_out_show2 {
    0% {
        opacity: 0.97;
        transform: scale(1.9); 
    }

    100% {
        opacity: 0.2;
        transform: scale(0.2); 
    }
}

@keyframes fade_out_show3 {
    0% {
        opacity: 0.98;
        transform: scale(1.9); 
    }

    100% {
        opacity: 0.15;
        transform: scale(0.2);
    }
}

@keyframes fade_out_show4 {
    0% {
        opacity: 0.99;
        transform: scale(1.9);
    }

    100% {
        opacity: 0.13;
        transform: scale(0.2);
    }
}



.vis {
    opacity: 0.1;
    transform: scale(4);
    transition: all 2s ease;
}

.vistoggle {
    opacity: 0;
    transform: scale(3.9);
    transition: all 3s ease;
}

.progress {
    background-color: #d8dde4;
}

/*lesson 2 clef story */

#ClefStoryContainer {
    background-color: #EEE;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 20px;
    margin-bottom: 30px;
}

.storybox {
    background-color: #EEE;
    padding: 20px 0px;
    font-size: 0.8em;
    text-align: center;
    flex-basis: 20%; /*4 cards per row*/
    border-bottom:1px dashed #999;
    align-self:flex-end;
}

    .storybox img {
        padding-bottom: 5px;
    }

.is-valid {
    background-color: rgb(216, 231, 216);
    border-color:green;
}

.is-correct {
    background-color: rgb(159, 202, 159);
    border-color: green;
}



.stave {
    height: 300px;
    display: grid;
    grid-template-rows: repeat(30, minmax(10px, 50px)) ;
    grid-template-columns: repeat(68, minmax(13px, 14px)) ;
    background-color: #DDD;

}

/*for ios*/
.svg{
    width: 100%;
    height: 100%;
}

/*for ios transform has to be in css not svg*/
.staveNote > svg {
    transform: translate(-150px, -189px) scale(0.2);
}

.flat > svg {
    transform: translate(-150px, -200px) scale(0.2);
}

.sharp > svg {
    transform: translate(-150px, -189px) scale(0.6);
}


.barline > svg {
    transform: translate(-150px, -126px) scale(0.2);
}

.bassclef > svg {
    transform: translate(-90px, -44px) scale(0.6);
}

.front {
    z-index: 10;
}

.rest1Beat > svg {
    transform: translate(-110px, -126px) scale(0.2);
}

.rest2Beats > svg {
    transform: translate(-105px, -126px) scale(0.2);
}

.rest4Beats > svg {
    transform: translate(0px, -126px) scale(0.2);
}

.restQuaver > svg {
    transform: translate(-100px, -126px) scale(0.2);
}

.halfStave.line1, .halfStave.line2, .halfStave.line3, .halfStave.line4, .halfStave.line5 {
    grid-column-start: 1;
    grid-column-end: 49;
    border-bottom: solid 1px #000;
    z-index: 10;
}

.fullStave.line1, .fullStave.line2, .fullStave.line3, .fullStave.line4, .fullStave.line5 {
    grid-column-start: 1;
    grid-column-end: 80;
    border-bottom: solid 1px #000;
    z-index: 10;
}

.line1 {
    grid-row-end: 14;
}

.line2 {
    grid-row-end: 16;
}

.line3 {
    grid-row-end: 18;
}

.line4 {
    grid-row-end: 20;
}

.line5 {
   grid-row-end: 22;
}

.note1 {
    grid-column:4;
    z-index: 10;
}

.note2 {
    grid-column:5;
}

.note3 {
    grid-column: 6;
}

.note4 {
    grid-column: 7;
}

.note5 {
    grid-column: 8;
}

.note6 {
    grid-column: 9;
}

.note7 {
    grid-column: 10;
}

.note8 {
    grid-column:11;
}
.note9 {
    grid-column: 12;
}
.note10 {
    grid-column: 13;
}
.note11 {
    grid-column: 14;
}
.note12 {
    grid-column: 15;
}
.note13 {
    grid-column: 16;
}
.note14 {
    grid-column: 17;
}
.note15 {
    grid-column: 18;
}
.note16 {
    grid-column: 19;
}
.note17 {
    grid-column: 20;
}
.note18 {
    grid-column: 21;
}
.note19 {
    grid-column: 22;
}

.note20 {
    grid-column: 23;
}

.note21 {
    grid-column: 24;
}

.note22 {
    grid-column: 25;
}

.note23 {
    grid-column: 26;
}

.note24 {
    grid-column: 27;
}

.note25 {
    grid-column: 28;
}

.note26 {
    grid-column: 29;
}

.note27 {
    grid-column: 30;
}
.note28 {
    grid-column: 31;
}
.note29 {
    grid-column: 32;
}
.note30 {
    grid-column: 33;
}
.note31 {
    grid-column: 34;
}
.note32 {
    grid-column: 35;
}
.note33 {
    grid-column: 36;
}
.note34 {
    grid-column: 37;
}
.note35 {
    grid-column: 38;
}
.note36 {
    grid-column: 39;
}
.note37 {
    grid-column: 40;
}
.note38 {
    grid-column: 41;
}
.note39 {
    grid-column: 42;
}
.note40 {
    grid-column: 43;
}
.note41 {
    grid-column: 44;
}
.note42 {
    grid-column: 45;
}
.note43 {
    grid-column: 46;
}
.note44 {
    grid-column: 47;
}
.note45 {
    grid-column: 48;
}
.note46 {
    grid-column: 49;
}
.note47 {
    grid-column: 50;
}
.note48 {
    grid-column: 51;
}
.note49 {
    grid-column: 52;
}
.note50 {
    grid-column: 53;
}
.note51 {
    grid-column: 54;
}
.note52 {
    grid-column: 55;
}
.note53 {
    grid-column: 56;
}
.note54 {
    grid-column: 57;
}
.note55 {
    grid-column: 58;
}
.note56 {
    grid-column: 59;
}
.note57 {
    grid-column: 60;
}
.note58 {
    grid-column: 61;
}
.note59 {
    grid-column: 62;
}
.note60 {
    grid-column: 63;
}

.lineC4 {
    position: absolute;
    width: 10%;
    margin-top: 30%;
    margin-left: 25%;
    height: 0.1%;
    background-color: #000;
    z-index: 10
}

/*.barLine {
    border-right: 1px solid black;
    grid-row-start: 15;
    grid-row-end: 20;

}*/

/*Treble Clef and Flats*/
.trebleflat1 {
    transform: translate(105px, 130px);
}
.trebleflat2 {
    transform: translate(105px, 100px);
}
.trebleflat3 {
    transform: translate(105px, 140px);
}
.trebleflat4 {
    transform: translate(105px, 110px);
}
.trebleflat5 {
    transform: translate(105px, 150px);
}
.trebleflat6 {
    transform: translate(105px, 120px);
}

/*Bass Clef and Flats*/
.bassflat1 {
    transform: translate(105px, 170px);
}

.bassflat2 {
    transform: translate(105px, 140px);
}

.bassflat3 {
    transform: translate(105px, 180px);
}

.bassflat4 {
    transform: translate(105px, 150px);
}

.bassflat5 {
    transform: translate(105px, 190px);
}

.bassflat6 {
    transform: translate(105px, 160px);
}

.trebleClef {
    z-index:20;
    transform: scale(1.7);
}

.bassClef {
    z-index: 20;
    transform: scale(1.7);
}

/*Treble Clef and Sharps*/
.treblesharp1 {
    transform: translate(110px, 187px);
}

.treblesharp2 {
    transform: translate(110px, 217px);
}

.treblesharp3 {
    transform: translate(110px, 177px);
}

.treblesharp4 {
    transform: translate(110px, 207px);
}

.treblesharp5 {
    transform: translate(110px, 237px);
}

.treblesharp6 {
    transform: translate(110px, 187px);
}

/*Bass Clef and Sharps*/
.basssharp1 {
    transform: translate(110px, 207px);
}

.basssharp2 {
    transform: translate(110px, 237px);
}

.basssharp3 {
    transform: translate(110px, 197px);
}

.basssharp4 {
    transform: translate(110px, 227px);
}

.basssharp5 {
    transform: translate(110px, 257px);
}

.basssharp6 {
    transform: translate(110px, 217px);
}

.trebleClef {
    z-index: 20;
    transform: scale(1.7);
}

.bassClef {
    z-index: 20;
    transform: scale(1.7);
}

.trebleClef.A3 { grid-row: 16; }
.trebleClef.B3 { grid-row: 15; }
.trebleClef.C4 { grid-row: 14; }
.trebleClef.D4 { grid-row: 13; }
.trebleClef.E4 { grid-row: 12; }
.trebleClef.F4 { grid-row: 11; }
.trebleClef.G4 { grid-row: 10;}
.trebleClef.A4 { grid-row: 9;}
.trebleClef.B4 { grid-row: 8;}
.trebleClef.C5 { grid-row: 7;}
.trebleClef.D5 { grid-row: 6;}
.trebleClef.E5 { grid-row: 5;}
.trebleClef.F5 { grid-row: 4;}


.bassClef.E3 { grid-row: 14; }
.bassClef.F3 { grid-row: 13; }
.bassClef.G3 { grid-row: 12; }
.bassClef.A3 { grid-row: 11; }
.bassClef.B3 { grid-row: 10; }
.bassClef.C4 { grid-row: 9; }
.bassClef.D4 { grid-row: 8; }
.bassClef.E4 { grid-row: 7; }
.bassClef.F4 { grid-row: 6; }
.bassClef.G4 { grid-row: 5;}
.bassClef.A4 { grid-row: 4;}
.bassClef.B4 { grid-row: 3;}
.bassClef.C5 { grid-row: 2;}
.bassClef.D5 { grid-row: 1;}



.clef {
    grid-row: 8 / 12;
    grid-column: 1;
    z-index:20;
    transform: scale(1.3);
}


/*Lesson3*/

.quaverImage {
    height: 200px;
}

/*Lesson11*/
.flashcard {
    font-size: 1em;
}

@media (max-width: 992px) {

    .navbar-brand {
        display: none;
    }

    .sidebar {
        display: none;
    }

    .piano {
        margin: 0.1em;
        padding: 0.2em;
        border-radius: 4px;
    }

    .main {
        padding: 20px 10px;
        margin-top: 30px;
    }

    .questioncard {
        margin: 1.5% 0.5%;
        padding: 5px;
    }


    .card-body {
        margin-left: 5px;
        margin-right: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }
}