/* Add here all your css styles (customizations) */
@font-face {
  font-family: custom-light;
  src: url(../font/Montserrat-Light.otf);
}
@font-face {
  font-family: custom-medium;
  src: url(../font/Montserrat-Medium.otf);
}
@font-face {
  font-family: custom-regular;
  src: url(../font/Montserrat-Regular.otf);
}
@font-face {
  font-family: custom-semi-bold;
  src: url(../font/Montserrat-SemiBold.otf);
}
@font-face {
  font-family: custom-nexa-bold;
  src: url(../font/Nexa-Bold.otf);
}


*{
  font-family: custom-regular;
  font-size: 12px;
}

strong{
  font-family: custom-semi-bold;
}

b{
  font-family: custom-nexa-bold;
}

.font-light{
  font-family: custom-light;
}

.font-medium{
  font-family: custom-medium;
}

.text-sz-10{
  font-size: 10px;
}

.text-sz-11{
  font-size: 11px;
}

.text-sz-12{
  font-size: 12px;
}

.text-sz-13{
  font-size: 13px;
}

.text-sz-14{
  font-size: 14px;
}

.text-sz-15{
  font-size: 15px;
}

.text-sz-16{
  font-size: 16px;
}

.text-sz-17{
  font-size: 17px;
}

.text-sz-18{
  font-size: 18px;
}

.landing-banner{
  background-image: url(../img/landing-page.png);
  background-repeat: no-repeat;
  background-size: 100%;
}

.home-banner{
  background-image: url(../img/bni-express/home-bg.png);
  background-repeat: no-repeat;
  background-size: 110%;
}

.header{
  background: #0071bd;
  color: white;
}

.header a.link{
  color: white;
  text-decoration: none;
  font-family: custom-light !important;
  font-size: 14px !important;
}

.header a.active{
  color: #fff700;
  font-family: custom-semi-bold !important;
}

a.footer{
  color: #3c3c3c;
  text-decoration: none;
  font-family: custom-light !important;
  font-size: 14px !important;
}
.footer-active{
  font-size: 14px;
}

.bg-gradient{
  background-color: white;
  background-image: linear-gradient(#bcc9d1, white); /* Standard syntax (must be last) */
}

.bg-gradient2{
  background-color: white;
  background-image: linear-gradient(#aaaaaa4f, white); /* Standard syntax (must be last) */
}


.divider{
  border-left: 1px solid #c6c8ca;
  height: 100%;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

.message-box{
  border: solid;
  border-color: transparent;
  border-width: 0;
  border-radius: 35px;
  filter: drop-shadow(5px 5px 5px #aaaaaa);
  background-color: white;
  background-image: linear-gradient(#ecececab, white); /* Standard syntax (must be last) */
}

.contact-tab {
  color: #34a8a5;
}


.landing-margin{
  margin-top: -75%;
}

@media only screen and (min-width: 1650px) {
  .adjustment{
    height: 700px;
  }
}

@media only screen and (min-width: 2020px) {
  .adjustment{
    height: 800px;
  }
}

@media only screen and (min-width: 2300px) {
  .adjustment{
    height: 900px;
  }
}

@media only screen and (min-width: 2580px) {
  .adjustment{
    height: 1000px;
  }
}

@media only screen and (min-width: 2850px) {
  .adjustment{
    height: 1100px;
  }
}

@media only screen and (max-width: 1650px) {
  .landing-margin{
    margin-top: -65% !important;
  }
}
@media only screen and (max-width: 1550px) {
  .landing-margin{
    margin-top: -60% !important;
  }
}
@media only screen and (max-width: 1280px) {
  .landing-margin{
    margin-top: -55% !important;
  }
}
@media only screen and (max-width: 990px) {
  .landing-margin{
    margin-top: -60% !important;
  }
}
@media only screen and (max-width: 980px) {
  .landing-margin{
    margin-top: -60% !important;
  }
}
@media only screen and (max-width: 780px) {
  .landing-margin{
    margin-top: -55% !important;
  }
}
@media only screen and (max-width: 765px) {
  .landing-margin{
    margin-top: -65% !important;
  }
}
@media only screen and (max-width: 680px) {
  .landing-margin{
    margin-top: -60% !important;
  }
}

.imageFlag{
  display: block;
}
.imageFlagMobile{
  display: none;
}

@media only screen and (max-width: 580px) {
  .imageFlag{
    display: none;
  }
  .imageFlagMobile{
    display: block;
  }

  .landing-margin{
    margin-top: -16% !important;
  }
  .express-box{
    width: 130px !important;
  }

  .header-padding{
    padding-top: 5px !important;
  }

  .header a.link{
    font-size: 18px !important;
  }

  a.footer{
    font-size: 18px !important;
  }

  .footer-active{
    font-size: 18px !important;
  }

}