:root {
  --color-primary: #4978BC;
  --color-secondary: #FCB426;
}

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

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

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

.page-item.active .page-link {
  background-color:  var(--color-secondary);
  border-color:  var(--color-secondary);
}

.color-white { color: #FFF }

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

body { 
  overflow-x: hidden;
  font-family: "Spartan", Sans-serif;
  font-size: 12pt;
  color: #333 }

.bg-secondary { color: #222 }



/* wrapper 
//////////////////////////////////////////////////*/
.wrapper { padding: 150px 0 }

.container { max-width: 1278.98px }

@media(min-width:768px){
  .inner .wrapper:first-child { padding-top: 300px }
  .inner .track.wrapper { padding-top: 200px }
}

@media(max-width:767.98px){
  .wrapper { padding: 60px 0 }
  .container { padding: 0 2rem }
  .inner .wrapper:first-child { padding-top: 200px }
}





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

h1 { font-size: 350%; font-weight: 300  }
h2, .h2 { font-size: 250%; font-weight: bold !important  }
h3, .h3 { font-size: 160%; font-weight: bold !important }
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: 200% }
  h2 { font-size: 150% }
  h3 { font-size: 125% }
  h4 { font-size: 112.5% }
  
  h1,
  h2 { margin-bottom: 1.5rem }
  h3,
  h4 { margin-bottom: 1.25rem }

}



/* header 
//////////////////////////////////////////////////*/
header {
  color: #FFF; 
  width: 100%;
  height: 130px }

.inner header { 
  box-shadow: 0 7px 20px rgba(0,0,0,0.1);
  background: var(--color-primary) }  

header .bartop { 
  font-size: 87.5%;
  width: 100% }

header .bartop .form-control,  
header .bartop .btn { 
  padding: 10px 10px 7.5px 10px !important;
  line-height: normal !important;
  height: 35px }  

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

header .nav-link { 
  font-weight: 800;
  color: #FFF }

header .nav-link:hover { color: var(--color-secondary) }

header .navbar-toggler { 
  width: 50px;
  padding: 10px;
  border: 0 solid var(--color-secondary)  }

header .navbar-toggler span { 
  background: #FFF;
  height: 4px;
  border-radius: 50px;
  display: block }

header .navbar-toggler:hover,
header .navbar-toggler:active,
header .navbar-toggler:focus { 
  outline: 0;
  background: none }

header .navbar-toggler:hover span,
header .navbar-toggler:active span,
header .navbar-toggler:focus span { background: var(--color-secondary) }

header .navbar-toggler span:not(:last-of-type) { margin: 0 0 5px 0 }

.dropdown-item.active, 
.dropdown-item:active { background: var(--color-primary) }

@media(min-width:992px){ 

  header.sps {
    position: fixed;
    top: 0;
    z-index: 100000 }  
  
  header.sps--blw { 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 66px;
    background: var(--color-primary) }
  /* .inner header { background: #6A8FC8 }   */

  header .navbar-brand img { 
    height: 90px;
    transition: all 300ms }

  header .navbar-nav { 
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
    padding-top: .75rem;
    margin-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.2) }

  header.sps--blw .navbar-brand img { height: 50px !important }

  header.sps--blw .navbar-nav { display: none }

  header .nav-item { 
    padding: 0 !important }
    
  header .nav-item:nth-child(2) { margin: 0 }

  header .dropdown-menu { 
    border-radius: 0;
    top: 50px }

}

@media(max-width:991.98px){

  header { 
    position: absolute !important;
    z-index: 1;
    top: 0;
    width: 100% }

  header .bartop { display: none !important }

  header .navbar-collapse { 
    position: absolute;
    z-index: 2;
    top: 100px;
    right: 0;
    min-width: 300px;
    background: var(--color-primary) }
    
  header .nav-link { 
    text-align: center;
    padding: 0 }

  header .nav-item,
  header .dropdown-item {
    text-align: center;
    margin: 0;
    width: 100%;
    line-height: 45px;
    padding: 0;
    color: #FFF !important }

  header .nav-item:hover,
  header .nav-item:focus,
  header .nav-item:active { box-shadow: inset 0 0 100px rgba(255,255,255,0.1) }

  header .nav-link { border-bottom: 1px solid rgba(255,255,255,0.2) }

  header .dropdown-menu { 
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2)   }

}

@media(max-width:575.98px){

  header { height: 100px }

  header .navbar-brand { width: 60% }
  header .navbar-brand img { width: 100% }
  
  header .navbar-collapse { 
    top: 0;
    left: 0;
    width: 100% }
    
  header .navbar-nav {
    justify-content: center;
    width: 100%;
    height: 100vh }  

  header .nav-link { 
    text-align: center;
    line-height: 50px;
    font-size: 150% }

  header .nav-link:last-of-type { color: var(--color-secondary) !important }

}



/* front 
//////////////////////////////////////////////////*/
.front { 
  position: relative;
  background: var(--color-primary);
  /* background: url(img/bg-front.jpg) center;
  background-size: cover; */
  height: 100vh }

.front-video-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-position: 50%;
  background-size: cover;
  -o-object-fit: cover;
  object-fit: cover }

.front-animate { 
  background: transparent;
  position: absolute;
  width: 1280px;
  height: 720px;
  left: 50px; 
  top: calc(50% + 50px);
  transform: translate(0,-50%) }

.front-caption {
  color: #FFF;
  position: relative;
  top: 50%;
  transform: translate(0,calc(-50% + 120px/2)) }  

.front-caption h1 { 
  margin-bottom: 30px;
  letter-spacing: -1px;
  line-height: 100%;
  font-size: clamp(220%, 5vw, 270%) } 

.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:1281px) and (max-width:1439.98px){
  .front-animate { left: -15% }
}


@media(max-width:1280px){
  .front-animate { left: -15% }
}

@media(min-width:1024px) and (max-width:1151.98px){
  .front-animate { left: -20% }
}

@media(max-width:1152px){
  .front-animate { 
    width: 1000px;
    height: 563px;
    left: -15% }
}

@media(max-width:1023.98px){
  .front {
    background: url(img/bg-front.webp) no-repeat center;
    background-size: cover }
}

@media(min-width:769px) and (max-width:991.98px){
  .front-animate { 
    left: auto;
    right: -30% }
}

@media(max-width:768px){
  .front-animate { 
    left: auto;
    right: -50% }
}

@media(max-width:767.98px){

  .front-animate { 
    width: 600px;
    transform: translate(-12.5%,-80%) }

  .front-caption { 
    top: 60%;
    transform: translate(0,0);
    text-align: center }

  .front-caption .form-inline > * { 
    margin-bottom: .5rem;
    width: 100% }
}

@media(max-width:375px){
  .front-animate { transform: translate(-5%,-80%) }
}
  /* about 
//////////////////////////////////////////////////*/
.differential p { font-size: 87.5% }

.about,
.differential { background: #F1EFEE }

.differential i { 
  position: relative;
  top: 0;
  transition: all 300ms ease }

.differential .row > div:hover i { top: -10px }

.differential .row > div {
  border-radius: 5px; 
  padding-top: 2rem;
  padding-bottom: 2rem;
  transition: all 300ms ease }

.differential .row > div:hover { background: #FFF }

.differential p { margin: 0 }


.about p { 
  line-height: 1.5;
  margin-bottom: 22.5px; }

.about-history { margin-top: 160px }

.about-history .d-md-flex { text-align: center }

.about-history .year {
  position: relative;
  display: block;
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--color-primary) }

.about-history .year:after {
  content: " ";
  position: absolute;
  bottom: -8.5px;
  left: 50%;
  margin-left: -7.5px;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: var(--color-secondary)  }

.about-history .d-md-flex p { padding: 0 30px }

.about-photos img { 
  transition: all 300ms;
  opacity: .5 }
  
.about-photos img:hover { opacity: 1 }

@media(min-width:992px) {
  .about-history .d-md-flex > div > * {
    display: block;
    width: 277px !important }

  .about-history .d-md-flex > p { padding: 0 1rem }
}

@media(max-width:991.98px) {
  .about-history .d-md-flex > div { 
    padding: 30px;
    border: 1px solid #CCC;
    margin-bottom: 30px }
}



#about-brands { margin: 100px 0 }

#about-brands img { 
  filter: grayscale(1) contrast(0); 
  transition: all 300ms }

#about-brands a:hover img { filter: grayscale(0) }

@media (max-width: 991.98px) {
  #about-brands .col {
      padding-top: 15px;
      padding-bottom: 15px;
      flex-basis: auto !important;
      width: 33.33333% !important;
  }
}










/* services 
//////////////////////////////////////////////////*/
.home .services  { 
  background: rgb(252,180,38);
  background: linear-gradient(90deg, rgba(252,180,38,1) 0%, rgba(248,156,33,1) 100%); }

.services .card { word-wrap: normal }

.services .icon { 
  position: relative;
  top: 0;
  transition: all 300ms ease }

.services .shadow { transition: background 300ms  }

.services .shadow:hover .icon { top: -10px }

/* .services .btn { 
  transition: all 300ms ease;
  opacity: 0 }

.services .shadow:hover .btn { opacity: 1 } */

.services h2:not(.h1) { font-size: 180% }

.inner .services ul:first-of-type { 
  padding-bottom: 45px;
  margin: 45px 0 }  

/* .services .ico-hover { display: none !important }

.services .item:hover h2 .ico-services:first-of-type { display: none !important }

.services .item:hover h2 .ico-hover { display: inline-block !important } */

.inner .services .shadow:hover { color: #FFF }

.services h2 small { font-weight: bold }

.inner .services .shadow p:last-child { margin: 0 }

.inner .services .shadow strong { font-size: 125% }

/* .services .group .item:nth-child(1) h2 { color: #D74752 }
.services .group .item:nth-child(2) h2 { color: #566BA9 }
.services .group .item:nth-child(3) h2 { color: #E6B733 }
.services .group .item:nth-child(4) h2 { color: #4FB04D }
.services .group .item:nth-child(5) h2 { color: #EA7239 } */

.inner .services .shadow:hover h2 { color: #FFF }

/* .services .group .item:nth-child(1):hover { background: #D74752 }
.services .group .item:nth-child(2):hover { background: #566BA9 }
.services .group .item:nth-child(3):hover { background: #E6B733 }
.services .group .item:nth-child(4):hover { background: #4FB04D }
.services .group .item:nth-child(5):hover { background: #EA7239 } */

.inner .services .shadow:hover { background: var(--color-secondary) !important }

.services-differencial { background: #F3F3F3  }
  
.services-differencial p { 
  margin-bottom: 30px;
  font-size: 112.5% }

.services-differencial ul li  { 
  margin-bottom: 7.5px;
  font-size: 87.5% }

.services-form { background: var(--color-secondary) }

.services-form form { 
  width: 80%;
  margin: 0 auto }

.service-image1 {
  position: absolute;
  left: -280px;
  top: -130px }  

.services-techs h2 {
  text-align: center;
  z-index: 0;
  font-size: 920%;
  text-transform: uppercase;
  color: #EBEBEB }

.services-techs p { font-size: 87.5% }


@media(min-width:1280px) {
  .services-image { 
    left: -60px;
    top: -40px;
    position: absolute }

  .services-techs h2 {
    position: absolute;
    width: 100% }
}

@media(max-width:1278.98px) {
  .inner .services ul:first-of-type { margin: 45px 0 }  
}

@media(max-width:1024px) {
  .services-image { width: 100% }
}


@media(min-width:992px) {
  .services .row { margin: 0 -1.5rem }
  .services .row > div { padding: 0 1.5rem }
}

@media(min-width:768px) and (max-width:800px) {
  .inner .services { background-size: auto 37% }
}

@media(max-width:767.98px) {
  .inner .services { background-size: auto 30% }

  /* .services-form { padding-top: 180px } */

  .services-techs h2 { 
    color: #CCC;
    font-size: 200% }
}




/* ship from store 
//////////////////////////////////////////////////*/
.ship-header { 
  background: url(img/bg-ship-header.jpg) no-repeat;
  background-size: cover }

.ship-form { 
  background: url(img/bg-contact.webp) no-repeat;
  background-size: cover }
  
.ship-feat li {
  font-size: 125%;
  margin-bottom: .5rem;
  padding-left: 30px;
  background: url(img/icon-more.png) no-repeat center left }

.ship-services li { margin-bottom: 2.5rem }

.ship-services li strong { font-size: 150% }

.ship-services li p { margin: .25rem 0 0 0 }

@media(min-width:1280px){
  .ship-feat img {
    z-index: 1;
    position: absolute;
    right: -350px;
    bottom: -300px }

  .ship-services img {
    position: absolute;
    left: -380px;
    bottom: -110px }
}

@media(min-width:1366px){
  .ship-feat img { right: -350px }
  .ship-services img { left: -350px }
}

@media(min-width:1600px){
  .ship-feat img { right: -100px }
  .ship-services img { left: -100px }
}

@media(min-width:768px){
  .ship h2 { font-size: 360% } 
  .ship-header p { font-size: 160% }  

  .ship-services ul { margin-bottom: 200px }

  .ship-services .large p { 
    margin-bottom: 2rem;
    font-size: 180% }

  .ship-form form { 
    width: 80%;
    margin: 0 auto }
}

@media(max-width:767.98px){

  .ship-services .large p { font-size: 125% }

}




/* anvisa
//////////////////////////////////////////////////*/
.anvisa-header { 
  background: url(img/bg-anvisa-header.jpg) no-repeat;
  background-size: cover }

.anvisa-opt,
.anvisa-adv { background: #F1EFEE }

.anvisa-form { 
  background: url(img/bg-contact.jpg) no-repeat;
  background-size: cover }

@media(min-width:768px){
  .anvisa h2 { font-size: 225% }

  .anvisa-img { 
    position: absolute;
    top: 0;
    right: 0 }
}
  
@media(max-width:767.98px){
  .anvisa-img { width: 100% }
}
  




/* storage
//////////////////////////////////////////////////*/
.storage-header { 
  background: url(img/bg-storage-header.jpg) no-repeat;
  background-size: cover }

.services.services-storage .shadow:hover { background: var(--color-primary) !important }

.process-steps .process-step { 
  transition: all 300ms;
  position: relative;
  padding: 2rem 0 2rem 4rem }

.process-steps .step-number { 
  transition: all 300ms;
  position: relative;
  left: -4rem;
  top: 1.75rem;
  text-align: center;
  display: inline-block;
  border-radius: 100%;
  line-height: 30px;
  width: 30px;
  font-weight: bold;
  background: var(--color-primary);
  color: #FFF }

.process-steps p { font-size: 87.5% }

.step-corner {
  transition: all 300ms;
  position: absolute;
  height: calc(100% - 2rem - 50px) !important;
  width: 75px;
  height: 50px;
  display: inline-block }

.step-corner-bl {
  bottom: 0;
  left: .85rem;
  border-bottom-left-radius: 50px;
  border-left: 4px solid var(--color-primary);
  border-bottom: 4px solid var(--color-primary) }

.step-corner-tl {
  top: -4px;
  left: 0.85rem;
  border-top-left-radius: 50px;
  border-top: 4px solid var(--color-primary);
  border-left: 4px solid var(--color-primary) }

.step-corner-tr {
  top: -4px;
  left: 4.85rem;
  border-top-right-radius: 50px;
  border-top: 4px solid var(--color-primary);
  border-right: 4px solid var(--color-primary) }

.step-corner-br {
  bottom: 0;
  left: 4.85rem;
  border-bottom-right-radius: 50px;
  border-bottom: 4px solid var(--color-primary);
  border-right: 4px solid var(--color-primary) }

.step-corner-finish { height: 75px !important }

@media(min-width:1280px){
  .storage-header p { 
    width: 70%;
    margin: 0 auto;
    font-size: 150% }
}


@media(min-width:1152px){

  .storage .position-relative.text-right img { 
    position: absolute;
    z-index: -1;
    right: 0;
    top: 0 }

  }

@media(min-width:769px){

  .process-steps .container .process-step:nth-child(odd) {  padding-left: 12.5rem }

}


@media(max-width:768px){
  .storage img { width: 100% }

  .step-corner {
    width: 0;
    left: .85rem !important;
    border-radius: 0 !important;
  }
}



/* reverse 
//////////////////////////////////////////////////*/
.reverse-header { 
  background: url(img/bg-reverse-header.jpg) no-repeat;
  background-size: cover }


@media(min-width:1280px){
  .reverse-header p { 
    width: 70%;
    margin: 0 auto;
    font-size: 150% }
}
  


/* retirada
//////////////////////////////////////////////////*/
.retirada-header { 
  background: var(--color-primary) url(img/bg-retirada-coleta3.webp) no-repeat;
  background-size: cover }


/* entregas
//////////////////////////////////////////////////*/
.entregas-header { 
  background: var(--color-primary) url(img/bg-entregas.webp) no-repeat;
  background-size: cover }



/* field
//////////////////////////////////////////////////*/
.field-header { 
  background: var(--color-primary) url(img/bg-field.webp) no-repeat;
  background-size: cover }

.field li::marker {
  color: var(--color-secondary);
}


/* portugal 
//////////////////////////////////////////////////*/
.portugal { background: #F1EFEE }

@media(min-width:1280px){

  .portugal p { font-size: 150% }

  .portugal-text { width: calc(1278.98px/2) }
}




/* segments 
//////////////////////////////////////////////////*/
.segments { background: #F1EFEE }

.segments p { font-size: 87.5% }



/* clients 
//////////////////////////////////////////////////*/
.clients {
  background: url(img/bg-wave2.png) center;
  background-size: 100% 100%  }

.clients img { 
  opacity: .3;
  filter: grayscale(100%) }  

.clients img:hover { 
  opacity: 1;
  transition: all 400ms;
  transform: scale(1.3);
  filter: grayscale(0%) } 

.clients .d-flex { justify-content: center }

.clients .d-flex > span { 
  padding: 7.5px 15px;
  width: 16.66666666666667% }

.anvisa .clients .d-flex > span { width: 20% }

.clients .d-flex > span img { 
  position: relative;
  left: 50%;
  transform: translate(-50%,0) }
  
@media(max-width:1278.98px) {
  .clients .d-flex > span,
  .anvisa .clients .d-flex > span { width: 33.33333333333333% }
}

@media(max-width:991.98px) {
  .clients {
    background: url(img/bg-wave2.png) left bottom;
    background-size: cover  }
}




/* cites 
//////////////////////////////////////////////////*/
.cites > div { position: relative }

.cites h1 { font-size: 245% }

.cites h2 { 
  font-weight: 400;
  letter-spacing: normal;
  margin-bottom: 7.5px;
  font-size: 150% }

.cites small { 
  font-weight: 400;
  color: #333;
  display: block;
  text-transform: uppercase;
  font-size: 87.5% }

.cites p { line-height: 1.8 }

.cites img { 
  width: 96px;
  height: 96px;
  object-fit: cover;
  padding: 5px;
  border-radius: 100% }  

.cites .ico-quote { opacity: .1 }  

@media(max-width:768px){
  .btn-prev,
  .btn-next { 
    position: absolute;
    top: 20px  }

  .btn-prev { left: 0 }
  .btn-next { right: 0 }
}



/* stats 
//////////////////////////////////////////////////*/
.stats { 
  background: url(img/bg-stats.webp) center;
  background-size: cover;
  color: #FFF }

.stats strong { 
  letter-spacing: -3px;
  /* font-weight: 300; */
  font-size: 350% }  

.stats p { font-size: 125% }  
  



/* blog 
//////////////////////////////////////////////////*/
.post-header h1 { 
  font-weight: 800;
  font-size: 300%;
  margin-bottom: 15px;
  text-transform: initial }

.post-header small { 
  line-height: 1.4;
  display: block;
  color: #AAA }

.post-header p {
  margin-bottom: 30px;
  line-height: 130%;
  font-size: 150% }

.post-body { margin: 30px auto }

.post-body > * { 
  font-size: 112.5%;
  margin-bottom: 30px;
  line-height: 160% }

.post-body > * > * { margin-bottom: 15px }

.post-body h2 { 
  line-height: 120%;
  font-size: 240%;
  text-transform: initial }

.post-body h3 { 
  line-height: 120%;
  font-size: 180%;
  text-transform: initial }

.inner .posts { background: #EEE }

.posts a { 
  position: relative;
  color: #111;
  text-decoration: none }

.posts img { border-radius: 7.5px }

.posts small {
  display: block;
  margin-bottom: 7.5px;
  font-size: 87.5%;
  letter-spacing: 2px }

.posts h2:not(.h1)  { 
  letter-spacing: normal;
  font-weight: normal;
  font-size: 140% }

.posts a:hover h2:not(.h1)  { text-decoration: underline }

@media(min-width:768px){
  .post-header { 
    width: 800px;
    margin: 0 auto }
  
  .post-body { width: 800px }
  
  .posts .row { margin: 0 -30px }
  .posts .row > * { padding: 0 30px }

}

@media(max-width: 767.98px){

  .posts a:first-child { border-top: 1px solid rgba(0,0,0,.1) }

  .posts a { padding: 15px }

  .posts a:not(:last-child) { border-bottom: 1px solid rgba(0,0,0,.1) }

  .posts a .ratio {
    float: right;
    background: #FFF;
    padding: 0;
    margin-left: 15px;
    order: 2;
    width: 72px;
    height: 72px } 

  .posts a .ratio img { object-fit: cover }

  .posts a h2 {
    order: 1;
    font-size: 110%;
    display: inline;
    margin: 0 }

  .posts .btn { width: 100% }

}


/* franchising 
//////////////////////////////////////////////////*/
.franchising-top { 
  background: url(img/bg-contact.jpg) center no-repeat;
  background-size: cover }

.franchising div.d-md-flex { margin-bottom: 45px } 

.franchising ul li { margin-bottom: 7.5px }

.franchising-feat h2 { margin-bottom: 45px }

.franchising-feat ul li .ico-franchising { margin-bottom: 15px }

.franchising-form { background: var(--color-secondary) }

.franchising-form form { 
  width: 80%;
  margin: 0 auto }


@media(min-width:768px){
  .franchising h1 { 
    letter-spacing: -5px;
    line-height: 1.125;
    font-size: 550% }

  .franchising-feat ul li { padding: 0 30px }
}

@media(max-width:767.98px) {
  .franchising-feat ul li { margin-bottom: 30px } 
}



/* jobs 
//////////////////////////////////////////////////*/
/* .jobs-video-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-position: 50%;
  background-size: cover;
  -o-object-fit: cover;
  object-fit: cover } */

.jobs textarea.form-control { min-height: 90px }  

.modal { background: rgba(0,0,0,.75) }
 
@media(min-width: 768px){
  /* .jobs .row { margin: 0 -60px }
  .jobs .row > div { padding: 0 60px } */

  .jobs-video {
    width: 70%; 
    position: absolute;
    top: 300px;
    right: -15%   }

  .modal .scroll {
    max-height: calc(100vh - 370px);
    overflow-y: scroll }
}


 

/* contact 
//////////////////////////////////////////////////*/

.contact { 
  background: url(img/bg-contact.jpg) center;
  background-size: cover  }

.inner .contact { 
  background: none;
  /*background: url(img/bg-contact-detail.jpg) center;
  background-size: cover */ }

.contact,
.contact a { color: #FFF }

.contact-social { 
  font-size: 112.5%;
  border-top: 1px solid rgba(255,255,255,0.2) }

@media(min-width:1152px){
  .contact { padding: 20px 0 }
  .home .contact { padding-top: 150px }
}



/* faq 
//////////////////////////////////////////////////*/
.faq {  
  background: url(img/bg-wave3.png) center bottom no-repeat;
  background-size: 100% auto;
  position: relative }



/* track
//////////////////////////////////////////////////*/
.track h1 { 
  margin-bottom: 15px;
  font-size: 200% }

/* .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:before {
  position: absolute;
  top: 30px;
  left: calc((100%/6)/2);
  content: " ";
  width: calc(((100%)-30px)/6)*5);
  height: 12px;
  background: #DDD;
  border-radius: 15px }

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

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

.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:before { background: linear-gradient(90deg, rgba(99,121,178,1) 0%, rgba(230,183,51,1) 50%, transparent) }

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

.track-steps > .step-ongoing:last-child:before { background: linear-gradient(90deg, rgba(99,121,178,1) 0%, rgba(230,183,51,1) 49%, rgba(99,121,178,0) 49%); }

.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 }

.track-steps strong { 
  padding: 0 15px;
  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-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% }
}

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

@media(max-width:425px){

  .track-steps > div { 
    width: 100%;
    display: none }

  .track-steps > div .ico-track { display: inline-block }

  .track-steps > .step-ongoing,
  .track-steps > .step-ok:last-child { display: block }

}


/* ouvidoria 
//////////////////////////////////////////////////*/
.ouvidoria {
  color: #FFF;
  background: var(--color-primary) }

.ouvidoria a { 
  display: block;
  font-size: 125%;
  font-weight: bold;
  color: #FFF }

@media(max-width:767.98px){
  .ouvidoria a { margin-bottom: .5rem }
}


/* basesite 
//////////////////////////////////////////////////*/
.basesite {
  padding: 60px 0;
  background: #F3F3F3; }

.mapsite strong,
.mapsite a { 
  line-height: 1.8;
  color: #333 }

.selos span { padding: 0 .5rem }

@media(min-width:768px){
  .mapsite  { 
    position: relative;
    z-index: 2;
    font-size: 87.5% }
  
  .selos span img { width: 72px }

}

@media(max-width:767.98px){
  .mapsite strong,
  .mapsite a { padding: .625rem 0 }
}




/* footer 
//////////////////////////////////////////////////*/
footer { 
  position: relative;
  background: #F3F3F3;
  font-weight: 400;
  padding: 0 }

footer .gotop { 
  text-decoration: none;
  color: var(--color-primary);
  position: absolute;
  font-size: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) }

footer .container { 
  padding-top: 60px;
  padding-bottom: 60px;
  border-top: 1px solid #DDD }  

footer a.brand-flexpoint {
  display: inline-block;
  text-indent: -1000000px;
  background: url(https://www.flexpoint.com.br/addons/flexpoint-site-sign.png) bottom;
  width: 25px;
  height: 27px } 

@media(max-width: 767.98px){
  footer .container { 
    font-size: 87.5%;
    padding: 30px }

  footer .gotop { 
    top: -25px;
    padding: 10px 15px;
    background: #F3F3F3;
    transform: translate(-50%,0) }
}
  




/* form 
//////////////////////////////////////////////////*/
.form-control {
  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 label[for="declaracao"] {  font-size: 80% }

.custom-control-input:checked~.custom-control-label::before {
  border-color: var(--color-primary);
  background-color: var(--color-primary) }

.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 {
  padding: 15px 22.5px;
  border: 0;
  border-radius: 3.75px }

.btn-link {
  text-transform: none;
  font-weight: normal;
  color: var(--color-primary) !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 {
  border: 0;
  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 }

.icon,
.ico-track, 
.ico-franchising,
.icon-services,
.icon-anvisa,
.icon-storage, 
.icon-reverse { 
  display: inline-block;
  position: relative;
  background: url("img/icons.png") top left no-repeat }

.icon-in{ width:41px; height:42px; background-position:0 0; }
.icon-fb{ width:24px; height:42px; background-position:0 -42px; }
.icon-ig{ width:39px; height:42px; background-position:0 -84px; }
.icon-r6{ width:70px; height:74px; background-position:0 -190px; }
.icon-r5{ width:69px; height:74px; background-position:0 -264px; }
.icon-r7{ width:73px; height:74px; background-position:0 -338px; }
.icon-d2{ width:43px; height:47px; background-position:0 -412px; }
.icon-d1{ width:51px; height:47px; background-position:0 -459px; }
.icon-d5{ width:46px; height:47px; background-position:0 -506px; }
.icon-d4{ width:26px; height:47px; background-position:0 -553px; }
.icon-d3{ width:36px; height:47px; background-position:0 -600px; }
.icon-r4{ width:36px; height:74px; background-position:0 -647px; }
.icon-r3{ width:68px; height:74px; background-position:0 -721px; }
.icon-r2{ width:75px; height:74px; background-position:0 -795px; }
.icon-r1{ width:72px; height:74px; background-position:0 -869px; }
  

.ico-track  { 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*/

.ico-franchising  { background:url("img/ico-franchising.png") top left no-repeat; }
.ico-franchising6 { width:43px; height:50px; background-position:0 0; }
.ico-franchising5 { width:47px; height:50px; background-position:0 -50px; }
.ico-franchising4 { width:39px; height:50px; background-position:0 -100px; }
.ico-franchising3 { width:33px; height:50px; background-position:0 -150px; }
.ico-franchising2 { width:43px; height:50px; background-position:0 -200px; }
.ico-franchising1 { width:32px; height:50px; background-position:0 -250px; }

.icon-services  { background:url("img/icon-services.png?v=2") top left no-repeat; }
.icon-s1        { width:73px; height:78px; background-position:0 -312px; }
.icon-s2        { width:79px; height:78px; background-position:0 -234px; }
.icon-s3        { width:79px; height:78px; background-position:0 -390px; }
.icon-s4        { width:74px; height:78px; background-position:0 -156px; }
.icon-s5        { width:70px; height:78px; background-position:0 -546px; }
.icon-s6        { width:74px; height:78px; background-position:0 0; }
.icon-s7        { width:58px; height:78px; background-position:0 -468px; }
.icon-s8        { width:77px; height:78px; background-position:0 -78px; }
.icon-s9        { width:73px; height:75px; background-position:0 -624px; }

.icon-anvisa    { background:url("img/icon-anvisa.png") top left no-repeat; }
.icon-anvisa-o1 { width:46px; height:46px; background-position:0 -102px; }
.icon-anvisa-o2 { width:28px; height:56px; background-position:0 0; }
.icon-anvisa-o3 { width:38px; height:46px; background-position:0 -56px; }
.icon-anvisa-v1 { width:38px; height:39px; background-position:0 -219px; }
.icon-anvisa-v2 { width:32px; height:39px; background-position:0 -180px; }
.icon-anvisa-v3 { width:46px; height:32px; background-position:0 -148px; }

.icon-storage     { background:url("img/icon-storage.png") top left no-repeat; }
.icon-storage-d1  { width:55px; height:55px; background-position:0 -210px; }
.icon-storage-d2  { width:55px; height:55px; background-position:0 -155px; }
.icon-storage-d3  { width:55px; height:54px; background-position:0 -101px; }
.icon-storage-d4  { width:55px; height:44px; background-position:0 -57px; }
.icon-storage-d5  { width:55px; height:57px; background-position:0 0; }
.icon-storage-s1  { width:74px; height:73px; background-position:0 -265px; }
.icon-storage-s2  { width:77px; height:73px; background-position:0 -338px; }

.icon-reverse     { background:url("img/icon-reverse.png") top left no-repeat; }
.icon-reverse-d1  { width:33px; height:24px; background-position:0 -96px; }
.icon-reverse-d2  { width:33px; height:32px; background-position:0 0; }
.icon-reverse-d3  { width:33px; height:32px; background-position:0 -120px; }
.icon-reverse-d4  { width:33px; height:32px; background-position:0 -32px; }
.icon-reverse-d5  { width:33px; height:32px; background-position:0 -64px; }


  

  
  


/* ASPECTS RATIO
//////////////////////////////////////////////////*/
.ratio {
  position: relative;
  overflow: hidden;
  display: block }

.ratio-1p1  { padding-top: 100% }
.ratio-4p3  { padding-top: 75% }
.ratio-3p2  { padding-top: 66.66% }
.ratio-8p5  { padding-top: 62.5% }
.ratio-16p9 { padding-top: 56.25% }

.ratio img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover }

.ratio-h img { 
  height: auto;
  width: 100% }

.ratio-v img { 
  width: auto;
  height: 100% }
/* 
[width] { width: auto !important }
[height] { height: auto !important } */

/* ANIMATION: DELAY / DURATION
//////////////////////////////////////////////////////////////////////////////////////////*/
.delay1   { animation-delay: 500ms !important }
.delay2   { animation-delay: 1000ms !important }
.delay3   { animation-delay: 1500ms !important }
.delay4   { animation-delay: 2000ms !important }
.delay5   { animation-delay: 2500ms !important }
.delay6   { animation-delay: 3000ms !important }
.delay7   { animation-delay: 3500ms !important }
.delay8   { animation-delay: 4000ms !important }
.delay9   { animation-delay: 4500ms !important }
.delay10  { animation-delay: 5000ms !important }
.delay11  { animation-delay: 6000ms !important }

.duration1  { animation-duration: 100ms !important }
.duration2  { animation-duration: 200ms !important }
.duration3  { animation-duration: 300ms !important }
.duration4  { animation-duration: 400ms !important }
.duration5  { animation-duration: 500ms !important }
.duration6  { animation-duration: 600ms !important }
.duration7  { animation-duration: 700ms !important }
.duration8  { animation-duration: 800ms !important }
.duration9  { animation-duration: 900ms !important }
.duration10 { animation-duration: 1000ms !important }
.duration20 { animation-duration: 2000ms !important }
.duration30 { animation-duration: 3000ms !important }
.duration40 { animation-duration: 4000ms !important }
.duration50 { animation-duration: 5000ms !important }
.duration60 { animation-duration: 6000ms !important }
.duration70 { animation-duration: 7000ms !important }
.duration80 { animation-duration: 8000ms !important }
.duration90 { animation-duration: 9000ms !important }
.duration100 { animation-duration: 10000ms !important }

.bg-light { 
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.05)}

.bg-gray { background: #F3F3F3 }

small { line-height: 1 }


input.error,
textarea.error,
select.error { background: #FFDFDF url(../gg/img/ico-required.png) no-repeat right 13px }



.symbol-md {
  position: absolute;
  right: 0;
  bottom: -250px }
  
.symbol-lg {
  position: absolute;
  z-index: 1;
  left: -220px;
  bottom: -340px }

@media(max-width:767.98px){
  .symbol-md { display: none }
}

@media(max-width:1725px){
  .symbol-lg { display: none }
}

@media(max-width:1598.98px){
  .symbol-md { height: 370px }
}





/* socials
//////////////////////////////////////////////////*/
.socials .large { font-size: 125% }



.modal-lg {
  max-width: 1278.98px !important;
}

/* 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 }