/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset "UTF-8";

@keyframes shimmer {
  0% {
    background-position-x: 100%;
  }

  100% {
    background-position-x: 0;
  }
}

body {
  font-size: 1em;
  line-height: normal;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  overflow-y: scroll;
  height: 100%;
  position: relative;
  background: #eee;
  background-size: cover;
  background-attachment: fixed;
  margin: 0;
}

#root {
  margin: 0;
  color: #333;
  text-rendering: optimizeLegibility;
  background: transparent;
}

#root .container {
  max-width: 80em;
  margin: 0 auto;
  margin-top: 0.4rem;
  padding: 0 0.3rem;
}

@media (max-width: 35em) {
  #root .container {
    margin: 5px;
  }
}

#root .container-small {
  max-width: 35em;
  margin: 0 auto;
  margin-top: 0.4rem;
}

@media (max-width: 35em) {
  #root .container-small {
    margin: 5px;
  }
}

@keyframes loading {
  from {
    left: 0;
  }

  to {
    left: 400px;
  }
}

.icon {
  display: inline-block;
  height: 1em;
  width: 1em;
  fill: currentcolor;
  user-select: none;
  vertical-align: middle;
  margin: 0 0.1rem;
  margin-top: -0.25rem;
}

.sticky {
  position: sticky;
  top: 1rem;
}

a {
  color: #222b37;
  outline: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease-out;
  /*&:focus {
    @include control-shadow($links)
  }*/
}

a:focus,
a:hover {
  color: #706aad;
}

a:active,
a.active {
  color: #495c76;
}

/* Performance optimized box-sizing */

html,
body,
div,
article,
section,
main,
footer,
header,
form,
fieldset,
legend,
pre,
code,
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
dl,
dt,
dd,
textarea,
svg,
input,
button,
.button,
.border-box {
  box-sizing: border-box;
}

input[type='checkbox'] {
  position: absolute;
  opacity: 0;
}

input[type='checkbox'] + label {
  position: relative;
  cursor: pointer;
  padding: 0;
  vertical-align: text-bottom;
}

input[type='checkbox'] + label:before {
  content: '';
  margin: 0.15rem 0.2rem 0 0;
  display: inline-block;
  vertical-align: text-top;
  width: 18px;
  height: 18px;
  background: #ddd;
  border-radius: 3px;
}

input[type='checkbox']:hover + label:before {
  background: #8ac249;
}

input[type='checkbox']:focus + label:before {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
}

input[type='checkbox']:checked + label:before {
  background: #8ac249;
}

input[type='checkbox']:disabled + label {
  color: #b8b8b8;
  cursor: auto;
}

input[type='checkbox']:disabled + label:before {
  box-shadow: none;
  background: #ddd;
}

input[type='checkbox']:checked + label:after {
  content: '';
  position: absolute;
  left: 4px;
  top: 11px;
  background: white;
  width: 2px;
  height: 2px;
  box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
  transform: rotate(45deg);
}

hr {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 0.5rem 0.5rem;
}

center {
  width: 100%;
}

.error {
  background: #fbb;
  padding: 1rem;
  color: #990000;
  border-radius: 3px;
  margin: 0.2rem 0 1rem 0;
}

.avatar {
  stroke-width: 0px;
  margin-bottom: -4px;
  margin-left: 2px;
  border-radius: 3px;
  border: #ddd solid 2px;
  background: #c5c5c5;
  image-rendering: pixelated;
}

.scroll-up {
  background: #000;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Chevron_up' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cpath fill='%23FFFFFF' d='M15.484,12.452c-0.436,0.446-1.043,0.481-1.576,0L10,8.705l-3.908,3.747c-0.533,0.481-1.141,0.446-1.574,0 c-0.436-0.445-0.408-1.197,0-1.615c0.406-0.418,4.695-4.502,4.695-4.502C9.43,6.112,9.715,6,10,6s0.57,0.112,0.789,0.335 c0,0,4.287,4.084,4.695,4.502C15.893,11.255,15.92,12.007,15.484,12.452z'/%3E%3C/svg%3E%0A");
}

h3 .avatar {
  margin-right: 0.5rem;
}

::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  background: #eeeeee;
}

::-webkit-scrollbar-track {
  background: #e4e4e4;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #bdbdbd;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(0, 0, 0, 0.9);
}

.username-fade {
  opacity: 0.3;
  font-size: 0.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  margin-top: 0;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2.3rem;
}

h3 {
  font-size: 2rem;
}

h4 {
  font-size: 1.8rem;
}

h5 {
  font-size: 1.6rem;
}

h6 {
  font-size: 1.5rem;
}

p {
  margin: 0 0 1rem;
}

a,
ins,
u {
  text-decoration-skip: ink edges;
}

blockquote {
  border-left: 0.2rem solid #aaa;
  margin-left: 0;
  padding: 1rem 2rem;
}

blockquote p:last-child {
  margin-bottom: 0;
}

blockquote cite {
  color: #666;
}

ul,
ol {
  margin: 1rem 0 1rem 1rem;
  padding: 0;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin: 1.5rem 0 1.5rem 2rem;
}

ul li,
ol li {
  margin-top: 0.2rem;
}

ul {
  list-style: disc outside;
}

ul ul {
  list-style-type: circle;
}

ol {
  list-style: decimal inside;
}

ol ol {
  list-style-type: lower-alpha;
}

dl dt {
  font-weight: bold;
}

dl dd {
  margin: 0.5rem 0 1.5rem 0;
}

/* Searchbox relevant style */

#searchbox {
  position: relative;
  color: #706aad;
  height: 2rem;
  border-radius: 3px;
  padding-left: 0.5rem;
  min-width: 10rem;
  max-width: 30rem;
  margin-right: 0.2rem;
  width: 100%;
}

#searchbox .searchbox-butt {
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  margin: auto 0;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0rem;
  border-radius: 0 3px 3px 0;
  z-index: 11;
}

#searchbox .searchbox-butt .icon {
  fill: #fff;
}

#searchbox .react-autosuggest__container--open {
  filter: drop-shadow(10px 10px 9px rgba(1, 1, 1, 0.5));
  position: relative;
  z-index: 10;
}

#searchbox .react-autosuggest__container--open input {
  border-radius: 3px 3px 0 0;
}

#searchbox .react-autosuggest__suggestion {
  padding: 0.4rem 0.4rem;
}

#searchbox input {
  width: 100%;
  height: 100%;
  color: #000;
  background: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 80px;
  max-height: 90px;
  border: 0;
  padding-left: 0.5rem;
  padding-right: 2rem;
  border-radius: 3px;
  height: 2rem;
}

#searchbox input::placeholder {
  color: #909bac;
}

article.entry {
  padding-bottom: 0.5rem;
  font-size: 1rem;
}

article.entry .entry-ribbon {
  z-index: 1;
  width: 7rem;
  position: absolute;
  font-size: 1em;
  text-align: center;
  line-height: 2rem;
  color: #f0f0f0;
  top: 0.5rem;
  right: -2rem;
  transform: rotate(45deg);
  background: #8ac249;
  height: 2rem;
  pointer-events: none;
}

article.entry a.entry-a {
  display: flex;
  color: #000;
  border: 1px #333 solid;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 3px 10px, rgba(42, 59, 80, 0.23) 0px 6px 10px;
}

article.entry a.entry-a:hover .thumb,
article.entry a.entry-a:focus .thumb {
  background-size: 95%;
}

article.entry a.entry-a .thumb {
  border-radius: 3px 3px 0 0;
  width: 100%;
  background-position: center;
  background-size: 110%;
  transition: background-size 250ms ease-in-out;
  display: block;
  overflow: hidden;
  /*> div{
        color: #fff;
        font-size: 0.75rem;
        text-shadow: #000 1px 1px 7px, #000 1px 1px 5px, #000 1px 1px 2px;
      }*/
}

article.entry a.entry-a header.entry-head {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
}

article.entry a.entry-a .title {
  word-break: break-word;
  display: block;
  line-height: 1.4rem;
  font-size: 1rem;
}

article.entry a.entry-a .title svg {
  margin-right: 0.2rem;
}

article.entry a.entry-a .desc {
  display: block;
  font-size: 0.9rem;
  overflow: hidden;
  word-break: break-word;
  line-height: normal;
}

article.entry a.entry-a > aside {
  flex: 1;
  border-radius: 0 0 3px 3px;
}

article.entry a.entry-a > aside .score {
  word-wrap: break-word;
  font-size: 0.75rem;
  line-height: 1rem;
  color: black;
  margin: 0rem 0.1rem;
}

article.entry a.entry-a > aside .desc {
  display: block;
  padding: 0 0.5rem;
}

article.entry a.entry-a .tag,
article.entry a.entry-a .cat {
  display: inline-block;
  word-wrap: break-word;
  font-size: 0.7rem;
  padding: 0rem 0.2rem;
  margin: 0 0.1rem 0 0;
  border-radius: 3px;
  background: #ddd;
  color: #333;
}

article.entry a.entry-a .tag svg,
article.entry a.entry-a .cat svg {
  fill: #446b9c;
}

article.entry a.entry-a .entry-time {
  font-size: 0.65rem;
  text-align: right;
  float: right;
  padding: 0 0.25rem 0.25rem 0;
  color: #8695a7;
  text-transform: uppercase;
}

article.entry a.entry-a .entry-time .icon {
  margin-top: -0.15rem;
}

.results.cards0 {
  display: inline-block;
  vertical-align: top;
  display: flex;
  flex-wrap: wrap;
}

.results.cards0 article.entry {
  flex: 1;
  max-width: 30rem;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .results.cards0 article.entry {
    min-width: 25%;
  }
}

.results.cards0 article.entry a.entry-a {
  margin: 0 0.3rem;
  height: 100%;
  flex-direction: column;
  min-height: 3rem;
}

.results.cards0 article.entry a.entry-a .thumb {
  min-width: 14rem;
  height: 15rem;
  width: auto;
}

.results.cards0 article.entry a.entry-a .thumb header.entry-head {
  background: linear-gradient(0deg, #fff 0%, transparent 40%);
}

.results.cards0 article.entry a.entry-a .thumb header.entry-head .title {
  padding: 0.2rem 0.4rem;
  margin: 0.2rem 0.2rem;
  background-color: #222b37;
  color: #fff;
  display: inline-block;
  border-radius: 3px;
  font-weight: 500;
  transition: background-color 250ms ease-in-out;
}

.results.cards0 article.entry a.entry-a aside {
  background: #fff;
}

.results.cards0 article.entry a.entry-a aside .desc {
  padding: 0 0.4rem 0.4rem 0.4rem;
}

.results.cards0 article.entry a.entry-a:hover {
  border: 1px solid #8ac249;
}

.results.cards0 article.entry a.entry-a:hover .thumb header.entry-head .title {
  background-color: #706aad;
}

.results.cards1 {
  display: inline-block;
  vertical-align: top;
  display: flex;
  flex-wrap: wrap;
}

.results.cards1 article.entry {
  flex: 1;
  max-width: 30rem;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .results.cards1 article.entry {
    min-width: 25%;
  }
}

.results.cards1 article.entry a.entry-a {
  margin: 0 0.3rem;
  flex-direction: column;
  /*aside{
          position: absolute;
          background: transparent;
          color:rgba(255,255,255,0.7)
        }*/
}

.results.cards1 article.entry a.entry-a .thumb {
  min-width: 14rem;
  height: 14rem;
}

.results.cards1 article.entry a.entry-a .title {
  padding: 0.2rem 0.4rem;
  background-color: #222b37;
  color: #fff;
  display: inline-block;
  border-radius: 3px;
  transition: background-color 250ms ease-in-out;
}

.results.cards1 article.entry a.entry-a:hover {
  border: 1px solid #8ac249;
}

.results.cards1 article.entry a.entry-a:hover .title {
  background-color: #706aad;
}

.results.cards1 article.entry .thumb {
  border-radius: 3px;
}

.results.cards0 .entry-a,
.results.cards1 .entry-a {
  position: relative;
  overflow: hidden;
}

.results.cards0 .entry-a:focus,
.results.cards1 .entry-a:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

.results.cards0 .entry-stats,
.results.cards1 .entry-stats {
  margin: 0 0.2rem;
}

.results.cards0 .title,
.results.cards1 .title {
  margin: 0.2rem;
}

.results.cards0 .cat,
.results.cards1 .cat {
  color: rgba(255, 255, 255, 0.8);
}

.results.cards0 .desc,
.results.cards1 .desc {
  color: #666;
}

.results.cards0 .tag,
.results.cards1 .tag {
  color: #666;
}

.results.cards2,
.results.cards3 {
  color: #000;
}

.results.cards2 .entry-a,
.results.cards3 .entry-a {
  position: relative;
}

.results.cards2 .title,
.results.cards3 .title {
  color: #000;
  font-weight: 500;
}

.results.cards2 .new .title,
.results.cards3 .new .title {
  color: #8ac249;
}

.results.cards2 .cat,
.results.cards2 .tag,
.results.cards3 .cat,
.results.cards3 .tag {
  color: #666;
}

.results.cards2 .entry-time,
.results.cards3 .entry-time {
  position: absolute;
  right: 0;
  bottom: 0;
}

.results.cards2 {
  display: block;
}

.results.cards2 article.entry {
  padding-bottom: 0;
}

.results.cards2 article.entry a.entry-a {
  background: #fff;
  margin-bottom: 0.4rem;
  box-shadow: none;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 0.35rem 0.4rem;
  transition-property: background-color, padding-left, border;
}

.results.cards2 article.entry a.entry-a .thumb {
  width: 6rem;
  height: 6rem;
  border-radius: 5px;
  border: 1px solid #2c3d52;
}

.results.cards2 article.entry a.entry-a aside {
  padding-left: 0.5rem;
}

.results.cards2 article.entry a.entry-a aside .title {
  padding: 0rem 0rem 0rem 0.2rem;
}

.results.cards2 article.entry a.entry-a aside .desc {
  padding: 0.2rem 0rem 0rem 0.2rem;
}

.results.cards2 article.entry a.entry-a:hover,
.results.cards2 article.entry a.entry-a:focus {
  border: 1px solid #8ac249;
}

.results.cards3 article.entry {
  padding-bottom: 0;
}

.results.cards3 article.entry a.entry-a {
  box-shadow: none;
  border: none;
  border-radius: 0px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid transparent;
  padding: 0.35rem 0.4rem;
  transition-property: background-color, padding-left, border;
}

.results.cards3 article.entry a.entry-a .thumb {
  display: none;
}

.results.cards3 article.entry a.entry-a aside .title {
  display: inline-block;
  padding: 0 0.5rem 0 0;
}

.results.cards3 article.entry a.entry-a aside .desc {
  padding: 0;
  color: #666;
  font-size: 0.8rem;
}

.results.cards3 article.entry a.entry-a:hover,
.results.cards3 article.entry a.entry-a:focus {
  border: 1px solid #8ac249;
}

.results.cards3 article.entry a.entry-a .entry-time {
  background: #eeeeee;
}

.entrylist {
  display: block;
  margin: 0.5rem;
}

.entrylist .results.cards1 article.entry a.entry-a {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.entrylist .results.cards1 article.entry a.entry-a .thumb {
  min-width: 7rem;
  height: 8rem;
}

.entrylist .results.cards1 article.entry a.entry-a .entry-head .title {
  line-height: normal;
  font-size: 0.8rem;
}

.entrylist .slideshow {
  display: block;
  height: 10rem;
  padding: 0 1rem;
}

.entrylist .slick-list {
  height: 10rem;
  overflow: hidden;
}

.entrylist .slick-track {
  width: max-content;
}

/* Make clicks pass-through */

#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #8ac249;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

/* Fancy blur effect */

#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #8ac249, 0 0 5px #8ac249;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */

#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 3px;
  right: 10px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border: solid 2px transparent;
  border-top-color: #8ac249;
  border-left-color: #8ac249;
  border-radius: 50%;
  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes nprogress-spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.pagination {
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
}

.pagination a {
  padding: 0.4rem 0.7rem;
  text-align: center;
  white-space: nowrap;
}

.pagination a.active,
.pagination a.active:hover {
  cursor: default;
  color: #706aad;
  font-weight: bold;
  background: none;
  border: 0;
}

.pagination a.disabled,
.pagination a.disabled:hover {
  cursor: default;
  color: #aaa;
  background: none;
  border: 0;
  text-shadow: none;
}

.btn,
button {
  cursor: pointer;
  height: 3rem;
  padding: 0 1rem;
  font-size: 1.2rem;
  overflow: hidden;
  word-break: break-all;
  display: inline-block;
  margin-bottom: 0;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  border-radius: 3px;
  user-select: none;
  box-shadow: none;
  transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, color 0.1s ease-out;
  color: #fff;
  background-color: #f5f5f5;
  position: relative;
}

.btn:hover,
.btn:active:hover,
button:hover,
button:active:hover {
  color: #000;
  background-color: #fff;
  border-color: rgba(0, 0, 0, 0.2);
}

.btn:active,
button:active {
  -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.btn:after,
button:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-radial-gradient(circle, #444444 10%, transparent 10.01%);
  background-image: -o-radial-gradient(circle, #444444 10%, transparent 10.01%);
  background-image: radial-gradient(circle, #444444 10%, transparent 10.01%);
  background-repeat: no-repeat;
  -webkit-background-size: 1000% 1000%;
  background-size: 1000% 1000%;
  background-position: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: background 0.5s, opacity 1s;
  -o-transition: background 0.5s, opacity 1s;
  transition: background 0.5s, opacity 1s;
}

.btn:active,
button:active {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.btn:focus,
button:focus {
  color: #000;
  background-color: #ffffff;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.btn[disabled],
button[disabled] {
  cursor: not-allowed;
  opacity: 0.35;
  filter: alpha(opacity=35);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn:after,
button:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: -webkit-radial-gradient(circle, #444444 10%, transparent 10.01%);
  background-image: -o-radial-gradient(circle, #444444 10%, transparent 10.01%);
  background-image: radial-gradient(circle, #444444 10%, transparent 10.01%);
  background-repeat: no-repeat;
  -webkit-background-size: 1000% 1000%;
  background-size: 1000% 1000%;
  background-position: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: background 0.5s, opacity 1s;
  -o-transition: background 0.5s, opacity 1s;
  transition: background 0.5s, opacity 1s;
}

.btn:active:after,
button:active:after {
  -webkit-background-size: 0% 0%;
  background-size: 0% 0%;
  opacity: 0.2;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}

.btn.btn-flat,
button.btn-flat {
  color: #000;
  padding: 0.25rem;
  font-size: 1rem;
  height: 2rem;
  text-decoration: none;
}

.btn.btn-primary,
button.btn-primary {
  color: #fff;
  background: #8ac249;
}

.btn.btn-primary:hover,
button.btn-primary:hover {
  color: #000;
}

.btn.btn-secondary,
button.btn-secondary {
  color: #fff;
  background-color: #3b5998;
}

.btn.btn-secondary:hover,
button.btn-secondary:hover {
  color: #000;
}

.btn.btn-social,
button.btn-social {
  color: #000;
  background: #ececec;
  text-decoration: none;
  padding: 0.5rem 1rem;
  width: auto;
  height: auto;
}

.btn.btn-social:hover,
button.btn-social:hover {
  color: #666;
}

.btn.btn-social .icon,
button.btn-social .icon {
  margin-right: 0.5rem;
}

.reveal-button {
  position: relative;
}

.reveal-button .reveal-button-b {
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
}

.reveal-button .reveal-button-b:focus,
.reveal-button .reveal-button-b:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

.reveal-button .reveal-button-c {
  z-index: 100;
  pointer-events: none;
  position: absolute;
  left: 0rem;
  top: 2rem;
  filter: drop-shadow(10px 10px 9px rgba(1, 1, 1, 0.5));
  transform: translate(0, -2rem);
  transition: transform 0.25s ease-out;
}

.reveal-button .reveal-button-c.reveal-full {
  min-width: 8rem;
  width: 100%;
}

.reveal-button .reveal-button-c a {
  color: #fff;
}

.reveal-button .reveal-button-c a:hover,
.reveal-button .reveal-button-c a:focus {
  color: #d0d0d0;
  text-decoration: underline;
}

.reveal-button .reveal-button-c a.active {
  color: #8ac249;
}

.reveal-button .reveal-button-c hr {
  border-color: #546884;
}

.reveal-button .reveal-button-c-in {
  will-change: auto;
  display: flex;
  flex-flow: column;
  background: #222b37;
  padding: 1rem;
  transition: clip-path 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
  visibility: hidden;
  clip-path: circle(0rem at 25% 1rem);
}

@supports (-ms-ime-align: auto) {
  .reveal-button .reveal-button-c-in {
    opacity: 0;
    transition: opacity 0.3s ease-out;
  }
}

.reveal-button .reveal-button-c-in .reveal-b {
  margin: 0.2rem;
}

.reveal-button .reveal-button-c-in .reveal-split {
  flex: 1;
}

.reveal-button .browse-views {
  flex-direction: row;
}

.reveal-button .browse-views .icon {
  fill: #000;
}

.reveal-button.reveal-hover .reveal-button-b {
  color: #fff;
  background: #222b37;
  border-radius: 3px 3px 0 0;
}

.reveal-button.reveal-hover .reveal-button-b .icon {
  fill: #fff;
}

.reveal-button.reveal-hover .reveal-button-c {
  transform: translate(0, 0);
  pointer-events: auto;
}

.reveal-button.reveal-hover .reveal-button-c.reveal-full .reveal-button-c-in {
  border-radius: 0 0 3px 3px;
}

.reveal-button.reveal-hover .reveal-button-c-in {
  visibility: visible;
  border-radius: 0 3px 3px 3px;
  clip-path: circle(200% at 50% 50%);
}

@supports (-ms-ime-align: auto) {
  .reveal-button.reveal-hover .reveal-button-c-in {
    opacity: 1;
  }
}

.reveal-b {
  display: block;
  border-radius: 3px;
  padding: 0.2rem 0.4rem;
  text-align: center;
  background: #ddd;
  height: 2rem;
  transition: background-color 250ms ease-out;
  cursor: pointer;
  user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  line-height: 1.5rem;
}

.reveal-b.active {
  background: #8ac249;
  cursor: default;
}

.reveal-b.active .icon {
  fill: #000;
}

.reveal-b.active:hover {
  background: #8ac249;
}

.reveal-categories {
  color: #fff;
  flex-shrink: 1;
}

.reveal-categories u {
  color: #57677d;
  text-decoration: none;
  margin-bottom: 0.5rem;
  display: block;
}

.reveal-collections {
  min-width: 14rem;
}

.reveal-collections form {
  padding-top: 1rem;
}

.reveal-collections input,
.reveal-collections select {
  height: 2rem;
}

.reveal-collections button {
  width: 100%;
  cursor: pointer;
  background: #8ac249;
  margin: 1.5rem 0 0.2rem;
  border: none;
  padding: 0.5rem 0.2rem;
  font-size: 1rem;
}

.reveal-collections form {
  display: flex;
  flex-wrap: wrap;
}

.reveal-collections form input {
  flex: 1;
}

.reveal-collections form button {
  margin-top: 0.2rem;
}

.collection-item {
  position: relative;
  color: #fff;
  padding-left: 1.5rem;
}

.collection-item:after {
  content: '';
  position: absolute;
  display: inline-block;
  left: 3px;
  top: 4px;
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid #fff;
}

.collection-item.active:after {
  background: #8ac249;
  border: 1px solid #8ac249;
}

.collection-item:hover:after {
  border: 1px solid #8ac249;
}

.page-auth {
  display: flex;
  flex-direction: column;
}

.auth .form-group {
  max-width: 26rem;
  display: flex;
}

.auth .form-group label {
  padding: 0.4rem 0.6rem;
  flex: 2;
}

.auth .form-group input {
  font-size: 1.2rem;
  font-weight: 300;
  border: 0;
  padding: 0.4rem 0.6rem;
  flex: 3;
}

.browse {
  display: flex;
  flex-direction: row;
}

.header-search {
  background: linear-gradient(to bottom, #e6e6e6 0%, #eee 100%);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0.4rem 0.3rem;
}

.browse-loadmore {
  text-align: center;
  font-size: 2rem;
  margin: 1rem 0;
  background: #fff;
  width: 100%;
  display: block;
  border-radius: 10px;
  border: 1px solid transparent;
}

.browse-loadmore:hover,
.browse-loadmore:focus {
  border: 1px solid #8ac249;
}

.browse-loadmore:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

.browse-results {
  flex: 6;
}

.results {
  width: 100%;
  align-self: baseline;
}

.results .noresults {
  cursor: default;
  font-size: 2rem;
  padding: 3rem 0.5rem;
  text-align: center;
  width: 100%;
}

.results .noresults .noresults-advice {
  font-size: 1.5rem;
}

.results .noresults .noresults-advice a {
  color: #222b37;
  text-decoration: underline;
}

.results .noresults .noresults-advice a:hover {
  color: #706aad;
}

.browse-sidebar {
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.browse-sidebar .browse-sidebar-title {
  line-height: 1.8rem;
  font-size: 0.8rem;
  white-space: nowrap;
  height: 2.4rem;
  font-weight: 500;
  margin-left: 0.4rem;
}

@media (max-width: 35em) {
  .browse-sidebar {
    display: none;
  }
}

.browse-cats {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-right: 0.3rem;
}

.browse-cats a {
  padding: 0.2rem 0.5rem;
  margin-bottom: 0.1rem;
  word-wrap: normal;
  word-break: keep-all;
  border-radius: 3px;
  transition: all 225ms ease-out;
}

.browse-cats a.active {
  background-color: #8ac249;
  color: #fff;
}

.browse-cats a:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

.browse-cats a:hover {
  text-decoration: underline;
}

.browse-suggestion {
  font-size: 1.5rem;
  text-align: center;
  margin: 0 0 1rem 0;
}

.browse-suggestion u {
  font-weight: 500;
}

.browse-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  font-size: 1rem;
  min-width: 11.5rem;
  min-height: 2.4rem;
}

.browse-filters .browse-filters-container {
  display: flex;
  flex-direction: row;
}

.browse-filters .browse-filters-container .reveal-button {
  margin: 0 0.2rem 0.4rem 0.2rem;
}

.browse-filters .browse-info {
  flex-grow: 1;
  line-height: 1.8rem;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  margin-right: 0.5rem;
}

.browse-filters .browse-search {
  flex: 1;
  min-width: 5rem;
  z-index: 2;
}

.browse-filters .browse-license {
  flex: 2;
}

.browse-filters aside {
  width: 100%;
}

.browse-filters a {
  white-space: nowrap;
  display: block;
}

.browse-filters-active {
  display: flex;
  flex-direction: row;
  font-size: 0.8rem;
  line-height: 1.8rem;
  margin: 0 0.5rem 0 0;
}

.browse-filters-active .filter {
  flex-shrink: 1;
  border-radius: 3px;
  padding: 0rem 0.4rem;
  margin: 0.2rem;
  text-align: center;
  background: #fff;
  height: 1.5rem;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
  line-height: 1.5rem;
}

.browse-filters-active .filter .icon {
  margin-right: 0.2rem;
}

.browse-filters-active .browse-clear {
  line-height: 1.4rem;
  font-weight: 500;
  transition: background-color 225ms ease-out;
  background-color: #e6e6e6;
}

.browse-filters-active .browse-clear:hover {
  background-color: #fff;
}

.header-project {
  background: linear-gradient(to bottom, #e6e6e6 0%, #eee 100%);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0.4rem 0;
}

.header-project .header-project-container {
  padding: 0 0.3rem;
  display: flex;
  width: 100%;
  max-width: 80em;
  min-height: 7rem;
}

@media (max-width: 35em) {
  .header-project .header-project-container {
    flex-direction: column;
  }
}

.header-project .header-project-container b {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.header-project .header-project-container i {
  font-size: 0.9rem;
}

.header-project .header-project-container p {
  font-size: 0.9rem;
  margin: 0.5rem 0 0.5rem;
  word-break: break-word;
}

.header-project .header-project-container .cat {
  display: inline-block;
  word-wrap: break-word;
  font-size: 0.7rem;
  padding: 0rem 0.2rem;
  margin: 0 0.1rem 0 0;
  border-radius: 2px;
  background: #dcdcdc;
  color: #333;
}

.header-project .header-project-container .cat:hover {
  color: #706aad;
}

.header-project .header-project-main {
  display: flex;
  flex: 3;
  flex-direction: row;
  align-items: flex-start;
}

.header-project .header-project-side {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header-project .header-project-avatar {
  flex-shrink: 1;
}

.header-project .header-project-avatar img {
  border-radius: 100%;
  margin-right: 1rem;
}

.header-project .header-project-data {
  font-size: 0.8rem;
  display: block;
  color: #999;
  white-space: nowrap;
}

.header-project .header-project-data svg {
  fill: #999;
  margin-right: 0.2rem;
}

.header-project .header-project-details a:hover,
.header-project .header-project-details a:focus {
  text-decoration: underline;
}

.header-project .header-project-buttons {
  display: flex;
  flex-shrink: 1;
  padding-bottom: 0.5rem;
}

.header-project .header-project-buttons .project-download {
  flex: 10;
  margin-left: 0.25rem;
  padding-right: 0.5rem;
}

.header-project .header-project-buttons .project-source {
  flex: 1;
}

.project {
  display: flex;
}

@media (max-width: 35em) {
  .project {
    flex-direction: column;
  }
}

.project aside {
  flex: 2;
  padding: 0 0 0 0.5rem;
}

.project aside .project-side-fav {
  margin: 0.5rem 0;
}

.project aside .project-side-dependencies {
  margin: 0.4rem 0;
}

.project aside .project-side-dependencies .project-side-dependency {
  font-size: 0.7rem;
  background: #fff;
  margin: 0.2rem 0;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
}

.project aside .details {
  margin: 0.1rem;
  overflow: hidden;
  flex: 6;
}

@media (max-width: 35em) {
  .project aside .details {
    margin-top: 1rem;
  }
}

.project aside .details .desc-data {
  font-size: 0.8rem;
  display: block;
  color: #999;
}

.project aside .details .desc-data svg {
  fill: #999;
  margin-right: 0.2rem;
}

.project aside nav {
  flex-direction: row;
}

.project aside nav .results {
  margin: 0;
}

.project aside nav .results .entry a.entry-a .thumb {
  height: 7rem;
}

.project .content {
  flex: 6;
  overflow: auto;
  margin: 0 0.2rem;
  /*&.collapsed > div{
      overflow: auto;
    }*/
}

@media (max-width: 35em) {
  .project .content {
    margin: 0;
    flex-direction: column;
  }

  .project .content aside {
    padding-top: 1rem;
  }
}

.project .content.collapsed .content-inner {
  border-radius: 10px 10px 0 0;
}

.project .content .content-inner {
  overflow: auto;
  border-radius: 10px;
  position: relative;
}

.project .content .content-inner:before {
  content: "";
  z-index: 1;
  pointer-events: none;
  display: block;
  position: absolute;
  background-image: linear-gradient(to bottom, rgba(238, 238, 238, 0) 0%, rgba(238, 238, 238, 0.95) 66%);
  width: 100%;
  height: 200px;
  left: 0;
  right: 0;
  bottom: 0;
}

.project .content .content-inner:before {
  display: none;
}

.project .content .md {
  overflow: auto;
  color: #444;
  background: #fff;
  padding: 0.75rem 1rem;
}

.project .content.collapsed .md {
  overflow: hidden;
  height: 800px;
}

@media (max-width: 35em) {
  .project .content.collapsed .md {
    height: 400px;
    margin-bottom: 2rem;
  }
}

.project .content.collapsed > div:before {
  display: block;
}

.project .content .readmore {
  position: absolute;
  bottom: 0;
  z-index: 2;
  text-align: center;
  width: 100%;
  left: 0;
  padding-bottom: 3rem;
  pointer-events: none;
}

.project .content .readmore .thumb {
  width: 100px;
  height: 100px;
  background-color: #fff;
  background-position: center;
  background-size: cover;
  display: inline-block;
  box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px 0px;
  margin: 0 0.2rem;
  border-radius: 5px;
  border: 1px solid #2f485a;
  pointer-events: auto;
}

.project .content .readmore > a {
  display: block;
  text-align: center;
  position: absolute;
  bottom: 0.5rem;
  width: 100%;
  pointer-events: auto;
  font-size: 2rem;
}

.index {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: #021b0b;
  overflow: hidden;
  border-radius: 10px;
}

.index .index-bg {
  position: absolute;
  background-size: cover;
  background-position: 50% 50%;
  animation: kenburnsEffect 30s cubic-bezier(0.39, 0.575, 0.565, 1) forwards;
  /* Change this to alternate to stop the loop. */
  will-change: auto;
  width: 100%;
  height: 100%;
}

@media (max-width: 35em) {
  .index {
    flex-direction: column;
  }
}

.index .index-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.index .index-content .index-top {
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-top: 1rem;
  margin-bottom: 3rem;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  height: 17rem;
}

.index .index-content .index-top .index-logo {
  flex: 1;
  align-self: center;
  height: 11rem;
  max-width: 20rem;
}

.index .index-content .index-top .home-text {
  background: rgba(0, 0, 0, 0.8);
}

.index .index-content .index-top .home-text h1 {
  margin: 0.5rem;
}

@media (max-width: 35em) {
  .index .index-content .index-top .home-text h1 {
    font-size: 1.2rem;
  }
}

.index .index-content .index-search-form {
  z-index: 10;
  width: 100%;
  display: flex;
  max-width: 40rem;
  filter: drop-shadow(4px 6px 20px black);
}

@media (max-width: 35em) {
  .index .index-content .index-search-form {
    flex-direction: column-reverse;
  }
}

.index .index-content .index-search-form .index-search {
  flex: 4;
  height: 4rem;
  color: #000;
  font-size: 1.5rem;
  font-weight: 300;
  border: none;
  border-radius: 7px 0 0 7px;
  padding: 1rem 1rem;
}

@media (max-width: 35em) {
  .index .index-content .index-search-form .index-search {
    border-radius: 0;
    font-size: 1.3rem;
    margin: 0.5rem;
  }
}

.index .index-content .index-search-form .index-big-button {
  flex: 1;
  height: 4rem;
  cursor: pointer;
  font-size: 1.5rem;
  box-shadow: none;
  border-radius: 0 7px 7px 0;
  text-align: center;
  background: #8ac249;
}

@media (max-width: 35em) {
  .index .index-content .index-search-form .index-big-button {
    border-radius: 7px;
    margin: 0.5rem;
  }
}

.index .index-content .index-bottom {
  z-index: 9;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 1rem;
  height: 18rem;
  background: linear-gradient(180deg, transparent 0%, #000 150%);
}

.index .index-content .index-bottom .index-categories {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: baseline;
  min-width: 4rem;
  max-width: 40rem;
  align-self: center;
  margin: 0 2rem;
}

.index .index-content .index-bottom .index-categories a {
  flex: 1;
  padding: 0.25rem 0.5rem;
  color: #ffffff;
  background: #000;
  margin: 0.2rem;
  border-radius: 3px;
  white-space: nowrap;
  z-index: 1;
}

.index .index-content .index-bottom .index-categories a:focus,
.index .index-content .index-bottom .index-categories a:hover {
  background: #8ac249;
}

.index .index-credit {
  z-index: 10;
  position: absolute;
  bottom: 0.5rem;
  right: 1rem;
  color: #828282;
  mix-blend-mode: screen;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
}

.index .index-credit:hover,
.index .index-credit:focus {
  color: #fff;
}

.latest h5 {
  margin: 0;
  font-size: 1rem;
  display: inline-block;
  word-wrap: break-word;
  padding: 0.5rem 1rem;
  border-radius: 10px 10px 0 0;
  background: #f8f8f8;
  color: #333;
}

.latest h5 a {
  text-decoration: none;
}

.latest .categories {
  margin: 0 0 1.5rem 0;
}

.latest .latest-entry {
  margin: 0 0 0.5rem 0;
  background: #eee;
}

.latest .latest-entry h6 {
  background: #e6e6e6;
  padding: 0.5rem 1rem;
  border-radius: 10px;
}

.latest .category-container {
  margin: 0rem;
  padding: 1rem 0 0.5rem 0.2rem;
  background: #ffffff;
  border-radius: 0 10px 10px 10px;
}

.latest .category-container .category-item {
  margin: 0 0.5rem 0.5rem 1rem;
}

.latest .category-container a {
  font-weight: 500;
  margin-right: 0.5rem;
  color: #000;
}

.latest .category-container a.green {
  color: #8ac249;
}

.latest .category-container a:hover,
.latest .category-container a:focus {
  text-decoration: underline;
}

.latest .category-container span {
  color: #999;
  font-size: 0.8rem;
}

.latest .category-container span.tag {
  display: inline-block;
  word-wrap: break-word;
  font-size: 0.7rem;
  padding: 0rem 0.2rem;
  margin: 0 0.5rem 0 0;
  border-radius: 2px;
  background: #ddd;
  color: #333;
}

.latest .category-container span.tag svg {
  fill: #446b9c;
}

.gray-box {
  margin: 0 0 0 0.5rem;
}

@media (max-width: 35em) {
  .gray-box {
    margin: 0;
  }
}

.gray-box hr {
  margin: 2rem 3rem 1rem 3rem;
}

.gray-box .shortcuts .btn {
  margin-right: 0.5rem;
}

.gray-box .changelog {
  font-size: 0.9rem;
}

.gray-box .changelog h5 {
  padding: 0.5rem 0rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.gray-box .changelog span {
  font-size: 0.7rem;
  text-transform: uppercase;
  line-height: 13px;
  padding: 0.05rem 0.2rem;
  background: #8ac249;
  color: #fff;
  display: inline-block;
  border-radius: 2px;
  border: rgba(0, 0, 0, 0.2) solid 1px;
  vertical-align: middle;
  margin-top: -0.2rem;
  margin-right: 0.3rem;
}

.gray-box .changelog span.fix {
  background: #c24949;
}

.gray-box .changelog span.mod {
  background: #49a5c2;
}

.gray-box .changelog span.user-req {
  background: #706aad;
}

.gray-box .changelog a {
  text-decoration: underline;
}

.gray-box .stats p {
  color: #999;
  text-align: center;
  font-size: 0.7rem;
  border-top: 1px solid #eee;
}

@keyframes kenburnsEffect {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.5);
  }
}

.page {
  color: #444;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: 10px;
}

.page a {
  color: #222b37;
  text-decoration: underline;
}

.page a:focus,
.page a:hover {
  color: #706aad;
}

.page a.active {
  color: #8ac249;
}

.page label {
  display: block;
  margin-top: 1rem;
}

.page input {
  flex: 1;
  height: 2.5rem;
  color: #000;
  background: #f0f0f0;
  font-size: 1.2rem;
  border: none;
  border-radius: 3px;
  padding: 0 0.5rem;
  width: 100%;
}

.page textarea {
  flex: 1;
  min-height: 7rem;
  color: #000;
  background: #f0f0f0;
  font-size: 1.2rem;
  border: none;
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  width: 100%;
}

.page select {
  flex: 1;
  height: 2.5rem;
  border: none;
  border-radius: 3px;
  background: #f0f0f0;
  font-size: 1.2rem;
  padding: 0 0.5rem;
  width: 100%;
}

.page button {
  margin-top: 2rem;
  margin-right: 1rem;
}

.page-split {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 35em) {
  .page-split {
    flex-direction: column;
  }
}

.page-split aside {
  flex: 2;
}

.page-split .page-split-last {
  margin-left: 1rem;
}

.page-split .page-split-first {
  margin-right: 1rem;
}

.page-split .page-split-small {
  flex: 1;
}

.page-split .page-split-logo {
  flex: 1;
}

@media (max-width: 35em) {
  .page-split .page-split-logo {
    display: none;
  }
}

.page-split .page-split-logo-img {
  padding: 0.5rem 0;
  opacity: 0.1;
}

.feedback {
  background: #fff;
}

.feedback ul.feedback-type {
  list-style: none;
  margin: 0;
  margin-bottom: 1rem;
}

.feedback ul.feedback-type li {
  display: inline-block;
  margin-right: 5px;
}

.feedback ul.feedback-type li:last-child {
  margin-right: 0;
}

.feedback ul.feedback-type li.active .feedback-item {
  background: #8ac249;
  color: white;
  position: relative;
}

.feedback ul.feedback-type li.active .feedback-item:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-top-color: #8ac249;
  border-width: 5px;
  margin-left: -5px;
}

.feedback ul.feedback-type .feedback-item {
  cursor: pointer;
  background: #f1f1f1;
  padding: 0.5rem;
  border-radius: 3px;
  color: #555;
}

.feedback ul.feedback-type .feedback-item:hover {
  background: #8ac249;
  color: white;
}

.feedback .feedback-text {
  width: 100%;
  min-height: 150px;
  background: #f0f0f0;
  border-radius: 3px;
  font-size: 1.2rem;
  border: none;
  padding: 1rem;
  font-family: inherit;
}

.page-wip {
  font-size: 3rem;
  font-weight: 200;
  text-align: center;
  text-transform: uppercase;
}

.page-wip-counter {
  color: #706aad;
}

.page-wip-side {
  display: flex;
  justify-content: center;
  flex-flow: column;
  color: #000;
}

.page-404 {
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
}

.page-section {
  margin-top: 1rem;
}

.additional-link {
  background: #fff;
  padding: 0.5rem 1rem;
  margin: 0.5rem 0;
  border-radius: 10px;
}

.additional-link a:hover,
.additional-link a:focus {
  text-decoration: underline;
}

.header-collection {
  background: linear-gradient(to bottom, #e6e6e6 0%, #eee 100%);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0.4rem 0;
}

.header-collection .header-collection-container {
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 80em;
}

.header-collection .header-collection-main {
  display: flex;
  flex: 3;
  flex-direction: column;
  align-items: flex-start;
}

.header-collection .header-collection-side {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.header-collection .header-collection-data {
  font-size: 0.8rem;
  display: block;
  color: #999;
  white-space: nowrap;
}

.header-collection .header-collection-data svg {
  fill: #999;
  margin-right: 0.2rem;
}

.header-collection p {
  font-size: 0.9rem;
  margin: 0.5rem 0 0.5rem;
  word-break: break-word;
}

.header-collection p .avatar {
  margin-right: 0.5rem;
}

.header-collection h2 {
  margin-bottom: 0;
}

.collections {
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 35em) {
  .collections {
    flex-direction: column;
  }
}

.collections .collection-form label {
  width: 12rem;
}

.collections .collection-title {
  margin-bottom: 1rem;
}

.collections .collections-side {
  flex: 2;
}

@media (max-width: 35em) {
  .collections .collections-side {
    margin-bottom: 0.5rem;
  }
}

.collections .collections-side span {
  margin: 0;
  color: #7976a1;
}

.collections .collections-side img {
  width: 100%;
}

.collections .collections-list {
  flex: 4;
  margin-right: 0.5rem;
}

@media (max-width: 35em) {
  .collections .collections-list {
    margin-right: 0rem;
  }
}

.collections .collections-items {
  margin-bottom: 2rem;
}

.collections .collections-item {
  margin: 0.2rem;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  background: #fff;
}

.collections .collections-del {
  font-size: 0.7rem;
  text-transform: uppercase;
  line-height: 13px;
  padding: 0.05rem 0.2rem;
  background: #c24949;
  color: #fff;
  display: inline-block;
  border-radius: 2px;
  border: rgba(0, 0, 0, 0.2) solid 1px;
  vertical-align: middle;
  margin-top: -4px;
  margin-left: 0.5rem;
}

.blog-logo {
  position: absolute;
  right: 1rem;
  opacity: 0.1;
}

.post .post-image {
  margin: 1rem 0;
}

.post .post-time {
  color: #999;
  margin-top: -1rem;
}

.post .reveal-button {
  margin-top: 1rem;
  width: 8rem;
}

.blog-side-title {
  font-size: 1.7rem;
}

.blog-link {
  display: block;
  position: relative;
  height: 7rem;
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 1rem;
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 30px, rgba(42, 59, 80, 0.23) 0px 6px 10px;
}

.blog-link .post-image {
  min-height: 7rem;
  width: 100%;
  transition: filter 200ms ease-out;
  filter: grayscale(100%);
  opacity: 0.5;
}

.blog-link.active .post-image {
  filter: grayscale(0%);
  opacity: 1;
}

.blog-link.active .blog-link-bg {
  opacity: 0.2;
}

.blog-link.active .blog-link-meta {
  background: #8ac249;
  color: #ffffff;
}

.blog-link .blog-link-bg {
  transition: opacity 200ms ease-out;
  position: absolute;
  width: 100%;
  top: 0;
  background: linear-gradient(20deg, rgba(42, 59, 80, 0.5) 0%, rgba(42, 59, 80, 0.35) 100%);
  height: 7rem;
  opacity: 1;
}

.blog-link .blog-link-date {
  display: inline-block;
  word-wrap: break-word;
  font-size: 0.75rem;
  padding: 0rem 0.2rem;
  margin: 0 0.1rem 0 0;
  border-radius: 2px;
  background: #ddd;
  color: #333;
  position: absolute;
  left: 6px;
  top: 3.5rem;
}

.blog-link .blog-link-meta {
  position: absolute;
  bottom: 0.2rem;
  left: 0rem;
  padding: 0.2rem 0.4rem;
  margin: 0.2rem 0.4rem;
  background: #fff;
  color: #000;
  display: inline-block;
  border-radius: 2px;
  box-shadow: rgba(42, 59, 80, 0.1) 2px 2px 0px;
}

.my-collection-list .my-collection {
  display: flex;
  flex-flow: row;
  align-items: center;
  text-decoration: none;
  background: #fff;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  margin-bottom: 0.4rem;
  border: 1px solid transparent;
}

.my-collection-list .my-collection:hover,
.my-collection-list .my-collection:focus {
  border: 1px solid #8ac249;
}

.my-collection-list .my-collection .my-collection-title {
  font-size: 1.7rem;
  margin-right: 1rem;
}

@media (max-width: 35em) {
  .my-collection-list .my-collection .my-collection-title {
    font-size: 1rem;
  }
}

.my-collection-list .my-collection .my-collection-icon {
  width: 3rem;
  height: 3rem;
  margin-right: 0.5rem;
}

.my-collection-list .my-collection .my-collection-icon svg {
  width: 3rem;
  height: 3rem;
  margin-top: 0.1rem;
}

.my-collection-list .my-collection .my-collection-meta {
  flex: 1;
  text-align: right;
  font-size: 0.8rem;
}

.header {
  display: flex;
  justify-content: center;
  flex-direction: row;
  padding: 0.4rem 0;
}

.header .header-container {
  cursor: default;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: 80em;
  justify-content: flex-end;
}

.header .header-title {
  flex: 1;
  display: flex;
  padding: 0 0.2rem;
  margin-top: 0.2rem;
  align-items: center;
  color: #222b37;
}

.header .header-title .section {
  font-size: 1rem;
  margin-right: 0.3rem;
  padding-top: 0.7rem;
  margin-bottom: 0.7rem;
  font-weight: 400;
  line-height: 1.2;
  margin-top: 0;
  color: #8ac249;
  white-space: nowrap;
}

.header .header-title .section:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

.header .header-title .section:before {
  content: '/ ';
  position: relative;
  bottom: 0.08em;
  color: #bbbbbb;
}

.header .header-title h1 {
  font-size: 1rem;
  padding-top: 0.7rem;
  margin-bottom: 0.7rem;
  color: #909cad;
  white-space: nowrap;
}

@media (max-width: 35em) {
  .header .header-title h1 {
    display: none;
  }
}

.header .header-title h1:before {
  content: '/ ';
  position: relative;
  bottom: 0.08em;
  color: #bbbbbb;
}

.header .header-title a.logo {
  display: inline-block;
  height: 2.6rem;
  width: 9rem;
  margin-right: 0.3rem;
  margin-left: 0.4rem;
  background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjI2IDE4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEuNDE0Ij4KICA8ZyBmaWxsPSIjMjIyYjM3Ij4KICAgIDxwYXRoIGQ9Ik0yNzAuMjI5IDkzLjI3N2MwIDIzLjM1OS05Ljk2MSAzNS4wMzktMjkuODgzIDM1LjAzOS0xOC45NDUgMC0yOC40MTgtMTEuMjUtMjguNDE4LTMzLjc1VjQyLjgyOGg1Ljc0M3Y1MC45MThjMCAxOS40OTIgNy45MjkgMjkuMjM4IDIzLjc4OSAyOS4yMzggMTUuMzUxIDAgMjMuMDI3LTkuNDczIDIzLjAyNy0yOC40MThWNDIuODI4aDUuNzQydjUwLjQ0OXpNMzMwLjM0NiAxMjYuODUxVjkxLjkyOWMwLTE0LjQxNC01LjE5NS0yMS42MjEtMTUuNTg2LTIxLjYyMS01Ljc4MSAwLTEwLjUyNyAyLjExOS0xNC4yMzggNi4zNTgtMy43MTEgNC4yMzgtNS41NjYgOS40ODItNS41NjYgMTUuNzMydjM0LjQ1M2gtNS4zOTF2LTYwaDUuMzkxVjc3Ljc1aC4yMzRjNC4zNzUtOC4yNDMgMTEuMjExLTEyLjM2NCAyMC41MDgtMTIuMzY0IDYuNDg0IDAgMTEuNDQ1IDIuMTU4IDE0Ljg4MyA2LjQ3NSAzLjQzNyA0LjMxNiA1LjE1NiAxMC40NzggNS4xNTYgMTguNDg2djM2LjUwNGgtNS4zOTF6TTM1Ni40MjEgNTEuNzM0Yy0xLjE3MiAwLTIuMjA3LS40My0zLjEwNi0xLjI4OS0uODk4LS44Ni0xLjM0Ny0xLjk1My0xLjM0Ny0zLjI4MSAwLTEuMjg5LjQ1OS0yLjMzNCAxLjM3Ni0zLjEzNS45MTgtLjgwMSAxLjk0NC0xLjIwMSAzLjA3Ny0xLjIwMSAxLjIxMSAwIDIuMjc1LjM5IDMuMTkzIDEuMTcyLjkxOC43ODEgMS4zNzcgMS44MzUgMS4zNzcgMy4xNjQgMCAxLjI1LS40NDkgMi4zMjQtMS4zNDggMy4yMjItLjg5OC44OTktMS45NzIgMS4zNDgtMy4yMjIgMS4zNDh6bS0yLjYzNyA3NS4xMTd2LTYwaDUuMzkxdjYwaC01LjM5MXpNNDAyLjEyNCAxMjYuMDMxYy0yLjgxMyAxLjMyOC01LjQ0OSAxLjk5Mi03LjkxIDEuOTkyLTguODY4IDAtMTMuMzAxLTUuMzEzLTEzLjMwMS0xNS45MzhWNzEuNzczaC0xMC43ODF2LTQuOTIyaDEwLjc4MVY1MS4yNjVjLjg1OS0uMzEyIDEuNzU4LS42MjUgMi42OTUtLjkzN2E0NC4xODIgNDQuMTgyIDAgMCAwIDIuNjk1LS44Nzl2MTcuNDAyaDE1LjgyMXY0LjkyMmgtMTUuODIxdjM5LjYwOWMwIDQuMTQxLjY1NSA3LjEzOSAxLjk2MyA4Ljk5NCAxLjMwOSAxLjg1NiAzLjUyNiAyLjc4NCA2LjY1MSAyLjc4NCAyLjIyNiAwIDQuNjI5LS43MjMgNy4yMDctMi4xNjh2NS4wMzl6TTQyOC42NjcgMTM5LjA5N2MtMi4xODggNS4zOTEtNC42MSA5LjM5NS03LjI2NiAxMi4wMTItMi42NTYgMi42MTctNi4wNzQgMy45MjYtMTAuMjU0IDMuOTI2LTEuNzU4IDAtMy4zMi0uMjc0LTQuNjg3LS44MjF2LTUuMzljMS40MDYuNTQ3IDMuMDQ3LjgyIDQuOTIyLjgyIDQuODA0IDAgOC41OTMtMy4zMiAxMS4zNjctOS45NjFsNS41NjYtMTMuMzAxLTIyLjczNC01OS41MzFoNi4wMzVsMTguMTA1IDQ4Ljg2N2MuMzkxIDEuMDU1LjY2NCAxLjg1Ni44MjEgMi40MDMuMTU2Ljc0Mi4zMzIgMS40MDYuNTI3IDEuOTkyaC4yMzRsMS40MDctNC4wNDMgMTkuMzM2LTQ5LjIxOWg1Ljg1OWwtMjkuMjM4IDcyLjI0NnpNNDY5LjU2NSAxMjYuODUxVjQyLjgyOGg1LjgwMXY3OC43NWgzMy42OTF2NS4yNzNoLTM5LjQ5MnpNNTI1Ljk5MSA1MS43MzRjLTEuMTcyIDAtMi4yMDctLjQzLTMuMTA2LTEuMjg5LS44OTgtLjg2LTEuMzQ3LTEuOTUzLTEuMzQ3LTMuMjgxIDAtMS4yODkuNDU5LTIuMzM0IDEuMzc3LTMuMTM1LjkxOC0uODAxIDEuOTQzLTEuMjAxIDMuMDc2LTEuMjAxIDEuMjExIDAgMi4yNzUuMzkgMy4xOTMgMS4xNzIuOTE4Ljc4MSAxLjM3NyAxLjgzNSAxLjM3NyAzLjE2NCAwIDEuMjUtLjQ0OSAyLjMyNC0xLjM0NyAzLjIyMi0uODk5Ljg5OS0xLjk3MyAxLjM0OC0zLjIyMyAxLjM0OHptLTIuNjM3IDc1LjExN3YtNjBoNS4zOTF2NjBoLTUuMzkxek01NDQuODU4IDEyNC4yMTR2LTYuNTA0YzIuMDMxIDEuNzU4IDQuNDkyIDMuMTQ1IDcuMzgzIDQuMTYxIDIuODkxIDEuMDE1IDUuMzkxIDEuNTIzIDcuNSAxLjUyMyA5LjQxNCAwIDE0LjEyMS0zLjg0OCAxNC4xMjEtMTEuNTQzIDAtMi42NTYtMS4wMzUtNC45MjItMy4xMDUtNi43OTctMi4wNzEtMS44NzUtNS40My0zLjgwOC0xMC4wNzktNS44MDEtNS43NDItMi41LTkuNzc1LTUuMDg3LTEyLjA5OS03Ljc2M3MtMy40ODYtNS45MjgtMy40ODYtOS43NTZjMC00Ljg4MyAxLjg2NS04LjgyOCA1LjU5NS0xMS44MzYgMy43MzEtMy4wMDggOC4zMy00LjUxMiAxMy43OTktNC41MTIgNS4xNTYgMCA5LjU3IDEuMDU1IDEzLjI0MiAzLjE2NHY2LjA5NGMtNC40NTMtMi44OTEtOS4wNjItNC4zMzYtMTMuODI4LTQuMzM2LTMuOTQ1IDAtNy4xMjkgMS4wMjYtOS41NTEgMy4wNzYtMi40MjIgMi4wNTEtMy42MzIgNC43MTctMy42MzIgNy45OTggMCAyLjg1Mi43NjEgNS4xNjYgMi4yODUgNi45NDQgMS41MjMgMS43NzcgNC44ODIgMy44MTggMTAuMDc4IDYuMTIzIDYuMjUgMi44MTIgMTAuNTQ3IDUuNDIgMTIuODkgNy44MjIgMi4zNDQgMi40MDIgMy41MTYgNS41OTYgMy41MTYgOS41OCAwIDQuNzY2LTEuNzg3IDguNzAxLTUuMzYxIDExLjgwNy0zLjU3NCAzLjEwNS04LjUwNiA0LjY1OC0xNC43OTUgNC42NTgtNS43ODEgMC0xMC42MDYtMS4zNjctMTQuNDczLTQuMTAyek02MTguMjc2IDEyNi4wMzFjLTIuODEyIDEuMzI4LTUuNDQ5IDEuOTkyLTcuOTEgMS45OTItOC44NjcgMC0xMy4zMDEtNS4zMTMtMTMuMzAxLTE1LjkzOFY3MS43NzNoLTEwLjc4MXYtNC45MjJoMTAuNzgxVjUxLjI2NWMuODYtLjMxMiAxLjc1OC0uNjI1IDIuNjk1LS45MzdhNDQuNDQ1IDQ0LjQ0NSAwIDAgMCAyLjY5Ni0uODc5djE3LjQwMmgxNS44MnY0LjkyMmgtMTUuODJ2MzkuNjA5YzAgNC4xNDEuNjU0IDcuMTM5IDEuOTYzIDguOTk0IDEuMzA4IDEuODU2IDMuNTI1IDIuNzg0IDYuNjUgMi43ODQgMi4yMjcgMCA0LjYyOS0uNzIzIDcuMjA3LTIuMTY4djUuMDM5eiIvPgogIDwvZz4KICA8cGF0aCBmaWxsPSIjMjIyYjM3IiBkPSJNMTQ5Ljg0NCAyLjAzN0w4NC4wOTYgMTkuNjNsLTkuNzAxIDE3LjA5LTE5LjcwNS0uMTVMNi41ODYgODQuNDczbDQ4LjEwNCA0Ny45NTQgMTkuMjAyLS4xLS4wNSAzNy42NDkgOTUuNTA2LS4wNWMwLTE2LjM4Ny4xLTU3LjYwNS4wNS04NS4zNTJsLTkuNS0uMDUgNy41OS0xNi44NC0uMDUtLjEtMTcuNTk0LTY1LjU0N3ptLTIzLjUyNCAyNC42M0w5Ny40MTcgNzYuNDMxSDM5LjcxMWwzNi4zNDMtMzYuOTQ2IDUwLjI2Ni0xMi44MTh6bTEzLjk3NCA4LjA0M2wxMy45NzQgNDkuODE0Yy00LjgyNi4wNS00Mi44MjctLjA1MS00Mi44MjctLjA1MWwyOC44NTMtNDkuNzYzek0zOS40MDkgOTEuOTEzbDM0LjEzMS0uMTUxLjI1MiAzNS41ODgtMzQuMzgzLTM1LjQzN3ptNDcuMSA1LjEyN2g3MC4yMjJsLS4xNTEgNjAuMzctNjkuODIuMzAxLS4yNTEtNjAuNjcxeiIvPgogIDxwYXRoIGZpbGw9IiMyMjJiMzciIGQ9Ik05My45NDggMTA0LjUzaDU1LjI5M3YxMC4wNTNIOTMuOTQ4ek05My45NDggMTIyLjEyM2g1NS4yOTN2MTAuMDUzSDkzLjk0OHpNOTMuOTQ4IDEzOS43MTZoNTUuMjkzdjEwLjA1M0g5My45NDh6Ii8+Cjwvc3ZnPgo=) no-repeat;
}

.header .header-title a.logo:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

@media (max-width: 35em) {
  .header .header-title a.logo {
    height: 2rem;
    width: 2rem;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMzkuMyAzMzkuMycgdmVyc2lvbj0nMS4xJz4KPHBhdGggZmlsbD0nIzIyMmIzNycgZD0nbTI5MS4yIDUuNC0xMzAuOCAzNS0xOS4zIDM0LTM5LjItMC4zLTk1LjcgOTUuMyA5NS43IDk1LjQgMzguMi0wLjItMC4xIDc0LjkgMTkwLTAuMWMwLTMyLjYgMC4yLTExNC42IDAuMS0xNjkuOGwtMTguOS0wLjEgMTUuMS0zMy41LTAuMS0wLjJ6bS00Ni44IDQ5LTU3LjUgOTktMTE0LjggMCA3Mi4zLTczLjV6bTI3LjggMTYgMjcuOCA5OS4xYy05LjYgMC4xLTg1LjItMC4xLTg1LjItMC4xek03MS41IDE4NC4ybDY3LjktMC4zIDAuNSA3MC44em05My43IDEwLjIgMTM5LjcgMC0wLjMgMTIwLjEtMTM4LjkgMC42eicvPgo8cmVjdCBmaWxsPScjMjIyYjM3JyB3aWR0aD0nMTEwJyBoZWlnaHQ9JzIwJyB4PScxODAnIHk9JzIwOS4zJy8+CjxyZWN0IGZpbGw9JyMyMjJiMzcnIHk9JzI0NC4zJyB4PScxODAnIGhlaWdodD0nMjAnIHdpZHRoPScxMTAnLz4KPHJlY3QgZmlsbD0nIzIyMmIzNycgd2lkdGg9JzExMCcgaGVpZ2h0PScyMCcgeD0nMTgwJyB5PScyNzkuMycvPgo8L3N2Zz4K) no-repeat;
  }
}

@media (max-width: 35em) {
  .header .header-title {
    flex: 0;
    font-size: 0.5rem;
  }
}

.header .header-middle {
  display: flex;
  flex: 3;
  font-size: 1.1rem;
  color: #222b37;
  text-align: center;
  justify-content: center;
}

.header .header-side {
  flex-shrink: 1;
  font-size: 1.1rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 35em) {
  .header .header-side {
    margin: 0.4rem 0 0.2rem;
  }
}

.header .header-side .header-link {
  line-height: 1rem;
  color: #222b37;
  white-space: nowrap;
  padding: 0 1rem 0 1rem;
}

@media (max-width: 35em) {
  .header .header-side .header-link {
    font-size: 0.9rem;
    padding: 0 0.5rem 0 0.5rem;
  }
}

.header .header-side .header-link.active a {
  color: #8ac249;
}

.header .header-side .header-link:hover,
.header .header-side .header-link:focus {
  text-decoration: underline;
}

.header .header-side .avatar {
  margin-left: 0;
  margin-right: 0.5rem;
}

.header .header-side .header-account {
  color: #6c7d93;
  margin-bottom: 0.5rem;
  background: #000;
  border-radius: 3px;
  padding: 0.5rem;
}

.header .header-side .header-account .avatar {
  margin-right: 0.5rem;
}

.header .header-side .header-burger canvas {
  margin-left: 0;
}

.header .header-side .dropdown-caret {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  content: '';
  border: 4px solid;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
}

.header .header-side .reveal-b {
  background: none;
  color: #999;
  white-space: nowrap;
}

.header .header-menu-out {
  color: #fff;
  right: 0rem;
  left: unset;
  font-size: 1rem;
}

.header .header-menu-out .header-menu {
  clip-path: circle(0rem at 100% 0%);
  border-radius: 3px 0 3px 3px;
  min-width: 13rem;
}

.header .header-menu-out svg {
  margin-right: 0.5rem;
}

.header .header-menu-out a {
  color: #fff;
  padding-bottom: 0.2rem;
}

.header .header-menu-out a:hover {
  color: #d0d0d0;
}

.header .reveal-button {
  margin-right: 0.4rem;
  margin-left: 0.2rem;
}

.header .reveal-hover .header-menu {
  clip-path: circle(100% at 50% 24%);
}

.guide-circle {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-iteration-count: inherit;
  animation-iteration-count: inherit;
  -webkit-animation-name: wD9;
  animation-name: wD9;
  border: 8px solid #706aad;
  border-radius: 50%;
  height: 100%;
  opacity: 1;
  width: 100%;
}

@media (max-width: 35em) {
  .guide-circle {
    visibility: hidden;
  }
}

.guide-circle-inner {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-name: B0Z;
  animation-name: B0Z;
  opacity: 0;
}

@keyframes wD9 {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  20% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  40% {
    opacity: 1;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  80% {
    opacity: 0;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }

  to {
    opacity: 0;
  }
}

footer.footer {
  font-size: 0.8rem;
  padding: 0.625rem 0;
  border-top: 0.125rem #e6e6e6 solid;
  text-align: center;
  max-width: 80em;
  margin: 0 auto;
  margin-top: 0.625rem;
}

footer.footer a {
  padding: 0 0.2rem;
}

footer.footer a:hover,
footer.footer a:focus {
  text-decoration: underline;
}

/* Progress Bar */

.progress {
  overflow: hidden;
  display: block;
  position: relative;
  height: 2px;
  width: 100%;
  background-clip: padding-box;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.2);
  margin-top: -2px;
  pointer-events: none;
}

.progress .determinate {
  position: absolute;
  background-color: inherit;
  top: 0;
  bottom: 0;
  background-color: #706aad;
  transition: width .3s linear;
}

.progress .indeterminate {
  background-color: #706aad;
}

.progress .indeterminate:before {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}

.progress .indeterminate:after {
  content: '';
  position: absolute;
  background-color: inherit;
  top: 0;
  left: 0;
  bottom: 0;
  will-change: left, right;
  animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
  animation-delay: 1.15s;
}

.progress.hide {
  animation: hideAfter 0.5s normal forwards ease-out;
}

.progress.hide .indeterminate:before {
  animation-play-state: paused;
}

.progress.hide .indeterminate:after {
  animation-play-state: paused;
  left: 0;
  right: 0;
}

@-webkit-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}

@-moz-keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}

@keyframes indeterminate {
  0% {
    left: -35%;
    right: 100%;
  }

  60% {
    left: 100%;
    right: -90%;
  }

  100% {
    left: 100%;
    right: -90%;
  }
}

@-webkit-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}

@-moz-keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}

@keyframes indeterminate-short {
  0% {
    left: -200%;
    right: 100%;
  }

  60% {
    left: 107%;
    right: -8%;
  }

  100% {
    left: 107%;
    right: -8%;
  }
}

@-webkit-keyframes hideAfter {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@-moz-keyframes hideAfter {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

@keyframes hideAfter {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    display: none;
  }
}

.react-autosuggest__suggestions-list {
  margin: 0;
  background: #fff;
}

.react-autosuggest__suggestion {
  list-style-type: none;
  margin: 0rem;
  padding: 0.5rem 0.5rem;
}

.react-autosuggest__suggestion--highlighted {
  background: #ddd;
}

.loading {
  position: relative;
  width: 12.5rem;
  height: 12.5rem;
}

.loading-cogA {
  content: '';
  position: absolute;
  width: 4.6875rem;
  height: 4.6875rem;
  top: 3.125rem;
  left: 2.5rem;
  fill: #706aad;
  animation: rotate 4s infinite linear;
  -moz-animation: rotate 4s infinite linear;
  -webkit-animation: rotate 4s infinite linear;
  -o-animation: rotate 4s infinite linear;
}

.broken .loading-cogA {
  animation: rotate_broken 1.5s infinite linear;
  -moz-animation: rotate_broken 1.5s infinite linear;
  -webkit-animation: rotate_broken 1.5s infinite linear;
  -o-animation: rotate_broken 1.5s infinite linear;
}

.loading-cogB {
  content: '';
  position: absolute;
  width: 3.4375rem;
  height: 3.4375rem;
  top: 5.9375rem;
  left: 6.4375rem;
  fill: #8ac249;
  animation: rotateb 4s infinite linear;
  -moz-animation: rotateb 4s infinite linear;
  -webkit-animation: rotateb 4s infinite linear;
  -o-animation: rotateb 4s infinite linear;
}

.broken .loading-cogB {
  animation: rotateb_broken 1.5s infinite linear;
  -moz-animation: rotateb_broken 1.5s infinite linear;
  -webkit-animation: rotateb_broken 1.5s infinite linear;
  -o-animation: rotateb_broken 1.5s infinite linear;
}

@keyframes rotate {
  form {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateb {
  form {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes rotate_broken {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: rotate(-20deg);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: rotate(-30deg);
  }

  70% {
    transform: rotate(-27deg);
  }
}

@keyframes rotateb_broken {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: rotate(10deg);
  }

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: rotate(30deg);
  }

  70% {
    transform: rotate(25deg);
  }

  90% {
    transform: rotate(13deg);
  }
}

.social-container {
  display: block;
  text-align: center;
}

.social-container .social-butt {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

.social-container .social-butt .social-share-count {
  position: absolute;
  bottom: -2px;
  right: 1px;
  color: #fff;
  text-shadow: 1px 1px 5px #000;
  font-weight: 700;
  pointer-events: none;
  font-size: 0.7rem;
}

.toast {
  display: flex;
  position: relative;
  color: #fff;
  background-color: #204967;
  background-size: cover;
  overflow: hidden;
  height: 0;
  text-align: center;
  justify-content: center;
  animation: 1s toast-appear 2.95s forwards cubic-bezier(0.165, 0.84, 0.44, 1);
}

.toast img {
  width: auto;
  height: auto;
  max-height: 5rem;
}

@media (max-width: 35em) {
  .toast {
    display: none;
  }
}

.toast a {
  font-weight: 500;
  font-size: 1.5rem;
  color: #fff;
  align-self: center;
}

.toast-loading {
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(90deg, red 0%, yellow 15%, lime 30%, cyan 50%, blue 65%, magenta 80%, red 100%);
  background-size: 200%;
  animation: 1s toast-loading 2s linear forwards;
}

.toast-close {
  position: absolute;
  right: 1rem;
  top: 0.5rem;
  width: 1rem;
  height: 1rem;
  padding: 1rem;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg viewPort='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1' y1='11' x2='11' y2='1' stroke='white' stroke-width='2'/%3E%3Cline x1='1' y1='1' x2='11' y2='11' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 12px 12px;
}

@-webkit-keyframes toast-loading {
  0% {
    background-position: 0% 0%;
    height: 0;
  }

  10% {
    height: 0.2rem;
  }

  75% {
    background-position: -150% 0%;
    height: 0.2rem;
  }

  100% {
    height: 0;
    display: none;
  }
}

@-webkit-keyframes toast-appear {
  0% {
    height: 0rem;
  }

  100% {
    height: 5rem;
  }
}

.md {
  /* grey out placeholders */
}

.md h1,
.md h2,
.md h3,
.md h4 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.md h1 .anchor,
.md h2 .anchor,
.md h3 .anchor,
.md h4 .anchor {
  color: #aaa;
  float: left;
  line-height: 1;
  margin-left: -1rem;
  text-decoration: none;
  visibility: hidden;
  font-weight: normal;
}

.md h1:hover .anchor,
.md h2:hover .anchor,
.md h3:hover .anchor,
.md h4:hover .anchor {
  visibility: visible;
}

.md h1,
.md h2,
.md h3,
.md dt {
  color: #423f37;
  font-weight: 400;
  padding-bottom: 0.3em;
  line-height: normal;
}

.md h1 {
  font-size: 2em;
  margin: 2rem 1rem 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.md h2,
.md .article-list .article-title {
  font-size: 1.5em;
  margin: 2rem 1rem 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.md h3,
.md dt {
  font-size: 1.17em;
  font-weight: 400;
  margin: 2em 0 1rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.md h4 {
  font-size: 1em;
  font-weight: 400;
  color: #7976a1;
  margin: 1.5em 0 0.5rem 0;
}

.md h5 {
  font-size: 0.83em;
  color: #7976a1;
  margin: 1.5em 0 0.5rem 0;
}

.md h6 {
  font-size: 0.75em;
  margin: 1.5em 0 0.5rem 0;
}

.md h1:first-child,
.md h2:first-child,
.md h3:first-child,
.md h4:first-child,
.md h5:first-child,
.md h6:first-child {
  margin-top: 0;
}

.md a {
  color: #222b37;
  cursor: pointer;
  outline: 0 none;
  text-decoration: underline;
}

.md a:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

.md a:hover {
  outline: 0 none;
  color: #706aad;
}

.md p,
.md pre {
  font-size: 1em;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #333;
}

.md code,
.md kbd,
.md pre,
.md samp {
  font-family: monospace, serif;
  font-size: 1em;
  margin: 0;
  padding: 0;
}

.md pre {
  font: em(12) Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background: #e4efe1;
  font-size: 0.8rem;
  overflow-x: auto;
  white-space: pre;
  word-wrap: break-word;
  width: auto;
  letter-spacing: 1px;
  border: 1px solid #c3dbbd;
}

.md pre code {
  padding: 1rem;
  display: block;
  margin: 0;
}

.md pre,
.md code,
.md kbd,
.md samp {
  margin: 0;
}

.md pre {
  margin-bottom: 1rem;
}

.md code,
.md kbd,
.md pre,
.md samp {
  font-family: monospace, serif;
}

.md code {
  background: #e4efe1;
  color: #3f6336;
  padding: 0.05rem 0.3rem;
  border-radius: 0.2rem;
}

.md aside {
  display: block;
  float: right;
  width: 24.375rem;
}

.md b,
.md strong {
  color: #000;
  font-weight: 600;
}

.md em {
  font-style: italic;
}

.md blockquote {
  color: #423f37;
  font-size: 0.8em;
  margin: 1em 2.5rem;
  border-left: 0.5rem solid #8ac249;
  margin-left: 0;
  padding: 0.6rem 0.5rem;
}

.md blockquote p {
  padding: 0;
}

.md figure {
  margin-left: -4.5rem;
  margin-right: -4.5rem;
  margin-bottom: 2em;
  margin-top: 2em;
}

.md hr {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #bbb;
  border-image: none;
  border-style: none none solid;
  border-width: medium medium 0.0625rem;
  margin: 2rem 0rem;
}

.md img {
  max-width: 100%;
  border: 0 none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M19 2H1C0.4 2 0 2.4 0 3v14c0 0.6 0.4 1 1 1h18c0.6 0 1-0.4 1-1V3C20 2.4 19.6 2 19 2zM18 16H2V4h16V16zM14.3 10.9l-3.2 1.6 -3.8-6.1L4 14h12L14.3 10.9zM13.3 9c0.7 0 1.3-0.6 1.3-1.2S13.9 6.5 13.3 6.5 12 7.1 12 7.8 12.6 9 13.3 9z' fill='%23CCC'/%3E%3C/svg%3E") no-repeat center;
  min-height: 1rem;
  min-width: 1rem;
}

.md img[align='right'] {
  padding-left: 20px;
}

.md ol > li:before {
  color: #89b57e;
  content: counter(ol, decimal) ".";
  counter-increment: ol;
  font-weight: 700;
  margin-right: 0.333em;
  position: absolute;
  right: 100%;
}

.md ul > li:before {
  background-color: #89b57e;
  border-radius: 0.875rem 0.875rem 0.875rem 0.875rem;
  content: '';
  height: 0.375rem;
  margin-right: 0.333em;
  margin-top: 0.55em;
  position: absolute;
  right: 100%;
  width: 0.375rem;
}

.md ol,
.md ul,
.md dl {
  padding: 0;
  margin: 0rem 0rem 1rem 1rem;
}

.md ol {
  counter-reset: ol;
}

.md li + li,
.md dd + dt {
  margin-top: 0.25em;
}

.md ul > li {
  position: relative;
}

.md ol > li {
  position: relative;
}

.md li {
  color: #333;
  list-style: none outside none;
}

.md figure > figcaption {
  margin-top: 0.5em;
}

.md small,
.md dd,
.md figcaption {
  color: #a19c91;
  display: block;
  font-size: 0.8rem;
  font-style: italic;
  line-height: 1.2;
}

.md tbody {
  display: table-row-group;
}

.md tfoot {
  display: table-footer-group;
}

.md table {
  margin-bottom: 2em;
  font-size: 0.8em;
  padding: 0;
  border-collapse: collapse;
}

.md table th,
.md table td {
  padding: 0.625rem 0.625rem 0.5625rem;
  line-height: 1.125rem;
  text-align: left;
}

.md table th {
  padding-top: 0.5625rem;
  text-transform: uppercase;
  vertical-align: middle;
}

.md table td {
  vertical-align: top;
  border-top: 0.0625rem solid #ddd;
}

.md table tbody th {
  border-top: 0.0625rem solid #ddd;
  vertical-align: top;
}

.md table {
  border: 0.0625rem solid #ddd;
  -webkit-border-radius: 0.25rem;
  -moz-border-radius: 0.25rem;
  border-radius: 0.25rem;
}

.md table th + th,
.md table td + td,
.md table th + td {
  border-left: 0.0625rem solid #ddd;
}

.md table thead tr:first-child th:first-child,
.md table tbody tr:first-child td:first-child {
  -webkit-border-radius: 0.25rem 0 0 0;
  -moz-border-radius: 0.25rem 0 0 0;
  border-radius: 0.25rem 0 0 0;
}

.md table thead tr:first-child th:last-child,
.md table tbody tr:first-child td:last-child {
  -webkit-border-radius: 0 0.25rem 0 0;
  -moz-border-radius: 0 0.25rem 0 0;
  border-radius: 0 0.25rem 0 0;
}

.md table tbody tr:last-child td:first-child {
  -webkit-border-radius: 0 0 0 0.25rem;
  -moz-border-radius: 0 0 0 0.25rem;
  border-radius: 0 0 0 0.25rem;
}

.md table tbody tr:last-child td:last-child {
  -webkit-border-radius: 0 0 0.25rem 0;
  -moz-border-radius: 0 0 0.25rem 0;
  border-radius: 0 0 0.25rem 0;
}

.md tbody tr:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.03);
}

.md caption {
  display: table-caption;
  font-weight: 300;
  font-size: 1.3em;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  word-spacing: 0.2em;
  background: rgba(0, 0, 0, 0.75);
  color: #eee;
  padding: 0.25rem;
  -webkit-border-radius: 0.25rem;
  margin: 0.25rem 0;
  -webkit-box-shadow: 0.125rem 0.125rem 0.125rem rgba(0, 0, 0, 0.35);
}

.md :-moz-placeholder {
  color: #bfbfbf;
}

.md ::-webkit-input-placeholder {
  color: #bfbfbf;
}

.md .article-date {
  color: #c7c2b8;
  display: block;
  font-size: 0.8rem;
}

.md input[type='checkbox']:disabled + label {
  color: #000;
}

.md input[type='checkbox']:disabled + label:before {
  background: #706aad;
}

.md .task-list-item:before {
  background-color: #e6e6e6;
}

.page button.slick-arrow {
  margin: 0;
}

.page .slick-dots li button {
  margin: 0;
}

/* Arrows */

.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 45%;
  display: block;
  width: 20px;
  height: 100%;
  padding: 0;
  margin-top: -10px\9;
  /*lte IE 8*/
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  font-size: 20px;
  line-height: 1;
  opacity: 0.75;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}

[dir='rtl'] .slick-prev {
  right: -25px;
  left: auto;
}

.slick-prev:before {
  content: '◀';
}

[dir='rtl'] .slick-prev:before {
  content: '◀';
}

.slick-next {
  right: -25px;
}

[dir='rtl'] .slick-next {
  right: auto;
  right: -40px;
}

.slick-next:before {
  content: '▶';
}

[dir='rtl'] .slick-next:before {
  content: '▶';
}

/* Dots */

.slick-slider {
  margin-bottom: 30px;
  width: 100%;
}

.slick-dots {
  position: absolute;
  bottom: 0px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-size: 18px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '●';
  text-align: center;
  opacity: 0.25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: black;
}