body {
    background-image: url("../IMG/Insta_BG_1.jpg");
    background-repeat: no-repeat;
    background-size:auto;
    background-position:top right;
}

.dialog {
    position:relative;
    width:40%;
    height:auto;
    margin-top:25vh;
    margin-left:15vh;
    background-color:#fff;
    border-radius:15px;
    text-transform:uppercase !important;
}

.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, #ddc693 60%, #c5af7e 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, #d1ae62 60%, #bd9c52 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;
    }
}