.outer-wrapper {
  min-width: 320px;
  width: 100%;
  margin: 0 auto;
}

.inner-wrapper {
  margin: 0 10px;
}

.row {
  margin: 0 -10px;
  margin-top: 20px;
}

.row:first-child {
  margin-top: 0px;
}

/* see http://nicolasgallagher.com/micro-clearfix-hack/ */
.row::after {
  content: " ";
  display: table;
  clear: both;
}

.col {
  float: left;
  display: inline-block;
  margin: 0;
  margin-top: 20px;
  padding: 0 10px;
  -webkit-transition : none;
  transition: none;
}

.col:first-child {
  margin-top: 0;
}

.row-wrapper.center-align {
  text-align: center;
}

.row-wrapper.right-align {
  text-align: right;
}

.row-wrapper.center-align > *, .row-wrapper.right-align > * {
  text-align: left;
}

.row-wrapper.center-align > .row, .row-wrapper.right-align > .row {
  display: inline-block;
  vertical-align: top;
}

.row-wrapper.center-align > .row > *, .row-wrapper.right-align > .row > *{
  vertical-align: baseline;
}

.row > * {
  text-align: left;
}

.row.horizontal > .col {
  margin-top: 0;
}

.row.vertical > .col {
  float: none;
  display: block;
  width: auto;
  max-width: inherit;
}

.r-c-outer-container { margin-left: -20px; }
.r-c-outer-container.vertical {  margin: 0; margin-bottom: -20px; }
.r-c-container { display: table; width: 100%; }
.vertical .r-c-container{ display: block; }
.vertical .r-c1,
.vertical .r-c2,
.vertical .r-c3,
.vertical .r-c4
{ display: block; width: 100%; padding: 0; margin-bottom: 20px; }
.r-c1 { display: table-cell; vertical-align: top; width: 100%; padding-left: 20px; }
.r-c2 { display: table-cell; vertical-align: top; width: 50%; padding-left: 20px; }
.r-c3 { display: table-cell; vertical-align: top; width: 33.3333333%; padding-left: 20px; }
.r-c4 { display: table-cell; vertical-align: top; width: 25%; padding-left: 20px; }
.r-c5 { display: table-cell; vertical-align: top; width: 20%; padding-left: 20px; }
.r-c10 { display: table-cell; vertical-align: top; width: 10%; padding-left: 20px; }
.r-c12 { display: table-cell; vertical-align: top; width: 8.33333333%; padding-left: 20px; }
.r-cfill { display: table-cell; vertical-align: top; width: 100%; padding-left: 20px; }

@media only screen and (min-width: 1460px) {
  .outer-wrapper { width: 1440px; min-width: 1440px; max-width: 1440px; min-width: 1440px; min-width: 1440px; max-width: 1440px; max-width: 1440px; min-width: 1440px; max-width: 1440px; }
  .c1 { width: 100px; min-width: 100px; max-width: 100px; min-width: 100px; min-width: 100px; max-width: 100px; max-width: 100px; min-width: 100px; max-width: 100px; }
  .c2 { width: 220px; min-width: 220px; max-width: 220px; }
  .c3 { width: 340px; min-width: 340px; max-width: 340px; }
  .c4 { width: 460px; min-width: 460px; max-width: 460px; }
  .c5 { width: 580px; min-width: 580px; max-width: 580px; }
  .c6 { width: 700px; min-width: 700px; max-width: 700px; }
  .c7 { width: 820px; min-width: 820px; max-width: 820px; }
  .c8 { width: 940px; min-width: 940px; max-width: 940px; }
  .c9 { width: 1060px; min-width: 1060px; max-width: 1060px; }
  .c10 { width: 1180px; min-width: 1180px; max-width: 1180px; }
  .c11 { width: 1300px; min-width: 1300px; max-width: 1300px; }
  .c12 { width: 1420px; min-width: 1420px; max-width: 1420px; }
}

@media only screen and (min-width: 1340px) and (max-width: 1459px) {
  .outer-wrapper { width: 1320px; min-width: 1320px; max-width: 1320px; }
  .c1 { width: 90px; min-width: 90px; max-width: 90px; }
  .c2 { width: 200px; min-width: 200px; max-width: 200px; }
  .c3 { width: 310px; min-width: 310px; max-width: 310px; }
  .c4 { width: 420px; min-width: 420px; max-width: 420px; }
  .c5 { width: 530px; min-width: 530px; max-width: 530px; }
  .c6 { width: 640px; min-width: 640px; max-width: 640px; }
  .c7 { width: 750px; min-width: 750px; max-width: 750px; }
  .c8 { width: 860px; min-width: 860px; max-width: 860px; }
  .c9 { width: 970px; min-width: 970px; max-width: 970px; }
  .c10 { width: 1080px; min-width: 1080px; max-width: 1080px; }
  .c11 { width: 1190px; min-width: 1190px; max-width: 1190px; }
  .c12 { width: 1300px; min-width: 1300px; max-width: 1300px; }
}

@media only screen and (min-width: 1220px) and (max-width: 1339px) {
  .outer-wrapper { width: 1200px; min-width: 1200px; max-width: 1200px; }
  .c1 { width: 80px; min-width: 80px; max-width: 80px; }
  .c2 { width: 180px; min-width: 180px; max-width: 180px; }
  .c3 { width: 280px; min-width: 280px; max-width: 280px; }
  .c4 { width: 380px; min-width: 380px; max-width: 380px; }
  .c5 { width: 480px; min-width: 480px; max-width: 480px; }
  .c6 { width: 580px; min-width: 580px; max-width: 580px; }
  .c7 { width: 680px; min-width: 680px; max-width: 680px; }
  .c8 { width: 780px; min-width: 780px; max-width: 780px; }
  .c9 { width: 880px; min-width: 880px; max-width: 880px; }
  .c10 { width: 980px; min-width: 980px; max-width: 980px; }
  .c11 { width: 1080px; min-width: 1080px; max-width: 1080px; }
  .c12 { width: 1180px; min-width: 1180px; max-width: 1180px; }
}

@media only screen and (min-width: 1100px) and (max-width: 1219px) {
  .outer-wrapper { width: 1080px; min-width: 1080px; max-width: 1080px; }
  .c1 { width: 70px; min-width: 70px; max-width: 70px; }
  .c2 { width: 160px; min-width: 160px; max-width: 160px; }
  .c3 { width: 250px; min-width: 250px; max-width: 250px; }
  .c4 { width: 340px; min-width: 340px; max-width: 340px; }
  .c5 { width: 430px; min-width: 430px; max-width: 430px; }
  .c6 { width: 520px; min-width: 520px; max-width: 520px; }
  .c7 { width: 610px; min-width: 610px; max-width: 610px; }
  .c8 { width: 700px; min-width: 700px; max-width: 700px; }
  .c9 { width: 790px; min-width: 790px; max-width: 790px; }
  .c10 { width: 880px; min-width: 880px; max-width: 880px; }
  .c11 { width: 970px; min-width: 970px; max-width: 970px; }
  .c12 { width: 1060px; min-width: 1060px; max-width: 1060px; }
}

@media only screen and (min-width: 980px) and (max-width: 1099px) {
  .outer-wrapper { width: 960px; min-width: 960px; max-width: 960px; }
  .c1 { width: 60px; min-width: 60px; max-width: 60px; }
  .c2 { width: 140px; min-width: 140px; max-width: 140px; }
  .c3 { width: 220px; min-width: 220px; max-width: 220px; }
  .c4 { width: 300px; min-width: 300px; max-width: 300px; }
  .c5 { width: 380px; min-width: 380px; max-width: 380px; }
  .c6 { width: 460px; min-width: 460px; max-width: 460px; }
  .c7 { width: 540px; min-width: 540px; max-width: 540px; }
  .c8 { width: 620px; min-width: 620px; max-width: 620px; }
  .c9 { width: 700px; min-width: 700px; max-width: 700px; }
  .c10 { width: 780px; min-width: 780px; max-width: 780px; }
  .c11 { width: 860px; min-width: 860px; max-width: 860px; }
  .c12 { width: 940px; min-width: 940px; max-width: 940px; }
}

@media only screen and (min-width: 860px) and (max-width: 979px) {
  .outer-wrapper { width: 840px; min-width: 840px; max-width: 840px; }
  .c1 { width: 50px; min-width: 50px; max-width: 50px; }
  .c2 { width: 120px; min-width: 120px; max-width: 120px; }
  .c3 { width: 190px; min-width: 190px; max-width: 190px; }
  .c4 { width: 260px; min-width: 260px; max-width: 260px; }
  .c5 { width: 330px; min-width: 330px; max-width: 330px; }
  .c6 { width: 400px; min-width: 400px; max-width: 400px; }
  .c7 { width: 470px; min-width: 470px; max-width: 470px; }
  .c8 { width: 540px; min-width: 540px; max-width: 540px; }
  .c9 { width: 610px; min-width: 610px; max-width: 610px; }
  .c10 { width: 680px; min-width: 680px; max-width: 680px; }
  .c11 { width: 750px; min-width: 750px; max-width: 750px; }
  .c12 { width: 820px; min-width: 820px; max-width: 820px; }
}

@media only screen and (min-width: 740px) and (max-width: 859px) {
  .outer-wrapper { width: 720px; min-width: 720px; max-width: 720px; }
  .c1 { width: 40px; min-width: 40px; max-width: 40px; }
  .c2 { width: 100px; min-width: 100px; max-width: 100px; }
  .c3 { width: 160px; min-width: 160px; max-width: 160px; }
  .c4 { width: 220px; min-width: 220px; max-width: 220px; }
  .c5 { width: 280px; min-width: 280px; max-width: 280px; }
  .c6 { width: 340px; min-width: 340px; max-width: 340px; }
  .c7 { width: 400px; min-width: 400px; max-width: 400px; }
  .c8 { width: 460px; min-width: 460px; max-width: 460px; }
  .c9 { width: 520px; min-width: 520px; max-width: 520px; }
  .c10 { width: 580px; min-width: 580px; max-width: 580px; }
  .c11 { width: 640px; min-width: 640px; max-width: 640px; }
  .c12 { width: 700px; min-width: 700px; max-width: 700px; }
}

@media only screen and (min-width: 620px) and (max-width: 739px) {
  .outer-wrapper { width: 600px; min-width: 600px; max-width: 600px; }
  .c1 { width: 30px; min-width: 30px; max-width: 30px; }
  .c2 { width: 80px; min-width: 80px; max-width: 80px; }
  .c3 { width: 130px; min-width: 130px; max-width: 130px; }
  .c4 { width: 180px; min-width: 180px; max-width: 180px; }
  .c5 { width: 230px; min-width: 230px; max-width: 230px; }
  .c6 { width: 280px; min-width: 280px; max-width: 280px; }
  .c7 { width: 330px; min-width: 330px; max-width: 330px; }
  .c8 { width: 380px; min-width: 380px; max-width: 380px; }
  .c9 { width: 430px; min-width: 430px; max-width: 430px; }
  .c10 { width: 480px; min-width: 480px; max-width: 480px; }
  .c11 { width: 530px; min-width: 530px; max-width: 530px; }
  .c12 { width: 580px; min-width: 580px; max-width: 580px; }
}

@media only screen and (min-width: 569px) and (max-width: 619px) {
  .outer-wrapper { width: 480px; min-width: 480px; max-width: 480px; }
  .c1 { width: 20px; min-width: 20px; max-width: 20px; }
  .c2 { width: 60px; min-width: 60px; max-width: 60px; }
  .c3 { width: 100px; min-width: 100px; max-width: 100px; }
  .c4 { width: 140px; min-width: 140px; max-width: 140px; }
  .c5 { width: 180px; min-width: 180px; max-width: 180px; }
  .c6 { width: 220px; min-width: 220px; max-width: 220px; }
  .c7 { width: 260px; min-width: 260px; max-width: 260px; }
  .c8 { width: 300px; min-width: 300px; max-width: 300px; }
  .c9 { width: 340px; min-width: 340px; max-width: 340px; }
  .c10 { width: 380px; min-width: 380px; max-width: 380px; }
  .c11 { width: 420px; min-width: 420px; max-width: 420px; }
  .c12 { width: 460px; min-width: 460px; max-width: 460px; }
}

@media only screen and (min-width: 321px) and (max-width: 568px) {
  .outer-wrapper { width: 360px; min-width: 360px; max-width: 360px; }
  .row.horizontal > .col { margin-top: 20px; }
  .row.horizontal > .col:first-child { margin-top: 0; }
  .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { width: 340px; min-width: 340px; max-width: 340px; }
}

@media only screen and (max-width: 320px) {
  .outer-wrapper { width: 300px; min-width: 300px; max-width: 300px; }
  .row.horizontal > .col { margin-top: 20px; }
  .row.horizontal > .col:first-child { margin-top: 0; }
  .c1, .c2, .c3, .c4, .c5, .c6, .c7, .c8, .c9, .c10, .c11, .c12 { width: 280px; min-width: 280px; max-width: 280px; }
}