.container { width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; } .row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-lg-4,.col-lg-3,.col-lg-6,.col-lg-12,.col-sm-12, .col-md-6, .col-md-12 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } .text-center { text-align: center; } .clearfix::after { display: block; clear: both; content: ""; } .d-none { display: none; } .d-block { display: block; } @media (min-width: 576px) { .container { max-width: 540px; } .d-sm-none { display: none; } .d-sm-block { display: block; } .col-sm-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (min-width: 768px) { .container { max-width: 720px; } .d-md-none { display: none; } .d-md-block { display: block; } .col-md-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-md-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (min-width: 992px) { .container { max-width: 960px; } .d-lg-none { display: none; } .d-lg-block { display: block; } .col-lg-4 { -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } .col-lg-3 { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; } .col-lg-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .col-lg-12 { -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } @media (min-width: 1200px) { .container { max-width: 1140px; } .d-xl-none { display: none; } .d-xl-block { display: block; } }