@font-face {
   font-family: "Rondal";
   src: url("/assets/fonts/Rondal-Regular.otf");
}

@font-face {
   font-family: "Gravity";
   src: url("/assets/fonts/Gravity-Regular.otf");
}

@font-face {
   font-family: "GravityLight";
   src: url("/assets/fonts/Gravity-Light.otf");
}

:root {
   --main-color: #fec93d;
   --secundary-color: #64d3dc;
   --mouse-arrow-color: #fec93d;
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translate3d(0, 500px, 0);
   }

   to {
      opacity: 1;
      transform: none;
   }
}
.progress{
   border-radius: .1rem !important;
}

.fadeInUp {
   animation-name: fadeInUp;
}

.link {
   display: none;
   align-items: center;
   padding: 5px;
   text-decoration: none;
   transform: rotate(-90deg) translate3d(0px, 0, 0);
   width: 100%;
   justify-content: center;
   top: 200px;
   position: relative;
}

.link__arrow {
   display: inline-flex;
}

.link__arrow span {
   position: relative;
   width: 14px;
   height: 2px;
   border-radius: 2px;
   overflow: hidden;
   background: #BEBDBE;
   z-index: 2;
}

.link__arrow span:nth-child(1) {
   transform-origin: left bottom;
   transform: rotate(45deg) translate3d(8px, -10px, 0);
}

.link__arrow span:nth-child(2) {
   transform-origin: left bottom;
   transform: rotate(-45deg);
}

.link__arrow span:after {
   content: '';
   display: block;
   position: absolute;
   left: 0;
   width: 0;
   height: 2px;
   background: var(--mouse-arrow-color);
}

.link__line {
   position: relative;
   margin-left: -14px;
   margin-right: 30px;
   width: 59px;
   height: 2px;
   background: #BEBDBE;
   overflow: hidden;
   z-index: 1;
}

.link__line:after {
   content: '';
   display: block;
   position: absolute;
   left: 28px;
   width: 70px;
   height: 2px;
   background: var(--mouse-arrow-color);
}

.link__text {
   color: #4A4A4A;
   font-family: 'Gravity';
   font-size: 12px;
   text-transform: uppercase;
}

.link:hover .link__line:after {
   animation: animation-line 0.5s forwards;
}

.link:hover .link__arrow span:after {
   animation: animation-arrow 0.5s forwards;
   animation-delay: 0.2s;
}

@keyframes animation-line {
   0% {
      left: 28px;
   }

   100% {
      left: 0;
   }
}

@keyframes animation-arrow {
   0% {
      width: 0;
   }

   100% {
      width: 100%;
   }
}

.fixed-top {
   background-color: rgba(255, 255, 255, 1);
   border-bottom: 1px solid rgb(247, 247, 247);
}

body {
   position: relative;
   margin: 0;
   padding-bottom: 8.5rem;
   min-height: 100%;
   overflow-x: hidden;
}

footer {
   background-color: #50504F;
   color: white;
   width: 100%;
   padding-bottom: 20px;
   padding-top: 20px;
   position: absolute;
   right: 0;
   bottom: 0;
   left: 0;
}

footer p {
   font-size: 12px;
   margin-bottom: 0;
   margin-top: 12px;
   text-align: center;
   font-style: italic;
}

footer .order-last p {
   text-align: center;
}

footer img {
   max-width: 93px !important;
   width: 100%;
}

footer .footer-content-img div {
   margin-top: -63px;
   border-radius: 0 0 100px 100px;
   height: auto;
   width: 46%;
   margin: auto;
   padding-bottom: 7%;  
}

.nav-link.active {
   animation-fill-mode: forwards;
   animation-name: blinds;
   animation-duration: 0.1s;
   animation-delay: 0s;
   animation-timing-function: linear;
}

.navNotFixed {
   position: absolute !important;
   width: 100%;
   z-index: 1;
   background-color: rgba(255, 255, 255, 1);
   border-bottom: none;
}

.wrap-content-big {
   padding-right: 15px;
   padding-left: 15px;
}

@keyframes fadeBackgroundNav {
   from {
      background-color: rgba(255, 255, 255, 1);
   }

   to {
      background-color: rgba(255, 255, 255, 0);
   }
}

@keyframes blinds {
   from {
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 100%, rgba(255, 255, 255, 0) 100%)
   }

   50% {
      background-image: linear-gradient(90deg, rgb(248, 215, 54) 17px, rgba(255, 255, 255, 0) 17px)
   }

   to {
      background-image: linear-gradient(90deg, rgb(248, 215, 54) 34px, rgba(255, 255, 255, 0) 34px)
   }
}
.error-page{
   height: calc(100vh - 136px);
   background-color: #fec93d;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   padding-left: 5%;
   padding-right: 5%;
}
.error-page h1{
   font-family: Rondal;
   font-size: 116px;
   color: #64d3dc;
   margin-right: 0px;
   margin-bottom: 40px;
   background-color: white;
   border-radius: 236px;
   padding: 30px;
}
.error-page h2, .error-page p{
   text-align:center;
}

.nav-link:not(.active):hover {
   animation-fill-mode: forwards;
   animation-name: blinds;
   animation-duration: 0.1s;
   animation-delay: 0s;
   animation-timing-function: linear;
}


   .projectsSection {
      padding-top: 100px;
      padding-bottom: 100px;
      background-color: #fff;
   }

   .navbar-brand img {
      width: 155px;
   }

   .nav-item {
      text-transform: uppercase;
      font-size: 12px;
      font-family: Gravity;
      margin-bottom: 10px;
      -webkit-animation-duration: 0.8s;
      -moz-animation-duration: 0.8s;
      -o-animation-duration: 0.8s;
      animation-duration: 0.8s;
   }

   .wrap-content {
      padding-right: 30px;
      padding-left: 30px;
      height: 100%;
   }

   .general-padding {
      padding-right: 30px;
      padding-left: 30px;
   }

   .wrap-content-header {
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: flex-end;
   }

   .headerSection {
      background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0), rgb(245, 246, 252)), url('/img/background-header.jpg');
      background-repeat: no-repeat;
      background-position: center center;
      -webkit-background-size: cover;
      background-size: cover;
      width: 100%;
      height: 100vh;
      position: relative;
      padding-bottom: 63px;
      padding-top: 100px;
   }

   .container-navbar-toggler {
      display: flex;
      align-items: center;
      justify-content: flex-end;
   }

   .navbar-collapse {
      height: auto;
   }

   .scroll-container {
      height: 100vh;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
   }

   .projectsSection,
   .servicesSection,
   .contactSection {
      padding-top: 100px;
      padding-bottom: 100px;
      position: relative;
   }

   .nav {
      background-color: transparent;
   }

   .content-header {
      width: 100%;
      text-align: right;
   }

   .content-header h1 {
      margin-bottom: 30px;
   }

   .title {
      font-family: Rondal;
      font-size: 40px;
      margin-bottom: 0;
   }

   p {
      font-family: GravityLight;
      line-height: 1.8;
      font-size: 14px;
   }

   .servicesSection,
   .contactSection {
      background-color: var(--main-color);
      color: white;
      padding-top: 100px;
      padding-bottom: 100px;
   }

   .contactSection a {
      font-size: 15px;
      font-family: GravityLight;
      border: 2px solid #f1bc30;
      margin-top: 58px;
      color: var(--main-color);
      font-weight: 600;
      padding: 10px 25px;
      text-decoration: none;
      background-color: #50504f;
      margin: 0 auto;
      width: 100%;
      display: flex;
      justify-content: center;
      transition: transform .1s;
   }

   .contactSection a:hover {
      transform: scale(1.05);
      color: white;
   }

   .contactSection p {
      color: #393939
   }

   .content-services img {
      width: 80px; 
      filter: invert(90%) sepia(7%) saturate(7197%) hue-rotate(339deg) brightness(94%) contrast(85%);
   }

   .servicesSection .title {
      margin-bottom: 42px;
   }

   .servicesSection h2 {
      font-family: Rondal;
      font-size: 29px;
      margin-bottom: 50px;
      font-style: italic;
      font-weight: 600;
   }

   .servicesSection p {
      margin-bottom: 37px;
      color: #393939;
   }

   .servicesSection .content-services-one,
   .servicesSection .content-services-three,
   .servicesSection .content-services-two {
      padding-left: 30px;
      padding-right: 30px;
   }

   .content-services-two-diamon {
      background-color: #64d3dc;
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;  
      width: 125px;
      height: 125px;
      margin-bottom: 20px;
   }
   .content-services-two img {
      border-radius: 100px;
      background-color: #9b2c23;
      filter: invert(100%);    
      width: 111px;
   }

   .servicesSection .content-services-one div {
      display: block;
   }

   .content-services-two {
      margin-bottom: 46px;
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .progress-bar {
      background-color: var(--secundary-color) !important;
   }

   .ability-column-left-one {
      padding-top: 61px;
   }

   .ability-column-right-one {
      padding-top: 88px;
   }

   .ability-column-right-two {
      padding-top: 60px;
   }

   .abilitySection p {
      margin-top: 15px;
      margin-bottom: 0px;
   }

   .progress {
      padding-right: 0 !important;
      padding-left: 0 !important;
   }

   .abilitySection {
      padding-top: 100px;
      padding-bottom: 0px;
   }

   .abilitySection-progressbar {
      background-image: url('/img/back-abilitySection.jpg');
      background-size: contain;
      background-position: top center;
      background-repeat: repeat;
   }

   .abilitySection-progressbar h1 {
      background-color: #fff;
   }

   .abilitySection-learning {
      margin-top: 76px;
      background-image: none;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      padding-top: 124px;
      padding-bottom: 124px;
      position: relative;
      overflow: hidden;
   }

   .abilitySection-learning p {
      text-align: right;
      padding-top: 50px;
      padding-bottom: 50px;
      padding-right: 30px;
      z-index: 1;
      position: relative;
   }

   .abilitySection-learning:before {
      content: "";
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      z-index: -1;
      background: url('/img/back-abilitySection-2.jpg');
      transform: rotate(30deg);
      background-size: contain;
      background-position: 80% 100%;
   }

   .send-mail {
      border-radius: 60px;
      background-color: var(--main-color);
      padding: 20px;
      position: absolute;
      z-index: 1;
      top: -50px;
   }

   .send-mail img {
      filter: invert(100%);
      width: 67px;
   }

   .project-content img {
      margin-bottom: 18px;
   }

   .project-content-img {
      background-image: none;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      padding: 42px;
      width: 100% !important;
   }

   .project-content-img-link {
      width: 60%;
      background-color: var(--main-color);
      border-radius: 0px;
      box-shadow: 1px 1px 5px #f1bc30;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #f1bc30;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 15px;
      transition: transform .1s
   }

   .project-content-img>div:not(.project-content-img-link) {
      justify-content: center;
   }

   .project-content-img-link a {
      text-align: center;
      color: white;
      text-transform: uppercase;
      font-family: Gravity;
      text-decoration: none;
   }

   .project-content-img-link:hover {
      transform: scale(1.05);
      color: white !important;
      ;
   }

   .project-content-img-link a:hover {
      color: white !important;
      ;
   }

   .project-content-text {
      background-position: top center;
      background-size: contain;
      background-repeat: no-repeat;
      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.93)), url('/img/back-portfolio.jpg');
      padding-bottom: 124px;
      padding-top: 12px;
      margin-bottom: -120px;
   }

   .project-content-text div {
      text-align: center;
      padding: 0;
      margin-top: 0;
      margin-right: 0;
   }

   .project-content-text h2 {
      font-size: 15px;
      font-family: GravityLight;
      padding: 5px;
      background-color: rgba(80, 80, 79, .8);
      text-transform: uppercase;
      margin-bottom: 52px;
      font-weight: 900;
      color: var(--main-color);
      line-height: 1.8;
      width: calc(100% + 60px);
      margin-left: -30px;
   }

   .project-content-text img {
      margin-bottom: 4px;
   }

   .mini-border {
      border-top: 2px solid #f8d736;
      width: 65px;
   }

   .mini-border-header {
      border-top: 2px solid #f8d736;
      width: 78px;
      margin-top: 20px;
      margin-bottom: 20px;
   }

   @keyframes progressBorder {
      0% {
         width: 0;
      }

      100% {
         width: 78px;
      }
   }

   @keyframes progressBorder {
      0% {
         width: 0;
      }

      100% {
         width: 78px;
      }
   }

   .abilitySection-learning-progress {
      background-color: var(--secundary-color);
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      right: 0;
   }

   @keyframes progressLearning {
      0% {
         height: 0;
      }

      100% {
         height: 53%;
      }
   }

   .carousel-control-prev {
      display: none !important;
      margin-top: 7%;
   }

   .carousel-control-prev-icon,
   .carousel-control-next-icon {
      background-color: black;
      height: 42px !important;
   }

   .carousel-control-next {
      display: none !important;
      margin-top: 7%;
   }

   #projectsCarousel {
      padding-bottom: 70px;
      margin-top: 60px;
   }

   .carousel-indicators button {
      background-color: #7e7e7e !important;
   }

   .content-section-img {
      background-color: var(--main-color);
      border-radius: 97px;
      padding: 67px 20px;
      position: absolute;
      z-index: 15;
      width: 150px;
      height: 149px;
      margin: auto;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      margin-top: 23px;
   }

   .content-section-img img {
      width: 109px;
   }

   .navbar-nav {
      align-items: center !important;
   }

   .navbar-toggler:focus {
      box-shadow: none !important;
   }

   .navbar-toggler {
      border: none;
      background: transparent !important;
   }

   .navbar-toggler:hover {
      background: transparent !important;
   }

   .navbar-light .navbar-toggler {
      border-color: #63d3dc;
   }

   .navbar-toggler .icon-bar {
      height: 2px;
      width: 22px;
      border-radius: 1px;
      display: block;
      background-color: #63d3dc;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
   }

   .navbar-toggler .icon-bar+.icon-bar {
      margin-top: 4px;
   }

   .navbar-toggler.x .icon-bar:nth-of-type(1) {
      -webkit-transform: translateX(3px) rotate(45deg);
      -ms-transform: translateX(3px) rotate(45deg);
      -moz-transform: translateX(3px) rotate(45deg);
      -o-transform: translateX(3px) rotate(45deg);
      transform: translateX(3px) rotate(45deg);
      -webkit-transform-origin: 10% 10%;
      -ms-transform-origin: 10% 10%;
      -moz-transform-origin: 10% 10%;
      -o-transform-origin: 10% 10%;
      transform-origin: 10% 10%;
   }

   .navbar-toggler.x .icon-bar:nth-of-type(2) {
      opacity: 0;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
   }

   .navbar-toggler.x .icon-bar:nth-of-type(3) {
      -webkit-transform: translateX(3px) rotate(-45deg);
      -ms-transform: translateX(3px) rotate(-45deg);
      -moz-transform: translateX(3px)rotate(-45deg);
      -o-transform: translateX(3px) rotate(-45deg);
      transform: translateX(3px) rotate(-45deg);
      -webkit-transform-origin: 10% 90%;
      -ms-transform-origin: 10% 90%;
      -moz-transform-origin: 10% 90%;
      -o-transform-origin: 10% 90%;
      transform-origin: 10% 90%;
   }

   .navbar-toggler.x.collapsed .icon-bar:nth-of-type(1) {
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      -moz-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
   }

   .navbar-toggler.x.collapsed .icon-bar:nth-of-type(2) {
      opacity: 1;
      filter: alpha(opacity=100);
      -moz-opacity: 1;
   }

   .navbar-toggler.x.collapsed .icon-bar:nth-of-type(3) {
      -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
      -moz-transform: rotate(0);
      -o-transform: rotate(0);
      transform: rotate(0);
   }

   .navbar-brand {
      font-size: 1rem;
   }

   #navbarMenuCollapse {
      height: 100vh !important;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 47% 68%;
      padding-top: 30px;
   }

   .back-mv-inicio.showBack {
      background-image: url("/img/back-mv-inicio.jpg");
   }

   .back-mv-portfolio.showBack {
      background-image: url("/img/back-mv-portfolio.jpg");
   }

   .back-mv-servicios.showBack {
      background-image: url("/img/back-mv-servicios.jpg");
   }

   .back-mv-conocimientos.showBack {
      background-image: url("/img/back-mv-conocimientos.jpg");
   }

   .back-mv-contacto.showBack {
      background-image: url("/img/back-mv-contacto.jpg");
   }

   .back-mv-inicio:not(.showBack),
   .back-mv-portfolio:not(.showBack),
   .back-mv-servicios:not(.showBack),
   .back-mv-conocimientos:not(.showBack),
   .back-mv-contacto:not(.showBack) {
      background-image: none;
   }


@media(min-width: 576px) {

   .abilitySection-learning-progress {
      width: 63%;
   }

   .ability-column-right-two {
      padding-top: 151px;
   }

   .abilitySection {
      padding-bottom: 100px;
   }

   .abilitySection-progressbar {
      background-position: center;
      background-repeat: no-repeat;
   }

   .abilitySection-learning {
      margin-top: 76px;
      background-image: url('/img/back-abilitySection-2.jpg');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center center;
      padding-top: 124px;
      padding-bottom: 124px;
   }

   .abilitySection-learning:before {
      content: "";
      position: absolute;
      width: 200%;
      height: 200%;
      top: -50%;
      left: -50%;
      z-index: -1;
      background: none;
      transform: rotate(30deg);
      background-size: contain;
      background-position: 80% 100%;
   }

   .abilitySection-progressbar h1 {
      background-color: transparent;
   }

   footer .footer-content-img div {
      margin-top: -63px;  
      border-radius: 0 0 100px 100px;
      height: 70px;
      width: 30%;
      margin: auto;
      padding-bottom: 0;
   }


   .contactSection a {
      font-size: 16px;
      width: 30.667%;
   }

   body {
      padding-bottom: 9.5rem;
      min-width: 320px;
   }
}

@media(min-width: 768px) {
   .error-page{
      height: calc(100vh - 88px);
      padding-left: 5%;
      padding-right: 5%;
   }
   .error-page h2, .error-page p{
      text-align:center;
   }
   footer {
      padding-top: 0px;
   }
   footer .footer-content-img div {
      width: 100%;
   }

   body {
      padding-bottom: 5.5rem;
   }

   .navbar-brand img {
      width: 186px;
   }

   .wrap-content,
   .general-padding {
      padding-right: 10%;
      padding-left: 10%;
   }

   .wrap-content-big {
      padding-right: 15px;
      padding-left: 15px;
   }

   .title {
      font-size: 50px;
   }

   p {
      font-size: 15px;
   }

   .project-content-text {
      background-image: none;
      padding-bottom: 0;
      margin-bottom: 0;
      padding-top: 0px;
   }

   .project-content-text h2 {
      font-size: 26px;
      margin-bottom: 23px;
      width: 100%;
      padding: 0;
      background-color: transparent;
      text-transform: initial;
      font-weight: 100;
      color: black;
      margin-left: 0px;
   }

   .project-content img {
      margin-bottom: 5px;
   }

   .project-content-img {
      width: 33.33333333% !important;
      background-position: center;
      background-image: url("/img/back-portfolio.jpg");
   }
   .project-content.mercalista .project-content-img{
      background-image: none;
   }

   .project-content-text div {
      margin-right: 0;
      margin-top: 57px;
      text-align: right;
      padding: 80px 60px 60px 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0) 40%, rgb(100, 211, 220) 40%);
   }

   .project-content-img-link {
      width: 113px;
      height: 113px;
      border-radius: 88px;
      font-size: 16px;
   }

   .carousel-control-prev,
   .carousel-control-next {
      display: flex !important;
   }

   .servicesSection .content-services-one {
      padding-left: 10%;
      padding-right: 30px;
   }

   .servicesSection .content-services-three {
      padding-right: 10%;
      padding-left: 30px;
   }
   
   .content-services-two-diamon {
      width: 200px;
      height: 200px;
      margin-bottom: 50px;
   }

   .content-services-two img {
      width: 157px;
   }

   .servicesSection .content-services-one div {
      display: none;
   }

   .content-services-two {
      margin-bottom: 0;
   }

   .servicesSection h2 {
      font-size: 34px;
   }
}

@media(min-width: 992px) {
   .error-page{
      flex-direction: row;
      padding-left: 12%;
      padding-right: 12%;
   }
   .error-page h1{
   
      font-size: 171px;
  
      margin-right: 30px;
      margin-bottom:0px; 
      padding: 55px;
   }
   .error-page h2, .error-page p{
      text-align:left;
   }
   .link {
      display: inline-flex;
   }

   .headerSection {
      background-image: url("/img/background-header.jpg");
      padding-bottom: 100px;
   }

   .wrap-content-header {
      justify-content: center;
   }

   .content-header {
      width: 46%;
   }

   .servicesSection .content-services-one {
      padding-left: 12%;
   }

   .servicesSection .content-services-three {
      padding-right: 12%;
   }

   .wrap-content-big {
      padding-right: 5%;
      padding-left: 5%;
   }

   .contactSection a {
      font-size: 16px;
      width: 16.66666667%;
   }

   #navbarMenuCollapse {
      padding-top: 0px;
      height: 62px !important;
   }

   footer p {
      font-size: 13px;
      text-align: left;
      margin-top: 12px;
   }

   footer .order-last p {
      text-align: right;
   }

   footer img {
      max-width: 105px !important;
      margin-top: 15px;
   }

   .navbar-nav {
      align-items: flex-end !important;
   }

   .navbar-collapse {
      display: block;
   }

   .navNotFixed {
      background-color: transparent;
   }

   .m-2 {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
   }

   .navbar-expand-lg .navbar-nav .nav-link {
      margin-left: 30px !important;
   }

   .nav-item {
      text-transform: uppercase;
      font-size: 12px;
      font-family: Gravity;
      margin-bottom: 0px;
   }
}

@media(min-width: 1200px) {

   .wrap-content,
   .general-padding {
      padding-right: 15%;
      padding-left: 15%;
   }
}