body {
    color: #2a3a33;
    font-family: 'Quicksand', arial, sans-serif;
    line-height: 1.45;
}
a {
    color: #5B7F71;
}
a:visited {
    color: #5B7F71;
    opacity: 0.7;
}
h1 {
    margin: 0.3em;
    font-size: 1.5em;
    text-align: center;
}
h1 a, h1 a:visited {
    color: black;
    text-decoration: none;
}
h1 img {
    max-height: 5em;
}
nav {
    text-align: center;
    margin-bottom: 2em;
}
nav ul {
    margin: 0;
    padding: 0;
}
nav li {
    display: inline-block;
}
nav li a, nav li a:visited {
    margin: 0.5em;
    padding: .3em;
    line-height: 2em;
    border: 1px solid #5B7F71;
    border-width: 0 1px;
    border-radius: 0.3em;
    color: black;
    text-decoration: none;
}
nav li a:hover {
    background-color: rgba(192, 232, 107, 0.3);
}
body>div {
    display: block;
    max-width: 40em;
    margin: 0 auto;
    padding: 0 .5em 0;
}
p {
    max-width: 35em;
}
h1,h2,h3,h4,h5,h6 {
    color: #5B7F71;
}
h2 {
    font-size: 140%;
}
h3 {
    margin: 1.5em 0 0 0;
}
h3+span {
    font-size: smaller;
    color: #5B7F71;
}
ol ol {
    list-style-type: lower-latin;
}
ol li, ul li {
    margin: .1em 0;
}
input {
    font-size: 110%;
    margin-top: .3em;
    max-width: calc(100% - 1em);
}
.primary-action, .primary-action:active, .primary-action:visited {
    display: inline-block;
    border: none;
    border-radius: 0.8em;
    box-shadow: 0.1em 0.1em 0.1em #676767;
    background-color: #5B7F71;
    background: linear-gradient(#668D7E, #49665B);
    color: white;
    padding: .5em 1em;
    font-size: 120%;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.primary-action:hover {
    background-color: #40B487;
    background: linear-gradient(#47C393, #389F77);
}
.secondary-action, .secondary-action:active, .secondary-action:visited {
    display: inline-block;
    border: none;
    border-radius: 0.8em;
    box-shadow: 0.1em 0.1em 0.1em #676767;
    background-color: #84958E;
    background: linear-gradient(#9CAAA4, #5C6662);
    color: white;
    cursor: pointer;
    padding: .4em 1em;
    font-size: 100%;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
}
.secondary-action:hover {
    background-color: #40B487;
    background: linear-gradient(#47C393, #389F77);
}
.secondary-action:disabled {
    background-color: #84958E;
    background: linear-gradient(#9CAAA4, #5C6662);
    cursor: auto;
}
.secondary-action[data-state="busy"] {
    cursor: progress;
}
.secondary-action[data-state="success"],
.secondary-action[data-state="success"]:active,
.secondary-action[data-state="success"]:visited,
.secondary-action[data-state="success"]:hover {
    cursor: auto;
    background: white;
    border: .1em solid green;
    color: green;
}
.message {
    border: .1em solid black;
    border-radius: .4em;
    padding: .4em;
}
.error.message {
    border-color: red;
    background-color: #fee;
}
.info.message {
    border-color: gray;
    background-color: #ffe;
}
.success.message {
    border-color: green;
    background-color: #efe;
}
footer {
    margin-top: 5em;
    border: 0.1em solid #e6eae8;
    border-radius: 0.5em;
    background-color: #f6f6f6;
    color: #5e8071;
    padding: 0.5em;
    text-align: center;
}
footer div {
    display: inline-block;
    margin: 0.1em 1em;
}

@media print {
    nav {
        display: none;
    }
    a, a:visited {
        color: inherit;
        font-weight: normal;
        text-decoration: none;
    }
    a.printhref:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

nav li a.animated {
    animation: nav-highlight 0.4s alternate 6;
}

@keyframes nav-highlight {
    0% {
        border-top-color: rgba(91, 124, 113, 0);
        border-bottom-color: rgba(91, 124, 113, 0);
    }
    100% {
        border-top-width: 1px;
        border-bottom-width: 1px;
        border-top-color: rgba(91, 124, 113, 1);
        border-bottom-color: rgba(91, 124, 113, 1);
        background-color: rgba(192, 232, 107, 0.3);
    }
}

/* index */
.features a {
    color: black;
    text-decoration: none;
}
.features__feature {
    border: 1px solid #5B7F71;
    border-radius: .5em;
    clear: both;
    display: inline-block;
    margin: 1em;
    padding: 1em;
    width: 15em;
    vertical-align: top;
}
.features__feature p {
    min-height: 2.25em;
}
.features__feature img {
    float: right;
    max-width: 5em;
    margin-left: .5em;
    opacity: 0.6;
}
.about-us-and-signup {
    margin-top: 1em;
}
.sign-up-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 1em;
    text-align: center;
}
@media screen and (min-width: 35em) {
    .about-us-and-signup {
        display: flex;
    }

}
.sign-up-action, .sign-up-action:active, .sign-up-action:visited {
    border-radius: 2em;
    padding: 1em 2em;
}
.action-buttons {
    text-align: center;
}

.acknowledge-country {
    background-color: #ff760630;
    border-radius: 1em;
    padding: .1em 1em;
}

/* Sign-up */
.email-address-input {
    font-size: 140%;
}
.email-address-input__at {
    letter-spacing: .2em;
}
.email-address-input-error {
    color: #f55;
    min-height: 1.2em;
}
.pretty-space-selection {
    display: none;
}
.price-space-selection {
    display: flex;
}
.space-price-connection {
    display: inline-block;
    margin-left: .8em;
}
.price {
    font-size: 150%;
    line-height: 150%;
    text-align: center;
}
.price span {
    display: inline-block;
}
.price > span {
    margin: 0 .6em;
}
.price-amount {
    font-size: 166%;
    vertical-align: middle;
}
.price-period, .price-yearly {
    font-size: 66%;
}
.space {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.feature-list {
    list-style: none;
    padding-left: 1em;
}
.feature-list li:before {
    content: "✔ "
}
input[name="email_confirmation"] {
    display: none;
}

/* Team */

.people > div {
    margin: 3em 0 4em 0;
}
.people figure {
    text-align: center;
}
.people figure img {
    box-shadow: 0 0 .4em rgba(0,0,0,0.3);
    max-height: 12em;
    max-width: 12em;
}
.people a.social img {
    max-height: .9em;
    max-width: .9em;
    vertical-align: middle;
}

/* latin */
@font-face {
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: local('Quicksand Regular'), local('Quicksand-Regular'), url(/fonts/quicksand-v7-latin-normal-400-regular.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}