* {box-sizing: border-box;}
    html {
        background: white;
        font-size: 18px;
        height: 100%;
        scroll-behavior: smooth;
    }
    h1 {
        font-size: 40px;
    }
    a {
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
    }
    img {
    }
    a, button, input[type="submit"], input[type="reset"] {
	    background: none;
	    color: inherit;
	    border: none;
	    padding: 0;
	    font: inherit;
	    cursor: pointer;
	    outline: inherit;
      -webkit-touch-callout: none;
        -webkit-user-select: none;
         -khtml-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }
    :focus {
    }
    .corners {
        display: flex;
        justify-content: space-between;
        width: 100%;
        position:absolute;
        pointer-events: none;
    }
    .corners img {
        width:140px;
        height:140px;
        opacity: 0.5;
        pointer-events: none;
    }
    .papel1 {
        background-color: #e8e0e0;
        background-image: url("../img/fondo_papel1.png?ver1");
        background-size: 150%;
        background-size: 500px;
        background-repeat: repeat;
    }
    .papel2 {
        background-color: #7a4;
        background-image: url("../img/fondo_papel2.png?ver1");
        background-size: 150%;
        background-size: 500px;
        background-repeat: repeat;
        background-position: bottom;
    }
    .papel3 {
        background-color: #8a4;
        background-image: url("../img/fondo_papel3.png?ver1");
        background-size: 150%;
        background-size: 500px;
        background-repeat: repeat;
    }
    .papel5 {
        background-color: #8a4;
        background-image: url("../img/fondo_papel5.png?ver1");
        background-size: 150%;
        background-size: 500px;
        background-repeat: repeat;
    }
    .papel6 {
        background-color: #8a4;
        background-image: url("../img/fondo_papel6.png?ver1");
        background-size: 150%;
        background-size: 500px;
        background-repeat: repeat;
    }
    .papel7 {
        background-color: #8a4;
        background-image: url("../img/fondo_papel7.png?ver1");
        background-size: 150%;
        background-size: 500px;
        background-repeat: repeat;
    }
    body {
        font-family:Tahoma, Arial, Helvetica, sans-serif;
        max-width: 450px;
        max-width: 600px;
        margin: auto;
        min-height: 100vh;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        color: #222;
    }
    .body-productos {
        max-width: 800px;
    }
    main {
        flex: 1;
        position:relative;
        width: 100%;
        margin: 0px;
        padding-top: 0px;
        padding-bottom: 50px;
    }
    main h1 {
        padding: 5px 10px;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 45px;
        padding-bottom: 30px;
        text-align: center;
    }
    main .texto-centrado {
        margin: 30px 0px 70px 0px;
        text-align: center;
    }
    a.btn-link {
	    padding: 8px 12px;
	    border-radius: 5px;
	    cursor: pointer;
	    font-size: 16px;
    }
    a.btn-link i {
        margin-right: 10px;
    }
    a.btn-link.azul {
	    background-color: rgb(25,118,210);
	    color: white;
    }
    a.btn-link.verde {
	    background-color: rgb(10,150,40);
	    color: white;
    }
    a.btn-link.verde:hover {
	    background-color: rgb(0,120,20);
    }
    a.btn-link.rojo {
	    background-color: rgb(160,20,20);
	    color: white;
    }
    a.btn-link.rojo:hover {
	    background-color: rgb(130,0,0);
    }
    a.btn-link.gris {
	    background-color: rgb(160,190,230);
	    color: #123;
    }
    a.btn-link.gris:hover {
	    background-color: rgb(140,170,210);
    }
    a.btn-link.dimed {
	    background-color: rgba(150,150,150,0.3);
	    color: rgba(0,0,0,0.3);
    }
    .instructivo {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 50px;
        background: white;
        box-shadow: 5px 5px 5px rgba(0,0,0,0.2);
        padding: 0;
    }
    .instructivo div {
        padding: 15px;
        padding-left: 10px;
    }
    .instructivo h1 {
        margin: 0 0;
        padding: 20px 0;
        font-size: 27px;
        background: rgba(155, 40, 20, 0.5);
        background: rgba(100, 155, 0, 0.7);
    }
    .instructivo aside {
        display: flex;
        margin: 15px 0;
    }
    .instructivo span {
        padding-top: 4px;
        flex: 0 0 50px;
        display: flex;
        justify-content: center;
        font-size: 27px;
        color: rgb(155, 40, 20);
    }
    .instructivo summary {
        margin: 0;
        margin-left: 10px;
        padding-bottom: 15px;
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    .instructivo summary ul {
        margin-top: 20px;
        margin-bottom: 0;
    }
    .instructivo pre {
        margin: 0;
        margin-left: 7px;
        margin-top: 15px;
        color: #555;
        font-size: 17px;
    }
    .instructivo hr {
        margin: 0;
        margin-bottom: 20px;
        border: none;
        border-top: 1px solid rgba(0,0,0,0.3);
    }
    .infoline_formulario {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 9px 15px;
        box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
        font-size: 18px;
    }
    .infoline_formulario>i {
        padding-right: 15px;
    }
    .infoline_formulario span {
        flex: 1;
        display: block;
        padding: 3px 0px;
    }
    .infoline_formulario a {
        cursor: pointer;
        font-size: 15px;
        padding: 5px;
        color: rgba(0,0,0,0.4);
    }
    .infoline_formulario a:hover {
        color: black;
    }
    .infoline_formulario.red {
        border-top: solid 4px #E22;
        background-color: #FCC;
    }
    .infoline_formulario.red>i {
        color: #C22;
        font-size: 22px;
    }
    .infoline_formulario.green {
        border-top: solid 4px #2B2;
        background-color: #CFC;
        color: #040;
    }
    .infoline_formulario.green>i {
        color: #2A2;
    }
    .infoline_formulario.blue {
        border-top: solid 4px #27B;
        background-color: #CEF;
        color: #024;
    }
    .infoline_formulario.blue>i {
        color: #26A;
        font-size: 115%;
    }
    .tienda_infoline {
        margin: 0;
        margin-top:15px;
        margin-bottom: 15px;
        padding: 10px 20px;
    }
    .tienda_infoline.red {
        border: solid 4px #E22;
        background-color: #FCC;
    }
    .tienda_infoline.green {
        border: solid 4px #2B2;
        background-color: #CFC;
        color: #040;
    }
    body.login {
        position:relative;
    }
    .login .vignette {
        position:absolute;
        top: 0px;
        left: 0px;
        width:100%;
        height:100%;
        opacity: 0.10;
    }
    .login header {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        padding-bottom: 35px;
    }
    .login main {
        display: flex;
        flex-direction: column;
        max-width: 380px;
        margin: auto;
    }
    .login article {
        padding: 0;
        text-align: center;
        display: inline-block;
        box-shadow: 0 5px 5px rgba(0,0,0,0.2);
        color: #444;
        margin: 0px 30px;
        margin-bottom: 45px;
    }
    .login article.withheader {
        border-radius: 0px 0px 8px 8px;
    }
    .login article.withheader div.header {
        color: white;
        padding: 10px 0;
    }
    .login article.withoutheader {
        border-radius: 8px;
    }
    .login form {
        padding: 10px 35px;
        margin: 0;
    }
    .login section {
        margin: 15px 0px;
    }
    .login b {
        display: block;
        padding-bottom: 10px;
    }
    .login span {
        display: block;
        padding-bottom: 10px;
    }
    .login label {
        display: block;
        font-size: 18px;
    }
    .login input[type=text], .login input[type=password] {
        padding: 5px;
        margin: 5px 0px;
        max-width: 220px;
        border-radius: 8px;
        border: 1px solid #777;
        background: white;
        color: #333;
        font-size: 17px;
    }
    .login input[type=submit] {
        border: 0;
        padding: 6px 20px;
        margin-top: 10px;
        border-radius: 4px;
        color: white;
    }
    .login input[type=submit].entrar {
        background: rgba(155, 40, 20, 1);
    }
    .login input[type=submit].entrar:hover {
        background: rgba(130, 20, 10, 1);
    }
    .login input[type=submit].enviar {
        background: rgba(120, 150, 80, 1);
    }
    .login input[type=submit].enviar:hover {
        background: rgba(70, 100, 30, 1);
    }
    .login a {
        color: #120;
        font-size: 17px;
        margin: 15px 0px;
    }
    .login a:hover {
        text-decoration: underline;
    }
    .login mark {
        display: block;
        padding: 10px 0px;
        background: none;
        color: #B42;
    }
    .modal.cerrado {
        display: none;
    }
    .modal {
        display: flex;
        position: fixed;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: rgba(0, 0, 0, 0.8);
        font-size: 19px;
    }
    .modal article {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #eee;
        width: 300px;
        min-width: 0px;
        padding: 10px 20px;
    }
    .modal article h1 {
        font-size: 30px;
        color: black !important;
        padding: 10px 0px;
        margin: 0;
    }
    .modal article span {
        display: block;
        text-align: center;
        padding: 10px 0px;
    }
    .modal article div {
        display: flex !important;
        justify-content: center;
        width: 100%;
        height: 50px;
        margin: 10px;
        margin-top: 20px;
    }
    .modal article a {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
        flex: 1;
        max-width: 50%;
        background: #bbb;
    }
    .modal a:hover {
        background: #999;
    }
    .modal a.rojo {
        background: #a33;
        color: white;
    }
    .modal a.rojo:hover {
        background: #811;
    }
    .modal a.verde {
        background: #283;
        color: white;
    }
    .modal a.verde:hover {
        background: #162;
    }
    .header1 {
        display: flex;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-color: #e8e0e0;
        background-image: url("../img/header_cielo.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .header1 img {
        height: 250px;
    }
    .ribbon {
        position: absolute;
        z-index: 100;
        right: -82px;
        top: 20px;
    }
    .ribbon article {
        height: 38px;
        width: 240px;
        color: white;
        padding: 3px;
        transform: rotate(45deg);
        box-shadow: -5px 5px 10px rgba(0,0,0,0.6);
    }
    .ribbon section {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid white;
        font-size: 21px;
        letter-spacing: 0px;
        height: 100%;
        width: 100%;
    }
    .ribbon.abierto article{
        background: #070;
        background-image: linear-gradient(to right, #5A3, #040);
    }
    .ribbon.cerrado article{
        background: #800;
        background-image: linear-gradient(to right, #B44, #500);
    }
    .header2 {
        position:relative;
        padding-top: 10px;
    }
    .header2 h1 {
        padding: 5px 10px;
        margin-top: 20px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 20px;
        text-align: center;
    }
    .header2 .vignette {
        position:absolute;
        top: 0px;
        left: 0px;
        width:100%;
        height:100%;
        opacity: 0.10;
    }
    nav {
        position: relative;
        width: 100%;
        height: 60px;
    }
    nav .vignette {
        position:absolute;
        top: 0px;
        width:100%;
        height:100%;
        opacity: 0.10;
    }
    nav div {
        display: flex;
        justify-content: space-between;
        height: 100%;
    }
    nav a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        font-size: 32px;
        opacity: 0.3;
        color: black;
        height: 100%;
    }
    nav .selected {
        opacity: 1;
        color: #fff;
        background: rgba(155, 40, 20, 1);
    }
    .footer1 {
        position:relative;
        background-color: #7a4;
        background-image: url("../img/fondo_papel4.png?ver1");
        background-size: 150%;
        background-size: 600px;
        background-repeat: repeat;
        padding-top: 10px;
        padding-bottom: 20px;
    }
    .footer1 .vignette {
        position:absolute;
        top: 0;
        width:100%;
        height:100%;
        opacity: 0.10;
    }
    .footer1 .notas-al-pie {
        font-size: 19px;
        font-style: italic;
        padding: 0px 25px;
        text-align: justify;
        color: #232;
    }
    .footer1 .notas-al-pie p {
        line-height: 1.1;
    }
    .footer1 .contactos {
        font-size: 17px;
        color: white;
        text-align: center;
        font-style: italic;
    }
    .footer1 .contactos span {
        display: block;
        margin: 20px 0px;
    }
    .footer1 .logout {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0px 25px;
        font-size: 17px;
        color: rgba(30,40,30,0.5);
    }
    .footer1 .logout span {
        padding-right: 10px;
    }
    .footer1 .logout a {
        text-align: right;
    }
    .footer1 .logout a:hover {
        text-decoration: underline;
    }
    .footer2 {
        position:relative;
        background-color: #7a4;
        background-image: url("../img/fondo_papel3.png?ver1");
        background-size: 150%;
        background-size: 600px;
        background-repeat: repeat;
        padding-top: 30px;
        padding-bottom: 50px;
    }
    .footer2 .vignette {
        position:absolute;
        top: 0;
        width:100%;
        height:100%;
        opacity: 0.10;
    }
    .footer3 {
        background: #444;
        color: black;
        padding-top: 30px;
        padding-bottom: 40px;
    }
    footer form {
	    position: relative;
        display: flex;
        justify-content: space-around;
    }
    footer form .boton {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 140px;
        height: 55px;
        text-align: center;
        border-radius: 10px;
        border: 1px solid 555;
    }
    footer .volver {
        font-size: 18px;
        background: #eee;
    }
    footer .guardar {
        font-size: 16px;
        background: #eee;
    }
    footer .guardar i {
        font-size: 30px;
        padding-right: 12px;
        color: #7b0;
    }
    footer .no-guardar {
        font-size: 16px;
        background: rgba(250, 250, 250, 0.4);
        color: #333;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.2);
    }
    footer .no-guardar i {
        font-size: 30px;
        padding-right: 12px;
        color: rgb(155, 40, 20);
    }
    main.productos {
        padding-bottom: 50px;
    }
    .productos .greenBox {
        display: inline-block;
        flex: 0 0 8px;
        background: #8b0;
    }
    .productos .infoBox {
        display: inline-block;
        flex-grow: 1;
        padding-left: 3px;
        padding-right: 2px;
    }
    .productos .color {
        color: rgba(60, 100, 0, 0.85);
        margin-left: 3px;
    }
    .productos h1 {
        position: relative;
        padding: 20px 10px;
        margin: 0;
        margin-top: 50px;
    }
    .productos .contenedorCategoria {
        position:relative;
        padding-top: 50px;
    }
    .productos .total {
        display: inline-block;
        text-align: right;
        padding-right: 7px;
        font-weight: bold;
        border-right: none;
        color: black;
    }
    .productos .total.dimed {
        color: rgba(0,0,0,0.2) !important;
        font-weight: normal !important;
    }
    .productos  a.ajuste {
        min-width: 30px;
        text-align: center;
        padding: 0px 4px;
        font-size: 115%;
        animation: blink-botones-mas-menos 0.4s linear 1;
    }
    .productos a.ajuste:hover {
    }
    .productos .dimed {
        color: rgba(0,0,0,0.3) !important;
    }
    @keyframes blink-botones-mas-menos {
        0%   {background-color: rgba(100, 160, 00, 0.9)}
        100% {background-color: rgba(100, 160, 00, 0)}
    }
    .productos  mark.ajuste {
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 55px;
        padding: 0px 0px;
        padding-top: 3px;
        text-align: center;
        font-weight: bold;
        font-size: inherit;
        border: none;
        color: black;
        background: none;
    }
    .productos button {
        display: inline-block;
        padding: 1px 10px;
        background: #888;
        color: #FFF;
        font-size: 80%;
        font-weight: bold;
        border-radius: 10px;
    }
    .productos .desktop {
        display: none;
        font-size: 18px;
        margin: 0px;
        margin-top: 16px;
        touch-action: manipulation;
        transition: background-color 0.3s ease;
    }
    .productos .desktop.blanco {
        background: white !important;
        box-shadow: 0px 3px 5px rgba(0,0,0,0.20);
    }
    .productos .desktop:hover {
        background: rgba(255,255,255,0.7);
        background: rgba(20,100,0,0.10);
    }
    .productos .desktop .fila1 {
        display: flex;
        align-items: center;
        width: 100%;
        line-height: 1.3;
        padding: 2px 0;
    }
    .productos .desktop .fila1 .producto {
        margin-left: 15px;
    }
    .productos .desktop .fila1 .producto a {
        display: inline;
        margin-right: 5px;
        cursor: help;
    }
    .productos .desktop .fila1 .precios {
        text-align: right;
        min-width: 180px;
        margin-left: auto;
    }
    .productos .desktop .fila1 .precios .total {
        width: 110px;
    }
    .productos .desktop .detalles {
        padding-left: 130px;
    }
    .productos .moviles {
        background: white;
        box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
        display: flex;
        font-size: 18px;
        margin: 0px;
        margin-top: 20px;
        touch-action: manipulation;
        transition: background-color 0.3s ease;
    }
    .productos .moviles.cerrado {
        box-shadow: none;
        background: none;
    }
    .productos .moviles .fila1 {
        display: flex;
        align-items: flex-start;
        padding: 4px 2px;
    }
    .productos .moviles.cerrado .fila1 .color {
        display: inline;
    }
    .productos .moviles .fila1 .color {
        display: none;
    }
    .productos .moviles .fila1>div {
        flex-grow: 1;
    }
    .productos .moviles .fila1 a {
        display: inline;
        margin-right: 5px;
        text-align: left;
    }
    .productos .moviles .fila1>span {
        padding-left: 10px;
    }
    .productos .moviles.cerrado button {
        display: none;
    }
    .productos .moviles.cerrado .fila2 {
        display: none;
    }
    .productos .moviles .fila2 {
        display: flex;
        line-height: 1.3;
    }
    .productos .moviles .fila2 span {
        padding: 2px 0px;
        text-align: right;
    }
    .productos .detalles  {
        padding: 10px 5px;
        padding-left: 15px;
        color: #580;
    }
    .productos .detalles b {
        color: #333;
        display: block;
        padding-top: 5px;
    }
    .productos .detalles span {
        color: #555;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 2px;
        padding-bottom: 5px;
        padding-left: 20px;
    }
    .productos .detalles img {
        margin-right: 15px;
        margin-bottom: 10px;
        border: 1px solid #555;
    }
    .productos button.scroll {
        display: none;
        position: fixed;
        right: 10px;
        z-index: 99;
        border: none;
        outline: none;
        background: rgb(25,118,210);
        background: #333;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 10px;
        font-size: 18px;
    }
    main.home {
        padding-bottom: 70px;
    }
    .secciones .contenedor {
        position:relative;
        display: flex;
        margin: 0px;
        margin-bottom: 20px;
        padding-right: 7px;
    }
    .secciones .colorBox {
        display: inline-block;
        flex: 0 0 10px;
    }
    .secciones .colorBox.on {
        background: rgb(155, 40, 20);
    }
    .secciones .colorBox.off {
        background: rgba(0, 0, 0, 0.4);
    }
    .secciones .infobox {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-grow: 1;
        padding: 5px 0px;
        padding-left: 5px;
    }
    .secciones .infobox.total {
        border-top: 2px solid #aaa;
        padding-top: 20px;
    }
    .secciones .categoria {
        font-size: 20px;
    }
    .secciones .categoria.on {
        color: rgb(155, 40, 20);
    }
    .secciones .precio {
        font-size: 18px;
        padding-left: 5px;
    }
    .secciones .precio.on {
        color: rgb(80, 80, 80);
    }
    .secciones .precio.off {
        color: rgba(0, 0, 0, 0.35);
    }
    .secciones .blink {
        animation: blink-categoria 1.5s linear 1;
    }
    @keyframes blink-categoria {
        0%   {background-color: rgba(0, 0, 0, .4)}
        100% {background-color: rgba(0, 0, 0, 0)}
    }
    main.micompra {
        padding-bottom: 60px;
    }
    .micompra .disabled-link {
        pointer-events: none;
    }
    .micompra .botones {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 30px;
        margin-left: 20px;
    }
    .micompra .botones a {
        display: inline-flex;
    }
    .micompra a.instrucciones {
        margin-top: 40px;
        color: rgb(155, 40, 20);
    }
    .micompra a.instrucciones:hover {
        text-decoration: underline;
    }
    .micompra a.historial {
        margin-top: 25px;
        color: rgb(100, 100, 100);
    }
    .micompra a.historial:hover {
        text-decoration: underline;
    }
    .micompra a.historial i {
        margin-right: 8px;
        font-size: 90%;
    }
    .micompra a.historial span {
        padding: 7px 20px;
        border-radius: 8px;
    }
    .micompra .ayudamemoria {
        background: rgba(255, 255, 0, 120);
    }
    .micompra .recibido {
        display: flex;
        justify-content: center;
        margin:0;
        margin-bottom: 30px;
    }
    .micompra .recibido b {
        padding: 3px 12px;
        border-radius: 4px;
        font-weight: normal;
        color: rgba(0, 0, 0, 0.8);
        background: rgba(120, 170, 50, 0.6);
    }
    .micompra .recibido i {
        margin-left: 10px;
        color: rgba(0, 0, 0, 0.5);
    }
    .micompra aside {
        position:relative;
        margin-bottom: 35px;
        margin-right: 10px;
        margin-left: 15px;
        font-size: 18px;
    }
    .micompra aside a {
        display: inline-block;
        padding: 5px 10px;
        font-size: 18px;
        border-radius: 4px;
        color: white;
        background: rgba(155, 40, 20, 0.8);
    }
    .micompra aside b {
        display: inline-block;
        padding: 3px 7px;
        border-radius: 8px;
        background: #CCC;
    }
    .micompra aside section {
        display: flex;
        align-items: flex-start;
        margin: 2px 0px;
    }
    .micompra aside .centrado-vertical {
        align-items: center;
    }
    .micompra aside span {
        display: inline-block;
    }
    .micompra aside span.nombre {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 90px;
        color: #777;
    }
    .micompra aside span.separador {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 12px;
        color: #777;
    }
    .micompra section {
        position:relative;
        display: flex;
        margin: 0px;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .micompra section .colorBox {
        display: inline-block;
        flex: 0 0 10px;
    }
    .micompra section.dada-de-baja .colorBox {
        background: rgb(0, 80, 170);
    }
    .micompra section.no-dada-de-baja .colorBox {
        background: rgb(155, 40, 20);
    }
    .micompra section .titulo {
        padding: 5px 10px;
        font-weight: bold;
    }
    .micompra .blink {
        animation: blink-categoria 1.5s linear 1;
    }
    .micompra article {
        display: flex;
        font-size: 18px;
        margin-right: 10px;
    }
    .micompra article b {
        font-weight: normal;
    }
    .micompra article.dada-de-baja b {
        color: rgb(0, 80, 170);
    }
    .micompra article.no-dada-de-baja b {
        color: rgb(155, 40, 20);
    }
    .micompra article em {
        font-style: normal;
        font-weight: normal;
        color: #666;
    }
    .micompra article span:nth-child(1) {
        width: 58px;
        text-align: right;
    }
    .micompra article a {
        flex: 1;
        display: inline;
        text-align: left;
        margin-right: 5px;
    }
    .micompra article span:nth-child(3) {
        color: #888;
    }
    .micompra div.subtotal {
        width: 100%;
        padding-right: 10px;
        padding-left: 20px;
        margin-top: 5px;
        text-align: right;
    }
    .micompra div.subtotal span {
        display: block;
        width: 100%;
        border-top: 1px solid #CCC;
        font-size: 18px;
        padding-top: 5px;
        color: #555;
    }
    .micompra article.despacho {
        justify-content: flex-end;
    }
    .micompra article.despacho span:nth-child(2){
        text-align: right;
        margin-right: 30px;
    }
    main.misdatos {
        padding-bottom: 10px;
    }
    .misdatos h1 {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .misdatos section {
        border-top: 1px solid rgba(0, 0, 0, 0.25);
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        position:relative;
        display: flex;
        margin: 0px;
        width: 100%;
    }
    .misdatos .colorBox {
        display: inline-block;
        flex: 0 0 10px;
        background: rgb(155, 40, 20);
    }
    .misdatos article {
        flex: 1;
        padding: 10px 10px;
        background: rgba(0, 0, 0, 0.15);
        background: rgba(120, 20, 10, 0.1);
    }
    .misdatos h2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0px 0px;
        font-size: 21px;
        padding-bottom: 5px;
        font-weight: normal;
        color: #000;
    }
    .misdatos h2 span {
        display: flex;
        align-items: center;
    }
    .misdatos i {
        width: 30px;
        font-size: 25px;
        color: #333;
        color: rgba(155, 40, 20, 0.3);
        margin-right: 10px;
    }
    .misdatos a.item {
        display: inline-block;
        margin: 5px 0px;
        margin-right: 10px;
        padding: 5px 15px;
        border-radius: 8px;
        background: #555;
        color: white;
    }
    .misdatos a.button {
        font-size: 16px;
        background: rgba(155, 40, 20, 0.3);
        padding: 5px 10px;
        color: white;
    }
    .misdatos a.button.create {
        background: rgba(155, 40, 20, 0.7);
    }
    .misdatos .drop-shadow {
        width: 100%;
        height: 30px;
        opacity: 0.3;
        margin-bottom: 10px;
    }
    main.datos {
        display: flex;
        flex-direction: column;
        padding: 30px 15px;
    }
    .datos h1 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        padding-bottom: 20px;
        margin-right: 20px;
    }
    .datos h1 i {
        width: 30px;
        font-size: 30px;
        color: #333;
        color: rgba(155, 40, 20, 0.3);
        margin-right: 20px;
    }
    .datos p {
        display: block;
        text-align: justify;
        padding: 0px 7px;
    }
    .datos p b {
        display: inline-block;
        padding: 2px 10px;
        background: rgba(100, 40, 20, 0.2);
        border-radius: 8px;
        font-weight: normal;
    }
    .datos .textinput {
        display: flex;
        align-items: center;
        background: white;
        color: #333;
        width: 100%;
        margin: 0px 0px;
        margin-top: 15px;
        margin-bottom: 15px;
        padding: 5px 5px;
        border-radius: 8px;
        border: 2px solid #777;
    }
    .datos input[type=text] {
        flex: 1;
        border: none;
        font-size: 20px;
        padding: 0px 10px;
    }
    .datos .textinput.dir-publica {
        padding: 5px 15px;
        background: #ccc;
    }
    .datos a.item {
        display: block;
        margin: 5px 0px;
        margin-bottom: 15px;
        padding: 5px 15px;
        border-radius: 8px;
        border: 1px solid #555;
        background: #555;
        color: white;
    }
    .datos a.item.angosto {
        display: inline-block;
        margin-bottom: 7px;
    }
    .datos a.item.inactivo {
        background: #ccc;
        color: #777;
        border: 1px solid #ccc;
    }
    .datos a.agregarBorrar {
        display: inline-block;
        padding: 5px 10px;
        margin-top: 45px;
        margin-bottom: 20px;
        font-size: 18px;
        color: white;
        background: rgba(155, 40, 20, 0.4);
    }
    .datos a.agregarBorrar i {
        margin-right: 10px;
    }
    .datos select {
        flex: 1;
        border: none;
        font-size: 20px;
        padding: 0px 10px;
	    background-color: white;
	    -moz-appearance: none;
	    -webkit-appearance: none;
	    appearance: none;
    }
    .datos select:required:invalid {
        color: #888;
    }
    .datos select option {
	    font-weight:normal;
    }
    .datos .info {
        display: flex;
        align-items: center;
        padding: 1px 5px;
        color: #555;
    }
    .datos .info span {
        font-size: 90%;
        padding: 8px 5px;
        color: #555;
    }
    .datos .info i {
        font-size: 110%;
        padding-right: 3px;
        color: rgba(155, 40, 20, 0.4);
    }
    .datos .anim-crear {
        animation: datos-crear 1s linear 1;
    }
    .datos .anim-borrar {
        animation: datos-borrar 1s linear 1;
        opacity: 0; max-height: 0px; margin: 0px 0px !important; padding: 0px 15px !important;
    }
    .datos .anim-activar {
        animation: datos-activar 0.5s linear 1;
    }
    .datos .anim-desactivar {
        animation: datos-desactivar 0.5s linear 1;
    }
    @keyframes datos-crear {
        0%    {opacity: 0; max-height: 0px}
        20%   {opacity: 0; max-height: 0px}
        100%  {opacity: 1; max-height: 100px}
    }
    @keyframes datos-borrar {
        0%     {opacity: 1; max-height: 100px;}
        50%    {opacity: 0; margin: 5px 0px; margin-bottom: 15px; padding: 5px 15px !important;}
        100%   {max-height: 0px; margin: 0px 0px !important; padding: 0px 15px !important;}
    }
    @keyframes datos-desactivar {
        0%    {background: #555; color: white; border-color: rgba(80, 80, 80, 1)}
        30%    {background: #555; color: white; border-color: rgba(80, 80, 80, 1)}
        50%  {background: #ccc; color: #777; border-color: rgba(0, 0, 0, 0.0)}
    }
    @keyframes datos-activar {
        0%    {background: #ccc; color: #777; border-color: rgba(0, 0, 0, 0.0)}
        80%   {background: #ccc; color: #777; border-color: rgba(0, 0, 0, 0.0)}
        100%  {background: #555; color: white; border-color: rgba(80, 80, 80, 1)}
    }
    main.historicas {
        display: flex;
        flex-direction: column;
        padding: 30px 15px;
    }
    .historicas h1 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        padding-bottom: 20px;
    }
    .historicas p {
        display: block;
        text-align: justify;
        padding: 0px 7px;
    }
    .historicas a {
        color: rgb(0, 80, 170);
        display: block;
        text-align: left;
        margin: 8px auto;
        width: auto;
        padding: 0 5px;
    }
    .historicas a:hover {
        background: rgba(0, 0, 0, 0.15);
    }
    .historicas a span {
        display: inline-block;
        text-align: left;
    }
    .historicas a span:nth-child(1){
        width: 150px;
        text-align: right;
    }
    .historicas a span:nth-child(2){
        width: 120px;
        text-align: right;
    }
    .historicas a span:nth-child(3){
        width: 50px;
        text-align: right;
    }
    main.ajustes {
        padding-bottom: 90px;
    }
    .ajustes h1 {
        padding-bottom: 25px;
    }
    .ajustes a {
        display: flex;
        justify-content: left;
        align-items: center;
        width: 100%;
    }
    .ajustes a span:nth-child(1){
        display: flex;
        justify-content: center;
        font-size: 25px;
        color: rgb(155, 40, 20);
        color: rgb(155, 40, 20);
        flex: 0 0 60px;
        padding-left: 5px;
    }
    .ajustes a span:nth-child(2) {
        flex: 1;
        padding: 20px 0;
    }
    main.ayudamemoria {
        padding: 10px 20px;
        padding-bottom: 50px;
    }
    .ayudamemoria h1 {
        padding-top: 30px;
    }
    .ayudamemoria textarea {
        width:100%;
        font-size: 19px;
        padding: 7px;
    }
    main.opciones {
        padding: 10px 20px;
        padding-bottom: 50px;
    }
    .opciones h1 {
        padding-top: 30px;
    }
    .opciones article {
        display: flex;
    }
    .opciones summary {
        padding-top: 5px;
        font-size: 95%;
        color: #666;
    }
    .opciones img {
        max-width: 100%;
        margin: 10px 0;
    }
    .opciones hr {
        margin: 30px 0;
        border: none;
        border-bottom: 1px solid #BBB;
    }
    .frnt_chkbox-container {
      display: flex;
      align-items: center;
      height: 30px;
      position: relative;
      padding-left: 35px;
      cursor: pointer;
      font-size: 20px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    .frnt_chkbox-container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }
    .frnt_chkbox-checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 24px;
      width: 24px;
      background-color: white;
      border-radius: 4px;
      border: 2px solid #777;
    }
    .frnt_chkbox-checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }
    .frnt_chkbox-container input:checked ~ .frnt_chkbox-checkmark:after {
      display: block;
    }
    .frnt_chkbox-container .frnt_chkbox-checkmark:after {
      left: 6px;
      top: 3px;
      width: 5px;
      height: 10px;
      border: solid black;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
    @media only screen and (min-width: 550px) {
        body {
            box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
            border: 1px solid #aaa;
        }
        .productos .desktop {
            display: flex;
        }
        .productos .moviles {
            display: none;
        }
        .instructivo {
        margin-left: 60px;
        margin-right: 60px;
        }
    }