@import url(/fonts/sourcesans.css);
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

@font-face {
  font-family: sandstorm;
  src: url(/fonts/sandstorm.woff);
}
* {
  box-sizing: border-box;
}

.no-vertical-scroll {
  overflow-y: hidden;
}

body {
  background-color: white;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 17px;
  font-weight: 300;
  color: black;
  overflow-x: hidden;
}

body > * {
  padding: 1px 30px 0;
  margin: 0 auto;
  width: auto;
  max-width: 1200px;
}
@media (max-width: 800px) {
  body > * {
    padding: 1px 20px 0;
  }
}

h1 {
  padding-top: 30px;
  font-size: 40px;
  font-weight: 300;
  text-align: center;
}

h2, h3, h4, h5, h6 {
  font-weight: normal;
}

p {
  line-height: 1.3;
}

a {
  text-decoration: none;
  color: #5b4f8c;
  font-weight: normal;
}
a:hover {
  color: #7757bc;
}

strong {
  font-weight: 500;
}

body > nav {
  height: 48px;
  text-align: right;
  font-size: 16px;
  overflow: hidden;
}
body > nav > a {
  display: inline-block;
  height: 100%;
  padding: 0 15px;
  line-height: 48px;
  font-weight: 300;
  color: black;
}
body > nav > a:first-child {
  float: left;
}
body > nav > a:hover {
  background-color: #f8f8ff;
  color: #18003f;
}
@media (max-width: 550px) {
  body > nav > a[href="/about"] {
    display: none;
  }
  body > nav > a[href="/features"] {
    display: none;
  }
}
@media (max-width: 940px) {
  body > nav > a[href^="/get"] {
    display: none;
  }
  body > nav > a[href="/community"] {
    display: none;
  }
  body > nav > a[href^="https://docs.sandstorm.io"] {
    display: none;
  }
  body > nav > a[href="/how-it-works"] {
    display: none;
  }
}

body#home > nav > a[href="/"] {
  font-weight: 500;
}

body > nav > a[href="/"]::before {
  font-family: sandstorm;
  display: inline-block;
  float: left;
  content: "\e906";
  font-size: 26px;
  line-height: 45px;
  padding: 0 5px 0 0;
}

body#get > nav > a[href="/get"] {
  font-weight: 500;
}

body#features > nav > a[href="/features"] {
  font-weight: 500;
}

body#how-it-works > nav > a[href="/how-it-works"] {
  font-weight: 500;
}

body#blog > nav > a[href="/news/"] {
  font-weight: 500;
}

body#community > nav > a[href="/community"] {
  font-weight: 500;
}

body#about > nav > a[href="/about"] {
  font-weight: 500;
}

body > .notice {
  line-height: 70px;
  text-align: center;
  color: #1d1843;
  font-weight: normal;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media (max-width: 650px) {
  body > .notice {
    display: block;
    line-height: 50px;
  }
}
@media (max-width: 600px) {
  body > .notice {
    padding: 0;
  }
}
body > .notice::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #ffc781;
}
body > .notice span {
  text-align: left;
  font-size: 25px;
}
@media (max-width: 900px) {
  body > .notice span {
    font-size: 22px;
  }
}
@media (max-width: 800px) {
  body > .notice span {
    font-size: 16px;
  }
}
@media (max-width: 370px) {
  body > .notice span {
    font-size: 13px;
  }
}

body > header {
  min-height: 180px;
  color: white;
}
body > header p {
  text-align: center;
  font-size: 23px;
  padding: 0 0 20px 0;
  color: #d7c4f4;
}

body > section h2 {
  margin: 50px 0 20px 0;
  text-align: center;
  font-size: 36px;
}
body > section h3 {
  text-align: center;
  font-size: 25px;
  font-weight: 300;
}
body > section > ul {
  list-style: none;
}

body > footer {
  padding-bottom: 1px;
  color: #302851;
  position: relative;
}
body > footer::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: lavender;
}
body > footer .subscribe-small {
  width: 90%;
  height: 33px;
}
body > footer .subscribe-small input[type=email] {
  float: left;
  height: 33px;
  width: 70%;
  font-size: 1em;
  padding-left: 10px;
  padding-right: 10px;
  border: 0;
  outline: 0;
}
body > footer .subscribe-small input[type=submit] {
  float: right;
  width: 30%;
  height: 33px;
  background: #2e2765;
  border: 1px solid #7757bc;
  padding: 0;
  font-size: 1em;
  color: #fff;
  cursor: pointer;
  outline: none;
  transition: transform 0.75s ease, background 0.35s ease;
}
body > footer .subscribe-small input[type=submit]:hover {
  background: #7757bc;
}
body > footer ul h3, body > footer ul h3 a {
  text-decoration: none;
  font-weight: normal;
  color: #302851;
  margin: 30px 0 10px 0;
}
body > footer ul li a {
  text-decoration: none;
}
body > footer ul li a:hover {
  color: #7757bc;
}
body > footer ul .sign-in-footer a {
  text-align: center;
  color: black;
  border-radius: 4px;
  display: block;
  width: 150px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border: 1px solid #5b4f8c;
  background-color: #F6F6FF;
  transition: transform 0.75s ease, background 0.35s ease;
}
body > footer ul .sign-in-footer a:hover {
  color: #7757bc;
  background-color: #fff;
}
body > footer > p {
  text-align: center;
  font-style: italic;
}
body > footer > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
body > footer > ul > li {
  display: block;
  justify-content: space-between;
  flex: 1 1 33%;
}
@media (max-width: 800px) {
  body > footer > ul > li {
    flex: 1 1 50%;
  }
}
@media (max-width: 550px) {
  body > footer > ul > li {
    flex: 1 1 100%;
  }
}
body > footer > ul > li > ul {
  padding: 0;
}
body > footer > ul > li > ul > li {
  display: block;
}

.action {
  text-align: center;
  padding: 40px 0;
  position: relative;
}
.action::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F4F3FB;
}
.action li {
  font-size: 25px;
  padding: 0 20px;
  list-style: none;
  display: inline;
}
@media (max-width: 800px) {
  .action li {
    display: block;
    line-height: 30px;
    padding: 10px 0;
  }
}
.action > a, .action li a {
  border: 1.5px solid #a19cbc;
  font-size: 25px;
  padding: 8px 20px;
  width: 300px;
  border-radius: 6px;
  background-color: white;
  color: #442672;
  white-space: nowrap;
}
.action > a:hover, .action li a:hover {
  color: #7356cc;
}
@media (max-width: 800px) {
  .action > a, .action li a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    line-height: 40px;
  }
}

#socialmedia-small ul {
  width: 100%;
}
#socialmedia-small li {
  display: inline-block;
  width: 20px;
  position: relative;
  text-align: left;
  font-size: 16px;
  margin: 0 10px;
}
#socialmedia-small li a {
  display: inline-block;
  width: 100%;
  position: relative;
  text-align: center;
}
#socialmedia-small li a::before {
  font-family: sandstorm;
  display: block;
  background-repeat: no-repeat;
  height: 30px;
  font-size: 25px;
  background: bottom/contain no-repeat;
}
#socialmedia-small li a a:hover::before {
  color: #7757bc;
}
#socialmedia-small li a.fediverse {
  height: 25px;
  width: 25px;
  background-size: 25px 25px;
  background-image: url(/images/fediverse.svg);
}
#socialmedia-small li a.github::before {
  content: "\e903";
}
#socialmedia-small li a:hover:before {
  color: #7757bc;
}

#home > header #banner {
  padding: 0 6%;
  height: 360px;
  background-image: url(/images/home-banner.svg);
  background-position: bottom;
  background-repeat: no-repeat;
  position: relative;
}
@media (max-width: 850px) {
  #home > header #banner {
    height: 310px;
    padding: 0;
    font-size: 40px;
  }
}
@media (min-width: 600px) {
  #home > header #banner::before {
    display: block;
    content: " ";
    float: left;
    background-image: url(/images/sandcat.svg);
    background-repeat: no-repeat;
    background-position: bottom;
    width: 270px;
    height: 360px;
    padding: 0;
  }
}
@media (min-width: 600px) and (max-width: 850px) {
  #home > header #banner::before {
    width: 240px;
    height: 310px;
    padding: 0;
  }
}
@media (max-width: 430px) {
  #home > header #banner {
    height: 320px;
    padding: 0;
  }
}
#home > header #banner::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-image: linear-gradient(to bottom, #1b1b3d, #613c82);
  background-color: #211f44;
}
#home > header #banner > h1 {
  font-size: 43px;
  padding-top: 100px;
  margin-top: 0;
}
@media (min-width: 600px) {
  #home > header #banner > h1 {
    padding-left: 30%;
  }
}
#home > header #banner > h1 strong {
  color: white;
}
@media (max-width: 980px) {
  #home > header #banner > h1 {
    font-size: 38px;
  }
}
@media (max-width: 850px) {
  #home > header #banner > h1 {
    font-size: 30px;
  }
}
@media (max-width: 750px) {
  #home > header #banner > h1 {
    font-size: 25px;
  }
}
@media (max-width: 430px) {
  #home > header #banner > h1 {
    margin-bottom: 0;
    padding-top: 80px;
  }
}
#home > header #banner > p {
  margin-top: 35px;
  text-align: center;
  color: #c5daff;
}
@media (min-width: 600px) {
  #home > header #banner > p {
    padding-left: 25%;
  }
}
@media (max-width: 430px) {
  #home > header #banner > p {
    margin-top: 10px;
  }
}
#home > header #banner > p > a {
  color: white;
  text-align: center;
  display: inline-block;
  width: 34%;
  margin: 15px;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  #home > header #banner > p > a {
    font-size: 21px;
    margin: 11px;
    height: 45px;
    line-height: 45px;
    width: 31%;
  }
}
@media (max-width: 800px) {
  #home > header #banner > p > a {
    font-size: 17px;
    margin: 8px;
    height: 40px;
    line-height: 40px;
  }
}
@media (max-width: 600px) {
  #home > header #banner > p > a {
    font-size: 15px;
  }
}
@media (max-width: 430px) {
  #home > header #banner > p > a {
    width: 200px;
  }
}
#home > header #banner > p > a.sign-in {
  display: block;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 150px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  border: 1px solid #744ccc;
  transition: background 0.35s ease;
}
#home > header #banner > p > a.sign-in:hover {
  background-color: #442672;
}
#home > header #banner > p > a.get {
  background-image: linear-gradient(to bottom, #884cea, #6a42b8);
  box-shadow: 0 3px 3px rgba(41, 25, 66, 0.6);
  background-color: #613c91;
}
#home > header #banner > p > a.get:hover {
  background-image: linear-gradient(to bottom, #925bef, #794cc2);
  background-color: #794cc2;
}
#home > header #banner > p > a.demo {
  background-image: linear-gradient(to bottom, #f46b8b, #d13f6c);
  box-shadow: 0 3px 3px rgba(41, 25, 66, 0.6);
  background-color: #d13f6c;
}
#home > header #banner > p > a.demo:hover {
  background-image: linear-gradient(to bottom, #fb839f, #d54f79);
  background-color: #d54f79;
}
#home #what > p {
  max-width: 800px;
  margin: 1em auto;
}
#home #what > ul {
  padding: 0;
  margin: 0;
}
#home #what > ul > li {
  display: block;
  position: relative;
}
@media (min-width: 900px) {
  #home #what > ul > li {
    padding: 0 5%;
  }
}
@media (min-width: 1000px) {
  #home #what > ul > li {
    padding: 0 8%;
  }
}
#home #what > ul > li > h3 {
  font-size: 32px;
  margin: 0;
  padding: 32px 0 0;
  text-align: left;
}
@media (max-width: 700px) {
  #home #what > ul > li > h3 {
    text-align: center;
    padding: 20px 0 0;
  }
}
#home #what > ul > li > p {
  line-height: 160%;
}
@media (max-width: 700px) {
  #home #what > ul > li > p {
    text-align: center;
    padding: 0 0 50px 0;
  }
}
#home #what > ul > li::before {
  display: block;
  content: " ";
  position: absolute;
  background: center/contain no-repeat;
}
#home #what > ul > li.chat::before {
  background-image: url("images/chat-rocket.png");
}
#home #what > ul > li.file-storage::before {
  background-image: url("images/file-davros.png");
}
#home #what > ul > li.task-mgmt::before {
  background-image: url("images/task-wekan.png");
}
#home #what > ul > li.document::before {
  background-image: url("images/document-etherpad.png");
}
@media (min-width: 700px) {
  #home #what > ul > li {
    height: 250px;
  }
  #home #what > ul > li::before {
    width: 50%;
    height: 90%;
    top: 5%;
  }
  #home #what > ul > li:nth-of-type(odd) {
    padding-right: 55%;
    background: linear-gradient(to right, white, #e0d8e8);
    position: relative;
  }
  #home #what > ul > li:nth-of-type(odd)::before {
    right: 0;
  }
  #home #what > ul > li:nth-of-type(odd)::after {
    display: block;
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    z-index: -1;
    left: 100%;
    width: calc(50vw - 50%);
    background-color: #e0d8e8;
  }
  #home #what > ul > li:nth-of-type(even) {
    padding-left: 55%;
  }
  #home #what > ul > li:nth-of-type(even)::before {
    left: 0;
  }
}
@media (max-width: 700px) {
  #home #what > ul > li {
    padding-top: 150px;
  }
  #home #what > ul > li::before {
    width: 100%;
    height: 150px;
    top: 0;
  }
}
#home .action-home {
  text-align: center;
  padding: 60px 0 0 0;
  position: relative;
}
#home .action-home::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F6F2FC;
  background-image: url(/images/market-tent.svg);
  background-position: right bottom;
  background-repeat: no-repeat;
}
@media (max-width: 700px) {
  #home .action-home::after {
    background-image: none;
  }
}
@media (max-width: 500px) {
  #home .action-home::after {
    font-size: 20px;
  }
}
#home .action-home li {
  font-size: 25px;
  padding: 0 20px;
  list-style: none;
  display: inline;
}
@media (max-width: 800px) {
  #home .action-home li {
    display: block;
    line-height: 30px;
    padding: 10px 0;
  }
}
#home .action-home > a {
  border: 1.5px solid #eee9f4;
  font-size: 25px;
  padding: 8px 20px;
  margin: 0 15px;
  width: 300px;
  border-radius: 6px;
  color: white;
  transition: transform 0.75s ease, background 0.35s ease;
  white-space: nowrap;
}
#home .action-home > a.action-demo {
  background-color: #d13f6c;
}
#home .action-home > a.action-demo:hover {
  background-color: #e0507d;
}
#home .action-home > a.action-get {
  background-color: #613c91;
}
#home .action-home > a.action-get:hover {
  background-color: #7e53b5;
}
@media (max-width: 600px) {
  #home .action-home > a {
    display: block;
    margin-left: auto;
    margin-right: auto;
    line-height: 40px;
    width: 80%;
  }
}
@media (max-width: 500px) {
  #home .action-home > a {
    width: 90%;
    font-size: 20px;
  }
}
#home .try-apps {
  text-align: center;
  font-size: 25px;
  padding: 30px 0;
  list-style: none;
  color: #302851;
}
#home .try-apps > li {
  display: inline;
}
@media (max-width: 700px) {
  #home .try-apps > li {
    display: block;
    padding: 0 0 20px 0;
  }
}
#home .try-apps > a {
  padding: 5px 0;
  display: inline-block;
}
#home .try-apps > a:hover {
  color: #7356cc;
}
#home #how > section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-top: 1px solid #ddd;
  padding: 30px 0;
}
#home #how > section > header {
  flex: 0 1 100%;
}
#home #how > section > header > div {
  display: table;
  margin: 0 auto;
  padding-top: 50px;
  font-size: 30px;
}
#home #how > section > header > div > h3 {
  margin: 0;
  position: relative;
}
#home #how > section > header > div > h3 > .subheading {
  font-weight: 300;
}
#home #how > section > header > div > h3::before {
  display: block;
  content: " ";
  position: absolute;
  background: center/contain no-repeat;
}
#home #how > section > header > div > p {
  margin: 0;
  padding: 10px 0;
  color: #888;
  font-size: 18px;
  position: absolute;
}
@media (min-width: 750px) {
  #home #how > section > header > div {
    height: 200px;
  }
  #home #how > section > header > div > h3::before {
    width: 200px;
    height: 200px;
    left: -175px;
    top: -75px;
  }
}
@media (max-width: 749px) {
  #home #how > section > header > div {
    padding-top: 150px;
    height: 300px;
  }
  #home #how > section > header > div > h3::before {
    width: 100%;
    height: 150px;
    bottom: 100%;
  }
}
#home #how > section.usability > header > div > h3::before {
  background-image: url("images/usability.svg");
}
#home #how > section.security > header > div > h3::before {
  background-image: url("images/security.svg");
}
#home #how > section.freedom > header > div > h3::before {
  background-image: url("images/freedom.svg");
}
#home #how > section > section {
  flex: 0 1 auto;
  width: 50%;
  padding: 220px 16px 0;
  position: relative;
}
#home #how > section > section strong {
  font-weight: normal;
}
@media (max-width: 800px) {
  #home #how > section > section {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  #home #how > section > section > * {
    max-width: 500px;
    margin: 1em auto;
  }
}
#home #how > section > section::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  height: 200px;
  top: 20px;
  bottom: auto;
  background-color: #F6F2FC;
}
#home #how > section > section::before {
  display: block;
  content: " ";
  position: absolute;
  background: center/contain no-repeat;
  width: 100%;
  height: 220px;
  left: 0;
  top: 0;
}
#home #how > section > section.apps::before {
  background-image: url("images/home-apps.png");
}
#home #how > section > section.grains::before {
  background-image: url("images/home-grains.png");
}
#home #how > section > section.buggy-apps::before {
  background-image: url("images/security-protection.svg");
}
#home #how > section > section.auditable::before {
  background-image: url("images/home-auditable.svg");
}
#home #how > section > section.hosting::before {
  background-image: url("images/home-hosting.svg");
}
#home #how > section > section.walled-gardens::before {
  background-image: url("images/home-walled-gardens.svg");
}
#home #who .developer div {
  padding: 0;
}
#home #who > h2 {
  border-bottom: 1px solid #ddd;
}
#home #who > section {
  padding: 0 10px;
}
#home #who > section::before {
  display: block;
  content: " ";
  float: left;
  background: bottom/contain no-repeat;
  width: 350px;
  height: 260px;
}
#home #who > section.individual::before {
  background-image: url("images/individual.svg");
}
#home #who > section.enterprise::before {
  background-image: url("images/enterprise.svg");
}
#home #who > section.developer::before {
  background-image: url("images/developer.svg");
}
#home #who > section > h3 {
  font-size: 35px;
  margin-top: 60px;
  margin-bottom: 0;
  text-align: left;
}
@media (max-width: 800px) {
  #home #who > section::before {
    float: none;
    margin: 0 auto;
    height: 200px;
    border-bottom: 1px solid #ddd;
  }
  #home #who > section > h3 {
    margin-top: 10px;
    text-align: center;
  }
  #home #who > section p:last-of-type {
    text-align: center;
  }
}
#home #who > section > div {
  clear: left;
  padding: 15px 0;
  position: relative;
}
#home #who > section > div::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F6F2FC;
}
#home #who > section > div > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
}
#home #who > section > div > ul > li {
  margin-top: 1em;
  display: block;
  flex: 0 1 50%;
}
@media (max-width: 800px) {
  #home #who > section > div > ul > li {
    flex: 1 1 100%;
  }
}
#home #who > section > div > blockquote {
  font-size: 30px;
  text-align: center;
}
#home #join-list {
  padding: 0 0 30px 0;
  position: relative;
}
#home #join-list::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F6F2FC;
}
#home #join-list input[type=text] {
  background-color: #fff;
}
#home a.start {
  background-color: white;
  margin-top: 13px;
  text-align: center;
  color: white;
  padding: 10px 0;
  width: 200px;
  border-radius: 5px;
  display: inline-block;
  transition: transform 0.75s ease, background 0.35s ease;
}
#home .individual a.start {
  background-color: #b21b31;
}
#home .individual a.start:hover {
  background-color: #c92333;
}
#home .enterprise a.start {
  background-color: #202d70;
}
#home .enterprise a.start:hover {
  background-color: #274c96;
}
#home .developer a.start {
  background-color: #e27124;
}
#home .developer a.start:hover {
  background-color: #ed8b2b;
}

#features header {
  max-width: none;
  padding: 1px 0 0 0;
  position: relative;
}
#features header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #2e2765;
}
#features header > div {
  background-color: #e6e5ea;
}
#features header > div > nav {
  height: 55px;
  font-size: 23px;
  text-align: center;
  width: 100%;
  display: flex;
}
@media (max-width: 550px) {
  #features header > div > nav {
    font-size: 20px;
  }
}
#features header > div > nav > a {
  display: block;
  flex: 1 1 33%;
  text-align: center;
  font-weight: normal;
  height: 100%;
  line-height: 55px;
  width: 33%;
  background-color: #e6e5ea;
}
#features header > div > nav > a:hover {
  background-color: #f4f4f4;
}
@media (max-width: 810px) {
  #features header > div > nav > a {
    display: inline-block;
    width: 32.5%;
  }
}
@media (max-width: 450px) {
  #features header > div > nav > a {
    font-size: 18px;
  }
}
@media (max-width: 400px) {
  #features header > div > nav > a {
    font-size: 13px;
    width: 31%;
  }
}
#features .start {
  height: 60px;
  padding-top: 40px;
  border: none;
  background-color: white;
  display: block;
  width: 100%;
}
#features .start a {
  text-align: center;
  float: right;
  color: white;
  padding: 10px 0;
  width: 240px;
  border-radius: 5px;
  display: block;
  transition: transform 0.75s ease, background 0.35s ease;
  background-color: #2e2765;
}
@media (max-width: 500px) {
  #features .start a {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
}
#features .start a:hover {
  background-color: #6341a5;
}
#features > section > ul {
  padding: 0;
}
#features p {
  font-size: 16px;
  line-height: 20px;
}
#features .current {
  background-color: #ffffff;
}
#features .current::after {
  display: none;
}
#features #core, #features #security {
  display: inline-block;
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0;
}
#features #core h3, #features #security h3 {
  text-align: left;
}
@media (max-width: 800px) {
  #features #core h3, #features #security h3 {
    width: 100%;
    text-align: center;
  }
}
#features #core li, #features #security li {
  text-align: left;
  width: 46%;
  padding: 0 0 50px 0;
  position: relative;
}
@media (max-width: 800px) {
  #features #core li, #features #security li {
    width: 100%;
  }
}
#features #core li::before, #features #security li::before {
  content: " ";
  display: block;
  background-repeat: none;
  height: 180px;
  background: bottom/contain no-repeat;
}
#features #core li::after, #features #security li::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #edf2f9;
  height: 180px;
}
#features #core li.choose-host::before, #features #security li.choose-host::before {
  background-image: url("images/core-choose-host.svg");
}
#features #core li.apps-growing::before, #features #security li.apps-growing::before {
  background-image: url("images/core-apps-growing.svg");
}
#features #core li.single-sign-on::before, #features #security li.single-sign-on::before {
  background-image: url("images/core-single-sign-on.svg");
}
#features #core li.unified-sharing::before, #features #security li.unified-sharing::before {
  background-image: url("images/core-unified-sharing.svg");
}
#features #core li.powerbox::before, #features #security li.powerbox::before {
  background-image: url("images/core-powerbox.svg");
}
#features #core li.protection::before, #features #security li.protection::before {
  background-image: url("images/security-protection.svg");
}
#features #core li.sandboxing::before, #features #security li.sandboxing::before {
  background-image: url("images/security-sandboxing.svg");
}
#features #core li.auditable::before, #features #security li.auditable::before {
  background-image: url("images/security-auditable.svg");
}
#features #core li.authentic::before, #features #security li.authentic::before {
  background-image: url("images/security-authentic.jpg");
}
#features #core li.automatic::before, #features #security li.automatic::before {
  background-image: url("images/security-automatic.svg");
}

#more {
  display: inline-block;
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
#more h3 {
  text-align: center;
}
#more li {
  text-align: left;
  width: 28%;
  padding: 0 0 50px 0;
}
@media (max-width: 800px) {
  #more li {
    width: 46%;
    padding: 0 10px;
  }
}
@media (max-width: 600px) {
  #more li {
    width: 100%;
  }
}
#more li::before {
  content: " ";
  display: block;
  background-repeat: none;
  height: 150px;
  background: bottom/contain no-repeat;
}
#more li.tabbed::before {
  background-image: url("images/more-tabbed.png");
}
#more li.backups::before {
  background-image: url("images/more-backups.svg");
}
#more li.notifications::before {
  background-image: url("images/more-notifications.svg");
}
#more li.mentions::before {
  background-image: url("images/more-mentions.png");
}
#more li.search::before {
  background-image: url("images/more-search.svg");
}
#more li.connected::before {
  background-image: url("images/more-connected.svg");
}

#business-scale {
  text-align: center;
}
#business-scale .row {
  width: 100%;
  height: 280px;
}
#business-scale .row .content {
  width: 40%;
  text-align: left;
  padding-top: 20px;
}
@media (max-width: 700px) {
  #business-scale .row .content {
    width: 100%;
    height: 500px;
  }
}
#business-scale .row .content h3 {
  text-align: left;
}
#business-scale .row .image {
  display: block;
  content: " ";
  background: bottom/contain no-repeat;
  height: 80%;
  width: 60%;
  position: absolute;
  right: 0px;
  top: 20px;
}
#business-scale .on-prem::after {
  display: none;
}
#business-scale .on-prem .image {
  background-image: url("images/business-onprem.svg");
  bottom: 0;
  right: -20%;
  width: 80%;
}
@media (max-width: 700px) {
  #business-scale .on-prem .image {
    width: 100%;
  }
}
#business-scale .audit::after {
  display: none;
}
#business-scale .audit .image {
  background-image: url("images/business-audit.svg");
  top: 0;
  right: -20%;
  width: 80%;
}
@media (max-width: 700px) {
  #business-scale .audit .image {
    width: 100%;
  }
}
#business-scale .ldap, #business-scale .global {
  width: 50%;
}
#business-scale .ldap::after, #business-scale .global::after {
  display: none;
}
@media (max-width: 700px) {
  #business-scale .ldap, #business-scale .global {
    width: 100%;
  }
}
#business-scale .encryption {
  width: 100%;
}
#business-scale ul {
  width: 100%;
  float: center;
  display: inline-block;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
#business-scale ul li {
  width: 100%;
  padding: 0 0 50px 0;
  position: relative;
}
#business-scale ul li::before {
  content: " ";
  display: block;
  background-repeat: none;
  height: 180px;
  background: bottom/contain no-repeat;
}
#business-scale ul li::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #edf2f9;
  height: 180px;
}
#business-scale ul li.on-prem::before {
  display: none;
}
#business-scale ul li.ldap::before {
  background-image: url("images/business-ldap.svg");
}
#business-scale ul li.group::before {
  background-image: url("images/business-group.svg");
}
#business-scale ul li.global::before {
  background-image: url("images/business-global.svg");
}
#business-scale ul li.audit::before {
  display: none;
}
#business-scale ul li.scale-out::before {
  background-image: url("images/business-scale-out.svg");
}
#business-scale ul li.failover::before {
  background-image: url("images/business-failover.svg");
}
#business-scale ul li.encryption::before {
  background-image: url("images/business-encryption.svg");
}

#dev {
  display: inline-block;
  list-style: none;
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
#dev h3 {
  text-align: left;
}
@media (max-width: 800px) {
  #dev h3 {
    width: 100%;
    padding: 0 10px;
    text-align: center;
  }
}
#dev li {
  display: inline-block;
  text-align: left;
  width: 46%;
  position: relative;
  padding: 0 0 50px 0;
  position: relative;
}
@media (max-width: 800px) {
  #dev li {
    width: 100%;
  }
}
#dev li::before {
  content: " ";
  display: block;
  background-repeat: none;
  height: 180px;
  background: bottom/contain no-repeat;
}
#dev li::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #edf2f9;
  height: 180px;
}
#dev li.linux::before {
  background-image: url("images/developer-linux.svg");
}
#dev li.runtime::before {
  background-image: url("images/developer-runtime.svg");
}
#dev li.boilerplate::before {
  background-image: url("images/developer-boilerplate.svg");
}
#dev li.dev-ops::before {
  background-image: url("images/developer-dev-ops.svg");
}
#dev li.integration::before {
  background-image: url("images/developer-integration.svg");
}
#dev li.in-app::before {
  background-image: url("images/developer-in-app.svg");
}

#how-it-works header {
  text-align: center;
  position: relative;
}
#how-it-works header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #2e2765;
}
#how-it-works header p {
  padding-bottom: 0;
}
#how-it-works header .containerize {
  display: flex;
  justify-content: space-between;
}
#how-it-works header .containerize .left {
  width: 40%;
}
#how-it-works header .containerize .right {
  width: 10%;
}
#how-it-works #pseudo-acls {
  padding-bottom: 60px;
}
#how-it-works #intro {
  display: flex;
  flex-direction: row;
  padding: 30px;
}
#how-it-works #intro > ul {
  flex: 0 0 auto;
  width: 500px;
  border: 0 solid #aaa6b2;
  border-right-width: 1px;
  padding-right: 30px;
  margin: 0;
}
#how-it-works #intro > ul ul > li {
  margin: 1em 0;
}
#how-it-works #intro ul {
  list-style: none;
}
#how-it-works #intro > div {
  flex: 1 1 auto;
  padding-left: 30px;
}
#how-it-works #intro > div ul {
  list-style: disc;
}
#how-it-works #intro > div > p:first-child {
  margin-top: 0;
}
@media (max-width: 899px) {
  #how-it-works #intro {
    flex-direction: column;
  }
  #how-it-works #intro > ul {
    flex: 1 1 auto;
    border-right-width: 0;
    border-bottom-width: 1px;
    padding-right: 0;
    padding-bottom: 30px;
  }
  #how-it-works #intro > div {
    padding-left: 0;
    padding-top: 20px;
  }
}
#how-it-works #grains img {
  width: 50%;
}
@media (max-width: 700px) {
  #how-it-works #grains img {
    width: 80%;
  }
}
#how-it-works #different {
  padding: 35px 10px;
  position: relative;
  font-size: 30px;
  font-weight: 300;
  text-align: center;
}
#how-it-works #different::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #eee9f4;
}
#how-it-works #grains h2, #how-it-works #capabilities h2 {
  font-size: 35px;
  padding: 25px 0;
  margin: 0;
  color: #302851;
  position: relative;
}
#how-it-works #grains h2::after, #how-it-works #capabilities h2::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #eee9f4;
}
#how-it-works #grains h3, #how-it-works #capabilities h3 {
  border-bottom: 1px solid #ddd;
  font-size: 35px;
  text-align: left;
}
@media (max-width: 450px) {
  #how-it-works #grains h3, #how-it-works #capabilities h3 {
    font-size: 20px;
  }
}
#how-it-works #capabilities p img {
  width: 70%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
#how-it-works #grains .models {
  text-align: center;
}
#how-it-works #grains .models img {
  height: 250px;
  width: auto;
  max-width: 45%;
}
#how-it-works #confinement > div.figure, #how-it-works #capabilities > div.figure {
  float: right;
  clear: right;
  width: 50%;
  margin-bottom: 16px;
}
#how-it-works #confinement > div.figure p.heading, #how-it-works #capabilities > div.figure p.heading {
  text-align: center;
  font-weight: bold;
  font-size: 130%;
  margin: 0;
}
#how-it-works #confinement > div.figure p.caption, #how-it-works #capabilities > div.figure p.caption {
  font-size: 85%;
  font-style: italic;
  color: #444;
  margin: 0;
  text-align: center;
}
#how-it-works #confinement > div.figure img, #how-it-works #capabilities > div.figure img {
  display: block;
  width: 100%;
}
@media (max-width: 700px) {
  #how-it-works #confinement > div.figure, #how-it-works #capabilities > div.figure {
    width: 100%;
    float: none;
  }
}

#blog header {
  position: relative;
}
#blog header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-image: linear-gradient(to bottom, #531e49, #efd0ce);
  background-color: #2e2765;
}
#blog .sand {
  min-height: 180px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-image: url(images/header-blog.svg);
}
#blog h2 {
  font-size: 35px;
}
#blog h2, #blog p h3 {
  font-weight: bold;
  text-align: left;
}
#blog h2 a, #blog p h3 a {
  color: black;
}
#blog > div.post-list {
  margin-top: 30px;
  position: relative;
  padding-right: 320px;
  min-height: 1300px;
}
#blog > div.post-list > div.sidebar {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}
#blog > div.post-list > div.sidebar > ul.socialmedia {
  padding: 0;
  text-align: right;
}
#blog > div.post-list > div.sidebar > ul.socialmedia > li {
  font-size: 0;
  display: inline-block;
}
#blog > div.post-list > div.sidebar > ul.socialmedia > li > a {
  display: block;
}
#blog > div.post-list > div.sidebar > ul.socialmedia > li > a::before {
  font-family: sandstorm;
  display: block;
  width: 40px;
  font-size: 30px;
}
#blog > div.post-list > div.sidebar > ul.socialmedia > li > a.fediverse {
  background-image: url(/images/fediverse.svg);
  height: 30px;
  width: 30px;
  background-size: 30px 30px;
}
#blog > div.post-list > div.sidebar > ul.socialmedia > li > a.github {
  background-image: url(/images/github.svg);
  height: 30px;
  width: 30px;
  background-size: 30px 30px;
}
#blog > div.post-list > div.sidebar > .more {
  padding: 16px;
  background-color: #f4f3fb;
}
#blog > div.post-list > div.sidebar > .more ul {
  list-style: none;
  font-size: 15px;
  padding: 0;
}
#blog > div.post-list > div.sidebar > .more ul li {
  padding-bottom: 25px;
}
#blog > div.post-list > div.sidebar > .more > form {
  margin-bottom: 1em;
}
#blog > div.post-list > div.sidebar > .more > form input[type=email] {
  border: 1px solid #aeacb9;
  height: 28px;
  width: 70%;
  padding: 0 4px;
}
#blog > div.post-list > div.sidebar > .more > form input[type=email]:placeholder-shown, #blog > div.post-list > div.sidebar > .more > form input[type=email]::-webkit-input-placeholder, #blog > div.post-list > div.sidebar > .more > form input[type=email]::-moz-placeholder {
  color: black;
  opacity: 1;
}
#blog > div.post-list > div.sidebar > .more > form input[type=submit] {
  color: white;
  background-color: #2f2250;
  border: none;
  height: 28px;
  width: 30%;
  margin: 10px 0 0 0;
  transition: transform 0.75s ease, background 0.35s ease;
}
#blog > div.post-list > div.sidebar > .more > form input[type=submit]:hover {
  background: #7757bc;
}
#blog > div.post-list > div.sidebar > .more > a {
  display: block;
  color: white;
  text-align: center;
  padding: 24px 16px;
  min-height: 268px;
  background: bottom/contain no-repeat url(/images/blog-sidebar-logo.svg);
  background-color: #2f2250;
}
#blog > div.post-list > div.sidebar > .more > a span.selfhost {
  display: block;
  width: 80%;
  margin: 30px auto 16px;
  padding: 12px 0;
  border-radius: 4px;
  font-size: 24px;
  background-image: linear-gradient(to bottom, #744ccc, #613c91);
  box-shadow: 0 3px 3px rgba(41, 25, 66, 0.6);
  background-color: #613c91;
}
#blog > div.post-list > div.sidebar > .more > a span.selfhost:hover {
  background-image: linear-gradient(to bottom, #955fcc, #7a3cab);
  background-color: #744ccc;
}
@media (max-width: 800px) {
  #blog > div.post-list {
    display: flex;
    flex-direction: column;
    padding: 1px 30px;
  }
  #blog > div.post-list > div.sidebar {
    position: static;
    margin: 16px auto;
    order: 10;
  }
  #blog > div.post-list > div.sidebar > ul.socialmedia {
    text-align: center;
  }
}
#blog > div.post-list > section {
  border-bottom: 1px solid #aaa;
  padding-bottom: 50px;
}
#blog > div.post-list > section:last-of-type {
  border-bottom: none;
}
#blog > div.post-list > section > h2 {
  margin-bottom: 0;
}
#blog > div.post-list > section p.post-details {
  margin-top: 0;
  font-size: 85%;
  padding: 10px 0 20px 0;
}
#blog > div.post-list > section blockquote {
  font-size: 30px;
  font-style: italic;
  margin: auto;
  line-height: 1.2;
  font-weight: bold;
  border-left: 4px solid #f3ebe0;
  padding-left: 16px;
}
#blog > div.post-list > section blockquote.notbig {
  font-size: inherit;
  font-weight: inherit;
}
#blog > div.post-list > section a.crowdfunding {
  display: block;
  background-color: #eb1478;
  text-align: center;
  margin-top: 32px;
  padding: 16px;
  font-size: 24pt;
  color: white;
}
#blog > div.post-list > section a.crowdfunding:hover {
  text-decoration: underline;
}
#blog > div.post-list > section iframe.youtube {
  max-width: 100%;
  width: 560px;
  height: 350px;
  display: block;
  margin: 0 auto;
}
#blog > div.post-list > section span.caption {
  font-size: 85%;
  font-style: italic;
  color: #888;
}
#blog > div.post-list > section pre {
  color: #222;
  background-color: #fff;
  font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace;
  font-size: 14px;
  width: auto;
  padding: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: auto;
  margin: auto;
  border: 1px solid #ccc;
}
#blog > div.post-list > section code {
  font-family: Courier, monospace;
}
#blog > div.post-list > section a.linkbutton {
  display: block;
  max-width: 370px;
  background-color: #783189;
  color: #fffbfb;
  padding: 8px;
  text-align: center;
  border-radius: 4px;
  text-decoration: none;
  font-weight: normal;
  margin: 0 auto;
  font-size: 20pt;
}
#blog > div.post-list > section a.big-inline-button {
  display: inline-block;
  bottom: 42px;
  background-color: #783189;
  color: #fffbfb;
  padding: 8px 16px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  margin: 1em auto;
}
#blog > div.post-list > section img {
  max-width: 100%;
}
#blog > div.post-list > nav.pagination {
  width: auto;
  padding: 8px 0;
}
#blog > div.post-list > nav.pagination.top {
  border-bottom: 1px solid #aaa;
}
#blog > div.post-list > nav.pagination.bottom {
  border-top: 1px solid #aaa;
  padding-top: 4px;
  margin-bottom: 60px;
}
#blog > div.post-list > nav.pagination a {
  font-weight: normal;
}
#blog > div.post-list > nav.pagination a:hover {
  font-weight: normal;
}
#blog > div.post-list > nav.pagination a.older {
  display: block;
  float: right;
}

#about > header {
  position: relative;
}
#about > header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #2e2765;
  background-image: url(/images/header-about.svg);
  background-repeat: no-repeat;
  background-position: bottom;
}
#about .story, #about .history {
  width: 90%;
}
#about .story p, #about .history p {
  padding: 0 0 40px 0;
}
#about #team li h3, #about #sponsors li h3 {
  border-bottom: 1px solid #ddd;
  margin: 7px 0 5px 0;
  text-align: left;
}
#about #team h4, #about #sponsors h4 {
  margin: 0;
}
#about #team p, #about #sponsors p {
  font-size: 16px;
  float: left;
}
#about #team > p, #about #sponsors > p {
  float: none;
  max-width: 800px;
  margin: 1em auto;
}
#about #team h5, #about #sponsors h5 {
  display: block;
  font-weight: lighter;
}
#about #team > ul, #about #sponsors > ul {
  width: 100%;
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#about #team > ul > li, #about #sponsors > ul > li {
  flex: 0 1 auto;
  width: 50%;
  position: relative;
  padding: 40px 16px 0;
}
#about #team > ul > li::before, #about #sponsors > ul > li::before {
  display: block;
  content: " ";
  float: left;
  background-repeat: no-repeat;
  height: 80px;
  width: 100px;
  background: bottom/contain no-repeat;
  background-position: left;
  background-color: #fff;
}
#about #team > ul > li.kenton::before, #about #sponsors > ul > li.kenton::before {
  background-image: url("images/people/kenton.png");
}
@media (max-width: 800px) {
  #about #team > ul, #about #sponsors > ul {
    margin: 0;
  }
  #about #team > ul > li, #about #sponsors > ul > li {
    flex: 1 1 100%;
  }
}
#about #contributors {
  padding-bottom: 20px;
}
#about #contributors ul {
  line-height: 32px;
  padding: 20px 0 100px 0;
  border: 1px solid #d7c4f4;
  background-color: #F6F2FC;
  color: #302851;
  overflow-y: auto;
  padding: 16px;
  height: 500px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
#about #contributors ul li {
  flex: 0 0 216px;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#about #contributors ul li.long {
  flex: 0 0 432px;
}

#community > header {
  position: relative;
}
#community > header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #2e2765;
  background-image: url(/images/header-community.png);
  background-repeat: no-repeat;
  background-position: bottom left;
}
#community > section > ul {
  padding: 0;
}
#community #socialmedia ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
#community #socialmedia li {
  width: 20%;
  display: inline-block;
}
@media (max-width: 800px) {
  #community #socialmedia li {
    width: 20%;
  }
}
@media (max-width: 500px) {
  #community #socialmedia li {
    width: 50%;
  }
}
#community #socialmedia li a {
  display: inline-block;
  width: 100%;
  position: relative;
  text-align: center;
}
#community #socialmedia li a::before {
  font-family: sandstorm;
  display: block;
  background-repeat: no-repeat;
  height: 55px;
  font-size: 50px;
  padding-top: 30px;
  background: bottom/contain no-repeat;
}
#community #socialmedia li a.fediverse {
  height: 55px;
  padding-top: 55px;
  background-image: url(/images/fediverse.svg);
  background-repeat: no-repeat;
  background-size: 55px 55px;
  background-position: center;
}
#community #socialmedia li a.github::before {
  content: "\e903";
}
#community #socialmedia li a.livechat {
  height: 55px;
  padding-top: 55px;
  background-image: url(/images/matrix.svg);
  background-repeat: no-repeat;
  background-size: 60px 60px;
  background-position: center;
}
#community #socialmedia li a.devgroup::before {
  content: "\e901";
}
#community #socialmedia li a.youtube::before {
  content: "\e909";
}
#community #socialmedia li a:hover:before {
  color: #7757bc;
}
#community #helpothers ul, #community #helpproject ul {
  padding: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  float: center;
}
#community #helpothers li, #community #helpproject li {
  display: inline-block;
  width: 33%;
  padding: 15px 15px;
  position: relative;
}
@media (max-width: 800px) {
  #community #helpothers li, #community #helpproject li {
    width: 48%;
  }
}
@media (max-width: 500px) {
  #community #helpothers li, #community #helpproject li {
    width: 100%;
  }
}
#community #helpothers li::before, #community #helpproject li::before {
  content: " ";
  display: block;
  background-repeat: no-repeat;
  height: 200px;
  background: bottom/contain no-repeat;
}
#community #helpothers li.share::before, #community #helpproject li.share::before {
  background-image: url("images/help-share.svg");
}
#community #helpothers li.talk::before, #community #helpproject li.talk::before {
  background-image: url("images/help-talk.svg");
}
#community #helpothers li.discuss::before, #community #helpproject li.discuss::before {
  background-image: url("images/help-discuss.svg");
}
#community #helpothers li.build::before, #community #helpproject li.build::before {
  background-image: url("images/help-build.svg");
}
#community #helpothers li.write::before, #community #helpproject li.write::before {
  background-image: url("images/help-write.svg");
}
#community #helpothers li.package::before, #community #helpproject li.package::before {
  background-image: url("images/help-package.svg");
}
#community #helpothers li.feedback::before, #community #helpproject li.feedback::before {
  background-image: url("images/help-feedback.svg");
}
#community #helpothers li.design::before, #community #helpproject li.design::before {
  background-image: url("images/help-design.svg");
}
#community #helpothers li.usability::before, #community #helpproject li.usability::before {
  background-image: url("images/help-usability.svg");
}
#community #helpothers li.documentation::before, #community #helpproject li.documentation::before {
  background-image: url("images/help-documentation.svg");
}
#community #helpothers li.core::before, #community #helpproject li.core::before {
  background-image: url("images/help-core.svg");
}
#community #helpothers p, #community #helpproject p {
  font-size: 16px;
}

#install, #vagrant-spk {
  font-size: 22px;
}
#install > header, #vagrant-spk > header {
  width: 100%;
  display: table;
  min-height: 200px;
  position: relative;
}
#install > header > div, #vagrant-spk > header > div {
  display: table-cell;
  margin: auto;
  text-align: center;
  vertical-align: middle;
  color: white;
}
#install > header > div > h1, #vagrant-spk > header > div > h1 {
  font-size: 52px;
  padding-top: 48px;
  margin: 0;
  font-weight: bold;
}
#install > header > div > h1::before, #vagrant-spk > header > div > h1::before {
  content: " ";
  display: inline-block;
  background-image: url(/images/logo-white.svg);
  background-repeat: no-repeat;
  width: 90px;
  height: 90px;
  margin-right: -20px;
}
#install > header > div > p, #vagrant-spk > header > div > p {
  color: #FFD4EC;
  font-weight: 300;
  margin-top: 0.5em;
  font-size: 30px;
  margin-bottom: 30px;
}
#install > header::after, #vagrant-spk > header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #783189;
  background: linear-gradient(#281E43, #8964A7);
}
#install main > section, #vagrant-spk main > section {
  margin: 64px auto;
}
#install main > section.intro, #vagrant-spk main > section.intro {
  text-align: center;
}
#install main > section.intro > h2, #vagrant-spk main > section.intro > h2 {
  font-size: 30px;
  font-weight: normal;
}
#install main > section.intro > p, #vagrant-spk main > section.intro > p {
  padding: 0 32px;
}
#install main > section.requirements, #vagrant-spk main > section.requirements {
  background-color: #F0EDF7;
  padding: calc(32px - 1em) 32px;
}
#install main > section > .section-content, #vagrant-spk main > section > .section-content {
  border: 1px solid #F0EDF7;
  padding: calc(24px - 1em) 24px;
  box-sizing: border-box;
  margin: 1em 0;
}
@media screen and (min-width: 900px) {
  #install main > section > .https-verified, #vagrant-spk main > section > .https-verified {
    float: left;
    width: 60%;
    margin-bottom: 0;
  }
  #install main > section > .pgp-verified, #vagrant-spk main > section > .pgp-verified {
    float: right;
    width: 35%;
    margin-bottom: 0;
  }
  #install main > section > .aws, #vagrant-spk main > section > .aws {
    float: right;
    width: 35%;
    margin-bottom: 0;
  }
  #install main > section::after, #vagrant-spk main > section::after {
    content: " ";
    display: block;
    height: 0;
    clear: both;
  }
}
#install main > section > .pgp-verified > a, #vagrant-spk main > section > .pgp-verified > a {
  display: block;
  margin: 0 0 1em;
  background-color: #f0edf7;
  font-size: 28px;
  text-align: center;
  padding: 8px 0;
  text-decoration: none;
  color: #6A237C;
  border-radius: 5px;
}
#install main > section > .pgp-verified > a:hover, #vagrant-spk main > section > .pgp-verified > a:hover {
  background-color: #e9e6f4;
}
#install main > section > .aws > a, #vagrant-spk main > section > .aws > a {
  display: block;
  margin: 0 0 1em;
  background-color: #f7981f;
  font-size: 28px;
  text-align: center;
  padding: 8px 0;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
}
#install main > section > .aws > a:hover, #vagrant-spk main > section > .aws > a:hover {
  background-color: #f28e22;
}
#install main > section pre, #vagrant-spk main > section pre {
  font-size: 16px;
  text-align: center;
  padding: 16px 0;
  background-color: #EFEFEF;
  border: 1px solid #c4c4c4;
  overflow-x: auto;
}

.subscribe {
  margin: auto;
  width: 50%;
  height: 40px;
}
@media (max-width: 800px) {
  .subscribe {
    width: 80%;
  }
}
@media (max-width: 550px) {
  .subscribe {
    width: 90%;
  }
}
.subscribe input[type=email] {
  float: left;
  height: 40px;
  width: 70%;
  border: 1px solid #aaa;
  font-size: 1.2em;
  padding-left: 10px;
  padding-right: 10px;
  background-color: #FFF;
}
.subscribe input[type=submit] {
  float: right;
  width: 30%;
  height: 40px;
  background: #2e2765;
  border: 1px solid #7757bc;
  padding: 0;
  font-size: 1.2em;
  color: #fff;
  cursor: pointer;
  outline: none;
  transition: transform 0.75s ease, background 0.35s ease;
}
.subscribe input[type=submit]:hover {
  background: #7757bc;
}

.email {
  list-style: none;
  text-align: center;
  padding: 20px 0;
  color: #4d4c84;
}
.email li {
  font-size: 24px;
  padding: 0 20px;
  list-style: none;
  display: inline;
}

#security header {
  text-align: center;
  padding: 20px 0;
  position: relative;
}
#security header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #2e2765;
  background-image: url(/images/getsecurity-banner.svg);
  background-repeat: no-repeat;
  background-position: bottom right;
}
#security header h1 {
  width: 85%;
  paggin-top: 10px;
  margin: 0 auto;
}
@media (max-width: 850px) {
  #security header h1 {
    font-size: 35px;
  }
}
@media (max-width: 750px) {
  #security header h1 {
    font-size: 30px;
  }
  #security header h1 br {
    display: none;
  }
}
@media (max-width: 500px) {
  #security header h1 {
    font-size: 25px;
  }
}
#security header p {
  padding-bottom: 0px;
  width: 90%;
  margin: 20px auto;
}
@media (max-width: 700px) {
  #security header p {
    font-size: 18px;
  }
}
@media (max-width: 500px) {
  #security header p {
    font-size: 16px;
  }
}
#security header > a {
  color: white;
  text-align: center;
  display: inline-block;
  width: 38%;
  margin: 15px;
  height: 60px;
  line-height: 60px;
  font-size: 26px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  #security header > a {
    font-size: 22px;
    margin: 11px;
    height: 45px;
    line-height: 45px;
    width: 42%;
  }
}
@media (max-width: 800px) {
  #security header > a {
    font-size: 17px;
    margin: 8px;
    line-height: 40px;
  }
}
@media (max-width: 600px) {
  #security header > a {
    font-size: 15px;
  }
}
@media (max-width: 430px) {
  #security header > a {
    width: 200px;
  }
}
#security header > a.get {
  background-image: linear-gradient(to bottom, #884cea, #6a42b8);
  box-shadow: 0 3px 3px rgba(41, 25, 66, 0.6);
  background-color: #613c91;
}
#security header > a.get:hover {
  background-image: linear-gradient(to bottom, #925bef, #794cc2);
  background-color: #794cc2;
}
#security header > a.demo {
  background-image: linear-gradient(to bottom, #f46b8b, #d13f6c);
  box-shadow: 0 3px 3px rgba(41, 25, 66, 0.6);
  background-color: #d13f6c;
}
#security header > a.demo:hover {
  background-image: linear-gradient(to bottom, #fb839f, #d54f79);
  background-color: #d54f79;
}
@media (max-width: 850px) {
  #security section h3 {
    font-size: 20px;
  }
}
#security li h3 {
  font-weight: 400;
}
#security p.highlight {
  text-align: center;
  padding-bottom: 20px;
}
#security p.copyright {
  text-align: center;
  font-size: 14px;
}
#security #why-sandstorm > h3 {
  max-width: 940px;
  margin: 1em auto;
}
#security #why-sandstorm ul {
  padding: 0;
}
#security #why-sandstorm ul li {
  padding-right: 2%;
  padding-left: 33%;
  height: 250px;
  display: inline-block;
  position: relative;
  padding-bottom: 40px;
}
@media (max-width: 450px) {
  #security #why-sandstorm ul li {
    padding-left: 0;
  }
}
#security #why-sandstorm ul li::before {
  content: " ";
  display: block;
  position: absolute;
  background: center/contain no-repeat;
  left: 0;
  width: 35%;
  height: 90%;
}
@media (max-width: 450px) {
  #security #why-sandstorm ul li::before {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
}
#security #why-sandstorm ul li.why-onprem::before {
  background-image: url(images/why-onprem.svg);
}
#security #why-sandstorm ul li.why-finegrained::before {
  background-image: url(images/why-finegrained.svg);
}
#security #why-sandstorm ul h3 {
  text-align: left;
  padding-top: 10px;
}
@media (max-width: 450px) {
  #security #why-sandstorm ul h3 {
    text-align: center;
    padding-top: 0;
  }
}
#security #inhouse > h3 {
  background: 32px 100%/136px 136px no-repeat url("/images/blackhat.svg");
  position: relative;
  max-width: 950px;
  margin: 0 auto;
  padding: 40px 0 32px 200px;
  color: #302851;
  text-align: left;
}
#security #inhouse > h3::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #eee9f4;
  top: 8px;
}
@media (max-width: 500px) {
  #security #inhouse > h3 {
    background: 50% 100%/136px 136px no-repeat url("/images/blackhat.svg");
    padding: 1em 16px 150px;
  }
}
#security #inhouse > p {
  max-width: 950px;
  margin: 1em auto;
}
#security #web-apps {
  padding-bottom: 30px;
}
#security #web-apps > h3 {
  max-width: 940px;
  margin: 1em auto;
}
#security #web-apps ul {
  display: table-row;
  align-content: space-between;
  list-style: none;
  padding: 0;
  width: 100%;
  text-align: center;
}
#security #web-apps ul li {
  text-align: left;
  display: inline-block;
  width: 33%;
  padding: 0 2% 20px 2%;
  vertical-align: top;
}
@media (max-width: 700px) {
  #security #web-apps ul li {
    width: 50%;
  }
}
@media (max-width: 500px) {
  #security #web-apps ul li {
    width: 100%;
    padding-top: 30px;
  }
}
#security #web-apps ul li::before {
  content: " ";
  display: block;
  background-repeat: none;
  height: 200px;
  background: bottom/contain no-repeat;
}
@media (max-width: 800px) {
  #security #web-apps ul li::before {
    height: 180px;
  }
}
@media (max-width: 600px) {
  #security #web-apps ul li::before {
    height: 150px;
  }
}
@media (max-width: 450px) {
  #security #web-apps ul li::before {
    height: 200px;
  }
}
#security #web-apps ul li.slack-rocketchat::before {
  background-image: url("images/slack-rocketchat.png");
}
#security #web-apps ul li.trello-wekan::before {
  background-image: url("images/trello-wekan.png");
}
#security #web-apps ul li.dropbox-davros::before {
  background-image: url("images/dropbox-davros.png");
}
#security #web-apps ul p {
  height: 5rem;
}
@media (min-width: 700px) and (max-width: 900px) {
  #security #web-apps ul p {
    height: 8rem;
  }
}
@media (max-width: 700px) {
  #security #web-apps ul p {
    height: 6rem;
  }
}
@media (max-width: 500px) {
  #security #web-apps ul p {
    height: 4.5rem;
  }
}
#security #web-apps ul .start {
  height: 60px;
  padding-top: 25px;
  border: none;
  background-color: white;
  display: block;
  width: 100%;
}
#security #web-apps ul .start a {
  text-align: center;
  padding: 10px 0;
  margin: 0 auto;
  width: 100%;
  border-radius: 5px;
  display: block;
  transition: transform 0.75s ease, background 0.35s ease;
  background-color: lavender;
}
@media (max-width: 500px) {
  #security #web-apps ul .start a {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
}
#security #web-apps ul .start a:hover {
  background-color: #d1d1f5;
}
#security .action {
  padding-bottom: 50px;
  color: #fff;
  position: relative;
}
#security .action::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #2e2765;
}
#security .action a {
  display: block;
  margin: 0 auto;
}
#security .action p {
  color: #d7c4f4;
  font-size: 23px;
}
#security .action h3 {
  font-size: 25px;
}
#security #join-list {
  padding-bottom: 25px;
  position: relative;
}
#security #join-list::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F4F3FB;
}
#security #join-list .email {
  padding: 25px 0 20px 0;
}

#education header {
  text-align: center;
  padding: 20px 0;
  position: relative;
}
#education header::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #0D4379;
}
#education header h1 {
  width: 85%;
  paggin-top: 10px;
  margin: 0 auto;
}
@media (max-width: 850px) {
  #education header h1 {
    font-size: 35px;
  }
}
@media (max-width: 750px) {
  #education header h1 {
    font-size: 30px;
  }
  #education header h1 br {
    display: none;
  }
}
@media (max-width: 500px) {
  #education header h1 {
    font-size: 25px;
  }
}
#education header p {
  padding-bottom: 0px;
  width: 90%;
  margin: 20px auto;
  color: #caeaff;
}
@media (max-width: 700px) {
  #education header p {
    font-size: 18px;
  }
}
@media (max-width: 500px) {
  #education header p {
    font-size: 16px;
  }
}
#education header > a {
  color: white;
  text-align: center;
  display: inline-block;
  width: 38%;
  margin: 15px;
  height: 60px;
  line-height: 60px;
  font-size: 26px;
  border-radius: 4px;
}
@media (max-width: 900px) {
  #education header > a {
    font-size: 22px;
    margin: 11px;
    height: 45px;
    line-height: 45px;
    width: 42%;
  }
}
@media (max-width: 800px) {
  #education header > a {
    font-size: 17px;
    margin: 8px;
    line-height: 40px;
  }
}
@media (max-width: 600px) {
  #education header > a {
    font-size: 15px;
  }
}
@media (max-width: 430px) {
  #education header > a {
    width: 200px;
  }
}
#education header > a.get {
  background-image: linear-gradient(to bottom, #884cea, #6a42b8);
  box-shadow: 0 3px 3px rgba(41, 25, 66, 0.6);
  background-color: #613c91;
}
#education header > a.get:hover {
  background-image: linear-gradient(to bottom, #925bef, #794cc2);
  background-color: #794cc2;
}
#education header > a.demo {
  background-image: linear-gradient(to bottom, #f46b8b, #d13f6c);
  box-shadow: 0 3px 3px rgba(41, 25, 66, 0.6);
  background-color: #d13f6c;
}
#education header > a.demo:hover {
  background-image: linear-gradient(to bottom, #fb839f, #d54f79);
  background-color: #d54f79;
}
@media (max-width: 850px) {
  #education section h3 {
    font-size: 20px;
  }
}
#education li h3 {
  font-weight: 400;
}
#education p.highlight {
  text-align: center;
  font-size: 20px;
}
#education p.copyright {
  text-align: center;
  font-size: 14px;
}
#education #why-it > h3 {
  max-width: 940px;
  margin: 1em auto;
}
#education #why-it ul {
  padding: 0;
}
#education #why-it ul li {
  padding-right: 2%;
  padding-left: 2%;
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
  width: 50%;
  vertical-align: top;
}
@media (max-width: 550px) {
  #education #why-it ul li {
    width: 100%;
  }
}
@media (max-width: 450px) {
  #education #why-it ul li {
    padding-left: 0;
  }
}
#education #why-it ul li::before {
  content: " ";
  display: block;
  position: absolute;
  background: center/contain no-repeat;
  left: 0;
  width: 35%;
  height: 90%;
}
@media (max-width: 450px) {
  #education #why-it ul li::before {
    position: relative;
    width: 80%;
    margin: 0 auto;
  }
}
#education #why-it ul li.publish-online::before {
  background-image: url(images/why-onprem.svg);
}
#education #why-it ul li.typeset-papers::before {
  background-image: url(images/why-finegrained.svg);
}
#education #why-it ul h3 {
  text-align: left;
  padding-top: 10px;
}
@media (max-width: 450px) {
  #education #why-it ul h3 {
    text-align: center;
    padding-top: 0;
  }
}
#education #inhouse > h3 {
  background: 32px 100%/136px 136px no-repeat url("/images/blackhat.svg");
  position: relative;
  max-width: 950px;
  margin: 0 auto;
  padding: 40px 0 32px 200px;
  color: #302851;
  text-align: left;
}
#education #inhouse > h3::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #eee9f4;
  top: 8px;
}
@media (max-width: 500px) {
  #education #inhouse > h3 {
    background: 50% 100%/136px 136px no-repeat url("/images/blackhat.svg");
    padding: 1em 16px 150px;
  }
}
#education #inhouse > p {
  max-width: 950px;
  margin: 1em auto;
}
#education #web-apps {
  padding-bottom: 30px;
}
#education #web-apps > h3 {
  max-width: 940px;
  margin: 1em auto;
}
#education #web-apps ul {
  display: table-row;
  align-content: space-between;
  list-style: none;
  padding: 0;
  width: 100%;
  text-align: center;
}
#education #web-apps ul h3 {
  margin-bottom: 10px;
}
#education #web-apps ul li {
  text-align: left;
  display: inline-block;
  width: 33%;
  padding: 0 2% 20px 2%;
  vertical-align: top;
}
@media (max-width: 700px) {
  #education #web-apps ul li {
    width: 50%;
  }
}
@media (max-width: 500px) {
  #education #web-apps ul li {
    width: 100%;
    padding-top: 30px;
  }
}
#education #web-apps ul li::before {
  content: " ";
  display: block;
  background-repeat: none;
  height: 200px;
  background: bottom/contain no-repeat;
}
@media (max-width: 800px) {
  #education #web-apps ul li::before {
    height: 180px;
  }
}
@media (max-width: 600px) {
  #education #web-apps ul li::before {
    height: 150px;
  }
}
@media (max-width: 450px) {
  #education #web-apps ul li::before {
    height: 200px;
  }
}
#education #web-apps ul li.publish-online::before {
  background-image: url("images/education-publish.svg");
}
#education #web-apps ul li.typeset-papers::before {
  background-image: url("images/education-typeset.svg");
}
#education #web-apps ul li.organize-projects::before {
  background-image: url("images/education-organize.svg");
}
#education #web-apps ul li.sync-and-share-files::before {
  background-image: url("images/education-sync-share.svg");
}
#education #web-apps ul li.access-one-place::before {
  background-image: url("images/education-one-place.svg");
}
#education #web-apps ul li.use-our-apps::before {
  background-image: url("images/education-our-apps.svg");
}
#education #web-apps ul p {
  text-align: center;
  line-height: 0.6;
}
#education #web-apps ul .start {
  height: 60px;
  padding-top: 25px;
  border: none;
  background-color: white;
  display: block;
  width: 100%;
}
#education #web-apps ul .start a {
  text-align: center;
  padding: 10px 0;
  margin: 0 auto;
  width: 100%;
  border-radius: 5px;
  display: block;
  transition: transform 0.75s ease, background 0.35s ease;
  background-color: lavender;
}
@media (max-width: 500px) {
  #education #web-apps ul .start a {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }
}
#education #web-apps ul .start a:hover {
  background-color: #d1d1f5;
}
#education #web-apps .action-ed {
  padding-top: 35px;
  padding-bottom: 15px;
  display: block;
  justify-content: center;
  text-align: center;
  position: relative;
}
#education #web-apps .action-ed a {
  margin: 0 auto;
  background-color: #d13f6c;
  border: 1.5px solid #eee9f4;
  width: 300px;
  display: block;
  font-size: 25px;
  padding: 8px 20px;
  border-radius: 6px;
  color: white;
  transition: transform 0.75s ease, background 0.35s ease;
}
#education #web-apps .action-ed a:hover {
  background-color: #e0507d;
}
@media (max-width: 500px) {
  #education #web-apps .action-ed a {
    font-size: 22px;
    width: 250px;
  }
}
#education #web-apps .action-ed::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F6F2FC;
}
#education #web-apps .action-ed:after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F6F2FC;
  background-image: url(/images/market-tent.svg);
  background-position: right bottom;
  background-repeat: no-repeat;
}
#education #open-ed .content {
  padding: 0 5% 0 5%;
  margin: 40px 0 70px 0;
  min-height: 240px;
}
#education #open-ed .content::before {
  margin: 0 20px 0 0;
  display: block;
  content: " ";
  float: left;
  background-image: url(/images/grant-potter.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  width: 320px;
  height: 250px;
}
#education #open-ed .content .text {
  padding: 0 0 0 340px;
}
@media (max-width: 700px) {
  #education #open-ed .content .text {
    padding: 0;
  }
}
#education #open-ed .content .text p {
  font-size: 130%;
  line-height: 1.4;
}
#education #open-ed .content .text .organization {
  font-size: 90%;
}
#education #open-ed .content .text .organization::before {
  display: block;
  content: " ";
  float: left;
  background-image: url(/images/open-education.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  width: 65px;
  height: 65px;
  margin: 0 15px 0 0;
}
#education .action {
  padding-bottom: 50px;
  color: #fff;
  position: relative;
}
#education .action::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #0D4379;
}
#education .action a {
  display: inline-block;
  width: 280px;
  margin: 10px 20px;
}
#education .action p {
  color: #caeaff;
  font-size: 23px;
}
#education .action h3 {
  font-size: 25px;
}
#education #join-list {
  padding-bottom: 25px;
  position: relative;
}
#education #join-list::after {
  display: block;
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  z-index: -1;
  background-color: #F4F3FB;
}
#education #join-list .email {
  padding: 25px 0 20px 0;
}

/*# sourceMappingURL=style.css.map */