/*-----FUENTES-------*/

@font-face {
    font-family: 'Titillium Web Bold';
    src: url('../fonts/TitilliumWeb-Bold.woff2') format('woff2'),
         url('../fonts/TitilliumWeb-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web Bold';
    src: url('../fonts/TitilliumWeb-BoldItalic.woff2') format('woff2'),
        url('../fonts/TitilliumWeb-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web Regular';
    src: url('../fonts/TitilliumWeb-Regular.woff2') format('woff2'),
        url('../fonts/TitilliumWeb-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web Regular';
    src: url('../fonts/TitilliumWeb-Italic.woff2') format('woff2'),
        url('../fonts/TitilliumWeb-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web Light';
    src: url('../fonts/TitilliumWeb-Light.woff2') format('woff2'),
        url('../fonts/TitilliumWeb-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Titillium Web Light';
    src: url('../fonts/TitilliumWeb-LightItalic.woff2') format('woff2'),
        url('../fonts/TitilliumWeb-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
.font-light{
    font-family: 'Titillium Web Light'!important;
}
.font-bold{
    font-family: 'Titillium Web Bold'!important;
}
/*-------------------TAMAÑOS------------------*/
.s-10x10{
    width: 10px;
    height: 10px;}
.s-20x20{
    width: 20px;
    height: 20px;}
.s-30x30{
    width: 30px;
    height: 30px;}
.s-40x40{
    width: 40px;
    height: 40px;}
.s-50x50{
    width: 50px;
    height: 50px;}
.s-60x60{
    width: 60px;
    height: 60px;}
.s-70x70{
    width: 70px;
    height: 70px;}
.s-80x80{
    width: 80px;
    height: 80px;}
.s-90x90{
    width: 90px;
    height: 90px;}
.s-100x100{
    width: 100px;
    height: 100px;}
    
.w-fit-content{
    width: fit-content!important;
}
.w-10px{
    width: 10px;}
.w-20px{
    width: 20px;}
.w-30px{
    width: 30px;}
.w-40px{
    width: 40px;}
.w-50px{
    width: 50px;}
.w-60px{
    width: 60px;}
.w-70px{
    width: 70px;}
.w-80px{
    width: 80px;}
.w-90px{
    width: 90px;}
.w-100px{
    width: 100px;}
.w-10max{
    max-width: 10px;}
.w-20max{
    max-width: 20px;}
.w-30max{
    max-width: 30px;}
.w-40max{
    max-width: 40px;}
.w-50max{
    max-width: 50px;}
.w-60max{
    max-width: 60px;}
.w-70max{
    max-width: 70px;}
.w-80max{
    max-width: 80px;}
.w-90max{
    max-width: 90px;}
.w-100max{
    max-width: 100px;}
.w-150max{
    max-width: 150px;}
.w-200max{
    max-width: 200px;}
.w-300max{
    max-width: 300px;}
.w-400max{
    max-width: 400px;}
.w-500max{
    max-width: 500px;}
.h-10px{
    height: 10px;}
.h-20px{
    height: 20px;}
.h-30px{
    height: 30px;}
.h-40px{
    height: 40px;}
.h-50px{
    height: 50px;}
.h-60px{
    height: 60px;}
.h-70px{
    height: 70px;}
.h-80px{
    height: 80px;}
.h-90px{
    height: 90px;}
.h-100px{
    height: 100px;}
.h-10max{
    max-height: 10px;}
.h-20max{
    max-height: 20px;}
.h-30max{
    max-height: 30px;}
.h-40max{
    max-height: 40px;}
.h-50max{
    max-height: 50px;}
.h-60max{
    max-height: 60px;}
.h-70max{
    max-height: 70px;}
.h-80max{
    max-height: 80px;}
.h-90max{
    max-height: 90px;}
.h-100max{
    max-height: 100px;}
.h-150max{
    max-height: 150px;}
.h-200max{
    max-height: 200px;}
.h-300max{
    max-height: 300px;}
.h-400max{
    max-height: 400px;}
.h-500max{
    max-height: 500px;}
.h-25vh{
    height: 25vh;}
.h-50vh{
    height: 50vh;}
.h-75vh{
    height: 75vh;}
.h-100vh{
    height: 100vh;}
/*-------------------TEXTO------------------*/
h2{
    font-family: 'Titillium Web Bold';
    font-size:33px
}
h3{
    font-family: 'Titillium Web Bold';
    font-size:24px
}
h4{
    font-family: 'Titillium Web Bold';
    font-size:20px
}
h5{
    font-family: 'Titillium Web Bold';
    font-size:16px
}
p, a{
    font-family: 'Titillium Web Regular';
    font-size: 16px;
}
.logo{
    max-width:255px;    
    margin-top: 28px;
}
@media (max-width:768px){
    h2 {
        font-size: 20px!important;
    }
    .logo {
        max-width: 220px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    footer .logo-nav{
        display: inline!important;
    }
}
@media (max-width:370px){
    .logo {
        max-width: 190px;
        margin-top: 15px;
        margin-bottom: 5px;
    }
}
/*-------------------COLOR------------------*/

.text-primary{
    color:#143a6c!important
}

/*-------------------FONDOS------------------*/
.bg-blue{
    background-color:#154178
}
.bg-cyan{
    background-color: #eff8ff
}
.bg-blue-dark{
    background-color: #151d32;
}
.bg-info-light{
    background-color: #dbe9f7;

}
.bg-blue-dark2{
    background-color:#163348
} 
.bg-webinar{
    background-image: url(../img/eventos-webinar.png);
    background-position: right;
    background-repeat: no-repeat;
    background-position-y: center;
    background-size: 50%;
    
} 
.bg-que-es{
    background-image: url(../img/banner-que-es.jpg);
    background-position: left;
    background-repeat: no-repeat;
    background-position-y: center;
    
    
} 

@media (max-width:1690px){    
    .bg-que-es{
        background-position-x: -200px;
    } 
}
@media (max-width:991px){    
    .bg-que-es{
        background-image:none
    } 
}
.bg-img-right{
  background-image: url(../img/laptop-guy.jpg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
}
.bg-left-lineal-vertical {
    background-image: url(../img/bg-lineal-vertical.png);
    background-repeat: no-repeat;
    background-size: 420px;
    background-position-x: left;
    background-position: calc(30% - 270px) calc(1% + 100px);
}
.bg-left-lineal-vertical-op {
    background-image: url(../img/bg-lineal-vertical-op.png);
    background-repeat: no-repeat;
    background-size: 420px;
    background-position-x: left;
    background-position: calc(30% - 270px) calc(1% + 100px);
}
@media (max-width:1300px){
    .bg-img-right {
        background-size: cover;
        background-position: calc(80% + 319px) calc(100% );
    }
}
@media (max-width:768px){
    .bg-webinar{
        background-image: url(../img/eventos-webinar.png);
        background-position: right;
        background-repeat: no-repeat;
        background-position-y: center;
        background-size: 100%;
        background-position-x: 210px;

    } 
    .bg-img-right, .bg-img-right-promo-1,.bg-img-right-promo-2,.bg-img-right-promo-3,.bg-img-right-promo-4{
        background-image: none;
    }
}
   
@media (max-width:470px){
    .bg-webinar{
        background-image: none;

    }
}
/*-----------BOTONES Y LINKS------------*/
a.link:hover{
    color:#519cff!important;
}
.btn{
    padding: 16px 39px;
    border-radius: 32px;
    font-size: 14px;
    border: none;
}
.btn-primary{    
    background-color: #143a6c;
    color: #fff;
}

.btn:hover{
    background-color: #000;
    color:#fff
}
.btn-light{
    background-color: #fff;
    color:#143a6c
}
/*-------------IMAGENES-------------*/
figure.circle-profile{
    overflow: hidden;
    border-radius: 50%;
    max-width: 200px;
  }
  
figure.circle-profile img{
  width: 100%;
}
@media (min-width:300px) and (max-width:768px){
    
    figure.circle-profile{
      overflow: hidden;
      border-radius: 50%;
      max-width: 100px;
    }
  }
/*--------------HEADER-------------------*/
a.logo-nav{
    display: block;
    max-width: 150px;
    transform: scale(1);
}
a.logo-nav:hover img{
    transform: scale(1.1);
    transition: transform 0.2s;
}
.menu-top{
    padding: 0px 6px;
    border-radius: 28px;
    background-color: #1b3763;
    float: right;
}
.navbar-toggler:focus{
  box-shadow: none!important;
  background-color: #3169b3!important;
}
.menu-top li a {
  font-size: 12px;
}
#navbarNav{
    float:right     
}
.menu-top a{
    font-size: 14px;
}
.nav-item a:hover{
    color:#519cff!important
}
.navbar-principal .nav-item a.nav-link{
    font-size: 18px;
    margin-left:10px
}
.navbar-principal .btn-menu{
  position: absolute;
  top: -105px;
  right: 27px;
  background-color: #4288e5;
}
@media (min-width:768px) and (max-width:991px){
    .navbar-principal .btn-menu {
        top: 10px!important;
    }
    /**/
    .navbar-principal .navbar-collapse  {
        margin-top:70px!important
    }
}
@media (max-width:991px){
    .navbar-principal {
        margin-left: -15px;
        margin-right: -15px;
        padding-right: 15px;
    }
    nav.navbar.navbar-principal.navbar-expand-lg  {
        position: absolute;
        right: 20px;
    }
    .navbar-principal .navbar-collapse  {
        margin-top: 0px;
        position: absolute;
        top: 0px;
        width: 990px;
        margin-right: -42px;
        padding-right: 40px;
        background-color: #151a42ed;
        z-index: 3;
    }
    .navbar-principal .btn-menu{
        top: -55px;
    }
}
/*-------------CARDS-------------*/

div.card{
    padding:20px;
    border:none;
}
.card-img{
    padding:0px!important
}
.contact-cards .card{
    max-width: 300px;
}
.contact-cards .card img{
    margin:0 auto!important;
    margin-bottom:20px!important;
    min-height: 60px;
}
.card-testimony h4{
    font-size: 18px!important;
}
.card-testimony h3{
    font-size: 24px!important;
}
.card-testimony p{
    margin: 0px 0px;
    font-style: italic;
}
.card-testimony figure img{
    width: 100%;
}
.card-testimony .card-header{
    background: none;
    padding:0px;
    border-bottom: none
}
.testimony:after {
    background-image: url(../img/comillas-der.png);
    background-size: 30px 23px;
    display: inline-block;
    width: 30px;
    height: 31px;
    background-repeat: no-repeat;
    content: "";
    margin-top: 6px;
    position: absolute;
    margin-left: 10px;

}
.testimony:before {    
    background-image: url(../img/comillas-izq.png);
    background-size: 30px 23px;
    display: inline-block;
    width: 30px;
    height: 31px;
    background-repeat: no-repeat;
    content: "";
    margin-top: 0;
    top: 11px;
    position: relative;
    margin-right: 4px;
}
.blog-section .card{
    background-color: #143a6c;
    color:#fff;
    font-family: 'Titillium Web Light';
}
.card-shadow img{
    max-width: 50px;
    margin:0 auto;
}
.card-shadow{
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.52);
    -moz-box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.52);
    box-shadow: 0px 0px 10px -6px rgba(0,0,0,0.52);
    border-radius: 5px;
}
/*-------------FOOTER-------------*/
footer ul li a{
    text-decoration: none;
}
footer a.logo-nav {
    margin: 0 auto;
}
/*-------------BANNER PRINCIPAL-------------*/
.banner-principal{
    padding-top:200px!important;
    height:100vh;
    min-height: 600px;
}

.banner-principal img{
    width: 70%;
    float:right
}
  .bg-banner-principal{
    background-image: url("../img/fondo-b.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-repeat-x: repeat;

  }

.bg-img-left-banner-principal{
  background-image: url("../img/background-principal-left.png");
  background-position: left;
  background-position-x: -950px;
  background-repeat: no-repeat;
}

.bg-img-right-banner-principal{
    background-image: url("../img/background-principal-right.png");
    background-position: right;
    background-repeat: no-repeat;
}
@media (max-width:991px){
    .banner-principal{
        padding-top:20px!important;
        height: auto;
        padding-bottom:100px
    }
    .banner-principal img {
        width: 70%;
        float: none;
        display:block;
        margin:0 auto
    }
}
/*-------------BANNER TEST-------------*/

.ico-bug{
	width: 40px!important;
    margin-right: 20px;
	filter: invert(19%) sepia(35%) saturate(1952%) hue-rotate(186deg) brightness(94%) contrast(98%);
}
@media (max-width:768px){
    .banner-test .d-flex {
     display: inline!important
    }
    .banner-test .col-md-8.text-right {
        text-align: left!important;
    }
    .banner-test h2{
        margin-bottom:20px!important;
        display: block;
    }
    .banner-test img{
        margin:0px;
        margin-bottom:10px
    }
}
@media (max-width:980px){

    .banner-test h2{
        
    }
}
/*-------------BANNER PROMO BTN ACCION-------------*/

.bg-img-right-promo-1{
  background-image: url("../img/banner-promo-1.jpg");
  background-repeat: no-repeat;
  background-position: right;
  background-size: 50%;
}

.bg-img-right-promo-2{
    background-image: url("../img/banner-promo-2.jpg");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 50%;
}
.bg-img-right-promo-3{
    background-image: url("../img/banner-promo-3.jpg");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 50%;
}
.bg-img-right-promo-4{
      background-image: url("../img/banner-promo-4.jpg");
      background-repeat: no-repeat;
      background-position: left;
      background-size: 50%;
}

/*-------------BANNER BLOG CARDS-------------*/
.blog-section a.card-blog {
    text-decoration: none!important;
}
.blog-section a.card-blog .card {
    height: 250px;
}
.blog-section a.card-blog .card h3 {
    vertical-align: bottom;
    margin-top:50px;
    color: #fff
}
.blog-section a .card{
    transition: background-color 0.8s;
}
.blog-section a:hover .card{
    background-color: rgba(0, 0, 0, 0.3) ;
    background-blend-mode: overlay;
}
.blog-section a.card-blog .card.notice1{
    background-image: url(../img/notice1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover
}
.blog-section a.card-blog .card.notice2{
    background-image: url(../img/notice2.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover

}
.blog-section a.card-blog .card.notice3{
    background-image: url(../img/notice3.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:cover
}
@media (max-width:1180px){
    .bg-img-right-promo-2, .bg-img-right-promo-3, .bg-img-right-promo-4{        
    background-position-x: -300px!important;
    background-size:inherit!important
    }
    .bg-img-right-promo-1{
        background-position-x: 540px!important;
        background-size:inherit!important
    }
}
@media (min-width:769px) and (max-width:925px){
    .bg-img-right-promo-2, .bg-img-right-promo-3, .bg-img-right-promo-4{        
    background-position-x: -400px!important;
    background-size:inherit!important
    }
    .bg-img-right-promo-1{
        background-position-x: 400px!important;
        background-size:inherit!important
    }
}
@media  (max-width:768px){
    .bg-img-right-promo-1,.bg-img-right-promo-2, .bg-img-right-promo-3, .bg-img-right-promo-4{        
    background-image:none!important
    }
}
/*------------- BLOG-------------*/
.blog-section aside .card{
    padding:20px;
}
.blog-section aside .card ul{
    padding:0px;
}
.blog-section{
    margin-top:40px
}
.blog-section article img{
    width:100%
}
.blog-section h3 a{
    font-size: 30px;
    text-decoration: none;
    color:#0e2442
}
.blog-section img{
    border-radius: 10px;
}
.blog-section aside .card ul li a{
    text-decoration: none;
    color:#143a9b
}
.article-panel a{
 text-decoration: none;
 color:#0e2442
}
.article-salient{
    border-left:3px solid #143a6c;
    padding-left:20px;
    font-size: 20px;
    font-family: 'Titillium Web Light';
    margin-bottom: 30px;
}
@media (min-width:620px) and (max-width:997px){
    .blog-section a.card-blog .card h3 {
        vertical-align: bottom;
        margin-top: 50px;
    }
}
/*-------------BANNER SAAS-------------*/
.card-saas{
    max-width: 900px;
    margin:0 auto
}
.article-banner img.article-img-right-promo{
    width: auto;
}
.float-right{
    float:right
}
.saas-section .article-banner{
    padding-top: 50px;
}
.saas-section .article-banner h2{
    padding-top: 50px;
}
.saas-section {
    background-image: url(../img/division-cyan.png);
    background-repeat: no-repeat;
    background-position: top;
    background-position-x:500px ;
}
@media (min-width:620px) and (max-width:997px){
    .saas-section .article-banner .article-img-right-promo{
        width:100%!important
    }
    .saas-section .article-banner h2 {
        padding-top: 0px;
    }
}
@media (max-width:768px){
    .saas-section {
        background-image: none
    }
    .saas-section .article-banner img.article-img-right-promo{
        width: 100%;   
        margin-top: 0px!important;
    }
    .saas-section .article-banner h2 {
        padding-top: 0px;
    }
}
/*-------------BANNER FEATURES-------------*/
.features-features{
    position: relative;
}
.features-features article{
    margin-top: 120px;
}
.features-features article p{
    max-width: 300px;
}
.features-features {
    background-image: url(../img/shield-purple.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-x:1000px ;
}
@media (max-width:768px){
    .features-features .float-right{
        float:none
    }
    .features-features .text-right{
        text-align: left;
    }
    .features-features article {
        margin-top: 20px;
    }.features-features article p {
        max-width: 100%;
    }
    .features-features img.circle{
        width: 70%;
    }
    .features-features article img {
        position: absolute;
    }
    .features-features article h3,
    .features-features article p{
        margin-left:60px
    }
}
/*-------------COMENTARIOS CARD-------------*/
.comments .card, .card.card-comments{
    background-color: #f7f6fe;
    color:#0e2442;
    padding:20px
}
.comments .card h4, .card.card-comments h4{
    font-size: 18px;
}
/*-------------CONTACTO-------------*/
.banner-contact{
    padding-top:130px;
    padding-bottom:30px;
    background-image: url(../img/rocket-banner.jpg);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-position-y:-30px ;
    background-size: 600px
}
.contact-map iframe{
    height: 600px;
    width: 100%;
}
@media (max-width:768px){
    .banner-contact{
        padding-top: 40px;
        background-image: none;
    }
    .contact-cards .card{
        max-width: inherit!important;
    }
}
/*-------------TAGS-------------*/
.tags{
    display: flex;
}
.tags .tag{
    padding:5px 10px ;
    border-radius: 5px;
    margin-right:10px;
    background-color: #efedfc;
}
.tag a{
    text-decoration: none;
}
/*-------------DIVISIONES-------------*/
.div-li{
    border-bottom:1px solid #1454a9;
}
.border-nav{
    border-bottom: 1px solid #396aab;
    padding-bottom: 20px;
}
/*-------------GENERALES-------------*/
a{
    color:#3d73b9
}
a:hover{
    color:#102b4e
}
.text-right{
    text-align: right;
}
.d-flex{
  display:flex!important
}
hr{
    opacity: .1;;
}
.no-bullet{
    list-style: none;
}
.text-small{
    font-size:14px
}
.border-radius{
    border-radius:10px
}
@media (max-width:768px){
    .d-sm-none{
        display:none!important
    }
}
/*-------------ANIMACION-------------*/
.element-animation {
    margin: 2rem 0;    
    /* Hiding the element in the initial state */
    opacity: 0;
    transform: translateY(20px);
}
.element-animation.element-show {
    opacity: 1;
    transition: all 1.5s;
    transform: translateY(0%);
}
/*-------------ACORDEONES------------*/
.accordion-button{
    font-size:1.5rem!important;  
}
/*-------------Responsividad------------*/
@media (max-width:768px){
    section.section-mobile .col-md-6 img,
    section.section-mobile .col-md-6 article{
            float:none
    }
    section.section-mobile .col-md-6 article p,
    section.section-mobile .col-md-6 article h3{
        text-align: left;
    }
    section.section-mobile .col-md-6 article h3{        
        margin-top:20px!important
    }

}

/*-------------VIDEO CARD------------*/
.video-16by9{
    padding-top:56.25%
}
.image, .card-image{
    position: relative;
    display: block;
}
.ratio{
    width: 100%;
    height: 100%;
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0

}
/*-------------ICONOS------------*/
a.ico-download{
    padding-left:20px
}
.ico-download:before{
    width: 30px;
    height: 30px;
    content: " ";
    background-image: url(../img/ico-download.png);
    background-size: 15px;
    position: absolute;
    left:10px;
    top:16px;
    background-repeat: no-repeat;
    margin-right:20px


}
h3.ico-ticket{
    padding-left:20px;
    position: relative;
}
.ico-ticket:before{
    width: 30px;
    height: 30px;
    content: " ";
    background-image: url(../img/ico-ticket.png);
    background-size: 15px;
    left: -5px;
    top: 4px;
    background-repeat: no-repeat;
    margin-right:20px;
    position: absolute;
}

.bg-banner{
   
    background-image: url("../img/fondo-b.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #040c17!important;
}

main.home{
   margin-top:-150px ;
   padding-top:40px
   
}
@media (max-width:991px){
   /* header.bg-transparent{
        padding-bottom:200px
}*/
    main.home{
        margin-top:-300px ;
        padding-top:200px!important
        
     } 
     main.home section:first-child{
        
        
        padding-top:100px!important
     } 
}
.filter-white{
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(241deg) brightness(103%) contrast(103%);
}

.banner-background-top-header{
    background-position-y: -109px;
    background-repeat-x: repeat;
}

/* Slider Testimonios */
#SliderTestimony .carousel-control-prev-icon{
    background-image: url(../img/arrow-left.svg) !important;
}
#SliderTestimony .carousel-control-next-icon{
    background-image: url(../img/arrow-right.svg) !important;
}
    
#SliderTestimony{
    height:600px;
}
@media (max-width:768px) {
    #SliderTestimony{
        padding: 0px 40px;      
        height:auto;
    }  
    #SliderTestimony .carousel-inner{
        padding:10px        
    }
}