html {
    width: 100%;
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}
.bplarge, .bp1200, .bp992, .bp768, .bp480, .bp320 {
    display: none;
}
.bp {
    width: 100%;
    height: 100%;
}
.bp span {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}
.exactsize {
    position: absolute;
    width: 100%;
    text-align: center;
    top: calc(50% - 56px);
}


@media (min-width: 1201px) {
    .bplarge {
        display: block;
        background: #FF0000;
    }
}
@media (max-width: 1200px) and (min-width: 993px) {
    .bp1200 {
        display: block;
        background: #FF6600;
    }
}
@media (max-width: 992px) and (min-width: 769px) {
    .bp992 {
        display: block;
        background: #FFcc00;
    }
}
@media (max-width: 768px) and (min-width: 481px) {
    .bp768 {
        display: block;
        background: #ccff00;
    }
}
@media (max-width: 480px) and (min-width: 321px) {
    .bp480 {
        display: block;
        background: #2ee400;
    }
}
@media (max-width: 320px) {
    .bp320 {
        display: block;
        background: #009F00;
    }
}