.container::after,.container::before{ content: '';display: table;clear: both;}
.container,.container-grid{ margin: 0 auto;}
.row{ margin-left: -10px;margin-right: -10px;}
.grid-1,.grid-10,.grid-11,.grid-12,.grid-2,.grid-3,.grid-4,.grid-5,.grid-6,.grid-7,.grid-8,.grid-9{ margin-left: 10px;margin-right: 10px;float: left;display: block;min-height: 1px;}
.grid-1{ width: calc(8.333% - 20px);}
.grid-2{ width: calc(16.666% - 20px);}
.grid-3{ width: calc(25% - 20px);}
.grid-4{ width: calc(33.333% - 20px);}
.grid-5{ width: calc(41.666% - 20px);}
.grid-6{ width: calc(50% - 20px);}
.grid-7{ width: calc(58.333% - 20px);}
.grid-8{ width: calc(66.666% - 20px);}
.grid-9{ width: calc(75% - 20px);}
.grid-10{ width: calc(83.333% - 20px);}
.grid-11{ width: calc(91.666% - 20px);}
.grid-12{ width: calc(100% - 20px);}
@media (min-width:992px){ .container, .container-grid{  max-width: 960px; }}
@media only screen and (max-width:769px){ .container, .container-grid{  max-width: 720px; }.grid-1, .grid-10, .grid-11, .grid-12, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9{  width: calc(100% - 20px); }}
@media only screen and (max-width:576px){ .container, .container-grid{  max-width: 540px; }}
@media only screen and (min-width:1200px){ .container, .container-grid{  max-width: 1140px;margin: 0 auto!important; }}
@media screen and (max-width:350px){ .container, .container-grid{  max-width: 300px; }}
@media only screen and (max-width:1200px){.container,  .container-grid{padding: 0 10px;}