example.css

*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.row{margin:0 auto;max-width:1240px;padding-left:5px;padding-right:5px}.row:after,.row:before{content:" ";display:table}.row:after{clear:both}@media screen and (min-width:641px){.row{padding-left:5px;padding-right:5px}}@media screen and (min-width:769px){.row{padding-left:10px;padding-right:10px}}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,[class*=col-]{float:left;padding-left:5px;padding-right:5px;display:block}@media screen and (min-width:641px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,[class*=col-]{padding-left:5px;padding-right:5px}}@media screen and (min-width:769px){.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-offset-1,.col-lg-offset-10,.col-lg-offset-11,.col-lg-offset-12,.col-lg-offset-2,.col-lg-offset-3,.col-lg-offset-4,.col-lg-offset-5,.col-lg-offset-6,.col-lg-offset-7,.col-lg-offset-8,.col-lg-offset-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-offset-1,.col-md-offset-10,.col-md-offset-11,.col-md-offset-12,.col-md-offset-2,.col-md-offset-3,.col-md-offset-4,.col-md-offset-5,.col-md-offset-6,.col-md-offset-7,.col-md-offset-8,.col-md-offset-9,[class*=col-]{padding-left:10px;padding-right:10px}}.row * .row,.row>.row,.row>[class*=col-]>.row{margin-left:-10px;margin-right:-10px}@media screen and (min-width:641px){.row * .row,.row>.row,.row>[class*=col-]>.row{margin-left:-10px;margin-right:-10px}}@media screen and (min-width:769px){.row * .row,.row>.row,.row>[class*=col-]>.row{margin-left:-20px;margin-right:-20px}}[class*=col-]{width:100%}.col-1{width:8.33333%}.col-offset-1{margin-left:8.33333%}@media screen and (min-width:641px){.col-md-1{width:8.33333%}}@media screen and (min-width:641px){.col-md-offset-1{width:8.33333%}}@media screen and (min-width:769px){.col-lg-1{width:8.33333%}}@media screen and (min-width:769px){.col-lg-offset-1{width:8.33333%}}.col-2{width:16.66667%}.col-offset-2{margin-left:16.66667%}@media screen and (min-width:641px){.col-md-2{width:16.66667%}}@media screen and (min-width:641px){.col-md-offset-2{width:16.66667%}}@media screen and (min-width:769px){.col-lg-2{width:16.66667%}}@media screen and (min-width:769px){.col-lg-offset-2{width:16.66667%}}.col-3{width:25%}.col-offset-3{margin-left:25%}@media screen and (min-width:641px){.col-md-3{width:25%}}@media screen and (min-width:641px){.col-md-offset-3{width:25%}}@media screen and (min-width:769px){.col-lg-3{width:25%}}@media screen and (min-width:769px){.col-lg-offset-3{width:25%}}.col-4{width:33.33333%}.col-offset-4{margin-left:33.33333%}@media screen and (min-width:641px){.col-md-4{width:33.33333%}}@media screen and (min-width:641px){.col-md-offset-4{width:33.33333%}}@media screen and (min-width:769px){.col-lg-4{width:33.33333%}}@media screen and (min-width:769px){.col-lg-offset-4{width:33.33333%}}.col-5{width:41.66667%}.col-offset-5{margin-left:41.66667%}@media screen and (min-width:641px){.col-md-5{width:41.66667%}}@media screen and (min-width:641px){.col-md-offset-5{width:41.66667%}}@media screen and (min-width:769px){.col-lg-5{width:41.66667%}}@media screen and (min-width:769px){.col-lg-offset-5{width:41.66667%}}.col-6{width:50%}.col-offset-6{margin-left:50%}@media screen and (min-width:641px){.col-md-6{width:50%}}@media screen and (min-width:641px){.col-md-offset-6{width:50%}}@media screen and (min-width:769px){.col-lg-6{width:50%}}@media screen and (min-width:769px){.col-lg-offset-6{width:50%}}.col-7{width:58.33333%}.col-offset-7{margin-left:58.33333%}@media screen and (min-width:641px){.col-md-7{width:58.33333%}}@media screen and (min-width:641px){.col-md-offset-7{width:58.33333%}}@media screen and (min-width:769px){.col-lg-7{width:58.33333%}}@media screen and (min-width:769px){.col-lg-offset-7{width:58.33333%}}.col-8{width:66.66667%}.col-offset-8{margin-left:66.66667%}@media screen and (min-width:641px){.col-md-8{width:66.66667%}}@media screen and (min-width:641px){.col-md-offset-8{width:66.66667%}}@media screen and (min-width:769px){.col-lg-8{width:66.66667%}}@media screen and (min-width:769px){.col-lg-offset-8{width:66.66667%}}.col-9{width:75%}.col-offset-9{margin-left:75%}@media screen and (min-width:641px){.col-md-9{width:75%}}@media screen and (min-width:641px){.col-md-offset-9{width:75%}}@media screen and (min-width:769px){.col-lg-9{width:75%}}@media screen and (min-width:769px){.col-lg-offset-9{width:75%}}.col-10{width:83.33333%}.col-offset-10{margin-left:83.33333%}@media screen and (min-width:641px){.col-md-10{width:83.33333%}}@media screen and (min-width:641px){.col-md-offset-10{width:83.33333%}}@media screen and (min-width:769px){.col-lg-10{width:83.33333%}}@media screen and (min-width:769px){.col-lg-offset-10{width:83.33333%}}.col-11{width:91.66667%}.col-offset-11{margin-left:91.66667%}@media screen and (min-width:641px){.col-md-11{width:91.66667%}}@media screen and (min-width:641px){.col-md-offset-11{width:91.66667%}}@media screen and (min-width:769px){.col-lg-11{width:91.66667%}}@media screen and (min-width:769px){.col-lg-offset-11{width:91.66667%}}.col-12{width:100%}.col-offset-12{margin-left:100%}@media screen and (min-width:641px){.col-md-12{width:100%}}@media screen and (min-width:641px){.col-md-offset-12{width:100%}}@media screen and (min-width:769px){.col-lg-12{width:100%}}@media screen and (min-width:769px){.col-lg-offset-12{width:100%}}@media screen and (min-width:641px) and (max-width:768px){.hide-for-md{display:none!important}}@media screen and (min-width:769px) and (max-width:1024px){.hide-for-lg{display:none!important}}.box{height:50px;border-radius:10px;background:#ddd;margin-top:10px;margin-bottom:10px}