@font-face {
    font-display: swap;
    font-family: Metropolis-Bold;
    src: url(../fonts/Metropolis-Bold.otf)
}

@font-face {
    font-display: swap;
    font-family: Metropolis-Light;
    src: url(../fonts/Metropolis-Light.otf)
}

html {
    font-size: 16px
}

body {
    background-color: #222;
    color: #fff;
    font-family: Metropolis-Light;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    padding: 0 4vw;
    z-index: 2
}

.black-text {
    color: #000
}

.cover-2 {
    left: -4vw;
    position: relative;
    width: 100vw
}

.about-ayache,
.solution {
    padding: 2vw
}

.solution li {
    font-size: 1.5rem;
    margin: 0
}

.burger-1 {
    top: 7vh
}

.burger-1,
.burger-2 {
    position: absolute;
    right: 4vw;
    width: 5vw
}

.burger-2 {
    bottom: 7vh
}

.small-link {
    font-size: 1rem;
    line-height: 2rem
}

.flex2 {
    flex: 2 !important
}

img {
    width: 100%
}

a {
    color: #fff
}

h2 {
    font-family: Metropolis-Bold;
    font-size: 4rem;
    line-height: 5rem;
    margin-bottom: 5vh;
    margin-top: 10vh
}

h2 span {
    color: #222;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff
}

h3 {
    font-size: 4rem;
    line-height: 4rem
}

h3,
h4 {
    font-family: Metropolis-Bold
}

h4 {
    font-size: 2rem;
    line-height: 2rem
}

ul li {
    margin-top: 5vh
}

ol li {
    margin-top: 3vh
}

li::marker {
    color: #f6f561
}

.cover {
    color: #fff;
    height: 50vmax;
    left: -4vw;
    overflow: hidden;
    padding: 0 8vw;
    position: relative;
    width: 84vw
}

.cover .flex {
    position: relative;
    z-index: 3
}

.cover .mask {
    left: -30vw;
    position: absolute;
    top: -20vh
}

.cover .mask img {
    height: auto;
    width: 70vw
}

.cover h2 {
    font-size: 2rem;
    line-height: 2rem;
    margin-top: 5vh
}

.logo {
    margin-top: 10vh;
    width: 60%
}

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

.flex>div {
    flex: 1
}

.download {
    left: 13vw;
    position: absolute;
    top: 40vw;
    width: 30vw
}

.download>div>div {
    margin-top: .5vh;
    padding-right: .5vw
}

.text-center {
    text-align: center
}

.vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.block {
    display: block
}

.margin-top-5 {
    margin-top: 5vh
}

.margin-top-10 {
    margin-top: 10vh
}

.fa-solid,
.fas {
    color: #fd6400;
    font-size: 5rem
}

.margin-top-0 {
    margin-top: 0
}

.margin-top-m-10 {
    background-image: url(images/doges.webp);
    background-size: cover;
    border-radius: 2rem;
    margin-top: -35vh;
    padding: 4vw 4vw 50vh;
    position: relative
}

.processes {
    align-items: center;
    display: flex;
    flex-direction: column;
    font-family: Metropolis-light;
    margin: 10vh auto;
    width: 70%
}

.processes .process {
    border: 1px solid #fff;
    border-radius: 1rem;
    display: inline-block;
    font-size: 3rem;
    padding: 2vw
}

.processes .process .container {
    align-items: center;
    display: flex;
    flex-wrap: wrap
}

.processes .process .container .left,
.processes .process .container .right {
    flex: 1
}

.processes .process .container span {
    display: block;
    margin: 1rem 0 1rem 2.4rem
}

.processes .process .container span.bold {
    font-family: Metropolis-Bold
}

.processes .process .container ul {
    font-size: 1.6rem;
    list-style: none;
    margin: 0;
    white-space: nowrap
}

.processes .process .container ul li {
    line-height: 2rem;
    margin-bottom: 1vh;
    margin-top: 0
}

.onbording {
    margin: 15vh 0 5vh;
    position: relative
}

.onbording h2 {
    font-size: 5rem;
    position: relative;
    z-index: 3
}

.onbording .mask,
.onbording h2 {
    font-family: Metropolis-Bold;
    margin: 0
}

.onbording .mask {
    color: #222;
    font-size: 14vw;
    left: 50%;
    position: absolute;
    text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2
}

.branding {
    margin: 25vh 0 5vh;
    position: relative
}

.branding h2 {
    font-size: 5rem;
    position: relative;
    z-index: 3
}

.branding .mask,
.branding h2 {
    font-family: Metropolis-Bold;
    margin: 0
}

.branding .mask {
    color: #222;
    font-size: 18vw;
    left: -5vw;
    position: absolute;
    text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.padding-2vw {
    padding: 2vw
}

.padding-4vw {
    padding: 4vw
}

.width-50 {
    margin: auto;
    width: 50%
}

.home .padding,
.mobile-screen>div>div {
    padding: 4vw
}

.double-mobile>div {
    padding: 0 15vw
}

.double-mobile .padding {
    padding: 0 5vw
}

.blue-bg {
    background-color: #fefe90;
    color: #000;
    display: flex;
    flex-wrap: wrap;
    font-family: Metropolis-Bold;
    justify-content: space-between;
    left: -4vw;
    padding: 5vh 10vw;
    position: relative;
    width: 80vw
}

.blue-bg .section {
    flex: 1 0 40%
}

.blue-bg .section p {
    font-family: Metropolis-Light
}

.blue-bg .section p>span {
    font-family: Metropolis-Bold
}

.blue-bg .section img {
    height: auto;
    width: 80%
}

.blue-bg .section>span {
    display: inline-block;
    font-size: 4rem;
    line-height: 2rem;
    margin-right: 3rem
}

.blue-bg .section span small {
    display: block;
    font-family: Metropolis-Light;
    font-size: 1rem;
    margin: auto;
    white-space: nowrap;
    width: 50%
}

.our-branding {
    display: flex;
    flex-wrap: wrap;
    font-size: 1rem;
    justify-content: space-around;
    line-height: 1.5rem;
    margin-top: 8vw;
    padding: 0 5vw;
    position: relative;
    z-index: 2
}

.our-branding .brand {
    flex: 1 0 40%;
    margin: 0;
    max-width: 70vh;
    min-width: 30vh;
    padding: 1rem;
    position: relative;
    text-align: center
}

.our-branding .brand.color-palette {
    text-align: left
}

.our-branding .brand.color-palette .palette {
    display: flex;
    height: 15%;
    margin: 2vh 0
}

.min-width {
    height: auto;
    min-width: 30vh
}

.our-branding .brand.color-palette .palette div:first-child {
    background-color: #fefe90;
    flex: 1
}

.our-branding .brand.color-palette .palette div:nth-child(2) {
    background-color: #111;
    flex: 1
}

.our-branding .brand.color-palette .alph {
    display: flex;
    margin-top: 2vh
}

.cover-image {
    position: relative;
    top: 50%;
    transform: translateY(-50%)
}

.our-branding .brand.color-palette .alph>p {
    flex: 1;
    font-family: Metropolis-bold;
    font-size: 4rem;
    margin: 2rem 1rem 2rem 0
}

.our-branding .brand.color-palette .alph>div {
    flex: 3
}

.our-branding .brand.color-palette .alph>div p:first-child {
    font-family: Metropolis-bold
}

.our-branding .brand table {
    border-collapse: collapse
}

.our-branding .brand table td {
    line-height: 1.5rem;
    padding-bottom: 1vh
}

.our-branding .brand table tr td:nth-child(2) {
    padding-left: 2vh
}

.our-branding .brand table tr td button {
    background-color: #fefe90;
    border: none;
    color: #000;
    padding: 1rem
}

.our-branding .brand table tr td a {
    letter-spacing: .1rem;
    margin: 0 1rem
}

.our-branding .brand.mascots {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left
}

.our-branding .brand.mascots h2 {
    font-family: Metropolis-Bold
}

.our-branding .brand.mascots p {
    line-height: 1.5rem
}

.our-branding .brand img {
    height: auto;
    width: 100%
}

.black,
.black .our-branding {
    background-color: #181818;
    color: #fff;
    font-family: Metropolis-Bold;
    padding-top: 5vh;
    text-align: center
}

.black.no-padding {
    padding-top: 0
}

.black.no-padding .our-branding {
    margin-top: 0;
    padding-top: 2vh
}

.black p {
    font-family: Metropolis-Light;
    margin: auto;
    width: 70%
}

.black .our-branding .brand {
    padding: 0
}

.black.single-image .our-branding .brand {
    flex: 1 0 100%;
    margin-bottom: 3vh;
    max-width: none
}

.black.trible-image {
    padding-bottom: 5vh
}

.black.trible-image .our-branding .brand {
    flex: 1 0 28%;
    max-width: 70vh;
    min-width: 30vh;
    padding: 1vh
}

.mockups {
    margin-top: 20vh
}

.mockups h2 {
    font-family: Metropolis-Bold;
    font-size: 6vw;
    text-align: center
}

.mockups h2 span {
    color: #222;
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff
}

.mockups .grid {
    -moz-columns: 40vh 3;
    columns: 40vh 3
}

.mockups .grid div>div {
    padding: 3vh 0
}

.mockups .grid div img {
    height: auto;
    width: 100%
}

@media screen and (min-width:1500px) {
    .cover .mask {
        left: -30vw;
        top: -30vh
    }
}

@media screen and (min-width:1800px) {
    .cover .mask {
        left: -30vw;
        top: -40vh
    }
}

@media screen and (max-width:990px) {
    body {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .cover .mask {
        left: -30vw;
        top: -10vh
    }

    h2 {
        font-size: 4rem;
        line-height: 4rem
    }

    .download {
        left: 13vw;
        top: 38vw;
        width: 20vw
    }

    .download>div {
        flex-basis: 100%
    }
}

@media screen and (max-width:672px) {
    html {
        font-size: 12px
    }

    h2 {
        font-size: 3rem;
        line-height: 3rem
    }

    .cover .mask {
        left: -30vw;
        top: -5vh
    }

    .logo {
        margin-top: 5vh
    }

    .branding h2,
    .onbording h2 {
        font-size: 3rem;
        line-height: 3rem
    }

    .width-50 {
        margin: auto;
        width: 70%
    }

    h3 {
        font-size: 2rem;
        line-height: 2rem
    }

    .our-branding {
        font-size: .8rem
    }

    .download {
        left: 13vw;
        top: 36vw;
        width: 26vw
    }

    .mobile-screen>div {
        flex-basis: 100%
    }

    .our-branding .branding {
        margin: 0
    }
}

@media screen and (max-width:300px) {
    html {
        font-size: 10px
    }

    .cover .mask {
        left: -30vw;
        top: -5vh
    }

    .branding h2,
    .onbording h2,
    h2 {
        font-size: 2rem;
        line-height: 2rem
    }

    .width-50 {
        margin: auto;
        width: 90%
    }

    h3 {
        font-size: 1.5rem;
        line-height: 1.5rem
    }

    .our-branding {
        font-size: .8rem
    }

    .download {
        left: 5%;
        position: relative;
        top: 0;
        width: 90%
    }

    .download>div {
        flex-basis: 40%
    }

    .blue-bg .section>span {
        line-height: 3rem
    }
}