/********** BAARA NIOGONYA **********/

/****** ENSEMBLE DES PAGES ******/

/* border et padding inclus dans les dimensions d'une box */
* {box-sizing: border-box;}

/* empêche Firefox d'afficher un contour pointillé sur le bouton sélectionné */
button::-moz-focus-inner {border: 0;}

/* NG-CLOAK */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {display: none!important;}


/***** GENERAL *****/


/***** BODY *****/

body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    font-family: Trebuchet MS, Helvetica, sans-serif !important;
    background-color: #f7f5d4;
    background-image: url(images/tissu.png);
    margin: 0 !important;
    overflow: hidden !important;
}


/***** CLASSES GENERIQUES *****/

/*** LIENS ***/

a {outline: none;}

a:link {text-decoration: none;}

a:visited {
    color: #9B6118;
    text-decoration: none;
    text-shadow: -1px 1px 2px grey;
}

/*** TEXTES ***/

h1, h2, h3, p {margin: 0;}

h2, p {color: black; text-shadow: -1px 1px 2px grey;}

h1 {
    font-size: 2em;
    color: #f7f5d4;
    text-shadow: -1px 1px 2px black;
}

h2 {font-size: 1.4em;}

h3 {font-size: 1.2em;}

p {font-size: 1em;}

i {
    font-style: italic;
    opacity: 0.7;
}

/*** IMAGES ***/

img {display: block;}

/*** POINTEUR ***/
.pt {
    opacity: 0.95 !important;
    cursor: pointer;
}

.pt:hover {opacity: 1 !important;}

/* .noCrsr {cursor: none;} - VIDEO */


/*** PLEIN ECRAN - VIDEO ***/

/* .fullscreenBody {background-color: #111111;}

.full {margin: 0 !important;} */

/***** ANGULARJS NOT SUPPORTED *****/

.ng {display: none;}

#fallback {
    display: flex;
    position: absolute;
    background-color: black;
    width: 100%;
    height: 100%;
}


/***** ANGULARJS OK *****/

.ok {
    display: flex!important;
    flex-direction: column;
    flex-grow: 1;
}

#startScreen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#overview {
    position: absolute;
    display: inherit;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px;
    height: 80%;
    width: 600px;
    max-width: 100%;
    background-color: #f7f5d4;
    background-image: url(images/tissu.png);
    box-shadow: -1px 2px 1px #333;
    z-index: 6;
}

#overviewTop {
    display: flex;
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid black;
    box-shadow: -1px 1px 2px black;
}

#overviewTop h2 {
    text-align: center;
    color: white;
}

#closeButton {
    width: 35px;
    height: 35px;
    border: 1px solid black;
    //box-shadow: -1px 2px 1px black;
}

#flags {
    display: inherit;
    flex-direction: column;
}

.flag {
    height: 20px;
    width: 30px;
    margin: 3px 0;
    border: 1px solid black;
    box-shadow: -1px 1px 3px black;
}

.news {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-shadow: -1px 1px 3px black;
}

.news p {padding: 5px;}

.firefox {filter: drop-shadow(-1px 1px 2px rgba(0,0,0,0.5))}

#overviewMiddle {
    max-height: 80%;
    overflow-y: auto;
}

.questionBox {
  margin: 3px 0;
  border: 1px solid #333;
  box-shadow: -1px 1px 3px #888;
}

.question {padding: 5px;}

.answer {padding: 3px;}

.support {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.support a {
    display: inherit;
    align-items: center;
}

.support img {margin: 10px;}

#overviewBottom {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#overviewBottom div {
    display: inherit;
    align-items: center;
}

.checkBox {
    height: 15px;
    width: 15px;
    margin-right: 5px;
    border: 1px solid black;
    box-shadow: -1px 1px 3px #888;
}

/***** MISE EN PAGE *****/

/***** BANDEAU *****/

header {
    background-color: #1a1a1a;
    box-shadow: -1px 1px 2px black;
    position: relative;
    z-index: 4;
}

header img {
    max-width: 100%;
    opacity: 1 !important;
}

header h1 {
    bottom: 0;
    max-height: 50%;
    position: absolute;
    right: 2%;
}

#links {
    position: absolute;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 5px;
    width: 125px;
}

#links img {
    opacity: 0.5 !important;
    cursor: pointer;
}

#links img:hover {opacity: 0.75 !important;}


/*** CHOIX MODULE ***/

#moduleList {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 205px;
    justify-content: space-around;
}

#moduleList1 {
    display: flex;
    margin: 10px;
    justify-content: space-around;
    width: 100%;
}

#moduleList2 {
    position: absolute;
    flex-direction: column; 
    justify-content: space-around; 
    height: 60%;
    padding: 0 5%;
    z-index: 2;
}

.boxed {border: 1px solid black;}

.moduleTab {
    flex-grow: 1;
    border-radius: 10px 10px 0 0;
}

.moduleName {
    text-align: center;
    color: #f7f5d4;
    text-shadow: none;
}

.moreModuleName {
    text-align: center;
    color: black;
    text-shadow: none;
}

.pending {opacity: 0.1;}

#more, #more2 {
    position: absolute;
    right: 0;
    padding: 10px;
    background-color: #f7f5d4;
    z-index: 2;
}

#more {min-width: 12%;}

#more2 {min-width: 40%;}

//#more h2, #more2 h2 {color: black !important;}

#more2 h2 {font-size: 1.1em;}


/***** ECRAN PRINCIPAL *****/

#mainScreen, #mainScreen2 {
    display: flex;
    position: relative;
    flex-grow: 1;
}

/* REGLAGE AUDIO */

#audioBox {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: inherit;
    justify-content: center;
    align-items: center;
}

#mask {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.6;
    z-index: 5;
}

#audioWindow {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    height: 600px;
    max-height: 95%;
    width: 600px;
    max-width: 95%;
    opacity: 1;
    z-index: 6;
    box-shadow: -1px 1px 4px black;
}

.panelBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.audioIcon {width: 15%;}

.audioIcon img {margin: auto;}

.audioInput {width: 42.5%;}

.audioInput input {
    width: 80%;
    height: 2px;
    background-color: #999;
    border-radius: 1px;
}

input[type='range']::-moz-range-track {
    height: 2px;
    border-radius: 1px;
    background-color: black;
}

.inputVol::-moz-range-progress {
    height: 8px;
    border-radius: 5px;
    background-color: black; 
}

.inputPan::-moz-range-thumb, .inputVol::-moz-range-thumb {
    background-color: black;
    border: none;
    box-shadow: -1px 1px 2px grey;
}

#audioCommands {
    display: inherit;
    justify-content: space-around;
    align-items: center;
    height: 10%;
}

.command {
    min-width: 25%;
    border: 1px solid #666;
}


/* BARRE DE MENUS */

#menulist {
    position: relative;
    display: inherit;
    background-image: url(images/tissu.png);
    background-color: #4F1001;
    align-items: center;
    box-shadow: -1px 1px 2px black;
    z-index: 3;
}

.copy, .copy2 {
    padding-bottom: 5px;
    text-align: center;
}

.copy2 {
    position: absolute;
    bottom: 0;
    width: 100%;
    opacity: 0.5;
}

#homemenu {
    position: absolute;
    top: 0;
    display: inherit;
    width: 100%;
    height: 100%;
    max-height: 500px;
    justify-content: space-around;
    align-items: center;
}

#homemenu img {background-color: #9B6118;}


/*** ECRAN CENTRAL ***/

#column1 {
    display: inherit;
    position: relative;
    align-items: flex-start;
    overflow: hidden;
    flex-grow: 1;
}

.page {
    display: inherit;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.text {padding: 10px;}

#infoPage {align-items: center;}

#infoName {text-align: center;}

#optionPage, #howPage, #modulePage1, #modulePage2 {
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


/***** TEXTURE & COULEUR & OMBRE *****/

.ts {
    background-image: url(images/tissu.png);
    background-size: 240px 160px;
}

.ad {
    background-image: url(images/adobe.png);
    background-size: 100% auto;
}

.tan {background-color: #E3D3A6 !important;}

.beige {background-color: #9B6118 !important;}

.brown {background-color: #4F1001 !important;}

.black {background-color: #000000 !important;}

.grey {opacity: 0.4 !important;}

.lightgrey {opacity: 0.15 !important;}

.sepia {
    -webkit-filter: sepia(80%); /* Chrome, Safari, Opera */
    filter: sepia(80%);
    opacity: 0.4;
}

.grayscale {filter: grayscale(100%);}

.invis {opacity: 0 !important;}

.invis:hover {opacity: 0;}

.b-shB {box-shadow: -1px 1px 2px black !important;}

.b-shG {box-shadow: -1px 1px 2px grey !important;}

.night {background-color: #00061a;}

.night img {
    opacity: 0.5 !important;
    -webkit-filter: sepia(50%); /* Chrome, Safari, Opera */
    filter: sepia(50%);
}

.day {background-color: #E3D3A6;}

.day img {
    //opacity: 1;
    //filter: sepia(0%);
}

.smooth {transition: background-color 2s linear;}

.smooth img {transition: opacity 1.5s linear, filter 0.5s linear;}

.iconGr, .iconBl {
    background-image: url(images/tissu.png);
    height: 52px;
    width: 52px;
    border: 1px solid black;
}

.iconGr {box-shadow: -1px 1px 2px grey;}

.iconBl {box-shadow: -1px 1px 2px black;}

.noShdw {
    border: none !important;
    box-shadow: none !important;
    background: none;
}

.right {float: right};

.left {float: left;}

/* IMAGES DE FOND */

#imgHome, #imgSigi, #sigi, #imgFire {position: absolute;}

#imgSigi, #sigi {
    height: 100%;
    right: 0;
    opacity: 0.4;
}

/*** FIX FLEXBOX CHROME-SAFARI-OPERA ***/

.fullsize, #homemenu, #module, #intro, .howbox, #infoList, #infonav, #info, #optionList, .optionBox, #nameList, #name {flex-shrink: 0;}


/***** CONTENUS *****/

/***** INDEX *****/

/*** INDEX - VIEW 0 - ENTER ***/

#enter {
    display: inherit;
    flex-direction: column;
    align-items: center;
    padding-top: 10%;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#enter i {font-size: 0.85em;}

/*** INDEX - VIEW 2 - LEGENDE ***/

#intro {
    display: inherit;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
}

#intro p, #moduleText p {
    /* font-size: 1.1em; */
    /* font-weight: bold; */
    margin: 10px;
}

#introText, #introText2 {display: inherit;}

#introText2 {flex-direction: row-reverse;}

#introText div, #introText2 div {
    display: inherit;
    flex-direction: column;
    justify-content: space-evenly;
}

#introText img, #introText2 img {flex-shrink: 0 !important;}

.tipBox {width: 100%;}

.tip {
    margin: 10px auto;
    padding: 10px;
    background-color: #f7f5d4;
}

.tip div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tip img {
    flex-shrink: 0;
    margin: 10px 0;
}

.howbox {
    display: flex;
    align-items:center;
    padding: 10px;
}

.howbox img {margin: 0px 10px 0px 0px;}

.howVideo {background-color: rgba(0, 0, 0, 0.5);}

.howtext {
    padding-left:15px;
    width: 100%;
}

.howtext p {margin: 0px;}


/* INDEX - VIEW 4 - INFOS */

#infoSummary {
    display: inherit;
    flex-direction: column;
    justify-content: space-around;
    overflow: auto;
    padding-left: 5%;
}

#infoList {
    display: inherit;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

#infonav {
    display: inherit;
    flex-direction: row;
    margin-bottom: 20px;
}

#bookLeft, #bookRight {
    margin-top: 10px;
    width: 40%;}

#bookLeft img {float: right;}

#book {
    margin-top: 10px;
    width: 20%;
}

#book img {margin: auto;}

#info {
    display: inherit;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
}


/* INDEX - VIEW 5 - OPTIONS */

#optionList {
    display: inherit;
    flex-direction: column;
    justify-content: space-around;
    flex-grow: 1;
    max-width: 75vw;
    width: 100%;
    align-items: center;
}

.optionBox {
    position: relative;
    display: inherit;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
}

.optionText {
    display: inherit;
    flex-direction: column;
    justify-content: center;
}

.option {
    display: flex;
    min-width: 40%;
    align-items:center;
}

.option img {margin: 0px 10px 0px 0px;}

.optionStatus p {font-weight: bold;}


/*** MODULES - VIEW 6 ***/

#modulePage1, #modulePage2 {z-index: 1;}

#module1, #module2 {
    display: inherit;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
}

.moduleTitle {
    text-align: center;
    margin: 30px 10px 10px 10px;
}

#module2 i {margin-left: 10px;}

.moduleIntro {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.moduleIntro p {text-align: center;}

.moduleIntro img {
    width: 600px;
    max-width: 100%;
}

#sequenceList {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0 20px 0;
}

#sequenceList p {text-align: center;}

#sequence {
    display: inherit;
    width: 600px;
    max-width: 100%;
    margin-top: 30px;
    padding: 10px;
    background-color: #f7f5d4;
}

#sequenceId {padding-bottom: 10px;}

.sequenceBox {
    display: inherit;
    flex-direction: column;
    max-width: 60%;
}

#sequenceLink {padding-top: 10px;}

.phraseList {
    display: inherit;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

.sequencebutton {padding-bottom: 5px;}

#bc {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 60px 0 0 0;
}

.bcLinks {
    display: inherit;
    justify-content: space-evenly;
    margin-top: 20px;
    width: 100%;
    max-width: 480px;
}

.bcLinks a {max-width: 23%;}


/***** CHARGEMENT *****/

#loader {
    border: 8px solid #444;
    border-radius: 50%;
    border-top: 8px solid #f7f5d4;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    z-index: 2;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/***** VIDEO - DISABLED *****/

#videoPage {
    display: inherit;
    position: relative;
    width: 100%;
    height:100%;
    //top: 0;
    //bottom: 0;
    //left: 0;
    //right: 0;
    margin: auto;
    background-color: black;
}

#videoScreen {
    //position: absolute;
    //top: 0;
    //left: 0;
    //width: 100%;
    //height:100%;
    //z-index: 2;
}

iframe {
    border: 1px solid black;
    width: 100%;
    height: 100%;
}

#goBack, #goBack2 {
    display: flex;
    align-items: center;
    height: 100%;
}

#goBack img {
    //margin-top: 20px;
    opacity: 0.8;
}

#goBack2 {
    justify-content: center;
    width: 100%;
}

//#goBack img, #goBack p {filter: drop-shadow(-1px 1px 2px rgba(0,0,0,0.5)) !important;}


/***** SEQUENCE# *****/

#phrasePage {
    display: inherit;
    position: relative;
    width: 100%;
    flex-grow: 1;
}


/* SEQUENCE# - VIEW 0 - VIDEOS */

/* SEQUENCE# - VIEW 1 - PHRASES */

#screenLeft {
    position: relative;
    display: inherit;
    flex-direction: column;
    align-items: center;
    width: 280px;
    max-width: 25%;
    z-index: 1;
}

#linkHome {
    width: 100%;
    box-shadow: -1px 1px 2px black;
    z-index: 3;
}

.thumb {
    max-width: 100%;
    box-shadow: -1px 1px 2px black;
    border: 1px solid black;
}

#screenRight {
    position: relative;
    display: inherit;
    flex-direction: column;
    padding: 10px;
    width: 100%;
}

#screenRightButtons {
    display: inherit;
    justify-content: space-between;
    position: relative;
    width: 100%;
}

#pdf {
    position: absolute;
    right: 62px;
}

#pdf img {background-color: white;}

#options {
    display: inherit;
    flex-direction: column;
    position: absolute;
    right: 0;
    z-index: 1;
}

#options img {margin-bottom: 10px;}


/*** PLAYER AUDIO ***/

#player {display: inherit;}

#player img, #player div {margin-right: 10px;}

#tempo {
    display: flex;
    justify-content: center;
    align-items: center;
}

#tempo h1 {
    font-size: 1.7em;
    margin-right: 2px;
}

#tempoSetting {
    display: inherit;
    flex-direction: column;
    width: 40px;
}


/*** NAVIGATION PHRASES ***/

.navArrow {
    display: inherit;
    justify-content: space-between;
    flex-grow: 1;
    margin-left: 10px;
    z-index: 1;
}

.arrow {width: 50px;}

#videoList {
    display: flex;
    flex-direction: column;
    position: relative;
    flex-grow: 1;
    width: 100%;
}

#screenBottom {
    position: relative;
    display: inherit;
    height: 120px;
    max-height: 20%;
    padding: 5px;
    border-top: 1px solid black;
    overflow: auto;
}

#screenBottom div {
    display: inherit;
    align-items: center;
}

#screenBottom img {
    max-height: 100%;
    margin-right: 5px;
}

#videoList2 {
    position: absolute;
    display: inherit;
    height: 100%;
    overflow: auto;
}

#videoList2 div {
    height: 100%;
    width: 5px;
}

.rhythm {
    position: relative;
    width: 100%;
    text-align: center;
}

.rhythm a {display: block;}

.rhythm2 {
    flex-grow: 1;
    justify-content: space-around;
}

.fontBl {
    color: black;
    text-shadow: -1px 1px 2px #555;
}

#baaraList {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
    top: 0;
}

.seqList, .modList {
    position: absolute;
    width: 100%;
    box-shadow: -1px 1px 0px grey;
}

.modList {z-index: 6;}

.seqList {z-index: 5;}

.rhythm h2, .rhythm h3 {
    color: #f7f5d4;
    padding: 5px;
    text-shadow: -1px 1px 2px black;
    text-align: center;
}

.rhythm h2, .rhythm h1, .rhythm h3 {opacity: 0.85;}

.dropDown {
    display: inherit;
    flex-direction: column;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    padding: 0 10px 10px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.moduleIntro a {font-weight: bold;}

#videoList img {margin-bottom: 10px;}

#navPhrase {
    position: relative;
    display: inherit;
    justify-content: center;
    align-items: center;
    height: 12%;
}

#nameBox {
    display: inherit;
    flex-direction: column;
    position: absolute;
    top: 0;
    min-width: 250px;
    height: 100%;
}

#name {
    display: inherit;
    height: 100%;
    justify-content: center;
    align-items: center;
}

#name h2, #name p {padding: 0 5px;}

#nameList {
    box-shadow: -1px 1px 2px grey;
    padding-bottom: 5px;
    z-index: 4;
    max-height: 60vh;
    overflow: auto;
}

#nameList h2, #nameList p {opacity: 0.75;}

#nameList div {padding: 0 10px;}

.main {
    display: flex;
    justify-content: space-between;
}

.sub p {margin-left: 25px;}


/* IMAGES - PAGE INFO */
.image {
    max-width: 96%;
    max-height: 80vh;
    margin: 10px;
    box-shadow: -1px 1px 2px black;
}

.videoScore {
    position: absolute;
    bottom: 0px;
    height: 12.5%; 
    border-top: 1px solid black;
    text-align: center;
}


/* LARGEUR DES PARTITIONS INCRUSTEES - VIDEO*/

/* .djembe {
    width: 100%;
    padding: 0 1%;
}

.step {
    width: 49.7%;
    padding: 0 1%;
} */

/* ZONE A CLIQUER - LIEN VERS LA PHRASE JOUEE - VIDEO */

/* .clickableScore {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    width: 100%;
    margin: 0px;
    border: 0px none;
}

.embeddedSolo {
    display: inline;
    opacity: 1;
    -webkit-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}

.scoreWidth1 {max-width: 52.75%;}

.scoreWidth2 {max-width: 100%;} */


/* PARTITIONS */

#scoreTextBox {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

#scoreBox {
    position: relative;
    display: inherit;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex-grow: 1;
    margin: 10px;
}

.staves {
    position: relative;
    display: inline-flex;
    display: -webkit-inline-flex;
    flex-direction: column;
    vertical-align: top;
}

.staff {
    display: inherit;
    position: relative;
}

.staffLine {
    display: inherit;
    flex-direction: column;
}

.staffWidth1 {
    width: 90%;
    margin-left: 10%;
    /* A revoir !!! (inutile pour la vue ordi?) */
}

.staffWidth2 {
    width: 95%;
    margin-left: 5%;
    /* A revoir !!! (inutile pour la vue ordi?) */
}

.staffLine img {max-width: 100%;}

#iconAcc, #iconAcc2, #iconAccLow, #iconSolo, #iconSolo2, #iconDun, #iconDun2, #iconKen {
    position: absolute;
    max-height: 100%;
    opacity: 0.7;
    /* A revoir !!! (inutile pour la vue ordi?) */
}

#iconAccLow {top: 10%;}

/*** LIGNE INFERIEURE ***/

#bottomLine {display: inherit;}

/* COMMENTAIRES PHRASES */

#commentBox {
    display: inherit;
    z-index: 3;
}

#comment {
    position: absolute;
    bottom: 2px;
    box-shadow: -1px 1px 2px grey;
    padding: 10px;
    z-index: 3;
}

.scalable {max-width: 10%;}


/*** INDICATEUR DE TEMPS ***/

/* ASPECT */

.beat {
    position: absolute;
    height: 103%;
    top: -6%;
    background-color: white;
    background-image: url(images/tissu.png);
    opacity: 0.4;
    border: 1px solid black;
    box-shadow: -1px 1px 2px grey;
    z-index: -1;
}

/* LARGEUR */

.bar1 {width: 21%;}

.bar2 {width: 11.5%;}

.bar3 {width: 7.7%;}

.bar4 {width: 11.5%;}

.bar5 {width: 7.7%;}

.bar6 {width: 7.7%;}

.bar1k {width: 29%;}

.bar2k {width: 14.8%;}


/* POSITIONS */

.bar1beat0 {left: 15.2%;}
.bar1beat1 {left: 15.2%;}
.bar1beat2 {left: 36%;}
.bar1beat3 {left: 56.8%;}
.bar1beat4 {left: 77.6%;}

.bar2beat0 {left: 7.65%;}
.bar2beat1 {left: 7.65%;}
.bar2beat2 {left: 19%;}
.bar2beat3 {left: 30.3%;}
.bar2beat4 {left: 41.6%;}
.bar2beat5 {left: 54.1%;}
.bar2beat6 {left: 65.2%;}
.bar2beat7 {left: 76.6%;}
.bar2beat8 {left: 87.9%;}

.bar3beat0 {left: 7.7%;}
.bar3beat1 {left: 7.7%;}
.bar3beat2 {left: 15.2%;}
.bar3beat3 {left: 22.8%;}
.bar3beat4 {left: 30.2%;}
.bar3beat5 {left: 38.7%;}
.bar3beat6 {left: 46.2%;}
.bar3beat7 {left: 53.5%;}
.bar3beat8 {left: 61.1%;}
.bar3beat9 {left: 69.7%;}
.bar3beat10 {left: 77.1%;}
.bar3beat11 {left: 84.5%;}
.bar3beat12 {left: 92%;}

.bar4beat0 {left: 7.65%;}
.bar4beat1 {left: 7.65%;}
.bar4beat2 {left: 19%;}
.bar4beat3 {left: 30.3%;}
.bar4beat4 {left: 41.6%;}
.bar4beat5 {left: 54.1%;}
.bar4beat6 {left: 65.2%;}
.bar4beat7 {left: 76.6%;}
.bar4beat8 {left: 87.9%;}
.bar4beat9 {left: 7.65%;}
.bar4beat10 {left: 19%;}
.bar4beat11 {left: 30.3%;}
.bar4beat12 {left: 41.6%;}
.bar4beat13 {left: 54.1%;}
.bar4beat14 {left: 65.2%;}
.bar4beat15 {left: 76.6%;}
.bar4beat16 {left: 87.9%;}

.bar5beat0 {left: 7.7%;}
.bar5beat1 {left: 7.7%;}
.bar5beat2 {left: 15.2%;}
.bar5beat3 {left: 22.8%;}
.bar5beat4 {left: 30.2%;}
.bar5beat5 {left: 38.7%;}
.bar5beat6 {left: 46.2%;}
.bar5beat7 {left: 53.5%;}
.bar5beat8 {left: 61.1%;}
.bar5beat9 {left: 69.7%;}
.bar5beat10 {left: 77.1%;}
.bar5beat11 {left: 84.5%;}
.bar5beat12 {left: 92%;}
.bar5beat13 {left: 7.7%;}
.bar5beat14 {left: 15.2%;}
.bar5beat15 {left: 22.8%;}
.bar5beat16 {left: 30.2%;}
.bar5beat17 {left: 38.7%;}
.bar5beat18 {left: 46.2%;}
.bar5beat19 {left: 53.5%;}
.bar5beat20 {left: 61.1%;}

.bar6beat0 {left: 7.7%;}
.bar6beat1 {left: 7.9%;}
.bar6beat2 {left: 15.3%;}
.bar6beat3 {left: 22.8%;}
.bar6beat4 {left: 30.2%;}
.bar6beat5 {left: 38.7%;}
.bar6beat6 {left: 46.2%;}
.bar6beat7 {left: 53.6%;}
.bar6beat8 {left: 61.2%;}
.bar6beat9 {left: 69.7%;}
.bar6beat10 {left: 77.1%;}
.bar6beat11 {left: 84.5%;}
.bar6beat12 {left: 92%;}
.bar6beat13 {left: 7.9%;}
.bar6beat14 {left: 15.3%;}
.bar6beat15 {left: 22.8%;}
.bar6beat16 {left: 30.2%;}
.bar6beat17 {left: 38.7%;}
.bar6beat18 {left: 46.2%;}
.bar6beat19 {left: 53.6%;}
.bar6beat20 {left: 61.2%;}
.bar6beat21 {left: 69.7%;}
.bar6beat22 {left: 77.1%;}
.bar6beat23 {left: 84.5%;}
.bar6beat24 {left: 92%;}

.bar1kbeat0 {left: 15.2%;}
.bar1kbeat1 {left: 15.2%;}
.bar1kbeat2 {left: 44%;}
.bar1kbeat3 {left: 56.8%;}

.bar2kbeat0 {left: 8.6%;}
.bar2kbeat1 {left: 8.6%;}
.bar2kbeat2 {left: 23.2%;}
.bar2kbeat3 {left: 38.2%;}
.bar2kbeat4 {left: 56%;}
.bar2kbeat5 {left: 72%;}
.bar2kbeat6 {left: 86%;}

/* DEFILEMENT PULSATION */

.pulseBox {position: relative;}

.pulse {
    position: absolute;
    height: 100%;
    width: 5%;
    background-color: black;
    opacity: 0.3;
}

/* BARRES DE MESURE */

.barLines {
    position: absolute;
    top: 2.2%;
    bottom: 10%;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
    width: 2px;
}

.barLine1 {right: 0;}

.barLine2 {right: 46%;}

.barLine3a {right: 61.6%;}

.barLine3b {right: 30.7%;}
	
.acc, .dun {opacity: 0.5;}

/* PHRASE SELECTIONNEE */

.highlighted {
    background-image: url(images/tissu.png);
    box-shadow: -1px 1px 2px black;
}

.highlighted h2, .highlighted p {opacity: 1 !important;}


/*** ASPECT VOIX MUTEES ***/

/* BOUTONS */

.soft {
    background-color: #c4b170;
    opacity: 0.5;
    cursor: pointer;
}

.soft:hover {opacity: 0.6}

.mute {
    background-color: #f7f5d4;
    box-shadow: -1px 1px 2px grey;
    border: 1px solid gray;
    opacity: 0.15;
    cursor: pointer;
}

.mute:hover {opacity: 0.25}

.mutedIcon {opacity: 0 !important;}

.softIcon {opacity: 0.25 !important;}

.currentpage {
    opacity: 1;
    border: 1px solid white !important;
}

/***** CONTACT *****/

#contact {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 5%;
}

#contact a {
    display: flex;
    align-items: center;
    margin: 10% 0;
    z-index: 1;
}

#contact h2 {margin-left: 20px;}


/******************** RESPONSIVE DESIGN ********************/

/***** PORTRAIT *****/

@media only screen and (orientation: portrait) {
    #mainScreen, #mainScreen2 {flex-direction: column;}
    #menulist {
        flex-shrink: 1;
        height: 12%;
        justify-content: center;
        min-height: 60px;
        max-height: 120px;
        border-top: 1px solid black;
    }
    #homemenu {
        width: 100%;
        align-items: center;
    }
    #imgHome {
        bottom: 0;
        left: 0;
        width: 100%;
    }
    #sigi {height: 63% !important;}
    #contact {
        position: absolute;
        bottom: 0;
        justify-content: center;
        align-items: center;
        height: 37%;
        width: 100%;
    }
    //#contact a {margin: 3% 0;}
    .optionBox {
        flex-direction: column-reverse;
        width: 100%;
    }
    #infoSummary {height: 90%;}
    #screenLeft {display: none;}
    #mobilePort {
        display: flex;
        flex-direction: column;
    }
    #name {flex-direction: column;}
}

/* PORTRAIT : H > 768px */

@media only screen and (orientation: portrait) and (min-height: 768px) {}

/* PORTRAIT : H < 768px */

@media only screen and (orientation: portrait) and (max-height: 767px) {}


/* PORTRAIT : L > 768px */

@media only screen and (orientation: portrait) and (min-width: 768px) {
    #menu, #moduleList2, #more2 {display: none !important;}
    #links {top: 0;}
}

/* PORTRAIT : L < 768px */

@media only screen and (orientation: portrait) and (max-width: 767px) {
    #moduleList {display: none !important;}
    #menu {display: block;}
    #more {display: none !important;}
    #links {bottom: 0;}
    #moduleList2 {display: flex;}
}

/* PORTRAIT : L > 599px */

@media only screen and (orientation: portrait) and (min-width: 600px) {
    #comment {margin: 0 10px 10px 0;}
}

/* PORTRAIT : L < 600px */

@media only screen and (orientation: portrait) and (max-width: 599px) {
    #screenRight {padding: 5px !important;}
    #bottomLine {height: 36px !important;}
    .arrow {width: 36px !important;}
    .reduc, .arrow img {
        height: 36px !important;
        width: 36px !important;
    }
    #comment {margin: 0 5px 5px 0;}
    #player {margin-bottom: 5px;}
    #pdf {right: 41px !important;}
    #player img {margin-right: 5px;}
    #tempoSetting {width: 30px !important;}
    #tempoSetting img {
        height: 18px;
    }
    #tempo h1 {font-size: 1.2em !important;}
    .barLines {width: 1px !important;}
}

/***** PAYSAGE *****/

@media only screen and (orientation: landscape) {
    #mainScreen, #mainScreen2 {flex-direction: row;}
    #menulist {
        flex-direction: column;
        width: 205px;
        border-right: 1px solid black;
    }
    #homemenu {flex-direction: column !important;}
    #imgHome {
        min-width: 100%;
        max-width: 120%;
    }
    #infoSummary {height: 100%;}
    #menu, #moduleList2, #more2 {display: none !important;}
    #links {top: 0;}
    #screenLeft {border-right: 1px solid black;}
    #mobilePort {display: none;}
    #screenBottom {display: none;}
}

/* PAYSAGE : L < 733px */

@media only screen and (orientation: landscape) and (max-width: 732px) {
    h1 {font-size: 1.6em !important;}
    h2 {font-size: 1.2em !important;}
    #screenRight {padding: 5px !important;}
    #bottomLine {height: 36px !important;}
    .arrow {width: 36px !important;}
    .reduc, .arrow img {
        height: 36px !important;
        width: 36px !important;
    }
    #comment {margin: 0 5px 5px 0;}
    #player img {margin-right: 5px;}
    #pdf {right: 41px !important;}
    #tempoSetting {width: 30px !important;}
    #tempoSetting img {
        height: 18px;
    }
    #tempo h1 {font-size: 1.2em !important;}
    .barLines {width: 1px !important;}
    #contact {max-width: 50%;}
}

@media only screen and (orientation: landscape) and (min-width: 733px) {
    #comment {margin: 0 10px 10px 0;}
}

/* PAYSAGE : L > 640px */

@media only screen and (orientation: landscape) and (min-width: 641px) {
    .optionBox {
        min-height: 100px;
        max-height: 150px;
        padding: 10px;
    }
}

/* PAYSAGE : L < 641px */

@media only screen and (orientation: landscape) and (max-width: 640px) {
    #enter {top: 5px;}
    .optionBox {
        flex-direction: column-reverse;
        width: 100%;
        margin-bottom: 15px;
    }
}

/* PAYSAGE : H > 599px */
@media only screen and (orientation: landscape) and (min-height: 600px) {
    #name {flex-direction: column;}
}

/* PAYSAGE : H < 600px */
@media only screen and (orientation: landscape) and (max-height: 599px) {}


/***** LARGEUR *****/

/* L < 1025 px */
@media only screen and (max-width: 1024px) {
    #screenLeft {max-width: 28%;}
    #linkHome img {width: 100%;}
    .moduleName, .moreModuleName {font-size: 1em !important}
    /*#sequenceList2 {display: none;}*/
    #modulePage1 {display: none;}
}

/* L > 1024 px */
@media only screen and (min-width: 1025px) {
    #linkHome img {height: 80px;}
    #modulePage2 {display: none;}
    #sequenceList2 {
        display: flex;
        flex-direction: column;
        max-width: 22%;
        max-height: 100%;
        padding-left: 5px;
        text-align: center;
        overflow-y: auto;
        /*background: linear-gradient(to left, #9B6118, transparent);*/
    }
    #sequenceTitle {
        display: flex;
        justify-content: center;
        flex-shrink: 0;
        align-items: center;
        height: 50px;
    }
    /*#sequenceList2 h2 {margin: 0 0 5px 0;}*/
    #sequence {
        flex-direction: column;
        margin: 10px 0 3px 0 !important;
    }
    .sequenceBox {
        width: 100%;
        max-width: 320px
    }
    #sequenceLink {position: relative;}
    #sequenceLink h2 {
        color: #f7f5d4;
        position: absolute;
        bottom: 5px;
        width: 100%;
        text-shadow: -2px 2px 2px #000;
    }
    .phraseList {display: none;}
    #modulePage1 {
        flex-direction: row;
        align-items: flex-start;
        padding: 0 !important;
    }
    #module1 {
        max-width: 78%;
        height: 100%;
        padding: 10px;
        overflow-y: auto;
        justify-content: space-between;
    }
    #moduleText p {margin: 5px;}
    .moduleTitle {margin: 5px !important;}
    #moduleLinks {
        display: inherit;
        justify-content: center;}
    #moduleLinks img {
        max-width: 95%;
        margin: auto;
    }
    #bc {margin: 0 auto!important;}
    .bcLinks {
        max-height: 10vh;
        //margin-top: 5px;
        margin: 10px;
    }
    .bcLinks img {max-height: 100%;}
}

/* L < 768 px */
@media only screen and (max-width: 767px) {
    header h1 {font-size: 1.7em;}
    #introText, #introText2 {
        flex-direction: column;
        align-items: center;
    }
    #contact h2 {
        margin: 5px !important;
        font-size: 1.2em;
    }
}

/* L > 767 px */
@media only screen and (min-width: 768px) {
    header h1 {font-size: 2.5em;}
}

/* 767px > L > 479px */
@media only screen and (max-width: 767px) and (min-width: 480px) {
}

/* iphone6s */
@media only screen and (width: 667px) and (height: 375px) {
}

/* L < 641px */
@media only screen and (max-width: 640px) {
    .howSublist {width: 100% !important;}
    .moduleName {font-size: 0.9em !important}
}

/* L > 640 px
@media only screen and (min-width: 641px) {} */

/* 641px > L > 480px */
@media only screen and (max-width: 640px) and (min-width: 481px) {
    #howPage h2, #optionPage h2, #modulePage1 h2, #modulePage2 h2, #infoPage h2 {font-size: 1.2em !important;}
    #howList {margin-top: 10px;}
    p {font-size: 0.8em !important;}
    header h1 {font-size: 2em !important;}
}

/* L < 480px */
@media only screen and (max-width: 479px) {
    #screenRight {display: flex;}
    #info div {
        display: inherit;
        flex-direction: column;
        align-items: center;
    }
    #modulePage1 h2, #modulePage2 h2, #audioWindow h2 {font-size: 1.1em !important;}
    #optionPage h2, .iconDscr, #howTitle {display: none;}
    .optionStatus p {font-size: 0.95em;}
    header h1 {font-size: 1.7em;}
    p {font-size: 0.8em !important;}
    .videoCtrl div {
        height: 38px !important;
        padding: 0 !important;
    }
    .videoCtrl img {
        height: 36px !important;
        width: 36px !important;
        margin: 0 !important;
    }
}

/***** HAUTEUR *****/

/* H > 568px */
@media only screen and (min-height: 568px) {
    header img {max-height: 120px;}
    .option {margin: 10px;}
}

/* H < 568px */
@media only screen and (max-height: 567px) and (orientation: landscape) {
    header img {max-height: 80px;}
    #menulist {width: 137px !important}
    #moduleList {left: 137px !important}
    .option {margin: 5px;}
}