/*Las fuentes originales son estas*/
@font-face {
    font-family: "Frauces"; 
    src: url(../fonts/Frauces.ttf);
  }
  @font-face {
    font-family: "Roboto-Regular";
    src: url(../fonts/Roboto-Regular.ttf);
  }
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    font-family: "Montserrat";
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: "Bitter";
  }
  img {
    display: block;
    max-width: 100%;
  }
  p {
    line-height: 25px;
  }
  .container--flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /*Estilos del header*/
  .main-header {
    padding: 0 15px;
  }
  .main-title {
    color: rgb(255, 255, 255);
  }
  .color-span{
    color: #1e20a0;
  }
  
  .icon-menu{
    font-size: 1.5em;
    color: #EEAD33;
    border: 1px solid rgb(0, 0, 0);
    display: block;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
  }  
  .menu{
    position: absolute;
    top: 80px;
    left: 0;
    background: #212121;
    width: 100%;
    list-style: none;
    padding: 20px;
    margin: 0;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
  }
  .menu__item {
    padding: 20px;
    text-align: center;
    width: 150px;
    margin: auto;
  }
  .menu__link {
    color: rgb(255, 255, 255);
    text-decoration: none;
    position: relative;
    display: block;
    
  }
  .menu__link:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-right: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    top: 0;
    right: 0;
    opacity: 0;
  }
  .menu__link:after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    left: 0;
    bottom: 0;
    opacity: 0;
  }
  .menu__link span:before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    top: 0;
    left: 0;
    opacity: 0;
  }
  .menu__link span:after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    bottom: 0;
    right: 0;
    opacity: 0;
  }
  .menu__link span{
    padding: 10px;
    font-size: 1.1em;
    display: block;
  }
  .menu__link--select:before, .menu__link--select:after, .menu__link--select span:before, .menu__link--select span:after {
    opacity: 1;
  }
  .menu__item:hover .menu__link:before, .menu__item:hover .menu__link:after, .menu__item:hover .menu__link span:before, .menu__item:hover .menu__link span:after {
    opacity: 1;
  }
  .nav-social{
    display: flex;
    justify-content: center;
  }
  .nav-social__item{
    width: 35px;
    height: 35px;
    display: block;
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    margin: 10px;
  }
  .nav-social__item:first-child{
    background: #3b5998;
  }
  .nav-social__item:nth-child(2){
    background: #1da1f2;
  }
  .nav-social__item:nth-child(3){
    background: #ea4c89;
  }
  .nav-social__item i{
    color: white;
  }
  .mostrar{
    opacity: 1;
    visibility: visible;
  }
  
  .design__title1{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: rgb(255, 255, 255);
    font-size: 2.5em;
    width: 100%;
    font-family: "Montserrat";
    text-align: center;
  }
  
  .design__title1:before {
    content: "";
    width: 200px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    background: transparent;
  }
  .design__title1:after {
    content: "";
    width: 200px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    background: transparent;
  }
  
  
  /*Estilos del banner video*/
  
  
  #background-video {
    width: 100%;
    height: 75vh;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -999;
    filter: brightness(60%);
  }
  
  
  /*Fin del banner video*/
  
  
  
  
  
  
  /* Titutlo Servicios*/
  .section__title2 {
    font-size: 2.8em;
    position: relative;
    text-align: center;
  }
  .section__title2:before {
    content: "";
    width: 200px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    background: transparent;
  }
  /*Fin del titulo*/
  
  
  
  /*Inicio de imagenes de servicios*/
  .main{
    margin-top: 350px;
  }
  .section__title {
    font-size: 3em;
    position: relative;
    text-align: center;
  }
  .section__title:before {
    content: "";
    width: 200px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    background: transparent;
  }
  .section__title:after {
      content: "";
      width: 200px;
      position: absolute;
      top: -20px;
      left: 50%;
      transform: translateX(-50%);
      height: 4px;
      background: transparent;
    }
  .welcome{
    text-align: center;
    padding: 20px;
    max-width: 750px;
    margin: auto;
  }
  .welcome__txt{
    font-size: 1.4em;
    color: #777;
  }
  .welcome__btn {
    display: block;
    border: 2px solid transparent;
    width: 200px;
    margin: auto;
    padding: 10px;
    text-decoration: none;
    color: #161486;
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 30px;
    transition: all 0.5s;
  }
  .welcome__btn:hover {
    background: transparent;
    color: white;
  }
  .container-design {
    margin: 30px 0;
  }
  .design__item{
    position: relative;
  }
  .design__item:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    position: absolute;
    top: 0;
    left: 0;
  }
  .design__title{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: rgb(255, 255, 255);
    font-size: 1.8em;
    width: 100%;
    text-align: center;
  }
  .design__title:before {
    content: "";
    width: 200px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    background: transparent;
  }
  .design__title:after {
    content: "";
    width: 200px;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    background: transparent;
  }
  .design__img {
    border: 0px solid white;
    height: 150px;
    width: 100px;
  }
  /*fin de imagenes servicios*/
  
  
  
  
  /*Inicio titulo alianzas*/
  
  .section__title3 {
    font-size: 2.8em;
    position: relative;
    text-align: center;
  }
  .section__title3:before {
    content: "";
    width: 200px;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    background: #161486;
  }
  /*Fin del titulo alianzas*/
  
  .box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 30px 0;
  }
  .box__content{
    width: 70%;
  }
  .box__icon{
    width: 100px;
    height: 100px;
    border: 2px solid #999;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: #EEAD33;
  }
  .box__icon:hover{
    color: black;
  }
  .box__title{
    color: #EEAD33;
    margin: 0;
  }
  .box__txt {
    color: #999;
  }
  .newsletter{
    margin: 50px 0;
  }
  .form{
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    max-width: 600px;
  }
  .form__mail{
    display: block;
    background: #ddd;
    padding: 15px;
    width: 75%;
    border: none;
    font-size: 1em;
  }
  .form__submit{
    display: block;
    background: #EEAD33;
    border: none;
    padding: 15px;
    width: 20%;
    color: white;
    font-size: 1em;
  }
  
  .main-footer{
    background: #33477b;
    color: #ffffff;
  }
  .main-footer .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .footer__title{
    font-size: 1.8em;
    color: white;
    text-transform: uppercase;
  }
  .column--50-25 {
    width: 49%;
    padding: 20px;
  }
  .footer__author{
    text-align: right;
    color: #EEAD33;
    display: block;
  }
  .footer__txt {
    margin-right: 5px;
    font-size: .9em;
  }
  .footer__link{
    color: #ffffff;
  }
  .footer__date{
    font-size: .8em;
    border-bottom: 1px solid #888;
    padding-bottom: 10px;
    color: white;
  }
  .social-icon{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .social-icon i {
    margin-right: 10px;
    width: 35px;
    height: 35px;
    text-align: center;
    color: white;
    padding: 10px;
    border-radius: 50%;
    
  }
  @media screen and (min-width: 768px) {
    .menu{
      position: static;
      opacity: 1;
      visibility: visible;
      width: auto;
      display: flex;
      background: none;
      font-size: .8em;
    }
    .menu__item {
      width: auto;
    }
    .icon-menu{
      display: none;
    }
    .banner {
      min-height: 500px;
    }
    .banner:before {
      min-height: 500px;
    }
    .main{
      margin-top: 400px;
    }
    .box{
      justify-content: center;  
    }
    .box__icon{
      margin-right: 30px;
    }
  }
  
  @media screen and (min-width: 1024px) {
    .container {
      width: 1000px;
      margin: auto;
    }
    .main-title{
      font-size: 2.5em;
    }
    .menu {
      font-size: 1em;
    }
    .banner {
      min-height: 600px;
    }
    .banner:before {
      min-height: 600px;
    }
    .banner__title, .banner__txt {
      font-size: 1.5em;
      padding: 10px;
    }
    .main{
      margin-top: 500px;
    }
    .design__item{
      height: 400px;
    }
    .container-design .design__img{
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    
    .container-design, .container-tips{
      display: flex;
      flex-wrap: wrap;
    }
    .design__item{
      width: 50%;
    }
    .container-box{
      width: 50%;
    }
    .container-tips {
      height: 500px;
    }
    .container-tips .design__item{
      height: 100%;
    }
    .container-tips .design__img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }
    .column--50-25 {
      width: 24%;
    }
  }
  @media screen and (min-width: 1280px) {
    .container {
      width: 1200px;
    }
    .design__title{
      font-size: 2.5em;
    }
    .design__item{
      height: 500px;
    }
  }
  @media screen and (min-width: 1600px) {
    .container {
      width: 1400px;
    }
    .banner__title, .banner__txt {
      font-size: 2em;
    }
  }
  
  
  /*Carrusel alianzas*/ 
  
  /* Logo Slider */
  .slider .slide {
    height: 200%;
    width: auto;
   }
   .logo-slider {
     background: none;
     -webkit-box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
     box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.125);
     margin: auto;
     overflow: hidden;
     position: relative;
     width: auto;
   }
   .logo-slider::before,
   .logo-slider::after {
     background: -webkit-gradient(
        linear,
        left top,
        right top,
        from(white),
        to(rgba(255, 255, 255, 0))
     );
     background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
     content: "";
     height: 250px;
     position: absolute;
     width: 250px;
     z-index: 1;
   }
   .logo-slider::after {
     right: 0;
     top: 0;
     -webkit-transform: rotateZ(180deg);
     transform: rotateZ(180deg);
   }
   .logo-slider::before {
     left: 0;
     top: 0;
   }
   .logo-slider .logo-slide-track {
     -webkit-animation: logo-scroll 20s linear infinite;
     animation: logo-scroll 30s linear infinite;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: calc(250px * 14);
     animation-duration: 15s;
     animation-iteration-count: infinite;
   }
   .logo-slider .slide {
     height: 350px;
     width: auto;
     padding: 10px;
   }
   @-webkit-keyframes logo-scroll {
     0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
     }
     100% {
        -webkit-transform: translateX(calc(-250px * 10));
        transform: translateX(calc(-250px * 10));
     }
   }
   @keyframes logo-scroll {
     0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
     }
     100% {
        -webkit-transform: translateX(calc(-250px * 10));
        transform: translateX(calc(-3000px));
     }
   }
  
  /*Fin de carrusel alianza*/
  
  
  
  
  
  
  /*.container1 {
    background:#FFFFF;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }*/
  
  .blob-c {
    min-height: 100vh;
    overflow: hidden;
    position:absolute;
    width: 100%;
    filter: blur(40px);
  /*   background: rgba(255,255,255,0.1) */
  }
  
  .blob {
    background:#FFFFFF;
    height: 60px;
    width: 80px;
    border-radius: 40% 50% 30% 40%;
      animation: 
      transform 18s ease-in-out infinite both alternate, movement_one 12s ease-in-out infinite both;
    opacity:.7;
    position: absolute;
    left: 75%;
    top: 40%;
  }
  
  .blob.one{
    background:#FFFFFF;
    height: 150px;
    width: 200px;
    left: 10px;
    top: 10px;
    transform: rotate(-180deg);
    animation: transform 8s ease-in-out infinite both alternate, movement_two 20s ease-in-out infinite both;
  }
  
  .blob.two{
    background:#FFFFFF;
    height: 150px;
    width: 150px;
    left: 600px;
    top: 250px;
    transform: rotate(-180deg);
    animation: transform 10s ease-in-out infinite both alternate, movement_two 10s ease-in-out infinite both;
  }
  
  .blob.three{
    background:#FFFFFF;
    height: 150px;
    width: 150px;
    left: 800px;
    top: 30px;
    transform: rotate(-180deg);
    animation: transform 7s ease-in-out infinite both alternate, movement_two 23s ease-in-out infinite both;
  }
  
  .blob.four{
    background:#FFFFFF;
    height: 100px;
    width: 100px;
    left: 500px;
    top: 60px;
    transform: rotate(-180deg);
    animation: transform 17s ease-in-out infinite both alternate, movement_two 12s ease-in-out infinite both;
  }
  
  .blob.five{
    background:#FFFFFF;
    height: 100px;
    width: 80px;
    left: 480px;
    top: 250px;
    transform: rotate(-180deg);
    animation: transform 12s ease-in-out infinite both alternate, movement_two 18s ease-in-out infinite both;
  }
  
  .blob.six{
    background:#FFFFFF;
    height: 70px;
    width: 100px;
    left: 160px;
    top: 400px;
    transform: rotate(-180deg);
    animation: transform 5s ease-in-out infinite both alternate, movement_two 7s ease-in-out infinite both;
  }
  
  .blob.seven{
    background: #FFFFFF;
    height: 70px;
    width: 100px;
    left: 400px;
    top: 400px;
    transform: rotate(-180deg);
    animation: transform 5s ease-in-out infinite both alternate, movement_two 12s ease-in-out infinite both;
  }
  
  @keyframes transform
  {
      0%,
    100% { border-radius: 33% 67% 70% 30% / 30% 40% 70% 70%; } 
     20% { border-radius: 37% 63% 51% 49% / 37% 35% 35% 63%; } 
     40% { border-radius: 36% 64% 64% 36% / 64% 48% 52% 26%; } 
     60% { border-radius: 37% 63% 51% 49% / 30% 30% 70% 73%; } 
     80% { border-radius: 40% 60% 42% 58% / 51% 51% 49% 59%; } 
  }
  
  @keyframes movement_one
  {
      0%,
    100% { transform: none; }
     50% { transform: translate(50%, 20%) rotateY(10deg) scale(1); }
  }
  
  @keyframes movement_two
  {
      0%,
    500% { transform: none; }
     50% { transform: translate(50%, 100%) rotate(-200deg) scale(1.3);}
  }
  
  
  /* CARD */
  
  section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 80px 40px 40px 80px;
  }
  
  .card {
    width: min(100%, 500px);
    background: rgba(255, 255, 255);
    border-radius: 16px;
    font-family: "Poppins", sans-serif;
    z-index: 5;
  }
  
  .card > img {
    display: block;
    width: 100%;
    max-width: 500px;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 16px 16px 0 0;
    filter: contrast(70%);
    transition: all 0.6s cubic-bezier(0.43, 0.41, 0.22, 0.91);
  }
  
  .card > img:hover {
    filter: contrast(100%);
  }
  
  .card-content {
    display: flex;
    flex-direction: column;
    padding: 20px 15px 20px;
  }
  
  .card-content > p {
    margin-bottom: 10px;
  }
  
  .card-content > p:nth-child(1) {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1e40af;
  }
  
  .card-content > p:nth-child(2) {
    font-size: 0.8rem;
    font-weight: 400;
    color: #6b7280;
  }
  
  @media (max-width: 900px) {
    section {
       grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 500px) {
    section {
       grid-template-columns: repeat(1, 1fr);
    }
  }




  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  .galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    grid-auto-flow: dense;
    padding: 1rem;
  }
  .galeria .box {
    background-color: #ffffff;
    background-size: cover;
  }
  .galeria .box:after {
    content: '';
    display: block;
    padding-top: calc(100% / (16/15));
  }
  .galeria .box:nth-child(1) {
    background-image: url(metro.jpg);
  }
  .galeria .box:nth-child(2) {
    background-image: url(metrobus.jpg);
  }
  .galeria .box:nth-child(3) {
    background-image: url(trolebus.jpg);
  }

  .galeria .box:nth-child(4) {
    background-image: url(suburbano.jpg);
  }
  .galeria .box:nth-child(5) {
    background-image: url(ferromex.jpg);
  }
  .galeria .box:nth-child(6) {
    background-image: url(ferrovalle.jpg);
  }
  .galeria .box:nth-child(7) {
    background-image: url(ferrosur.jpg);
  }
  .galeria .box:nth-child(8) {
    background-image: url(kansas.jpg);
  }
  .galeria .box:nth-child(9) {
    background-image: url(tren\ electrico.jpg);
  }
  .galeria .box:nth-child(10) {
    background-image: url(metrorrey.jpg);
  }
  .galeria .box:nth-child(11) {
    background-image: url(thales.jpg);
  }
  .galeria .box:nth-child(12) {
    background-image: url(ikusi.jpg);
  }
  .galeria .box:nth-child(13) {
    background-image: url(alstom.jpg);
  }
  .galeria .box:nth-child(14) {
    background-image: url(abengoa.jpg);
  }
  .galeria .box:nth-child(15) {
    background-image: url(bombardier.jpg);
  }
  .galeria .box:nth-child(16) {
    background-image: url(CAF.jpg);
  }
  .galeria .box:nth-child(17) {
    background-image: url(xerox.jpg);
  }
  .galeria .box:nth-child(18) {
    background-image: url(metro\ santo\ domingo.jpg);
  }
  .galeria .box:nth-child(19) {
    background-image: url(siemens.jpg);
  }
  .galeria .box:nth-child(20) {
    background-image: url(CIM.jpg);
  }
  .galeria .box:nth-child(21) {
    background-image: url(poyry.jpg);
  }
  .galeria .box:nth-child(22) {
    background-image: url(metro\ lima.jpg);
  }
  .galeria .box:nth-child(23) {
    background-image: url(tren_maya.png);
  }






  .galeria2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1rem;
    grid-auto-flow: dense;
    padding: 1rem;
  }
  .galeria2 .box {
    background-color: #ffffff;
    background-size: cover;
  }
  .galeria2 .box:after {
    content: '';
    display: block;
    padding-top: calc(100% / (16/15));}


  .galeria2 .box:nth-child(1) {
    background-image: url(galland.png);
  }
  .galeria2 .box:nth-child(2) {
    background-image: url(lafarga.png);
  }
  .galeria2 .box:nth-child(3) {
    background-image: url(mex\ solutions.png);
  }
  .galeria2 .box:nth-child(4) {
    background-image: url(mosdorfer.png);
  }
  .galeria2 .box:nth-child(5) {
    background-image: url(TSO.png);
  }
  .galeria2 .box:nth-child(6) {
    background-image: url(ZO.png); 
  }
 


  /*Responsive Servicios*/

@media (max-width: 800px) {
  .galeria{
      width: 100%;
      background-color: rgb(255, 255, 255);
  }
}




@media (max-width: 800px) {
  .galeria2{
      width: 100%;
      background-color: rgb(255, 255, 255);
  }
}



@media (max-width: 2500px) {
  .galeria{
      width: 100%;
      background-color: rgb(255, 255, 255);
  }
}

@media (max-width: 800px) {
  .section__title{
      width: 100%;
      background-color: rgb(255, 255, 255);
  }
}

@media (max-width: 2500px) {
  .section__title{
      width: 100%;
      background-color: rgb(255, 255, 255);
  }
}
@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}
@media (max-width: 480px){
  .section__title .galeria .box{
      display: block;
      height: 0;
      width: 0;
      margin: 0 auto;
      border: 20px solid transparent;
      border-top: 0;
      border-bottom: 0;
      pointer-events:all;
  }
}