body {
    background-image: url("../img/social_background_03.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    background-color: #f3f2f4;
}

.dialog {
    position: relative;
    width: 40%;
    height: auto;
    margin-top: 25vh;
    margin-left: 15vh;
    background: rgba(255,255,255,0.9);
    border-radius: 15px;
    text-transform: uppercase !important;
    box-shadow: 0 0 30px 0 rgba(255,255,255, 0.8);
}

.box-text {
    font-family: ff-meta-serif-web-pro, serif;
    text-align: center;
    font-size: 3.7rem;
}

.box-button {
    position: relative;
    background-image: linear-gradient(20deg, #004085 60%, #004085 60%);
    padding-bottom: 2vh;
    border: none;
    border-radius: 15px;
    padding: 0vh 4vh;
    margin-bottom: 2vh;
    z-index: 1;
}

    .box-button::before {
        position: absolute;
        content: "";
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-image: linear-gradient(20deg, #007bff 60%, #007bff 60%);
        z-index: -1;
        transition: opacity 0.1s linear;
        opacity: 0;
        border-radius: 15px;
    }

    .box-button:hover::before {
        opacity: 1;
    }

.white {
    color: #fff;
}

#box1 {
    z-index: 20;
}

#box2 {
    z-index: 19;
    display: none;
}

#box3 {
    z-index: 18;
    display: none;
}

    #box3 .box-text, #box2 .box-text {
        font-size: 3rem;
    }

@media (max-width:1200px) {
    .box-text {
        font-size: 3rem;
    }
}

@media (max-width:992px) {
    .box-text {
        font-size: 2.5rem;
    }

    #box3 .box-text, #box2 .box-text {
        font-size: 2rem;
    }

    .dialog {
        width: 45%;
    }

    body {
        background-size: 150%;
    }
}


@media (max-width:768px) {
    .box-text {
        font-size: 2rem;
    }

    #box3 .box-text, #box2 .box-text {
        font-size: 1.5rem;
    }

    .dialog {
        width: 50%;
    }
}

@media (max-width:576px) {
    .box-text {
        font-size: 2.5rem;
    }

    #box3 .box-text, #box2 .box-text {
        font-size: 2rem;
    }

    .dialog {
        width: 60%;
        margin-left: 12vh;
    }
}

@media (max-width:530px) {
    .box-text {
        font-size: 2.0rem;
    }

    #box3 .box-text, #box2 .box-text {
        font-size: 1.5rem;
    }

    .dialog {
        width: 60%;
        margin-left: 10vh;
    }
}

@media (max-width:450px) {
    .box-text {
        font-size: 2.0rem;
    }

    #box3 .box-text, #box2 .box-text {
        font-size: 1.5rem;
    }

    .dialog {
        width: 70%;
        margin-left: 7vh;
    }
}


@media (max-width:380px) {
    .box-text {
        font-size: 2.0rem;
    }

    #box3 .box-text, #box2 .box-text {
        font-size: 1.5rem;
    }

    .dialog {
        width: 80%;
        margin-left: 4vh;
    }
}

@media (max-width:330px) {
    .box-text {
        font-size: 2.0rem;
    }

    #box3 .box-text, #box2 .box-text {
        font-size: 1.2rem;
    }

    .dialog {
        width: 90%;
        margin-left: 2vh;
    }
}