body {
  font-family: 'Montserrat', sans-serif;
}
#breakpoint {
  position: absolute;
  top: 0;
  height: 0;
  left: -100px;
}
#breakpoint > a {
  font-size: 1px;
}
@media (max-width: 599px) {
  #breakpoint {
    width: 0px;
  }
}
@media (min-width: 600px) {
  #breakpoint {
    width: 1px;
  }
}
@media (min-width: 768px) {
  #breakpoint {
    width: 2px;
  }
}
@media (min-width: 900px) {
  #breakpoint {
    width: 3px;
  }
}
@media (min-width: 1200px) {
  #breakpoint {
    width: 4px;
  }
}
@media (min-width: 1800px) {
  #breakpoint {
    width: 5px;
  }
}
body.light {
  background-color: #fff;
  color: #000;
}
body.light a {
  color: #f50;
}
body.light #theme-light {
  border-color: #f50;
}
body.darklight {
  background-color: #333;
  color: #ddd;
}
body.darklight a {
  color: #ffa500;
}
body.darklight #theme-darklight {
  border-color: #ffa500;
}
body.lightdark {
  background-color: #ddd;
  color: #333;
}
body.lightdark a {
  color: #00f;
}
body.lightdark #theme-lightdark {
  border-color: #00f;
}
body.dark {
  background-color: #000;
  color: #fff;
}
body.dark a {
  color: #add8e6;
}
body.dark #theme-dark {
  border-color: #add8e6;
}
body.hotpink {
  background-color: #eee;
  color: #333;
}
body.hotpink a {
  color: #ff69b4;
}
body.hotpink #theme-hotpink {
  border-color: #ff69b4;
}
body.lemonyellow {
  background-color: #555;
  color: #eee;
}
body.lemonyellow a {
  color: #df5;
}
body.lemonyellow #theme-lemonyellow {
  border-color: #df5;
}
#theme-light {
  background-color: #f50;
  border-color: #fff;
}
#theme-darklight {
  background-color: #ffa500;
  border-color: #333;
}
#theme-lightdark {
  background-color: #00f;
  border-color: #ddd;
}
#theme-dark {
  background-color: #add8e6;
  border-color: #000;
}
#theme-hotpink {
  background-color: #ff69b4;
  border-color: #eee;
}
#theme-lemonyellow {
  background-color: #df5;
  border-color: #555;
}
#control {
  display: block;
  height: 1em;
}
#control >div {
  height: 100%;
  display: block;
}
#control >div > div {
  display: inline-block;
  cursor: pointer;
  height: 100%;
  width: 16.6%;
}
@media (min-width: 768px) {
  #control >div > div {
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin-right: 1em;
  }
  #control >div > div:hover {
    width: 20px;
    height: 20px;
    border-width: 0;
  }
}
@media (min-width: 768px) {
  #control {
    position: absolute;
    padding-top: 1em;
    top: 0;
    right: 0;
    width: auto;
  }
}
#control #control-teserract > div > div {
  border-color: #000;
}
#navigation {
  padding: 1em 0;
}
#navigation a {
  display: inline-block;
  margin-right: 1em;
}
@media (max-width: 400px) {
  #navigation a {
    display: block;
    padding: 5px 1em;
    margin-bottom: 5px;
    width: 80%;
  }
}
@media (max-width: 768px) {
  #navigation a {
    font-size: 1.25em;
  }
}
@media (max-width: 600px) {
  #navigation a {
    font-size: 1.5em;
    margin-right: 0.5em;
  }
}
#project_cob #navigation a:first-child {
  display: none;
}
#app-html > div {
  padding: 0 1em;
}
@media (min-width: 600px) {
  #app-html {
    max-width: 35em;
    margin: 0 auto;
  }
  #app-html > div {
    padding: 0 2em;
  }
}
@media (min-width: 768px) {
  #app-html {
    max-width: 55em;
    margin: 0 auto;
  }
  #app-html > div {
    padding: 0 2em;
  }
}
body {
  font-family: 'Darker Grotesque', sans-serif;
}
p {
  padding: 0;
}
.section {
  padding-bottom: 0.5em;
}
a {
  text-decoration: underline;
  color: #008000;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
a:hover {
  text-decoration: underline;
}
strong {
  font-weight: bold;
}
#mission .mission-project a {
  font-size: 1.5em;
}
#app-html {
  padding-bottom: 5em;
  font-size: 1.15em;
}
#app-html h1 {
  font-size: 2em;
}
#app-html h2 {
  font-size: 1.5em;
}
#app-html h3 {
  font-size: 1.25em;
}
#app-html section {
  padding-bottom: 1em;
}
@media (min-width: 768px) {
  .section-two {
    float: right;
    width: 15em;
  }
  .section-one,
  .section-three {
    margin-right: 17em;
  }
  .section-img img {
    display: block;
  }
  .section-img .img-caption {
    font-size: 0.8em;
    padding: 0.5em 0;
  }
  .section-img--200 {
    width: 200px;
  }
  .section-img--200 img {
    width: 100%;
  }
  .section-img--right {
    float: right;
    padding: 1em;
  }
}
.html-page {
  position: relative;
}
#identity {
  position: relative;
  padding-top: 80px;
  margin-bottom: 1.5em;
  padding-left: 145px;
}
#identity .header-logo {
  position: absolute;
  width: 135px;
  height: 135px;
  left: -15px;
  bottom: -10px;
  background-repeat: no-repeat;
  background-position: center;
}
body.light #identity .header-logo {
  background-image: url("/src/img/maia-icon-square-light-135.png");
}
body.lightdark #identity .header-logo {
  background-image: url("/src/img/maia-icon-square-lightdark-135.png");
}
body.darklight #identity .header-logo {
  background-image: url("/src/img/maia-icon-square-darklight-135.png");
}
body.dark #identity .header-logo {
  background-image: url("/src/img/maia-icon-square-dark-135.png");
}
body.hotpink #identity .header-logo {
  background-image: url("/src/img/maia-icon-square-hotpink-135.png");
}
body.lemonyellow #identity .header-logo {
  background-image: url("/src/img/maia-icon-square-lemonyellow-135.png");
}
@media (max-width: 400px) {
  #identity {
    padding-left: 0;
    padding-top: 20px;
  }
  #identity .header-logo {
    position: relative;
    left: 0;
    bottom: 0;
    margin-bottom: 20px;
  }
}
.contact {
  z-index: 199;
}
.contact > div {
  padding: 1em 0;
}
.contact > div > div.info {
  padding: 0;
  margin-left: 80px;
}
.contact > div > div.info > .name {
  font-weight: bold;
}
.contact > div > div.info > .email > a > span:first-child {
  display: inline;
}
.contact > div > div.info > .email > a > span:last-child {
  display: none;
}
.contact > div > div.img {
  float: left;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 50%;
  border: solid 1px;
}
body.light .contact > div > div.img {
  border-color: #f50;
  background-color: themeLightGnd;
}
body.themeLemonyellowPop .contact > div > div.img {
  border-color: #df5;
  background-color: #555;
}
body.darklight .contact > div > div.img {
  border-color: #ffa500;
  background-color: #333;
}
body.dark .contact > div > div.img {
  border-color: #add8e6;
  background-color: #000;
}
body.hotpink .contact > div > div.img {
  border-color: #ff69b4;
  background-color: #eee;
}
body.lemonyellow .contact > div > div.img {
  border-color: #df5;
  background-color: #555;
}
.contact > div > div.img img {
  width: 100%;
}
.html-home {
  position: relative;
}
@media (max-width: 768px) {
  .html-home > .home-content > .content-side-link .contact > div > div.info {
    margin-left: 0;
  }
  .html-home > .home-content > .content-side-link .contact > div > div.info > .email > a > span:first-child {
    display: none;
  }
  .html-home > .home-content > .content-side-link .contact > div > div.info > .email > a > span:last-child {
    display: inline;
  }
  .html-home > .home-content > .content-side-link .contact > div > div.info > .tag {
    display: none;
  }
  .html-home > .home-content > .content-side-link .contact > div > div.img {
    float: none;
  }
}