body {
  font-family: 'Questrial', sans-serif;
}

input[type='text'] {
  text-transform: uppercase;
  font-family: 'Questrial', sans-serif;
}

.ndred {
  background-color: #DD012C !important;
  color: #FFFFFF !important;
}

.divhome {
  height: 100vh;
  overflow: hidden;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
  max-height: 100vh;
}

.divhome.lazyloaded {
  background-image: url('../img/home.jpg');
}

.divservices,
.divaboutus,
.divreferus,
.divcontactus {
  min-height: 100vh;
  background-position: center;
  background-size: cover;
}

.divservices.lazyloaded {
  background-image: url('../img/services.jpg');
}

.divaboutus.lazyloaded {
  background-image: url('../img/about.jpg');
}

.divreferus.lazyloaded {
  background-image: url('../img/refer.jpg');
}

.divcontactus.lazyloaded {
  background-image: url('../img/contact.jpg');
}

.fontBottom {
  font-family: 'Sofia', cursive;
  font-size: 5.5vw;
  margin-top: -16px;
  color: #dd012c;
}

.fontTop {
  font-family: 'Merienda One', cursive;
  font-size: 4.5vw;
  margin-top: -16px;
  color: #dd012c;
}

.f4vw {
  font-size: 4vw;
}

.hometitle {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: bolder;
}

.f3vh {
  font-size: 3vh;
}

#track {
  font-size: 1.5vw;
  font-weight: bolder;
  line-height: 2em;
  height: 4vw;
}

#track::-webkit-input-placeholder {
  color: #a5a5a587;
}

#track:-ms-input-placeholder {
  color: #a5a5a587;
}

#track::-ms-input-placeholder {
  color: #a5a5a587;
}

#track::placeholder {
  color: #a5a5a587;
}

#btnTrack {
  font-size: 1.5vw;
  font-weight: bolder;
  line-height: 2em;
  background-color: transparent;
  border: 2px solid #DD012C;
  color: #DD012C;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

#btnTrack:hover {
  background-color: #DD012C;
  border: 2px solid #DD012C;
  color: #ffffff;
}

.nav-item.nav-link {
  font-size: 1.5vw;
  font-weight: bolder;
  line-height: 2em;
  font-family: 'Barlow Semi Condensed', sans-serif;
  color: #495057;
}

.nav-item.nav-link.active {
  background-color: #DD012C;
  border-radius: 4px;
  color: #ffffff;
}

.nav-item.nav-link:hover,
.nav-item.nav-link.active:hover {
  color: #495057;
  background-color: #e6e6e6;
  border-radius: 4px;
}

.contactNum {
  font-size: 1.5vw;
  color: #DD012C;
}

#navsmall,
#navtop {
  display: none;
}

#iconTop,
#iconTop2 {
  background: rgba(0, 0, 0, 0.7);
  display: block;
  text-decoration: none;
  border-radius: 30px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#iconTop:hover,
#iconTop2:hover {
  background: rgba(0, 0, 0, 0.9);
}

#cardService,
#cardAbout,
#cardRefer,
#cardContact {
  font-size: 32px;
}

.list-group-flush .list-group-item {
  padding: 8px 0 0 0;
  border: none;
  background-color: transparent;
  margin: 0;
}

.delivered {
  background-color: #28a745 !important;
}

.signedby {
  color: #28a745 !important;
}

.show-collapsed {
  display: none;
}

.hide-collapsed {
  display: block;
}

h4.collapsed .show-collapsed {
  display: block;
}

h4.collapsed .hide-collapsed {
  display: none;
}

@media (min-width: 576px) {
  #columnNav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
  }
}

@media (max-width: 575.98px) {
  #contentDiv {
    padding-bottom: 70px !important;
  }

  .fontBottom {
    font-size: 4vh;
    margin-top: -4px !important
  }

  .fontTop {
    font-size: 3.5vh;
    margin-top: -4px !important;
  }

  .nav-item.nav-link,
  #btnTrack {
    font-size: 3.5vh;
  }

  #track {
    font-size: 3.5vh;
    height: 8vh;
  }

  .hometitle {
    font-size: 4vh;
  }

  #cardService,
  #cardAbout,
  #cardRefer,
  #cardContact {
    font-size: 20px;
  }

  #titleTrack {
    font-size: 300%;
  }
}

@media (max-width: 767.98px) {
  #awbNumber {
    max-width: 12ch;
  }
}