/* This is the Underdark theme CSS. Its structure is based on SMACSS. See
https://smacss.com for more info. */

/* Colors
  --------------------------
  #7CA300
  #8FB622
  #A2C837    Underdark green
  #B7DD4C
  #CBF160
  #222       0,  0%, 13%
  #333       0,  0%, 20%
  #444       0,  0%, 27%
  #555       0,  0%, 33%
  #666       0,  0%, 40%
*/

a {
  color: #A2C837;
  -webkit-transition: color .2s;
  transition: color .2s;
}
a:not(:hover) {
  text-decoration: none;
}
a:link {

}
a:visited {
  /* color: #A2C837; */
}
a:active {
  color: #A2C837;
}
a:hover {

}

ul {
  list-style-type: square;
}
blockquote {
  padding-left: 1rem;
  border-left: .125rem solid rgba(0, 0, 0, .2);
}

.welcome p {
  margin: 0;
}

.core-services {
  text-align: center;
  overflow: hidden;
}
.core-services > ul {
  position: relative;
  width: 600%;
  height: 3rem;
  margin: 0;
  padding: 0;
  line-height: 3rem;
  list-style: none;
  -webkit-animation: slide 16s cubic-bezier(.5, 0, .5, 1) infinite;
  animation: slide 16s cubic-bezier(.5, 0, .5, 1) infinite;
}

.core-services > ul > li {
  position: absolute;
  width: 16.7%;
}
.core-services > ul > li:nth-child(1) {
  left: 0;
}
.core-services > ul > li:nth-child(2) {
  left: 16.7%;
}
.core-services > ul > li:nth-child(3) {
  left: 33.3%;
}
.core-services > ul > li:nth-child(4) {
  left: 50%;
}
.core-services > ul > li:nth-child(5) {
  left: 66.7%;
}
.core-services > ul > li:nth-child(6) {
  left: 83.3%;
}

.core-services > ul > li > .fa {
  font-size: 2rem;
  line-height: 3rem;
  margin-right: .5rem;
  vertical-align: top;
}

.map {
  height: 20rem;
  margin: 1rem 0;
}
.map address {
  font-size: .875rem;
}



::-moz-selection {
  background-color: #CBF160;
}
::selection {
  background-color: #CBF160;
}

body > header,
body > header nav > ul ul {
  border-color: #A2C837;
}


/* main */
main a:hover {
  color: #7CA300;
}

p.primary,
p.success,
p.info,
p.warning,
p.error {
  color: #000;
}
p.primary a,
p.success a,
p.info a,
p.warning a,
p.error a {
  color: #7CA300;
  text-decoration: underline;
}

/* table */
table {
  border-color: #ddd;
  background-color: #fff;
}
thead,
tfoot {
  background-color: #eee;
}
tfoot th {
  color: #666;
}
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: hsl(0, 0%, 98%);
}

tbody tr:nth-child(odd) td.primary,
tbody tr:nth-child(odd) th.primary,
tbody tr.primary:nth-child(odd) td,
tbody tr.primary:nth-child(odd) th {
  background-color: hsl(208, 56%, 44%);
}
tbody tr:nth-child(odd) td.success,
tbody tr:nth-child(odd) th.success,
tbody tr.success:nth-child(odd) td,
tbody tr.success:nth-child(odd) th {
  background-color: hsl(103, 44%, 87%);
}
tbody tr:nth-child(odd) td.info,
tbody tr:nth-child(odd) th.info,
tbody tr.info:nth-child(odd) td,
tbody tr.info:nth-child(odd) th {
  background-color: hsl(200, 65%, 89%);
}
tbody tr:nth-child(odd) td.warning,
tbody tr:nth-child(odd) th.warning,
tbody tr.warning:nth-child(odd) td,
tbody tr.warning:nth-child(odd) th {
  background-color: hsl(50, 81%, 92%);
}
tbody tr:nth-child(odd) td.error,
tbody tr:nth-child(odd) th.error,
tbody tr.error:nth-child(odd) td,
tbody tr.error:nth-child(odd) th {
  background-color: hsl(0, 43%, 89%);
}

td,
th {
  border-color: #ddd;
}

/* form */
form table {
  background-color: #fff;
}

label {
  color: #888;
}
legend {
  color: #bbb;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
input[type="file"]:focus,
textarea:focus,
select:focus {
  border-color: #A2C837;
}
input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[disabled],
textarea[disabled] {
  color: #cfcfcf;
  background-color: #ececec;
}

[type="submit"],
.button {
  background-color: #A2C837;
}
[type="submit"]:hover,
[type="submit"]:focus,
.button-hover,
.button:hover,
.button:focus {
  background-color: #B7DD4C;
}

/* depth button */
button,
[type="reset"],
.button,
a.button {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05) inset, 0 0 0 .125rem rgba(255, 255, 255, .3) inset;
}
a.button {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
}
a.button:hover {
  color: #fff;
}

/* button primary */
button.primary,
button.selected,
[type="submit"],
[type="submit"][disabled],
a.button.primary,
a.button.selected,
form button:not([type]),
table a.button {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
  background-color: #A2C837;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) inset, 0 0 0 .125rem rgba(255, 255, 255, .1) inset;
}

input[readonly],
select[readonly],
textarea[readonly] {
  background-color: #fafafa;
  color: #666;
}

/*  depth header and footer links */
body > header nav > ul.external > li > a,
body > header .logo > a,
body > footer a {
  text-decoration: none;
  -webkit-transition-duration: .2s;
  transition-duration: .2s;
  -webkit-transition-property: color, text-shadow;
  transition-property: color, text-shadow;
}
body > header nav > ul:not(.external) a,
body > header nav > ul:not(.external) > li > button {
  text-shadow: 0 -1px 1px rgba(0, 0, 0, .5);
}
body > header nav > ul.external > li > a,
body > footer nav a {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
body > header nav > ul.external > li > a:hover,
body > header nav > ul.external > li > a:focus,
body > header .logo > a:hover,
body > header .logo > a:focus,
body > footer a:hover,
body > footer a:focus {
  text-shadow: 0 0 1em #999;
}
body > header nav > ul.external > li > a:focus,
body > header .logo > a:focus,
body > footer a:focus {
  outline: 0;
}
body > header nav > ul:not(.external) > li > button::after {
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}



/* toggle */
input[type="checkbox"].toggle + label {
  box-shadow: inset 0 0 .75rem rgba(0, 0, 0, .5);
}
input[type="checkbox"].toggle + label::after {
  box-shadow: 0 0 .75rem rgba(0, 0, 0, .5);
}

/* navigation links state */
body.home > header nav > ul > li > a.home,
body.about > header nav > ul > li > a.about,
body.projects > header nav > ul > li > a.projects,
body.services > header nav > ul > li > a.services,
body.contact > header nav > ul > li > a.contact {
  font-weight: bold;
  text-shadow: 0 -1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 0 #CBF160 inset;
  background-color: #A2C837;
  background-image: none;
}

main section > footer {
  text-align: center;
}

main > div:nth-of-type(even) {
  color: #fff;
  background-color: #A2C837;
}
main > div:nth-of-type(even) a {
  color: #444;
}
main > div:nth-of-type(even) a:hover {
  color: #222;
}
main > div:nth-of-type(even) .button {
  color: #fff;
  background-color: #444;
}
main > div:nth-of-type(even) .button:hover {
  color: #fff;
  background-color: #555;
}
main > div:nth-of-type(even) .button:active {
  background-color: #555;
}
main > div:nth-of-type(even) table,
main > div:nth-of-type(even) form {
  color: #444;
}
main > div:nth-of-type(even) table a,
main > div:nth-of-type(even) form a {
  color: #A2C837;
}
main > div:nth-of-type(even) form a:focus,
main > div:nth-of-type(even) form a:hover,
main > div:nth-of-type(even) table a:focus,
main > div:nth-of-type(even) table a:hover {
  color: #7CA300;
}
main > div:nth-of-type(even) table a.button {
  color: #fff; /* cancel active */
  background-color: #888;
}
main > div:nth-of-type(even) table a.button:focus,
main > div:nth-of-type(even) table a.button:hover {
  background-color: #999;
}

main > div:nth-of-type(even) blockquote {
 border-color: rgba(255, 255, 255, .4);
}
main > div:nth-of-type(even) :not(pre) > code {
  color: inherit;
  border-color: rgba(255, 255, 255, .2);
  background-color: rgba(255, 255, 255, .1);
}

ul.pros > li > .fa-check {
  color: #A2C837;
}
ul.cons > li > .fa-times {
  color: #C83737;
}
.fa.watermark {
  font-size: 8em;
  float: left;
  margin: 1.5rem 1rem 0 0;
  opacity: .4;
}

body > header nav > ul.external > li > a:hover,
body > header nav > ul.external > li > a:focus,
body > header .logo > a:hover,
body > header .logo > a:focus,
body > footer a:hover,
body > footer a:focus {
  color: #CBF160;
  text-shadow: 0 0 1em #A2C837;
}

body > header nav > ul.external > li > a:hover,
body > header .logo > a:hover,
body > footer a:hover {
  text-decoration: none;
}

/* pages */
body.home main {
  position: relative;
  padding-bottom: 3rem;
  background: -webkit-linear-gradient(-55deg, transparent 0%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .03) 50%, transparent 100%),
              -webkit-linear-gradient(235deg, transparent 0%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .03) 50%, transparent 100%), #fff;
  background: linear-gradient(145deg, transparent 0%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .03) 50%, transparent 100%),
              linear-gradient(215deg, transparent 0%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .03) 50%, transparent 100%), #fff;
}
body.home .core-services {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}

body.fourohfour main {
  position: relative;
  overflow: hidden;
}
body.fourohfour canvas {
  position: absolute;
  bottom: 0;
  height: 100%;
}
body.fourohfour section {
  position: relative;
}

@media (min-width: 40rem) {
  .welcome p {
    font-size: 1.1875rem;
    margin: 1rem 0;
  }
}

/* sticky footer */
body {
  display: -webkit-flex;
  display: flex;
  min-height: 100vh;
  -webkit-flex-direction: column;
  flex-direction: column;
}
main {
  -webkit-flex: 1;
  flex: 1;
}

/*
 * When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1),
 * it must ignore the selector and the following declaration block (if any) as well.
 * See: http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  /* Fix body collapsing in IE 11 when flexbox is used for sticky footer. */
  body {
    display: block; /* reset */
  }
}

/* modal */
.modal {
  font-size: .875rem;
  color: #666;
}

/* tabs */
.tabs > label {
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.tabs > label.is-active,
.tabs > label:not(.is-active):focus,
.tabs > label:not(.is-active):hover {
  color: inherit;
}
.tabs > div > div > label {
  display: block;
}




/* animation */
@-webkit-keyframes slide {
  0% {
    left: 100%;
  }
  8%,
  23% {
    left: 0%;
  }
  31%,
  46% {
    left: -100%;
  }
  54%,
  69% {
    left: -200%;
  }
  77%,
  92% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}
@keyframes slide {
  0% {
    left: 100%;
  }
  8%,
  23% {
    left: 0%;
  }
  31%,
  46% {
    left: -100%;
  }
  54%,
  69% {
    left: -200%;
  }
  77%,
  92% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}