/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.mycolumn,
.mycolumns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 95%; }
  .mycolumn,
  .mycolumns {
    margin-left: 4%; }
  .mycolumn:first-child,
  .mycolumns:first-child {
    margin-left: 0; }
  .one.mycolumn,
  .one.mycolumns                    { width: 4.66666666667%; }
  .two.mycolumns                    { width: 13.3333333333%; }
  .three.mycolumns                  { width: 22%;            }
  .four.mycolumns                   { width: 30.6666666667%; }
  .five.mycolumns                   { width: 39.3333333333%; }
  .six.mycolumns                    { width: 48%;            }
  .seven.mycolumns                  { width: 56.6666666667%; }
  .eight.mycolumns                  { width: 65.3333333333%; }
  .nine.mycolumns                   { width: 74.0%;          }
  .ten.mycolumns                    { width: 82.6666666667%; }
  .eleven.mycolumns                 { width: 91.3333333333%; }
  .twelve.mycolumns                 { width: 100%; margin-left: 0; }

  .one-third.mycolumn               { width: 30.6666666667%; }
  .two-thirds.mycolumn              { width: 65.3333333333%; }

  .one-half.mycolumn                { width: 48%; }

  /* Offsets */
  .offset-by-one.mycolumn,
  .offset-by-one.mycolumns          { margin-left: 8.66666666667%; }
  .offset-by-two.mycolumn,
  .offset-by-two.mycolumns          { margin-left: 17.3333333333%; }
  .offset-by-three.mycolumn,
  .offset-by-three.mycolumns        { margin-left: 26%;            }
  .offset-by-four.mycolumn,
  .offset-by-four.mycolumns         { margin-left: 34.6666666667%; }
  .offset-by-five.mycolumn,
  .offset-by-five.mycolumns         { margin-left: 43.3333333333%; }
  .offset-by-six.mycolumn,
  .offset-by-six.mycolumns          { margin-left: 52%;            }
  .offset-by-seven.mycolumn,
  .offset-by-seven.mycolumns        { margin-left: 60.6666666667%; }
  .offset-by-eight.mycolumn,
  .offset-by-eight.mycolumns        { margin-left: 69.3333333333%; }
  .offset-by-nine.mycolumn,
  .offset-by-nine.mycolumns         { margin-left: 78.0%;          }
  .offset-by-ten.mycolumn,
  .offset-by-ten.mycolumns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.mycolumn,
  .offset-by-eleven.mycolumns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.mycolumn,
  .offset-by-one-third.mycolumns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.mycolumn,
  .offset-by-two-thirds.mycolumns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.mycolumn,
  .offset-by-one-half.mycolumns     { margin-left: 52%; }

}




/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }
 
 .dispBlock { display:block}