*, *:after, *:before {
  box-sizing: border-box;
}
/*** Default to smallest screen ***/
.container {
  margin:0 auto
}
.row {
  margin:0;padding:0
}
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* And the column layouts - and also 'xs' for tiny */
[class^="col-"], [class*=" col-"] {
  width:100%;
  xpadding:10px;
  xoutline:1px solid red;
}

/*** show- classes are hidden by default ***/
[class^="show-"], [class*=" show-"] {
  position:absolute;top:-10000px;left:0
}
/**** For anything other than the smallest size... ****/
[class^="col-"], [class*=" col-"] {
  float:left;
  padding:10px;
  position:relative;
}
[class^="col-"]:first-child, [class*=" col-"]:first-child {
  padding-left:10px;
}
@media all and (min-width:480px) {
  [class^="col-"], [class*=" col-"] {
    padding:15px;
  }
  /** Standard column sizes expressed as percentages... **/
  .col-sm-1  {width:8.333%}
  .col-sm-2   {width:16.667%}
  .col-sm-3 {width:25%}
  .col-sm-4   {width:33.333%}
  .col-sm-5   {width:41.667%}
  .col-sm-6   {width:50%}
  .col-sm-7   {width:58.333%}
  .col-sm-8   {width:66.667%}
  .col-sm-9   {width:75%}
  .col-sm-10 {width:83.333%}
  .col-sm-11 {width:91.667%}
  .col-sm-12 {width:100%}

  .col-sm-offset-1  {margin-left:8.333%}
  .col-sm-offset-2   {margin-left:16.667%}
  .col-sm-offset-3 {margin-left:25%}
  .col-sm-offset-4   {margin-left:33.333%}
  .col-sm-offset-5   {margin-left:41.667%}
  .col-sm-offset-6   {margin-left:50%}
  .col-sm-offset-7   {margin-left:58.333%}
  .col-sm-offset-8   {margin-left:66.667%}
  .col-sm-offset-9   {margin-left:75%}
  .col-sm-offset-10 {margin-left:83.333%}
  .col-sm-offset-11 {margin-left:91.667%}
  .col-sm-offset-12 {margin-left:100%}

  .col-sm-push-0 {left: auto}
  .col-sm-push-1 {left: 8.333%}
  .col-sm-push-2 {left: 16.667%}
  .col-sm-push-3 {left: 25%}
  .col-sm-push-4 {left: 33.333%}
  .col-sm-push-5 {left: 41.667%}
  .col-sm-push-6 {left: 50%}
  .col-sm-push-7 {left: 58.333%}
  .col-sm-push-8 {left: 66.667%}
  .col-sm-push-9 {left: 75%}
  .col-sm-push-10 {left: 83.333%}
  .col-sm-push-11 {left: 91.667%}
  .col-sm-push-12 {left: 100%}

  .col-sm-pull-0 {right: auto}
  .col-sm-pull-1 {right: 8.333%}
  .col-sm-pull-2 {right: 16.667%}
  .col-sm-pull-3 {right: 25%}
  .col-sm-pull-4 {right: 33.333%}
  .col-sm-pull-5 {right: 41.667%}
  .col-sm-pull-6 {right: 50%}
  .col-sm-pull-7 {right: 58.333%}
  .col-sm-pull-8 {right: 66.667%}
  .col-sm-pull-9 {right: 75%}
  .col-sm-pull-10 {right: 83.333%}
  .col-sm-pull-11 {right: 91.667%}
  .col-sm-pull-12 {right: 100%}
}

/** The "AND BIGGER" definitions **/
@media all and (min-width:768px) {
  /*** sm (small) **/
  .col-md-1   {width:8.333%}
  .col-md-2   {width:16.667%}
  .col-md-3   {width:25%}
  .col-md-4   {width:33.3333%}
  .col-md-5   {width:41.667%}
  .col-md-6   {width:50%}
  .col-md-7   {width:58.333%}
  .col-md-8   {width:66.66%}
  .col-md-9   {width:75%}
  .col-md-10 {width:83.333%}
  .col-md-11 {width:91.667%}
  .col-md-12 {width:100%}

  .col-md-offset-1  {margin-left:8.333%}
  .col-md-offset-2   {margin-left:16.667%}
  .col-md-offset-3 {margin-left:25%}
  .col-md-offset-4   {margin-left:33.333%}
  .col-md-offset-5   {margin-left:41.667%}
  .col-md-offset-6   {margin-left:50%}
  .col-md-offset-7   {margin-left:58.333%}
  .col-md-offset-8   {margin-left:66.667%}
  .col-md-offset-9   {margin-left:75%}
  .col-md-offset-10 {margin-left:83.333%}
  .col-md-offset-11 {margin-left:91.667%}
  .col-md-offset-12 {margin-left:100%}

  .col-md-push-0 {left: auto}
  .col-md-push-1 {left: 8.333%}
  .col-md-push-2 {left: 16.667%}
  .col-md-push-3 {left: 25%}
  .col-md-push-4 {left: 33.333%}
  .col-md-push-5 {left: 41.667%}
  .col-md-push-6 {left: 50%}
  .col-md-push-7 {left: 58.333%}
  .col-md-push-8 {left: 66.667%}
  .col-md-push-9 {left: 75%}
  .col-md-push-10 {left: 83.333%}
  .col-md-push-11 {left: 91.667%}
  .col-md-push-12 {left: 100%}

  .col-md-pull-0 {right: auto}
  .col-md-pull-1 {right: 8.333%}
  .col-md-pull-2 {right: 16.667%}
  .col-md-pull-3 {right: 25%}
  .col-md-pull-4 {right: 33.333%}
  .col-md-pull-5 {right: 41.667%}
  .col-md-pull-6 {right: 50%}
  .col-md-pull-7 {right: 58.333%}
  .col-md-pull-8 {right: 66.667%}
  .col-md-pull-9 {right: 75%}
  .col-md-pull-10 {right: 83.333%}
  .col-md-pull-11 {right: 91.667%}
  .col-md-pull-12 {right: 100%}
}
@media all and (min-width:992px) {
  /*** md (medium) **/
  .col-lg-1   {width:8.333%}
  .col-lg-2   {width:16.667%}
  .col-lg-3   {width:25%}
  .col-lg-4   {width:33%}
  .col-lg-5   {width:41.667%}
  .col-lg-6   {width:50%}
  .col-lg-7   {width:58.333%}
  .col-lg-8   {width:66%}
  .col-lg-9   {width:75%}
  .col-lg-10 {width:83.333%}
  .col-lg-11 {width:91.667%}
  .col-lg-12 {width:100%}

  .col-lg-offset-1  {margin-left:8.333%}
  .col-lg-offset-2   {margin-left:16.667%}
  .col-lg-offset-3 {margin-left:25%}
  .col-lg-offset-4   {margin-left:33.333%}
  .col-lg-offset-5   {margin-left:41.667%}
  .col-lg-offset-6   {margin-left:50%}
  .col-lg-offset-7   {margin-left:58.333%}
  .col-lg-offset-8   {margin-left:66.667%}
  .col-lg-offset-9   {margin-left:75%}
  .col-lg-offset-10 {margin-left:83.333%}
  .col-lg-offset-11 {margin-left:91.667%}
  .col-lg-offset-12 {margin-left:100%}

  .col-lg-push-0 {left: auto}
  .col-lg-push-1 {left: 8.333%}
  .col-lg-push-2 {left: 16.667%}
  .col-lg-push-3 {left: 25%}
  .col-lg-push-4 {left: 33.333%}
  .col-lg-push-5 {left: 41.667%}
  .col-lg-push-6 {left: 50%}
  .col-lg-push-7 {left: 58.333%}
  .col-lg-push-8 {left: 66.667%}
  .col-lg-push-9 {left: 75%}
  .col-lg-push-10 {left: 83.333%}
  .col-lg-push-11 {left: 91.667%}
  .col-lg-push-12 {left: 100%}

  .col-lg-pull-0 {right: auto}
  .col-lg-pull-1 {right: 8.333%}
  .col-lg-pull-2 {right: 16.667%}
  .col-lg-pull-3 {right: 25%}
  .col-lg-pull-4 {right: 33.333%}
  .col-lg-pull-5 {right: 41.667%}
  .col-lg-pull-6 {right: 50%}
  .col-lg-pull-7 {right: 58.333%}
  .col-lg-pull-8 {right: 66.667%}
  .col-lg-pull-9 {right: 75%}
  .col-lg-pull-10 {right: 83.333%}
  .col-lg-pull-11 {right: 91.667%}
  .col-lg-pull-12 {right: 100%}
}
@media all and (min-width:1200px) {
  /*** lg (large) **/
  .col-xl-1   {width:8.333%}
  .col-xl-2   {width:16.667%}
  .col-xl-3   {width:25%}
  .col-xl-4   {width:33%}
  .col-xl-5   {width:41.667%}
  .col-xl-6   {width:50%}
  .col-xl-7   {width:58.333%}
  .col-xl-8   {width:66%}
  .col-xl-9   {width:75%}
  .col-xl-10 {width:83.333%}
  .col-xl-11 {width:91.667%}
  .col-xl-12 {width:100%}

  .col-xl-offset-1  {margin-left:8.333%}
  .col-xl-offset-2   {margin-left:16.667%}
  .col-xl-offset-3 {margin-left:25%}
  .col-xl-offset-4   {margin-left:33.333%}
  .col-xl-offset-5   {margin-left:41.667%}
  .col-xl-offset-6   {margin-left:50%}
  .col-xl-offset-7   {margin-left:58.333%}
  .col-xl-offset-8   {margin-left:66.667%}
  .col-xl-offset-9   {margin-left:75%}
  .col-xl-offset-10 {margin-left:83.333%}
  .col-xl-offset-11 {margin-left:91.667%}
  .col-xl-offset-12 {margin-left:100%}

  .col-xl-push-0 {left: auto}
  .col-xl-push-1 {left: 8.333%}
  .col-xl-push-2 {left: 16.667%}
  .col-xl-push-3 {left: 25%}
  .col-xl-push-4 {left: 33.333%}
  .col-xl-push-5 {left: 41.667%}
  .col-xl-push-6 {left: 50%}
  .col-xl-push-7 {left: 58.333%}
  .col-xl-push-8 {left: 66.667%}
  .col-xl-push-9 {left: 75%}
  .col-xl-push-10 {left: 83.333%}
  .col-xl-push-11 {left: 91.667%}
  .col-xl-push-12 {left: 100%}

  .col-xl-pull-0 {right: auto}
  .col-xl-pull-1 {right: 8.333%}
  .col-xl-pull-2 {right: 16.667%}
  .col-xl-pull-3 {right: 25%}
  .col-xl-pull-4 {right: 33.333%}
  .col-xl-pull-5 {right: 41.667%}
  .col-xl-pull-6 {right: 50%}
  .col-xl-pull-7 {right: 58.333%}
  .col-xl-pull-8 {right: 66.667%}
  .col-xl-pull-9 {right: 75%}
  .col-xl-pull-10 {right: 83.333%}
  .col-xl-pull-11 {right: 91.667%}
  .col-xl-pull-12 {right: 100%}
}

/** Overrides for SPECIFIC break points **/
@media all and (max-width:480px) {
  .show-xs {position:static}
  .hide-xs {display:none}
}
@media all and (min-width:480px) and (max-width:767px) {
  /*** sm (small) **/
  .show-sm {position:static}
  .hide-sm {display:none}
}
@media all and (min-width:768px) and (max-width:991px) {
  /*** md (medium) **/
  .show-md {position:static}
  .hide-md {display:none}
}
@media all and (min-width:992px) and (max-width:1199px) {
  /*** lg (medium) **/
  .show-lg {position:static}
  .hide-lg {display:none}
}
@media all and (min-width:1200px) {
  /*** xl (extra-large) **/
  .show-xl {position:static}
  .hide-xl {display:none}
}

/*************************************************************
The following directives set the breakpoints (with the default
one of <480px being 100%)
**************************************************************/
.container, .container-fluid {width:100%}
@media all and (min-width:480px) {.container {width:480px}}
@media all and (min-width:768px) {.container {width:768px}}
@media all and (min-width:992px) {.container {width:992px}}
@media all and (min-width:1200px){.container {width:1200px}}