/* table of content - end
==================================================================================================== */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap");
/* 01 - fonts - start
==================================================================================================== */
@font-face {
    font-family: "Sofia Pro Extra Light";
    src: url("~/fonts//sofia_pro/SofiaProExtraLight.woff2") format("woff2"), url("~/fonts/sofia_pro/SofiaProExtraLight.woff") format("woff");
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: "Sofia Pro Light";
    src: url("~/fonts//sofia_pro/SofiaProExtraLight.woff2") format("woff2"), url("../fonts/sofia_pro/SofiaProLight.woff") format("woff"); font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Sofia Pro Medium";
    src: url("~/fonts/fonts/sofia_pro/SofiaProMedium.woff2") format("woff2"), url("../fonts/sofia_pro/SofiaProMedium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Sofia Pro SemiBold";
    src: url("~/fonts/sofia_pro/SofiaProSemiBold.woff2") format("woff2"), url("../fonts/sofia_pro/SofiaProSemiBold.woff") format("woff");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Sofia Pro Bold";
    src: url("~/fonts/sofia_pro/SofiaProBold.woff2") format("woff2"), url("../fonts/sofia_pro/SofiaProBold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Sofia Pro";
    src: url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.eot");
    /* IE9*/
    src: url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.woff") format("woff"), url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/9e00143409affcb46a1ae58634aa64be.svg#Sofia Pro") format("svg");
    /* iOS 4.1- */
}
/* 01 - fonts - end
==================================================================================================== */


html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 60px;
    background-color: #f9f9f8;
}
/*.showcase {
    position: relative;
}
.fondobg {*/
    /*background-image: url(/imagenes/logo/logo-45º.png);
    background-size: 20%;
    background-attachment: fixed;*/
    /*opacity: .7;
}
.showcase.fondobg {
    position: absolute;
}*/
    /* boton solicitar demo*/
.button {
    background: #FF4D4C;
    color: #fff;
    border: none;
    position: relative;
    /*height: 60px;*/
    font-size: 2em;
    padding: 0 0.5em;
    cursor: pointer;
    transition: 800ms ease all;
    outline: none;
}

.button:hover {
    background: #fff;
    color: #f75a52;
}

.button:before, .button:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    background: #f75a52;
    transition: 400ms ease all;
}

.button:after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
}

.button:hover:before, .button:hover:after {
    width: 100%;
    transition: 800ms ease all;
}
/* boton solicitar demo fin*/
/* color texto */
.color-texto {
    color: #fff;
}

.color-texto:hover {
    color: #f75a52;
}

relleno {
    color: #f75a52;
}

.span-2 {
    color: #5c5c8a;
    font-style: normal;
}
img {
    height: auto;
    max-width: 100%;
}
li {
    margin-bottom: 0.5rem;
}
/*Subrayado animado*/
.link {
    margin: 0.5rem 0.5rem;
    /*display: flex;*/
    justify-content: space-evenly;
}

.link a {
    letter-spacing: 1px;
    text-decoration: none;
    color: #f75a52;
    font-size: 1rem;
    position: relative;
}

.link a:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    background: #f75a52;
    /*animacion de derecha a izquierda*/
    transform-origin: right;
    transform: scaleX(0);
    transition: transform 0.2s ease-in-out;
}

.link a:hover:after {
    /*animacion de derecha a izquierda*/
    transform-origin: left;
    transform: scaleX(1);
}
/*fin subrayado animado*/

/*Subrayado animado 2*/
.link-2 {
    margin: 0.5rem 0.5rem;
    /*display: flex;*/
    justify-content: space-evenly;
}

.link-2 a {
    letter-spacing: 1px;
    text-decoration: none;
    color: white;
    font-size: 1rem;
    position: relative;
}

    .link-2 a:after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2px;
        width: 100%;
        background: white;
        /*animacion de derecha a izquierda*/
        transform-origin: right;
        transform: scaleX(0);
        transition: transform 0.2s ease-in-out;
    }

.link-2 a:hover:after {
    /*animacion de derecha a izquierda*/
    transform-origin: left;
    transform: scaleX(1);
}
/*fin subrayado animado 2*/

.animacion-block {
    /* width: 100px;
    height: 100px;
    background-color: #3498db;*/
    animation: slideInFromLeft 1s ease-out forwards;
    transition: 1s all ease;
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}




/*--------------------*/
.animacion-block-2 {
    /* width: 100px;
    height: 100px;
    background-color: #3498db;*/
    animation: slideInFromRight 1s ease-out forwards;
    transition: 1s all ease;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

p2 {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    unicode-bidi: isolate;
}


/* animacion reveal*/
.scroll-container {
    /*height: 100vh;
    min-height: 450px;*/
    /*padding: 2rem 1rem;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*box-sizing: border-box;*/
}

.scroll-container:nth-of-type(1) {
    /*background-color: #75caa1;*/
}

.scroll-container:nth-of-type(2) {
    /*background-color: #eb5c40;*/
}

.scroll-container:nth-of-type(3) {
    /*background-color: #f5ca45;*/
}

.scroll-container:nth-of-type(4) {
    /*background-color: #569ff8;*/
}

.scroll-container:nth-of-type(even) {
    flex-direction: row-reverse;
}

.scroll-element,
.scroll-caption {
    width: 100%;
}

.scroll-element {
    /*min-height: 300px;
    height: 100%;*/
    /*background-color: #eaeaea;*/
}

.scroll-caption {
    margin: 1rem;
}

/*footer {
    text-align: center;
    padding: 0.5rem 0;
    background-color: #faddad;
}

    footer p {
        font-size: 0.75rem;
        margin: 0.25rem 0;
        color: #221133;
    }

    footer a {
        text-decoration: none;
        color: inherit;
    }*/

@media screen and (max-width: 650px) {
    .scroll-container,
    .scroll-container:nth-of-type(even) {
        flex-direction: column;
        align-content: inherit;
    }

    .scroll-element {
        height: 100%;
    }

    .scroll-element,
    .scroll-caption {
        width: 100%;
    }
}
/**Styling scrollable elements*/

.js-scroll {
    opacity: 0;
    transition: opacity 500ms;
}

.js-scroll.scrolled {
    opacity: 1;
}

.scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
}

.scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
}

.scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
}

.scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
}

/* ----------------------------------------------
 * Generated by Animista on 2021-2-11 23:32:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@keyframes slide-in-left {
    0% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-in-right {
    0% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* fin de la animacion reveal*/

/*------*/
.imagen-escalada {
    width: 100%;
    height: 100%;
}

.DataBasica {
    width: 100%;
}
/*------*/

.centered-element {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/*.footer_section.bg_dark_blue {
    background-color: #07112d;*/
}
/* 04 - footer section - start
==================================================================================================== */
.footer_section.bg_gray {
    background-color: #eff2f9;
}

.footer_section.bg_gray_2 {
    background-image: linear-gradient(45deg, #e0e5ff 0%, #f0f4ff 100%);
}

.footer_section.bg_gray_3 {
    background-color: #f6fbff;
}

.footer_section.bg_dark_blue {
    background-color: #07112d;
}

.footer_section .spahe_1 {
    left: -60px;
    bottom: -40px;
    max-width: 395px;
    position: absolute;
}

.footer_section .widget_area {
    padding: 100px 0px;
}

.footer_section .deco_image_1 {
    left: 15px;
    bottom: -101px;
    max-width: 200px;
}

.footer_section .deco_image_2 {
    right: 15px;
    bottom: -101px;
    max-width: 140px;
}

.footer_section .cloud_image {
    max-width: 100px;
}

.footer_section .cloud_image.cloud_1 {
    top: 220px;
    left: 190px;
}

.footer_section .cloud_image.cloud_2 {
    left: 50%;
    bottom: 130px;
    transform: translateX(-50%);
}

.footer_section .cloud_image.cloud_3 {
    top: 220px;
    right: 190px;
}

.footer_section .about_content {
    padding-right: 50px;
}

.footer_section .brand_logo .brand_link {
    max-width: 147px;
}

.footer_section .contact_info > ul > li {
    margin-bottom: 6px;
    color: #051441;
}

.footer_section .contact_info > ul > li:last-child {
    margin-bottom: 0px !important;
}

.footer_section .contact_info > ul > li > a {
    margin-left: 8px;
    position: relative;
    color: #6a7c92;
    display: inline-block;
}

.footer_section .contact_info > ul > li > a:before {
    width: 0px;
    left: auto;
    right: 0px;
    bottom: 0px;
    height: 1px;
    content: "";
    position: absolute;
    background: #4154f1;
    transition: width 0.2s linear;
}

.footer_section .contact_info > ul > li > a:hover {
    color: #4154f1;
}

.footer_section .contact_info > ul > li > a:hover:before {
    left: 0px;
    width: 100%;
    right: auto;
}

.footer_section .widget_title {
    font-size: 20px;
    color: #051441;
    font-family: "Sofia Pro SemiBold";
}

.footer_section .useful_links > ul > li {
    margin-bottom: 14px;
}

.footer_section .useful_links > ul > li:last-child {
    margin-bottom: 0px !important;
}

.footer_section .useful_links > ul > li > a {
    position: relative;
    color: #6a7c92;
}

.footer_section .useful_links > ul > li > a:before {
    width: 0px;
    left: auto;
    right: 0px;
    bottom: 0px;
    height: 1px;
    content: "";
    position: absolute;
    background: #4154f1;
    transition: width 0.2s linear;
}

.footer_section .useful_links > ul > li > a:hover {
    color: #4154f1;
}

.footer_section .useful_links > ul > li > a:hover:before {
    left: 0px;
    width: 100%;
    right: auto;
}

.footer_section .footer_bottom {
    padding: 30px 0px;
    border-top: 1px solid #d7d9e0;
}

.footer_section .copyright_text .author_link {
    color: #6a7c92;
}

.footer_section .copyright_text .author_link:hover {
    color: #4154f1;
}

.footer_section .footer_menu > ul > li {
    position: relative;
    margin-right: 20px;
    padding-right: 20px;
}

.footer_section .footer_menu > ul > li:after {
    top: 50%;
    width: 2px;
    right: -1px;
    height: 12px;
    content: "";
    position: absolute;
    transform: translateY(-50%);
    background-color: #6a7c92;
}

.footer_section .footer_menu > ul > li:last-child {
    margin-right: 0px !important;
    padding-right: 0px !important;
}

.footer_section .footer_menu > ul > li:last-child:after {
    display: none;
}

.footer_section .footer_menu > ul > li > a {
    position: relative;
    color: #6a7c92;
}

.footer_section .footer_menu > ul > li > a:before {
    width: 0px;
    left: auto;
    right: 0px;
    bottom: 0px;
    height: 1px;
    content: "";
    position: absolute;
    background: #4154f1;
    transition: width 0.2s linear;
}

.footer_section .footer_menu > ul > li > a:hover {
    color: #4154f1;
}

.footer_section .footer_menu > ul > li > a:hover:before {
    left: 0px;
    width: 100%;
    right: auto;
}

.footer_section .form_item input {
    height: 50px;
}

.footer_section .form_item button[type=submit] {
    top: 55%;
    right: 20px;
    position: absolute;
    color: #6a7c92;
    transform: translateY(-55%);
}

.footer_section.text-white {
    color: #6a7c92 !important;
}

.footer_section.text-white .widget_title {
    color: #ffffff;
}

.footer_section.text-white .contact_info > ul > li {
    color: #ffffff;
}

.footer_section.text-white .contact_info > ul > li > a {
    color: #6a7c92;
}

.footer_section.text-white .contact_info > ul > li > a:before {
    background: #ffffff;
}

.footer_section.text-white .contact_info > ul > li > a:hover {
    color: #ffffff;
}

.footer_section.text-white .useful_links > ul > li > a:before {
    background: #ffffff;
}

.footer_section.text-white .useful_links > ul > li > a:hover {
    color: #ffffff;
}

.footer_section.text-white .form_item input {
    color: #ffffff;
    background-color: rgba(101, 119, 141, 0.502);
    border: 1px solid rgba(101, 119, 141, 0.502);
}

.footer_section.text-white .form_item input:-moz-placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer_section.text-white .form_item input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer_section.text-white .form_item input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer_section.text-white .form_item input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.footer_section.text-white .form_item input:focus + button {
    color: #ffffff;
}

.footer_section.text-white .form_item button[type=submit] {
    color: rgba(255, 255, 255, 0.6);
}

.footer_section.text-white .footer_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer_section.text-white .footer_menu > ul > li > a:before {
    background: #ffffff;
}

.footer_section.text-white .footer_menu > ul > li > a:hover {
    color: #ffffff;
}

.footer_section.text-white .copyright_text .author_link:hover {
    color: #ffffff;
}

.footer_section.text-white .social_icon > ul > li > a:hover i {
    color: #ffffff;
}

/* 04 - footer section - end
==================================================================================================== */
/* footer - start */
  .footer_section .useful_links > ul > li {
    margin-bottom: 8px;
  }

  .footer_section .widget_title {
    font-size: 20px;
    margin-bottom: 30px;
  }

  .footer_section .about_content {
    padding: 0px;
    max-width: 460px;
  }

  .footer_section .useful_links,
.footer_section .social_links {
    margin-top: 40px;
  }

  .footer_section .widget_area {
    padding: 80px 0px;
  }

  .footer_section .deco_image_1 {
    bottom: -81px;
    max-width: 150px;
  }

  .footer_section .deco_image_2 {
    bottom: -81px;
    max-width: 100px;
  }

  .footer_section.sec_ptb_120.pb-0 {
    padding: 0px;
  }

  .footer_section .sms_comment {
    max-width: 180px;
    display: inline-block;
  }

  .footer_section .footer_bottom .social_links {
    margin: 0px;
  }

  .footer_section .cloud_image {
    max-width: 70px;
  }

  .footer_section .cloud_image.cloud_1 {
    top: 60px;
    left: -15px;
  }

  .footer_section .cloud_image.cloud_3 {
    top: 140px;
    right: -15px;
  }

  .footer_section .cloud_image.cloud_2 {
    bottom: 100px;
  }

  .footer_section .social_icon_rounded {
    margin-top: 40px;
  }

  /* footer - end */
/* list style settings - start 
================================================== */
.ul_li > ul {
    margin: 0px;
    padding: 0px;
    display: table;
}

.ul_li > ul > li {
    float: left;
    list-style: none;
    display: inline-block;
}

.ul_li_block > ul {
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: table;
}

.ul_li_block > ul > li {
    width: 100%;
    display: table;
    list-style: none;
}

.ul_li_right > ul {
    margin: 0px;
    padding: 0px;
    float: right;
    display: table;
}

.ul_li_right > ul > li {
    float: left;
    list-style: none;
    display: inline-block;
}

.ul_li_center > ul {
    padding: 0px;
    margin: 0 auto;
    display: table;
}

.ul_li_center > ul > li {
    float: left;
    list-style: none;
    display: inline-block;
}

/* list style settings - end
================================================== */
/* css para el carrusel*/
.img-2 {
    width: 200px;
    height: 150px;
    margin: 0 20px;
    transition: .5s;
    /*cursor: pointer;*/
}

/*.img-2:not(:hover) {
    filter: grayscale(100%);
}*/
/*.scroll {
    position: relative;
    display: flex;
    width: 1200px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
}

.scroll div {
    white-space: nowrap;
    animation: animate 30s linear infinite;
}

@keyframes animate {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(-100%);
    }
}

.scroll:hover div {
    animation-play-state: paused;
}*/

/*--------*/
.slider {
    width: 75vw;
    height: auto;
    margin: auto;
    overflow: hidden;
}

.slider .slide-track {
    display: flex;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(200px * 14);/* 14 = la cantidad de imagenes (7x2)*/
}

.slider .slide {
    width: 200px;
}

.slider .slide img {
    width: 100%;
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(calc(-200px * 7)); /* Cantidad real de imagenes*/
        transform: translateX(calc(-200px * 7));
    }
}

/*------------*/

@font-face {
    font-family: GU;
    src: url("/fonts/GothamUltra.woff");
}

.font-2 {
    font-family: GU;
}
@font-face {
    font-family: GU;
    src: url("/fonts/gothammedium.woff");
}

.font-3 {
    font-family: GU;
}