body {
  margin: 10px 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #427250;
}
.outer-wrap {
  width: 60%;
  margin: 0 auto;
}
.border-wrap-x {
  background: #f00;
  padding: 20px;
}
.border-wrap-a {
  background: #fc0;
  padding: 20px;
  overflow: hidden;
}
.border-wrap-b {
  background: #09c;
  padding: 20px;
  overflow: hidden;
}
.border-wrap-x {
  background: #4fa15f;
  padding: 30px;
  overflow: hidden;
}
.bounder {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
}
.opacity-50 {
  -webkit-filter: opacity(50%);
  filter: opacity(50%);
}
/*
.blurimage {
  -webkit-filter: blur(1px);
  filter: blur(1px);
}
*/
.contain-4up {
  width: 25%;
  float: left;
  position: relative;
  overflow: hidden;
}
.contain-5up {
  width: 20%;
  float: left;
  position: relative;
  overflow: hidden;
}
.contain-8up {
  width: 12.5%;
  float: left;
  position: relative;
  overflow: hidden;
}
 /* svgs are inline by default - causes white space - make them display:block */
.contain-4up img,
.contain-8up img {
  display: block;
}


.layer-01 {
  position: absolute;
  top: 0;
  left: 0;
}
.doubler {
  width: 200%;
  position: absolute;
  top: -50%;
  left: -50%;
}
.doubler-b {
  width: 200%;
  position: absolute;
  top: -29%;
  left: -29%;
}
img {
  width: 100%;
}
.rotate-45 {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.rotate-90 {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.rotate-180 {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.rotate-270 {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.hue-30 {
  -webkit-filter: hue-rotate(30deg);
  -moz-filter: hue-rotate(30deg);
  -ms-filter: hue-rotate(30deg);
  filter: hue-rotate(30deg);
}
.hue-60 {
  -webkit-filter: hue-rotate(60deg);
  -moz-filter: hue-rotate(60deg);
  -ms-filter: hue-rotate(60deg);
  filter: hue-rotate(60deg);
}
.hue-90 {
  -webkit-filter: hue-rotate(90deg);
  -moz-filter: hue-rotate(90deg);
  -ms-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}
.hue-120 {
  -webkit-filter: hue-rotate(120deg);
  -moz-filter: hue-rotate(120deg);
  -ms-filter: hue-rotate(120deg);
  filter: hue-rotate(120deg);
}
.hue-150 {
  -webkit-filter: hue-rotate(150deg);
  -moz-filter: hue-rotate(150deg);
  -ms-filter: hue-rotate(150deg);
  filter: hue-rotate(150deg);
}
.hue-180 {
  -webkit-filter: hue-rotate(180deg);
  -moz-filter: hue-rotate(180deg);
  -ms-filter: hue-rotate(180deg);
  filter: hue-rotate(180deg);
}
.hue-210 {
  -webkit-filter: hue-rotate(210deg);
  -moz-filter: hue-rotate(210deg);
  -ms-filter: hue-rotate(210deg);
  filter: hue-rotate(210deg);
}
.hue-240 {
  -webkit-filter: hue-rotate(240deg);
  -moz-filter: hue-rotate(240deg);
  -ms-filter: hue-rotate(240deg);
  filter: hue-rotate(240deg);
}
.hue-270 {
  -webkit-filter: hue-rotate(270deg);
  -moz-filter: hue-rotate(270deg);
  -ms-filter: hue-rotate(270deg);
  filter: hue-rotate(270deg);
}
.hue-300 {
  -webkit-filter: hue-rotate(300deg);
  -moz-filter: hue-rotate(300deg);
  -ms-filter: hue-rotate(300deg);
  filter: hue-rotate(300deg);
}
.hue-330 {
  -webkit-filter: hue-rotate(330deg);
  -moz-filter: hue-rotate(330deg);
  -ms-filter: hue-rotate(330deg);
  filter: hue-rotate(330deg);
}
.invert-full {
  -webkit-filter: invert(1.0);
  -moz-filter: invert(1.0);
  -ms-filter: invert(1.0);
  filter: invert(1.0);
}
.invert-half {
  -webkit-filter: invert(0.5);
  -moz-filter: invert(0.5);
  -ms-filter: invert(0.5);
  filter: invert(0.5);
}
.invert-quarter {
  -webkit-filter: invert(0.25);
  -moz-filter: invert(0.25);
  -ms-filter: invert(0.25);
  filter: invert(0.25);
}


/* colorschemer colors */

.red {
	background-color: #ff0000;
}

.redorange {
	background-color: #ff6600;
}

.orange {
	background-color: #ff9900;
}

.orangeyellow {
	background-color: #ffcc00;
}

.yellow {
	background-color: #ffff00;
}

.yellowgreen {
	background-color: #ace600;
}

.green {
	background-color: #00cc00;
}

.greenblue {
	background-color: #0099cc;
}

.blue {
	background-color: #0055cc;
}

.blueviolet {
	background-color: #2200cc;
}

.violet {
	background-color: #8800cc;
}

.violetred {
	background-color: #d9007e;
}






/* css filters not really working - see if sass/compass can do it 2-8-15 */

/*
.test-red-0-50-50 {
  background-color: #804040;
}
.dk-50 {
  -webkit-filter: brightness(50%);
  filter: brightness(50%);
}
.lt-200 {
  -webkit-filter: brightness(200%);
  filter: brightness(200%);
}
.sat-200 {
  -webkit-filter: saturate(200%);
  filter: saturate(200%)
}
*/







/* other color schemer colors */
.red-dk {
	background-color: #a40000;
}

.redorange-dk {
	background-color: #a44100;
}

.orange-dk {
	background-color: #a44100;
}

.orangeyellow-dk {
	background-color: #a46200;
}

.yellow-dk {
	background-color: #a4a400;
}

.yellowgreen-dk {
	background-color: #6e9300;
}

.green-dk {
	background-color: #6e9300;
}

.greenblue-dk {
	background-color: #006283;
}

.blue-dk {
	background-color: #003783;
}

.blueviolet-dk {
	background-color: #160083;
}

.violet-dk {
	background-color: #570083;
}

.violetred-dk {
	background-color: #8b0051;
}

.red-lt {
	background-color: #ffbcbc;
}

.redorange-lt {
	background-color: #ffd7bc;
}

.orange-lt {
	background-color: #ffe4bc;
}

.orangeyellow-lt {
	background-color: #fff2bc;
}

.yellow-lt {
	background-color: #ffffbc;
}

.yellowgreen-lt {
	background-color: #e7f8b7;
}

.green-lt {
	background-color: #b2f2b3;
}

.greenblue-lt {
	background-color: #b2e1f2;
}

.blue-lt {
	background-color: #b2ccf2;
}

.blueviolet-lt {
	background-color: #bdb2f2;
}

.violet-lt {
	background-color: #ddb2f2;
}

.violetred-lt {
	background-color: #f5b5d9;
}