@font-face {
        font-family: 'Lora';
        src: url('../fonts/Lora-Regular.ttf') format('truetype');
    }
    
    @font-face {
        font-family: 'LoraBold';
        src: url('../fonts/Lora-Bold.ttf') format('truetype');
    }
    
    @font-face {
        font-family: 'LoraSemiBold';
        src: url('../fonts/Lora-SemiBold.ttf') format('truetype');
    }
    
    @font-face {
        font-family: 'Inter';
        src: url('../fonts/Inter-Regular.ttf') format('truetype');
    }
    
    @font-face {
        font-family: 'InterBold';
        src: url('../fonts/Inter-Bold.ttf') format('truetype');
    }
    
    @font-face {
        font-family: 'InterSemiBold';
        src: url('../fonts/Inter-SemiBold.ttf') format('truetype');
    }
    
    html,
    body {
        height: 100%;
        overflow: hidden;
        font-family: 'Inter' !important;
        font-size: .92rem;
    }
    
    html.aviso,
    body.aviso {
        height: inherit;
        overflow: inherit;
        font-family: 'Inter' !important;
        font-size: .92rem;
    }
    
    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        font-family: 'LoraBold';
    }
    
    h1 {
        font-size: 22px;
    }
    
    .text-bold {
        font-family: 'InterSemiBold';
    }
    
    .text-bolder {
        font-family: 'InterBold';
    }
    
    .small,
    small {
        font-size: .8em;
    }
    
    .logo {
        width: 180px;
    }
    
    .logoAyto {
        width: 70px;
    }
    
    #intro {
        color: white;
    }
    
    .intro-escritorio {
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: -1px 0px 12px #ccc;
        position: absolute;
        top: 0;
        height: 100%;
        display: block;
        padding: 3% 10rem;
        color: #223c81 !important;
    }
    
    .intro-final {
        background-color: rgba(255, 255, 255, 0.9);
        box-shadow: -1px 0px 12px #ccc;
        position: absolute;
        top: 0;
        height: 100%;
        display: block;
        padding: 3% 6rem;
        color: #223c81 !important;
    }
    
    .text-primary {
        color: #223c81 !important;
    }
    
    .popover {
        font-family: 'Inter';
        background-color: #223c81 !important;
        border-radius: 1rem;
        z-index: 1000;
    }
    
    .popover.popover-danger {
        background-color: #dc3545 !important;
    }
    
    .popoverHelp {
        z-index: 1090;
    }
    
    .popover-header {
        border-top-left-radius: calc(1rem - 1px);
        border-top-right-radius: calc(1rem - 1px);
        font-size: 1.25rem;
    }
    
    .popover-body {
        color: white !important;
    }
    
    .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after,
    .bs-popover-end>.popover-arrow::after {
        border-right-color: #223c81 !important;
    }
    
    .bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after,
    .bs-popover-start>.popover-arrow::after {
        border-left-color: #223c81 !important;
    }
    
    .popover-danger>.popover-arrow::after,
    .popover-danger>.popover-arrow::after {
        border-right-color: red !important;
    }
    
    .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after,
    .bs-popover-top>.popover-arrow::after {
        border-top-color: #223c81;
    }
    
    .intro #box-icon {
        visibility: hidden;
    }
    
    .intro.aviso #box-icon {
        visibility: visible;
    }
    /* header {
    position: absolute;
    z-index: 10;
    width: 100%;
} */
    
    header i {
        cursor: pointer;
    }
    
    .navbar {
        position: absolute;
        width: 100%;
        z-index: 999;
    }
    
    #box-icon #volver {
        display: none;
    }
    
    #final #box-icon #volver,
    .aviso #box-icon #volver {
        display: inline-block;
    }
    
    #final #box-icon #enviarComentario {
        display: none;
    }
    
    .bg-none {
        background: none;
    }
    
    .bg-home {
        height: 100%;
        background: url('../img/home-escritorio.png');
        background-position: 0, 0;
        background-repeat: no-repeat;
    }
    
    .bg-yellow {
        background-color: #ffe299;
    }
    
    .desc-bold {
        font-family: 'InterSemiBold';
    }
    
    #escenario {
        height: 100vh;
    }
    
    .btn {
        font-size: .92rem;
    }
    
    .btn-primary {
        color: #fff;
        background-color: #223c81;
        border-color: #223c81;
        border: 2px solid #223c81;
        border-radius: 2rem;
        padding: .375rem 2rem;
        -webkit-box-shadow: 5px 5px 6px -4px rgb(0 0 0 / 70%);
        box-shadow: 5px 5px 6px -4px rgb(0 0 0 / 70%);
        transition: all .3s;
    }
    
    .btn-primary:hover,
    .btn-primary:active,
    .btn-primary:focus {
        background-color: #19306d;
        border-color: #19306d;
    }
    
    .btn-outline-primary {
        color: #223c81;
        background-color: #ffffff;
        border-color: #223c81;
        border: 2px solid;
        border-radius: 2rem;
        padding: .375rem 2rem;
        -webkit-box-shadow: 5px 5px 6px -4px rgb(0 0 0 / 70%);
        box-shadow: 5px 5px 6px -4px rgb(0 0 0 / 70%);
        transition: all .3s;
    }
    
    .btn-outline-primary.separate {
        margin-right: 1rem !important;
    }
    
    .btn-outline-primary:hover,
    .btn-outline-primary:active,
    .btn-outline-primary:focus {
        background-color: #223c81;
        border-color: #223c81;
        color: white;
    }
    
    .btn-success {
        color: #fff;
        background-color: #198754;
        border-color: #198754;
        border: 2px solid #198754;
        border-radius: 2rem;
        padding: .375rem 2rem;
        -webkit-box-shadow: 5px 5px 6px -4px rgb(0 0 0 / 70%);
        box-shadow: 5px 5px 6px -4px rgb(0 0 0 / 70%);
        transition: all .3s;
    }
    
    .btn-success:hover,
    .btn-success:active,
    .btn-success:focus {
        background-color: #157347;
        border-color: #157347;
    }
    
    .btn {
        cursor: pointer;
        transition: all .3s;
    }
    
    .btn:hover,
    .btn:active {
        transform: scale(1.2);
    }
    
    .footer {
        position: absolute;
        bottom: 1%;
    }
    
    .footer a {
        color: white;
        margin: 1rem;
    }
    
    .footer a,
    .footer p {
        font-size: .8rem;
    }
    
    .content {
        margin-top: 6rem;
    }
    /***** FRUTERIA *****/
    
    #fruteria {
        background: url('../img/fruteria/fondo_escritorio.png');
    }
    
    #pescaderia {
        background: url('../img/pescaderia/fondo_escritorio.png');
    }
    
    #carniceria {
        background: url('../img/carniceria/fondo_escritorio.png');
    }
    
    #panaderia {
        background: url('../img/panaderia/fondo_escritorio.png');
    }
    
    #fruteria,
    #pescaderia,
    #carniceria,
    #panaderia {
        background-size: cover;
        background-position: 50% 0;
        background-repeat: no-repeat;
        height: 100%;
    }
    
    #div-presupuesto {
        margin-top: 6rem;
        margin-bottom: 4rem;
        border: 3px solid #213c81;
        color: #213c81;
        border-radius: 1rem;
    }
    
    .fila1,
    .fila2 {
        z-index: 2;
    }
    
    .producto {
        cursor: pointer;
        transition: all .3s;
    }
    
    .producto:hover,
    .producto:active {
        transform: scale(1.3);
    }
    
    .producto.selected {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
    }
    
    #mostrarPersonaje-fruteria,
    #mostrarPersonaje-carniceria,
    #mostrarPersonaje-pescaderia,
    #mostrarPersonaje-panaderia {
        position: absolute;
        bottom: 20%;
        /* left: 8%; */
    }
    
    .personaje {
        width: 45%;
        margin-left: 1rem;
    }
    
    .bocadillo {
        background-color: rgba(255, 255, 255, 0);
        width: 5px;
        height: 5px;
        position: absolute;
        top: 40%;
        left: 25%;
    }
    
    #mostrarPista {
        cursor: pointer;
    }
    
    .pistaText {
        text-decoration: underline;
    }
    /* STEPS STYLE
-------------------------------------------------- */
    
    #menuInferior {
        position: absolute;
        bottom: 1%;
        width: 100%;
    }
    
    .nav-item {
        width: 5%;
        z-index: 1;
    }
    
    #menuInferior .nav {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        align-content: center;
        justify-content: center;
    }
    
    #menuInferior h3 {
        margin-top: 10px;
    }
    /* #menuInferior button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}
 */
    
    #menuInferior img:not(.disabled) {
        cursor: pointer;
        transition: all .3s;
    }
    
    #menuInferior img:not(.disabled):hover,
    #menuInferior img:not(.disabled):active {
        transform: scale(1.3);
    }
    
    #menuInferior img.disabled,
    #menuInferior img:disabled {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
        cursor: default;
    }
    
    #menuInferior img.active {
        transform: scale(1.3);
    }
    
    .modal {
        animation-duration: .3s;
    }
    
    .modal-content {
        color: #223c81 !important;
    }
    
    .modal-header {
        border-bottom: 1px solid #223c81;
        padding: 0 0 .5rem;
        margin: 1rem 1.5rem .5rem;
    }
    
    #modalFinal-fruteria .modal-header,
    #modalFinal-pescaderia .modal-header,
    #modalFinal-carniceria .modal-header,
    #modalFinal-panaderia .modal-header {
        border: 0;
        padding: 1.5rem 1rem 4.5rem;
    }
    
    #modalFinal-fruteria .modal-footer,
    #modalFinal-pescaderia .modal-footer,
    #modalFinal-carniceria .modal-footer,
    #modalFinal-panaderia .modal-footer {
        border: 0
    }
    
    #modalFinal-fruteria .modal-content {
        background-image: url(../img/fruteria/enhorabuena.png);
    }
    
    #modalFinal-pescaderia .modal-content {
        background-image: url(../img/pescaderia/enhorabuena.png);
    }
    
    #modalFinal-carniceria .modal-content {
        background-image: url(../img/carniceria/enhorabuena.png);
    }
    
    #modalFinal-panaderia .modal-content {
        background-image: url(../img/panaderia/enhorabuena.png);
    }
    
    #modalFinal-fruteria .modal-content,
    #modalFinal-pescaderia .modal-content,
    #modalFinal-carniceria .modal-content,
    #modalFinal-panaderia .modal-content {
        background-color: #fff0 !important;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 70vh;
        border: none;
    }
    
    #modalFinal-fruteria .modal-body,
    #modalFinal-pescaderia .modal-body,
    #modalFinal-carniceria .modal-body,
    #modalFinal-panaderia .modal-body {
        padding-bottom: 0;
    }
    
    .modal-body {
        padding: 0 1.5rem 1rem;
    }
    
    .modal-backdrop {
        opacity: 0.8 !important;
    }
    /* .modal-header h5 {
    font-family: 'LoraSemiBold';
}
 */
    
    .select-opcion {
        background-clip: border-box;
        border-radius: 0;
        padding: .5rem 0;
    }
    
    .select-opcion img {
        width: 35%;
    }
    
    .select-opcion.selected {
        background-color: rgba(0, 0, 0, .1);
    }
    
    .modal-content h5 {
        font-family: 'InterSemiBold';
    }
    
    .select-opcion h5 {
        font-family: 'Inter';
    }
    
    .modal-body p {
        font-family: 'InterSemiBold';
    }
    
    .modal-body p.dato {
        font-family: 'Inter';
    }
    
    .modal-content p small {
        font-family: 'Inter';
    }
    
    .info-product {
        position: absolute;
        margin-top: .55rem;
        font-size: 1.6rem !important;
        cursor: pointer;
    }
    
    .popoverProduct {
        z-index: 1100;
    }
    /******* modales *******/
    
    .modal {
        z-index: 1090;
    }
    
    .progress {
        height: 5px;
        width: 100%;
        margin: 0 0 .7rem auto;
    }
    
    .animated.pulse {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
    }
    
    .animated.tada {
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
    }
    
    .star-rating {
        font-size: 2em;
        color: rgb(255, 208, 0);
    }
    
    .star-rating span {
        cursor: pointer;
    }
    /***** PANTALLA FINAL *****/
    
    .bg-final {
        height: 100%;
        background: url('../img/fondo_final_escritorio.png');
        background-size: cover;
        background-position: 50% 0;
        background-repeat: no-repeat;
    }
    
    #banner {
        position: absolute;
        bottom: 0;
        left: 0;
        background: url('../img/fondo_azul_escritorio.png');
        background-size: cover;
        background-position: 0;
        background-repeat: no-repeat;
    }
    
    .check {
        width: 50px;
    }
    
    .line {
        border-top: 1px solid #19306d;
        padding-left: .25rem!important;
        padding-right: .25rem!important;
        display: flex;
        align-items: center;
    }
    
    .line:last-child {
        border-bottom: 1px solid #19306d;
    }
    
    .line.last {
        border-bottom: 1px solid #19306d;
    }
    
    .check {
        width: 40px;
        display: inline-block;
        margin-right: .5rem;
    }
    
    .bg-final #title p {
        width: 100%;
        font-size: 1rem !important;
    }
    
    .bg-final p {
        font-weight: bold;
        font-family: 'Lora-SemiBold';
        display: inline-block;
        font-size: .9rem;
        width: calc(100% - 50px);
    }
    
    @media only screen and (min-width: 1680px) {
        body,
        .popover {
            font-size: 1.1rem;
        }
        .select-opcion p {
            font-size: .9rem;
        }
        h1 {
            font-size: 3.1rem;
            margin-bottom: 2.5rem;
        }
        .intro-escritorio h1 {
            font-size: 4rem;
        }
        .intro-escritorio p,
        .intro-final p {
            font-size: 1.4rem;
            line-height: 1.7;
        }
        .intro-escritorio .btn {
            font-size: 1.7rem;
            padding: .5rem 3.5rem;
        }
        .intro-final .btn {
            font-size: 1.5rem;
            padding: .5rem 2rem;
        }
        .logo {
            width: 300px;
        }
        .logoAyto {
            width: 90px;
        }
        #div-presupuesto {
            margin-top: 8rem;
        }
        .fila1.onerow {
            margin-top: 7rem !important;
        }
        .fila1,
        .fila2 {
            width: 43%;
        }
        .fila1 {
            margin-top: 6rem !important;
        }
        .fila2 {
            margin-top: 1rem !important;
        }
        #modalFinal-fruteria .modal-dialog,
        #modalFinal-carniceria .modal-dialog,
        #modalFinal-pescaderia .modal-dialog,
        #modalFinal-panaderia .modal-dialog {
            max-width: 550px;
        }
    }
    
    @media only screen and (min-width: 1024px) and (max-width: 1679px) {
        .logo {
            width: 220px;
        }
        .bg-home {
            background: url('../img/home-escritorio.png');
            background-size: cover;
            background-position: 0;
            background-repeat: no-repeat;
        }
        .intro-escritorio {
            padding: 3% 5rem;
        }
        .intro-escritorio h1 {
            font-size: 3.5rem;
        }
        .intro-escritorio p {
            font-size: 1.3rem;
        }
        .intro-escritorio .btn {
            font-size: 1.5rem;
            padding: .5rem 3.5rem;
        }
        .intro-final {
            padding: 3% 2rem;
        }
        .intro-final h2 {
            font-size: 1.7rem;
        }
        .intro-final p {
            font-size: 1.3rem;
        }
        .intro-final .btn {
            font-size: 1.5rem;
            padding: .5rem 3.5rem;
        }
        #div-presupuesto {
            margin-top: 5rem;
            margin-bottom: 4.5rem;
        }
        .fila1,
        .fila2 {
            width: 50%;
        }
        .personaje {
            width: 25%;
            margin-left: 1rem;
        }
        .bocadillo {
            left: 12%;
        }
        .nav-item {
            width: 6%;
        }
    }
    
    @media only screen and (min-width: 1500px) and (max-width: 1680px) {
        .fila1,
        .fila2 {
            width: 43%;
        }
        .fila1.mt-5 {
            margin-top: 5rem!important;
        }
        .nav-item {
            width: 6%;
        }
        .bg-final #title {
            margin-top: 2rem !important;
        }
        .modal-dialog {
            max-width: 450px !important;
        }
    }
    
    @media only screen and (width: 1440px) and (height: 789px) {
        .logo {
            width: 225px;
        }
        .fila1,
        .fila2 {
            width: 43%;
        }
        .fila1 {
            margin-top: 1.5rem !important;
        }
        .fila1.onerow {
            margin-top: 3.5rem !important;
        }
    }
    
    @media only screen and (width: 1024px) and (height: 768px) {
        .fila1,
        .fila2 {
            width: 60%;
        }
        .fila1 {
            margin-top: 1rem !important;
        }
    }
    
    @media only screen and (min-width: 1024px) {
        #box-icon {
            margin-right: 4rem;
        }
        #box-icon i {
            font-size: 3rem;
        }
        .modal-dialog {
            max-width: 750px;
        }
        .modal-content h5.modal-title {
            font-size: 1.5rem;
        }
        #modalFinal-fruteria .modal-dialog,
        #modalFinal-pescaderia .modal-dialog,
        #modalFinal-carniceria .modal-dialog,
        #modalFinal-panaderia .modal-dialog {
            max-width: 520px !important;
        }
        .select-opcion {
            padding-top: 1rem !important;
            padding-bottom: 1rem !important;
        }
        .select-opcion img {
            margin: 1.5rem auto 2rem;
            width: 50%;
        }
        .row .select-opcion:last-child {
            padding-left: 1.2rem !important;
        }
        .progress {
            margin: 0 0 1rem auto !important;
            height: 10px;
        }
        .btn-select-fruta {
            margin-top: 2rem;
        }
    }
    
    @media only screen and (min-width: 1365px) and (max-width: 1367px) {
        #box-icon i {
            font-size: 2.5rem;
        }
        .fila1,
        .fila2 {
            width: 45%;
        }
        .fila1 {
            margin-top: 1rem !important;
        }
        .bg-final {
            height: 100%;
            background: url(../img/fondo_final_escritorio.png);
            background-size: cover;
            background-position: 0 25%;
            background-repeat: no-repeat;
        }
        .intro-final .col-12 {
            padding-top: 0 !important;
        }
        .intro-final .col-12 div {
            margin-top: 0 !important;
        }
        .intro-final h2 {
            font-size: 1.5rem;
        }
        .intro-final p {
            font-size: 1.1rem;
        }
        .intro-final .btn {
            font-size: 1rem;
        }
        .check {
            width: 30px;
        }
        #modalFinal-fruteria .modal-dialog,
        #modalFinal-pescaderia .modal-dialog,
        #modalFinal-carniceria .modal-dialog,
        #modalFinal-panaderia .modal-dialog {
            max-width: 420px !important;
        }
        #modalFinal-fruteria .modal-body .col-12.px-5,
        #modalFinal-pescaderia .modal-body .col-12.px-5,
        #modalFinal-carniceria .modal-body .col-12.px-5,
        #modalFinal-panaderia .modal-body .col-12.px-5 {
            padding-left: 0rem !important;
            padding-right: 0rem !important;
        }
        .nav-item {
            width: 5.5%;
        }
    }
    
    @media only screen and (max-width: 1023px) {
        .fila1,
        .fila2 {
            width: 75%;
        }
        .bg-home {
            background: url('../img/home.png');
            background-size: cover;
            background-position: 50%, 0;
            background-repeat: no-repeat;
        }
        .bg-final {
            height: 100%;
            background: url('../img/fondo_final.png');
            background-size: cover;
            background-position: 50%, 0;
            background-repeat: no-repeat;
        }
        #fruteria {
            background: url('../img/fruteria/fondo.png');
        }
        #pescaderia {
            background: url('../img/pescaderia/fondo.png');
        }
        #carniceria {
            background: url('../img/carniceria/fondo.png');
        }
        #panaderia {
            background: url('../img/panaderia/fondo.png');
        }
        #fruteria,
        #pescaderia,
        #carniceria,
        #panaderia {
            background-size: 100% 100%;
            background-position: 0, 0;
            background-repeat: no-repeat;
        }
        .nav-item {
            width: 17%;
            z-index: 1;
        }
        .check {
            width: 25px;
            display: inline-block;
        }
        .bg-final p {
            font-weight: bold;
            font-family: 'Lora-SemiBold';
            display: inline-block;
            font-size: .9rem;
            width: calc(100% - 30px);
        }
        #banner {
            position: absolute;
            bottom: 0;
            background: url('../img/fondo_azul.png');
            background-size: cover;
            background-position: 0;
            background-repeat: no-repeat;
        }
    }
    
    @media only screen and (min-width: 768px) {
        .select-opcion:first-child {
            border-right: 1px solid #213c81;
        }
        .select-opcion {
            padding: .5rem;
        }
    }
    
    @media only screen and (max-width: 767px) {
        #box-icon i {
            font-size: 2rem;
        }
        .info-presupuesto {
            position: absolute;
            right: 5%;
            margin-top: 2.1%;
        }
        .modal-content h5.modal-title {
            font-size: 1.3rem;
        }
        .select-opcion:first-child {
            border-bottom: 1px solid #213c81;
            margin-bottom: .5rem;
        }
        /*  .select-opcion:last-child {
        padding: 0;
    } */
        .popover {
            max-width: 65%;
        }
        #intro h1 {
            margin-bottom: .8rem !important;
        }
    }
    
    @media only screen and (max-width: 375px) {
        .bg-final h6 {
            font-size: 1.1rem;
        }
        .bg-final #title {
            padding-left: 1.1rem !important;
            padding-right: 1.1rem !important;
            padding-top: 3.5rem !important;
        }
        .fila1.mt-5 {
            margin-top: 0rem !important;
        }
        #intro h1 {
            margin-bottom: .5rem !important;
        }
    }
    
    @media only screen and (device-width: 411px) and (device-height: 823px) {
        #div-presupuesto {
            margin-top: 7rem;
        }
    }
    
    @media only screen and (max-device-height: 670px) {
        #banner h5,
        #banner h6 {
            display: none;
        }
        #banner div.mt-3 {
            margin-top: 0 !important;
        }
        .footer {
            display: none;
        }
    }
    
    @media only screen and (max-height: 660px) {
        .fila1.mt-5 {
            margin-top: 1.5rem!important;
        }
        .bg-final {
            height: 100%;
            background: url('../img/fondo_final_small.png');
            background-size: cover;
            background-position: 50%, 0;
            background-repeat: no-repeat;
        }
        #banner h5,
        #banner h6 {
            display: none;
        }
        #banner div.mt-3 {
            margin-top: 0 !important;
        }
        .footer {
            display: none;
        }
    }
    /* Correcciones margenes para moviles < 640 */
    
    @media only screen and (max-device-height: 640px) {
        .modal-content h5.modal-title {
            font-size: 1.3rem;
        }
        .logo {
            width: 145px;
        }
        #intro>div {
            padding-bottom: 1rem !important;
        }
        .fila1.mt-5 {
            margin-top: 0 !important;
        }
        #mostrarPersonaje-fruteria,
        #mostrarPersonaje-carniceria,
        #mostrarPersonaje-pescaderia,
        #mostrarPersonaje-panaderia {
            bottom: 16%;
        }
        .bg-final p {
            line-height: 1.1;
        }
        #div-presupuesto {
            margin-top: 4rem;
            margin-bottom: 4rem;
        }
    }
    /**** CORRECCIONES MOVILES PEQUEÑOS BROWSER XIAOMI ****/
    
    @media only screen and (max-height: 600px) {
        #div-presupuesto {
            margin-top: 5rem !important;
            margin-bottom: 2rem !important;
        }
        .fila1.mt-5 {
            margin-top: 1.5rem !important;
        }
        .bg-final {
            height: 100%;
            background: url('../img/fondo_final_small.png');
            background-size: cover;
            background-position: 50%, 0;
            background-repeat: no-repeat;
        }
        .intro-final div #title {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
            padding: 1rem !important;
        }
        #banner h5,
        #banner h6 {
            display: none;
        }
        #banner div.mt-3 {
            margin-top: 0 !important;
        }
        .footer {
            display: none;
        }
    }
    /* Portrait */
    
    @media only screen and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
        .nav-item {
            width: 12%;
            z-index: 1;
        }
        .fila1,
        .fila2 {
            width: 65%;
        }
        .fila1.fila1.mt-5 {
            margin-top: 6rem !important;
        }
        #div-presupuesto {
            margin-top: 9rem;
            margin-bottom: 2rem;
        }
        .personaje {
            width: 40%;
        }
        .bg-final #title {
            padding-left: 8rem !important;
            padding-right: 8rem !important;
        }
        .bg-final h6 {
            font-size: 1.6rem !important;
        }
        .bg-final p {
            font-size: 1.3rem;
        }
    }
    /* Landscape */
    
    @media only screen and (min-device-width: 768px) and (max-device-height: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
        .bg-final {
            height: 100%;
            background: url(../img/fondo_final_escritorio.png);
            background-size: cover;
            background-position: 0 0;
            background-repeat: no-repeat;
        }
        .intro-final h2 {
            font-size: 1.6rem !important;
        }
        .intro-final p {
            font-size: 1.2rem !important;
        }
        .intro-final {
            padding: 3% 0rem;
        }
        .intro-final .btn {
            font-size: 1.1rem;
        }
        #modalFinal-fruteria .modal-dialog,
        #modalFinal-pescaderia .modal-dialog,
        #modalFinal-carniceria .modal-dialog,
        #modalFinal-panaderia .modal-dialog {
            max-width: 490px !important;
        }
    }
    /* Portrait iphone  6/7/8 */
    
    @media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
        #mostrarPersonaje-fruteria,
        #mostrarPersonaje-carniceria,
        #mostrarPersonaje-pescaderia,
        #mostrarPersonaje-panaderia {
            bottom: 14%;
        }
        .bg-final {
            height: 100%;
            background: url('../img/fondo_final_small.png');
            background-size: cover;
            background-position: 50%, 0;
            background-repeat: no-repeat;
        }
        .bg-final #title {
            margin-top: 0 !important;
            padding-left: 1.8rem !important;
            padding-right: 1.8rem !important;
        }
    }
    /***** IPHONE 5 ****/
    
    @media (device-width: 320px) and (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
        #mostrarPersonaje-fruteria,
        #mostrarPersonaje-carniceria,
        #mostrarPersonaje-pescaderia,
        #mostrarPersonaje-panaderia {
            bottom: 14%;
        }
        .bg-final {
            height: 100%;
            background: url('../img/fondo_final_small.png');
            background-size: cover;
            background-position: 50%, 0;
            background-repeat: no-repeat;
        }
        .bg-final #title {
            margin-top: 0 !important;
            padding-left: 1.8rem !important;
            padding-right: 1.8rem !important;
        }
    }
    
    @media only screen and (max-height: 560px) {
        #div-presupuesto {
            margin-top: 4rem;
            margin-bottom: 4rem;
        }
        .fila1.mt-5 {
            margin-top: 1rem !important;
        }
        .bg-final #title {
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
            padding-top: .5rem !important;
        }
    }
    
    @media only screen and (max-height: 510px) {
        #div-presupuesto {
            margin-top: 3.5rem !important;
            margin-bottom: 2rem !important;
        }
        .bg-final #title {
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
            padding-top: 0rem !important;
        }
    }
    /*** LOADER ***/
    /* Loader 
-------------------------------------------------- */
    
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: white;
    }
    
    .sk-spinner {
        width: 45px !important;
        height: 45px !important;
        position: absolute;
        top: 45%;
    }
    
    .sk-spinner-circle.sk-spinner {
        margin: 0 auto;
        width: 22px;
        height: 22px;
        position: relative;
    }
    
    .sk-spinner-circle .sk-circle {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .sk-spinner-circle .sk-circle:before {
        content: '';
        display: block;
        margin: 0 auto;
        width: 20%;
        height: 20%;
        background-color: #213c81;
        border-radius: 100%;
        -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
        animation: sk-circleBounceDelay 1.2s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    .sk-spinner-circle .sk-circle2 {
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    
    .sk-spinner-circle .sk-circle3 {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    
    .sk-spinner-circle .sk-circle4 {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    
    .sk-spinner-circle .sk-circle5 {
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }
    
    .sk-spinner-circle .sk-circle6 {
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }
    
    .sk-spinner-circle .sk-circle7 {
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .sk-spinner-circle .sk-circle8 {
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }
    
    .sk-spinner-circle .sk-circle9 {
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }
    
    .sk-spinner-circle .sk-circle10 {
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }
    
    .sk-spinner-circle .sk-circle11 {
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }
    
    .sk-spinner-circle .sk-circle12 {
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }
    
    .sk-spinner-circle .sk-circle2:before {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }
    
    .sk-spinner-circle .sk-circle3:before {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
    }
    
    .sk-spinner-circle .sk-circle4:before {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }
    
    .sk-spinner-circle .sk-circle5:before {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }
    
    .sk-spinner-circle .sk-circle6:before {
        -webkit-animation-delay: -0.7s;
        animation-delay: -0.7s;
    }
    
    .sk-spinner-circle .sk-circle7:before {
        -webkit-animation-delay: -0.6s;
        animation-delay: -0.6s;
    }
    
    .sk-spinner-circle .sk-circle8:before {
        -webkit-animation-delay: -0.5s;
        animation-delay: -0.5s;
    }
    
    .sk-spinner-circle .sk-circle9:before {
        -webkit-animation-delay: -0.4s;
        animation-delay: -0.4s;
    }
    
    .sk-spinner-circle .sk-circle10:before {
        -webkit-animation-delay: -0.3s;
        animation-delay: -0.3s;
    }
    
    .sk-spinner-circle .sk-circle11:before {
        -webkit-animation-delay: -0.2s;
        animation-delay: -0.2s;
    }
    
    .sk-spinner-circle .sk-circle12:before {
        -webkit-animation-delay: -0.1s;
        animation-delay: -0.1s;
    }
    
    @-webkit-keyframes sk-circleBounceDelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    
    @keyframes sk-circleBounceDelay {
        0%,
        80%,
        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        40% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }