diff --git a/Responsive Computer First/CSS Responsive computer.css b/Responsive Computer First/CSS Responsive computer.css new file mode 100644 index 0000000..d2491c8 --- /dev/null +++ b/Responsive Computer First/CSS Responsive computer.css @@ -0,0 +1,1285 @@ +:root{ + /** Extra Extra small **/ + --xxs-size:320px; + --xxs-container:300px; + --xxs-container-margin:0 auto; + --xxs-gutter:6px; + --xxs-margin:0 0px; + --xxs-padding:0 5px; + --xxs-row-margin:0 -10px; + /** Extra small **/ + --xs-size:425px; + --xs-container:405px; + --xs-container-margin:0 auto; + --xs-gutter:10px; + --xs-margin:0 0px; + --xs-padding:0 5px; + --xs-row-margin:0 -10px; + /** small **/ + --sm-size:768px; + --sm-container:750px; + --sm-container-margin:0 auto; + --sm-gutter:20px; + --sm-margin:0 0px; + --sm-padding:0 5px; + --sm-row-margin:0 -10px; + /** medium **/ + --md-size:992px; + --md-container:960px; + --md-container-margin:0 auto; + --md-gutter:30px; + --md-margin:0 0px; + --md-padding:0 5px; + --md-row-margin:0 -10px; + /** large **/ + --lg-size:1200px; + --lg-container:1150px; + --lg-container-margin:0 auto; + --lg-gutter:30px; + --lg-margin:0 0px; + --lg-padding:0 5px; + --lg-row-margin:0 -10px; + /** extra large **/ + --xl-size:1900px; + --xl-container:1300px; + --xl-container-margin:0 auto; + --xl-gutter:30px; + --xl-margin:0 0px; + --xl-padding:0 5px; + --xl-row-margin:0 -10px; + /** extra extra large **/ + --xxl-size:2560px; + --xxl-container:1500px; + --xxl-container-margin:0 auto; + --xxl-gutter:30px; + --xxl-margin:0 0px; + --xxl-padding:0 5px; + --xxl-row-margin:0 -10px; + --col-01:calc( ( 100% / 12 ) * 01 ); + --col-02:calc( ( 100% / 12 ) * 02 ); + --col-03:calc( ( 100% / 12 ) * 03 ); + --col-04:calc( ( 100% / 12 ) * 04 ); + --col-05:calc( ( 100% / 12 ) * 05 ); + --col-06:calc( ( 100% / 12 ) * 06 ); + --col-07:calc( ( 100% / 12 ) * 07 ); + --col-08:calc( ( 100% / 12 ) * 08 ); + --col-09:calc( ( 100% / 12 ) * 09 ); + --col-10:calc( ( 100% / 12 ) * 10 ); + --col-11:calc( ( 100% / 12 ) * 11 ); + --col-12:calc( ( 100% / 12 ) * 12 ); +} +@env { + /** Extra Extra small **/ + --xxs-size:320px; + --xxs-container:300px; + --xxs-container-margin:0 auto; + --xxs-gutter:30px; + --xxs-margin:0 0px; + --xxs-padding:0 5px; + --xxs-row-margin:0 -10px; + /** Extra small **/ + --xs-size:425px; + --xs-container:405px; + --xs-container-margin:0 auto; + --xs-gutter:30px; + --xs-margin:0 0px; + --xs-padding:0 5px; + --xs-row-margin:0 -10px; + /** small **/ + --sm-size:768px; + --sm-container:750px; + --sm-container-margin:0 auto; + --sm-gutter:30px; + --sm-margin:0 0px; + --sm-padding:0 5px; + --sm-row-margin:0 -10px; + /** medium **/ + --md-size:992px; + --md-container:960px; + --md-container-margin:0 auto; + --md-gutter:30px; + --md-margin:0 0px; + --md-padding:0 5px; + --md-row-margin:0 -10px; + /** large **/ + --lg-size:1200px; + --lg-container:1150px; + --lg-container-margin:0 auto; + --lg-gutter:30px; + --lg-margin:0 0px; + --lg-padding:0 5px; + --lg-row-margin:0 -10px; + /** extra large **/ + --xl-size:1366px; + --xl-container:1300px; + --xl-container-margin:0 auto; + --xl-gutter:30px; + --xl-margin:0 0px; + --xl-padding:0 5px; + --xl-row-margin:0 -10px; + /** extra extra large **/ + --xxl-size:1600px; + --xxl-container:1500px; + --xxl-container-margin:0 auto; + --xxl-gutter:30px; + --xxl-margin:0 0px; + --xxl-padding:0 5px; + --xxl-row-margin:0 -10px; + --col-01:calc( ( 100% / 12 ) * 01 ); + --col-02:calc( ( 100% / 12 ) * 02 ); + --col-03:calc( ( 100% / 12 ) * 03 ); + --col-04:calc( ( 100% / 12 ) * 04 ); + --col-05:calc( ( 100% / 12 ) * 05 ); + --col-06:calc( ( 100% / 12 ) * 06 ); + --col-07:calc( ( 100% / 12 ) * 07 ); + --col-08:calc( ( 100% / 12 ) * 08 ); + --col-09:calc( ( 100% / 12 ) * 09 ); + --col-10:calc( ( 100% / 12 ) * 10 ); + --col-11:calc( ( 100% / 12 ) * 11 ); + --col-12:calc( ( 100% / 12 ) * 12 ); +} +.container{ + margin: --xxs-margin; + width: --xxs-container; + max-width:100%; +} +.container:after, .container:before{ + clear:both; +} +.row, +[row]{ + width:100%; + margin:0 calc( - var(--xxs-gutter) / 2 ); +} +.row.no-gutter, +.row[no-gutter], +[row][no-gutter], +[row].no-gutter{ + margin:0; +} +[class*="col-xxl-"], +[class*="column-xxl-"], +[column*="xxl-"]{ + padding: var(--xl-padding); + display: inline-block; + float: left; + margin: 0 calc( var(--xxl-gutter) / 2 ) 0 calc( var(--xxl-gutter) / 2 ); + box-sizing: border-box; +} +[class*="col-xxl-"].no-gutter, +[class*="column-xxl-"].no-gutter, +[column*="xxl-"].no-gutter, +[class*="col-xxl-"][no-gutter], +[class*="column-xxl-"][no-gutter], +[column*="xxl-"][no-gutter]{ + margin: 0; +} +[class*="col-xxl-"].no-padding, +[class*="column-xxl-"].no-padding, +[column*="xxl-"].no-padding, +[class*="col-xxl-"][no-padding], +[class*="column-xxl-"][no-padding], +[column*="xxl-"][no-padding]{ + padding: initial; +} +.col-xxl-1, .col-xxl-01, .column-xxl-1, .column-xxl-01, [column*="xxl-1"], [column*="xxl-01"]{ + width: calc( var(--col-01) - var(--xxl-gutter) ); +} +.col-xxl-1.no-gutter, .col-xxl-01.no-gutter, .column-xxl-1.no-gutter, .column-xxl-01.no-gutter, [column*="xxl-1"].no-gutter, [column*="xxl-01"].no-gutter, +.col-xxl-1[no-gutter], .col-xxl-01[no-gutter], .column-xxl-1[no-gutter], .column-xxl-01[no-gutter], [column*="xxl-1"][no-gutter], [column*="xxl-01"][no-gutter]{ + width: var(--col-01); +} +.col-xxl-2, .col-xxl-02, .column-xxl-2, .column-xxl-02, [column*="xxl-2"], [column*="xxl-02"]{ + width: calc( var(--col-02) - var(--xxl-gutter) ); +} +.col-xxl-2.no-gutter, .col-xxl-02.no-gutter, .column-xxl-2.no-gutter, .column-xxl-02.no-gutter, [column*="xxl-2"].no-gutter, [column*="xxl-02"].no-gutter, +.col-xxl-2[no-gutter], .col-xxl-02[no-gutter], .column-xxl-2[no-gutter], .column-xxl-02[no-gutter], [column*="xxl-2"][no-gutter], [column*="xxl-02"][no-gutter]{ + width: var(--col-02); +} +.col-xxl-3, .col-xxl-03, .column-xxl-3, .column-xxl-03, [column*="xxl-3"], [column*="xxl-03"]{ + width: calc( var(--col-03) - var(--xxl-gutter) ); +} +.col-xxl-3.no-gutter, .col-xxl-03.no-gutter, .column-xxl-3.no-gutter, .column-xxl-03.no-gutter, [column*="xxl-3"].no-gutter, [column*="xxl-03"].no-gutter, +.col-xxl-3[no-gutter], .col-xxl-03[no-gutter], .column-xxl-3[no-gutter], .column-xxl-03[no-gutter], [column*="xxl-3"][no-gutter], [column*="xxl-03"][no-gutter]{ + width: var(--col-03); +} +.col-xxl-4, .col-xxl-04, .column-xxl-4, .column-xxl-04, [column*="xxl-4"], [column*="xxl-04"]{ + width: calc( var(--col-04) - var(--xxl-gutter) ); +} +.col-xxl-4.no-gutter, .col-xxl-04.no-gutter, .column-xxl-4.no-gutter, .column-xxl-04.no-gutter, [column*="xxl-4"].no-gutter, [column*="xxl-04"].no-gutter, +.col-xxl-4[no-gutter], .col-xxl-04[no-gutter], .column-xxl-4[no-gutter], .column-xxl-04[no-gutter], [column*="xxl-4"][no-gutter], [column*="xxl-04"][no-gutter]{ + width: var(--col-04); +} +.col-xxl-5, .col-xxl-05, .column-xxl-5, .column-xxl-05, [column*="xxl-5"], [column*="xxl-05"]{ + width: calc( var(--col-05) - var(--xxl-gutter) ); +} +.col-xxl-5.no-gutter, .col-xxl-05.no-gutter, .column-xxl-5.no-gutter, .column-xxl-05.no-gutter, [column*="xxl-5"].no-gutter, [column*="xxl-05"].no-gutter, +.col-xxl-5[no-gutter], .col-xxl-05[no-gutter], .column-xxl-5[no-gutter], .column-xxl-05[no-gutter], [column*="xxl-5"][no-gutter], [column*="xxl-05"][no-gutter]{ + width: var(--col-05); +} +.col-xxl-6, .col-xxl-06, .column-xxl-6, .column-xxl-06, [column*="xxl-6"], [column*="xxl-06"]{ + width: calc( var(--col-06) - var(--xxl-gutter) ); +} +.col-xxl-6.no-gutter, .col-xxl-06.no-gutter, .column-xxl-6.no-gutter, .column-xxl-06.no-gutter, [column*="xxl-6"].no-gutter, [column*="xxl-06"].no-gutter, +.col-xxl-6[no-gutter], .col-xxl-06[no-gutter], .column-xxl-6[no-gutter], .column-xxl-06[no-gutter], [column*="xxl-6"][no-gutter], [column*="xxl-06"][no-gutter]{ + width: var(--col-06); +} +.col-xxl-7, .col-xxl-07, .column-xxl-7, .column-xxl-07, [column*="xxl-7"], [column*="xxl-07"]{ + width: calc( var(--col-07) - var(--xxl-gutter) ); +} +.col-xxl-7.no-gutter, .col-xxl-07.no-gutter, .column-xxl-7.no-gutter, .column-xxl-07.no-gutter, [column*="xxl-7"].no-gutter, [column*="xxl-07"].no-gutter, +.col-xxl-7[no-gutter], .col-xxl-07[no-gutter], .column-xxl-7[no-gutter], .column-xxl-07[no-gutter], [column*="xxl-7"][no-gutter], [column*="xxl-07"][no-gutter]{ + width: var(--col-07); +} +.col-xxl-8, .col-xxl-08, .column-xxl-8, .column-xxl-08, [column*="xxl-8"], [column*="xxl-08"]{ + width: calc( var(--col-08) - var(--xxl-gutter) ); +} +.col-xxl-8.no-gutter, .col-xxl-08.no-gutter, .column-xxl-8.no-gutter, .column-xxl-08.no-gutter, [column*="xxl-8"].no-gutter, [column*="xxl-08"].no-gutter, +.col-xxl-8[no-gutter], .col-xxl-08[no-gutter], .column-xxl-8[no-gutter], .column-xxl-08[no-gutter], [column*="xxl-8"][no-gutter], [column*="xxl-08"][no-gutter]{ + width: var(--col-08); +} +.col-xxl-9, .col-xxl-09, .column-xxl-9, .column-xxl-09, [column*="xxl-9"], [column*="xxl-09"]{ + width: calc( var(--col-09) - var(--xxl-gutter) ); +} +.col-xxl-9.no-gutter, .col-xxl-09.no-gutter, .column-xxl-9.no-gutter, .column-xxl-09.no-gutter, [column*="xxl-9"].no-gutter, [column*="xxl-09"].no-gutter, +.col-xxl-9[no-gutter], .col-xxl-09[no-gutter], .column-xxl-9[no-gutter], .column-xxl-09[no-gutter], [column*="xxl-9"][no-gutter], [column*="xxl-09"][no-gutter]{ + width: var(--col-09); +} +.col-xxl-10, .column-xxl-10, [column*="xxl-10"]{ + width: calc( var(--col-10) - var(--xxl-gutter) ); +} +.col-xxl-10.no-gutter, .column-xxl-10.no-gutter, [column*="xxl-10"].no-gutter, +.col-xxl-10[no-gutter], .column-xxl-10[no-gutter], [column*="xxl-10"][no-gutter]{ + width: var(--col-12); +} +.col-xxl-11, .column-xxl-11, [column*="xxl-11"]{ + width: calc( var(--col-11) - var(--xxl-gutter) ); +} +.col-xxl-11.no-gutter, .column-xxl-11.no-gutter, [column*="xxl-11"].no-gutter, +.col-xxl-11[no-gutter], .column-xxl-11[no-gutter], [column*="xxl-11"][no-gutter]{ + width: var(--col-11); +} +.col-xxl-12, .column-xxl-12, [column*="xxl-12"]{ + width: calc( var(--col-12) - var(--xxl-gutter) ); +} +.col-xxl-12.no-gutter, .column-xxl-12.no-gutter, [column*="xxl-12"].no-gutter, +.col-xxl-12[no-gutter], .column-xxl-12[no-gutter], [column*="xxl-12"][no-gutter]{ + width: var(--col-12); +} +/** offset **/ +.col-off-xxl-00, .column-off-xxl-00, .col-offset-xxl-00, .column-offset-xxl-00, [offset*="xxl-00"], +.col-off-xxl-0, .column-off-xxl-0, .col-offset-xxl-0, .column-offset-xxl-0, [offset*="xxl-0"]{ + margin:0 0px; +} +.col-off-xxl-01, .column-off-xxl-01, .col-offset-xxl-01, .column-offset-xxl-01, [offset*="xxl-01"], +.col-off-xxl-1, .column-off-xxl-1, .col-offset-xxl-1, .column-offset-xxl-1, [offset*="xxl-1"]{ + margin:0 0 0 var(--col-01); +} +.col-off-xxl-02, .column-off-xxl-02, .col-offset-xxl-02, .column-offset-xxl-02, [offset*="xxl-02"], +.col-off-xxl-2, .column-off-xxl-2, .col-offset-xxl-2, .column-offset-xxl-2, [offset*="xxl-2"]{ + margin:0 0 0 var(--col-02); +} +.col-off-xxl-03, .column-off-xxl-03, .col-offset-xxl-03, .column-offset-xxl-03, [offset*="xxl-03"], +.col-off-xxl-3, .column-off-xxl-3, .col-offset-xxl-3, .column-offset-xxl-3, [offset*="xxl-3"]{ + margin:0 0 0 var(--col-03); +} +.col-off-xxl-04, .column-off-xxl-04, .col-offset-xxl-04, .column-offset-xxl-04, [offset*="xxl-04"], +.col-off-xxl-4, .column-off-xxl-4, .col-offset-xxl-4, .column-offset-xxl-4, [offset*="xxl-4"]{ + margin:0 0 0 var(--col-04); +} +.col-off-xxl-05, .column-off-xxl-05, .col-offset-xxl-05, .column-offset-xxl-05, [offset*="xxl-05"], +.col-off-xxl-5, .column-off-xxl-5, .col-offset-xxl-5, .column-offset-xxl-5, [offset*="xxl-5"]{ + margin:0 0 0 var(--col-05); +} +.col-off-xxl-06, .column-off-xxl-06, .col-offset-xxl-06, .column-offset-xxl-06, [offset*="xxl-06"], +.col-off-xxl-6, .column-off-xxl-6, .col-offset-xxl-6, .column-offset-xxl-6, [offset*="xxl-6"]{ + margin:0 0 0 var(--col-06); +} +.col-off-xxl-07, .column-off-xxl-07, .col-offset-xxl-07, .column-offset-xxl-07, [offset*="xxl-07"], +.col-off-xxl-7, .column-off-xxl-7, .col-offset-xxl-7, .column-offset-xxl-7, [offset*="xxl-7"]{ + margin:0 0 0 var(--col-07) ; +} +.col-off-xxl-08, .column-off-xxl-08, .col-offset-xxl-08, .column-offset-xxl-08, [offset*="xxl-08"], +.col-off-xxl-8, .column-off-xxl-8, .col-offset-xxl-8, .column-offset-xxl-8, [offset*="xxl-8"]{ + margin:0 0 0 var(--col-08); +} +.col-off-xxl-09, .column-off-xxl-09, .col-offset-xxl-09, .column-offset-xxl-09, [offset*="xxl-09"], +.col-off-xxl-9, .column-off-xxl-9, .col-offset-xxl-9, .column-offset-xxl-9, [offset*="xxl-9"]{ + margin:0 0 0 var(--col-09); +} +.col-off-xxl-10, .column-off-xxl-10, .col-offset-xxl-10, .column-offset-xxl-10, [offset*="xxl-10"]{ + margin:0 0 0 var(--col-10); +} +.col-off-xxl-11, .column-off-xxl-11, .col-offset-xxl-11, .column-offset-xxl-11, [offset*="xxl-11"]{ + margin:0 0 0 var(--col-11); +} +.col-off-xxl-12, .column-off-xxl-12, .col-offset-xxl-12, .column-offset-xxl-12, [offset*="xxl-12"]{ + margin:0 0 0 var(--col-12); +} + +@media (max-width:1900px){ + [class*="col-xl-"], + [class*="column-xl-"], + [column*="xl-"]{ + padding: var(--xl-padding); + display: inline-block; + float: left; + margin: 0 calc( var(--xl-gutter) / 2 ) 0 calc( var(--xl-gutter) / 2 ); + + } + [class*="col-xl-"].no-gutter, + [class*="column-xl-"].no-gutter, + [column*="xl-"].no-gutter, + [class*="col-xl-"][no-gutter], + [class*="column-xl-"][no-gutter], + [column*="xl-"][no-gutter]{ + margin: 0; + } + [class*="col-xl-"].no-padding, + [class*="column-xl-"].no-padding, + [column*="xl-"].no-padding, + [class*="col-xl-"][no-padding], + [class*="column-xl-"][no-padding], + [column*="xl-"][no-padding]{ + padding: initial; + } + .col-xl-1, .col-xl-01, .column-xl-1, .column-xl-01, [column*="xl-1"], [column*="xl-01"]{ + width: calc( var(--col-01) - var(--xl-gutter) ); + } + .col-xl-1.no-gutter, .col-xl-01.no-gutter, .column-xl-1.no-gutter, .column-xl-01.no-gutter, [column*="xl-1"].no-gutter, [column*="xl-01"].no-gutter, + .col-xl-1[no-gutter], .col-xl-01[no-gutter], .column-xl-1[no-gutter], .column-xl-01[no-gutter], [column*="xl-1"][no-gutter], [column*="xl-01"][no-gutter]{ + width: var(--col-01); + } + .col-xl-2, .col-xl-02, .column-xl-2, .column-xl-02, [column*="xl-2"], [column*="xl-02"]{ + width: calc( var(--col-02) - var(--xl-gutter) ); + } + .col-xl-2.no-gutter, .col-xl-02.no-gutter, .column-xl-2.no-gutter, .column-xl-02.no-gutter, [column*="xl-2"].no-gutter, [column*="xl-02"].no-gutter, + .col-xl-2[no-gutter], .col-xl-02[no-gutter], .column-xl-2[no-gutter], .column-xl-02[no-gutter], [column*="xl-2"][no-gutter], [column*="xl-02"][no-gutter]{ + width: var(--col-02); + } + .col-xl-3, .col-xl-03, .column-xl-3, .column-xl-03, [column*="xl-3"], [column*="xl-03"]{ + width: calc( var(--col-03) - var(--xl-gutter) ); + } + .col-xl-3.no-gutter, .col-xl-03.no-gutter, .column-xl-3.no-gutter, .column-xl-03.no-gutter, [column*="xl-3"].no-gutter, [column*="xl-03"].no-gutter, + .col-xl-3[no-gutter], .col-xl-03[no-gutter], .column-xl-3[no-gutter], .column-xl-03[no-gutter], [column*="xl-3"][no-gutter], [column*="xl-03"][no-gutter]{ + width: var(--col-03); + } + .col-xl-4, .col-xl-04, .column-xl-4, .column-xl-04, [column*="xl-4"], [column*="xl-04"]{ + width: calc( var(--col-04) - var(--xl-gutter) ); + } + .col-xl-4.no-gutter, .col-xl-04.no-gutter, .column-xl-4.no-gutter, .column-xl-04.no-gutter, [column*="xl-4"].no-gutter, [column*="xl-04"].no-gutter, + .col-xl-4[no-gutter], .col-xl-04[no-gutter], .column-xl-4[no-gutter], .column-xl-04[no-gutter], [column*="xl-4"][no-gutter], [column*="xl-04"][no-gutter]{ + width: var(--col-04); + } + .col-xl-5, .col-xl-05, .column-xl-5, .column-xl-05, [column*="xl-5"], [column*="xl-05"]{ + width: calc( var(--col-05) - var(--xl-gutter) ); + } + .col-xl-5.no-gutter, .col-xl-05.no-gutter, .column-xl-5.no-gutter, .column-xl-05.no-gutter, [column*="xl-5"].no-gutter, [column*="xl-05"].no-gutter, + .col-xl-5[no-gutter], .col-xl-05[no-gutter], .column-xl-5[no-gutter], .column-xl-05[no-gutter], [column*="xl-5"][no-gutter], [column*="xl-05"][no-gutter]{ + width: var(--col-05); + } + .col-xl-6, .col-xl-06, .column-xl-6, .column-xl-06, [column*="xl-6"], [column*="xl-06"]{ + width: calc( var(--col-06) - var(--xl-gutter) ); + } + .col-xl-6.no-gutter, .col-xl-06.no-gutter, .column-xl-6.no-gutter, .column-xl-06.no-gutter, [column*="xl-6"].no-gutter, [column*="xl-06"].no-gutter, + .col-xl-6[no-gutter], .col-xl-06[no-gutter], .column-xl-6[no-gutter], .column-xl-06[no-gutter], [column*="xl-6"][no-gutter], [column*="xl-06"][no-gutter]{ + width: var(--col-06); + } + .col-xl-7, .col-xl-07, .column-xl-7, .column-xl-07, [column*="xl-7"], [column*="xl-07"]{ + width: calc( var(--col-07) - var(--xl-gutter) ); + } + .col-xl-7.no-gutter, .col-xl-07.no-gutter, .column-xl-7.no-gutter, .column-xl-07.no-gutter, [column*="xl-7"].no-gutter, [column*="xl-07"].no-gutter, + .col-xl-7[no-gutter], .col-xl-07[no-gutter], .column-xl-7[no-gutter], .column-xl-07[no-gutter], [column*="xl-7"][no-gutter], [column*="xl-07"][no-gutter]{ + width: var(--col-07); + } + .col-xl-8, .col-xl-08, .column-xl-8, .column-xl-08, [column*="xl-8"], [column*="xl-08"]{ + width: calc( var(--col-08) - var(--xl-gutter) ); + } + .col-xl-8.no-gutter, .col-xl-08.no-gutter, .column-xl-8.no-gutter, .column-xl-08.no-gutter, [column*="xl-8"].no-gutter, [column*="xl-08"].no-gutter, + .col-xl-8[no-gutter], .col-xl-08[no-gutter], .column-xl-8[no-gutter], .column-xl-08[no-gutter], [column*="xl-8"][no-gutter], [column*="xl-08"][no-gutter]{ + width: var(--col-08); + } + .col-xl-9, .col-xl-09, .column-xl-9, .column-xl-09, [column*="xl-9"], [column*="xl-09"]{ + width: calc( var(--col-09) - var(--xl-gutter) ); + } + .col-xl-9.no-gutter, .col-xl-09.no-gutter, .column-xl-9.no-gutter, .column-xl-09.no-gutter, [column*="xl-9"].no-gutter, [column*="xl-09"].no-gutter, + .col-xl-9[no-gutter], .col-xl-09[no-gutter], .column-xl-9[no-gutter], .column-xl-09[no-gutter], [column*="xl-9"][no-gutter], [column*="xl-09"][no-gutter]{ + width: var(--col-09); + } + .col-xl-10, .column-xl-10, [column*="xl-10"]{ + width: calc( var(--col-10) - var(--xl-gutter) ); + } + .col-xl-10.no-gutter, .column-xl-10.no-gutter, [column*="xl-10"].no-gutter, + .col-xl-10[no-gutter], .column-xl-10[no-gutter], [column*="xl-10"][no-gutter]{ + width: var(--col-12); + } + .col-xl-11, .column-xl-11, [column*="xl-11"]{ + width: calc( var(--col-11) - var(--xl-gutter) ); + } + .col-xl-11.no-gutter, .column-xl-11.no-gutter, [column*="xl-11"].no-gutter, + .col-xl-11[no-gutter], .column-xl-11[no-gutter], [column*="xl-11"][no-gutter]{ + width: var(--col-11); + } + .col-xl-12, .column-xl-12, [column*="xl-12"]{ + width: calc( var(--col-12) - var(--xl-gutter) ); + } + .col-xl-12.no-gutter, .column-xl-12.no-gutter, [column*="xl-12"].no-gutter, + .col-xl-12[no-gutter], .column-xl-12[no-gutter], [column*="xl-12"][no-gutter]{ + width: var(--col-12); + } + /** offset **/ + .col-off-xl-00, .column-off-xl-00, .col-offset-xl-00, .column-offset-xl-00, [offset*="xl-00"], + .col-off-xl-0, .column-off-xl-0, .col-offset-xl-0, .column-offset-xl-0, [offset*="xl-0"]{ + margin:0 0px; + } + .col-off-xl-01, .column-off-xl-01, .col-offset-xl-01, .column-offset-xl-01, [offset*="xl-01"], + .col-off-xl-1, .column-off-xl-1, .col-offset-xl-1, .column-offset-xl-1, [offset*="xl-1"]{ + margin:0 0 0 var(--col-01); + } + .col-off-xl-02, .column-off-xl-02, .col-offset-xl-02, .column-offset-xl-02, [offset*="xl-02"], + .col-off-xl-2, .column-off-xl-2, .col-offset-xl-2, .column-offset-xl-2, [offset*="xl-2"]{ + margin:0 0 0 var(--col-02); + } + .col-off-xl-03, .column-off-xl-03, .col-offset-xl-03, .column-offset-xl-03, [offset*="xl-03"], + .col-off-xl-3, .column-off-xl-3, .col-offset-xl-3, .column-offset-xl-3, [offset*="xl-3"]{ + margin:0 0 0 var(--col-03); + } + .col-off-xl-04, .column-off-xl-04, .col-offset-xl-04, .column-offset-xl-04, [offset*="xl-04"], + .col-off-xl-4, .column-off-xl-4, .col-offset-xl-4, .column-offset-xl-4, [offset*="xl-4"]{ + margin:0 0 0 var(--col-04); + } + .col-off-xl-05, .column-off-xl-05, .col-offset-xl-05, .column-offset-xl-05, [offset*="xl-05"], + .col-off-xl-5, .column-off-xl-5, .col-offset-xl-5, .column-offset-xl-5, [offset*="xl-5"]{ + margin:0 0 0 var(--col-05); + } + .col-off-xl-06, .column-off-xl-06, .col-offset-xl-06, .column-offset-xl-06, [offset*="xl-06"], + .col-off-xl-6, .column-off-xl-6, .col-offset-xl-6, .column-offset-xl-6, [offset*="xl-6"]{ + margin:0 0 0 var(--col-06); + } + .col-off-xl-07, .column-off-xl-07, .col-offset-xl-07, .column-offset-xl-07, [offset*="xl-07"], + .col-off-xl-7, .column-off-xl-7, .col-offset-xl-7, .column-offset-xl-7, [offset*="xl-7"]{ + margin:0 0 0 var(--col-07); + } + .col-off-xl-08, .column-off-xl-08, .col-offset-xl-08, .column-offset-xl-08, [offset*="xl-08"], + .col-off-xl-8, .column-off-xl-8, .col-offset-xl-8, .column-offset-xl-8, [offset*="xl-8"]{ + margin:0 0 0 var(--col-08); + } + .col-off-xl-09, .column-off-xl-09, .col-offset-xl-09, .column-offset-xl-09, [offset*="xl-09"], + .col-off-xl-9, .column-off-xl-9, .col-offset-xl-9, .column-offset-xl-9, [offset*="xl-9"]{ + margin:0 0 0 var(--col-09); + } + .col-off-xl-10, .column-off-xl-10, .col-offset-xl-10, .column-offset-xl-10, [offset*="xl-10"]{ + margin:0 0 0 var(--col-10); + } + .col-off-xl-11, .column-off-xl-11, .col-offset-xl-11, .column-offset-xl-11, [offset*="xl-11"]{ + margin:0 0 0 var(--col-11); + } + .col-off-xl-12, .column-off-xl-12, .col-offset-xl-12, .column-offset-xl-12, [offset*="xl-12"]{ + margin:0 0 0 var(--col-12); + } +} + +@media (max-width:1200px){ + [class*="col-lg-"], + [class*="column-lg-"], + [column*="lg-"]{ + padding: var(--lg-padding); + display: inline-block; + float: left; + margin: 0 calc( var(--lg-gutter) / 2 ) 0 calc( var(--lg-gutter) / 2 ); + } + [class*="col-lg-"].no-gutter, + [class*="column-lg-"].no-gutter, + [column*="lg-"].no-gutter, + [class*="col-lg-"][no-gutter], + [class*="column-lg-"][no-gutter], + [column*="lg-"][no-gutter]{ + margin: 0; + } + [class*="col-lg-"].no-padding, + [class*="column-lg-"].no-padding, + [column*="lg-"].no-padding, + [class*="col-lg-"][no-padding], + [class*="column-lg-"][no-padding], + [column*="lg-"][no-padding]{ + padding: initial; + } + .col-lg-1, .col-lg-01, .column-lg-1, .column-lg-01, [column*="lg-1"], [column*="lg-01"]{ + width: calc( var(--col-01) - var(--lg-gutter) ); + } + .col-lg-1.no-gutter, .col-lg-01.no-gutter, .column-lg-1.no-gutter, .column-lg-01.no-gutter, [column*="lg-1"].no-gutter, [column*="lg-01"].no-gutter, + .col-lg-1[no-gutter], .col-lg-01[no-gutter], .column-lg-1[no-gutter], .column-lg-01[no-gutter], [column*="lg-1"][no-gutter], [column*="lg-01"][no-gutter]{ + width: var(--col-01); + } + .col-lg-2, .col-lg-02, .column-lg-2, .column-lg-02, [column*="lg-2"], [column*="lg-02"]{ + width: calc( var(--col-02) - var(--lg-gutter) ); + } + .col-lg-2.no-gutter, .col-lg-02.no-gutter, .column-lg-2.no-gutter, .column-lg-02.no-gutter, [column*="lg-2"].no-gutter, [column*="lg-02"].no-gutter, + .col-lg-2[no-gutter], .col-lg-02[no-gutter], .column-lg-2[no-gutter], .column-lg-02[no-gutter], [column*="lg-2"][no-gutter], [column*="lg-02"][no-gutter]{ + width: var(--col-02); + } + .col-lg-3, .col-lg-03, .column-lg-3, .column-lg-03, [column*="lg-3"], [column*="lg-03"]{ + width: calc( var(--col-03) - var(--lg-gutter) ); + } + .col-lg-3.no-gutter, .col-lg-03.no-gutter, .column-lg-3.no-gutter, .column-lg-03.no-gutter, [column*="lg-3"].no-gutter, [column*="lg-03"].no-gutter, + .col-lg-3[no-gutter], .col-lg-03[no-gutter], .column-lg-3[no-gutter], .column-lg-03[no-gutter], [column*="lg-3"][no-gutter], [column*="lg-03"][no-gutter]{ + width: var(--col-03); + } + .col-lg-4, .col-lg-04, .column-lg-4, .column-lg-04, [column*="lg-4"], [column*="lg-04"]{ + width: calc( var(--col-04) - var(--lg-gutter) ); + } + .col-lg-4.no-gutter, .col-lg-04.no-gutter, .column-lg-4.no-gutter, .column-lg-04.no-gutter, [column*="lg-4"].no-gutter, [column*="lg-04"].no-gutter, + .col-lg-4[no-gutter], .col-lg-04[no-gutter], .column-lg-4[no-gutter], .column-lg-04[no-gutter], [column*="lg-4"][no-gutter], [column*="lg-04"][no-gutter]{ + width: var(--col-04); + } + .col-lg-5, .col-lg-05, .column-lg-5, .column-lg-05, [column*="lg-5"], [column*="lg-05"]{ + width: calc( var(--col-05) - var(--lg-gutter) ); + } + .col-lg-5.no-gutter, .col-lg-05.no-gutter, .column-lg-5.no-gutter, .column-lg-05.no-gutter, [column*="lg-5"].no-gutter, [column*="lg-05"].no-gutter, + .col-lg-5[no-gutter], .col-lg-05[no-gutter], .column-lg-5[no-gutter], .column-lg-05[no-gutter], [column*="lg-5"][no-gutter], [column*="lg-05"][no-gutter]{ + width: var(--col-05); + } + .col-lg-6, .col-lg-06, .column-lg-6, .column-lg-06, [column*="lg-6"], [column*="lg-06"]{ + width: calc( var(--col-06) - var(--lg-gutter) ); + } + .col-lg-6.no-gutter, .col-lg-06.no-gutter, .column-lg-6.no-gutter, .column-lg-06.no-gutter, [column*="lg-6"].no-gutter, [column*="lg-06"].no-gutter, + .col-lg-6[no-gutter], .col-lg-06[no-gutter], .column-lg-6[no-gutter], .column-lg-06[no-gutter], [column*="lg-6"][no-gutter], [column*="lg-06"][no-gutter]{ + width: var(--col-06); + } + .col-lg-7, .col-lg-07, .column-lg-7, .column-lg-07, [column*="lg-7"], [column*="lg-07"]{ + width: calc( var(--col-07) - var(--lg-gutter) ); + } + .col-lg-7.no-gutter, .col-lg-07.no-gutter, .column-lg-7.no-gutter, .column-lg-07.no-gutter, [column*="lg-7"].no-gutter, [column*="lg-07"].no-gutter, + .col-lg-7[no-gutter], .col-lg-07[no-gutter], .column-lg-7[no-gutter], .column-lg-07[no-gutter], [column*="lg-7"][no-gutter], [column*="lg-07"][no-gutter]{ + width: var(--col-07); + } + .col-lg-8, .col-lg-08, .column-lg-8, .column-lg-08, [column*="lg-8"], [column*="lg-08"]{ + width: calc( var(--col-08) - var(--lg-gutter) ); + } + .col-lg-8.no-gutter, .col-lg-08.no-gutter, .column-lg-8.no-gutter, .column-lg-08.no-gutter, [column*="lg-8"].no-gutter, [column*="lg-08"].no-gutter, + .col-lg-8[no-gutter], .col-lg-08[no-gutter], .column-lg-8[no-gutter], .column-lg-08[no-gutter], [column*="lg-8"][no-gutter], [column*="lg-08"][no-gutter]{ + width: var(--col-08); + } + .col-lg-9, .col-lg-09, .column-lg-9, .column-lg-09, [column*="lg-9"], [column*="lg-09"]{ + width: calc( var(--col-09) - var(--lg-gutter) ); + } + .col-lg-9.no-gutter, .col-lg-09.no-gutter, .column-lg-9.no-gutter, .column-lg-09.no-gutter, [column*="lg-9"].no-gutter, [column*="lg-09"].no-gutter, + .col-lg-9[no-gutter], .col-lg-09[no-gutter], .column-lg-9[no-gutter], .column-lg-09[no-gutter], [column*="lg-9"][no-gutter], [column*="lg-09"][no-gutter]{ + width: var(--col-09); + } + .col-lg-10, .column-lg-10, [column*="lg-10"]{ + width: calc( var(--col-10) - var(--lg-gutter) ); + } + .col-lg-10.no-gutter, .column-lg-10.no-gutter, [column*="lg-10"].no-gutter, + .col-lg-10[no-gutter], .column-lg-10[no-gutter], [column*="lg-10"][no-gutter]{ + width: var(--col-12); + } + .col-lg-11, .column-lg-11, [column*="lg-11"]{ + width: calc( var(--col-11) - var(--lg-gutter) ); + } + .col-lg-11.no-gutter, .column-lg-11.no-gutter, [column*="lg-11"].no-gutter, + .col-lg-11[no-gutter], .column-lg-11[no-gutter], [column*="lg-11"][no-gutter]{ + width: var(--col-11); + } + .col-lg-12, .column-lg-12, [column*="lg-12"]{ + width: calc( var(--col-12) - var(--lg-gutter) ); + } + .col-lg-12.no-gutter, .column-lg-12.no-gutter, [column*="lg-12"].no-gutter, + .col-lg-12[no-gutter], .column-lg-12[no-gutter], [column*="lg-12"][no-gutter]{ + width: var(--col-12); + } + /** offset **/ + .col-off-lg-00, .column-off-lg-00, .col-offset-lg-00, .column-offset-lg-00, [offset*="lg-00"], + .col-off-lg-0, .column-off-lg-0, .col-offset-lg-0, .column-offset-lg-0, [offset*="lg-0"]{ + margin:0 0px; + } + .col-off-lg-01, .column-off-lg-01, .col-offset-lg-01, .column-offset-lg-01, [offset*="lg-01"], + .col-off-lg-1, .column-off-lg-1, .col-offset-lg-1, .column-offset-lg-1, [offset*="lg-1"]{ + margin:0 0 0 var(--col-01); + } + .col-off-lg-02, .column-off-lg-02, .col-offset-lg-02, .column-offset-lg-02, [offset*="lg-02"], + .col-off-lg-2, .column-off-lg-2, .col-offset-lg-2, .column-offset-lg-2, [offset*="lg-2"]{ + margin:0 0 0 var(--col-02); + } + .col-off-lg-03, .column-off-lg-03, .col-offset-lg-03, .column-offset-lg-03, [offset*="lg-03"], + .col-off-lg-3, .column-off-lg-3, .col-offset-lg-3, .column-offset-lg-3, [offset*="lg-3"]{ + margin:0 0 0 var(--col-03); + } + .col-off-lg-04, .column-off-lg-04, .col-offset-lg-04, .column-offset-lg-04, [offset*="lg-04"], + .col-off-lg-4, .column-off-lg-4, .col-offset-lg-4, .column-offset-lg-4, [offset*="lg-4"]{ + margin:0 0 0 var(--col-04); + } + .col-off-lg-05, .column-off-lg-05, .col-offset-lg-05, .column-offset-lg-05, [offset*="lg-05"], + .col-off-lg-5, .column-off-lg-5, .col-offset-lg-5, .column-offset-lg-5, [offset*="lg-5"]{ + margin:0 0 0 var(--col-05); + } + .col-off-lg-06, .column-off-lg-06, .col-offset-lg-06, .column-offset-lg-06, [offset*="lg-06"], + .col-off-lg-6, .column-off-lg-6, .col-offset-lg-6, .column-offset-lg-6, [offset*="lg-6"]{ + margin:0 0 0 var(--col-06); + } + .col-off-lg-07, .column-off-lg-07, .col-offset-lg-07, .column-offset-lg-07, [offset*="lg-07"], + .col-off-lg-7, .column-off-lg-7, .col-offset-lg-7, .column-offset-lg-7, [offset*="lg-7"]{ + margin:0 0 0 var(--col-07); + } + .col-off-lg-08, .column-off-lg-08, .col-offset-lg-08, .column-offset-lg-08, [offset*="lg-08"], + .col-off-lg-8, .column-off-lg-8, .col-offset-lg-8, .column-offset-lg-8, [offset*="lg-8"]{ + margin:0 0 0 var(--col-08); + } + .col-off-lg-09, .column-off-lg-09, .col-offset-lg-09, .column-offset-lg-09, [offset*="lg-09"], + .col-off-lg-9, .column-off-lg-9, .col-offset-lg-9, .column-offset-lg-9, [offset*="lg-9"]{ + margin:0 0 0 var(--col-09); + } + .col-off-lg-10, .column-off-lg-10, .col-offset-lg-10, .column-offset-lg-10, [offset*="lg-10"]{ + margin:0 0 0 var(--col-10); + } + .col-off-lg-11, .column-off-lg-11, .col-offset-lg-11, .column-offset-lg-11, [offset*="lg-11"]{ + margin:0 0 0 var(--col-11); + } + .col-off-lg-12, .column-off-lg-12, .col-offset-lg-12, .column-offset-lg-12, [offset*="lg-12"]{ + margin:0 0 0 var(--col-12); + } +} + +@media (max-width:992px){ + [class*="col-md-"], + [class*="column-md-"], + [column*="md-"]{ + padding: var(--md-padding); + display: inline-block; + float: left; + margin: 0 calc( var(--md-gutter) / 2 ) 0 calc( var(--md-gutter) / 2 ); + } + [class*="col-md-"].no-gutter, + [class*="column-md-"].no-gutter, + [column*="md-"].no-gutter, + [class*="col-md-"][no-gutter], + [class*="column-md-"][no-gutter], + [column*="md-"][no-gutter]{ + margin: 0; + } + [class*="col-md-"].no-padding, + [class*="column-md-"].no-padding, + [column*="md-"].no-padding, + [class*="col-md-"][no-padding], + [class*="column-md-"][no-padding], + [column*="md-"][no-padding]{ + padding: initial; + } + .col-md-1, .col-md-01, .column-md-1, .column-md-01, [column*="md-1"], [column*="md-01"]{ + width: calc( var(--col-01) - var(--md-gutter) ); + } + .col-md-1.no-gutter, .col-md-01.no-gutter, .column-md-1.no-gutter, .column-md-01.no-gutter, [column*="md-1"].no-gutter, [column*="md-01"].no-gutter, + .col-md-1[no-gutter], .col-md-01[no-gutter], .column-md-1[no-gutter], .column-md-01[no-gutter], [column*="md-1"][no-gutter], [column*="md-01"][no-gutter]{ + width: var(--col-01); + } + .col-md-2, .col-md-02, .column-md-2, .column-md-02, [column*="md-2"], [column*="md-02"]{ + width: calc( var(--col-02) - var(--md-gutter) ); + } + .col-md-2.no-gutter, .col-md-02.no-gutter, .column-md-2.no-gutter, .column-md-02.no-gutter, [column*="md-2"].no-gutter, [column*="md-02"].no-gutter, + .col-md-2[no-gutter], .col-md-02[no-gutter], .column-md-2[no-gutter], .column-md-02[no-gutter], [column*="md-2"][no-gutter], [column*="md-02"][no-gutter]{ + width: var(--col-02); + } + .col-md-3, .col-md-03, .column-md-3, .column-md-03, [column*="md-3"], [column*="md-03"]{ + width: calc( var(--col-03) - var(--md-gutter) ); + } + .col-md-3.no-gutter, .col-md-03.no-gutter, .column-md-3.no-gutter, .column-md-03.no-gutter, [column*="md-3"].no-gutter, [column*="md-03"].no-gutter, + .col-md-3[no-gutter], .col-md-03[no-gutter], .column-md-3[no-gutter], .column-md-03[no-gutter], [column*="md-3"][no-gutter], [column*="md-03"][no-gutter]{ + width: var(--col-03); + } + .col-md-4, .col-md-04, .column-md-4, .column-md-04, [column*="md-4"], [column*="md-04"]{ + width: calc( var(--col-04) - var(--md-gutter) ); + } + .col-md-4.no-gutter, .col-md-04.no-gutter, .column-md-4.no-gutter, .column-md-04.no-gutter, [column*="md-4"].no-gutter, [column*="md-04"].no-gutter, + .col-md-4[no-gutter], .col-md-04[no-gutter], .column-md-4[no-gutter], .column-md-04[no-gutter], [column*="md-4"][no-gutter], [column*="md-04"][no-gutter]{ + width: var(--col-04); + } + .col-md-5, .col-md-05, .column-md-5, .column-md-05, [column*="md-5"], [column*="md-05"]{ + width: calc( var(--col-05) - var(--md-gutter) ); + } + .col-md-5.no-gutter, .col-md-05.no-gutter, .column-md-5.no-gutter, .column-md-05.no-gutter, [column*="md-5"].no-gutter, [column*="md-05"].no-gutter, + .col-md-5[no-gutter], .col-md-05[no-gutter], .column-md-5[no-gutter], .column-md-05[no-gutter], [column*="md-5"][no-gutter], [column*="md-05"][no-gutter]{ + width: var(--col-05); + } + .col-md-6, .col-md-06, .column-md-6, .column-md-06, [column*="md-6"], [column*="md-06"]{ + width: calc( var(--col-06) - var(--md-gutter) ); + } + .col-md-6.no-gutter, .col-md-06.no-gutter, .column-md-6.no-gutter, .column-md-06.no-gutter, [column*="md-6"].no-gutter, [column*="md-06"].no-gutter, + .col-md-6[no-gutter], .col-md-06[no-gutter], .column-md-6[no-gutter], .column-md-06[no-gutter], [column*="md-6"][no-gutter], [column*="md-06"][no-gutter]{ + width: var(--col-06); + } + .col-md-7, .col-md-07, .column-md-7, .column-md-07, [column*="md-7"], [column*="md-07"]{ + width: calc( var(--col-07) - var(--md-gutter) ); + } + .col-md-7.no-gutter, .col-md-07.no-gutter, .column-md-7.no-gutter, .column-md-07.no-gutter, [column*="md-7"].no-gutter, [column*="md-07"].no-gutter, + .col-md-7[no-gutter], .col-md-07[no-gutter], .column-md-7[no-gutter], .column-md-07[no-gutter], [column*="md-7"][no-gutter], [column*="md-07"][no-gutter]{ + width: var(--col-07); + } + .col-md-8, .col-md-08, .column-md-8, .column-md-08, [column*="md-8"], [column*="md-08"]{ + width: calc( var(--col-08) - var(--md-gutter) ); + } + .col-md-8.no-gutter, .col-md-08.no-gutter, .column-md-8.no-gutter, .column-md-08.no-gutter, [column*="md-8"].no-gutter, [column*="md-08"].no-gutter, + .col-md-8[no-gutter], .col-md-08[no-gutter], .column-md-8[no-gutter], .column-md-08[no-gutter], [column*="md-8"][no-gutter], [column*="md-08"][no-gutter]{ + width: var(--col-08); + } + .col-md-9, .col-md-09, .column-md-9, .column-md-09, [column*="md-9"], [column*="md-09"]{ + width: calc( var(--col-09) - var(--md-gutter) ); + } + .col-md-9.no-gutter, .col-md-09.no-gutter, .column-md-9.no-gutter, .column-md-09.no-gutter, [column*="md-9"].no-gutter, [column*="md-09"].no-gutter, + .col-md-9[no-gutter], .col-md-09[no-gutter], .column-md-9[no-gutter], .column-md-09[no-gutter], [column*="md-9"][no-gutter], [column*="md-09"][no-gutter]{ + width: var(--col-09); + } + .col-md-10, .column-md-10, [column*="md-10"]{ + width: calc( var(--col-10) - var(--md-gutter) ); + } + .col-md-10.no-gutter, .column-md-10.no-gutter, [column*="md-10"].no-gutter, + .col-md-10[no-gutter], .column-md-10[no-gutter], [column*="md-10"][no-gutter]{ + width: var(--col-12); + } + .col-md-11, .column-md-11, [column*="md-11"]{ + width: calc( var(--col-11) - var(--md-gutter) ); + } + .col-md-11.no-gutter, .column-md-11.no-gutter, [column*="md-11"].no-gutter, + .col-md-11[no-gutter], .column-md-11[no-gutter], [column*="md-11"][no-gutter]{ + width: var(--col-11); + } + .col-md-12, .column-md-12, [column*="md-12"]{ + width: calc( var(--col-12) - var(--md-gutter) ); + } + .col-md-12.no-gutter, .column-md-12.no-gutter, [column*="md-12"].no-gutter, + .col-md-12[no-gutter], .column-md-12[no-gutter], [column*="md-12"][no-gutter]{ + width: var(--col-12); + } + /** offset **/ + .col-off-md-00, .column-off-md-00, .col-offset-md-00, .column-offset-md-00, [offset*="md-00"], + .col-off-md-0, .column-off-md-0, .col-offset-md-0, .column-offset-md-0, [offset*="md-0"]{ + margin:0 0px; + } + .col-off-md-01, .column-off-md-01, .col-offset-md-01, .column-offset-md-01, [offset*="md-01"], + .col-off-md-1, .column-off-md-1, .col-offset-md-1, .column-offset-md-1, [offset*="md-1"]{ + margin:0 0 0 var(--col-01); + } + .col-off-md-02, .column-off-md-02, .col-offset-md-02, .column-offset-md-02, [offset*="md-02"], + .col-off-md-2, .column-off-md-2, .col-offset-md-2, .column-offset-md-2, [offset*="md-2"]{ + margin:0 0 0 var(--col-02); + } + .col-off-md-03, .column-off-md-03, .col-offset-md-03, .column-offset-md-03, [offset*="md-03"], + .col-off-md-3, .column-off-md-3, .col-offset-md-3, .column-offset-md-3, [offset*="md-3"]{ + margin:0 0 0 var(--col-03); + } + .col-off-md-04, .column-off-md-04, .col-offset-md-04, .column-offset-md-04, [offset*="md-04"], + .col-off-md-4, .column-off-md-4, .col-offset-md-4, .column-offset-md-4, [offset*="md-4"]{ + margin:0 0 0 var(--col-04); + } + .col-off-md-05, .column-off-md-05, .col-offset-md-05, .column-offset-md-05, [offset*="md-05"], + .col-off-md-5, .column-off-md-5, .col-offset-md-5, .column-offset-md-5, [offset*="md-5"]{ + margin:0 0 0 var(--col-05); + } + .col-off-md-06, .column-off-md-06, .col-offset-md-06, .column-offset-md-06, [offset*="md-06"], + .col-off-md-6, .column-off-md-6, .col-offset-md-6, .column-offset-md-6, [offset*="md-6"]{ + margin:0 0 0 var(--col-06); + } + .col-off-md-07, .column-off-md-07, .col-offset-md-07, .column-offset-md-07, [offset*="md-07"], + .col-off-md-7, .column-off-md-7, .col-offset-md-7, .column-offset-md-7, [offset*="md-7"]{ + margin:0 0 0 var(--col-07); + } + .col-off-md-08, .column-off-md-08, .col-offset-md-08, .column-offset-md-08, [offset*="md-08"], + .col-off-md-8, .column-off-md-8, .col-offset-md-8, .column-offset-md-8, [offset*="md-8"]{ + margin:0 0 0 var(--col-08); + } + .col-off-md-09, .column-off-md-09, .col-offset-md-09, .column-offset-md-09, [offset*="md-09"], + .col-off-md-9, .column-off-md-9, .col-offset-md-9, .column-offset-md-9, [offset*="md-9"]{ + margin:0 0 0 var(--col-09); + } + .col-off-md-10, .column-off-md-10, .col-offset-md-10, .column-offset-md-10, [offset*="md-10"]{ + margin:0 0 0 var(--col-10); + } + .col-off-md-11, .column-off-md-11, .col-offset-md-11, .column-offset-md-11, [offset*="md-11"]{ + margin:0 0 0 var(--col-11); + } + .col-off-md-12, .column-off-md-12, .col-offset-md-12, .column-offset-md-12, [offset*="md-12"]{ + margin:0 0 0 var(--col-12); + } +} + +@media (max-width:768px){ + [class*="col-sm-"], + [class*="column-sm-"], + [column*="sm-"]{ + padding: var(--sm-padding); + display: inline-block; + float: left; + margin: 0 calc( var(--sm-gutter) / 2 ) 0 calc( var(--sm-gutter) / 2 ); + } + [class*="col-sm-"].no-gutter, + [class*="column-sm-"].no-gutter, + [column*="sm-"].no-gutter, + [class*="col-sm-"][no-gutter], + [class*="column-sm-"][no-gutter], + [column*="sm-"][no-gutter]{ + margin: 0; + } + [class*="col-sm-"].no-padding, + [class*="column-sm-"].no-padding, + [column*="sm-"].no-padding, + [class*="col-sm-"][no-padding], + [class*="column-sm-"][no-padding], + [column*="sm-"][no-padding]{ + padding: initial; + } + .col-sm-1, .col-sm-01, .column-sm-1, .column-sm-01, [column*="sm-1"], [column*="sm-01"]{ + width: calc( var(--col-01) - var(--sm-gutter) ); + } + .col-sm-1.no-gutter, .col-sm-01.no-gutter, .column-sm-1.no-gutter, .column-sm-01.no-gutter, [column*="sm-1"].no-gutter, [column*="sm-01"].no-gutter, + .col-sm-1[no-gutter], .col-sm-01[no-gutter], .column-sm-1[no-gutter], .column-sm-01[no-gutter], [column*="sm-1"][no-gutter], [column*="sm-01"][no-gutter]{ + width: var(--col-01); + } + .col-sm-2, .col-sm-02, .column-sm-2, .column-sm-02, [column*="sm-2"], [column*="sm-02"]{ + width: calc( var(--col-02) - var(--sm-gutter) ); + } + .col-sm-2.no-gutter, .col-sm-02.no-gutter, .column-sm-2.no-gutter, .column-sm-02.no-gutter, [column*="sm-2"].no-gutter, [column*="sm-02"].no-gutter, + .col-sm-2[no-gutter], .col-sm-02[no-gutter], .column-sm-2[no-gutter], .column-sm-02[no-gutter], [column*="sm-2"][no-gutter], [column*="sm-02"][no-gutter]{ + width: var(--col-02); + } + .col-sm-3, .col-sm-03, .column-sm-3, .column-sm-03, [column*="sm-3"], [column*="sm-03"]{ + width: calc( var(--col-03) - var(--sm-gutter) ); + } + .col-sm-3.no-gutter, .col-sm-03.no-gutter, .column-sm-3.no-gutter, .column-sm-03.no-gutter, [column*="sm-3"].no-gutter, [column*="sm-03"].no-gutter, + .col-sm-3[no-gutter], .col-sm-03[no-gutter], .column-sm-3[no-gutter], .column-sm-03[no-gutter], [column*="sm-3"][no-gutter], [column*="sm-03"][no-gutter]{ + width: var(--col-03); + } + .col-sm-4, .col-sm-04, .column-sm-4, .column-sm-04, [column*="sm-4"], [column*="sm-04"]{ + width: calc( var(--col-04) - var(--sm-gutter) ); + } + .col-sm-4.no-gutter, .col-sm-04.no-gutter, .column-sm-4.no-gutter, .column-sm-04.no-gutter, [column*="sm-4"].no-gutter, [column*="sm-04"].no-gutter, + .col-sm-4[no-gutter], .col-sm-04[no-gutter], .column-sm-4[no-gutter], .column-sm-04[no-gutter], [column*="sm-4"][no-gutter], [column*="sm-04"][no-gutter]{ + width: var(--col-04); + } + .col-sm-5, .col-sm-05, .column-sm-5, .column-sm-05, [column*="sm-5"], [column*="sm-05"]{ + width: calc( var(--col-05) - var(--sm-gutter) ); + } + .col-sm-5.no-gutter, .col-sm-05.no-gutter, .column-sm-5.no-gutter, .column-sm-05.no-gutter, [column*="sm-5"].no-gutter, [column*="sm-05"].no-gutter, + .col-sm-5[no-gutter], .col-sm-05[no-gutter], .column-sm-5[no-gutter], .column-sm-05[no-gutter], [column*="sm-5"][no-gutter], [column*="sm-05"][no-gutter]{ + width: var(--col-05); + } + .col-sm-6, .col-sm-06, .column-sm-6, .column-sm-06, [column*="sm-6"], [column*="sm-06"]{ + width: calc( var(--col-06) - var(--sm-gutter) ); + } + .col-sm-6.no-gutter, .col-sm-06.no-gutter, .column-sm-6.no-gutter, .column-sm-06.no-gutter, [column*="sm-6"].no-gutter, [column*="sm-06"].no-gutter, + .col-sm-6[no-gutter], .col-sm-06[no-gutter], .column-sm-6[no-gutter], .column-sm-06[no-gutter], [column*="sm-6"][no-gutter], [column*="sm-06"][no-gutter]{ + width: var(--col-06); + } + .col-sm-7, .col-sm-07, .column-sm-7, .column-sm-07, [column*="sm-7"], [column*="sm-07"]{ + width: calc( var(--col-07) - var(--sm-gutter) ); + } + .col-sm-7.no-gutter, .col-sm-07.no-gutter, .column-sm-7.no-gutter, .column-sm-07.no-gutter, [column*="sm-7"].no-gutter, [column*="sm-07"].no-gutter, + .col-sm-7[no-gutter], .col-sm-07[no-gutter], .column-sm-7[no-gutter], .column-sm-07[no-gutter], [column*="sm-7"][no-gutter], [column*="sm-07"][no-gutter]{ + width: var(--col-07); + } + .col-sm-8, .col-sm-08, .column-sm-8, .column-sm-08, [column*="sm-8"], [column*="sm-08"]{ + width: calc( var(--col-08) - var(--sm-gutter) ); + } + .col-sm-8.no-gutter, .col-sm-08.no-gutter, .column-sm-8.no-gutter, .column-sm-08.no-gutter, [column*="sm-8"].no-gutter, [column*="sm-08"].no-gutter, + .col-sm-8[no-gutter], .col-sm-08[no-gutter], .column-sm-8[no-gutter], .column-sm-08[no-gutter], [column*="sm-8"][no-gutter], [column*="sm-08"][no-gutter]{ + width: var(--col-08); + } + .col-sm-9, .col-sm-09, .column-sm-9, .column-sm-09, [column*="sm-9"], [column*="sm-09"]{ + width: calc( var(--col-09) - var(--sm-gutter) ); + } + .col-sm-9.no-gutter, .col-sm-09.no-gutter, .column-sm-9.no-gutter, .column-sm-09.no-gutter, [column*="sm-9"].no-gutter, [column*="sm-09"].no-gutter, + .col-sm-9[no-gutter], .col-sm-09[no-gutter], .column-sm-9[no-gutter], .column-sm-09[no-gutter], [column*="sm-9"][no-gutter], [column*="sm-09"][no-gutter]{ + width: var(--col-09); + } + .col-sm-10, .column-sm-10, [column*="sm-10"]{ + width: calc( var(--col-10) - var(--sm-gutter) ); + } + .col-sm-10.no-gutter, .column-sm-10.no-gutter, [column*="sm-10"].no-gutter, + .col-sm-10[no-gutter], .column-sm-10[no-gutter], [column*="sm-10"][no-gutter]{ + width: var(--col-12); + } + .col-sm-11, .column-sm-11, [column*="sm-11"]{ + width: calc( var(--col-11) - var(--sm-gutter) ); + } + .col-sm-11.no-gutter, .column-sm-11.no-gutter, [column*="sm-11"].no-gutter, + .col-sm-11[no-gutter], .column-sm-11[no-gutter], [column*="sm-11"][no-gutter]{ + width: var(--col-11); + } + .col-sm-12, .column-sm-12, [column*="sm-12"]{ + width: calc( var(--col-12) - var(--sm-gutter) ); + } + .col-sm-12.no-gutter, .column-sm-12.no-gutter, [column*="sm-12"].no-gutter, + .col-sm-12[no-gutter], .column-sm-12[no-gutter], [column*="sm-12"][no-gutter]{ + width: var(--col-12); + } + /** offset **/ + .col-off-sm-00, .column-off-sm-00, .col-offset-sm-00, .column-offset-sm-00, [offset*="sm-00"], + .col-off-sm-0, .column-off-sm-0, .col-offset-sm-0, .column-offset-sm-0, [offset*="sm-0"]{ + margin:0 0px; + } + .col-off-sm-01, .column-off-sm-01, .col-offset-sm-01, .column-offset-sm-01, [offset*="sm-01"], + .col-off-sm-1, .column-off-sm-1, .col-offset-sm-1, .column-offset-sm-1, [offset*="sm-1"]{ + margin:0 0 0 var(--col-01); + } + .col-off-sm-02, .column-off-sm-02, .col-offset-sm-02, .column-offset-sm-02, [offset*="sm-02"], + .col-off-sm-2, .column-off-sm-2, .col-offset-sm-2, .column-offset-sm-2, [offset*="sm-2"]{ + margin:0 0 0 var(--col-02); + } + .col-off-sm-03, .column-off-sm-03, .col-offset-sm-03, .column-offset-sm-03, [offset*="sm-03"], + .col-off-sm-3, .column-off-sm-3, .col-offset-sm-3, .column-offset-sm-3, [offset*="sm-3"]{ + margin:0 0 0 var(--col-03); + } + .col-off-sm-04, .column-off-sm-04, .col-offset-sm-04, .column-offset-sm-04, [offset*="sm-04"], + .col-off-sm-4, .column-off-sm-4, .col-offset-sm-4, .column-offset-sm-4, [offset*="sm-4"]{ + margin:0 0 0 var(--col-04); + } + .col-off-sm-05, .column-off-sm-05, .col-offset-sm-05, .column-offset-sm-05, [offset*="sm-05"], + .col-off-sm-5, .column-off-sm-5, .col-offset-sm-5, .column-offset-sm-5, [offset*="sm-5"]{ + margin:0 0 0 var(--col-05); + } + .col-off-sm-06, .column-off-sm-06, .col-offset-sm-06, .column-offset-sm-06, [offset*="sm-06"], + .col-off-sm-6, .column-off-sm-6, .col-offset-sm-6, .column-offset-sm-6, [offset*="sm-6"]{ + margin:0 0 0 var(--col-06); + } + .col-off-sm-07, .column-off-sm-07, .col-offset-sm-07, .column-offset-sm-07, [offset*="sm-07"], + .col-off-sm-7, .column-off-sm-7, .col-offset-sm-7, .column-offset-sm-7, [offset*="sm-7"]{ + margin:0 0 0 var(--col-07); + } + .col-off-sm-08, .column-off-sm-08, .col-offset-sm-08, .column-offset-sm-08, [offset*="sm-08"], + .col-off-sm-8, .column-off-sm-8, .col-offset-sm-8, .column-offset-sm-8, [offset*="sm-8"]{ + margin:0 0 0 var(--col-08); + } + .col-off-sm-09, .column-off-sm-09, .col-offset-sm-09, .column-offset-sm-09, [offset*="sm-09"], + .col-off-sm-9, .column-off-sm-9, .col-offset-sm-9, .column-offset-sm-9, [offset*="sm-9"]{ + margin:0 0 0 var(--col-09); + } + .col-off-sm-10, .column-off-sm-10, .col-offset-sm-10, .column-offset-sm-10, [offset*="sm-10"]{ + margin:0 0 0 var(--col-10); + } + .col-off-sm-11, .column-off-sm-11, .col-offset-sm-11, .column-offset-sm-11, [offset*="sm-11"]{ + margin:0 0 0 var(--col-11); + } + .col-off-sm-12, .column-off-sm-12, .col-offset-sm-12, .column-offset-sm-12, [offset*="sm-12"]{ + margin:0 0 0 var(--col-12); + } +} + +@media (max-width:425px){ + [class*="col-xs-"], + [class*="column-xs-"], + [column*="xs-"]{ + padding: var(--xs-padding); + display: inline-block; + float: left; + margin: 0 calc( var(--xs-gutter) / 2 ) 0 calc( var(--xs-gutter) / 2 ); + } + [class*="col-xs-"].no-gutter, + [class*="column-xs-"].no-gutter, + [column*="xs-"].no-gutter, + [class*="col-xs-"][no-gutter], + [class*="column-xs-"][no-gutter], + [column*="xs-"][no-gutter]{ + margin: 0; + } + [class*="col-xs-"].no-padding, + [class*="column-xs-"].no-padding, + [column*="xs-"].no-padding, + [class*="col-xs-"][no-padding], + [class*="column-xs-"][no-padding], + [column*="xs-"][no-padding]{ + padding: initial; + } + .col-xs-1, .col-xs-01, .column-xs-1, .column-xs-01, [column*="xs-1"], [column*="xs-01"]{ + width: calc( var(--col-01) - var(--xs-gutter) ); + } + .col-xs-1.no-gutter, .col-xs-01.no-gutter, .column-xs-1.no-gutter, .column-xs-01.no-gutter, [column*="xs-1"].no-gutter, [column*="xs-01"].no-gutter, + .col-xs-1[no-gutter], .col-xs-01[no-gutter], .column-xs-1[no-gutter], .column-xs-01[no-gutter], [column*="xs-1"][no-gutter], [column*="xs-01"][no-gutter]{ + width: var(--col-01); + } + .col-xs-2, .col-xs-02, .column-xs-2, .column-xs-02, [column*="xs-2"], [column*="xs-02"]{ + width: calc( var(--col-02) - var(--xs-gutter) ); + } + .col-xs-2.no-gutter, .col-xs-02.no-gutter, .column-xs-2.no-gutter, .column-xs-02.no-gutter, [column*="xs-2"].no-gutter, [column*="xs-02"].no-gutter, + .col-xs-2[no-gutter], .col-xs-02[no-gutter], .column-xs-2[no-gutter], .column-xs-02[no-gutter], [column*="xs-2"][no-gutter], [column*="xs-02"][no-gutter]{ + width: var(--col-02); + } + .col-xs-3, .col-xs-03, .column-xs-3, .column-xs-03, [column*="xs-3"], [column*="xs-03"]{ + width: calc( var(--col-03) - var(--xs-gutter) ); + } + .col-xs-3.no-gutter, .col-xs-03.no-gutter, .column-xs-3.no-gutter, .column-xs-03.no-gutter, [column*="xs-3"].no-gutter, [column*="xs-03"].no-gutter, + .col-xs-3[no-gutter], .col-xs-03[no-gutter], .column-xs-3[no-gutter], .column-xs-03[no-gutter], [column*="xs-3"][no-gutter], [column*="xs-03"][no-gutter]{ + width: var(--col-03); + } + .col-xs-4, .col-xs-04, .column-xs-4, .column-xs-04, [column*="xs-4"], [column*="xs-04"]{ + width: calc( var(--col-04) - var(--xs-gutter) ); + } + .col-xs-4.no-gutter, .col-xs-04.no-gutter, .column-xs-4.no-gutter, .column-xs-04.no-gutter, [column*="xs-4"].no-gutter, [column*="xs-04"].no-gutter, + .col-xs-4[no-gutter], .col-xs-04[no-gutter], .column-xs-4[no-gutter], .column-xs-04[no-gutter], [column*="xs-4"][no-gutter], [column*="xs-04"][no-gutter]{ + width: var(--col-04); + } + .col-xs-5, .col-xs-05, .column-xs-5, .column-xs-05, [column*="xs-5"], [column*="xs-05"]{ + width: calc( var(--col-05) - var(--xs-gutter) ); + } + .col-xs-5.no-gutter, .col-xs-05.no-gutter, .column-xs-5.no-gutter, .column-xs-05.no-gutter, [column*="xs-5"].no-gutter, [column*="xs-05"].no-gutter, + .col-xs-5[no-gutter], .col-xs-05[no-gutter], .column-xs-5[no-gutter], .column-xs-05[no-gutter], [column*="xs-5"][no-gutter], [column*="xs-05"][no-gutter]{ + width: var(--col-05); + } + .col-xs-6, .col-xs-06, .column-xs-6, .column-xs-06, [column*="xs-6"], [column*="xs-06"]{ + width: calc( var(--col-06) - var(--xs-gutter) ); + } + .col-xs-6.no-gutter, .col-xs-06.no-gutter, .column-xs-6.no-gutter, .column-xs-06.no-gutter, [column*="xs-6"].no-gutter, [column*="xs-06"].no-gutter, + .col-xs-6[no-gutter], .col-xs-06[no-gutter], .column-xs-6[no-gutter], .column-xs-06[no-gutter], [column*="xs-6"][no-gutter], [column*="xs-06"][no-gutter]{ + width: var(--col-06); + } + .col-xs-7, .col-xs-07, .column-xs-7, .column-xs-07, [column*="xs-7"], [column*="xs-07"]{ + width: calc( var(--col-07) - var(--xs-gutter) ); + } + .col-xs-7.no-gutter, .col-xs-07.no-gutter, .column-xs-7.no-gutter, .column-xs-07.no-gutter, [column*="xs-7"].no-gutter, [column*="xs-07"].no-gutter, + .col-xs-7[no-gutter], .col-xs-07[no-gutter], .column-xs-7[no-gutter], .column-xs-07[no-gutter], [column*="xs-7"][no-gutter], [column*="xs-07"][no-gutter]{ + width: var(--col-07); + } + .col-xs-8, .col-xs-08, .column-xs-8, .column-xs-08, [column*="xs-8"], [column*="xs-08"]{ + width: calc( var(--col-08) - var(--xs-gutter) ); + } + .col-xs-8.no-gutter, .col-xs-08.no-gutter, .column-xs-8.no-gutter, .column-xs-08.no-gutter, [column*="xs-8"].no-gutter, [column*="xs-08"].no-gutter, + .col-xs-8[no-gutter], .col-xs-08[no-gutter], .column-xs-8[no-gutter], .column-xs-08[no-gutter], [column*="xs-8"][no-gutter], [column*="xs-08"][no-gutter]{ + width: var(--col-08); + } + .col-xs-9, .col-xs-09, .column-xs-9, .column-xs-09, [column*="xs-9"], [column*="xs-09"]{ + width: calc( var(--col-09) - var(--xs-gutter) ); + } + .col-xs-9.no-gutter, .col-xs-09.no-gutter, .column-xs-9.no-gutter, .column-xs-09.no-gutter, [column*="xs-9"].no-gutter, [column*="xs-09"].no-gutter, + .col-xs-9[no-gutter], .col-xs-09[no-gutter], .column-xs-9[no-gutter], .column-xs-09[no-gutter], [column*="xs-9"][no-gutter], [column*="xs-09"][no-gutter]{ + width: var(--col-09); + } + .col-xs-10, .column-xs-10, [column*="xs-10"]{ + width: calc( var(--col-10) - var(--xs-gutter) ); + } + .col-xs-10.no-gutter, .column-xs-10.no-gutter, [column*="xs-10"].no-gutter, + .col-xs-10[no-gutter], .column-xs-10[no-gutter], [column*="xs-10"][no-gutter]{ + width: var(--col-12); + } + .col-xs-11, .column-xs-11, [column*="xs-11"]{ + width: calc( var(--col-11) - var(--xs-gutter) ); + } + .col-xs-11.no-gutter, .column-xs-11.no-gutter, [column*="xs-11"].no-gutter, + .col-xs-11[no-gutter], .column-xs-11[no-gutter], [column*="xs-11"][no-gutter]{ + width: var(--col-11); + } + .col-xs-12, .column-xs-12, [column*="xs-12"]{ + width: calc( var(--col-12) - var(--xs-gutter) ); + } + .col-xs-12.no-gutter, .column-xs-12.no-gutter, [column*="xs-12"].no-gutter, + .col-xs-12[no-gutter], .column-xs-12[no-gutter], [column*="xs-12"][no-gutter]{ + width: var(--col-12); + } + /** offset **/ + .col-off-xs-00, .column-off-xs-00, .col-offset-xs-00, .column-offset-xs-00, [offset*="xs-00"], + .col-off-xs-0, .column-off-xs-0, .col-offset-xs-0, .column-offset-xs-0, [offset*="xs-0"]{ + margin:0 0px; + } + .col-off-xs-01, .column-off-xs-01, .col-offset-xs-01, .column-offset-xs-01, [offset*="xs-01"], + .col-off-xs-1, .column-off-xs-1, .col-offset-xs-1, .column-offset-xs-1, [offset*="xs-1"]{ + margin:0 0 0 var(--col-01); + } + .col-off-xs-02, .column-off-xs-02, .col-offset-xs-02, .column-offset-xs-02, [offset*="xs-02"], + .col-off-xs-2, .column-off-xs-2, .col-offset-xs-2, .column-offset-xs-2, [offset*="xs-2"]{ + margin:0 0 0 var(--col-02); + } + .col-off-xs-03, .column-off-xs-03, .col-offset-xs-03, .column-offset-xs-03, [offset*="xs-03"], + .col-off-xs-3, .column-off-xs-3, .col-offset-xs-3, .column-offset-xs-3, [offset*="xs-3"]{ + margin:0 0 0 var(--col-03); + } + .col-off-xs-04, .column-off-xs-04, .col-offset-xs-04, .column-offset-xs-04, [offset*="xs-04"], + .col-off-xs-4, .column-off-xs-4, .col-offset-xs-4, .column-offset-xs-4, [offset*="xs-4"]{ + margin:0 0 0 var(--col-04); + } + .col-off-xs-05, .column-off-xs-05, .col-offset-xs-05, .column-offset-xs-05, [offset*="xs-05"], + .col-off-xs-5, .column-off-xs-5, .col-offset-xs-5, .column-offset-xs-5, [offset*="xs-5"]{ + margin:0 0 0 var(--col-05); + } + .col-off-xs-06, .column-off-xs-06, .col-offset-xs-06, .column-offset-xs-06, [offset*="xs-06"], + .col-off-xs-6, .column-off-xs-6, .col-offset-xs-6, .column-offset-xs-6, [offset*="xs-6"]{ + margin:0 0 0 var(--col-06); + } + .col-off-xs-07, .column-off-xs-07, .col-offset-xs-07, .column-offset-xs-07, [offset*="xs-07"], + .col-off-xs-7, .column-off-xs-7, .col-offset-xs-7, .column-offset-xs-7, [offset*="xs-7"]{ + margin:0 0 0 var(--col-07); + } + .col-off-xs-08, .column-off-xs-08, .col-offset-xs-08, .column-offset-xs-08, [offset*="xs-08"], + .col-off-xs-8, .column-off-xs-8, .col-offset-xs-8, .column-offset-xs-8, [offset*="xs-8"]{ + margin:0 0 0 var(--col-08); + } + .col-off-xs-09, .column-off-xs-09, .col-offset-xs-09, .column-offset-xs-09, [offset*="xs-09"], + .col-off-xs-9, .column-off-xs-9, .col-offset-xs-9, .column-offset-xs-9, [offset*="xs-9"]{ + margin:0 0 0 var(--col-09); + } + .col-off-xs-10, .column-off-xs-10, .col-offset-xs-10, .column-offset-xs-10, [offset*="xs-10"]{ + margin:0 0 0 var(--col-10); + } + .col-off-xs-11, .column-off-xs-11, .col-offset-xs-11, .column-offset-xs-11, [offset*="xs-11"]{ + margin:0 0 0 var(--col-11); + } + .col-off-xs-12, .column-off-xs-12, .col-offset-xs-12, .column-offset-xs-12, [offset*="xs-12"]{ + margin:0 0 0 var(--col-12); + } +} + +@media (max-width:320px){ + [class*="col-xxs-"], + [class*="column-xxs-"], + [column*="xxs-"]{ + padding: var(--xxs-padding); + display: inline-block; + float: left; + margin: 0 calc( var(--xxs-gutter) / 2 ) 0 calc( var(--xxs-gutter) / 2 ); + } + [class*="col-xxs-"].no-gutter, + [class*="column-xxs-"].no-gutter, + [column*="xxs-"].no-gutter, + [class*="col-xxs-"][no-gutter], + [class*="column-xxs-"][no-gutter], + [column*="xxs-"][no-gutter]{ + margin: 0; + } + [class*="col-xxs-"].no-padding, + [class*="column-xxs-"].no-padding, + [column*="xxs-"].no-padding, + [class*="col-xxs-"][no-padding], + [class*="column-xxs-"][no-padding], + [column*="xxs-"][no-padding]{ + padding: initial; + } + .col-xxs-1, .col-xxs-01, .column-xxs-1, .column-xxs-01, [column*="xxs-1"], [column*="xxs-01"]{ + width: calc( var(--col-01) - var(--xxs-gutter) ); + } + .col-xxs-1.no-gutter, .col-xxs-01.no-gutter, .column-xxs-1.no-gutter, .column-xxs-01.no-gutter, [column*="xxs-1"].no-gutter, [column*="xxs-01"].no-gutter, + .col-xxs-1[no-gutter], .col-xxs-01[no-gutter], .column-xxs-1[no-gutter], .column-xxs-01[no-gutter], [column*="xxs-1"][no-gutter], [column*="xxs-01"][no-gutter]{ + width: var(--col-01); + } + .col-xxs-2, .col-xxs-02, .column-xxs-2, .column-xxs-02, [column*="xxs-2"], [column*="xxs-02"]{ + width: calc( var(--col-02) - var(--xxs-gutter) ); + } + .col-xxs-2.no-gutter, .col-xxs-02.no-gutter, .column-xxs-2.no-gutter, .column-xxs-02.no-gutter, [column*="xxs-2"].no-gutter, [column*="xxs-02"].no-gutter, + .col-xxs-2[no-gutter], .col-xxs-02[no-gutter], .column-xxs-2[no-gutter], .column-xxs-02[no-gutter], [column*="xxs-2"][no-gutter], [column*="xxs-02"][no-gutter]{ + width: var(--col-02); + } + .col-xxs-3, .col-xxs-03, .column-xxs-3, .column-xxs-03, [column*="xxs-3"], [column*="xxs-03"]{ + width: calc( var(--col-03) - var(--xxs-gutter) ); + } + .col-xxs-3.no-gutter, .col-xxs-03.no-gutter, .column-xxs-3.no-gutter, .column-xxs-03.no-gutter, [column*="xxs-3"].no-gutter, [column*="xxs-03"].no-gutter, + .col-xxs-3[no-gutter], .col-xxs-03[no-gutter], .column-xxs-3[no-gutter], .column-xxs-03[no-gutter], [column*="xxs-3"][no-gutter], [column*="xxs-03"][no-gutter]{ + width: var(--col-03); + } + .col-xxs-4, .col-xxs-04, .column-xxs-4, .column-xxs-04, [column*="xxs-4"], [column*="xxs-04"]{ + width: calc( var(--col-04) - var(--xxs-gutter) ); + } + .col-xxs-4.no-gutter, .col-xxs-04.no-gutter, .column-xxs-4.no-gutter, .column-xxs-04.no-gutter, [column*="xxs-4"].no-gutter, [column*="xxs-04"].no-gutter, + .col-xxs-4[no-gutter], .col-xxs-04[no-gutter], .column-xxs-4[no-gutter], .column-xxs-04[no-gutter], [column*="xxs-4"][no-gutter], [column*="xxs-04"][no-gutter]{ + width: var(--col-04); + } + .col-xxs-5, .col-xxs-05, .column-xxs-5, .column-xxs-05, [column*="xxs-5"], [column*="xxs-05"]{ + width: calc( var(--col-05) - var(--xxs-gutter) ); + } + .col-xxs-5.no-gutter, .col-xxs-05.no-gutter, .column-xxs-5.no-gutter, .column-xxs-05.no-gutter, [column*="xxs-5"].no-gutter, [column*="xxs-05"].no-gutter, + .col-xxs-5[no-gutter], .col-xxs-05[no-gutter], .column-xxs-5[no-gutter], .column-xxs-05[no-gutter], [column*="xxs-5"][no-gutter], [column*="xxs-05"][no-gutter]{ + width: var(--col-05); + } + .col-xxs-6, .col-xxs-06, .column-xxs-6, .column-xxs-06, [column*="xxs-6"], [column*="xxs-06"]{ + width: calc( var(--col-06) - var(--xxs-gutter) ); + } + .col-xxs-6.no-gutter, .col-xxs-06.no-gutter, .column-xxs-6.no-gutter, .column-xxs-06.no-gutter, [column*="xxs-6"].no-gutter, [column*="xxs-06"].no-gutter, + .col-xxs-6[no-gutter], .col-xxs-06[no-gutter], .column-xxs-6[no-gutter], .column-xxs-06[no-gutter], [column*="xxs-6"][no-gutter], [column*="xxs-06"][no-gutter]{ + width: var(--col-06); + } + .col-xxs-7, .col-xxs-07, .column-xxs-7, .column-xxs-07, [column*="xxs-7"], [column*="xxs-07"]{ + width: calc( var(--col-07) - var(--xxs-gutter) ); + } + .col-xxs-7.no-gutter, .col-xxs-07.no-gutter, .column-xxs-7.no-gutter, .column-xxs-07.no-gutter, [column*="xxs-7"].no-gutter, [column*="xxs-07"].no-gutter, + .col-xxs-7[no-gutter], .col-xxs-07[no-gutter], .column-xxs-7[no-gutter], .column-xxs-07[no-gutter], [column*="xxs-7"][no-gutter], [column*="xxs-07"][no-gutter]{ + width: var(--col-07); + } + .col-xxs-8, .col-xxs-08, .column-xxs-8, .column-xxs-08, [column*="xxs-8"], [column*="xxs-08"]{ + width: calc( var(--col-08) - var(--xxs-gutter) ); + } + .col-xxs-8.no-gutter, .col-xxs-08.no-gutter, .column-xxs-8.no-gutter, .column-xxs-08.no-gutter, [column*="xxs-8"].no-gutter, [column*="xxs-08"].no-gutter, + .col-xxs-8[no-gutter], .col-xxs-08[no-gutter], .column-xxs-8[no-gutter], .column-xxs-08[no-gutter], [column*="xxs-8"][no-gutter], [column*="xxs-08"][no-gutter]{ + width: var(--col-08); + } + .col-xxs-9, .col-xxs-09, .column-xxs-9, .column-xxs-09, [column*="xxs-9"], [column*="xxs-09"]{ + width: calc( var(--col-09) - var(--xxs-gutter) ); + } + .col-xxs-9.no-gutter, .col-xxs-09.no-gutter, .column-xxs-9.no-gutter, .column-xxs-09.no-gutter, [column*="xxs-9"].no-gutter, [column*="xxs-09"].no-gutter, + .col-xxs-9[no-gutter], .col-xxs-09[no-gutter], .column-xxs-9[no-gutter], .column-xxs-09[no-gutter], [column*="xxs-9"][no-gutter], [column*="xxs-09"][no-gutter]{ + width: var(--col-09); + } + .col-xxs-10, .column-xxs-10, [column*="xxs-10"]{ + width: calc( var(--col-10) - var(--xxs-gutter) ); + } + .col-xxs-10.no-gutter, .column-xxs-10.no-gutter, [column*="xxs-10"].no-gutter, + .col-xxs-10[no-gutter], .column-xxs-10[no-gutter], [column*="xxs-10"][no-gutter]{ + width: var(--col-12); + } + .col-xxs-11, .column-xxs-11, [column*="xxs-11"]{ + width: calc( var(--col-11) - var(--xxs-gutter) ); + } + .col-xxs-11.no-gutter, .column-xxs-11.no-gutter, [column*="xxs-11"].no-gutter, + .col-xxs-11[no-gutter], .column-xxs-11[no-gutter], [column*="xxs-11"][no-gutter]{ + width: var(--col-11); + } + .col-xxs-12, .column-xxs-12, [column*="xxs-12"]{ + width: calc( var(--col-12) - var(--xxs-gutter) ); + } + .col-xxs-12.no-gutter, .column-xxs-12.no-gutter, [column*="xxs-12"].no-gutter, + .col-xxs-12[no-gutter], .column-xxs-12[no-gutter], [column*="xxs-12"][no-gutter]{ + width: var(--col-12); + } + /** offset **/ + .col-off-xxs-00, .column-off-xxs-00, .col-offset-xxs-00, .column-offset-xxs-00, [offset*="xxs-00"], + .col-off-xxs-0, .column-off-xxs-0, .col-offset-xxs-0, .column-offset-xxs-0, [offset*="xxs-0"]{ + margin:0 0px; + } + .col-off-xxs-01, .column-off-xxs-01, .col-offset-xxs-01, .column-offset-xxs-01, [offset*="xxs-01"], + .col-off-xxs-1, .column-off-xxs-1, .col-offset-xxs-1, .column-offset-xxs-1, [offset*="xxs-1"]{ + margin:0 0 0 var(--col-01); + } + .col-off-xxs-02, .column-off-xxs-02, .col-offset-xxs-02, .column-offset-xxs-02, [offset*="xxs-02"], + .col-off-xxs-2, .column-off-xxs-2, .col-offset-xxs-2, .column-offset-xxs-2, [offset*="xxs-2"]{ + margin:0 0 0 var(--col-02); + } + .col-off-xxs-03, .column-off-xxs-03, .col-offset-xxs-03, .column-offset-xxs-03, [offset*="xxs-03"], + .col-off-xxs-3, .column-off-xxs-3, .col-offset-xxs-3, .column-offset-xxs-3, [offset*="xxs-3"]{ + margin:0 0 0 var(--col-03); + } + .col-off-xxs-04, .column-off-xxs-04, .col-offset-xxs-04, .column-offset-xxs-04, [offset*="xxs-04"], + .col-off-xxs-4, .column-off-xxs-4, .col-offset-xxs-4, .column-offset-xxs-4, [offset*="xxs-4"]{ + margin:0 0 0 var(--col-04); + } + .col-off-xxs-05, .column-off-xxs-05, .col-offset-xxs-05, .column-offset-xxs-05, [offset*="xxs-05"], + .col-off-xxs-5, .column-off-xxs-5, .col-offset-xxs-5, .column-offset-xxs-5, [offset*="xxs-5"]{ + margin:0 0 0 var(--col-05); + } + .col-off-xxs-06, .column-off-xxs-06, .col-offset-xxs-06, .column-offset-xxs-06, [offset*="xxs-06"], + .col-off-xxs-6, .column-off-xxs-6, .col-offset-xxs-6, .column-offset-xxs-6, [offset*="xxs-6"]{ + margin:0 0 0 var(--col-06); + } + .col-off-xxs-07, .column-off-xxs-07, .col-offset-xxs-07, .column-offset-xxs-07, [offset*="xxs-07"], + .col-off-xxs-7, .column-off-xxs-7, .col-offset-xxs-7, .column-offset-xxs-7, [offset*="xxs-7"]{ + margin:0 0 0 var(--col-07); + } + .col-off-xxs-08, .column-off-xxs-08, .col-offset-xxs-08, .column-offset-xxs-08, [offset*="xxs-08"], + .col-off-xxs-8, .column-off-xxs-8, .col-offset-xxs-8, .column-offset-xxs-8, [offset*="xxs-8"]{ + margin:0 0 0 var(--col-08); + } + .col-off-xxs-09, .column-off-xxs-09, .col-offset-xxs-09, .column-offset-xxs-09, [offset*="xxs-09"], + .col-off-xxs-9, .column-off-xxs-9, .col-offset-xxs-9, .column-offset-xxs-9, [offset*="xxs-9"]{ + margin:0 0 0 var(--col-09); + } + .col-off-xxs-10, .column-off-xxs-10, .col-offset-xxs-10, .column-offset-xxs-10, [offset*="xxs-10"]{ + margin:0 0 0 var(--col-10); + } + .col-off-xxs-11, .column-off-xxs-11, .col-offset-xxs-11, .column-offset-xxs-11, [offset*="xxs-11"]{ + margin:0 0 0 var(--col-11); + } + .col-off-xxs-12, .column-off-xxs-12, .col-offset-xxs-12, .column-offset-xxs-12, [offset*="xxs-12"]{ + margin:0 0 0 var(--col-12); + } +} \ No newline at end of file diff --git a/Responsive Computer First/CSS Responsive computer.html b/Responsive Computer First/CSS Responsive computer.html new file mode 100644 index 0000000..4bbbf6b --- /dev/null +++ b/Responsive Computer First/CSS Responsive computer.html @@ -0,0 +1,77 @@ + + + Responsive Test + + + + + +
+
+

Basic css grid, Computer first

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
NAV BAR
+
CONTENT
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file