/* GLOBAL STYLES */
body {
  background: #fff;
  padding-top: 5em;
  display: flex;
  justify-content: center;
  height:25000px;
}
/*font-family: 'Open Sans', sans-serif;
font-family: 'Yantramanav', sans-serif;*/

::-webkit-scrollbar { 
    display: none; 
}
iframe::-webkit-scrollbar
{  
    display: none;
}
iframe
{  
    overflow: hidden;
}
/*- GRAPHIQUE -*/
.main{
  width:1400px;
  position: fixed;
}
.main__graph {
    position: fixed;
    top:58%;
    left:20%;
    width:750px;
    height:600px;
    transform:translate(-25%,-50%);
    margin-right: 50px;
}
.highcharts-point {
  fill: #22d2a8;
  border-radius: 5px;
}
.highcharts-background{
  fill:rgba(255, 255, 255,.0);
}
.highcharts-title tspan{
  font-family: 'Yantramanav', sans-serif;
  font-size: 30px;
}
.highcharts-axis-title{display: none;}
.highcharts-credits{display: none;}
.highcharts-grid-line{display:none;}
.highcharts-xaxis-labels{display: none;}
.highcharts-point{display:none;}
.highcharts-legend-item{display:none;}
text{
  font-family: 'Yantramanav', sans-serif;
}

/*- INFORMATIONS-*/
.number {
  font-size: 150px;
  color:black;
  text-align: center;
  font-family: 'Yantramanav', sans-serif;
  display: inline;
  color:#999999;
}
.main__info--txt{
  font-family: 'Open Sans', sans-serif;

}
.main__info{
  position: fixed;
  right:2%;
  top:50%;
  width:400px;
  height:650px;
  transform:translate(0%,-50%);
/*  background-color: #03ECBC;*/
  box-sizing: border-box;
  padding: 50px;
  color:#999999;
}


/*- NAV -*/
a{
      color: white;
      text-decoration: none;
    }

    .nav{
      width:100%;
      position: fixed;
      top:0;
      left:0;
      height: 130px;
      font-family: "Yantramanav", sans-serif;
    }
.nav__el{

      position: absolute;

      width: 75vw;

      margin: 0;

      font-family: "Yantramanav", sans-serif;





    }

    .nav__el li{

      font-size: 1.5vw;

      display: inline-block;

      position: relative;

      z-index: 10;

      margin: 2vw 0;

      color: white;

      padding: 0;

    }

    .nav__el h1{

      font-size: 1.8em;

      margin: -0.75vw 0 0 2vw;

    }

    .nav__el a h1{

        display: inline-block;

      transition-duration: 0.3s;

        transition-property: transform;

        transform: translateZ(0);

        box-shadow: 0 0 1px rgba(0, 0, 0, 0);

    }

    .nav__el a h1:hover {

          transform: translateY(-3px);

        }



        .underline {

          display: inline-block;

     position: relative;

     margin-right: 2vw;

      text-align: center;

      }

  

    .underline:after {

        content: '';

        position: absolute;

        bottom: -.2em;

        left: 50%;

        right: 50%;

        height: 1px;

        background: currentColor; /*system color*/

        transition: all ease .2s;

      } 

    

    .underline:hover:after {

        left: 0;

        right: 0;

        height: 2px;

      } 

    

    .underline:before {

        position: absolute;

        transform: translateX(-100%);

        left: -10px;

        color: #eee;

        opacity: .3;

        font-weight: 100;

        font-size: .8em;

      }

    .col--left{

      float: left;

    }

    .col--right{

      float: right;

    }

    ul {

      padding: 0;

    }

    .shadow{ 

            filter: drop-shadow( 0px -30px 30px #000 );

    }
    /*- ANIMATION CSS -*/
    .main__info--txt--add{
      animation: txtAdd 1s steps(30, end);
}
    @keyframes txtAdd {
      from { height: 0;
      opacity:0;}
      to { height: 100%;
      opacity:1;}
    }

    .main__info--txt--rem{
      animation: txtRemove 1s steps(30, end) forwards;
}
    @keyframes txtRemove {
      from { 
      opacity:1;}
      to { 
      opacity:0;}
    }

    .highcharts--add{
    animation:chartsAdd 0.5s ease-in forwards;
    }
    @keyframes chartsAdd {
      from { height: 0;
      opacity:0;}
      to { height: 100%;
      opacity:1;}
    }
    .highcharts--rem{
    animation:chartsRem 0.5s ease-in forwards; 
    }

        @keyframes chartsRem {
      from { 
      opacity:1;}
      to { 
      opacity:0;}
    }
.hide{
  display: none;
}