body{
    background-color: #F6F5F5;
}

nav{background-color: #f5853b;}


nav a{transition: all .5s ease-in-out;}
.navbar-brand span{color: #fff;}

nav a:hover{color:#dedede }

.btn-primary{background-color: #f5853b;
             border-color: #f5853b;}
.btn-primary:hover{background-color: #3e64af;
                   border-color: #3e64af;}

#shipments{
    margin-top: 50px;
    width: 100%;
}

main{
    margin-top: 100px;
    margin-bottom: 100px;  
}
thead{
    color: #f5853b;
}
h2{color:#f5853b;
    position: relative;
    text-align: center;
}
h2 span{
    border-bottom: 4px solid  #f05723;
    padding: 0 10px;
}
.time-line{
    display:flex;
    width: 60%;
    justify-content:space-between;
    position:relative;
    overflow: auto;
    flex-wrap: nowrap;
    height:150px;
    margin: 0px auto 10px;
    padding: 30px 25px 0;
}
.time-line hr{
width: 83%;
position: absolute;
top: 42px;
border-top:5px solid #0f948e;
  
}
.time-line .status{
width: 75px;
font-size: 14px;
z-index: 100;
position:relative
}
.time-line .status:not(:first-child):before {
    font:normal normal normal 14px/1 FontAwesome;
    font-size: 35px;
    color: #0f948e;
    position: absolute;
     top: 13px;

}
.time-line .status span{
    transform: rotate(60deg);
    display: block;
    position: relative;
    left: -20px;
}
.time-line p
   { 
       font-size: 10px;
       margin:0
   }
.time-line img{
    width:50px
}
@media (max-width: 872px) and  (min-width: 480px) {
    .time-line hr{
        display:none
    }
}
@media   (max-width: 480px) {
    .time-line hr{
        width:63%
    }
    .time-line .status:not(:first-child):before {
        display:none
    }
}