@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");


@media (min-width: 0px) and (max-width: 400px){



  .container-pedido ul {




    padding: 10px !important;
  }




}



@media (min-width: 0px) and (max-width: 767px){


.redes-sociales, .contacto {

margin-top: 3em;



}


.direccion{ 


  display: block !important;


   }



  .mapa-sitio,.contactanos {


   text-align: center !important;



  }


  .contenedor-datos-1 {


border-bottom: 2px outset black !important;

padding: 10px;


}


}



.contenedor-direccion{


    display: table-caption !important;
    width: 180% !important;



}

@media (min-width: 0px) and (max-width: 1310px){


.contenedor-1{

display: block !important;


}



.contenedor-track{

display: block !important;


width: fit-content !important;
    margin-right: auto;
    margin-left: auto;





}


.contenedor-track p {


text-align: center;




}


}


@media (min-width: 0px) and (max-width: 572px){



.seccion-datos, .seccion-comercial {


display: grid !important;

justify-content: center;


}


.datos-cliente, .datos-comercial{


border-left: none !important;


}



  
}


.corazon {

color: #dc3545;

}


.corazon:hover {


color: #dc3545;

transition: 1s;




}



 .contenedor-track-2 li {

color: #009FE3;


}

.contenedor-track ul li {

color: #009FE3;


}

.contenedor-track-2 {
    

    background: #fff;

    box-shadow: 0 0 4px rgb(0 0 0 / 12%), 0 2px 2px rgb(0 0 0 / 8%);

    border-radius: 15px;
 
    margin-top: 13%;
    


    padding: 10px 3px;

    text-align: left;
    color: #797978;


    font-weight: 600;

    font-size: 12px;

  

  
display: flex;
    width: 100%;
    justify-content: space-around;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}


.contenedor-track {

    

    background: #fff;
    box-shadow: 0 0 4px rgb(0 0 0 / 12%), 0 2px 2px rgb(0 0 0 / 8%);

    border-radius: 15px;
    display: inline-block;   
   /* margin-top: 4%;
    margin-bottom: -5%;
    margin-left: 40%;
    margin-right: 40%;*/
    padding: 20px 20px;

    text-align: center;
    color: #797978;

    font-weight: 600;

    font-size: 12px;

}

.container-pedido ul {
  margin: 0;
  margin-top: 100px;
  list-style: none;
  position: relative;
  padding: 1px 100px;
  color: #009FE3;
  font-size: 13px;



  border-radius: 15px;

  padding: 50px;

  box-shadow: 0px 4px 7px 6px #b0c4de;
}
.container-pedido ul:before {
  content: "";
  width: 1px;
  height: 84%;
  position: absolute;
  border-left: 2px dashed #009FE3;
}
.container-pedido ul li {
  position: relative;
  margin-left: 30px;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 14px;
  border-radius: 6px;
  width: 250px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
  list-style: none;
}
.container-pedido ul li:not(:first-child) {
  margin-top: 60px;
}
.container-pedido ul li > span {
  width: 2px;
  height: 100%;
  background: #009FE3;
  left: -30px;
  top: 0;
  position: absolute;
}
.container-pedido ul li > span:before, .container-pedido ul li > span:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  background: green;
  left: -5px;
  top: 0;
}
.container-pedido ul li span:after {
  top: 100%;
}
.container-pedido ul li > div {
  margin-left: 10px;
}
.container-pedido div .title, .container-pedido div .type {
  font-weight: 600;
  font-size: 12px;
}
.container-pedido div .info {
  font-weight: 300;
}
.container-pedido div > div {
  margin-top: 5px;
}
.container-pedido span.number {
  height: 100%;
}
.container-pedido span.number span {
  position: absolute;
  font-size: 10px;
  left: -35px;
  font-weight: bold;
}
.container-pedido span.number span:first-child {
  top: 0;
}
.container-pedido span.number span:last-child {
  top: 100%;
}





@media (min-width: 768px) and (max-width:  5600px){


  .datos-favoritos {


    width: 35%;


  }


.contenedor-datos-1 {
    border-right: 2px outset black;
}

}
.focus-red {
  background-color: #f1b2b2;
}