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

* {
  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: "Fira Sans", Arial, sans-serif;
  font-size: 17px;
  font-weight: 300;
  scrollbar-width: thin;
  line-height: 1.3;
}

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

html {
  background: #ffffff;
}


@media (max-width: 600px) {
  html {
    background: #ffffff; 
  }
}

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

.slide_main {
  width:100%;
}

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

input {
  font-size: 85%;
    border-radius: 10px;
    border: 1px solid #b0376e;
    padding: 2px;
    background: #ffffff; /*#800060;*/
    color: #b0376e; /* #ffcc00; */
    
}
input:focus {
  outline: none;
}


@media (min-width: 900px) {
  /*
.section {
   height: 100%;
}
.article {
    height:100vh; 
    width:calc(100vh * 4 / 3); 
    margin:0 auto;
    overflow-y: hidden;
}
*/

.slide_container {
   width:100%;
   max-width: 800px;
   /*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 {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 0 5px 0 5px;
}
.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(1.4rem + 1.0vw);
  padding: 10px 0 0 0;
  font-family: "Open Sans Condensed", serif;
  }

h3 {
  font-size: calc(1.0rem + 0.8vw);
  font-family: "Open Sans Condensed", serif;
  /*font-family: "Prosto One", serif;*/
  color: #000000;
  padding:10px 0 0 0;
}


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

ul, ol {
  list-style-position: inside;
}

ol {
  counter-reset: item;
}

ol > li {
  padding: 0 0 0 2em;
  text-indent: -2em;
  list-style-type: none;
  counter-increment: item;
}

ol > li:before {
  display: inline-block;
  width: 1em;
  padding-right: 0.5em;
  font-weight: bold;
  font-size:120%;
  text-align: right;
  content: counter(item) ".";
}

.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;
}
.black_border {
 border-bottom: 2px solid #000000;
}

.refs {
  text-align: right;
}


@media print {
html, body {
  margin: 0!important;
  padding: 0!important;
  height:100%;
  overflow: hidden;
} 
@page {
  margin: 0!important;
}
button.left,button.right {
  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:after {
  content: " ";
  display: block;
  clear: both;
}

.row > .col {
  flex: 1;  
}

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

  small {
    font-size: 90%;
  }
}

.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: 16.66%;
}

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

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

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

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

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