.triangle {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 10px solid transparent;
    border-top: 25px solid #007bff;
}

.box1 {
    left: 10%;
    z-index: 3;
}

.box2 {
    right: 2%;
    top: 200px;
    z-index: 2;
}

.box3 {
    left: 2%;
    top: 300px;
    z-index: 1;
}

@media only screen and (min-width: 881px) {
    .box1 {
        left: 10%;
    }

    .box2 {
        right: 2%;
        top: 200px;
    }

    .box3 {
        left: 2%;
        top: 300px;
    }

    .circleBoxContainer {
        min-height: 700px;
    }
}

@media only screen and (min-width: 801px) and (max-width: 880px) {
    .box1 {
        left: 10%;
    }

    .box2 {
        right: 2%;
        top: 250px;
    }

    .box3 {
        left: 2%;
        top: 400px;
    }

    .circleBoxContainer {
        min-height: 790px;
    }
}

@media only screen and (max-width: 800px) {
    .box1 {
        left: 10%;
    }

    .box2 {
        right: 2%;
        top: 300px;
    }

    .box3 {
        left: 2%;
        top: 550px;
    }

    .circleBoxContainer {
        min-height: 950px;
    }
}