body {
    font-family: Dosis;
    overflow-x: hidden;
}

/*NOTE:Estilo del contenedor*/
.container-fluid {
    padding: 7px 46px;
    font-family: Dosis
}

/*NOTE:Centra de forma horizontal*/
.center {
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
}
.center-j {
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
    background-color: #00284F
        /*background-color: #444*/
}
.center-j {
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
    background-color: #00284F
        /*background-color: #444*/
}
.leftx {
    text-align: left;
    vertical-align: middle;
    line-height: 80px;
}

/*NOTE: alinea de forma vertical los divs dentro de "row"*/
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}


/*NOTE:Bordes para los divs*/
.borde-inferior-azul{
    border-bottom: 1px solid rgb(1, 23, 54);
}

.borde-inferior-blanco{
    border-bottom: 1px solid white;
}

/*NOTE:Mayor padding para los contenedores*/
.padding-01 {
    padding: 120px 50px;
}

/*NOTE:Mismo padding que un container-fluid*/
.padding-02 {
    padding: 60px 50px;
}

/*NOTE:Padding minimo*/
.padding-03{
    padding: 20px 15px;
}

/* TODO: Container de "Herramienta de Marketing"
    -Fondo azul
    -Letras blancas Dosis
    -Texto alineado a la izquierda
*/
.bg-white {
    background-color: #FFFFFF;
}
.bg-blue h2 {
    color: #FFFFFF;
    font-family: Dosis;
    font-weight: 400;
    background-color: #011736;
}
.bg-blue h4 {
    color: #FFFFFF;
    font-family: Dosis;
    font-weight: 400;
    background-color: #011736;
}

.bg-blue h3 {
    color: #fff;
    font-family: Dosis;
    font-weight: 300;
}

.bg-blue li {
    color: white;
}

.bg-blue i {
    color: white;
}

.bg-blue p {
    color: white;
}

.bg-blue span {
    color: white;
}

/*NOTE:Container blanco 01
    -Fondo blanco
    -Letras azules Dosis
    -Texto centrado
*/
.bg-blanco-01 h3 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(1, 23, 54);
}

.bg-blanco-01-img img {
    width: 200px;
    height: 200px;
}


/*NOTE:Contenedor blanco 02
-Fondo blanco
-Letras Dosis grises
-Texto centrado
*/


.bg-blanco-02 h2 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(120, 121, 125);
}

.bg-blanco-02 h3 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(120, 121, 125);
}

.bg-blanco-02 h4 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(120, 121, 125);
}

.bg-blanco-02 img {
    
}
.bg-xx h2 {
    font-family: Dosis;
    font-weight: 400;
    color: #FFFFFF;
}

.bg-xx h3 {
    font-family: Dosis;
    font-weight: 400;
    color: #FFFFFF;
}

.bg-xx h4{
    font-family: Dosis;
    font-weight: 400;
    color: rgb(120, 121, 125);
}

.bg-xx img {
    width: 70%;
    height: 70%;
}

/*NOTE:Container blanco 03
    -Fondo blanco
    -h2 azul
    -h3 gris
    -Texto centrado
*/
.bg-blanco-03 {
    text-align: center;
    vertical-align: middle;
    line-height: 90px;
}

.bg-blanco-03 h2 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(1, 23, 54);
}

.bg-blanco-03 h3 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(120, 121, 125);
}
.bg-blanco-032 h3 {
    font-family: Dosis;
    font-weight: 300;
    color: rgb(120, 121, 125);
}

/*NOTE:Container gris 01
    -Fondo gris claro
    -Letras Dosis
    -h2 verde
    -h3 azul
    -Alineado a la izquierda
*/
.bg-gris-011 {
    background-color: #f6f6f6;
    padding-bottom: 20px;
}

.bg-gris-01 {
    background-color: #f6f6f6;
    padding-bottom: 80px;
}

.bg-gris-01 h2 {
    font-family: Dosis;
    font-weight: 500;
    color: rgb(17, 127, 126);
}

.bg-gris-01 h3 {
    color: rgb(1, 23, 54);
    font-weight: 500;
}

.bg-gris-01 h4 {
    color: rgb(1, 23, 54);
}

/*NOTE:Container gris 02
    -Fondo gris claro
    -Letras grises
    -Texto centrado
*/

.bg-gris-02 {
    background-color: #f6f6f6;
}

.bg-gris-02 h2 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(120, 121, 125);
}

.bg-gris-02 h3 {
    font-family: Dosis;
    font-weight: 400;
    color: rgb(120, 121, 125);
}


.bg-gris-02 img {
    width: 65%;
    height: 65%;
}


/*Contenedor con fondo gris y fuente color blanco*/
.bg-gris-03 {
    background-color: rgb(162, 163, 166);
}

.bg-gris-03 h4 {
    color: white;
}


/*Contenedro de fondo verde y letras blancas*/
.bg-verde {
    background-color: rgb(17, 127, 126);
}

.bg-verde h4 {
    color: white;
}


/*NOTE:Container fondo 01 (Tu panel de control, imagen de Mac + Cafe)
    -Backgroind de una persona con una Mac y una tasa de cafe
    -Letras blancas
    -Texto centrado
*/

.bg-tu-panel {
    background-image: url('../img/caracteristicas/tu-panel.png');
    padding: 150px 50px;
    background-repeat: no-repeat;
    background-position: center;
}

.bg-tu-panel h2 {
    font-family: Dosis;
    font-weight: 500;
    color: white;
}

.bg-tu-panel h3 {
    font-family: Dosis;
    font-weight: 300;
    color: white;
}
@media only screen and (max-width: 768px){
    .bg-tu-panel{
        padding: 80px 50px;
    }
}

/*NOTE:Container fondo 02 (Sorprende a tus clientes de cumpleaños, imagen estrellitas)
    -Fondo de "Mujer sujetando Estrellitas"
    -Letras blancas
    -Texto alineado a la derecha
*/
.bg-cumple {
    background-image: url('../img/caracteristicas/bg-cumple.jpg');
    /*background-repeat: no-repeat;
    background-position: center;
    padding: 150px 50px;*/
}

.bg-cumple h2 {
    font-family: Dosis;
    font-weight: 500;
    color: white;
}

.bg-cumple h3 {
    font-family: Dosis;
    font-weight: 300;
    color: white;
}
@media only screen and (max-width: 768px){
    .bg-cumple{
        padding: 80px 50px;
    }
}
/*NOTE:Container fondo 03 (Rubros)
    -TODO: Background imagen para la parte de rubros
    -Letras blancas
    -texto centrado
*/
.bg-rubros {
    
    background-image: url('../img/conectate/imagen-conectate_02.png');
}

.bg-rubros h2 {
    font-family: Dosis;
    font-weight: 500;
    color: white;
}

.bg-rubros h3 {
    font-family: Dosis;
    font-weight: 400;
    color: white;
}

/*NOTE:Imagenes y sus distintas reescalas*/
.reescala-01 img {
    width: 65%;
    height: 65%;
}

.reescala-02 img {
    width: 50%;
    height: 50%;
}

.reescala-03 img{
    padding: 40px 40px;
}

/*NOTE: escala para los clientes dentro del Home*/
.reescala-clientes-01 {
    padding: 20px 40px;
}

.reescala-clientes-02 {
    padding: 20px 20px;
}


@media only screen and (max-width: 768px){
    .reescala-01 img {
        width: 45%;
        height: 45%;
    }

    .reescala-02 img {
        /*width: 30%;
        height: 30%;*/
    }

    .reescala-03 img{
        width: 95%;
        height: 95%;
    }

    .small-center {
        text-align: center;
    }

    .reescala-clientes-01 {
        padding: 10px 20px;
    }

    .reescala-clientes-02 {
        padding: 10px 10px;
    }
}

/*NOTE:Paneles para los paquetes*/
/*NOTE:Estilo del panel blanco*/
.panel-blanco h2 {
    color: rgb(1, 23, 54);
}

.panel-blanco h3 {
    color: rgb(1, 23, 54);
}

.panel-blanco  h4 {
    color: rgb(1, 23, 54);
}


/*NOTE:Estilos del panel azul*/
.panel-azul {
    background-color: rgb(1, 23, 54);
}

.panel-azul h2 {
    color: #fff;
}
.panel-azul h3 {
    color: #fff;
}
.panel-azul h4 {
    color: #fff;
}



/*NOTE:Estilos para la pagina de contacto*/
.bg-caracteristicas {
    background-image: url('../img/caracteristicas/banner-caracteristicas-j.jpg');
    background-repeat: no-repeat;
    /*background-attachment: scroll;*/
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding: 150px 50px;
}
.bg-conectate{
    background-image: url('../img/home/carrusel/banner-contacte.png');
    background-repeat: no-repeat;
    /*background-attachment: scroll;*/
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    /*padding-bottom: 550px;*/
    padding: 150px 50px;
}

@media only screen and (max-width: 768px) {
    [class*="bg-caracteristicas"]{
        padding-bottom: 300px;
        background-position: center left;
        background-size: 500px 350px;
        padding-bottom: 220px;

    }
}



/*NOTE:Estilos para la pagina de contacto*/
.bg-contactenos {
    background-image: url('../img/contacto/consultas_01.jpg');
    background-repeat: no-repeat;
    /*background-attachment: scroll;*/
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-bottom: 550px;
}

@media only screen and (max-width: 768px) {
    [class*="bg-contactenos"]{
        padding-bottom: 300px;
        background-position: center right;
    }
}


/*NOTE:Estilos para la pagina de contacto*/
.bg-img-paquetes {
    background-image: url('../img/paquetes/precios_01.png');
    background-repeat: no-repeat;
    /*background-attachment: scroll;*/
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-bottom: 550px;
    padding: 150px 50px;

}

@media only screen and (max-width: 768px) {
    [class*="bg-img-paquetes"]{
        padding-bottom: 300px;
        background-position: center right;
    }
}

.bg-img-paquetes-02 {
    background-image: url('../img/paquetes/precios-02.png');
    background-repeat: no-repeat;
    /*background-attachment: scroll;*/
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    padding-bottom: 550px;
}

@media only screen and (max-width: 768px) {
    [class*="bg-img-paquetes-02"]{
        padding-bottom: 300px;
        background-position: center right;
    }
}

.bg-img-comunidad {
    background-image: url('../img/comunidad/comunidad.jpg');
    background-repeat: no-repeat;
    /*background-attachment: scroll;*/
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    /*padding-bottom: 550px;*/
    padding-bottom: 350px;
}

@media only screen and (max-width: 768px) {
    [class*="bg-img-comunidad"]{
        padding-bottom: 250px;
        background-position: center center;
    }
}


/*TODO: revisar y corregir los inputs de contacto*/

.input-style input[type=text] {
    /*-webkit-appearance:none;
    border: none !important;
    border-top: 0px;
    outline:0px !important;*/
    -webkit-border-radius: initial;
    -moz-border-radius: initial;
    -o-border-radius: initial;
    border-radius: initial;
    border: initial;
    /*border-bottom: 2px solid grey;*/
}

.input-style input[type=text]:focus {
    /*-webkit-appearance:none;
    border: none !important;
    outline:0px !important;*/
    -webkit-border-radius: initial;
    -moz-border-radius: initial;
    -o-border-radius: initial;
    border-radius: initial;
    border: initial;
    /*border-bottom: 3px solid #555;*/
}

/*NOTE: estilo de los botones*/
.btn-font-size {
    font-size: 18px;
}

.btn-azul-A {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: rgb(1, 23, 54);
    color: white;
    border: 2px solid white;
}
.btn-azul-A:hover {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: white;
    color: #011736;
    border: 2px solid white;
}
.btn-azul-B {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: rgb(1, 23, 54);
    color: white;
    border: 2px solid #011736;
}
.btn-azul-B:hover {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: white;
    color: #011736;
    border: 2px solid #011736;
}

.btn-verde {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    background-color: rgb(17, 127, 126);
    border: 2px solid rgb(17, 127, 126);
    color: white;
    border: 0px solid white;
}

.btn-verde:hover {
    text-decoration: none;
    color: white;
}


.btn-transparente-01 {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    color: white;
    border: 2px solid rgb(1, 23, 54);
    background-color:rgba(0,0,0,0.0);
}
.btn-transparente-01:hover {
    text-decoration: none;
    color: white;
}

/*Boton transparente con bordes y letras azules*/
.btn-transparente-02 {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    color: rgb(1, 23, 54);
    border: 2px solid rgb(1, 23, 54);
    background-color:rgba(0,0,0,0.0);
}

.btn-verde-fiwex {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    color: #117F7E;
    border: 2px solid rgb(1, 23, 54);
    background-color:rgba(0,0,0,0.0);
}

.btn-transparente-02:hover {
    text-decoration: none;
    color: rgb(1, 23, 54);
    background-color:rgba(0,0,0,0.0);
}

.btn-transparente-blanco {
    padding: 2px 35px;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    color: white;
    border: 2px solid white;
    background-color:rgba(0,0,0,0.0);
}

.btn-transparente-blanco:hover {
    text-decoration: none;
    color: white;
    background-color:rgba(0,0,0,0.0);
}

/*NOTE:estilo para los inputs*/
.check input{
    margin-left: 10px;
}

footer {
    height: 170px;
}

@media only screen and (max-width: 768px){
    footer .xs-center{
        text-align: center;
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media only screen and (min-width: 768px){
    footer .sm-padding-left{
        padding-left:80px;
    }
    footer .sm-padding-right{
        padding-right:50px;
    }
}

.titulo_carousel{
    color: rgb(17, 127, 126);
    height: 100px;
    width: 553px;
    font-weight: 500;
    position: absolute;
    font-size: 50px;
    font-family: Dosis;
    text-align: right;
    display: block;
    right: 0px;
    text-align: left;
    top: 175px;
}

.texto_carousel{
    height: 200px;
    width: 553px;
    position: absolute;
    font-size: 29px;
    display: block;
    right: 0px;
    top: 255px;
    color: rgb(1, 23, 54);
    line-height: 1.1;

}
.btn-j{
    padding: 5px 5px;
    font-size: 14px;
    border-radius: 12px;
    width: 120px;
    text-align: center;
    margin: 10px;
}
.text_h3_right
{
  text-align: right;
  line-height: 1.1;
}

.text_h3_left
{
  text-align: left;
  line-height: 1.1;
}

.h3_titulo_azul{
    color:#002245; 
    font-size: 45px;
}
.h3_titulo_blanco{
    color:#ffffff; 
    font-size: 45px;
}
.lead_style_azul{
    color:#002245; 
    font-size: 26px;
}
.lead_style_azul_1{
    color:#002245; 
    font-size: 26px;
}
.lead_style_blanco_1{
    color:#FFFFFF; 
    font-size: 26px;
}
.lead_style_blanco{
    color:#ffffff; 
    font-size: 26px;
}
.btn-default2{
    background-color: transparent;
    border:2px #fff solid;
    border-radius: 50px;
    padding: 6px 25px;
    color: #fff;
}
.btn-default2:hover{
    background-color: #d4d4d4;
    border:2px #d4d4d4 solid;
    color: #000;
}
.btn-primary{
    background-color: #0bb7a2;
    border:2px #0bb7a2 solid;
    border-radius: 50px;
    padding: 6px 30px;
}
.btn-primary:hover{
    border:2px #0b9687 solid;
    background-color: #0b9687;
    color: #fff;
}
#moveback1{
    padding: 10px 14px;
    background-color: #162645;
    border-radius: 50%;
    border: 2px #162645 solid;
    color: #fff;
        position: absolute;
    margin-top: -240px;
    margin-left: 350px;
}
#moveback2{
    padding: 10px 14px;
    background-color: #f6f6f6;
    border-radius: 50%;
    border: 2px #162645 solid;
    color: #162645;
        position: absolute;
    margin-top: -240px;
    margin-left: 350px;
}
#moveForward1{
    padding: 10px 14px;
    background-color: #162645;
    border-radius: 50%;
    border: 2px #162645 solid;
    color: #fff;
        position: absolute;
    margin-top: -240px;
    margin-left: 350px;
}
#moveForward2{
    padding: 10px 14px;
    background-color: #f6f6f6;
    border-radius: 50%;
    border: 2px #162645 solid;
    color: #162645;
        position: absolute;
    margin-top: -240px;
    margin-left: 350px;
}
#error404{
    
    
     background: url(../img/404/error.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}