/********************************************************/
/***************** ESTILOS GENERICOS ********************/
/********************************************************/

body {
    font-family: var(--km-font-family-regular);
    color: var(--km-dark);
    /*background-color: var(--km-ornery-tangerine);*/
    margin: 0 auto;
}

p{
    font-family: "Arial", sans-serif;
}

h1,
h2,
h3 {
    font-family: var(--km-font-family-regular);
}

a:hover {
    text-decoration: none;
}


section,footer{
    clear: both;
    position: static;
}
/******************** COLORES ***************************/

.bg-traslucido {
    background-color: rgba(255, 255, 255, .4);
}

.bg-corp {
    background-color: var(--km-ornery-tangerine);
}

.text-corp {
    color: var(--km-ornery-tangerine) !important;
}

.border-corp {
    border-color: var(--km-ornery-tangerine);
}

.text-blanco {
    color: var(--km-light);
}

.bg-gradius-corp {
    background: var(--km-ukon-saffron);
    background: -moz-linear-gradient(left, var(--km-ukon-saffron) 0%, var(--km-ornery-tangerine) 50%, var(--km-electrifying-kiss) 100%);
    background: -webkit-linear-gradient(left, var(--km-ukon-saffron) 0%, var(--km-ornery-tangerine) 50%, var(--km-electrifying-kiss) 100%);
    background: linear-gradient(to right, var(--km-ukon-saffron) 0%, var(--km-ornery-tangerine) 50%, var(--km-electrifying-kiss) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='var(--km-ukon-saffron)', endColorstr='var(--km-electrifying-kiss)', GradientType=1);
}


/**** FUENTES ****/
.title-big-white{
    font-size: 56px;
    font-family: var(--km-font-family-bold);
    color:var(--km-light);
    padding-bottom:10px;
}

.paragraph{
    font-size:25px;
    color:var(--km-light);
    font-family: var(--km-font-family-regular);
}

.title-big-orange{
    font-size: 50px;
    font-family: var(--km-font-family-bold);
    color:var(--km-ornery-tangerine);
    padding-bottom:10px;
}

.title-small{
font-family: var(--km-font-family-regular);
margin-top:10px;
color:var(--km-dark) !important;
}

.display-align{
    display:flex;
    align-items:center;
}

/**** IMÁGENES ***/

.img-medium{
    width:50%;
}

.img-medium2{
    width:30%;
}

.img-large{
    width:100%;
}

.img-large-mockup{
    width:100%;
}

.img-small{
    width:20%;
}


/*** POSICIONES****/
.center{
    text-align:center;
}
.right{
    text-align: right;
}



.box-description{
    width:100%;
    height:200px;
    padding-bottom:15px;

}

.box-description-r{
    width:100%;
    height:100%;
    padding-bottom:15px;

}

.box-description-r p{
    color: var(--km-grey-2);

}

.box-description p{
    color: var(--km-grey-2);

}



/*** SEPARADORES****/
.margin{
    margin-bottom:60px;
    margin-top:60px;
}

.margin-top{
    margin-top:60px;
}


.instala-android{
    background-color:var(--km-grey-6);
    padding-bottom:50px;
}

.descarga-app{
    background-image: url("../../assets/imagenes/landing-app-mobile/banner-descarga.png");
    height: 200px;
}

.vertical-align{
    display:flex;
    justify-content:center;
    align-items:center;
    height:200px;
}

.vertical-align-text{
    display:flex;
    justify-content:center;
  flex-direction:column;
    height:200px;
}

.vertical-align-footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height:200px;
}

.vertical-align-text h3{
  font-size:39px;
}

.cmp-banner-naranja{
    background-image: url(../../assets/imagenes/landing-app-mobile/bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.cabecera{
    margin-top:58px;
    height: 140px;
}

.botones{
    margin-top:30px;
    margin-right:26px;
}




/*---------------------------------------------*/
/*FOOTER*/
/*---------------------------------------------*/

footer {
    background-color: var(--km-dark);
    color: var(--km-grey-3);
    clear: both;
}

footer .col-md-6 {
    margin-top: 30px;
    margin-bottom:30px;
}

footer .col-md-3:first-child {
    color: var(--km-grey-2);
    margin-top: 10px;
}

footer ul {
    margin-left: -35px;
}

footer li {
    list-style: none;
    padding: 5px 0;
    border-bottom: 2px groove var(--km-grey-2);
}

footer li:last-child {
    list-style: none;
    padding: 5px 0;
    border-bottom: 0 solid transparent;
}

footer + footer a {
    color: var(--km-grey-3);
}

footer + footer a:hover {
    color: var(--km-light);
}

.ultimo-pie {
    background-color: var(--km-dark);
    padding: 10px;
    padding-bottom: 40px;
}

.ultimo-pie .container {
    background-color: var(--km-dark);
    padding: 10px;
}

.ultimo-pie i.fa {
    font-size: 1.5em;
    margin-left: 10px;
}

.logo-inferior{
    margin: 10px 20px;
    height:50px;
}

footer .centrar-float {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    padding-right: 0;
    padding-left: 0;
}

footer .logo-bn-at{
    display: block;
    margin: 25px 0;
}


/* ESTILOS CAROUSEL*/

.owl-theme .owl-controls .owl-page span{
    background-color:var(--km-dark) !important;
}



        /*MEDIA QUERIES*/

        @media (min-width: 992px){
            
           .descubre-app-mobile{
               display:none;
           }

           .instala-android-mobile{
               display:none;
           }

           .instala-ios-mobile{
            display:none;
        }

        .botones-responsive{
            display:none;
        }

        }

        @media (min-width: 769px) and (max-width: 992px) {

        .cmp-banner-naranja{
            background-image: url(../../assets/imagenes/landing-app-mobile/bg_responsive.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }
         
            .img-large-mockup{
                display:none;
            }

        

        .descubre-app{
            display:none;
        }

        .instala-android{
            display:none;
        }

        .instala-ios{
            display:none;
        }

        .img-desktop{
            display:none;
        }

        footer .col-md-6 {
            margin-bottom: 10px;
               }

        }




        @media (min-width: 300px) and (max-width: 768px) {

            
        .cmp-banner-naranja{
            background-image: url(../../assets/imagenes/landing-app-mobile/bg_responsive.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;

        }
           
            .img-large-mockup{
                display:none;
            }

            .img-small{
                width:10%;
            }

            .descubre-app{
                display:none;
            }

            .instala-android{
                display:none;
            }

            .instala-ios{
                display:none;
            }

        
            .title-big-orange{
                font-size:20px;
            }

            .instala-android-mobile{
                background-color:var(--km-grey-6);
                padding: 2px 0px 20px 0px;
            }

            .instala-ios-mobile{
                padding: 0px 0px 20px 0px;
            }

        .botones{
            margin-right:0px;
        }

        .vertical-align{
            display:block;
            text-align: center;
            height:100%;
            margin-bottom:20px;
        }

        .vertical-align-text{
            text-align: center;
            font-size:12px;
            height:140px;
        }
        .vertical-align-text h3{
            font-size: 25px;
        }

        .vertical-align-text p {
            font-size: 16px;
        }

        .vertical-align-footer{
            display: flex;
            justify-content: center;
            flex-direction: initial
        }
        .descarga-app{
            background-position: center;
            background-size: cover;
            height:100%;
        }

        .logo-inferior{
            height:70px;
        }

footer .col-md-6{
    margin-top:10px;
}

.footer-responsive{
    width:17%;
    margin: 8px 2px;
}

.header-buttons{
    display:none;
}

.img-desktop{
    display:none;
}

.cabecera{
    margin-top: 44px;
    height: 88px

}

.cabecera-texto h3{
    font-size:38px;
}

.cabecera-texto .paragraph{
    font-size:18px;
}


.vertical-align-footer {

    height: 100px;
}

footer .col-md-6 {
     margin-bottom: 0px;
        }

    }