body {
       overflow-x: hidden;
       font-family: 'Roboto Slab', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   p {
       line-height: 1.75
   }
   
   a {
       color: #343a40
   }
   
   .text-primary {
       color: #fed136 !important
   }
   h2 {
    font-weight: 400;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    }
    h4 {
        font-size: 30px;
        font-weight: 400;
        font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
        color: #070952;
    }
   h1,
   h3,
   h5,
   h6 {
       font-weight: 700;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   section {
       padding: 100px 0
   }
   
   section h2.section-heading {
    font-size: 45px;
    margin-top: -10px;
    margin-bottom: 15px;
    color: #f7a304;
   }
   
   section h3.section-subheading {
       font-size: 16px;
       font-weight: 400;
       font-style: italic;
       margin-bottom: 75px;
       text-transform: none;
       font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   @media (min-width:768px) {
       section {}
   }
   
   .btn {
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
       font-weight: 700
   }
   
   .btn-xl {
       font-size: 18px;
       padding: 20px 40px
   }
   
   .btn-primary {
       background-color: #ffffff;
       border-color: #f8f9fa;
       color: #02014f
   }
   
   .btn-primary:active,
   .btn-primary:focus,
   .btn-primary:hover {
       background-color: #ffae15 !important;
       border-color: #ffae15 !important;
       color: #ffffff
   }
   
   .btn-primary:active,
   .btn-primary:focus {
       -webkit-box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important;
       box-shadow: 0 0 0 0.2rem rgba(254, 209, 55, 0.5) !important
   }
   
    ::selection {
       background: #2a91ff;
       color: #fff;
       text-shadow: none
   }
   
   img::selection {
       background: transparent
   }
   
   img::-moz-selection {
       background: transparent
   }
   
   #mainNav {
       background-color: #010061
   }
   
   #mainNav .navbar-toggler {
       font-size: 12px;
       right: 0;
       padding: 13px;
       text-transform: uppercase;
       color: white;
       border: 0;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   #mainNav .navbar-brand {
       color: #ffffff
   }
   
   #mainNav .navbar-brand.active,
   #mainNav .navbar-brand:active,
   #mainNav .navbar-brand:focus,
   #mainNav .navbar-brand:hover {
       color: #ffae15
   }
   
   #mainNav .navbar-nav .nav-item .nav-link {
       font-size: 90%;
       font-weight: 400;
       padding: 0.75em 0;
       letter-spacing: 1px;
       color: white;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   #mainNav .navbar-nav .nav-item .nav-link.active,
   #mainNav .navbar-nav .nav-item .nav-link:hover {
       color: #ffae15
   }
   
   @media (min-width:992px) {
       #mainNav {
           padding-top: 25px;
           padding-bottom: 25px;
           -webkit-transition: padding-top 0.3s, padding-bottom 0.3s;
           transition: padding-top 0.3s, padding-bottom 0.3s;
           border: none;
           background-color: transparent
       }
       #mainNav .navbar-brand {
           font-size: 1.75em;
           -webkit-transition: all 0.3s;
           transition: all 0.3s
       }
       #mainNav .navbar-nav .nav-item .nav-link {
           padding: 1.1em 9px !important
       }
       #mainNav.navbar-shrink {
           padding-top: 0;
           padding-bottom: 0;
           background: #111a5f
       }
       #mainNav.navbar-shrink .navbar-brand {
           font-size: 1.25em;
           padding: 12px 0
       }
       .descripcion-ruta {
           font-size: 30px !important;
           text-align: left !important;
           font-weight: 700;
            COLOR: #fff;
       }
       .fa-map-marker-alt {
           font-size: 40px;
           color: #f90808;
           margin: 0 150px;
           margin-bottom: 20px
       }
       .fa-phone {
           font-size: 40px;
           color: #f90808;
           margin-bottom: 20px
       }
       .fa-envelope {
           font-size: 40px;
           color: #f90808;
           margin-bottom: 10px
       }
       .mail-contacto {
           margin-left: 40px
       }
   }
   
   header.masthead {
       text-align: center;
       color: white;
       background: linear-gradient(55deg, #0552ff 0, #02014f 50%)
   }
   
   .fondo-png {
       position: absolute
   }
   
   @keyframes rotate360 {
       to {
           transform: rotate(360deg)
       }
   }
   
   .fondo-png {
       animation: 300s rotate360 infinite linear
   }
   
   header.masthead .intro-text {
       padding-top: 150px;
       padding-bottom: 100px
   }
   
   header.masthead .intro-text .intro-lead-in {
       font-size: 55px;
       text-align: center;
       font-style: normal;
       margin-bottom: 15;
       font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   header.masthead .intro-text .intro-heading {
       font-size: 50px;
       font-weight: 700;
       line-height: 50px;
       margin-bottom: 25px;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   @media (min-width:768px) {
       header.masthead .intro-text {
           padding-top: 300px;
           padding-bottom: 200px
       }
       header.masthead .intro-text .intro-lead-in {
           font-size: 75px;
           font-style: normal;
           line-height: 75px;
           font-family: 'Lato', sans-serif;
           font-weight: 100;
           letter-spacing: -5px;
           text-align: left
       }
       header.masthead .intro-text .intro-heading {
           font-size: 75px;
           font-weight: 700;
           line-height: 75px;
           margin-bottom: 50px;
           font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
       }
       .contenido-header {
           text-align: left
       }
   }
   
   .service-heading {
       margin: 15px 0;
       text-transform: none
   }
   
   #portfolio .portfolio-item {
       right: 0;
       margin: 0 0 15px
   }
   
   #portfolio .portfolio-item .portfolio-link {
       position: relative;
       display: block;
       max-width: 400px;
       margin: 0 auto;
       cursor: pointer
   }
   
   #portfolio .portfolio-item .portfolio-link .portfolio-hover {
       position: absolute;
       width: 100%;
       height: 100%;
       -webkit-transition: all ease 0.5s;
       transition: all ease 0.5s;
       opacity: 0;
       background: rgba(254, 209, 54, 0.9)
   }
   
   #portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
       opacity: 1
   }
   
   #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
       font-size: 20px;
       position: absolute;
       top: 50%;
       width: 100%;
       height: 20px;
       margin-top: -12px;
       text-align: center;
       color: white
   }
   
   #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
       margin-top: -12px
   }
   
   #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
   #portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
       margin: 0
   }
   
   #portfolio .portfolio-item .portfolio-caption {
       max-width: 400px;
       margin: 0 auto;
       padding: 25px;
       text-align: center;
       background-color: #fff
   }
   
   #portfolio .portfolio-item .portfolio-caption h4 {
       margin: 0;
       text-transform: none
   }
   
   #portfolio .portfolio-item .portfolio-caption p {
       font-size: 16px;
       font-style: italic;
       margin: 0;
       font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   #portfolio * {
       z-index: 2
   }
   
   @media (min-width:767px) {
       #portfolio .portfolio-item {
           margin: 0 0 30px
       }
   }
   
   .portfolio-modal {
       padding-right: 0 !important
   }
   
   .portfolio-modal .modal-dialog {
       margin: 1rem;
       max-width: 100vw
   }
   
   .portfolio-modal .modal-content {
       padding: 100px 0;
       text-align: center
   }
   
   .portfolio-modal .modal-content h2 {
       font-size: 3em;
       margin-bottom: 15px
   }
   
   .portfolio-modal .modal-content p {
       margin-bottom: 30px
   }
   
   .portfolio-modal .modal-content p.item-intro {
       font-size: 16px;
       font-style: italic;
       margin: 20px 0 30px;
       font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   .portfolio-modal .modal-content ul.list-inline {
       margin-top: 0;
       margin-bottom: 30px
   }
   
   .portfolio-modal .modal-content img {
       margin-bottom: 30px
   }
   
   .portfolio-modal .modal-content button {
       cursor: pointer
   }
   
   .portfolio-modal .close-modal {
       position: absolute;
       top: 25px;
       right: 25px;
       width: 75px;
       height: 75px;
       cursor: pointer;
       background-color: transparent
   }
   
   .portfolio-modal .close-modal:hover {
       opacity: 0.3
   }
   
   .portfolio-modal .close-modal .lr {
       z-index: 1051;
       width: 1px;
       height: 75px;
       margin-left: 35px;
       -webkit-transform: rotate(45deg);
       transform: rotate(45deg);
       background-color: #212529
   }
   
   .portfolio-modal .close-modal .lr .rl {
       z-index: 1052;
       width: 1px;
       height: 75px;
       -webkit-transform: rotate(90deg);
       transform: rotate(90deg);
       background-color: #212529
   }
   
   .timeline {
       position: relative;
       padding: 0;
       list-style: none
   }
   
   .timeline:before {
       position: absolute;
       top: 0;
       bottom: 0;
       left: 40px;
       width: 2px;
       margin-left: -1.5px;
       content: '';
       background-color: #e9ecef
   }
   
   .timeline>li {
       position: relative;
       min-height: 50px;
       margin-bottom: 50px
   }
   
   .timeline>li:after,
   .timeline>li:before {
       display: table;
       content: ' '
   }
   
   .timeline>li:after {
       clear: both
   }
   
   .timeline>li .timeline-panel {
       position: relative;
       float: right;
       width: 100%;
       padding: 0 20px 0 100px;
       text-align: left
   }
   
   .timeline>li .timeline-panel:before {
       right: auto;
       left: -15px;
       border-right-width: 15px;
       border-left-width: 0
   }
   
   .timeline>li .timeline-panel:after {
       right: auto;
       left: -14px;
       border-right-width: 14px;
       border-left-width: 0
   }
   
   .timeline>li .timeline-image {
       position: absolute;
       z-index: 100;
       left: 0;
       width: 80px;
       height: 80px;
       margin-left: 0;
       text-align: center;
       color: white;
       border: 7px solid #e9ecef;
       border-radius: 100%;
       background-color: #192233
   }
   
   .timeline>li .timeline-image h4 {
       font-size: 10px;
       line-height: 14px;
       margin-top: 12px
   }
   
   .timeline>li.timeline-inverted>.timeline-panel {
       float: right;
       padding: 0 20px 0 100px;
       text-align: left
   }
   
   .timeline>li.timeline-inverted>.timeline-panel:before {
       right: auto;
       left: -15px;
       border-right-width: 15px;
       border-left-width: 0
   }
   
   .timeline>li.timeline-inverted>.timeline-panel:after {
       right: auto;
       left: -14px;
       border-right-width: 14px;
       border-left-width: 0
   }
   
   .timeline>li:last-child {
       margin-bottom: 0
   }
   
   .timeline .timeline-heading h4 {
       margin-top: 0;
       color: inherit
   }
   
   .timeline .timeline-heading h4.subheading {
       text-transform: none
   }
   
   .timeline .timeline-body>ul,
   .timeline .timeline-body>p {
       margin-bottom: 0
   }
   
   @media (min-width:768px) {
       .timeline:before {
           left: 50%
       }
       .timeline>li {
           min-height: 100px;
           margin-bottom: 100px
       }
       .timeline>li .timeline-panel {
           float: left;
           width: 41%;
           padding: 0 20px 20px 30px;
           text-align: right
       }
       .timeline>li .timeline-image {
           left: 50%;
           width: 100px;
           height: 100px;
           margin-left: -50px
       }
       .timeline>li .timeline-image h4 {
           font-size: 13px;
           line-height: 18px;
           margin-top: 16px
       }
       .timeline>li.timeline-inverted>.timeline-panel {
           float: right;
           padding: 0 30px 20px 20px;
           text-align: left
       }
   }
   
   @media (min-width:992px) {
       .timeline>li {
           min-height: 150px
       }
       .timeline>li .timeline-panel {
           padding: 0 20px 20px
       }
       .timeline>li .timeline-image {
           width: 150px;
           height: 150px;
           margin-left: -75px
       }
       .timeline>li .timeline-image h4 {
           font-size: 18px;
           line-height: 26px;
           margin-top: 30px
       }
       .timeline>li.timeline-inverted>.timeline-panel {
           padding: 0 20px 20px
       }
   }
   
   @media (min-width:1200px) {
       .timeline>li {
           min-height: 170px
       }
       .timeline>li .timeline-panel {
           padding: 0 20px 20px 100px
       }
       .timeline>li .timeline-image {
           width: 170px;
           height: 170px;
           margin-left: -85px
       }
       .timeline>li .timeline-image h4 {
           margin-top: 40px
       }
       .timeline>li.timeline-inverted>.timeline-panel {
           padding: 0 100px 20px 20px
       }
   }
   
   .team-member {
       margin-bottom: 50px;
       text-align: center
   }
   
   .team-member img {
       width: 225px;
       height: 225px;
       border: 7px solid #fff
   }
   
   .team-member h4 {
       margin-top: 25px;
       margin-bottom: 0;
       text-transform: none
   }
   
   .team-member p {
       margin-top: 0
   }
   
   section#contact {
       background-color: #212529;
       background-image: url("../img/map-image.png");
       background-repeat: no-repeat;
       background-position: center
   }
   
   section#contact .section-heading {
       color: #fff
   }
   
   section#contact .form-group {
       margin-bottom: 25px
   }
   
   section#contact .form-group input,
   section#contact .form-group textarea {
       padding: 20px
   }
   
   section#contact .form-group input.form-control {
       height: auto
   }
   
   section#contact .form-group textarea.form-control {
       height: 248px
   }
   
   section#contact .form-control:focus {
       border-color: #fed136;
       -webkit-box-shadow: none;
       box-shadow: none
   }
   
   section#contact::-webkit-input-placeholder {
       font-weight: 700;
       color: #ced4da;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   section#contact:-moz-placeholder {
       font-weight: 700;
       color: #ced4da;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   section#contact::-moz-placeholder {
       font-weight: 700;
       color: #ced4da;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   section#contact:-ms-input-placeholder {
       font-weight: 700;
       color: #ced4da;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   footer {
       padding: 25px 0;
       text-align: center
   }
   
   footer span.copyright {
       font-size: 90%;
       line-height: 40px;
       text-transform: none;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   footer ul.quicklinks {
       font-size: 90%;
       line-height: 40px;
       margin-bottom: 0;
       text-transform: none;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   }
   
   ul.social-buttons {
       margin-bottom: 0
   }
   
   ul.social-buttons li a {
       font-size: 20px;
       line-height: 50px;
       display: block;
       width: 50px;
       height: 50px;
       -webkit-transition: all 0.3s;
       transition: all 0.3s;
       color: white;
       border-radius: 100%;
       outline: none;
       background-color: #5d5d5d
   }
   
   ul.social-buttons li a:active,
   ul.social-buttons li a:focus,
   ul.social-buttons li a:hover {
       background-color: #010061
   }
   
   img.macbook {
       width: 50%;
       margin-top: -60px;
       filter: drop-shadow(15px 10px 12px #444)
   }
   
   img.iphone {
       width: 10%;
       margin-left: -126px;
       margin-top: 130px;
       filter: drop-shadow(10px 8px 13px #444)
   }
   
   @media (max-width:768px) {
       img.macbook {
           width: 82%;
           margin-left: -45px;
           filter: drop-shadow(15px 10px 12px #444)
       }
       img.iphone {
           width: 19%;
           margin-left: -129px;
           margin-top: 130px;
           filter: drop-shadow(10px 8px 13px #444)
       }
   }
   
   .tel-contacto,
   .ubicacion-contacto,
   .mail-contacto {
       color: #fff;
       text-align: center;
       font-size: 18px;
       font-weight: 300
   }
   
   ul.social-buttons li a:hover {
       background: #010061
   }
   
   .btn-sabermas {
       text-align: center
   }
   
   .fa-phone {
       font-size: 35px;
       color: #ffa805
   }
   
   .fa-map-marker-alt {
       font-size: 35px;
       color: #ffa805
   }
   
   .fa-envelope {
       font-size: 35px;
       color: #ffa805
   }
   
   .fa-university {
       color: #7b7b7b;
       font-size: 70px;
       margin-bottom: 40px
   }
   
   .fa-hand-holding-usd {
       color: #7b7b7b;
       font-size: 70px;
       margin-bottom: 40px
   }
   
   .fa-hotel {
       color: #7b7b7b;
       font-size: 70px;
       margin-bottom: 40px
   }
   
   .fa-building {
       color: #7b7b7b;
       font-size: 70px;
       margin-bottom: 40px
   }
   
   .fa-city {
       color: #7b7b7b;
       font-size: 70px;
       margin-bottom: 40px
   }
   
   .quieneres {
       margin-bottom: 125px
   }
   
   .fa-arrow-circle-down {
       color: #ffae15;
       font-size: 60px
   }
   
   .flecha {
       bottom: -70px
   }
   
   .administrador-moller {
       font-size: 20px;
       font-weight: 400;
       line-height: 21px
   }
   
   @media (max-width:375px) and (max-height:812px) {
       .img-figura {
           width: 270px
       }
       .fondo-png {
           margin: 110px 65px
       }
   }
   
   @media (max-width:640px) and (max-height:830px) {
       .fondo-png {
           margin: 99px 70px
       }
       .img-figura {
           width: 280px
       }
   }
   
   @media (min-width:768px) and (min-height:1024px) {
       .img-figura {
           width: 625px;
           margin: 70px 59px
       }
       .descripcion-ruta {
           font-size: 30px;
           text-align: left
       }
   }
   
   @media (max-width:764px) {
       .descripcion-ruta {
           font-size: 17px;
           text-align: center;
           margin-top: 20px
       }
       header.masthead .intro-text .intro-lead-in {
           font-size: 40px;
           text-align: center;
           margin-bottom: 0;
           font-family: 'Droid Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
       }
   }
   
   @media (max-width:768px) {
       .fondo-png {
           animation: none
       }
   }
   
   div a.link-perfil {
       position: relative;
       outline: none;
       color: #1f1f1f;
       text-decoration: none !important;
       text-transform: uppercase;
       letter-spacing: 1px;
       text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
       padding: 12px 13px
   }
   
   nav a:hover,
   nav a:focus {
       outline: none
   }
   
   .cl-effect-14 a {
       padding: 0 20px;
       height: 45px;
       line-height: 45px
   }
   
   .cl-effect-14 a::before,
   .cl-effect-14 a::after {
       position: absolute;
       width: 45px;
       height: 2px;
       background: rgb(0, 0, 0);
       content: '';
       opacity: 0.2;
       -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
       transition: all 0.3s;
       pointer-events: none
   }
   
   .cl-effect-14 a::before {
       top: 0;
       left: 0;
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       transform: rotate(90deg);
       -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
       transform-origin: 0 0
   }
   
   .cl-effect-14 a::after {
       right: 0;
       bottom: 0;
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       transform: rotate(90deg);
       -webkit-transform-origin: 100% 0;
       -moz-transform-origin: 100% 0;
       transform-origin: 100% 0
   }
   
   .cl-effect-14 a:hover::before,
   .cl-effect-14 a:hover::after,
   .cl-effect-14 a:focus::before,
   .cl-effect-14 a:focus::after {
       opacity: 1
   }
   
   .cl-effect-14 a:hover::before,
   .cl-effect-14 a:focus::before {
       left: 50%;
       -webkit-transform: rotate(0deg) translateX(-50%);
       -moz-transform: rotate(0deg) translateX(-50%);
       transform: rotate(0deg) translateX(-50%)
   }
   
   .cl-effect-14 a:hover::after,
   .cl-effect-14 a:focus::after {
       right: 50%;
       -webkit-transform: rotate(0deg) translateX(50%);
       -moz-transform: rotate(0deg) translateX(50%);
       transform: rotate(0deg) translateX(50%)
   }
   
   .iconos-gob {
       font-size: 60px;
       text-align: center;
       margin: 15px;
       color: #ffa805
   }
   
   .icono-sistemas {
       font-size: 60px;
       text-align: center;
       margin: 15px;
       color: #37485a
   }
   
   .sistemas {
       line-height: 20px;
       font-weight: 100;
       font-family: sans-serif;
       font-size: 22px
   }
   
   .texto-admin {
       font-family: sans-serif;
       line-height: 22px
   }
   
   .text-estadisticas {
       text-align: center;
       margin: 55px 10px;
       font-family: sans-serif;
       font-size: 18px
   }
   
   .text-estadisticas2 {
       text-align: center;
       margin: 85px 10px;
       font-family: sans-serif;
       font-size: 18px
   }
   
   .text-estadisticas3 {
       text-align: center;
       margin: 85px 10px;
       font-family: sans-serif;
       font-size: 18px
   }
   
   .img-diagrama {
       width: 105%;
       margin: 10px 0;
       filter: drop-shadow(4px 4px 5px #444)
   }
   
   @media (max-width:768px) {
       .img-diagrama {
           width: 80%;
           margin: 10px 40px;
           filter: drop-shadow(5px 5px 11px #444)
       }
   }
   
   #ruta {
       font-family: sans-serif
   }
   
   .texto-ruta {
       font-size: 18px
   }
   
   #quienessomos {
       font-family: sans-serif;
       text-align: center;
       font-size: 18px;
       line-height: 21px
   }
   
   #tipo-quieneres {
       font-family: sans-serif
   }
   
   .diagrama-circular {
       width: 85% !important;
       height: 95% !important
   }
   
   #ofertaEmpresa,
   #ofertaEmpresa2 {
       font-family: sans-serif;
       font-size: 18px
   }
   
   .icono-ofertaempresa {
       font-size: 55px;
       text-align: center;
       margin: 10px;
       color: #ffa805
   }
   
   #ofertaIfnb {
       font-size: 18px;
       font-family: sans-serif
   }
   
   .ofertaBanco {
       font-size: 18px;
       font-family: sans-serif
   }
   
   .iconos-bancos {
       text-align: center;
       font-size: 65px;
       color: #ffae15
   }
   
   body.banco {
       font-family: sans-serif;
       font-size: 18px
   }
   
   body.pyme {
       font-size: 18px;
       font-family: sans-serif
   }
   
   body.gobierno {
       font-family: sans-serif;
       font-size: 18px
   }
   
   body.empresa {
       font-family: sans-serif;
       font-size: 18px
   }
   
   @media (min-width:1920px) and (min-height:937px) {
       #quienessomos {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       .text-estadisticas,
       .text-estadisticas2,
       .text-estadisticas3 {
           text-align: center;
           margin: 55px 10px;
           font-family: sans-serif;
           font-size: 22px
       }
       #ofertaIfnb {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       #ofertabancos {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       .ofertabancos {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       #ofertapyme {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       .ofertapyme {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       #ofertaEmpresa {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       .ofertaEmpresa {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       #ofertagobierno {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       .ofertagobierno {
           font-family: sans-serif;
           text-align: center;
           font-size: 22px;
           line-height: 21px
       }
       .img-diagrama {
           width: 125%;
           margin: 10px -85px;
           filter: drop-shadow(4px 4px 5px #444)
       }
   }
   
   .titulo-oferta4 {
       font-weight: bold;
       margin: 20px 0
   }
   
   .texto-oferta {
       text-align: justify;
       padding: 40px 20px;
       font-size: 17px
   }
   
   .texto-oferta2 {
       text-align: justify;
       padding: 0 20px;
       font-size: 16px;
       MARGIN-TOP: -45px
   }
   
   .texto-oferta3 {
       text-align: justify;
       padding: 70px 20px;
       font-size: 17px
   }
   
   .texto-oferta3-1 {
       text-align: justify;
       font-size: 17px;
       padding-top: 50px
   }
   
   .titulo-oferta {
       font-weight: bold;
       margin: 45px 0
   }
   
   @media (max-width:768px) {
       .titulo-oferta {
           text-align: center;
           font-weight: 100;
           margin: 25px 0;
           font-size: 20px
       }
       .titulo-oferta4 {
           font-weight: 100;
           margin: 20px 0;
           text-align: center;
           font-size: 20px
       }
   }
   
   @font-face {
       font-weight: normal;
       font-style: normal;
       font-family: 'feathericons';
       src: url('../fonts/feathericons/feathericons.eot?-8is7zf');
       src: url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'), url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'), url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'), url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg')
   }
   
   .grid {
       position: relative;
       margin: 0 auto;
       padding: 1em 0 4em;
       max-width: 1000px;
       list-style: none;
       text-align: center
   }
   
   .grid figure {
       position: relative;
       float: left;
       overflow: hidden;
       margin: 10px 1%;
       min-width: 320px;
       background: #3085a3;
       text-align: center;
       cursor: pointer
   }
   
   .grid figure img {
       position: relative;
       display: block;
       min-height: 100%;
       max-width: 100%;
       opacity: 0.8
   }
   
   .grid figure figcaption {
       padding: 2em;
       color: #fff;
       text-transform: uppercase;
       font-size: 1.25em;
       -webkit-backface-visibility: hidden;
       backface-visibility: hidden
   }
   
   .grid figure figcaption::before,
   .grid figure figcaption::after {
       pointer-events: none
   }
   
   .grid figure figcaption,
   .grid figure figcaption>a {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%
   }
   
   .grid figure figcaption>a {
       z-index: 1000;
       text-indent: 200%;
       white-space: nowrap;
       font-size: 0;
       opacity: 0
   }
   
   .grid figure h2 {
       word-spacing: -0.15em;
       font-weight: 300
   }
   
   .grid figure h2 span {
       font-weight: 800
   }
   
   .grid figure h2,
   .grid figure p {
       margin: 0
   }
   
   .grid figure p {
       letter-spacing: 1px;
       font-size: 68.5%
   }
   
   figure.effect-oscar-parallax {
       margin: 0 0 -2rem !important
   }
   
   figure.effect-oscar-parallax img {
       opacity: 0.9;
       -webkit-transition: opacity 0.35s;
       transition: opacity 0.35s
   }
   
   figure.effect-oscar-parallax figcaption {
       padding: 4em;
       position: relative;
       -webkit-transition: background-color 0.35s;
       transition: background-color 0.35s
   }
   
   figure.effect-oscar-parallax figcaption::before {
       position: absolute;
       top: 30px;
       right: 30px;
       bottom: 30px;
       left: 30px;
       border: 1px solid #fff;
       content: ''
   }
   
   figure.effect-oscar-parallax figcaption::before,
   figure.effect-oscar-parallax p {
       opacity: 0;
       -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
       transition: opacity 0.35s, transform 0.35s;
       -webkit-transform: scale(0);
       transform: scale(0)
   }
   
   figure.effect-oscar-parallax:hover h2 {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }
   
   figure.effect-oscar-parallax:hover figcaption::before,
   figure.effect-oscar-parallax:hover p {
       opacity: 1;
       -webkit-transform: scale(1);
       transform: scale(1)
   }
   
   figure.effect-oscar-parallax:hover figcaption {
       background-color: rgba(58, 52, 42, 0)
   }
   
   figure.effect-oscar-parallax:hover img {
       opacity: 0.4
   }
   
   figure.effect-oscar {
       background: -webkit-linear-gradient(45deg, #091ca7 0, #020088 40%, #3c3a39 100%);
       background: linear-gradient(45deg, #085ab3 0, #001429 40%, #024792 100%)
   }
   
   .figure.effect-oscar img {
       opacity: 0.9;
       -webkit-transition: opacity 0.35s;
       transition: opacity 0.35s
   }
   
   figure.effect-oscar figcaption {
       padding: 3em;
       background-color: rgba(0, 27, 56, 0.5);
       -webkit-transition: background-color 0.35s;
       transition: background-color 0.35s
   }
   
   figure.effect-oscar figcaption::before {
       position: absolute;
       top: 30px;
       right: 30px;
       bottom: 30px;
       left: 30px;
       border: 1px solid #fff;
       content: ''
   }
   
   figure.effect-oscar h2 {
       margin: 20% 0 10px 0;
       -webkit-transition: -webkit-transform 0.35s;
       transition: transform 0.35s;
       -webkit-transform: translate3d(0, 100%, 0);
       transform: translate3d(0, 100%, 0)
   }
   
   figure.effect-oscar figcaption::before,
   figure.effect-oscar p {
       opacity: 0;
       -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
       transition: opacity 0.35s, transform 0.35s;
       -webkit-transform: scale(0);
       transform: scale(0)
   }
   
   figure.effect-oscar:hover h2 {
       -webkit-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0)
   }
   
   figure.effect-oscar:hover figcaption::before,
   figure.effect-oscar:hover p {
       opacity: 1;
       -webkit-transform: scale(1);
       transform: scale(1)
   }
   
   figure.effect-oscar:hover figcaption {
       background-color: rgba(58, 52, 42, 0)
   }
   
   figure.effect-oscar:hover img {
       opacity: 0.4
   }
   
   .linksistema {
       font-size: 90%;
       font-weight: bold;
       padding: 0.75em 0;
       letter-spacing: 1px;
       color: white;
       font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
       padding: 1.1em 9px !important;
       display: block;
       text-decoration: none !important;
       background-color: transparent;
       border-bottom: 1px solid #fff;
       padding: 5px 7px !important;
       margin-top: 11px;
   }
   
   @media (max-width: 720px) {
       .linksistema {
           margin-top: 0;
           display: inline-block;
           margin-left: -4px;
       }
   }
   
   .nav-item .linksistema:hover {
       color: #ffae15
   }
   
   .texto-OFV {
       text-align: justify;
       margin-left: 55px;
       font-size: 17px
   }
   
   .guion {
       font-weight: bold;
       margin-left: -15px;
       FONT-SIZE: 18px
   }
   
   .icono-if {
       font-size: 65px;
       text-align: center;
       margin: 15px;
       color: #ffa805
   }
   
   .numero-viñeta {
       font-size: 28px;
       margin-right: 10px;
       color: #fff
   }
   
   .section2 {
       position: relative;
       margin-top: 70px;
       height: auto;
       padding: 70px 35px;
       color: #ffF
   }
   
   .section2::before {
       background-image: url(../img/ruta/parallax2.jpg);
       content: ''
   }
   
   .parallax::before {
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
       background-repeat: no-repeat;
       background-size: cover;
       background-position: center;
       -webkit-filter: brightness(.8);
       filter: brightness(.8)
   }
   
   @media only screen and (max-width:768px) {
       .section2 {
           position: relative;
           height: auto;
           padding: 20px 15px;
           font-size: 20px;
           color: #ffF
       }
       .textos-ofv,
       .textos-ofvv {
           font-size: 17px;
           text-align: center;
           margin-top: -15px
       }
       .col-ofv1 {
           top: 345px
       }
       .col-ofv2 {
           bottom: 690px
       }
       .section-parallax {
           margin-top: -180px
       }
       .col-ofv-3 {
           bottom: -325px
       }
       .col-ofv-4 {
           top: -435px
       }
   }
   
   .textos-ofv {
       padding-top: 70px;
       padding-right: 30px
   }
   
   .titulos-ruta {
       color: #f7a304
   }