@font-face { 
    font-family: Armstrong;
    src: url('/fonts/Armstrong/Armstrong.otf');
}
@font-face { 
    font-family: Roboto;
    src: url('/fonts/Roboto/Roboto-Regular.ttf');
}
@font-face { 
    font-family: Roboto-Medium;
    src: url('/fonts/Roboto/Roboto-Medium.ttf');
}
.Armstrong {
    font-family: Armstrong;
}
.Roboto-M {
    font-family: Roboto-Medium;
}
.Roboto {
    font-family: Roboto;
}
a {
    text-decoration: none;
    font-size: 16px;
}
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}
#seccion1, #seccion2, #seccion3, #seccion3-2, #seccion4, #seccion4-M, #seccion5, #faqs, #seccion7, #about-us, body {
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
}
#seccion1 {
    /* background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url("../img/content/banner.png"); */
    background-image: url("../img/content/imagen_1.jpg");
    background-position: top 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 80vh;
}
#seccion2, #seccion2 .card {
    background: transparent;
}
#about-us {
    background-image: url("../img/content/imagen_2.jpg");
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#cincoPasos {
    margin: 0;
}
#seccion5 {
    background-image: url("../img/content/banner_3.png");
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
.accordion-button:focus, .accordion-button:active{
    box-shadow: none;
    border: none !important;
}
#seccion7 {
    background-image: url("../img/content/banner_descarga_la_app-2x.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
#about-us img {
    width: 330px;
    height: 62px;
}
#seccion3-2 .clearfix img {
    height: 72px;
    width: 72px;
    margin-right: 15px;
}
#download img {
    width: 150px;
    height: 50px;
}
.imagen img {
    width: 100%;
    height: auto;
}
.number {
    height: 24px;
    width: 24px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: black;
    color: white;
}
.px-2x5 {
    padding-right: 6rem;
    padding-left: 6rem;
}
.px-3x5 {
    padding-right: 10rem;
    padding-left: 10rem;
}
.py-2x5 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.pt-2x5 {
    padding-top: 6rem !important;
}
.pb-2x5 {
    padding-bottom: 6rem !important;
}
.h7 {
    font-size: 0.6rem;
}
.boton {
    padding: 8px 24px;
    border-radius: 8px;
}
.card-body {
    padding-left: 0 !important;
    background: transparent;
}
#transport-tab, #generator-tab {
    color: black;
}
#navbarra {
    background-color: black;
}
footer {
    background-color: black;
}
.img-ventajas {
    width: 250px !important;
    height: 250px !important;
    display: flex;
    align-self: center;
}
.cinco-pasos {
    width: 350px;
}
/* X-Small devices (portrait phones, less than 576px) */
@media (min-width: 200px) and (max-width: 575.98px) {
    #navbarra {
        padding-left: 30px;
        padding-right: 30px;
    }
    .navbar-brand img {
        width: 150px;
        height: 50px;
    }
    #seccion1{
        /* background-image: url("../img/content/banner_1_mobile.svg"); */
        background-image: url("../img/content/imagen_1-mobile.jpg");
    }
    #seccion1, #seccion5, #seccion7 {
        padding: 50px !important;
    }
   #seccion3, #seccion2, .acordeeon {
        padding: 50px 50px 0px;
    }
    #seccion8 {
        margin-top: 0px !important;
    }
    #seccion3-2 {
        padding: 0px 50px 50px;
    }
    #faqs {
        padding: 50px 1.5rem;
    }
    #tutos {
        padding: 50px 1.5rem;
    }
    #about-us {
        background-image: url("../img/content/imagen_2-mobile.jpg");
        background-size: cover;
        background-position: bottom center;
        /* padding: 50px !important; */
        height: 80vh !important;
        padding: 50px;
    }
    #seccion7 {
        background-image: url("../img/content/banner_descarga_la_app-mobile.jpg");
        background-position: center bottom;
        background-size: cover;
        height: 70vh !important;
        text-align: center;
    }
    .acordeeon {
        padding: 50px 50px 50px !important;
    }
    .boton {
        width: 100%;
        padding: 0.5rem;
    }
    footer {
        text-align: left;
        padding: 50px 2rem !important;
    }
    .vh-70 {
        min-height: 70vh !important;
    }
    .img-ventajas {
        width: 150px !important;
        height: 150px !important;
    }
    .cinco-pasos {
        width: 250px !important;
    }
}
/* Small devices (landscape phones, less than 768px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .acordeeon {
        padding: 50px !important;
    }
    #about-us p {
        color: #fff !important;
    }
    #about-us {
        height: 80vh !important;
        background-position: bottom center;
    }
    #faqs {
        padding: 50px 1.5rem;
    }
    #tutos {
        padding: 50px 1.5rem;
    }
    #seccion1{
        background-position: center top;
    }
    #seccion7 {
        background-image: url("../img/content/banner_descarga_la_app-mobile.jpg");
        background-position: center bottom;
        height: 700px !important;
        text-align: center;
    }
    .navbar-brand img {
        width: 200px;
        height: 50px;
    }
    .img-ventajas {
        width: 150px !important;
        height: 150px !important;
    }
}
/* Medium devices (tablets, less than 992px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #navbarra {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    #seccion1, #seccion5, #seccion7 {
        padding: 3rem !important;
    }
    #seccion1 {
        background-position: center top;
    }
    #seccion1 h1 {
        font-size: 2.5rem;
    }
    #seccion3-2, #seccion3, #seccion2, .acordeeon {
        /* arriba izq-der abajo */
        padding: 0rem 3rem 0px;
    }
    #seccion2 .card-title {
        font-size: 0.9rem;
    }
    #faqs {
        /* arriba-abajo izq-der */
        padding: 3rem 1.5rem;
    }
    #tutos {
        /* arriba-abajo izq-der */
        padding: 3rem 1.5rem;
    }
    #about-us {
        background-position: 50% 50%;
        padding: 3rem !important;
    }
    .acordeeon {
        padding: 50px 3rem 3rem !important;
    }
    footer {
        text-align: left;
        padding: 9rem 2rem !important;
    }
    .navbar-brand img {
        width: 250px;
        height: 50px;
    }
    #seccion7 {
        background-image: url("../img/content/banner_descarga_la_app-mobile.jpg");
        background-position: center bottom;
        height: 750px !important;
        text-align: center;
    }
    #seccion7 row {
        display: flex;
        justify-content: center !important;
        flex-direction: column !important;
    }
    .img-ventajas {
        width: 150px !important;
        height: 150px !important;
    }
}
@media (min-width: 992px) and (max-width: 1399px) {
    .navbar-brand img {
        width: 300px;
        height: 50px;
    }
    footer p,
    footer a,
    #navbarra a {
        font-size: 12px;
    }
    .img-ventajas {
        width: 200px !important;
        height: 200px !important;
    }
    #seccion1 {
        background-position: center top;
        padding: 8rem !important;
    }
    #seccion1 h1 {
        font-size: 3rem;
    }
    #seccion1 p {
        font-size: 1.1rem;
    }
    #seccion2 .card-title {
        font-size: 1rem;
    }
}
@media (min-width: 1400px) and (max-width: 1699px) {
    #seccion1 {
        padding: 9.5rem !important;
    }
    #seccion1 p,
    #seccion2 .h6, #seccion2 .card-text,
    #seccion3 .h6, #seccion3-2 .h6, #seccion3 .texto, #seccion3-2 .texto,
    #seccion4 .texto,
    #faqs .texto,
    #tutos .texto,
    #seccion7 .texto,
    #about-us .texto,
    .accordion-body {
        font-size: 1.1rem;
    }
    footer p,
    footer a,
    #navbarra a {
        font-size: 14px;
    }
    #seccion1 h1 {
        font-size: 4rem;
    }
    #download img {
        width: 250px;
        height: 120px;
    }
    #seccion2 .h1,
    #seccion3 .h1, #seccion3-2 .h1,
    #seccion5 h1,
    #faqs h1,
    #tutos h1,
    #seccion7 h1 {
        font-size: 2rem;
    }
    #seccion2 .card-title,
    #seccion3-2 .subtitulo,
    #seccion4 .subtitulo,
    #seccion5 p,
    #transport-tab, #generator-tab {
        font-size: 1.20rem;
    }
    #seccion2 .card-text {
        font-size: 1.1rem;
    }
    .accordion-header button {
        font-size: 0.95rem;
    }
    #seccion4 .subtitulo .h1 {
        font-size: 2rem;
    }
    #about-us img {
        width: 350px;
        height: 150px;
    }
    #seccion3-2 .img-sec3 {
        height: 90px;
    }
    #seccion3 .boton, #seccion3-2 .boton {
        width: 300px;
        font-size: 1.5rem !important;
    }
    #separador img {
        height: 120px;
        width: 30px;
    }
    .imagen img {
        width: 100%;
        height: auto;
    }
    .cinco {
        width: 100px;
        height: 100px;
    }
    .cinco-img {
        width: 50%;
    }
    .centrado {
        padding: 3rem;
    }
    .centrado2x {
        padding-left: 7rem;
        padding-right: 7rem;
    }
    #navbarra .nav-item {
        margin-right: 2rem;
    }
    .navbar-brand img {
        width: 350px;
        height: 50px;
    }
    #login {
        width: 150px;
        padding: 0.5rem;
        font-size: 0.9rem !important;
    }
}
/* Large devices (desktops, less than 1200px) */
@media (min-width: 1700px) and (max-width: 2559px) {
    #seccion1 p,
    #seccion2 .h6, #seccion2 .card-text,
    #seccion3 .h6, #seccion3-2 .h6, #seccion3 .texto, #seccion3-2 .texto,
    #seccion4 .texto,
    #faqs .texto,
    #tutos .texto,
    #seccion7 .texto,
    #about-us .texto,
    .accordion-body {
        font-size: 1rem;
    }
    footer p,
    footer a,
    #navbarra a {
        font-size: 0.9rem;
    }
    #seccion1 h1 {
        font-size: 5rem;
    }
    #download img {
        width: 200px;
        height: 130px;
    }
    #seccion2 .h1,
    #seccion3 .h1, #seccion3-2 .h1,
    #seccion5 h1,
    #faqs h1,
    #tutos h1,
    #seccion7 h1 {
        font-size: 2rem;
    }
    #seccion2 .card-title,
    #seccion3-2 .subtitulo,
    #seccion4 .subtitulo,
    #seccion5 p,
    #transport-tab, #generator-tab {
        font-size: 1.5rem;
    }
    #seccion2 .card-text {
        font-size: 1.15rem;
    }
    .accordion-header button {
        font-size: 0.95rem;
    }
    #seccion4 .subtitulo .h1 {
        font-size: 2.5rem;
    }
    #about-us img {
        width: 350px;
        height: 70px;
    }
    #seccion3-2 .clearfix img {
        height: 65px;
        width: 65px;
        margin: 0px 2rem 0rem 0px !important;
    }
    #seccion3 .boton, #seccion3-2 .boton {
        width: 250px;
        padding: 0.5rem;
        font-size: 1.2rem !important;
    }
    #separador img {
        height: 90px;
        width: 30px;
    }
    .imagen img {
        width: 100%;
        height: auto;
    }
    .cinco {
        width: 70px;
        height: 70px;
    }
    .cinco-img {
        width: 50%;
        height: auto;
    }
    .centrado {
        padding: 3rem;
    }
    .centrado2x {
        padding-left: 7rem;
        padding-right: 7rem;
    }
    #navbarra .nav-item {
        margin-right: 2rem;
    }
    .navbar-brand img {
        width: 250px;
        height: 60px;
    }
    #login {
        width: 150px;
        padding: 0.5rem;
        font-size: 0.9rem !important;
    }
    #wrapperTable,
    #wrapperTable #generar,
    #wrapperTable #limpiar {
        font-size: 1rem;
    }
    #wrapperTable .form-select,
    #wrapperTable #caption,
    #wrapperTable #filas {
        font-size: 0.9rem;
    }
}
/* X-Large devices (large desktops, less than 1400px) */
@media (min-width: 2560px) {
    #seccion1 p,
    #seccion2 .h6, #seccion2 .card-text,
    #seccion3 .h6, #seccion3-2 .h6, #seccion3 .texto, #seccion3-2 .texto,
    #seccion4 .texto,
    #faqs .texto,
    #tutos .texto,
    #seccion7 .texto,
    #about-us .texto,
    .accordion-body {
        font-size: 1.5rem;
    }
    footer p,
    footer a,
    #navbarra a {
        font-size: 1rem;
    }
    #seccion1 h1 {
        font-size: 5.5rem;
    }
    #download img {
        width: 280px;
        height: 130px;
    }
    #seccion2 .h1,
    #seccion3 .h1, #seccion3-2 .h1,
    #seccion5 h1,
    #faqs h1,
    #tutos h1,
    #seccion7 h1 {
        font-size: 2.5rem;
    }
    #seccion2 .card-title,
    #seccion3-2 .subtitulo,
    #seccion4 .subtitulo,
    #seccion5 p,
    #transport-tab, #generator-tab {
        font-size: 1.5rem;
    }
    .accordion-header button {
        font-size: 0.97rem;
    }
    #seccion4 .subtitulo .h1 {
        font-size: 2.6rem;
    }
    #about-us img {
        width: 400px;
        height: 70px;
    }
    #seccion3-2 .clearfix img {
        height: 70px;
        width: 70px;
        margin: 0px 2rem 0rem 0px !important;
    }
    #seccion3 .boton, #seccion3-2 .boton {
        width: 300px;
        padding: 0.5rem;
        font-size: 1.2rem !important;
    }
    #separador img {
        height: 90px;
        width: 30px;
    }
    .imagen img {
        width: 100%;
        height: auto;
    }
    .cinco {
        width: 75px;
        height: 75px;
    }
    .cinco-img {
        width: 5    0%;
    }
    .centrado {
        padding: 3rem;
    }
    .centrado2x {
        padding-left: 7rem;
        padding-right: 7rem;
    }
    #navbarra .nav-item {
        margin-right: 2rem;
    }
    .navbar-brand img {
        width: 280px;
        height: 60px;
    }
    #login {
        width: 250px;
        padding: 0.5rem;
        font-size: 1rem !important;
    }
    #wrapperTable,
    #wrapperTable #generar,
    #wrapperTable #limpiar {
        font-size: 1rem;
    }
    #wrapperTable .form-select,
    #wrapperTable #caption,
    #wrapperTable #filas {
        font-size: 0.9rem;
    }
}