:root {
  --dark-mode-toggle-light-icon: url(/img/darkmode-icons/light.svg);
  --dark-mode-toggle-dark-icon: url(/img/darkmode-icons/dark.svg);
  --dark-mode-toggle-icon-size: 24px;
  color-scheme: dark light;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

body.route-home {
  background: var(--background-home);
}
body.route-about {
  background: var(--background-about);
}
body.route-engineering {
  background: var(--background-engineering);
}
body.route-design {
  background: var(--background-design);
}
body.route-changelog {
  background: var(--background-changelog);
}
body.route-people {
  background: var(--background-people);
}
body.route-default {
  background: var(--background-default);
}

body.route-home > #app {
  background: var(--background-color-app);
}

header[role=navigation] {
  grid-area: header;
}
main[role=main] {
  grid-area: main;
  color: var(--text-color);
}
aside[role=sidebar] {
	grid-area: sidebar;
}
footer[role=footer] {
  grid-area: footer;
  color: var(--text-color);
  background-color: rgb(0 0 0 / 3%);
}

#app {
	display: grid !important;
	grid-template-columns: 1fr;
	grid-template-rows: 64px auto auto;
	grid-template-areas: 
		"header"
		"main"
		"footer";
}

.text-mono {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace!important;
}
.text-oswald {
  font-family: Oswald!important;
}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
  width: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  background-color: var(--scrollbar-track);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

.feature {
  /* margin: 0 28px !important; */
  font-weight: bold;
  padding-top: 90px;
}
#feature2 {
  color: #00a15f !important;
}
.feature2-text-color {
  color: #00a15f !important;
}
#feature3 {
  color: #307eff !important;
}
#feature4 {
  color: #ffba30 !important;
}
#feature5 {
  color: #ff3030 !important;
}
#feature6 {
  color: #00a15f !important;
}
#feature7 {
  color: #ffba30 !important;
}
#feature8 {
  color: #307eff !important;
}
#feature9 {
  color: #ff3030 !important;
}
#feature10 {
  color: #00a15f !important;
}

.navbar-dark .navbar-brand {
  color: var(--nav-logo-color);
}
a.nav-link.navbar-brand.router-link-exact-active.router-link-active {
  border: none;
  font-weight: initial;
  text-shadow: initial;
}
a.nav-link.router-link-exact-active.router-link-active {
  color: var(--nav-logo-color-active);
  border-bottom: 2px dotted #1b1;
  font-weight: 500;
  text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #49ff18, 0 0 30px #49FF18, 0 0 40px #49FF18, 0 0 55px #49FF18, 0 0 75px #49ff18;
}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
  color: var(--nav-link-hover-color);
}

.grid-cell-square {
  background: var(--grid-cell);
  height: 50%;
  min-height: auto;
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.pane-content-square {
  position: absolute;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 42px 50px;
  height: 100%;
  overflow: hidden;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
body[data-aos-delay='3100'] [data-aos],
[data-aos][data-aos][data-aos-delay='3100'] {
  transition-delay: 3100ms;
}
body[data-aos-delay='3200'] [data-aos],
[data-aos][data-aos][data-aos-delay='3200'] {
  transition-delay: 3200ms;
}
body[data-aos-delay='3300'] [data-aos],
[data-aos][data-aos][data-aos-delay='3300'] {
  transition-delay: 3300ms;
}
body[data-aos-delay='3400'] [data-aos],
[data-aos][data-aos][data-aos-delay='3400'] {
  transition-delay: 3400ms;
}
body[data-aos-delay='3500'] [data-aos],
[data-aos][data-aos][data-aos-delay='3500'] {
  transition-delay: 3500ms;
}
body[data-aos-delay='3600'] [data-aos],
[data-aos][data-aos][data-aos-delay='3600'] {
  transition-delay: 3600ms;
}
body[data-aos-delay='3700'] [data-aos],
[data-aos][data-aos][data-aos-delay='3700'] {
  transition-delay: 3700ms;
}
body[data-aos-delay='3800'] [data-aos],
[data-aos][data-aos][data-aos-delay='3800'] {
  transition-delay: 3800ms;
}
body[data-aos-delay='3900'] [data-aos],
[data-aos][data-aos][data-aos-delay='3900'] {
  transition-delay: 3900ms;
}
body[data-aos-delay='4000'] [data-aos],
[data-aos][data-aos][data-aos-delay='4000'] {
  transition-delay: 4000ms;
}
body[data-aos-delay='4100'] [data-aos],
[data-aos][data-aos][data-aos-delay='4100'] {
  transition-delay: 4100ms;
}
body[data-aos-delay='4200'] [data-aos],
[data-aos][data-aos][data-aos-delay='4200'] {
  transition-delay: 4200ms;
}
body[data-aos-delay='4300'] [data-aos],
[data-aos][data-aos][data-aos-delay='4300'] {
  transition-delay: 4300ms;
}
body[data-aos-delay='4400'] [data-aos],
[data-aos][data-aos][data-aos-delay='4400'] {
  transition-delay: 4400ms;
}
body[data-aos-delay='4500'] [data-aos],
[data-aos][data-aos][data-aos-delay='4500'] {
  transition-delay: 4500ms;
}
body[data-aos-delay='4600'] [data-aos],
[data-aos][data-aos][data-aos-delay='4600'] {
  transition-delay: 4600ms;
}
body[data-aos-delay='4700'] [data-aos],
[data-aos][data-aos][data-aos-delay='4700'] {
  transition-delay: 4700ms;
}
body[data-aos-delay='4800'] [data-aos],
[data-aos][data-aos][data-aos-delay='4800'] {
  transition-delay: 4800ms;
}
body[data-aos-delay='4900'] [data-aos],
[data-aos][data-aos][data-aos-delay='4900'] {
  transition-delay: 4900ms;
}
body[data-aos-delay='5000'] [data-aos],
[data-aos][data-aos][data-aos-delay='5000'] {
  transition-delay: 5000ms;
}
body[data-aos-delay='5100'] [data-aos],
[data-aos][data-aos][data-aos-delay='5100'] {
  transition-delay: 5100ms;
}
body[data-aos-delay='5200'] [data-aos],
[data-aos][data-aos][data-aos-delay='5200'] {
  transition-delay: 5200ms;
}
body[data-aos-delay='5300'] [data-aos],
[data-aos][data-aos][data-aos-delay='5300'] {
  transition-delay: 5300ms;
}
body[data-aos-delay='5400'] [data-aos],
[data-aos][data-aos][data-aos-delay='5400'] {
  transition-delay: 5400ms;
}
body[data-aos-delay='5500'] [data-aos],
[data-aos][data-aos][data-aos-delay='5500'] {
  transition-delay: 5500ms;
}
body[data-aos-delay='5600'] [data-aos],
[data-aos][data-aos][data-aos-delay='5600'] {
  transition-delay: 5600ms;
}
body[data-aos-delay='5700'] [data-aos],
[data-aos][data-aos][data-aos-delay='5700'] {
  transition-delay: 5700ms;
}
body[data-aos-delay='5800'] [data-aos],
[data-aos][data-aos][data-aos-delay='5800'] {
  transition-delay: 5800ms;
}
body[data-aos-delay='5900'] [data-aos],
[data-aos][data-aos][data-aos-delay='5900'] {
  transition-delay: 5900ms;
}
body[data-aos-delay='6000'] [data-aos],
[data-aos][data-aos][data-aos-delay='6000'] {
  transition-delay: 6000ms;
}
body[data-aos-delay='7000'] [data-aos],
[data-aos][data-aos][data-aos-delay='7000'] {
  transition-delay: 7000ms;
}
body[data-aos-delay='8000'] [data-aos],
[data-aos][data-aos][data-aos-delay='8000'] {
  transition-delay: 8000ms;
}
body[data-aos-delay='9000'] [data-aos],
[data-aos][data-aos][data-aos-delay='9000'] {
  transition-delay: 9000ms;
}

/* Link and hover color */
#lists a:hover {
  color: #ffba30;
}
#business a:hover {
  color: #00a15f;
}
#features a:hover {
  color: #307eff;
}
a:hover {
  color: #00a15f;
}
a {
  color: #00a15f;
}

/* Modal Design */
.modal-open .modal {
  background: rgb(0 0 0 / 0.75);
}
.modal-content {
  background-color: var(--modal-bg);
  border: var(--modal-inner-border);
  color: var(--text-color);
}
.modal-header {
  border-bottom: var(--modal-inner-border);
  padding: 1rem 3rem;
  margin-bottom: 2rem;
  font-family: Oswald;
  text-transform: uppercase;
  justify-content: center;
}
.modal-footer {
  justify-content: center;
  border-top: transparent;
  padding-top: 3rem;
}
#mc_embed_signup input.email {
  color: var(--text-color);
  background-color: var(--modal-bg);
  border: var(--modal-inner-border);
  height: 42px;
  padding: 0px 1em;
  display: flex;
  -webkit-transition: -webkit-box-shadow 0.15s ease;
  transition: -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease, -webkit-box-shadow 0.15s ease;
  -webkit-box-shadow: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  overflow: hidden;
  font-size: 16px;
  line-height: 22px;
  width: 350px;
  margin: 24px auto;
}
.btn-block {
  width: 350px;
  margin: 24px auto;
}
.mdc-button {
  background-color: var(--modal-button-bg) !important;
  color: var(--modal-button-text) !important;
}
.btn-primary {
  border-color: transparent;
  color: var(--beta-button-text) !important;
  background-color: var(--beta-button-bg) !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  background: linear-gradient( -45deg, rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0.25) );
  border-radius: 30px;
}
.btn-primary:hover {
  border-color: tan;
  box-shadow: none;
}
button:focus {
  outline: none;
}

@media (max-width: 1199.98px) {
  .grid-cell {
    min-height: 650px;
  }
}

#app:before {
  display: none !important;
  max-height: 150px;
  background-image: url(/img/logos/taranca.svg);
  background-repeat: repeat-x;
  background-size: contain;
  background-repeat: space;
  background-size: 88px auto;
  content: '';
  display: block;
  right: 10px;
  width: 100%;
  height: 190px;
  position: absolute;
  bottom: -115px;
}
#app:after {
  display: none !important;
  height: 190px;
  max-height: 150px;
  background-image: url(/img/logos/taranca.svg);
  background-repeat: repeat-x;
  background-size: contain;
  background-repeat: space;
  background-size: 88px auto;
  content: '';
  display: block;
  right: 10px;
  width: 100%;
}
.anim-repeat::after,
.anim-repeat::before {
  animation-iteration-count: 1 !important;
}
.anim-delay::before,
.anim-delay::after {
  animation-delay: 1s;
}

#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}

.always-white {
  color: #fff;
}