.dp-wrapper {
    display: flex;
    position: relative;
    outline: none;
    border: solid 0 transparent;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    background-attachment: scroll;
    padding: 0;
    margin: 4rem 0;
}

.dp-wrapper.hide-on-xs:not(.is-admin) {
    display: none;
}

.dp-wrapper.is-admin {
    border: solid 1px #ccc;
    padding: 5px;
}

.dp-wrapper.is-admin .status-notification {
    position: absolute;
    right: 0;
    top: 0;
    background: #eee;
    font-size: 12px;
    padding: 5px 10px;
}

.dp-wrapper-inner {
    z-index: 1;
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-right: auto;
    margin-left: auto;
}

.dp-wrapper.alignfull > .dp-wrapper-inner {
    padding-right: 15px;
    padding-left: 15px;
}

.dp-wrapper.content-align-top > .dp-wrapper-inner {
    align-self: flex-start;
}

.dp-wrapper.content-align-center > .dp-wrapper-inner {
    align-self: center;
}

.dp-wrapper.content-align-bottom > .dp-wrapper-inner {
    align-self: flex-end;
}

.dp-wrapper .dp-wrapper-inner.full-width {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.dp-wrapper .dp-wrapper-inner.narrow-width {
    max-width: 800px;
}

.is-admin .dp-wrapper .dp-wrapper-inner {
    padding-left: 15px;
    padding-right: 15px;
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

    .dp-wrapper.hide-on-xs:not(.is-admin) {
        display: block;
    }

    .dp-wrapper.hide-on-sm:not(.is-admin) {
        display: none;
    }

    .dp-wrapper-inner {
        max-width: 540px;
    }

}


/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .dp-wrapper.hide-on-sm:not(.is-admin) {
        display: block;
    }

    .dp-wrapper.hide-on-md:not(.is-admin) {
        display: none;
    }

    .dp-wrapper-inner {
        max-width: 720px;
    }

}


/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .dp-wrapper.hide-on-md:not(.is-admin) {
        display: block;
    }

    .dp-wrapper.hide-on-lg:not(.is-admin) {
        display: none;
    }

    .dp-wrapper-inner {
        max-width: 960px;
    }

}


/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    .dp-wrapper.hide-on-lg:not(.is-admin) {
        display: block;
    }

    .dp-wrapper.hide-on-xl:not(.is-admin) {
        display: none;
    }

    .dp-wrapper-inner {
        max-width: 1140px;
    }

}


/* Extra extra large devices (x-large desktops, 1400px and up) */
@media (min-width: 1400px) {

    .dp-wrapper-inner {
        max-width: 1320px;
    }

}