* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Seems to work : Chrome workaround for click on svg */
svg { pointer-events: all; }
svg * { pointer-events: all; }

html, body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 20px;
  font-weight: 300;
  scrollbar-width: thin;
  line-height: 1.3;
}

h1,h2 {
  font-family: Roboto, serif;
  font-weight: 700;
  font-size: 24px; /* fallback */ 
  /*font-size: calc(1.4rem + 1.0vw);*/
  margin: 10px 0 0 0;

  }

h3 {
  font-family: Roboto, serif;
  font-weight: 500;
  font-size: 22px; /* fallback */ 
  /*font-size: calc(1.0rem + 0.8vw);*/

  /*font-family: "Prosto One", serif;*/
  color: #000000;
  margin:10px 0 0 0;
}


a {
  color: inherit;
  text-decoration: none;
}


strong {
  font-family: "Fira Sans", Arial, sans-serif;
  font-weight: 600;
}

.slide_container {
  width: 100%;
    margin:0 auto;
    /*overflow-y: hidden;  */
}

.slide_main {
  width:100%;
  font-size: 20px; /* fallback */ 
  /*font-size: calc(1.2rem + 1.0vw);
  font-family: "Fira Sans", Arial, sans-serif;
  font-weight: normal;*/
  padding: 10px 5px 5px 5px;
    /*padding: 0 10px 0 10px;*/
}

button.left {
  display:block;
  position:absolute;
  top:0;
  left:0;
  background-color:transparent;
  border:none;
  cursor:pointer;
  color:#aaaaaa;
}
button.right {
  display:block;
  position:absolute;
  top:0;
  right:0;
  background-color:transparent;
  border:none;
  cursor:pointer;
  color:#aaaaaa;
}

@media (min-height: 600px) {
@media (min-width: 800px) {

.slide_container {
   width:calc(100vh * 4 / 3); /* On est a 4/3 en largeur par rapport a hauteur */
   height:100vh;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
  justify-content: center;  
      margin:0 auto;
      padding: 0;
    /*overflow-y: hidden;*/
}

.slide_main {
   flex: 1; 
   font-size: 3.5vmin;
}

h1,h2 {
   font-size: 4.5vmin;
}

.slide_centering {
    position: relative;
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
    max-width: 800px;
}

.tangle_parameters {
  display:block; 
  position:absolute; 
  bottom: 5px;
}

}
}

/*
@media (min-width: 1250px) {
button.left,button.right {
  display:none;
}
}
*/


.container {
  width: 100%;
}
.container:after {
  content: "";
  display: table;
  clear:both;
}

.aside {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto; 
  padding-left: 10px;
  padding-right: 10px;
  border-left: 4px solid transparent;
}



img {
  display: block;
  max-width: 100%;
}


.blue_color {
  color: #00ccff;
}
.red_color {
  color: #fc0e64;
}
.yellow_color {
  color: #ffa500;
}
.blue_border {
  border-bottom: 2px solid #00ccff;
}
.red_border {
  border-bottom: 2px solid #fc0e64;
}
.yellow_border {
 border-bottom: 2px solid #ffa500;
}


ul {
  list-style-position: inside;
}



/*
@media (min-width: 900px) {
  .refs {
    display: block;
    position: relative;
    bottom: 0px;
    right: 0px;
  }
}
*/
/* grid with flex based on (a minor simplification from my side)
https://github.com/officialbalazs/responsive.css */
/* Usage :;
<div class="row">
  <div class="col">Takes up 50% of the screen</div>
  <div class="col">Takes up 50% of the screen</div>
</div>

<div class="row">
  <div class="col">Takes up 33.33% of the screen</div>
  <div class="col">Takes up 33.33% of the screen</div>
  <div class="col">Takes up 33.33% of the screen</div>
</div>

<div class="row">
  <div class="col-12">Takes up 100% of the screen</div>
</div>

<div class="row">
  <div class="col-2">Takes up 16.66% of the screen</div>
  <div class="col-4">Takes up 33.33% of the screen</div>
  <div class="col-6">Takes up 50% of the screen</div>
</div>
*/
.row {
  width: 100%;
  /* white-space: nowrap; */
  display: flex;
  margin-top: 20px;
  align-items: stretch;
}

.row > .col {
  flex: 1;  
}

@media (max-width: 600px) {
  .row {
    display: block;
  }
}


.col-1 {
  width: 8.33%;
}

.col-3 {
  width: 24.99%;
}

.col-5 {
  width: 41.65%;
}

.col-7 {
  width: 58.31%;
}

.col-9 {
  width: 74.97%;
}

.col-11 {
  width: 91.63%;
}

.col-2 {
  width: 16.66%;
}

.col-4 {
  width: 33.32%;
}

.col-6 {
  width: 50%;
}

.col-8 {
  width: 66.64%;
}

.col-10 {
  width: 83.33%;
}

.col-12 {
  width: 100%;
}

@media (max-width: 600px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    width: 100%;
  }
}


@media print {
html, body {
  margin: 0!important;
  padding: 0!important;
  height:100%;
  overflow: hidden;
} 
@page {
     margin: 0!important;
}
button.left,button.right {
  display:none;
}


.container {
  display:none;
}


}