*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    line-height: 1.2;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

ul,
ol {
    list-style: none;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: inherit;
    font-size: inherit;
}

body{background-color: #000;}
section,footer {  
    font-family: "Manrope", sans-serif;
    position: relative;
}
@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Bold.ttf") format("ttf");
    src: url("../fonts/Manrope-Bold.woff") format("woff");
    src: url("../fonts/Manrope-Bold.woff2") format("woff2");
    font-weight: 700;
}
section img, footer img{
    width: 100%;
}
.button{
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.25vw;
    position: absolute;
    border-radius: 0.7vw;
    line-height: 140%;
    font-weight: 700;
}
.button.orange{
    background: #FA4C05;
    color: #FFF;
}
.button.grey{
    background: #2F3849;
    color: #FFF;
}
.button.orange.arrow{
    padding: 1vw 2.8vw 1vw 2.2vw;
    height: 4vw;
}
.button.arrow:after{
    content: "";
    background: url("../images/arrow.svg") center no-repeat;
    background-size: contain;
    position: relative;
    left: .75vw;
    height: 1.5vw;
    width: 1.5vw;
    transform: translate(0, 5%);
    pointer-events: none;
}
.club .button.orange{
    right: 14.1%;
    top: 46%;
}
.howtojoin .button.orange{
    right: 27.75%;
    top: 79.25%;
    padding: 0.833vw 1.667vw;
    height: 3.5vw;
}
.howtojoin .button.grey{
    right: 6.25%;
    top: 79.25%;
    padding: 0.833vw 1.667vw;
    height: 3.5vw;
}
.alreadyown .button.orange{
    right: 13.9%;
    top: 66%;
}
@media(min-width:681px){
    .mobile-image, .mobile-block{
        display: none;
    }
}
@media(max-width:680px){
    .pc-image, .pc-block{
        display: none;
    }
    .button{        
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 4.5vw;
        width: 52vw;
        border-radius: 2.5vw;
        height: 16.5vw;
    }
    .button.orange.arrow{
        padding: 1.2vw 5.8vw 1.2vw 4.2vw;
    }
    .button.arrow:after{
        content: "";
        background: url("../images/arrow.svg") center no-repeat;
        background-size: contain;
        position: relative;
        left: 2.5vw;
        height: 6.5vw;
        width: 6.5vw;
        transform: translate(0, 5%);
        pointer-events: none;
    }
    .club .button.orange{
        right: 50%;
        transform: translate(50%, 0);
        top: 32.5%;
        height: 16.5vw;
        width: 60vw;
    }
    .howtojoin .button.orange{
        right: auto;
        left: 5.1%;
        top: 56.25%;
        padding: 2vw 8vw;
        height: 12.5vw;
        width: 44.25vw;
        text-align: center;
        line-height: 100%;
        font-size: 4vw;
    }
    .howtojoin .button.grey{
        right: 5.1%;
        top: 56.25%;
        padding: 2vw 4vw;
        height: 12.5vw;
        width: 44.25vw;
        text-align: center;
        line-height: 100%;
        font-size: 4vw;
    }
    .alreadyown .button.orange{
        right: 50%;
        transform: translate(50%, 0);
        top: 83.5%;
        height: 16.5vw;
        width: 60vw;
    }
}