/* containers */ * { box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .wrap-boxed { padding-left: 15px; padding-right: 15px; width: 1200px; margin-right: auto; margin-left: auto; } .wrap-boxed-narrow { padding-left: 15px; padding-right: 15px; width: 800px; margin-left: auto; margin-right: auto; } .wrap-full { margin-right: auto; margin-left: auto; overflow: hidden; } .row { margin-left: 0; margin-right: 0; } .row:after, .row:before, .wrap-full:after, .wrap-full:before, .wrap-boxed:after, .wrap-boxed:before { display: table; line-height: 0; content: ''; clear: both; } /* columns */ .col-xl-12 { width: 100%; } .col-xl-11 { width: 91.6666%; } .col-xl-10 { width: 83.3333%; } .col-xl-9 { width: 75%; } .col-xl-8 { width: 66.6666%; } .col-xl-7 { width: 58.3333%; } .col-xl-6 { width: 50%; } .col-xl-5 { width: 41.6666%; } .col-xl-4 { width: 33.3333%; } .col-xl-3 { width: 25%; } .col-xl-2 { width: 16.6666%; } .col-xl-1 { width: 8.33333%; } [class^="col-"], [class*=" col-"] { float: left; position: relative; min-height: 1px; } /* offsets */ .col-off-12 { margin-left: 100%; } .col-off-11 { margin-left: 91.6666%; } .col-off-10 { margin-left: 83.3333%; } .col-off-9 { margin-left: 75%; } .col-off-8 { margin-left: 66.6666%; } .col-off-7 { margin-left: 58.3333%; } .col-off-6 { margin-left: 50%; } .col-off-5 { margin-left: 41.6666%; } .col-off-4 { margin-left: 33.3333%; } .col-off-3 { margin-left: 25%; } .col-off-2 { margin-left: 16.6666%; } .col-off-1 { margin-left: 8.33%; } /* responsive */ @media (max-width: 1200px) { .wrap-boxed, .wrap-boxed-narrow { width: 100%; } .hide-l { display: none !important; } .col-l-12 { width: 100%; } .col-l-11 { width: 91.6666%; } .col-l-10 { width: 83.3333%; } .col-l-9 { width: 75%; } .col-l-8 { width: 66.6666%; } .col-l-7 { width: 58.3333%; } .col-l-6 { width: 50%; } .col-l-5 { width: 41.6666%; } .col-l-4 { width: 33.3333%; } .col-l-3 { width: 25%; } .col-l-2 { width: 16.6666%; } .col-l-1 { width: 8.3333%; } } @media (max-width: 992px) { .hide-m { display: none !important; } .col-m-12 { width: 100%; } .col-m-11 { width: 91.6666%; } .col-m-10 { width: 83.3333%; } .col-m-9 { width: 75%; } .col-m-8 { width: 66.6666%; } .col-m-7 { width: 58.3333%; } .col-m-6 { width: 50%; } .col-m-5 { width: 41.6666%; } .col-m-4 { width: 33.3333%; } .col-m-3 { width: 25%; } .col-m-2 { width: 16.6666%; } .col-m-1 { width: 8.3333%; } } @media (max-width: 768px) { .hide-s { display: none !important; } .col-s-12 { width: 100%; } .col-s-11 { width: 91.6666%; } .col-s-10 { width: 83.3333%; } .col-s-9 { width: 75%; } .col-s-8 { width: 66.6666%; } .col-s-7 { width: 58.3333%; } .col-s-6 { width: 50%; } .col-s-5 { width: 41.6666%; } .col-s-4 { width: 33.3333%; } .col-s-3 { width: 25%; } .col-s-2 { width: 16.6666%; } .col-s-1 { width: 8.3333%; } } @media (max-width: 480px) { .wrap-boxed, .wrap-boxed-narrow { padding-left: 0; padding-right: 0; } .vc_row { margin-left: 0; margin-right: 0; } .row { margin-left: 0 !important; margin-right: 0 !important; } .hide-xs { display: none !important; } [class^="col-"], [class*=" col-"] { width: 100%; } [class^="col-"] [class^="col-"], [class*=" col-"] [class*=" col-"] { width: 100%; } } /* gutter */ .row.gutter-5 { margin-right: -2.5px; margin-left: -2.5px; } .row.gutter-10 { margin-right: -5px; margin-left: -5px; } .row.gutter-15 { margin-right: -7.5px; margin-left: -7.5px; } .row.gutter-20 { margin-right: -10px; margin-left: -10px; } .row.gutter-25 { margin-right: -12.5px; margin-left: -12.5px; } .row.gutter-30 { margin-right: -15px; margin-left: -15px; } .row.gutter-35 { margin-right: -17.5px; margin-left: -17.5px; } .row.gutter-40 { margin-right: -20px; margin-left: -20px; } .row.gutter-45 { margin-right: -22.5px; margin-left: -22.5px; } .row.gutter-50 { margin-right: -25px; margin-left: -25px; } .row.gutter-5 > [class^="col-"] { padding: 2.5px; } .row.gutter-10 > [class^="col-"] { padding: 5px; } .row.gutter-15 > [class^="col-"] { padding: 7.5px; } .row.gutter-20 > [class^="col-"] { padding: 10px; } .row.gutter-25 > [class^="col-"] { padding: 12.5px; } .row.gutter-30 > [class^="col-"], .row.gutter-30 > [class*=" col-"] { padding: 15px; } .row.gutter-35 > [class^="col-"] { padding: 17.5px; } .row.gutter-40 > [class^="col-"] { padding: 20px; } .row.gutter-45 > [class^="col-"] { padding: 22.5px; } .row.gutter-50 > [class^="col-"] { padding: 25px; }