/* lineas */
.hr-green{
  height: 5px;
  margin-right: 100%;
  background-color: #4d9737;
  position: relative;
  float: left;
}
.hr-red{
  height: 5px;
  margin-right: 100%;
  background-color: #dd233a;
  position: relative;
  float: left;
}
.hr-fucsia{
  height: 5px;
  margin-right: 100%;
  background-color: #ca2757;
  position: relative;
  float: left;
}
.hr-darkred{
  height: 5px;
  margin-right: 100%;
  background-color: #9e1840;
  position: relative;
  float: left;
}
.hr-blue{
  height: 5px;
  margin-right: 100%;
  background-color: #23a1e4;
  position: relative;
  float: left;
}
.hr-darkblue{
  height: 5px;
  margin-right: 100%;
  background-color: #154465;
  position: relative;
  float: left;
}
.hr-white{
  height: 5px;
  margin-right: 100%;
  background-color: #ffffffcc;
  position: relative;
  float: left;
}

/* widht */
.hr-w1{
  width: 8.5%;
}
.hr-w2 {
    width: 38%;
}
.hr-w3 {
    width: 18%;
}
.hr-w4 {
    width: 28%;
}
.hr-w5 {
    width: 6%;
}
.hr-w6{
  width: 12%
}

/* medias */
@media (max-width: 1199px){
  .hr-w1{
    width: 10%;
  }
  .hr-w2 {
    width: 46%;
  }
  .hr-w3 {
    width: 22%;
  }
  .hr-w4 {
    width: 34%;
  }
  .hr-w5 {
    width: 7%;
  }
  .hr-w6 {
    width: 15%;
  }
}
@media (max-width: 991px){
  .hr-w1{
    width: 14%;
    margin-right: 85%;
  }
  .hr-w2 {
    width: 63%;
    margin-right: 70%;
  }
  .hr-w3 {
    width: 30%;
    margin-right: 70%;
  }
  .hr-w4 {
    width: 45%;
    margin-right: 70%;
  }
  .hr-w5 {
    width: 9%;
    margin-right: 90%;
  }
  .hr-w6 {
    width: 21%;
    margin-right: 70%;
  }
}
@media (max-width: 767px){
  .hr-w1{
    width: 19%;
    margin-right: 75%;
  }
  .hr-w3 {
    width: 40%;
    margin-right: 60%;
  }
  .hr-w4 {
    width: 63%;
    margin-right: 60%;
  }
  .hr-w5 {
    width: 13%;
    margin-right: 75%;
  }
  .hr-w6 {
    width: 24%;
    margin-right: 80%;
  }
}
@media (max-width: 575px){
  .hr-w1{
    width: 25%;
  }
  .hr-w2 {
    width: 45%;
  }
  .hr-w4 {
    width: 60%;
  }
  .hr-w6 {
    width: 14%;
  }
}
@media (max-width: 499px){
  .hr-w1{
    width: 20%;
    margin-right: 75%;
  }
  .hr-w2 {
    width: 54%;
    margin-right: 50%;
  }
  .hr-w3 {
    width: 45%;
    margin-right: 50%;
  }
  .hr-w4 {
    width: 68%;
    margin-right: 50%;
  }
  .hr-w5 {
    width: 14%;
    margin-right: 75%;
  }
  .hr-w6 {
    width: 16%;
    margin-right: 78%;
  }
}
@media (max-width: 435px){
  .hr-w1{
    width: 23%;
    margin-right: 70%;
  }
  .hr-w2 {
    width: 60%;
    margin-right: 47%;
  }
  .hr-w3 {
    width: 51%;
    margin-right: 47%;
  }
  .hr-w4 {
    margin-right: 47%;
  }
  .hr-w5 {
    width: 15%;
    margin-right: 77%;
  }
  .hr-w6 {
    width: 18%;
    margin-right: 75%;
  }
}
@media (max-width: 380px){
  .hr-w1{
    width: 27%;
    margin-right: 60%;
  }
  .hr-w2 {
    margin-right: 33%;
  }
  .hr-w3 {
    width: 58%;
    margin-right: 33%;
  }
  .hr-w4 {
    margin-right: 33%;
  }
  .hr-w5 {
    width: 19%;
    margin-right: 73%;
  }
  .hr-w6 {
    width: 20%;
    margin-right: 71%;
  }
}
@media (max-width: 330px){
  .hr-w1{
    width: 31%;
    margin-right: 55%;
  }
  .hr-w2{
    margin-right: 25%;
  }
  .hr-w3 {
    width: 68%;
    margin-right: 25%;
  }
  .hr-w4{
    margin-right: 25%;
  }
  .hr-w5 {
    width: 20%;
    margin-right: 65%;
  }
  .hr-w6 {
    width: 23%;
    margin-right: 68%;
  }
}
@media (max-width: 280px){
  .hr-w1{
    width: 40%;
    margin-right: 50%;
  }
  .hr-w2{
    margin-right: 8%;
  }
  .hr-w3 {
    width: 85%;
    margin-right: 8%;
  }
  .hr-w4{
    margin-right: 8%;
  }
  .hr-w5 {
    width: 25%;
    margin-right: 68%;
  }
  .hr-w6 {
    width: 29%;
    margin-right: 60%;
  }
}