﻿:root { --pix-color-primario: #012b43; }

/*Grid*/
.pix-grid * { box-sizing: border-box; }
.pix-grid { display: block; clear: both; font-size: 0 }
.pix-grid .ck-content { font-size: initial }
.pix-grid.pad-8 { margin: -8px 0 0 -8px }
.pix-grid.pad-8 > .pix-fila > div:not(:empty), .pix-grid.pad-8 > .pix-fila-dec > div:not(:empty) { padding: 8px 0 0 8px }
.pix-grid.pad-10 { margin: -10px 0 0 -10px }
.pix-grid.pad-10 > .pix-fila > div:not(:empty), .pix-grid.pad-10 > .pix-fila-dec > div:not(:empty) { padding: 10px 0 0 10px }
.pix-grid.pad-12 { margin: -12px 0 0 -12px }
.pix-grid.pad-12 > .pix-fila > div:not(:empty), .pix-grid.pad-12 > .pix-fila-dec > div:not(:empty) { padding: 12px 0 0 12px }
.pix-grid.pad-16 { margin: -16px 0 0 -16px }
.pix-grid.pad-16 > .pix-fila > div:not(:empty), .pix-grid.pad-16 > .pix-fila-dec > div:not(:empty) { padding: 16px 0 0 16px }
.pix-fila, .pix-fila-dec { width: 100%; }
.pix-fila > div, .pix-fila-dec > div { display: inline-block; font-size: initial; vertical-align: top }


/*Vista PC - Sistema de 12 columnas*/
.pix-fila > div.pc-0 { display: none; }
.pix-fila > div.pc-1 { width: 8.33% }
.pix-fila > div.pc-2 { width: 16.66% }
.pix-fila > div.pc-3 { width: 25% }
.pix-fila > div.pc-4 { width: 33.33% }
.pix-fila > div.pc-5 { width: 41.66% }
.pix-fila > div.pc-6 { width: 50% }
.pix-fila > div.pc-7 { width: 58.33% }
.pix-fila > div.pc-8 { width: 66.66% }
.pix-fila > div.pc-9 { width: 75% }
.pix-fila > div.pc-10 { width: 83.33% }
.pix-fila > div.pc-11 { width: 91.66% }
.pix-fila > div.pc-12 { width: 100% }

/*Vista PC - Sistema de 10 columnas*/
.pix-fila-dec > div.pc-0 { display: none; }
.pix-fila-dec > div.pc-1 { width: 10% }
.pix-fila-dec > div.pc-2 { width: 20% }
.pix-fila-dec > div.pc-3 { width: 30% }
.pix-fila-dec > div.pc-4 { width: 40% }
.pix-fila-dec > div.pc-5 { width: 50% }
.pix-fila-dec > div.pc-6 { width: 60% }
.pix-fila-dec > div.pc-7 { width: 70% }
.pix-fila-dec > div.pc-8 { width: 80% }
.pix-fila-dec > div.pc-9 { width: 90% }
.pix-fila-dec > div.pc-10 { width: 100% }



@media only screen and (max-width:1200px) {

    /*Vista TABLET - Sistema de 12 columnas*/
    .pix-fila > div.tb-0 { display: none; }
    .pix-fila > div.tb-1 { width: 8.33% }
    .pix-fila > div.tb-2 { width: 16.66% }
    .pix-fila > div.tb-3 { width: 25% }
    .pix-fila > div.tb-4 { width: 33.33% }
    .pix-fila > div.tb-5 { width: 41.66% }
    .pix-fila > div.tb-6 { width: 50% }
    .pix-fila > div.tb-7 { width: 58.33% }
    .pix-fila > div.tb-8 { width: 66.66% }
    .pix-fila > div.tb-9 { width: 75% }
    .pix-fila > div.tb-10 { width: 83.33% }
    .pix-fila > div.tb-11 { width: 91.66% }
    .pix-fila > div.tb-12 { width: 100% }

    /*Vista TABLET - Sistema de 10 columnas*/
    .pix-fila-dec > div.tb-0 { display: none; }
    .pix-fila-dec > div.tb-1 { width: 10% }
    .pix-fila-dec > div.tb-2 { width: 20% }
    .pix-fila-dec > div.tb-3 { width: 30% }
    .pix-fila-dec > div.tb-4 { width: 40% }
    .pix-fila-dec > div.tb-5 { width: 50% }
    .pix-fila-dec > div.tb-6 { width: 60% }
    .pix-fila-dec > div.tb-7 { width: 70% }
    .pix-fila-dec > div.tb-8 { width: 80% }
    .pix-fila-dec > div.tb-9 { width: 90% }
    .pix-fila-dec > div.tb-10 { width: 100% }
}


@media only screen and (max-width:800px) {
    /*Vista MÓVIL*/
    .pix-fila > div.mv-0 { display: none; }
    .pix-fila > div.mv-1 { width: 8.33% }
    .pix-fila > div.mv-2 { width: 16.66% }
    .pix-fila > div.mv-3 { width: 25% }
    .pix-fila > div.mv-4 { width: 33.33% }
    .pix-fila > div.mv-5 { width: 41.66% }
    .pix-fila > div.mv-6 { width: 50% }
    .pix-fila > div.mv-7 { width: 58.33% }
    .pix-fila > div.mv-8 { width: 66.66% }
    .pix-fila > div.mv-9 { width: 75% }
    .pix-fila > div.mv-10 { width: 83.33% }
    .pix-fila > div.mv-11 { width: 91.66% }
    .pix-fila > div.mv-12 { width: 100% }


    /*Vista MÓVIL - Sistema de 10 columnas*/
    .pix-fila-dec > div.mv-0 { display: none; }
    .pix-fila-dec > div.mv-1 { width: 10% }
    .pix-fila-dec > div.mv-2 { width: 20% }
    .pix-fila-dec > div.mv-3 { width: 30% }
    .pix-fila-dec > div.mv-4 { width: 40% }
    .pix-fila-dec > div.mv-5 { width: 50% }
    .pix-fila-dec > div.mv-6 { width: 60% }
    .pix-fila-dec > div.mv-7 { width: 70% }
    .pix-fila-dec > div.mv-8 { width: 80% }
    .pix-fila-dec > div.mv-9 { width: 90% }
    .pix-fila-dec > div.mv-10 { width: 100% }
}
