
body, li, p, td { line-height: 1.5em }

a, a:visited { color: red }

.container, body { background-color: #fff }

.container, .grid, body, html { width: 100% }

.elm__link--subsub, .elmtoggle__holder a, a, a:active, a:focus, a:hover { text-decoration: none }

.elm__link--sub, .elm__link--subsub {
  white-space: nowrap;
  padding: 1.25rem 1rem
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
  margin: 0;
  padding: 0;
  border: 0
}

.m-elm__item, .m-elm__list { border-bottom: 1px solid #fff }

.m-elm__item--sub:first-of-type, .m-elm__item--subsub:first-of-type { border-top: 1px solid #fff }

blockquote, q { quotes: none }

blockquote:after, blockquote:before, q:after, q:before {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent
}

*, :after, :before { box-sizing: inherit }

body, html { height: 100% }

body {
  margin: 0;
  padding: 0;
  color: #333;
  font-family: "Open Sans", sans-serif;
  font-size: 100%;
  font-weight: 400
}

a, a img, button, input, textarea {
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -ms-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  transition: all .25s ease-out
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-style: normal;
  letter-spacing: .025em;
  line-height: 1.35em;
  margin: 0 0 2rem
}

h1 {
  font-size: 40px;
  font-size: 2.5rem
}

h2 {
  font-size: 32px;
  font-size: 2rem
}

h3 {
  font-size: 24px;
  font-size: 1.75rem
}

h4, h5 { font-size: 16px }

h4 { font-size: 1.5rem }

h5 { font-size: 1.25rem }

h6 {
  font-size: 16px;
  font-size: 1rem
}

h5, h6 { text-transform: uppercase }

ol, ul { margin-left: 1.5rem }

p { margin-bottom: 2rem }

li, p, td { font-size: 1rem }

a {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  cursor: pointer
}

a:active, a:focus, a:hover { color: orange }

.cf:after, .cf:before, .container:after, .container:before, .grid:after, .grid:before, .wrap--single:after, .wrap--single:before, .wrap:after, .wrap:before {
  content: " ";
  display: table
}

.cf:after, .container:after, .grid:after, .wrap--single:after, .wrap:after { clear: both }

.container {
  margin: 4rem auto;
  padding: 0 1rem;
  max-width: 100%;
  text-align: center
}

.content, .wrap--single { padding: 1rem 0 }

.wrap, .wrap--single {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
  min-width: 100px;
  text-align: left
}

.wrap--single { max-width: 800px }
[class*=grid__col--] {
vertical-align:top;
border-collapse:collapse!important
}
@media (min-width:800px) {
[class*=grid__col--] {
display:inline-block
}

.grid__col--20 { width: 20% }

.grid__col--25 { width: 25% }

.grid__col--30 { width: 30% }

.grid__col--33 { width: 33% }

.grid__col--40 { width: 40% }

.grid__col--50 { width: 50% }

.grid__col--60 { width: 60% }

.grid__col--67 { width: 67% }

.grid__col--70 { width: 70% }

.grid__col--75 { width: 75% }

.grid__col--80 { width: 80% }

.grid__col--100 { width: 100% }

.grid__col--333 { width: 33.333333333% }

.content { padding: 1rem }

.grid [class*=grid__col--]:first-of-type>.content { padding-left: 0 }

.grid [class*=grid__col--]:last-of-type>.content { padding-right: 0 }
}

#canvas, #page {
  position: relative;
  width: 100%
}

.align--left { text-align: left }

.align--right { text-align: right }

.align--center { text-align: center }

.elm__list, .elm__list--sub, .elm__list--subsub, .list-reset {
  margin: 0;
  padding: 0;
  list-style: none
}

.nav--main .elm__item, .nav--main .elm__item--sub, .nav--main .elm__item--subsub, .nav--main .m-elm__item, .nav--main .m-elm__item--sub, .nav--main .m-elm__item--subsub, .nav--social .elm__item, .nav--social .m-elm__item, .nav--utility .elm__item, .nav--utility .m-elm__item {
font-size:.85rem;
  line-height: 1em;
  font-weight: 400
}

#page { overflow: hidden }

#canvas {
  height: 100%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform .33s cubic-bezier(.694, .0482, .335, 1);
  transition: -webkit-transform .33s cubic-bezier(.694, .0482, .335, 1)
}

#elmobile {
  position: absolute;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100%;
  background: #333
}

body.show-nav #elmobile {
  max-width: 100%;
  border-left: 1px solid #fff
}

.navholder--utility { display: none }
@media only screen and (min-width:768px) {

.navholder--utility {
  display: block;
  background-color: #333
}

.navholder--utility nav {
  float: left;
  display: inline-block
}

.navholder--utility .nav--social {
  float: right;
  display: inline-block
}
}

.navholder--main { display: none }
@media only screen and (min-width:768px) {

.navholder--main {
  display: block;
  background-color: #666
}
}

.nav--utility .elm__link {
  text-transform: none;
  color: #999
}

.nav--utility .elm__link:visited { color: #999 }

.nav--utility .elm__link:active, .nav--utility .elm__link:focus, .nav--utility .elm__link:hover { color: #fff }

.nav--social .elm__link {
  text-transform: none;
  color: #999
}

.nav--social .elm__link:visited { color: #999 }

.nav--main .elm__link, .nav--main .elm__link:active, .nav--main .elm__link:focus, .nav--main .elm__link:hover, .nav--main .elm__link:visited, .nav--social .elm__link:active, .nav--social .elm__link:focus, .nav--social .elm__link:hover { color: #fff }

.nav--main .elm__link--sub, .nav--main .elm__link--sub:visited {
  color: #fff;
  background-color: #666
}

.nav--main .elm__link--sub:active, .nav--main .elm__link--sub:focus, .nav--main .elm__link--sub:hover, .nav--main .elm__link--subsub, .nav--main .elm__link--subsub:visited {
  background-color: #7a7a7a;
  color: #fff
}

.nav--main .elm__link--subsub { min-width: 200px }

.nav--main .elm__link--subsub:active, .nav--main .elm__link--subsub:focus, .nav--main .elm__link--subsub:hover {
  color: #fff;
  background-color: #8f8f8f
}

.nav--main .elm__item--sub:hover>a { background-color: #7a7a7a }

body.show-nav #canvas {
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px)
}

.elmtoggle__holder, .elmtoggle__holder--mobile {
  display: block;
  width: 100%;
  text-align: right;
padding:1rem 1rem .75rem;
  border-bottom: 1px solid #fff;
  background-color: #333
}
@media only screen and (min-width:768px) {

.elmtoggle__holder { display: none }
}

.elm__item, .elmtoggle__icon { display: inline-block }

.elmtoggle__icon {
  width: auto;
  height: 1.5rem;
  vertical-align: top
}

.elm__link, .elm__link--sub {
  display: block;
  padding: 1.25rem 1rem;
  text-decoration: none
}

.elm__list--sub {
  display: none;
  text-align: left
}

.elm__item.hassub:hover .elm__list--sub { display: block }

.elm__item.hassub { position: relative }

.elm__item.hassub .elm__list--sub {
  position: absolute;
  top: 100%;
  left: 0;
  width: auto
}

.elm__item--sub { width: 100% }

.elm__link--sub { display: block }

.elm__list--subsub {
  display: none;
  text-align: left
}

.elm__item--sub.hassubsub:hover .elm__list--subsub, .m-elm__link, .m-elm__list { display: block }

.elm__item--sub.hassubsub { position: relative }

.elm__item--sub.hassubsub .elm__list--subsub {
  position: absolute;
  top: 0;
  left: 100%;
  width: auto
}

.elm__item--subsub { width: 100% }

.elm__link--subsub { display: block }

.m-elm__list, .m-elm__list--sub, .m-elm__list--subsub {
  list-style: none;
  text-align: left;
  padding-left: 0
}

.m-elm__link, .m-elm__link--sub, .m-elm__link--subsub {
padding:.85rem 1rem; text-decoration: none }

.m-elm__link, .m-elm__link--sub, .m-elm__link--sub:active, .m-elm__link--sub:focus, .m-elm__link--sub:hover, .m-elm__link--sub:visited, .m-elm__link--subsub, .m-elm__link--subsub:active, .m-elm__link--subsub:focus, .m-elm__link--subsub:hover, .m-elm__link--subsub:visited, .m-elm__link:active, .m-elm__link:focus, .m-elm__link:hover, .m-elm__link:visited { color: #fff }

.m-elm__list { margin: 0 }

.m-elm__item:last-of-type { border-bottom: none }

.m-elm__list--sub {
  display: none;
  margin: 0
}

.m-elm__item--sub { border-bottom: 1px solid #fff }

.m-elm__item--sub:last-of-type { border-bottom: none }

.m-elm__link--sub {
  display: block;
  border-left: 10px solid orange
}

.m-elm__list--subsub {
  display: none;
  margin: 0
}

.m-elm__item--subsub { border-bottom: 1px solid #fff }

.m-elm__item--subsub:last-of-type { border-bottom: none }

.m-elm__link--subsub {
  display: block;
  border-left: 20px solid orange
}

.elmtrigger, .elmtrigger--sub {
  cursor: pointer;
  margin: 0;
  padding: 0
}

.elmtrigger img, .elmtrigger--sub img {
  margin: 0 auto;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  width: auto;
height:.75rem;
  -ms-transform: rotate(0);
  -webkit-transform: rotate(0);
  transform: rotate(0)
}

.elmtrigger img.rotate, .elmtrigger--sub img.rotate {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite
}

.m-elm__item.hassub { background-color: orange }

.m-elm__item.hassub a { background-color: #333 }

.m-elm__item--sub.hassubsub { background-color: orange }

.m-elm__item--sub.hassubsub a { background-color: #4d4d4d }

.m-elm__item--subsub, .m-elm__link--subsub { background-color: #666!important }

.hassub .m-elm__link, .hassub .m-elm__link--sub, .hassub .m-elm__link--subsub { border-right: 1px solid #fff!important }

.elmtrigger, .elmtrigger--sub, .hassub .m-elm__link, .m-elm__item--sub.hassub .m-elm__link--sub { display: inline-block }

.hassub .m-elm__link, .hassubsub .m-elm__link--sub {
  display: inline-block;
  width: 80%
}

.elmtrigger, .elmtrigger--sub {
  display: inline-block;
  width: 20%;
  text-align: center
}
