@charset "UTF-8";

/* ============================================================
     SiteUP!  (c) J. Alejandro Ceballos Z.
       Name: layout.css - Build 2007
    License: MIT - https://tldrlegal.com/license/mit-license
    ============================================================ */ 


/* basic tags */

html { -webkit-box-sizing:border-box; box-sizing:border-box; }
*, *::before, *::after { box-sizing:inherit; -moz-box-sizing:inherit; -webkit-box-sizing:inherit; }
body, div { margin:0; padding:0; }  

/* text */

h1, h2, h3, h4, h5, h6, pre { margin:0;  padding:0; }
p, code, kbd { margin:0; margin-bottom:0.875em; padding:0; }
pre { overflow:auto; }  
blockquote { margin:0.875em; margin-bottom:0.125em; padding:0.125em; padding-left:0.5em; }
.br-no:before,.br-no:after { display:block; content:""; } 
.br-no:after { clear:both; } 
    
/* images */
 
img { display:inline-block; vertical-align:baseline; max-width:100%; height:auto; -ms-interpolation-mode:bicubic; page-break-inside:avoid; } 
figure { margin:0.875em; padding:0.875em; }
   
/* lists */
 
dl, dt, dd, ul, ol, li { margin:0; padding:0; }
ul, ol, dl { margin-bottom:1.125em; list-style-position:outside; } 
ul { margin-left:1.25em; list-style-type:disc; }
ol { margin-left:1.125em; }
ul ul, ol ul, ul ol, ol ol { margin-left:1.25em;  }
dt { margin-bottom:0.125em; }
li, dd { margin-bottom:0.25em; }
dd { padding-left:0.125em}
.list-inline { list-style:none; } 
.list-inline > li { display:inline-block; padding-right:0.125em; padding-left:0.125em; }   
  
/* forms and buttons */

form { margin:0; padding:0; } 
[type='text'], [type='date'], [type='datetime-local'], [type='email'], [type='month'], [type='password'], [type='search'], [type='tel'], [type='time'],
[type='url'], [type='week'], textarea {
    display:block; box-sizing:border-box; -webkit-box-sizing:border-box; height:1.625em; margin:0.325em; padding:0.125em 1.625em 0.125em 0.325em; }
[type='color'], [type='number'], [type='range'] { display:block; box-sizing:border-box; -webkit-box-sizing:border-box; height:1.625em; margin:0.325em; padding:0.125em; }   
[type='file'], [type='checkbox'], [type='radio'] { margin:0.875em; }
select { height:5.625em; display:block; box-sizing:border-box; -webkit-box-sizing:border-box; margin:0.625em; padding:0.125em 1.325em 0.125em 0.325em; }
select:not([multiple]) { height:2.325em; }
optgroup { margin-left:0.125em; margin-right:1.325em; } 
textarea { min-height:2.825em; }   
fieldset { padding:0.875em; }
[type='checkbox'] + label, [type='radio'] + label { display:inline-block; vertical-align:baseline; margin-left:0.5em; margin-right:1.0em; }
[type='submit'], [type='reset'], button, .button { padding:0.875em 1.125em 0.875em 1.125em; margin:0.125em; } 
label { display:block; margin:0.325em 0.125em 0.125em 0.325em; }    
 
/* tables */

table, .table { margin:0.875em; } 
.table { display:table; }
.thead { display:table-header-group; }
.tbody { display:table-row-group; }
.tfoot { display:table-footer-group; }
.tr { display:table-row; }    
th, .th, td, .td { display:table-cell; vertical-align:top; }           
.table-nomgn th, .table-nomgn .th, .table-nomgn td, .table-nomgn .td { margin:0; }     
.table-nopad th, .table-nopad .th, .table-nopad td, .table-nopad .td { padding:0; }  
.table-pad th, .table-pad .th, .table-pad td, .table-pad .td { padding:0.875em; } 
.table-pads th, .table-pads .th, .table-pads td, .table-pads .td { padding:0.3125em; }     
.table-padm th, .table-padm .th, .table-padm td, .table-padm .td { padding:1.25em; } 
.table-padl th, .table-padl .th, .table-padl td, .table-padl .td { padding:3.125em; }  
.table-list th, .table-list .th { text-align:right; }   
caption { display:table-caption; margin:0.125em; }


/* row, col */

.row { margin:0; padding:0; width:100%; } 
.row:before, .row:after { display:block; /*table*/ content:""; } 
.row:after { clear:both; }  
.row-flex { margin-left:auto; margin-right:auto; width:88%; }
.row-fix { margin-left:0.875em; margin-right:0.875em; }
@media (min-width:25em) {
    .row-fix { margin-left:1.25em; margin-right:1.25em; } 
    } 
@media (min-width:40em) {
    .row-fix { margin-left:3.5em; margin-right:3.5em; } 
    } 
@media (min-width:64em) {
    .row-fix { margin-left:6.25em; margin-right:6.25em; } 
    }  
.col { min-height:100%; float:left; margin:0; padding:0.875em; } 
.row-nopad > .col { padding:0; } 
.col-1 { width:8.3333333333333333333333%; }
.col-2 { width:16.6666666666666666666666%; }
.col-3 { width:25%; }
.col-4 { width:33.3333333333333333333333%; }
.col-5 { width:41.6666666666666666666666%; }
.col-6 { width:50%; }
.col-7 { width:58.3333333333333333333333%; }
.col-8 { width:66.6666666666666666666666%; }
.col-9 { width:75%; }
.col-10 { width:83.3333333333333333333333%; }
.col-11 { width:91.6666666666666666666666%; }
.col-1of5 { width:20%; }
.col-2of5 { width:40%; }
.col-3of5 { width:60%; }
.col-4of5 { width:80%; } 
.col-1of7 { width:14.2857142857142857142857%; }
.col-2of7 { width:28.5714285714285714285714%; }
.col-3of7 { width:42.8571428571428571428571%; }
.col-4of7 { width:57.1428571428571428571429%; }
.col-5of7 { width:71.4285714285714285714286%; }
.col-6of7 { width:85.7142857142857142857143%; }
.col-12,.col-5of5,.col-7of7 { width:100%; }
.col-push1 { left:8.3333333333333333333333%; right:auto; position:relative; }
.col-push2 { left:16.6666666666666666666666%; right:auto; position:relative; }
.col-push3 { left:25%; right:auto; position:relative; }
.col-push4 { left:33.3333333333333333333333%; right:auto; position:relative; }
.col-push5 { left:41.6666666666666666666666%; right:auto; position:relative; }
.col-push6 { left:50%; right:auto; position:relative; }
.col-push7 { left:58.3333333333333333333333%; right:auto; position:relative; }
.col-push8 { left:66.6666666666666666666666%; right:auto; position:relative; }
.col-push9 { left:75%; right:auto; position:relative; }
.col-push10 { left:83.3333333333333333333333%; right:auto; position:relative; }
.col-push11 { left:91.6666666666666666666666%; right:auto; position:relative; }
.col-push1of5 { left:20%; right:auto; position:relative; }
.col-push2of5 { left:40%; right:auto; position:relative; }
.col-push3of5 { left:60%; right:auto; position:relative; }
.col-push4of5 { left:80%; right:auto; position:relative; } 
.col-push1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
.col-push2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
.col-push3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
.col-push4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
.col-push5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
.col-push6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
.col-pull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
.col-pull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
.col-pull3 { right:25%; left:auto; position:relative; }
.col-pull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
.col-pull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
.col-pull6 { right:50%; left:auto; position:relative; }
.col-pull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
.col-pull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
.col-pull9 { right:75%; left:auto; position:relative; }
.col-pull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
.col-pull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
.col-pull1of5 { right:20%; left:auto; position:relative; }
.col-pull2of5 { right:40%; left:auto; position:relative; }
.col-pull3of5 { right:60%; left:auto; position:relative; }
.col-pull4of5 { right:80%; left:auto; position:relative; }  
.col-pull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
.col-pull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
.col-pull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
.col-pull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
.col-pull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
.col-pull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
.col-off1 { margin-left:8.3333333333333333333333%; }
.col-off2 { margin-left:16.6666666666666666666666%; }
.col-off3 { margin-left:25%; }
.col-off4 { margin-left:33.3333333333333333333333%; }
.col-off5 { margin-left:41.6666666666666666666666%; }
.col-off6 { margin-left:50%; }
.col-off7 { margin-left:58.3333333333333333333333%; }
.col-off8 { margin-left:66.6666666666666666666666%; }
.col-off9 { margin-left:75%; }
.col-off10 { margin-left:83.3333333333333333333333%; }
.col-off11 { margin-left:91.6666666666666666666666%; }
.col-off1of5 { margin-left:20%; }
.col-off2of5 { margin-left:40%; }
.col-off3of5 { margin-left:60%; }
.col-off4of5 { margin-left:80%; } 
.col-off1of7 { margin-left:14.2857142857142857142857%; }
.col-off2of7 { margin-left:28.5714285714285714285714%; }
.col-off3of7 { margin-left:42.8571428571428571428571%; }
.col-off4of7 { margin-left:57.1428571428571428571429%; }
.col-off5of7 { margin-left:71.4285714285714285714286%; }
.col-off6of7 { margin-left:85.7142857142857142857143%; }

@media (min-width:25em) {  
    .row-lock { max-width:38em; margin-left:auto; margin-right:auto; }
    .col-s1 { width:8.3333333333333333333333%; }
    .col-s2 { width:16.6666666666666666666666%; }
    .col-s3 { width:25%; }
    .col-s4 { width:33.3333333333333333333333%; }
    .col-s5 { width:41.6666666666666666666666%; }
    .col-s6 { width:50%; }
    .col-s7 { width:58.3333333333333333333333%; }
    .col-s8 { width:66.6666666666666666666666%; }
    .col-s9 { width:75%; }
    .col-s10 { width:83.3333333333333333333333%; }
    .col-s11 { width:91.6666666666666666666666%; }
    .col-s1of5 { width:20%; }
    .col-s2of5 { width:40%; }
    .col-s3of5 { width:60%; }
    .col-s4of5 { width:80%; } 
    .col-s1of7 { width:14.2857142857142857142857%; }
    .col-s2of7 { width:28.5714285714285714285714%; }
    .col-s3of7 { width:42.8571428571428571428571%; }
    .col-s4of7 { width:57.1428571428571428571429%; }
    .col-s5of7 { width:71.4285714285714285714286%; }
    .col-s6of7 { width:85.7142857142857142857143%; }
    .col-s12,.col-s5of5,.col-s7of7 { width:100%; }
    .col-spush1 { left:8.3333333333333333333333%; right:auto; position:relative; }
    .col-spush2 { left:16.6666666666666666666666%; right:auto; position:relative; }
    .col-spush3 { left:25%; right:auto; position:relative; }
    .col-spush4 { left:33.3333333333333333333333%; right:auto; position:relative; }
    .col-spush5 { left:41.6666666666666666666666%; right:auto; position:relative; }
    .col-spush6 { left:50%; right:auto; position:relative; }
    .col-spush7 { left:58.3333333333333333333333%; right:auto; position:relative; }
    .col-spush8 { left:66.6666666666666666666666%; right:auto; position:relative; }
    .col-spush9 { left:75%; right:auto; position:relative; }
    .col-spush10 { left:83.3333333333333333333333%; right:auto; position:relative; }
    .col-spush11 { left:91.6666666666666666666666%; right:auto; position:relative; }
    .col-spush1of5 { left:20%; right:auto; position:relative; }
    .col-spush2of5 { left:40%; right:auto; position:relative; }
    .col-spush3of5 { left:60%; right:auto; position:relative; }
    .col-spush4of5 { left:80%; right:auto; position:relative; } 
    .col-spush1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
    .col-spush2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
    .col-spush3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
    .col-spush4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
    .col-spush5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
    .col-spush6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
    .col-spull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
    .col-spull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
    .col-spull3 { right:25%; left:auto; position:relative; }
    .col-spull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
    .col-spull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
    .col-spull6 { right:50%; left:auto; position:relative; }
    .col-spull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
    .col-spull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
    .col-spull9 { right:75%; left:auto; position:relative; }
    .col-spull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
    .col-spull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
    .col-spull1of5 { right:20%; left:auto; position:relative; }
    .col-spull2of5 { right:40%; left:auto; position:relative; }
    .col-spull3of5 { right:60%; left:auto; position:relative; }
    .col-spull4of5 { right:80%; left:auto; position:relative; }  
    .col-spull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
    .col-spull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
    .col-spull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
    .col-spull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
    .col-spull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
    .col-spull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
    .col-soff1 { margin-left:8.3333333333333333333333%; }
    .col-soff2 { margin-left:16.6666666666666666666666%; }
    .col-soff3 { margin-left:25%; }
    .col-soff4 { margin-left:33.3333333333333333333333%; }
    .col-soff5 { margin-left:41.6666666666666666666666%; }
    .col-soff6 { margin-left:50%; }
    .col-soff7 { margin-left:58.3333333333333333333333%; }
    .col-soff8 { margin-left:66.6666666666666666666666%; }
    .col-soff9 { margin-left:75%; }
    .col-soff10 { margin-left:83.3333333333333333333333%; }
    .col-soff11 { margin-left:91.6666666666666666666666%; }
    .col-soff1of5 { margin-left:20%; }
    .col-soff2of5 { margin-left:40%; }
    .col-soff3of5 { margin-left:60%; }
    .col-soff4of5 { margin-left:80%; } 
    .col-soff1of7 { margin-left:14.2857142857142857142857%; }
    .col-soff2of7 { margin-left:28.5714285714285714285714%; }
    .col-soff3of7 { margin-left:42.8571428571428571428571%; }
    .col-soff4of7 { margin-left:57.1428571428571428571429%; }
    .col-soff5of7 { margin-left:71.4285714285714285714286%; }
    .col-soff6of7 { margin-left:85.7142857142857142857143%; }
    }
 
@media (min-width:40em) {  
    .row-lock { max-width:62em; margin-left:auto; margin-right:auto; }
    .col-m1 { width:8.3333333333333333333333%; }
    .col-m2 { width:16.6666666666666666666666%; }
    .col-m3 { width:25%; }
    .col-m4 { width:33.3333333333333333333333%; }
    .col-m5 { width:41.6666666666666666666666%; }
    .col-m6 { width:50%; }
    .col-m7 { width:58.3333333333333333333333%; }
    .col-m8 { width:66.6666666666666666666666%; }
    .col-m9 { width:75%; }
    .col-m10 { width:83.3333333333333333333333%; }
    .col-m11 { width:91.6666666666666666666666%; }
    .col-m1of5 { width:20%; }
    .col-m2of5 { width:40%; }
    .col-m3of5 { width:60%; }
    .col-m4of5 { width:80%; } 
    .col-m1of7 { width:14.2857142857142857142857%; }
    .col-m2of7 { width:28.5714285714285714285714%; }
    .col-m3of7 { width:42.8571428571428571428571%; }
    .col-m4of7 { width:57.1428571428571428571429%; }
    .col-m5of7 { width:71.4285714285714285714286%; }
    .col-m6of7 { width:85.7142857142857142857143%; }
    .col-m12,.col-m5of5,.col-m7of7 { width:100%; }
    .col-mpush1 { left:8.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush2 { left:16.6666666666666666666666%; right:auto; position:relative; }
    .col-mpush3 { left:25%; right:auto; position:relative; }
    .col-mpush4 { left:33.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush5 { left:41.6666666666666666666666%; right:auto; position:relative; }
    .col-mpush6 { left:50%; right:auto; position:relative; }
    .col-mpush7 { left:58.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush8 { left:66.6666666666666666666666%; right:auto; position:relative; }
    .col-mpush9 { left:75%; right:auto; position:relative; }
    .col-mpush10 { left:83.3333333333333333333333%; right:auto; position:relative; }
    .col-mpush11 { left:91.6666666666666666666666%; right:auto; position:relative; }
    .col-mpush1of5 { left:20%; right:auto; position:relative; }
    .col-mpush2of5 { left:40%; right:auto; position:relative; }
    .col-mpush3of5 { left:60%; right:auto; position:relative; }
    .col-mpush4of5 { left:80%; right:auto; position:relative; } 
    .col-mpush1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
    .col-mpush2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
    .col-mpush3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
    .col-mpush4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
    .col-mpush5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
    .col-mpush6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
    .col-mpull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
    .col-mpull3 { right:25%; left:auto; position:relative; }
    .col-mpull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
    .col-mpull6 { right:50%; left:auto; position:relative; }
    .col-mpull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
    .col-mpull9 { right:75%; left:auto; position:relative; }
    .col-mpull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
    .col-mpull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
    .col-mpull1of5 { right:20%; left:auto; position:relative; }
    .col-mpull2of5 { right:40%; left:auto; position:relative; }
    .col-mpull3of5 { right:60%; left:auto; position:relative; }
    .col-mpull4of5 { right:80%; left:auto; position:relative; }  
    .col-mpull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
    .col-mpull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
    .col-mpull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
    .col-mpull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
    .col-mpull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
    .col-mpull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
    .col-moff1 { margin-left:8.3333333333333333333333%; }
    .col-moff2 { margin-left:16.6666666666666666666666%; }
    .col-moff3 { margin-left:25%; }
    .col-moff4 { margin-left:33.3333333333333333333333%; }
    .col-moff5 { margin-left:41.6666666666666666666666%; }
    .col-moff6 { margin-left:50%; }
    .col-moff7 { margin-left:58.3333333333333333333333%; }
    .col-moff8 { margin-left:66.6666666666666666666666%; }
    .col-moff9 { margin-left:75%; }
    .col-moff10 { margin-left:83.3333333333333333333333%; }
    .col-moff11 { margin-left:91.6666666666666666666666%; }
    .col-moff1of5 { margin-left:20%; }
    .col-moff2of5 { margin-left:40%; }
    .col-moff3of5 { margin-left:60%; }
    .col-moff4of5 { margin-left:80%; } 
    .col-moff1of7 { margin-left:14.2857142857142857142857%; }
    .col-moff2of7 { margin-left:28.5714285714285714285714%; }
    .col-moff3of7 { margin-left:42.8571428571428571428571%; }
    .col-moff4of7 { margin-left:57.1428571428571428571429%; }
    .col-moff5of7 { margin-left:71.4285714285714285714286%; }
    .col-moff6of7 { margin-left:85.7142857142857142857143%; }
    }
      
@media (min-width:64em) {  
    .row-lock { max-width:100em; margin-left:auto; margin-right:auto; }
    .col-l1 { width:8.3333333333333333333333%; }
    .col-l2 { width:16.6666666666666666666666%; }
    .col-l3 { width:25%; }
    .col-l4 { width:33.3333333333333333333333%; }
    .col-l5 { width:41.6666666666666666666666%; }
    .col-l6 { width:50%; }
    .col-l7 { width:58.3333333333333333333333%; }
    .col-l8 { width:66.6666666666666666666666%; }
    .col-l9 { width:75%; }
    .col-l10 { width:83.3333333333333333333333%; }
    .col-l11 { width:91.6666666666666666666666%; }
    .col-l1of5 { width:20%; }
    .col-l2of5 { width:40%; }
    .col-l3of5 { width:60%; }
    .col-l4of5 { width:80%; } 
    .col-l1of7 { width:14.2857142857142857142857%; }
    .col-l2of7 { width:28.5714285714285714285714%; }
    .col-l3of7 { width:42.8571428571428571428571%; }
    .col-l4of7 { width:57.1428571428571428571429%; }
    .col-l5of7 { width:71.4285714285714285714286%; }
    .col-l6of7 { width:85.7142857142857142857143%; }
    .col-l12,.col-l5of5,.col-l7of7 { width:100%; }
    .col-lpush1 { left:8.3333333333333333333333%; right:auto; position:relative; position:relative; }
    .col-lpush2 { left:16.6666666666666666666666%; right:auto; position:relative; }
    .col-lpush3 { left:25%; right:auto; position:relative; }
    .col-lpush4 { left:33.3333333333333333333333%; right:auto; position:relative; }
    .col-lpush5 { left:41.6666666666666666666666%; right:auto; position:relative; }
    .col-lpush6 { left:50%; right:auto; position:relative; }
    .col-lpush7 { left:58.3333333333333333333333%; right:auto; position:relative; }
    .col-lpush8 { left:66.6666666666666666666666%; right:auto; position:relative; }
    .col-lpush9 { left:75%; right:auto; position:relative; }
    .col-lpush10 { left:83.3333333333333333333333%; right:auto; position:relative; }
    .col-lpush11 { left:91.6666666666666666666666%; right:auto; position:relative; }
    .col-lpush1of5 { left:20%; right:auto; position:relative; }
    .col-lpush2of5 { left:40%; right:auto; position:relative; }
    .col-lpush3of5 { left:60%; right:auto; position:relative; }
    .col-lpush4of5 { left:80%; right:auto; position:relative; } 
    .col-lpush1of7 { left:14.2857142857142857142857%; right:auto; position:relative; }
    .col-lpush2of7 { left:28.5714285714285714285714%; right:auto; position:relative; }
    .col-lpush3of7 { left:42.8571428571428571428571%; right:auto; position:relative; }
    .col-lpush4of7 { left:57.1428571428571428571429%; right:auto; position:relative; }
    .col-lpush5of7 { left:71.4285714285714285714286%; right:auto; position:relative; }
    .col-lpush6of7 { left:85.7142857142857142857143%; right:auto; position:relative; }
    .col-lpull1 { right:8.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull2 { right:16.6666666666666666666666%; left:auto; position:relative; }
    .col-lpull3 { right:25%; left:auto; position:relative; }
    .col-lpull4 { right:33.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull5 { right:41.6666666666666666666666%; left:auto; position:relative; }
    .col-lpull6 { right:50%; left:auto; position:relative; }
    .col-lpull7 { right:58.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull8 { right:66.6666666666666666666666%; left:auto; position:relative; }
    .col-lpull9 { right:75%; left:auto; position:relative; }
    .col-lpull10 { right:83.3333333333333333333333%; left:auto; position:relative; }
    .col-lpull11 { right:91.6666666666666666666666%; left:auto; position:relative; }
    .col-lpull1of5 { right:20%; left:auto; position:relative; }
    .col-lpull2of5 { right:40%; left:auto; position:relative; }
    .col-lpull3of5 { right:60%; left:auto; position:relative; }
    .col-lpull4of5 { right:80%; left:auto; position:relative; }  
    .col-lpull1of7 { right:14.2857142857142857142857%; left:auto; position:relative; }
    .col-lpull2of7 { right:28.5714285714285714285714%; left:auto; position:relative; }
    .col-lpull3of7 { right:42.8571428571428571428571%; left:auto; position:relative; }
    .col-lpull4of7 { right:57.1428571428571428571429%; left:auto; position:relative; }
    .col-lpull5of7 { right:71.4285714285714285714286%; left:auto; position:relative; }
    .col-lpull6of7 { right:85.7142857142857142857143%; left:auto; position:relative; }
    .col-loff1 { margin-left:8.3333333333333333333333%; }
    .col-loff2 { margin-left:16.6666666666666666666666%; }
    .col-loff3 { margin-left:25%; }
    .col-loff4 { margin-left:33.3333333333333333333333%; }
    .col-loff5 { margin-left:41.6666666666666666666666%; }
    .col-loff6 { margin-left:50%; }
    .col-loff7 { margin-left:58.3333333333333333333333%; }
    .col-loff8 { margin-left:66.6666666666666666666666%; }
    .col-loff9 { margin-left:75%; }
    .col-loff10 { margin-left:83.3333333333333333333333%; }
    .col-loff11 { margin-left:91.6666666666666666666666%; }
    .col-loff1of5 { margin-left:20%; }
    .col-loff2of5 { margin-left:40%; }
    .col-loff3of5 { margin-left:60%; }
    .col-loff4of5 { margin-left:80%; } 
    .col-loff1of7 { margin-left:14.2857142857142857142857%; }
    .col-loff2of7 { margin-left:28.5714285714285714285714%; }
    .col-loff3of7 { margin-left:42.8571428571428571428571%; }
    .col-loff4of7 { margin-left:57.1428571428571428571429%; }
    .col-loff5of7 { margin-left:71.4285714285714285714286%; }
    .col-loff6of7 { margin-left:85.7142857142857142857143%; }
    }
        

/* grid.item */

.grid { display:grid; }
.grid-inline, .grid-collapsed { display:inline-grid; } 
.grid-1 { grid-template-columns:auto; } 
.grid-2 { grid-template-columns:auto auto; }
.grid-3 { grid-template-columns:auto auto auto; }
.grid-4 { grid-template-columns:auto auto auto auto; }
.grid-5 { grid-template-columns:auto auto auto auto auto; }
.grid-6 { grid-template-columns:auto auto auto auto auto auto; }
.grid-7 { grid-template-columns:auto auto auto auto auto auto auto; }
.grid-8 { grid-template-columns:auto auto auto auto auto auto auto auto; }
.grid-9 { grid-template-columns:auto auto auto auto auto auto auto auto auto; }
.grid-10 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto; }
.grid-11 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; }
.grid-12 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto; }
.grid-nogap { grid-gap:none; }    
.grid-gap { grid-gap:0.875em; } 
.grid-gaps { grid-gap:0.3125em; }     
.grid-gapm { grid-gap:0.625em; }      
.grid-gapl { grid-gap:1.25em; }       
.grid-center, .grid-centerx { justify-content:center; } 
.grid-justify, .grid-justifyx { justify-content:space-around; } 
.grid-spaced, .grid-spacedx { justify-content:space-evenly; } 
.grid-exteme, .grid-extemex { justify-content:space-between; }  
.grid-center, .grid-centery { align-content:center; }
.grid-justify, .grid-justifyy { align-content:space-around; } 
.grid-spaced, .grid-spacedy { align-content:space-evenly; } 
.grid-exteme, .grid-extemey { align-content:space-between; }
.grid-top { align-content:start; }
.grid-right { justify-content:end; }
.grid-bottom { align-content:end; } 
.grid-left { justify-content:start; } 
.grid > .item, .grid-inline > .item, .grid-collapsed > .item { padding:0.875em; } 
.grid-nopad > .item { padding:0; }
.item-colspan2 { grid-column:span 2; }
.item-colspan3 { grid-column:span 3; }
.item-colspan4 { grid-column:span 4; }
.item-colspan5 { grid-column:span 5; }
.item-colspan6 { grid-column:span 6; }
.item-colspan7 { grid-column:span 7; }
.item-colspan8 { grid-column:span 8; }
.item-colspan9 { grid-column:span 9; }
.item-colspan10 { grid-column:span 10; }
.item-colspan11 { grid-column:span 11; }
.item-colspan12 { grid-column:span 12; } 
.item-rowspan2 { grid-row:span 2; }
.item-rowspan3 { grid-row:span 3; }
.item-rowspan4 { grid-row:span 4; }
.item-rowspan5 { grid-row:span 5; }
.item-rowspan6 { grid-row:span 6; }
.item-rowspan7 { grid-row:span 7; }
.item-rowspan8 { grid-row:span 8; }
.item-rowspan9 { grid-row:span 9; }
.item-rowspan10 { grid-row:span 10; }
.item-rowspan11 { grid-row:span 11; }
.item-rowspan12 { grid-row:span 12; }
 
@media (min-width:25em) {
    .grid-s2 { grid-template-columns:auto auto; }
    .grid-s3 { grid-template-columns:auto auto auto; }
    .grid-s4 { grid-template-columns:auto auto auto auto; }
    .grid-s5 { grid-template-columns:auto auto auto auto auto; }
    .grid-s6 { grid-template-columns:auto auto auto auto auto auto; }
    .grid-s7 { grid-template-columns:auto auto auto auto auto auto auto; }
    .grid-s8 { grid-template-columns:auto auto auto auto auto auto auto auto; }
    .grid-s9 { grid-template-columns:auto auto auto auto auto auto auto auto auto; }
    .grid-s10 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto; }
    .grid-s11 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-s12 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-stop { align-content:start; } 
    .grid-sright { justify-content:end; } 
    .grid-sbottom { align-content:start; } 
    .grid-sleft { justify-content:start; } 
    .grid-scenter, .grid-scenterx { justify-content:center; } 
    .grid-sjustify, .grid-sjustifyx { justify-content:space-around; } 
    .grid-sspaced, .grid-sspacedx { justify-content:space-evenly; }  
    .grid-sexteme, .grid-sextemex { justify-content:space-between; }
    .grid-scenter, .grid-scentery { align-content:center; } 
    .grid-sjustify, .grid-sjustifyy { align-content:space-around; } 
    .grid-sspaced, .grid-sspacedy { align-content:space-evenly; }  
    .grid-sexteme, .grid-sextemey { align-content:space-between; }  
    }
     
@media (min-width:40em) {  
    .grid-m2 { grid-template-columns:auto auto; }
    .grid-m3 { grid-template-columns:auto auto auto; }
    .grid-m4 { grid-template-columns:auto auto auto auto; }
    .grid-m5 { grid-template-columns:auto auto auto auto auto; }
    .grid-m6 { grid-template-columns:auto auto auto auto auto auto; }
    .grid-m7 { grid-template-columns:auto auto auto auto auto auto auto; }
    .grid-m8 { grid-template-columns:auto auto auto auto auto auto auto auto; }
    .grid-m9 { grid-template-columns:auto auto auto auto auto auto auto auto auto; }
    .grid-m10 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto; }
    .grid-m11 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-m12 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-mtop { align-content:start; } 
    .grid-mright { justify-content:end; } 
    .grid-mbottom { align-content:start; } 
    .grid-mleft { justify-content:start; } 
    .grid-mcenter, .grid-mcenterx { justify-content:center; } 
    .grid-mjustify, .grid-mjustifyx { justify-content:space-around; } 
    .grid-mspaced, .grid-mspacedx { justify-content:space-evenly; }  
    .grid-mexteme, .grid-mextemex { justify-content:space-between; }
    .grid-mcenter, .grid-mcentery { align-content:center; } 
    .grid-mjustify, .grid-mjustifyy { align-content:space-around; } 
    .grid-mspaced, .grid-mspacedy { align-content:space-evenly; }  
    .grid-mexteme, .grid-mextemey { align-content:space-between; }  
   }

@media (min-width:64em) {  
    .grid-l2 { grid-template-columns:auto auto; }
    .grid-l3 { grid-template-columns:auto auto auto; }
    .grid-l4 { grid-template-columns:auto auto auto auto; }
    .grid-l5 { grid-template-columns:auto auto auto auto auto; }
    .grid-l6 { grid-template-columns:auto auto auto auto auto auto; }
    .grid-l7 { grid-template-columns:auto auto auto auto auto auto auto; }
    .grid-l8 { grid-template-columns:auto auto auto auto auto auto auto auto; }
    .grid-l9 { grid-template-columns:auto auto auto auto auto auto auto auto auto; }
    .grid-l10 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto; }
    .grid-l11 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-l12 { grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto; }
    .grid-ltop { align-content:start; } 
    .grid-lright { justify-content:end; } 
    .grid-lbottom { align-content:start; } 
    .grid-lleft { justify-content:start; } 
    .grid-lcenter, .grid-lcenterx { justify-content:center; } 
    .grid-ljustify, .grid-ljustifyx { justify-content:space-around; } 
    .grid-lspaced, .grid-lspacedx { justify-content:space-evenly; }  
    .grid-lexteme, .grid-lextemex { justify-content:space-between; }
    .grid-lcenter, .grid-lcentery { align-content:center; } 
    .grid-ljustify, .grid-ljustifyy { align-content:space-around; } 
    .grid-lspaced, .grid-lspacedy { align-content:space-evenly; }  
    .grid-lexteme, .grid-lextemey { align-content:space-between; }  
    }
  
 
/* margins and padding */

.mgn { margin:1.625em }  
.mgn-top { margin-top:1.625em; } 
.mgn-right { margin-right:1.625em; } 
.mgn-bottom { margin-bottom:1.625em; } 
.mgn-left { margin-left:1.625em; }  
.mgn-no { margin:0; }
.mgn-flex { margin:2.5%; } 

.pad { padding:1.625em }  
.pad-top { padding-top:1.625em; } 
.pad-right { padding-right:1.625em; } 
.pad-bottom { padding-bottom:1.625em; } 
.pad-left { padding-left:1.625em; }  
.pad-no { padding:0; }
.pad-flex { padding:2.5%; }   


/* position and dimension */

.left { float:left; } 
.right { float:right; } 
.center { margin-left:auto; margin-right:auto; }
.top { vertical-align:top;  }
.middle { vertical-align:middle; }
.bottom { vertical-align:bottom; }
.size-full,.size-fullw { width:100%; } 
.size-full,.size-fullh { height:100%; } 
.size-fullv, .size-fullvw { width:100vw; } 
.size-fullv, .size-fullvh { height:100vh; }
.size-half,.size-halfw { width:50%; } 
.size-half,.size-halfh { height:50%; } 
.size-halfv, .size-halfvw { width:50vw; } 
.size-halfv, .size-halfvh { height:50vh; }

 
/* other */     
hr { display:block; clear:both;  height:0; width:86%; margin-left:auto; margin-right:auto; border:0; border-style:inset; border-bottom:#ccc 1px solid; }