@font-face {
  font-family: avenir;
  src: url("../font/avenir/Avenir.ttc"); }
@font-face {
  font-family: Poppins-Bold;
  src: url("../font/Poppins/Poppins-Bold.ttf"); }
@font-face {
  font-family: Poppins-SemiBold;
  src: url("../font/Poppins/Poppins-SemiBold.ttf"); }
@font-face {
  font-family: Poppins-Regular;
  src: url("../font/Poppins/Poppins-Regular.ttf"); }
.soluciones {
  padding-bottom: 20px; }
  .soluciones .img-arania {
    margin-top: 30px; }
  .soluciones .btn-D {
    display: block;
    position: absolute;
    top: 32px;
    width: 142px;
    height: 59px;
    left: 18px;
    background: transparent; }
  .soluciones .btn-D:hover {
    display: block;
    position: absolute;
    top: 32px;
    width: 142px;
    height: 59px;
    left: 18px;
    background: url("../../assets/images/soluciones/iconos-arania/DAAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .btn-G {
    display: block;
    position: absolute;
    top: 126px;
    width: 142px;
    height: 59px;
    left: 19px;
    background: transparent; }
  .soluciones .btn-G:hover {
    display: block;
    position: absolute;
    top: 126px;
    width: 142px;
    height: 59px;
    left: 19px;
    background: url("../../assets/images/soluciones/iconos-arania/GAAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .btn-CS {
    display: block;
    position: absolute;
    top: 221.5px;
    width: 142px;
    height: 59px;
    left: 18px;
    background: transparent; }
  .soluciones .btn-CS:hover {
    display: block;
    position: absolute;
    top: 221.5px;
    width: 142px;
    height: 59px;
    left: 18px;
    background: url("../../assets/images/soluciones/iconos-arania/CSAAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .btn-SM {
    display: block;
    position: absolute;
    top: 315px;
    width: 142px;
    height: 59px;
    left: 19px;
    background: transparent; }
  .soluciones .btn-SM:hover {
    display: block;
    position: absolute;
    top: 315px;
    width: 142px;
    height: 59px;
    left: 19px;
    background: url("../../assets/images/soluciones/iconos-arania/SMAAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .btn-ITAM {
    display: block;
    position: absolute;
    top: 31.6px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: transparent; }
  .soluciones .btn-ITAM:hover {
    display: block;
    position: absolute;
    top: 31.6px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: url("../../assets/images/soluciones/iconos-arania/ITAMAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .btn-IDE {
    display: block;
    position: absolute;
    top: 125px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: transparent; }
  .soluciones .btn-IDE:hover {
    display: block;
    position: absolute;
    top: 125px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: url("../../assets/images/soluciones/iconos-arania/IDEAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .btn-BR {
    display: block;
    position: absolute;
    top: 221px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: transparent; }
  .soluciones .btn-BR:hover {
    display: block;
    position: absolute;
    top: 221px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: url("../../assets/images/soluciones/iconos-arania/BRAAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .btn-DRP {
    display: block;
    position: absolute;
    top: 315px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: transparent; }
  .soluciones .btn-DRP:hover {
    display: block;
    position: absolute;
    top: 315px;
    width: 142px;
    height: 59px;
    right: 54px;
    background: url("../../assets/images/soluciones/iconos-arania/DRPAAS-B.png") no-repeat center;
    background-size: 142px 59px; }
  .soluciones .contactanos {
    margin-top: 30px;
    background-color: #121935;
    width: 100%;
    text-align: center; }
    .soluciones .contactanos .container-fluid {
      margin-bottom: 0px !important; }
    .soluciones .contactanos h1 {
      color: #FFFFFF;
      font-size: 42px;
      font-weight: 900;
      font-family: Poppins-Bold !important;
      margin-bottom: 0px; }
    .soluciones .contactanos a {
      font-weight: 900;
      color: #438FCE;
      margin-right: 15%;
      font-family: Poppins-Bold !important;
      padding-top: 20px;
      padding-bottom: 10px; }
  .soluciones .banner {
    position: relative;
    width: 100%;
    height: auto;
    padding-bottom: 2em; }
    .soluciones .banner img {
      width: 100%;
      height: auto; }
    .soluciones .banner .logocasos {
      width: 200px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      color: #FFFFFF;
      font-weight: 900;
      margin-top: 7%;
      margin-left: 3%; }
    .soluciones .banner h1 {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      color: #FFFFFF;
      font-weight: 900;
      margin-top: 4%;
      margin-left: 3%;
      font-size: 35px;
      font-family: Poppins-Bold !important; }
  .soluciones .seccionbotones {
    width: 100%;
    height: 50px;
    text-align: center; }
    .soluciones .seccionbotones .active img {
      filter: grayscale(0);
      opacity: 1; }
    .soluciones .seccionbotones img {
      filter: grayscale(1);
      opacity: 0.4; }
    .soluciones .seccionbotones .pyn {
      padding-top: 10px;
      width: 150px; }
    .soluciones .seccionbotones .aagris {
      padding-top: 10px;
      width: 75px; }
  .soluciones .contenido1 {
    padding-top: 20px;
    border-top: 10px; }
    .soluciones .contenido1 img {
      max-width: 100px;
      height: 40px;
      margin-bottom: 3em;
      margin-top: 3em; }
    .soluciones .contenido1 .soluciones .contenido1 .uno img {
      margin-left: 3em; }
    .soluciones .contenido1 .descripcion {
      text-align: center;
      color: #333333;
      padding-bottom: 25px;
      font-family: Poppins-Regular !important; }
    .soluciones .contenido1 .solucion {
      height: 350px;
      text-align: left; }
      .soluciones .contenido1 .solucion .titulo {
        margin: 0.4em 0 !important;
        text-align: center;
        font-size: 80px;
        color: #121935;
        font-weight: bold; }
      .soluciones .contenido1 .solucion .subtitulo {
        color: #438FCE;
        font-family: Poppins-SemiBold !important; }
      .soluciones .contenido1 .solucion span {
        color: #88BFEA;
        font-weight: bold; }
      .soluciones .contenido1 .solucion p {
        font-family: Poppins-Regular !important; }
    .soluciones .contenido1 .uno {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 5px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido1 .dos {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 5px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido1 .tres {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 5px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido1 .cuatro {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 0px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido1 .col-md-3 {
      padding-left: 3em; }
  .soluciones .contenido2 {
    padding-top: 20px;
    border-top: 10px; }
    .soluciones .contenido2 .descripcion {
      text-align: justify;
      color: #333333;
      padding-bottom: 25px;
      font-family: Poppins-Regular !important; }
    .soluciones .contenido2 .solucion {
      position: relative;
      height: 350px;
      text-align: left; }
      .soluciones .contenido2 .solucion img {
        max-width: 100%;
        height: 50px;
        margin-bottom: 3em;
        margin-top: 3em; }
      .soluciones .contenido2 .solucion .imgsolucion {
        position: absolute;
        top: 46px;
        bottom: 0;
        right: 27px;
        width: 131px; }
      .soluciones .contenido2 .solucion .titulo {
        margin: 0.4em 0 !important;
        text-align: center;
        font-size: 80px;
        color: #121935;
        font-weight: bold; }
      .soluciones .contenido2 .solucion .subtitulo {
        color: #438FCE;
        font-family: Poppins-SemiBold !important; }
      .soluciones .contenido2 .solucion p {
        text-align: justify; }
      .soluciones .contenido2 .solucion p.conoce {
        font-weight: bold;
        position: absolute;
        right: 15px;
        bottom: 0;
        color: #88BFEA; }
    .soluciones .contenido2 .uno {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 5px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido2 .dos {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 5px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido2 .tres {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 0px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido2 .cuatro {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 5px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido2 .cinco {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 5px;
      border-style: solid;
      border-color: #121935; }
    .soluciones .contenido2 .seis {
      border-top: 0px;
      border-bottom: 0px;
      border-left: 0px;
      border-right: 0px;
      border-style: solid;
      border-color: #121935; }

@media (min-width: 768px) and (max-width: 991px) {
  .img-arania {
    width: 470px !important; }

  .btn-D {
    top: 30px !important;
    width: 87px !important;
    height: 40px !important; }

  .btn-D:hover {
    top: 30px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important; }

  .btn-G {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    left: 18px !important; }

  .btn-G:hover {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    left: 18px !important; }

  .btn-CS {
    top: 149px !important;
    width: 87px !important;
    height: 40px !important;
    left: 18px !important; }

  .btn-CS:hover {
    top: 149px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    left: 18px !important; }

  .btn-SM {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    left: 18px !important; }

  .btn-SM:hover {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    left: 18px !important; }

  .btn-ITAM {
    top: 29px !important;
    width: 87px !important;
    height: 40px !important;
    right: 40px !important; }

  .btn-ITAM:hover {
    top: 29px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 40px !important; }

  .btn-IDE {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    right: 40px !important; }

  .btn-IDE:hover {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 40px !important; }

  .btn-BR {
    top: 148px !important;
    width: 87px !important;
    height: 40px !important;
    right: 40px !important; }

  .btn-BR:hover {
    top: 148px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 40px !important; }

  .btn-DRP {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    right: 40px !important; }

  .btn-DRP:hover {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 40px !important; } }
@media (min-width: 992px) and (max-width: 1199px) {
  .img-arania {
    width: 470px !important; }

  .btn-D {
    top: 30px !important;
    width: 87px !important;
    height: 40px !important;
    left: 91px !important; }

  .btn-D:hover {
    top: 30px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    left: 91px !important; }

  .btn-G {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    left: 91px !important; }

  .btn-G:hover {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    left: 91px !important; }

  .btn-CS {
    top: 149px !important;
    width: 87px !important;
    height: 40px !important;
    left: 91px !important; }

  .btn-CS:hover {
    top: 149px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    left: 91px !important; }

  .btn-SM {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    left: 91px !important; }

  .btn-SM:hover {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    left: 91px !important; }

  .btn-ITAM {
    top: 29px !important;
    width: 87px !important;
    height: 40px !important;
    right: 113px !important; }

  .btn-ITAM:hover {
    top: 29px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 113px !important; }

  .btn-IDE {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    right: 113px !important; }

  .btn-IDE:hover {
    top: 88px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 113px !important; }

  .btn-BR {
    top: 148px !important;
    width: 87px !important;
    height: 40px !important;
    right: 113px !important; }

  .btn-BR:hover {
    top: 148px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 113px !important; }

  .btn-DRP {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    right: 113px !important; }

  .btn-DRP:hover {
    top: 207px !important;
    width: 87px !important;
    height: 40px !important;
    background-size: 87px 40px !important;
    right: 113px !important; } }

/*# sourceMappingURL=soluciones.css.map */
.m-hero, .m-intro, .m-icons, .m-details, .m-contacto {
  display: none;
}

@media (max-width: 812px){
  .banner, .introduction, .botones, #soluciones-1, #soluciones-2, .contactanos, .container { display: none; }
  .m-hero, .m-intro, .m-icons, .m-details, .m-contacto { display: block; }

  .m-hero { position: relative; }
  .m-hero .title { position: absolute; top: 0; height: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; background-color: hsla(0,0%,0%,0.4); }
  .m-hero h1 { color: white; font-size: 10vw; }
  .m-hero img { width: 100%; }

  .m-intro .inner { width: 80%; margin: auto; padding: 60px 0; }
  .m-intro h1 { color: #438FCE; }

  .m-icons { width: 80%; margin: auto; }
  .m-icons .service { margin-bottom: 70px;  }
  .m-icons .service .up { margin-bottom: 10px; }
  .m-icons .service .up img { width: 80%; margin: auto; display: block; } 
  .m-icons .service .down { display: flex; width: 80%; margin: auto; }
  .m-icons .service .down .side { width: 50%; display: flex; justify-content: center; }
  .m-icons .service .down .side img { height: 40px; }
  .m-icons .service .title { text-align: center; color: hsl(0,0%,60%); margin: auto; margin-top: 10px; width: 70%;  }
  .m-icons .service .title p { font-size: 22px; }

  .m-details { text-align: center; padding: 50px 0; width: 80%; margin: auto; margin-top: -20px; }
  .m-details .intro { font-size: 20px; text-align: center; margin-bottom: 50px; }
  .m-details .item { margin-bottom: 70px; }
  .m-details img { width: 100px; display: block; margin: auto; margin-bottom: 20px; }
  .m-details h2 { margin-bottom: 15px; color: #438FCE; }

  .m-contacto { background-color: #121935; }
  .m-contacto .inner { width: 70%; margin: auto; padding: 60px 0 40px; }
  .m-contacto img { width: 70%; margin: auto; display: block; margin-bottom: 60px; }
  .m-contacto h1 { text-align: center; color: white; background-color: #438FCE; font-size: 25px; padding: 10px 0; width: 180px; margin: auto; display: block; box-shadow: 0 6px 8px hsla(0,0%,0%,0.4); transition: box-shadow 0.3s; border-radius: 25px 0 25px 0; }
  .m-contacto a:active { box-shadow: 0 3px 6px hsla(0,0%,0%,0.4) }
}