body {
    background-image: url("../IMG/Insta_BG_1.jpg");
    background-repeat: no-repeat;
    background-size:cover;
    background-position:top right;
    background-color: #f3f2f4;
}
#footer{
    position:absolute;
    bottom:0;
}

.dialog {
    position:relative;
    width:40%;
    height:auto;
    margin-top:45vh;
    margin-left:5vh;
    background-color:#ffffff60;
    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, #BF435E 60%, #BF435E 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;
    }
}