/* Ribbon */
/* #awwwards {
    position: fixed;
    z-index: 999;
    right: 0;
    top: calc(100vh - 172px);
    transform: translateY(0);
}

@media (min-width: 750px) {
    #awwwards {
        transform: translateY(-50%);
        top: 50%;
    }
} */

/* @media screen and (orientation: landscape) {
    #awwwards {
        top: calc(100vh - 172px);
        transform: translateY(0);
    }
} */

/* Any global CSS */

.postcode__selector {
    width: 80%;
}

.foo {
    border: 2px solid purple;
}

.content {
    opacity: 1;
    transition: opacity 0.5s;
    color: rgb(48, 44, 44);
    /* font-size: 1.5rem; */
}
.content--visible {
    opacity: 1;
}
.content strong {
    font-size: 1.8rem;
}

.findings {
    position: relative;
    left: 0;
    width: calc(100vw - 34px);
}
.findings__inner {
    max-width: 800px;
    margin: auto;
}

@media (min-width: 1600px) {
    .findings {
        width: 80vw;
    }
}

@media (min-width: 1400px) {
    h2 {
        font-size: 5.4rem;
    }
    .content {
        font-size: 1.6rem;
    }
}

@media (min-width: 2000px) {
    h2 {
        font-size: 6.2rem;
    }
    .content {
        font-size: 1.8rem;
    }
    .content strong {
        font-size: 2rem;
    }
}

body {
    background-color: rgb(234, 228, 228);
}

li {
    list-style-position: outside;
}
ul {
    padding-left: 20px;
}
/* ---- Typography ---- */
.page {
    margin-top: 40px;
}
.page__title {
    font-size: 5rem;
    line-height: 1;
    color: rgb(51, 83, 255);
}
.page__content {
    font-family: 'Heebo', Roboto, sans-serif;
    font-size: 1.5rem;
    color: rgb(48, 44, 44);
}

/* Larger than mobile */
@media (min-width: 400px) {
    .page__title {
        font-size: 6.4rem;
    }
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
    .page__title {
        font-size: 8.2rem;
    }
}

/* Larger than tablet */
@media (min-width: 750px) {
    .page__title {
        font-size: 11.2rem;
    }
}

@media (min-width: 960px) {
    .page__title {
        font-size: 13.6rem;
    }
}

/* Larger than desktop */
@media (min-width: 1000px) {
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
    .page__title {
        font-size: 15rem;
        line-height: 1.2em;
    }
    .page__content {
        font-size: 1.6rem;
    }
}

@media (min-width: 1366px) {
    .page__title {
        font-size: 16rem;
    }
}

@media (min-width: 1440px) {
    .page__title {
        font-size: 18rem;
        line-height: 1.4em;
    }
    .page__content {
        font-size: 1.8rem;
    }
}

/* ---- TRANSITIONS ---- */
/* .blur-enter {
  transform: translateX(80%);
  opacity: 0;
}.blur-enter-active {
  transition: transform .6s ease-in, opacity .6s;
}.blur-enter-to {
  transform: translateX(0);
  opacity: 1;
}.blur-leave {
  transform: translateX(0);
}.blur-leave-active{
  transition: transform .4s ease-out;
}.blur-leave-to {
  transform: translate(-110%);
}

.blur-leave .page__title {
  transform: translateY(0);
}.blur-leave-active .page__title {
  transition: transform 1s ease-in;
}.blur-leave-to .page__title {
  transform: translateY(200%);
} */

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
}

/* ---- COLOURS ---- */

/* Colour Scheme */
:root {
    --sd-black: rgb(48, 44, 44);
    --sd-black-old: rgb(51, 51, 51);
    --sd-beige: rgb(234, 228, 228);
    --sd-orange: rgb(241, 79, 29);
    --sd-orange-old: #f57a25;
    --sd-blue: rgb(51, 83, 255);
    --sd-blue-old: #5042ec;
    --sd-white: rgb(255, 255, 255);
}

.page__next {
    margin-top: 16px;
    position: relative;
    float: right;
    vertical-align: middle;
}

.page__next svg.threeline {
    position: absolute;
    left: 0;
    z-index: -1;
    top: 20%;
    height: 160%;
    width: 0;
    transition: width 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
    fill: rgb(241, 79, 29);
}

.page__next:hover svg.threeline {
    width: 130%;
}

.page__next:hover {
    color: white;
}

.page__next svg.feather {
    height: 1.4em;
    position: relative;
    top: 0.36em;
}

a.nuxt-link-exact-active {
    color: rgb(162, 173, 237) !important;
    cursor: pointer;
}
a.nuxt-link-exact-active:hover {
    color: rgb(162, 173, 237) !important;
    /* color: rgb(51,83,255); */
}