:root {
  --text-color:#383838;
  --light-color:hsl(210, 55%, 49%);
  --alt-color:hsl(210, 55%, 22%);
  --cta-color:hsl(345, 91%, 57%);
  --ring-play:hsl(0, 0%, 63%);
  --shadow-color:rgba(0, 0, 0, 0.18);
  font-size: 18px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Epilogue';
  box-sizing: border-box;
  font-weight: 300;
  font-size: .9rem;
  padding: 0;
  margin: 0 auto;
  height: 100vh;
  text-shadow: none !important;
  color: var(--text-color);
  box-sizing: border-box;
}
h1 {
  font-weight: 900;
  font-size: 3rem;
}
h2 {
  margin-top: 1rem;
  padding-top: 4rem;
}
p {
  line-height: 1.3rem;
  padding: 0 1rem;
}
a {
  cursor: pointer;
  text-decoration: none !important;
}
.container > button {
  text-decoration: none;
  border: none;
  padding: .4rem 2rem;
  font-size: .8rem;
  background-color: var(--cta-color);
  color: white;
  border-radius: .15rem;
  transition: all 50ms ease-in-out;
  box-shadow: var(--shadow-color) .6rem .6rem .7rem;
  cursor: pointer;
  user-select:none;
}
.container > button:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-color) .8rem .8rem 1rem;
}
.container > button:active {
  transform: scale(0.95);
}
input {
  user-select:none;
}
.hide {
  display: none;
}

/* ////////////////////////////////: NAVIGATION MAIN.....................///////////////////////////// */
nav, .entete {
  /* font-family: 'Roboto Mono'; */
  font-family: 'Epilogue';
  font-size:.8rem;
  
}
.entete {
  padding: 0px 0px 10px 0px;
  grid-column: 1 / 4;
  z-index: 10;
  transition: transform 250ms ease;
}
.entete>a {
  display: inline-block;
  transition: all .1s ease-in-out;
}
.entete>a:hover, .capsule:hover {
  transform: scale(1.1);
}
.capsule {
  overflow: hidden;
  display: inline-block;
  position: relative;
  height: .7rem;
  top:.1rem;
  padding: 0;
  margin: 0;
  transition: all .1s ease-in-out;
}
.material-icons {
  vertical-align: middle;
}
.gros {
  font-family: 'Epilogue';
  position: relative;
  top:2rem;
  font-weight: 900;
  margin-top:0px;
  color:rgb(95, 95, 95);
}
.capsule:nth-of-type(1)>.gros  {
  animation: popup .4s ease 500ms forwards;
}
.capsule:nth-of-type(2)>.gros {
  animation: popup 1s ease 700ms forwards;
}
.capsule:nth-of-type(3)>.gros {
  animation: popup .6s ease 900ms forwards;
}
.capsule:nth-of-type(4)>.gros {
  animation: popup 1s ease 1.2s forwards;
}
.capsule:nth-of-type(5)>.gros {
  animation: popup .4s ease 2000ms forwards;
}
.capsule:nth-of-type(6) >.gros {
  animation: popup 1s ease 2s forwards;
}

.up {
  /* transform: translateY(-100%); */
}

.nav-toggle {
  position: absolute;
  display: none;
  width:2.2rem;
  height:2rem;
  /* background-color: cornflowerblue; */
  border:0;
  left:0px;
  margin: .5rem;
  transform: translateY(100%);
  border-radius: .15rem;
}


.hamburger,
.hamburger::before,
.hamburger::after {
  display:block;
  position:relative;
  width:1.25rem;
  margin:auto;
  border:0;
  height:.2rem;
  background-color: var(--text-color);
  border-radius: .2rem;
  transition: transform 800ms ease;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
}
.hamburger {
  transform: rotateZ(-45deg);
}
.hamburger::before {
  /* transform: rotateZ(45deg); */
  opacity:0;
  top:-.4rem;
}
.hamburger::after {
  /* transform: rotateZ(-45deg); */
  transform: translateY(-.4rem) rotateZ(90deg) ;
  top:.4rem;
}
.entete.up .hamburger{
  transform: rotateZ(0);
}
.entete.up .hamburger::after {
  transform: translateY(0) rotateZ(0) ;
}
.entete.up .hamburger::before {
  opacity:1;
}








/* ///////////////////////////////////PARENT + CONTAINER GRID ETC.........../////////////////////////// */
.parent {
  display: grid;
  grid-template-columns: auto 1fr auto ;
  grid-template-rows: auto 1fr 0px;
  height: 100%;
}
.container {
  grid-column: 2 / 3;
  overflow:scroll;
  scroll-behavior: smooth;
  /* padding: 0 2rem; */
}
.importFrame {
  /* padding:1rem 6rem !important; */
}






.left {
  grid-column: 1/2;
  /* background-color: red; */
}

.right {
  grid-column: 3 / 4;
  /* background-color: green; */
}
.left, .right {
    min-height: 400px;
}

iframe {
  border: none;
}

.para, .eng, .fr {
  text-align: justify;
  margin: 0 auto;
  max-width: 800px;
}
.center {
  display: block;
  text-align: center;
  margin: 0 auto;
  justify-content: center;
}




/* ///////////////////NEX CSS MTRNM ////////////////////////////////////////////////////////*/
.flag {
  border-radius: 100%;
  height:1rem;
  width:1rem;
  vertical-align: middle;
  opacity: .65;
}
.mtrnmBlock {
  text-align: center;
  margin-bottom: 4rem;
}
.miniMtrnm {
  /* display: none; */
  position: absolute;
  top:10rem;
  /* width:fit-content; */
  width:40px;
  display: flex;
  text-align: center;
  flex-direction: column-reverse;
  justify-items: center;
  border-radius: 0 .6rem .6rem 0;
  padding: .4rem .8rem;
  background-color: rgb(255, 255, 255);
  box-shadow: var(--shadow-color) .5rem .5rem .6rem;
  z-index: 2;
  cursor: pointer;
  transition: transform 80ms ease-in-out;
}
.miniMtrnm > canvas {
  margin: 0 auto;
}
.miniMtrnm:hover {
  transform: scale(1.1);
}
.badge {
  position: relative;
  top:-8px;
  background-color: #F1415F;
  font-size: .6rem !important;
  color: white;
  padding:.1rem .3rem;
  border-radius: 3px;
  margin-left: .4rem;
}

.wrap {
  max-width: 600px;
  position:relative;
  margin: 0 auto;
}

.titre-popup, .titre-popup2 {
  overflow: hidden;
  position: relative;
  line-height: 1rem;
  height:3.5rem;
  margin-bottom: 1rem;
}
.titre-popup > h1 {
  position: relative;
  top:3.5rem;
  /* animation: popup 1s ease forwards; */
}
.titre-popup2 > h1 {
  position: relative;
  top:3.5rem;
  /* animation: popup 1s ease forwards; */
}
.pop {
  animation: popup 1s ease forwards;
}
@keyframes popup {
  100%   { top:0;}
}

.rings{
  height: min(80vw, 380px);
  width: 100%;
  /* position: sticky;
  top:0px; */
}

.rings>svg {
  position: relative;
  display: block;
  margin: 0 auto;
  height: 100%;
}
.playtri {
  transform-origin:980% 200%;
  transform:scale(1)
}
#tri1.mystyle {
  animation: smallpop 110ms linear 70ms 1 normal both;
}
#tri2.mystyle {
  animation: pop 90ms linear 30ms 1 normal both;
}
#tri3.mystyle {
  animation: bigpop 70ms linear 0ms 1 normal both;
}
#tri1 {
  stroke: var(--ring-play) !important;
  opacity: 0.4;
}
#tri2 {
  stroke: var(--ring-play) !important;
  opacity: .4;
}
#tri3 {
  stroke: var(--ring-play) !important;
  opacity: .8;
}



.clock {
  position: relative;
  margin: 0 auto;
  margin-bottom: 0.3rem;
  padding: .8rem;
  border-radius: 5px;
}
#controls {
  position: relative;
}
.clockTempo {
  position: absolute;
  left:50%;
  top:15%;
}


/* /////////////////////// */
#moins.btnTempo  {
  background: url(../img/Minus.png);
}
#plus.btnTempo  {
  background: url(../img/Plus.png);
}
.btnTempo {
  display: inline-block;
  margin:0 1rem;
  vertical-align:text-bottom;
  background-color:#57A3EF;
  width: 25px;
  height: 25px;
  border-radius: 100%;
  cursor: pointer;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
  user-select: none;
}
.btnTempo:hover {
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.1);
}
.btnTempo:active {
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
}
/* ///////////////////////////// */
.beat {
  position:absolute;
  right: 2rem;
  top: 4rem;
}
.mixette {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr);
  grid-gap: 1rem;
}

@keyframes bigpop {
  0% { transform: scale(1); }
  30% { transform: scale(1.15); }
  100%   { transform: scale(1);}
}
@keyframes pop {
  0% { transform: scale(1); }
  50%   { transform: scale(1.1);}
  100%   { transform: scale(1);}
}
@keyframes smallpop {
  0% { transform: scale(1); }
  50%   { transform: scale(1.02); }
  100%   { transform: scale(1); }
}




.material-icons.md-18 { font-size: 1.2rem; }
.material-icons.md-24 { font-size: 1.6rem; }
.material-icons.md-36 { font-size: 2rem; }
.material-icons.md-48 { font-size: 2.4rem; }
.material-icons.blue { color: #008afb; }
.material-icons.red { color: #F1415F; }



/* ////////////////////////////WRAP2////// */
.wrap2 {
  height:auto;
  width: auto;
  max-width: 320px;
  position:relative;
  margin: 0 auto;
  background: white;
  padding: 8px 8px 16px 8px;
  box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
}
.presetSelected {
  color:white !important;
  background-color: #008afb;
}
.texteBoite {
  font-family: 'Roboto Mono';
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(0, 0, 0, 0.65);
}
ul.presets{
  display: flex;
  flex-wrap: wrap;
}
ul.presets >li {
  border:1px solid #008afb;
  margin:2px;
  color:#008afb;
  width:60px;
  cursor:pointer;
}



/* /////////////////////////////////////////////////// MOBILE   //////////////////////////////////////////////////////////// */
@media screen and (max-width: 920px) {
/* :root {
  font-size: 16px;
} */
  /* .up {
    transform: translateY(0);
  } */
  .parent {
    grid-template-rows: 1fr 0px;
    gap: 0;
    padding:0;
  }
  .entete {
    display:block;
    position: absolute;
    top:0px;
    text-align: justify;
    background-color: rgb(253, 208, 112);
    font-size: 1rem;
    line-height: 1.4rem;
    /* position: relative; */
  }
  .up {
    /* height: 50%; */
    transform: translateY(-100%);
  }
  .nav-toggle {
    display: block;
    background-color: rgb(253, 208, 112);
  }
 

  .left, .right {
    display:none;
  }

  .importFrame {
    width: 100vw !important;
    margin:0;
    padding:0 !important;
  }
  /* .entete>img{
    display: none;
  } */
  /* #menu {
    display: flex;
    flex-direction: line;
    height:30px;
    width: 100vw;
    overflow: scroll;
    align-items:center;
  } */
  
  
  .capsule {
    height: 1rem;
    top:0.1rem;
  }
  .gros {
    top:.7rem;
    font-weight: 900;
  }
  .entete > a > img {
    width:26px;
  }
  
  .miniMtrnm {
    top:30rem;
  }
  .mtrnmBlock {
    padding:0.4rem;
  }
  .drop {
    display:flex;
    flex-direction: column;
  }
  .entete > span {
    font-size: 0.8rem;
  }
  #fond-wave {
    display:none;
  }

  .container {
    grid-column: 1 / 4;
    padding: 0rem;
    min-height: 300px;
  }
  /* .container  iframe {
   
    height: 100%;
    min-height: 300px;
  } */
  span {
    font-size: 1rem;
  }
  #raccourci {
    display:none !important;
  }
  

}