@media only screen and (max-width: 600px){
  /*style smartphones et petites tablettes en portrait*/
  
  .bton_to_circle{
    border-radius: 15rem!important;
    border: 1px solid red;

  }
  
    .navigation{
    margin: 0;
    font-size: small; 
    margin-bottom: 0px;


    a {
      margin: 5px;
      padding: 5px;
      position: relative;
      color: blue;
    }



    .nav-active{
      &::after {
        content: '';
        width: 100%;
        height: 5px;
        background-color: aqua;
        position: absolute;
        bottom: 1px;
        left: 50px;
        transform: translateX(-50%);
      }
    }
  }
  
#wrapper {
  width: 300px;
  height: 90px;
  background-color: yellow;
  overflow-x: hidden;;
}


#parent {
  display: inline-block; 
	width: 30%; 
	background-color: #eee; 
	height: auto; 
  padding: 1em;
  outline: 1px solid #CCC;
  border: 1px solid #999;
  background-color: #999;
  margin: 0 auto; 
  text-align: left;
  
      
}

#child {
  display:block;
  width: 50%;
  height: 100%;
  background-color: red;
  overflow-x: hidden;;

}
}

@media only screen and (min-width: 601px) and (max-width: 991px){
  /*style petites-moyennes tablettes */

  .bton_to_circle{
    border-radius: 15rem!important;
    border: 1px solid red;

  }


  .navigation{
    margin: 0px 0;
    font-size:medium; 
    margin-bottom: 0px;


    a {
      margin: 10px;
      padding: 10px;
      position: relative;
      color: blue;
    }

    .nav-active{
      &::after {
        content: '';
        width: 100%;
        height: 5px;
        background-color: aqua;
        position: absolute;
        bottom: 1px;
        left: 50px;
        transform: translateX(-50%);
      }
    }
  }
}


@media only screen and  (min-width: 992px) and (max-width: 1199px){
  /*style petites-moyennes tablettes */


  .bton_to_circle{
    border-radius: 15rem!important;
    border: 1px solid red;
  }

  .navigation{
    margin: 0px 0;
    font-size:medium; 
    margin-bottom: 0px;


    a {
      margin: 10px;
      padding: 10px;
      position: relative;
      color: blue;
    }

    .nav-active{
      &::after {
        content: '';
        width: 100px;
        height: 5px;
        background-color: aqua;
        position: absolute;
        bottom: 1px;
        left: 50px;
        transform: translateX(-50%);
      }
    }
  }
}


@media only screen and  (min-width: 1200px){
  /*style petites-moyennes tablettes */

  .bton_to_circle{
    border-radius: 15rem!important;
    border: 1px solid red;

  }

  .navigation{
    margin: 10px 0;
    font-size:medium; 
    margin-bottom: 0px;
    margin-top: 0px;


    a {
      margin: 10px;
      padding: 10px;
      position: relative;
      color: blue;
    }

    .nav-active{
      &::after {
        content: '';
        width: 100px;
        height: 5px;
        background-color: aqua;
        position: absolute;
        bottom: 1px;
        left: 50px;
        transform: translateX(-50%);
      }
    }
  }
}

