.color-primary, 
a,
a:hover,
a:focus,
a:active { color: var(--color-primary) } 

.bg-primary { background-color: var(--color-primary) !important }

.color-secondary  { color:  var(--color-secondary) } 
.bg-secondary { background-color: var(--color-secondary) }

.color-white { color: #FFF }

.bg-primary-light { 
  border: 1px solid rgba(0,0,0,0.1);
  background: #EDF3E0 !important }

body { 
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow-x: hidden;
  font-family: "Spartan", Sans-serif;
  font-size: 12pt;
  color: #111;
  min-height: 100vh }

.mask { 
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: -1;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.46) 100%);}  


/* wrapper 
//////////////////////////////////////////////////*/
.container { 
  margin: 15px auto;
  padding: 60px 30px;
  border-radius: 7.5px;
  max-width: 1278.98px }

@media(max-width:767.98px){
  .container { 
    border-radius: 0;
    padding: 3rem 1rem }
}

@media(max-width:767.98px){
  header,
  .wrapper { padding: 0 }
}


/* heading / text
//////////////////////////////////////////////////*/
h1 { margin-bottom: 2.5rem }
h2 { margin-bottom: 2rem }
h3 { margin-bottom: 1.5rem }
h4 { margin-bottom: 1.25rem }

h1 { font-size: 280%; font-weight: 300  }
h2 { font-size: 200%; font-weight: 800  }
h3 { font-size: 160%; font-weight: 800 }
h4 { font-size: 150% }

h1 { letter-spacing: -.125rem }
h2 { letter-spacing: -.1rem }
h3 { letter-spacing: -.075rem}
h4 { letter-spacing: -.05rem }

p { line-height: 130% }

.inner p { line-height: 150% }

@media(max-width:767.98px){

  h1 { font-size: 150% }
  h2 { font-size: 125% }
  h3 { font-size: 112.5% }
  h4 { font-size: 100% }
  
  h1,
  h2 { margin-bottom: 1.5rem }
  h3,
  h4 { margin-bottom: 1.25rem }

}




/* header
//////////////////////////////////////////////////*/
header {
  position: relative;
  z-index: 1 }

header .container { 
  background: #FFF;
  padding: 7.5px 30px }

header .brand { height: 90px }
header .brand-flash { height: 60px }

@media(min-width:768px){
  .input-hawb { width: 30% }
}

@media(max-width:767.98px){

  header .brand-flash { height: 30px }

  header .input-hawb { 
    margin: 15px 0;
    width: 100%;
    order: 3 }
}





/* front
//////////////////////////////////////////////////*/
.front { 
  position: absolute;
  width: 100%;
  top: 0;
  background: url(img/bg-wave-track.png) center;
  background-size: cover;
  height: 100vh }

.front-caption {
  color: #FFF;
  position: relative;
  top: 50%;
  transform: translate(0,-50%) }  

.front-caption h1 { 
  margin-bottom: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 100%;
  font-size: 300% } 

.front-caption p { 
  opacity: .5;
  line-height: 1.25;
  font-size: 125% }  

.front .form-control-lg,
.front .btn-lg { 
  padding: 0 22.50px;
  line-height: 55px;
  height: 55px }

.front .form-control::-webkit-input-placeholder   { font-size: 80% }
.front .form-control::-moz-placeholder            { font-size: 80% }
.front .form-control:-ms-input-placeholder        { font-size: 80% }
.front .form-control:-moz-placeholder             { font-size: 80% }
.front .form-control::placeholder                 { font-size: 80% }

@media(min-width: 1152px){

  .front-caption h1, 
  .front-caption p { width: 50% } 

}

@media(max-width: 1151.98px){

  .front-caption .form-inline { justify-content: center }

}

@media(max-width: 1203.98px){

  .front-caption { 
    text-align: center;
    padding: 0 75px }

}

@media(max-width: 767.98px){
  
  .front-caption h1 { 
    letter-spacing: -1px;
    font-size: 180% } 

  .front-caption p { font-size: 90% }  

}

@media(max-width: 425px){

  .front-caption {  padding: 0 45px }

  .front-caption .form-control { 
    height: 50px;
    text-align: center;
    font-size: 112.5% }  

  .front-caption .btn { 
    margin-top: 15px;
    width: 100% } 

}




/* track
//////////////////////////////////////////////////*/
.track .container { background: #FFF }

/* .track-summary { font-size: 125% } */

.track-address,
.track-delivered { font-size: 87.5% } 

.track-address span,
.track-delivered span { color: #AAA }

.track-steps { 
  margin: 30px 0 45px;
  padding: 72px 15px 15px 15px;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.1);
  border-radius: 15px;
  position: relative }

.track-steps .ico-track { margin-bottom: 7.5px }

.track-steps .step-ok .ico-track                  { filter: opacity(.7) grayscale(100%) contrast(0) brightness(0%) }
.track-steps .step-ok:not(:last-child) .ico-track { opacity: .2 }
.track-steps .step-ongoing .ico-track             { filter: opacity(.7) grayscale(100%) contrast(0) brightness(0%) }
.track-steps .step-pending .ico-track             { filter: opacity(.1) grayscale(100%) contrast(0) brightness(0%) }

.track-steps > div { 
  /* width: 14.28571428571429%; */
  width: 16.66666666666667%;
  position: relative;
  line-height: 1.2;
  color: #CCC }

.track-steps .step-ok strong                  { color: var(--color-primary) }
.track-steps .step-ok:not(:last-child) strong { color: #CCC }

.track-steps .step-ongoing strong { color: var(--color-secondary) }

.track-steps strong { 
  display: inline-block;
  margin-bottom: 7.5px;
  font-size: 95% }

.track-steps small { 
  font-weight: bold;
  font-size: 62.5%;
  color: #CCC }

.track-table > div { 
  font-size: 87.5%;
  padding: 11.25px 22.5px }

.track-table > div:nth-child(even){ background: #F3F3F3 }
  
@media(min-width:768px){

  .track-summary > *,
  .track-address > *,
  .track-delivered > *   { width: 33% }

  .track-delivered > div:first-child { width: 66% }

  .track-table .thead { 
    color: #BBB;
    font-size: 125% }

  .track-table > div { border-radius: 50px }

  .track-steps:before {
    position: absolute;
    top: 30px;
    left: calc(((100%/6) + 24px)/2);
    content: " ";
    width: calc(((100% - 24px)/6)*5);
    height: 12px;
    background: #DDD;
    border-radius: 15px }
  
  .track-steps strong { padding: 0 15px }

  .track-table > div > div:nth-child(1) { width: 35% }

  .track-table > div > div:nth-child(2) { width: 30% }

  .track-table > div > div:nth-child(3) { width: 35% }
  
  .track-steps > .step-ongoing:before { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 50%, transparent) }

  .track-steps > .step-ongoing:first-child:before { background: linear-gradient(90deg, rgba(255,255,255,0) 49%, var(--color-secondary) 49%, rgba(230,183,51,0) 100%) }

  .track-steps > .step-ongoing:last-child:before { background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 49%, rgba(99,121,178,0) 49%); }

  .track-steps > div:first-child:before { 
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px }

  .track-steps > div:last-child:before { 
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px }
 
  .track-steps > div:before {
    position: absolute;
    left: 0;
    top: -42px;
    content: " ";
    width: 100%;
    height: 12px }

  .track-steps > .step-ok:before { background: var(--color-primary) }

  .track-steps > .step-ok:first-child:before { 
    width: 50%;
    left: auto;
    right: 0 }

  .track-steps > .step-ongoing:after, 
  .track-steps > .step-ok:last-child:after { 
    box-shadow: 0 3px 3px rgba(0,0,0,0.3);
    background: var(--color-secondary);
    position: absolute;
    left: 50%;
    top: -48px;
    margin-left: -12px;
    border-radius: 100%;
    content: " ";
    width: 24px;
    height: 24px }

  .track-steps > .step-ok:last-child:after { background: var(--color-primary) }

  .track-steps > .step-ok:last-child:before { 
    width: 50%;
    left: 0 }
}

@media(max-width:768px){
  .track-table > div { border-radius: 10px }
  .track-table > div span { color: #AAA }

  .track-steps { padding: 0 1rem 0 1.5rem }

  .track-steps:before {
    position: absolute;
    /* left: 0; */
    top: calc(((100% - 3rem)/6)/2);
    content: " ";
    height: calc((100%/6)*5);
    width: 12px;
    background: #DDD;
    border-radius: 15px }

  .track-steps > div { 
    width: 100%;
    padding: 1.5rem 1rem 1.5rem 2.5rem }

  .track-steps > div:first-child:before { 
    border-top-left-radius: 15px;
    border-top-right-radius: 15px; }

  .track-steps > div:last-child:before { 
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px }


  .track-steps > .step-ongoing:before { background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 50%, transparent) }

  .track-steps > .step-ongoing:first-child:before { background: linear-gradient(180deg, rgba(255,255,255,0) 49%, var(--color-secondary) 49%, rgba(230,183,51,0) 100%) }

  .track-steps > .step-ongoing:last-child:before { background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 49%, rgba(99,121,178,0) 49%); }

  
  .track-steps > div:before {
    position: absolute;
    left: 0;
    top: 0;
    content: " ";
    width: 12px;
    height: 100% }

  .track-steps > .step-ok:before { background: var(--color-primary) }

  .track-steps > .step-ok:first-child:before { 
    height: 50%;
    top: auto;
    bottom: 0 }

  .track-steps > .step-ongoing:after,  
  .track-steps > .step-ok:last-child:after { 
    box-shadow: 0 -3px 3px rgb(0 0 0 / 30%);
    background: var(--color-secondary);
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -12px;
    margin-left: -6px;
    border-radius: 100%;
    content: " ";
    width: 24px;
    height: 24px }

  .track-steps > .step-ok:last-child:after { background: var(--color-primary) }


  .track-steps > .step-ok:last-child:before { height: 50% }



}



/* form 
//////////////////////////////////////////////////*/
.form-control {
  /* border-color: var(--color-primary); */
  color: var(--color-primary);
  height: 45px;
  border-radius: 3.75px;
  box-shadow: inset 0 2px 2px rgba(0,0,0,0.075);
  background: #F6F6F6 }

.required:after {
  position: absolute;
  top: -2px;
  margin-left: 5px;
  font-size: 200%;
  content: " *";
  color: #CC0000 }  

textarea.form-control { 
  min-height: 167px;
  border-radius: 3.75px }  

.form-control::-webkit-input-placeholder { color: #AAA }

select.form-control option[selected]{ color: #AAA }

.custom-control label { cursor: pointer }

.custom-control-input:checked~.custom-control-label::before {
  border-color: #009DE0;
  background-color: #009DE0 }

.custom-switch .custom-control-label::before { 
  height: 1.25rem }

.custom-switch .custom-control-label::before { 
  width: 2rem;
  border-radius: .75rem }

.custom-switch .custom-control-label::after {
  width: calc(1.25rem - 4px);
  height: calc(1.25rem - 4px) }

.btn {
  border: 0;
  padding: 15px 22.5px;
  border-radius: 3.75px }

.btn-link {
  text-transform: none;
  font-weight: normal;
  color: #009DE0 !important }

.btn-xs { 
  font-size: 70%;
  padding: 7.5px 11.25px }

.btn-sm { padding: 11.25px 15px }

.btn-lg { padding: 18.75px 30px }

.btn-primary {
  background: var(--color-primary) !important;
  color: #FFF !important } 

.btn-primary-outline {
  border: 1px solid var(--color-primary) !important;
  color: var(--color-primary) !important } 

.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline:active {
  background: var(--color-primary) !important;
  color: #FFF !important } 
  
.btn-white {
  background: #FFF;
  color: var(--color-primary) !important }

.btn-secondary {
  background: var(--color-secondary) !important;
  color: #FFF !important }  

.btn-secondary-outline {
  border: 1px solid var(--color-secondary) !important;
  color: var(--color-secondary)!important }  

.btn-secondary-outline:hover,
.btn-secondary-outline:active,
.btn-secondary-outline:focus {
  background: var(--color-secondary) !important;
  color: #FFF !important }  

.btn-green {
  background: #00B259;
  color: #FFF !important }  

.btn-white-outline {
  border: 1px solid #FFF;
  color: #FFF !important }  

.btn .ico { margin-right: 7.5px }

.btn:active,
.btn:hover,
.btn:focus { box-shadow: inset 0 0 100px rgba(0,0,0,0.2) }

@media(max-width:767.98px){
  .btn.d-block { width: 100% }

  .btn-lg {
    line-height: 100%;
    padding-top: 15px;
    padding-bottom: 15px }
}




/* global 
//////////////////////////////////////////////////*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both }

.ico-track { 
  display: inline-block;
  position: relative;
  background:url("img/ico-tracking.png") top left no-repeat; }

.ico-track11  { width:50px; height:57px; background-position:0 -798px; }
.ico-track12  { width:50px; height:57px; background-position:0 -1140px; }
.ico-track13  { width:50px; height:57px; background-position:0 -342px; }
.ico-track21  { width:52px; height:57px; background-position:0 -741px; } 
.ico-track22  { width:52px; height:57px; background-position:0 -1083px; }
.ico-track23  { width:52px; height:57px; background-position:0 -285px; }
.ico-track31  { width:47px; height:57px; background-position:0 -684px; }
.ico-track32  { width:47px; height:57px; background-position:0 -1026px; }
.ico-track33  { width:47px; height:57px; background-position:0 -228px; }
.ico-track41  { width:56px; height:57px; background-position:0 -627px; }
.ico-track42  { width:56px; height:57px; background-position:0 -969px; }
.ico-track43  { width:56px; height:57px; background-position:0 -171px; }
.ico-track51  { width:51px; height:57px; background-position:0 -570px; }
.ico-track52  { width:51px; height:57px; background-position:0 -912px; }
.ico-track53  { width:51px; height:57px; background-position:0 -114px; }
.ico-track61  { width:55px; height:57px; background-position:0 -513px; }
.ico-track62  { width:55px; height:57px; background-position:0 -855px; }
.ico-track63  { width:55px; height:57px; background-position:0 -57px; }
.ico-track71  { width:57px; height:57px; background-position:0 -456px; }
.ico-track72  { width:57px; height:57px; background-position:0 -399px; }
.ico-track73  { width:57px; height:57px; background-position:0 0; }
.ico-track83  { width:57px; height:57px; background-position:0 -1254px } /*OCORRÊNCIA*/
.ico-track93  { width:57px; height:57px; background-position:0 -1197px } /*NÃO ENTREGUE*/
.ico-track101  { width:57px; height:64px; background-position:0 -1312px } /*Objeto Nao Postado Flash - BRADESCO*/

.ico-track111  { width:57px; height:63px; background-position:0 -1376px } /*aguardando-retirada cinza*/
.ico-track112  { width:57px; height:63px; background-position:0 -1439px } /*aguardando-retirada amarelo*/
.ico-track121  { width:57px; height:42px; background-position:0 -1502px } /*aguardando-parceiro cinza*/
.ico-track122  { width:57px; height:42px; background-position:0 -1544px } /*aguardando-parceiro amarelo*/
.ico-track131  { width:57px; height:62px; background-position:0 -1586px } /*aguardando-locker cinza*/
.ico-track132  { width:57px; height:62px; background-position:0 -1648px } /*aguardando-locker amarelo*/

/* SVG ICONS
//////////////////////////////////////////////////////////////////////////////////////////*/
.ico-svg { 
  display: inline-block;
  position: relative }

.ico-svg-16 { width: 16px; height: 16px }
.ico-svg-24 { width: 24px; height: 24px }
.ico-svg-32 { width: 32px; height: 32px }
.ico-svg-48 { width: 48px; height: 48px }
.ico-svg-64 { width: 64px; height: 64px }
.ico-svg-96 { width: 96px; height: 96px }

.ico-svg.text-default    { fill: var(--color-default) }
.ico-svg.text-primary    { fill: var(--color-primary) }
.ico-svg.text-secondary  { fill: var(--color-secondary) }
.ico-svg.text-black-25   { fill: rgba(0,0,0,.25) }
.ico-svg.text-white      { fill: #FFF }
.ico-svg.text-whatsapp   { fill: #03B35B }