*    { box-sizing: border-box; }
html { font: 16px sans-serif; }
body {
   min-height       : 100vh;
   max-width        : 100vw;
   display          : flex;
   background-color : #f0f0e0;
}
#container {
    width            : 96%;
    max-width        : 960px;
    margin           : 2vh auto;
    padding          : 0.5em;
    background-color : rgba(0,0,0,0.1);
}
h1 {
     padding          : 0.1em;
     text-align       : center;
     background-color : rgba(0,0,0,0.1);
}

.caja {
    display: flex;
    flex-wrap: wrap;
}
.caja > ol {
   background-color: rgba(128,0,0,0.1);
   margin: 0.5em;
}
ol > li { padding: 0.2em 0.6em 0.2em 0; }

.vi-1 { list-style-type: circle; }
.vi-2 { list-style-type: square; }

.num-1 { list-style-type: decimal-leading-zero; }
.num-2 { list-style-type: lower-roman; }
.num-3 { list-style-type: upper-roman; }

.alfa-1 { list-style-type: upper-alpha; }
.alfa-2 { list-style-type: lower-alpha; }
.alfa-3 { list-style-type: lower-greek; }

.ima-1,.ima-2 { font-size: 1.5em; padding-left: 2em;}
.ima-1 { list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/75379/cut.png); }
.ima-2 { list-style-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/75379/attachment.png); }
.cen-1 { vertical-align: 8px; padding-left: 8px;} 

.uni-1, .uni-2 { list-style: none; font-size: 1.5em; padding-left: o.5em;}
.uni-1 > li:before, .uni-2 > li:before { padding-right  : 10px; }
.uni-1 > li:before { content: '\2714'; color: #c00; }
.uni-2 > li:before { content: '\2718'; color: #0a0; }