@import url(hk-style-general.css);

/*specific sections style*/

/* change text color */

.portfolio-body .navbar-dark .navbar-nav .nav-link.active,
.portfolio-body .hk-textcolor-secondary,
.portfolio-body .hk-textcolor-primary {
  color: #ffffff;
}

/* change color buttons */

.portfolio-body .btn-outline-secondary,
.portfolio-body .btn-outline-secondary:hover,
.portfolio-body .btn-outline-secondary:focus,
.portfolio-body .btn-outline-secondary:active,
.portfolio-body .btn-outline-secondary:active:focus,
.portfolio-body .contact-box .btn-outline-secondary,
.portfolio-body .contact-box .btn-outline-secondary:hover,
.portfolio-body .contact-box .btn-outline-secondary:focus,
.portfolio-body .contact-box .btn-outline-secondary:active,
.portfolio-body .contact-box .btn-outline-secondary:active:focus {
  background: transparent;
  border: solid 2px #ffffff;
  color: #ffffff;
  box-shadow: none;
  padding: 10px 18px;
}

/* change navbar */

.portfolio-body .sticky-top.scrolled {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/*GENERAL*/

.portfolio-body {
  overflow-x: hidden;
}

.portfolio-body h1 {
  font-size: 11rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.4);
  text-shadow: none;
  line-height: 1;
}

.portfolio-body hr {
  background-color: rgba(255, 255, 255, 0.8);
}

.portfolio-banner {
  padding-top: 120px !important;
}

.portfolio-banner .subtitle + p {
  font-size: 1.563rem;
}

.portfolio-banner img {
  transform: translateY(-2%);
}

.text-project {
  font-weight: 600;
  font-size: 22px;
}

#nav-projects a,
#nav-projects a i {
  transition: 0.3s all ease;
}

#nav-projects a:hover {
  color: #ffffff;
}

#nav-projects .btn-prev:hover i {
  margin-right: 20px;
}

#nav-projects .btn-next:hover i {
  margin-left: 20px;
}

/* Clever Credit */

#cleverCredit {
  background: url(../img/bg-cleverCred.png), #33b7a8;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#cleverCredit .portfolio-banner p,
#cleverCredit .portfolio-content p {
  color: #1b35af;
}

#cleverCredit .solution-section {
  background-image: url(../img/img-cleverCred-solution.png);
  background-position: 80% center;
  height: 1000px;
}

/*Make it Pro*/

#mip {
  background: url(../img/bg-MIP@2x.png), #b73580;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#mip .portfolio-banner p,
#mip .portfolio-content p {
  color: #a8e1ff;
}

#mip .solution-section {
  background-image: url(../img/MIP-solution-1@2x.png);
  background-position: 115% top;
  background-repeat: no-repeat;
  background-size: contain;
  height: 600px;
}

#mip .solution-section + .container-fluid img {
  transform: translateX(-15%);
}

/* Syncosa */

#syncosa {
  background: url(../img/syncosa-bg@2x.png), #212f78;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#syncosa .subtitle,
#syncosa .hk-text-secondary {
  color: #48e3c5;
}

/* Quansa */

#quansa {
  background: url(../img/bg-quansa.png), #64cbcf;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#quansa .portfolio-banner p,
#quansa .portfolio-content p {
  color: #357da9;
}

#quansa .client-section {
  background-image: url(../img/quansa-client-img@2x.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: -50px;
}

#quansa .solution-section {
  background-image: url(../img/quansa-bg-solution@2x.png);
  background-position: center;
  background-size: contain;
  height: auto;
}

/* Open App */

#openApp {
  background: url(../img/bg-open.png), #3bb4d5;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#openApp .portfolio-banner p {
  color: #707074;
}

#openApp .portfolio-content .subtitle {
  color: #e94e1b;
}

#openApp .solution-section {
  background-image: url(../img/openapp-img-solution@2x.png);
  background-repeat: repeat-x;
  background-position: center;
  background-size: contain;
  height: 600px;
}

/* Paypunta */

#paypunta {
  background: url(../img/bg-paypunta.png), #f89352;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#paypunta.portfolio-body h1 {
  font-size: 14rem;
}

#paypunta .portfolio-content p,
#paypunta .portfolio-content .subtitle,
#paypunta .hk-text-secondary,
#paypunta .portfolio-content h2 {
  color: #29395f;
}

#paypunta .portfolio-banner img {
  margin-top: -10%;
}

#paypunta .client-section {
  background-image: url(../img/paypunta-img-client.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right center;
  height: 600px;
}

#paypunta .challenge-bg {
  background-image: url(../img/paypunta-img-challenge@2x.png);
  background-repeat: repeat-y;
  background-position: center top;
  background-size: contain;
  height: auto;
}

#paypunta .solution-section {
  background-image: url(../img/paypunta-img-solution@2x.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: contain;
  height: 2000px;
}

/*Adman*/

#adman {
  background: url(../img/bg-adman.png), #4677dd;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#adman .portfolio-content .subtitle > p,
#adman .portfolio-content h2 {
  color: #ffcc5a;
}

#adman .client-section {
  background-image: url(../img/adman-client-img@2x.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  height: 600px;
}

#adman .solution-section {
  background-image: url(../img/adman-solution-2.png);
  background-repeat: repeat-x;
  background-position: center;
  background-size: cover;
  height: 400px;
}

/* CDLC Originación Digital */

#originacion-digital {
  background: url(../img/originacion-digital-bg.png), #a72929;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#originacion-digital .subtitle,
#originacion-digital .hk-text-secondary {
  color: #9fc42f;
}

#originacion-digital .img-banner {
  margin-top: -10%;
}

#originacion-digital .portfolio-content p {
  font-size: 18px;
}

#originacion-digital .solution-section img {
  width: 22%;
}

#originacion-digital .solution-section .account,
#originacion-digital .solution-section .final {
  margin-left: 18px;
}

#originacion-digital .solution-section .img-wrap {
  margin-right: -115%;
  margin-left: 25%;
}

#originacion-digital .solution-section .credit,
#originacion-digital .solution-section .account {
  height: 50%;
}

/* Creditel */

#creditel {
  background: url(../img/creditel-bg.png), #001269;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#creditel .img-banner {
  margin-top: -10%;
}

/* Rukipay */

#rukipay {
  background: url(../img/rukipay-bg.png), #4f89c6;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

#rukipay .img-banner {
  margin-top: -8%;
}

#rukipay .portfolio-content h2 {
  color: #000e31;
}

/* RESPONSIVE */

@media all and (max-width: 1599px) {
  #adman .client-section {
    height: 500px;
  }

  #originacion-digital .solution-section .img-wrap {
    margin-right: -83%;
    margin-left: 25%;
  }

  @media all and (max-width: 1199px) {
    #mip .solution-section {
      background-position: 140% top;
      height: auto;
    }

    #quansa .client-section {
      background-image: none;
    }

    #paypunta .solution-section {
      background-image: none;
      height: auto;
    }

    #adman .client-section {
      background-image: none;
      height: auto;
    }

    #adman .solution-section {
      height: 300px;
    }

    #originacion-digital.portfolio-body h1 {
      font-size: 8rem;
    }

    #originacion-digital .solution-section {
      margin-bottom: 0;
    }

    #originacion-digital .solution-section img {
      width: 28%;
    }

    #originacion-digital .solution-section .img-wrap {
      margin-right: -50%;
      margin-left: 25%;
    }
  }

  #paypunta.portfolio-body h1 {
    font-size: 11rem;
  }
}

@media all and (max-width: 991px) {
  .solution-section {
    height: auto !important;
    background-image: none !important;
  }

  #mip .solution-section + .container-fluid img {
    transform: translateX(0%);
  }

  #quansa .solution-section {
    background-image: url(../img/quansa-bg-solution-sm@2x.png) !important;
    background-position: center;
    background-size: cover;
  }

  #paypunta.portfolio-body h1 {
    font-size: 9rem;
  }

  #paypunta .client-section {
    height: auto;
  }

  #originacion-digital .solution-section .img-wrap {
    margin-right: auto;
    margin-left: auto;
  }

  #px-web #px-web-img-challenge {
    transform: rotate(0deg) scale(1);
  }
}

@media all and (max-width: 767px) {
  .portfolio-banner {
    padding-top: inherit !important;
  }

  .portfolio-body h1 {
    font-size: 7rem;
  }

  #quansa.portfolio-body h1 {
    font-size: 5.5rem;
  }

  #paypunta.portfolio-body h1 {
    font-size: 4.5rem;
  }

  #paypunta .client-section {
    background-image: none;
  }

  #adman.portfolio-body h1 {
    font-size: 4.5rem;
  }

  #syncosa.portfolio-body h1 {
    font-size: 4.5rem;
  }

  #originacion-digital.portfolio-body h1 {
    font-size: 5rem;
  }
}

@media all and (max-width: 900px) {
  #rukipay .img-banner {
    margin-top: -10%;
  }
}

@media all and (max-width: 500px) {
  #originacion-digital.portfolio-body h1 {
    font-size: 3.5rem;
  }

  #creditel.portfolio-body h1 {
    font-size: 4rem;
  }

  #rukipay.portfolio-body h1 {
    font-size: 4.25rem;
  }

  #rukipay .img-banner {
    margin-top: -10%;
  }
}

@media all and (max-width: 290px) {
  #originacion-digital.portfolio-body h1 {
    font-size: 2.5rem;
  }

  #creditel.portfolio-body h1 {
    font-size: 3rem;
  }

  #rukipay.portfolio-body h1 {
    font-size: 3.75rem;
  }

  #rukipay .img-banner {
    margin-top: -14%;
  }
}

@media all and (min-width: 768px) {
  #rukipay .client-img {
    margin-right: -15%;
  }
}