/*@import url('https://fonts.googleapis.com/css?family=Prosto+One');*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  font: 18px "Palatino", "Garamond", sans-serif;
  scrollbar-width: thin;
}

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

.slide_main {
  width:100%;
}

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

@media (min-width: 900px) {
  /*
.section {
   height: 100%;
}
.article {
    height:100vh; 
    width:calc(100vh * 4 / 3); 
    margin:0 auto;
    overflow-y: hidden;
}
*/
html, body {
  font: 22px "Palatino", "Garamond", sans-serif;
}

.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; 
}

.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;
}

h1,h2 {
  font-size: 22px; /* fallback */ 
  font-size: calc(1rem + 1.0vw);
  text-align: center;
  margin-top:10px;
  /*font-family: "Prosto One", serif;*/
  }

h3 {
  font-size: calc(0.8rem + 0.8vw);
  /*font-family: "Prosto One", serif;*/
  color: #666666;
  margin-bottom: 15px;
  text-align: center;
}

p {
  font-size: 22px;
}

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

.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;
}

.refs {
  text-align: right;
}


@media print {
html, body {
  margin: 0!important;
  padding: 0!important;
  height:100%;
  overflow: hidden;
} 
@page {
   width:calc(100vh * 4 / 3); /* On est a 4/3 en largeur par rapport a hauteur */
   height:100%;
     margin: 0!important;
  padding: 0!important;
   overflow: hidden;
}
button.left,button.right {
  display:none;
}
.container {
  display:none;
}


}


/*
@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%;
  flex-basis: 0 0 16.66%;
}

.col-4 {
  width: 33.32%;
  flex-basis: 0 0 33.32%;
}

.col-6 {
  width: 50%;
  flex-basis: 0 0 50%;
}

.col-8 {
  width: 66.64%;
  flex-basis: 0 0 66.64%;
}

.col-10 {
  width: 83.33%;
  flex-basis: 0 0 83.33%;
}

.col-12 {
  width: 100%;
  flex-basis: 0 0 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%;
  }
}