body {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: light;
  margin:0;
  padding:0;
}

.container {
    background-image: url(bg.svg);
    background-size: min(1100px, 100vw) auto;
    background-repeat: no-repeat;
    background-position-x: right;
    display: grid;
    grid-template-columns: 60% auto;
}

.container.subpage {
    height: 200px;
    background-size: min(500px, 60vw) 200px;
}

.subpage .container-heading {
    padding-top: 5em;
}

.container-heading {
    padding: 15em 1em 0em 15%;
    flex-grow: 2;
}

.container-heading h1 {
    color: /*#4e7576*/ #772573;
    font-weight: 300;
    font-style: normal;
    margin-top: 0;
    margin-bottom: 0.25em;
    font-size: 4em;
}

.container-heading .super {
    color: /*#6d999a*/ #9a5ea8;
    font-weight: 300;
    margin-bottom: 0;
    font-size: 1.2em;
}

.appstore-buttons img {
    height: 50px;
}

.hero {
  align-self: center;
}

.hero img {
    max-width: 100%;
}

.hero-alt {
    display: none;
    height: 180px;
    overflow: hidden;

    margin: 0 0 2em;

    /* The image used */
    background-image: url("quaverley_mockup_crop.png");

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    /* background-position-y: -100px; */
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.main h2 {
    margin: 1em 5vw 0.5em;
    /* margin: 1em 0 0.5em; */
    font-weight: 300;
    font-size: 2em;
    font-style: light;
    color: /*#6d999a*/ #9a5ea8;
}

.main h3 {
    font-weight: 300;
    color: #404040;
    margin: 2.5em 5vw 0.5em;
}

.main p {
    color: #1a1717;
    /* margin: 1em 0 0.5em; */
    margin: 2.5em 5vw 0.5em;
    font-size: 1.2em;
}

.width-restricted {
    max-width: 1080px;
    margin: auto;
}

.footer {
    margin-top: 7em;
    padding: 3em 0;
    background-color: #313131;
    color: #cdcdcd;
}
.footer .copyright {
    text-align: center;
    font-size: 0.9em;
}

.footer a {
    color: #cdcdcd;
    font-weight: 500;
    font-size: 0.9em;
    padding: 0 2vw;
}

.flex-row {
    display: flex;
}
.flex-row>*{
    flex-grow: 1;
}
.legal h2 {
    margin-top:3em;
}
.legal h3 {
    margin-top:1.5em;
}


p.betamsg {
    padding:0;
    margin: 0;
    font-size: 0.8em;
    color: #555555;
}


@media (max-width: 850px) {
    .hero {
        display: none;
    }
    .hero-alt {
        display: block;
    }
    .container{
        display: block;
    }
    .container-heading {
        padding: 55vw 1em 100px 10%;
    }
}

@media (max-width: 650px) {
    .container-heading {
        padding-bottom: 40vw;
    }
}

@media (max-width: 400px) {
    .container-heading {
        padding-left: 1em;
    }
}

@media (min-width: 1300px) {
    .container-heading {
        padding-top: 35%;
        padding-left: 15%;
    }
    .container-heading h1 {
        font-size: 6em;
    }
}